@ng-zen/cli 21.0.0 → 21.1.0

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

@@ -0,0 +1,171 @@
+import { Component, provideZonelessChangeDetection, TemplateRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ZenPopover } from './popover';
+
+@Component({
+  template: `
+    <button [zenPopover]="content" id="trigger-btn" zenPopoverPlacement="bottom">Trigger</button>
+
+    <ng-template #content>Popover content</ng-template>
+  `,
+  standalone: true,
+  imports: [ZenPopover],
+})
+class TemplateBottomComponent {
+  @ViewChild('content', { static: true }) content!: TemplateRef<unknown>;
+}
+
+@Component({
+  template: `
+    <button [zenPopover]="content" id="trigger-btn" zenPopoverPlacement="left">Trigger</button>
+
+    <ng-template #content>Popover content</ng-template>
+  `,
+  standalone: true,
+  imports: [ZenPopover],
+})
+class TemplateLeftComponent {
+  @ViewChild('content', { static: true }) content!: TemplateRef<unknown>;
+}
+
+@Component({
+  template: `
+    <button [zenPopover]="'String content'" id="trigger-btn">Trigger</button>
+  `,
+  standalone: true,
+  imports: [ZenPopover],
+})
+class StringContentComponent {}
+
+function getPopoverHostEl(fixture: ComponentFixture<unknown>): HTMLElement | null {
+  return fixture.nativeElement.querySelector('[popover="auto"]') as HTMLElement | null;
+}
+
+describe('ZenPopover', () => {
+  beforeEach(() => {
+    HTMLElement.prototype.showPopover = vi.fn();
+  });
+
+  describe('TemplateRef content', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [TemplateBottomComponent],
+        providers: [provideZonelessChangeDetection()],
+      }).compileComponents();
+    });
+
+    it('does not create another host on second click while open', () => {
+      const fixture = TestBed.createComponent(TemplateBottomComponent);
+      fixture.detectChanges();
+
+      const trigger = fixture.nativeElement.querySelector('#trigger-btn') as HTMLButtonElement;
+
+      trigger.click();
+      fixture.detectChanges();
+
+      const host1 = getPopoverHostEl(fixture)!;
+      expect(host1).toBeTruthy();
+
+      trigger.click();
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelectorAll('[popover="auto"]').length).toBe(1);
+      expect(getPopoverHostEl(fixture)).toBe(host1);
+    });
+
+    it('creates host on click and calls showPopover()', () => {
+      const fixture = TestBed.createComponent(TemplateBottomComponent);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('#trigger-btn').click();
+      fixture.detectChanges();
+
+      const host = getPopoverHostEl(fixture)!;
+      expect(host.showPopover).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders TemplateRef content into host', () => {
+      const fixture = TestBed.createComponent(TemplateBottomComponent);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('#trigger-btn').click();
+      fixture.detectChanges();
+
+      expect(getPopoverHostEl(fixture)!.textContent).toContain('Popover content');
+    });
+
+    it('passes placement to host as data-placement (bottom)', () => {
+      const fixture = TestBed.createComponent(TemplateBottomComponent);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('#trigger-btn').click();
+      fixture.detectChanges();
+
+      expect(getPopoverHostEl(fixture)!.getAttribute('data-placement')).toBe('bottom');
+    });
+
+    it('sets anchor styles on trigger and host', () => {
+      const fixture = TestBed.createComponent(TemplateBottomComponent);
+      fixture.detectChanges();
+
+      const trigger = fixture.nativeElement.querySelector('#trigger-btn') as HTMLButtonElement;
+      trigger.click();
+      fixture.detectChanges();
+
+      const host = getPopoverHostEl(fixture)!;
+
+      expect(trigger.style.getPropertyValue('anchor-name')).toMatch(/^--anchor-/);
+      expect(host.style.getPropertyValue('position-anchor')).toBe(trigger.style.getPropertyValue('anchor-name'));
+    });
+
+    it('destroys host when beforetoggle closes', () => {
+      const fixture = TestBed.createComponent(TemplateBottomComponent);
+      fixture.detectChanges();
+
+      fixture.nativeElement.querySelector('#trigger-btn').click();
+      fixture.detectChanges();
+
+      const host = getPopoverHostEl(fixture)!;
+
+      const ev = new Event('beforetoggle');
+      Object.defineProperty(ev, 'newState', { value: 'closed' });
+
+      host.dispatchEvent(ev);
+      fixture.detectChanges();
+
+      expect(getPopoverHostEl(fixture)).toBeNull();
+    });
+  });
+
+  it('reflects placement as data-placement (left)', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TemplateLeftComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TemplateLeftComponent);
+    fixture.detectChanges();
+
+    fixture.nativeElement.querySelector('#trigger-btn').click();
+    fixture.detectChanges();
+
+    expect(getPopoverHostEl(fixture)!.getAttribute('data-placement')).toBe('left');
+  });
+
+  it('renders string content as text node in host', async () => {
+    await TestBed.configureTestingModule({
+      imports: [StringContentComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StringContentComponent);
+    fixture.detectChanges();
+
+    fixture.nativeElement.querySelector('#trigger-btn').click();
+    fixture.detectChanges();
+
+    expect(getPopoverHostEl(fixture)!.textContent).toContain('String content');
+  });
+});

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

@@ -0,0 +1,66 @@
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenButton } from '../button';
+import { ZenPopover } from './popover';
+import type { PopoverPlacement } from './popover-positions.type';
+
+type Story = StoryObj<ZenPopover>;
+
+const meta = {
+  title: 'Ui/Popover',
+  component: ZenPopover,
+  decorators: [
+    moduleMetadata({
+      imports: [ZenButton, ZenPopover],
+    }),
+  ],
+  argTypes: {
+    placement: {
+      name: 'zenPopoverPlacement',
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+      ] satisfies PopoverPlacement[],
+      table: {
+        category: 'inputs',
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'top' satisfies PopoverPlacement,
+        },
+      },
+    },
+    id: { control: 'text', table: { defaultValue: { summary: 'zen-popover-*X*' } } },
+    content: { name: 'zenPopover', control: 'text' },
+  },
+  args: {
+    placement: 'top',
+    id: 'zen-popover-story',
+    content: 'This is a popover',
+  },
+} satisfies Meta<ZenPopover>;
+
+export default meta;
+
+export const Default: Story = {
+  render: ({ content, placement, ...args }) => ({
+    props: args,
+    template: `
+      <button zen-btn [zenPopover]="'${content as string}'" [zenPopoverPlacement]="'${placement}'" ${argsToTemplate(args)}>
+        Toggle
+      </button>
+    `,
+  }),
+};

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

@@ -0,0 +1,130 @@
+import {
+  ComponentRef,
+  Directive,
+  effect,
+  ElementRef,
+  EmbeddedViewRef,
+  inject,
+  input,
+  Renderer2,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+
+import { ZenPopoverHost } from './host/popover-host';
+import { PopoverPlacement } from './popover-positions.type';
+
+/**
+ * ZenPopover is a reusable popover directive built on the native Popover API.
+ * It provides a consistent, themeable popover surface with CSS-based positioning,
+ * animations, and multiple trigger modes.
+ *
+ * ### Limitations (arrow)
+ * ZenPopover may use CSS fallback positioning (e.g. via `position-try-fallbacks`) to keep the
+ * popover inside the viewport. Today CSS doesn’t provide a stable, cross-browser way to detect
+ * which fallback placement was ultimately chosen, so an “arrow” implemented with `::before/::after`
+ * can’t be reliably synchronized with the final placement without extra JavaScript.
+ * A CSS-only solution becomes possible with Anchored Container Queries (e.g. `container-type: anchored`
+ * and `@container anchored(fallback: ...)`) where supported.
+ *
+ * @see https://developer.chrome.com/blog/anchored-container-queries
+ *
+ * ### CSS Custom Properties
+ * You can customize the popover using CSS custom properties (see component styles/docs).
+ *
+ * @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 [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ */
+
+type HostProperties = keyof ZenPopoverHost;
+
+@Directive({
+  selector: '[zenPopover]',
+  standalone: true,
+  host: {
+    '(click)': 'togglePopover()',
+  },
+})
+export class ZenPopover {
+  private static uniqueId = 0;
+
+  /** Content to display inside the popover. Can be a `string` or a `TemplateRef`.*/
+  readonly content = input.required<TemplateRef<unknown> | string>({ alias: 'zenPopover' });
+  /** Placement of the popover relative to the trigger element. Defaults to `top`.*/
+  readonly placement = input<PopoverPlacement>('top', { alias: 'zenPopoverPlacement' });
+  /** The HTML id attribute is used to specify a unique id for an HTML element.*/
+  readonly id = input<string>(`zen-popover-${ZenPopover.uniqueId++}`);
+
+  private hostRef: ComponentRef<ZenPopoverHost> | null = null;
+  private viewRef: EmbeddedViewRef<unknown> | null = null;
+
+  private unlistenToggle: (() => void) | null = null;
+
+  private readonly anchorName = `--anchor-${this.id()}`;
+
+  private readonly vcr = inject(ViewContainerRef);
+  private readonly renderer = inject(Renderer2);
+  private readonly triggerEl = inject(ElementRef).nativeElement;
+
+  constructor() {
+    effect(onCleanup => {
+      onCleanup(() => {
+        this.destroyPopover();
+      });
+    });
+  }
+
+  protected togglePopover(): void {
+    if (this.hostRef) {
+      return;
+    }
+
+    const popoverEl = this.createHost();
+    this.renderContent(popoverEl);
+    this.unlistenToggle = this.renderer.listen(popoverEl, 'beforetoggle', (event: ToggleEvent) => {
+      if (event.newState === 'closed') {
+        this.destroyPopover();
+      }
+    });
+
+    popoverEl.showPopover();
+  }
+
+  private createHost(): HTMLElement {
+    this.renderer.setStyle(this.triggerEl, 'anchor-name', this.anchorName);
+
+    this.hostRef = this.vcr.createComponent(ZenPopoverHost);
+    this.hostRef.setInput('id' satisfies HostProperties, this.id());
+    this.hostRef.setInput('placement' satisfies HostProperties, this.placement());
+
+    const popoverEl = this.hostRef.location.nativeElement as HTMLElement;
+    this.renderer.setStyle(popoverEl, 'position-anchor', this.anchorName);
+
+    return popoverEl;
+  }
+
+  private renderContent(popoverEl: HTMLElement) {
+    const contentValue = this.content();
+    if (contentValue instanceof TemplateRef) {
+      this.viewRef = contentValue.createEmbeddedView({});
+      this.renderer.appendChild(popoverEl, this.viewRef.rootNodes[0]);
+    } else {
+      this.renderer.appendChild(popoverEl, this.renderer.createText(contentValue));
+    }
+  }
+
+  private destroyPopover() {
+    if (this.unlistenToggle) {
+      this.unlistenToggle();
+      this.unlistenToggle = null;
+    }
+
+    this.viewRef?.destroy();
+    this.hostRef?.destroy();
+    this.viewRef = null;
+    this.hostRef = null;
+    this.vcr.clear();
+  }
+}

package/schematics/{components → ui}/files/radio/radio.stories.ts

@@ -10,7 +10,7 @@ interface StoryParams {
 type Options = ZenRadio & StoryParams;
 
 export default {
-  title: 'Components/Radio',
+  title: 'Ui/Radio',
   component: ZenRadio,
   argTypes: {
     value: {

package/schematics/{components → ui}/files/skeleton/skeleton.stories.ts

@@ -11,7 +11,7 @@ interface StoryParams {
 type Options = ZenSkeleton & StoryParams;
 
 export default {
-  title: 'Components/Skeleton',
+  title: 'Ui/Skeleton',
   component: ZenSkeleton,
   argTypes: {
     rounded: {

package/schematics/{components → ui}/files/switch/switch.stories.ts

@@ -5,7 +5,7 @@ import { ZenSwitch } from './switch';
 type Options = ZenSwitch;
 
 export default {
-  title: 'Components/Switch',
+  title: 'Ui/Switch',
   component: ZenSwitch,
   argTypes: {
     value: {

package/schematics/{components → ui}/files/textarea/textarea.stories.ts

@@ -12,7 +12,7 @@ interface StoryParams {
 type Options = ZenTextarea & StoryParams;
 
 export default {
-  title: 'Components/Textarea',
+  title: 'Ui/Textarea',
   component: ZenTextarea,
   args: {
     content: '',

package/schematics/ui/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uiGenerator = uiGenerator;
+const core_1 = require("@angular-devkit/core");
+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 workspace = await (0, workspace_1.getWorkspace)(tree);
+        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);
+        }
+        const workingDirectory = (0, core_1.normalize)((0, core_1.join)(options.currentDirectory, options.path));
+        return (0, schematics_1.chain)([
+            ...(0, utils_1.applyFileTemplateUtil)(ui, { ...options, path: workingDirectory }),
+            (0, schematics_1.schematic)('dependency-manager', {}),
+        ]);
+    };
+}
+//# sourceMappingURL=index.js.map

package/schematics/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/index.ts"],"names":[],"mappings":";;AASA,kCAqBC;AA9BD,+CAA6D;AAC7D,2DAA0E;AAC1E,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;YACX,GAAG,IAAA,6BAAqB,EAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;YACpE,IAAA,sBAAS,EAAC,oBAAoB,EAAE,EAAE,CAAC;SACpC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { join, normalize, Path } from '@angular-devkit/core';\nimport { chain, Rule, schematic, 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([\n      ...applyFileTemplateUtil(ui, { ...options, path: workingDirectory }),\n      schematic('dependency-manager', {}),\n    ]);\n  };\n}\n"]}

package/schematics/ui/index.ts

@@ -0,0 +1,31 @@
+import { join, normalize, Path } from '@angular-devkit/core';
+import { chain, Rule, schematic, Tree } from '@angular-devkit/schematics';
+import { buildDefaultPath, getWorkspace } from '@schematics/angular/utility/workspace';
+
+import { applyFileTemplateUtil } from '../../utils';
+import { Schema as UiOptions } from './schema';
+
+const DEFAULT_GENERATION_PATH = 'ui'; // src/app/ui
+
+export function uiGenerator({ ui, project, ...options }: UiOptions): Rule {
+  return async (tree: Tree) => {
+    const workspace = await getWorkspace(tree);
+    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;
+    }
+
+    const workingDirectory = normalize(join(options.currentDirectory, options.path));
+
+    return chain([
+      ...applyFileTemplateUtil(ui, { ...options, path: workingDirectory }),
+      schematic('dependency-manager', {}),
+    ]);
+  };
+}

package/schematics/ui/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'button'\n  | 'checkbox'\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"]}

package/schematics/{components → ui}/schema.json

@@ -16,15 +16,23 @@
       "readOnly": true
     },
     "path": {
-      "description": "Relative subpath to append to rootPath",
+      "description": "The path at which to create the component file, relative to the current workspace. If not provided, components will be generated in the 'ui' folder within the project's source directory (e.g., src/app/ui).",
       "type": "string",
+      "format": "path",
       "$default": {
         "$source": "argv",
         "index": 0
       }
     },
-    "components": {
-      "description": "Select components to generate",
+    "project": {
+      "description": "The name of the project",
+      "type": "string",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "ui": {
+      "description": "Select elements to generate",
       "type": "array",
       "items": {
         "type": "string",
@@ -37,6 +45,7 @@
           "form-control",
           "icon",
           "input",
+          "popover",
           "radio",
           "skeleton",
           "switch",
@@ -45,13 +54,13 @@
       },
       "multiselect": true,
       "minItems": 1,
-      "x-prompt": "Which component(s) should be generated?"
+      "x-prompt": "Which ui elements should be generated?"
     },
     "stories": {
-      "description": "Include component's stories for better documentation and testing",
+      "description": "Include stories for better documentation and testing",
       "type": "boolean",
       "default": false
     }
   },
-  "required": ["components"]
+  "required": ["ui"]
 }

package/schematics/{components → ui}/schema.ts

@@ -1,6 +1,6 @@
 import { GeneratorSchemaBase } from '../../types';
 
-export type ComponentType =
+export type UiType =
   | 'alert'
   | 'avatar'
   | 'button'
@@ -9,11 +9,12 @@ export type ComponentType =
   | 'form-control'
   | 'icon'
   | 'input'
+  | 'popover'
   | 'radio'
   | 'skeleton'
   | 'switch'
   | 'textarea';
 
 export interface Schema extends GeneratorSchemaBase {
-  components: ComponentType[];
+  ui: UiType[];
 }

package/schematics/{components → ui}/templates/README.md.template

@@ -8,14 +8,14 @@ Generated by `@ng-zen/cli` on <%= localeDate %>
 
 <%= classify(name) %> component was generated by
 ```bash
-ng generate @ng-zen/cli:component --components <%= name %>
+ng generate @ng-zen/cli:ui --ui <%= name %>
 ```
 
 This component is part of a larger set of UI components aimed at enhancing and streamlining the development process in Angular applications.
 
 More information you can find here
 ```bash
-ng generate @ng-zen/cli:component --help
+ng generate @ng-zen/cli:ui --help
 ```
 
 ## Installation
@@ -27,7 +27,7 @@ ng add @ng-zen/cli
 
 then you can generate components via
 ```bash
-ng generate @ng-zen/cli:component
+ng generate @ng-zen/cli:ui
 ```
 
 

package/services/selected-elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"selected-elements.js","sourceRoot":"","sources":["../../../../src/services/selected-elements.ts"],"names":[],"mappings":";;;AAEA,qFAAqF;AACxE,QAAA,gBAAgB,GAAoB,EAAE,CAAC","sourcesContent":["import { ComponentType } from '../schematics/components/schema';\n\n// add selected elements to this array, then values are available in other schematics\nexport const selectedElements: ComponentType[] = [];\n"]}
+{"version":3,"file":"selected-elements.js","sourceRoot":"","sources":["../../../../src/services/selected-elements.ts"],"names":[],"mappings":";;;AAEA,qFAAqF;AACxE,QAAA,gBAAgB,GAAa,EAAE,CAAC","sourcesContent":["import { UiType } from '../schematics/ui/schema';\n\n// add selected elements to this array, then values are available in other schematics\nexport const selectedElements: UiType[] = [];\n"]}

package/services/selected-elements.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from '../schematics/components/schema';
+import { UiType } from '../schematics/ui/schema';
 
 // add selected elements to this array, then values are available in other schematics
-export const selectedElements: ComponentType[] = [];
+export const selectedElements: UiType[] = [];

package/types/files-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"files-config.js","sourceRoot":"","sources":["../../../../src/types/files-config.ts"],"names":[],"mappings":"","sourcesContent":["import { NodeDependencyType } from '@schematics/angular/utility/dependencies';\n\nimport { ComponentType } from '../schematics/components/schema';\n\ntype Kind = Record<NodeDependencyType, Record<string, string>>;\n\nexport type FilesConfig = Record<ComponentType, Partial<Kind>>;\n"]}
+{"version":3,"file":"files-config.js","sourceRoot":"","sources":["../../../../src/types/files-config.ts"],"names":[],"mappings":"","sourcesContent":["import { NodeDependencyType } from '@schematics/angular/utility/dependencies';\n\nimport { UiType } from '../schematics/ui/schema';\n\ntype Kind = Record<NodeDependencyType, Record<string, string>>;\n\nexport type FilesConfig = Record<UiType, Partial<Kind>>;\n"]}

package/types/files-config.ts

@@ -1,7 +1,7 @@
 import { NodeDependencyType } from '@schematics/angular/utility/dependencies';
 
-import { ComponentType } from '../schematics/components/schema';
+import { UiType } from '../schematics/ui/schema';
 
 type Kind = Record<NodeDependencyType, Record<string, string>>;
 
-export type FilesConfig = Record<ComponentType, Partial<Kind>>;
+export type FilesConfig = Record<UiType, Partial<Kind>>;

package/types/generator-schema-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator-schema-base.js","sourceRoot":"","sources":["../../../../src/types/generator-schema-base.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path: Path;\n  stories: boolean;\n}\n"]}
+{"version":3,"file":"generator-schema-base.js","sourceRoot":"","sources":["../../../../src/types/generator-schema-base.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"]}

package/types/generator-schema-base.ts

@@ -2,6 +2,7 @@ import { Path } from '@angular-devkit/core';
 
 export interface GeneratorSchemaBase {
   currentDirectory: Path;
-  path: Path;
+  path?: Path;
   stories: boolean;
+  project?: string;
 }

package/types/schematics-folder.js.map

@@ -1 +1 @@
-{"version":3,"file":"schematics-folder.js","sourceRoot":"","sources":["../../../../src/types/schematics-folder.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from '../schematics/components/schema';\n\nexport type SchematicsFolder = ComponentType;\n"]}
+{"version":3,"file":"schematics-folder.js","sourceRoot":"","sources":["../../../../src/types/schematics-folder.ts"],"names":[],"mappings":"","sourcesContent":["import { UiType } from '../schematics/ui/schema';\n\nexport type SchematicsFolder = UiType;\n"]}

package/types/schematics-folder.ts

@@ -1,3 +1,3 @@
-import { ComponentType } from '../schematics/components/schema';
+import { UiType } from '../schematics/ui/schema';
 
-export type SchematicsFolder = ComponentType;
+export type SchematicsFolder = UiType;

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;AAE9G,qEAAiE;AAGjE,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,OAA2B,EAAE,MAA2B;IAC5F,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,IAAI,CAAC,CAAC;QAEvD,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 { selectedElements } from '../services/selected-elements';\nimport { GeneratorSchemaBase, SchematicsFolder } from '../types';\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: SchematicsFolder[], config: GeneratorSchemaBase): Rule[] {\n  selectedElements.push(...folders);\n  return folders.map(folder => {\n    const RULES = createTemplateRules(folder, config.path);\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,2DAA8G;AAE9G,qEAAiE;AAGjE,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,OAA2B,EAAE,MAA2B;IAC5F,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 { selectedElements } from '../services/selected-elements';\nimport { GeneratorSchemaBase, SchematicsFolder } from '../types';\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: SchematicsFolder[], 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

@@ -19,7 +19,7 @@ const includeStories = (include: boolean) => filter(filePath => include || !file
 export function applyFileTemplateUtil(folders: SchematicsFolder[], config: GeneratorSchemaBase): Rule[] {
   selectedElements.push(...folders);
   return folders.map(folder => {
-    const RULES = createTemplateRules(folder, config.path);
+    const RULES = createTemplateRules(folder, config.path as string);
 
     const folderSource = apply(url(`./files/${folder}`), [includeStories(config.stories), ...RULES]);