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

UIF - Prefer signal & change detection (#16940)

Browse Source
This commit is contained in:
Oscar Hinton
2025-10-21 18:52:40 +02:00
committed by GitHub
parent d3fc20f8b9
commit 65da23feaa
135 changed files with 503 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
libs/components/src/switch/switch.component.spec.ts
View File

@@ -13,6 +13,8 @@ describe("SwitchComponent", () => {
let switchComponent: SwitchComponent;
let inputEl: HTMLInputElement;
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "test-host",
imports: [FormsModule, BitLabel, ReactiveFormsModule, SwitchModule],
@@ -70,6 +72,8 @@ describe("SwitchComponent", () => {
});
it("should update checked when selected input changes outside of a form", async () => {
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "test-selected-host",
template: `<bit-switch [selected]="checked"><bit-label>Element</bit-label></bit-switch>`,

12
libs/components/src/switch/switch.component.ts
View File

@@ -21,6 +21,8 @@ let nextId = 0;
/**
* Switch component for toggling between two states. Switch actions are meant to take place immediately and are not to be used in a form where saving/submiting actions are required.
*/
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "bit-switch",
providers: [
@@ -46,19 +48,19 @@ export class SwitchComponent implements ControlValueAccessor, AfterViewInit {
/**
* Model signal for selected state binding when used outside of a form
*/
protected selected = model(false);
protected readonly selected = model(false);
/**
* Model signal for disabled binding when used outside of a form
*/
protected disabled = model(false);
protected disabledReasonText = input<string | null>(null);
protected readonly disabled = model(false);
protected readonly disabledReasonText = input<string | null>(null);
private hintComponent = contentChild<BitHintComponent>(BitHintComponent);
private readonly hintComponent = contentChild<BitHintComponent>(BitHintComponent);
private disabledReasonTextId = `bit-switch-disabled-text-${nextId++}`;
private describedByIds = computed(() => {
private readonly describedByIds = computed(() => {
const ids: string[] = [];
if (this.disabledReasonText() && this.disabled()) {