@loomui-ng/ui 0.0.0-stage → 0.1.1

package/fesm2022/loomui-ng-ui-icon.mjs

@@ -0,0 +1,498 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, inject, input, numberAttribute, signal } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, Circle, CircleAlert, CircleCheck, Ellipsis, GripVertical, Info, LoaderCircle, Minus, OctagonX, PanelLeft, Search, SlidersHorizontal, TriangleAlert, X } from "lucide";
+import { cn } from "@loomui-ng/ui/utils";
+function toKebab(name) {
+	return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/([a-zA-Z])([0-9])/g, "$1-$2").toLowerCase();
+}
+function toPascal(name) {
+	return name.split("-").map((s) => s ? s[0].toUpperCase() + s.slice(1) : s).join("");
+}
+const registry = signal({}, ...ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []);
+function registerIcons(icons) {
+	const next = { ...registry() };
+	for (const [k, v] of Object.entries(icons)) next[toKebab(k)] = v;
+	registry.set(next);
+}
+const LIB_ICONS = {
+	ArrowDown,
+	ArrowLeft,
+	ArrowRight,
+	ArrowUp,
+	ArrowUpDown,
+	Calendar,
+	Check,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronUp,
+	ChevronsUpDown,
+	Circle,
+	CircleAlert,
+	CircleCheck,
+	Ellipsis,
+	GripVertical,
+	Info,
+	LoaderCircle,
+	Minus,
+	OctagonX,
+	PanelLeft,
+	Search,
+	SlidersHorizontal,
+	TriangleAlert,
+	X
+};
+registerIcons(LIB_ICONS);
+const esc = (v) => v.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+function iconChildren(node) {
+	return node.map(([tag, attrs]) => `<${tag}${Object.entries(attrs).filter(([k, v]) => k !== "key" && v !== void 0).map(([k, v]) => ` ${k}="${esc(String(v))}"`).join("")}/>`).join("");
+}
+function iconToSvg(node, opts = {}) {
+	const { size = 24, strokeWidth = 2, color = "currentColor" } = opts;
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${iconChildren(node)}</svg>`;
+}
+var UiIcon = class UiIcon {
+	sanitizer = inject(DomSanitizer);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	size = input(void 0, {
+		...ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {},
+		transform: (v) => v === void 0 || v === null || v === "" ? void 0 : numberAttribute(v)
+	});
+	strokeWidth = input(2, {
+		...ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	absoluteStrokeWidth = input(false, {
+		...ngDevMode ? { debugName: "absoluteStrokeWidth" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	color = input("currentColor", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	node = computed(() => this.icon() ?? registry()[toKebab(this.name())] ?? null, ...ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []);
+	sw = computed(() => this.absoluteStrokeWidth() ? this.strokeWidth() * 24 / (this.size() ?? 16) : this.strokeWidth(), ...ngDevMode ? [{ debugName: "sw" }] : /* istanbul ignore next */ []);
+	html = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.node() ? iconChildren(this.node()) : ""), ...ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("inline-flex shrink-0 items-center justify-center", this.size() === void 0 && "size-4", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiIcon,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiIcon,
+		isStandalone: true,
+		selector: "ui-icon",
+		inputs: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				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
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "icon" },
+			properties: {
+				"attr.aria-hidden": "label() ? null : \"true\"",
+				"attr.role": "label() ? \"img\" : null",
+				"attr.aria-label": "label() || null",
+				"style.width.px": "size()",
+				"style.height.px": "size()",
+				"attr.class": "classes()"
+			}
+		},
+		ngImport: i0,
+		template: `<svg
+    class="size-full"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    [attr.stroke]="color()"
+    [attr.stroke-width]="sw()"
+    [innerHTML]="html()"
+  ></svg>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiIcon,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-icon",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "icon",
+				"[attr.aria-hidden]": "label() ? null : \"true\"",
+				"[attr.role]": "label() ? \"img\" : null",
+				"[attr.aria-label]": "label() || null",
+				"[style.width.px]": "size()",
+				"[style.height.px]": "size()",
+				"[attr.class]": "classes()"
+			},
+			template: `<svg
+    class="size-full"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    [attr.stroke]="color()"
+    [attr.stroke-width]="sw()"
+    [innerHTML]="html()"
+  ></svg>`
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		absoluteStrokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "absoluteStrokeWidth",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiIconSvg = class UiIconSvg {
+	sanitizer = inject(DomSanitizer);
+	name = input("", {
+		...ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {},
+		alias: "uiIcon"
+	});
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	size = input(void 0, {
+		...ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {},
+		transform: (v) => v === void 0 || v === null || v === "" ? void 0 : numberAttribute(v)
+	});
+	strokeWidth = input(2, {
+		...ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	absoluteStrokeWidth = input(false, {
+		...ngDevMode ? { debugName: "absoluteStrokeWidth" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	color = input("currentColor", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	node = computed(() => this.icon() ?? registry()[toKebab(this.name())] ?? null, ...ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []);
+	sw = computed(() => this.absoluteStrokeWidth() ? this.strokeWidth() * 24 / (this.size() ?? 16) : this.strokeWidth(), ...ngDevMode ? [{ debugName: "sw" }] : /* istanbul ignore next */ []);
+	html = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.node() ? iconChildren(this.node()) : ""), ...ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(this.size() === void 0 && "size-4", this.userClass()) || null, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiIconSvg,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiIconSvg,
+		isStandalone: true,
+		selector: "svg[uiIcon]",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "uiIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				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
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "icon",
+				"viewBox": "0 0 24 24",
+				"fill": "none",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			},
+			properties: {
+				"attr.stroke": "color()",
+				"attr.stroke-width": "sw()",
+				"attr.width": "size()",
+				"attr.height": "size()",
+				"attr.aria-hidden": "label() ? null : \"true\"",
+				"attr.role": "label() ? \"img\" : null",
+				"attr.aria-label": "label() || null",
+				"innerHTML": "html()",
+				"attr.class": "classes()"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiIconSvg,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "svg[uiIcon]",
+			host: {
+				"data-slot": "icon",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"[attr.stroke]": "color()",
+				"[attr.stroke-width]": "sw()",
+				"[attr.width]": "size()",
+				"[attr.height]": "size()",
+				"[attr.aria-hidden]": "label() ? null : \"true\"",
+				"[attr.role]": "label() ? \"img\" : null",
+				"[attr.aria-label]": "label() || null",
+				"[innerHTML]": "html()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uiIcon",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		absoluteStrokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "absoluteStrokeWidth",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_ICON = [UiIcon, UiIconSvg];
+export { LIB_ICONS, UI_ICON, UiIcon, UiIconSvg, iconChildren, iconToSvg, registerIcons, toKebab, toPascal };
+
+//# sourceMappingURL=loomui-ng-ui-icon.mjs.map

package/fesm2022/loomui-ng-ui-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-icon.mjs","names":[],"sources":["../../../libs/ui/icon/icon.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, Directive, inject, input, numberAttribute, signal } from '@angular/core';\nimport { DomSanitizer, type SafeHtml } from '@angular/platform-browser';\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  ArrowUpDown,\n  Calendar,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  ChevronsUpDown,\n  Circle,\n  CircleAlert,\n  CircleCheck,\n  Ellipsis,\n  GripVertical,\n  Info,\n  LoaderCircle,\n  Minus,\n  OctagonX,\n  PanelLeft,\n  Search,\n  SlidersHorizontal,\n  TriangleAlert,\n  X,\n} from 'lucide';\nimport { cn } from '@loomui-ng/ui/utils';\n\n/** Lucide's icon node format: a list of [tag, attributes] pairs describing the SVG children. */\nexport type IconNode = [tag: string, attrs: Record<string, string | number | undefined>][];\n\n/** `ChevronDown` / `chevron-down` → `chevron-down` (Lucide's canonical name). */\nexport function toKebab(name: string): string {\n  return name\n    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')\n    .replace(/([a-zA-Z])([0-9])/g, '$1-$2')\n    .toLowerCase();\n}\n\n/** `chevron-down` → `ChevronDown` (the export name in the `lucide` package). */\nexport function toPascal(name: string): string {\n  return name\n    .split('-')\n    .map((s) => (s ? s[0].toUpperCase() + s.slice(1) : s))\n    .join('');\n}\n\nconst registry = signal<Record<string, IconNode>>({});\n\n/**\n * Registers icons so they can be used by name: `registerIcons({ Search, Moon })` then `<ui-icon name=\"search\" />`.\n * Keys may be PascalCase export names or kebab-case names. Importing only the icons you use keeps bundles small.\n */\nexport function registerIcons(icons: Record<string, IconNode>): void {\n  const next = { ...registry() };\n  for (const [k, v] of Object.entries(icons)) next[toKebab(k)] = v;\n  registry.set(next);\n}\n\n/** Icons the Loom UI components render themselves (chevrons, check, x, …). Registered on first import. */\nexport const LIB_ICONS: Record<string, IconNode> = {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  ArrowUpDown,\n  Calendar,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  ChevronsUpDown,\n  Circle,\n  CircleAlert,\n  CircleCheck,\n  Ellipsis,\n  GripVertical,\n  Info,\n  LoaderCircle,\n  Minus,\n  OctagonX,\n  PanelLeft,\n  Search,\n  SlidersHorizontal,\n  TriangleAlert,\n  X,\n};\nregisterIcons(LIB_ICONS);\n\nconst esc = (v: string) => v.replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;');\n\n/** Serialises an icon node to the SVG children markup (all values escaped). */\nexport function iconChildren(node: IconNode): string {\n  return node\n    .map(([tag, attrs]) => `<${tag}${Object.entries(attrs).filter(([k, v]) => k !== 'key' && v !== undefined).map(([k, v]) => ` ${k}=\"${esc(String(v))}\"`).join('')}/>`)\n    .join('');\n}\n\n/** A complete standalone `<svg>` string (what Lucide's own `lucide-static` files look like). */\nexport function iconToSvg(node: IconNode, opts: { size?: number; strokeWidth?: number; color?: string } = {}): string {\n  const { size = 24, strokeWidth = 2, color = 'currentColor' } = opts;\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${size}\" height=\"${size}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${color}\" stroke-width=\"${strokeWidth}\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${iconChildren(node)}</svg>`;\n}\n\n/**\n * Lucide icon.\n *   <ui-icon name=\"search\" />                 — by name (see registerIcons)\n *   <ui-icon [icon]=\"Search\" size=\"20\" />     — by node (`import { Search } from 'lucide'`, tree-shakeable)\n * Defaults to 16px (`size-4`, the shadcn convention); set `size`, or a size class such as class=\"size-6\".\n * Decorative by default (aria-hidden); pass `label` to expose it as an image.\n */\n@Component({\n  selector: 'ui-icon',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'data-slot': 'icon',\n    '[attr.aria-hidden]': 'label() ? null : \"true\"',\n    '[attr.role]': 'label() ? \"img\" : null',\n    '[attr.aria-label]': 'label() || null',\n    '[style.width.px]': 'size()',\n    '[style.height.px]': 'size()',\n    '[attr.class]': 'classes()',\n  },\n  template: `<svg\n    class=\"size-full\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    [attr.stroke]=\"color()\"\n    [attr.stroke-width]=\"sw()\"\n    [innerHTML]=\"html()\"\n  ></svg>`,\n})\nexport class UiIcon {\n  private readonly sanitizer = inject(DomSanitizer);\n  /** An icon node (preferred; tree-shakeable). */\n  readonly icon = input<IconNode | null | undefined>(null);\n  /** A registered icon name (kebab or Pascal case). */\n  readonly name = input<string>('');\n  /** Pixel size; when omitted the icon is `size-4` (override with a class). */\n  readonly size = input<number | undefined, unknown>(undefined, { transform: (v: unknown) => (v === undefined || v === null || v === '' ? undefined : numberAttribute(v)) });\n  readonly strokeWidth = input(2, { transform: numberAttribute });\n  /** Keeps the stroke the same pixel width regardless of size (Lucide's absoluteStrokeWidth). */\n  readonly absoluteStrokeWidth = input(false, { transform: booleanAttribute });\n  readonly color = input('currentColor');\n  readonly label = input('');\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  protected readonly node = computed<IconNode | null>(() => this.icon() ?? registry()[toKebab(this.name())] ?? null);\n  protected readonly sw = computed(() => (this.absoluteStrokeWidth() ? (this.strokeWidth() * 24) / (this.size() ?? 16) : this.strokeWidth()));\n  protected readonly html = computed<SafeHtml>(() => this.sanitizer.bypassSecurityTrustHtml(this.node() ? iconChildren(this.node()!) : ''));\n  protected readonly classes = computed(() => cn('inline-flex shrink-0 items-center justify-center', this.size() === undefined && 'size-4', this.userClass()));\n}\n\n/**\n * Same icons rendered onto a real <svg> element, so parent selectors such as `[&>svg]:size-4` and `has-[>svg]` keep working:\n *   <svg uiIcon=\"chevron-down\" class=\"size-4\"></svg>      <svg uiIcon [icon]=\"Search\"></svg>\n * This is what the Loom UI components use internally.\n */\n@Directive({\n  selector: 'svg[uiIcon]',\n  host: {\n    'data-slot': 'icon',\n    viewBox: '0 0 24 24',\n    fill: 'none',\n    'stroke-linecap': 'round',\n    'stroke-linejoin': 'round',\n    '[attr.stroke]': 'color()',\n    '[attr.stroke-width]': 'sw()',\n    '[attr.width]': 'size()',\n    '[attr.height]': 'size()',\n    '[attr.aria-hidden]': 'label() ? null : \"true\"',\n    '[attr.role]': 'label() ? \"img\" : null',\n    '[attr.aria-label]': 'label() || null',\n    '[innerHTML]': 'html()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiIconSvg {\n  private readonly sanitizer = inject(DomSanitizer);\n  readonly name = input<string>('', { alias: 'uiIcon' });\n  readonly icon = input<IconNode | null | undefined>(null);\n  readonly size = input<number | undefined, unknown>(undefined, { transform: (v: unknown) => (v === undefined || v === null || v === '' ? undefined : numberAttribute(v)) });\n  readonly strokeWidth = input(2, { transform: numberAttribute });\n  readonly absoluteStrokeWidth = input(false, { transform: booleanAttribute });\n  readonly color = input('currentColor');\n  readonly label = input('');\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  protected readonly node = computed<IconNode | null>(() => this.icon() ?? registry()[toKebab(this.name())] ?? null);\n  protected readonly sw = computed(() => (this.absoluteStrokeWidth() ? (this.strokeWidth() * 24) / (this.size() ?? 16) : this.strokeWidth()));\n  protected readonly html = computed<SafeHtml>(() => this.sanitizer.bypassSecurityTrustHtml(this.node() ? iconChildren(this.node()!) : ''));\n  protected readonly classes = computed(() => cn(this.size() === undefined && 'size-4', this.userClass()) || null);\n}\n\nexport const UI_ICON = [UiIcon, UiIconSvg] as const;\n"],"mappings":"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"}