@fuse_ui/icon 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# icon
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test icon` to execute the unit tests.

package/fesm2022/fuse_ui-icon.mjs

@@ -0,0 +1,43 @@
+import * as i0 from '@angular/core';
+import { input, inject, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FuseIconRegistryService } from '@fuse_ui/core';
+
+const SIZE_MAP = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+class FuseIconComponent {
+    /** Name of the icon registered in FuseIconRegistryService. Required. */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Size variant, maps to pixel dimensions. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** CSS colour value applied to the icon stroke/fill. Defaults to currentColor. */
+    color = input('currentColor', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    sanitizer = inject(DomSanitizer);
+    registry = inject(FuseIconRegistryService);
+    safeSvg = signal('', ...(ngDevMode ? [{ debugName: "safeSvg" }] : /* istanbul ignore next */ []));
+    sizeMap = SIZE_MAP;
+    constructor() {
+        effect(() => {
+            const raw = this.registry.getIcon(this.name());
+            this.safeSvg.set(raw ? this.sanitizer.bypassSecurityTrustHtml(raw) : '');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuseIconComponent, isStandalone: true, selector: "fuse-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  [innerHTML]=\"safeSvg()\"\n  [style.display]=\"'inline-flex'\"\n  [style.color]=\"color()\"\n  [style.width.px]=\"sizeMap[size()]\"\n  [style.height.px]=\"sizeMap[size()]\"\n  aria-hidden=\"true\">\n</span>\n", styles: [":host{--fuse-icon-color: currentColor;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}:host span{display:inline-flex;align-items:center;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [innerHTML]=\"safeSvg()\"\n  [style.display]=\"'inline-flex'\"\n  [style.color]=\"color()\"\n  [style.width.px]=\"sizeMap[size()]\"\n  [style.height.px]=\"sizeMap[size()]\"\n  aria-hidden=\"true\">\n</span>\n", styles: [":host{--fuse-icon-color: currentColor;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}:host span{display:inline-flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuseIconComponent };
+//# sourceMappingURL=fuse_ui-icon.mjs.map

package/fesm2022/fuse_ui-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-icon.mjs","sources":["../../../../packages/icon/src/lib/icon/fuse-icon.component.ts","../../../../packages/icon/src/lib/icon/fuse-icon.component.html","../../../../packages/icon/src/fuse_ui-icon.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { FuseIconRegistryService } from '@fuse_ui/core';\n\nconst SIZE_MAP: Record<string, number> = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n};\n\n@Component({\n  selector: 'fuse-icon',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-icon.component.html',\n  styleUrl: './fuse-icon.component.scss',\n})\nexport class FuseIconComponent {\n  /** Name of the icon registered in FuseIconRegistryService. Required. */\n  readonly name = input.required<string>();\n\n  /** Size variant, maps to pixel dimensions. */\n  readonly size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** CSS colour value applied to the icon stroke/fill. Defaults to currentColor. */\n  readonly color = input('currentColor');\n\n  private readonly sanitizer = inject(DomSanitizer);\n  private readonly registry = inject(FuseIconRegistryService);\n\n  protected readonly safeSvg = signal<SafeHtml>('');\n\n  readonly sizeMap = SIZE_MAP;\n\n  constructor() {\n    effect(() => {\n      const raw = this.registry.getIcon(this.name());\n      this.safeSvg.set(raw ? this.sanitizer.bypassSecurityTrustHtml(raw) : '');\n    });\n  }\n}\n","<span\n  [innerHTML]=\"safeSvg()\"\n  [style.display]=\"'inline-flex'\"\n  [style.color]=\"color()\"\n  [style.width.px]=\"sizeMap[size()]\"\n  [style.height.px]=\"sizeMap[size()]\"\n  aria-hidden=\"true\">\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAWA,MAAM,QAAQ,GAA2B;AACvC,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;CACP;MAUY,iBAAiB,CAAA;;AAEnB,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAU;;AAG/B,IAAA,IAAI,GAAG,KAAK,CAAmC,IAAI,2EAAC;;AAGpD,IAAA,KAAK,GAAG,KAAK,CAAC,cAAc,4EAAC;AAErB,IAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;AAChC,IAAA,QAAQ,GAAG,MAAM,CAAC,uBAAuB,CAAC;AAExC,IAAA,OAAO,GAAG,MAAM,CAAW,EAAE,8EAAC;IAExC,OAAO,GAAG,QAAQ;AAE3B,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC9C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAC1E,QAAA,CAAC,CAAC;IACJ;uGAtBW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,kbC3B9B,2NAQA,EAAA,MAAA,EAAA,CAAA,6MAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDmBa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,cACT,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2NAAA,EAAA,MAAA,EAAA,CAAA,6MAAA,CAAA,EAAA;;;AEvBjD;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@fuse_ui/icon",
+  "version": "0.0.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "fuse-ui",
+    "angular",
+    "ionic",
+    "ionic8",
+    "angular18",
+    "angular19",
+    "angular20",
+    "angular21",
+    "ui-components",
+    "design-system",
+    "css-variables",
+    "signals",
+    "standalone",
+    "multi-theme",
+    "dark-mode",
+    "fluid-typography",
+    "animated"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@angular/common": ">=18.0.0",
+    "rxjs": ">=7.4.0",
+    "@angular/platform-browser": "21.1.1",
+    "@fuse_ui/core": "0.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@ionic/angular": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "**/*.scss"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "module": "fesm2022/fuse_ui-icon.mjs",
+  "typings": "types/fuse_ui-icon.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/fuse_ui-icon.d.ts",
+      "default": "./fesm2022/fuse_ui-icon.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/fuse_ui-icon.d.ts

@@ -0,0 +1,20 @@
+import * as _angular_core from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+declare class FuseIconComponent {
+    /** Name of the icon registered in FuseIconRegistryService. Required. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Size variant, maps to pixel dimensions. */
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+    /** CSS colour value applied to the icon stroke/fill. Defaults to currentColor. */
+    readonly color: _angular_core.InputSignal<string>;
+    private readonly sanitizer;
+    private readonly registry;
+    protected readonly safeSvg: _angular_core.WritableSignal<SafeHtml>;
+    readonly sizeMap: Record<string, number>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseIconComponent, "fuse-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { FuseIconComponent };