More directive TS

app/assets/javascripts/directives/views/componentModal.js

@@ -1,36 +0,0 @@
-import template from '%/directives/component-modal.pug';
-
-export class ComponentModalCtrl {
-  /* @ngInject */
-  constructor($element) {
-    this.$element = $element;
-  }
-
-  dismiss() {
-    if(this.onDismiss) {
-      this.onDismiss(this.component);
-    }
-    this.callback && this.callback();
-    const elem = this.$element;
-    const scope = elem.scope();
-    scope.$destroy();
-    elem.remove();
-  }
-}
-
-export class ComponentModal {
-  constructor() {
-    this.restrict = 'E';
-    this.template = template;
-    this.controller = ComponentModalCtrl;
-    this.controllerAs = 'ctrl';
-    this.bindToController = true;
-    this.scope = {
-      show: '=',
-      component: '=',
-      callback: '=',
-      onDismiss: '&',
-      application: '='
-    };
-  }
-}

app/assets/javascripts/directives/views/componentModal.ts

@@ -0,0 +1,50 @@
+import { WebApplication } from './../../application';
+import { SNComponent } from 'snjs';
+import { WebDirective } from './../../types';
+import template from '%/directives/component-modal.pug';
+
+type ComponentModalScope = {
+  component: SNComponent
+  callback: () => void
+  onDismiss: (component: SNComponent) => void
+  application: WebApplication
+}
+
+export class ComponentModalCtrl implements ComponentModalScope {
+  $element: JQLite
+  component!: SNComponent
+  callback!: () => void
+  onDismiss!: (component: SNComponent) => void
+  application!: WebApplication
+  
+  /* @ngInject */
+  constructor($element: JQLite) {
+    this.$element = $element;
+  }
+
+  dismiss() {
+    this.onDismiss && this.onDismiss(this.component);
+    this.callback && this.callback();
+    const elem = this.$element;
+    const scope = elem.scope();
+    scope.$destroy();
+    elem.remove();
+  }
+}
+
+export class ComponentModal extends WebDirective {
+  constructor() {
+    super();
+    this.restrict = 'E';
+    this.template = template;
+    this.controller = ComponentModalCtrl;
+    this.controllerAs = 'ctrl';
+    this.bindToController = true;
+    this.scope = {
+      component: '=',
+      callback: '=',
+      onDismiss: '&',
+      application: '='
+    };
+  }
+}

app/assets/javascripts/directives/views/inputModal.ts

@@ -1,11 +1,25 @@
+import { WebDirective } from './../../types';
 import template from '%/directives/input-modal.pug';
 
-class InputModalCtrl {
+export interface InputModalScope extends Partial<ng.IScope> {
+  type: string
+  title: string
+  message: string
+  callback: (value: string) => void
+}
+
+class InputModalCtrl implements InputModalScope {
+
+  $element: JQLite
+  type!: string
+  title!: string
+  message!: string
+  callback!: (value: string) => void
+  formData = { input: '' }
 
   /* @ngInject */
-  constructor($element) {
+  constructor($element: JQLite) {
     this.$element = $element;
-    this.formData = {};
   }
 
   dismiss() {
@@ -16,13 +30,14 @@ class InputModalCtrl {
   }
 
   submit() {
-    this.callback()(this.formData.input);
+    this.callback(this.formData.input);
     this.dismiss();
   }
 }
 
-export class InputModal {
+export class InputModal extends WebDirective {
   constructor() {
+    super();
     this.restrict = 'E';
     this.template = template;
     this.controller = InputModalCtrl;
@@ -32,7 +47,6 @@ export class InputModal {
       type: '=',
       title: '=',
       message: '=',
-      placeholder: '=',
       callback: '&'
     };
   }

app/assets/javascripts/directives/views/menuRow.ts

@@ -1,8 +1,13 @@
+import { WebDirective } from './../../types';
 import template from '%/directives/menu-row.pug';
 
 class MenuRowCtrl {
 
-  onClick($event) {
+  disabled!: boolean
+  action!: () => void
+  buttonAction!: () => void
+
+  onClick($event: Event) {
     if(this.disabled) {
       return;
     }
@@ -10,7 +15,7 @@ class MenuRowCtrl {
     this.action();
   }
 
-  clickAccessoryButton($event) {
+  clickAccessoryButton($event: Event) {
     if(this.disabled) {
       return;
     }
@@ -19,8 +24,9 @@ class MenuRowCtrl {
   }
 }
 
-export class MenuRow {
+export class MenuRow extends WebDirective {
   constructor() {
+    super();
     this.restrict = 'E';
     this.transclude = true;
     this.template = template;