minerva-design 1.8.0 → 1.10.0

package/dist/angular/fesm2022/minerva-angular.mjs

@@ -6,6 +6,7 @@ import { FOCUS_SCOPE_UNMOUNT_EVENT, PALETTE_COOKIE_NAME, THEME_COOKIE_NAME, appl
 import { FormGroupDirective, NG_VALUE_ACCESSOR, NgControl, NgForm } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 import { boxplotData, bubbleSeries, createChart, createChart3D, createDepthChart, createGraphChart, createOrderBook, createOrderBookHeatmap, createShapeChart, createTimeAndSales, createTradingChart, ganttSeries, heatmapChartOptions, histogramSeries, quadrantChartOptions, quadrantOf, sparklineOptions, waterfallSeries } from "../../charts/core.js";
+import { createIconCanvas, getIcon } from "../../icons/core.js";
 const injectIsBrowser = () => isPlatformBrowser(inject(PLATFORM_ID));
 const staticInputs = (config = {}) => ({
 	theme: () => config.theme,
@@ -3891,7 +3892,7 @@ const ICONS = {
 		nodes: [["path", { d: "M2 12h3V6h5v12h5V6h5v6h2" }]]
 	}
 };
-var MnIcon = class MnIcon {
+var MnIcon$1 = class MnIcon$1 {
 	constructor() {
 		this.mnIcon = input.required(...ngDevMode ? [{ debugName: "mnIcon" }] : /* istanbul ignore next */ []);
 		this.size = input("1em", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -3902,7 +3903,7 @@ var MnIcon = class MnIcon {
 			minVersion: "12.0.0",
 			version: "22.2.2",
 			ngImport: i0,
-			type: MnIcon,
+			type: MnIcon$1,
 			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -3911,7 +3912,7 @@ var MnIcon = class MnIcon {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
 			version: "22.2.2",
-			type: MnIcon,
+			type: MnIcon$1,
 			isStandalone: true,
 			selector: "svg[mnIcon]",
 			inputs: {
@@ -3985,7 +3986,7 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: MnIcon,
+	type: MnIcon$1,
 	decorators: [{
 		type: Component,
 		args: [{
@@ -4251,7 +4252,7 @@ var MnModal = class MnModal extends MnDialogBase {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -4289,7 +4290,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnModal",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnPortal,
 				NgTemplateOutlet
 			],
@@ -5676,7 +5677,7 @@ var MnAutoComplete = class MnAutoComplete extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -5714,7 +5715,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnAutoComplete",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnPortal,
 				NgTemplateOutlet
 			],
@@ -6623,7 +6624,7 @@ var MnCascaderPanel = class MnCascaderPanel {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -6655,7 +6656,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnCascaderPanel",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				NgTemplateOutlet
 			],
 			encapsulation: ViewEncapsulation.None,
@@ -7497,7 +7498,7 @@ var MnCascader = class MnCascader extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -7547,7 +7548,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnCascader",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnPortal,
 				MnCascaderPanel
 			],
@@ -8358,7 +8359,7 @@ var MnCheckbox = class MnCheckbox extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -8390,7 +8391,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnCheckbox",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				NgTemplateOutlet
 			],
 			encapsulation: ViewEncapsulation.None,
@@ -8925,7 +8926,7 @@ var MnDrawer = class MnDrawer extends MnDialogBase {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -8963,7 +8964,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnDrawer",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnPortal,
 				NgTemplateOutlet
 			],
@@ -10997,7 +10998,7 @@ var MnInput = class MnInput extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -11029,7 +11030,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnInput",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				NgTemplateOutlet
 			],
 			encapsulation: ViewEncapsulation.None,
@@ -11907,7 +11908,7 @@ var MnNumberInput = class MnNumberInput extends MnFormValueControl {
 				]
 			}, {
 				kind: "component",
-				type: MnIcon,
+				type: MnIcon$1,
 				selector: "svg[mnIcon]",
 				inputs: ["mnIcon", "size"]
 			}],
@@ -11926,7 +11927,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "mn-number-input",
 			exportAs: "mnNumberInput",
-			imports: [MnHook, MnIcon],
+			imports: [MnHook, MnIcon$1],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [provideValueAccessor(() => MnNumberInput)],
@@ -13137,7 +13138,7 @@ var MnRadio = class MnRadio {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -13169,7 +13170,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnRadio",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				NgTemplateOutlet
 			],
 			encapsulation: ViewEncapsulation.None,
@@ -14959,7 +14960,7 @@ var MnSelect = class MnSelect extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -14987,7 +14988,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnSelect",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnPortal
 			],
 			encapsulation: ViewEncapsulation.None,
@@ -15359,7 +15360,7 @@ var MnSelectItem = class MnSelectItem {
 				]
 			}, {
 				kind: "component",
-				type: MnIcon,
+				type: MnIcon$1,
 				selector: "svg[mnIcon]",
 				inputs: ["mnIcon", "size"]
 			}],
@@ -15378,7 +15379,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "mn-select-item",
 			exportAs: "mnSelectItem",
-			imports: [MnHook, MnIcon],
+			imports: [MnHook, MnIcon$1],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
@@ -16361,7 +16362,7 @@ var MnTagInput = class MnTagInput extends MnFormValueControl {
 				]
 			}, {
 				kind: "component",
-				type: MnIcon,
+				type: MnIcon$1,
 				selector: "svg[mnIcon]",
 				inputs: ["mnIcon", "size"]
 			}],
@@ -16380,7 +16381,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "mn-tag-input",
 			exportAs: "mnTagInput",
-			imports: [MnHook, MnIcon],
+			imports: [MnHook, MnIcon$1],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [provideValueAccessor(() => MnTagInput)],
@@ -18155,7 +18156,7 @@ var MnTimePicker = class MnTimePicker extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -18203,7 +18204,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnTimePicker",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnPortal,
 				MnTimePickerPanel
 			],
@@ -18703,7 +18704,7 @@ var MnIconButtonPart = class MnIconButtonPart {
 				]
 			}, {
 				kind: "component",
-				type: MnIcon,
+				type: MnIcon$1,
 				selector: "svg[mnIcon]",
 				inputs: ["mnIcon", "size"]
 			}],
@@ -18721,7 +18722,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "div[mnIconButtonPart]",
-			imports: [MnHook, MnIcon],
+			imports: [MnHook, MnIcon$1],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
@@ -19287,7 +19288,7 @@ var MnUpload = class MnUpload extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -19346,7 +19347,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnUpload",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnButton,
 				MnIconButtonPart
 			],
@@ -31855,7 +31856,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-const cssSize = (value) => typeof value === "number" || /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
+const cssSize$1 = (value) => typeof value === "number" || /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
 const optionalBoolean = (value) => value === void 0 || value === null ? void 0 : booleanAttribute(value);
 const CHART_SURFACE = `<div #surface style="position:absolute;inset:0"></div>`;
 var MnChartEngine = class MnChartEngine {
@@ -31868,8 +31869,8 @@ var MnChartEngine = class MnChartEngine {
 		this.engine = signal(null, ...ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []);
 		this.instance = this.engine.asReadonly();
 		this.surface = viewChild.required("surface", ...ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []);
-		this.cssWidth = computed(() => cssSize(this.width() ?? "100%"), ...ngDevMode ? [{ debugName: "cssWidth" }] : /* istanbul ignore next */ []);
-		this.cssHeight = computed(() => cssSize(this.height() ?? this.defaultHeight()), ...ngDevMode ? [{ debugName: "cssHeight" }] : /* istanbul ignore next */ []);
+		this.cssWidth = computed(() => cssSize$1(this.width() ?? "100%"), ...ngDevMode ? [{ debugName: "cssWidth" }] : /* istanbul ignore next */ []);
+		this.cssHeight = computed(() => cssSize$1(this.height() ?? this.defaultHeight()), ...ngDevMode ? [{ debugName: "cssHeight" }] : /* istanbul ignore next */ []);
 		const injector = inject(Injector);
 		let offs = [];
 		afterNextRender(() => {
@@ -40075,6 +40076,708 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const NUMERIC = /^\d+(\.\d+)?$/;
+const cssSize = (value) => typeof value === "number" || NUMERIC.test(value) ? `${value}px` : value;
+const numericSize = (value) => typeof value === "string" && NUMERIC.test(value.trim()) ? Number(value) : value;
+const ICON_TEMPLATE = `
+  @if (definition(); as icon) {
+    @if (renderer() === "svg") {
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        viewBox="0 0 24 24"
+        fill="none"
+        [attr.stroke]="color()"
+        [attr.stroke-width]="strokeWidth()"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        [attr.data-icon]="icon.name"
+        class="minerva-icon"
+        [attr.role]="labelled() ? 'img' : null"
+        [attr.aria-hidden]="labelled() ? null : 'true'"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabelledby() || null"
+      >
+        @if (title()) {
+          <title>{{ title() }}</title>
+        }
+        @for (d of icon.paths; track $index) {
+          <path
+            [attr.d]="d"
+            [attr.vector-effect]="
+              absoluteStrokeWidth() ? 'non-scaling-stroke' : null
+            "
+          />
+        }
+      </svg>
+    } @else {
+      <canvas
+        #canvas
+        class="minerva-icon"
+        [attr.data-icon]="icon.name"
+        [attr.role]="labelled() ? 'img' : null"
+        [attr.aria-hidden]="labelled() ? null : 'true'"
+        [attr.aria-label]="title() || ariaLabel() || null"
+        [attr.aria-labelledby]="ariaLabelledby() || null"
+        [style.display]="'inline-block'"
+        [style.vertical-align]="'middle'"
+        [style.width]="cssSize()"
+        [style.height]="cssSize()"
+      ></canvas>
+    }
+  }
+`;
+var MnIconBase = class MnIconBase {
+	constructor() {
+		this.size = input(24, {
+			...ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {},
+			transform: numericSize
+		});
+		this.color = input("currentColor", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+		this.strokeWidth = input(2, {
+			...ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.absoluteStrokeWidth = input(false, {
+			...ngDevMode ? { debugName: "absoluteStrokeWidth" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.title = input(void 0, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(void 0, {
+			...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+			alias: "aria-label"
+		});
+		this.ariaLabelledby = input(void 0, {
+			...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
+			alias: "aria-labelledby"
+		});
+		this.renderer = input("svg", ...ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []);
+		this.rendererChange = output();
+		this.labelled = computed(() => !!this.title() || !!this.ariaLabel() || !!this.ariaLabelledby(), ...ngDevMode ? [{ debugName: "labelled" }] : /* istanbul ignore next */ []);
+		this.cssSize = computed(() => cssSize(this.size()), ...ngDevMode ? [{ debugName: "cssSize" }] : /* istanbul ignore next */ []);
+		this.canvas = viewChild("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+		this.measured = signal(null, ...ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []);
+		this.factory = signal(null, ...ngDevMode ? [{ debugName: "factory" }] : /* istanbul ignore next */ []);
+		const injector = inject(Injector);
+		let surface = null;
+		let surfaceCanvas = null;
+		let disposed = false;
+		const release = () => {
+			surface?.destroy();
+			surface = null;
+			surfaceCanvas = null;
+		};
+		afterNextRender(() => {
+			effect(() => {
+				if (this.renderer() === "svg" || untracked(this.factory)) return;
+				import("../../icons/engine/surface.js").then(({ createIconSurface }) => {
+					if (!disposed) this.factory.set(createIconSurface);
+				});
+			}, { injector });
+			effect((onCleanup) => {
+				const element = this.canvas()?.nativeElement;
+				const size = this.size();
+				this.measured.set(null);
+				if (!element || typeof size === "number") return;
+				const measure = () => this.measured.set(element.getBoundingClientRect().width);
+				measure();
+				if (typeof ResizeObserver !== "function") return;
+				const observer = new ResizeObserver(measure);
+				observer.observe(element);
+				onCleanup(() => observer.disconnect());
+			}, { injector });
+			effect(() => {
+				const element = this.canvas()?.nativeElement;
+				const create = this.factory();
+				const icon = this.definition();
+				const renderer = this.renderer();
+				const size = this.size();
+				const pixels = typeof size === "number" ? size : this.measured();
+				if (renderer === "svg" || !icon || !element || !create) {
+					release();
+					return;
+				}
+				if (!pixels || pixels <= 0) return;
+				const strokeWidth = this.strokeWidth();
+				const options = {
+					icon,
+					size: pixels,
+					color: this.color(),
+					strokeWidth: this.absoluteStrokeWidth() ? strokeWidth * 24 / pixels : strokeWidth,
+					renderer,
+					onRendererChange: (kind) => this.rendererChange.emit(kind)
+				};
+				untracked(() => {
+					if (surface && surfaceCanvas === element) surface.update(options);
+					else {
+						release();
+						surface = create(element, options);
+						surfaceCanvas = element;
+					}
+				});
+			}, { injector });
+		});
+		inject(DestroyRef).onDestroy(() => {
+			disposed = true;
+			release();
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: MnIconBase,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.2.0",
+			version: "22.2.2",
+			type: MnIconBase,
+			isStandalone: true,
+			inputs: {
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				color: {
+					classPropertyName: "color",
+					publicName: "color",
+					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
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "aria-label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabelledby: {
+					classPropertyName: "ariaLabelledby",
+					publicName: "aria-labelledby",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				renderer: {
+					classPropertyName: "renderer",
+					publicName: "renderer",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { rendererChange: "rendererChange" },
+			host: {
+				properties: {
+					"attr.title": "null",
+					"attr.aria-label": "null",
+					"attr.aria-labelledby": "null"
+				},
+				styleAttribute: "display: contents"
+			},
+			viewQueries: [{
+				propertyName: "canvas",
+				first: true,
+				predicate: ["canvas"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MnIconBase,
+	decorators: [{
+		type: Directive,
+		args: [{ host: {
+			style: "display: contents",
+			"[attr.title]": "null",
+			"[attr.aria-label]": "null",
+			"[attr.aria-labelledby]": "null"
+		} }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		absoluteStrokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "absoluteStrokeWidth",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		renderer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "renderer",
+				required: false
+			}]
+		}],
+		rendererChange: [{
+			type: i0.Output,
+			args: ["rendererChange"]
+		}],
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+var MnIcon = class MnIcon extends MnIconBase {
+	constructor() {
+		super(...arguments);
+		this.icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.definition = computed(() => this.icon(), ...ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: MnIcon,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: MnIcon,
+			isStandalone: true,
+			selector: "mn-icon",
+			inputs: { icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			} },
+			usesInheritance: true,
+			ngImport: i0,
+			template: "\n  @if (definition(); as icon) {\n    @if (renderer() === \"svg\") {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        [attr.stroke]=\"color()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [attr.data-icon]=\"icon.name\"\n        class=\"minerva-icon\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      >\n        @if (title()) {\n          <title>{{ title() }}</title>\n        }\n        @for (d of icon.paths; track $index) {\n          <path\n            [attr.d]=\"d\"\n            [attr.vector-effect]=\"\n              absoluteStrokeWidth() ? 'non-scaling-stroke' : null\n            \"\n          />\n        }\n      </svg>\n    } @else {\n      <canvas\n        #canvas\n        class=\"minerva-icon\"\n        [attr.data-icon]=\"icon.name\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"title() || ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n        [style.display]=\"'inline-block'\"\n        [style.vertical-align]=\"'middle'\"\n        [style.width]=\"cssSize()\"\n        [style.height]=\"cssSize()\"\n      ></canvas>\n    }\n  }\n",
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MnIcon,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "mn-icon",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: ICON_TEMPLATE
+		}]
+	}],
+	propDecorators: { icon: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "icon",
+			required: true
+		}]
+	}] }
+});
+var MnDynamicIcon = class MnDynamicIcon extends MnIconBase {
+	constructor() {
+		super(...arguments);
+		this.name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this.definition = computed(() => getIcon(this.name()) ?? null, ...ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: MnDynamicIcon,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: MnDynamicIcon,
+			isStandalone: true,
+			selector: "mn-dynamic-icon",
+			inputs: { name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			} },
+			usesInheritance: true,
+			ngImport: i0,
+			template: "\n  @if (definition(); as icon) {\n    @if (renderer() === \"svg\") {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        [attr.stroke]=\"color()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [attr.data-icon]=\"icon.name\"\n        class=\"minerva-icon\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      >\n        @if (title()) {\n          <title>{{ title() }}</title>\n        }\n        @for (d of icon.paths; track $index) {\n          <path\n            [attr.d]=\"d\"\n            [attr.vector-effect]=\"\n              absoluteStrokeWidth() ? 'non-scaling-stroke' : null\n            \"\n          />\n        }\n      </svg>\n    } @else {\n      <canvas\n        #canvas\n        class=\"minerva-icon\"\n        [attr.data-icon]=\"icon.name\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"title() || ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n        [style.display]=\"'inline-block'\"\n        [style.vertical-align]=\"'middle'\"\n        [style.width]=\"cssSize()\"\n        [style.height]=\"cssSize()\"\n      ></canvas>\n    }\n  }\n",
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MnDynamicIcon,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "mn-dynamic-icon",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: ICON_TEMPLATE
+		}]
+	}],
+	propDecorators: { name: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "name",
+			required: true
+		}]
+	}] }
+});
+var MnIconCanvas = class MnIconCanvas {
+	constructor() {
+		this.items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.renderer = input("auto", ...ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []);
+		this.width = input("100%", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.pixelRatio = input(void 0, ...ngDevMode ? [{ debugName: "pixelRatio" }] : /* istanbul ignore next */ []);
+		this.title = input(void 0, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(void 0, {
+			...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+			alias: "aria-label"
+		});
+		this.ariaLabelledby = input(void 0, {
+			...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
+			alias: "aria-labelledby"
+		});
+		this.rendererChange = output();
+		this.labelled = computed(() => !!this.title() || !!this.ariaLabel() || !!this.ariaLabelledby(), ...ngDevMode ? [{ debugName: "labelled" }] : /* istanbul ignore next */ []);
+		this.cssWidth = computed(() => cssSize(this.width()), ...ngDevMode ? [{ debugName: "cssWidth" }] : /* istanbul ignore next */ []);
+		this.cssHeight = computed(() => cssSize(this.height()), ...ngDevMode ? [{ debugName: "cssHeight" }] : /* istanbul ignore next */ []);
+		this.controller = null;
+		const host = inject(ElementRef).nativeElement;
+		const injector = inject(Injector);
+		afterNextRender(() => {
+			const controller = createIconCanvas(host, {
+				items: untracked(this.items),
+				renderer: untracked(this.renderer),
+				pixelRatio: untracked(this.pixelRatio),
+				onRendererChange: (kind) => this.rendererChange.emit(kind)
+			});
+			this.controller = controller;
+			effect(() => {
+				const items = this.items();
+				untracked(() => controller.setItems(items));
+			}, { injector });
+			effect(() => {
+				const options = {
+					renderer: this.renderer(),
+					pixelRatio: this.pixelRatio()
+				};
+				untracked(() => controller.setOptions(options));
+			}, { injector });
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.controller?.destroy();
+			this.controller = null;
+		});
+	}
+	getRenderer() {
+		return this.controller?.renderer ?? null;
+	}
+	getCanvas() {
+		return this.controller?.canvas ?? null;
+	}
+	ready() {
+		return this.controller?.ready() ?? Promise.reject(/* @__PURE__ */ new Error("MnIconCanvas is not mounted"));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: MnIconCanvas,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: MnIconCanvas,
+			isStandalone: true,
+			selector: "mn-icon-canvas",
+			inputs: {
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				renderer: {
+					classPropertyName: "renderer",
+					publicName: "renderer",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				height: {
+					classPropertyName: "height",
+					publicName: "height",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				pixelRatio: {
+					classPropertyName: "pixelRatio",
+					publicName: "pixelRatio",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "aria-label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabelledby: {
+					classPropertyName: "ariaLabelledby",
+					publicName: "aria-labelledby",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { rendererChange: "rendererChange" },
+			host: {
+				properties: {
+					"attr.role": "labelled() ? 'img' : null",
+					"attr.aria-hidden": "labelled() ? null : 'true'",
+					"attr.aria-label": "title() || ariaLabel() || null",
+					"attr.aria-labelledby": "ariaLabelledby() || null",
+					"attr.title": "null",
+					"style.display": "'block'",
+					"style.position": "'relative'",
+					"style.width": "cssWidth()",
+					"style.height": "cssHeight()"
+				},
+				classAttribute: "minerva-icon-canvas"
+			},
+			ngImport: i0,
+			template: "",
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MnIconCanvas,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "mn-icon-canvas",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "minerva-icon-canvas",
+				"[attr.role]": "labelled() ? 'img' : null",
+				"[attr.aria-hidden]": "labelled() ? null : 'true'",
+				"[attr.aria-label]": "title() || ariaLabel() || null",
+				"[attr.aria-labelledby]": "ariaLabelledby() || null",
+				"[attr.title]": "null",
+				"[style.display]": "'block'",
+				"[style.position]": "'relative'",
+				"[style.width]": "cssWidth()",
+				"[style.height]": "cssHeight()"
+			},
+			template: ""
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		renderer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "renderer",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		pixelRatio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pixelRatio",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		rendererChange: [{
+			type: i0.Output,
+			args: ["rendererChange"]
+		}]
+	}
+});
 var MnConfirmService = class MnConfirmService {
 	constructor() {
 		this.requests = signal([], ...ngDevMode ? [{ debugName: "requests" }] : /* istanbul ignore next */ []);
@@ -40972,7 +41675,7 @@ var MnDatePicker = class MnDatePicker extends MnFormValueControl {
 				},
 				{
 					kind: "component",
-					type: MnIcon,
+					type: MnIcon$1,
 					selector: "svg[mnIcon]",
 					inputs: ["mnIcon", "size"]
 				},
@@ -41000,7 +41703,7 @@ i0.ɵɵngDeclareClassMetadata({
 			exportAs: "mnDatePicker",
 			imports: [
 				MnHook,
-				MnIcon,
+				MnIcon$1,
 				MnPortal
 			],
 			encapsulation: ViewEncapsulation.None,
@@ -41368,6 +42071,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { CHART_SURFACE, MN_RADIO_GROUP, MN_SCOPE, MinervaScope, MnAlert, MnAppShell, MnAreaChart, MnAutoComplete, MnAvatar, MnAvatarGroup, MnBadge, MnBar3DChart, MnBarChart, MnBookWidgetBase, MnBox, MnBoxPlotChart, MnBubbleChart, MnBulletChart, MnButton, MnCalendarHeatmap, MnCandlestickChart, MnCard, MnCardContent, MnCardDescription, MnCardFooter, MnCardHeader, MnCardTitle, MnCartesianChartBase, MnCascader, MnCascaderPanel, MnChart, MnChart3DBase, MnChartEngine, MnCheckbox, MnChordChart, MnCodeBlock, MnCommandDialog, MnConfig, MnConfirmDialog, MnConfirmProvider, MnConfirmService, MnContextMenu, MnDataTable, MnDatePicker, MnDependencyGraph, MnDepthChart, MnDescriptionList, MnDivider, MnDonutChart, MnDrawer, MnDrawerBody, MnDrawerClose, MnDrawerFooter, MnDrawerHeader, MnDrawerTrigger, MnEmpty, MnFieldBase, MnFloatingBase, MnFormControl, MnFormErrorMessage, MnFormField, MnFormHelperText, MnFormLabel, MnFormLayout, MnFunnelChart, MnGanttChart, MnGaugeChart, MnGraphChart, MnGraphChartBase, MnGridItem, MnHStack, MnHeatmapChart, MnHistogramChart, MnHorizontalBarChart, MnHtmlPreview, MnIconButton, MnInput, MnJsonField, MnKeyValueEditor, MnLine3DChart, MnLineChart, MnList, MnListItem, MnLoadingState, MnMenu, MnMenuBase, MnMixedChart, MnModal, MnModalBody, MnModalClose, MnModalFooter, MnModalHeader, MnModalTrigger, MnMonthCalendar, MnNavTree, MnNumberInput, MnOrderBook, MnOrderBookHeatmap, MnPage, MnPageHeader, MnPageSection, MnPageTab, MnPageTabs, MnPagination, MnPaletteToggle, MnPieBase, MnPieChart, MnPopover, MnPopoverAnchor, MnPopoverClose, MnProgressIndicator, MnProse, MnQuadrantChart, MnRadarChart, MnRadialBarChart, MnRadio, MnRadioGroup, MnRangeAreaChart, MnRating, MnRatingScale, MnResponsiveGrid, MnSankeyChart, MnScatter3DChart, MnScatterChart, MnSelect, MnSelectGroup, MnSelectItem, MnSelectLabel, MnSelectSeparator, MnSeriesChartBase, MnShapeChart, MnShapeChartBase, MnShapeChartCommon, MnSkeleton, MnSkeletonText, MnSparkline, MnSplitLayout, MnStack, MnStackBase, MnStatCard, MnSteps, MnSunburstChart, MnSurface3DChart, MnSwitch, MnTab, MnTabPanel, MnTableBody, MnTableCell, MnTableCellContent, MnTableHead, MnTableHeader, MnTableRoot, MnTableRow, MnTabs, MnTag, MnTagInput, MnTextLink, MnTextarea, MnThemeToggle, MnTimeAndSales, MnTimePicker, MnTimePickerPanel, MnToastRegion, MnToastService, MnToolbar, MnTooltip, MnTooltipProvider, MnTradingChart, MnTreeChart, MnTreemapChart, MnUpload, MnVStack, MnVirtualList, MnWaterfallChart, THEME_SCOPE_ATTRIBUTE, injectMinerva, optionalBoolean, provideEmbeddedMinerva, provideMinerva, sameGraphOptions, themeModeOf, withSeriesType };
+export { CHART_SURFACE, MN_RADIO_GROUP, MN_SCOPE, MinervaScope, MnAlert, MnAppShell, MnAreaChart, MnAutoComplete, MnAvatar, MnAvatarGroup, MnBadge, MnBar3DChart, MnBarChart, MnBookWidgetBase, MnBox, MnBoxPlotChart, MnBubbleChart, MnBulletChart, MnButton, MnCalendarHeatmap, MnCandlestickChart, MnCard, MnCardContent, MnCardDescription, MnCardFooter, MnCardHeader, MnCardTitle, MnCartesianChartBase, MnCascader, MnCascaderPanel, MnChart, MnChart3DBase, MnChartEngine, MnCheckbox, MnChordChart, MnCodeBlock, MnCommandDialog, MnConfig, MnConfirmDialog, MnConfirmProvider, MnConfirmService, MnContextMenu, MnDataTable, MnDatePicker, MnDependencyGraph, MnDepthChart, MnDescriptionList, MnDivider, MnDonutChart, MnDrawer, MnDrawerBody, MnDrawerClose, MnDrawerFooter, MnDrawerHeader, MnDrawerTrigger, MnDynamicIcon, MnEmpty, MnFieldBase, MnFloatingBase, MnFormControl, MnFormErrorMessage, MnFormField, MnFormHelperText, MnFormLabel, MnFormLayout, MnFunnelChart, MnGanttChart, MnGaugeChart, MnGraphChart, MnGraphChartBase, MnGridItem, MnHStack, MnHeatmapChart, MnHistogramChart, MnHorizontalBarChart, MnHtmlPreview, MnIcon, MnIconBase, MnIconButton, MnIconCanvas, MnInput, MnJsonField, MnKeyValueEditor, MnLine3DChart, MnLineChart, MnList, MnListItem, MnLoadingState, MnMenu, MnMenuBase, MnMixedChart, MnModal, MnModalBody, MnModalClose, MnModalFooter, MnModalHeader, MnModalTrigger, MnMonthCalendar, MnNavTree, MnNumberInput, MnOrderBook, MnOrderBookHeatmap, MnPage, MnPageHeader, MnPageSection, MnPageTab, MnPageTabs, MnPagination, MnPaletteToggle, MnPieBase, MnPieChart, MnPopover, MnPopoverAnchor, MnPopoverClose, MnProgressIndicator, MnProse, MnQuadrantChart, MnRadarChart, MnRadialBarChart, MnRadio, MnRadioGroup, MnRangeAreaChart, MnRating, MnRatingScale, MnResponsiveGrid, MnSankeyChart, MnScatter3DChart, MnScatterChart, MnSelect, MnSelectGroup, MnSelectItem, MnSelectLabel, MnSelectSeparator, MnSeriesChartBase, MnShapeChart, MnShapeChartBase, MnShapeChartCommon, MnSkeleton, MnSkeletonText, MnSparkline, MnSplitLayout, MnStack, MnStackBase, MnStatCard, MnSteps, MnSunburstChart, MnSurface3DChart, MnSwitch, MnTab, MnTabPanel, MnTableBody, MnTableCell, MnTableCellContent, MnTableHead, MnTableHeader, MnTableRoot, MnTableRow, MnTabs, MnTag, MnTagInput, MnTextLink, MnTextarea, MnThemeToggle, MnTimeAndSales, MnTimePicker, MnTimePickerPanel, MnToastRegion, MnToastService, MnToolbar, MnTooltip, MnTooltipProvider, MnTradingChart, MnTreeChart, MnTreemapChart, MnUpload, MnVStack, MnVirtualList, MnWaterfallChart, THEME_SCOPE_ATTRIBUTE, injectMinerva, optionalBoolean, provideEmbeddedMinerva, provideMinerva, sameGraphOptions, themeModeOf, withSeriesType };
 
 //# sourceMappingURL=minerva-angular.mjs.map