refactor(checkbox, radio, switch): standardize controls

projects/cli/src/schematics/components/files/checkbox/checkbox.component.html

@@ -1,14 +1,14 @@
 <input
   #inputElement
-  [attr.aria-checked]="checked()"
-  [checked]="checked()"
+  [attr.aria-checked]="value()"
+  [checked]="value()"
   [attr.aria-disabled]="zenDisabledDirective.disabledBoolean()"
   [disabled]="zenDisabledDirective.disabledBoolean()"
-  (change)="onToggle()"
-  (keydown.enter)="onToggle()"
+  (change)="setValue()"
+  (keydown.enter)="setValue()"
   type="checkbox"
 />
-@switch (checked()) {
+@switch (value()) {
   @case (false) {
     ✕
   }

projects/cli/src/schematics/components/files/checkbox/checkbox.component.ts

@@ -6,8 +6,8 @@ import {
   ElementRef,
   forwardRef,
   inject,
-  model,
   Renderer2,
+  signal,
   viewChild,
 } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@@ -62,13 +62,13 @@ export class ZenCheckboxComponent
   implements ControlValueAccessor, AfterViewInit
 {
   /** Model for the checked state of the checkbox. */
-  readonly checked = model<CheckedState>(false);
+  readonly value = signal<CheckedState>(false);
 
   /** @ignore */
   readonly zenDisabledDirective = inject(ZenDisabledDirective, { self: true });
 
   /** @ignore */
-  private readonly checked$ = toObservable(this.checked);
+  private readonly checked$ = toObservable(this.value);
 
   /** @ignore */
   private readonly destroyRef = inject(DestroyRef);
@@ -96,7 +96,7 @@ export class ZenCheckboxComponent
    * Writes a new value to the component.
    */
   writeValue(value: boolean): void {
-    this.checked.set(value);
+    this.value.set(value);
   }
 
   /**
@@ -124,11 +124,11 @@ export class ZenCheckboxComponent
    * Toggles the checkbox value and notifies the change.
    * If the component is disabled, no action is performed.
    */
-  onToggle(): void {
+  setValue(): void {
     if (this.zenDisabledDirective.disabledBoolean()) return;
 
-    this.checked.update(value => !value);
-    this.onChange(this.checked());
+    this.value.update(value => !value);
+    this.onChange(this.value());
     this.onTouched();
   }
 

projects/cli/src/schematics/components/files/radio/radio.component.html

@@ -1,6 +1,6 @@
 <input
-  [attr.aria-checked]="checked()"
-  [checked]="checked()"
+  [attr.aria-checked]="value()"
+  [checked]="value()"
   [attr.aria-disabled]="zenDisabledDirective.disabledBoolean()"
   [disabled]="zenDisabledDirective.disabledBoolean()"
   [attr.id]="id()"

projects/cli/src/schematics/components/files/radio/radio.component.ts

@@ -35,7 +35,7 @@ export class ZenRadioComponent implements ControlValueAccessor {
   readonly id = input<string | undefined>();
 
   /** Model for the checked state of the checkbox. */
-  readonly checked = model<boolean>(false);
+  readonly value = model<boolean>(false);
 
   /** @ignore */
   readonly zenDisabledDirective = inject(ZenDisabledDirective, { self: true });
@@ -47,7 +47,7 @@ export class ZenRadioComponent implements ControlValueAccessor {
    * Writes a new value to the component.
    */
   writeValue(value: boolean): void {
-    this.checked.set(value);
+    this.value.set(value);
   }
 
   /**

projects/cli/src/schematics/components/files/switch/zen-switch.component.html

@@ -1,9 +1,9 @@
 <button
   class="switch"
-  [attr.aria-checked]="checked()"
+  [attr.aria-checked]="value()"
   [attr.aria-disabled]="zenDisabledDirective.disabledBoolean()"
   [disabled]="zenDisabledDirective.disabledBoolean()"
-  (click)="onToggle()"
+  (click)="setValue()"
   (keydown)="onKeyDown($event)"
   role="switch"
 >

projects/cli/src/schematics/components/files/switch/zen-switch.component.ts

@@ -3,7 +3,7 @@ import {
   Component,
   forwardRef,
   inject,
-  model,
+  signal,
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -50,7 +50,7 @@ type OnTouchedFn = () => void;
 })
 export class ZenSwitchComponent implements ControlValueAccessor {
   /** Model for the checked state of the switch. */
-  checked = model<boolean>(false);
+  value = signal<boolean>(false);
 
   /** @ignore */
   readonly zenDisabledDirective = inject(ZenDisabledDirective, { self: true });
@@ -65,7 +65,7 @@ export class ZenSwitchComponent implements ControlValueAccessor {
    * @ignore
    */
   writeValue(value: boolean): void {
-    this.checked.set(value);
+    this.value.set(value);
   }
 
   /**
@@ -95,13 +95,13 @@ export class ZenSwitchComponent implements ControlValueAccessor {
   /**
    * Toggles the switch value and notifies the change.
    */
-  onToggle(check?: boolean): void {
+  setValue(value?: boolean): void {
     if (this.zenDisabledDirective.disabledBoolean()) return;
 
-    const value = check ?? !this.checked();
+    const _value = value ?? !this.value();
 
-    this.checked.set(value);
-    this.onChange(value);
+    this.value.set(_value);
+    this.onChange(_value);
     this.onTouched();
   }
 
@@ -113,15 +113,15 @@ export class ZenSwitchComponent implements ControlValueAccessor {
       case 'Enter':
       case 'Space': {
         event.preventDefault();
-        this.onToggle();
+        this.setValue();
         break;
       }
       case 'ArrowRight': {
-        this.onToggle(true);
+        this.setValue(true);
         break;
       }
       case 'ArrowLeft': {
-        this.onToggle(false);
+        this.setValue(false);
         break;
       }
     }

projects/cli/stories/components/checkbox.stories.ts

@@ -14,8 +14,8 @@ export const Default: Story = {
   render: () => ({
     template: `
         <zen-checkbox />
-        <zen-checkbox [checked]="true" />
-        <zen-checkbox checked="mixed" />
+        <zen-checkbox [value]="true" />
+        <zen-checkbox value="mixed" />
     `,
   }),
 };
@@ -24,8 +24,8 @@ export const Disabled: Story = {
   render: () => ({
     template: `
         <zen-checkbox disabled="true"/>
-        <zen-checkbox [checked]="true" disabled="true"/>
-        <zen-checkbox checked="mixed" disabled="true"/>
+        <zen-checkbox [value]="true" disabled="true"/>
+        <zen-checkbox value="mixed" disabled="true"/>
     `,
   }),
 };

projects/cli/stories/components/switch.stories.ts

@@ -27,7 +27,7 @@ export const Default: Story = {
 
 export const Disabled: Story = {
   render: () => ({
-    template: `<zen-switch [disabled]="true" />`,
+    template: `<zen-switch disabled="true" />`,
   }),
 };
 
@@ -36,7 +36,7 @@ export const Checked: Story = {
     template: `
       <zen-switch [ngModel]="true" />
       <br/>
-      <zen-switch [checked]="true" />
+      <zen-switch />
     `,
   }),
 };