feat: adding a clear selected button to select option

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

@@ -342,4 +342,33 @@ describe('Select Component', () => {
     expect(onChange).not.toHaveBeenCalled();
     flush();
   }));
+
+  test('should show clear selected button', fakeAsync(() => {
+    spectator = hostFactory(
+      `
+    <ht-select [selected]="selected">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [selectedLabel]="option.selectedLabel">
+      </ht-select-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          selected: selectionOptions[1].value
+        }
+      }
+    );
+
+    spectator.tick();
+    spectator.click('.trigger-content');
+
+    const clearSelectedButton = spectator.query('.clear-selected', { root: true });
+    expect(clearSelectedButton).toExist();
+    spectator.click(clearSelectedButton!);
+
+    spectator.tick();
+    expect(spectator.component.selected).toBe(undefined);
+    expect(spectator.query('.clear-selected', { root: true })).not.toExist();
+
+    flush();
+  }));
 });

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

@@ -16,6 +16,7 @@ import { LoggerService, queryListAndChanges$, SubscriptionLifecycle, TypedSimple
 import { isEqual } from 'lodash-es';
 import { EMPTY, merge, Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
+import { ButtonRole, ButtonSize, ButtonStyle } from '../button/button';
 import { IconSize } from '../icon/icon-size';
 import { SearchBoxDisplayMode } from '../search-box/search-box.component';
 import { SelectControlOptionComponent, SelectControlOptionPosition } from './select-control-option.component';
@@ -134,6 +135,16 @@ import { SelectSize } from './select-size';
               </ht-event-blocker>
               <ht-divider class="divider"></ht-divider>
             </ng-container>
+            <ht-button
+              class="clear-selected"
+              *ngIf="this.selected !== undefined"
+              role="${ButtonRole.Primary}"
+              display="${ButtonStyle.Text}"
+              size="${ButtonSize.ExtraSmall}"
+              label="Clear Selected"
+              (click)="this.onClearSelected()"
+            ></ht-button>
+
             <ng-container *htLetAsync="this.topControlItems$ as topControlItems">
               <div *ngIf="topControlItems?.length !== 0">
                 <ng-container
@@ -311,6 +322,10 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
     this.propagateValueChangeToFormControl(this.selected);
   }
 
+  public onClearSelected(): void {
+    this.setSelection();
+  }
+
   private setSelection(value?: V): void {
     this.selected = value;
     this.selected$ = this.buildObservableOfSelected();

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

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MemoizeModule } from '@hypertrace/common';
+import { ButtonModule } from '../button/button.module';
 import { DividerModule } from '../divider/divider.module';
 import { EventBlockerModule } from '../event-blocker/event-blocker.module';
 import { IconModule } from '../icon/icon.module';
@@ -28,7 +29,8 @@ import { SelectComponent } from './select.component';
     DividerModule,
     MemoizeModule,
     TraceSearchBoxModule,
-    EventBlockerModule
+    EventBlockerModule,
+    ButtonModule
   ],
   declarations: [
     SelectComponent,