fix option, select, and chip-select

libs/components/src/select/option.component.ts

@@ -2,13 +2,13 @@
 // @ts-strict-ignore
 import { Component, booleanAttribute, input } from "@angular/core";
 
-import { Option } from "./option";
+import { MappedOptionComponent } from "./option";
 
 @Component({
   selector: "bit-option",
   template: `<ng-template><ng-content></ng-content></ng-template>`,
 })
-export class OptionComponent<T = unknown> implements Option<T> {
+export class OptionComponent<T = unknown> implements MappedOptionComponent<T> {
   icon = input<string>();
 
   value = input.required<T>();

libs/components/src/select/option.ts

@@ -1,8 +1,10 @@
-import { Signal } from "@angular/core";
+import { MappedDataToSignal } from "../shared/data-to-signal-type";
 
 export interface Option<T> {
-  icon?: Signal<string>;
-  value: Signal<T | null>;
-  label?: Signal<string>;
-  disabled?: Signal<boolean>;
+  icon?: string;
+  value: T | null;
+  label?: string;
+  disabled?: boolean;
 }
+
+export type MappedOptionComponent<T> = MappedDataToSignal<Option<T>>;

libs/components/src/select/select.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, signal } from "@angular/core";
+import { Component } from "@angular/core";
 import { TestBed } from "@angular/core/testing";
 import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
@@ -40,9 +40,9 @@ describe("Select Component", () => {
       expect(select.selectedOption()?.value).toBeUndefined();
 
       select.items.set([
-        { label: signal("Apple"), value: signal("apple") },
-        { label: signal("Pear"), value: signal("pear") },
-        { label: signal("Banana"), value: signal("banana") },
+        { label: "Apple", value: "apple" },
+        { label: "Pear", value: "pear" },
+        { label: "Banana", value: "banana" },
       ]);
 
       expect(select.selectedOption()?.value).toBe("apple");

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

@@ -77,7 +77,14 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
     if (value == null || value.length == 0) {
       return;
     }
-    this.items.set(value.toArray());
+    this.items.set(
+      value.toArray().map((c) => ({
+        icon: c.icon(),
+        value: c.value(),
+        label: c.label(),
+        disabled: c.disabled(),
+      })),
+    );
   }
 
   @HostBinding("class") protected classes = ["tw-block", "tw-w-full", "tw-h-full"];
@@ -120,13 +127,13 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
 
   /**Implemented as part of NG_VALUE_ACCESSOR */
   protected onChange(option: Option<T> | null) {
-    this.selectedValue.set(option?.value());
+    this.selectedValue.set(option?.value);
 
     if (!this.notifyOnChange) {
       return;
     }
 
-    this.notifyOnChange(option?.value());
+    this.notifyOnChange(option?.value);
   }
 
   /**Implemented as part of NG_VALUE_ACCESSOR */
@@ -182,7 +189,7 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
   }
 
   private findSelectedOption(items: Option<T>[], value: T): Option<T> | undefined {
-    return items.find((item) => item.value() === value);
+    return items.find((item) => item.value === value);
   }
 
   /**Emits the closed event. */