fix option, select, and chip-select

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

@@ -118,12 +118,12 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
 
   /** The label to show in the chip button */
   protected get label(): string {
-    return this.selectedOption?.label() || this.placeholderText();
+    return this.selectedOption?.label || this.placeholderText();
   }
 
   /** The icon to show in the chip button */
   protected get icon(): string {
-    return this.selectedOption?.icon() || this.placeholderIcon();
+    return this.selectedOption?.icon || this.placeholderIcon();
   }
 
   /**
@@ -172,7 +172,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
    */
   private findOption(tree: ChipSelectOption<T>, value: T): ChipSelectOption<T> | null {
     let result = null;
-    if (tree.value !== null && compareValues(tree.value(), value)) {
+    if (tree.value !== null && compareValues(tree.value, value)) {
       return tree;
     }
 
@@ -266,7 +266,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
       return;
     }
 
-    this.notifyOnChange(option?.value() ?? null);
+    this.notifyOnChange(option?.value ?? null);
   }
 
   /** Implemented as part of NG_VALUE_ACCESSOR */

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. */

libs/components/src/shared/data-to-signal-type.ts

@@ -0,0 +1,5 @@
+import { Signal } from "@angular/core";
+
+export type MappedDataToSignal<T> = {
+  [Property in keyof T]: Signal<T[Property]>;
+};