convert icon component to ts

src/popup/app/app.js

@@ -59,7 +59,6 @@ require('./directives/formDirective.js');
 require('./directives/stopClickDirective.js');
 require('./directives/stopPropDirective.js');
 require('./directives/fallbackSrcDirective.js');
-require('./components/iconComponent.js');
 require('./components/actionButtonsComponent.js');
 require('./services/backgroundService.js');
 require('./services/authService.js');

src/popup/app/components/cipher-items.component.ts

@@ -15,7 +15,6 @@ class CipherItemsController implements ng.IController {
     select(cipher: any) {
         return this.onSelected()(cipher);
     }
-
 }
 
 export const CipherItemsComponent = {

src/popup/app/components/components.module.ts

@@ -1,7 +1,9 @@
 import * as angular from 'angular';
 import { CipherItemsComponent } from './cipher-items.component';
+import { IconComponent } from './icon.component';
 
 export default angular
     .module('bit.components', [])
     .component('cipherItems', CipherItemsComponent)
+    .component('icon', IconComponent)
     .name;

src/popup/app/components/icon.component.html

@@ -1,4 +1,4 @@
-<div class="icon">
+<div class="icon">
     <img ng-src="{{$ctrl.image}}" fallback-src="{{$ctrl.fallbackImage}}" ng-if="$ctrl.imageEnabled && $ctrl.image" alt="" />
     <i class="fa fa-fw fa-lg {{$ctrl.icon}}" ng-if="!$ctrl.imageEnabled || !$ctrl.image"></i>
 </div>

src/popup/app/components/icon.component.ts

@@ -0,0 +1,91 @@
+import * as template from './icon.component.html';
+
+class IconController implements ng.IController {
+    onSelected: Function;
+    onView: Function;
+
+    cipher: any;
+    icon: string;
+    image: string;
+    fallbackImage: string;
+    imageEnabled: boolean;
+
+    private iconsUrl: string;
+
+    constructor(private stateService: any, private constantsService: any, private environmentService: any) {
+        this.imageEnabled = stateService.getState('faviconEnabled');
+
+        this.iconsUrl = environmentService.iconsUrl;
+        if (!this.iconsUrl) {
+            if (environmentService.baseUrl) {
+                this.iconsUrl = environmentService.baseUrl + '/icons';
+            }
+            else {
+                this.iconsUrl = 'https://icons.bitwarden.com';
+            }
+        }
+    }
+
+    $onChanges() {
+        switch (this.cipher.type) {
+            case this.constantsService.cipherType.login:
+                this.icon = 'fa-globe';
+                this.setLoginIcon();
+                break;
+            case this.constantsService.cipherType.secureNote:
+                this.icon = 'fa-sticky-note-o';
+                break;
+            case this.constantsService.cipherType.card:
+                this.icon = 'fa-credit-card';
+                break;
+            case this.constantsService.cipherType.identity:
+                this.icon = 'fa-id-card-o';
+                break;
+            default:
+                break;
+        }
+    }
+
+    private setLoginIcon() {
+        if (this.cipher.login.uri) {
+            let hostnameUri = this.cipher.login.uri;
+            let isWebsite = false;
+
+            if (hostnameUri.indexOf('androidapp://') === 0) {
+                this.icon = 'fa-android';
+                this.image = null;
+            }
+            else if (hostnameUri.indexOf('iosapp://') === 0) {
+                this.icon = 'fa-apple';
+                this.image = null;
+            }
+            else if (this.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('.') > -1) {
+                hostnameUri = 'http://' + hostnameUri;
+                isWebsite = true;
+            }
+            else if (this.imageEnabled) {
+                isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > -1;
+            }
+
+            if (this.imageEnabled && isWebsite) {
+                try {
+                    const url = new URL(hostnameUri);
+                    this.image = this.iconsUrl + '/' + url.hostname + '/icon.png';
+                    this.fallbackImage = chrome.extension.getURL('images/fa-globe.png');
+                }
+                catch (e) { }
+            }
+        }
+        else {
+            this.image = null;
+        }
+    }
+}
+
+export const IconComponent = {
+    bindings: {
+        cipher: '<',
+    },
+    controller: IconController,
+    template,
+};

src/popup/app/components/iconComponent.js

@@ -1,78 +0,0 @@
-angular
-    .module('bit.components')
-
-    .component('icon', {
-        bindings: {
-            cipher: '<'
-        },
-        templateUrl: 'app/components/views/icon.html',
-        controller: function (stateService, constantsService, environmentService) {
-            var ctrl = this;
-            ctrl.imageEnabled = stateService.getState('faviconEnabled');
-
-            var iconsUrl = environmentService.iconsUrl;
-            if (!iconsUrl) {
-                if (environmentService.baseUrl) {
-                    iconsUrl = environmentService.baseUrl + '/icons';
-                }
-                else {
-                    iconsUrl = 'https://icons.bitwarden.com';
-                }
-            }
-
-            ctrl.$onChanges = function () {
-                switch (ctrl.cipher.type) {
-                    case constantsService.cipherType.login:
-                        ctrl.icon = 'fa-globe';
-                        setLoginIcon(ctrl.cipher);
-                        break;
-                    case constantsService.cipherType.secureNote:
-                        ctrl.icon = 'fa-sticky-note-o';
-                        break;
-                    case constantsService.cipherType.card:
-                        ctrl.icon = 'fa-credit-card';
-                        break;
-                    case constantsService.cipherType.identity:
-                        ctrl.icon = 'fa-id-card-o';
-                        break;
-                    default:
-                        break;
-                }
-            };
-
-            function setLoginIcon() {
-                if (ctrl.cipher.login.uri) {
-                    var hostnameUri = ctrl.cipher.login.uri,
-                        isWebsite = false;
-
-                    if (hostnameUri.indexOf('androidapp://') === 0) {
-                        ctrl.icon = 'fa-android';
-                        ctrl.image = null;
-                    }
-                    else if (hostnameUri.indexOf('iosapp://') === 0) {
-                        ctrl.icon = 'fa-apple';
-                        ctrl.image = null;
-                    }
-                    else if (ctrl.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('.') > -1) {
-                        hostnameUri = "http://" + hostnameUri;
-                        isWebsite = true;
-                    }
-                    else if (ctrl.imageEnabled) {
-                        isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > -1;
-                    }
-
-                    if (ctrl.imageEnabled && isWebsite) {
-                        try {
-                            var url = new URL(hostnameUri);
-                            ctrl.image = iconsUrl + '/' + url.hostname + '/icon.png';
-                            ctrl.fallbackImage = chrome.extension.getURL('images/fa-globe.png');
-                        }
-                        catch (e) { }
-                    }
-                }
-                else {
-                    ctrl.image = null;
-                }
-            }
-        }
-    });

tslint.json

@@ -2,34 +2,40 @@
   "extends": "tslint:recommended",
   "rules": {
     "ban-types": {
-        "options": [
+      "options": [
-            ["Object", "Avoid using the `Object` type. Did you mean `object`?"],
+        [ "Object", "Avoid using the `Object` type. Did you mean `object`?" ],
-            ["Boolean", "Avoid using the `Boolean` type. Did you mean `boolean`?"],
+        [ "Boolean", "Avoid using the `Boolean` type. Did you mean `boolean`?" ],
-            ["Number", "Avoid using the `Number` type. Did you mean `number`?"],
+        [ "Number", "Avoid using the `Number` type. Did you mean `number`?" ],
-            ["String", "Avoid using the `String` type. Did you mean `string`?"],
+        [ "String", "Avoid using the `String` type. Did you mean `string`?" ],
-            ["Symbol", "Avoid using the `Symbol` type. Did you mean `symbol`?"]
+        [ "Symbol", "Avoid using the `Symbol` type. Did you mean `symbol`?" ]
-        ]
+      ]
     },
-    "member-access": [true, "no-public"],
+    "member-access": [ true, "no-public" ],
-    "member-ordering": [true, {"order": [
+    "member-ordering": [
-      "public-static-field",
+      true,
-      "public-static-method",
+      {
-      "protected-static-field",
+        "order": [
-      "protected-static-method",
+          "public-static-field",
-      "private-static-field",
+          "public-static-method",
-      "private-static-method",
+          "protected-static-field",
-      "public-instance-field",
+          "protected-static-method",
-      "protected-instance-field",
+          "private-static-field",
-      "private-instance-field",
+          "private-static-method",
-      "public-constructor",
+          "public-instance-field",
-      "protected-constructor",
+          "protected-instance-field",
-      "private-constructor",
+          "private-instance-field",
-      "public-instance-method",
+          "public-constructor",
-      "protected-instance-method",
+          "protected-constructor",
-      "private-instance-method"
+          "private-constructor",
-    ]}],
+          "public-instance-method",
+          "protected-instance-method",
+          "private-instance-method"
+        ]
+      }
+    ],
+    "no-empty": [ true, "allow-empty-catch" ],
     "object-literal-sort-keys": false,
-    "quotemark": [true, "single"],
+    "quotemark": [ true, "single" ],
     "whitespace": [
       true,
       "check-branch",