bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 17:23:37 +00:00
Code Issues Releases Wiki Activity

[CL-707] Migrate CL codebase to signals (#15340)

Browse Source
This commit is contained in:
Vicki League
2025-07-16 08:39:37 -04:00
committed by GitHub
parent 97ec9a6339
commit 6811ea4c0b
124 changed files with 944 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
libs/components/src/select/select.component.ts
View File

@@ -13,6 +13,11 @@ import {
ViewChild,
Output,
EventEmitter,
input,
Signal,
computed,
model,
signal,
} from "@angular/core";
import {
ControlValueAccessor,
@@ -37,29 +42,23 @@ let nextId = 0;
templateUrl: "select.component.html",
providers: [{ provide: BitFormFieldControl, useExisting: SelectComponent }],
imports: [NgSelectModule, ReactiveFormsModule, FormsModule],
host: {
"[id]": "id()",
},
})
export class SelectComponent<T> implements BitFormFieldControl, ControlValueAccessor {
@ViewChild(NgSelectComponent) select: NgSelectComponent;
private _items: Option<T>[] = [];
/** Optional: Options can be provided using an array input or using `bit-option` */
@Input()
get items(): Option<T>[] {
return this._items;
}
set items(next: Option<T>[]) {
this._items = next;
this._selectedOption = this.findSelectedOption(next, this.selectedValue);
}
readonly items = model<Option<T>[] | undefined>();
@Input() placeholder = this.i18nService.t("selectPlaceholder");
readonly placeholder = input(this.i18nService.t("selectPlaceholder"));
@Output() closed = new EventEmitter();
protected selectedValue: T;
protected _selectedOption: Option<T>;
get selectedOption() {
return this._selectedOption;
}
protected selectedValue = signal<T>(undefined);
selectedOption: Signal<Option<T>> = computed(() =>
this.findSelectedOption(this.items(), this.selectedValue()),
);
protected searchInputId = `bit-select-search-input-${nextId++}`;
private notifyOnChange?: (value: T) => void;
@@ -79,7 +78,14 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
if (value == null || value.length == 0) {
return;
}
this.items = value.toArray();
this.items.set(
value.toArray().map((option) => ({
icon: option.icon(),
value: option.value(),
label: option.label(),
disabled: option.disabled(),
})),
);
}
@HostBinding("class") protected classes = ["tw-block", "tw-w-full", "tw-h-full"];
@@ -89,6 +95,8 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
get disabledAttr() {
return this.disabled || null;
}
// TODO: Skipped for signal migration because:
// Accessor inputs cannot be migrated as they are too complex.
@Input()
get disabled() {
return this._disabled ?? this.ngControl?.disabled ?? false;
@@ -100,8 +108,7 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
/**Implemented as part of NG_VALUE_ACCESSOR */
writeValue(obj: T): void {
this.selectedValue = obj;
this._selectedOption = this.findSelectedOption(this.items, this.selectedValue);
this.selectedValue.set(obj);
}
/**Implemented as part of NG_VALUE_ACCESSOR */
@@ -121,6 +128,8 @@ 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);
if (!this.notifyOnChange) {
return;
}
@@ -154,9 +163,11 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
}
/**Implemented as part of BitFormFieldControl */
@HostBinding() @Input() id = `bit-multi-select-${nextId++}`;
readonly id = input(`bit-multi-select-${nextId++}`);
/**Implemented as part of BitFormFieldControl */
// TODO: Skipped for signal migration because:
// Accessor inputs cannot be migrated as they are too complex.
@HostBinding("attr.required")
@Input()
get required() {
@@ -178,8 +189,8 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
return [key, this.ngControl?.errors[key]];
}
private findSelectedOption(items: Option<T>[], value: T): Option<T> | undefined {
return items.find((item) => item.value === value);
private findSelectedOption(items: Option<T>[] | undefined, value: T): Option<T> | undefined {
return items?.find((item) => item.value === value);
}
/**Emits the closed event. */