@ng-zen/cli 22.4.1 → 22.5.0-next.1

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

@@ -0,0 +1,164 @@
+import { BellIcon, ChatIcon, RotateLeft02Icon } from '@hugeicons/core-free-icons';
+import { Args, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenAvatar } from '../avatar';
+import { ZenBadge } from '../badge';
+import { ZenButton } from '../button';
+import { ZenIcon } from '../icon';
+import { ZenPin } from './pin';
+import type { PinPosition } from './pin.types';
+import { ZenPinItem } from './pin-item';
+
+interface WithBadgeArgs extends Args {
+  position: PinPosition;
+  offsetX: number;
+  offsetY: number;
+  flushed: boolean;
+}
+
+type Story = StoryObj<ZenPin>;
+
+const html = String.raw;
+
+const meta: Meta = {
+  title: 'Ui/Pin',
+  component: ZenPin,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [ZenPin, ZenPinItem, ZenBadge, ZenButton, ZenIcon, ZenAvatar],
+    }),
+  ],
+};
+
+export default meta;
+
+export const WithBadge: StoryObj<WithBadgeArgs> = {
+  argTypes: {
+    offsetX: {
+      name: 'offsetX (px)',
+      description: 'Horizontal offset in pixels.',
+      control: { type: 'range', min: -50, max: 50, step: 1 },
+      table: {
+        category: 'story parameters',
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+    },
+    offsetY: {
+      name: 'offsetY (px)',
+      description: 'Vertical offset in pixels.',
+      control: { type: 'range', min: -50, max: 50, step: 1 },
+      table: {
+        category: 'story parameters',
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+    },
+    flushed: {
+      description: 'Whether the pin sits flush at the edge without overlapping the anchor.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'story parameters',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    position: {
+      name: 'zenPinPosition',
+      description: 'Position of the pin relative to the anchor element.',
+      control: 'select',
+      options: [
+        'top',
+        'bottom',
+        'center',
+        'left',
+        'right',
+        'top left',
+        'top right',
+        'top center',
+        'bottom left',
+        'bottom right',
+        'bottom center',
+        'center left',
+        'center right',
+      ] satisfies PinPosition[],
+      table: {
+        category: 'inputs',
+        type: { summary: 'PinPosition' },
+        defaultValue: { summary: 'top right' },
+      },
+    },
+  },
+  args: {
+    position: 'top right',
+    offsetX: 0,
+    offsetY: 0,
+    flushed: false,
+  },
+  render: args => {
+    return {
+      props: {
+        position: args.position,
+        flushed: args.flushed,
+        offsetValue: `${args.offsetY}px ${args.offsetX}px`,
+      },
+      template: html`
+        <div style="margin: 4rem;">
+          <button zen-button zenPin>
+            Notifications
+            <zen-badge
+              zenPinItem
+              color="danger"
+              variant="solid"
+              [zenPinPosition]="position"
+              [zenPinOffset]="offsetValue"
+              [zenPinFlush]="flushed"
+            >
+              3
+            </zen-badge>
+          </button>
+        </div>
+      `,
+    };
+  },
+};
+
+export const WithIcons: Story = {
+  render: () => ({
+    props: { BellIcon, ChatIcon, RotateLeft02Icon },
+    template: html`
+      <div style="margin: 4rem; display: flex; gap: 1rem">
+        <zen-avatar zenPin src="https://github.com/kstepien3.png">
+          <zen-icon zenPinItem [icon]="ChatIcon" [strokeWidth]="2" [size]="18" />
+        </zen-avatar>
+
+        <zen-avatar src="https://github.com/kstepien3.png" zenPin>
+          <zen-icon
+            zenPinItem
+            zenPinPosition="bottom right"
+            zenPinFlush
+            zenPinOffset="-5px"
+            [icon]="RotateLeft02Icon"
+            [strokeWidth]="2"
+            [size]="24"
+          />
+        </zen-avatar>
+      </div>
+    `,
+  }),
+};
+
+export const WithImage: Story = {
+  render: () => ({
+    template: html`
+      <div style="margin: 4rem; display: flex; justify-content: center;">
+        <div zenPin style="display: flex">
+          <zen-badge zenPinItem color="success" zenPinPosition="top right">Random photo</zen-badge>
+          <zen-badge zenPinItem color="info" zenPinPosition="bottom right">Multiple pins</zen-badge>
+          <img src="https://picsum.photos/536/354" alt="photo" style="border-radius: 0.5rem;" />
+        </div>
+      </div>
+    `,
+  }),
+};

package/schematics/ui/files/pin/pin.ts

@@ -0,0 +1,49 @@
+import { Directive, ElementRef, inject, Renderer2 } from '@angular/core';
+
+/**
+ * ZenPin is an anchor-positioned overlay directive. It sets up the host element
+ * as a CSS anchor. Use `zenPinItem` on child elements to pin them as overlays.
+ *
+ * @example
+ *
+ * ```html
+ * <!-- Pin a badge to a host element -->
+ * <button zen-button zenPin>
+ *   Notifications
+ *   <zen-badge zenPinItem zenPinPosition="top right" [zenPinOffset]="5px">3</zen-badge>
+ * </button>
+ *
+ * <!-- Multiple pins on the same host -->
+ * <button zen-button zenPin>
+ *   Notifications
+ *   <zen-badge zenPinItem zenPinPosition="top right" zenPinOverlap>3</zen-badge>
+ *   <zen-icon zenPinItem zenPinPosition="bottom right" [icon]="bellIcon" [size]="16" />
+ * </button>
+ * ```
+ *
+ * @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)
+ * @see [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
+ */
+@Directive({
+  selector: '[zenPin]',
+})
+export class ZenPin {
+  /** @ignore Counter used to generate unique anchor names. */
+  static pinId = 0;
+
+  /** @ignore The native host element used as the CSS anchor. */
+  readonly hostEl: HTMLElement;
+
+  /** @ignore Generated CSS anchor name referenced by ZenPinItem. */
+  readonly anchorName: string;
+
+  constructor() {
+    const el = inject(ElementRef);
+    const renderer = inject(Renderer2);
+    this.hostEl = el.nativeElement;
+    this.anchorName = `--zen-pin-${ZenPin.pinId++}`;
+    renderer.setStyle(this.hostEl, 'anchor-name', this.anchorName);
+  }
+}

package/schematics/ui/files/pin/pin.types.ts

@@ -0,0 +1,15 @@
+/** Vertical axis position relative to the host element. */
+export type PinVerticalPosition = 'top' | 'bottom' | 'center';
+
+/** Horizontal axis position relative to the host element. */
+export type PinHorizontalPosition = 'left' | 'right' | 'center';
+
+/**
+ * Position of the pinned overlay relative to its anchor.
+ * Accepts one or two values (e.g. `'top'`, `'left'`, `'top right'`, `'center left'`).
+ * Uses CSS `position-area` under the hood.
+ */
+export type PinPosition =
+  | `${PinVerticalPosition} ${PinHorizontalPosition}`
+  | PinVerticalPosition
+  | PinHorizontalPosition;

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

@@ -1,25 +1,28 @@
-import { Component, provideZonelessChangeDetection, TemplateRef, ViewChild } from '@angular/core';
+import { Component, provideZonelessChangeDetection, TemplateRef, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { ZenButton } from '../button';
 import { ZenPopover } from './popover';
 
 @Component({
   template: `
-    <button [zenPopover]="content" id="trigger-btn" zenPopoverPlacement="bottom">Trigger</button>
+    <button id="trigger-btn" type="button" zen-button zenPopoverPlacement="bottom" [zenPopover]="content">
+      Trigger
+    </button>
 
     <ng-template #content>Popover content</ng-template>
   `,
   standalone: true,
-  imports: [ZenPopover],
+  imports: [ZenPopover, ZenButton],
 })
 class TemplateBottomComponent {
-  @ViewChild('content', { static: true }) content!: TemplateRef<unknown>;
+  readonly content = viewChild.required<TemplateRef<unknown>>('content');
 }
 
 @Component({
   template: `
-    <button [zenPopover]="content" id="trigger-btn" zenPopoverPlacement="left">Trigger</button>
+    <button id="trigger-btn" type="button" zenPopoverPlacement="left" [zenPopover]="content">Trigger</button>
 
     <ng-template #content>Popover content</ng-template>
   `,
@@ -27,12 +30,12 @@ class TemplateBottomComponent {
   imports: [ZenPopover],
 })
 class TemplateLeftComponent {
-  @ViewChild('content', { static: true }) content!: TemplateRef<unknown>;
+  readonly content = viewChild.required<TemplateRef<unknown>>('content');
 }
 
 @Component({
   template: `
-    <button [zenPopover]="'String content'" id="trigger-btn">Trigger</button>
+    <button id="trigger-btn" type="button" [zenPopover]="'String content'">Trigger</button>
   `,
   standalone: true,
   imports: [ZenPopover],

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

@@ -69,7 +69,7 @@ export const WithTemplate: Story = {
   render: ({ placement, content }) => ({
     template: `
       <ng-template #popoverContent>
-        <i>${content}</i>
+        <i>${content as string}</i>
       </ng-template>
       <button zen-btn [zenPopover]="popoverContent" [zenPopoverPlacement]="'${placement}'">
         Template

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

@@ -95,17 +95,17 @@ export const WithSignalForm: Story = {
       <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" />
+          <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 [formField]="form.color" option="green" />
+          <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 [formField]="form.color" option="blue" />
+          <zen-radio option="blue" [formField]="form.color" />
           Blue
         </label>
       </div>

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

@@ -40,6 +40,8 @@ import { ZenRadioRegistry } from './radio.registry';
   selector: 'zen-radio',
   template: `
     <input
+      #inputElement
+      type="radio"
       [attr.aria-checked]="checked()"
       [attr.aria-disabled]="disabled()"
       [attr.aria-invalid]="invalid() || null"
@@ -48,8 +50,6 @@ import { ZenRadioRegistry } from './radio.registry';
       [name]="name()"
       [value]="option()"
       (change)="onRadioChange()"
-      #inputElement
-      type="radio"
     />
     @if (checked()) {
       <span class="radio-dot"></span>
@@ -78,7 +78,7 @@ export class ZenRadio extends ZenFormControl<string | null> {
   /**
    * Determines if this radio button is checked based on the group value.
    */
-  protected checked = computed<boolean>(() => this.value() === this.option());
+  protected readonly checked = computed<boolean>(() => this.value() === this.option());
   /**
    * Handles radio button selection using native change event.
    */

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

@@ -67,7 +67,7 @@ export const WithSignalForm: Story = {
   standalone: true,
   template: `
     <div style="display: flex; align-items: center; gap: 0.5rem;">
-      <zen-switch [formField]="form.notifications" id="notifications" />
+      <zen-switch id="notifications" [formField]="form.notifications" />
       <label for="notifications">
         {{ form.notifications().value() ? 'Notifications on' : 'Notifications off' }}
       </label>

package/schematics/ui/index.js

@@ -22,14 +22,12 @@ function resolveFormControlDependency(tree, logger, ui, workingDirectory) {
 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 projectName = project ?? workspace.extensions['defaultProject'];
         const projectObj = workspace.projects.get(projectName);
         if (!projectObj) {
             throw new Error(`Project "${projectName}" not found in workspace.`);
         }
-        if (options.path === undefined) {
-            options.path = ((0, workspace_1.buildDefaultPath)(projectObj) + '/' + DEFAULT_GENERATION_PATH);
-        }
+        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);

package/schematics/ui/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"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"]}

package/schematics/ui/index.ts

@@ -29,16 +29,14 @@ function resolveFormControlDependency(
 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 projectName = project ?? (workspace.extensions['defaultProject'] as string);
     const projectObj = workspace.projects.get(projectName);
 
     if (!projectObj) {
       throw new Error(`Project "${projectName}" not found in workspace.`);
     }
 
-    if (options.path === undefined) {
-      options.path = (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;
-    }
+    options.path ??= (buildDefaultPath(projectObj) + '/' + DEFAULT_GENERATION_PATH) as Path;
 
     const workingDirectory = normalize(join(options.currentDirectory, options.path));
     const ui = [...selected];

package/schematics/ui/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'badge'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'badge'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'pin'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}

package/schematics/ui/schema.json

@@ -47,6 +47,7 @@
           "divider",
           "icon",
           "input",
+          "pin",
           "popover",
           "radio",
           "skeleton",

package/schematics/ui/schema.ts

@@ -19,6 +19,7 @@ export type UiType =
   | 'form-control'
   | 'icon'
   | 'input'
+  | 'pin'
   | 'popover'
   | 'radio'
   | 'skeleton'

package/utils/apply-file-template.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"apply-file-template.util.js","sourceRoot":"","sources":["../../../../src/utils/apply-file-template.util.ts"],"names":[],"mappings":";;AAkBA,sDASC;AA3BD,+CAA0D;AAC1D,2DAA8G;AAG9G,qEAAiE;AAEjE,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAE,IAAY,EAAU,EAAE,CAAC;IACpE,IAAA,2BAAc,EAAC;QACb,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE;QACvC,GAAG,cAAO;KACX,CAAC;IACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;AACzE,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,IAAA,mBAAM,EAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9G,SAAgB,qBAAqB,CAAC,OAAiB,EAAE,MAA2B;IAClF,oCAAgB,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;IAClC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1B,MAAM,KAAK,GAAG,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,IAAc,CAAC,CAAC;QAEjE,MAAM,YAAY,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,WAAW,MAAM,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QAEjG,OAAO,IAAA,kBAAK,EAAC,CAAC,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAS,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { normalize, strings } from '@angular-devkit/core';\nimport { apply, applyTemplates, chain, filter, mergeWith, move, Rule, url } from '@angular-devkit/schematics';\n\nimport { GeneratorSchemaBase, UiType } from '../schematics/ui/schema';\nimport { selectedElements } from '../services/selected-elements';\n\nconst createTemplateRules = (folder: string, path: string): Rule[] => [\n  applyTemplates({\n    name: folder,\n    localeDate: new Date().toLocaleString(),\n    ...strings,\n  }),\n  move(normalize(`${path}/${folder}`)),\n];\n\nconst getTemplates = (rules: Rule[]) => apply(url(`./templates`), rules);\nconst includeStories = (include: boolean) => filter(filePath => include || !filePath.endsWith('.stories.ts'));\n\nexport function applyFileTemplateUtil(folders: UiType[], config: GeneratorSchemaBase): Rule[] {\n  selectedElements.push(...folders);\n  return folders.map(folder => {\n    const RULES = createTemplateRules(folder, config.path as string);\n\n    const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);\n\n    return chain([folderSource, getTemplates(RULES)].map(mergeWith));\n  });\n}\n"]}
+{"version":3,"file":"apply-file-template.util.js","sourceRoot":"","sources":["../../../../src/utils/apply-file-template.util.ts"],"names":[],"mappings":";;AAkBA,sDASC;AA3BD,+CAA0D;AAC1D,2DAAsH;AAGtH,qEAAiE;AAEjE,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAE,IAAY,EAAU,EAAE,CAAC;IACpE,IAAA,2BAAc,EAAC;QACb,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE;QACvC,GAAG,cAAO;KACX,CAAC;IACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;AACjF,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAQ,EAAE,CAAC,IAAA,mBAAM,EAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpH,SAAgB,qBAAqB,CAAC,OAAiB,EAAE,MAA2B;IAClF,oCAAgB,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;IAClC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1B,MAAM,KAAK,GAAG,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,IAAc,CAAC,CAAC;QAEjE,MAAM,YAAY,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,WAAW,MAAM,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QAEjG,OAAO,IAAA,kBAAK,EAAC,CAAC,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAS,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { normalize, strings } from '@angular-devkit/core';\nimport { apply, applyTemplates, chain, filter, mergeWith, move, Rule, Source, url } from '@angular-devkit/schematics';\n\nimport { GeneratorSchemaBase, UiType } from '../schematics/ui/schema';\nimport { selectedElements } from '../services/selected-elements';\n\nconst createTemplateRules = (folder: string, path: string): Rule[] => [\n  applyTemplates({\n    name: folder,\n    localeDate: new Date().toLocaleString(),\n    ...strings,\n  }),\n  move(normalize(`${path}/${folder}`)),\n];\n\nconst getTemplates = (rules: Rule[]): Source => apply(url(`./templates`), rules);\nconst includeStories = (include: boolean): Rule => filter(filePath => include || !filePath.endsWith('.stories.ts'));\n\nexport function applyFileTemplateUtil(folders: UiType[], config: GeneratorSchemaBase): Rule[] {\n  selectedElements.push(...folders);\n  return folders.map(folder => {\n    const RULES = createTemplateRules(folder, config.path as string);\n\n    const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);\n\n    return chain([folderSource, getTemplates(RULES)].map(mergeWith));\n  });\n}\n"]}

package/utils/apply-file-template.util.ts

@@ -1,5 +1,5 @@
 import { normalize, strings } from '@angular-devkit/core';
-import { apply, applyTemplates, chain, filter, mergeWith, move, Rule, url } from '@angular-devkit/schematics';
+import { apply, applyTemplates, chain, filter, mergeWith, move, Rule, Source, url } from '@angular-devkit/schematics';
 
 import { GeneratorSchemaBase, UiType } from '../schematics/ui/schema';
 import { selectedElements } from '../services/selected-elements';
@@ -13,8 +13,8 @@ const createTemplateRules = (folder: string, path: string): Rule[] => [
   move(normalize(`${path}/${folder}`)),
 ];
 
-const getTemplates = (rules: Rule[]) => apply(url(`./templates`), rules);
-const includeStories = (include: boolean) => filter(filePath => include || !filePath.endsWith('.stories.ts'));
+const getTemplates = (rules: Rule[]): Source => apply(url(`./templates`), rules);
+const includeStories = (include: boolean): Rule => filter(filePath => include || !filePath.endsWith('.stories.ts'));
 
 export function applyFileTemplateUtil(folders: UiType[], config: GeneratorSchemaBase): Rule[] {
   selectedElements.push(...folders);