continue migrating chip select

libs/components/src/chip-select/chip-select.component.html

@@ -3,11 +3,11 @@
   class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select"
   [ngClass]="{
     'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:!tw-border-secondary-700':
-      selectedOption && !disabled,
+      selectedOption && !disabled(),
     'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted hover:tw-bg-secondary-100':
-      !selectedOption && !disabled,
-    'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
-    'tw-border-text-muted': !disabled,
+      !selectedOption && !disabled(),
+    'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled(),
+    'tw-border-text-muted': !disabled(),
     'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
   }"
 >
@@ -17,11 +17,11 @@
     class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-ps-3 last:tw-pe-3 [&:not(:last-child)]:tw-pe-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
     data-fvw-target
     [ngClass]="{
-      'tw-cursor-not-allowed': disabled,
-      'group-hover/chip-select:tw-text-secondary-700': !selectedOption && !disabled,
+      'tw-cursor-not-allowed': disabled(),
+      'group-hover/chip-select:tw-text-secondary-700': !selectedOption && !disabled(),
     }"
     [bitMenuTriggerFor]="menu"
-    [disabled]="disabled"
+    [disabled]="disabled()"
     [title]="label"
     #menuTrigger="menuTrigger"
     (click)="setMenuWidth()"
@@ -45,10 +45,10 @@
     <button
       type="button"
       [attr.aria-label]="'removeItem' | i18n: label"
-      [disabled]="disabled"
+      [disabled]="disabled()"
       class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-me-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
       [ngClass]="{
-        'tw-cursor-not-allowed': disabled,
+        'tw-cursor-not-allowed': disabled(),
       }"
       (click)="clear()"
     >

libs/components/src/chip-select/chip-select.component.ts

@@ -15,6 +15,7 @@ import {
   inject,
   signal,
   input,
+  model,
 } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -58,12 +59,13 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
   readonly placeholderText = input.required<string>();
 
   /** Icon to show when there is no selected option or the selected option does not have an icon */
-  readonly placeholderIcon = input<string>(undefined);
+  readonly placeholderIcon = input<string>();
 
   private _options: ChipSelectOption<T>[];
-  /** The select options to render */
-  // TODO: Skipped for migration because:
+
+  // TODO: Skipped for signal migration because:
   //  Accessor inputs cannot be migrated as they are too complex.
+  /** The select options to render */
   @Input({ required: true })
   get options(): ChipSelectOption<T>[] {
     return this._options;
@@ -74,9 +76,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
   }
 
   /** Disables the entire chip */
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input({ transform: booleanAttribute }) disabled = false;
+  disabled = model(false);
 
   /** Chip will stretch to full width of its container */
   readonly fullWidth = input<boolean, unknown>(undefined, { transform: booleanAttribute });
@@ -257,7 +257,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
 
   /** Implemented as part of NG_VALUE_ACCESSOR */
   setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
+    this.disabled.set(isDisabled);
   }
 
   /** Implemented as part of NG_VALUE_ACCESSOR */