@magmonium/one 0.4.30 → 0.4.32

package/fesm2022/magmonium-one-menu-BM9f2knw.mjs

@@ -0,0 +1,887 @@
+import { K as NAV_STORE_REF, c as TranslatePipe, rt as Assets, v as HttpService } from "./magmonium-one-size-converter-BfT0Aw0g.mjs";
+import { t as SelectorDirective } from "./magmonium-one-selector-BowevmOd.mjs";
+import { r as IconComponent } from "./magmonium-one-icon-Ep14YeRY.mjs";
+import { r as ConfigComponent } from "./magmonium-one-attribute-value-DMI0yJpL.mjs";
+import { t as ButtonComponent } from "./magmonium-one-button-Bwzaxxn3.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, afterRenderEffect, computed, inject, input, inputBinding, model, output, outputBinding, signal, untracked, viewChild } from "@angular/core";
+import { of } from "rxjs";
+import { rxResource } from "@angular/core/rxjs-interop";
+import { catchError as catchError$1 } from "rxjs/operators";
+var MenuComponent = class MenuComponent {
+	#navRef = inject(NAV_STORE_REF, { optional: true });
+	config = input(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+	file = input(...ngDevMode ? [void 0, { debugName: "file" }] : /* istanbul ignore next */ []);
+	root = input(...ngDevMode ? [void 0, { debugName: "root" }] : /* istanbul ignore next */ []);
+	url = input(...ngDevMode ? [void 0, { debugName: "url" }] : /* istanbul ignore next */ []);
+	extra = input(...ngDevMode ? [void 0, { debugName: "extra" }] : /* istanbul ignore next */ []);
+	hide = input(...ngDevMode ? [void 0, { debugName: "hide" }] : /* istanbul ignore next */ []);
+	hideLink = input(false, ...ngDevMode ? [{ debugName: "hideLink" }] : /* istanbul ignore next */ []);
+	isAdmin = input(false, ...ngDevMode ? [{ debugName: "isAdmin" }] : /* istanbul ignore next */ []);
+	autoFocus = input(false, ...ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []);
+	action = output();
+	visibilityRule = input(...ngDevMode ? [void 0, { debugName: "visibilityRule" }] : /* istanbul ignore next */ []);
+	disableRule = input(...ngDevMode ? [void 0, { debugName: "disableRule" }] : /* istanbul ignore next */ []);
+	extraData = input(...ngDevMode ? [void 0, { debugName: "extraData" }] : /* istanbul ignore next */ []);
+	#httpService = inject(HttpService);
+	#tree = signal([], ...ngDevMode ? [{ debugName: "#tree" }] : /* istanbul ignore next */ []);
+	#treeMap = signal({}, ...ngDevMode ? [{ debugName: "#treeMap" }] : /* istanbul ignore next */ []);
+	#host = inject(ElementRef);
+	#focusPending;
+	back = signal(void 0, ...ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []);
+	slideDirection = signal("none", ...ngDevMode ? [{ debugName: "slideDirection" }] : /* istanbul ignore next */ []);
+	#asyncOptions = rxResource({
+		params: computed(() => this.back()?.file ?? this.file()),
+		stream: ({ params: file }) => {
+			if (!file) return of(void 0);
+			return this.#httpService.asset(["menus", file], Assets.JSON).pipe(catchError$1(() => of(void 0)));
+		}
+	});
+	options = computed(() => {
+		const back = this.back();
+		const async = this.#asyncOptions.value();
+		const config = this.config();
+		const hide = this.hide();
+		const extra = this.extra();
+		const isAdmin = this.isAdmin();
+		const vRule = this.visibilityRule();
+		const data = this.extraData();
+		const filterGroups = (groups) => groups.map((group) => group.filter((item) => {
+			if (!isAdmin && item.adminOnly) return false;
+			if (hide?.length && hide.includes(item.id)) return false;
+			if (vRule && !vRule(item.visibilityKey ?? item.id, data)) return false;
+			if (item.options) return filterGroups(item.options).length > 0;
+			return true;
+		})).filter((group) => group.length > 0);
+		const result = filterGroups(back ? back.options ?? async ?? [] : async ?? config ?? []);
+		return extra?.length && !back ? [...result, extra] : result;
+	}, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	isLoading = computed(() => this.#asyncOptions.isLoading(), ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			this.options();
+			if (this.isLoading()) return;
+			const pending = this.#focusPending ?? untracked(this.autoFocus);
+			this.#focusPending = false;
+			if (pending) this.#host.nativeElement.querySelector(".menu-item:not(.is-disabled)")?.focus();
+		});
+	}
+	moveFocus(event, step) {
+		const rows = Array.from(this.#host.nativeElement.querySelectorAll(".back-btn, .menu-item:not(.is-disabled)"));
+		if (!rows.length) return;
+		event.preventDefault();
+		const current = rows.indexOf(document.activeElement);
+		rows[current < 0 ? step > 0 ? 0 : rows.length - 1 : (current + step + rows.length) % rows.length].focus();
+	}
+	selectItem(item) {
+		const dRule = this.disableRule();
+		if (item.disabled || dRule && dRule(item.disableKey ?? item.id)) return;
+		if (item.options || item.file) {
+			this.slideDirection.set("forward");
+			this.#treeMap.update((map) => ({
+				...map,
+				[item.id]: item
+			}));
+			this.#tree.update((t) => [...t, item.id]);
+			this.back.set(item);
+			this.#focusPending = this.#hasFocus();
+			return;
+		}
+		if (item.nav) this.#navRef?.setSelected(item.nav, void 0, item.keepPanel ? { keepPanel: true } : void 0);
+		this.action.emit(item);
+	}
+	goBack() {
+		this.slideDirection.set("backward");
+		this.#focusPending = this.#hasFocus();
+		const currentTree = this.#tree();
+		if (currentTree.length <= 1) {
+			this.#tree.set([]);
+			this.back.set(void 0);
+			return;
+		}
+		const newTree = currentTree.slice(0, -1);
+		this.#tree.set(newTree);
+		const parentId = newTree[newTree.length - 1];
+		this.back.set(this.#treeMap()[parentId]);
+	}
+	#hasFocus() {
+		return this.#host.nativeElement.contains(document.activeElement);
+	}
+	isSelected(item) {
+		if (item.nav) return this.#navRef?.id() === item.nav;
+		const currentUrl = this.url();
+		const rootPath = this.root();
+		if (!currentUrl || !item.link) return item.selected ?? false;
+		const fullLink = rootPath ? `${rootPath}/${item.link}` : item.link;
+		return currentUrl === fullLink || currentUrl.startsWith(fullLink + "/");
+	}
+	isItemDisabled(item) {
+		const dRule = this.disableRule();
+		return !!(item.disabled || dRule && dRule(item.disableKey ?? item.id, this.extraData()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: MenuComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: MenuComponent,
+		isStandalone: true,
+		selector: "m-menu",
+		inputs: {
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			file: {
+				classPropertyName: "file",
+				publicName: "file",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			root: {
+				classPropertyName: "root",
+				publicName: "root",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			url: {
+				classPropertyName: "url",
+				publicName: "url",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			extra: {
+				classPropertyName: "extra",
+				publicName: "extra",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hide: {
+				classPropertyName: "hide",
+				publicName: "hide",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideLink: {
+				classPropertyName: "hideLink",
+				publicName: "hideLink",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isAdmin: {
+				classPropertyName: "isAdmin",
+				publicName: "isAdmin",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoFocus: {
+				classPropertyName: "autoFocus",
+				publicName: "autoFocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visibilityRule: {
+				classPropertyName: "visibilityRule",
+				publicName: "visibilityRule",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disableRule: {
+				classPropertyName: "disableRule",
+				publicName: "disableRule",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			extraData: {
+				classPropertyName: "extraData",
+				publicName: "extraData",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { action: "action" },
+		host: { listeners: {
+			"keydown.arrowdown": "moveFocus($event, 1)",
+			"keydown.arrowup": "moveFocus($event, -1)"
+		} },
+		ngImport: i0,
+		template: "<div class=\"menu-container\" [attr.data-slide]=\"slideDirection()\">\n  @if (back()) {\n    <div\n      class=\"back-btn\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"goBack()\"\n      (keydown.enter)=\"goBack()\"\n      (keydown.space)=\"goBack()\"\n    >\n      <div class=\"back-icon\">\n        <m-icon [name]=\"'chevron-left'\" color=\"currentColor\" />\n      </div>\n      <span class=\"back-text\">{{ back()!.label | translate }}</span>\n    </div>\n  }\n\n  <div class=\"menu-content\">\n    @if (isLoading()) {\n      <div class=\"menu-loading\">\n        <div class=\"spinner\"></div>\n      </div>\n    } @else {\n      <div class=\"menu-groups\">\n        @for (group of options(); track $index; let last = $last) {\n          <div class=\"menu-group\" [class.has-separator]=\"!last\">\n            @for (item of group; track item.id) {\n              @if (!item.hidden) {\n                <div\n                  class=\"menu-item\"\n                  [attr.data-testid]=\"item.id + '-btn'\"\n                  [class.is-selected]=\"isSelected(item)\"\n                  [class.is-disabled]=\"isItemDisabled(item)\"\n                  [attr.aria-disabled]=\"isItemDisabled(item) || null\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"selectItem(item)\"\n                  (keydown.enter)=\"selectItem(item)\"\n                  (keydown.space)=\"selectItem(item)\"\n                >\n                  @if (item.icon) {\n                    <div class=\"item-icon\">\n                      <m-icon [name]=\"item.icon\" color=\"currentColor\" />\n                    </div>\n                  }\n                  <span class=\"item-text\">{{ item.label | translate }}</span>\n                  @if (item.options || item.file) {\n                    <div class=\"item-arrow\">\n                      <m-icon [name]=\"'chevron-right'\" color=\"currentColor\" />\n                    </div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\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)}}.menu-container{display:flex;flex-direction:column;width:100%;border-radius:0;background:var(--m-menu-background, var(--m-background));border:none;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1)}.back-btn{height:calc(var(--input-size, .9375rem) * 2);min-height:calc(var(--input-size, .9375rem) * 2);border-width:max(1px,var(--input-size, .9375rem) * .0625);border-radius:calc(var(--input-size, .9375rem) * .4);padding:calc(var(--input-size, .9375rem) * .5) calc(var(--input-size, .9375rem) * .5);gap:calc(var(--input-size, .9375rem) * .375);font-size:var(--input-size, .9375rem);border-color:var(--m-text-secondary);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.back-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text-secondary) 6%,transparent)}.back-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{height:auto;min-height:0;padding:calc(.9375rem * .625) calc(.9375rem * 1.25);gap:calc(.9375rem * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:.5859375rem 1.171875rem;border-radius:0;border:none;border-bottom:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.back-btn:hover,.back-btn:focus-visible{outline:none;background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.back-btn:active{transform:scale(.97)}.back-btn .back-icon{display:flex;align-items:center}.back-btn .back-text{font-size:.9rem;font-weight:500}.menu-content{position:relative;width:100%}.menu-groups{display:flex;flex-direction:column;padding:6px}.menu-group{display:flex;flex-direction:column;gap:2px}.menu-group.has-separator{border-bottom:1px solid var(--m-backdrop-border);margin-bottom:6px;padding-bottom:6px}.menu-item{height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);min-height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);border-width:max(1px,var(--input-size, var(--menu-item-size, .9375rem)) * .0625);border-radius:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .4);padding:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5) calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5);gap:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .375);font-size:var(--input-size, var(--menu-item-size, .9375rem));border-color:var(--m-text);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.menu-item:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text) 6%,transparent)}.menu-item:disabled{opacity:.6;cursor:not-allowed}.menu-item{height:auto;min-height:0;padding:calc(var(--menu-item-size, .9375rem) * .625) calc(var(--menu-item-size, .9375rem) * 1.25);gap:calc(var(--menu-item-size, .9375rem) * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:0;border:none;color:var(--m-text);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.menu-item:focus-visible{outline:none}.menu-item:hover:not(.is-disabled):not(.menu-item.is-selected),.menu-item:focus-visible:not(.is-selected){background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.menu-item:active:not(.is-disabled){transform:scale(.97)}.menu-item.is-selected{background:var(--m-backdrop-mm);color:var(--m-mm);font-weight:600}.menu-item.is-selected .item-icon{color:var(--m-mm)}.menu-item.is-selected:hover,.menu-item.is-selected:focus-visible{background:color-mix(in srgb,var(--m-backdrop-mm) 88%,black)}.menu-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(75%)}.menu-item .item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--m-text-secondary)}.menu-item .item-text{flex:1;font-size:var(--menu-text-size, .9375rem)}.menu-item .item-arrow{display:flex;align-items:center;color:var(--m-text-quaternary)}.menu-container[data-size=sm]{--menu-item-size: .8125rem;--menu-item-padding: calc(.8125rem * .625) calc(.8125rem * 1.25);--menu-text-size: .8125rem;--menu-icon-size: 20px}.menu-container[data-size=md]{--menu-item-size: .9375rem;--menu-item-padding: calc(.9375rem * .625) calc(.9375rem * 1.25);--menu-text-size: .9375rem;--menu-icon-size: 24px}.menu-container[data-size=lg]{--menu-item-size: 1.0625rem;--menu-item-padding: calc(1.0625rem * .625) calc(1.0625rem * 1.25);--menu-text-size: 1rem;--menu-icon-size: 28px}.menu-item{padding:var(--menu-item-padding, 8px 12px)}.menu-item .item-icon{width:var(--menu-icon-size, 24px);height:var(--menu-icon-size, 24px)}.menu-loading{display:flex;align-items:center;justify-content:center;padding:24px}.menu-loading .spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide-forward{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}@keyframes slide-backward{0%{opacity:0;transform:translate(-15px)}to{opacity:1;transform:translate(0)}}.menu-container[data-slide=forward] .menu-content{animation:slide-forward .4s cubic-bezier(.165,.84,.44,1)}.menu-container[data-slide=backward] .menu-content{animation:slide-backward .4s cubic-bezier(.165,.84,.44,1)}:host-context(.align-bottom) .menu-container{border:none;border-radius:0}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "m-icon, m-one-icon",
+			inputs: [
+				"config",
+				"name",
+				"color",
+				"size",
+				"one",
+				"baseUrl",
+				"remote"
+			],
+			outputs: ["configChange"]
+		}, {
+			kind: "pipe",
+			type: TranslatePipe,
+			name: "translate"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: MenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-menu",
+			imports: [TranslatePipe, IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(keydown.arrowdown)": "moveFocus($event, 1)",
+				"(keydown.arrowup)": "moveFocus($event, -1)"
+			},
+			template: "<div class=\"menu-container\" [attr.data-slide]=\"slideDirection()\">\n  @if (back()) {\n    <div\n      class=\"back-btn\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"goBack()\"\n      (keydown.enter)=\"goBack()\"\n      (keydown.space)=\"goBack()\"\n    >\n      <div class=\"back-icon\">\n        <m-icon [name]=\"'chevron-left'\" color=\"currentColor\" />\n      </div>\n      <span class=\"back-text\">{{ back()!.label | translate }}</span>\n    </div>\n  }\n\n  <div class=\"menu-content\">\n    @if (isLoading()) {\n      <div class=\"menu-loading\">\n        <div class=\"spinner\"></div>\n      </div>\n    } @else {\n      <div class=\"menu-groups\">\n        @for (group of options(); track $index; let last = $last) {\n          <div class=\"menu-group\" [class.has-separator]=\"!last\">\n            @for (item of group; track item.id) {\n              @if (!item.hidden) {\n                <div\n                  class=\"menu-item\"\n                  [attr.data-testid]=\"item.id + '-btn'\"\n                  [class.is-selected]=\"isSelected(item)\"\n                  [class.is-disabled]=\"isItemDisabled(item)\"\n                  [attr.aria-disabled]=\"isItemDisabled(item) || null\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  (click)=\"selectItem(item)\"\n                  (keydown.enter)=\"selectItem(item)\"\n                  (keydown.space)=\"selectItem(item)\"\n                >\n                  @if (item.icon) {\n                    <div class=\"item-icon\">\n                      <m-icon [name]=\"item.icon\" color=\"currentColor\" />\n                    </div>\n                  }\n                  <span class=\"item-text\">{{ item.label | translate }}</span>\n                  @if (item.options || item.file) {\n                    <div class=\"item-arrow\">\n                      <m-icon [name]=\"'chevron-right'\" color=\"currentColor\" />\n                    </div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\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)}}.menu-container{display:flex;flex-direction:column;width:100%;border-radius:0;background:var(--m-menu-background, var(--m-background));border:none;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1)}.back-btn{height:calc(var(--input-size, .9375rem) * 2);min-height:calc(var(--input-size, .9375rem) * 2);border-width:max(1px,var(--input-size, .9375rem) * .0625);border-radius:calc(var(--input-size, .9375rem) * .4);padding:calc(var(--input-size, .9375rem) * .5) calc(var(--input-size, .9375rem) * .5);gap:calc(var(--input-size, .9375rem) * .375);font-size:var(--input-size, .9375rem);border-color:var(--m-text-secondary);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.back-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text-secondary) 6%,transparent)}.back-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{height:auto;min-height:0;padding:calc(.9375rem * .625) calc(.9375rem * 1.25);gap:calc(.9375rem * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:.5859375rem 1.171875rem;border-radius:0;border:none;border-bottom:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.back-btn:hover,.back-btn:focus-visible{outline:none;background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.back-btn:active{transform:scale(.97)}.back-btn .back-icon{display:flex;align-items:center}.back-btn .back-text{font-size:.9rem;font-weight:500}.menu-content{position:relative;width:100%}.menu-groups{display:flex;flex-direction:column;padding:6px}.menu-group{display:flex;flex-direction:column;gap:2px}.menu-group.has-separator{border-bottom:1px solid var(--m-backdrop-border);margin-bottom:6px;padding-bottom:6px}.menu-item{height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);min-height:calc(var(--input-size, var(--menu-item-size, .9375rem)) * 2);border-width:max(1px,var(--input-size, var(--menu-item-size, .9375rem)) * .0625);border-radius:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .4);padding:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5) calc(var(--input-size, var(--menu-item-size, .9375rem)) * .5);gap:calc(var(--input-size, var(--menu-item-size, .9375rem)) * .375);font-size:var(--input-size, var(--menu-item-size, .9375rem));border-color:var(--m-text);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.menu-item:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-text) 6%,transparent)}.menu-item:disabled{opacity:.6;cursor:not-allowed}.menu-item{height:auto;min-height:0;padding:calc(var(--menu-item-size, .9375rem) * .625) calc(var(--menu-item-size, .9375rem) * 1.25);gap:calc(var(--menu-item-size, .9375rem) * .375);border-style:solid;display:inline-flex;justify-content:center;box-sizing:border-box;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:0;border:none;color:var(--m-text);font-weight:400;text-align:left;width:100%;transition:filter .15s ease,background .15s ease,color .15s ease}.menu-item:focus-visible{outline:none}.menu-item:hover:not(.is-disabled):not(.menu-item.is-selected),.menu-item:focus-visible:not(.is-selected){background:color-mix(in srgb,var(--m-text) 8%,transparent);color:var(--m-text)}.menu-item:active:not(.is-disabled){transform:scale(.97)}.menu-item.is-selected{background:var(--m-backdrop-mm);color:var(--m-mm);font-weight:600}.menu-item.is-selected .item-icon{color:var(--m-mm)}.menu-item.is-selected:hover,.menu-item.is-selected:focus-visible{background:color-mix(in srgb,var(--m-backdrop-mm) 88%,black)}.menu-item.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(75%)}.menu-item .item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--m-text-secondary)}.menu-item .item-text{flex:1;font-size:var(--menu-text-size, .9375rem)}.menu-item .item-arrow{display:flex;align-items:center;color:var(--m-text-quaternary)}.menu-container[data-size=sm]{--menu-item-size: .8125rem;--menu-item-padding: calc(.8125rem * .625) calc(.8125rem * 1.25);--menu-text-size: .8125rem;--menu-icon-size: 20px}.menu-container[data-size=md]{--menu-item-size: .9375rem;--menu-item-padding: calc(.9375rem * .625) calc(.9375rem * 1.25);--menu-text-size: .9375rem;--menu-icon-size: 24px}.menu-container[data-size=lg]{--menu-item-size: 1.0625rem;--menu-item-padding: calc(1.0625rem * .625) calc(1.0625rem * 1.25);--menu-text-size: 1rem;--menu-icon-size: 28px}.menu-item{padding:var(--menu-item-padding, 8px 12px)}.menu-item .item-icon{width:var(--menu-icon-size, 24px);height:var(--menu-icon-size, 24px)}.menu-loading{display:flex;align-items:center;justify-content:center;padding:24px}.menu-loading .spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide-forward{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}@keyframes slide-backward{0%{opacity:0;transform:translate(-15px)}to{opacity:1;transform:translate(0)}}.menu-container[data-slide=forward] .menu-content{animation:slide-forward .4s cubic-bezier(.165,.84,.44,1)}.menu-container[data-slide=backward] .menu-content{animation:slide-backward .4s cubic-bezier(.165,.84,.44,1)}:host-context(.align-bottom) .menu-container{border:none;border-radius:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}],
+		file: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "file",
+				required: false
+			}]
+		}],
+		root: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "root",
+				required: false
+			}]
+		}],
+		url: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "url",
+				required: false
+			}]
+		}],
+		extra: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "extra",
+				required: false
+			}]
+		}],
+		hide: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hide",
+				required: false
+			}]
+		}],
+		hideLink: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideLink",
+				required: false
+			}]
+		}],
+		isAdmin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isAdmin",
+				required: false
+			}]
+		}],
+		autoFocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoFocus",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}],
+		visibilityRule: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibilityRule",
+				required: false
+			}]
+		}],
+		disableRule: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disableRule",
+				required: false
+			}]
+		}],
+		extraData: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "extraData",
+				required: false
+			}]
+		}]
+	}
+});
+var ContextMenuBoxComponent = class ContextMenuBoxComponent {
+	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	hide = input(...ngDevMode ? [void 0, { debugName: "hide" }] : /* istanbul ignore next */ []);
+	file = input(...ngDevMode ? [void 0, { debugName: "file" }] : /* istanbul ignore next */ []);
+	width = input("250px", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input("auto", ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	isAdmin = input(false, ...ngDevMode ? [{ debugName: "isAdmin" }] : /* istanbul ignore next */ []);
+	action = output();
+	visibilityRule = input(...ngDevMode ? [void 0, { debugName: "visibilityRule" }] : /* istanbul ignore next */ []);
+	disableRule = input(...ngDevMode ? [void 0, { debugName: "disableRule" }] : /* istanbul ignore next */ []);
+	extraData = input(...ngDevMode ? [void 0, { debugName: "extraData" }] : /* istanbul ignore next */ []);
+	emitAction = (item) => {
+		this.action.emit(item);
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ContextMenuBoxComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: ContextMenuBoxComponent,
+		isStandalone: true,
+		selector: "m-context-menu-box",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hide: {
+				classPropertyName: "hide",
+				publicName: "hide",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			file: {
+				classPropertyName: "file",
+				publicName: "file",
+				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
+			},
+			isAdmin: {
+				classPropertyName: "isAdmin",
+				publicName: "isAdmin",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visibilityRule: {
+				classPropertyName: "visibilityRule",
+				publicName: "visibilityRule",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disableRule: {
+				classPropertyName: "disableRule",
+				publicName: "disableRule",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			extraData: {
+				classPropertyName: "extraData",
+				publicName: "extraData",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { action: "action" },
+		ngImport: i0,
+		template: "<div class=\"m-context-menu-box\" [style.width]=\"width()\" [style.max-height]=\"height()\">\n  <m-menu\n    [config]=\"options()\"\n    [hide]=\"hide()\"\n    [file]=\"file()\"\n    [isAdmin]=\"isAdmin()\"\n    [autoFocus]=\"true\"\n    [visibilityRule]=\"visibilityRule()\"\n    [disableRule]=\"disableRule()\"\n    [extraData]=\"extraData()\"\n    (action)=\"emitAction($event)\"\n  />\n</div>\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)}}.m-context-menu-box{overflow-y:auto;padding:.375rem;border-radius:var(--m-input-radius, .5rem);border:var(--m-input-border-width, 1px) solid color-mix(in srgb,var(--m-text) 18%,var(--m-background));background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:context-menu-in .2s ease-out}@keyframes context-menu-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom){display:block;width:100%!important;max-width:100%!important}:host-context(.align-bottom) .m-context-menu-box{width:100%!important;max-width:100%!important;max-height:70vh!important;border-left:none;border-right:none;border-bottom:none}\n"],
+		dependencies: [{
+			kind: "component",
+			type: MenuComponent,
+			selector: "m-menu",
+			inputs: [
+				"config",
+				"file",
+				"root",
+				"url",
+				"extra",
+				"hide",
+				"hideLink",
+				"isAdmin",
+				"autoFocus",
+				"visibilityRule",
+				"disableRule",
+				"extraData"
+			],
+			outputs: ["action"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ContextMenuBoxComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-context-menu-box",
+			imports: [MenuComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"m-context-menu-box\" [style.width]=\"width()\" [style.max-height]=\"height()\">\n  <m-menu\n    [config]=\"options()\"\n    [hide]=\"hide()\"\n    [file]=\"file()\"\n    [isAdmin]=\"isAdmin()\"\n    [autoFocus]=\"true\"\n    [visibilityRule]=\"visibilityRule()\"\n    [disableRule]=\"disableRule()\"\n    [extraData]=\"extraData()\"\n    (action)=\"emitAction($event)\"\n  />\n</div>\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)}}.m-context-menu-box{overflow-y:auto;padding:.375rem;border-radius:var(--m-input-radius, .5rem);border:var(--m-input-border-width, 1px) solid color-mix(in srgb,var(--m-text) 18%,var(--m-background));background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:context-menu-in .2s ease-out}@keyframes context-menu-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom){display:block;width:100%!important;max-width:100%!important}:host-context(.align-bottom) .m-context-menu-box{width:100%!important;max-width:100%!important;max-height:70vh!important;border-left:none;border-right:none;border-bottom:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		hide: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hide",
+				required: false
+			}]
+		}],
+		file: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "file",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		isAdmin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isAdmin",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}],
+		visibilityRule: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibilityRule",
+				required: false
+			}]
+		}],
+		disableRule: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disableRule",
+				required: false
+			}]
+		}],
+		extraData: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "extraData",
+				required: false
+			}]
+		}]
+	}
+});
+var ContextMenuComponent = class ContextMenuComponent extends ConfigComponent {
+	toggle = model(...ngDevMode ? [void 0, { debugName: "toggle" }] : /* istanbul ignore next */ []);
+	remote = input(...ngDevMode ? [void 0, { debugName: "remote" }] : /* istanbul ignore next */ []);
+	exclude = input(...ngDevMode ? [void 0, { debugName: "exclude" }] : /* istanbul ignore next */ []);
+	visibilityRule = input(...ngDevMode ? [void 0, { debugName: "visibilityRule" }] : /* istanbul ignore next */ []);
+	disableRule = input(...ngDevMode ? [void 0, { debugName: "disableRule" }] : /* istanbul ignore next */ []);
+	extraData = input(...ngDevMode ? [void 0, { debugName: "extraData" }] : /* istanbul ignore next */ []);
+	inverted = input(...ngDevMode ? [void 0, { debugName: "inverted" }] : /* istanbul ignore next */ []);
+	options = input(...ngDevMode ? [void 0, { debugName: "options" }] : /* istanbul ignore next */ []);
+	action = output();
+	subFolder = "menu";
+	selectorDir = viewChild(SelectorDirective, ...ngDevMode ? [{ debugName: "selectorDir" }] : /* istanbul ignore next */ []);
+	contextMenuConfig = computed(() => this.config() ?? {}, ...ngDevMode ? [{ debugName: "contextMenuConfig" }] : /* istanbul ignore next */ []);
+	iconConfig = computed(() => {
+		const toggle = this.toggle();
+		const { closeIcon, icon } = this.contextMenuConfig();
+		if (toggle) return {
+			name: "x",
+			...closeIcon
+		};
+		return {
+			name: "ellipsis-vertical",
+			...icon
+		};
+	}, ...ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []);
+	triggerButtonConfig = computed(() => ({
+		variant: "ghost",
+		iconOnly: true,
+		icon: this.iconConfig().name,
+		label: "actions",
+		inverted: this.inverted() ?? this.contextMenuConfig().inverted
+	}), ...ngDevMode ? [{ debugName: "triggerButtonConfig" }] : /* istanbul ignore next */ []);
+	contextMenuOptions = computed(() => {
+		const supplied = this.options();
+		if (supplied) return Array.isArray(supplied[0]) ? supplied : [supplied];
+		return this.contextMenuConfig().options ?? [];
+	}, ...ngDevMode ? [{ debugName: "contextMenuOptions" }] : /* istanbul ignore next */ []);
+	selectorConfig = computed(() => {
+		if (this.isDesignMode) return void 0;
+		return {
+			component: ContextMenuBoxComponent,
+			base: "m-context-menu",
+			width: this.contextMenuConfig().width ?? "250px",
+			height: this.contextMenuConfig().height ?? "auto",
+			align: this.contextMenuConfig().align,
+			toggle: true,
+			bindings: [
+				inputBinding("options", this.contextMenuOptions),
+				inputBinding("hide", this.exclude),
+				inputBinding("visibilityRule", this.visibilityRule),
+				inputBinding("disableRule", this.disableRule),
+				inputBinding("extraData", this.extraData),
+				outputBinding("action", (event) => {
+					this.action.emit(event);
+					this.selectorDir()?.close();
+				})
+			]
+		};
+	}, ...ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ContextMenuComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: ContextMenuComponent,
+		isStandalone: true,
+		selector: "m-context-menu, m-one-context-menu",
+		inputs: {
+			toggle: {
+				classPropertyName: "toggle",
+				publicName: "toggle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			remote: {
+				classPropertyName: "remote",
+				publicName: "remote",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			exclude: {
+				classPropertyName: "exclude",
+				publicName: "exclude",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visibilityRule: {
+				classPropertyName: "visibilityRule",
+				publicName: "visibilityRule",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disableRule: {
+				classPropertyName: "disableRule",
+				publicName: "disableRule",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			extraData: {
+				classPropertyName: "extraData",
+				publicName: "extraData",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inverted: {
+				classPropertyName: "inverted",
+				publicName: "inverted",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			toggle: "toggleChange",
+			action: "action"
+		},
+		viewQueries: [{
+			propertyName: "selectorDir",
+			first: true,
+			predicate: SelectorDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <m-one-button
+      [config]="triggerButtonConfig()"
+      [mSelector]="selectorConfig()"
+      (opened)="toggle.set(true)"
+      (closed)="toggle.set(false)"
+    />
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ButtonComponent,
+			selector: "m-button,m-one-button",
+			inputs: [
+				"config",
+				"color",
+				"labelClass",
+				"fullWidth",
+				"nav",
+				"navParams",
+				"href",
+				"disabled",
+				"variant",
+				"name",
+				"baseUrl",
+				"one",
+				"remote",
+				"label",
+				"noTranslate",
+				"params",
+				"noNative",
+				"icon",
+				"isRightIcon",
+				"iconOnly",
+				"stacked",
+				"imgSrc",
+				"nonClickable",
+				"inverted",
+				"isSubmit",
+				"tabindex"
+			],
+			outputs: ["configChange", "clicked"]
+		}, {
+			kind: "directive",
+			type: SelectorDirective,
+			selector: "[mSelector]",
+			inputs: ["mSelector", "disabled"],
+			outputs: ["opened", "closed"],
+			exportAs: ["mSelector"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ContextMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-context-menu, m-one-context-menu",
+			imports: [ButtonComponent, SelectorDirective],
+			template: `
+    <m-one-button
+      [config]="triggerButtonConfig()"
+      [mSelector]="selectorConfig()"
+      (opened)="toggle.set(true)"
+      (closed)="toggle.set(false)"
+    />
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	propDecorators: {
+		toggle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggle",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["toggleChange"]
+		}],
+		remote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "remote",
+				required: false
+			}]
+		}],
+		exclude: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exclude",
+				required: false
+			}]
+		}],
+		visibilityRule: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibilityRule",
+				required: false
+			}]
+		}],
+		disableRule: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disableRule",
+				required: false
+			}]
+		}],
+		extraData: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "extraData",
+				required: false
+			}]
+		}],
+		inverted: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inverted",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}],
+		selectorDir: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => SelectorDirective), { isSignal: true }]
+		}]
+	}
+});
+export { ContextMenuBoxComponent as n, MenuComponent as r, ContextMenuComponent as t };
+
+//# sourceMappingURL=magmonium-one-menu-BM9f2knw.mjs.map