Structural refactoring (#68)

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

src/components/keymap/keymap.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChildren, QueryList, ElementRef, OnInit, AfterViewInit, Renderer } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { SvgKeyboardPopoverComponent } from '../svg-keyboard-popover.component';
+import { SvgKeyboardPopoverComponent } from '../svg/popover/svg-keyboard-popover.component';
 import { Layers } from '../../../config-serializer/config-items/Layers';
 import { UhkConfigurationService } from '../../services/uhk-configuration.service';
 import { Keymap } from '../../../config-serializer/config-items/Keymap';

src/components/keys/svg-icon-text-key.component.ts

@@ -1,33 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'g[svg-icon-text-key]',
-    template:
-    `
-        <svg:use [attr.xlink:href]="icon"
-                [attr.width]="width / 3"
-                [attr.height]="height / 3"
-                [attr.x]="width > 2*height ? 0 : width / 3"
-                [attr.y]="width > 2*height ? height / 3 : height / 10">
-        </svg:use>
-        <svg:text
-            [attr.x]="0"
-            [attr.y]="width > 2*height? height / 2 : height * 0.6"
-            [attr.text-anchor]="'middle'"
-            [attr.font-size]="11">
-                <tspan [attr.x]="width > 2*height ? width * 0.6 : width / 2">{{ text }}</tspan>
-        </svg:text>
-    `
-})
-export class SvgIconTextKeyComponent implements OnInit {
-    @Input() width: number;
-    @Input() height: number;
-    @Input() icon: string;
-    @Input() text: string;
-
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/keys/svg-one-line-text-key.component.ts

@@ -1,28 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'g[svg-one-line-text-key]',
-    template:
-    `
-         <svg:text
-            [attr.x]="0"
-            [attr.y]="height / 2"
-            [attr.text-anchor]="'middle'">
-                <tspan
-                    [attr.x]="width / 2"
-                    dy="0"
-                    >{{ text }}</tspan>
-         </svg:text>
-    `
-})
-export class SvgOneLineTextKeyComponent implements OnInit {
-    @Input() height: number;
-    @Input() width: number;
-    @Input() text: string;
-
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/keys/svg-switch-keymap-key.component.ts

@@ -1,36 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-import {MapperService} from '../../services/mapper.service';
-
-@Component({
-    moduleId: module.id,
-    selector: 'g[svg-switch-keymap-key]',
-    template:
-    `
-        <svg:use [attr.xlink:href]="icon"
-                [attr.width]="width / 4"
-                [attr.height]="height / 4"
-                [attr.x]="width * 3 / 8"
-                [attr.y]="height / 5">
-        </svg:use>
-        <svg:text
-            [attr.x]="0"
-            [attr.y]="height * 2 / 3"
-            [attr.text-anchor]="'middle'">
-                <tspan [attr.x]="width / 2">{{ abbreviation }}</tspan>
-        </svg:text>
-    `
-})
-export class SvgSwitchKeymapKeyComponent implements OnInit {
-    @Input() width: number;
-    @Input() height: number;
-    @Input() abbreviation: string;
-    private icon: string;
-
-    constructor(private mapperService: MapperService) { }
-
-    ngOnInit() {
-        this.icon = this.mapperService.getIcon('switch-keymap');
-    }
-
-}

src/components/keys/svg-text-icon-key.component.ts

@@ -1,32 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'g[svg-text-icon-key]',
-    template:
-    `
-         <svg:text
-            [attr.x]="0"
-            [attr.y]="width > 2*height? height / 2 : height / 3"
-            [attr.text-anchor]="width > 2*height ? 'end' : 'middle'">
-                <tspan [attr.x]="width > 2*height ?0.6*width : width / 2">{{ text }}</tspan>
-         </svg:text>
-        <svg:use [attr.xlink:href]="icon"
-                [attr.width]="width / 3"
-                [attr.height]="height / 3"
-                [attr.x]="width > 2*height ? width * 0.6 : width / 3"
-                [attr.y]="width > 2*height ? height / 3 : height / 2">
-        </svg:use>
-    `
-})
-export class SvgTextIconKeyComponent implements OnInit {
-    @Input() width: number;
-    @Input() height: number;
-    @Input() text: string;
-    @Input() icon: string;
-
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/keys/svg-two-line-text-key.component.ts

@@ -1,30 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'g[svg-two-line-text-key]',
-    template:
-    `
-         <svg:text
-            [attr.x]="0"
-            [attr.y]="height/2"
-            [attr.text-anchor]="'middle'">
-                 <tspan
-                        *ngFor="let text of texts; let index = index"
-                        [attr.x]="width / 2"
-                        [attr.y]="(0.75 - index * 0.5) * height"
-                        dy="0"
-                        >{{ text }}</tspan>
-         </svg:text>
-    `
-})
-export class SvgTwoLineTextKeyComponent implements OnInit {
-    @Input() height: number;
-    @Input() width: number;
-    @Input() texts: string[];
-
-    constructor() { }
-
-    ngOnInit() { }
-
-}

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() { }
+
+}

src/components/svg-keyboard.component.ts

@@ -1,58 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
-
-import {Module} from '../../config-serializer/config-items/Module';
-import {SvgModule} from './svg-module.model';
-import {SvgModuleComponent} from './svg-module.component';
-import {DataProviderService} from '../services/data-provider.service';
-
-@Component({
-    selector: 'svg-keyboard',
-    template:
-    `
-        <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="svgAttributes.viewBox" height="100%" width="100%">
-            <svg:g [attr.transform]="svgAttributes.transform" [attr.fill]="svgAttributes.fill">
-                <svg:g svg-module *ngFor="let module of modules; let i = index"
-                        [coverages]="module.coverages"
-                        [keyboardKeys]="module.keyboardKeys"
-                        [attr.transform]="module.attributes.transform"
-                        [keyActions]="moduleConfig[i].keyActions.elements"
-                        (editKeyActionRequest)="onEditKeyActionRequest(i, $event)"
-                />
-            </svg:g>
-        </svg>
-    `,
-    styles:
-    [`
-        :host {
-            display: flex;
-            width: 100%;
-            height: 100%;
-            position: relative;
-        }
-    `],
-    directives: [SvgModuleComponent]
-})
-export class SvgKeyboardComponent implements OnInit {
-    @Input() moduleConfig: Module[];
-    @Output() keyClick = new EventEmitter();
-
-    private modules: SvgModule[];
-    private svgAttributes: { viewBox: string, transform: string, fill: string };
-
-    constructor(private dps: DataProviderService) {
-        this.modules = [];
-        this.svgAttributes = this.dps.getKeyboardSvgAttributes();
-    }
-
-    ngOnInit() {
-        this.modules = this.dps.getSvgModules();
-    }
-
-    onEditKeyActionRequest(moduleId: number, keyId: number): void {
-        this.keyClick.emit({
-            moduleId,
-            keyId
-        });
-    }
-
-}

src/components/svg-module.component.ts

@@ -1,46 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
-import {SvgKeyboardKey} from './keys/svg-keyboard-key.model';
-import {SvgKeyboardKeyComponent} from './keys/svg-keyboard-key.component';
-import {KeyAction} from '../../config-serializer/config-items/KeyAction';
-
-@Component({
-    selector: 'g[svg-module]',
-    template:
-    `
-        <svg:path *ngFor="let path of coverages" [attr.d]="path.$.d"/>
-        <svg:g svg-keyboard-key *ngFor="let key of keyboardKeys; let i = index"
-                [id]="key.id"
-                [rx]="key.rx" [ry]="key.ry"
-                [width]="key.width" [height]="key.height"
-                [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
-                [keyAction]="keyActions[i]"
-                (click)="onKeyClick(i)"
-        />
-        <popover *ngIf="popOverEnabled"></popover>
-    `,
-    styles:
-    [`
-        :host {
-            position: relative;
-        }
-    `],
-    directives: [SvgKeyboardKeyComponent]
-})
-export class SvgModuleComponent implements OnInit {
-    @Input() coverages: any[];
-    @Input() keyboardKeys: SvgKeyboardKey[];
-    @Input() keyActions: KeyAction[];
-    @Output() editKeyActionRequest = new EventEmitter<number>();
-
-    constructor() {
-        this.keyboardKeys = [];
-    }
-
-    ngOnInit() { }
-
-    onKeyClick(index: number): void {
-        this.editKeyActionRequest.emit(index);
-    }
-
-}

src/components/svg/keyboard/svg-keyboard.component.html

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="svgAttributes.viewBox" height="100%" width="100%">
+    <svg:g [attr.transform]="svgAttributes.transform" [attr.fill]="svgAttributes.fill">
+        <svg:g svg-module *ngFor="let module of modules; let i = index"
+                [coverages]="module.coverages"
+                [keyboardKeys]="module.keyboardKeys"
+                [attr.transform]="module.attributes.transform"
+                [keyActions]="moduleConfig[i].keyActions.elements"
+                (editKeyActionRequest)="onEditKeyActionRequest(i, $event)"
+        />
+    </svg:g>
+</svg>

src/components/svg/keyboard/svg-keyboard.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}

src/components/svg/keyboard/svg-keyboard.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+
+import {Module} from '../../../../config-serializer/config-items/Module';
+import {SvgModule} from '../module/svg-module.model';
+import {SvgModuleComponent} from '../module/svg-module.component';
+import {DataProviderService} from '../../../services/data-provider.service';
+
+@Component({
+    selector: 'svg-keyboard',
+    template: require('./svg-keyboard.component.html'),
+    styles: [require('./svg-keyboard.component.scss')],
+    directives: [SvgModuleComponent]
+})
+export class SvgKeyboardComponent implements OnInit {
+    @Input() moduleConfig: Module[];
+    @Output() keyClick = new EventEmitter();
+
+    private modules: SvgModule[];
+    private svgAttributes: { viewBox: string, transform: string, fill: string };
+
+    constructor(private dps: DataProviderService) {
+        this.modules = [];
+        this.svgAttributes = this.dps.getKeyboardSvgAttributes();
+    }
+
+    ngOnInit() {
+        this.modules = this.dps.getSvgModules();
+    }
+
+    onEditKeyActionRequest(moduleId: number, keyId: number): void {
+        this.keyClick.emit({
+            moduleId,
+            keyId
+        });
+    }
+
+}

src/components/svg/keys/svg-icon-text-key.component.html

@@ -0,0 +1,13 @@
+<svg:use [attr.xlink:href]="icon"
+        [attr.width]="useWidth"
+        [attr.height]="useHeight"
+        [attr.x]="useX"
+        [attr.y]="useY">
+</svg:use>
+<svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'"
+    [attr.font-size]="11">
+        <tspan [attr.x]="spanX">{{ text }}</tspan>
+</svg:text>

src/components/svg/keys/svg-icon-text-key.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-icon-text-key]',
+    template: require('./svg-icon-text-key.component.html')
+})
+export class SvgIconTextKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() icon: string;
+    @Input() text: string;
+
+    private useWidth: number;
+    private useHeight: number;
+    private useX: number;
+    private useY: number;
+    private textY: number;
+    private spanX: number;
+
+    constructor() {
+    }
+
+    ngOnInit() {
+        this.useWidth = this.width / 3;
+        this.useHeight = this.height / 3;
+        this.useX = (this.width > 2 * this.height) ? 0 : this.width / 3;
+        this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 10;
+        this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height * 0.6;
+        this.spanX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 2;
+    }
+}

src/components/svg/keys/svg-keyboard-key.component.html

@@ -0,0 +1,42 @@
+<svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
+                    [attr.height]="height"  [attr.width]="width"
+                    [attr.fill]="fill"
+/>
+<svg:g [ngSwitch]="labelType"
+        [attr.font-size]="19"
+        [attr.font-family]="'Helvetica'"
+        [attr.fill]="'white'"
+        style="dominant-baseline: central">
+    <svg:g svg-one-line-text-key *ngSwitchCase="enumLabelTypes.OneLineText"
+            [height]="height"
+            [width]="width"
+            [text]="labelSource">
+    </svg:g>
+    <svg:g svg-two-line-text-key *ngSwitchCase="enumLabelTypes.TwoLineText"
+            [height]="height"
+            [width]="width"
+            [texts]="labelSource">
+    </svg:g>
+    <svg:g svg-text-icon-key *ngSwitchCase="enumLabelTypes.TextIcon"
+            [height]="height"
+            [width]="width"
+            [text]="labelSource.text"
+            [icon]="labelSource.icon">
+    </svg:g>
+    <svg:g svg-icon-text-key *ngSwitchCase="enumLabelTypes.IconText"
+            [height]="height"
+            [width]="width"
+            [icon]="labelSource.icon"
+            [text]="labelSource.text">
+    </svg:g>
+    <svg:g svg-single-icon-key *ngSwitchCase="enumLabelTypes.SingleIcon"
+            [height]="height"
+            [width]="width"
+            [icon]="labelSource">
+    </svg:g>
+    <svg:g svg-switch-keymap-key *ngSwitchCase="enumLabelTypes.SwitchKeymap"
+            [height]="height"
+            [width]="width"
+            [abbreviation]="labelSource">
+    </svg:g>
+</svg:g>

src/components/svg/keys/svg-keyboard-key.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit, Input, OnChanges, SimpleChange } from '@angular/core';
 import {NgSwitch, NgSwitchCase} from '@angular/common';
 
-import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
-import {KeystrokeAction} from '../../../config-serializer/config-items/KeystrokeAction';
-import {KeyModifiers} from '../../../config-serializer/config-items/KeyModifiers';
-import {PlayMacroAction} from '../../../config-serializer/config-items/PlayMacroAction';
-import {SwitchLayerAction, LayerName}  from '../../../config-serializer/config-items/SwitchLayerAction';
-import {MapperService} from '../../services/mapper.service';
-import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction';
-import {UhkConfiguration} from '../../../config-serializer/config-items/UhkConfiguration';
-import {UhkConfigurationService} from '../../services/uhk-configuration.service';
+import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
+import {KeystrokeAction} from '../../../../config-serializer/config-items/KeystrokeAction';
+import {KeyModifiers} from '../../../../config-serializer/config-items/KeyModifiers';
+import {PlayMacroAction} from '../../../../config-serializer/config-items/PlayMacroAction';
+import {SwitchLayerAction, LayerName}  from '../../../../config-serializer/config-items/SwitchLayerAction';
+import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction';
+import {UhkConfiguration} from '../../../../config-serializer/config-items/UhkConfiguration';
+import {UhkConfigurationService} from '../../../services/uhk-configuration.service';
+import {MapperService} from '../../../services/mapper.service';
 
 import {SvgOneLineTextKeyComponent} from './svg-one-line-text-key.component';
 import {SvgTwoLineTextKeyComponent} from './svg-two-line-text-key.component';
@@ -29,51 +29,7 @@ enum LabelTypes {
 
 @Component({
     selector: 'g[svg-keyboard-key]',
-    template:
-    `
-        <svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
-                            [attr.height]="height"  [attr.width]="width"
-                            [attr.fill]="fill"
-        />
-        <svg:g [ngSwitch]="labelType"
-                [attr.font-size]="19"
-                [attr.font-family]="'Helvetica'"
-                [attr.fill]="'white'"
-                style="dominant-baseline: central">
-            <svg:g svg-one-line-text-key *ngSwitchCase="enumLabelTypes.OneLineText"
-                    [height]="height"
-                    [width]="width"
-                    [text]="labelSource">
-            </svg:g>
-            <svg:g svg-two-line-text-key *ngSwitchCase="enumLabelTypes.TwoLineText"
-                    [height]="height"
-                    [width]="width"
-                    [texts]="labelSource">
-            </svg:g>
-            <svg:g svg-text-icon-key *ngSwitchCase="enumLabelTypes.TextIcon"
-                    [height]="height"
-                    [width]="width"
-                    [text]="labelSource.text"
-                    [icon]="labelSource.icon">
-            </svg:g>
-            <svg:g svg-icon-text-key *ngSwitchCase="enumLabelTypes.IconText"
-                    [height]="height"
-                    [width]="width"
-                    [icon]="labelSource.icon"
-                    [text]="labelSource.text">
-            </svg:g>
-            <svg:g svg-single-icon-key *ngSwitchCase="enumLabelTypes.SingleIcon"
-                    [height]="height"
-                    [width]="width"
-                    [icon]="labelSource">
-            </svg:g>
-            <svg:g svg-switch-keymap-key *ngSwitchCase="enumLabelTypes.SwitchKeymap"
-                    [height]="height"
-                    [width]="width"
-                    [abbreviation]="labelSource">
-            </svg:g>
-        </svg:g>
-     `,
+    template: require('./svg-keyboard-key.component.html'),
     directives:
     [
         NgSwitch,

src/components/svg/keys/svg-one-line-text-key.component.html

@@ -0,0 +1,6 @@
+ <svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'">
+        <tspan [attr.x]="spanX" dy="0">{{ text }}</tspan>
+ </svg:text>

src/components/svg/keys/svg-one-line-text-key.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-one-line-text-key]',
+    template: require('./svg-one-line-text-key.component.html')
+})
+export class SvgOneLineTextKeyComponent implements OnInit {
+    @Input() height: number;
+    @Input() width: number;
+    @Input() text: string;
+
+    private textY: number;
+    private spanX: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.textY = this.height / 2;
+        this.spanX = this.width / 2;
+    }
+}

src/components/svg/keys/svg-single-icon-key.component.html

@@ -0,0 +1,4 @@
+<svg:use [attr.xlink:href]="icon"
+    [attr.width]="svgWidth" [attr.height]="svgHeight"
+    [attr.x]="svgWidth" [attr.y]="svgHeight">
+</svg:use>

src/components/svg/keys/svg-single-icon-key.component.ts

@@ -3,21 +3,20 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
     moduleId: module.id,
     selector: 'g[svg-single-icon-key]',
-    template:
-    `
-        <svg:use [attr.xlink:href]="icon"
-                [attr.width]="width / 3" [attr.height]="height / 3"
-                [attr.x]="width / 3" [attr.y]="height / 3">
-        </svg:use>
-    `
+    template: require('./svg-single-icon-key.component.html')
 })
 export class SvgSingleIconKeyComponent implements OnInit {
     @Input() width: number;
     @Input() height: number;
     @Input() icon: string;
 
+    private svgHeight: number;
+    private svgWidth: number;
+
     constructor() { }
 
-    ngOnInit() { }
-
+    ngOnInit() {
+        this.svgWidth = this.width / 3;
+        this.svgHeight = this.height / 3;
+    }
 }

src/components/svg/keys/svg-switch-keymap-key.component.html

@@ -0,0 +1,12 @@
+<svg:use [attr.xlink:href]="icon"
+        [attr.width]="useWidth"
+        [attr.height]="useHeight"
+        [attr.x]="useX"
+        [attr.y]="useY">
+</svg:use>
+<svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'">
+        <tspan [attr.x]="spanX">{{ abbreviation }}</tspan>
+</svg:text>

src/components/svg/keys/svg-switch-keymap-key.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import {MapperService} from '../../../services/mapper.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-switch-keymap-key]',
+    template: require('./svg-switch-keymap-key.component.html')
+})
+export class SvgSwitchKeymapKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() abbreviation: string;
+
+    private icon: string;
+    private useWidth: number;
+    private useHeight: number;
+    private useX: number;
+    private useY: number;
+    private textY: number;
+    private spanX: number;
+
+    constructor(private mapperService: MapperService) { }
+
+    ngOnInit() {
+        this.icon = this.mapperService.getIcon('switch-keymap');
+
+        this.useWidth = this.width / 4;
+        this.useHeight = this.height / 4;
+        this.useX = this.width * 3 / 8;
+        this.useY = this.height / 5;
+        this.textY = this.height * 2 / 3;
+        this.spanX = this.width / 2;
+    }
+}

src/components/svg/keys/svg-text-icon-key.component.html

@@ -0,0 +1,12 @@
+ <svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="textAnchor">
+        <tspan [attr.x]="spanX">{{ text }}</tspan>
+ </svg:text>
+<svg:use [attr.xlink:href]="icon"
+        [attr.width]="useWidth"
+        [attr.height]="useHeight"
+        [attr.x]="useX"
+        [attr.y]="useY">
+</svg:use>

src/components/svg/keys/svg-text-icon-key.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-text-icon-key]',
+    template: require('./svg-text-icon-key.component.html')
+})
+export class SvgTextIconKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() text: string;
+    @Input() icon: string;
+
+
+    private useWidth: number;
+    private useHeight: number;
+    private useX: number;
+    private useY: number;
+    private textY: number;
+    private textAnchor: string;
+    private spanX: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.useWidth = this.width / 3;
+        this.useHeight = this.height / 3;
+        this.useX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 3;
+        this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 2;
+        this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height / 3;
+        this.textAnchor = (this.width > 2 * this.height) ? 'end' : 'middle';
+        this.spanX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
+    }
+}

src/components/svg/keys/svg-two-line-text-key.component.html

@@ -0,0 +1,11 @@
+<svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'">
+         <tspan
+                *ngFor="let text of texts; let index = index"
+                [attr.x]="spanX"
+                [attr.y]="spanY(index)"
+                dy="0"
+                >{{ text }}</tspan>
+ </svg:text>

src/components/svg/keys/svg-two-line-text-key.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-two-line-text-key]',
+    template: require('./svg-two-line-text-key.component.html')
+})
+export class SvgTwoLineTextKeyComponent implements OnInit {
+    @Input() height: number;
+    @Input() width: number;
+    @Input() texts: string[];
+
+    private textY: number;
+    private spanX: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.textY = this.height / 2;
+        this.spanX = this.width / 2;
+    }
+
+    private spanY(index: number) {
+        return (0.75 - index * 0.5) * this.height;
+    }
+}

src/components/svg/module/svg-module.component.html

@@ -0,0 +1,10 @@
+<svg:path *ngFor="let path of coverages" [attr.d]="path.$.d"/>
+<svg:g svg-keyboard-key *ngFor="let key of keyboardKeys; let i = index"
+        [id]="key.id"
+        [rx]="key.rx" [ry]="key.ry"
+        [width]="key.width" [height]="key.height"
+        [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
+        [keyAction]="keyActions[i]"
+        (click)="onKeyClick(i)"
+/>
+<popover *ngIf="popOverEnabled"></popover>

src/components/svg/module/svg-module.component.scss

@@ -0,0 +1,3 @@
+:host {
+    position: relative;
+}

src/components/svg/module/svg-module.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+import {SvgKeyboardKey} from '../keys/svg-keyboard-key.model';
+import {SvgKeyboardKeyComponent} from '../keys/svg-keyboard-key.component';
+import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
+
+@Component({
+    selector: 'g[svg-module]',
+    template: require('./svg-module.component.html'),
+    styles: [require('./svg-module.component.scss')],
+    directives: [SvgKeyboardKeyComponent]
+})
+export class SvgModuleComponent implements OnInit {
+    @Input() coverages: any[];
+    @Input() keyboardKeys: SvgKeyboardKey[];
+    @Input() keyActions: KeyAction[];
+    @Output() editKeyActionRequest = new EventEmitter<number>();
+
+    constructor() {
+        this.keyboardKeys = [];
+    }
+
+    ngOnInit() { }
+
+    onKeyClick(index: number): void {
+        this.editKeyActionRequest.emit(index);
+    }
+
+}

src/components/svg/module/svg-module.model.ts

@@ -1,4 +1,4 @@
-import {SvgKeyboardKey} from './keys/svg-keyboard-key.model';
+import {SvgKeyboardKey} from '../keys/svg-keyboard-key.model';
 
 export class SvgModule {
     private coverages: any[];

src/components/svg/popover/svg-keyboard-popover.component.html

@@ -0,0 +1,4 @@
+<svg-keyboard [moduleConfig]="moduleConfig"
+            (keyClick)="onKeyClick($event.moduleId, $event.keyId)">
+</svg-keyboard>
+<popover *ngIf="popoverEnabled" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>

src/components/svg/popover/svg-keyboard-popover.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}

src/components/svg/popover/svg-keyboard-popover.component.ts

@@ -1,28 +1,14 @@
 import { Component, OnInit, Input} from '@angular/core';
 
-import {Module} from '../../config-serializer/config-items/Module';
-import {KeyAction} from '../../config-serializer/config-items/KeyAction';
-import {SvgKeyboardComponent} from './svg-keyboard.component';
-import {PopoverComponent} from './popover/popover.component';
+import {Module} from '../../../../config-serializer/config-items/Module';
+import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
+import {SvgKeyboardComponent} from '../keyboard/svg-keyboard.component';
+import {PopoverComponent} from '../../popover/popover.component';
 
 @Component({
     selector: 'svg-keyboard-popover',
-    template:
-    `
-        <svg-keyboard [moduleConfig]="moduleConfig"
-                    (keyClick)="onKeyClick($event.moduleId, $event.keyId)">
-        </svg-keyboard>
-        <popover *ngIf="popoverEnabled" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
-    `,
-    styles:
-    [`
-        :host {
-            display: flex;
-            width: 100%;
-            height: 100%;
-            position: relative;
-        }
-    `],
+    template: require('./svg-keyboard-popover.component.html'),
+    styles: [require('./svg-keyboard-popover.component.scss')],
     directives: [SvgKeyboardComponent, PopoverComponent]
 })
 export class SvgKeyboardPopoverComponent implements OnInit {