@magmonium/one 0.4.29 → 0.4.31

package/fesm2022/magmonium-one-icon-Dso-9RMN.mjs

@@ -0,0 +1,833 @@
+import { p as AssetStore, r as resolveIconSize, v as HttpService, z as ICON_SOURCE } from "./magmonium-one-size-converter-B-UubQQ0.mjs";
+import { m as ThemeStore, t as applyColorsToElement } from "./magmonium-one-color-utl-CirPzUFk.mjs";
+import "./magmonium-one-theme-a7GlFbzE.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, HostListener, InjectionToken, computed, effect, inject, input, model, untracked } from "@angular/core";
+import { of } from "rxjs";
+import { rxResource } from "@angular/core/rxjs-interop";
+import { catchError as catchError$1 } from "rxjs/operators";
+const MAGMONIUM = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -15 120 165">
+        <g>
+          <path fill="#color"  style="opacity: 0.7;" d="M5 5 L5 65 L85 65 Z" />
+          <path fill="#color"  style="opacity: 0.3;" d="M85 5 L5 65 L85 65 Z" />
+        </g>
+        <g>
+          <path fill="#color"  style="opacity: 0.3;" d="M5 70 L85 70 L5 130 Z" />
+          <path fill="#color"  style="opacity: 0.7;" d="M85 70 L5 70 L85 130 Z" />
+        </g>
+      </svg>
+  `;
+const SHARED_ICONS = [
+	"accordion_chevron",
+	"account_balance_wallet",
+	"activity",
+	"add-image",
+	"adjust",
+	"alert-circle",
+	"analytics",
+	"apps",
+	"arrow-down",
+	"arrow-left",
+	"arrow-left-right",
+	"arrow-right",
+	"arrow-up",
+	"arrow_back",
+	"bell",
+	"bold",
+	"books",
+	"calendar",
+	"calendar-open",
+	"camera",
+	"chat",
+	"check",
+	"chevron-down",
+	"chevron-left",
+	"chevron-right",
+	"chevron-up",
+	"chevron_left",
+	"chevrons-down",
+	"chevrons-left",
+	"chevrons-right",
+	"chevrons-up",
+	"clipboard",
+	"code",
+	"coins",
+	"color-picker",
+	"copy",
+	"copyright",
+	"corner-left-up",
+	"currency_exchange",
+	"dot",
+	"download",
+	"ellipsis-vertical",
+	"exclamation-triangle",
+	"eye",
+	"eye_close",
+	"file-code",
+	"file-data",
+	"file-image",
+	"file-markup",
+	"file-style",
+	"file-text",
+	"fixed",
+	"flower",
+	"folder",
+	"games",
+	"gear",
+	"heading",
+	"heart",
+	"heart_filled",
+	"help",
+	"hero",
+	"info",
+	"install",
+	"instrument",
+	"investments",
+	"italic",
+	"language",
+	"layers",
+	"layouts",
+	"link",
+	"link-broken",
+	"list",
+	"loading",
+	"loading-bars",
+	"loading-dots",
+	"loading-logo",
+	"loading-pulse",
+	"location",
+	"lock",
+	"logo",
+	"magazines",
+	"mail",
+	"menu",
+	"mic",
+	"minus",
+	"monitor",
+	"more",
+	"notification",
+	"notification_off",
+	"open",
+	"pause",
+	"pencil",
+	"play",
+	"plus",
+	"posts",
+	"quote",
+	"redo",
+	"reload",
+	"reset",
+	"save",
+	"scissors",
+	"search",
+	"section",
+	"security",
+	"settings",
+	"shield",
+	"smartphone",
+	"sort-alpha-asc",
+	"sort-alpha-desc",
+	"sparkles",
+	"square",
+	"star",
+	"store",
+	"strategies",
+	"strikethrough",
+	"sun",
+	"table",
+	"tablet",
+	"target",
+	"theme",
+	"trash",
+	"trash-2",
+	"trending-down",
+	"trending-up",
+	"undo",
+	"user",
+	"users",
+	"wallet_manager",
+	"wallet_owner",
+	"wallet_shareholder",
+	"wand",
+	"wifi",
+	"x",
+	"zap"
+];
+function isOneIcon(element, config) {
+	if (typeof config?.one !== "undefined") return !!config.one;
+	if (config?.name && SHARED_ICONS.includes(config.name)) return true;
+	return element.nativeElement.tagName === "M-ONE-ICON";
+}
+function textToSvg(str = MAGMONIUM, color) {
+	if (typeof str !== "string") return str;
+	return str.replace(/#color/g, color).replace(/currentColor/g, color);
+}
+function svgElementFromString(str, color) {
+	const parser = new DOMParser();
+	const svg = parser.parseFromString(textToSvg(str, color), "image/svg+xml").documentElement;
+	if (svg && svg.nodeName === "svg") return svg;
+	return parser.parseFromString(textToSvg(MAGMONIUM, color), "image/svg+xml").documentElement;
+}
+const SIZE_CONTEXT = new InjectionToken("SIZE_CONTEXT");
+function provideSizeContext(declarer) {
+	return {
+		provide: SIZE_CONTEXT,
+		useFactory: () => ({ size: inject(declarer).resolvedSize })
+	};
+}
+function injectParentSize() {
+	return inject(SIZE_CONTEXT, {
+		optional: true,
+		skipSelf: true
+	});
+}
+var IconComponent = class IconComponent {
+	config = model(void 0, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	name = input(...ngDevMode ? [void 0, { debugName: "name" }] : /* istanbul ignore next */ []);
+	color = input(...ngDevMode ? [void 0, { debugName: "color" }] : /* istanbul ignore next */ []);
+	size = input(...ngDevMode ? [void 0, { debugName: "size" }] : /* istanbul ignore next */ []);
+	one = input(...ngDevMode ? [void 0, { debugName: "one" }] : /* istanbul ignore next */ []);
+	baseUrl = input(...ngDevMode ? [void 0, { debugName: "baseUrl" }] : /* istanbul ignore next */ []);
+	remote = input(...ngDevMode ? [void 0, { debugName: "remote" }] : /* istanbul ignore next */ []);
+	resolvedConfig = computed(() => {
+		const config = this.config();
+		const overrides = {};
+		const name = this.name();
+		if (name !== void 0) overrides.name = name;
+		const color = this.color();
+		if (color !== void 0) overrides.color = color;
+		const one = this.one();
+		if (one !== void 0) overrides.one = one;
+		const baseUrl = this.baseUrl();
+		if (baseUrl !== void 0) overrides.baseUrl = baseUrl;
+		const remote = this.remote();
+		if (remote !== void 0) overrides.remote = remote;
+		if (!config && !Object.keys(overrides).length) return void 0;
+		return {
+			...config,
+			...overrides
+		};
+	}, ...ngDevMode ? [{ debugName: "resolvedConfig" }] : /* istanbul ignore next */ []);
+	elementRef = inject(ElementRef);
+	sizeContext = inject(SIZE_CONTEXT, { optional: true });
+	assetStore = inject(AssetStore);
+	http = inject(HttpService);
+	currentSvgElement = null;
+	themeStore = inject(ThemeStore);
+	isOneIcon = computed(() => isOneIcon(this.elementRef, this.resolvedConfig()), ...ngDevMode ? [{ debugName: "isOneIcon" }] : /* istanbul ignore next */ []);
+	remoteBaseUrl = computed(() => {
+		const remoteId = this.resolvedConfig()?.remote;
+		return remoteId ? this.http.buildWcAssetBaseUrl(remoteId) : void 0;
+	}, ...ngDevMode ? [{ debugName: "remoteBaseUrl" }] : /* istanbul ignore next */ []);
+	iconSource = inject(ICON_SOURCE, { optional: true });
+	inlineSvg = computed(() => {
+		const name = this.resolvedConfig()?.name;
+		return name ? this.iconSource?.()?.[name] : void 0;
+	}, ...ngDevMode ? [{ debugName: "inlineSvg" }] : /* istanbul ignore next */ []);
+	text = rxResource({
+		params: computed(() => ({
+			name: this.resolvedConfig()?.name,
+			isOneIcon: untracked(() => this.isOneIcon()),
+			remoteBaseUrl: this.remoteBaseUrl()
+		}), { equal: (a, b) => a?.name === b?.name && a?.remoteBaseUrl === b?.remoteBaseUrl }),
+		stream: ({ params: { name, isOneIcon, remoteBaseUrl } }) => {
+			if (!name) return untracked(() => this.assetStore.resolve("icons", "logo", true).pipe(catchError$1(() => of(MAGMONIUM))));
+			const inline = untracked(() => this.inlineSvg());
+			if (inline) return of(inline);
+			return untracked(() => this.assetStore.resolve("icons", name, isOneIcon, remoteBaseUrl).pipe(catchError$1(() => of(MAGMONIUM))));
+		}
+	});
+	pallet = computed(() => applyColorsToElement(this.resolvedConfig()?.color ?? this.themeStore.color()?.mm ?? "#fff", this.themeStore.color(), this.elementRef.nativeElement), ...ngDevMode ? [{ debugName: "pallet" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(this.updateElement);
+		effect(this.applySize);
+	}
+	applySize = () => {
+		this.elementRef.nativeElement.style.setProperty("--m-icon-size", resolveIconSize(this.size(), this.sizeContext?.size()));
+	};
+	updateElement = () => {
+		const element = this.elementRef.nativeElement;
+		if (this.currentSvgElement) {
+			this.currentSvgElement.remove();
+			this.currentSvgElement = null;
+		}
+		const svg = svgElementFromString(this.inlineSvg() ?? this.text.value(), this.pallet()?.color ?? this.themeStore.color()?.mm ?? "#fff");
+		if (!svg) return;
+		this.currentSvgElement = svg;
+		svg.removeAttribute("width");
+		svg.removeAttribute("height");
+		svg.style.width = "var(--m-icon-size, 1em)";
+		svg.style.height = "var(--m-icon-size, 1em)";
+		svg.style.flexShrink = "0";
+		svg.removeAttribute("stroke-width");
+		svg.style.setProperty("stroke-width", "2px");
+		svg.querySelectorAll("*").forEach((el) => {
+			el.removeAttribute("stroke-width");
+			if (el instanceof HTMLElement || el instanceof SVGElement) el.style.removeProperty("stroke-width");
+		});
+		element.prepend(svg);
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: IconComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: IconComponent,
+		isStandalone: true,
+		selector: "m-icon, m-one-icon",
+		inputs: {
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			one: {
+				classPropertyName: "one",
+				publicName: "one",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			baseUrl: {
+				classPropertyName: "baseUrl",
+				publicName: "baseUrl",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			remote: {
+				classPropertyName: "remote",
+				publicName: "remote",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { config: "configChange" },
+		host: { properties: { "class.has-color": "resolvedConfig()?.color" } },
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-flex;align-items:center;justify-content:center;height:var(--m-icon-size, 1em);width:var(--m-icon-size, 1em);overflow:hidden}:host svg{width:var(--m-icon-size, 1em);height:var(--m-icon-size, 1em);flex-shrink:0;overflow:visible;fill:var(--m-icon-fill, currentColor);stroke:var(--m-icon-stroke, currentColor)}:host svg path,:host svg circle,:host svg rect,:host svg line,:host svg polyline,:host svg polygon,:host svg ellipse{stroke-width:2px;vector-effect:non-scaling-stroke}:host.has-color{color:var(--m-icon-color, inherit)}:host:has(>:not(svg)){width:auto;gap:.25rem;justify-content:flex-start;overflow:visible}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: IconComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-icon, m-one-icon",
+			template: `<ng-content></ng-content>`,
+			host: { "[class.has-color]": "resolvedConfig()?.color" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-flex;align-items:center;justify-content:center;height:var(--m-icon-size, 1em);width:var(--m-icon-size, 1em);overflow:hidden}:host svg{width:var(--m-icon-size, 1em);height:var(--m-icon-size, 1em);flex-shrink:0;overflow:visible;fill:var(--m-icon-fill, currentColor);stroke:var(--m-icon-stroke, currentColor)}:host svg path,:host svg circle,:host svg rect,:host svg line,:host svg polyline,:host svg polygon,:host svg ellipse{stroke-width:2px;vector-effect:non-scaling-stroke}:host.has-color{color:var(--m-icon-color, inherit)}:host:has(>:not(svg)){width:auto;gap:.25rem;justify-content:flex-start;overflow:visible}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["configChange"]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		one: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "one",
+				required: false
+			}]
+		}],
+		baseUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "baseUrl",
+				required: false
+			}]
+		}],
+		remote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "remote",
+				required: false
+			}]
+		}]
+	}
+});
+function genColor(colors, color) {
+	return colors[color] ?? color;
+}
+function isLargeImage(svg) {
+	const width = svg.width || 0;
+	const height = svg.height || 0;
+	return width * height > 2e6 || width > 2e3 || height > 2e3;
+}
+function genViewPort(svg) {
+	if (!svg) return "0 0 0 0";
+	return `0 0 ${svg.width || 0} ${svg.height || 0}`;
+}
+function computedFillColor(svg, colors, fillColor) {
+	const { lineColor, backgroundColor, invertSvg } = svg.edit;
+	if (!colors) return fillColor ?? backgroundColor;
+	return genColor(colors, invertSvg ? lineColor : fillColor ?? backgroundColor);
+}
+function computeLineColor(svg, colors, strokeColor) {
+	const { lineColor, backgroundColor, invertSvg } = svg.edit;
+	if (!colors) return strokeColor ?? lineColor;
+	return genColor(colors, invertSvg ? backgroundColor : strokeColor ?? lineColor);
+}
+var CustomIconClass = class CustomIconClass {
+	svg = input.required(...ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []);
+	strokeColor = input(void 0, ...ngDevMode ? [{ debugName: "strokeColor" }] : /* istanbul ignore next */ []);
+	fillColor = input(void 0, ...ngDevMode ? [{ debugName: "fillColor" }] : /* istanbul ignore next */ []);
+	strokeWidth = input(void 0, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => genViewPort(this.svg()), ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	vectorEffect = computed(() => {
+		return isLargeImage(this.svg()) ? "non-scaling-stroke" : null;
+	}, ...ngDevMode ? [{ debugName: "vectorEffect" }] : /* istanbul ignore next */ []);
+	themeStore = inject(ThemeStore);
+	_fillColor = computed(() => computedFillColor(this.svg(), this.themeStore.color(), this.fillColor()), ...ngDevMode ? [{ debugName: "_fillColor" }] : /* istanbul ignore next */ []);
+	_strokeColor = computed(() => {
+		return computeLineColor(this.svg(), this.themeStore.color(), this.strokeColor());
+	}, ...ngDevMode ? [{ debugName: "_strokeColor" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: CustomIconClass,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: CustomIconClass,
+		isStandalone: true,
+		selector: "m-custom-icon",
+		inputs: {
+			svg: {
+				classPropertyName: "svg",
+				publicName: "svg",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			strokeColor: {
+				classPropertyName: "strokeColor",
+				publicName: "strokeColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fillColor: {
+				classPropertyName: "fillColor",
+				publicName: "fillColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strokeWidth: {
+				classPropertyName: "strokeWidth",
+				publicName: "strokeWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <!-- eslint-disable local/no-raw-svg -->
+    @if (svg(); as svg) {
+      <svg
+        xmlns="http:/www.w3.org/2000/svg"
+        [attr.viewBox]="viewBox()"
+        [attr.width]="svg.width"
+        [attr.height]="svg.height"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        @if (_fillColor(); as fillColor) {
+          <rect
+            [attr.width]="svg.width"
+            [attr.height]="svg.height"
+            [attr.fill]="fillColor"
+          />
+        }
+        @if (_strokeColor(); as stroke) {
+          @for (path of svg?.paths; track $index) {
+            <path
+              class="svg-path"
+              [attr.d]="path"
+              [attr.fill]="'none'"
+              [attr.stroke]="stroke"
+              [attr.stroke-linecap]="svg?.edit?.linecap"
+              [attr.stroke-linejoin]="svg?.edit?.linejoin"
+              [attr.stroke-width]="svg.edit.strokeWidth"
+              [attr.vector-effect]="vectorEffect()"
+            />
+          }
+        }
+      </svg>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: CustomIconClass,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-custom-icon",
+			template: `
+    <!-- eslint-disable local/no-raw-svg -->
+    @if (svg(); as svg) {
+      <svg
+        xmlns="http:/www.w3.org/2000/svg"
+        [attr.viewBox]="viewBox()"
+        [attr.width]="svg.width"
+        [attr.height]="svg.height"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        @if (_fillColor(); as fillColor) {
+          <rect
+            [attr.width]="svg.width"
+            [attr.height]="svg.height"
+            [attr.fill]="fillColor"
+          />
+        }
+        @if (_strokeColor(); as stroke) {
+          @for (path of svg?.paths; track $index) {
+            <path
+              class="svg-path"
+              [attr.d]="path"
+              [attr.fill]="'none'"
+              [attr.stroke]="stroke"
+              [attr.stroke-linecap]="svg?.edit?.linecap"
+              [attr.stroke-linejoin]="svg?.edit?.linejoin"
+              [attr.stroke-width]="svg.edit.strokeWidth"
+              [attr.vector-effect]="vectorEffect()"
+            />
+          }
+        }
+      </svg>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	propDecorators: {
+		svg: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "svg",
+				required: true
+			}]
+		}],
+		strokeColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeColor",
+				required: false
+			}]
+		}],
+		fillColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fillColor",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}]
+	}
+});
+var CustomIconEditComponent = class CustomIconEditComponent {
+	svg = model(void 0, ...ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []);
+	strokeColor = input(void 0, ...ngDevMode ? [{ debugName: "strokeColor" }] : /* istanbul ignore next */ []);
+	fillColor = input(void 0, ...ngDevMode ? [{ debugName: "fillColor" }] : /* istanbul ignore next */ []);
+	themeStore = inject(ThemeStore);
+	onKeydown(event) {
+		if (!this.svg()?.edit?.canInteract || this._selectedIndex.length === 0) return;
+		if (event.key === " ") {
+			event.preventDefault();
+			this.deleteSelectedPaths();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			this._selectedIndex = [];
+		}
+	}
+	_viewBox = computed(() => genViewPort(this.svg()), ...ngDevMode ? [{ debugName: "_viewBox" }] : /* istanbul ignore next */ []);
+	_vectorEffect = computed(() => {
+		const svg = this.svg();
+		return svg && isLargeImage(svg) ? "non-scaling-stroke" : null;
+	}, ...ngDevMode ? [{ debugName: "_vectorEffect" }] : /* istanbul ignore next */ []);
+	_fillColor = computed(() => {
+		const svg = this.svg();
+		if (!svg) return void 0;
+		return computedFillColor(svg, this.themeStore.color(), this.fillColor());
+	}, ...ngDevMode ? [{ debugName: "_fillColor" }] : /* istanbul ignore next */ []);
+	_strokeColor = computed(() => {
+		const svg = this.svg();
+		if (!svg) return void 0;
+		return computeLineColor(svg, this.themeStore.color(), this.strokeColor());
+	}, ...ngDevMode ? [{ debugName: "_strokeColor" }] : /* istanbul ignore next */ []);
+	_onPathClick = (index) => {
+		if (!this.svg()?.edit?.canInteract) return;
+		this._selectedIndex = Array.from(/* @__PURE__ */ new Set([...this._selectedIndex, index]));
+	};
+	deleteSelectedPaths = () => {
+		this.svg.update((prev) => {
+			if (!prev) return prev;
+			return {
+				...prev,
+				paths: prev.paths.filter((_, i) => !this._selectedIndex.includes(i))
+			};
+		});
+		this._selectedIndex = [];
+	};
+	_selectedIndex = [];
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: CustomIconEditComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: CustomIconEditComponent,
+		isStandalone: true,
+		selector: "m-custom-icon-edit",
+		inputs: {
+			svg: {
+				classPropertyName: "svg",
+				publicName: "svg",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strokeColor: {
+				classPropertyName: "strokeColor",
+				publicName: "strokeColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fillColor: {
+				classPropertyName: "fillColor",
+				publicName: "fillColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { svg: "svgChange" },
+		host: { listeners: { "window:keydown": "onKeydown($event)" } },
+		ngImport: i0,
+		template: `
+    <!-- eslint-disable local/no-raw-svg -->
+    @if (svg(); as svg) {
+      <svg
+        xmlns="http:/www.w3.org/2000/svg"
+        [attr.viewBox]="_viewBox()"
+        [attr.width]="svg.width"
+        [attr.height]="svg.height"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        @if (_fillColor(); as fillColor) {
+          <rect
+            [attr.width]="svg.width"
+            [attr.height]="svg.height"
+            [attr.fill]="fillColor"
+          />
+        }
+        @for (path of svg.paths; track $index) {
+          <path
+            class="svg-path"
+            (click)="_onPathClick($index)"
+            [class.interactive]="svg.edit.canInteract"
+            [class.selected]="_selectedIndex.includes($index)"
+            [attr.d]="path"
+            [attr.fill]="'none'"
+            [attr.stroke]="_strokeColor()"
+            [attr.stroke-linecap]="svg.edit.linecap"
+            [attr.stroke-linejoin]="svg.edit.linejoin"
+            [attr.stroke-width]="svg.edit.strokeWidth"
+            [attr.vector-effect]="_vectorEffect()"
+          />
+        }
+      </svg>
+    }
+  `,
+		isInline: true,
+		styles: [":host{display:contents;width:100%;height:100%;overflow:hidden;outline:none}:host:focus{outline:2px solid var(--primary-color, #007bff);outline-offset:2px}svg{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block}.interactive{cursor:pointer;transition:stroke-width .2s ease-in-out,stroke .2s ease-in-out}.interactive:hover{stroke-width:calc(var(--stroke-width, 2) * 1.5);stroke:var(--hover-color, #ff0000)}.selected{stroke:var(--hover-color, #ff0000)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: CustomIconEditComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-custom-icon-edit",
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <!-- eslint-disable local/no-raw-svg -->
+    @if (svg(); as svg) {
+      <svg
+        xmlns="http:/www.w3.org/2000/svg"
+        [attr.viewBox]="_viewBox()"
+        [attr.width]="svg.width"
+        [attr.height]="svg.height"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        @if (_fillColor(); as fillColor) {
+          <rect
+            [attr.width]="svg.width"
+            [attr.height]="svg.height"
+            [attr.fill]="fillColor"
+          />
+        }
+        @for (path of svg.paths; track $index) {
+          <path
+            class="svg-path"
+            (click)="_onPathClick($index)"
+            [class.interactive]="svg.edit.canInteract"
+            [class.selected]="_selectedIndex.includes($index)"
+            [attr.d]="path"
+            [attr.fill]="'none'"
+            [attr.stroke]="_strokeColor()"
+            [attr.stroke-linecap]="svg.edit.linecap"
+            [attr.stroke-linejoin]="svg.edit.linejoin"
+            [attr.stroke-width]="svg.edit.strokeWidth"
+            [attr.vector-effect]="_vectorEffect()"
+          />
+        }
+      </svg>
+    }
+  `,
+			styles: [":host{display:contents;width:100%;height:100%;overflow:hidden;outline:none}:host:focus{outline:2px solid var(--primary-color, #007bff);outline-offset:2px}svg{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block}.interactive{cursor:pointer;transition:stroke-width .2s ease-in-out,stroke .2s ease-in-out}.interactive:hover{stroke-width:calc(var(--stroke-width, 2) * 1.5);stroke:var(--hover-color, #ff0000)}.selected{stroke:var(--hover-color, #ff0000)}\n"]
+		}]
+	}],
+	propDecorators: {
+		svg: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "svg",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["svgChange"]
+		}],
+		strokeColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeColor",
+				required: false
+			}]
+		}],
+		fillColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fillColor",
+				required: false
+			}]
+		}],
+		onKeydown: [{
+			type: HostListener,
+			args: ["window:keydown", ["$event"]]
+		}]
+	}
+});
+export { injectParentSize as a, SIZE_CONTEXT as i, CustomIconClass as n, provideSizeContext as o, IconComponent as r, SHARED_ICONS as s, CustomIconEditComponent as t };
+
+//# sourceMappingURL=magmonium-one-icon-Dso-9RMN.mjs.map