@magmonium/one 0.4.30 → 0.4.31

package/fesm2022/magmonium-one-button-rVNnp6G8.mjs

@@ -0,0 +1,1281 @@
+import { K as NAV_STORE_REF, c as TranslatePipe, v as HttpService } from "./magmonium-one-size-converter-B-UubQQ0.mjs";
+import { n as resolvePallet } from "./magmonium-one-color-utl-CirPzUFk.mjs";
+import "./magmonium-one-theme-a7GlFbzE.mjs";
+import { r as IconComponent } from "./magmonium-one-icon-Dso-9RMN.mjs";
+import { n as toAttrNumber, r as ConfigComponent, t as toAttrBool } from "./magmonium-one-attribute-value-CLBOZcme.mjs";
+import { t as MRefDirective } from "./magmonium-one-m-ref-Dt0DCm8X.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, InjectionToken, ViewEncapsulation, computed, effect, forwardRef, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { IMAGE_LOADER, NgOptimizedImage, NgTemplateOutlet } from "@angular/common";
+const getBadgeClasses = (config) => {
+	if (!config) return "badge";
+	const classes = ["badge"];
+	if (config.variant) classes.push(`badge--${config.variant}`);
+	if (config.position && config.position !== "static") classes.push(`badge--${config.position}`);
+	if (config.animation && config.animation !== "none") classes.push(`badge--${config.animation}`);
+	return classes.join(" ");
+};
+const formatBadgeCount = (count, maxCount = 99) => {
+	if (count === void 0 || count <= 0) return "";
+	if (count > maxCount) return `${maxCount}+`;
+	return count.toString();
+};
+const shouldShowBadge = (count) => count !== void 0 && count > 0;
+var BadgeComponent = class BadgeComponent extends ConfigComponent {
+	subFolder = "badges";
+	config = model(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+	classes = computed(() => getBadgeClasses(this.config()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	iconConfig = computed(() => {
+		const iconName = this.config()?.icon;
+		if (!iconName) return void 0;
+		const variant = this.config()?.variant;
+		let color = "";
+		if (variant === "saas") color = "mm";
+		else if (variant === "minimal") color = "textSecondary";
+		else color = this.pallet()?.contrastColor || "";
+		return {
+			name: iconName,
+			color
+		};
+	}, ...ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: BadgeComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: BadgeComponent,
+		isStandalone: true,
+		selector: "m-badge",
+		inputs: { config: {
+			classPropertyName: "config",
+			publicName: "config",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { config: "configChange" },
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <span [class]="classes()">
+      @if (iconConfig(); as icon) {
+        <m-icon [config]="icon" />
+      }
+      <ng-content />
+      @if (config()?.ping) {
+        <span class="badge__ping"></span>
+      }
+    </span>
+  `,
+		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)}}.badge{height:var(--m-badge-height, calc(var(--m-badge-size, .875rem) * 2));min-height:var(--m-badge-height, calc(var(--m-badge-size, .875rem) * 2));min-width:var(--m-badge-min-width, calc(var(--m-badge-size, .875rem) * 2));padding:var(--m-badge-padding, 0 calc(var(--m-badge-size, .875rem) * 1.25 * 1));gap:var(--m-badge-gap, calc(var(--m-badge-size, .875rem) * .375));border-width:max(1px,var(--m-badge-size, .875rem) * .0625);border-style:solid;border-color:var(--m-badge-border-color, transparent);border-radius:var(--m-badge-radius, 9999px);font-size:var(--m-badge-size, .875rem);display:inline-flex;align-items:center;justify-content:center;position:relative;font-weight:300;line-height:1;color:var(--M-BADGE-color-contrast, var(--m-inverse-text));background-color:var(--M-BADGE-color, var(--m-mm));white-space:nowrap;transition:all .3s cubic-bezier(.16,1,.3,1);-webkit-user-select:none;user-select:none}.badge m-icon{font-size:1.1em;margin-left:-.1em;margin-right:-.1em}.badge--absolute,.badge--top-right{position:absolute;top:0;right:0;transform:translate(35%,-35%);z-index:5}.badge--top-left{position:absolute;top:0;left:0;transform:translate(-35%,-35%);z-index:5}.badge--bottom-right{position:absolute;bottom:0;right:0;transform:translate(35%,35%);z-index:5}.badge--bottom-left{position:absolute;bottom:0;left:0;transform:translate(-35%,35%);z-index:5}.badge--saas{background-color:var(--m-mm-lite);color:var(--m-mm);border:1.5px solid rgba(var(--m-mm-rgb, 120, 120, 120),.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #0000000a}.badge--status{padding:0;width:.85em;height:.85em;min-width:.85em;border-radius:50%;border:2px solid var(--m-background);background-color:var(--m-success)}.badge--status.badge--danger,.badge--status--danger{background-color:var(--m-error)}.badge--minimal{background:transparent;color:var(--m-text-secondary);padding:0;min-width:auto;border-radius:0}.badge--chip{background:transparent;color:var(--m-mm);border-color:var(--m-mm);border-radius:9999px;padding:var(--m-badge-chip-padding, 0 .5em)}.badge--primary,.badge--default{background-color:var(--M-BADGE-color, var(--m-mm));color:var(--M-BADGE-color-contrast, var(--m-inverse-text))}.badge--danger{background-color:var(--M-BADGE-color, var(--m-error));color:var(--M-BADGE-color-contrast, var(--m-inverse-text))}.badge--xs{--m-badge-size: .65rem}.badge--sm{--m-badge-size: .75rem}.badge--md{--m-badge-size: .875rem}.badge--lg{--m-badge-size: 1em}.badge--xl{--m-badge-size: 1.25em }.badge--pulse{animation:badge-pulse 2s infinite ease-in-out}.badge--shimmer{overflow:hidden}.badge--shimmer:before{content:\"\";position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:badge-shimmer 3s infinite linear;transform:skew(-25deg)}.badge__ping{position:absolute;inset:-2px;border-radius:inherit;background-color:inherit;animation:badge-ping 1.5s cubic-bezier(0,0,.2,1) infinite;opacity:.5;pointer-events:none;z-index:-1}@keyframes badge-ping{0%{transform:scale(1);opacity:.6}75%,to{transform:scale(2.8);opacity:0}}@keyframes badge-pulse{0%,to{transform:scale(1);box-shadow:0 0 rgba(var(--M-BADGE-color-rgb, 120, 120, 120),.4)}50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(var(--M-BADGE-color-rgb, 120, 120, 120),0)}}@keyframes badge-shimmer{0%{left:-150%}30%,to{left:150%}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "m-icon, m-one-icon",
+			inputs: [
+				"config",
+				"name",
+				"color",
+				"size",
+				"one",
+				"baseUrl",
+				"remote"
+			],
+			outputs: ["configChange"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: BadgeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-badge",
+			imports: [IconComponent],
+			template: `
+    <span [class]="classes()">
+      @if (iconConfig(); as icon) {
+        <m-icon [config]="icon" />
+      }
+      <ng-content />
+      @if (config()?.ping) {
+        <span class="badge__ping"></span>
+      }
+    </span>
+  `,
+			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)}}.badge{height:var(--m-badge-height, calc(var(--m-badge-size, .875rem) * 2));min-height:var(--m-badge-height, calc(var(--m-badge-size, .875rem) * 2));min-width:var(--m-badge-min-width, calc(var(--m-badge-size, .875rem) * 2));padding:var(--m-badge-padding, 0 calc(var(--m-badge-size, .875rem) * 1.25 * 1));gap:var(--m-badge-gap, calc(var(--m-badge-size, .875rem) * .375));border-width:max(1px,var(--m-badge-size, .875rem) * .0625);border-style:solid;border-color:var(--m-badge-border-color, transparent);border-radius:var(--m-badge-radius, 9999px);font-size:var(--m-badge-size, .875rem);display:inline-flex;align-items:center;justify-content:center;position:relative;font-weight:300;line-height:1;color:var(--M-BADGE-color-contrast, var(--m-inverse-text));background-color:var(--M-BADGE-color, var(--m-mm));white-space:nowrap;transition:all .3s cubic-bezier(.16,1,.3,1);-webkit-user-select:none;user-select:none}.badge m-icon{font-size:1.1em;margin-left:-.1em;margin-right:-.1em}.badge--absolute,.badge--top-right{position:absolute;top:0;right:0;transform:translate(35%,-35%);z-index:5}.badge--top-left{position:absolute;top:0;left:0;transform:translate(-35%,-35%);z-index:5}.badge--bottom-right{position:absolute;bottom:0;right:0;transform:translate(35%,35%);z-index:5}.badge--bottom-left{position:absolute;bottom:0;left:0;transform:translate(-35%,35%);z-index:5}.badge--saas{background-color:var(--m-mm-lite);color:var(--m-mm);border:1.5px solid rgba(var(--m-mm-rgb, 120, 120, 120),.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #0000000a}.badge--status{padding:0;width:.85em;height:.85em;min-width:.85em;border-radius:50%;border:2px solid var(--m-background);background-color:var(--m-success)}.badge--status.badge--danger,.badge--status--danger{background-color:var(--m-error)}.badge--minimal{background:transparent;color:var(--m-text-secondary);padding:0;min-width:auto;border-radius:0}.badge--chip{background:transparent;color:var(--m-mm);border-color:var(--m-mm);border-radius:9999px;padding:var(--m-badge-chip-padding, 0 .5em)}.badge--primary,.badge--default{background-color:var(--M-BADGE-color, var(--m-mm));color:var(--M-BADGE-color-contrast, var(--m-inverse-text))}.badge--danger{background-color:var(--M-BADGE-color, var(--m-error));color:var(--M-BADGE-color-contrast, var(--m-inverse-text))}.badge--xs{--m-badge-size: .65rem}.badge--sm{--m-badge-size: .75rem}.badge--md{--m-badge-size: .875rem}.badge--lg{--m-badge-size: 1em}.badge--xl{--m-badge-size: 1.25em }.badge--pulse{animation:badge-pulse 2s infinite ease-in-out}.badge--shimmer{overflow:hidden}.badge--shimmer:before{content:\"\";position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:badge-shimmer 3s infinite linear;transform:skew(-25deg)}.badge__ping{position:absolute;inset:-2px;border-radius:inherit;background-color:inherit;animation:badge-ping 1.5s cubic-bezier(0,0,.2,1) infinite;opacity:.5;pointer-events:none;z-index:-1}@keyframes badge-ping{0%{transform:scale(1);opacity:.6}75%,to{transform:scale(2.8);opacity:0}}@keyframes badge-pulse{0%,to{transform:scale(1);box-shadow:0 0 rgba(var(--M-BADGE-color-rgb, 120, 120, 120),.4)}50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(var(--M-BADGE-color-rgb, 120, 120, 120),0)}}@keyframes badge-shimmer{0%{left:-150%}30%,to{left:150%}}\n"]
+		}]
+	}],
+	propDecorators: { config: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "config",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["configChange"]
+	}] }
+});
+var ReactiveElementComponent = class extends ConfigComponent {
+	classList = signal([], ...ngDevMode ? [{ debugName: "classList" }] : /* istanbul ignore next */ []);
+	observer = null;
+	constructor() {
+		super();
+		effect(() => {
+			const el = this.element()?.nativeElement;
+			if (this.observer) {
+				this.observer.disconnect();
+				this.observer = null;
+			}
+			if (!el) {
+				this.classList.set([]);
+				return;
+			}
+			this.classList.set(Array.from(el.classList));
+			this.observer = new MutationObserver(() => {
+				this.classList.set(Array.from(el.classList));
+			});
+			this.observer.observe(el, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+		});
+	}
+	hasClass(className) {
+		return this.classList().includes(className);
+	}
+	toggleClass(className, force) {
+		const el = this.element()?.nativeElement;
+		if (!el) return;
+		if (force !== void 0) el.classList.toggle(className, force);
+		else el.classList.toggle(className);
+	}
+	addClass(...classNames) {
+		const el = this.element()?.nativeElement;
+		if (!el) return;
+		el.classList.add(...classNames);
+	}
+	removeClass(...classNames) {
+		const el = this.element()?.nativeElement;
+		if (!el) return;
+		el.classList.remove(...classNames);
+	}
+	replaceClass(oldClass, newClass) {
+		const el = this.element()?.nativeElement;
+		if (!el) return;
+		el.classList.replace(oldClass, newClass);
+	}
+	setClassList(classNames) {
+		const el = this.element()?.nativeElement;
+		if (!el) return;
+		el.className = classNames.join(" ");
+	}
+};
+function deriveButtonClass(button) {
+	if (!button) return "";
+	const classList = [];
+	if (button.icon || button.imgSrc) {
+		if (!button.label || button.iconOnly) classList.push("only-icon");
+		classList.push(button.isRightIcon ? "with-right-icon" : "with-left-icon");
+	}
+	if (button.variant === "primary") classList.push("primary");
+	if (button.variant === "ghost") classList.push("ghost");
+	if (button.variant === "tab") classList.push("tab");
+	if (button.fullWidth) classList.push("full-width");
+	if (button.stacked) classList.push("stacked");
+	if (button.badge) classList.push("has-badge");
+	if (button.nonClickable) classList.push("read-only");
+	return classList.join(" ");
+}
+function isButtonName(name, button) {
+	if (!button) return false;
+	return button.name === name || button.label === name;
+}
+function deriveGroupClass(group) {
+	if (!group) return "";
+	const classList = [];
+	classList.push(group?.vertical ? "vertical" : "horizontal");
+	if (group?.center) classList.push("center");
+	if (group?.align) classList.push(`align-${group.align}`);
+	if (group?.primary) classList.push("is-primary");
+	return classList.join(" ");
+}
+var ImgComponent = class ImgComponent {
+	#httpService = inject(HttpService);
+	src = input(...ngDevMode ? [void 0, { debugName: "src" }] : /* istanbul ignore next */ []);
+	data = input(...ngDevMode ? [void 0, { debugName: "data" }] : /* istanbul ignore next */ []);
+	dataType = input("image/jpeg", ...ngDevMode ? [{ debugName: "dataType" }] : /* istanbul ignore next */ []);
+	alt = input.required(...ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []);
+	priority = input(false, ...ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []);
+	fill = input(true, ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
+	width = input(void 0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(void 0, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	remote = input(...ngDevMode ? [void 0, { debugName: "remote" }] : /* istanbul ignore next */ []);
+	ngSrcset = input(...ngDevMode ? [void 0, { debugName: "ngSrcset" }] : /* istanbul ignore next */ []);
+	sizes = input(...ngDevMode ? [void 0, { debugName: "sizes" }] : /* istanbul ignore next */ []);
+	attrWidth = computed(() => this.width() ?? 1200, ...ngDevMode ? [{ debugName: "attrWidth" }] : /* istanbul ignore next */ []);
+	attrHeight = computed(() => this.height() ?? 1800, ...ngDevMode ? [{ debugName: "attrHeight" }] : /* istanbul ignore next */ []);
+	widthAttr = computed(() => this.fill() ? void 0 : this.attrWidth(), ...ngDevMode ? [{ debugName: "widthAttr" }] : /* istanbul ignore next */ []);
+	heightAttr = computed(() => this.fill() ? void 0 : this.attrHeight(), ...ngDevMode ? [{ debugName: "heightAttr" }] : /* istanbul ignore next */ []);
+	boxWidth = computed(() => this.fill() ? null : this.width() ?? null, ...ngDevMode ? [{ debugName: "boxWidth" }] : /* istanbul ignore next */ []);
+	boxHeight = computed(() => this.fill() ? null : this.height() ?? null, ...ngDevMode ? [{ debugName: "boxHeight" }] : /* istanbul ignore next */ []);
+	isSized = computed(() => this.boxWidth() !== null && this.boxHeight() !== null, ...ngDevMode ? [{ debugName: "isSized" }] : /* istanbul ignore next */ []);
+	autoNgSrcset = computed(() => {
+		const custom = this.ngSrcset();
+		if (custom !== void 0) return custom;
+		const src = this.effectiveSrc();
+		if (src && src.includes("iiif.archive.org")) return this.fill() ? "480w, 768w, 960w, 1200w, 1920w, 2048w" : "1x, 2x";
+	}, ...ngDevMode ? [{ debugName: "autoNgSrcset" }] : /* istanbul ignore next */ []);
+	status = signal("loading", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	effectiveSrc = computed(() => {
+		const d = this.data();
+		if (d) return `data:${this.dataType()};base64,${d}`;
+		const src = this.src();
+		const remote = this.remote();
+		if (src && remote && !src.startsWith("http") && !src.startsWith("data:") && !src.startsWith("blob:")) return this.#httpService.buildWcAssetUrl(remote, src);
+		return src;
+	}, ...ngDevMode ? [{ debugName: "effectiveSrc" }] : /* istanbul ignore next */ []);
+	showFallback = computed(() => this.status() === "error" || !this.effectiveSrc(), ...ngDevMode ? [{ debugName: "showFallback" }] : /* istanbul ignore next */ []);
+	isDataUri = computed(() => {
+		const s = this.effectiveSrc();
+		return !!s && (s.startsWith("data:") || s.startsWith("blob:"));
+	}, ...ngDevMode ? [{ debugName: "isDataUri" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const source = this.effectiveSrc();
+			this.status.set(source ? "loading" : "error");
+		});
+	}
+	onLoad() {
+		this.status.set("loaded");
+	}
+	onError() {
+		this.status.set("error");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ImgComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ImgComponent,
+		isStandalone: true,
+		selector: "m-img",
+		inputs: {
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataType: {
+				classPropertyName: "dataType",
+				publicName: "dataType",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			alt: {
+				classPropertyName: "alt",
+				publicName: "alt",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			priority: {
+				classPropertyName: "priority",
+				publicName: "priority",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fill: {
+				classPropertyName: "fill",
+				publicName: "fill",
+				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
+			},
+			remote: {
+				classPropertyName: "remote",
+				publicName: "remote",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ngSrcset: {
+				classPropertyName: "ngSrcset",
+				publicName: "ngSrcset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sizes: {
+				classPropertyName: "sizes",
+				publicName: "sizes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"style.width.px": "boxWidth()",
+			"style.height.px": "boxHeight()"
+		} },
+		providers: [{
+			provide: IMAGE_LOADER,
+			useValue: (config) => {
+				const src = config.src;
+				if (src.includes("iiif.archive.org")) {
+					if (src.match(/(\/full\/)([^/]+)(\/0\/)/) && config.width) return src.replace(/(\/full\/)[^/]+(\/0\/)/, `$1${config.width},$2`);
+				}
+				return src;
+			}
+		}],
+		ngImport: i0,
+		template: `
+    <div
+      class="m-img"
+      [class.m-img--loaded]="status() === 'loaded'"
+      [class.m-img--error]="showFallback()"
+      [class.m-img--fill]="fill()"
+      [class.m-img--priority]="priority()"
+      [class.m-img--sized]="isSized()"
+    >
+      @if (showFallback()) {
+        <div class="m-img__fallback" role="img" [attr.aria-label]="alt()">
+          <svg viewBox="0 0 320 240" fill="none" preserveAspectRatio="xMidYMid slice">
+            <circle cx="112" cy="92" r="22" fill="currentColor" />
+            <path d="M40 200l72-72 56 56 40-40 72 72z" fill="currentColor" />
+          </svg>
+        </div>
+      } @else if (isDataUri()) {
+        <img
+          class="m-img__img"
+          [src]="effectiveSrc()!"
+          [alt]="alt()"
+          (load)="onLoad()"
+          (error)="onError()"
+          [width]="widthAttr()"
+          [height]="heightAttr()"
+          referrerpolicy="no-referrer"
+        />
+      } @else {
+        <img
+          class="m-img__img"
+          [ngSrc]="effectiveSrc()!"
+          [alt]="alt()"
+          [priority]="priority()"
+          (load)="onLoad()"
+          (error)="onError()"
+          [fill]="fill()"
+          [width]="widthAttr()"
+          [height]="heightAttr()"
+          [ngSrcset]="autoNgSrcset()!"
+          [sizes]="sizes() || undefined"
+          decoding="async"
+          referrerpolicy="no-referrer"
+        />
+      }
+      @if (status() === 'loading' && !priority()) {
+        <div class="m-img__skeleton"></div>
+      }
+    </div>
+  `,
+		isInline: true,
+		styles: [":host{display:block;width:100%;height:100%;max-width:100%;overflow:hidden;border-radius:inherit;contain:paint}.m-img{position:relative;width:100%;height:100%;background:#ffffff05;border-radius:inherit;transition:transform .6s cubic-bezier(.2,0,.2,1);display:flex;flex-direction:column}.m-img__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05) translateZ(0);filter:blur(10px) brightness(.8);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.2,0,.2,1),filter 1s ease-out}.m-img--loaded .m-img__img,.m-img--priority .m-img__img{opacity:1;transform:scale(1) translateZ(0);filter:blur(0) brightness(1)}.m-img__skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#fff0,#ffffff0d,#fff0);background-size:200% 100%;animation:shimmer 2s infinite linear,pulse 2.5s infinite ease-in-out;border-radius:inherit}.m-img__fallback{background:#0003;display:flex;align-items:center;justify-content:center;width:100%;height:100%;aspect-ratio:4/3;color:#ffffff52;border-radius:inherit}.m-img__fallback svg{display:block;width:100%;height:100%;border-radius:inherit}@media(hover:hover){.m-img:hover .m-img__img{transform:scale(1.04) translateZ(0);transition-duration:2s}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgOptimizedImage,
+			selector: "img[ngSrc]",
+			inputs: [
+				"ngSrc",
+				"ngSrcset",
+				"sizes",
+				"width",
+				"height",
+				"decoding",
+				"loading",
+				"priority",
+				"loaderParams",
+				"disableOptimizedSrcset",
+				"fill",
+				"placeholder",
+				"placeholderConfig",
+				"src",
+				"srcset"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ImgComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-img",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [NgOptimizedImage],
+			host: {
+				"[style.width.px]": "boxWidth()",
+				"[style.height.px]": "boxHeight()"
+			},
+			providers: [{
+				provide: IMAGE_LOADER,
+				useValue: (config) => {
+					const src = config.src;
+					if (src.includes("iiif.archive.org")) {
+						if (src.match(/(\/full\/)([^/]+)(\/0\/)/) && config.width) return src.replace(/(\/full\/)[^/]+(\/0\/)/, `$1${config.width},$2`);
+					}
+					return src;
+				}
+			}],
+			template: `
+    <div
+      class="m-img"
+      [class.m-img--loaded]="status() === 'loaded'"
+      [class.m-img--error]="showFallback()"
+      [class.m-img--fill]="fill()"
+      [class.m-img--priority]="priority()"
+      [class.m-img--sized]="isSized()"
+    >
+      @if (showFallback()) {
+        <div class="m-img__fallback" role="img" [attr.aria-label]="alt()">
+          <svg viewBox="0 0 320 240" fill="none" preserveAspectRatio="xMidYMid slice">
+            <circle cx="112" cy="92" r="22" fill="currentColor" />
+            <path d="M40 200l72-72 56 56 40-40 72 72z" fill="currentColor" />
+          </svg>
+        </div>
+      } @else if (isDataUri()) {
+        <img
+          class="m-img__img"
+          [src]="effectiveSrc()!"
+          [alt]="alt()"
+          (load)="onLoad()"
+          (error)="onError()"
+          [width]="widthAttr()"
+          [height]="heightAttr()"
+          referrerpolicy="no-referrer"
+        />
+      } @else {
+        <img
+          class="m-img__img"
+          [ngSrc]="effectiveSrc()!"
+          [alt]="alt()"
+          [priority]="priority()"
+          (load)="onLoad()"
+          (error)="onError()"
+          [fill]="fill()"
+          [width]="widthAttr()"
+          [height]="heightAttr()"
+          [ngSrcset]="autoNgSrcset()!"
+          [sizes]="sizes() || undefined"
+          decoding="async"
+          referrerpolicy="no-referrer"
+        />
+      }
+      @if (status() === 'loading' && !priority()) {
+        <div class="m-img__skeleton"></div>
+      }
+    </div>
+  `,
+			styles: [":host{display:block;width:100%;height:100%;max-width:100%;overflow:hidden;border-radius:inherit;contain:paint}.m-img{position:relative;width:100%;height:100%;background:#ffffff05;border-radius:inherit;transition:transform .6s cubic-bezier(.2,0,.2,1);display:flex;flex-direction:column}.m-img__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05) translateZ(0);filter:blur(10px) brightness(.8);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.2,0,.2,1),filter 1s ease-out}.m-img--loaded .m-img__img,.m-img--priority .m-img__img{opacity:1;transform:scale(1) translateZ(0);filter:blur(0) brightness(1)}.m-img__skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#fff0,#ffffff0d,#fff0);background-size:200% 100%;animation:shimmer 2s infinite linear,pulse 2.5s infinite ease-in-out;border-radius:inherit}.m-img__fallback{background:#0003;display:flex;align-items:center;justify-content:center;width:100%;height:100%;aspect-ratio:4/3;color:#ffffff52;border-radius:inherit}.m-img__fallback svg{display:block;width:100%;height:100%;border-radius:inherit}@media(hover:hover){.m-img:hover .m-img__img{transform:scale(1.04) translateZ(0);transition-duration:2s}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		dataType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataType",
+				required: false
+			}]
+		}],
+		alt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alt",
+				required: true
+			}]
+		}],
+		priority: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "priority",
+				required: false
+			}]
+		}],
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		remote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "remote",
+				required: false
+			}]
+		}],
+		ngSrcset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ngSrcset",
+				required: false
+			}]
+		}],
+		sizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sizes",
+				required: false
+			}]
+		}]
+	}
+});
+const SECTION_FORM_CONTEXT = new InjectionToken("SECTION_FORM_CONTEXT");
+var ButtonComponent = class ButtonComponent extends ReactiveElementComponent {
+	config = model(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+	color = input(...ngDevMode ? [void 0, { debugName: "color" }] : /* istanbul ignore next */ []);
+	labelClass = input(...ngDevMode ? [void 0, { debugName: "labelClass" }] : /* istanbul ignore next */ []);
+	fullWidth = input(...ngDevMode ? [void 0, { debugName: "fullWidth" }] : /* istanbul ignore next */ []);
+	nav = input(...ngDevMode ? [void 0, { debugName: "nav" }] : /* istanbul ignore next */ []);
+	navParams = input(...ngDevMode ? [void 0, { debugName: "navParams" }] : /* istanbul ignore next */ []);
+	href = input(...ngDevMode ? [void 0, { debugName: "href" }] : /* istanbul ignore next */ []);
+	disabled = input(...ngDevMode ? [void 0, { debugName: "disabled" }] : /* istanbul ignore next */ []);
+	variant = input(...ngDevMode ? [void 0, { debugName: "variant" }] : /* istanbul ignore next */ []);
+	name = input(...ngDevMode ? [void 0, { debugName: "name" }] : /* istanbul ignore next */ []);
+	baseUrl = input(...ngDevMode ? [void 0, { debugName: "baseUrl" }] : /* istanbul ignore next */ []);
+	one = input(...ngDevMode ? [void 0, { debugName: "one" }] : /* istanbul ignore next */ []);
+	remote = input(...ngDevMode ? [void 0, { debugName: "remote" }] : /* istanbul ignore next */ []);
+	subFolder = "buttons";
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	noTranslate = input(...ngDevMode ? [void 0, { debugName: "noTranslate" }] : /* istanbul ignore next */ []);
+	params = input(...ngDevMode ? [void 0, { debugName: "params" }] : /* istanbul ignore next */ []);
+	noNative = input(...ngDevMode ? [void 0, { debugName: "noNative" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	isRightIcon = input(...ngDevMode ? [void 0, { debugName: "isRightIcon" }] : /* istanbul ignore next */ []);
+	iconOnly = input(...ngDevMode ? [void 0, { debugName: "iconOnly" }] : /* istanbul ignore next */ []);
+	stacked = input(...ngDevMode ? [void 0, { debugName: "stacked" }] : /* istanbul ignore next */ []);
+	imgSrc = input(...ngDevMode ? [void 0, { debugName: "imgSrc" }] : /* istanbul ignore next */ []);
+	nonClickable = input(...ngDevMode ? [void 0, { debugName: "nonClickable" }] : /* istanbul ignore next */ []);
+	inverted = input(...ngDevMode ? [void 0, { debugName: "inverted" }] : /* istanbul ignore next */ []);
+	isSubmit = input(...ngDevMode ? [void 0, { debugName: "isSubmit" }] : /* istanbul ignore next */ []);
+	tabindex = input(...ngDevMode ? [void 0, { debugName: "tabindex" }] : /* istanbul ignore next */ []);
+	clicked = output();
+	button = viewChild("button", ...ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []);
+	element = this.button;
+	className = computed(() => deriveButtonClass(this.config()), ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+	navRef = inject(NAV_STORE_REF, { optional: true });
+	sectionForm = inject(SECTION_FORM_CONTEXT, { optional: true });
+	isFormSubmit = computed(() => {
+		if (!this.sectionForm || this.isDesignMode) return false;
+		const config = this.config();
+		if (config?.nav || config?.href) return false;
+		return config?.isSubmit === true;
+	}, ...ngDevMode ? [{ debugName: "isFormSubmit" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.config()?.disabled === true || this.isFormSubmit() && !!this.sectionForm?.blocked(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	isMurlActive = computed(() => {
+		const nav = this.config()?.nav;
+		if (!nav) return false;
+		if (!this.navRef?.murl()?.length) return false;
+		return this.navRef.id() === nav;
+	}, ...ngDevMode ? [{ debugName: "isMurlActive" }] : /* istanbul ignore next */ []);
+	isPrimary = computed(() => this.variant() === "primary" || this.config()?.variant === "primary" || this.hasClass("primary"), ...ngDevMode ? [{ debugName: "isPrimary" }] : /* istanbul ignore next */ []);
+	colorInput = computed(() => this.color() || this.config()?.color || "mm", ...ngDevMode ? [{ debugName: "colorInput" }] : /* istanbul ignore next */ []);
+	buttonColor = computed(() => {
+		const color = this.colorInput();
+		const isPrimary = this.isPrimary();
+		if (isPrimary && color === "inverseText") return resolvePallet("mm", this.themeStore.color()).color;
+		const pallet = resolvePallet(color, this.themeStore.color());
+		return isPrimary ? pallet.contrastColor : pallet.color;
+	}, ...ngDevMode ? [{ debugName: "buttonColor" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		effect(() => {
+			const isPrimary = this.isPrimary();
+			const colorInput = this.colorInput();
+			const el = this.elementRef.nativeElement;
+			if (isPrimary && colorInput === "inverseText") {
+				el.style.setProperty("--m-button-color-contrast", this.buttonColor());
+				el.style.setProperty("--m-one-button-color-contrast", this.buttonColor());
+			}
+		});
+	}
+	buttonIcon = computed(() => {
+		if (!this.config()?.icon) return;
+		return {
+			name: this.config()?.icon,
+			color: this.buttonColor(),
+			baseUrl: this.baseUrl(),
+			remote: this.remote() ?? this.config()?.remote
+		};
+	}, ...ngDevMode ? [{ debugName: "buttonIcon" }] : /* istanbul ignore next */ []);
+	overrideProperty = computed(() => {
+		const button = {};
+		const put = (key, value) => {
+			if (value !== void 0) button[key] = value;
+		};
+		put("label", this.label());
+		put("icon", this.icon());
+		put("imgSrc", this.imgSrc());
+		put("tabindex", toAttrNumber(this.tabindex()));
+		put("noTranslate", toAttrBool(this.noTranslate()));
+		put("params", this.params());
+		put("isRightIcon", toAttrBool(this.isRightIcon()));
+		put("iconOnly", toAttrBool(this.iconOnly()));
+		put("stacked", toAttrBool(this.stacked()));
+		put("nonClickable", toAttrBool(this.nonClickable()));
+		put("inverted", toAttrBool(this.inverted()));
+		put("isSubmit", toAttrBool(this.isSubmit()));
+		if (this.color()) button["color"] = this.color();
+		if (this.labelClass()) button["labelClass"] = this.labelClass();
+		if (typeof this.fullWidth() !== "undefined") button["fullWidth"] = toAttrBool(this.fullWidth());
+		if (this.nav()) button["nav"] = this.nav();
+		if (this.navParams()) button["navParams"] = this.navParams();
+		if (this.href()) button["href"] = this.href();
+		if (typeof this.disabled() !== "undefined") button["disabled"] = this.disabled();
+		if (this.variant()) button["variant"] = this.variant();
+		const finalColor = button.color || this.config()?.color;
+		const isExplicitGhost = button.variant === "ghost" || this.config()?.variant === "ghost";
+		const isExplicitSecondary = button.variant === "secondary" || this.config()?.variant === "secondary";
+		if ((finalColor === "inverse" || finalColor === "inverseText") && !isExplicitGhost && !isExplicitSecondary) {
+			button["color"] = "inverseText";
+			button["variant"] = "primary";
+		} else if (finalColor === "inverse") button["color"] = "inverseText";
+		if (this.config()?.nav || this.nav()) button["variant"] = this.isMurlActive() ? void 0 : "ghost";
+		return button;
+	}, ...ngDevMode ? [{ debugName: "overrideProperty" }] : /* istanbul ignore next */ []);
+	resolveComponentOverrides() {
+		return this.overrideProperty();
+	}
+	onClick() {
+		if (this.isFormSubmit()) this.sectionForm?.submit();
+		this.clicked.emit(this.config());
+	}
+	formatBadgeCount = (count, max = 99) => formatBadgeCount(count, max);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ButtonComponent,
+		isStandalone: true,
+		selector: "m-button,m-one-button",
+		inputs: {
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelClass: {
+				classPropertyName: "labelClass",
+				publicName: "labelClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fullWidth: {
+				classPropertyName: "fullWidth",
+				publicName: "fullWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nav: {
+				classPropertyName: "nav",
+				publicName: "nav",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navParams: {
+				classPropertyName: "navParams",
+				publicName: "navParams",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			href: {
+				classPropertyName: "href",
+				publicName: "href",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			baseUrl: {
+				classPropertyName: "baseUrl",
+				publicName: "baseUrl",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			one: {
+				classPropertyName: "one",
+				publicName: "one",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			remote: {
+				classPropertyName: "remote",
+				publicName: "remote",
+				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
+			},
+			noNative: {
+				classPropertyName: "noNative",
+				publicName: "noNative",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isRightIcon: {
+				classPropertyName: "isRightIcon",
+				publicName: "isRightIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconOnly: {
+				classPropertyName: "iconOnly",
+				publicName: "iconOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stacked: {
+				classPropertyName: "stacked",
+				publicName: "stacked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			imgSrc: {
+				classPropertyName: "imgSrc",
+				publicName: "imgSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nonClickable: {
+				classPropertyName: "nonClickable",
+				publicName: "nonClickable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inverted: {
+				classPropertyName: "inverted",
+				publicName: "inverted",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isSubmit: {
+				classPropertyName: "isSubmit",
+				publicName: "isSubmit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tabindex: {
+				classPropertyName: "tabindex",
+				publicName: "tabindex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			config: "configChange",
+			clicked: "clicked"
+		},
+		viewQueries: [{
+			propertyName: "button",
+			first: true,
+			predicate: ["button"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "@if (config(); as config) {\n  <!-- One branch for every in-app target: `mRef` names a NavId and the store\n       reads the NavKind off that node to decide route vs panel (ADR 0014). -->\n  @if (config.nav) {\n    @if (!noNative()) {\n      <button\n        type=\"button\"\n        class=\"{{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.tabindex]=\"config.tabindex\"\n        [disabled]=\"config.disabled\"\n        [mRef]=\"config.nav\"\n        [mRefParams]=\"config.navParams\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        mRefLinkActive=\"tab\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </button>\n    } @else {\n      <div\n        role=\"button\"\n        [attr.tabindex]=\"config.tabindex ?? 0\"\n        class=\"non-native {{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        [attr.aria-disabled]=\"config.disabled ? 'true' : 'false'\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </div>\n    }\n  } @else if (config.href) {\n    <a\n      class=\"{{ className() }}\"\n      [attr.data-testid]=\"config.name + '-btn'\"\n      [attr.tabindex]=\"config.tabindex\"\n      [href]=\"config.href\"\n      [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n      (click)=\"onClick()\"\n      #button\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n    </a>\n  } @else {\n    @if (!noNative()) {\n      <button\n        type=\"button\"\n        class=\"{{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.tabindex]=\"config.tabindex\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </button>\n    } @else {\n      <div\n        role=\"button\"\n        [attr.tabindex]=\"config.tabindex ?? 0\"\n        class=\"non-native {{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </div>\n    }\n  }\n}\n\n<ng-template #buttonContent let-button=\"button\">\n  @if (button.imgSrc) {\n    <div class=\"button-icon button-icon--img\">\n      <m-img [src]=\"button.imgSrc\" [remote]=\"button.remote\" [alt]=\"button.label || button.name || ''\" />\n      @if (button.badge && button.badge.count) {\n        <m-badge\n          [config]=\"{ variant: button.badge.variant ?? 'danger', position: 'absolute' }\"\n          >{{ formatBadgeCount(button.badge.count) }}</m-badge\n        >\n      }\n    </div>\n  } @else if (buttonIcon(); as icon) {\n    <div class=\"button-icon\">\n      @if (isFromOne()) {\n        <m-one-icon [config]=\"icon\" />\n      } @else {\n        <m-icon [config]=\"icon\" />\n      }\n      @if (button.badge && button.badge.count) {\n        <m-badge\n          [config]=\"{ variant: button.badge.variant ?? 'danger', position: 'absolute' }\"\n          >{{ formatBadgeCount(button.badge.count) }}</m-badge\n        >\n      }\n    </div>\n  }\n  @if (button.label && !button.iconOnly) {\n    <span class=\"button-label {{ button.labelClass || '' }}\">\n      {{ button.noTranslate ? button.label : (button.label | translate: button.params) }}\n    </span>\n  }\n  @if (!buttonIcon() && button.badge && button.badge.count) {\n    <m-badge [config]=\"{ variant: button.badge.variant ?? 'danger', position: 'static' }\">{{\n      formatBadgeCount(button.badge.count)\n    }}</m-badge>\n  }\n</ng-template>\n",
+		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;vertical-align:middle;box-sizing:border-box;overflow:hidden;transition:box-shadow .15s ease;--m-btn-size: var(--m-button-size, 1em);--m-btn-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-btn-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff));--m-btn-color-opposite: var(--m-button-color-opposite, var(--m-one-button-color-opposite, #e1b941));--m-btn-h: calc(var(--m-btn-size) * 2.25);width:var(--m-button-width, var(--m-one-button-width, auto));min-width:0;height:var(--m-btn-h);font-size:var(--m-btn-size)}:host-context(.inverse),:host-context(.tabs-inverse),:host.inverse{--m-btn-color: var(--m-button-color, var(--m-one-button-color, var(--m-inverse-text)))}:host:has(.full-width){display:flex;width:100%}:host:has(.full-width) button .button-label{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}:host:has(.only-icon),:host:has(.toggle){width:var(--m-btn-h);min-width:var(--m-btn-h)}:host:has(.has-badge){overflow:visible}:host:has(.stacked),:host:has(.toggle){height:auto}button:not(.get):not(.toggle){height:calc(var(--input-size, var(--m-btn-size)) * 2);min-height:calc(var(--input-size, var(--m-btn-size)) * 2);border-width:max(1px,var(--input-size, var(--m-btn-size)) * .0625);border-radius:calc(var(--input-size, var(--m-btn-size)) * .4);padding:calc(var(--input-size, var(--m-btn-size)) * .5) calc(var(--input-size, var(--m-btn-size)) * .5);gap:calc(var(--input-size, var(--m-btn-size)) * .375);font-size:var(--input-size, var(--m-btn-size));border-color:var(--m-btn-color);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}button:not(.get):not(.toggle):hover:not(:disabled){background-color:color-mix(in srgb,var(--m-btn-color) 6%,transparent)}button:not(.get):not(.toggle):disabled{opacity:.6;cursor:not-allowed}button:not(.get):not(.toggle){height:auto;padding:calc(var(--m-btn-size) * .625) calc(var(--m-btn-size) * 1.25);gap:calc(var(--m-btn-size) * .375);border-style:solid;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;appearance:none;width:100%;height:100%;min-height:0;padding:0 calc(var(--m-btn-size) * 1.25);border-width:var(--m-button-border-width, 1px);border-radius:var(--m-button-radius, calc(var(--m-btn-size) * .5));color:var(--m-btn-color);font-weight:300;line-height:1;-webkit-user-select:none;user-select:none;position:relative;outline:none;box-shadow:var(--m-button-shadow, var(--m-one-button-shadow, none));transition:filter .15s ease,background .15s ease}button:not(.get):not(.toggle):hover:not(:disabled){filter:brightness(1.04)}button:not(.get):not(.toggle):focus-visible:not(:disabled){outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px}button:not(.get):not(.toggle):active:not(:disabled){transform:scale(.97)}button:not(.get):not(.toggle):disabled{opacity:.35;cursor:not-allowed;pointer-events:none;filter:grayscale(80%)}button:not(.get):not(.toggle).read-only{pointer-events:none!important;cursor:default!important;transform:none!important;box-shadow:none!important;background:transparent!important;border-color:transparent!important;opacity:1!important}button:not(.get):not(.toggle).read-only .button-icon{transform:none!important;color:inherit!important}button:not(.get):not(.toggle).primary{background:var(--m-btn-color);border-color:var(--m-btn-color);color:var(--m-btn-color-contrast)}button:not(.get):not(.toggle).primary:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--m-btn-color) 88%,black);border-color:color-mix(in srgb,var(--m-btn-color) 88%,black)}button:not(.get):not(.toggle).primary:active:not(:disabled){filter:brightness(.94);transform:scale(.97)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab){background:transparent;border-color:transparent;color:var(--m-btn-color);box-shadow:none}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab):hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--m-btn-color) 8%,transparent)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab):active:not(:disabled){background:color-mix(in srgb,var(--m-btn-color) 14%,transparent);transform:scale(.97)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab).secondary{border:var(--m-button-border-width, 1px) solid color-mix(in srgb,var(--m-btn-color) 15%,transparent)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab).secondary:hover:not(:disabled){filter:none;border-color:color-mix(in srgb,var(--m-btn-color) 40%,transparent);background:color-mix(in srgb,var(--m-btn-color) 6%,transparent)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab).secondary:active:not(:disabled){border-color:color-mix(in srgb,var(--m-btn-color) 50%,transparent);background:color-mix(in srgb,var(--m-btn-color) 12%,transparent)}button:not(.get):not(.toggle).secondary:not(.primary):not(.ghost){background:transparent;border-color:var(--m-btn-color);color:var(--m-btn-color)}button:not(.get):not(.toggle).secondary:not(.primary):not(.ghost):hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--m-btn-color) 8%,transparent)}button:not(.get):not(.toggle).secondary:not(.primary):not(.ghost):active:not(:disabled){background:color-mix(in srgb,var(--m-btn-color) 14%,transparent);transform:scale(.97)}button:not(.get):not(.toggle).tab{background:var(--m-backdrop-border);border-color:var(--m-backdrop-border);color:var(--m-btn-color)}button:not(.get):not(.toggle).tab:hover:not(:disabled){background:color-mix(in srgb,var(--m-backdrop-border) 82%,black);border-color:color-mix(in srgb,var(--m-backdrop-border) 82%,black);filter:none}button:not(.get):not(.toggle).tab:active:not(:disabled){background:color-mix(in srgb,var(--m-backdrop-border) 70%,black);border-color:color-mix(in srgb,var(--m-backdrop-border) 70%,black);transform:scale(.97)}button:not(.get):not(.toggle).segmented .button-icon,button:not(.get):not(.toggle).badge-accent .button-icon,button:not(.get):not(.toggle).with-right-icon .button-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--m-btn-color-opposite);order:1}button:not(.get):not(.toggle).segmented .button-label,button:not(.get):not(.toggle).badge-accent .button-label,button:not(.get):not(.toggle).with-right-icon .button-label{order:-1}button:not(.get):not(.toggle).segmented.primary .button-icon,button:not(.get):not(.toggle).badge-accent.primary .button-icon,button:not(.get):not(.toggle).with-right-icon.primary .button-icon{color:var(--m-btn-color-opposite)}button:not(.get):not(.toggle).with-left-icon .button-icon{order:-1}button:not(.get):not(.toggle).with-left-icon .button-label{order:1}button:not(.get):not(.toggle).stacked{flex-direction:column;gap:calc(var(--m-btn-size) * .3);height:auto;min-height:var(--m-btn-h);padding:calc(var(--m-btn-size) * .625) calc(var(--m-btn-size) * .875)}button:not(.get):not(.toggle).stacked .button-label{font-size:calc(var(--m-btn-size) * .8)}button:not(.get):not(.toggle).only-icon{padding:0;border-width:var(--m-button-border-width, 1px);aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center}button:not(.get):not(.toggle).only-icon m-icon,button:not(.get):not(.toggle).only-icon m-one-icon{display:inline-flex}m-badge{--m-badge-height: 1.5em;--m-badge-min-width: 1.5em;--m-badge-padding: 0 .3em;--m-badge-gap: .1em}.button-label{display:inline-flex;align-items:center;line-height:normal;font-size:inherit;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button-icon{position:relative;display:inline-flex;align-items:center;justify-content:center}.button-icon--img{width:calc(var(--m-btn-size) * 1.75);height:calc(var(--m-btn-size) * 1.75);overflow:hidden}.button-icon--img m-img{width:100%;height:100%;display:block}.get{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--m-btn-h);padding:0 min(var(--m-btn-size) * 1.75,2rem);border-radius:4px;background:linear-gradient(135deg,var(--m-mm),var(--m-focus),var(--m-success),var(--m-mm));background-size:200% auto;color:#fff;font-size:calc(var(--m-btn-size) * .8);font-weight:300;letter-spacing:.06em;text-transform:uppercase;border:none;cursor:pointer;white-space:nowrap;line-height:1;transition:background-position .2s ease,transform .15s ease}.get:hover{background-position:right center}.get:focus-visible{outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px}.get:active{transform:scale(.97)}.toggle{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border:none;background:transparent;padding:0 min(var(--m-btn-size),1.25rem);border-radius:var(--m-button-radius, calc(var(--m-btn-size) * .375));box-shadow:none;color:var(--m-btn-color, var(--m-text-secondary));opacity:.65;font-family:inherit;font-size:var(--m-btn-size);font-weight:300;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background .15s ease,color .15s ease,opacity .15s ease;min-width:0}.toggle .button-icon{flex-shrink:0}.toggle .button-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0}.toggle:hover:not(:disabled){background:var(--m-button-hover-background, color-mix(in srgb, var(--m-focus) 8%, transparent));color:var(--m-button-hover-color, var(--m-text));opacity:1}.toggle:focus-visible:not(:disabled){outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px;opacity:1}.toggle.primary{background:var(--m-button-active-background, var(--m-mm));color:var(--m-button-active-color, #ffffff);opacity:1}.toggle.primary:hover:not(:disabled){background:var(--m-button-active-background, var(--m-mm));color:var(--m-button-active-color, #ffffff);opacity:1}.toggle.primary:active:not(:disabled){transform:scale(.97)}.non-native:not(.get):not(.toggle){appearance:none;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;padding:0 calc(var(--m-btn-size) * 1.25);border-width:2px;border-radius:4px;color:var(--m-btn-color);font-weight:300;line-height:1;-webkit-user-select:none;user-select:none;position:relative;outline:none;box-shadow:var(--m-button-shadow, var(--m-one-button-shadow, none));transition:filter .15s ease,background .15s ease}.non-native:not(.get):not(.toggle):hover:not([aria-disabled=true]){filter:brightness(1.04)}.non-native:not(.get):not(.toggle):focus-visible:not([aria-disabled=true]){outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px}.non-native:not(.get):not(.toggle):active:not([aria-disabled=true]){transform:scale(.97)}.non-native:not(.get):not(.toggle)[aria-disabled=true]{opacity:.35;cursor:not-allowed;pointer-events:none;filter:grayscale(80%)}.non-native:not(.get):not(.toggle).primary{background:var(--m-btn-color);border-color:var(--m-btn-color);color:var(--m-btn-color-contrast)}.non-native:not(.get):not(.toggle).primary:hover:not([aria-disabled=true]){filter:none;background:color-mix(in srgb,var(--m-btn-color) 88%,black);border-color:color-mix(in srgb,var(--m-btn-color) 88%,black)}.non-native:not(.get):not(.toggle).primary:active:not([aria-disabled=true]){filter:brightness(.94);transform:scale(.97)}.non-native:not(.get):not(.toggle).ghost:not(.primary):not(.tab){background:transparent;border-color:transparent;color:var(--m-btn-color);box-shadow:none}.non-native:not(.get):not(.toggle).ghost:not(.primary):not(.tab):hover:not([aria-disabled=true]){filter:none;background:color-mix(in srgb,var(--m-btn-color) 8%,transparent)}.non-native:not(.get):not(.toggle).ghost:not(.primary):not(.tab):active:not([aria-disabled=true]){background:color-mix(in srgb,var(--m-btn-color) 14%,transparent);transform:scale(.97)}.non-native:not(.get):not(.toggle):disabled{opacity:.3;cursor:not-allowed}@container togglegroup (max-width: 320px){.non-native:not(.get):not(.toggle).with-left-icon .button-label,.non-native:not(.get):not(.toggle).with-right-icon .button-label{display:none!important}}@media(max-width:600px){.non-native:not(.get):not(.toggle).with-left-icon .button-label,.non-native:not(.get):not(.toggle).with-right-icon .button-label{display:none!important}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: i0.forwardRef(() => IconComponent),
+				selector: "m-icon, m-one-icon",
+				inputs: [
+					"config",
+					"name",
+					"color",
+					"size",
+					"one",
+					"baseUrl",
+					"remote"
+				],
+				outputs: ["configChange"]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => BadgeComponent),
+				selector: "m-badge",
+				inputs: ["config"],
+				outputs: ["configChange"]
+			},
+			{
+				kind: "ngmodule",
+				type: i0.forwardRef(() => RouterModule)
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => MRefDirective),
+				selector: "[mRef]",
+				inputs: [
+					"mRef",
+					"mRefLinkActive",
+					"mRefToggle",
+					"mRefParams"
+				]
+			},
+			{
+				kind: "directive",
+				type: i0.forwardRef(() => NgTemplateOutlet),
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: i0.forwardRef(() => ImgComponent),
+				selector: "m-img",
+				inputs: [
+					"src",
+					"data",
+					"dataType",
+					"alt",
+					"priority",
+					"fill",
+					"width",
+					"height",
+					"remote",
+					"ngSrcset",
+					"sizes"
+				]
+			},
+			{
+				kind: "pipe",
+				type: i0.forwardRef(() => TranslatePipe),
+				name: "translate"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-button,m-one-button",
+			imports: [
+				forwardRef(() => TranslatePipe),
+				forwardRef(() => IconComponent),
+				forwardRef(() => BadgeComponent),
+				RouterModule,
+				MRefDirective,
+				forwardRef(() => NgTemplateOutlet),
+				forwardRef(() => ImgComponent)
+			],
+			encapsulation: ViewEncapsulation.Emulated,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (config(); as config) {\n  <!-- One branch for every in-app target: `mRef` names a NavId and the store\n       reads the NavKind off that node to decide route vs panel (ADR 0014). -->\n  @if (config.nav) {\n    @if (!noNative()) {\n      <button\n        type=\"button\"\n        class=\"{{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.tabindex]=\"config.tabindex\"\n        [disabled]=\"config.disabled\"\n        [mRef]=\"config.nav\"\n        [mRefParams]=\"config.navParams\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        mRefLinkActive=\"tab\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </button>\n    } @else {\n      <div\n        role=\"button\"\n        [attr.tabindex]=\"config.tabindex ?? 0\"\n        class=\"non-native {{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        [attr.aria-disabled]=\"config.disabled ? 'true' : 'false'\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </div>\n    }\n  } @else if (config.href) {\n    <a\n      class=\"{{ className() }}\"\n      [attr.data-testid]=\"config.name + '-btn'\"\n      [attr.tabindex]=\"config.tabindex\"\n      [href]=\"config.href\"\n      [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n      (click)=\"onClick()\"\n      #button\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n    </a>\n  } @else {\n    @if (!noNative()) {\n      <button\n        type=\"button\"\n        class=\"{{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.tabindex]=\"config.tabindex\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </button>\n    } @else {\n      <div\n        role=\"button\"\n        [attr.tabindex]=\"config.tabindex ?? 0\"\n        class=\"non-native {{ className() }}\"\n        [attr.data-testid]=\"config.name + '-btn'\"\n        [attr.aria-label]=\"config.noTranslate ? config.label : (config.label | translate: config.params)\"\n        [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n        (keydown.enter)=\"onClick()\"\n        (click)=\"onClick()\"\n        #button\n      >\n        <ng-container *ngTemplateOutlet=\"buttonContent; context: { button: config }\"></ng-container>\n      </div>\n    }\n  }\n}\n\n<ng-template #buttonContent let-button=\"button\">\n  @if (button.imgSrc) {\n    <div class=\"button-icon button-icon--img\">\n      <m-img [src]=\"button.imgSrc\" [remote]=\"button.remote\" [alt]=\"button.label || button.name || ''\" />\n      @if (button.badge && button.badge.count) {\n        <m-badge\n          [config]=\"{ variant: button.badge.variant ?? 'danger', position: 'absolute' }\"\n          >{{ formatBadgeCount(button.badge.count) }}</m-badge\n        >\n      }\n    </div>\n  } @else if (buttonIcon(); as icon) {\n    <div class=\"button-icon\">\n      @if (isFromOne()) {\n        <m-one-icon [config]=\"icon\" />\n      } @else {\n        <m-icon [config]=\"icon\" />\n      }\n      @if (button.badge && button.badge.count) {\n        <m-badge\n          [config]=\"{ variant: button.badge.variant ?? 'danger', position: 'absolute' }\"\n          >{{ formatBadgeCount(button.badge.count) }}</m-badge\n        >\n      }\n    </div>\n  }\n  @if (button.label && !button.iconOnly) {\n    <span class=\"button-label {{ button.labelClass || '' }}\">\n      {{ button.noTranslate ? button.label : (button.label | translate: button.params) }}\n    </span>\n  }\n  @if (!buttonIcon() && button.badge && button.badge.count) {\n    <m-badge [config]=\"{ variant: button.badge.variant ?? 'danger', position: 'static' }\">{{\n      formatBadgeCount(button.badge.count)\n    }}</m-badge>\n  }\n</ng-template>\n",
+			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;vertical-align:middle;box-sizing:border-box;overflow:hidden;transition:box-shadow .15s ease;--m-btn-size: var(--m-button-size, 1em);--m-btn-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-btn-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff));--m-btn-color-opposite: var(--m-button-color-opposite, var(--m-one-button-color-opposite, #e1b941));--m-btn-h: calc(var(--m-btn-size) * 2.25);width:var(--m-button-width, var(--m-one-button-width, auto));min-width:0;height:var(--m-btn-h);font-size:var(--m-btn-size)}:host-context(.inverse),:host-context(.tabs-inverse),:host.inverse{--m-btn-color: var(--m-button-color, var(--m-one-button-color, var(--m-inverse-text)))}:host:has(.full-width){display:flex;width:100%}:host:has(.full-width) button .button-label{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}:host:has(.only-icon),:host:has(.toggle){width:var(--m-btn-h);min-width:var(--m-btn-h)}:host:has(.has-badge){overflow:visible}:host:has(.stacked),:host:has(.toggle){height:auto}button:not(.get):not(.toggle){height:calc(var(--input-size, var(--m-btn-size)) * 2);min-height:calc(var(--input-size, var(--m-btn-size)) * 2);border-width:max(1px,var(--input-size, var(--m-btn-size)) * .0625);border-radius:calc(var(--input-size, var(--m-btn-size)) * .4);padding:calc(var(--input-size, var(--m-btn-size)) * .5) calc(var(--input-size, var(--m-btn-size)) * .5);gap:calc(var(--input-size, var(--m-btn-size)) * .375);font-size:var(--input-size, var(--m-btn-size));border-color:var(--m-btn-color);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}button:not(.get):not(.toggle):hover:not(:disabled){background-color:color-mix(in srgb,var(--m-btn-color) 6%,transparent)}button:not(.get):not(.toggle):disabled{opacity:.6;cursor:not-allowed}button:not(.get):not(.toggle){height:auto;padding:calc(var(--m-btn-size) * .625) calc(var(--m-btn-size) * 1.25);gap:calc(var(--m-btn-size) * .375);border-style:solid;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;appearance:none;width:100%;height:100%;min-height:0;padding:0 calc(var(--m-btn-size) * 1.25);border-width:var(--m-button-border-width, 1px);border-radius:var(--m-button-radius, calc(var(--m-btn-size) * .5));color:var(--m-btn-color);font-weight:300;line-height:1;-webkit-user-select:none;user-select:none;position:relative;outline:none;box-shadow:var(--m-button-shadow, var(--m-one-button-shadow, none));transition:filter .15s ease,background .15s ease}button:not(.get):not(.toggle):hover:not(:disabled){filter:brightness(1.04)}button:not(.get):not(.toggle):focus-visible:not(:disabled){outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px}button:not(.get):not(.toggle):active:not(:disabled){transform:scale(.97)}button:not(.get):not(.toggle):disabled{opacity:.35;cursor:not-allowed;pointer-events:none;filter:grayscale(80%)}button:not(.get):not(.toggle).read-only{pointer-events:none!important;cursor:default!important;transform:none!important;box-shadow:none!important;background:transparent!important;border-color:transparent!important;opacity:1!important}button:not(.get):not(.toggle).read-only .button-icon{transform:none!important;color:inherit!important}button:not(.get):not(.toggle).primary{background:var(--m-btn-color);border-color:var(--m-btn-color);color:var(--m-btn-color-contrast)}button:not(.get):not(.toggle).primary:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--m-btn-color) 88%,black);border-color:color-mix(in srgb,var(--m-btn-color) 88%,black)}button:not(.get):not(.toggle).primary:active:not(:disabled){filter:brightness(.94);transform:scale(.97)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab){background:transparent;border-color:transparent;color:var(--m-btn-color);box-shadow:none}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab):hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--m-btn-color) 8%,transparent)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab):active:not(:disabled){background:color-mix(in srgb,var(--m-btn-color) 14%,transparent);transform:scale(.97)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab).secondary{border:var(--m-button-border-width, 1px) solid color-mix(in srgb,var(--m-btn-color) 15%,transparent)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab).secondary:hover:not(:disabled){filter:none;border-color:color-mix(in srgb,var(--m-btn-color) 40%,transparent);background:color-mix(in srgb,var(--m-btn-color) 6%,transparent)}button:not(.get):not(.toggle).ghost:not(.primary):not(.tab).secondary:active:not(:disabled){border-color:color-mix(in srgb,var(--m-btn-color) 50%,transparent);background:color-mix(in srgb,var(--m-btn-color) 12%,transparent)}button:not(.get):not(.toggle).secondary:not(.primary):not(.ghost){background:transparent;border-color:var(--m-btn-color);color:var(--m-btn-color)}button:not(.get):not(.toggle).secondary:not(.primary):not(.ghost):hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--m-btn-color) 8%,transparent)}button:not(.get):not(.toggle).secondary:not(.primary):not(.ghost):active:not(:disabled){background:color-mix(in srgb,var(--m-btn-color) 14%,transparent);transform:scale(.97)}button:not(.get):not(.toggle).tab{background:var(--m-backdrop-border);border-color:var(--m-backdrop-border);color:var(--m-btn-color)}button:not(.get):not(.toggle).tab:hover:not(:disabled){background:color-mix(in srgb,var(--m-backdrop-border) 82%,black);border-color:color-mix(in srgb,var(--m-backdrop-border) 82%,black);filter:none}button:not(.get):not(.toggle).tab:active:not(:disabled){background:color-mix(in srgb,var(--m-backdrop-border) 70%,black);border-color:color-mix(in srgb,var(--m-backdrop-border) 70%,black);transform:scale(.97)}button:not(.get):not(.toggle).segmented .button-icon,button:not(.get):not(.toggle).badge-accent .button-icon,button:not(.get):not(.toggle).with-right-icon .button-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--m-btn-color-opposite);order:1}button:not(.get):not(.toggle).segmented .button-label,button:not(.get):not(.toggle).badge-accent .button-label,button:not(.get):not(.toggle).with-right-icon .button-label{order:-1}button:not(.get):not(.toggle).segmented.primary .button-icon,button:not(.get):not(.toggle).badge-accent.primary .button-icon,button:not(.get):not(.toggle).with-right-icon.primary .button-icon{color:var(--m-btn-color-opposite)}button:not(.get):not(.toggle).with-left-icon .button-icon{order:-1}button:not(.get):not(.toggle).with-left-icon .button-label{order:1}button:not(.get):not(.toggle).stacked{flex-direction:column;gap:calc(var(--m-btn-size) * .3);height:auto;min-height:var(--m-btn-h);padding:calc(var(--m-btn-size) * .625) calc(var(--m-btn-size) * .875)}button:not(.get):not(.toggle).stacked .button-label{font-size:calc(var(--m-btn-size) * .8)}button:not(.get):not(.toggle).only-icon{padding:0;border-width:var(--m-button-border-width, 1px);aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center}button:not(.get):not(.toggle).only-icon m-icon,button:not(.get):not(.toggle).only-icon m-one-icon{display:inline-flex}m-badge{--m-badge-height: 1.5em;--m-badge-min-width: 1.5em;--m-badge-padding: 0 .3em;--m-badge-gap: .1em}.button-label{display:inline-flex;align-items:center;line-height:normal;font-size:inherit;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button-icon{position:relative;display:inline-flex;align-items:center;justify-content:center}.button-icon--img{width:calc(var(--m-btn-size) * 1.75);height:calc(var(--m-btn-size) * 1.75);overflow:hidden}.button-icon--img m-img{width:100%;height:100%;display:block}.get{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--m-btn-h);padding:0 min(var(--m-btn-size) * 1.75,2rem);border-radius:4px;background:linear-gradient(135deg,var(--m-mm),var(--m-focus),var(--m-success),var(--m-mm));background-size:200% auto;color:#fff;font-size:calc(var(--m-btn-size) * .8);font-weight:300;letter-spacing:.06em;text-transform:uppercase;border:none;cursor:pointer;white-space:nowrap;line-height:1;transition:background-position .2s ease,transform .15s ease}.get:hover{background-position:right center}.get:focus-visible{outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px}.get:active{transform:scale(.97)}.toggle{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border:none;background:transparent;padding:0 min(var(--m-btn-size),1.25rem);border-radius:var(--m-button-radius, calc(var(--m-btn-size) * .375));box-shadow:none;color:var(--m-btn-color, var(--m-text-secondary));opacity:.65;font-family:inherit;font-size:var(--m-btn-size);font-weight:300;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background .15s ease,color .15s ease,opacity .15s ease;min-width:0}.toggle .button-icon{flex-shrink:0}.toggle .button-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0}.toggle:hover:not(:disabled){background:var(--m-button-hover-background, color-mix(in srgb, var(--m-focus) 8%, transparent));color:var(--m-button-hover-color, var(--m-text));opacity:1}.toggle:focus-visible:not(:disabled){outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px;opacity:1}.toggle.primary{background:var(--m-button-active-background, var(--m-mm));color:var(--m-button-active-color, #ffffff);opacity:1}.toggle.primary:hover:not(:disabled){background:var(--m-button-active-background, var(--m-mm));color:var(--m-button-active-color, #ffffff);opacity:1}.toggle.primary:active:not(:disabled){transform:scale(.97)}.non-native:not(.get):not(.toggle){appearance:none;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;padding:0 calc(var(--m-btn-size) * 1.25);border-width:2px;border-radius:4px;color:var(--m-btn-color);font-weight:300;line-height:1;-webkit-user-select:none;user-select:none;position:relative;outline:none;box-shadow:var(--m-button-shadow, var(--m-one-button-shadow, none));transition:filter .15s ease,background .15s ease}.non-native:not(.get):not(.toggle):hover:not([aria-disabled=true]){filter:brightness(1.04)}.non-native:not(.get):not(.toggle):focus-visible:not([aria-disabled=true]){outline:2px solid color-mix(in srgb,var(--m-focus) 45%,transparent);outline-offset:-2px}.non-native:not(.get):not(.toggle):active:not([aria-disabled=true]){transform:scale(.97)}.non-native:not(.get):not(.toggle)[aria-disabled=true]{opacity:.35;cursor:not-allowed;pointer-events:none;filter:grayscale(80%)}.non-native:not(.get):not(.toggle).primary{background:var(--m-btn-color);border-color:var(--m-btn-color);color:var(--m-btn-color-contrast)}.non-native:not(.get):not(.toggle).primary:hover:not([aria-disabled=true]){filter:none;background:color-mix(in srgb,var(--m-btn-color) 88%,black);border-color:color-mix(in srgb,var(--m-btn-color) 88%,black)}.non-native:not(.get):not(.toggle).primary:active:not([aria-disabled=true]){filter:brightness(.94);transform:scale(.97)}.non-native:not(.get):not(.toggle).ghost:not(.primary):not(.tab){background:transparent;border-color:transparent;color:var(--m-btn-color);box-shadow:none}.non-native:not(.get):not(.toggle).ghost:not(.primary):not(.tab):hover:not([aria-disabled=true]){filter:none;background:color-mix(in srgb,var(--m-btn-color) 8%,transparent)}.non-native:not(.get):not(.toggle).ghost:not(.primary):not(.tab):active:not([aria-disabled=true]){background:color-mix(in srgb,var(--m-btn-color) 14%,transparent);transform:scale(.97)}.non-native:not(.get):not(.toggle):disabled{opacity:.3;cursor:not-allowed}@container togglegroup (max-width: 320px){.non-native:not(.get):not(.toggle).with-left-icon .button-label,.non-native:not(.get):not(.toggle).with-right-icon .button-label{display:none!important}}@media(max-width:600px){.non-native:not(.get):not(.toggle).with-left-icon .button-label,.non-native:not(.get):not(.toggle).with-right-icon .button-label{display:none!important}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["configChange"]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		labelClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelClass",
+				required: false
+			}]
+		}],
+		fullWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullWidth",
+				required: false
+			}]
+		}],
+		nav: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nav",
+				required: false
+			}]
+		}],
+		navParams: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navParams",
+				required: false
+			}]
+		}],
+		href: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "href",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		baseUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "baseUrl",
+				required: false
+			}]
+		}],
+		one: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "one",
+				required: false
+			}]
+		}],
+		remote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "remote",
+				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
+			}]
+		}],
+		noNative: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noNative",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		isRightIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isRightIcon",
+				required: false
+			}]
+		}],
+		iconOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOnly",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				required: false
+			}]
+		}],
+		imgSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imgSrc",
+				required: false
+			}]
+		}],
+		nonClickable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nonClickable",
+				required: false
+			}]
+		}],
+		inverted: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inverted",
+				required: false
+			}]
+		}],
+		isSubmit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isSubmit",
+				required: false
+			}]
+		}],
+		tabindex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabindex",
+				required: false
+			}]
+		}],
+		clicked: [{
+			type: i0.Output,
+			args: ["clicked"]
+		}],
+		button: [{
+			type: i0.ViewChild,
+			args: ["button", { isSignal: true }]
+		}]
+	}
+});
+export { isButtonName as a, formatBadgeCount as c, deriveGroupClass as i, shouldShowBadge as l, SECTION_FORM_CONTEXT as n, ReactiveElementComponent as o, ImgComponent as r, BadgeComponent as s, ButtonComponent as t };
+
+//# sourceMappingURL=magmonium-one-button-rVNnp6G8.mjs.map