feat: support control options in select (#578)

* feat: support control options in select

Author: arjunlalb

projects/components/src/select/select-control-option.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { SelectOptionComponent } from './select-option.component';
+
+@Component({
+  selector: 'ht-select-control-option',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '' // No template, just gathering data
+})
+export class SelectControlOptionComponent<V> extends SelectOptionComponent<V> {
+  @Input()
+  public position: SelectControlOptionPosition = SelectControlOptionPosition.Top;
+}
+
+export enum SelectControlOptionPosition {
+  // Can be extended for bottom later.
+  Top = 'top'
+}

projects/components/src/select/select.component.test.ts

@@ -1,9 +1,10 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, flush } from '@angular/core/testing';
-import { IconLibraryTestingModule } from '@hypertrace/assets-library';
+import { IconLibraryTestingModule, IconType } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { EMPTY } from 'rxjs';
+import { SelectControlOptionPosition } from './select-control-option.component';
 import { SelectJustify } from './select-justify';
 import { SelectComponent, SelectTriggerDisplayMode } from './select.component';
 import { SelectModule } from './select.module';
@@ -198,4 +199,38 @@ describe('Select Component', () => {
     expect(spectator.element).toHaveText(selectionOptions[1].label);
     expect(spectator.query('.trigger-content')).toBe(spectator.query('.justify-center'));
   }));
+
+  test('should show control options on the top as expected', fakeAsync(() => {
+    const onChange = jest.fn();
+
+    spectator = hostFactory(
+      `
+    <ht-select (selectedChange)="onChange($event)">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value"></ht-select-option>
+      <ht-select-control-option [label]="controlLabel" [value]="controlValue" [position]="controlPosition" [icon]="controlIcon"></ht-select-control-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          controlLabel: 'None',
+          controlValue: 'none-id',
+          controlIcon: IconType.Debug,
+          controlPosition: SelectControlOptionPosition.Top,
+          onChange: onChange
+        }
+      }
+    );
+
+    spectator.tick();
+    spectator.click('.trigger-content');
+
+    const optionElements = spectator.queryAll('.select-option', { root: true });
+    expect(optionElements[0].querySelector('.icon')).toExist();
+    expect(optionElements[0]).toContainText('None');
+    spectator.click(optionElements[0]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('none-id');
+    flush();
+  }));
 });

projects/components/src/select/select.component.ts

@@ -15,6 +15,7 @@ import { LoggerService, queryListAndChanges$, SubscriptionLifecycle, TypedSimple
 import { EMPTY, merge, Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
+import { SelectControlOptionComponent, SelectControlOptionPosition } from './select-control-option.component';
 import { SelectGroupPosition } from './select-group-position';
 import { SelectJustify } from './select-justify';
 import { SelectOption } from './select-option';
@@ -74,22 +75,38 @@ import { SelectSize } from './select-size';
         </ht-popover-trigger>
         <ht-popover-content>
           <div class="select-content" [ngStyle]="{ 'minWidth.px': triggerContainer.offsetWidth }">
+            <ng-container *htLetAsync="this.topControlItems$ as topControlItems">
+              <div *ngIf="topControlItems?.length !== 0">
+                <ng-container
+                  *ngTemplateOutlet="itemsTemplate; context: { items: topControlItems, showSelectionStatus: false }"
+                ></ng-container>
+
+                <ht-divider></ht-divider>
+              </div>
+            </ng-container>
+
+            <ng-container
+              *ngTemplateOutlet="itemsTemplate; context: { items: items, showSelectionStatus: true }"
+            ></ng-container>
+          </div>
+
+          <ng-template #itemsTemplate let-items="items" let-showSelectionStatus="showSelectionStatus">
             <div
               *ngFor="let item of items"
               (click)="this.onSelectionChange(item)"
               class="select-option"
               [ngClass]="this.size"
             >
+              <ht-icon *ngIf="item.icon" class="icon" [icon]="item.icon" size="${IconSize.Small}"> </ht-icon>
               <span class="label">{{ item.label }}</span>
               <ht-icon
                 class="status-icon"
-                *ngIf="this.highlightSelected && this.isSelectedItem(item)"
+                *ngIf="showSelectionStatus && this.highlightSelected && this.isSelectedItem(item)"
                 icon="${IconType.Checkmark}"
                 size="${IconSize.Small}"
-              >
-              </ht-icon>
+              ></ht-icon>
             </div>
-          </div>
+          </ng-template>
         </ht-popover-content>
       </ht-popover>
     </div>
@@ -132,10 +149,15 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
   @ContentChildren(SelectOptionComponent)
   public items?: QueryList<SelectOptionComponent<V>>;
 
+  @ContentChildren(SelectControlOptionComponent)
+  public controlItems?: QueryList<SelectControlOptionComponent<V>>;
+
   public selected$?: Observable<SelectOption<V> | undefined>;
 
   public groupPosition: SelectGroupPosition = SelectGroupPosition.Ungrouped;
 
+  public topControlItems$?: Observable<SelectControlOptionComponent<V>[]>;
+
   public get justifyClass(): string {
     if (this.justify !== undefined) {
       return this.justify;
@@ -151,6 +173,11 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
 
   public ngAfterContentInit(): void {
     this.selected$ = this.buildObservableOfSelected();
+    if (this.controlItems !== undefined) {
+      this.topControlItems$ = queryListAndChanges$(this.controlItems).pipe(
+        map(items => items.filter(item => item.position === SelectControlOptionPosition.Top))
+      );
+    }
   }
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {

projects/components/src/select/select.module.ts

@@ -1,18 +1,29 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { DividerModule } from '../divider/divider.module';
 import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
 import { LetAsyncModule } from '../let-async/let-async.module';
 import { PopoverModule } from '../popover/popover.module';
 import { TooltipModule } from '../tooltip/tooltip.module';
+import { SelectControlOptionComponent } from './select-control-option.component';
 import { SelectGroupComponent } from './select-group.component';
 import { SelectOptionComponent } from './select-option.component';
 import { SelectComponent } from './select.component';
 
 @NgModule({
-  imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule, TooltipModule],
-  declarations: [SelectComponent, SelectOptionComponent, SelectGroupComponent],
-  exports: [SelectComponent, SelectOptionComponent, SelectGroupComponent]
+  imports: [
+    FormsModule,
+    CommonModule,
+    IconModule,
+    LabelModule,
+    LetAsyncModule,
+    PopoverModule,
+    TooltipModule,
+    DividerModule
+  ],
+  declarations: [SelectComponent, SelectOptionComponent, SelectGroupComponent, SelectControlOptionComponent],
+  exports: [SelectComponent, SelectOptionComponent, SelectGroupComponent, SelectControlOptionComponent]
 })
 export class SelectModule {}