added ref changed output to dropdown

Author: nodeful

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

@@ -59,6 +59,8 @@
             [noItemsPlaceholder]="option.noItemsPlaceholder"
             (itemSelected)="option.itemSelected($event)"
             [forceDirection]="option.forceDirection"
+            [closeOnSelect]="option.closeOnSelect"
+            (refChanged)="option.refChanged && option.refChanged($event)"
             ></eqm-dropdown>
         </div>
 

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

@@ -1,4 +1,5 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'
+import { DropdownComponent } from '../../modules/eqmac-components/components/dropdown/dropdown.component'
 import { ApplicationService } from '../../services/app.service'
 
 interface BaseOptions {
@@ -39,6 +40,8 @@ export interface DropdownOption extends Omit<BaseOptions, 'label'> {
   placeholder?: string
   noItemsPlaceholder?: string
   forceDirection?: 'up' | 'down'
+  closeOnSelect?: boolean
+  refChanged?: (ref: DropdownComponent) => void
   itemSelected: (item: any) => void | Promise<void>
 }
 

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

@@ -7,9 +7,9 @@
   </div>
 
   <div class="arrows" (click)="editable ? toggle($event) : undefined">
-    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="hasSelection ? '#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]="hasSelection ? '#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

@@ -11,11 +11,14 @@ import { FadeInOutAnimation } from 'src/app/modules/animations'
   animations: [ FadeInOutAnimation ]
 })
 export class DropdownComponent implements OnInit {
-  constructor (public utils: UtilitiesService, public zone: NgZone) {
+  constructor (
+    public utils: UtilitiesService, 
+    public zone: NgZone,
+    public ref: ElementRef
+  ) {
   }
 
   public _items: any[] = []
-  hasSelection = false
   @Input() editable = false
   @Input()
   get items () {
@@ -24,15 +27,15 @@ export class DropdownComponent implements OnInit {
   set items (newItems) {
     if (!newItems || !Array.isArray(newItems)) return
     this._items = newItems
-    const hasSelection = newItems.length > 1
-    this.zone.run(() => this.hasSelection = hasSelection)
   }
+  @Output() refChanged = new EventEmitter<DropdownComponent>()
   @HostBinding('class.disabled') @Input() disabled = false
   @Input() selectedItem = null
   @Input() labelParam = 'text'
   @Input() numberOfVisibleItems = 6
   @Input() placeholder = 'Select item'
   @Input() noItemsPlaceholder = 'No items'
+  @Input() closeOnSelect = true
   @Output() itemSelected = new EventEmitter()
 
   @ViewChild('container', { read: ElementRef, static: true }) container: ElementRef
@@ -53,6 +56,7 @@ export class DropdownComponent implements OnInit {
       await this.utils.delay(100)
       this.calculateYCoordinate()
     }
+    this.refChanged.emit(this)
   }
 
   setDimensions () {
@@ -115,6 +119,8 @@ export class DropdownComponent implements OnInit {
   selectItem (item) {
     this.selectedItem = item
     this.itemSelected.emit(item)
-    this.close()
+    if (this.closeOnSelect) {
+      this.close()
+    }
   }
 }