Seperate electron and web target building

shared/src/components/macro/header/macro-header.component.ts

@@ -0,0 +1,55 @@
+import {
+    AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, Renderer,
+    ViewChild
+} from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+import { Macro } from '../../../config-serializer/config-items/Macro';
+
+import { MacroActions } from '../../../store/actions';
+import { AppState } from '../../../store/index';
+
+@Component({
+    selector: 'macro-header',
+    template: require('./macro-header.component.html'),
+    styles: [require('./macro-header.component.scss')],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MacroHeaderComponent implements AfterViewInit, OnChanges {
+    @Input() macro: Macro;
+    @Input() isNew: boolean;
+    @ViewChild('macroName') macroName: ElementRef;
+
+    constructor(private store: Store<AppState>, private renderer: Renderer) { }
+
+    ngOnChanges() {
+        if (this.isNew) {
+            this.renderer.invokeElementMethod(this.macroName.nativeElement, 'select', []);
+        }
+    }
+
+    ngAfterViewInit() {
+        if (this.isNew) {
+            this.renderer.invokeElementMethod(this.macroName.nativeElement, 'select', []);
+        }
+    }
+
+    removeMacro() {
+        this.store.dispatch(MacroActions.removeMacro(this.macro.id));
+    }
+
+    duplicateMacro() {
+        this.store.dispatch(MacroActions.duplicateMacro(this.macro));
+    }
+
+    editMacroName(name: string) {
+        if (name.length === 0) {
+            this.renderer.setElementProperty(this.macroName.nativeElement, 'value', this.macro.name);
+            return;
+        }
+
+        this.store.dispatch(MacroActions.editMacroName(this.macro.id, name));
+    }
+
+}