fix: use OnPush change detection on the keymap edit and add pages (#760)

* fix: use OnPush change detection on the keymap edit and add pages

* fix: font-size

packages/uhk-web/package-lock.json

@@ -227,9 +227,9 @@
 			}
 		},
 		"@ert78gb/ngx-select-ex": {
-			"version": "3.7.0",
+			"version": "3.7.2",
-			"resolved": "https://registry.npmjs.org/@ert78gb/ngx-select-ex/-/ngx-select-ex-3.7.0.tgz",
+			"resolved": "https://registry.npmjs.org/@ert78gb/ngx-select-ex/-/ngx-select-ex-3.7.2.tgz",
-			"integrity": "sha512-m3DyGB1VZrxsItgc/NjBt5ZfW1DuQrxLz82ekw/ur79DZHG89EYohKWbx68lonfu8wM+AT4IHUDVqF1gFhyK0g==",
+			"integrity": "sha512-tFliRieRxNLHLpUGqGez2++C5PmmUYd1AvriHK2127X0QhOp3hWZ1/4j9etF9ZgE4Ti465sUtu8KcK5B0jjiTQ==",
 			"dev": true,
 			"requires": {
 				"tslib": "1.9.0"

packages/uhk-web/package.json

@@ -62,7 +62,7 @@
     "ng2-dragula": "1.5.0",
     "ng2-nouislider": "^1.7.7",
     "ngx-clipboard": "10.0.0",
-    "@ert78gb/ngx-select-ex": "3.7.0",
+    "@ert78gb/ngx-select-ex": "3.7.2",
     "ngrx-store-freeze": "0.1.9",
     "nouislider": "^11.1.0",
     "postcss-url": "^7.1.2",

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
 
@@ -14,6 +14,7 @@ import { KeymapActions } from '../../../store/actions';
     selector: 'keymap-add',
     templateUrl: './keymap-add.component.html',
     styleUrls: ['./keymap-add.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
         'class': 'container-fluid'
     }

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

@@ -1,4 +1,4 @@
-import { Component, HostListener } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
@@ -24,6 +24,7 @@ import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription
     selector: 'keymap-edit',
     templateUrl: './keymap-edit.component.html',
     styleUrls: ['./keymap-edit.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
         'class': 'container-fluid'
     }

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

@@ -1,4 +1,5 @@
 import {
+    ChangeDetectionStrategy,
     Component,
     ElementRef,
     EventEmitter,
@@ -47,6 +48,7 @@ enum TabName {
     selector: 'popover',
     templateUrl: './popover.component.html',
     styleUrls: ['./popover.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [
         trigger('popover', [
             state('closed', style({

packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts

@@ -1,10 +1,11 @@
-import { Component, EventEmitter, HostListener, Output, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
 import { CaptureService } from '../../../../services/capture.service';
 
 @Component({
     selector: 'capture-keystroke-button',
     templateUrl: './capture-keystroke-button.component.html',
-    styleUrls: ['./capture-keystroke-button.component.scss']
+    styleUrls: ['./capture-keystroke-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CaptureKeystrokeButtonComponent {
     @Input() isLink = false;

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

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'icon',
     templateUrl: './icon.component.html',
-    styleUrls: ['./icon.component.scss']
+    styleUrls: ['./icon.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IconComponent implements OnInit {
 

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

@@ -5,7 +5,7 @@ import { SvgKeyboardKey } from '../keys';
 import {
     SvgKeyCaptureEvent,
     SvgKeyClickEvent,
-    SvgModuleCaptureEvent,
+        SvgModuleCaptureEvent,
     SvgModuleKeyClickEvent
 } from '../../../models/svg-key-events';
 

packages/uhk-web/src/styles/_ngx-select-ex.scss

@@ -4,6 +4,10 @@ ngx-select,
         font-size: 14px;
     }
 
+    input.input-sm {
+        font-size: 14px;
+    }
+
     .dropdown-header {
         font-weight: bold;
         font-size: 1em;