@tociva/tailng-icons 0.1.0

package/README.md

@@ -0,0 +1,18 @@
+# @tociva/tailng-icons
+
+Angular icon components and utilities for Tailng.
+
+This package provides a lightweight, tree-shakable icon system built for
+modern Angular applications. Icons are rendered using SVG and styled via
+`currentColor`, making them fully compatible with Tailwind CSS.
+
+## Features
+- Standalone Angular icon component
+- Signal-based API
+- Tree-shakable icon definitions
+- `currentColor`-based SVG icons
+- No CSS or styling opinions
+
+## Installation
+```bash
+npm install @tociva/tailng-icons

package/fesm2022/tociva-tailng-icons.mjs

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
+import { NgIconComponent } from '@ng-icons/core';
+
+class TailngIconComponent {
+    /** Icon name from @ng-icons registry */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * Size:
+     * - number => px
+     * - string => passed as-is (e.g. '1em', '20px', '1.25rem')
+     */
+    size = input('1em', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Additional classes for host element */
+    klass = input('', ...(ngDevMode ? [{ debugName: "klass" }] : []));
+    /**
+     * Accessibility:
+     * - decorative=true => aria-hidden (default)
+     * - decorative=false => aria-label is recommended
+     */
+    decorative = input(true, { ...(ngDevMode ? { debugName: "decorative" } : {}), transform: booleanAttribute });
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    normalizedSize = computed(() => {
+        const s = this.size();
+        return typeof s === 'number' ? `${s}px` : s;
+    }, ...(ngDevMode ? [{ debugName: "normalizedSize" }] : []));
+    classes = computed(() => {
+        const extra = this.klass().trim();
+        return ['inline-flex', 'align-middle', extra].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    ariaHidden = computed(() => (this.decorative() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
+    computedAriaLabel = computed(() => {
+        if (this.decorative())
+            return null;
+        const label = this.ariaLabel().trim();
+        return label || null;
+    }, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TailngIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TailngIconComponent, isStandalone: true, selector: "tng-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, klass: { classPropertyName: "klass", publicName: "klass", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-icon\n  [name]=\"name()\"\n  [size]=\"normalizedSize()\"\n  [class]=\"classes()\"\n  [attr.aria-hidden]=\"ariaHidden()\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n></ng-icon>\n", dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TailngIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-icon', standalone: true, imports: [NgIconComponent], template: "<ng-icon\n  [name]=\"name()\"\n  [size]=\"normalizedSize()\"\n  [class]=\"classes()\"\n  [attr.aria-hidden]=\"ariaHidden()\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n></ng-icon>\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], klass: [{ type: i0.Input, args: [{ isSignal: true, alias: "klass", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TailngIconComponent };
+//# sourceMappingURL=tociva-tailng-icons.mjs.map

package/fesm2022/tociva-tailng-icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tociva-tailng-icons.mjs","sources":["../../../../libs/icons/src/icon/icon.component.ts","../../../../libs/icons/src/icon/icon.component.html","../../../../libs/icons/src/tociva-tailng-icons.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { NgIconComponent } from '@ng-icons/core';\nimport { booleanAttribute } from '@angular/core';\n\ntype TailngIconSize = number | string;\n\n@Component({\n  selector: 'tng-icon',\n  standalone: true,\n  imports: [NgIconComponent],\n  templateUrl: './icon.component.html',\n})\nexport class TailngIconComponent {\n  /** Icon name from @ng-icons registry */\n  name = input.required<string>();\n\n  /**\n   * Size:\n   * - number => px\n   * - string => passed as-is (e.g. '1em', '20px', '1.25rem')\n   */\n  size = input<TailngIconSize>('1em');\n\n  /** Additional classes for host element */\n  klass = input<string>('');\n\n  /**\n   * Accessibility:\n   * - decorative=true => aria-hidden (default)\n   * - decorative=false => aria-label is recommended\n   */\n  decorative = input(true, { transform: booleanAttribute });\n  ariaLabel = input<string>('');\n\n  readonly normalizedSize = computed(() => {\n    const s = this.size();\n    return typeof s === 'number' ? `${s}px` : s;\n  });\n\n  readonly classes = computed(() => {\n    const extra = this.klass().trim();\n    return ['inline-flex', 'align-middle', extra].filter(Boolean).join(' ');\n  });\n\n  readonly ariaHidden = computed(() => (this.decorative() ? 'true' : null));\n\n  readonly computedAriaLabel = computed(() => {\n    if (this.decorative()) return null;\n    const label = this.ariaLabel().trim();\n    return label || null;\n  });\n}\n","<ng-icon\n  [name]=\"name()\"\n  [size]=\"normalizedSize()\"\n  [class]=\"classes()\"\n  [attr.aria-hidden]=\"ariaHidden()\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n></ng-icon>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAYa,mBAAmB,CAAA;;AAE9B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;AAE/B;;;;AAIG;AACH,IAAA,IAAI,GAAG,KAAK,CAAiB,KAAK,gDAAC;;AAGnC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC;AAEzB;;;;AAIG;IACH,UAAU,GAAG,KAAK,CAAC,IAAI,uDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACzD,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,qDAAC;AAEpB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AACtC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;AACrB,QAAA,OAAO,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAA,EAAG,CAAC,CAAA,EAAA,CAAI,GAAG,CAAC;AAC7C,IAAA,CAAC,0DAAC;AAEO,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE;AACjC,QAAA,OAAO,CAAC,aAAa,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACzE,IAAA,CAAC,mDAAC;IAEO,UAAU,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAEhE,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;QACzC,IAAI,IAAI,CAAC,UAAU,EAAE;AAAE,YAAA,OAAO,IAAI;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE;QACrC,OAAO,KAAK,IAAI,IAAI;AACtB,IAAA,CAAC,6DAAC;uGAtCS,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZhC,0LAOA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGd,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,OAAA,EACP,CAAC,eAAe,CAAC,EAAA,QAAA,EAAA,0LAAA,EAAA;;;AET5B;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@tociva/tailng-icons",
+  "version": "0.1.0",
+  "description": "Angular icon components for Tailng",
+  "license": "MIT",
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/core": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@ng-icons/core": "^30.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0"
+  },
+  "module": "fesm2022/tociva-tailng-icons.mjs",
+  "typings": "types/tociva-tailng-icons.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/tociva-tailng-icons.d.ts",
+      "default": "./fesm2022/tociva-tailng-icons.mjs"
+    }
+  }
+}

package/types/tociva-tailng-icons.d.ts

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+
+type TailngIconSize = number | string;
+declare class TailngIconComponent {
+    /** Icon name from @ng-icons registry */
+    name: _angular_core.InputSignal<string>;
+    /**
+     * Size:
+     * - number => px
+     * - string => passed as-is (e.g. '1em', '20px', '1.25rem')
+     */
+    size: _angular_core.InputSignal<TailngIconSize>;
+    /** Additional classes for host element */
+    klass: _angular_core.InputSignal<string>;
+    /**
+     * Accessibility:
+     * - decorative=true => aria-hidden (default)
+     * - decorative=false => aria-label is recommended
+     */
+    decorative: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    readonly normalizedSize: _angular_core.Signal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    readonly ariaHidden: _angular_core.Signal<string>;
+    readonly computedAriaLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailngIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailngIconComponent, "tng-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "klass": { "alias": "klass"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { TailngIconComponent };