From 7f97c4aeb6ee933cbd4eb3d8bc5b2e2ce94ff50b Mon Sep 17 00:00:00 2001 From: Vicki League Date: Wed, 25 Jun 2025 12:17:16 -0400 Subject: [PATCH] fix option, select, and chip-select --- .../src/chip-select/chip-select.component.ts | 8 ++++---- libs/components/src/select/option.component.ts | 4 ++-- libs/components/src/select/option.ts | 12 +++++++----- .../src/select/select.component.spec.ts | 8 ++++---- libs/components/src/select/select.component.ts | 15 +++++++++++---- libs/components/src/shared/data-to-signal-type.ts | 5 +++++ 6 files changed, 33 insertions(+), 19 deletions(-) create mode 100644 libs/components/src/shared/data-to-signal-type.ts diff --git a/libs/components/src/chip-select/chip-select.component.ts b/libs/components/src/chip-select/chip-select.component.ts index 8667ee1ea38..ad197aaa6ce 100644 --- a/libs/components/src/chip-select/chip-select.component.ts +++ b/libs/components/src/chip-select/chip-select.component.ts @@ -118,12 +118,12 @@ export class ChipSelectComponent 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 implements ControlValueAccessor, A */ private findOption(tree: ChipSelectOption, value: T): ChipSelectOption | 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 implements ControlValueAccessor, A return; } - this.notifyOnChange(option?.value() ?? null); + this.notifyOnChange(option?.value ?? null); } /** Implemented as part of NG_VALUE_ACCESSOR */ diff --git a/libs/components/src/select/option.component.ts b/libs/components/src/select/option.component.ts index 54d8cac76a2..1ffdc3f9320 100644 --- a/libs/components/src/select/option.component.ts +++ b/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: ``, }) -export class OptionComponent implements Option { +export class OptionComponent implements MappedOptionComponent { icon = input(); value = input.required(); diff --git a/libs/components/src/select/option.ts b/libs/components/src/select/option.ts index 57385a3e6e4..88e052844d8 100644 --- a/libs/components/src/select/option.ts +++ b/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 { - icon?: Signal; - value: Signal; - label?: Signal; - disabled?: Signal; + icon?: string; + value: T | null; + label?: string; + disabled?: boolean; } + +export type MappedOptionComponent = MappedDataToSignal>; diff --git a/libs/components/src/select/select.component.spec.ts b/libs/components/src/select/select.component.spec.ts index a140a9783a7..cfc69636224 100644 --- a/libs/components/src/select/select.component.spec.ts +++ b/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"); diff --git a/libs/components/src/select/select.component.ts b/libs/components/src/select/select.component.ts index c091c31bcde..1ddd2f322df 100644 --- a/libs/components/src/select/select.component.ts +++ b/libs/components/src/select/select.component.ts @@ -77,7 +77,14 @@ export class SelectComponent 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 implements BitFormFieldControl, ControlValueAcce /**Implemented as part of NG_VALUE_ACCESSOR */ protected onChange(option: Option | 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 implements BitFormFieldControl, ControlValueAcce } private findSelectedOption(items: Option[], value: T): Option | undefined { - return items.find((item) => item.value() === value); + return items.find((item) => item.value === value); } /**Emits the closed event. */ diff --git a/libs/components/src/shared/data-to-signal-type.ts b/libs/components/src/shared/data-to-signal-type.ts new file mode 100644 index 00000000000..4d693a866d2 --- /dev/null +++ b/libs/components/src/shared/data-to-signal-type.ts @@ -0,0 +1,5 @@ +import { Signal } from "@angular/core"; + +export type MappedDataToSignal = { + [Property in keyof T]: Signal; +};