@i316/angular 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rahil316
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,22 @@
-# Temporary Holding Version
+# @i316/angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Angular directive behind every i316 Angular icon package. You normally don't install it directly: each collection package depends on it and re-exports it.
+
+- Solar: `@i316/solar-angular` (`<svg solarIcon …>`)
+- Phosphor: `@i316/phosphor-angular` (`<svg phosphorIcon …>`)
+- Heroicons: `@i316/heroicons-angular` (`<svg heroIcon …>`)
+- Lucide: `@i316/lucide-angular` (`<svg lucideIcon …>`)
+
+The directive answers to any of these attributes, so icons from several collections can share one template: `svg[i316]`, `svg[solarIcon]`, `svg[phosphorIcon]`, `svg[heroIcon]`, `svg[lucideIcon]`.
+
+```ts
+import { i316, providei316 } from '@i316/angular';
+
+bootstrapApplication(App, { providers: [providei316({ size: 20 })] });
+```
+
+Peer dependency: `@angular/core >= 17`. It's compiled in Angular's partial (linker) format, so it works in apps on Angular 17 and later.
+
+## License
+
+MIT, © 2026 rahil316. This package contains no icon artwork; each collection package carries its own icon license.

package/index.d.ts

@@ -0,0 +1,55 @@
+import { InjectionToken, OnChanges, Provider } from "@angular/core";
+import * as i0 from "@angular/core";
+export type i316Node = [tag: string, attrs: Record<string, string>, children?: i316Node[]];
+export interface i316Data {
+    displayName: string;
+    className: string;
+    stroke: boolean;
+    duotone: boolean;
+    attrs: Record<string, string>;
+    nodes: i316Node[];
+}
+export interface i316Defaults {
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number | string;
+    secondaryColor?: string;
+    secondaryOpacity?: number | string;
+    /** Added to every icon's class list. */
+    className?: string;
+}
+export declare const i316_DEFAULTS: InjectionToken<i316Defaults>;
+/**
+ * Default inputs for every icon in scope. Use in `bootstrapApplication`/route
+ * providers for the whole app, or in a component's `providers` for a subtree;
+ * nested providers merge over their parent's values.
+ */
+export declare function providei316(defaults: i316Defaults): Provider;
+export declare class i316 implements OnChanges {
+    /** Icon data, e.g. `BellLinear` from a collection package. */
+    icon: i316Data;
+    /** Width and height. Default 24. */
+    size?: number | string;
+    /** Replaces the icon's theme color. Default `currentColor`. */
+    color?: string;
+    /** Overrides the stroke width on stroke-based styles; ignored on fill-based styles. */
+    strokeWidth?: number | string;
+    /** Color of the translucent layer on duotone styles; ignored elsewhere. */
+    secondaryColor?: string;
+    /** Opacity of the translucent layer on duotone styles; ignored elsewhere. */
+    secondaryOpacity?: number | string;
+    /** Accessible name: renders a `<title>` and sets `role="img"`; otherwise the icon is `aria-hidden`. */
+    title?: string;
+    private readonly host;
+    private readonly renderer;
+    private readonly defaults;
+    private renderedNodes;
+    private renderedAttrs;
+    private renderedClasses;
+    ngOnChanges(): void;
+    private render;
+    private append;
+    private createNode;
+    static ɵfac: i0.ɵɵFactoryDeclaration<i316, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<i316, "svg[i316], svg[solarIcon], svg[phosphorIcon], svg[heroIcon], svg[lucideIcon]", never, { "icon": { "alias": "icon"; "required": true; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "secondaryColor": { "alias": "secondaryColor"; "required": false; }; "secondaryOpacity": { "alias": "secondaryOpacity"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, {}, never, never, true, never>;
+}

package/index.js

@@ -0,0 +1,139 @@
+// Source of @i316/angular: the one compiled piece of i316's
+// Angular support. Every collection's Angular package is plain icon data that
+// this single directive renders, so using several collections in one template
+// never puts two directives on the same <svg>. Built by build-angular-core.mjs
+// (Angular's compiler in partial mode); the selector list below is generated
+// from scripts/package/collections.mjs.
+import { Directive, ElementRef, InjectionToken, Input, Renderer2, inject } from "@angular/core";
+import * as i0 from "@angular/core";
+export const i316_DEFAULTS = new InjectionToken("i316_DEFAULTS");
+/**
+ * Default inputs for every icon in scope. Use in `bootstrapApplication`/route
+ * providers for the whole app, or in a component's `providers` for a subtree;
+ * nested providers merge over their parent's values.
+ */
+export function providei316(defaults) {
+    return {
+        provide: i316_DEFAULTS,
+        useFactory: () => ({ ...(inject(i316_DEFAULTS, { skipSelf: true, optional: true }) ?? {}), ...defaults }),
+    };
+}
+const SVG_NS = "svg";
+export class i316 {
+    constructor() {
+        this.host = inject(ElementRef).nativeElement;
+        this.renderer = inject(Renderer2);
+        this.defaults = inject(i316_DEFAULTS, { optional: true }) ?? {};
+        this.renderedNodes = [];
+        this.renderedAttrs = new Set();
+        this.renderedClasses = [];
+    }
+    ngOnChanges() {
+        this.render();
+    }
+    render() {
+        const { renderer, host, defaults } = this;
+        for (const node of this.renderedNodes)
+            renderer.removeChild(host, node);
+        for (const name of this.renderedClasses)
+            renderer.removeClass(host, name);
+        this.renderedNodes = [];
+        if (!this.icon)
+            return;
+        const paint = {
+            color: this.color ?? defaults.color ?? "currentColor",
+            strokeWidth: this.icon.stroke ? (this.strokeWidth ?? defaults.strokeWidth) : undefined,
+            secondary: this.icon.duotone
+                ? { color: this.secondaryColor ?? defaults.secondaryColor, opacity: this.secondaryOpacity ?? defaults.secondaryOpacity }
+                : null,
+        };
+        const size = String(this.size ?? defaults.size ?? 24);
+        const labelled = this.title != null || hostHasOwnLabel(host, this.renderedAttrs);
+        const attrs = {
+            ...resolveAttrs(this.icon.attrs, paint, false),
+            width: size,
+            height: size,
+            ...(labelled ? {} : { "aria-hidden": "true" }),
+            ...(this.title != null ? { role: "img" } : {}),
+        };
+        for (const name of this.renderedAttrs)
+            if (!(name in attrs))
+                renderer.removeAttribute(host, name);
+        for (const [name, value] of Object.entries(attrs))
+            renderer.setAttribute(host, name, value);
+        this.renderedAttrs = new Set(Object.keys(attrs));
+        this.renderedClasses = [...this.icon.className.split(" "), ...(defaults.className?.split(" ") ?? [])].filter(Boolean);
+        for (const name of this.renderedClasses)
+            renderer.addClass(host, name);
+        if (this.title != null) {
+            const title = renderer.createElement("title", SVG_NS);
+            renderer.appendChild(title, renderer.createText(this.title));
+            this.append(title);
+        }
+        for (const node of this.icon.nodes)
+            this.append(this.createNode(node, paint, false));
+    }
+    append(node) {
+        this.renderer.appendChild(this.host, node);
+        this.renderedNodes.push(node);
+    }
+    createNode([tag, attrs, children], paint, inSecondary) {
+        const element = this.renderer.createElement(tag, SVG_NS);
+        for (const [name, value] of Object.entries(resolveAttrs(attrs, paint, inSecondary))) {
+            this.renderer.setAttribute(element, name, value);
+        }
+        const secondaryHere = Boolean(paint.secondary) && (inSecondary || attrs["opacity"] != null);
+        for (const child of children ?? [])
+            this.renderer.appendChild(element, this.createNode(child, paint, secondaryHere));
+        return element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: i316, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: i316, isStandalone: true, selector: "svg[i316], svg[solarIcon], svg[phosphorIcon], svg[heroIcon], svg[lucideIcon]", inputs: { icon: "icon", size: "size", color: "color", strokeWidth: "strokeWidth", secondaryColor: "secondaryColor", secondaryOpacity: "secondaryOpacity", title: "title" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: i316, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "svg[i316], svg[solarIcon], svg[phosphorIcon], svg[heroIcon], svg[lucideIcon]",
+                    standalone: true,
+                }]
+        }], propDecorators: { icon: [{
+                type: Input,
+                args: [{ required: true }]
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], secondaryColor: [{
+                type: Input
+            }], secondaryOpacity: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+/** An aria-* or role attribute the author set (not one this directive set on a previous render). */
+function hostHasOwnLabel(host, renderedAttrs) {
+    for (const { name } of Array.from(host.attributes)) {
+        if ((name.startsWith("aria-") || name === "role") && !renderedAttrs.has(name))
+            return true;
+    }
+    return false;
+}
+// `inSecondary`: an ancestor is the translucent layer (e.g. <g opacity="0.5"> wrapping paths).
+function resolveAttrs(attrs, paint, inSecondary) {
+    const out = {};
+    const isSecondary = Boolean(paint.secondary) && (inSecondary || attrs["opacity"] != null);
+    for (const [key, value] of Object.entries(attrs)) {
+        if ((key === "fill" || key === "stroke") && value === "currentColor") {
+            out[key] = isSecondary ? (paint.secondary.color ?? paint.color) : paint.color;
+        }
+        else if (key === "stroke-width" && paint.strokeWidth != null)
+            out[key] = String(paint.strokeWidth);
+        else if (key === "opacity" && isSecondary && paint.secondary.opacity != null)
+            out[key] = String(paint.secondary.opacity);
+        else
+            out[key] = value;
+    }
+    return out;
+}

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@i316/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "i316: the Angular directive that renders every i316 collection.",
+  "keywords": [
+    "i316",
+    "icon316",
+    "icons",
+    "angular",
+    "svg"
+  ],
+  "license": "MIT",
+  "author": "rahil316",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.d.ts",
+    "index.js"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=17"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}