refactore: create feature modules (#387)

* add @angular/cli to the project * increase nodejs version -> 8.2.1 * add lerna * merge web and shared module * move electron module into packages as uhk-agent Electron agent functionality is not working * delete symlinker * convert private properties to public of component if used in html * revert uhk-message.component * fix component path * fix the correct name of the uhk-message.component.scss * building web and electron module * delete uhk-renderer package * handle device connect disconnect state * add privilege detection * fix set privilege functionality * turn back download keymap functionality * add bootstrap, select2 js and fix null pointer exception * turn back upload data to keyboard * fix send keymap * fix test-serializer * add missing package.json * merging * fix appveyor build * fix linting * turn back electron storage service * commit the missing electron-datastorage-repository * update node to 8.3.0 in .nvmrc and log node version in appveyor build * set exact version number in appveyor build * vertical align privilege and missing device components * set back node version to 8 in appveyor * move node-usb dependency from usb dir to root maybe it is fix the appveyor build * revert usb to root * fix electron builder script * fix electron builder script * turn off electron devtools * remove CTRL+U functionality * fix CTRL+o * fix lint error * turnoff store freeze * start process when got `Error: EPERM: operation not permitted` error * move files from root usb dir -> packages/usb
2017-08-19 20:02:17 +02:00
parent 97770f67c0
commit 0f558e4132
524 changed files with 25606 additions and 5036 deletions
@@ -0,0 +1 @@
+export { MacroActionEditorComponent } from './macro-action-editor.component';
@@ -0,0 +1,46 @@
+<div class="action--editor">
+    <div class="row">
+        <div class="col-lg-3 editor__tab-links">
+            <ul class="nav nav-pills nav-stacked">
+                <li #macroText [class.active]="activeTab === TabName.Text" (click)="selectTab(TabName.Text)">
+                    <a>
+                        <i class="fa fa-font"></i>
+                        <span>Type text</span>
+                    </a>
+                </li>
+                <li #macroKeypress [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)">
+                    <a>
+                        <i class="fa fa-keyboard-o"></i>
+                        <span>Key action</span>
+                    </a>
+                </li>
+                <li #macroMouse [class.active]="activeTab === TabName.Mouse" (click)="selectTab(TabName.Mouse)">
+                    <a>
+                        <i class="fa fa-mouse-pointer"></i>
+                        <span>Mouse action</span>
+                    </a>
+                </li>
+                <li #macroDelay [class.active]="activeTab === TabName.Delay" (click)="selectTab(TabName.Delay)">
+                    <a>
+                        <i class="fa fa-clock-o"></i>
+                        <span>Delay</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="col-xs-12 col-lg-9 editor__tabs" [ngSwitch]="activeTab">
+            <macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction"></macro-text-tab>
+            <macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction"></macro-key-tab>
+            <macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction"></macro-mouse-tab>
+            <macro-delay-tab #tab *ngSwitchCase="TabName.Delay" [macroAction]="editableMacroAction"></macro-delay-tab>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-12 flex-button-wrapper editor__actions-container">
+            <div class="editor__actions">
+                <button class="btn btn-sm btn-default flex-button" type="button" (click)="onCancelClick()"> Cancel </button>
+                <button class="btn btn-sm btn-primary flex-button" type="button" (click)="onSaveClick()"> Save </button>
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,88 @@
+@import '../../../../styles/variables';
+
+:host {
+    display: block;
+    width: 100%;
+}
+
+.action--editor {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-radius: 0;
+    border: 0;
+}
+
+.nav {
+    padding-bottom: 1rem;
+
+    li {
+        a {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+
+            &.selected {
+                font-style: italic;
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        &.active {
+            z-index: 2;
+
+            a {
+                &.selected {
+                    font-style: normal;
+                }
+
+                &:after {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    width: 0;
+                    height: 0;
+                    top: 0;
+                    right: -4rem;
+                    border-color: transparent transparent transparent $icon-hover;
+                    border-style: solid;
+                    border-width: 2rem;
+                }
+            }
+        }
+    }
+}
+
+.editor {
+    &__tabs,
+    &__tab-links {
+        padding-top: 1rem;
+    }
+
+    &__tabs {
+        border-left: 1px solid #ddd;
+        margin-left: -1.6rem;
+        padding-left: 3rem;
+    }
+
+    &__actions {
+        float: right;
+
+        &-container {
+            background: #f5f5f5;
+            border-top: 1px solid #ddd;
+            border-bottom: 1px solid #ddd;
+            padding: 1rem 1.5rem;
+        }
+    }
+}
+
+.flex-button-wrapper {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.flex-button {
+    align-self: flex-end;
+}
@@ -0,0 +1,98 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+
+import {
+    MacroAction,
+    DelayMacroAction,
+    KeyMacroAction,
+    ScrollMouseMacroAction,
+    MoveMouseMacroAction,
+    MouseButtonMacroAction,
+    TextMacroAction,
+    Helper as MacroActionHelper
+} from '../../../config-serializer/config-items/macro-action';
+import { MacroDelayTabComponent, MacroMouseTabComponent, MacroKeyTabComponent, MacroTextTabComponent } from './tab';
+
+enum TabName {
+    Keypress,
+    Text,
+    Mouse,
+    Delay
+}
+
+@Component({
+    selector: 'macro-action-editor',
+    templateUrl: './macro-action-editor.component.html',
+    styleUrls: ['./macro-action-editor.component.scss'],
+    host: { 'class': 'macro-action-editor' }
+})
+export class MacroActionEditorComponent implements OnInit {
+    @Input() macroAction: MacroAction;
+
+    @Output() save = new EventEmitter<MacroAction>();
+    @Output() cancel = new EventEmitter<void>();
+
+    @ViewChild('tab') selectedTab: MacroTextTabComponent | MacroKeyTabComponent | MacroMouseTabComponent | MacroDelayTabComponent;
+
+    editableMacroAction: MacroAction;
+    activeTab: TabName;
+    /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    TabName = TabName;
+    /* tslint:enable:variable-name */
+
+    ngOnInit() {
+        this.updateEditableMacroAction();
+        const tab: TabName = this.getTabName(this.editableMacroAction);
+        this.activeTab = tab;
+    }
+
+    ngOnChanges() {
+        this.ngOnInit();
+    }
+
+    onCancelClick(): void {
+        this.cancel.emit();
+    }
+
+    onSaveClick(): void {
+        try {
+            // TODO: Refactor after getKeyMacroAction has been added to all tabs
+            const action = this.selectedTab instanceof MacroKeyTabComponent ?
+                this.selectedTab.getKeyMacroAction() :
+                this.selectedTab.macroAction;
+            this.save.emit(action);
+        } catch (e) {
+            // TODO: show error dialog
+            console.error(e);
+        }
+    }
+
+    selectTab(tab: TabName): void {
+        this.activeTab = tab;
+        if (tab === this.getTabName(this.macroAction)) {
+            this.updateEditableMacroAction();
+        } else {
+            this.editableMacroAction = undefined;
+        }
+    }
+
+    getTabName(action: MacroAction): TabName {
+        if (action instanceof DelayMacroAction) {
+            return TabName.Delay;
+        } else if (action instanceof TextMacroAction) {
+            return TabName.Text;
+        } else if (action instanceof KeyMacroAction) {
+            return TabName.Keypress;
+        } else if (action instanceof MouseButtonMacroAction ||
+            action instanceof MoveMouseMacroAction ||
+            action instanceof ScrollMouseMacroAction) {
+            return TabName.Mouse;
+        }
+        return undefined;
+    }
+
+    private updateEditableMacroAction() {
+        const macroAction: MacroAction = this.macroAction ? this.macroAction : new TextMacroAction();
+        this.editableMacroAction = MacroActionHelper.createMacroAction(macroAction);
+    }
+
+}
@@ -0,0 +1 @@
+export { MacroDelayTabComponent } from './macro-delay.component';
@@ -0,0 +1,26 @@
+<div class="macro-delay">
+    <div class="row">
+        <div class="col-xs-12">
+            <h4>Enter delay in seconds</h4>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-4">
+          <input #macroDelayInput
+                 type="number" 
+                 min="0" 
+                 max="1000" 
+                 step="0.1" 
+                 placeholder="Delay amount" 
+                 class="form-control"
+                 [attr.value]="delay"
+                 (change)="setDelay($event)">
+        </div>
+    </div>
+    <div class="row macro-delay__presets">
+        <div class="col-xs-12">
+          <h6>Choose a preset</h6>
+          <button *ngFor="let delay of presets" class="btn btn-sm btn-default" (click)="setDelay(delay)">{{delay}}s</button>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,16 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.macro-delay {
+    &__presets {
+        margin-top: 1rem;
+
+        button {
+            margin-right: 0.25rem;
+            margin-bottom: 0.25rem;
+        }
+    }
+}
@@ -0,0 +1,41 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    OnInit,
+    ViewChild
+} from '@angular/core';
+
+import { DelayMacroAction } from '../../../../../config-serializer/config-items/macro-action';
+
+const INITIAL_DELAY = 0.5; // In seconds
+
+@Component({
+    selector: 'macro-delay-tab',
+    templateUrl: './macro-delay.component.html',
+    styleUrls: ['./macro-delay.component.scss'],
+    host: { 'class': 'macro__delay' },
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MacroDelayTabComponent implements OnInit {
+    @Input() macroAction: DelayMacroAction;
+    @ViewChild('macroDelayInput') input: ElementRef;
+
+    delay: number;
+    presets: number[] = [0.3, 0.5, 0.8, 1, 2, 3, 4, 5];
+
+    constructor() { }
+
+    ngOnInit() {
+        if (!this.macroAction) {
+            this.macroAction = new DelayMacroAction();
+        }
+        this.delay = this.macroAction.delay > 0 ? this.macroAction.delay / 1000 : INITIAL_DELAY;
+    }
+
+    setDelay(value: number): void {
+        this.delay = value;
+        this.macroAction.delay = this.delay * 1000;
+    }
+}
@@ -0,0 +1,4 @@
+export { MacroDelayTabComponent } from './delay';
+export { MacroKeyTabComponent } from './key';
+export { MacroMouseTabComponent } from './mouse';
+export { MacroTextTabComponent } from './text';
@@ -0,0 +1 @@
+export { MacroKeyTabComponent } from './macro-key.component';
@@ -0,0 +1,32 @@
+<div class="col-xs-12 macro-key__container">
+    <div class="col-xs-3 macro-key__types">
+        <ul class="nav nav-pills nav-stacked">
+            <li #keyMove [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)">
+                <a>
+                    <i class="fa fa-hand-pointer-o"></i>
+                    <span>Press key</span>
+                </a>
+            </li>
+            <li #keyHold [class.active]="activeTab === TabName.Hold" (click)="selectTab(TabName.Hold)">
+                <a>
+                    <i class="fa fa-hand-rock-o"></i>
+                    <span>Hold key</span>
+                </a>
+            </li>
+            <li #keyRelease [class.active]="activeTab === TabName.Release" (click)="selectTab(TabName.Release)">
+                <a>
+                    <i class="fa fa-hand-paper-o"></i>
+                    <span>Release key</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="col-xs-9 macro-key__action-container">
+        <div class="macro-key__action">
+            <h4 *ngIf="activeTab === TabName.Keypress">Press key</h4>
+            <h4 *ngIf="activeTab === TabName.Hold">Hold key</h4>
+            <h4 *ngIf="activeTab === TabName.Release">Release key</h4>
+            <keypress-tab #keypressTab [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="false"></keypress-tab>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,25 @@
+.macro-key {
+    &__container {
+        padding: 0;
+    }
+
+    &__types {
+        margin-left: 0;
+        padding: 0 0 1rem;
+    }
+
+    &__action {
+        &-container {
+            margin-top: -1rem;
+            padding-top: 1rem;
+            border-left: 1px solid #ddd;
+        }
+
+        padding-left: 3rem;
+        padding-bottom: 1rem;
+    }
+}
+
+.fa {
+    min-width: 14px;
+}
@@ -0,0 +1,74 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+
+import { KeystrokeAction } from '../../../../../config-serializer/config-items/key-action';
+import { KeyMacroAction, MacroSubAction } from '../../../../../config-serializer/config-items/macro-action';
+import { KeypressTabComponent, Tab } from '../../../../popover/tab';
+
+enum TabName {
+    Keypress,
+    Hold,
+    Release
+}
+
+@Component({
+    selector: 'macro-key-tab',
+    templateUrl: './macro-key.component.html',
+    styleUrls: [
+        '../../macro-action-editor.component.scss',
+        './macro-key.component.scss'
+    ],
+    host: { 'class': 'macro__mouse' }
+})
+export class MacroKeyTabComponent implements OnInit {
+    @Input() macroAction: KeyMacroAction;
+    @ViewChild('tab') selectedTab: Tab;
+    @ViewChild('keypressTab') keypressTab: KeypressTabComponent;
+
+    /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    TabName = TabName;
+    /* tslint:enable:variable-name */
+    activeTab: TabName;
+    defaultKeyAction: KeystrokeAction;
+
+    ngOnInit() {
+        if (!this.macroAction) {
+            this.macroAction = new KeyMacroAction();
+        }
+        this.defaultKeyAction = new KeystrokeAction(<any>this.macroAction);
+        this.selectTab(this.getTabName(this.macroAction));
+    }
+
+    selectTab(tab: TabName): void {
+        this.activeTab = tab;
+    }
+
+    getTabName(macroAction: KeyMacroAction): TabName {
+        if (!macroAction.action) {
+            return TabName.Keypress;
+        } else if (macroAction.action === MacroSubAction.hold) {
+            return TabName.Hold;
+        } else if (macroAction.action === MacroSubAction.release) {
+            return TabName.Release;
+        }
+    }
+
+    getActionType(tab: TabName): MacroSubAction {
+        switch (tab) {
+            case TabName.Keypress:
+                return MacroSubAction.press;
+            case TabName.Hold:
+                return MacroSubAction.hold;
+            case TabName.Release:
+                return MacroSubAction.release;
+            default:
+                throw new Error('Invalid tab type');
+        }
+    }
+
+    getKeyMacroAction(): KeyMacroAction {
+        const keyMacroAction = Object.assign(new KeyMacroAction(), this.keypressTab.toKeyAction());
+        keyMacroAction.action = this.getActionType(this.activeTab);
+        return keyMacroAction;
+    }
+
+}
@@ -0,0 +1 @@
+export { MacroMouseTabComponent } from './macro-mouse.component';
@@ -0,0 +1,77 @@
+<div class="col-xs-12 macro-mouse__container">
+    <div class="col-xs-3 macro-mouse__types">
+        <ul class="nav nav-pills nav-stacked">
+            <li #mouseMove [class.active]="activeTab === TabName.Move" (click)="selectTab(TabName.Move)">
+                <a>
+                    <i class="fa fa-arrows"></i>
+                    <span>Move pointer</span>
+                </a>
+            </li>
+            <li #mouseScroll [class.active]="activeTab === TabName.Scroll" (click)="selectTab(TabName.Scroll)">
+                <a>
+                    <i class="fa fa-arrows-v"></i>
+                    <span>Scroll</span>
+                </a>
+            </li>
+            <li #mouseClick [class.active]="activeTab === TabName.Click" (click)="selectTab(TabName.Click)">
+                <a>
+                    <i class="fa fa-mouse-pointer"></i>
+                    <span>Click button</span>
+                </a>
+            </li>
+            <li #mouseHold [class.active]="activeTab === TabName.Hold" (click)="selectTab(TabName.Hold)">
+                <a>
+                    <i class="fa fa-hand-rock-o"></i>
+                    <span>Hold button</span>
+                </a>
+            </li>
+            <li #mouseRelease [class.active]="activeTab === TabName.Release" (click)="selectTab(TabName.Release)">
+                <a>
+                    <i class="fa fa-hand-paper-o"></i>
+                    <span>Release button</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="col-xs-9 macro-mouse__actions" [ngSwitch]="activeTab">
+        <div #tab *ngSwitchCase="TabName.Move">
+            <h4>Move pointer</h4>
+            <p>Use negative values to move down or left from current position.</p>
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label for="move-mouse-x">X</label>
+                    <input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"> pixels
+                </div>
+                <div class="form-group">
+                    <label for="move-mouse-y">Y</label>
+                    <input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"> pixels
+                </div>
+            </div>
+        </div>
+        <div #tab *ngSwitchCase="TabName.Scroll">
+            <h4>Scroll</h4>
+            <p>Use negative values to move down or left from current position.</p>
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label for="scroll-mouse-x">X</label>
+                    <input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"> pixels
+                </div>
+                <div class="form-group">
+                    <label for="scroll-mouse-y">Y</label>
+                    <input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"> pixels
+                </div>
+            </div>
+        </div>
+        <div #tab *ngIf="activeTab === TabName.Click || activeTab === TabName.Hold || activeTab === TabName.Release">
+            <h4 *ngIf="activeTab === TabName.Click">Click mouse button</h4>
+            <h4 *ngIf="activeTab === TabName.Hold">Hold mouse button</h4>
+            <h4 *ngIf="activeTab === TabName.Release">Release mouse button</h4>
+            <div class="btn-group macro-mouse__buttons">
+                <button *ngFor="let buttonLabel of buttonLabels; let buttonIndex = index"
+                        class="btn btn-default"
+                        [class.btn-primary]="hasButton(buttonIndex)"
+                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}</button>
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,43 @@
+.macro-mouse {
+    &__container {
+        padding: 0;
+    }
+
+    &__types {
+        border-right: 1px solid #ddd;
+        border-left: 0;
+        margin-top: -1rem;
+        margin-left: 0;
+        padding: 1rem 0;
+    }
+
+    &__actions {
+        padding-left: 3rem;
+        padding-bottom: 1rem;
+    }
+
+    &__buttons {
+        margin-top: 3rem;
+        margin-bottom: 1rem;
+    }
+}
+
+.fa {
+    min-width: 14px;
+}
+
+.form-horizontal {
+    .form-group {
+        margin: 0 0 0.5rem;
+    }
+
+    label {
+        display: inline-block;
+        margin-right: 0.5rem;
+    }
+
+    .form-control {
+        display: inline-block;
+        width: 60%;
+    }
+}
@@ -0,0 +1,123 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+
+import {
+    MouseButtonMacroAction,
+    MoveMouseMacroAction,
+    ScrollMouseMacroAction,
+    MacroSubAction
+} from '../../../../../config-serializer/config-items/macro-action';
+import { Tab } from '../../../../popover/tab';
+
+type MouseMacroAction = MouseButtonMacroAction | MoveMouseMacroAction | ScrollMouseMacroAction;
+
+enum TabName {
+    Move,
+    Scroll,
+    Click,
+    Hold,
+    Release
+}
+
+@Component({
+    selector: 'macro-mouse-tab',
+    templateUrl: './macro-mouse.component.html',
+    styleUrls: [
+        '../../macro-action-editor.component.scss',
+        './macro-mouse.component.scss'
+    ],
+    host: { 'class': 'macro__mouse' }
+})
+export class MacroMouseTabComponent implements OnInit {
+    @Input() macroAction: MouseMacroAction;
+    @ViewChild('tab') selectedTab: Tab;
+
+    /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    TabName = TabName;
+    /* tslint:enable:variable-name */
+    activeTab: TabName;
+    buttonLabels: string[];
+    private selectedButtons: boolean[];
+
+    constructor() {
+        this.buttonLabels = ['Left', 'Middle', 'Right'];
+        this.selectedButtons = Array(this.buttonLabels.length).fill(false);
+    }
+
+    ngOnInit() {
+        if (!this.macroAction) {
+            this.macroAction = new MouseButtonMacroAction();
+            this.macroAction.action = MacroSubAction.press;
+        }
+        const tabName = this.getTabName(this.macroAction);
+        this.selectTab(tabName);
+        const buttonActions = [TabName.Click, TabName.Hold, TabName.Release];
+        if (buttonActions.includes(this.activeTab)) {
+            this.selectedButtons = (<MouseButtonMacroAction>this.macroAction).getMouseButtons();
+        }
+    }
+
+    ngOnChanges() {
+        this.ngOnInit();
+    }
+
+    selectTab(tab: TabName): void {
+        this.activeTab = tab;
+
+        if (tab === this.getTabName(this.macroAction)) {
+            return;
+        }
+
+        switch (tab) {
+            case TabName.Scroll:
+                this.macroAction = new ScrollMouseMacroAction();
+                break;
+            case TabName.Move:
+                this.macroAction = new MoveMouseMacroAction();
+                break;
+            default:
+                this.macroAction = new MouseButtonMacroAction();
+                this.macroAction.action = this.getAction(tab);
+                break;
+        }
+    }
+
+    setMouseClick(index: number): void {
+        this.selectedButtons[index] = !this.selectedButtons[index];
+        (<MouseButtonMacroAction>this.macroAction).setMouseButtons(this.selectedButtons);
+    }
+
+    hasButton(index: number): boolean {
+        return this.selectedButtons[index];
+    }
+
+    getAction(tab: TabName): MacroSubAction {
+        switch (tab) {
+            case TabName.Click:
+                return MacroSubAction.press;
+            case TabName.Hold:
+                return MacroSubAction.hold;
+            case TabName.Release:
+                return MacroSubAction.release;
+            default:
+                throw new Error(`Invalid tab name: ${TabName[tab]}`);
+        }
+    }
+
+    getTabName(action: MouseMacroAction): TabName {
+        if (action instanceof MouseButtonMacroAction) {
+            if (!action.action || action.isOnlyPressAction()) {
+                return TabName.Click;
+            } else if (action.isOnlyHoldAction()) {
+                return TabName.Hold;
+            } else if (action.isOnlyReleaseAction()) {
+                return TabName.Release;
+            }
+        } else if (action instanceof MoveMouseMacroAction) {
+            return TabName.Move;
+        } else if (action instanceof ScrollMouseMacroAction) {
+            return TabName.Scroll;
+        }
+        return TabName.Move;
+    }
+
+}
@@ -0,0 +1 @@
+export { MacroTextTabComponent } from './macro-text.component';
@@ -0,0 +1,5 @@
+<div>
+    <h4>Type text</h4>
+    <p>Input the text you want to type with this macro action.</p>
+    <textarea #macroTextInput name="macro-text" (change)="onTextChange()" class="macro__text-input">{{ macroAction.text }}</textarea>
+</div>
@@ -0,0 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.macro__text-input {
+    width: 100%;
+    min-height: 10rem;
+    margin-bottom: 1rem;
+}
@@ -0,0 +1,39 @@
+import {
+    OnInit,
+    AfterViewInit,
+    Component,
+    ElementRef,
+    Input,
+    Renderer,
+    ViewChild
+} from '@angular/core';
+
+import { TextMacroAction } from '../../../../../config-serializer/config-items/macro-action';
+
+@Component({
+    selector: 'macro-text-tab',
+    templateUrl: './macro-text.component.html',
+    styleUrls: ['./macro-text.component.scss'],
+    host: { 'class': 'macro__text' }
+})
+export class MacroTextTabComponent implements OnInit, AfterViewInit {
+    @Input() macroAction: TextMacroAction;
+    @ViewChild('macroTextInput') input: ElementRef;
+
+    constructor(private renderer: Renderer) {}
+
+    ngOnInit() {
+        if (!this.macroAction) {
+            this.macroAction = new TextMacroAction();
+        }
+    }
+
+    ngAfterViewInit() {
+        this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');
+    }
+
+    onTextChange() {
+        this.macroAction.text = this.input.nativeElement.value;
+    }
+
+}
				`@@ -0,0 +1 @@`
				`export { MacroActionEditorComponent } from './macro-action-editor.component';`
				`@@ -0,0 +1 @@`
				`export { MacroDelayTabComponent } from './macro-delay.component';`
				`@@ -0,0 +1 @@`
				`export { MacroKeyTabComponent } from './macro-key.component';`
				`@@ -0,0 +1 @@`
				`export { MacroMouseTabComponent } from './macro-mouse.component';`
				`@@ -0,0 +1 @@`
				`export { MacroTextTabComponent } from './macro-text.component';`