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

package/schematics/ui/files/dialog/dialog.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, model, untracked } from '@angular/core';
+import { Component, effect, ElementRef, inject, input, model, untracked } from '@angular/core';
 import { Cancel01Icon } from '@hugeicons/core-free-icons';
 
 import { ZenIcon } from '../icon';
@@ -55,7 +55,6 @@ type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
     </div>
   `,
   styleUrl: './dialog.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ZenIcon],
   host: {
     '[attr.aria-label]': 'header()',

package/schematics/ui/files/divider/divider.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 /**
  * ZenDivider is a reusable divider component that provides a simple way to
@@ -36,7 +36,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   selector: `zen-divider, zen-divider[vertical],`,
   template: '<ng-content/>',
   styleUrl: './divider.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': '"zen-align-"+align()',
   },

package/schematics/ui/files/form-control/form-control.spec.ts

@@ -2,27 +2,42 @@ import { Component, model, provideZonelessChangeDetection } from '@angular/core'
 import { TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { ZenFormControl, ZenFormControlProvider } from './form-control';
+import { ZenFormControl } from './form-control';
 
 @Component({
   template: '...',
-  providers: [ZenFormControlProvider(FormControl)],
 })
-class FormControl extends ZenFormControl<string> {
+class TestFormControl extends ZenFormControl<string> {
   readonly value = model<string>('');
 }
 
 describe('FormControl', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FormControl],
+      imports: [TestFormControl],
       providers: [provideZonelessChangeDetection()],
     }).compileComponents();
   });
 
   it('should create', () => {
-    const fixture = TestBed.createComponent(FormControl);
+    const fixture = TestBed.createComponent(TestFormControl);
     const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
+
+  it('should have FormUiControl properties', () => {
+    const fixture = TestBed.createComponent(TestFormControl);
+    const component = fixture.componentInstance;
+    expect(component.disabled()).toBe(false);
+    expect(component.required()).toBe(false);
+    expect(component.touched()).toBe(false);
+    expect(component.dirty()).toBe(false);
+    expect(component.invalid()).toBe(false);
+    expect(component.pending()).toBe(false);
+    expect(component.hidden()).toBe(false);
+    expect(component.readonly()).toBe(false);
+    expect(component.name()).toBe('');
+    expect(component.errors()).toEqual([]);
+    expect(component.disabledReasons()).toEqual([]);
+  });
 });

package/schematics/ui/files/form-control/form-control.stories.ts

@@ -16,59 +16,81 @@ export default {
       story => `<div style="display: flex; flex-direction: column; gap: 2rem; align-items: center">${story}</div>`
     ),
   ],
-  args: {
-    value: '',
-    disabled: false,
-    required: false,
-  },
   argTypes: {
-    value: {
-      control: false,
-      table: {
-        category: 'models',
-        readonly: true,
-        type: {
-          summary: 'T',
-        },
-      },
-    },
     disabled: {
-      control: 'boolean',
-      table: {
-        category: 'models',
-        type: {
-          summary: 'boolean',
-        },
-        readonly: true,
-      },
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
     },
     required: {
-      control: 'boolean',
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    touched: {
+      control: false as const,
+      table: { category: 'models', type: { summary: 'boolean' }, readonly: true },
+    },
+    dirty: {
+      control: false as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, readonly: true },
+    },
+    invalid: {
+      control: false as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, readonly: true },
+    },
+    pending: {
+      control: false as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, readonly: true },
+    },
+    hidden: {
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    readonly: {
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    name: {
+      control: 'text' as const,
+      table: { category: 'models', type: { summary: 'string' } },
+    },
+    errors: {
+      control: false as const,
+      table: { category: 'models', type: { summary: 'ValidationError[]' }, readonly: true },
+    },
+    disabledReasons: {
+      control: false as const,
+      table: { category: 'models', type: { summary: 'DisabledReason[]' }, readonly: true },
+    },
+    value: {
+      control: false as const,
       table: {
-        category: 'inputs',
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        category: 'models',
         readonly: true,
+        type: { summary: 'T' },
       },
     },
     onInput: {
       table: {
         readonly: true,
-        type: {
-          summary: '(value: T) => void',
-        },
+        type: { summary: '(value: T) => void' },
       },
     },
   },
+  args: {
+    disabled: false,
+    required: false,
+    touched: false,
+    dirty: false,
+    invalid: false,
+    pending: false,
+    hidden: false,
+    readonly: false,
+    name: '',
+    value: '',
+  },
   parameters: {
     docs: {
       canvas: {
-        // This will remove the "show code" button
-        // https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#sourcestate
         sourceState: 'none',
       },
     },

package/schematics/ui/files/form-control/form-control.ts

@@ -1,100 +1,85 @@
-import { booleanAttribute, Directive, forwardRef, input, model, ModelSignal, Type } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ZenFormControlProvider = <T extends ZenFormControl<any>>(component: Type<T>) => ({
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => component),
-  multi: true,
-});
+import { booleanAttribute, Directive, input, ModelSignal, output } from '@angular/core';
+import type { DisabledReason, ValidationError, WithOptionalFieldTree } from '@angular/forms/signals';
+import { FormValueControl } from '@angular/forms/signals';
 
 /**
- * A base class for creating custom Angular form controls that integrate with both
- * template-driven and reactive forms. It simplifies the implementation of the
- * ControlValueAccessor interface by using signals for the control's value and state.
+ * Abstract base class for form controls that integrate with Signal Forms
+ * via the {@link FormValueControl} interface.
+ *
+ * Provides all {@link FormUiControl} state inputs (`disabled`, `required`,
+ * `touched`, `errors`, etc.) and the `touch` output used by the
+ * `[formField]` directive.
  *
- * Subclasses must provide an implementation for the abstract `value` property.
+ * Subclasses must provide an implementation of the `value` model signal
+ * with the appropriate value type.
+ *
+ * Decorated with `@Directive` only to declare the host event binding
+ * `(blur) -> touch.emit()`.
  *
  * @example
  *
  * ```ts
  * @Component({
- *   template: '...',
- *   providers: [ZenFormControlProvider(ZenInput)]
+ *   selector: 'my-input',
+ *   template: `<input [value]="value()" (input)="onInput($event.target.value)" />`,
  * })
- * export class Input extends ZenFormControl<string> {
- *   readonly value = model<string>('')
+ * export class MyInput extends ZenFormControl<string> {
+ *   readonly value = model<string>('');
  * }
  * ```
  *
- * @implements {ControlValueAccessor}
+ * @implements {FormValueControl}
  *
  * @author Konrad Stępień
  * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
  * @see [GitHub](https://github.com/kstepien3/ng-zen)
  */
-@Directive({})
-export abstract class ZenFormControl<Value> implements ControlValueAccessor {
-  /**
-   * The underlying value of the control.
-   * Subclasses must provide their own implementation using `model()`.
-   */
+@Directive({
+  host: {
+    '(blur)': 'touch.emit()',
+  },
+})
+export abstract class ZenFormControl<Value> implements FormValueControl<Value> {
+  /** The underlying value of the control. Subclasses must provide their own implementation using `model()`. */
   abstract readonly value: ModelSignal<Value>;
 
-  readonly disabled = model(false);
+  /** Validation errors for the field. Auto-bound by the Signal Forms directive. */
+  readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);
+  /** Whether the control is disabled. Auto-bound by the Signal Forms directive. */
+  readonly disabled = input(false);
+  /** Reasons why the field is disabled. Auto-bound by the Signal Forms directive. */
+  readonly disabledReasons = input<readonly WithOptionalFieldTree<DisabledReason>[]>([]);
+  /** Whether the field is read-only. Auto-bound by the Signal Forms directive. */
+  readonly readonly = input<boolean>(false);
+  /** Whether the field is hidden from view. Auto-bound by the Signal Forms directive. */
+  readonly hidden = input<boolean>(false);
+  /** Whether the field has validation errors. Auto-bound by the Signal Forms directive. */
+  readonly invalid = input<boolean>(false);
+  /** Whether async validation is in progress. Auto-bound by the Signal Forms directive. */
+  readonly pending = input<boolean>(false);
+  /** Whether the user has focused and then blurred the field. */
+  readonly touched = input<boolean>(false);
+  /** Whether the field value has been modified. Auto-bound by the Signal Forms directive. */
+  readonly dirty = input(false);
+  /** Field name in the form. Auto-bound by the Signal Forms directive. */
+  readonly name = input('');
+  /** Whether the field is required. Auto-bound by the Signal Forms directive from schema validators. */
   readonly required = input(false, { transform: booleanAttribute });
+  /** Emitted when the field is blurred. The {@link FormField} directive listens to this output to mark the field as touched. */
+  readonly touch = output<void>();
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  protected onChange: (value: Value) => void = () => {};
+  // @ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+  focus(_options?: FocusOptions): void {}
 
+  // @ignore
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  protected onTouched: () => void = () => {};
+  reset(): void {}
 
-  /**
-   * Should be called by the subclass when the control's value changes
-   * as a result of user interaction. This method updates the control's value
-   * and notifies Angular of the change.
-   */
+  /** Should be called by the subclass when the control's value changes as a result of user interaction. */
   onInput(value: Value): void {
     if (this.disabled()) return;
 
     this.value.set(value);
-    this.onChange(this.value());
-  }
-
-  /**
-   * Writes a new value to the element.
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  writeValue(value: Value): void {
-    this.value.set(value);
-  }
-
-  /**
-   * Registers a callback function that is called when the control's value changes in the UI.
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  registerOnChange(fn: (value: Value) => void): void {
-    this.onChange = fn;
-  }
-
-  /**
-   * Registers a callback function that is called by the forms API on component touch.
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  /**
-   * This function is called by the forms API when the control status changes to or from "DISABLED".
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled.set(isDisabled);
   }
 }

package/schematics/ui/files/icon/icon.ts

@@ -1,4 +1,4 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { booleanAttribute, Component, computed, inject, input } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 /** SVG icon data structure from HugeIcons library - an array of [tagName, attributes] tuples. */
@@ -43,7 +43,6 @@ export type IconSvgObject = readonly (readonly [string, Record<string, string |
     ></svg>
   `,
   styles: [':host { display: inline-flex; }'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenIcon {
   /** SVG object imported from HugeIcons library. */

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[]>();