@ng-zen/cli 22.0.0 → 22.1.0-next.2

package/schematics/ui/files/radio/radio.spec.ts

@@ -1,6 +1,5 @@
 import { provideZonelessChangeDetection } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -14,7 +13,7 @@ describe('ZenRadio', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenRadio, FormsModule, ReactiveFormsModule],
+      imports: [ZenRadio],
       providers: [ZenRadioRegistry, provideZonelessChangeDetection()],
     }).compileComponents();
 
@@ -73,7 +72,7 @@ describe('ZenRadio', () => {
   });
 
   it('should not call onInput when disabled', () => {
-    component.disabled.set(true);
+    fixture.componentRef.setInput('disabled', true);
     fixture.detectChanges();
 
     const spy = vi.spyOn(component, 'onInput');
@@ -85,63 +84,8 @@ describe('ZenRadio', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
-  it('should integrate with ngModel', () => {
-    let selectedValue: string | null = null;
-
-    const testFixture = TestBed.createComponent(ZenRadio);
-    testFixture.componentRef.setInput('name', 'ng-model-group');
-    testFixture.componentRef.setInput('option', 'option1');
-    testFixture.detectChanges();
-
-    // Simulate ngModel binding
-    testFixture.componentInstance.registerOnChange((value: string | null) => {
-      selectedValue = value;
-    });
-
-    const inputElement = testFixture.debugElement.query(By.css('input')).nativeElement;
-    inputElement.checked = true;
-    inputElement.dispatchEvent(new Event('change'));
-
-    expect(selectedValue).toBe('option1');
-  });
-
-  it('should integrate with reactive forms', () => {
-    const formControl = new FormControl<string | null>(null);
-    const testFixture = TestBed.createComponent(ZenRadio);
-    testFixture.componentRef.setInput('name', 'reactive-group');
-    testFixture.componentRef.setInput('option', 'option1');
-
-    // Simulate form control binding
-    testFixture.componentInstance.writeValue(formControl.value);
-
-    testFixture.componentInstance.registerOnChange((value: string | null) => {
-      formControl.setValue(value);
-    });
-
-    testFixture.detectChanges();
-
-    const inputElement = testFixture.debugElement.query(By.css('input')).nativeElement;
-    inputElement.checked = true;
-    inputElement.dispatchEvent(new Event('change'));
-
-    // The component's onInput method should call the onChange callback
-    // which should update form control value
-    expect(formControl.value).toBe('option1');
-  });
-
-  it('should handle disabled state from form control', () => {
-    component.setDisabledState(true);
-    fixture.detectChanges();
-
-    expect(component.disabled()).toBe(true);
-
-    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
-    expect(inputElement.disabled).toBe(true);
-  });
-
   it('should have correct ARIA attributes', () => {
     component.value.set('test-value');
-    component.disabled.set(false);
     fixture.detectChanges();
 
     const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -151,7 +95,7 @@ describe('ZenRadio', () => {
 
   it('should update ARIA attributes when state changes', () => {
     component.value.set('different-value');
-    component.disabled.set(true);
+    fixture.componentRef.setInput('disabled', true);
     fixture.detectChanges();
 
     const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -159,24 +103,12 @@ describe('ZenRadio', () => {
     expect(inputElement.getAttribute('aria-disabled')).toBe('true');
   });
 
-  it('should call onTouched when host element loses focus', () => {
-    const onTouchedSpy = vi.fn();
-    component.registerOnTouched(onTouchedSpy);
-
-    const hostElement = fixture.debugElement.nativeElement;
-    hostElement.dispatchEvent(new Event('blur'));
-
-    expect(onTouchedSpy).toHaveBeenCalled();
-  });
-
   it('should register with radio registry on initialization', () => {
-    // Create a new radio to test registry registration
     const newFixture = TestBed.createComponent(ZenRadio);
     newFixture.componentRef.setInput('name', 'registry-test');
     newFixture.componentRef.setInput('option', 'registry-option');
     newFixture.detectChanges();
 
-    // The radio should be registered after next render
     expect(newFixture.componentInstance).toBeTruthy();
   });
 
@@ -190,7 +122,6 @@ describe('ZenRadio', () => {
 
     const radio2 = radio2Fixture.componentInstance;
 
-    // Test registry selection
     registry.select('test-group', 'option2');
 
     expect(radio1.value()).toBe('option2');

package/schematics/ui/files/radio/radio.stories.ts

@@ -1,87 +1,53 @@
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgComponentOutlet } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { Meta, StoryObj } from '@storybook/angular';
 
+import FormControlStories from '../form-control/form-control.stories';
 import { ZenRadio } from './radio';
 
-interface StoryParams {
-  selectedColor?: string;
-}
-
-type Options = ZenRadio & StoryParams;
+type Options = ZenRadio;
 
 export default {
   title: 'Ui/Radio',
   component: ZenRadio,
   argTypes: {
+    ...FormControlStories.argTypes,
     value: {
       table: {
         category: 'models',
-        type: {
-          summary: 'string | null',
-        },
-        defaultValue: {
-          summary: 'null',
-        },
+        type: { summary: 'string | null' },
+        defaultValue: { summary: 'null' },
       },
-      control: 'text',
+      control: 'text' as const,
     },
     name: {
       table: {
         category: 'models',
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: 'radio',
-        },
+        type: { summary: 'string' },
+        defaultValue: { summary: 'radio' },
       },
-      control: 'text',
+      control: 'text' as const,
     },
     option: {
       table: {
         category: 'inputs',
-        type: {
-          summary: 'string',
-        },
-      },
-      control: 'text',
-    },
-    disabled: {
-      control: 'boolean',
-      table: {
-        category: 'models',
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
-    required: {
-      control: 'boolean',
-      table: {
-        category: 'inputs',
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        type: { summary: 'string' },
       },
+      control: 'text' as const,
     },
     onInput: {
       table: {
         readonly: true,
-        type: {
-          summary: '(value: string | null) => void',
-        },
+        type: { summary: '(value: string | null) => void' },
       },
     },
   },
   args: {
+    ...FormControlStories.args,
     value: null,
     name: 'radio-group',
     option: 'option1',
-    disabled: false,
-    required: false,
   },
 } satisfies Meta<Options>;
 
@@ -100,70 +66,52 @@ export const WithLabel: Story = {
   }),
 };
 
-export const NgModel: Story = {
+export const WithSignalForm: Story = {
   render: () => ({
-    moduleMetadata: {
-      imports: [FormsModule],
-    },
-    props: {
-      selectedColor: 'blue',
-    },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 1rem">
-        <div>
-            <strong>Selected value:</strong>
-            <p> {{ selectedColor || 'None' }}</p>
-         </div>
-        <div style="display: flex; flex-direction: column; gap: 0.5rem">
-          <div style="display: flex; align-items: center; gap: 0.25rem">
-            <zen-radio name="color-group" option="red" [(ngModel)]="selectedColor" />
-            <label>Red</label>
-          </div>
-          <div style="display: flex; align-items: center; gap: 0.25rem">
-            <zen-radio name="color-group" option="green" [(ngModel)]="selectedColor" />
-            <label>Green</label>
-          </div>
-          <div style="display: flex; align-items: center; gap: 0.25rem">
-            <zen-radio name="color-group" option="blue" [(ngModel)]="selectedColor" />
-            <label>Blue</label>
-          </div>
-        </div>
-      </div>
-  `,
+    moduleMetadata: { imports: [NgComponentOutlet] },
+    props: { component: RadioSignalFormComponent },
+    template: '<ng-container *ngComponentOutlet="component" />',
   }),
-};
-
-export const AsFromControl: Story = {
-  render: () => {
-    return {
-      moduleMetadata: {
-        imports: [ReactiveFormsModule],
-      },
-      props: {
-        colorControl: new FormControl('green'),
+  parameters: {
+    docs: {
+      source: {
+        code: `<zen-radio [formField]="form.color" option="red" />
+<zen-radio [formField]="form.color" option="green" />
+<zen-radio [formField]="form.color" option="blue" />`,
       },
-      template: `
-        <div style="display: flex; flex-direction: column; gap: 1rem">
-          <div>
-            <strong>Selected value:</strong>
-            <p> {{ colorControl.value || 'None' }}</p>
-          </div>
-          <div style="display: flex; flex-direction: column; gap: 0.5rem">
-            <div style="display: flex; align-items: center; gap: 0.25rem">
-              <zen-radio name="working-group" option="red" [formControl]="colorControl" />
-              <label>Red</label>
-            </div>
-            <div style="display: flex; align-items: center; gap: 0.25rem">
-              <zen-radio name="working-group" option="green" [formControl]="colorControl" />
-              <label>Green</label>
-            </div>
-            <div style="display: flex; align-items: center; gap: 0.25rem">
-              <zen-radio name="working-group" option="blue" [formControl]="colorControl" />
-              <label>Blue</label>
-            </div>
-          </div>
-        </div>
-      `,
-    };
+    },
   },
 };
+
+@Component({
+  standalone: true,
+  imports: [FormField, ZenRadio],
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <div>
+        <strong>Selected:</strong>
+        {{ form.color().value() }}
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 0.5rem">
+        <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+        <label style="display: flex; align-items: center; gap: 0.25rem">
+          <zen-radio [formField]="form.color" option="red" />
+          Red
+        </label>
+        <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+        <label style="display: flex; align-items: center; gap: 0.25rem">
+          <zen-radio [formField]="form.color" option="green" />
+          Green
+        </label>
+        <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+        <label style="display: flex; align-items: center; gap: 0.25rem">
+          <zen-radio [formField]="form.color" option="blue" />
+          Blue
+        </label>
+      </div>
+    </div>
+  `,
+})
+class RadioSignalFormComponent {
+  readonly form = form(signal({ color: 'blue' }));
+}

package/schematics/ui/files/radio/radio.ts

@@ -1,43 +1,36 @@
-import {
-  afterNextRender,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  inject,
-  input,
-  model,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { afterNextRender, Component, computed, DestroyRef, inject, input, model } from '@angular/core';
 
-import { ZenFormControl, ZenFormControlProvider } from '../form-control';
+import { ZenFormControl } from '../form-control';
 import { ZenRadioRegistry } from './radio.registry';
 
 /**
- * ZenRadio is a reusable radio button component designed to provide
- * a consistent and customizable radio button style across the application.
- * It supports Angular forms integration and provides two-way data binding
- * for string values.
+ * ZenRadio is a radio button component backed by Signal Forms.
  *
- * @example
- * <zen-radio name="group" option="option1" [(ngModel)]="selectedValue" /> Option 1
- * <zen-radio name="group" option="option2" [(ngModel)]="selectedValue" /> Option 2
+ * Radio buttons with the same `name` form a group. The `value` is shared
+ * across the group — when one radio is selected, `onInput(value)` is called
+ * on every radio in the group via {@link ZenRadioRegistry}.
+ *
+ * Use together with a shared `[formField]` binding:
+ *
+ * ```html
+ * <zen-radio [formField]="form.color" name="color" option="red" />
+ * <zen-radio [formField]="form.color" name="color" option="green" />
+ * ```
  *
  * ### CSS Custom Properties
  *
- * You can customize the component using CSS custom properties:
  *
  * ```css
  * :root {
- *  --zen-radio-size: 1rem;
- *  --zen-radio-border-radius: 50%;
- *  --zen-radio-appearance: hsl(0deg 0% 10%);
- *  --zen-radio-disabled-opacity: 0.6;
- *  --zen-radio-border: 1px solid hsl(0deg 0% 80%);
+ *   --zen-radio-size: 1rem;
+ *   --zen-radio-border-radius: 50%;
+ *   --zen-radio-appearance: hsl(0deg 0% 10%);
+ *   --zen-radio-disabled-opacity: 0.6;
+ *   --zen-radio-border: 1px solid hsl(0deg 0% 80%);
  * }
  * ```
  *
- * @implements {ZenFormControl<string | null>}
+ * @extends {ZenFormControl<string | null>}
  *
  * @author Konrad Stępień
  * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
@@ -49,6 +42,7 @@ import { ZenRadioRegistry } from './radio.registry';
     <input
       [attr.aria-checked]="checked()"
       [attr.aria-disabled]="disabled()"
+      [attr.aria-invalid]="invalid() || null"
       [checked]="checked()"
       [disabled]="disabled()"
       [name]="name()"
@@ -62,12 +56,6 @@ import { ZenRadioRegistry } from './radio.registry';
     }
   `,
   styleUrls: ['./radio.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule],
-  providers: [ZenFormControlProvider(ZenRadio)],
-  host: {
-    '(blur)': 'onTouched()',
-  },
 })
 export class ZenRadio extends ZenFormControl<string | null> {
   /**
@@ -80,7 +68,7 @@ export class ZenRadio extends ZenFormControl<string | null> {
    * The name attribute for the radio button group.
    * Radio buttons with the same name will be grouped together.
    */
-  readonly name = input.required<string>();
+  override readonly name = input.required<string>();
 
   /**
    * The value for this specific radio button.

package/schematics/ui/files/skeleton/skeleton.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
  * ZenInput loader component that displays loading states.
@@ -31,6 +31,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   selector: 'zen-skeleton, zen-skeleton[rounded]',
   template: ``,
   styleUrl: './skeleton.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenSkeleton {}

package/schematics/ui/files/switch/switch.stories.ts

@@ -1,5 +1,9 @@
+import { NgComponentOutlet } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { Meta, StoryObj } from '@storybook/angular';
 
+import FormControlStories from '../form-control/form-control.stories';
 import { ZenSwitch } from './switch';
 
 type Options = ZenSwitch;
@@ -8,42 +12,18 @@ export default {
   title: 'Ui/Switch',
   component: ZenSwitch,
   argTypes: {
+    ...FormControlStories.argTypes,
     value: {
-      control: 'boolean',
+      control: 'boolean' as const,
       table: {
         category: 'models',
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      table: {
-        category: 'models',
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
-    required: {
-      control: 'boolean',
-      table: {
-        category: 'inputs',
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        type: { summary: 'boolean' },
       },
     },
     onInput: {
       table: {
         readonly: true,
-        type: {
-          summary: '(value: boolean) => void',
-        },
+        type: { summary: '(value: boolean) => void' },
       },
     },
     onKeyDown: {
@@ -53,12 +33,48 @@ export default {
     },
   },
   args: {
+    ...FormControlStories.args,
     value: false,
-    disabled: false,
-    required: false,
   },
 } satisfies Meta<Options>;
 
 type Story = StoryObj<Options>;
 
 export const Default: Story = {};
+
+export const WithSignalForm: Story = {
+  render: () => ({
+    moduleMetadata: { imports: [NgComponentOutlet] },
+    props: { component: SwitchSignalFormComponent },
+    template: '<ng-container *ngComponentOutlet="component" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+    <div style="display: flex; align-items: center; gap: 0.5rem;">
+      <zen-switch id="notifications" [formField]="form.notifications" />
+      <label for="notifications">
+        {{ form.notifications().value() ? 'Notifications on' : 'Notifications off' }}
+      </label>
+    </div>`,
+      },
+    },
+  },
+};
+
+@Component({
+  standalone: true,
+  template: `
+    <div style="display: flex; align-items: center; gap: 0.5rem;">
+      <zen-switch [formField]="form.notifications" id="notifications" />
+      <label for="notifications">
+        {{ form.notifications().value() ? 'Notifications on' : 'Notifications off' }}
+      </label>
+    </div>
+  `,
+  imports: [FormField, ZenSwitch],
+})
+class SwitchSignalFormComponent {
+  readonly form = form(signal({ notifications: false }));
+}

package/schematics/ui/files/switch/switch.ts

@@ -1,34 +1,36 @@
-import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { Component, model } from '@angular/core';
 
-import { ZenFormControl, ZenFormControlProvider } from '../form-control';
+import { ZenFormControl } from '../form-control';
 
 /**
- * ZenInput is a reusable text input component designed to provide
- * a consistent and customizable input style across the application.
- * It supports Angular forms integration and provides two-way data binding.
+ * ZenSwitch is a toggle switch component for boolean values backed by
+ * Signal Forms.
  *
- * @example
+ * Connect it to a Signal Forms field with `[formField]`:
  *
  * ```html
- * <zen-switch [disabled]="false" [value]="true" />
- *```
+ * <zen-switch [formField]="myForm.notifications" />
+ * ```
+ *
+ * Supports keyboard interaction: `Enter`, `Space`, `ArrowRight`, and
+ * `ArrowLeft` keys toggle or set the value.
  *
  * ### CSS Custom Properties
- * You can customize the component using CSS custom properties:
+ *
  *
  * ```css
  * :root {
- *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
- *  --zen-input-border-radius: 8px;
- *  --zen-input-padding: 0.5rem 1rem;
- *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
- *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ *   --zen-switch-thumb-size: 1rem;
+ *   --zen-switch-height: 1.25rem;
+ *   --zen-switch-width: 2rem;
+ *   --zen-switch-apperance: hsl(0deg 0% 10%);
+ *   --zen-switch-background: hsl(0deg 0% 80%);
  * }
  * ```
  *
- * @implements {ZenFormControl<boolean>}
+ * @extends {ZenFormControl<boolean>}
  *
- * @author Konrad Stępień
+ * @author Konrad Stepień
  * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
  * @see [GitHub](https://github.com/kstepien3/ng-zen)
  */
@@ -41,20 +43,18 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
     </span>
   `,
   styleUrl: './switch.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [ZenFormControlProvider(ZenSwitch)],
+
   host: {
     tabindex: '0',
     role: 'switch',
     '[attr.data-disabled]': 'disabled()',
     '[attr.data-checked]': 'value()',
-    '(blur)': 'onTouched()',
     '(click)': 'onInput(!this.value())',
     '(keydown)': 'onKeyDown($event)',
   },
 })
 export class ZenSwitch extends ZenFormControl<boolean> {
-  /** Holds the current checkbox value. */
+  /** Holds the current switch value. */
   readonly value = model(false);
 
   /**

package/schematics/ui/files/textarea/textarea.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
  * ZenTextarea is a reusable textarea component designed to provide
@@ -32,6 +32,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     <ng-content />
   `,
   styleUrls: ['./textarea.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenTextarea {}

package/schematics/ui/index.js

@@ -6,8 +6,21 @@ const schematics_1 = require("@angular-devkit/schematics");
 const workspace_1 = require("@schematics/angular/utility/workspace");
 const utils_1 = require("../../utils");
 const DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui
-function uiGenerator({ ui, project, ...options }) {
-    return async (tree) => {
+const FORM_CONTROL_DEPS = new Set(['input', 'checkbox', 'switch', 'radio']);
+function resolveFormControlDependency(tree, logger, ui, workingDirectory) {
+    if (!ui.some(u => FORM_CONTROL_DEPS.has(u)))
+        return;
+    const fcPath = (0, core_1.normalize)(`${workingDirectory}/form-control/form-control.ts`);
+    if (tree.exists(fcPath)) {
+        logger.info('ℹ form-control skipped — already exists');
+    }
+    else {
+        ui.push('form-control');
+        logger.info('✔ form-control included (auto-included for form components)');
+    }
+}
+function uiGenerator({ ui: selected, project, ...options }) {
+    return async (tree, context) => {
         const workspace = await (0, workspace_1.getWorkspace)(tree);
         const projectName = project || workspace.extensions['defaultProject'];
         const projectObj = workspace.projects.get(projectName);
@@ -18,6 +31,8 @@ function uiGenerator({ ui, project, ...options }) {
             options.path = ((0, workspace_1.buildDefaultPath)(projectObj) + '/' + DEFAULT_GENERATION_PATH);
         }
         const workingDirectory = (0, core_1.normalize)((0, core_1.join)(options.currentDirectory, options.path));
+        const ui = [...selected];
+        resolveFormControlDependency(tree, context.logger, ui, workingDirectory);
         return (0, schematics_1.chain)([...(0, utils_1.applyFileTemplateUtil)(ui, { ...options, path: workingDirectory })]);
     };
 }