@ng-zen/cli 22.1.0 → 22.2.0

package/CHANGELOG.md

@@ -1,7 +1,18 @@
-## [22.1.0](https://github.com/kstepien3/ng-zen/compare/v22.0.0...v22.1.0) (2026-06-23)
+## [22.2.0](https://github.com/kstepien3/ng-zen/compare/v22.1.0...v22.2.0) (2026-07-06)
 
 ### 🚀 New Features
 
-* **ui:** migrate controls for signals and clean up ([#417](https://github.com/kstepien3/ng-zen/issues/417)) ([1525bc1](https://github.com/kstepien3/ng-zen/commit/1525bc13b10ffc8c0e4281beb3c2eb9771c08675))
+* **textarea:** remove outdated autoresize TODO comment ([#435](https://github.com/kstepien3/ng-zen/issues/435)) ([73575c7](https://github.com/kstepien3/ng-zen/commit/73575c74e803d816612f74c5794ca97800bddb1c))
+* trigger 22.2.0-next.1 release ([803e0fa](https://github.com/kstepien3/ng-zen/commit/803e0faccbd41c77b8996227f034dbbda0fa2852))
+* **ui:** add reusable card component ([#428](https://github.com/kstepien3/ng-zen/issues/428)) ([f7acac6](https://github.com/kstepien3/ng-zen/commit/f7acac6b443b23c2710deaf3a763feb7f9269fbb))
+* **ui:** migrate controls for signals and clean up ([#417](https://github.com/kstepien3/ng-zen/issues/417)) ([08824f8](https://github.com/kstepien3/ng-zen/commit/08824f85096745bcf001700dc415afe1a6cdb52e))
+
+### 🐛 Bug Fixes
+
+* force release after failed npm publish for 22.1.0-next.1 ([3e4d4db](https://github.com/kstepien3/ng-zen/commit/3e4d4db2a602f05b13ca2a989abc923ccebf7207))
+
+### 📚 Documentation
+
+* **storybook:** add Geist font and update base typography styles ([#429](https://github.com/kstepien3/ng-zen/issues/429)) ([296b2f2](https://github.com/kstepien3/ng-zen/commit/296b2f29197dacd491c4791a29d1026a17136201))
 
 Development mode - changelog will be generated during build.

package/README.md

@@ -45,7 +45,7 @@ Unlike traditional UI libraries that give you `<library-button>` black boxes, @n
 
 ### 🏎️ **Instant Productivity**
 
-- **Production-Ready UI Elements:** Alert, Avatar, Button, Checkbox, Dialog, Divider, Form Control, Icon, Input, Popover, Radio, Skeleton, Switch, Textarea
+- **Production-Ready UI Elements:** Alert, Avatar, Button, Card, Checkbox, Dialog, Divider, Form Control, Icon, Input, Popover, Radio, Skeleton, Switch, Textarea
 - **Zero Configuration:** Works with Angular 20+ out of the box
 - **Complete Setup:** Each component includes unit tests, Storybook stories, and documentation
 
@@ -146,22 +146,23 @@ export class MyComponent {}
 
 ## 🧩 Available UIs
 
-| Component        | Description                      | Features                                                                  |
-| ---------------- | -------------------------------- | ------------------------------------------------------------------------- |
-| **Avatar**       | User profile images and initials | Image fallback, size variants, rounded styles                             |
-| **Alert**        | Informational messages           | Customizable styles, dismissible options                                  |
-| **Button**       | Interactive buttons              | Primary/secondary variants, loading states, icons                         |
-| **Checkbox**     | Form checkboxes                  | Indeterminate state, custom styling, validation                           |
-| **Dialog**       | Native modal dialogs             | Native dialog element, service API, size variants, backdrop config        |
-| **Divider**      | Visual separators                | Horizontal/vertical, with labels, custom thickness                        |
-| **Form Control** | Form field wrapper               | Labels, validation messages, required indicators                          |
-| **Icon**         | SVG icon system                  | Huge Icons integration, size variants, colors                             |
-| **Input**        | Text input fields                | Validation states, prefixes/suffixes, types                               |
-| **Popover**      | Native Popover API directive     | Template/string content, placements, click toggle, CSS anchor positioning |
-| **Radio**        | Form radio buttons               | Group selection, two-way binding, custom styling, disabled state          |
-| **Skeleton**     | Loading placeholders             | Multiple shapes, animation, responsive                                    |
-| **Switch**       | Toggle controls                  | On/off states, disabled state, custom labels                              |
-| **Textarea**     | Multi-line text input            | Auto-resize, character counts, validation                                 |
+| Component        | Description                      | Features                                                                       |
+| ---------------- | -------------------------------- | ------------------------------------------------------------------------------ |
+| **Avatar**       | User profile images and initials | Image fallback, size variants, rounded styles                                  |
+| **Alert**        | Informational messages           | Customizable styles, dismissible options                                       |
+| **Button**       | Interactive buttons              | Primary/secondary variants, loading states, icons                              |
+| **Card**         | Content container                | Multi-slot projection (header, title, subtitle, footer), CSS custom properties |
+| **Checkbox**     | Form checkboxes                  | Indeterminate state, custom styling, validation                                |
+| **Dialog**       | Native modal dialogs             | Native dialog element, service API, size variants, backdrop config             |
+| **Divider**      | Visual separators                | Horizontal/vertical, with labels, custom thickness                             |
+| **Form Control** | Form field wrapper               | Labels, validation messages, required indicators                               |
+| **Icon**         | SVG icon system                  | Huge Icons integration, size variants, colors                                  |
+| **Input**        | Text input fields                | Validation states, prefixes/suffixes, types                                    |
+| **Popover**      | Native Popover API directive     | Template/string content, placements, click toggle, CSS anchor positioning      |
+| **Radio**        | Form radio buttons               | Group selection, two-way binding, custom styling, disabled state               |
+| **Skeleton**     | Loading placeholders             | Multiple shapes, animation, responsive                                         |
+| **Switch**       | Toggle controls                  | On/off states, disabled state, custom labels                                   |
+| **Textarea**     | Multi-line text input            | Auto-resize, character counts, validation                                      |
 
 > 💡 **More components coming soon!** Planned: Directives, Pipes, Services, and additional UI elements.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.1.0",
-  "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like avatar, button, checkbox, divider, form-control, icon, input, skeleton, switch, textarea with Storybook demos.",
+  "version": "22.2.0",
+  "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like alert, avatar, button, card, checkbox, dialog, divider, form-control, icon, input, popover, radio, skeleton, switch, textarea with Storybook demos.",
   "license": "BSD-2-Clause",
   "private": false,
   "repository": {
@@ -48,6 +48,7 @@
     "alert",
     "avatar",
     "button",
+    "card",
     "checkbox",
     "dialog",
     "divider",
@@ -69,7 +70,6 @@
   "dependencies": {
     "@angular-devkit/core": "^22.0.1",
     "@angular-devkit/schematics": "^22.0.1",
-    "@angular/build": "22.0.1",
     "tslib": "^2.8.1"
   }
 }

package/schematics/ui/files/alert/alert.scss

@@ -33,7 +33,7 @@ $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 }
 
 /* Title styles */
-::ng-deep [alert-title] {
+:host ::ng-deep [alert-title] {
   padding: 0;
   margin: 0;
 }

package/schematics/ui/files/card/card.scss

@@ -0,0 +1,57 @@
+:host {
+  --zen-card-border-radius: 0.75rem;
+  --zen-card-ring: 0 0 0 1px hsl(0deg 0% 0% / 10%);
+  --zen-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
+  --zen-card-bg: hsl(0deg 0% 100%);
+  --zen-card-color: hsl(0deg 0% 10%);
+  --zen-card-padding: 1.5rem;
+  --zen-card-gap: 1rem;
+  --zen-card-header-gap: 0.25rem;
+  --zen-card-title-font-size: 1.125rem;
+  --zen-card-title-font-weight: 600;
+  --zen-card-subtitle-font-size: 0.875rem;
+  --zen-card-subtitle-color: hsl(0deg 0% 40%);
+  --zen-card-border: 1px solid hsl(0deg 0% 0% / 10%);
+  --zen-card-footer-bg: hsl(0deg 0% 95%);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  border-radius: var(--zen-card-border-radius);
+  box-shadow: var(--zen-card-ring), var(--zen-card-shadow);
+  background: var(--zen-card-bg);
+  color: var(--zen-card-color);
+  overflow: hidden;
+}
+
+.zen-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zen-card-gap);
+  padding: var(--zen-card-padding);
+}
+
+.zen-card-footer {
+  &:not(:empty) {
+    padding: var(--zen-card-padding);
+    border-top: var(--zen-card-border);
+    background: var(--zen-card-footer-bg);
+  }
+}
+
+:host ::ng-deep [card-title] {
+  margin: 0;
+  font-size: var(--zen-card-title-font-size);
+  font-weight: var(--zen-card-title-font-weight);
+  line-height: 1.4;
+}
+
+:host ::ng-deep [card-subtitle] {
+  margin: 0;
+  font-size: var(--zen-card-subtitle-font-size);
+  color: var(--zen-card-subtitle-color);
+  line-height: 1.5;
+}

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

@@ -0,0 +1,20 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ZenCard } from './card';
+
+describe('ZenCard', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenCard],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(ZenCard);
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,157 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenButton } from '../button';
+import { ZenCard } from './card';
+
+interface StoryParams {
+  content: string;
+  title: string;
+  subtitle: string;
+}
+
+type Options = ZenCard & StoryParams;
+
+export default {
+  title: 'Ui/Card',
+  component: ZenCard,
+  decorators: [moduleMetadata({ imports: [ZenButton] })],
+  args: {
+    content: 'This is the card content.',
+    title: 'Card Title',
+    subtitle: 'Card subtitle',
+  },
+  argTypes: {
+    content: {
+      control: 'text',
+      table: { category: 'story parameters', type: { summary: 'ng-content' } },
+    },
+    title: {
+      control: 'text',
+      table: { category: 'story parameters', type: { summary: 'string' } },
+    },
+    subtitle: {
+      control: 'text',
+      table: { category: 'story parameters', type: { summary: 'string' } },
+    },
+  },
+  render: ({ content, title, subtitle }) => ({
+    props: {},
+    template: `
+      <zen-card>
+        <h3 card-title>${title}</h3>
+        <p card-subtitle>${subtitle}</p>
+        ${content}
+      </zen-card>
+    `,
+  }),
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
+
+export const Default: Story = {};
+
+export const Basic: Story = {
+  args: {
+    content: 'This is a simple card with only default content.',
+  },
+  render: ({ content }) => ({
+    props: {},
+    template: `
+      <zen-card>
+        ${content}
+      </zen-card>
+    `,
+  }),
+};
+
+export const WithFooter: Story = {
+  args: {
+    content: 'Card content with a footer action.',
+  },
+  render: ({ content, title, subtitle }) => ({
+    props: {},
+    template: `
+      <zen-card>
+        <h3 card-title>${title}</h3>
+        <p card-subtitle>${subtitle}</p>
+        ${content}
+        <div card-footer>
+          <button zen-button>Save changes</button>
+        </div>
+      </zen-card>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: {
+    content: '',
+    title: '',
+    subtitle: '',
+  },
+  render: () => ({
+    props: {},
+    template: `
+      <zen-card style="--zen-card-padding: 1rem; --zen-card-gap: 0.75rem; --zen-card-header-gap: 0.125rem;">
+        <h3 card-title>Scheduled reports</h3>
+        <p card-subtitle>Weekly snapshots. No more manual exports.</p>
+        <ul style="margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem;">
+          <li>Choose a schedule (daily, or weekly).</li>
+          <li>Send to channels or specific teammates.</li>
+          <li>Include charts, tables, and key metrics.</li>
+        </ul>
+        <div card-footer style="display: flex; gap: 0.5rem;">
+          <button zen-button>Set up scheduled reports</button>
+          <button zen-button variant="outline">See what's new</button>
+        </div>
+      </zen-card>
+    `,
+  }),
+};
+
+export const LoginForm: Story = {
+  args: {
+    content: '',
+    title: '',
+    subtitle: '',
+  },
+  render: () => ({
+    props: {},
+    template: `
+      <zen-card>
+        <h3 card-title>Login to your account</h3>
+        <p card-subtitle>Enter your email below to login to your account</p>
+        <div style="display: grid; gap: 0.75rem;">
+          <input type="email" placeholder="Email" style="border: 1px solid hsl(0deg 0% 80%); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem;">
+          <input type="password" placeholder="Password" style="border: 1px solid hsl(0deg 0% 80%); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem;">
+          <a href="#" style="font-size: 0.75rem; color: hsl(0deg 0% 40%); text-align: right;">Forgot your password?</a>
+        </div>
+        <div card-footer style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <button zen-button>Login</button>
+          <button zen-button variant="filled">Login with Google</button>
+        </div>
+      </zen-card>
+    `,
+  }),
+};
+
+export const ImageCard: Story = {
+  args: {
+    content: '',
+    title: '',
+    subtitle: '',
+  },
+  render: () => ({
+    props: {},
+    template: `
+      <zen-card>
+        <img card-header src="https://picsum.photos/seed/ng-zen/600/400" alt="Event cover" style="display: block; width: 100%; height: 300px; object-fit: cover;">
+
+        <h3 card-title style="margin: 0;">Design systems meetup</h3>
+        <p style="margin: 0;">A practical talk on component APIs, accessibility, and shipping faster.</p>
+
+        <button card-footer zen-button variant="ghost" style="width: 100%;">View Event</button>
+      </zen-card>
+    `,
+  }),
+};

package/schematics/ui/files/card/card.ts

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+
+/**
+ * ZenCard is a reusable card component that provides a consistent container
+ * for grouping related content. It supports multi-slot content projection
+ * through attribute selectors.
+ *
+ * @example
+ *
+ * ```html
+ * <zen-card>
+ *   <div card-header>
+ *     <app-badge variant="secondary">Featured</app-badge>
+ *   </div>
+ *   <h3 card-title>Design systems meetup</h3>
+ *   <p card-subtitle>
+ *     A practical talk on component APIs, accessibility, and shipping faster.
+ *   </p>
+ *   <img src="..." alt="Event cover" />
+ *   <div card-footer>
+ *     <app-button>View Event</app-button>
+ *   </div>
+ * </zen-card>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --zen-card-border-radius: 0.75rem;
+ *   --zen-card-ring: 0 0 0 1px hsl(0deg 0% 0% / 0.1);
+ *   --zen-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+ *   --zen-card-bg: hsl(0deg 0% 100%);
+ *   --zen-card-color: hsl(0deg 0% 10%);
+ *   --zen-card-padding: 1.5rem;
+ *   --zen-card-gap: 1rem;
+ *   --zen-card-title-font-size: 1.125rem;
+ *   --zen-card-subtitle-font-size: 0.875rem;
+ *   --zen-card-footer-bg: hsl(0deg 0% 95%);
+ * }
+ * ```
+ *
+ * @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-card',
+  template: `
+    <ng-content select="[card-header]" />
+    <div class="zen-card-body">
+      <ng-content select="[card-title]" />
+      <ng-content select="[card-subtitle]" />
+      <ng-content />
+    </div>
+    <div class="zen-card-footer">
+      <ng-content select="[card-footer]" />
+    </div>
+  `,
+  styleUrl: './card.scss',
+})
+export class ZenCard {}

package/schematics/ui/files/card/index.ts

@@ -0,0 +1 @@
+export * from './card';

package/schematics/ui/files/textarea/textarea.ts

@@ -25,7 +25,6 @@ import { Component } from '@angular/core';
  * @see [GitHub](https://github.com/kstepien3/ng-zen)
  */
 @Component({
-  // @TODO: add support for autoresize for mozilla browsers https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'textarea[zen-textarea], textarea[zen-textarea][autoresize]',
   template: `

package/schematics/ui/schema.js.map

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

package/schematics/ui/schema.json

@@ -40,6 +40,7 @@
           "alert",
           "avatar",
           "button",
+          "card",
           "checkbox",
           "dialog",
           "divider",

package/schematics/ui/schema.ts

@@ -1,9 +1,17 @@
-import { GeneratorSchemaBase } from '../../types';
+import { Path } from '@angular-devkit/core';
+
+export interface GeneratorSchemaBase {
+  currentDirectory: Path;
+  path?: Path;
+  stories: boolean;
+  project?: string;
+}
 
 export type UiType =
   | 'alert'
   | 'avatar'
   | 'button'
+  | 'card'
   | 'checkbox'
   | 'dialog'
   | 'divider'

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

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

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

package/types/files-config.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=files-config.js.map

package/types/files-config.js.map

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

package/types/generator-schema-base.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=generator-schema-base.js.map

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

@@ -1 +0,0 @@
-{"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

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

package/types/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./files-config"), exports);
-tslib_1.__exportStar(require("./generator-schema-base"), exports);
-tslib_1.__exportStar(require("./schematics-folder"), exports);
-//# sourceMappingURL=index.js.map

package/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":";;;AAAA,yDAA+B;AAC/B,kEAAwC;AACxC,8DAAoC","sourcesContent":["export * from './files-config';\nexport * from './generator-schema-base';\nexport * from './schematics-folder';\n"]}

package/types/index.ts

@@ -1,3 +0,0 @@
-export * from './files-config';
-export * from './generator-schema-base';
-export * from './schematics-folder';

package/types/schematics-folder.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=schematics-folder.js.map

package/types/schematics-folder.js.map

@@ -1 +0,0 @@
-{"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 +0,0 @@
-import { UiType } from '../schematics/ui/schema';
-
-export type SchematicsFolder = UiType;