Feat/select component clear option optional (#1492)

* feat(select): configurable clear selected option

* feat(select): default show clear selected to false

* test(select): fix test cases

Author: adisreyaj

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

@@ -346,7 +346,7 @@ describe('Select Component', () => {
   test('should show clear selected button', fakeAsync(() => {
     spectator = hostFactory(
       `
-    <ht-select [selected]="selected">
+    <ht-select [selected]="selected" [showClearSelected]="true">
       <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [selectedLabel]="option.selectedLabel">
       </ht-select-option>
     </ht-select>`,

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

@@ -69,9 +69,9 @@ import { SelectSize } from './select-size';
               <ng-container
                 [ngTemplateOutlet]="selected?.selectOptionRenderer?.getTemplateRef() ?? defaultMenuWithBorderTriggerTemplate"
               ></ng-container>
-              <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
-              <ng-template #defaultMenuWithBorderTriggerTemplate
-                ><ht-icon
+              <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"></ht-icon>
+              <ng-template #defaultMenuWithBorderTriggerTemplate>
+                <ht-icon
                   *ngIf="this.getPrefixIcon(selected)"
                   class="trigger-prefix-icon"
                   [icon]="this.getPrefixIcon(selected)"
@@ -111,14 +111,14 @@ import { SelectSize } from './select-size';
               <ng-container
                 [ngTemplateOutlet]="selected?.selectOptionRenderer?.getTemplateRef() ?? defaultMenuWithBackgroundTriggerTemplate"
               ></ng-container>
-              <ng-template #defaultMenuWithBackgroundTriggerTemplate
-                ><ht-label
+              <ng-template #defaultMenuWithBackgroundTriggerTemplate>
+                <ht-label
                   class="trigger-label"
                   [label]="selected?.selectedLabel || selected?.label || this.placeholder"
                 >
-                </ht-label
-              ></ng-template>
-              <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
+                </ht-label>
+              </ng-template>
+              <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"></ht-icon>
             </div>
           </div>
         </ht-popover-trigger>
@@ -137,7 +137,7 @@ import { SelectSize } from './select-size';
             </ng-container>
             <ht-button
               class="clear-selected"
-              *ngIf="this.selected !== undefined"
+              *ngIf="this.showClearSelected && this.selected !== undefined"
               role="${ButtonRole.Primary}"
               display="${ButtonStyle.Text}"
               size="${ButtonSize.ExtraSmall}"
@@ -178,8 +178,8 @@ import { SelectSize } from './select-size';
             </div>
           </ng-template>
 
-          <ng-template #defaultSelectOptionTemplate let-item
-            ><div class="select-option-info">
+          <ng-template #defaultSelectOptionTemplate let-item>
+            <div class="select-option-info">
               <ht-icon
                 *ngIf="item.icon"
                 class="icon"
@@ -224,6 +224,9 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
   @Input()
   public showBorder: boolean = false;
 
+  @Input()
+  public showClearSelected: boolean = false;
+
   @Input()
   public justify?: SelectJustify;