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

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

@@ -1,5 +1,9 @@
+import { NgComponentOutlet } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { form, FormField, FormRoot, required } from '@angular/forms/signals';
 import { Meta, StoryObj } from '@storybook/angular';
 
+import FormControlStories from '../form-control/form-control.stories';
 import { ZenInput } from './input';
 
 type Options = ZenInput;
@@ -8,54 +12,27 @@ export default {
   title: 'Ui/Input',
   component: ZenInput,
   argTypes: {
+    ...FormControlStories.argTypes,
     value: {
-      control: 'text',
+      control: 'text' as const,
       table: {
         category: 'models',
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '',
-        },
-      },
-    },
-    placeholder: { control: 'text', table: { type: { summary: 'string' } } },
-    disabled: {
-      control: 'boolean',
-      table: {
-        category: 'models',
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
-    required: {
-      control: 'boolean',
-      table: {
-        category: 'inputs',
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        type: { summary: 'string' },
+        defaultValue: { summary: "''" },
       },
     },
+    placeholder: { control: 'text' as const, table: { type: { summary: 'string' } } },
     onInput: {
       table: {
         readonly: true,
-        type: {
-          summary: '(value: string) => void',
-        },
+        type: { summary: '(value: string) => void' },
       },
     },
   },
   args: {
+    ...FormControlStories.args,
     value: '',
     placeholder: '',
-    disabled: false,
-    required: false,
   },
 } satisfies Meta<Options>;
 
@@ -73,3 +50,76 @@ export const WithLabel: Story = {
   `,
   }),
 };
+
+export const WithSignalForm: Story = {
+  render: () => ({
+    moduleMetadata: { imports: [NgComponentOutlet] },
+    props: { component: InputSignalFormComponent },
+    template: '<ng-container *ngComponentOutlet="component" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<zen-input [formField]="form.name" />`,
+      },
+    },
+  },
+};
+
+export const WithFormRoot: Story = {
+  render: () => ({
+    moduleMetadata: { imports: [NgComponentOutlet] },
+    props: { component: InputFormRootComponent },
+    template: '<ng-container *ngComponentOutlet="component" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<form [formRoot]="loginForm">
+  <zen-input [formField]="loginForm.email" placeholder="Email" />
+  <zen-input [formField]="loginForm.password" placeholder="Password" type="password" />
+  <button type="submit">Sign in</button>
+</form>`,
+      },
+    },
+  },
+};
+
+@Component({
+  standalone: true,
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 300px;">
+      <zen-input [formField]="form.name" placeholder="Type something" />
+      @if (form.name().invalid()) {
+        <p style="color: red; margin: 0; font-size: 0.875rem;">
+          {{ form.name().errors()![0].message }}
+        </p>
+      }
+    </div>
+  `,
+  imports: [FormField, ZenInput],
+})
+class InputSignalFormComponent {
+  readonly form = form(signal({ name: '' }), s => {
+    required(s.name, { message: 'Name is required' });
+  });
+}
+
+@Component({
+  standalone: true,
+  template: `
+    <form [formRoot]="loginForm" style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 300px;">
+      <zen-input [formField]="loginForm.email" placeholder="Email" />
+      <zen-input [formField]="loginForm.password" placeholder="Password" type="password" />
+      <button type="submit">Sign in</button>
+    </form>
+  `,
+  imports: [FormRoot, FormField, ZenInput],
+})
+class InputFormRootComponent {
+  readonly loginModel = signal({ email: '', password: '' });
+  readonly loginForm = form(this.loginModel, s => {
+    required(s.email, { message: 'Email is required' });
+    required(s.password, { message: 'Password is required' });
+  });
+}

package/schematics/ui/files/input/input.ts

@@ -1,30 +1,33 @@
-import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { Component, input, 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.
+ * ZenInput is a single-line text input component backed by Signal Forms.
  *
- * @example
- * <zen-input value="string" />
+ * Connect it to a Signal Forms field with `[formField]`:
+ *
+ * ```html
+ * <zen-input [formField]="myForm.name" placeholder="Enter name" />
+ * ```
+ *
+ * The `[formField]` directive automatically synchronises value, disabled
+ * state, validation errors, and touched/dirty status.
  *
  * ### 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-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%);
  * }
  * ```
  *
- * @implements {ZenFormControl<string>}
+ * @extends {ZenFormControl<string>}
  *
  * @author Konrad Stępień
  * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
@@ -34,24 +37,24 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
   selector: 'zen-input',
   template: `
     <input
-      [attr.placeholder]="placeholder()"
-      [attr.required]="required()"
+      [aria-invalid]="invalid() || null"
       [disabled]="disabled()"
-      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      [required]="required()"
+      [type]="type()"
       [value]="value()"
-      (blur)="onTouched()"
-      (ngModelChange)="onInput($event)"
+      (input)="onInput(inputRef.value)"
+      #inputRef
     />
   `,
   styleUrls: ['./input.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [ZenFormControlProvider(ZenInput)],
-  imports: [FormsModule],
 })
 export class ZenInput extends ZenFormControl<string> {
   /** The current input value with two-way binding support. */
   readonly value = model('');
 
   /** The placeholder text for the form control. */
-  readonly placeholder = input<string>();
+  readonly placeholder = input<string>('');
+
+  readonly type = input<'text' | 'email' | 'url' | 'password'>('text');
 }

package/schematics/ui/files/popover/host/popover-host.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 import { PopoverPlacement } from '../popover-positions.type';
 
@@ -25,7 +25,6 @@ import { PopoverPlacement } from '../popover-positions.type';
     <ng-content />
   `,
   styleUrl: './popover-host.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     popover: 'auto',
     '[attr.id]': 'id()',

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

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
+import { Service } from '@angular/core';
 
 import { ZenRadio } from './radio';
 
-@Injectable({ providedIn: 'root' })
+@Service()
 export class ZenRadioRegistry {
   private readonly radios = new Map<string, ZenRadio[]>();
 

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' }));
+}