ngx-com 0.0.13 → 0.0.14

package/fesm2022/ngx-com-components-icon.mjs

@@ -1,9 +1,33 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1 from 'lucide-angular';
-import { LucideAngularModule, LucideIconProvider, LUCIDE_ICONS } from 'lucide-angular';
+import { LucideAngularModule } from 'lucide-angular';
 import { cva } from 'class-variance-authority';
 
+/**
+ * Singleton registry for Lucide icons used by `com-icon`.
+ *
+ * Unlike lucide-angular's `LUCIDE_ICONS` token (which gets shadowed by child injectors),
+ * this registry lives at root and merges all icons registered via `provideComIcons()`.
+ */
+class ComIconRegistry {
+    icons = {};
+    /** Merges the given icons into the registry. */
+    register(icons) {
+        Object.assign(this.icons, icons);
+    }
+    /** Returns the icon data for the given PascalCase name, or `null` if not registered. */
+    get(name) {
+        return this.icons[name] ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComIconRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComIconRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const iconVariants = cva('inline-flex items-center justify-center shrink-0 align-middle', {
     variants: {
         color: {
@@ -39,6 +63,14 @@ const ICON_SIZE_PX = {
     '2xl': 40,
 };
 
+/**
+ * Converts a kebab-case or space-separated icon name to PascalCase.
+ *
+ * Uses the same regex as lucide-angular for consistency.
+ */
+function toPascalCase(str) {
+    return str.replace(/(\w)([a-z0-9]*)(_|-|\s*)/g, (_g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase());
+}
 /**
  * Icon component — renders Lucide icons with CVA-powered color and size variants.
  *
@@ -76,6 +108,7 @@ const ICON_SIZE_PX = {
  * ```
  */
 class ComIcon {
+    registry = inject(ComIconRegistry);
     /** Icon name in kebab-case (e.g. 'chevron-right'). Requires provideComIcons registration. */
     name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
     /** Direct Lucide icon reference. Takes precedence over `name`. */
@@ -90,23 +123,23 @@ class ComIcon {
     absoluteStrokeWidth = input(false, ...(ngDevMode ? [{ debugName: "absoluteStrokeWidth" }] : []));
     /** Applies aria-label and removes aria-hidden. Use for meaningful icons. */
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /** Resolves icon data from either `img` (direct ref) or `name` (registry lookup). */
+    resolvedIcon = computed(() => {
+        const imgData = this.img();
+        if (imgData)
+            return imgData;
+        const iconName = this.name();
+        if (iconName)
+            return this.registry.get(toPascalCase(iconName)) ?? undefined;
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : []));
     sizeInPx = computed(() => ICON_SIZE_PX[this.size()], ...(ngDevMode ? [{ debugName: "sizeInPx" }] : []));
     hostClasses = computed(() => iconVariants({ color: this.color(), size: this.size() }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComIcon, isStandalone: true, selector: "com-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, img: { classPropertyName: "img", publicName: "img", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, absoluteStrokeWidth: { classPropertyName: "absoluteStrokeWidth", publicName: "absoluteStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
-    @if (img(); as imgData) {
+    @if (resolvedIcon(); as iconData) {
       <lucide-icon
-        [img]="imgData"
-        [size]="sizeInPx()"
-        [strokeWidth]="strokeWidth()"
-        [absoluteStrokeWidth]="absoluteStrokeWidth()"
-        color="currentColor"
-        [attr.aria-label]="ariaLabel() ?? null"
-        [attr.aria-hidden]="ariaLabel() ? null : 'true'"
-      />
-    } @else if (name(); as iconName) {
-      <lucide-icon
-        [name]="iconName"
+        [img]="iconData"
         [size]="sizeInPx()"
         [strokeWidth]="strokeWidth()"
         [absoluteStrokeWidth]="absoluteStrokeWidth()"
@@ -122,19 +155,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{
                     selector: 'com-icon',
                     template: `
-    @if (img(); as imgData) {
+    @if (resolvedIcon(); as iconData) {
       <lucide-icon
-        [img]="imgData"
-        [size]="sizeInPx()"
-        [strokeWidth]="strokeWidth()"
-        [absoluteStrokeWidth]="absoluteStrokeWidth()"
-        color="currentColor"
-        [attr.aria-label]="ariaLabel() ?? null"
-        [attr.aria-hidden]="ariaLabel() ? null : 'true'"
-      />
-    } @else if (name(); as iconName) {
-      <lucide-icon
-        [name]="iconName"
+        [img]="iconData"
         [size]="sizeInPx()"
         [strokeWidth]="strokeWidth()"
         [absoluteStrokeWidth]="absoluteStrokeWidth()"
@@ -156,7 +179,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * Provides Lucide icons for use with `com-icon`.
  *
- * Register icons in your application config to use them by name:
+ * Icons are merged into a root-level registry, so multiple calls
+ * (e.g. at root and in lazy routes) accumulate rather than shadow.
  *
  * @example
  * ```ts
@@ -170,14 +194,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  *   ]
  * };
  * ```
+ *
+ * @example Lazy route adds more icons without losing root icons
+ * ```ts
+ * // feature.routes.ts
+ * export const routes: Routes = [{
+ *   path: '',
+ *   providers: [provideComIcons({ Settings, User })],
+ *   component: FeatureComponent,
+ * }];
+ * ```
  */
 function provideComIcons(icons) {
-    return { provide: LUCIDE_ICONS, useValue: new LucideIconProvider(icons) };
+    return makeEnvironmentProviders([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => inject(ComIconRegistry).register(icons),
+        },
+    ]);
 }
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ComIcon, ICON_SIZE_PX, iconVariants, provideComIcons };
+export { ComIcon, ComIconRegistry, ICON_SIZE_PX, iconVariants, provideComIcons };
 //# sourceMappingURL=ngx-com-components-icon.mjs.map

package/fesm2022/ngx-com-components-icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-com-components-icon.mjs","sources":["../../../projects/com/components/icon/icon.variants.ts","../../../projects/com/components/icon/icon.component.ts","../../../projects/com/components/icon/icon.providers.ts","../../../projects/com/components/icon/ngx-com-components-icon.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport type IconColor = 'current' | 'primary' | 'accent' | 'warn' | 'success' | 'muted' | 'disabled';\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport const iconVariants: (props?: { color?: IconColor; size?: IconSize }) => string = cva(\n  'inline-flex items-center justify-center shrink-0 align-middle',\n  {\n    variants: {\n      color: {\n        current: '',\n        primary: 'text-primary',\n        accent: 'text-accent',\n        warn: 'text-warn',\n        success: 'text-success',\n        muted: 'text-muted-foreground',\n        disabled: 'text-disabled-foreground',\n      },\n      size: {\n        xs: 'size-icon-xs',\n        sm: 'size-icon-sm',\n        md: 'size-icon-md',\n        lg: 'size-icon-lg',\n        xl: 'size-icon-xl',\n        '2xl': 'size-icon-2xl',\n      },\n    },\n    defaultVariants: {\n      color: 'current',\n      size: 'lg',\n    },\n  }\n);\n\n/** Pixel values matching the CSS tokens — passed to Lucide's numeric [size] prop */\nexport const ICON_SIZE_PX: Record<IconSize, number> = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n  '2xl': 40,\n};\n\nexport type IconVariants = VariantProps<typeof iconVariants>;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { InputSignal, Signal } from '@angular/core';\nimport { LucideAngularModule } from 'lucide-angular';\nimport type { LucideIconData } from 'lucide-angular';\nimport { iconVariants, ICON_SIZE_PX, type IconColor, type IconSize } from './icon.variants';\n\n/**\n * Icon component — renders Lucide icons with CVA-powered color and size variants.\n *\n * Icons inherit `currentColor` by default, making them automatically match\n * surrounding text. Use the `color` input for semantic color variants that\n * respond to theme changes.\n *\n * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`,\n *         `--color-muted-foreground`, `--color-disabled-foreground`,\n *         `--size-icon-xs`, `--size-icon-sm`, `--size-icon-md`,\n *         `--size-icon-lg`, `--size-icon-xl`, `--size-icon-2xl`\n *\n * @example Basic usage (requires icon registration via provideComIcons)\n * ```html\n * <com-icon name=\"star\" />\n * <com-icon name=\"check\" color=\"success\" size=\"sm\" />\n * <com-icon name=\"alert-triangle\" color=\"warn\" />\n * ```\n *\n * @example Direct icon reference (no provider needed)\n * ```html\n * <com-icon [img]=\"StarIcon\" color=\"accent\" size=\"2xl\" />\n * ```\n *\n * @example Accessible icon (not decorative)\n * ```html\n * <com-icon name=\"check\" color=\"success\" ariaLabel=\"Task completed\" />\n * ```\n *\n * @example Inline with text (inherits parent color)\n * ```html\n * <span class=\"text-primary\">\n *   <com-icon name=\"star\" size=\"sm\" /> Favorite\n * </span>\n * ```\n */\n@Component({\n  selector: 'com-icon',\n  template: `\n    @if (img(); as imgData) {\n      <lucide-icon\n        [img]=\"imgData\"\n        [size]=\"sizeInPx()\"\n        [strokeWidth]=\"strokeWidth()\"\n        [absoluteStrokeWidth]=\"absoluteStrokeWidth()\"\n        color=\"currentColor\"\n        [attr.aria-label]=\"ariaLabel() ?? null\"\n        [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n      />\n    } @else if (name(); as iconName) {\n      <lucide-icon\n        [name]=\"iconName\"\n        [size]=\"sizeInPx()\"\n        [strokeWidth]=\"strokeWidth()\"\n        [absoluteStrokeWidth]=\"absoluteStrokeWidth()\"\n        color=\"currentColor\"\n        [attr.aria-label]=\"ariaLabel() ?? null\"\n        [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n      />\n    }\n  `,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  imports: [LucideAngularModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ComIcon {\n  /** Icon name in kebab-case (e.g. 'chevron-right'). Requires provideComIcons registration. */\n  readonly name: InputSignal<string | undefined> = input<string>();\n\n  /** Direct Lucide icon reference. Takes precedence over `name`. */\n  readonly img: InputSignal<LucideIconData | undefined> = input<LucideIconData>();\n\n  /** Semantic color variant. Defaults to 'current' (inherits from parent). */\n  readonly color: InputSignal<IconColor> = input<IconColor>('current');\n\n  /** Size variant. Defaults to 'lg' (24px). */\n  readonly size: InputSignal<IconSize> = input<IconSize>('lg');\n\n  /** Stroke width. Defaults to 2. */\n  readonly strokeWidth: InputSignal<number> = input<number>(2);\n\n  /** When true, stroke width doesn't scale with icon size. */\n  readonly absoluteStrokeWidth: InputSignal<boolean> = input<boolean>(false);\n\n  /** Applies aria-label and removes aria-hidden. Use for meaningful icons. */\n  readonly ariaLabel: InputSignal<string | undefined> = input<string>();\n\n  protected readonly sizeInPx: Signal<number> = computed(() => ICON_SIZE_PX[this.size()]);\n  protected readonly hostClasses: Signal<string> = computed(() =>\n    iconVariants({ color: this.color(), size: this.size() })\n  );\n}\n","import type { Provider } from '@angular/core';\nimport { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';\nimport type { LucideIcons } from 'lucide-angular';\n\n/**\n * Provides Lucide icons for use with `com-icon`.\n *\n * Register icons in your application config to use them by name:\n *\n * @example\n * ```ts\n * // app.config.ts\n * import { provideComIcons } from 'ngx-com/components/icon';\n * import { ChevronRight, Star, Check, AlertTriangle } from 'lucide-angular';\n *\n * export const appConfig = {\n *   providers: [\n *     provideComIcons({ ChevronRight, Star, Check, AlertTriangle })\n *   ]\n * };\n * ```\n */\nexport function provideComIcons(icons: LucideIcons): Provider {\n  return { provide: LUCIDE_ICONS, useValue: new LucideIconProvider(icons) };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-com-components-icon.mjs","sources":["../../../projects/com/components/icon/icon.registry.ts","../../../projects/com/components/icon/icon.variants.ts","../../../projects/com/components/icon/icon.component.ts","../../../projects/com/components/icon/icon.providers.ts","../../../projects/com/components/icon/ngx-com-components-icon.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport type { LucideIconData, LucideIcons } from 'lucide-angular';\n\n/**\n * Singleton registry for Lucide icons used by `com-icon`.\n *\n * Unlike lucide-angular's `LUCIDE_ICONS` token (which gets shadowed by child injectors),\n * this registry lives at root and merges all icons registered via `provideComIcons()`.\n */\n@Injectable({ providedIn: 'root' })\nexport class ComIconRegistry {\n  private readonly icons: LucideIcons = {};\n\n  /** Merges the given icons into the registry. */\n  register(icons: LucideIcons): void {\n    Object.assign(this.icons, icons);\n  }\n\n  /** Returns the icon data for the given PascalCase name, or `null` if not registered. */\n  get(name: string): LucideIconData | null {\n    return (this.icons[name] as LucideIconData) ?? null;\n  }\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport type IconColor = 'current' | 'primary' | 'accent' | 'warn' | 'success' | 'muted' | 'disabled';\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport const iconVariants: (props?: { color?: IconColor; size?: IconSize }) => string = cva(\n  'inline-flex items-center justify-center shrink-0 align-middle',\n  {\n    variants: {\n      color: {\n        current: '',\n        primary: 'text-primary',\n        accent: 'text-accent',\n        warn: 'text-warn',\n        success: 'text-success',\n        muted: 'text-muted-foreground',\n        disabled: 'text-disabled-foreground',\n      },\n      size: {\n        xs: 'size-icon-xs',\n        sm: 'size-icon-sm',\n        md: 'size-icon-md',\n        lg: 'size-icon-lg',\n        xl: 'size-icon-xl',\n        '2xl': 'size-icon-2xl',\n      },\n    },\n    defaultVariants: {\n      color: 'current',\n      size: 'lg',\n    },\n  }\n);\n\n/** Pixel values matching the CSS tokens — passed to Lucide's numeric [size] prop */\nexport const ICON_SIZE_PX: Record<IconSize, number> = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n  '2xl': 40,\n};\n\nexport type IconVariants = VariantProps<typeof iconVariants>;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { InputSignal, Signal } from '@angular/core';\nimport { LucideAngularModule } from 'lucide-angular';\nimport type { LucideIconData } from 'lucide-angular';\nimport { ComIconRegistry } from './icon.registry';\nimport { iconVariants, ICON_SIZE_PX, type IconColor, type IconSize } from './icon.variants';\n\n/**\n * Converts a kebab-case or space-separated icon name to PascalCase.\n *\n * Uses the same regex as lucide-angular for consistency.\n */\nfunction toPascalCase(str: string): string {\n  return str.replace(/(\\w)([a-z0-9]*)(_|-|\\s*)/g, (_g0, g1: string, g2: string) =>\n    g1.toUpperCase() + g2.toLowerCase()\n  );\n}\n\n/**\n * Icon component — renders Lucide icons with CVA-powered color and size variants.\n *\n * Icons inherit `currentColor` by default, making them automatically match\n * surrounding text. Use the `color` input for semantic color variants that\n * respond to theme changes.\n *\n * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`,\n *         `--color-muted-foreground`, `--color-disabled-foreground`,\n *         `--size-icon-xs`, `--size-icon-sm`, `--size-icon-md`,\n *         `--size-icon-lg`, `--size-icon-xl`, `--size-icon-2xl`\n *\n * @example Basic usage (requires icon registration via provideComIcons)\n * ```html\n * <com-icon name=\"star\" />\n * <com-icon name=\"check\" color=\"success\" size=\"sm\" />\n * <com-icon name=\"alert-triangle\" color=\"warn\" />\n * ```\n *\n * @example Direct icon reference (no provider needed)\n * ```html\n * <com-icon [img]=\"StarIcon\" color=\"accent\" size=\"2xl\" />\n * ```\n *\n * @example Accessible icon (not decorative)\n * ```html\n * <com-icon name=\"check\" color=\"success\" ariaLabel=\"Task completed\" />\n * ```\n *\n * @example Inline with text (inherits parent color)\n * ```html\n * <span class=\"text-primary\">\n *   <com-icon name=\"star\" size=\"sm\" /> Favorite\n * </span>\n * ```\n */\n@Component({\n  selector: 'com-icon',\n  template: `\n    @if (resolvedIcon(); as iconData) {\n      <lucide-icon\n        [img]=\"iconData\"\n        [size]=\"sizeInPx()\"\n        [strokeWidth]=\"strokeWidth()\"\n        [absoluteStrokeWidth]=\"absoluteStrokeWidth()\"\n        color=\"currentColor\"\n        [attr.aria-label]=\"ariaLabel() ?? null\"\n        [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n      />\n    }\n  `,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  imports: [LucideAngularModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ComIcon {\n  private readonly registry = inject(ComIconRegistry);\n\n  /** Icon name in kebab-case (e.g. 'chevron-right'). Requires provideComIcons registration. */\n  readonly name: InputSignal<string | undefined> = input<string>();\n\n  /** Direct Lucide icon reference. Takes precedence over `name`. */\n  readonly img: InputSignal<LucideIconData | undefined> = input<LucideIconData>();\n\n  /** Semantic color variant. Defaults to 'current' (inherits from parent). */\n  readonly color: InputSignal<IconColor> = input<IconColor>('current');\n\n  /** Size variant. Defaults to 'lg' (24px). */\n  readonly size: InputSignal<IconSize> = input<IconSize>('lg');\n\n  /** Stroke width. Defaults to 2. */\n  readonly strokeWidth: InputSignal<number> = input<number>(2);\n\n  /** When true, stroke width doesn't scale with icon size. */\n  readonly absoluteStrokeWidth: InputSignal<boolean> = input<boolean>(false);\n\n  /** Applies aria-label and removes aria-hidden. Use for meaningful icons. */\n  readonly ariaLabel: InputSignal<string | undefined> = input<string>();\n\n  /** Resolves icon data from either `img` (direct ref) or `name` (registry lookup). */\n  protected readonly resolvedIcon: Signal<LucideIconData | undefined> = computed(() => {\n    const imgData = this.img();\n    if (imgData) return imgData;\n\n    const iconName = this.name();\n    if (iconName) return this.registry.get(toPascalCase(iconName)) ?? undefined;\n\n    return undefined;\n  });\n\n  protected readonly sizeInPx: Signal<number> = computed(() => ICON_SIZE_PX[this.size()]);\n  protected readonly hostClasses: Signal<string> = computed(() =>\n    iconVariants({ color: this.color(), size: this.size() })\n  );\n}\n","import { ENVIRONMENT_INITIALIZER, inject, makeEnvironmentProviders } from '@angular/core';\nimport type { EnvironmentProviders } from '@angular/core';\nimport type { LucideIcons } from 'lucide-angular';\nimport { ComIconRegistry } from './icon.registry';\n\n/**\n * Provides Lucide icons for use with `com-icon`.\n *\n * Icons are merged into a root-level registry, so multiple calls\n * (e.g. at root and in lazy routes) accumulate rather than shadow.\n *\n * @example\n * ```ts\n * // app.config.ts\n * import { provideComIcons } from 'ngx-com/components/icon';\n * import { ChevronRight, Star, Check, AlertTriangle } from 'lucide-angular';\n *\n * export const appConfig = {\n *   providers: [\n *     provideComIcons({ ChevronRight, Star, Check, AlertTriangle })\n *   ]\n * };\n * ```\n *\n * @example Lazy route adds more icons without losing root icons\n * ```ts\n * // feature.routes.ts\n * export const routes: Routes = [{\n *   path: '',\n *   providers: [provideComIcons({ Settings, User })],\n *   component: FeatureComponent,\n * }];\n * ```\n */\nexport function provideComIcons(icons: LucideIcons): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: ENVIRONMENT_INITIALIZER,\n      multi: true,\n      useValue: () => inject(ComIconRegistry).register(icons),\n    },\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-com",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/avs2001/ngx-com"
@@ -8,7 +8,7 @@
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@angular/cdk": "~21.2.0",
+    "@angular/cdk": "^21.0.0",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
     "rxjs": "~7.8.0",

package/types/ngx-com-components-icon.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InputSignal, Signal, Provider } from '@angular/core';
+import { InputSignal, Signal, EnvironmentProviders } from '@angular/core';
 import { LucideIconData, LucideIcons } from 'lucide-angular';
 import { VariantProps } from 'class-variance-authority';
 
@@ -50,6 +50,7 @@ type IconVariants = VariantProps<typeof iconVariants>;
  * ```
  */
 declare class ComIcon {
+    private readonly registry;
     /** Icon name in kebab-case (e.g. 'chevron-right'). Requires provideComIcons registration. */
     readonly name: InputSignal<string | undefined>;
     /** Direct Lucide icon reference. Takes precedence over `name`. */
@@ -64,16 +65,35 @@ declare class ComIcon {
     readonly absoluteStrokeWidth: InputSignal<boolean>;
     /** Applies aria-label and removes aria-hidden. Use for meaningful icons. */
     readonly ariaLabel: InputSignal<string | undefined>;
+    /** Resolves icon data from either `img` (direct ref) or `name` (registry lookup). */
+    protected readonly resolvedIcon: Signal<LucideIconData | undefined>;
     protected readonly sizeInPx: Signal<number>;
     protected readonly hostClasses: Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComIcon, "com-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "img": { "alias": "img"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "absoluteStrokeWidth": { "alias": "absoluteStrokeWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Singleton registry for Lucide icons used by `com-icon`.
+ *
+ * Unlike lucide-angular's `LUCIDE_ICONS` token (which gets shadowed by child injectors),
+ * this registry lives at root and merges all icons registered via `provideComIcons()`.
+ */
+declare class ComIconRegistry {
+    private readonly icons;
+    /** Merges the given icons into the registry. */
+    register(icons: LucideIcons): void;
+    /** Returns the icon data for the given PascalCase name, or `null` if not registered. */
+    get(name: string): LucideIconData | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComIconRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ComIconRegistry>;
+}
+
 /**
  * Provides Lucide icons for use with `com-icon`.
  *
- * Register icons in your application config to use them by name:
+ * Icons are merged into a root-level registry, so multiple calls
+ * (e.g. at root and in lazy routes) accumulate rather than shadow.
  *
  * @example
  * ```ts
@@ -87,8 +107,18 @@ declare class ComIcon {
  *   ]
  * };
  * ```
+ *
+ * @example Lazy route adds more icons without losing root icons
+ * ```ts
+ * // feature.routes.ts
+ * export const routes: Routes = [{
+ *   path: '',
+ *   providers: [provideComIcons({ Settings, User })],
+ *   component: FeatureComponent,
+ * }];
+ * ```
  */
-declare function provideComIcons(icons: LucideIcons): Provider;
+declare function provideComIcons(icons: LucideIcons): EnvironmentProviders;
 
-export { ComIcon, ICON_SIZE_PX, iconVariants, provideComIcons };
+export { ComIcon, ComIconRegistry, ICON_SIZE_PX, iconVariants, provideComIcons };
 export type { IconColor, IconSize, IconVariants };