feat: show selected item's icon in trigger label if applicable (#884)

* feat: show selected item's icon in trigger label if applicable

Author: arjunlalb

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

@@ -1,8 +1,11 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, flush } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { IconLibraryTestingModule, IconType } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
+import { IconComponent } from '@hypertrace/components';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
 import { EMPTY } from 'rxjs';
 import { SelectControlOptionPosition } from './select-control-option.component';
 import { SelectJustify } from './select-justify';
@@ -14,6 +17,7 @@ describe('Select Component', () => {
     component: SelectComponent,
     imports: [SelectModule, HttpClientTestingModule, IconLibraryTestingModule],
     declareComponent: false,
+    declarations: [MockComponent(IconComponent)],
     providers: [
       mockProvider(NavigationService, {
         navigation$: EMPTY,
@@ -27,7 +31,7 @@ describe('Select Component', () => {
   const selectionOptions = [
     { label: 'first', value: 'first-value' },
     { label: 'second', value: 'second-value' },
-    { label: 'third', value: 'third-value', selectedLabel: 'Third Value!!!' }
+    { label: 'third', value: 'third-value', selectedLabel: 'Third Value!!!', icon: 'test-icon', iconColor: 'red' }
   ];
 
   test('should display initial selection', fakeAsync(() => {
@@ -146,12 +150,56 @@ describe('Select Component', () => {
     const optionElements = spectator.queryAll('.select-option', { root: true });
     spectator.click(optionElements[2]);
 
-    expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(selectionOptions[2].value);
     expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[2].selectedLabel!);
     flush();
   }));
 
+  test('should set trigger-prefix-icon correctly', fakeAsync(() => {
+    spectator = hostFactory(
+      `
+    <ht-select [icon]="icon">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [icon]="option.icon" [iconColor]="option.iconColor">
+      </ht-select-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          icon: 'select-level-icon'
+        }
+      }
+    );
+    spectator.tick();
+
+    // No selection -> select component level icon and no color
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.icon).toBe(
+      'select-level-icon'
+    );
+    // tslint:disable-next-line:no-null-keyword
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.color).toBe(null);
+
+    // Selection with no icon -> default icon and no color
+    spectator.click('.trigger-content');
+    let optionElements = spectator.queryAll('.select-option', { root: true });
+    spectator.click(optionElements[1]);
+    spectator.tick();
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.icon).toBe(
+      'select-level-icon'
+    );
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.color).toBe(undefined);
+
+    // Selection with icon and color
+    spectator.click('.trigger-content');
+    optionElements = spectator.queryAll('.select-option', { root: true });
+    spectator.click(optionElements[2]);
+    spectator.tick();
+
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.icon).toBe('test-icon');
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.color).toBe('red');
+
+    flush();
+  }));
+
   test('should set correct label alignment', fakeAsync(() => {
     spectator = hostFactory(
       `

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

@@ -55,7 +55,13 @@ import { SelectSize } from './select-size';
               class="trigger-content menu-with-border"
               [ngClass]="[this.justifyClass]"
             >
-              <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize">
+              <ht-icon
+                *ngIf="this.getPrefixIcon(selected)"
+                class="trigger-prefix-icon"
+                [icon]="this.getPrefixIcon(selected)"
+                [size]="this.iconSize"
+                [color]="selected?.iconColor"
+              >
               </ht-icon>
               <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
               </ht-label>
@@ -204,6 +210,10 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
     }
   }
 
+  public getPrefixIcon(selectedOption: SelectOption<V> | undefined): string | undefined {
+    return selectedOption?.icon ?? this.icon;
+  }
+
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (this.items !== undefined && changes.selected !== undefined) {
       this.selected$ = this.buildObservableOfSelected();