Basic popover tab components.

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'keymap-tab',
+    template:
+    `
+        Keymap
+    `
+})
+export class KeymapTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

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

@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+
+import { CaptureKeystrokeButtonComponent } from '../widgets/capture-keystroke-button.component';
+
+import { KeystrokeAction } from '../../../../config-serializer/config-items/KeystrokeAction';
+import { KeystrokeModifiersAction } from '../../../../config-serializer/config-items/KeystrokeModifiersAction';
+import { KeystrokeWithModifiersAction } from '../../../../config-serializer/config-items/KeystrokeWithModifiersAction';
+
+@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>
+            <select class="scancode" style="width: 200px">
+
+            </select>
+            <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 style="margin-top: 3rem;">
+            <b class="setting-label" style="position:relative;">Long press action:</b>
+            <select class="secondary-role" style="width:135px">
+
+            </select>
+            <i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right"
+                    title="This action happens when the key is being held along with another key.">
+            </i>
+        </div>
+    `,
+    directives: [CaptureKeystrokeButtonComponent]
+})
+export class KeypressTabComponent implements OnInit {
+    private leftModifiers: string[];
+    private rightModifiers: string[];
+
+    private leftModifierSelects: boolean[];
+    private rightModifierSelects: boolean[];
+
+    constructor() {
+        this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
+        this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
+    }
+
+    ngOnInit() { }
+
+    getKeyAction(): KeystrokeAction | KeystrokeModifiersAction | KeystrokeWithModifiersAction {
+        return;
+    }
+
+}

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'layer-tab',
+    template:
+    `
+        <select>
+            <option> Activate </option>
+            <option> Toggle </option>
+        </select>
+        <span>the</span>
+        <select>
+            <option> Mod </option>
+            <option> Fn </option>
+            <option> Mouse </option>
+        </select>
+        <span>
+        layer by holding this key.
+        </span>
+    `
+})
+export class LayerTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'macro-tab',
+    template:
+    `
+        Macro
+    `
+})
+export class MacroTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

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

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'mouse-tab',
+    template:
+    `
+        <div class="mouse-action">
+            <ul class="nav nav-pills nav-stacked">
+                <li><a>     Move    </a></li>
+                <li><a>     Scroll  </a></li>
+                <li><a>     Click   </a></li>
+                <li><a>     Speed   </a></li>
+            </ul>
+        </div>
+        <div class="details">
+        </div>
+    `,
+    styles:
+    [`
+        :host {
+            display: flex;
+        }
+
+        .mouse-action {
+            flex: 1;
+            border-right: 1px solid black;
+        }
+
+        .details {
+            flex: 2;
+        }
+    `]
+})
+export class MouseTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

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

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@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;
+        }
+    `]
+})
+export class NoneTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}