Structural refactoring (#68)

* Moved html in scss to separate files
* Moved components to designated folders
* Moved logic from html to ts

src/components/popover/popover.component.html

@@ -0,0 +1,58 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="popover-title menu-tabs">
+            <ul class="nav nav-tabs popover-menu">
+                <li #keypress (click)="onListItemClick(0)">
+                    <a class="menu-tabs--item">
+                        <i class="fa fa-keyboard-o"></i>
+                        Keypress
+                    </a>
+                </li>
+                <li #layer (click)="onListItemClick(1)">
+                    <a class="menu-tabs--item">
+                        <i class="fa fa-clone"></i>
+                        Layer
+                    </a>
+                </li>
+                <li #mouse (click)="onListItemClick(2)">
+                    <a class="menu-tabs--item">
+                        <i class="fa fa-mouse-pointer"></i>
+                        Mouse
+                    </a>
+                </li>
+                <li #macro (click)="onListItemClick(3)">
+                    <a class="menu-tabs--item">
+                        <i class="fa fa-play"></i>
+                        Macro
+                    </a>
+                </li>
+                <li #keymap (click)="onListItemClick(4)">
+                    <a class="menu-tabs--item">
+                        <i class="fa fa-keyboard-o"></i>
+                        Keymap
+                    </a>
+                </li>
+                <li #none (click)="onListItemClick(5)">
+                    <a class="menu-tabs--item">
+                        <i class="fa fa-ban"></i>
+                        None
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="row" [ngSwitch]="activeListItemIndex">
+        <keypress-tab #tab *ngSwitchCase="0" class="popover-content"></keypress-tab>
+        <layer-tab #tab *ngSwitchCase="1" class="popover-content"></layer-tab>
+        <mouse-tab #tab *ngSwitchCase="2" class="popover-content"></mouse-tab>
+        <macro-tab #tab *ngSwitchCase="3" class="popover-content"></macro-tab>
+        <keymap-tab #tab *ngSwitchCase="4" class="popover-content"></keymap-tab>
+        <none-tab #tab *ngSwitchCase="5" class="popover-content"></none-tab>
+    </div>
+    <div class="row">
+        <div class="popover-action">
+            <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
+            <button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
+        </div>
+    </div>
+</div>

src/components/popover/popover.component.ts

@@ -16,79 +16,19 @@ import {NgSwitch, NgSwitchCase} from '@angular/common';
 
 import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
 
-import {KeypressTabComponent} from './tab/keypress-tab.component';
-import {LayerTabComponent} from './tab/layer-tab.component';
-import {MouseTabComponent} from './tab/mouse-tab.component';
-import {MacroTabComponent} from './tab/macro-tab.component';
-import {KeymapTabComponent} from './tab/keymap-tab.component';
-import {NoneTabComponent} from './tab/none-tab.component';
+import {KeypressTabComponent} from './tab/keypress/keypress-tab.component';
+import {LayerTabComponent} from './tab/layer/layer-tab.component';
+import {MouseTabComponent} from './tab/mouse/mouse-tab.component';
+import {MacroTabComponent} from './tab/macro/macro-tab.component';
+import {KeymapTabComponent} from './tab/keymap/keymap-tab.component';
+import {NoneTabComponent} from './tab/none/none-tab.component';
 
 import {KeyActionSaver} from './key-action-saver';
 
 @Component({
     moduleId: module.id,
     selector: 'popover',
-    template:
-    `
-        <div class="container-fluid">
-            <div class="row">
-                <div class="popover-title menu-tabs">
-                    <ul class="nav nav-tabs popover-menu">
-                        <li #keypress (click)="onListItemClick(0)">
-                            <a class="menu-tabs--item">
-                                <i class="fa fa-keyboard-o"></i>
-                                Keypress
-                            </a>
-                        </li>
-                        <li #layer (click)="onListItemClick(1)">
-                            <a class="menu-tabs--item">
-                                <i class="fa fa-clone"></i>
-                                Layer
-                            </a>
-                        </li>
-                        <li #mouse (click)="onListItemClick(2)">
-                            <a class="menu-tabs--item">
-                                <i class="fa fa-mouse-pointer"></i>
-                                Mouse
-                            </a>
-                        </li>
-                        <li #macro (click)="onListItemClick(3)">
-                            <a class="menu-tabs--item">
-                                <i class="fa fa-play"></i>
-                                Macro
-                            </a>
-                        </li>
-                        <li #keymap (click)="onListItemClick(4)">
-                            <a class="menu-tabs--item">
-                                <i class="fa fa-keyboard-o"></i>
-                                Keymap
-                            </a>
-                        </li>
-                        <li #none (click)="onListItemClick(5)">
-                            <a class="menu-tabs--item">
-                                <i class="fa fa-ban"></i>
-                                None
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="row" [ngSwitch]="activeListItemIndex">
-                <keypress-tab #tab *ngSwitchCase="0" class="popover-content"></keypress-tab>
-                <layer-tab #tab *ngSwitchCase="1" class="popover-content"></layer-tab>
-                <mouse-tab #tab *ngSwitchCase="2" class="popover-content"></mouse-tab>
-                <macro-tab #tab *ngSwitchCase="3" class="popover-content"></macro-tab>
-                <keymap-tab #tab *ngSwitchCase="4" class="popover-content"></keymap-tab>
-                <none-tab #tab *ngSwitchCase="5" class="popover-content"></none-tab>
-            </div>
-            <div class="row">
-                <div class="popover-action">
-                    <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
-                    <button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
-                </div>
-            </div>
-        </div>
-    `,
+    template: require('./popover.component.html'),
     styles: [require('./popover.component.scss')],
     host: { 'class': 'popover' },
     directives:

src/components/popover/tab/keymap/keymap-tab.component.html

@@ -0,0 +1,12 @@
+<div>
+    <b>Switch to keymap:</b>
+    <select2 [data]="keymapOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
+</div>
+<div>
+    <div>
+        <img *ngIf="selectedKeymapIndex === -1" src="/images/base-layer--blank.svg">
+    </div>
+    <svg-keyboard *ngIf="selectedKeymapIndex !== -1"
+                [moduleConfig]="keymaps[selectedKeymapIndex].layers.elements[0].modules.elements">
+    </svg-keyboard>
+</div>

src/components/popover/tab/keymap/keymap-tab.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
-import {UhkConfigurationService} from '../../../services/uhk-configuration.service';
-import {Keymap} from '../../../../config-serializer/config-items/Keymap';
-import {SvgKeyboardComponent} from '../../svg-keyboard.component';
-import {KeyActionSaver} from '../key-action-saver';
-import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction';
+import {UhkConfigurationService} from '../../../../services/uhk-configuration.service';
+import {Keymap} from '../../../../../config-serializer/config-items/Keymap';
+import {SvgKeyboardComponent} from '../../../svg/keyboard/svg-keyboard.component';
+import {KeyActionSaver} from '../../key-action-saver';
+import {SwitchKeymapAction} from '../../../../../config-serializer/config-items/SwitchKeymapAction';
 
 import {OptionData} from 'ng2-select2/dist/select2';
 import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
@@ -12,21 +12,7 @@ import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
 @Component({
     moduleId: module.id,
     selector: 'keymap-tab',
-    template:
-    `
-        <div>
-            <b>Switch to keymap:</b>
-            <select2 [data]="keymapOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
-        </div>
-        <div>
-            <div>
-                <img *ngIf="selectedKeymapIndex === -1" src="images/base-layer--blank.svg">
-            </div>
-            <svg-keyboard *ngIf="selectedKeymapIndex !== -1"
-                        [moduleConfig]="keymaps[selectedKeymapIndex].layers.elements[0].modules.elements">
-            </svg-keyboard>
-        </div>
-    `,
+    template: require('./keymap-tab.component.html'),
     styles: [require('./keymap-tab.component.scss')],
     directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES]
 })

src/components/popover/tab/keypress-tab.component.ts

@@ -1,96 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { CaptureKeystrokeButtonComponent } from '../widgets/capture-keystroke-button.component';
-
-import { KeyAction } from '../../../../config-serializer/config-items/KeyAction';
-import { KeystrokeAction } from '../../../../config-serializer/config-items/KeystrokeAction';
-import { KeyActionSaver } from '../key-action-saver';
-
-import {IconComponent} from '../widgets/icon.component';
-
-import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
-import {OptionData} from 'ng2-select2/dist/select2';
-
-@Component({
-    moduleId: module.id,
-    selector: 'keypress-tab',
-    template:
-    `
-        <div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
-            <b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
-            <select2 [data]="scanCodeGroups" [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
-            <capture-keystroke-button></capture-keystroke-button>
-        </div>
-        <div class="scancode-options">
-            <b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
-            <div class="btn-toolbar modifiers" style="display:inline-block">
-                <div class="btn-group btn-group-sm modifiers__left">
-                    <button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers">
-                        {{modifier}}
-                    </button>
-                </div>
-                <div class="btn-group btn-group-sm modifiers__right">
-                    <button type="button" class="btn btn-default" *ngFor="let modifier of rightModifiers">
-                        {{modifier}}
-                    </button>
-                </div>
-            </div>
-        </div>
-        <div class="long-press-container">
-            <b class="setting-label" style="position:relative;">Long press action:</b>
-            <select2 [data]="longPressGroups" [width]="140"></select2>
-            <icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
-        </div>
-    `,
-    styles: [require('./keypress-tab.component.scss')],
-    directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES]
-})
-export class KeypressTabComponent implements OnInit, KeyActionSaver {
-    private leftModifiers: string[];
-    private rightModifiers: string[];
-
-    private leftModifierSelects: boolean[];
-    private rightModifierSelects: boolean[];
-
-    private scanCodeGroups: Array<OptionData>;
-    private longPressGroups: Array<OptionData>;
-
-    constructor() {
-        this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
-        this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
-        this.scanCodeGroups = require('json!./scancodes.json');
-        this.longPressGroups = require('json!./longPress.json');
-    }
-
-    ngOnInit() { }
-
-    getKeyAction(): KeystrokeAction {
-        return undefined;
-    }
-
-    keyActionValid(): boolean {
-        return false;
-    }
-
-    toKeyAction(): KeyAction {
-        return undefined;
-    }
-
-    scanCodeTemplateResult: Function = (state: any) => {
-        if (!state.id) {
-            return state.text;
-        }
-
-        if (state.additional && state.additional.explanation) {
-            return jQuery(
-                '<span class="select2-item">'
-                + state.text
-                + '<span class="scancode--searchterm"> '
-                + state.additional.explanation
-                + '</span></span>'
-            );
-        } else {
-            return jQuery('<span class="select2-item">' + state.text + '</span>');
-        }
-    }
-}

src/components/popover/tab/keypress/keypress-tab.component.html

@@ -0,0 +1,25 @@
+<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
+    <b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
+    <select2 [data]="scanCodeGroups" [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
+    <capture-keystroke-button></capture-keystroke-button>
+</div>
+<div class="scancode-options">
+    <b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
+    <div class="btn-toolbar modifiers" style="display:inline-block">
+        <div class="btn-group btn-group-sm modifiers__left">
+            <button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers">
+                {{modifier}}
+            </button>
+        </div>
+        <div class="btn-group btn-group-sm modifiers__right">
+            <button type="button" class="btn btn-default" *ngFor="let modifier of rightModifiers">
+                {{modifier}}
+            </button>
+        </div>
+    </div>
+</div>
+<div class="long-press-container">
+    <b class="setting-label" style="position:relative;">Long press action:</b>
+    <select2 [data]="longPressGroups" [width]="140"></select2>
+    <icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
+</div>

src/components/popover/tab/keypress/keypress-tab.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+
+import { CaptureKeystrokeButtonComponent } from '../../widgets/capture-keystroke/capture-keystroke-button.component';
+
+import { KeyAction } from '../../../../../config-serializer/config-items/KeyAction';
+import { KeystrokeAction } from '../../../../../config-serializer/config-items/KeystrokeAction';
+import { KeyActionSaver } from '../../key-action-saver';
+
+import {IconComponent} from '../../widgets/icon/icon.component';
+
+import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
+import {OptionData} from 'ng2-select2/dist/select2';
+
+@Component({
+    moduleId: module.id,
+    selector: 'keypress-tab',
+    template: require('./keypress-tab.component.html'),
+    styles: [require('./keypress-tab.component.scss')],
+    directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES]
+})
+export class KeypressTabComponent implements OnInit, KeyActionSaver {
+    private leftModifiers: string[];
+    private rightModifiers: string[];
+
+    private leftModifierSelects: boolean[];
+    private rightModifierSelects: boolean[];
+
+    private scanCodeGroups: Array<OptionData>;
+    private longPressGroups: Array<OptionData>;
+
+    constructor() {
+        this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
+        this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
+        this.scanCodeGroups = require('json!./scancodes.json');
+        this.longPressGroups = require('json!./longPress.json');
+    }
+
+    ngOnInit() { }
+
+    getKeyAction(): KeystrokeAction {
+        return undefined;
+    }
+
+    keyActionValid(): boolean {
+        return false;
+    }
+
+    toKeyAction(): KeyAction {
+        return undefined;
+    }
+
+    scanCodeTemplateResult: Function = (state: any) => {
+        if (!state.id) {
+            return state.text;
+        }
+
+        if (state.additional && state.additional.explanation) {
+            return jQuery(
+                '<span class="select2-item">'
+                + state.text
+                + '<span class="scancode--searchterm"> '
+                + state.additional.explanation
+                + '</span></span>'
+            );
+        } else {
+            return jQuery('<span class="select2-item">' + state.text + '</span>');
+        }
+    }
+}

src/components/popover/tab/layer/layer-tab.component.html

@@ -0,0 +1,7 @@
+<select2 [data]="toggleData" (valueChanged)="toggleChanged($event)"></select2>
+<span>the</span>
+<select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2>
+<span [ngSwitch]="toggle">
+     <template ngSwitchCase="true">layer by pressing this key.</template>
+     <template ngSwitchDefault="false">layer by holding this key.</template>
+</span>

src/components/popover/tab/layer/layer-tab.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 import {NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 
-import { LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/SwitchLayerAction';
-import { KeyActionSaver } from '../key-action-saver';
+import { LayerName, SwitchLayerAction } from '../../../../../config-serializer/config-items/SwitchLayerAction';
+import { KeyActionSaver } from '../../key-action-saver';
 
 import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
 import {OptionData} from 'ng2-select2/dist/select2';
@@ -11,16 +11,7 @@ import {OptionData} from 'ng2-select2/dist/select2';
 @Component({
     moduleId: module.id,
     selector: 'layer-tab',
-    template:
-    `
-        <select2 [data]="toggleData" (valueChanged)="toggleChanged($event)"></select2>
-        <span>the</span>
-        <select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2>
-        <span [ngSwitch]="toggle">
-             <template ngSwitchCase="true">layer by pressing this key.</template>
-             <template ngSwitchDefault="false">layer by holding this key.</template>
-        </span>
-    `,
+    template: require('./layer-tab.component.html'),
     styles: [require('./layer-tab.component.scss')],
     directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchCase, NgSwitchDefault]
 })

src/components/popover/tab/macro/macro-item.component.html

@@ -0,0 +1,5 @@
+<icon *ngIf="moveable" name="option-vertical"></icon>
+<icon [name]="iconName"></icon>
+<div> {{ title }} </div>
+<icon *ngIf="deletable" name="trash"></icon>
+<icon *ngIf="editable" name="pencil"></icon>

src/components/popover/tab/macro/macro-item.component.ts

@@ -1,35 +1,28 @@
 import { Component, OnInit, OnChanges, Input } from '@angular/core';
 
-import {MacroAction} from '../../../../config-serializer/config-items/MacroAction';
-import {DelayMacroAction} from '../../../../config-serializer/config-items/DelayMacroAction';
-import {HoldKeyMacroAction} from '../../../../config-serializer/config-items/HoldKeyMacroAction';
-import {HoldModifiersMacroAction} from '../../../../config-serializer/config-items/HoldModifiersMacroAction';
-import {HoldMouseButtonsMacroAction} from '../../../../config-serializer/config-items/HoldMouseButtonsMacroAction';
-import {MoveMouseMacroAction} from '../../../../config-serializer/config-items/MoveMouseMacroAction';
-import {PressKeyMacroAction} from '../../../../config-serializer/config-items/PressKeyMacroAction';
-import {PressModifiersMacroAction} from '../../../../config-serializer/config-items/PressModifiersMacroAction';
-import {PressMouseButtonsMacroAction} from '../../../../config-serializer/config-items/PressMouseButtonsMacroAction';
-import {ReleaseKeyMacroAction} from '../../../../config-serializer/config-items/ReleaseKeyMacroAction';
-import {ReleaseModifiersMacroAction} from '../../../../config-serializer/config-items/ReleaseModifiersMacroAction';
-import {ReleaseMouseButtonsMacroAction} from '../../../../config-serializer/config-items/ReleaseMouseButtonsMacroAction';
-import {ScrollMouseMacroAction} from '../../../../config-serializer/config-items/ScrollMouseMacroAction';
-import {TextMacroAction} from '../../../../config-serializer/config-items/TextMacroAction';
+import {MacroAction} from '../../../../../config-serializer/config-items/MacroAction';
+import {DelayMacroAction} from '../../../../../config-serializer/config-items/DelayMacroAction';
+import {HoldKeyMacroAction} from '../../../../../config-serializer/config-items/HoldKeyMacroAction';
+import {HoldModifiersMacroAction} from '../../../../../config-serializer/config-items/HoldModifiersMacroAction';
+import {HoldMouseButtonsMacroAction} from '../../../../../config-serializer/config-items/HoldMouseButtonsMacroAction';
+import {MoveMouseMacroAction} from '../../../../../config-serializer/config-items/MoveMouseMacroAction';
+import {PressKeyMacroAction} from '../../../../../config-serializer/config-items/PressKeyMacroAction';
+import {PressModifiersMacroAction} from '../../../../../config-serializer/config-items/PressModifiersMacroAction';
+import {PressMouseButtonsMacroAction} from '../../../../../config-serializer/config-items/PressMouseButtonsMacroAction';
+import {ReleaseKeyMacroAction} from '../../../../../config-serializer/config-items/ReleaseKeyMacroAction';
+import {ReleaseModifiersMacroAction} from '../../../../../config-serializer/config-items/ReleaseModifiersMacroAction';
+import {ReleaseMouseButtonsMacroAction} from '../../../../../config-serializer/config-items/ReleaseMouseButtonsMacroAction';
+import {ScrollMouseMacroAction} from '../../../../../config-serializer/config-items/ScrollMouseMacroAction';
+import {TextMacroAction} from '../../../../../config-serializer/config-items/TextMacroAction';
 
-import {IconComponent} from '../widgets/icon.component';
+import {IconComponent} from '../../widgets/icon/icon.component';
 
-import {KeyModifiers}  from '../../../../config-serializer/config-items/KeyModifiers';
+import {KeyModifiers}  from '../../../../../config-serializer/config-items/KeyModifiers';
 
 @Component({
     moduleId: module.id,
     selector: 'macro-item',
-    template:
-    `
-         <icon *ngIf="moveable" name="option-vertical"></icon>
-         <icon [name]="iconName"></icon>
-         <div> {{ title }} </div>
-         <icon *ngIf="deletable" name="trash"></icon>
-         <icon *ngIf="editable" name="pencil"></icon>
-    `,
+    template: require('./macro-item.component.html'),
     styles: [require('./macro-item.component.scss')],
     directives: [IconComponent]
 })

src/components/popover/tab/macro/macro-tab.component.html

@@ -0,0 +1,11 @@
+<div class="macro-selector">
+    <b> Play macro: </b>
+    <select2 [data]="macrosOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
+</div>
+<div class="macro-action-container">
+    <template [ngIf]="selectedMacroIndex >= 0">
+        <macro-item *ngFor="let macroAction of macros[selectedMacroIndex].macroActions.elements"
+                    [macroAction]="macroAction">
+        </macro-item>
+    </template>
+</div>

src/components/popover/tab/macro/macro-tab.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
-import { UhkConfigurationService } from '../../../services/uhk-configuration.service';
-import { Macro } from '../../../../config-serializer/config-items/Macro';
-import { PlayMacroAction } from '../../../../config-serializer/config-items/PlayMacroAction';
+import { UhkConfigurationService } from '../../../../services/uhk-configuration.service';
+import { Macro } from '../../../../../config-serializer/config-items/Macro';
+import { PlayMacroAction } from '../../../../../config-serializer/config-items/PlayMacroAction';
 
-import { KeyActionSaver } from '../key-action-saver';
+import { KeyActionSaver } from '../../key-action-saver';
 import { MacroItemComponent } from './macro-item.component';
 
 import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
@@ -13,19 +13,7 @@ import {OptionData} from 'ng2-select2/dist/select2';
 @Component({
     moduleId: module.id,
     selector: 'macro-tab',
-    template: `
-        <div class="macro-selector">
-            <b> Play macro: </b>
-            <select2 [data]="macrosOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
-        </div>
-        <div class="macro-action-container">
-            <template [ngIf]="selectedMacroIndex >= 0">
-                <macro-item *ngFor="let macroAction of macros[selectedMacroIndex].macroActions.elements"
-                            [macroAction]="macroAction">
-                </macro-item>
-            </template>
-        </div>
-    `,
+    template: require('./macro-tab.component.html'),
     styles: [require('./macro-tab.component.scss')],
     directives: [MacroItemComponent, SELECT2_DIRECTIVES]
 })

src/components/popover/tab/mouse-tab.component.ts

@@ -1,148 +0,0 @@
-import { Component, OnInit, Renderer} from '@angular/core';
-import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
-
-import { KeyActionSaver } from '../key-action-saver';
-import {MouseAction, MouseActionParam} from '../../../../config-serializer/config-items/MouseAction';
-
-@Component({
-    moduleId: module.id,
-    selector: 'mouse-tab',
-    template:
-    `
-        <div class="mouse-action col-sm-4">
-            <ul class="nav nav-pills nav-stacked">
-                <li (click)="changePage(0)" [ngClass]="{active: selectedIndex===0}"><a>     Move    </a></li>
-                <li (click)="changePage(1)" [ngClass]="{active: selectedIndex===1}"><a>     Scroll  </a></li>
-                <li (click)="changePage(2)" [ngClass]="{active: selectedIndex===2}"><a>     Click   </a></li>
-                <li (click)="changePage(3)" [ngClass]="{active: selectedIndex===3}"><a>     Speed   </a></li>
-            </ul>
-        </div>
-        <div class="details col-sm-8" [ngSwitch]="selectedIndex">
-            <div *ngSwitchCase="0" class="mouse__config mouse__config--move text-center">
-                <div class="row">
-                    <button type="button" class="btn btn-default btn-lg"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.moveUp)">
-                        <i class="fa fa-arrow-up"></i>
-                    </button>
-                </div>
-                <div class="row">
-                    <button type="button" class="btn btn-default btn-lg"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.moveLeft)">
-                        <i class="fa fa-arrow-left"></i>
-                    </button>
-                    <button type="button" class="btn btn-default btn-lg btn-placeholder">
-                        <i class="fa fa-square"></i>
-                    </button>
-                    <button type="button" class="btn btn-default btn-lg"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.moveRight)">
-                        <i class="fa fa-arrow-right"></i>
-                    </button>
-                </div>
-                <div class="row">
-                    <button type="button" class="btn btn-default btn-lg"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.moveDown)">
-                        <i class="fa fa-arrow-down"></i>
-                    </button>
-                </div>
-            </div>
-            <div *ngSwitchCase="1" class="mouse__config mouse__config--scroll text-center">
-                <div class="row">
-                    <button type="button" class="btn btn-default btn-lg"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.scrollUp)">
-                        <i class="fa fa-angle-double-up"></i>
-                    </button>
-                </div>
-                <div class="row">
-                    <button type="button" class="btn btn-default btn-lg"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.scrollLeft)">
-                        <i class="fa fa-angle-double-left"></i>
-                    </button>
-                    <button type="button" class="btn btn-default btn-lg btn-placeholder">
-                        <i class="fa fa-square"></i>
-                    </button>
-                    <button type="button" class="btn btn-default btn-lg"
-                        (click)="onMouseActionClick($event.target, MouseActionParam.scrollRight)">
-                        <i class="fa fa-angle-double-right"></i>
-                    </button>
-                </div>
-                <div class="row">
-                    <button type="button" class="btn btn-default btn-lg"
-                        (click)="onMouseActionClick($event.target, MouseActionParam.scrollDown)">
-                        <i class="fa fa-angle-double-down"></i>
-                    </button>
-                </div>
-            </div>
-            <div *ngSwitchCase="2" class="mouse__config mouse__config--click">
-                <div class="btn-group col-xs-12" role="group">
-                    <button type="button" class="btn btn-default col-xs-4"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.leftClick)">Left</button>
-                    <button type="button" class="btn btn-default col-xs-4"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.middleClick)">Middle</button>
-                    <button type="button" class="btn btn-default col-xs-4"
-                            (click)="onMouseActionClick($event.target, MouseActionParam.rightClick)">Right</button>
-                </div>
-            </div>
-            <div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
-                <div class="help-text--mouse-speed text-left">
-                    <p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
-                    <p>You can set the multiplier in <a href="#" title="link to the setting">link to setting</a>.</p>
-                </div>
-                <div class="btn-group btn-group-lg" role="group">
-                    <button type="button" class="btn btn-default"
-                        (click)="onMouseActionClick($event.target, MouseActionParam.decelerate)">-</button>
-                    <button type="button" class="btn btn-default"
-                        (click)="onMouseActionClick($event.target, MouseActionParam.accelerate)">+</button>
-                </div>
-            </div>
-            <div *ngSwitchDefault>
-            </div>
-        </div>
-    `,
-    styles: [require('./mouse-tab.component.scss')],
-    directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
-})
-export class MouseTabComponent implements OnInit, KeyActionSaver {
-    private mouseActionParam: MouseActionParam;
-    private selectedIndex: number;
-    private selectedButton: HTMLButtonElement;
-    private MouseActionParam = MouseActionParam;
-
-    constructor(private renderer: Renderer) {
-        this.selectedIndex = 0;
-    }
-
-    ngOnInit() { }
-
-    keyActionValid(): boolean {
-        return !!this.mouseActionParam;
-    }
-
-    toKeyAction(): MouseAction {
-        if (!this.keyActionValid()) {
-            throw new Error('KeyAction is not valid. No selected mouse action!');
-        }
-        let mouseAction: MouseAction = new MouseAction();
-        mouseAction.mouseAction = this.mouseActionParam;
-        return mouseAction;
-    }
-
-    changePage(index: number) {
-        if (index < -1 || index > 3) {
-            console.error(`Invalid index error: ${index}`);
-            return;
-        }
-        this.selectedIndex = index;
-        this.mouseActionParam = undefined;
-        this.selectedButton = undefined;
-    }
-
-    onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) {
-        if (this.selectedButton) {
-            this.renderer.setElementClass(this.selectedButton, 'btn-primary', false);
-        }
-        this.selectedButton = target;
-        this.renderer.setElementClass(target, 'btn-primary', true);
-        this.mouseActionParam = mouseActionParam;
-    }
-
-}

src/components/popover/tab/mouse/mouse-tab.component.html

@@ -0,0 +1,88 @@
+<div class="mouse-action col-sm-4">
+    <ul class="nav nav-pills nav-stacked">
+        <li (click)="changePage(0)" [ngClass]="{active: selectedIndex===0}"><a>     Move    </a></li>
+        <li (click)="changePage(1)" [ngClass]="{active: selectedIndex===1}"><a>     Scroll  </a></li>
+        <li (click)="changePage(2)" [ngClass]="{active: selectedIndex===2}"><a>     Click   </a></li>
+        <li (click)="changePage(3)" [ngClass]="{active: selectedIndex===3}"><a>     Speed   </a></li>
+    </ul>
+</div>
+<div class="details col-sm-8" [ngSwitch]="selectedIndex">
+    <div *ngSwitchCase="0" class="mouse__config mouse__config--move text-center">
+        <div class="row">
+            <button type="button" class="btn btn-default btn-lg"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.moveUp)">
+                <i class="fa fa-arrow-up"></i>
+            </button>
+        </div>
+        <div class="row">
+            <button type="button" class="btn btn-default btn-lg"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.moveLeft)">
+                <i class="fa fa-arrow-left"></i>
+            </button>
+            <button type="button" class="btn btn-default btn-lg btn-placeholder">
+                <i class="fa fa-square"></i>
+            </button>
+            <button type="button" class="btn btn-default btn-lg"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.moveRight)">
+                <i class="fa fa-arrow-right"></i>
+            </button>
+        </div>
+        <div class="row">
+            <button type="button" class="btn btn-default btn-lg"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.moveDown)">
+                <i class="fa fa-arrow-down"></i>
+            </button>
+        </div>
+    </div>
+    <div *ngSwitchCase="1" class="mouse__config mouse__config--scroll text-center">
+        <div class="row">
+            <button type="button" class="btn btn-default btn-lg"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.scrollUp)">
+                <i class="fa fa-angle-double-up"></i>
+            </button>
+        </div>
+        <div class="row">
+            <button type="button" class="btn btn-default btn-lg"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.scrollLeft)">
+                <i class="fa fa-angle-double-left"></i>
+            </button>
+            <button type="button" class="btn btn-default btn-lg btn-placeholder">
+                <i class="fa fa-square"></i>
+            </button>
+            <button type="button" class="btn btn-default btn-lg"
+                (click)="onMouseActionClick($event.target, MouseActionParam.scrollRight)">
+                <i class="fa fa-angle-double-right"></i>
+            </button>
+        </div>
+        <div class="row">
+            <button type="button" class="btn btn-default btn-lg"
+                (click)="onMouseActionClick($event.target, MouseActionParam.scrollDown)">
+                <i class="fa fa-angle-double-down"></i>
+            </button>
+        </div>
+    </div>
+    <div *ngSwitchCase="2" class="mouse__config mouse__config--click">
+        <div class="btn-group col-xs-12" role="group">
+            <button type="button" class="btn btn-default col-xs-4"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.leftClick)">Left</button>
+            <button type="button" class="btn btn-default col-xs-4"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.middleClick)">Middle</button>
+            <button type="button" class="btn btn-default col-xs-4"
+                    (click)="onMouseActionClick($event.target, MouseActionParam.rightClick)">Right</button>
+        </div>
+    </div>
+    <div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
+        <div class="help-text--mouse-speed text-left">
+            <p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
+            <p>You can set the multiplier in <a href="#" title="link to the setting">link to setting</a>.</p>
+        </div>
+        <div class="btn-group btn-group-lg" role="group">
+            <button type="button" class="btn btn-default"
+                (click)="onMouseActionClick($event.target, MouseActionParam.decelerate)">-</button>
+            <button type="button" class="btn btn-default"
+                (click)="onMouseActionClick($event.target, MouseActionParam.accelerate)">+</button>
+        </div>
+    </div>
+    <div *ngSwitchDefault>
+    </div>
+</div>

src/components/popover/tab/mouse/mouse-tab.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit, Renderer} from '@angular/core';
+import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
+
+import { KeyActionSaver } from '../../key-action-saver';
+import {MouseAction, MouseActionParam} from '../../../../../config-serializer/config-items/MouseAction';
+
+@Component({
+    moduleId: module.id,
+    selector: 'mouse-tab',
+    template: require('./mouse-tab.component.html'),
+    styles: [require('./mouse-tab.component.scss')],
+    directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
+})
+export class MouseTabComponent implements OnInit, KeyActionSaver {
+    private mouseActionParam: MouseActionParam;
+    private selectedIndex: number;
+    private selectedButton: HTMLButtonElement;
+    private MouseActionParam = MouseActionParam;
+
+    constructor(private renderer: Renderer) {
+        this.selectedIndex = 0;
+    }
+
+    ngOnInit() { }
+
+    keyActionValid(): boolean {
+        return !!this.mouseActionParam;
+    }
+
+    toKeyAction(): MouseAction {
+        if (!this.keyActionValid()) {
+            throw new Error('KeyAction is not valid. No selected mouse action!');
+        }
+        let mouseAction: MouseAction = new MouseAction();
+        mouseAction.mouseAction = this.mouseActionParam;
+        return mouseAction;
+    }
+
+    changePage(index: number) {
+        if (index < -1 || index > 3) {
+            console.error(`Invalid index error: ${index}`);
+            return;
+        }
+        this.selectedIndex = index;
+        this.mouseActionParam = undefined;
+        this.selectedButton = undefined;
+    }
+
+    onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) {
+        if (this.selectedButton) {
+            this.renderer.setElementClass(this.selectedButton, 'btn-primary', false);
+        }
+        this.selectedButton = target;
+        this.renderer.setElementClass(target, 'btn-primary', true);
+        this.mouseActionParam = mouseActionParam;
+    }
+
+}

src/components/popover/tab/none/none-tab.component.html

@@ -0,0 +1 @@
+This key is unassigned and has no functionality.

src/components/popover/tab/none/none-tab.component.scss

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+}

src/components/popover/tab/none/none-tab.component.ts

@@ -1,20 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 
-import { KeyActionSaver } from '../key-action-saver';
-import { NoneAction } from '../../../../config-serializer/config-items/NoneAction';
+import { KeyActionSaver } from '../../key-action-saver';
+import { NoneAction } from '../../../../../config-serializer/config-items/NoneAction';
 
 @Component({
     moduleId: module.id,
     selector: 'none-tab',
-    template: `This key is unassigned and has no functionality.`,
-    styles:
-    [`
-        :host {
-            display: flex;
-            justify-content: center;
-            padding: 2rem 0;
-        }
-    `]
+    template: require('./none-tab.component.html'),
+    styles: [require('./none-tab.component.scss')]
 })
 export class NoneTabComponent implements OnInit, KeyActionSaver {
     constructor() { }

src/components/popover/widgets/capture-keystroke-button.component.ts

@@ -1,47 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'capture-keystroke-button',
-    template:
-    `
-     <button type="button" class="btn btn-sm btn--capture-keystroke"
-                [ngClass]="{'btn-default': !record, 'btn-info': record}"
-                (click)="record ? stop() : start()">
-        <i class="fa" [ngClass]=" { 'fa-circle' : !record, 'fa-square': record }"></i>
-        <template [ngIf]="!record">
-            Capture keystroke
-        </template>
-        <template [ngIf]="record">
-            Stop capturing
-        </template>
-     </button>
-    `,
-    styles:
-    [`
-        button {
-            display: inline-block;
-            margin: 0 0 0 .25rem;
-        }
-
-        .fa-circle {
-            color:#c00;
-        }
-    `]
-})
-export class CaptureKeystrokeButtonComponent implements OnInit {
-    private record: boolean;
-
-    constructor() { }
-
-    ngOnInit() { }
-
-    private start(): void {
-        this.record = true;
-    }
-
-    private stop(): void {
-        this.record = false;
-    }
-
-}

src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html

@@ -0,0 +1,11 @@
+<button type="button" class="btn btn-sm btn--capture-keystroke"
+            [ngClass]="{'btn-default': !record, 'btn-info': record}"
+            (click)="record ? stop() : start()">
+    <i class="fa" [ngClass]=" { 'fa-circle' : !record, 'fa-square': record }"></i>
+    <template [ngIf]="!record">
+        Capture keystroke
+    </template>
+    <template [ngIf]="record">
+        Stop capturing
+    </template>
+ </button>

src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss

@@ -0,0 +1,8 @@
+button {
+    display: inline-block;
+    margin: 0 0 0 .25rem;
+}
+
+.fa-circle {
+    color:#c00;
+}

src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'capture-keystroke-button',
+    template: require('./capture-keystroke-button.component.html'),
+    styles: [require('./capture-keystroke-button.component.scss')]
+})
+export class CaptureKeystrokeButtonComponent implements OnInit {
+    private record: boolean;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    private start(): void {
+        this.record = true;
+    }
+
+    private stop(): void {
+        this.record = false;
+    }
+
+}

src/components/popover/widgets/icon.component.ts

@@ -1,30 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { NgSwitch, NgSwitchCase } from '@angular/common';
-
-@Component({
-    moduleId: module.id,
-    selector: 'icon',
-    template:
-    `
-        <div [ngSwitch]="name">
-            <span *ngSwitchCase="'option-vertical'" class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
-            <i *ngSwitchCase="'square'" class="fa fa-square"></i>
-            <i *ngSwitchCase="'mouse-pointer'" class="fa fa-mouse-pointer"></i>
-            <i *ngSwitchCase="'clock'" class="fa fa-clock-o"></i>
-            <i *ngSwitchCase="'trash'" class="glyphicon glyphicon-trash action--trash"></i>
-            <i *ngSwitchCase="'pencil'" class="glyphicon glyphicon-pencil action--edit"></i>
-            <i *ngSwitchCase="'question-circle'" class ="fa fa-question-circle"></i>
-        </div>
-    `,
-    directives: [NgSwitch, NgSwitchCase],
-    styles: [require('./icon.component.scss')]
-})
-export class IconComponent implements OnInit {
-
-    @Input() name: string;
-
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/popover/widgets/icon/icon.component.html

@@ -0,0 +1,9 @@
+<div [ngSwitch]="name">
+    <span *ngSwitchCase="'option-vertical'" class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
+    <i *ngSwitchCase="'square'" class="fa fa-square"></i>
+    <i *ngSwitchCase="'mouse-pointer'" class="fa fa-mouse-pointer"></i>
+    <i *ngSwitchCase="'clock'" class="fa fa-clock-o"></i>
+    <i *ngSwitchCase="'trash'" class="glyphicon glyphicon-trash action--trash"></i>
+    <i *ngSwitchCase="'pencil'" class="glyphicon glyphicon-pencil action--edit"></i>
+    <i *ngSwitchCase="'question-circle'" class ="fa fa-question-circle"></i>
+</div>

src/components/popover/widgets/icon/icon.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgSwitch, NgSwitchCase } from '@angular/common';
+
+@Component({
+    moduleId: module.id,
+    selector: 'icon',
+    template: require('./icon.component.html'),
+    styles: [require('./icon.component.scss')],
+    directives: [NgSwitch, NgSwitchCase]
+})
+export class IconComponent implements OnInit {
+
+    @Input() name: string;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+}