@magmonium/one 0.4.30 → 0.4.32

package/fesm2022/magmonium-one-text-output-CfVeqYM7.mjs

@@ -0,0 +1,296 @@
+import { l as TranslateService, nt as LAYOUT_ASSET_FOLDER } from "./magmonium-one-size-converter-BfT0Aw0g.mjs";
+import { n as resolvePallet } from "./magmonium-one-color-utl-CAbZLKB5.mjs";
+import { r as ConfigComponent, t as toAttrBool } from "./magmonium-one-attribute-value-DMI0yJpL.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from "@angular/core";
+var TextOutputComponent = class TextOutputComponent extends ConfigComponent {
+	subFolder = LAYOUT_ASSET_FOLDER.text_output;
+	config = model(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+	translateService = inject(TranslateService);
+	align = input(void 0, ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	variant = input(void 0, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	fontWeight = input(void 0, ...ngDevMode ? [{ debugName: "fontWeight" }] : /* istanbul ignore next */ []);
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	noTranslate = input(void 0, ...ngDevMode ? [{ debugName: "noTranslate" }] : /* istanbul ignore next */ []);
+	params = input(void 0, ...ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []);
+	resolvedAlign = computed(() => this.align() ?? this.config()?.align ?? "left", ...ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []);
+	resolvedVariant = computed(() => this.variant() ?? this.config()?.variant, ...ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []);
+	resolvedFontWeight = computed(() => this.fontWeight() ?? this.config()?.fontWeight, ...ngDevMode ? [{ debugName: "resolvedFontWeight" }] : /* istanbul ignore next */ []);
+	isLink = computed(() => {
+		const variant = this.resolvedVariant();
+		return variant === "link" || variant === "link-small";
+	}, ...ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []);
+	clicked = output();
+	onClick() {
+		if (this.isLink()) this.clicked.emit();
+	}
+	resolvedColorPallet = computed(() => resolvePallet(this.color() ?? this.config()?.color ?? this.defaultColor, this.themeStore.color()), ...ngDevMode ? [{ debugName: "resolvedColorPallet" }] : /* istanbul ignore next */ []);
+	resolveComponentOverrides() {
+		const overrides = {};
+		const align = this.align();
+		if (align !== void 0) overrides.align = align;
+		const label = this.label();
+		if (label !== void 0) overrides.label = label;
+		const noTranslate = toAttrBool(this.noTranslate());
+		if (noTranslate !== void 0) overrides.noTranslate = noTranslate;
+		const variant = this.variant();
+		if (variant !== void 0) overrides.variant = variant;
+		const color = this.color();
+		if (color !== void 0) overrides.color = color;
+		const fontWeight = this.fontWeight();
+		if (fontWeight !== void 0) overrides.fontWeight = fontWeight;
+		return overrides;
+	}
+	resolvedLabel = computed(() => this.config()?.label, ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	shouldTranslate = computed(() => !this.config()?.noTranslate, ...ngDevMode ? [{ debugName: "shouldTranslate" }] : /* istanbul ignore next */ []);
+	html = computed(() => {
+		const label = this.resolvedLabel();
+		return this.shouldTranslate() ? this.translateService.translateToHtml(label, this.params()) : this.translateService.toSafeHtml(label);
+	}, ...ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: TextOutputComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: TextOutputComponent,
+		isStandalone: true,
+		selector: "m-text-output",
+		inputs: {
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fontWeight: {
+				classPropertyName: "fontWeight",
+				publicName: "fontWeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noTranslate: {
+				classPropertyName: "noTranslate",
+				publicName: "noTranslate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			params: {
+				classPropertyName: "params",
+				publicName: "params",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			config: "configChange",
+			clicked: "clicked"
+		},
+		host: {
+			listeners: {
+				"click": "onClick()",
+				"keydown.enter": "onClick()"
+			},
+			properties: {
+				"class.is-design-mode": "isDesignMode",
+				"class.align-left": "resolvedAlign() === \"left\"",
+				"class.align-right": "resolvedAlign() === \"right\"",
+				"class.align-center": "resolvedAlign() === \"center\"",
+				"class.variant-lead": "resolvedVariant() === \"lead\"",
+				"class.variant-big": "resolvedVariant() === \"big\"",
+				"class.variant-bold": "resolvedVariant() === \"bold\"",
+				"class.variant-footer": "resolvedVariant() === \"footer\"",
+				"class.variant-footnote": "resolvedVariant() === \"footnote\"",
+				"class.variant-link": "resolvedVariant() === \"link\"",
+				"class.variant-link-small": "resolvedVariant() === \"link-small\"",
+				"class.weight-light": "resolvedFontWeight() === \"light\"",
+				"class.weight-normal": "resolvedFontWeight() === \"normal\"",
+				"class.weight-medium": "resolvedFontWeight() === \"medium\"",
+				"class.weight-semibold": "resolvedFontWeight() === \"semibold\"",
+				"class.weight-bold": "resolvedFontWeight() === \"bold\"",
+				"class.has-color": "!!(color() ?? config()?.color)",
+				"attr.role": "isLink() ? \"link\" : null",
+				"attr.tabindex": "isLink() ? 0 : null",
+				"style.--m-text-output-color": "resolvedColorPallet().color",
+				"style.--m-text-output-color-contrast": "resolvedColorPallet().contrastColor",
+				"style.--m-text-output-color-opposite": "resolvedColorPallet().oppositeColor"
+			},
+			classAttribute: "m-text-output-host"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <div
+      class="m-text-output"
+      [style.color]="resolvedColorPallet().color"
+      [innerHTML]="html()"
+    ></div>
+  `,
+		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(.is-design-mode){display:block;min-width:1em;min-height:1em}:host(.align-left) .m-text-output{text-align:left}:host(.align-center) .m-text-output{text-align:center}:host(.align-right) .m-text-output{text-align:right}:host{font-size:inherit}:host(.variant-lead){display:block;font-size:1.15em;font-weight:300}:host(.variant-lead) .m-text-output{line-height:1.6}:host(.variant-big){display:block;font-size:1.5em;font-weight:600}:host(.variant-big) .m-text-output{line-height:1.25}:host(.variant-bold){display:block;font-weight:700}:host(.variant-footer){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-footer) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-footer){font-size:calc(var(--m-text-output-body-font-size, 1em) * .75);display:block;margin-top:.25rem}m-flex.align-items-center.direction-row>:host(.variant-footer),m-flex.align-items-center.direction-row-reverse>:host(.variant-footer){margin-top:0}:host(.variant-footnote){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-footnote) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-footnote){font-size:calc(var(--m-text-output-body-font-size, 1em) * .6);display:block;margin-top:.25rem}:host(.variant-link){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-link) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-link){text-decoration:none;cursor:pointer;transition:color .2s ease-in-out,text-decoration .2s ease-in-out;outline:none}:host(.variant-link):focus{outline:2px solid var(--m-focus);outline-offset:2px}:host(.variant-link){display:inline;border-radius:.25rem}:host(.variant-link) .m-text-output{display:inline;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:max(1px,.06em);text-underline-offset:.18em;transition:text-decoration-color .15s ease-in-out,text-decoration-thickness .15s ease-in-out}:host(.variant-link) .m-text-output:hover{text-decoration-color:currentColor;text-decoration-thickness:max(2px,.1em)}:host(.variant-link) .m-text-output>p{display:inline;margin:0}:host(.variant-link-small){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-link-small) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-link-small){text-decoration:none;cursor:pointer;transition:color .2s ease-in-out,text-decoration .2s ease-in-out;outline:none}:host(.variant-link-small):focus{outline:2px solid var(--m-focus);outline-offset:2px}:host(.variant-link-small){display:inline;border-radius:.25rem}:host(.variant-link-small) .m-text-output{display:inline;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:max(1px,.06em);text-underline-offset:.18em;transition:text-decoration-color .15s ease-in-out,text-decoration-thickness .15s ease-in-out}:host(.variant-link-small) .m-text-output:hover{text-decoration-color:currentColor;text-decoration-thickness:max(2px,.1em)}:host(.variant-link-small) .m-text-output>p{display:inline;margin:0}:host(.weight-light){font-weight:300}:host(.weight-normal){font-weight:400}:host(.weight-medium){font-weight:500}:host(.weight-semibold){font-weight:600}:host(.weight-bold){font-weight:700}:host(.has-color) .m-text-output{-webkit-text-fill-color:currentColor}.m-text-output{color:var(--m-text-output-color, var(--m-text));font-size:inherit;line-height:1.5}.m-text-output>:first-child{margin-top:0}.m-text-output>:last-child{margin-bottom:0}.m-text-output p,.m-text-output ul,.m-text-output blockquote,.m-text-output h1,.m-text-output h2,.m-text-output h3,.m-text-output h4,.m-text-output h5,.m-text-output h6{margin:0 0 1rem}.m-text-output ul{padding-left:1.5rem;list-style-type:disc;list-style-position:outside}.m-text-output li{margin-bottom:.25rem}.m-text-output li:last-child{margin-bottom:0}.m-text-output a{color:var(--m-text-output-link-color, var(--m-mm));text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:max(1px,.06em);text-underline-offset:.18em;transition:text-decoration-color .15s ease-in-out,text-decoration-thickness .15s ease-in-out}.m-text-output a:hover{text-decoration-color:currentColor;text-decoration-thickness:max(2px,.1em)}.m-text-output blockquote{padding-left:1rem;border-left:1px solid var(--m-border);color:var(--m-text-output-color, var(--m-text-secondary))}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TextOutputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-text-output",
+			imports: [],
+			template: `
+    <div
+      class="m-text-output"
+      [style.color]="resolvedColorPallet().color"
+      [innerHTML]="html()"
+    ></div>
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "m-text-output-host",
+				"[class.is-design-mode]": "isDesignMode",
+				"[class.align-left]": "resolvedAlign() === \"left\"",
+				"[class.align-right]": "resolvedAlign() === \"right\"",
+				"[class.align-center]": "resolvedAlign() === \"center\"",
+				"[class.variant-lead]": "resolvedVariant() === \"lead\"",
+				"[class.variant-big]": "resolvedVariant() === \"big\"",
+				"[class.variant-bold]": "resolvedVariant() === \"bold\"",
+				"[class.variant-footer]": "resolvedVariant() === \"footer\"",
+				"[class.variant-footnote]": "resolvedVariant() === \"footnote\"",
+				"[class.variant-link]": "resolvedVariant() === \"link\"",
+				"[class.variant-link-small]": "resolvedVariant() === \"link-small\"",
+				"[class.weight-light]": "resolvedFontWeight() === \"light\"",
+				"[class.weight-normal]": "resolvedFontWeight() === \"normal\"",
+				"[class.weight-medium]": "resolvedFontWeight() === \"medium\"",
+				"[class.weight-semibold]": "resolvedFontWeight() === \"semibold\"",
+				"[class.weight-bold]": "resolvedFontWeight() === \"bold\"",
+				"[class.has-color]": "!!(color() ?? config()?.color)",
+				"[attr.role]": "isLink() ? \"link\" : null",
+				"[attr.tabindex]": "isLink() ? 0 : null",
+				"(click)": "onClick()",
+				"(keydown.enter)": "onClick()",
+				"[style.--m-text-output-color]": "resolvedColorPallet().color",
+				"[style.--m-text-output-color-contrast]": "resolvedColorPallet().contrastColor",
+				"[style.--m-text-output-color-opposite]": "resolvedColorPallet().oppositeColor"
+			},
+			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(.is-design-mode){display:block;min-width:1em;min-height:1em}:host(.align-left) .m-text-output{text-align:left}:host(.align-center) .m-text-output{text-align:center}:host(.align-right) .m-text-output{text-align:right}:host{font-size:inherit}:host(.variant-lead){display:block;font-size:1.15em;font-weight:300}:host(.variant-lead) .m-text-output{line-height:1.6}:host(.variant-big){display:block;font-size:1.5em;font-weight:600}:host(.variant-big) .m-text-output{line-height:1.25}:host(.variant-bold){display:block;font-weight:700}:host(.variant-footer){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-footer) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-footer){font-size:calc(var(--m-text-output-body-font-size, 1em) * .75);display:block;margin-top:.25rem}m-flex.align-items-center.direction-row>:host(.variant-footer),m-flex.align-items-center.direction-row-reverse>:host(.variant-footer){margin-top:0}:host(.variant-footnote){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-footnote) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-footnote){font-size:calc(var(--m-text-output-body-font-size, 1em) * .6);display:block;margin-top:.25rem}:host(.variant-link){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-link) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-link){text-decoration:none;cursor:pointer;transition:color .2s ease-in-out,text-decoration .2s ease-in-out;outline:none}:host(.variant-link):focus{outline:2px solid var(--m-focus);outline-offset:2px}:host(.variant-link){display:inline;border-radius:.25rem}:host(.variant-link) .m-text-output{display:inline;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:max(1px,.06em);text-underline-offset:.18em;transition:text-decoration-color .15s ease-in-out,text-decoration-thickness .15s ease-in-out}:host(.variant-link) .m-text-output:hover{text-decoration-color:currentColor;text-decoration-thickness:max(2px,.1em)}:host(.variant-link) .m-text-output>p{display:inline;margin:0}:host(.variant-link-small){font-size:var(--m-text-output-body-font-size, inherit);font-weight:400;letter-spacing:normal}:host(.variant-link-small) .m-text-output{-webkit-text-fill-color:currentColor}:host(.variant-link-small){text-decoration:none;cursor:pointer;transition:color .2s ease-in-out,text-decoration .2s ease-in-out;outline:none}:host(.variant-link-small):focus{outline:2px solid var(--m-focus);outline-offset:2px}:host(.variant-link-small){display:inline;border-radius:.25rem}:host(.variant-link-small) .m-text-output{display:inline;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:max(1px,.06em);text-underline-offset:.18em;transition:text-decoration-color .15s ease-in-out,text-decoration-thickness .15s ease-in-out}:host(.variant-link-small) .m-text-output:hover{text-decoration-color:currentColor;text-decoration-thickness:max(2px,.1em)}:host(.variant-link-small) .m-text-output>p{display:inline;margin:0}:host(.weight-light){font-weight:300}:host(.weight-normal){font-weight:400}:host(.weight-medium){font-weight:500}:host(.weight-semibold){font-weight:600}:host(.weight-bold){font-weight:700}:host(.has-color) .m-text-output{-webkit-text-fill-color:currentColor}.m-text-output{color:var(--m-text-output-color, var(--m-text));font-size:inherit;line-height:1.5}.m-text-output>:first-child{margin-top:0}.m-text-output>:last-child{margin-bottom:0}.m-text-output p,.m-text-output ul,.m-text-output blockquote,.m-text-output h1,.m-text-output h2,.m-text-output h3,.m-text-output h4,.m-text-output h5,.m-text-output h6{margin:0 0 1rem}.m-text-output ul{padding-left:1.5rem;list-style-type:disc;list-style-position:outside}.m-text-output li{margin-bottom:.25rem}.m-text-output li:last-child{margin-bottom:0}.m-text-output a{color:var(--m-text-output-link-color, var(--m-mm));text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:max(1px,.06em);text-underline-offset:.18em;transition:text-decoration-color .15s ease-in-out,text-decoration-thickness .15s ease-in-out}.m-text-output a:hover{text-decoration-color:currentColor;text-decoration-thickness:max(2px,.1em)}.m-text-output blockquote{padding-left:1rem;border-left:1px solid var(--m-border);color:var(--m-text-output-color, var(--m-text-secondary))}\n"]
+		}]
+	}],
+	propDecorators: {
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["configChange"]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		fontWeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fontWeight",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		noTranslate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noTranslate",
+				required: false
+			}]
+		}],
+		params: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "params",
+				required: false
+			}]
+		}],
+		clicked: [{
+			type: i0.Output,
+			args: ["clicked"]
+		}]
+	}
+});
+export { TextOutputComponent as t };
+
+//# sourceMappingURL=magmonium-one-text-output-CfVeqYM7.mjs.map

package/fesm2022/magmonium-one-text-output-CfVeqYM7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-text-output-CfVeqYM7.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/text-output/ui/text-output.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { TranslateService } from '../../../services/translate';\nimport { ConfigComponent } from '../../../lib/components/config-component';\nimport { Config } from '../../../type/config/config-type';\nimport { LAYOUT_ASSET_FOLDER } from '../../../enum';\nimport { toAttrBool } from '../../../functions/config/attribute-value';\nimport { resolvePallet } from '../../../lib/theme/lib/color-utl';\n\nexport type TextOutputAlign = 'left' | 'right' | 'center';\n\n// Variants are roles, not styles: each one says what the text is doing on the\n// page, and the Section it sits in decides how big that role renders. Every\n// size below is therefore an `em` multiple of the inherited Section font-size\n// — a `lead` in a compact Section stays proportionally a lead — which is the\n// one rule the plain (undefined) variant keeps by inheriting outright.\n//\n// - `lead`     opening paragraph that introduces the block under it\n// - `big`      one-line statement — a number, a verdict, a headline that is\n//              not a SectionHeader\n// - `bold`     emphasis at body size, for the line that must be read first\n// - `footer`   annotation under the thing it describes — a field's validation\n//              message, a caption, a disclaimer; 0.75 of body, body colour\n// - `footnote` aside the reader may skip — source, legal line, small print;\n//              0.6 of body, body colour\n// - `link`       text that goes somewhere on click — an affordance rather than\n//                a size, so it is the one role that stays inline, takes focus,\n//                and emits `clicked`\n// - `link-small` the same affordance for a link that trails the content it\n//                belongs to rather than carrying a line of its own — a \"see\n//                all\", an \"edit\" beside a field; body size like `link`\nexport type TextOutputVariant =\n  | 'lead'\n  | 'big'\n  | 'bold'\n  | 'footer'\n  | 'footnote'\n  | 'link'\n  | 'link-small';\n\n// Weight tokens of the type scale. Applied after the variant, so it overrides\n// the weight a role implies (`lead` light, `big` semibold, `bold` bold).\nexport type TextOutputFontWeight =\n  | 'light'\n  | 'normal'\n  | 'medium'\n  | 'semibold'\n  | 'bold';\n\nexport interface TextOutputConfig extends Config {\n  label?: string;\n  noTranslate?: boolean;\n  align?: TextOutputAlign;\n  variant?: TextOutputVariant;\n  color?: string;\n  fontWeight?: TextOutputFontWeight;\n}\n\n@Component({\n  selector: 'm-text-output',\n  imports: [],\n  template: `\n    <div\n      class=\"m-text-output\"\n      [style.color]=\"resolvedColorPallet().color\"\n      [innerHTML]=\"html()\"\n    ></div>\n  `,\n  styleUrl: './text-output.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'm-text-output-host',\n    '[class.is-design-mode]': 'isDesignMode',\n    '[class.align-left]': 'resolvedAlign() === \"left\"',\n    '[class.align-right]': 'resolvedAlign() === \"right\"',\n    '[class.align-center]': 'resolvedAlign() === \"center\"',\n    '[class.variant-lead]': 'resolvedVariant() === \"lead\"',\n    '[class.variant-big]': 'resolvedVariant() === \"big\"',\n    '[class.variant-bold]': 'resolvedVariant() === \"bold\"',\n    '[class.variant-footer]': 'resolvedVariant() === \"footer\"',\n    '[class.variant-footnote]': 'resolvedVariant() === \"footnote\"',\n    '[class.variant-link]': 'resolvedVariant() === \"link\"',\n    '[class.variant-link-small]': 'resolvedVariant() === \"link-small\"',\n    '[class.weight-light]': 'resolvedFontWeight() === \"light\"',\n    '[class.weight-normal]': 'resolvedFontWeight() === \"normal\"',\n    '[class.weight-medium]': 'resolvedFontWeight() === \"medium\"',\n    '[class.weight-semibold]': 'resolvedFontWeight() === \"semibold\"',\n    '[class.weight-bold]': 'resolvedFontWeight() === \"bold\"',\n    '[class.has-color]': '!!(color() ?? config()?.color)',\n    // Only a link is reachable and announced as one. Every other variant is a\n    // size, and a focus stop on plain text is a tab stop that does nothing.\n    '[attr.role]': 'isLink() ? \"link\" : null',\n    '[attr.tabindex]': 'isLink() ? 0 : null',\n    '(click)': 'onClick()',\n    '(keydown.enter)': 'onClick()',\n    '[style.--m-text-output-color]': 'resolvedColorPallet().color',\n    '[style.--m-text-output-color-contrast]': 'resolvedColorPallet().contrastColor',\n    '[style.--m-text-output-color-opposite]': 'resolvedColorPallet().oppositeColor',\n  },\n})\nexport class TextOutputComponent extends ConfigComponent<TextOutputConfig> {\n  override subFolder = LAYOUT_ASSET_FOLDER.text_output;\n  override config = model<Partial<TextOutputConfig>>();\n  private readonly translateService = inject(TranslateService);\n\n  readonly align = input<TextOutputAlign | undefined>(undefined);\n  readonly variant = input<TextOutputVariant | undefined>(undefined);\n  // A theme colour key (`error`, `warning`, `success`, …) or a raw CSS colour,\n  // resolved the same way an Icon's or a Logo's is so a token follows the\n  // active theme instead of freezing one theme's hex into a template.\n  readonly color = input<string | undefined>(undefined);\n  readonly fontWeight = input<TextOutputFontWeight | undefined>(undefined);\n  // `label` is the text itself, so a one-off TextOutput needs no asset behind\n  // it (ADR 0010). MiniMark is a single string whatever it renders to, which\n  // is what lets it ride on the tag at all.\n  readonly label = input<string | undefined>(undefined);\n  readonly noTranslate = input<boolean | string | undefined>(undefined);\n  // Values for the message's `<name>` / `<$name>` placeholders. An input and\n  // deliberately not a TextOutputConfig key: an asset is resolved by name and\n  // shared across every Control that names it, and these differ per render\n  // (ADR 0020). The query-string form (`min_length?len=6`) still works and\n  // still loses to this on a shared placeholder, that being the precedence\n  // TranslateService already had. Bind a named member — an object literal in a\n  // template is refused by `no-inline-config` (ADR 0010).\n  readonly params = input<Record<string, string> | undefined>(undefined);\n\n  readonly resolvedAlign = computed<TextOutputAlign>(\n    () => this.align() ?? this.config()?.align ?? 'left'\n  );\n\n  protected readonly resolvedVariant = computed<TextOutputVariant | undefined>(\n    () => this.variant() ?? this.config()?.variant\n  );\n\n  protected readonly resolvedFontWeight = computed<\n    TextOutputFontWeight | undefined\n  >(() => this.fontWeight() ?? this.config()?.fontWeight);\n\n  // Both link roles are the same affordance, so both take the focus stop, the\n  // `role=\"link\"` and the `clicked` output; only their size differs.\n  protected readonly isLink = computed(() => {\n    const variant = this.resolvedVariant();\n    return variant === 'link' || variant === 'link-small';\n  });\n\n  /**\n   * Fired by a `link` variant and by nothing else. A text that is not a link\n   * draws no affordance and takes no focus, so a click on it is a click on\n   * prose — emitting there would be a control only a mouse could find.\n   *\n   * Where the link goes to a route instead, the caller attaches `routerLink`\n   * and binds nothing here: one click means one thing.\n   */\n  readonly clicked = output<void>();\n\n  protected onClick(): void {\n    if (this.isLink()) this.clicked.emit();\n  }\n\n  protected readonly resolvedColorPallet = computed(() =>\n    resolvePallet(\n      this.color() ?? this.config()?.color ?? this.defaultColor,\n      this.themeStore.color()\n    )\n  );\n\n  protected override resolveComponentOverrides(): Partial<TextOutputConfig> {\n    const overrides: Partial<TextOutputConfig> = {};\n    const align = this.align();\n    if (align !== undefined) overrides.align = align;\n    const label = this.label();\n    if (label !== undefined) overrides.label = label;\n    const noTranslate = toAttrBool(this.noTranslate());\n    if (noTranslate !== undefined) overrides.noTranslate = noTranslate;\n    const variant = this.variant();\n    if (variant !== undefined) overrides.variant = variant;\n    const color = this.color();\n    if (color !== undefined) overrides.color = color;\n    const fontWeight = this.fontWeight();\n    if (fontWeight !== undefined) overrides.fontWeight = fontWeight;\n    return overrides;\n  }\n\n  protected readonly resolvedLabel = computed(() => this.config()?.label);\n  protected readonly shouldTranslate = computed(\n    () => !this.config()?.noTranslate\n  );\n  protected readonly html = computed(() => {\n    const label = this.resolvedLabel();\n    return this.shouldTranslate()\n      ? this.translateService.translateToHtml(label, this.params())\n      : this.translateService.toSafeHtml(label);\n  });\n}\n"],"mappings":"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"}

package/fesm2022/magmonium-one-theme-Xgsx8bJs.mjs

@@ -0,0 +1 @@
+import "./magmonium-one-color-utl-CAbZLKB5.mjs";

package/fesm2022/magmonium-one-toggle-D2XEbN-b.mjs

@@ -0,0 +1,231 @@
+import { c as TranslatePipe } from "./magmonium-one-size-converter-BfT0Aw0g.mjs";
+import { t as BaseInputComponent } from "./magmonium-one-base-input-CLBOTOUs.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model } from "@angular/core";
+var ToggleInputComponent = class ToggleInputComponent extends BaseInputComponent {
+	value = void 0;
+	checked = model(false);
+	config = input(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	touched = model(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	focused = input(false, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+	showErrors = computed(() => this.touched() && this.invalid(), ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+	}
+	onChange(event) {
+		const target = event.target;
+		this.checked.set(target?.checked ?? false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ToggleInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ToggleInputComponent,
+		isStandalone: true,
+		selector: "m-toggle-input",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			focused: {
+				classPropertyName: "focused",
+				publicName: "focused",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errors: {
+				classPropertyName: "errors",
+				publicName: "errors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			checked: "checkedChange",
+			touched: "touchedChange"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (config(); as toggle) {
+      <div class="toggle">
+        <input
+          [id]="toggle.name ?? ''"
+          [checked]="checked()"
+          (change)="onChange($event)"
+          type="checkbox"
+        />
+        <label [attr.for]="toggle.name || null">{{
+          toggle.label | translate
+        }}</label>
+      </div>
+    }
+  `,
+		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-block}:host-context(.m-dynamic-input),:host-context(.section-form-item__input),:host-context(.option-set__edit){display:contents}.toggle{--m-toggle-input-color: var(--m-input-color, var(--m-mm));display:flex;align-items:center;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding:0;gap:.375em;border:none;background:transparent;box-shadow:none}.toggle--row{flex-direction:row}.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;box-sizing:content-box;flex-shrink:0;margin:0;outline:none;cursor:pointer;width:calc(var(--input-size, 1em) * 2);height:var(--input-size, 1em);border-style:solid;border-width:2px;border-radius:calc(var(--input-size, 1em) / 2 + 2px);border-color:var(--m-text-input-border, color-mix(in srgb, var(--m-mm) 18%, var(--m-background)));background:color-mix(in srgb,var(--m-mm) 8%,var(--m-text-input-background, var(--m-background)));box-shadow:none;transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease)}.toggle input[type=checkbox]:after{content:\"\";position:absolute;top:calc((var(--input-size, 1em) - calc(var(--input-size, 1em) * .7)) / 2);left:calc((var(--input-size, 1em) - calc(var(--input-size, 1em) * .7)) / 2);width:calc(var(--input-size, 1em) * .7);height:calc(var(--input-size, 1em) * .7);border-radius:50%;background-color:var(--m-input-color, var(--m-mm));box-shadow:none;transition:transform .25s cubic-bezier(.4,0,.2,1)}.toggle input[type=checkbox]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-mm) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-mm) 12%, var(--m-background)))}.toggle input[type=checkbox]:focus,.toggle input[type=checkbox]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-mm));box-shadow:none;outline:none}.toggle input[type=checkbox]:checked{border-color:var(--m-toggle-checked-border, var(--m-input-color, var(--m-mm)));background:var(--m-toggle-checked-background, var(--m-input-color, var(--m-mm)))}.toggle input[type=checkbox]:checked:after{transform:translate(calc(calc(var(--input-size, 1em) * 2) - var(--input-size, 1em)));background-color:var(--m-text-input-background, var(--m-background))}.toggle input[type=checkbox]:checked:hover:not(:disabled){background:color-mix(in srgb,var(--m-toggle-checked-background, var(--m-mm)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-toggle-checked-border, var(--m-mm)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-mm) 18%,transparent)}.toggle input[type=checkbox]:checked:focus,.toggle input[type=checkbox]:checked:focus-visible{box-shadow:none}.toggle input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.toggle input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.toggle label{flex:1;min-width:0;margin:0;cursor:pointer;font-size:var(--m-label-font-size, calc(var(--input-size, 1em) * .85));font-weight:var(--m-label-weight, var(--m-text-input-label-weight, 500));line-height:1.2;color:var(--m-label-color, var(--m-text))}\n"],
+		dependencies: [{
+			kind: "pipe",
+			type: TranslatePipe,
+			name: "translate"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ToggleInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-toggle-input",
+			template: `
+    @if (config(); as toggle) {
+      <div class="toggle">
+        <input
+          [id]="toggle.name ?? ''"
+          [checked]="checked()"
+          (change)="onChange($event)"
+          type="checkbox"
+        />
+        <label [attr.for]="toggle.name || null">{{
+          toggle.label | translate
+        }}</label>
+      </div>
+    }
+  `,
+			imports: [TranslatePipe],
+			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-block}:host-context(.m-dynamic-input),:host-context(.section-form-item__input),:host-context(.option-set__edit){display:contents}.toggle{--m-toggle-input-color: var(--m-input-color, var(--m-mm));display:flex;align-items:center;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding:0;gap:.375em;border:none;background:transparent;box-shadow:none}.toggle--row{flex-direction:row}.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;box-sizing:content-box;flex-shrink:0;margin:0;outline:none;cursor:pointer;width:calc(var(--input-size, 1em) * 2);height:var(--input-size, 1em);border-style:solid;border-width:2px;border-radius:calc(var(--input-size, 1em) / 2 + 2px);border-color:var(--m-text-input-border, color-mix(in srgb, var(--m-mm) 18%, var(--m-background)));background:color-mix(in srgb,var(--m-mm) 8%,var(--m-text-input-background, var(--m-background)));box-shadow:none;transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease)}.toggle input[type=checkbox]:after{content:\"\";position:absolute;top:calc((var(--input-size, 1em) - calc(var(--input-size, 1em) * .7)) / 2);left:calc((var(--input-size, 1em) - calc(var(--input-size, 1em) * .7)) / 2);width:calc(var(--input-size, 1em) * .7);height:calc(var(--input-size, 1em) * .7);border-radius:50%;background-color:var(--m-input-color, var(--m-mm));box-shadow:none;transition:transform .25s cubic-bezier(.4,0,.2,1)}.toggle input[type=checkbox]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-mm) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-mm) 12%, var(--m-background)))}.toggle input[type=checkbox]:focus,.toggle input[type=checkbox]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-mm));box-shadow:none;outline:none}.toggle input[type=checkbox]:checked{border-color:var(--m-toggle-checked-border, var(--m-input-color, var(--m-mm)));background:var(--m-toggle-checked-background, var(--m-input-color, var(--m-mm)))}.toggle input[type=checkbox]:checked:after{transform:translate(calc(calc(var(--input-size, 1em) * 2) - var(--input-size, 1em)));background-color:var(--m-text-input-background, var(--m-background))}.toggle input[type=checkbox]:checked:hover:not(:disabled){background:color-mix(in srgb,var(--m-toggle-checked-background, var(--m-mm)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-toggle-checked-border, var(--m-mm)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-mm) 18%,transparent)}.toggle input[type=checkbox]:checked:focus,.toggle input[type=checkbox]:checked:focus-visible{box-shadow:none}.toggle input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.toggle input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.toggle label{flex:1;min-width:0;margin:0;cursor:pointer;font-size:var(--m-label-font-size, calc(var(--input-size, 1em) * .85));font-weight:var(--m-label-weight, var(--m-text-input-label-weight, 500));line-height:1.2;color:var(--m-label-color, var(--m-text))}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["touchedChange"]
+		}],
+		focused: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "focused",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}]
+	}
+});
+export { ToggleInputComponent };
+
+//# sourceMappingURL=magmonium-one-toggle-D2XEbN-b.mjs.map

package/fesm2022/magmonium-one-toggle-D2XEbN-b.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-toggle-D2XEbN-b.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/toggle/toggle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  ModelSignal,\n} from '@angular/core';\nimport { ToggleInput } from '../../model/input';\nimport { TranslatePipe } from '../../../../pipe/translate';\nimport {\n  FormCheckboxControl,\n  ValidationError,\n  WithOptionalFieldTree,\n} from '@angular/forms/signals';\nimport { BaseInputComponent } from '../../lib/base-input';\n\n@Component({\n  selector: 'm-toggle-input',\n  template: `\n    @if (config(); as toggle) {\n      <div class=\"toggle\">\n        <input\n          [id]=\"toggle.name ?? ''\"\n          [checked]=\"checked()\"\n          (change)=\"onChange($event)\"\n          type=\"checkbox\"\n        />\n        <label [attr.for]=\"toggle.name || null\">{{\n          toggle.label | translate\n        }}</label>\n      </div>\n    }\n  `,\n  imports: [TranslatePipe],\n  styleUrl: './toggle.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleInputComponent\n  extends BaseInputComponent<ToggleInput>\n  implements FormCheckboxControl\n{\n  public value = undefined;\n  public checked = model<boolean>(false) as ModelSignal<boolean>;\n  public override config = input<Partial<ToggleInput> | undefined>();\n  public override required = input<boolean>(false);\n  public override disabled = input<boolean>(false);\n  public override invalid = input<boolean>(false);\n  public override touched = model<boolean>(false);\n  public override focused = input<boolean>(false);\n  public override errors = input<readonly WithOptionalFieldTree<ValidationError>[]>(\n    []\n  );\n  public override showErrors = computed(() => this.touched() && this.invalid());\n\n  /** Required by FormCheckboxControl interface */\n  // public readonly checked: ModelSignal<boolean> = this.value; // Already defined above\n\n  constructor() {\n    super();\n  }\n\n  protected onChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.checked.set(target?.checked ?? false);\n  }\n}\n"],"mappings":";;;;AAsCA,IAAa,uBAAb,MAAa,6BACH,mBAA+B;CAGhC,QAAQ;CACR,UAAU,MAAe,KAAK;CACrB,SAAS,MAAyC,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClD,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,SAAS,MACvB,CAAA,GACD,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACe,aAAa,eAAe,KAAK,QAAO,KAAM,KAAK,QAAO,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAK7E,cAAA;EACE,MAAK;CACP;CAEU,SAAS,OAAY;EAC7B,MAAM,SAAS,MAAM;EACrB,KAAK,QAAQ,IAAI,QAAQ,WAAW,KAAK;CAC3C;CA3BW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,SAAA;GAAA,SAAA;EAAA;EAAA,iBAAA;EAAA,UAAA;EAAA,UAnBrB;;;;;;;;;;;;;;;EAcT,UAAA;EAAA,QAAA,CAAA,+6GAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MACS;GAAa,MAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAIZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EArBhC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,UAChB;;;;;;;;;;;;;;;GAcT,SACQ,CAAC,aAAa;GAAC,iBAEP,wBAAwB;GAAM,QAAA,CAAA,+6GAAA;EAAA,CAAA"}