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

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 })]);
     };
 }

package/schematics/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/index.ts"],"names":[],"mappings":";;AASA,kCAkBC;AA3BD,+CAA6D;AAC7D,2DAA+D;AAC/D,qEAAuF;AAEvF,uCAAoD;AAGpD,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAC,aAAa;AAEnD,SAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,OAAO,EAAa;IAChE,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,SAAS,GAAG,MAAM,IAAA,wBAAY,EAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,OAAO,IAAK,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAY,CAAC;QAClF,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,YAAY,WAAW,2BAA2B,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,GAAG,CAAC,IAAA,4BAAgB,EAAC,UAAU,CAAC,GAAG,GAAG,GAAG,uBAAuB,CAAS,CAAC;QACxF,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAA,gBAAS,EAAC,IAAA,WAAI,EAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAEjF,OAAO,IAAA,kBAAK,EAAC,CAAC,GAAG,IAAA,6BAAqB,EAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IACvF,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { join, normalize, Path } from '@angular-devkit/core';\nimport { chain, Rule, Tree } from '@angular-devkit/schematics';\nimport { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';\n\nimport { applyFileTemplateUtil } from '../../utils';\nimport { Schema as UiOptions } from './schema';\n\nconst DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui\n\nexport function uiGenerator({ ui, project, ...options }: UiOptions): Rule {\n  return async (tree: Tree) => {\n    const workspace = await getWorkspace(tree);\n    const projectName = project || (workspace.extensions['defaultProject'] as string);\n    const projectObj = workspace.projects.get(projectName);\n\n    if (!projectObj) {\n      throw new Error(`Project \"${projectName}\" not found in workspace.`);\n    }\n\n    if (options.path === undefined) {\n      options.path = (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;\n    }\n\n    const workingDirectory = normalize(join(options.currentDirectory, options.path));\n\n    return chain([...applyFileTemplateUtil(ui, { ...options, path: workingDirectory })]);\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/index.ts"],"names":[],"mappings":";;AA4BA,kCAqBC;AAjDD,+CAA6D;AAC7D,2DAAiF;AACjF,qEAAuF;AAEvF,uCAAoD;AAGpD,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAC,aAAa;AAEnD,MAAM,iBAAiB,GAAwB,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAEjG,SAAS,4BAA4B,CACnC,IAAU,EACV,MAAkC,EAClC,EAAY,EACZ,gBAAsB;IAEtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO;IAEpD,MAAM,MAAM,GAAG,IAAA,gBAAS,EAAC,GAAG,gBAAgB,+BAA+B,CAAC,CAAC;IAC7E,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;QACxB,MAAM,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;IACzD,CAAC;SAAM,CAAC;QACN,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACxB,MAAM,CAAC,IAAI,CAAC,6DAA6D,CAAC,CAAC;IAC7E,CAAC;AACH,CAAC;AAED,SAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAa;IAC1E,OAAO,KAAK,EAAE,IAAU,EAAE,OAAyB,EAAE,EAAE;QACrD,MAAM,SAAS,GAAG,MAAM,IAAA,wBAAY,EAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,OAAO,IAAK,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAY,CAAC;QAClF,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,YAAY,WAAW,2BAA2B,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,GAAG,CAAC,IAAA,4BAAgB,EAAC,UAAU,CAAC,GAAG,GAAG,GAAG,uBAAuB,CAAS,CAAC;QACxF,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAA,gBAAS,EAAC,IAAA,WAAI,EAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACjF,MAAM,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;QAEzB,4BAA4B,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,EAAE,gBAAgB,CAAC,CAAC;QAEzE,OAAO,IAAA,kBAAK,EAAC,CAAC,GAAG,IAAA,6BAAqB,EAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IACvF,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { join, normalize, Path } from '@angular-devkit/core';\nimport { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\nimport { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';\n\nimport { applyFileTemplateUtil } from '../../utils';\nimport { Schema as UiOptions, UiType } from './schema';\n\nconst DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui\n\nconst FORM_CONTROL_DEPS: ReadonlySet<UiType> = new Set(['input', 'checkbox', 'switch', 'radio']);\n\nfunction resolveFormControlDependency(\n  tree: Tree,\n  logger: SchematicContext['logger'],\n  ui: UiType[],\n  workingDirectory: Path\n): void {\n  if (!ui.some(u => FORM_CONTROL_DEPS.has(u))) return;\n\n  const fcPath = normalize(`${workingDirectory}/form-control/form-control.ts`);\n  if (tree.exists(fcPath)) {\n    logger.info('ℹ form-control skipped — already exists');\n  } else {\n    ui.push('form-control');\n    logger.info('✔ form-control included (auto-included for form components)');\n  }\n}\n\nexport function uiGenerator({ ui: selected, project, ...options }: UiOptions): Rule {\n  return async (tree: Tree, context: SchematicContext) => {\n    const workspace = await getWorkspace(tree);\n    const projectName = project || (workspace.extensions['defaultProject'] as string);\n    const projectObj = workspace.projects.get(projectName);\n\n    if (!projectObj) {\n      throw new Error(`Project \"${projectName}\" not found in workspace.`);\n    }\n\n    if (options.path === undefined) {\n      options.path = (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;\n    }\n\n    const workingDirectory = normalize(join(options.currentDirectory, options.path));\n    const ui = [...selected];\n\n    resolveFormControlDependency(tree, context.logger, ui, workingDirectory);\n\n    return chain([...applyFileTemplateUtil(ui, { ...options, path: workingDirectory })]);\n  };\n}\n"]}

package/schematics/ui/index.ts

@@ -1,14 +1,33 @@
 import { join, normalize, Path } from '@angular-devkit/core';
-import { chain, Rule, Tree } from '@angular-devkit/schematics';
+import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';
 
 import { applyFileTemplateUtil } from '../../utils';
-import { Schema as UiOptions } from './schema';
+import { Schema as UiOptions, UiType } from './schema';
 
 const DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui
 
-export function uiGenerator({ ui, project, ...options }: UiOptions): Rule {
-  return async (tree: Tree) => {
+const FORM_CONTROL_DEPS: ReadonlySet<UiType> = new Set(['input', 'checkbox', 'switch', 'radio']);
+
+function resolveFormControlDependency(
+  tree: Tree,
+  logger: SchematicContext['logger'],
+  ui: UiType[],
+  workingDirectory: Path
+): void {
+  if (!ui.some(u => FORM_CONTROL_DEPS.has(u))) return;
+
+  const fcPath = 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)');
+  }
+}
+
+export function uiGenerator({ ui: selected, project, ...options }: UiOptions): Rule {
+  return async (tree: Tree, context: SchematicContext) => {
     const workspace = await getWorkspace(tree);
     const projectName = project || (workspace.extensions['defaultProject'] as string);
     const projectObj = workspace.projects.get(projectName);
@@ -22,6 +41,9 @@ export function uiGenerator({ ui, project, ...options }: UiOptions): Rule {
     }
 
     const workingDirectory = normalize(join(options.currentDirectory, options.path));
+    const ui = [...selected];
+
+    resolveFormControlDependency(tree, context.logger, ui, workingDirectory);
 
     return chain([...applyFileTemplateUtil(ui, { ...options, path: workingDirectory })]);
   };

package/schematics/ui/schema.json

@@ -43,7 +43,6 @@
           "checkbox",
           "dialog",
           "divider",
-          "form-control",
           "icon",
           "input",
           "popover",