chore: upgrade angular => 8.2.2 (#996)

* chore: upgrade angular => 8.2.2

Summary:
- upgrade angular => 8.2.2
- setup the { static: false/true } for the ViewChild
- use alignment-baseline="middle" in svg text to align correct the texts

* fix: keymap popover crash

packages/uhk-web/package.json

@@ -19,29 +19,28 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular/animations": "7.2.15",
-    "@angular-builders/custom-webpack": "7.3.1",
-    "@angular/cli": "7.3.9",
-    "@angular/common": "7.2.15",
-    "@angular/compiler": "7.2.15",
-    "@angular/compiler-cli": "7.2.15",
-    "@angular/core": "7.2.15",
-    "@angular-devkit/build-angular": "0.13.9",
-    "@angular-devkit/build-optimizer": "0.13.9",
-    "@angular-devkit/core": "7.3.9",
-    "@angular/forms": "7.2.15",
-    "@angular/http": "7.2.15",
-    "@angular/language-service": "7.2.15",
-    "@angular/platform-browser": "7.2.15",
-    "@angular/platform-browser-dynamic": "7.2.15",
-    "@angular/router": "7.2.15",
-    "@ngtools/webpack": "7.3.9",
-    "@ngrx/effects": "7.4.0",
-    "@ngrx/router-store": "7.4.0",
-    "@ngrx/store": "7.4.0",
-    "@ngrx/store-devtools": "7.4.0",
+    "@angular/animations": "8.2.2",
+    "@angular-builders/custom-webpack": "8.1.0",
+    "@angular/cli": "8.2.1",
+    "@angular/common": "8.2.2",
+    "@angular/compiler": "8.2.2",
+    "@angular/compiler-cli": "8.2.2",
+    "@angular/core": "8.2.2",
+    "@angular-devkit/build-angular": "0.802.1",
+    "@angular-devkit/build-optimizer": "0.802.1",
+    "@angular-devkit/core": "8.2.1",
+    "@angular/forms": "8.2.2",
+    "@angular/language-service": "8.2.2",
+    "@angular/platform-browser": "8.2.2",
+    "@angular/platform-browser-dynamic": "8.2.2",
+    "@angular/router": "8.2.2",
+    "@ngtools/webpack": "8.2.1",
+    "@ngrx/effects": "8.2.0",
+    "@ngrx/router-store": "8.2.0",
+    "@ngrx/store": "8.2.0",
+    "@ngrx/store-devtools": "8.2.0",
     "@ngrx/store-log-monitor": "3.0.2",
-    "angular-confirmation-popover": "4.2.0",
+    "angular-confirmation-popover": "4.2.1",
     "angular-notifier": "4.1.1",
     "bootstrap": "3.4.1",
     "codelyzer": "4.5.0",
@@ -56,19 +55,18 @@
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "1.3.1",
     "ng2-dragula": "2.1.1",
-    "ng2-nouislider": "1.7.13",
-    "ngx-clipboard": "10.0.0",
-    "ngx-select-ex": "3.6.8",
-    "ngrx-store-freeze": "0.1.9",
-    "nouislider": "13.1.1",
+    "ng2-nouislider": "1.8.2",
+    "ngx-clipboard": "12.2.0",
+    "ngx-select-ex": "3.7.0",
+    "ngrx-store-freeze": "0.2.4",
+    "nouislider": "14.0.2",
     "protractor": "5.4.0",
-    "reselect": "3.0.1",
-    "rxjs": "6.4.0",
+    "rxjs": "6.5.2",
     "semver": "5.6.0",
     "ts-keycode-enum": "^1.0.6",
     "uhk-common": "1.0.0",
     "xml-loader": "1.2.1",
-    "zone.js": "0.8.26"
+    "zone.js": "0.10.0"
   },
   "dependencies": {
     "classlist.js": "1.1.20150312",

packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import { AppState } from '../../../../store/index';
+import { AppState } from '../../../../store';
 
 import { UHKContributor } from '../../../../models/uhk-contributor';
 
@@ -10,9 +10,9 @@ import { UHKContributor } from '../../../../models/uhk-contributor';
     templateUrl: './contributor-badge.component.html',
     styleUrls: ['./contributor-badge.component.scss']
 })
-export class ContributorBadgeComponent implements OnInit {
+export class ContributorBadgeComponent implements AfterViewInit {
     @Input() contributor: UHKContributor;
-    @ViewChild('badge') badge: ElementRef;
+    @ViewChild('badge', { static: false }) badge: ElementRef;
 
     get name(): string {
         return this.contributor.login;
@@ -29,7 +29,7 @@ export class ContributorBadgeComponent implements OnInit {
     constructor(private store: Store<AppState>) {
     }
 
-    ngOnInit(): void {
+    ngAfterViewInit(): void {
         (this.badge.nativeElement as HTMLImageElement).src = URL.createObjectURL(this.contributor.avatar);
     }
 }

packages/uhk-web/src/app/components/auto-grow-input/auto-grow-input.component.ts

@@ -30,7 +30,7 @@ export class AutoGrowInputComponent implements ControlValueAccessor {
     @Input() maxParentWidthPercent = 1;
     @Input() css: string;
 
-    @ViewChild('inputControl') inputControl: ElementRef;
+    @ViewChild('inputControl', { static: true }) inputControl: ElementRef;
 
     disabled: boolean;
 

packages/uhk-web/src/app/components/keymap/header/keymap-header.component.ts

@@ -39,8 +39,8 @@ export class KeymapHeaderComponent implements OnChanges {
     @Input() deletable: boolean;
     @Output() downloadClick = new EventEmitter<void>();
 
-    @ViewChild('name') keymapName: ElementRef;
-    @ViewChild('abbr') keymapAbbr: ElementRef;
+    @ViewChild('name', { static: true }) keymapName: ElementRef;
+    @ViewChild('abbr', { static: true }) keymapAbbr: ElementRef;
 
     starTitle: string;
     trashTitle: string = DEFAULT_TRASH_TITLE;

packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.ts

@@ -31,7 +31,8 @@ export class MacroActionEditorComponent implements OnInit {
     @Output() save = new EventEmitter<MacroAction>();
     @Output() cancel = new EventEmitter<void>();
 
-    @ViewChild('tab') selectedTab: MacroTextTabComponent | MacroKeyTabComponent | MacroMouseTabComponent | MacroDelayTabComponent;
+    // tslint:disable-next-line:max-line-length
+    @ViewChild('tab', { static: false }) selectedTab: MacroTextTabComponent | MacroKeyTabComponent | MacroMouseTabComponent | MacroDelayTabComponent;
 
     editableMacroAction: MacroAction;
     activeTab: TabName;

packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts

@@ -1,10 +1,8 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    ElementRef,
     Input,
-    OnInit,
-    ViewChild
+    OnInit
 } from '@angular/core';
 import { DelayMacroAction } from 'uhk-common';
 
@@ -21,7 +19,6 @@ const INITIAL_DELAY = 0.5; // In seconds
 })
 export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: DelayMacroAction;
-    @ViewChild('macroDelayInput') input: ElementRef;
 
     presets: number[] = [0.1, 0.5, 1, 5, 10];
 

packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts

@@ -21,8 +21,7 @@ enum TabName {
 })
 export class MacroKeyTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: KeyMacroAction;
-    @ViewChild('tab') selectedTab: Tab;
-    @ViewChild('keypressTab') keypressTab: KeypressTabComponent;
+    @ViewChild('keypressTab', { static: true }) keypressTab: KeypressTabComponent;
 
     /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
     TabName = TabName;

packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 import {
     MacroMouseSubAction,
@@ -7,7 +7,6 @@ import {
     MoveMouseMacroAction,
     ScrollMouseMacroAction
 } from 'uhk-common';
-import { Tab } from '../../../../popover/tab';
 import { MacroBaseComponent } from '../macro-base.component';
 
 type MouseMacroAction = MouseButtonMacroAction | MoveMouseMacroAction | ScrollMouseMacroAction;
@@ -31,7 +30,6 @@ enum TabName {
 })
 export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: MouseMacroAction;
-    @ViewChild('tab') selectedTab: Tab;
 
     /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
     MouseButtons = MouseButtons;

packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts

@@ -20,7 +20,7 @@ const NON_ASCII_REGEXP = /[^\x00-\x7F]/g;
 })
 export class MacroTextTabComponent extends MacroBaseComponent implements OnInit, AfterViewInit {
     @Input() macroAction: TextMacroAction;
-    @ViewChild('macroTextInput') input: ElementRef;
+    @ViewChild('macroTextInput', { static: false } ) input: ElementRef;
 
     constructor() { super(); }
 

packages/uhk-web/src/app/components/macro/header/macro-header.component.ts

@@ -26,7 +26,7 @@ import * as util from '../../../util';
 export class MacroHeaderComponent implements AfterViewInit, OnChanges {
     @Input() macro: Macro;
     @Input() isNew: boolean;
-    @ViewChild('macroName') macroName: ElementRef;
+    @ViewChild('macroName', { static: true }) macroName: ElementRef;
 
     constructor(private store: Store<AppState>, private renderer: Renderer2) { }
 

packages/uhk-web/src/app/components/macro/list/macro-list.component.ts

@@ -46,7 +46,6 @@ export class MacroListComponent {
     newMacro: Macro = undefined;
     showNew: boolean = false;
     private activeEdit: number = undefined;
-    private dragIndex: number;
 
     constructor(
         private mapper: MapperService,
@@ -59,16 +58,18 @@ export class MacroListComponent {
             }
         });
 
-        dragulaService.drag('macroActions').subscribe((value: any) => {
-            this.dragIndex = +value[1].getAttribute('data-index');
-        });
+        dragulaService.drop('macroActions').subscribe(value => {
+            if (value.el) {
+                let newIndex = this.macroItems.length - 1;
+
+                if (value.sibling) {
+                    newIndex = (+value.sibling.getAttribute('data-index') - 1);
+                }
 
-        dragulaService.drop('macroActions').subscribe((value: any) => {
-            if (value[4]) {
                 this.reorder.emit({
                     macroId: this.macro.id,
-                    oldIndex: this.dragIndex,
-                    newIndex: +value[4].getAttribute('data-index')
+                    oldIndex: +value.el.getAttribute('data-index'),
+                    newIndex
                 });
             }
         });

packages/uhk-web/src/app/components/popover/popover.component.ts

@@ -98,8 +98,8 @@ export class PopoverComponent implements OnChanges {
     @Output() cancel = new EventEmitter<any>();
     @Output() remap = new EventEmitter<KeyActionRemap>();
 
-    @ViewChild('tab') selectedTab: Tab;
-    @ViewChild('popover') popoverHost: ElementRef;
+    @ViewChild('tab', { static: false }) selectedTab: Tab;
+    @ViewChild('popover', { static: false }) popoverHost: ElementRef;
 
     tabName = TabName;
     keyActionValid: boolean;

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -2,10 +2,9 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    ElementRef,
-    OnDestroy, OnInit,
-    Renderer2,
-    ViewChild
+    OnDestroy,
+    OnInit,
+    Renderer2
 } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
@@ -38,7 +37,6 @@ import { SideMenuPageState } from '../../models/side-menu-page-state';
 export class SideMenuComponent implements OnInit, OnDestroy {
     state: SideMenuPageState;
     animation: { [key: string]: 'active' | 'inactive' };
-    @ViewChild('deviceName') deviceName: ElementRef;
 
     private stateSubscription: Subscription;
 

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts

@@ -28,7 +28,7 @@ export interface SliderProps {
     ]
 })
 export class SliderWrapperComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
-    @ViewChild(NouisliderComponent) slider: NouisliderComponent;
+    @ViewChild(NouisliderComponent, { static: false }) slider: NouisliderComponent;
     @Input() label: string;
     @Input() tooltip: string;
     @Input() min: number;

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts

@@ -91,6 +91,7 @@ export class SvgKeyboardComponent {
         this.modules = [];
         this.viewBox = '-520 582 1100 470';
         this.moduleAnimationStates = [];
+        this.moduleVisibilityAnimationStates = [];
     }
 
     ngOnInit() {

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss

@@ -1,8 +1,4 @@
 :host {
-    /deep/ text {
-        dominant-baseline: central;
-    }
-
     cursor: pointer;
     outline: none;
 

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -79,7 +79,7 @@ export class SvgKeyboardKeyComponent implements OnChanges {
     @Output() keyClick = new EventEmitter<SvgKeyClickEvent>();
     @Output() capture = new EventEmitter<SvgKeyCaptureEvent>();
 
-    @ViewChild('svgRec') svgRec: ElementRef<HTMLElement>;
+    @ViewChild('svgRec', { static: false }) svgRec: ElementRef<HTMLElement>;
 
     enumLabelTypes = LabelTypes;
 

packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html

@@ -25,17 +25,17 @@
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="control.width" [attr.height]="control.height" [attr.x]="control.x" [attr.y]="control.y"
         preserveAspectRatio="none" [class.disabled]="control.disabled">
-        <svg:text [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">C</svg:text>
+        <svg:text text-anchor="middle" alignment-baseline="middle" x="50" y="55">C</svg:text>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="option.width" [attr.height]="option.height" [attr.x]="option.x" [attr.y]="option.y"
         preserveAspectRatio="none" [class.disabled]="option.disabled">
         <svg:use *ngIf="modifierIconNames.option" [attr.xlink:href]="modifierIconNames.option" />
-        <svg:text *ngIf="!modifierIconNames.option" [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">A</svg:text>
+        <svg:text *ngIf="!modifierIconNames.option" text-anchor="middle" alignment-baseline="middle" x="50" y="55">A</svg:text>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="command.width" [attr.height]="command.height" [attr.x]="command.x" [attr.y]="command.y"
         preserveAspectRatio="none" [class.disabled]="command.disabled">
         <svg:use *ngIf="modifierIconNames.command" [attr.xlink:href]="modifierIconNames.command" />
-        <svg:text *ngIf="!modifierIconNames.command" [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">S</svg:text>
+        <svg:text *ngIf="!modifierIconNames.command" text-anchor="middle" alignment-baseline="middle" x="50" y="55">S</svg:text>
     </svg>
 </svg>
 <svg:g svg-secondary-role

packages/uhk-web/src/app/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html

@@ -5,12 +5,12 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="25">
-        <tspan dy="34"> Click </tspan>
+        <tspan dy="45"> Click </tspan>
 </svg:text>
 <svg:text
     [attr.x]="50"
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="25">
-        <tspan dy="70"> {{ button }} </tspan>
+        <tspan dy="80"> {{ button }} </tspan>
 </svg:text>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html

@@ -4,6 +4,6 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="24">
-        <tspan dy="34"> Move </tspan>
+        <tspan dy="45"> Move </tspan>
 </svg:text>
 <svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html

@@ -4,6 +4,6 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="24">
-        <tspan dy="34"> Scroll </tspan>
+        <tspan dy="45"> Scroll </tspan>
 </svg:text>
 <svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html

@@ -5,12 +5,12 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="25">
-        <tspan dy="34"> Speed </tspan>
+        <tspan dy="45"> Speed </tspan>
 </svg:text>
 <svg:text
     [attr.x]="50"
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="30">
-        <tspan dy="70"> {{ sign }} </tspan>
+        <tspan dy="80"> {{ sign }} </tspan>
 </svg:text>

packages/uhk-web/src/app/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.html

@@ -1,8 +1,9 @@
 <svg:text
-    [attr.x]="0"
+    [attr.x]="textX"
     [attr.y]="textY"
-    [attr.text-anchor]="'middle'">
-    <tspan [attr.x]="spanX" dy="0">{{ text }}</tspan>
+    text-anchor="middle"
+    alignment-baseline="middle">
+    {{ text }}
 </svg:text>
 <svg:g svg-secondary-role
        *ngIf="secondaryText"

packages/uhk-web/src/app/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.ts

@@ -14,8 +14,8 @@ export class SvgOneLineTextKeyComponent implements OnChanges {
     @Input() text: string;
     @Input() secondaryText: string;
 
+    textX: number;
     textY: number;
-    spanX: number;
     secondaryTextY: number;
     secondaryHeight: number;
 
@@ -34,8 +34,8 @@ export class SvgOneLineTextKeyComponent implements OnChanges {
             secondaryYModifier = 5;
         }
 
+        this.textX = this.width / 2;
         this.textY = this.height / 2 - textYModifier;
-        this.spanX = this.width / 2;
 
         this.secondaryHeight = this.height / 4;
         this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.html

@@ -1,14 +1,15 @@
 <svg [attr.viewBox]="viewBox" [attr.width]="width" [attr.height]="height" [attr.y]="y">
-    <g id="secondaryContent" [attr.transform]="transform">
+    <g [attr.transform]="transform">
         <svg viewBox="0 0 14 14" width="12" height="12" x="2" [attr.y]="textY / 3.5">
             <ellipse stroke="#fff" rx="6.5" ry="6.5" cy="7" cx="7" stroke-width="1" fill-opacity="0"/>
-            <text text-anchor="start" font-family="Helvetica" font-size="12" y="7.8" x="4" stroke-width="0">2
+            <text text-anchor="start" alignment-baseline="middle" font-family="Helvetica" font-size="12" y="7.8" x="4" stroke-width="0">2
             </text>
         </svg>
         <text [attr.y]="textY"
               [attr.x]="textIndent"
               font-size="12"
-              text-anchor="start">
+              text-anchor="start"
+              alignment-baseline="middle">
             {{ text }}
         </text>
     </g>

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.scss

@@ -0,0 +1,3 @@
+text {
+    dominant-baseline: text-bottom;
+}

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.ts

@@ -1,12 +1,10 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    ElementRef,
     Input,
     OnChanges,
     OnInit,
-    SimpleChanges,
-    ViewChild
+    SimpleChanges
 } from '@angular/core';
 
 import { getContentWidth } from '../../../../util';
@@ -18,6 +16,7 @@ const SECONDARY_STYLE: CSSStyleDeclaration = {
 @Component({
     selector: 'g[svg-secondary-role]',
     templateUrl: './svg-secondary-role.component.html',
+    styleUrls: ['./svg-secondary-role.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SvgSecondaryRoleComponent implements OnInit, OnChanges {
@@ -26,8 +25,6 @@ export class SvgSecondaryRoleComponent implements OnInit, OnChanges {
     @Input() y: number;
     @Input() text: string;
 
-    @ViewChild('secondary') svgElement: ElementRef;
-
     viewBox: string;
     textY: number;
     transform: string;

packages/uhk-web/src/app/components/svg/keys/svg-switch-keymap-key/svg-switch-keymap-key.component.html

@@ -5,8 +5,9 @@
         [attr.y]="useY">
 </svg:use>
 <svg:text
-    [attr.x]="0"
+    [attr.x]="textX"
     [attr.y]="textY"
-    [attr.text-anchor]="'middle'">
-        <tspan [attr.x]="spanX">{{ abbreviation }}</tspan>
+    text-anchor="middle"
+    alignment-baseline="middle">
+    {{ abbreviation }}
 </svg:text>

packages/uhk-web/src/app/components/svg/keys/svg-switch-keymap-key/svg-switch-keymap-key.component.ts

@@ -18,7 +18,7 @@ export class SvgSwitchKeymapKeyComponent implements OnInit {
     useX: number;
     useY: number;
     textY: number;
-    spanX: number;
+    textX: number;
 
     constructor(private mapperService: MapperService) { }
 
@@ -30,6 +30,6 @@ export class SvgSwitchKeymapKeyComponent implements OnInit {
         this.useX = this.width * 3 / 8;
         this.useY = this.height / 5;
         this.textY = this.height * 2 / 3;
-        this.spanX = this.width / 2;
+        this.textX = this.width / 2;
     }
 }

packages/uhk-web/src/app/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.html

@@ -1,9 +1,10 @@
- <svg:text
-    [attr.x]="0"
+<svg:text
+    [attr.x]="textX"
     [attr.y]="textY"
-    [attr.text-anchor]="textAnchor">
-        <tspan [attr.x]="spanX">{{ text }}</tspan>
- </svg:text>
+    [attr.text-anchor]="textAnchor"
+    alignment-baseline="middle">
+    {{ text }}
+</svg:text>
 <svg:use [attr.xlink:href]="icon"
         [attr.width]="useWidth"
         [attr.height]="useHeight"

packages/uhk-web/src/app/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.ts

@@ -21,7 +21,7 @@ export class SvgTextIconKeyComponent implements OnChanges {
     useY: number;
     textY: number;
     textAnchor: string;
-    spanX: number;
+    textX: number;
     secondaryTextY: number;
     secondaryHeight: number;
 
@@ -46,7 +46,7 @@ export class SvgTextIconKeyComponent implements OnChanges {
         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) - textYModifier;
         this.textAnchor = (this.width > 2 * this.height) ? 'end' : 'middle';
-        this.spanX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
+        this.textX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
 
         this.secondaryHeight = this.height / 4;
         this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;

packages/uhk-web/src/app/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.html

@@ -1,12 +1,12 @@
 <svg:text
     [attr.x]="0"
     [attr.y]="textY"
-    [attr.text-anchor]="'middle'">
+    text-anchor="middle"
+    alignment-baseline="middle">
          <tspan
                 *ngFor="let text of texts; let index = index"
                 [attr.x]="spanX"
                 [attr.y]="spanYs[index]"
-                dy="0"
                 >{{ text }}</tspan>
  </svg:text>
 <svg:g svg-secondary-role

packages/uhk-web/src/app/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.ts

@@ -27,13 +27,11 @@ export class SvgTwoLineTextKeyComponent implements OnChanges {
     }
 
     calculatePositions(): void {
-        let textYModifier = 0;
         let secondaryYModifier = 0;
         this.secondaryHeight = 0;
         let textContainerHeight = this.height;
 
         if (this.secondaryText) {
-            textYModifier =  this.height / 5;
             secondaryYModifier = 0;
             this.secondaryHeight = this.height / 4;
             textContainerHeight -= this.secondaryHeight;
@@ -43,7 +41,7 @@ export class SvgTwoLineTextKeyComponent implements OnChanges {
         this.spanX = this.width / 2;
         this.spanYs = [];
         for (let i = 0; i < this.texts.length; ++i) {
-            this.spanYs.push((0.75 - i * 0.5) * textContainerHeight);
+            this.spanYs.push((0.85 - i * 0.5) * textContainerHeight);
         }
 
         this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -73,7 +73,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     @Output() descriptionChanged = new EventEmitter<ChangeKeymapDescription>();
 
-    @ViewChild(PopoverComponent, { read: ElementRef }) popover: ElementRef;
+    @ViewChild(PopoverComponent, { read: ElementRef, static: false }) popover: ElementRef;
 
     popoverShown: boolean;
     keyEditConfig: { moduleId: number, keyId: number };
@@ -218,7 +218,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             return;
         }
 
-        const el: Element = event.target as Element || event.srcElement;
+        const el = event.target as Element;
         const position: ClientRect = el.getBoundingClientRect();
         let posLeft: number = this.tooltipData.posLeft;
         let posTop: number = this.tooltipData.posTop;

packages/uhk-web/src/app/components/xterm/xterm.component.ts

@@ -10,7 +10,7 @@ import { XtermLog } from '../../models/xterm-log';
 export class XtermComponent implements OnChanges {
     @Input() logs: Array<XtermLog> = [];
 
-    @ViewChild('scrollMe') divElement: ElementRef;
+    @ViewChild('scrollMe', { static: false }) divElement: ElementRef;
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.logs && this.divElement && this.divElement.nativeElement) {

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -446,16 +446,9 @@ export function reducer(
             const userConfiguration: UserConfiguration = Object.assign(new UserConfiguration(), state.userConfiguration);
             userConfiguration.macros = state.userConfiguration.macros.map((macro: Macro) => {
                 if (macro.id === payload.id) {
-                    let newIndex: number = payload.newIndex;
-
-                    // We need to reduce the new index for one when we are moving action down
-                    if (newIndex > payload.oldIndex) {
-                        --newIndex;
-                    }
-
                     macro = new Macro(macro);
                     macro.macroActions.splice(
-                        newIndex,
+                        payload.newIndex,
                         0,
                         macro.macroActions.splice(payload.oldIndex, 1)[0]
                     );

packages/uhk-web/src/app/web.module.ts

@@ -15,7 +15,7 @@ import { effects } from './store/effects';
         BrowserModule,
         SharedModule,
         StoreModule.forRoot(reducers),
-        StoreRouterConnectingModule,
+        StoreRouterConnectingModule.forRoot(),
         StoreDevtoolsModule.instrument({
             maxAge: 10
         }),

packages/uhk-web/src/main-web.ts

@@ -8,4 +8,6 @@ if (environment.production) {
     enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(WebModule);
+platformBrowserDynamic().bootstrapModule(WebModule, {
+    preserveWhitespaces: true
+});

packages/uhk-web/src/renderer/uhk-renderer.module.ts

@@ -22,7 +22,7 @@ import { effects } from '../app/store/effects';
         SharedModule,
         routing,
         StoreModule.forRoot(reducers),
-        StoreRouterConnectingModule,
+        StoreRouterConnectingModule.forRoot(),
         StoreDevtoolsModule.instrument({
             maxAge: 10
         }),

packages/uhk-web/src/tsconfig.renderer.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
     "baseUrl": "./",
-    "target": "es6",
+    "target": "es5", // Until https://github.com/electron/electron/issues/12011 not working without custom protocol
     "types": ["node"],
     "lib": [
       "es2016",