feat: Add formControl disabled to combo-box (#1395)

* feat: Add fromcontrol disabled to combo-box

* feat: fixing disabled

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/combo-box/combo-box.component.scss

@@ -45,6 +45,13 @@
     }
   }
 
+  &.disabled {
+    background-color: $gray-2;
+    .trigger-input {
+      color: black;
+    }
+  }
+
   .trigger-control {
     height: 100%;
     width: 24px;

projects/components/src/combo-box/combo-box.component.ts

@@ -34,15 +34,21 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api';
     }
   ],
   template: `
-    <ht-popover (popoverOpen)="this.onPopoverOpen($event)" (popoverClose)="this.onPopoverClose()" class="combo-box">
+    <ht-popover
+      class="combo-box"
+      [disabled]="this.disabled"
+      (popoverOpen)="this.onPopoverOpen($event)"
+      (popoverClose)="this.onPopoverClose()"
+    >
       <ht-popover-trigger>
         <div
           #trigger
           class="popover-trigger"
           [ngClass]="{
             input: this.mode === '${ComboBoxMode.Input}',
             chip: this.mode === '${ComboBoxMode.Chip}',
-            'show-border': this.showBorder
+            'show-border': this.showBorder,
+            disabled: this.disabled
           }"
           [class.has-text]="this.text"
           [class.input-focused]="input.matches(':focus')"
@@ -79,6 +85,7 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api';
 
           <!-- Clear Button -->
           <div
+            *ngIf="!this.disabled"
             [class.has-text]="this.text"
             [class.input-focused]="input.matches(':focus')"
             [ngClass]="this.mode"
@@ -427,6 +434,10 @@ export class ComboBoxComponent<TValue = string> implements AfterViewInit, OnChan
     });
   }
 
+  public setDisabledState(isDisabled?: boolean): void {
+    this.disabled = isDisabled ?? false;
+  }
+
   private propagateValueChangeToFormControl(value?: string): void {
     this.propagateControlValueChange?.(value);
     this.propagateControlValueChangeOnTouch?.(value);