@ng-zen/cli 22.4.1 → 22.5.0

package/README.md

@@ -81,9 +81,10 @@ export class MyComponent {}
 3. [CLI Usage & Options](#-cli-usage--options)
 4. [Available UIs](#-available-uis)
 5. [Customization](#-customization)
-6. [Philosophy & Architecture](#-philosophy--architecture)
-7. [Community & Contributions](#-community--contributions)
-8. [Documentation & Links](#-documentation--links)
+6. [ESLint Configuration](#-eslint-configuration)
+7. [Philosophy & Architecture](#-philosophy--architecture)
+8. [Community & Contributions](#-community--contributions)
+9. [Documentation & Links](#-documentation--links)
 
 ## ✨ Features
 
@@ -166,6 +167,7 @@ ng generate @ng-zen/cli:ui --ui button input --stories
 | ----------- | ---------------------------- | ------------------------------------------------------------------------- |
 | **Button**  | Interactive buttons          | Primary/secondary variants, loading states, icons                         |
 | **Dialog**  | Native modal dialogs         | Native dialog element, service API, size variants, backdrop config        |
+| **Pin**     | Anchor-positioned overlay    | CSS Anchor Positioning, TemplateRef content, position and offset controls |
 | **Popover** | Native Popover API directive | Template/string content, placements, click toggle, CSS anchor positioning |
 
 ## 🎨 Customization
@@ -188,6 +190,38 @@ Every generated component utilizes CSS variables for immediate theming without t
 
 For structural changes (e.g., modifying the default `0.625rem` border radius or internal padding), simply edit the generated `.scss` files in your `./ui` directory.
 
+## 🔧 ESLint Configuration
+
+ng-zen provides a flat ESLint config for UI components and generated files.
+
+**Auto-setup** during `ng add`:
+
+```bash
+ng add @ng-zen/cli
+# → Prompt: "ESLint config detected. Update it for ng-zen UI components?"
+```
+
+It adds `@ng-zen/cli/eslint-config` to your `eslint.config.*` and spreads it into the `defineConfig` array. This enforces the `zen` prefix on component selectors and relaxes rules for `.stories.ts` / `.spec.ts` files generated inside `ui/` directories.
+
+**Manual setup** (if you declined the prompt):
+
+```ts
+import ngZen from '@ng-zen/cli/eslint-config';
+
+export default defineConfig([...otherConfigs, ...ngZen]);
+```
+
+**Custom path or rules** — use the named exports for fine-grained control:
+
+```ts
+import ngZen from '@ng-zen/cli/eslint-config';
+
+export default defineConfig([
+  ngZen.createNgZenConfig({ uiFiles: 'src/app/shared/components' }),
+  ...ngZen.generatedFiles,
+]);
+```
+
 ## 🏛️ Philosophy & Architecture
 
 ### Perfect For

package/eslint-config/index.js

@@ -0,0 +1,130 @@
+// @ts-check
+const { defineConfig } = require('eslint/config');
+
+/**
+ * Config block for UI components inside a `ui/` directory.
+ *
+ * Enforces:
+ * - `zen` prefix for component selectors (`element`, `kebab-case`)
+ * - `zen` prefix for directive selectors (`attribute`, `camelCase`)
+ * - At most 2 classes per file
+ *
+ * @type {import('eslint').Linter.Config}
+ */
+const uiComponent = {
+  files: ['**/ui/**/*.ts'],
+  rules: {
+    '@angular-eslint/directive-selector': ['error', { type: 'attribute', prefix: 'zen', style: 'camelCase' }],
+    '@angular-eslint/component-selector': ['error', { type: 'element', prefix: 'zen', style: 'kebab-case' }],
+    'max-classes-per-file': ['error', 2],
+  },
+};
+
+/**
+ * Config block for generated files — specs, tests, and Storybook stories.
+ *
+ * Relaxes strict rules that are impractical for test/story files:
+ * disables `explicit-function-return-type`, `no-unsafe-*`, `max-classes-per-file`,
+ * `no-empty-function`, `require-await`, `unbound-method`, and `no-floating-promises`.
+ *
+ * @type {import('eslint').Linter.Config}
+ */
+const generatedFiles = {
+  files: ['**/ui/**/*.spec.ts', '**/ui/**/*.test.ts', '**/ui/**/*.stories.ts'],
+  rules: {
+    '@typescript-eslint/unbound-method': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/require-await': 'off',
+    'max-classes-per-file': 'off',
+  },
+};
+
+/**
+ * Creates a custom UI component config block with a custom file glob.
+ *
+ * @param {Object} [options]
+ * @param {string | string[]} [options.uiFiles] - Glob pattern(s) for UI component files.
+ *   Uses the same format as the `files` property in flat config.
+ * @returns {import('eslint').Linter.Config} A config block with the same rules as
+ *   uiComponent but scoped to the provided file pattern.
+ *
+ * @example
+ * ```ts
+ * createNgZenConfig({ uiFiles: 'libs/my-ui' })
+ * ```
+ */
+function createNgZenConfig(options = {}) {
+  const { uiFiles = ['**/ui/**/*.ts'] } = options;
+  return { ...uiComponent, files: [uiFiles].flat() };
+}
+
+/**
+ * ng-zen ESLint flat config.
+ *
+ * ## Default import
+ *
+ * Import the whole array of flat configs:
+ * ```ts
+ * import ngZen from '@ng-zen/cli/eslint-config';
+ * export default defineConfig([...ngZen]);
+ * ```
+ *
+ * ## Named properties
+ *
+ * | Property | Returns | Description |
+ * |---|---|---|
+ * | `.uiComponent` | `Config` | Rules for UI component files. Override `files` / `rules` via spread. |
+ * | `.generatedFiles` | `Config` | Rules for generated files (stories, spec, test). |
+ * | `.createNgZenConfig(opts)` | `Config` | Helper — same rules as uiComponent with a custom file glob. |
+ *
+ * ## Custom path
+ *
+ * By default, UI component files are detected via a glob pattern targeting any `ui` directory
+ * (glob: `**` + `/ui/` + `**` + `/*`). If your components live in a different location, choose one of the
+ * approaches below instead of the default `...ngZen` spread.
+ *
+ * @example <caption>Custom UI path</caption>
+ * ```ts
+ * import ngZen from '@ng-zen/cli/eslint-config';
+ * export default defineConfig([
+ *   ngZen.createNgZenConfig({ uiFiles: 'src/app/shared/ui' }),
+ *   ...ngZen.generatedFiles,
+ * ]);
+ * ```
+ *
+ * @example <caption>Override prefix or rules</caption>
+ * ```ts
+ * import ngZen from '@ng-zen/cli/eslint-config';
+ * export default defineConfig([
+ *   {
+ *     files: ['libs/my-ui'],
+ *     rules: {
+ *       ...ngZen.uiComponent.rules,
+ *       '@angular-eslint/component-selector': ['error', { type: 'element', prefix: ['app', 'zen'], style: 'kebab-case' }],
+ *     },
+ *   },
+ *   ...ngZen.generatedFiles,
+ * ]);
+ * ```
+ *
+ * @type {import('eslint').Linter.FlatConfig[] &
+ *   {
+ *     uiComponent: import('eslint').Linter.Config,
+ *     generatedFiles: import('eslint').Linter.Config,
+ *     createNgZenConfig: (options?: { uiFiles?: string | string[] }) => import('eslint').Linter.Config
+ *   }
+ * }
+ */
+const config = Object.assign(defineConfig([uiComponent, generatedFiles]), {
+  uiComponent,
+  generatedFiles,
+  createNgZenConfig,
+});
+
+module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.4.1",
+  "version": "22.5.0",
   "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -59,6 +59,7 @@
     "form-control",
     "icon",
     "input",
+    "pin",
     "popover",
     "radio",
     "skeleton",
@@ -68,8 +69,20 @@
   "ng-add": {
     "save": "devDependencies"
   },
+  "exports": {
+    "./eslint-config": "./eslint-config/index.js",
+    "./package.json": "./package.json"
+  },
   "schematics": "./schematics/collection.json",
   "packageManager": "pnpm@10.24.0",
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "typescript": "6",
+        "chokidar": "5"
+      }
+    }
+  },
   "dependencies": {
     "@angular-devkit/core": "^22.0.1",
     "@angular-devkit/schematics": "^22.0.1",

package/schematics/ng-add/eslint-config.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findEslintConfig = findEslintConfig;
+exports.logEslintManualInstructions = logEslintManualInstructions;
+exports.updateEslintConfig = updateEslintConfig;
+function findEslintConfig(tree) {
+    for (const name of ['eslint.config.js', 'eslint.config.mjs', 'eslint.config.ts']) {
+        if (tree.exists(name))
+            return name;
+    }
+    return null;
+}
+function detectFormat(code) {
+    return code.includes('require(') || code.includes('module.exports') ? 'cjs' : 'esm';
+}
+function getImportStatement(code) {
+    if (detectFormat(code) === 'cjs') {
+        return "const ngZen = require('@ng-zen/cli/eslint-config');\n";
+    }
+    return "import ngZen from '@ng-zen/cli/eslint-config';\n";
+}
+function addImport(code) {
+    if (code.includes('@ng-zen/cli/eslint-config'))
+        return code;
+    const statement = getImportStatement(code);
+    if (detectFormat(code) === 'cjs') {
+        const lastRequire = code.lastIndexOf('\nconst ');
+        if (lastRequire < 0)
+            return code;
+        const insertAt = code.indexOf('\n', lastRequire + 1) + 1;
+        return code.slice(0, insertAt) + statement + code.slice(insertAt);
+    }
+    const importEnd = code.lastIndexOf('\nimport ');
+    const insertAt = importEnd > 0 ? code.indexOf('\n', importEnd + 1) + 1 : code.indexOf('\n') + 1;
+    return code.slice(0, insertAt) + statement + code.slice(insertAt);
+}
+function spreadConfig(code) {
+    const defineConfigMatch = /defineConfig\(\s*\[([\s\S]*?)\]\s*\)/.exec(code);
+    if (!defineConfigMatch)
+        return code;
+    const existingArray = defineConfigMatch[0];
+    if (existingArray.includes('...ngZen'))
+        return code;
+    const newArray = existingArray.replace(/\]\s*\)$/, ', ...ngZen,\n  ])');
+    return code.replace(existingArray, newArray);
+}
+function logEslintManualInstructions() {
+    return (tree, context) => {
+        const configPath = findEslintConfig(tree);
+        if (!configPath)
+            return tree;
+        context.logger.info('');
+        context.logger.info('⚠️ To add ng-zen ESLint config manually:');
+        context.logger.info('  1. Run: npm install -D @ng-zen/cli');
+        context.logger.info('  2. In eslint.config.js, add:');
+        context.logger.info("       import ngZen from '@ng-zen/cli/eslint-config';");
+        context.logger.info('       // then spread ...ngZen into the defineConfig array');
+        context.logger.info('  See: Manual Configuration page in Storybook');
+        return tree;
+    };
+}
+function updateEslintConfig() {
+    return (tree, context) => {
+        const configPath = findEslintConfig(tree);
+        if (!configPath) {
+            context.logger.info('ℹ️ No flat ESLint config found — skip ESLint update');
+            return tree;
+        }
+        let code = tree.read(configPath).toString('utf-8');
+        if (!code.includes('defineConfig')) {
+            context.logger.warn('⚠️ ESLint config does not use defineConfig — skip automatic update');
+            return tree;
+        }
+        const hadImport = code.includes('@ng-zen/cli/eslint-config');
+        code = addImport(code);
+        code = spreadConfig(code);
+        tree.overwrite(configPath, code);
+        if (hadImport) {
+            context.logger.info('✅ ESLint config already has @ng-zen/cli config — ensured it is in defineConfig array');
+        }
+        else {
+            context.logger.info('✅ Added @ng-zen/cli/eslint-config to ESLint config');
+        }
+        return tree;
+    };
+}
+//# sourceMappingURL=eslint-config.js.map

package/schematics/ng-add/eslint-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eslint-config.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/eslint-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\n\ntype ModuleFormat = 'cjs' | 'esm';\n\nexport function findEslintConfig(tree: Tree): string | null {\n  for (const name of ['eslint.config.js', 'eslint.config.mjs', 'eslint.config.ts']) {\n    if (tree.exists(name)) return name;\n  }\n  return null;\n}\n\nfunction detectFormat(code: string): ModuleFormat {\n  return code.includes('require(') || code.includes('module.exports') ? 'cjs' : 'esm';\n}\n\nfunction getImportStatement(code: string): string {\n  if (detectFormat(code) === 'cjs') {\n    return \"const ngZen = require('@ng-zen/cli/eslint-config');\\n\";\n  }\n  return \"import ngZen from '@ng-zen/cli/eslint-config';\\n\";\n}\n\nfunction addImport(code: string): string {\n  if (code.includes('@ng-zen/cli/eslint-config')) return code;\n\n  const statement = getImportStatement(code);\n\n  if (detectFormat(code) === 'cjs') {\n    const lastRequire = code.lastIndexOf('\\nconst ');\n    if (lastRequire < 0) return code;\n    const insertAt = code.indexOf('\\n', lastRequire + 1) + 1;\n    return code.slice(0, insertAt) + statement + code.slice(insertAt);\n  }\n\n  const importEnd = code.lastIndexOf('\\nimport ');\n  const insertAt = importEnd > 0 ? code.indexOf('\\n', importEnd + 1) + 1 : code.indexOf('\\n') + 1;\n  return code.slice(0, insertAt) + statement + code.slice(insertAt);\n}\n\nfunction spreadConfig(code: string): string {\n  const defineConfigMatch = /defineConfig\\(\\s*\\[([\\s\\S]*?)\\]\\s*\\)/.exec(code);\n  if (!defineConfigMatch) return code;\n\n  const existingArray = defineConfigMatch[0];\n  if (existingArray.includes('...ngZen')) return code;\n\n  const newArray = existingArray.replace(/\\]\\s*\\)$/, ', ...ngZen,\\n  ])');\n  return code.replace(existingArray, newArray);\n}\n\nexport function logEslintManualInstructions(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    const configPath = findEslintConfig(tree);\n    if (!configPath) return tree;\n\n    context.logger.info('');\n    context.logger.info('⚠️ To add ng-zen ESLint config manually:');\n    context.logger.info('  1. Run: npm install -D @ng-zen/cli');\n    context.logger.info('  2. In eslint.config.js, add:');\n    context.logger.info(\"       import ngZen from '@ng-zen/cli/eslint-config';\");\n    context.logger.info('       // then spread ...ngZen into the defineConfig array');\n    context.logger.info('  See: Manual Configuration page in Storybook');\n\n    return tree;\n  };\n}\n\nexport function updateEslintConfig(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    const configPath = findEslintConfig(tree);\n\n    if (!configPath) {\n      context.logger.info('ℹ️ No flat ESLint config found — skip ESLint update');\n      return tree;\n    }\n\n    let code = tree.read(configPath)!.toString('utf-8');\n\n    if (!code.includes('defineConfig')) {\n      context.logger.warn('⚠️ ESLint config does not use defineConfig — skip automatic update');\n      return tree;\n    }\n\n    const hadImport = code.includes('@ng-zen/cli/eslint-config');\n    code = addImport(code);\n    code = spreadConfig(code);\n\n    tree.overwrite(configPath, code);\n\n    if (hadImport) {\n      context.logger.info('✅ ESLint config already has @ng-zen/cli config — ensured it is in defineConfig array');\n    } else {\n      context.logger.info('✅ Added @ng-zen/cli/eslint-config to ESLint config');\n    }\n\n    return tree;\n  };\n}\n"]}

package/schematics/ng-add/eslint-config.ts

@@ -0,0 +1,98 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+type ModuleFormat = 'cjs' | 'esm';
+
+export function findEslintConfig(tree: Tree): string | null {
+  for (const name of ['eslint.config.js', 'eslint.config.mjs', 'eslint.config.ts']) {
+    if (tree.exists(name)) return name;
+  }
+  return null;
+}
+
+function detectFormat(code: string): ModuleFormat {
+  return code.includes('require(') || code.includes('module.exports') ? 'cjs' : 'esm';
+}
+
+function getImportStatement(code: string): string {
+  if (detectFormat(code) === 'cjs') {
+    return "const ngZen = require('@ng-zen/cli/eslint-config');\n";
+  }
+  return "import ngZen from '@ng-zen/cli/eslint-config';\n";
+}
+
+function addImport(code: string): string {
+  if (code.includes('@ng-zen/cli/eslint-config')) return code;
+
+  const statement = getImportStatement(code);
+
+  if (detectFormat(code) === 'cjs') {
+    const lastRequire = code.lastIndexOf('\nconst ');
+    if (lastRequire < 0) return code;
+    const insertAt = code.indexOf('\n', lastRequire + 1) + 1;
+    return code.slice(0, insertAt) + statement + code.slice(insertAt);
+  }
+
+  const importEnd = code.lastIndexOf('\nimport ');
+  const insertAt = importEnd > 0 ? code.indexOf('\n', importEnd + 1) + 1 : code.indexOf('\n') + 1;
+  return code.slice(0, insertAt) + statement + code.slice(insertAt);
+}
+
+function spreadConfig(code: string): string {
+  const defineConfigMatch = /defineConfig\(\s*\[([\s\S]*?)\]\s*\)/.exec(code);
+  if (!defineConfigMatch) return code;
+
+  const existingArray = defineConfigMatch[0];
+  if (existingArray.includes('...ngZen')) return code;
+
+  const newArray = existingArray.replace(/\]\s*\)$/, ', ...ngZen,\n  ])');
+  return code.replace(existingArray, newArray);
+}
+
+export function logEslintManualInstructions(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const configPath = findEslintConfig(tree);
+    if (!configPath) return tree;
+
+    context.logger.info('');
+    context.logger.info('⚠️ To add ng-zen ESLint config manually:');
+    context.logger.info('  1. Run: npm install -D @ng-zen/cli');
+    context.logger.info('  2. In eslint.config.js, add:');
+    context.logger.info("       import ngZen from '@ng-zen/cli/eslint-config';");
+    context.logger.info('       // then spread ...ngZen into the defineConfig array');
+    context.logger.info('  See: Manual Configuration page in Storybook');
+
+    return tree;
+  };
+}
+
+export function updateEslintConfig(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const configPath = findEslintConfig(tree);
+
+    if (!configPath) {
+      context.logger.info('ℹ️ No flat ESLint config found — skip ESLint update');
+      return tree;
+    }
+
+    let code = tree.read(configPath)!.toString('utf-8');
+
+    if (!code.includes('defineConfig')) {
+      context.logger.warn('⚠️ ESLint config does not use defineConfig — skip automatic update');
+      return tree;
+    }
+
+    const hadImport = code.includes('@ng-zen/cli/eslint-config');
+    code = addImport(code);
+    code = spreadConfig(code);
+
+    tree.overwrite(configPath, code);
+
+    if (hadImport) {
+      context.logger.info('✅ ESLint config already has @ng-zen/cli config — ensured it is in defineConfig array');
+    } else {
+      context.logger.info('✅ Added @ng-zen/cli/eslint-config to ESLint config');
+    }
+
+    return tree;
+  };
+}

package/schematics/ng-add/icon-library/icon-library.js

@@ -16,7 +16,8 @@ function installIconLibrary() {
 }
 function logIconLibraryManualInstructions() {
     return (tree, context) => {
-        context.logger.info('To use <zen-icon>, install an SVG icon library (one-time setup):');
+        context.logger.info('');
+        context.logger.info('⚠️ To use <zen-icon>, install an SVG icon library (one-time setup):');
         context.logger.info('  - Recommended: @hugeicons/core-free-icons');
         context.logger.info('  - Or use any other SVG icon library and pass icons via the [icon] input.');
         return tree;

package/schematics/ng-add/icon-library/icon-library.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-library.js","sourceRoot":"","sources":["../../../../../../src/schematics/ng-add/icon-library/icon-library.ts"],"names":[],"mappings":";;AAMA,gDAWC;AAED,4EAQC;AA1BD,4DAA0E;AAC1E,2EAAoF;AAEpF,qDAAqD;AAErD,SAAgB,kBAAkB;IAChC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QAEnE,IAAA,uCAAwB,EAAC,IAAI,EAAE,kCAAiB,CAAC,CAAC;QAClD,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAE9C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,8DAA8D,CAAC,CAAC;QAEpF,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AAED,SAAgB,gCAAgC;IAC9C,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,kEAAkE,CAAC,CAAC;QACxF,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QACnE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,4EAA4E,CAAC,CAAC;QAElG,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\nimport { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';\nimport { addPackageJsonDependency } from '@schematics/angular/utility/dependencies';\n\nimport { HugeiconsCoreFree } from './icon-libraries';\n\nexport function installIconLibrary(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    context.logger.info('📦 Installing @hugeicons/core-free-icons...');\n\n    addPackageJsonDependency(tree, HugeiconsCoreFree);\n    context.addTask(new NodePackageInstallTask());\n\n    context.logger.info('✅ @hugeicons/core-free-icons has been added to your project.');\n\n    return tree;\n  };\n}\n\nexport function logIconLibraryManualInstructions(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    context.logger.info('To use <zen-icon>, install an SVG icon library (one-time setup):');\n    context.logger.info('  - Recommended: @hugeicons/core-free-icons');\n    context.logger.info('  - Or use any other SVG icon library and pass icons via the [icon] input.');\n\n    return tree;\n  };\n}\n"]}
+{"version":3,"file":"icon-library.js","sourceRoot":"","sources":["../../../../../../src/schematics/ng-add/icon-library/icon-library.ts"],"names":[],"mappings":";;AAMA,gDAWC;AAED,4EASC;AA3BD,4DAA0E;AAC1E,2EAAoF;AAEpF,qDAAqD;AAErD,SAAgB,kBAAkB;IAChC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QAEnE,IAAA,uCAAwB,EAAC,IAAI,EAAE,kCAAiB,CAAC,CAAC;QAClD,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAE9C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,8DAA8D,CAAC,CAAC;QAEpF,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AAED,SAAgB,gCAAgC;IAC9C,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;QAC3F,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QACnE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,4EAA4E,CAAC,CAAC;QAElG,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\nimport { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';\nimport { addPackageJsonDependency } from '@schematics/angular/utility/dependencies';\n\nimport { HugeiconsCoreFree } from './icon-libraries';\n\nexport function installIconLibrary(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    context.logger.info('📦 Installing @hugeicons/core-free-icons...');\n\n    addPackageJsonDependency(tree, HugeiconsCoreFree);\n    context.addTask(new NodePackageInstallTask());\n\n    context.logger.info('✅ @hugeicons/core-free-icons has been added to your project.');\n\n    return tree;\n  };\n}\n\nexport function logIconLibraryManualInstructions(): Rule {\n  return (tree: Tree, context: SchematicContext) => {\n    context.logger.info('');\n    context.logger.info('⚠️ To use <zen-icon>, install an SVG icon library (one-time setup):');\n    context.logger.info('  - Recommended: @hugeicons/core-free-icons');\n    context.logger.info('  - Or use any other SVG icon library and pass icons via the [icon] input.');\n\n    return tree;\n  };\n}\n"]}

package/schematics/ng-add/icon-library/icon-library.ts

@@ -19,7 +19,8 @@ export function installIconLibrary(): Rule {
 
 export function logIconLibraryManualInstructions(): Rule {
   return (tree: Tree, context: SchematicContext) => {
-    context.logger.info('To use <zen-icon>, install an SVG icon library (one-time setup):');
+    context.logger.info('');
+    context.logger.info('⚠️ To use <zen-icon>, install an SVG icon library (one-time setup):');
     context.logger.info('  - Recommended: @hugeicons/core-free-icons');
     context.logger.info('  - Or use any other SVG icon library and pass icons via the [icon] input.');
 

package/schematics/ng-add/index.js

@@ -1,14 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
+const schematics_1 = require("@angular-devkit/schematics");
+const eslint_config_1 = require("./eslint-config");
 const icon_library_1 = require("./icon-library");
 function ngAdd(options) {
     return (tree, context) => {
         context.logger.info('🔧 Setting up ng-zen...');
+        const rules = [];
         if (options.installIconLibrary) {
-            return (0, icon_library_1.installIconLibrary)()(tree, context);
+            rules.push((0, icon_library_1.installIconLibrary)());
         }
-        return (0, icon_library_1.logIconLibraryManualInstructions)()(tree, context);
+        else {
+            rules.push((0, icon_library_1.logIconLibraryManualInstructions)());
+        }
+        if (options.updateEslint) {
+            rules.push((0, eslint_config_1.updateEslintConfig)());
+        }
+        else {
+            rules.push((0, eslint_config_1.logEslintManualInstructions)());
+        }
+        return (0, schematics_1.chain)(rules)(tree, context);
     };
 }
 //# sourceMappingURL=index.js.map

package/schematics/ng-add/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAKA,sBAUC;AAbD,iDAAsF;AAGtF,SAAgB,KAAK,CAAC,OAAe;IACnC,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;QACvB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAE/C,IAAI,OAAO,CAAC,kBAAkB,EAAE,CAAC;YAC/B,OAAO,IAAA,iCAAkB,GAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,IAAA,+CAAgC,GAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule } from '@angular-devkit/schematics';\n\nimport { installIconLibrary, logIconLibraryManualInstructions } from './icon-library';\nimport { Schema } from './schema';\n\nexport function ngAdd(options: Schema): Rule {\n  return (tree, context) => {\n    context.logger.info('🔧 Setting up ng-zen...');\n\n    if (options.installIconLibrary) {\n      return installIconLibrary()(tree, context);\n    }\n\n    return logIconLibraryManualInstructions()(tree, context);\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAMA,sBAoBC;AA1BD,2DAAyD;AAEzD,mDAAkF;AAClF,iDAAsF;AAGtF,SAAgB,KAAK,CAAC,OAAe;IACnC,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;QACvB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAE/C,MAAM,KAAK,GAAW,EAAE,CAAC;QAEzB,IAAI,OAAO,CAAC,kBAAkB,EAAE,CAAC;YAC/B,KAAK,CAAC,IAAI,CAAC,IAAA,iCAAkB,GAAE,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAI,CAAC,IAAA,+CAAgC,GAAE,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC;YACzB,KAAK,CAAC,IAAI,CAAC,IAAA,kCAAkB,GAAE,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAI,CAAC,IAAA,2CAA2B,GAAE,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,IAAA,kBAAK,EAAC,KAAK,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACrC,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { chain, Rule } from '@angular-devkit/schematics';\n\nimport { logEslintManualInstructions, updateEslintConfig } from './eslint-config';\nimport { installIconLibrary, logIconLibraryManualInstructions } from './icon-library';\nimport { Schema } from './schema';\n\nexport function ngAdd(options: Schema): Rule {\n  return (tree, context) => {\n    context.logger.info('🔧 Setting up ng-zen...');\n\n    const rules: Rule[] = [];\n\n    if (options.installIconLibrary) {\n      rules.push(installIconLibrary());\n    } else {\n      rules.push(logIconLibraryManualInstructions());\n    }\n\n    if (options.updateEslint) {\n      rules.push(updateEslintConfig());\n    } else {\n      rules.push(logEslintManualInstructions());\n    }\n\n    return chain(rules)(tree, context);\n  };\n}\n"]}

package/schematics/ng-add/index.ts

@@ -1,5 +1,6 @@
-import { Rule } from '@angular-devkit/schematics';
+import { chain, Rule } from '@angular-devkit/schematics';
 
+import { logEslintManualInstructions, updateEslintConfig } from './eslint-config';
 import { installIconLibrary, logIconLibraryManualInstructions } from './icon-library';
 import { Schema } from './schema';
 
@@ -7,10 +8,20 @@ export function ngAdd(options: Schema): Rule {
   return (tree, context) => {
     context.logger.info('🔧 Setting up ng-zen...');
 
+    const rules: Rule[] = [];
+
     if (options.installIconLibrary) {
-      return installIconLibrary()(tree, context);
+      rules.push(installIconLibrary());
+    } else {
+      rules.push(logIconLibraryManualInstructions());
+    }
+
+    if (options.updateEslint) {
+      rules.push(updateEslintConfig());
+    } else {
+      rules.push(logEslintManualInstructions());
     }
 
-    return logIconLibraryManualInstructions()(tree, context);
+    return chain(rules)(tree, context);
   };
 }

package/schematics/ng-add/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"","sourcesContent":["export interface Schema {\n  installIconLibrary?: boolean;\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"","sourcesContent":["export interface Schema {\n  installIconLibrary?: boolean;\n  updateEslint?: boolean;\n}\n"]}

package/schematics/ng-add/schema.json

@@ -8,6 +8,11 @@
     "installIconLibrary": {
       "type": "boolean",
       "x-prompt": "Would you like to install @hugeicons/core-free-icons? This package provides the icon set for zen-icon component. You can also install it manually later."
+    },
+    "updateEslint": {
+      "type": "boolean",
+      "x-prompt": "ESLint config detected. Update it for ng-zen UI components? This adds zen prefix rules and relaxes rules for stories/spec files.",
+      "default": true
     }
   }
 }

package/schematics/ng-add/schema.ts

@@ -1,3 +1,4 @@
 export interface Schema {
   installIconLibrary?: boolean;
+  updateEslint?: boolean;
 }

package/schematics/ui/files/avatar/avatar.ts

@@ -40,7 +40,7 @@ import { Component, input } from '@angular/core';
   imports: [NgOptimizedImage],
   template: `
     @if (src()) {
-      <img [alt]="alt()" [ngSrc]="src()" fill />
+      <img fill [alt]="alt()" [ngSrc]="src()" />
     } @else {
       <ng-content />
     }

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

@@ -81,7 +81,7 @@ export const WithSignalForm: Story = {
   template: `
     <div style="display: flex; flex-direction: column; gap: 0.5rem;">
       <div style="display: flex; align-items: center; gap: 0.25rem">
-        <zen-checkbox [formField]="form.agree" id="agree" />
+        <zen-checkbox id="agree" [formField]="form.agree" />
         <label for="agree">I agree to the terms</label>
       </div>
       @if (form.agree().invalid()) {

package/schematics/ui/files/checkbox/checkbox.ts

@@ -39,13 +39,13 @@ import { ZenFormControl } from '../form-control';
   selector: 'zen-checkbox',
   template: `
     <input
+      #inputElement
+      type="checkbox"
       [attr.aria-disabled]="disabled()"
       [attr.aria-invalid]="invalid() || null"
       [checked]="value()"
       [disabled]="disabled()"
       (change)="onInput(inputElement.checked)"
-      #inputElement
-      type="checkbox"
     />
     @if (inputElement.indeterminate) {
       ─

package/schematics/ui/files/dialog/dialog.service.stories.ts

@@ -67,8 +67,8 @@ See [GitHub](https://github.com/kstepien3/ng-zen), [MDN Dialog Element](https://
   template: `
     <p>{{ message() }}</p>
     <div style="display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: end">
-      <button (click)="cancel()" color="danger" variant="filled" zen-btn>Cancel</button>
-      <button (click)="confirmClick.emit('confirmed!')" zen-btn>Confirm</button>
+      <button color="danger" variant="filled" zen-btn (click)="cancel()">Cancel</button>
+      <button zen-btn (click)="confirmClick.emit('confirmed!')">Confirm</button>
     </div>
   `,
   standalone: true,
@@ -90,7 +90,7 @@ class DemoDialogContent {
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'app-service-demo',
   template: `
-    <button (click)="openDialog()" zen-btn>Open via Service</button>
+    <button zen-btn (click)="openDialog()">Open via Service</button>
   `,
   standalone: true,
   imports: [ZenButton],

package/schematics/ui/files/dialog/dialog.service.ts

@@ -62,7 +62,7 @@ interface DialogConfig<T, TInputs = ComponentInputs<T>, TOutputs = ComponentOutp
 
 /** Reference to an opened dialog. Provides `close()` and `componentInstance`. */
 class DialogRef<T> {
-  public componentInstance!: T;
+  componentInstance!: T;
 
   constructor(private readonly closeFn: () => void) {}
 
@@ -130,7 +130,7 @@ class ZenDialogService {
 
     this.dialogRef.instance.open.set(true);
 
-    const { inputs, outputs, ...inputMappings } = config || {};
+    const { inputs, outputs, ...inputMappings } = config ?? {};
 
     for (const [key, value] of Object.entries(inputMappings)) {
       if (value !== undefined) {