@rivinia/menu 0.0.0-stage → 0.3.1

package/fesm2022/rivinia-menu-ui.mjs

@@ -0,0 +1,770 @@
+import * as i0 from "@angular/core";
+import { Component, Directive, ElementRef, ViewEncapsulation, afterRenderEffect, computed, contentChildren, effect, inject, input, output, signal } from "@angular/core";
+import { RiviniaMenu } from "@rivinia/menu";
+const MENU_GAP = 6;
+const EDGE = 8;
+function computeMenuPosition(trigger, panel, placement, viewport, rtl, gap = 6) {
+	const [vertical, horizontal] = placement.split("-");
+	const below = vertical !== "top";
+	const alignLeft = horizontal !== "end" !== rtl;
+	let left = alignLeft ? trigger.left : trigger.left + trigger.width - panel.width;
+	let top = below ? trigger.top + trigger.height + gap : trigger.top - gap - panel.height;
+	let flipped = false;
+	const fitsBelow = trigger.top + trigger.height + gap + panel.height <= viewport.height - EDGE;
+	const fitsAbove = trigger.top - gap - panel.height >= EDGE;
+	if (below && top + panel.height > viewport.height - EDGE && fitsAbove) {
+		top = trigger.top - gap - panel.height;
+		flipped = true;
+	} else if (!below && top < EDGE && fitsBelow) {
+		top = trigger.top + trigger.height + gap;
+		flipped = true;
+	}
+	const fitsLeft = trigger.left + trigger.width - panel.width >= EDGE;
+	const fitsRight = trigger.left + panel.width <= viewport.width - EDGE;
+	if (alignLeft && left + panel.width > viewport.width - EDGE && fitsLeft) left = trigger.left + trigger.width - panel.width;
+	else if (!alignLeft && left < EDGE && fitsRight) left = trigger.left;
+	left = Math.min(Math.max(left, EDGE), Math.max(EDGE, viewport.width - panel.width - EDGE));
+	top = Math.min(Math.max(top, EDGE), Math.max(EDGE, viewport.height - panel.height - EDGE));
+	return {
+		left: Math.round(left),
+		top: Math.round(top),
+		flipped
+	};
+}
+let nextPanelId = 0;
+var RiviniaMenuItem = class RiviniaMenuItem {
+	id = input.required(...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: (v) => v === "" || v === true
+	});
+	checked = input(null, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef, { optional: true });
+	menu = inject(RiviniaMenuComponent, {
+		optional: true,
+		skipSelf: true
+	});
+	active = computed(() => this.menu?.controller().activeId() === this.id(), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	tab() {
+		return this.active() ? "0" : "-1";
+	}
+	computedRole() {
+		return this.checked() === null ? "menuitem" : "menuitemcheckbox";
+	}
+	checkedAttr() {
+		const checked = this.checked();
+		return checked === null ? null : String(checked);
+	}
+	isDisabled() {
+		if (this.disabled()) return true;
+		return this.host?.nativeElement?.disabled === true;
+	}
+	pick() {
+		this.menu?.pickItem(this.id());
+	}
+	hover() {
+		this.menu?.hoverItem(this.id());
+	}
+	registeredId = null;
+	constructor() {
+		effect(() => {
+			const id = this.id();
+			const menu = this.menu;
+			if (this.registeredId === null) return;
+			if (this.registeredId !== id) menu?.unregisterItem(this.registeredId);
+			menu?.registerItem({
+				id,
+				disabled: this.isDisabled()
+			});
+			this.registeredId = id;
+		});
+	}
+	ngOnInit() {
+		this.registeredId = this.id();
+		this.menu?.registerItem({
+			id: this.id(),
+			disabled: this.isDisabled()
+		});
+	}
+	ngOnDestroy() {
+		if (this.registeredId === null) return;
+		this.menu?.unregisterItem(this.registeredId);
+		this.registeredId = null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaMenuItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RiviniaMenuItem,
+		isStandalone: true,
+		selector: "[rvMenuItem]",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"click": "pick()",
+				"pointerenter": "hover()"
+			},
+			properties: {
+				"attr.role": "computedRole()",
+				"attr.data-rv-id": "id()",
+				"attr.tabindex": "tab()",
+				"attr.aria-disabled": "isDisabled()",
+				"attr.data-active": "active()",
+				"attr.aria-checked": "checkedAttr()"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RiviniaMenuItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rvMenuItem]",
+			standalone: true,
+			host: {
+				"[attr.role]": "computedRole()",
+				"[attr.data-rv-id]": "id()",
+				"[attr.tabindex]": "tab()",
+				"[attr.aria-disabled]": "isDisabled()",
+				"[attr.data-active]": "active()",
+				"[attr.aria-checked]": "checkedAttr()",
+				"(click)": "pick()",
+				"(pointerenter)": "hover()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}]
+	}
+});
+var RiviniaMenuComponent = class RiviniaMenuComponent {
+	menu = input(null, ...ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []);
+	placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	menuLabel = input(null, ...ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []);
+	items = input(null, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	panelClass = input(null, ...ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []);
+	itemClass = input(null, ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
+	picked = output();
+	opened = output();
+	closed = output();
+	owned = new RiviniaMenu();
+	self = inject(ElementRef);
+	projectedItems = contentChildren(RiviniaMenuItem, {
+		...ngDevMode ? { debugName: "projectedItems" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	panelId = `rv-menu-panel-${++nextPanelId}`;
+	focusPending = false;
+	pendingActivation = false;
+	topLayerSupported = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
+	positioned = signal(false, ...ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []);
+	flipped = signal(false, ...ngDevMode ? [{ debugName: "flipped" }] : /* istanbul ignore next */ []);
+	typeBuffer = "";
+	typeTimer = null;
+	controller() {
+		return this.menu() ?? this.owned;
+	}
+	dataItems() {
+		return this.ambiguous() ? [] : this.items() ?? [];
+	}
+	checkedFor(id) {
+		const c = this.controller();
+		return typeof c.isSelected === "function" ? c.isSelected(id) : null;
+	}
+	ambiguous() {
+		return this.items() !== null && this.projectedItems().length > 0;
+	}
+	registerItem(item) {
+		const c = this.controller();
+		c.register(item);
+		if (this.pendingActivation && c.open() && c.activeId() === null && !item.disabled) {
+			c.activateFirst();
+			this.pendingActivation = false;
+		}
+	}
+	unregisterItem(id) {
+		this.controller().unregister(id);
+	}
+	constructor() {
+		effect(() => {
+			if (!this.ambiguous()) return;
+			throw new Error("rv-menu: `[items]` cannot be combined with projected `rvMenuItem` children — pick one way to populate the panel.");
+		});
+		effect((onCleanup) => {
+			if (typeof window === "undefined") return;
+			if (!this.controller().open()) return;
+			const onPointer = (event) => {
+				const host = this.self.nativeElement;
+				if (host && !host.contains(event.target)) this.doClose(false);
+			};
+			document.addEventListener("pointerdown", onPointer);
+			const onScroll = (event) => {
+				const panel = this.self.nativeElement.querySelector(".rv-menu-panel");
+				if (panel && event.target instanceof Node && panel.contains(event.target)) return;
+				this.doClose(false);
+			};
+			window.addEventListener("scroll", onScroll, true);
+			window.addEventListener("resize", onScroll);
+			onCleanup(() => {
+				document.removeEventListener("pointerdown", onPointer);
+				window.removeEventListener("scroll", onScroll, true);
+				window.removeEventListener("resize", onScroll);
+			});
+		});
+		effect(() => {
+			if (typeof document === "undefined") return;
+			const open = this.controller().open();
+			const trigger = this.triggerEl();
+			trigger?.setAttribute("aria-haspopup", "menu");
+			trigger?.setAttribute("aria-expanded", String(open));
+			trigger?.setAttribute("aria-controls", this.panelId);
+		});
+		afterRenderEffect(() => {
+			if (this.controller().open() && !this.positioned()) this.showAndPosition();
+			this.consumePendingFocus();
+		});
+	}
+	showAndPosition() {
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return;
+		if (typeof window === "undefined" || !this.topLayerSupported) {
+			this.positioned.set(true);
+			return;
+		}
+		try {
+			const popover = root;
+			if (typeof popover.showPopover !== "function") {
+				this.positioned.set(true);
+				return;
+			}
+			popover.showPopover();
+			const trigger = this.triggerEl()?.getBoundingClientRect();
+			if (!trigger) {
+				this.positioned.set(true);
+				return;
+			}
+			const at = computeMenuPosition({
+				left: trigger.left,
+				top: trigger.top,
+				width: trigger.width,
+				height: trigger.height
+			}, {
+				width: root.offsetWidth,
+				height: root.offsetHeight
+			}, this.placement(), {
+				width: window.innerWidth,
+				height: window.innerHeight
+			}, this.isRtl());
+			root.style.left = `${at.left}px`;
+			root.style.top = `${at.top}px`;
+			this.flipped.set(at.flipped);
+			this.positioned.set(true);
+		} catch {
+			this.positioned.set(true);
+		}
+	}
+	isRtl() {
+		try {
+			const doc = typeof document === "undefined" ? null : document.documentElement;
+			if (doc?.dir === "rtl") return true;
+			if (doc?.dir === "ltr") return false;
+			return getComputedStyle(this.self.nativeElement).direction === "rtl";
+		} catch {
+			return false;
+		}
+	}
+	markOpening() {
+		this.focusPending = true;
+		this.pendingActivation = true;
+		this.flipped.set(false);
+		this.positioned.set(false);
+	}
+	onTriggerClick() {
+		const c = this.controller();
+		c.toggle();
+		if (c.open()) {
+			this.opened.emit();
+			this.markOpening();
+		} else this.closed.emit();
+	}
+	onTriggerKey(event) {
+		const c = this.controller();
+		switch (event.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				event.preventDefault();
+				c.openMenu("first");
+				this.opened.emit();
+				this.markOpening();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				c.openMenu("last");
+				this.opened.emit();
+				this.markOpening();
+				break;
+			case "Escape": if (c.open()) {
+				event.preventDefault();
+				this.doClose(true);
+			}
+		}
+	}
+	onPanelKey(event) {
+		const c = this.controller();
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				this.doClose(true);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				c.activateNext();
+				this.focusActive();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				c.activatePrevious();
+				this.focusActive();
+				break;
+			case "Home":
+				event.preventDefault();
+				c.activateFirst();
+				this.focusActive();
+				break;
+			case "End":
+				event.preventDefault();
+				c.activateLast();
+				this.focusActive();
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.pickFocused();
+				break;
+			case "Tab": {
+				event.preventDefault();
+				const backwards = event.shiftKey;
+				this.doClose(false);
+				this.focusAdjacentToTrigger(backwards);
+				break;
+			}
+			default: this.onTypeahead(event);
+		}
+	}
+	resetTypeahead() {
+		this.typeBuffer = "";
+		if (this.typeTimer !== null) {
+			clearTimeout(this.typeTimer);
+			this.typeTimer = null;
+		}
+	}
+	onTypeahead(event) {
+		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		const ch = event.key.toLocaleLowerCase();
+		if (!(this.typeBuffer !== "" && [...this.typeBuffer].every((c) => c === ch))) this.typeBuffer += ch;
+		if (this.typeTimer !== null) clearTimeout(this.typeTimer);
+		this.typeTimer = setTimeout(() => {
+			this.typeBuffer = "";
+			this.typeTimer = null;
+		}, 500);
+		const id = this.matchTypeahead(this.typeBuffer);
+		if (id !== null && this.controller().activate(id)) this.focusActive();
+	}
+	matchTypeahead(buffer) {
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return null;
+		const enabled = new Set(this.controller().items().filter((i) => !i.disabled).map((i) => i.id));
+		const rows = [...root.querySelectorAll("[data-rv-id]")].map((el) => ({
+			id: el.getAttribute("data-rv-id") ?? "",
+			text: (el.textContent ?? "").trim().toLocaleLowerCase()
+		})).filter((r) => enabled.has(r.id) && r.text.startsWith(buffer));
+		if (rows.length === 0) return null;
+		if (new Set(buffer).size === 1) {
+			const ids = rows.map((r) => r.id);
+			return ids[(ids.indexOf(this.controller().activeId() ?? "") + 1) % ids.length];
+		}
+		return rows[0].id;
+	}
+	pickFocused() {
+		const c = this.controller();
+		const id = c.pickActive();
+		if (id === null) return;
+		const item = c.items().find((i) => i.id === id);
+		if (!item || item.disabled) return;
+		this.doClose(false);
+		this.picked.emit({ id });
+	}
+	pickItem(id) {
+		if (!this.controller().activate(id)) return;
+		this.doClose(false);
+		this.picked.emit({ id });
+	}
+	hoverItem(id) {
+		this.controller().activate(id);
+	}
+	doClose(restoreFocus) {
+		const was = this.controller().open();
+		this.resetTypeahead();
+		this.controller().closeMenu();
+		if (was) this.closed.emit();
+		if (restoreFocus) this.focusTrigger();
+	}
+	consumePendingFocus() {
+		if (!this.positioned() || !this.controller().open() || !this.focusPending) return;
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return;
+		const active = this.activeDocumentElement();
+		if (active && root.contains(active)) {
+			this.focusPending = false;
+			return;
+		}
+		this.focusPending = false;
+		this.focusActive();
+	}
+	focusActive() {
+		const id = this.controller().activeId();
+		const root = this.self.nativeElement.querySelector(".rv-menu-panel");
+		if (!root) return;
+		const target = id ? root.querySelector(`[data-rv-id="${CSS.escape(id)}"]`) : root.querySelector("[rvmenuitem]");
+		try {
+			target?.focus({ preventScroll: true });
+		} catch {}
+	}
+	activeDocumentElement() {
+		try {
+			return typeof document === "undefined" ? null : document.activeElement;
+		} catch {
+			return null;
+		}
+	}
+	triggerEl() {
+		const wrap = this.self.nativeElement.querySelector(".rv-menu-trigger");
+		if (!wrap) return null;
+		return wrap.querySelector("button, a, [tabindex]") ?? wrap;
+	}
+	focusAdjacentToTrigger(backwards) {
+		try {
+			const trigger = this.triggerEl();
+			const doc = trigger?.ownerDocument;
+			if (!trigger || !doc) return;
+			const stops = [...doc.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")].filter((el) => {
+				if (el.hasAttribute("disabled") || el.getAttribute("aria-hidden") === "true") return false;
+				if (el.closest(".rv-menu-panel")) return false;
+				return el.getClientRects().length > 0;
+			});
+			stops.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+			const at = stops.indexOf(trigger);
+			if (at === -1) return;
+			stops[backwards ? at - 1 : at + 1]?.focus({ preventScroll: true });
+		} catch {}
+	}
+	focusTrigger() {
+		try {
+			this.triggerEl()?.focus({ preventScroll: true });
+		} catch {}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaMenuComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RiviniaMenuComponent,
+		isStandalone: true,
+		selector: "rv-menu",
+		inputs: {
+			menu: {
+				classPropertyName: "menu",
+				publicName: "menu",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			menuLabel: {
+				classPropertyName: "menuLabel",
+				publicName: "menuLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelClass: {
+				classPropertyName: "panelClass",
+				publicName: "panelClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			itemClass: {
+				classPropertyName: "itemClass",
+				publicName: "itemClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			picked: "picked",
+			opened: "opened",
+			closed: "closed"
+		},
+		queries: [{
+			propertyName: "projectedItems",
+			predicate: RiviniaMenuItem,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="rv-menu-trigger" (click)="onTriggerClick()" (keydown)="onTriggerKey($event)">
+      <ng-content select="[rv-menu-trigger], [rvMenuTrigger]"></ng-content>
+    </div>
+    @if (controller().open()) {
+      <div
+        #panel
+        class="rv-menu-panel"
+        [class]="panelClass()"
+        role="menu"
+        [attr.id]="panelId"
+        [attr.aria-label]="menuLabel()"
+        [attr.popover]="topLayerSupported ? 'manual' : null"
+        [attr.data-placement]="placement()"
+        [attr.data-flipped]="flipped()"
+        [attr.data-positioned]="positioned()"
+        [attr.data-top-layer]="topLayerSupported"
+        (keydown)="onPanelKey($event)"
+      >
+        @if (dataItems().length > 0) {
+          @for (item of dataItems(); track item.id) {
+            <button
+              rvMenuItem
+              [id]="item.id"
+              [disabled]="item.disabled ?? false"
+              [checked]="checkedFor(item.id)"
+              [class]="itemClass()"
+            >
+              {{ item.label }}
+            </button>
+          }
+        }
+        <ng-content select="[rv-menu-panel], [rvMenuPanel]"></ng-content>
+      </div>
+    }
+  `,
+		isInline: true,
+		styles: [".rv-menu-trigger{display:inline-flex;align-items:center}.rv-menu-panel{display:flex;flex-direction:column;gap:2px}.rv-menu-panel hr{border:0;border-top:1px solid var(--rv-menu-border, #e0e0e0);margin:6px 4px}rv-menu{position:relative;display:inline-block}.rv-menu-panel[data-top-layer=true]{position:fixed;inset:auto;margin:0}.rv-menu-panel[data-positioned=false]{animation:none}.rv-menu-panel[data-top-layer=true][data-placement^=bottom][data-flipped=true]{transform-origin:bottom center}.rv-menu-panel[data-top-layer=true][data-placement^=top][data-flipped=true]{transform-origin:top center}.rv-menu-panel{position:absolute;z-index:var(--rv-menu-z, 500);min-width:var(--rv-menu-width, 16rem);max-width:calc(100dvw - 2rem);max-height:min(20rem,calc(100dvh - 2rem));overflow-y:auto;background:var(--rv-menu-bg, #ffffff);color:var(--rv-menu-fg, #111111);font-family:var(--rv-menu-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);border:1px solid var(--rv-menu-border, #e0e0e0);border-radius:var(--rv-menu-radius, 12px);box-shadow:var(--rv-menu-shadow, 0 16px 48px rgba(0, 0, 0, .22));padding:var(--rv-menu-pad, 6px)}.rv-menu-panel[data-placement=bottom-start]{inset-block-start:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=bottom-end]{inset-block-start:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel[data-placement=top-start]{inset-block-end:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=top-end]{inset-block-end:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel [rvmenuitem]{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1.4;text-align:start;padding:8px 10px;cursor:pointer}.rv-menu-panel [rvmenuitem][data-active=true]{background:color-mix(in srgb,currentColor 10%,transparent)}.rv-menu-panel [rvmenuitem]:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.rv-menu-panel [rvmenuitem]:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.rv-menu-panel [rvmenuitem][aria-disabled=true]{opacity:.45;cursor:default}.rv-menu-panel [rvmenuitem] svg,.rv-menu-panel [rvmenuitem] [data-icon]{width:16px;height:16px;flex:none;color:var(--rv-menu-muted)}.rv-menu-panel [rvmenuitem][data-active=true] svg,.rv-menu-panel [rvmenuitem][data-active=true] [data-icon]{color:inherit}.rv-menu-panel{transform-origin:top center;animation:rv-menu-in var(--rv-menu-duration, .16s) var(--rv-menu-easing, cubic-bezier(.16, 1, .3, 1))}.rv-menu-panel[data-placement=top-start],.rv-menu-panel[data-placement=top-end]{--rv-menu-from-y: 6px;transform-origin:bottom center}@media(prefers-reduced-motion:reduce){.rv-menu-panel{animation:none}}@keyframes rv-menu-in{0%{opacity:0;transform:translateY(var(--rv-menu-from-y, -6px)) scale(.96)}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: RiviniaMenuItem,
+			selector: "[rvMenuItem]",
+			inputs: [
+				"id",
+				"disabled",
+				"checked"
+			]
+		}],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RiviniaMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rv-menu",
+			standalone: true,
+			encapsulation: ViewEncapsulation.None,
+			imports: [RiviniaMenuItem],
+			template: `
+    <div class="rv-menu-trigger" (click)="onTriggerClick()" (keydown)="onTriggerKey($event)">
+      <ng-content select="[rv-menu-trigger], [rvMenuTrigger]"></ng-content>
+    </div>
+    @if (controller().open()) {
+      <div
+        #panel
+        class="rv-menu-panel"
+        [class]="panelClass()"
+        role="menu"
+        [attr.id]="panelId"
+        [attr.aria-label]="menuLabel()"
+        [attr.popover]="topLayerSupported ? 'manual' : null"
+        [attr.data-placement]="placement()"
+        [attr.data-flipped]="flipped()"
+        [attr.data-positioned]="positioned()"
+        [attr.data-top-layer]="topLayerSupported"
+        (keydown)="onPanelKey($event)"
+      >
+        @if (dataItems().length > 0) {
+          @for (item of dataItems(); track item.id) {
+            <button
+              rvMenuItem
+              [id]="item.id"
+              [disabled]="item.disabled ?? false"
+              [checked]="checkedFor(item.id)"
+              [class]="itemClass()"
+            >
+              {{ item.label }}
+            </button>
+          }
+        }
+        <ng-content select="[rv-menu-panel], [rvMenuPanel]"></ng-content>
+      </div>
+    }
+  `,
+			styles: [".rv-menu-trigger{display:inline-flex;align-items:center}.rv-menu-panel{display:flex;flex-direction:column;gap:2px}.rv-menu-panel hr{border:0;border-top:1px solid var(--rv-menu-border, #e0e0e0);margin:6px 4px}rv-menu{position:relative;display:inline-block}.rv-menu-panel[data-top-layer=true]{position:fixed;inset:auto;margin:0}.rv-menu-panel[data-positioned=false]{animation:none}.rv-menu-panel[data-top-layer=true][data-placement^=bottom][data-flipped=true]{transform-origin:bottom center}.rv-menu-panel[data-top-layer=true][data-placement^=top][data-flipped=true]{transform-origin:top center}.rv-menu-panel{position:absolute;z-index:var(--rv-menu-z, 500);min-width:var(--rv-menu-width, 16rem);max-width:calc(100dvw - 2rem);max-height:min(20rem,calc(100dvh - 2rem));overflow-y:auto;background:var(--rv-menu-bg, #ffffff);color:var(--rv-menu-fg, #111111);font-family:var(--rv-menu-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);border:1px solid var(--rv-menu-border, #e0e0e0);border-radius:var(--rv-menu-radius, 12px);box-shadow:var(--rv-menu-shadow, 0 16px 48px rgba(0, 0, 0, .22));padding:var(--rv-menu-pad, 6px)}.rv-menu-panel[data-placement=bottom-start]{inset-block-start:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=bottom-end]{inset-block-start:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel[data-placement=top-start]{inset-block-end:calc(100% + 6px);inset-inline-start:0}.rv-menu-panel[data-placement=top-end]{inset-block-end:calc(100% + 6px);inset-inline-end:0}.rv-menu-panel [rvmenuitem]{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1.4;text-align:start;padding:8px 10px;cursor:pointer}.rv-menu-panel [rvmenuitem][data-active=true]{background:color-mix(in srgb,currentColor 10%,transparent)}.rv-menu-panel [rvmenuitem]:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.rv-menu-panel [rvmenuitem]:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.rv-menu-panel [rvmenuitem][aria-disabled=true]{opacity:.45;cursor:default}.rv-menu-panel [rvmenuitem] svg,.rv-menu-panel [rvmenuitem] [data-icon]{width:16px;height:16px;flex:none;color:var(--rv-menu-muted)}.rv-menu-panel [rvmenuitem][data-active=true] svg,.rv-menu-panel [rvmenuitem][data-active=true] [data-icon]{color:inherit}.rv-menu-panel{transform-origin:top center;animation:rv-menu-in var(--rv-menu-duration, .16s) var(--rv-menu-easing, cubic-bezier(.16, 1, .3, 1))}.rv-menu-panel[data-placement=top-start],.rv-menu-panel[data-placement=top-end]{--rv-menu-from-y: 6px;transform-origin:bottom center}@media(prefers-reduced-motion:reduce){.rv-menu-panel{animation:none}}@keyframes rv-menu-in{0%{opacity:0;transform:translateY(var(--rv-menu-from-y, -6px)) scale(.96)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		menu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menu",
+				required: false
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		menuLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuLabel",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		panelClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelClass",
+				required: false
+			}]
+		}],
+		itemClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemClass",
+				required: false
+			}]
+		}],
+		picked: [{
+			type: i0.Output,
+			args: ["picked"]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		projectedItems: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RiviniaMenuItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+export { MENU_GAP, RiviniaMenuComponent, RiviniaMenuItem, computeMenuPosition };
+
+//# sourceMappingURL=rivinia-menu-ui.mjs.map