WIP feat: replace ng2-select2 => ngx-select-ex (#706)

* feat: replace ng2-select2 => ngx-select-ex

* feat: style the ngrx-select

* feat: replace secondary role select2

* feat: replace Select2OptionData => SelectOptionData

* feat: replace select2 => ngx-select in macro-tab component

* feat: replace select2 => ngx-select in keymap-tab component

* feat: fix styles

* chore: remove select2 from dependencies

* fix: macro editor overflow

* fix: set the same font size for the toggle button

* fix: overflow

* chore: use @ert78gb/ngx-select-ex version of ngx-select-ex

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "uhk-agent",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

packages/uhk-web/.angular-cli.json

@@ -26,7 +26,6 @@
       ],
       "scripts": [
         "../node_modules/bootstrap/dist/js/bootstrap.js",
-        "../node_modules/select2/dist/js/select2.full.js",
         "../node_modules/nouislider/distribute/nouislider.js"
       ],
       "environmentSource": "environments/environment.ts",

packages/uhk-web/package-lock.json

@@ -1154,6 +1154,14 @@
 				"tslib": "1.9.0"
 			}
 		},
+		"@ert78gb/ngx-select-ex": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/@ert78gb/ngx-select-ex/-/ngx-select-ex-3.6.0.tgz",
+			"integrity": "sha512-bR6uL7T/wxDUEhlAA90QcclMawEYzWAjk1Ra8SAYlLv15QCRU8WKZM+WSsdYKgseCDnmYTf/9eXDZQI/DsM0eQ==",
+			"requires": {
+				"tslib": "1.9.0"
+			}
+		},
 		"@ngrx/effects": {
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-4.0.5.tgz",
@@ -1270,14 +1278,6 @@
 			"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
 			"integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU="
 		},
-		"@types/select2": {
-			"version": "4.0.44",
-			"resolved": "https://registry.npmjs.org/@types/select2/-/select2-4.0.44.tgz",
-			"integrity": "sha512-aunlkCCVG3uQZns+uAvxmYlWwvv8DuVLS+rKN9Az4ENylcIvwNHDfg7oJPeGlSYSZ9vacHQ91HoRGWnhZo7jHQ==",
-			"requires": {
-				"@types/jquery": "3.2.9"
-			}
-		},
 		"@types/selenium-webdriver": {
 			"version": "2.53.43",
 			"resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz",
@@ -1377,11 +1377,6 @@
 				"repeat-string": "1.6.1"
 			}
 		},
-		"almond": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/almond/-/almond-0.3.3.tgz",
-			"integrity": "sha1-oOfJWsdiTWQXtElLHmi/9pMWiiA="
-		},
 		"amdefine": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -5758,11 +5753,6 @@
 			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
 			"integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
 		},
-		"jquery-mousewheel": {
-			"version": "3.1.13",
-			"resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
-			"integrity": "sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU="
-		},
 		"js-base64": {
 			"version": "2.4.3",
 			"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
@@ -6509,22 +6499,6 @@
 			"resolved": "https://registry.npmjs.org/ng2-nouislider/-/ng2-nouislider-1.7.7.tgz",
 			"integrity": "sha1-uEH0sxPIycinY8gPOlnVqkw6cMg="
 		},
-		"ng2-select2": {
-			"version": "1.0.0-beta.10",
-			"resolved": "https://registry.npmjs.org/ng2-select2/-/ng2-select2-1.0.0-beta.10.tgz",
-			"integrity": "sha1-kIsLip+M0Gc287yhax41ofaWoUU=",
-			"requires": {
-				"@types/jquery": "2.0.49",
-				"@types/select2": "4.0.44"
-			},
-			"dependencies": {
-				"@types/jquery": {
-					"version": "2.0.49",
-					"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.49.tgz",
-					"integrity": "sha512-/9xLnYmohN/vD2gDnLS4cym8TUmrJu7DvZa/LELKzZjdPsvWVJiedsdu2SXNtb/DA7FGimqL2g0IoyhbNKLl8g=="
-				}
-			}
-		},
 		"ngrx-store-freeze": {
 			"version": "0.1.9",
 			"resolved": "https://registry.npmjs.org/ngrx-store-freeze/-/ngrx-store-freeze-0.1.9.tgz",
@@ -8090,15 +8064,6 @@
 			"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
 			"integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
 		},
-		"select2": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/select2/-/select2-4.0.3.tgz",
-			"integrity": "sha1-IHcz/pHqy5yxoT8SRjQB9HJEng8=",
-			"requires": {
-				"almond": "0.3.3",
-				"jquery-mousewheel": "3.1.13"
-			}
-		},
 		"selenium-webdriver": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-3.0.1.tgz",

packages/uhk-web/package.json

@@ -61,15 +61,14 @@
     "karma-jasmine-html-reporter": "0.2.2",
     "ng2-dragula": "1.5.0",
     "ng2-nouislider": "^1.7.7",
-    "ng2-select2": "1.0.0-beta.10",
     "ngx-clipboard": "10.0.0",
+    "@ert78gb/ngx-select-ex": "3.6.0",
     "ngrx-store-freeze": "0.1.9",
     "nouislider": "^11.1.0",
     "postcss-url": "^7.1.2",
     "protractor": "5.1.2",
     "reselect": "3.0.1",
     "rxjs": "5.5.8",
-    "select2": "4.0.3",
     "typescript": "2.6.2",
     "uhk-common": "1.0.0",
     "xml-loader": "1.2.1",

packages/uhk-web/src/app/components/macro/item/macro-item.component.html

@@ -8,10 +8,11 @@
     <icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
 </div>
 <div class="list-group-item macro-action-editor__container"
-     [@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'">
+     [@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'"
-  <macro-action-editor
+     [style.overflow]="overflow">
-      [macroAction]="macroAction"
+    <macro-action-editor
-      (cancel)="cancelEdit()"
+        [macroAction]="macroAction"
-      (save)="saveEditedAction($event)">
+        (cancel)="cancelEdit()"
-  </macro-action-editor>
+        (save)="saveEditedAction($event)">
-</div>
+    </macro-action-editor>
+</div>

packages/uhk-web/src/app/components/macro/item/macro-item.component.scss

@@ -1,7 +1,7 @@
 @import '../../../../styles/variables';
 
 :host {
-    overflow: hidden;
+    overflow: visible;
     display: block;
 
     &.macro-item:first-of-type {

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

@@ -45,6 +45,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     iconName: string;
     editing: boolean;
     newItem: boolean = false;
+    overflow = 'hidden';
 
     constructor(private mapper: MapperService) { }
 
@@ -53,6 +54,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
         if (!this.macroAction) {
             this.editing = true;
             this.newItem = true;
+            this.overflow = 'visible';
         }
     }
 
@@ -65,6 +67,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     saveEditedAction(editedAction: MacroAction): void {
         this.macroAction = editedAction;
         this.editing = false;
+        this.overflow = 'hidden';
         this.updateView();
         this.save.emit(editedAction);
     }
@@ -77,10 +80,12 @@ export class MacroItemComponent implements OnInit, OnChanges {
 
         this.editing = true;
         this.edit.emit();
+        this.setOverflow('visible');
     }
 
     cancelEdit(): void {
         this.editing = false;
+        this.overflow = 'hidden';
         this.cancel.emit();
     }
 
@@ -202,4 +207,12 @@ export class MacroItemComponent implements OnInit, OnChanges {
         });
         this.title += selectedButtonLabels.join(', ');
     }
+
+    private setOverflow(value: string): void {
+        // tslint:disable: align
+        setTimeout(() => {
+            this.overflow = value;
+        }, 600);
+        // tslint:enable: align
+    }
 }

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

@@ -116,23 +116,6 @@
     }
 }
 
-.select2-item {
-    position: relative;
-    font-size: 1.5rem;
-
-    &.keymap-name--wrapper {
-        padding-left: 50px;
-    }
-
-    .layout-segment-code {
-        height: 2rem;
-        position: absolute;
-        left: 0;
-        top: 50%;
-        margin-top: -1rem;
-    }
-}
-
 .popover-action-form {
     margin-top: 4px;
 

packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html

@@ -4,12 +4,23 @@
 <ng-template [ngIf]="keymapOptions.length > 0">
     <div>
         <b>Switch to keymap:</b>
-        <select2
+        <ngx-select [items]="keymapOptions"
-                [data]="keymapOptions"
+                    [ngModel]="selectedKeymap?.abbreviation || -1"
-                [value]="selectedKeymap?.abbreviation || -1"
+                    [autoActiveOnMouseEnter]="false"
-                (valueChanged)="onChange($event)"
+                    size="small"
-                [width]="'100%'"
+                    optionValueField="id"
-        ></select2>
+                    optionTextField="text"
+                    (select)="onChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+        </ngx-select>
     </div>
     <div>
         <div class="empty" *ngIf="!selectedKeymap?.abbreviation">

packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.scss

@@ -16,7 +16,7 @@
             margin-right: 7px;
         }
 
-        select2 {
+        ngx-select {
             flex: 1;
         }
     }

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

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Select2OptionData } from 'ng2-select2/ng2-select2';
 import { Keymap, KeyAction, SwitchKeymapAction } from 'uhk-common';
 
 import { Tab } from '../tab';
+import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
     selector: 'keymap-tab',
@@ -14,7 +14,7 @@ export class KeymapTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
     @Input() keymaps: Keymap[];
 
-    keymapOptions: Array<Select2OptionData>;
+    keymapOptions: Array<SelectOptionData>;
     selectedKeymap: Keymap;
 
     constructor() {
@@ -25,7 +25,7 @@ export class KeymapTabComponent extends Tab implements OnChanges {
     ngOnChanges(changes: SimpleChanges) {
         if (changes.keymaps) {
             this.keymapOptions = this.keymaps
-                .map((keymap: Keymap): Select2OptionData => {
+                .map((keymap: Keymap): SelectOptionData => {
                     return {
                         id: keymap.abbreviation,
                         text: keymap.name
@@ -40,12 +40,11 @@ export class KeymapTabComponent extends Tab implements OnChanges {
         this.validAction.emit(true);
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
+    onChange(event: string) {
-    onChange(event: any) {
+        if (event === '-1') {
-        if (event.value === '-1') {
             this.selectedKeymap = undefined;
         } else {
-            this.selectedKeymap = this.keymaps.find((keymap: Keymap) => keymap.abbreviation === event.value);
+            this.selectedKeymap = this.keymaps.find((keymap: Keymap) => keymap.abbreviation === event);
         }
     }
 

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html

@@ -1,12 +1,27 @@
 <div class="scancode-options">
     <b class="setting-label">Scancode:</b>
-    <select2
+    <div class="scancode-container">
-            [data]="scanCodeGroups"
+        <ngx-select [items]="scanCodeGroups"
-            [value]="selectedScancodeOption.id"
+                    [ngModel]="selectedScancodeOption.id"
-            (valueChanged)="onScancodeChange($event)"
+                    [autoActiveOnMouseEnter]="false"
-            [width]="200"
+                    size="small"
-            [options]="options"
+                    optionValueField="id"
-    ></select2>
+                    optionTextField="text"
+                    optGroupLabelField="text"
+                    optGroupOptionsField="children"
+                    (select)="onScancodeChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '0'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+
+        </ngx-select>
+    </div>
     <icon name="question-circle"
           data-toggle="tooltip"
           html="true"
@@ -41,12 +56,28 @@
 </div>
 <div class="long-press-container" *ngIf="secondaryRoleEnabled">
     <b class="setting-label">Secondary role:</b>
-    <select2 #secondaryRoleSelect
+    <div class="secondary-role-groups-container">
-             [data]="secondaryRoleGroups"
+        <ngx-select [items]="secondaryRoleGroups"
-             [value]="selectedSecondaryRoleIndex.toString()"
+                    [ngModel]="selectedSecondaryRoleIndex.toString()"
-             (valueChanged)="onSecondaryRoleChange($event)"
+                    [autoActiveOnMouseEnter]="false"
-             [width]="140"
+                    size="small"
-    ></select2>
+                    optionValueField="id"
+                    optionTextField="text"
+                    optGroupLabelField="text"
+                    optGroupOptionsField="children"
+                    (select)="onSecondaryRoleChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+
+        </ngx-select>
+    </div>
     <icon name="question-circle"
           data-toggle="tooltip"
           html="true"

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss

@@ -79,4 +79,14 @@
             display: block;
         }
     }
+
+    .scancode-container {
+        display: inline-block;
+        width: 200px;
+    }
+
+    .secondary-role-groups-container {
+        display: inline-block;
+        width: 140px;
+    }
 }

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

@@ -1,9 +1,9 @@
 import { Component, Input, OnChanges } from '@angular/core';
-import { Select2OptionData, Select2TemplateFunction } from 'ng2-select2';
 import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common';
 
 import { Tab } from '../tab';
 import { MapperService } from '../../../../services/mapper.service';
+import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
     selector: 'keypress-tab',
@@ -20,11 +20,10 @@ export class KeypressTabComponent extends Tab implements OnChanges {
     leftModifierSelects: boolean[];
     rightModifierSelects: boolean[];
 
-    scanCodeGroups: Array<Select2OptionData>;
+    scanCodeGroups: Array<SelectOptionData>;
-    secondaryRoleGroups: Array<Select2OptionData>;
+    secondaryRoleGroups: Array<SelectOptionData>;
-    options: Select2Options;
 
-    selectedScancodeOption: Select2OptionData;
+    selectedScancodeOption: SelectOptionData;
     selectedSecondaryRoleIndex: number;
 
     constructor(private mapper: MapperService) {
@@ -41,18 +40,6 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         this.rightModifierSelects = Array(this.rightModifiers.length).fill(false);
         this.selectedScancodeOption = this.scanCodeGroups[0];
         this.selectedSecondaryRoleIndex = -1;
-        this.options = {
-            templateResult: this.scanCodeTemplateResult,
-            matcher: (term: string, text: string, data: Select2OptionData) => {
-                let found = text.toUpperCase().indexOf(term.toUpperCase()) > -1;
-
-                if (!found && data.additional && data.additional.explanation) {
-                    found = data.additional.explanation.toUpperCase().indexOf(term.toUpperCase()) > -1;
-                }
-
-                return found;
-            }
-        };
     }
 
     ngOnChanges() {
@@ -134,25 +121,6 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         }
     }
 
-    scanCodeTemplateResult: Select2TemplateFunction = (state: Select2OptionData): JQuery | string => {
-        if (!state.id) {
-            return state.text;
-        }
-
-        if (state.additional && state.additional.explanation) {
-            return jQuery(
-                '<span class="select2-item">'
-                + '<span>' + state.text + '</span>'
-                + '<span class="scancode--searchterm"> '
-                + state.additional.explanation
-                + '</span>' +
-                '</span>'
-            );
-        } else {
-            return jQuery('<span class="select2-item">' + state.text + '</span>');
-        }
-    }
-
     toggleModifier(right: boolean, index: number) {
         const modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects;
         modifierSelects[index] = !modifierSelects[index];
@@ -160,24 +128,20 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         this.validAction.emit(this.keyActionValid());
     }
 
-    onSecondaryRoleChange(event: { value: string }) {
+    onSecondaryRoleChange(id: string) {
-        this.selectedSecondaryRoleIndex = +event.value;
+        this.selectedSecondaryRoleIndex = +id;
     }
 
-    onScancodeChange(event: { value: string }) {
+    onScancodeChange(id: string) {
-        const id: string = event.value;
-
-        // ng2-select2 should provide the selectedOption in an upcoming release
-        // TODO: change this when it has become available
         this.selectedScancodeOption = this.findScancodeOptionById(id);
 
         this.validAction.emit(this.keyActionValid());
     }
 
-    private findScancodeOptionBy(predicate: (option: Select2OptionData) => boolean): Select2OptionData {
+    private findScancodeOptionBy(predicate: (option: SelectOptionData) => boolean): SelectOptionData {
-        let selectedOption: Select2OptionData;
+        let selectedOption: SelectOptionData;
 
-        const scanCodeGroups: Select2OptionData[] = [...this.scanCodeGroups];
+        const scanCodeGroups: SelectOptionData[] = [...this.scanCodeGroups];
         while (scanCodeGroups.length > 0) {
             const scanCodeGroup = scanCodeGroups.shift();
             if (predicate(scanCodeGroup)) {
@@ -192,14 +156,14 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         return selectedOption;
     }
 
-    private findScancodeOptionById(id: string): Select2OptionData {
+    private findScancodeOptionById(id: string): SelectOptionData {
         return this.findScancodeOptionBy(option => option.id === id);
     }
 
-    private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): Select2OptionData {
+    private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): SelectOptionData {
         const typeToFind: string =
             (type === KeystrokeType.shortMedia || type === KeystrokeType.longMedia) ? 'media' : KeystrokeType[type];
-        return this.findScancodeOptionBy((option: Select2OptionData) => {
+        return this.findScancodeOptionBy((option: SelectOptionData) => {
             const additional = option.additional;
             if (additional && additional.scancode === scancode && additional.type === typeToFind) {
                 return true;
@@ -211,7 +175,7 @@ export class KeypressTabComponent extends Tab implements OnChanges {
         });
     }
 
-    private toScancodeTypePair(option: Select2OptionData): [number, string] {
+    private toScancodeTypePair(option: SelectOptionData): [number, string] {
         let scanCode: number;
         let type: string;
         if (option.additional) {

packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html

@@ -5,7 +5,23 @@
     <p><i>Please note that macro playback is not implemented yet. You can bind macros, but they won't have any effect until firmware support is implemented. We're working on this.</i></p>
     <div class="macro-selector">
         <b> Play macro: </b>
-        <select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
+        <ngx-select [items]="macroOptions"
+                    [ngModel]="macroOptions[selectedMacroIndex].id"
+                    [autoActiveOnMouseEnter]="false"
+                    size="small"
+                    optionValueField="id"
+                    optionTextField="text"
+                    (select)="onChange($event)">
+
+            <ng-template ngx-select-option let-option>
+                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
+                    <span>{{ option.text }}</span>
+                    <span class="scancode--searchterm">
+                        {{ option.data.additional?.explanation}}
+                    </span>
+                </span>
+            </ng-template>
+        </ngx-select>
     </div>
     <div class="macro-action-container">
         <div class="list-group">
@@ -14,4 +30,4 @@
             </macro-item>
         </div>
     </div>
-</ng-template>
+</ng-template>

packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss

@@ -16,7 +16,7 @@
             margin-right: 7px;
         }
 
-        select2 {
+        ngx-select {
             flex: 1;
         }
     }

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

@@ -1,13 +1,13 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs/Subscription';
-import { Select2OptionData } from 'ng2-select2/ng2-select2';
 import { KeyAction, Macro, PlayMacroAction } from 'uhk-common';
 
 import { Tab } from '../tab';
 
-import { AppState } from '../../../../store/index';
+import { AppState } from '../../../../store';
 import { getMacros } from '../../../../store/reducers/user-configuration';
+import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
     selector: 'macro-tab',
@@ -18,7 +18,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
     @Input() defaultKeyAction: KeyAction;
 
     macros: Macro[];
-    macroOptions: Array<Select2OptionData>;
+    macroOptions: Array<SelectOptionData>;
     selectedMacroIndex: number;
     private subscription: Subscription;
 
@@ -31,7 +31,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
     }
 
     ngOnInit() {
-        this.macroOptions = this.macros.map(function (macro: Macro, index: number): Select2OptionData {
+        this.macroOptions = this.macros.map(function (macro: Macro, index: number): SelectOptionData {
             return {
                 id: index.toString(),
                 text: macro.name
@@ -44,9 +44,8 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
         this.validAction.emit(true);
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
+    onChange(id: string) {
-    onChange(event: any) {
+        this.selectedMacroIndex = +id;
-        this.selectedMacroIndex = +event.value;
     }
 
     keyActionValid(): boolean {

packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts

@@ -1,3 +1,4 @@
+///<reference path="../../../../node_modules/@types/jquery/index.d.ts"/>
 import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 

packages/uhk-web/src/app/models/select-option-data.ts

@@ -0,0 +1,7 @@
+export interface SelectOptionData {
+    id: string;
+    text: string;
+    disabled?: boolean;
+    children?: Array<SelectOptionData>;
+    additional?: any;
+}

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

@@ -6,7 +6,7 @@ import { NotifierModule } from 'angular-notifier';
 import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
 
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
-import { Select2Module } from 'ng2-select2/ng2-select2';
+import { NgxSelectModule } from '@ert78gb/ngx-select-ex';
 import { NouisliderModule } from 'ng2-nouislider';
 import { ClipboardModule } from 'ngx-clipboard';
 
@@ -191,7 +191,7 @@ import { AutoGrowInputComponent } from './components/auto-grow-input';
         FormsModule,
         DragulaModule,
         routing,
-        Select2Module,
+        NgxSelectModule,
         NouisliderModule,
         NotifierModule.withConfig(angularNotifierConfig),
         ConfirmationPopoverModule.forRoot({

packages/uhk-web/src/styles.scss

@@ -5,6 +5,7 @@
 @import './styles/tooltip';
 @import './styles/uhk-icons/uhk-icon';
 @import './styles/side-menu';
+@import './styles/ngx-select-ex';
 
 html, body {
     width: 100%;
@@ -25,10 +26,6 @@ html, body {
     transform: rotate(90deg); // svg not aligned properly
 }
 
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    line-height: 26px;
-}
-
 .main-content {
     height: 100%;
 }
@@ -39,34 +36,10 @@ html, body {
     min-height: 100%;
 }
 
-.select2 {
-    &-container {
-        z-index: 1100;
-
-        .scancode--searchterm {
-            text-align: right;
-            color: #b7b7b7;
-        }
-    }
-
-    &-item {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    &-results {
-        text-align: left;
-    }
-}
-
 .nav-pills > li > a {
     cursor: pointer;
 }
 
-.select2-container--default .select2-dropdown--below .select2-results > .select2-results__options {
-    max-height: 300px;
-}
-
 ul.btn-list {
     & li {
         margin-top: 0.5em;

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

@@ -0,0 +1,40 @@
+ngx-select,
+.ngx-select {
+    .ngx-select__toggle {
+        font-size: 14px;
+    }
+
+    .dropdown-header {
+        font-weight: bold;
+        font-size: 1em;
+        color: black;
+        padding-left: 6px;
+    }
+
+    .dropdown-divider {
+        display: none;
+    }
+
+    a {
+        &.ngx-select__item {
+            padding-right: 6px;
+            padding-left: 6px;
+        }
+
+        &.ngx-select__item_active {
+            background-color: #dddddd;
+            color: black;
+        }
+    }
+
+    .indent-dropdown-item {
+        padding-left: 8px;
+        display: flex;
+        justify-content: space-between;
+
+        .scancode--searchterm {
+            text-align: right;
+            color: #b7b7b7;
+        }
+    }
+}

packages/uhk-web/webpack.config.js

@@ -416,7 +416,6 @@ module.exports = {
             "filename": "scripts.bundle.js",
             "scripts": [
                 path.join(process.cwd(), "node_modules/bootstrap/dist/js/bootstrap.js"),
-                path.join(process.cwd(), "node_modules/select2/dist/js/select2.full.js"),
                 // path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.js")
             ],
             "basePath": path.resolve(process.cwd())