@ng-zen/cli 22.9.0-next.1 → 22.10.0-next.1

package/schematics/ui/files/radio/radio.scss

@@ -12,60 +12,64 @@ $disabled-opacity: var(--zen-disabled-opacity, 0.6);
   --zen-radio-border: 1px solid hsl(0deg 0% 80%);
 }
 
-input {
-  position: absolute;
-  cursor: pointer;
-  opacity: 0;
-  height: 100%;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  top: 0;
-  left: 0;
-}
-
 /* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  display: inline-grid;
+  grid-template-columns: var(--zen-radio-size) 1fr;
+  gap: 0.25rem 0.5rem;
+  align-items: center;
+
+  &:has(input[type='radio']:disabled) {
+    opacity: $disabled-opacity;
+
+    &,
+    input,
+    label {
+      cursor: not-allowed;
+    }
+  }
+}
+
+input[type='radio'] {
+  appearance: none;
+  grid-column: 1;
+  grid-row: 1;
   border: var(--zen-radio-border);
   border-radius: var(--zen-radio-border-radius);
   height: var(--zen-radio-size);
   width: var(--zen-radio-size);
   background-color: white;
   cursor: pointer;
-  position: relative;
+  margin: 0;
+  padding: 0;
   transition:
     background-color ease,
     border-color ease;
   transition-duration: $transition-duration;
-  user-select: none;
-  justify-content: center;
-  display: grid;
-  place-items: center;
 
-  &:has(input:checked) {
+  &:checked {
     border-color: var(--zen-radio-appearance);
   }
 
-  &:has(input[type='radio']:disabled) {
-    opacity: $disabled-opacity;
-
-    &,
-    input {
-      cursor: not-allowed;
-    }
+  &:disabled {
+    cursor: not-allowed;
   }
 
-  &:has(input:focus-visible) {
+  &:focus-visible {
     outline: $outline;
     box-shadow: $focus-shadow;
   }
 
-  &:has(input:user-invalid) {
+  &:user-invalid {
     border-color: $error;
   }
 }
 
 .radio-dot {
+  grid-column: 1;
+  grid-row: 1;
+  place-self: center center;
+  pointer-events: none;
   width: calc(var(--zen-radio-size) * 0.4);
   height: calc(var(--zen-radio-size) * 0.4);
   background-color: var(--zen-radio-appearance);
@@ -84,3 +88,12 @@ input {
     opacity: 1;
   }
 }
+
+zen-label {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+zen-hint {
+  grid-column: 1 / -1;
+}

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

@@ -45,6 +45,46 @@ describe('ZenRadio', () => {
     expect(inputElement.checked).toBe(false);
   });
 
+  it('should render label linked to radio input id and handle required state', () => {
+    fixture.componentRef.setInput('label', 'Option Label');
+    fixture.detectChanges();
+
+    const labelEl = fixture.debugElement.query(By.css('label')).nativeElement as HTMLLabelElement;
+    const inputEl = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+
+    expect(labelEl).toBeTruthy();
+    expect(labelEl.textContent?.trim()).toBe('Option Label');
+    expect(labelEl.getAttribute('for')).toBe(inputEl.id);
+
+    fixture.componentRef.setInput('required', true);
+    fixture.detectChanges();
+
+    const requiredSpan = fixture.debugElement.query(By.css('zen-label .required'))?.nativeElement;
+    expect(requiredSpan).toBeTruthy();
+    expect(requiredSpan.textContent).toBe('*');
+  });
+
+  it('should render hint, warn, and errors on radio', () => {
+    fixture.componentRef.setInput('hint', 'Choose one option');
+    fixture.detectChanges();
+    let hintEl = fixture.debugElement.query(By.css('zen-hint')).nativeElement;
+    expect(hintEl.getAttribute('data-severity')).toBe('neutral');
+    expect(hintEl.textContent?.trim()).toBe('Choose one option');
+
+    fixture.componentRef.setInput('warn', 'Selection cannot be changed');
+    fixture.detectChanges();
+    hintEl = fixture.debugElement.query(By.css('zen-hint')).nativeElement;
+    expect(hintEl.getAttribute('data-severity')).toBe('warning');
+
+    fixture.componentRef.setInput('invalid', true);
+    fixture.componentRef.setInput('touched', true);
+    fixture.componentRef.setInput('errors', [{ message: 'Please select an option' }]);
+    fixture.detectChanges();
+    hintEl = fixture.debugElement.query(By.css('zen-hint')).nativeElement;
+    expect(hintEl.getAttribute('data-severity')).toBe('error');
+    expect(hintEl.textContent?.trim()).toBe('Please select an option');
+  });
+
   it('should show radio dot when checked', () => {
     component.value.set('test-value');
     fixture.detectChanges();

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

@@ -56,13 +56,12 @@ type Story = StoryObj<Options>;
 export const Default: Story = {};
 
 export const WithLabel: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; align-items: center; gap: 0.25rem">
-        <zen-radio name="label-example" option="option1" />
-        <label for="label-example"> With label </label>
-      </div>
-  `,
+  args: {
+    label: 'Option 1',
+  },
+  render: args => ({
+    props: args,
+    template: '<zen-radio name="label-example" option="option1" [label]="label" />',
   }),
 };
 
@@ -75,9 +74,9 @@ export const WithSignalForm: Story = {
   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" />`,
+        code: `<zen-radio [formField]="form.color" option="red" label="Red" />
+<zen-radio [formField]="form.color" option="green" label="Green" />
+<zen-radio [formField]="form.color" option="blue" label="Blue" />`,
       },
     },
   },
@@ -93,21 +92,9 @@ export const WithSignalForm: Story = {
         {{ 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 option="red" [formField]="form.color" />
-          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 option="green" [formField]="form.color" />
-          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 option="blue" [formField]="form.color" />
-          Blue
-        </label>
+        <zen-radio label="Red" option="red" [formField]="form.color" />
+        <zen-radio label="Green" option="green" [formField]="form.color" />
+        <zen-radio label="Blue" option="blue" [formField]="form.color" />
       </div>
     </div>
   `,

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

@@ -1,6 +1,9 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { afterNextRender, Component, computed, DestroyRef, inject, input, model } from '@angular/core';
 
 import { ZenFormControl } from '../form-control';
+import { ZenHint } from '../hint';
+import { ZenLabel } from '../label';
 import { ZenRadioRegistry } from './radio.registry';
 
 /**
@@ -13,8 +16,8 @@ import { ZenRadioRegistry } from './radio.registry';
  * 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" />
+ * <zen-radio [formField]="form.color" name="color" option="red" label="Red" />
+ * <zen-radio [formField]="form.color" name="color" option="green" label="Green" />
  * ```
  *
  * ### CSS Custom Properties
@@ -38,24 +41,9 @@ import { ZenRadioRegistry } from './radio.registry';
  */
 @Component({
   selector: 'zen-radio',
-  template: `
-    <input
-      #inputElement
-      type="radio"
-      [attr.aria-checked]="checked()"
-      [attr.aria-disabled]="disabled()"
-      [attr.aria-invalid]="invalid() || null"
-      [checked]="checked()"
-      [disabled]="disabled()"
-      [name]="name()"
-      [value]="option()"
-      (change)="onRadioChange()"
-    />
-    @if (checked()) {
-      <span class="radio-dot"></span>
-    }
-  `,
-  styleUrls: ['./radio.scss'],
+  imports: [NgTemplateOutlet, ZenHint, ZenLabel],
+  templateUrl: './radio.html',
+  styleUrl: './radio.scss',
 })
 export class ZenRadio extends ZenFormControl<string | null> {
   /**

package/schematics/ui/files/switch/switch.html

@@ -0,0 +1,31 @@
+<button
+  role="switch"
+  type="button"
+  [attr.aria-checked]="value()"
+  [attr.data-checked]="value()"
+  [attr.data-disabled]="disabled()"
+  [disabled]="disabled()"
+  [id]="id()"
+  (click)="onInput(!value())"
+  (keydown)="onKeyDown($event)"
+>
+  <span class="thumb"></span>
+</button>
+@if (label()) {
+  <zen-label [disabled]="disabled()" [for]="id()" [required]="required()">{{ label() }}</zen-label>
+}
+@if (shouldShowError()) {
+  @for (error of errors(); track $index) {
+    <zen-hint severity="error">
+      @if (errorTemplate()) {
+        <ng-container *ngTemplateOutlet="errorTemplate()!; context: { $implicit: error }" />
+      } @else {
+        {{ error.message }}
+      }
+    </zen-hint>
+  }
+} @else if (warn()) {
+  <zen-hint severity="warning">{{ warn() }}</zen-hint>
+} @else if (hint()) {
+  <zen-hint>{{ hint() }}</zen-hint>
+}

package/schematics/ui/files/switch/switch.scss

@@ -16,17 +16,39 @@ $disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 /* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  display: inline-grid;
+  grid-template-columns: var(--zen-switch-width) 1fr;
+  gap: 0.25rem 0.5rem;
+  align-items: center;
+
+  &:has(button:disabled) {
+    opacity: $disabled-opacity;
+
+    &,
+    button,
+    label {
+      cursor: not-allowed;
+    }
+  }
+}
+
+button[role='switch'] {
   $thumb-x-center-position: calc(var(--zen-switch-height) / 2 - var(--zen-switch-thumb-size) / 2);
 
+  grid-column: 1;
+  grid-row: 1;
   background: var(--zen-switch-background);
   height: var(--zen-switch-height);
   width: var(--zen-switch-width);
   cursor: pointer;
+  border: none;
   border-radius: 9999px;
   position: relative;
   display: flex;
   place-items: center;
   user-select: none;
+  padding: 0;
+  margin: 0;
 
   // Animation
   transition-property: background-color, border-color;
@@ -72,12 +94,22 @@ $disabled-opacity: var(--zen-disabled-opacity, 0.6);
     }
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled='true'],
+  &:disabled {
     cursor: not-allowed;
     opacity: $disabled-opacity;
   }
 
-  &:active:not([data-disabled='true']) .thumb {
+  &:active:not(:disabled) .thumb {
     width: calc(var(--zen-switch-thumb-size) + 2px);
   }
 }
+
+zen-label {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+zen-hint {
+  grid-column: 1 / -1;
+}

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

@@ -1,13 +1,39 @@
-import { provideZonelessChangeDetection } from '@angular/core';
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import type { ValidationError } from '@angular/forms/signals';
+import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenSwitch } from './switch';
 
+@Component({
+  imports: [ZenSwitch],
+  template: `
+    <zen-switch
+      [errors]="errors()"
+      [hint]="hint()"
+      [invalid]="invalid()"
+      [label]="label()"
+      [required]="required()"
+      [touched]="touched()"
+      [warn]="warn()"
+    />
+  `,
+})
+class TestSwitchHostComponent {
+  readonly label = signal('');
+  readonly hint = signal('');
+  readonly warn = signal('');
+  readonly invalid = signal(false);
+  readonly touched = signal(false);
+  readonly required = signal(false);
+  readonly errors = signal<ValidationError.WithOptionalFieldTree[]>([]);
+}
+
 describe('ZenSwitch', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenSwitch],
+      imports: [ZenSwitch, TestSwitchHostComponent],
       providers: [provideZonelessChangeDetection()],
     }).compileComponents();
   });
@@ -17,4 +43,78 @@ describe('ZenSwitch', () => {
     const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
+
+  it('should render label linked to switch button id and handle required state', () => {
+    const fixture = TestBed.createComponent(TestSwitchHostComponent);
+    fixture.componentInstance.label.set('Enable feature');
+    fixture.detectChanges();
+
+    const labelEl = fixture.nativeElement.querySelector('label') as HTMLLabelElement;
+    const buttonEl = fixture.nativeElement.querySelector('button[role="switch"]') as HTMLButtonElement;
+
+    expect(labelEl).toBeTruthy();
+    expect(labelEl.textContent?.trim()).toBe('Enable feature');
+    expect(labelEl.getAttribute('for')).toBe(buttonEl.id);
+
+    fixture.componentInstance.required.set(true);
+    fixture.detectChanges();
+
+    const requiredSpan = fixture.nativeElement.querySelector('zen-label .required');
+    expect(requiredSpan).toBeTruthy();
+    expect(requiredSpan.textContent).toBe('*');
+  });
+
+  it('should toggle value on click', () => {
+    const fixture = TestBed.createComponent(ZenSwitch);
+    fixture.detectChanges();
+
+    const buttonEl = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+    expect(fixture.componentInstance.value()).toBe(false);
+
+    buttonEl.click();
+    expect(fixture.componentInstance.value()).toBe(true);
+
+    buttonEl.click();
+    expect(fixture.componentInstance.value()).toBe(false);
+  });
+
+  it('should handle keyboard interaction', () => {
+    const fixture = TestBed.createComponent(ZenSwitch);
+    fixture.detectChanges();
+
+    const component = fixture.componentInstance;
+    component.onKeyDown(new KeyboardEvent('keydown', { code: 'Space' }));
+    expect(component.value()).toBe(true);
+
+    component.onKeyDown(new KeyboardEvent('keydown', { code: 'ArrowLeft' }));
+    expect(component.value()).toBe(false);
+
+    component.onKeyDown(new KeyboardEvent('keydown', { code: 'ArrowRight' }));
+    expect(component.value()).toBe(true);
+
+    component.onKeyDown(new KeyboardEvent('keydown', { code: 'Enter' }));
+    expect(component.value()).toBe(false);
+  });
+
+  it('should render hint, warn, and errors', () => {
+    const fixture = TestBed.createComponent(TestSwitchHostComponent);
+    fixture.componentInstance.hint.set('Informational hint');
+    fixture.detectChanges();
+
+    let hintEl = fixture.debugElement.query(By.css('zen-hint')).nativeElement;
+    expect(hintEl.getAttribute('data-severity')).toBe('neutral');
+
+    fixture.componentInstance.warn.set('Warning text');
+    fixture.detectChanges();
+    hintEl = fixture.debugElement.query(By.css('zen-hint')).nativeElement;
+    expect(hintEl.getAttribute('data-severity')).toBe('warning');
+
+    fixture.componentInstance.invalid.set(true);
+    fixture.componentInstance.touched.set(true);
+    fixture.componentInstance.errors.set([{ kind: 'required', message: 'Switch must be enabled' }]);
+    fixture.detectChanges();
+    hintEl = fixture.debugElement.query(By.css('zen-hint')).nativeElement;
+    expect(hintEl.getAttribute('data-severity')).toBe('error');
+    expect(hintEl.textContent?.trim()).toBe('Switch must be enabled');
+  });
 });

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

@@ -42,6 +42,16 @@ type Story = StoryObj<Options>;
 
 export const Default: Story = {};
 
+export const WithLabel: Story = {
+  args: {
+    label: 'Enable email notifications',
+  },
+  render: args => ({
+    props: args,
+    template: '<zen-switch [label]="label" />',
+  }),
+};
+
 export const WithSignalForm: Story = {
   render: () => ({
     moduleMetadata: { imports: [NgComponentOutlet] },
@@ -51,13 +61,7 @@ export const WithSignalForm: Story = {
   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>`,
+        code: `<zen-switch label="Notifications" [formField]="form.notifications" />`,
       },
     },
   },
@@ -66,12 +70,7 @@ export const WithSignalForm: Story = {
 @Component({
   standalone: true,
   template: `
-    <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>
+    <zen-switch label="Notifications" [formField]="form.notifications" />
   `,
   imports: [FormField, ZenSwitch],
 })

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

@@ -1,6 +1,9 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, model } from '@angular/core';
 
 import { ZenFormControl } from '../form-control';
+import { ZenHint } from '../hint';
+import { ZenLabel } from '../label';
 
 /**
  * ZenSwitch is a toggle switch component for boolean values backed by
@@ -9,7 +12,7 @@ import { ZenFormControl } from '../form-control';
  * Connect it to a Signal Forms field with `[formField]`:
  *
  * ```html
- * <zen-switch [formField]="myForm.notifications" />
+ * <zen-switch [formField]="myForm.notifications" label="Notifications" />
  * ```
  *
  * Supports keyboard interaction: `Enter`, `Space`, `ArrowRight`, and
@@ -30,28 +33,15 @@ import { ZenFormControl } from '../form-control';
  *
  * @extends {ZenFormControl<boolean>}
  *
- * @author Konrad Stepień
+ * @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)
  */
 @Component({
   selector: 'zen-switch',
-  template: `
-    <span class="thumb">
-      <!-- @if (value()) { ✓ } -->
-      <!-- @if (!value()) { ─ } -->
-    </span>
-  `,
+  imports: [NgTemplateOutlet, ZenHint, ZenLabel],
+  templateUrl: './switch.html',
   styleUrl: './switch.scss',
-
-  host: {
-    tabindex: '0',
-    role: 'switch',
-    '[attr.data-disabled]': 'disabled()',
-    '[attr.data-checked]': 'value()',
-    '(click)': 'onInput(!this.value())',
-    '(keydown)': 'onKeyDown($event)',
-  },
 })
 export class ZenSwitch extends ZenFormControl<boolean> {
   /** Holds the current switch value. */

package/schematics/ui/index.js

@@ -7,16 +7,25 @@ const workspace_1 = require("@schematics/angular/utility/workspace");
 const utils_1 = require("../../utils");
 const DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui
 const FORM_CONTROL_DEPS = new Set(['input', 'checkbox', 'switch', 'radio']);
+const FORM_HELPER_COMPONENTS = [
+    { name: 'form-control', file: 'form-control/form-control.ts' },
+    { name: 'hint', file: 'hint/hint.ts' },
+    { name: 'label', file: 'label/label.ts' },
+];
 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)');
+    for (const { name, file } of FORM_HELPER_COMPONENTS) {
+        if (ui.includes(name))
+            continue;
+        const targetPath = (0, core_1.normalize)(`${workingDirectory}/${file}`);
+        if (tree.exists(targetPath)) {
+            logger.info(`ℹ ${name} skipped — already exists`);
+        }
+        else {
+            ui.push(name);
+            logger.info(`✔ ${name} included (auto-included for form components)`);
+        }
     }
 }
 function uiGenerator({ ui: selected, project, ...options }) {
@@ -31,7 +40,8 @@ function uiGenerator({ ui: selected, project, ...options }) {
         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 })]);
+        const deduplicatedUi = Array.from(new Set(ui));
+        return (0, schematics_1.chain)([...(0, utils_1.applyFileTemplateUtil)(deduplicatedUi, { ...options, path: workingDirectory })]);
     };
 }
 //# sourceMappingURL=index.js.map

package/schematics/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/index.ts"],"names":[],"mappings":";;AA4BA,kCAmBC;AA/CD,+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,OAAO,CAAC,IAAI,KAAK,CAAC,IAAA,4BAAgB,EAAC,UAAU,CAAC,GAAG,GAAG,GAAG,uBAAuB,CAAS,CAAC;QAExF,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    options.path ??= (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;\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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/index.ts"],"names":[],"mappings":";;AAsCA,kCAqBC;AA3DD,+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,MAAM,sBAAsB,GAA8C;IACxE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,8BAA8B,EAAE;IAC9D,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE;IACtC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE;CAC1C,CAAC;AAEF,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,KAAK,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,sBAAsB,EAAE,CAAC;QACpD,IAAI,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,SAAS;QAEhC,MAAM,UAAU,GAAG,IAAA,gBAAS,EAAC,GAAG,gBAAgB,IAAI,IAAI,EAAE,CAAC,CAAC;QAC5D,IAAI,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,2BAA2B,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACd,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,+CAA+C,CAAC,CAAC;QACxE,CAAC;IACH,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,OAAO,CAAC,IAAI,KAAK,CAAC,IAAA,4BAAgB,EAAC,UAAU,CAAC,GAAG,GAAG,GAAG,uBAAuB,CAAS,CAAC;QAExF,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,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAE/C,OAAO,IAAA,kBAAK,EAAC,CAAC,GAAG,IAAA,6BAAqB,EAAC,cAAc,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IACnG,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\nconst FORM_HELPER_COMPONENTS: readonly { name: UiType; file: string }[] = [\n  { name: 'form-control', file: 'form-control/form-control.ts' },\n  { name: 'hint', file: 'hint/hint.ts' },\n  { name: 'label', file: 'label/label.ts' },\n];\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  for (const { name, file } of FORM_HELPER_COMPONENTS) {\n    if (ui.includes(name)) continue;\n\n    const targetPath = normalize(`${workingDirectory}/${file}`);\n    if (tree.exists(targetPath)) {\n      logger.info(`ℹ ${name} skipped — already exists`);\n    } else {\n      ui.push(name);\n      logger.info(`✔ ${name} included (auto-included for form components)`);\n    }\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    options.path ??= (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;\n\n    const workingDirectory = normalize(join(options.currentDirectory, options.path));\n    const ui = [...selected];\n\n    resolveFormControlDependency(tree, context.logger, ui, workingDirectory);\n\n    const deduplicatedUi = Array.from(new Set(ui));\n\n    return chain([...applyFileTemplateUtil(deduplicatedUi, { ...options, path: workingDirectory })]);\n  };\n}\n"]}