fixes to UI build

Author: nodeful

ui/src/app/components/options/options.component.ts

@@ -86,7 +86,7 @@ export interface InputOption extends BaseOptions {
 interface SliderOption extends BaseOptions {
   value: number
   min?: number
-  midle?: number
+  middle?: number
   max?: number
   animationDuration?: number
   animationFps?: number

ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.html

@@ -10,9 +10,9 @@
     <eqm-icon [name]="'cross'" [height]="16" [width]="16" color="#4f8d71"></eqm-icon>
   </div>
   <div class="right" *ngIf="!searchText" (click)="editable ? toggle($event) : undefined">
-    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" rotate="-90">
+    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="-90">
     </eqm-icon>
-    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" rotate="90">
+    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="90">
     </eqm-icon>
   </div>
 </eqm-container>

ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.ts

@@ -33,6 +33,7 @@ export class DropdownComponent implements OnInit {
   @Output() refChanged = new EventEmitter<DropdownComponent>()
   @HostBinding('class.disabled') @Input() disabled = false
   @Input() selectedItem = null
+  @Output() selectedItemChange = new EventEmitter<any>()
   @Input() labelParam = 'text'
   @Input() numberOfVisibleItems = 6
   @Input() placeholder = 'Select item'
@@ -123,6 +124,7 @@ export class DropdownComponent implements OnInit {
 
   selectItem (item) {
     this.selectedItem = item
+    this.selectedItemChange.emit(item)
     this.itemSelected.emit(item)
     if (this.closeOnSelect) {
       this.close()

ui/src/app/modules/eqmac-components/components/question/question.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 
 @Component({
   selector: 'eqm-question',
-  template: '<eqm-icon stroke="0" color="#c9cdd0" width="8" height="8" name="help"></eqm-icon>',
+  template: '<eqm-icon [stroke]="0" color="#c9cdd0" [width]="8" [height]="8" name="help"></eqm-icon>',
   styles: [ ':host { height: 12px; width: 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #2c2c2e; }' ]
 })
 export class QuestionComponent implements OnInit {

ui/src/app/sections/effects/equalizers/equalizers.component.html

@@ -25,7 +25,7 @@
       [disabled]="!enabled"
       *ngIf="activeEqualizer && activeEqualizer.settings.length"
       eqmTooltip="Settings" eqmTooltipPositionSide="bottom">
-        <eqm-icon name="cog" color="#8E8E93" width="14" height="14"></eqm-icon>
+        <eqm-icon name="cog" color="#8E8E93" [width]="14" [height]="14"></eqm-icon>
       </eqm-button>
 
         <!-- <eqm-icon (click)="toggleVisibility()" [name]="hide ? 'show' : 'hide'"></eqm-icon> -->

ui/src/app/sections/header/header.component.html

@@ -4,16 +4,16 @@
   (mouseenter)="setShowBoolean('showLeftIcons', true)" (mouseleave)="setShowBoolean('showLeftIcons', false)" 
   >
     <div class="circle-button left" fxLayout="row" fxLayoutAlign="center center" (click)="close()">
-      <eqm-icon *ngIf="showLeftIcons" [@FadeInOut] stroke=3 strokeColor="#2E2E2E" color="#2E2E2E" width="8" height="8" name="cross"></eqm-icon>
+      <eqm-icon *ngIf="showLeftIcons" [@FadeInOut] [stroke]=3 strokeColor="#2E2E2E" color="#2E2E2E" [width]="8" [height]="8" name="cross"></eqm-icon>
     </div>
     <div class="circle-button left" fxLayoutAlign="center center" (click)="hide()">
-      <eqm-icon *ngIf="showLeftIcons" [@FadeInOut] color="#2E2E2E" width="8" height="8" name="minus"></eqm-icon>
+      <eqm-icon *ngIf="showLeftIcons" [@FadeInOut] color="#2E2E2E" [width]="8" [height]="8" name="minus"></eqm-icon>
     </div>
     <div *ngIf="uiMode" 
     class="circle-button left" fxLayoutAlign="center center" 
     (click)="toggleUIMode()" 
     [eqmTooltip]="uiMode === 'window' ? 'Popover mode' : 'Window mode'" eqmTooltipPositionSide="bottom">
-      <eqm-icon *ngIf="showLeftIcons" [@FadeInOut] color="#2E2E2E" width="8" height="8" name="triangle" [rotate]="uiMode == 'window' ? -90 : 90"></eqm-icon>
+      <eqm-icon *ngIf="showLeftIcons" [@FadeInOut] color="#2E2E2E" [width]="8" [height]="8" name="triangle" [rotate]="uiMode == 'window' ? -90 : 90"></eqm-icon>
     </div>
   </div> 
   <eqm-label>eqMac</eqm-label>
@@ -23,17 +23,17 @@
     <div class="circle-button right" 
     fxLayout="row" fxLayoutAlign="center center"
     (click)="toggleHelp($event)" 
-    eqmTooltip="Help" eqmTooltipPositionSide="bottom" eqmTooltipDelay="100">
-      <eqm-icon class="settings" [@FadeInOut] stroke="0" color="#2E2E2E" width="10" height="10" name="help"></eqm-icon>
+    eqmTooltip="Help" eqmTooltipPositionSide="bottom" [eqmTooltipDelay]="100">
+      <eqm-icon class="settings" [@FadeInOut] [stroke]="0" color="#2E2E2E" [width]="10" [height]="10" name="help"></eqm-icon>
     </div>
     <div class="circle-button right" 
     fxLayout="row" fxLayoutAlign="center center" 
     (click)="toggleSettings($event)" 
-    eqmTooltip="Settings" eqmTooltipPositionSide="bottom" eqmTooltipDelay="100">
-      <eqm-icon class="settings" [@FadeInOut] stroke="0" color="#2E2E2E" width="14" height="14" name="spanner-circle"></eqm-icon>
+    eqmTooltip="Settings" eqmTooltipPositionSide="bottom" [eqmTooltipDelay]="100">
+      <eqm-icon class="settings" [@FadeInOut] [stroke]="0" color="#2E2E2E" [width]="14" [height]="14" name="spanner-circle"></eqm-icon>
     </div>   
     <div class="circle-button right" fxLayoutAlign="center center" (click)="quit()" eqmTooltip="Quit" eqmTooltipPositionSide="bottom">
-      <eqm-icon [@FadeInOut] color="#2E2E2E" width="12" height="12" name="quit"></eqm-icon>
+      <eqm-icon [@FadeInOut] color="#2E2E2E" [width]="12" [height]="12" name="quit"></eqm-icon>
     </div>   
   </div> 
 </div>

ui/src/app/sections/help/help.component.ts

@@ -3,7 +3,7 @@ import { Options } from 'src/app/components/options/options.component'
 import { ApplicationService, MacInfo } from 'src/app/services/app.service'
 import { ConstantsService } from 'src/app/services/constants.service'
 import { version } from '../../../../package.json'
-import { UIService } from '../../services/ui.service.js'
+import { UIService } from '../../services/ui.service'
 
 @Component({
   selector: 'eqm-help',

ui/src/app/sections/source/file/file.component.html

@@ -1,6 +1,6 @@
 <div class="file" fxLayout="row" fxFill fxLayoutAlign="space-between center" fxLayoutGap="10px">
     <eqm-button [disabled]="!selected" size="square" (pressed)="toggleFilePlayback()">
-      <eqm-icon [name]="playing ? 'pause' : 'triangle'" [height]="playing ? '20' : '25'" [width]="playing ? '20' : '25'"></eqm-icon>
+      <eqm-icon [name]="playing ? 'pause' : 'triangle'" [height]="playing ? 20 : 25" [width]="playing ? 20 : 25"></eqm-icon>
     </eqm-button>
     <div fxLayout="column" fxFill fxFlex="100%" fxLayoutAlign="center start">
       <eqm-label>{{meta.name || 'Please open an Audio File.' }}</eqm-label>
@@ -10,7 +10,7 @@
       </div>
     </div>
     <eqm-button type="square" (click)="openFile()">
-      <eqm-icon name="open" height="25" width="25"></eqm-icon>
+      <eqm-icon name="open" [height]="25" [width]="25"></eqm-icon>
     </eqm-button>
   </div>