feat(select): add support for a separate selected label (#607)

Author: arjunlalb

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

@@ -15,6 +15,9 @@ export class SelectOptionComponent<V> implements OnChanges, SelectOption<V> {
   @Input()
   public label!: string;
 
+  @Input()
+  public selectedLabel?: string;
+
   @Input()
   public style: SelectOptionStyle = SelectOptionStyle.Default;
 

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

@@ -1,6 +1,7 @@
 export interface SelectOption<V> {
   value: V;
   label: string;
+  selectedLabel?: string;
   icon?: string;
   iconColor?: string;
 }

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

@@ -27,10 +27,10 @@ describe('Select Component', () => {
   const selectionOptions = [
     { label: 'first', value: 'first-value' },
     { label: 'second', value: 'second-value' },
-    { label: 'third', value: 'third-value' }
+    { label: 'third', value: 'third-value', selectedLabel: 'Third Value!!!' }
   ];
 
-  test('should display intial selection', fakeAsync(() => {
+  test('should display initial selection', fakeAsync(() => {
     spectator = hostFactory(
       `
     <ht-select [selected]="selected">
@@ -127,7 +127,7 @@ describe('Select Component', () => {
     spectator = hostFactory(
       `
     <ht-select [selected]="selected" (selectedChange)="onChange($event)">
-      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [selectedLabel]="option.selectedLabel">
       </ht-select-option>
     </ht-select>`,
       {
@@ -140,14 +140,15 @@ describe('Select Component', () => {
     );
 
     spectator.tick();
+    expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[1].label);
     spectator.click('.trigger-content');
 
     const optionElements = spectator.queryAll('.select-option', { root: true });
     spectator.click(optionElements[2]);
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(selectionOptions[2].value);
-    expect(spectator.element).toHaveText(selectionOptions[2].label);
+    expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[2].selectedLabel!);
     flush();
   }));
 

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

@@ -54,7 +54,8 @@ import { SelectSize } from './select-size';
             >
               <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize">
               </ht-icon>
-              <ht-label class="trigger-label" [label]="selected?.label || this.placeholder"> </ht-label>
+              <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
+              </ht-label>
               <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
             </div>
             <div