@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-popover.mjs

@@ -0,0 +1,1495 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, TemplateRef, ViewContainerRef, afterNextRender, booleanAttribute, computed, effect, inject, input, isDevMode, model, numberAttribute, signal, untracked, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { InteractivityChecker } from "@angular/cdk/a11y";
+import { Directionality } from "@angular/cdk/bidi";
+import { Overlay } from "@angular/cdk/overlay";
+import { ScrollDispatcher, ViewportRuler } from "@angular/cdk/scrolling";
+import { containsOwnedOverlay, registerOverlayOwnership } from "@raqm/ui/overlay-internal";
+import { TemplatePortal } from "@angular/cdk/portal";
+const RAQM_POPOVER = new InjectionToken("RaqmPopover");
+var RaqmPopoverDismissal = class {
+	host;
+	constructor(host) {
+		this.host = host;
+	}
+	maybeCloseOnFocusOut(event) {
+		const next = event.relatedTarget;
+		if (this.isInsideRootOrOverlay(next)) return;
+		if (!this.host.open()) return;
+		const target = event.target;
+		const targetInPanel = !!target && this.host.pane()?.contains(target) === true;
+		const generation = this.host.generation();
+		const overlay = this.host.pane();
+		queueMicrotask(() => {
+			if (generation !== this.host.generation() || this.host.pane() !== overlay || !this.host.openValue() || this.host.disabled() || !this.host.canOpen()) return;
+			if (targetInPanel && target && !target.isConnected) return;
+			if (this.isInsideRootOrOverlay(document.activeElement)) return;
+			this.setClosed();
+		});
+	}
+	isInsideRootOrOverlay(node) {
+		if (!node) return false;
+		const overlay = this.host.pane();
+		return containsOwnedOverlay(this.host.root, node) || overlay !== void 0 && containsOwnedOverlay(overlay, node);
+	}
+	setClosed() {
+		if (this.host.openValue()) this.host.setOpen(false);
+	}
+};
+function connectPopoverEffects(host) {
+	effect(() => {
+		const next = host.openValue() && !host.disabled() && host.canOpen();
+		untracked(() => host.syncOpen(next));
+	});
+	effect(() => {
+		host.side();
+		host.align();
+		host.sideOffset();
+		host.alignOffset();
+		host.dir();
+		untracked(() => host.applyPositionInputs());
+	});
+	effect(() => {
+		host.label();
+		untracked(() => host.syncPanelAria());
+	});
+	effect(() => {
+		const panelClass = host.panelClass();
+		untracked(() => host.applyPanelClass(panelClass));
+	});
+}
+const SIDES = [
+	"top",
+	"bottom",
+	"left",
+	"right",
+	"inline-start",
+	"inline-end"
+];
+const ALIGNS = [
+	"start",
+	"center",
+	"end"
+];
+const DEFAULT_SIDE = "bottom";
+const DEFAULT_ALIGN = "center";
+const DEFAULT_WIDTH = "18rem";
+const PANE_CLASS = "raqm-popover-overlay-pane";
+const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]";
+function sameBoxSize(a, b) {
+	return a !== void 0 && b !== void 0 && Math.abs(a.width - b.width) <= 1 && Math.abs(a.height - b.height) <= 1;
+}
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function toSide(value) {
+	return SIDES.includes(value) ? value : DEFAULT_SIDE;
+}
+function toAlign(value) {
+	return ALIGNS.includes(value) ? value : DEFAULT_ALIGN;
+}
+function toDir(value) {
+	return value === "ltr" || value === "rtl" ? value : void 0;
+}
+function toOffset(fallback) {
+	return (value) => {
+		const parsed = numberAttribute(value, fallback);
+		return Number.isFinite(parsed) ? parsed : fallback;
+	};
+}
+function resolvePopoverDirection(dir, element, directionality) {
+	const explicit = dir;
+	if (explicit === "ltr" || explicit === "rtl") return explicit;
+	const computedStyle = getComputedStyle(element).direction;
+	if (computedStyle === "rtl") return "rtl";
+	if (computedStyle === "ltr") return "ltr";
+	return directionality?.value ?? "ltr";
+}
+var RaqmPopoverKeyboard = class {
+	checker;
+	host;
+	constructor(checker, host) {
+		this.checker = checker;
+		this.host = host;
+	}
+	focusFirstInPanel() {
+		const content = this.host.content();
+		if (!content) return;
+		(this.firstFocusable(content) ?? content).focus();
+	}
+	onTriggerTab(event) {
+		if (event.shiftKey || !this.host.open()) return;
+		event.preventDefault();
+		this.focusFirstInPanel();
+	}
+	onPanelKeydown(event) {
+		if (event.key === "Escape") {
+			if (this.host.open()) {
+				event.preventDefault();
+				event.stopPropagation();
+				this.host.closeFromUser();
+				this.host.trigger()?.focus();
+			}
+			return;
+		}
+		if (event.key === "Tab") this.handlePanelTab(event);
+	}
+	focusInitial(overlayRef, generation) {
+		if (this.host.overlayRef() !== overlayRef) return;
+		this.focusFirstInPanel();
+		if (!overlayRef.overlayElement.contains(document.activeElement)) queueMicrotask(() => {
+			if (generation !== this.host.generation() || this.host.overlayRef() !== overlayRef || !this.host.openValue() || this.host.disabled() || !this.host.canOpen()) return;
+			this.focusFirstInPanel();
+		});
+	}
+	firstFocusable(root) {
+		const candidates = root.querySelectorAll(FOCUSABLE_SELECTOR);
+		for (const candidate of Array.from(candidates)) if (this.checker.isFocusable(candidate)) return candidate;
+		return null;
+	}
+	panelTabbables() {
+		const content = this.host.content();
+		if (!content) return [];
+		return Array.from(content.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => this.checker.isTabbable(element));
+	}
+	handlePanelTab(event) {
+		const content = this.host.content();
+		if (!content) return;
+		const tabbables = this.panelTabbables();
+		const active = document.activeElement;
+		if (event.shiftKey) {
+			const atStart = tabbables.length > 0 ? active === tabbables[0] : active === content;
+			const trigger = this.host.trigger();
+			if (atStart && trigger) {
+				event.preventDefault();
+				trigger.focus();
+			}
+			return;
+		}
+		if (!(tabbables.length > 0 ? active === tabbables[tabbables.length - 1] : active === content)) return;
+		const next = this.nextTabbableAfterRoot();
+		if (next) {
+			event.preventDefault();
+			next.focus();
+		}
+	}
+	nextTabbableAfterRoot() {
+		const root = this.host.root;
+		const overlay = this.host.pane();
+		const candidates = Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => this.checker.isTabbable(element) && element.closest("[inert]") === null && (!overlay || !containsOwnedOverlay(overlay, element)));
+		for (const candidate of candidates) {
+			const position = root.compareDocumentPosition(candidate);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING && !(position & Node.DOCUMENT_POSITION_CONTAINED_BY)) return candidate;
+		}
+		return null;
+	}
+};
+var RaqmPopoverOverlay = class {
+	overlay;
+	scrollDispatcher;
+	viewportRuler;
+	viewContainerRef;
+	injector;
+	state;
+	position;
+	sizing;
+	host;
+	overlayRef;
+	outsideSubscription;
+	detachSubscription;
+	viewportSubscription;
+	scrollSubscription;
+	ownedFocusOut = (event) => {
+		const target = event.target;
+		const pane = this.overlayRef?.overlayElement;
+		if (pane && target && !pane.contains(target) && containsOwnedOverlay(pane, target)) this.host.maybeCloseOnFocusOut(event);
+	};
+	renderTransaction;
+	disposeTimer;
+	pendingDisposeOverlay;
+	appliedPanelClass;
+	constructor(overlay, scrollDispatcher, viewportRuler, viewContainerRef, injector, state, position, sizing, host) {
+		this.overlay = overlay;
+		this.scrollDispatcher = scrollDispatcher;
+		this.viewportRuler = viewportRuler;
+		this.viewContainerRef = viewContainerRef;
+		this.injector = injector;
+		this.state = state;
+		this.position = position;
+		this.sizing = sizing;
+		this.host = host;
+	}
+	get element() {
+		return this.overlayRef?.overlayElement;
+	}
+	get ref() {
+		return this.overlayRef;
+	}
+	contentElement() {
+		return this.overlayRef?.overlayElement.querySelector(".raqm-popover-content") ?? null;
+	}
+	updatePosition() {
+		this.overlayRef?.updatePosition();
+	}
+	setDirection(dir) {
+		this.overlayRef?.setDirection(dir);
+	}
+	syncOpen(next) {
+		if (next === this.state.currentOpen) return;
+		if (next) {
+			this.state.currentOpen = true;
+			this.beginOpen();
+			return;
+		}
+		this.state.currentOpen = false;
+		this.beginClose();
+	}
+	beginOpen() {
+		const trigger = this.host.trigger();
+		const template = this.host.contentTemplate();
+		const panelTemplate = this.host.panelTemplate();
+		if (!trigger || !template || !panelTemplate) {
+			this.state.currentOpen = false;
+			return;
+		}
+		this.flushPendingDispose();
+		this.cancelRenderTransaction();
+		const generation = ++this.state.openGeneration;
+		this.state.closing.set(false);
+		this.state.attached.set(false);
+		this.state.panelId.set(this.host.panelRootId);
+		this.sizing.naturalContentSize = void 0;
+		this.sizing.expectedContentSize = void 0;
+		const dir = this.host.direction();
+		this.state.currentDir = dir;
+		this.state.panelDir.set(dir);
+		const preferredSide = this.position.resolvePhysicalSide(this.host.side());
+		this.state.resolvedSide.set(preferredSide);
+		this.state.transformOrigin.set(this.position.computeTransformOrigin(preferredSide, this.host.align()));
+		const strategy = this.position.buildStrategy(trigger.element);
+		const config = {
+			positionStrategy: strategy,
+			hasBackdrop: false,
+			scrollStrategy: this.overlay.scrollStrategies.noop(),
+			panelClass: this.panelClasses(),
+			disposeOnNavigation: true,
+			direction: dir
+		};
+		const overlayRef = this.overlay.create(config);
+		registerOverlayOwnership(trigger.element, overlayRef);
+		this.overlayRef = overlayRef;
+		this.appliedPanelClass = this.host.panelClass();
+		this.position.watchSide(strategy);
+		this.outsideSubscription = overlayRef.outsidePointerEvents().subscribe((event) => {
+			const target = event.target;
+			if (this.host.isInsideRootOrOverlay(target)) return;
+			this.host.closeFromUser();
+		});
+		this.detachSubscription = overlayRef.detachments().subscribe(() => this.handleDetached());
+		this.host.root.ownerDocument.addEventListener("focusout", this.ownedFocusOut, true);
+		this.viewportSubscription = this.viewportRuler.change(0).subscribe(() => {
+			this.position.reposition();
+		});
+		this.scrollSubscription = this.scrollDispatcher.ancestorScrolled(trigger.element, 0).subscribe(() => this.position.reposition());
+		overlayRef.attach(new TemplatePortal(panelTemplate, this.viewContainerRef));
+		overlayRef.overlayElement.style.visibility = "hidden";
+		overlayRef.overlayElement.style.pointerEvents = "none";
+		this.state.attached.set(true);
+		this.sizing.attachResizeObserver(trigger.element);
+		this.startPlacementTransaction(overlayRef, generation);
+	}
+	startPlacementTransaction(overlayRef, generation) {
+		this.renderTransaction = afterNextRender(() => {
+			this.renderTransaction = void 0;
+			if (generation !== this.state.openGeneration || this.overlayRef !== overlayRef) return;
+			this.position.reposition();
+			this.revealAndFocus(overlayRef, generation);
+		}, { injector: this.injector });
+	}
+	revealAndFocus(overlayRef, generation) {
+		const pane = overlayRef.overlayElement;
+		const content = pane.querySelector(".raqm-popover-content");
+		if (!content || this.overlayRef !== overlayRef) return;
+		this.host.syncPanelAria();
+		content.classList.add("raqm-popover-content--entering");
+		pane.style.pointerEvents = "";
+		pane.style.visibility = "";
+		this.host.focusInitial(overlayRef, generation);
+	}
+	beginClose() {
+		this.host.root.ownerDocument.removeEventListener("focusout", this.ownedFocusOut, true);
+		this.state.panelId.set(null);
+		this.state.closing.set(false);
+		this.cancelRenderTransaction();
+		this.state.attached.set(false);
+		const overlayRef = this.overlayRef;
+		this.overlayRef = void 0;
+		this.position.clearStrategy();
+		this.position.releaseSideWatch();
+		this.outsideSubscription?.unsubscribe();
+		this.outsideSubscription = void 0;
+		this.detachSubscription?.unsubscribe();
+		this.detachSubscription = void 0;
+		this.viewportSubscription?.unsubscribe();
+		this.viewportSubscription = void 0;
+		this.scrollSubscription?.unsubscribe();
+		this.scrollSubscription = void 0;
+		this.sizing.releaseResizeObserver();
+		this.appliedPanelClass = void 0;
+		if (!overlayRef) return;
+		overlayRef.overlayElement.setAttribute("inert", "");
+		overlayRef.overlayElement.setAttribute("aria-hidden", "true");
+		if (prefersReducedMotion()) {
+			overlayRef.dispose();
+			return;
+		}
+		const content = overlayRef.overlayElement.querySelector(".raqm-popover-content");
+		content?.classList.remove("raqm-popover-content--entering");
+		content?.classList.add("raqm-popover-content--closing");
+		this.state.closing.set(true);
+		this.pendingDisposeOverlay = overlayRef;
+		this.disposeTimer = setTimeout(() => {
+			this.disposeTimer = void 0;
+			this.pendingDisposeOverlay = void 0;
+			this.state.closing.set(false);
+			overlayRef.dispose();
+		}, 100);
+	}
+	flushPendingDispose() {
+		if (this.disposeTimer !== void 0) {
+			clearTimeout(this.disposeTimer);
+			this.disposeTimer = void 0;
+		}
+		const overlayRef = this.pendingDisposeOverlay;
+		this.pendingDisposeOverlay = void 0;
+		this.state.closing.set(false);
+		overlayRef?.dispose();
+	}
+	cancelRenderTransaction() {
+		this.renderTransaction?.destroy();
+		this.renderTransaction = void 0;
+	}
+	handleDetached() {
+		this.host.root.ownerDocument.removeEventListener("focusout", this.ownedFocusOut, true);
+		this.position.releaseSideWatch();
+		this.outsideSubscription?.unsubscribe();
+		this.outsideSubscription = void 0;
+		this.detachSubscription?.unsubscribe();
+		this.detachSubscription = void 0;
+		this.viewportSubscription?.unsubscribe();
+		this.viewportSubscription = void 0;
+		this.scrollSubscription?.unsubscribe();
+		this.scrollSubscription = void 0;
+		this.sizing.releaseResizeObserver();
+		this.overlayRef = void 0;
+		this.position.clearStrategy();
+		this.state.panelId.set(null);
+		this.state.closing.set(false);
+		this.state.currentOpen = false;
+		this.appliedPanelClass = void 0;
+		this.cancelRenderTransaction();
+		this.state.attached.set(false);
+		this.host.setClosed();
+	}
+	destroy() {
+		this.host.root.ownerDocument.removeEventListener("focusout", this.ownedFocusOut, true);
+		this.state.openGeneration += 1;
+		this.position.releaseSideWatch();
+		this.outsideSubscription?.unsubscribe();
+		this.outsideSubscription = void 0;
+		this.detachSubscription?.unsubscribe();
+		this.detachSubscription = void 0;
+		this.viewportSubscription?.unsubscribe();
+		this.viewportSubscription = void 0;
+		this.scrollSubscription?.unsubscribe();
+		this.scrollSubscription = void 0;
+		this.sizing.releaseResizeObserver();
+		this.cancelRenderTransaction();
+		this.state.attached.set(false);
+		const overlayRef = this.overlayRef;
+		this.overlayRef = void 0;
+		this.position.clearStrategy();
+		this.appliedPanelClass = void 0;
+		overlayRef?.dispose();
+		this.flushPendingDispose();
+	}
+	panelClasses() {
+		const panelClass = this.host.panelClass();
+		return panelClass ? [PANE_CLASS, panelClass] : [PANE_CLASS];
+	}
+	applyPanelClass(panelClass) {
+		const pane = this.overlayRef?.overlayElement;
+		if (!pane) return;
+		if (this.appliedPanelClass && this.appliedPanelClass !== panelClass) pane.classList.remove(this.appliedPanelClass);
+		if (panelClass) pane.classList.add(panelClass);
+		this.appliedPanelClass = panelClass;
+	}
+};
+var RaqmPopoverPosition = class {
+	overlay;
+	viewportRuler;
+	state;
+	sizing;
+	host;
+	positionStrategy;
+	currentPositions = [];
+	currentPositionSides = [];
+	sideSubscription;
+	constructor(overlay, viewportRuler, state, sizing, host) {
+		this.overlay = overlay;
+		this.viewportRuler = viewportRuler;
+		this.state = state;
+		this.sizing = sizing;
+		this.host = host;
+	}
+	buildStrategy(origin) {
+		const strategy = this.overlay.position().flexibleConnectedTo(origin);
+		strategy.withFlexibleDimensions(false).withGrowAfterOpen(false).withPush(true).withViewportMargin(5);
+		const preferred = this.resolvePhysicalSide(this.host.side());
+		this.currentPositionSides = [preferred, this.oppositeSide(preferred)];
+		this.currentPositions = this.currentPositionSides.map((side) => this.buildPositionFor(side));
+		strategy.withPositions(this.currentPositions);
+		this.positionStrategy = strategy;
+		return strategy;
+	}
+	setPositions(sides) {
+		const strategy = this.positionStrategy;
+		if (!strategy) return;
+		const positions = sides.map((side) => this.buildPositionFor(side));
+		strategy.withPositions(positions);
+		this.currentPositions = positions;
+		this.currentPositionSides = [...sides];
+	}
+	buildPositionFor(side) {
+		const align = this.host.align();
+		const anchorRect = this.host.trigger()?.element?.getBoundingClientRect();
+		const viewport = this.viewportRuler.getViewportSize();
+		const x = align;
+		const y = this.toVerticalAlign(align);
+		const mainOffset = this.sizing.effectiveSideOffset(side);
+		const alignX = this.sizing.crossAxisGeometry("x", anchorRect, viewport.width).offset;
+		const alignY = this.sizing.crossAxisGeometry("y", anchorRect, viewport.height).offset;
+		switch (side) {
+			case "bottom": return {
+				originX: x,
+				originY: "bottom",
+				overlayX: x,
+				overlayY: "top",
+				offsetX: alignX,
+				offsetY: mainOffset
+			};
+			case "top": return {
+				originX: x,
+				originY: "top",
+				overlayX: x,
+				overlayY: "bottom",
+				offsetX: alignX,
+				offsetY: mainOffset
+			};
+			case "right": return this.horizontalPosition("right", y, mainOffset, alignY);
+			default: return this.horizontalPosition("left", y, mainOffset, alignY);
+		}
+	}
+	horizontalPosition(side, alignY, offsetX, alignYOffset) {
+		const rtl = this.state.currentDir === "rtl";
+		return {
+			originX: side === "right" ? rtl ? "start" : "end" : rtl ? "end" : "start",
+			originY: alignY,
+			overlayX: side === "right" ? rtl ? "end" : "start" : rtl ? "start" : "end",
+			overlayY: alignY,
+			offsetX,
+			offsetY: alignYOffset
+		};
+	}
+	oppositeSide(side) {
+		switch (side) {
+			case "top": return "bottom";
+			case "bottom": return "top";
+			case "left": return "right";
+			default: return "left";
+		}
+	}
+	watchSide(strategy) {
+		this.sideSubscription = strategy.positionChanges.subscribe((change) => {
+			const index = this.currentPositions.indexOf(change.connectionPair);
+			const applied = this.currentPositionSides[index] ?? this.currentPositionSides[0] ?? "bottom";
+			this.state.resolvedSide.set(applied);
+			this.state.transformOrigin.set(this.computeTransformOrigin(applied, this.host.align()));
+		});
+	}
+	resolvePhysicalSide(side) {
+		switch (side) {
+			case "inline-start": return this.state.currentDir === "rtl" ? "right" : "left";
+			case "inline-end": return this.state.currentDir === "rtl" ? "left" : "right";
+			default: return side;
+		}
+	}
+	computeTransformOrigin(side, align) {
+		const rtl = this.state.currentDir === "rtl";
+		return `${side === "left" ? "right" : side === "right" ? "left" : align === "start" ? rtl ? "right" : "left" : align === "end" ? rtl ? "left" : "right" : "center"} ${side === "top" ? "bottom" : side === "bottom" ? "top" : this.toVerticalAlign(align)}`;
+	}
+	toVerticalAlign(align) {
+		return align === "start" ? "top" : align === "end" ? "bottom" : "center";
+	}
+	reposition() {
+		const pane = this.host.pane();
+		const strategy = this.positionStrategy;
+		if (!pane || !strategy) return;
+		const dir = this.host.direction();
+		if (dir !== this.state.currentDir) {
+			this.state.currentDir = dir;
+			this.state.panelDir.set(dir);
+			this.host.setDirection(dir);
+		}
+		const preferred = this.resolvePhysicalSide(this.host.side());
+		this.setPositions([preferred, this.oppositeSide(preferred)]);
+		this.sizing.resetAvailableSize();
+		this.sizing.naturalContentSize = this.sizing.contentBoxSize();
+		this.host.updatePosition();
+		const applied = this.state.resolvedSide();
+		this.sizing.applyAvailableSize();
+		this.setPositions([applied]);
+		this.host.updatePosition();
+		this.sizing.expectedContentSize = this.sizing.contentBoxSize();
+	}
+	applyPositionInputs() {
+		this.reposition();
+	}
+	releaseSideWatch() {
+		this.sideSubscription?.unsubscribe();
+		this.sideSubscription = void 0;
+	}
+	clearStrategy() {
+		this.positionStrategy = void 0;
+	}
+};
+let nextPopoverId = 0;
+var RaqmPopoverRegistration = class {
+	host;
+	triggerRef = signal(null, ...ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []);
+	contentTemplate = signal(null, ...ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []);
+	titleElement = signal(null, ...ngDevMode ? [{ debugName: "titleElement" }] : /* istanbul ignore next */ []);
+	descriptionElement = signal(null, ...ngDevMode ? [{ debugName: "descriptionElement" }] : /* istanbul ignore next */ []);
+	rootId = ++nextPopoverId;
+	panelRootId = `raqm-popover-panel-${this.rootId}`;
+	titleRootId = `raqm-popover-title-${this.rootId}`;
+	descriptionRootId = `raqm-popover-description-${this.rootId}`;
+	constructor(host) {
+		this.host = host;
+	}
+	registerTrigger(ref) {
+		const current = this.triggerRef();
+		if (current !== null && current !== ref) {
+			if (isDevMode()) console.error("[raqm-popover] Only one `button[raqm-popover-trigger]` is supported per <raqm-popover>; the extra trigger is ignored.");
+			return;
+		}
+		this.triggerRef.set(ref);
+	}
+	unregisterTrigger(ref) {
+		if (this.triggerRef() === ref) this.triggerRef.set(null);
+	}
+	registerContent(template) {
+		const current = this.contentTemplate();
+		if (current !== null && current !== template) {
+			if (isDevMode()) console.error("[raqm-popover] Only one `ng-template[raqm-popover-content]` is supported per <raqm-popover>; the extra template is ignored.");
+			return;
+		}
+		this.contentTemplate.set(template);
+	}
+	unregisterContent(template) {
+		if (this.contentTemplate() === template) this.contentTemplate.set(null);
+	}
+	registerTitle(element) {
+		if (isDevMode() && this.titleElement() !== null && this.titleElement() !== element) console.error("[raqm-popover] Only one `[raqm-popover-title]` is expected per <raqm-popover>; the latest registration wins.");
+		if (!element.id) element.id = this.titleRootId;
+		this.titleElement.set(element);
+		this.syncPanelAria();
+	}
+	unregisterTitle(element) {
+		if (this.titleElement() === element) {
+			this.titleElement.set(null);
+			this.syncPanelAria();
+		}
+	}
+	registerDescription(element) {
+		if (isDevMode() && this.descriptionElement() !== null && this.descriptionElement() !== element) console.error("[raqm-popover] Only one `[raqm-popover-description]` is expected per <raqm-popover>; the latest registration wins.");
+		if (!element.id) element.id = this.descriptionRootId;
+		this.descriptionElement.set(element);
+		this.syncPanelAria();
+	}
+	unregisterDescription(element) {
+		if (this.descriptionElement() === element) {
+			this.descriptionElement.set(null);
+			this.syncPanelAria();
+		}
+	}
+	syncPanelAria() {
+		const content = this.host.content();
+		if (!content) return;
+		const title = this.titleElement();
+		const description = this.descriptionElement();
+		if (title) content.setAttribute("aria-labelledby", title.id);
+		else content.removeAttribute("aria-labelledby");
+		if (description) content.setAttribute("aria-describedby", description.id);
+		else content.removeAttribute("aria-describedby");
+		const label = this.host.label();
+		if (!title && label) content.setAttribute("aria-label", label);
+		else content.removeAttribute("aria-label");
+	}
+};
+var RaqmPopoverSizing = class {
+	viewportRuler;
+	state;
+	host;
+	naturalContentSize;
+	expectedContentSize;
+	resizeObserver;
+	constructor(viewportRuler, state, host) {
+		this.viewportRuler = viewportRuler;
+		this.state = state;
+		this.host = host;
+	}
+	viewportCap(viewportDimension) {
+		return Math.max(viewportDimension - 10, 0);
+	}
+	contentBoxSize() {
+		const content = this.host.content();
+		if (!content) return;
+		return {
+			width: content.offsetWidth,
+			height: content.offsetHeight
+		};
+	}
+	isSelfInducedContentSize(size) {
+		return sameBoxSize(size, this.naturalContentSize) || sameBoxSize(size, this.expectedContentSize);
+	}
+	resetAvailableSize() {
+		const pane = this.host.pane();
+		if (!pane) return;
+		pane.style.removeProperty("--raqm-popover-available-width");
+		pane.style.removeProperty("--raqm-popover-available-height");
+	}
+	attachResizeObserver(anchor) {
+		this.releaseResizeObserver();
+		if (typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver((entries) => {
+			const content = this.host.content();
+			for (const entry of entries) {
+				if (entry.target !== content) {
+					this.host.reposition();
+					return;
+				}
+				const size = this.contentBoxSize();
+				if (size && !this.isSelfInducedContentSize(size)) {
+					this.host.reposition();
+					return;
+				}
+			}
+		});
+		this.resizeObserver.observe(anchor);
+		const content = this.host.content();
+		if (content) this.resizeObserver.observe(content);
+	}
+	releaseResizeObserver() {
+		this.resizeObserver?.disconnect();
+		this.resizeObserver = void 0;
+	}
+	applyAvailableSize() {
+		const pane = this.host.pane();
+		const anchor = this.host.trigger()?.element;
+		if (!pane || !anchor) return;
+		const anchorRect = anchor.getBoundingClientRect();
+		const viewport = this.viewportRuler.getViewportSize();
+		const sideOffset = this.host.sideOffset();
+		const side = this.state.resolvedSide();
+		const capacityWidth = this.viewportCap(viewport.width);
+		const capacityHeight = this.viewportCap(viewport.height);
+		const below = capacityHeight - anchorRect.bottom - sideOffset;
+		const above = anchorRect.top - sideOffset - 5;
+		const after = capacityWidth - anchorRect.right - sideOffset;
+		const before = anchorRect.left - sideOffset - 5;
+		const crossConservative = (side === "top" ? above : side === "left" ? before : side === "bottom" ? below : after) <= 0;
+		const crossWidth = this.crossAxisGeometry("x", anchorRect, viewport.width, crossConservative).room;
+		const crossHeight = this.crossAxisGeometry("y", anchorRect, viewport.height, crossConservative).room;
+		let width;
+		let height;
+		let widthIsCross = false;
+		let heightIsCross = false;
+		switch (side) {
+			case "top":
+				height = above;
+				width = crossWidth;
+				widthIsCross = true;
+				break;
+			case "left":
+				width = before;
+				height = crossHeight;
+				heightIsCross = true;
+				break;
+			case "right":
+				width = after;
+				height = crossHeight;
+				heightIsCross = true;
+				break;
+			default:
+				height = below;
+				width = crossWidth;
+				widthIsCross = true;
+		}
+		this.applyAvailableDimension(pane, "--raqm-popover-available-width", widthIsCross || width > 0 ? Math.min(width, capacityWidth) : capacityWidth);
+		this.applyAvailableDimension(pane, "--raqm-popover-available-height", heightIsCross || height > 0 ? Math.min(height, capacityHeight) : capacityHeight);
+	}
+	effectiveSideOffset(side) {
+		const authored = side === "bottom" || side === "right" ? this.host.sideOffset() : -this.host.sideOffset();
+		const anchor = this.host.trigger()?.element;
+		const pane = this.host.pane();
+		if (!anchor || !pane) return authored;
+		const horizontal = side === "left" || side === "right";
+		const viewport = this.viewportRuler.getViewportSize();
+		const client = horizontal ? viewport.width : viewport.height;
+		const size = horizontal ? pane.getBoundingClientRect().width : pane.getBoundingClientRect().height;
+		const capacity = this.viewportCap(client);
+		if (size <= 0 || size > capacity) return authored;
+		const anchorRect = anchor.getBoundingClientRect();
+		const base = horizontal ? side === "right" ? anchorRect.right : anchorRect.left - size : side === "bottom" ? anchorRect.bottom : anchorRect.top - size;
+		const overflowNear = Math.max(5 - base, 0);
+		const overflowFar = Math.max(base + size - capacity, 0);
+		const pushedBase = base + (overflowNear || -overflowFar);
+		return Math.min(Math.max(authored, 5 - pushedBase), client - 5 - pushedBase - size);
+	}
+	authoredCrossOffset(axis) {
+		const alignOffset = this.host.alignOffset();
+		return axis === "x" && this.state.currentDir === "rtl" ? -alignOffset : alignOffset;
+	}
+	crossAxisGeometry(axis, anchorRect, viewportDimension, conservative = false) {
+		const authored = this.authoredCrossOffset(axis);
+		const capacity = this.viewportCap(viewportDimension);
+		if (!authored || !anchorRect) return {
+			offset: authored,
+			room: capacity
+		};
+		const rtl = this.state.currentDir === "rtl";
+		const align = this.host.align();
+		const axisStart = axis === "x" ? anchorRect.left : anchorRect.top;
+		const axisSize = axis === "x" ? anchorRect.width : anchorRect.height;
+		const startEdge = axis === "x" && rtl ? axisStart + axisSize : axisStart;
+		const endEdge = axis === "x" && rtl ? axisStart : axisStart + axisSize;
+		const origin = align === "start" ? startEdge : align === "end" ? endEdge : axisStart + axisSize / 2;
+		const offset = Math.min(Math.max(authored, 5 - origin), capacity - origin);
+		const roomEdge = conservative ? origin : origin + offset;
+		const beforeRoom = Math.max(roomEdge - 5, 0);
+		const afterRoom = Math.max(capacity - roomEdge, 0);
+		if (align === "center") return {
+			offset,
+			room: Math.min((Math.min(beforeRoom, afterRoom) || Math.max(beforeRoom, afterRoom)) * 2, capacity)
+		};
+		const growsAfter = axis === "y" ? align === "start" : align === "start" ? !rtl : rtl;
+		return {
+			offset,
+			room: (growsAfter ? afterRoom : beforeRoom) || (growsAfter ? beforeRoom : afterRoom)
+		};
+	}
+	applyAvailableDimension(pane, property, value) {
+		const next = `${Math.max(Math.floor(value), 0)}px`;
+		if (pane.style.getPropertyValue(property) !== next) pane.style.setProperty(property, next);
+	}
+};
+var RaqmPopoverState = class {
+	attached = signal(false, ...ngDevMode ? [{ debugName: "attached" }] : /* istanbul ignore next */ []);
+	panelId = signal(null, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	resolvedSide = signal("bottom", ...ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []);
+	transformOrigin = signal("center top", ...ngDevMode ? [{ debugName: "transformOrigin" }] : /* istanbul ignore next */ []);
+	closing = signal(false, ...ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []);
+	panelDir = signal("ltr", ...ngDevMode ? [{ debugName: "panelDir" }] : /* istanbul ignore next */ []);
+	currentDir = "ltr";
+	currentOpen = false;
+	openGeneration = 0;
+};
+var RaqmPopoverComponent = class RaqmPopoverComponent {
+	host = inject(ElementRef);
+	overlay = inject(Overlay);
+	viewContainerRef = inject(ViewContainerRef);
+	injector = inject(Injector);
+	directionality = inject(Directionality, { optional: true });
+	viewportRuler = inject(ViewportRuler);
+	scrollDispatcher = inject(ScrollDispatcher);
+	checker = inject(InteractivityChecker);
+	panelTemplate = viewChild("panel", {
+		...ngDevMode ? { debugName: "panelTemplate" } : /* istanbul ignore next */ {},
+		read: TemplateRef
+	});
+	openValue = model(false, {
+		...ngDevMode ? { debugName: "openValue" } : /* istanbul ignore next */ {},
+		alias: "open"
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	side = input(DEFAULT_SIDE, {
+		...ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {},
+		transform: toSide
+	});
+	align = input(DEFAULT_ALIGN, {
+		...ngDevMode ? { debugName: "align" } : /* istanbul ignore next */ {},
+		transform: toAlign
+	});
+	sideOffset = input(4, {
+		...ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {},
+		transform: toOffset(4)
+	});
+	alignOffset = input(0, {
+		...ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {},
+		transform: toOffset(0)
+	});
+	dir = input(void 0, {
+		...ngDevMode ? { debugName: "dir" } : /* istanbul ignore next */ {},
+		transform: toDir
+	});
+	width = input(DEFAULT_WIDTH, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	panelClass = input(void 0, ...ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []);
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	state = new RaqmPopoverState();
+	registration = new RaqmPopoverRegistration({
+		content: () => this.layer.contentElement(),
+		label: () => this.label()
+	});
+	canOpen = computed(() => this.registration.triggerRef() !== null && this.registration.contentTemplate() !== null && this.panelTemplate() !== void 0, ...ngDevMode ? [{ debugName: "canOpen" }] : /* istanbul ignore next */ []);
+	open = computed(() => this.openValue() && !this.disabled() && this.state.attached(), ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	panelId = this.state.panelId;
+	resolvedSide = this.state.resolvedSide;
+	transformOrigin = this.state.transformOrigin;
+	closing = this.state.closing;
+	panelDir = this.state.panelDir;
+	contentTemplate = this.registration.contentTemplate;
+	sizing = new RaqmPopoverSizing(this.viewportRuler, this.state, {
+		align: () => this.align(),
+		alignOffset: () => this.alignOffset(),
+		sideOffset: () => this.sideOffset(),
+		trigger: () => this.registration.triggerRef(),
+		pane: () => this.layer.element,
+		content: () => this.layer.contentElement(),
+		reposition: () => this.position.reposition()
+	});
+	position = new RaqmPopoverPosition(this.overlay, this.viewportRuler, this.state, this.sizing, {
+		side: () => this.side(),
+		align: () => this.align(),
+		direction: () => resolvePopoverDirection(this.dir(), this.host.nativeElement, this.directionality),
+		trigger: () => this.registration.triggerRef(),
+		pane: () => this.layer.element,
+		updatePosition: () => this.layer.updatePosition(),
+		setDirection: (dir) => this.layer.setDirection(dir)
+	});
+	layer = new RaqmPopoverOverlay(this.overlay, this.scrollDispatcher, this.viewportRuler, this.viewContainerRef, this.injector, this.state, this.position, this.sizing, {
+		root: this.host.nativeElement,
+		panelRootId: this.registration.panelRootId,
+		trigger: () => this.registration.triggerRef(),
+		contentTemplate: () => this.registration.contentTemplate(),
+		panelTemplate: () => this.panelTemplate(),
+		side: () => this.side(),
+		align: () => this.align(),
+		panelClass: () => this.panelClass(),
+		direction: () => resolvePopoverDirection(this.dir(), this.host.nativeElement, this.directionality),
+		isInsideRootOrOverlay: (node) => this.dismissal.isInsideRootOrOverlay(node),
+		closeFromUser: () => this.closeFromUser(),
+		maybeCloseOnFocusOut: (event) => this.dismissal.maybeCloseOnFocusOut(event),
+		syncPanelAria: () => this.registration.syncPanelAria(),
+		focusInitial: (overlayRef, generation) => this.keyboard.focusInitial(overlayRef, generation),
+		setClosed: () => this.dismissal.setClosed()
+	});
+	keyboard = new RaqmPopoverKeyboard(this.checker, {
+		root: this.host.nativeElement,
+		open: () => this.open(),
+		openValue: () => this.openValue(),
+		disabled: () => this.disabled(),
+		canOpen: () => this.canOpen(),
+		trigger: () => this.registration.triggerRef(),
+		pane: () => this.layer.element,
+		content: () => this.layer.contentElement(),
+		overlayRef: () => this.layer.ref,
+		generation: () => this.state.openGeneration,
+		closeFromUser: () => this.closeFromUser()
+	});
+	dismissal = new RaqmPopoverDismissal({
+		root: this.host.nativeElement,
+		open: () => this.open(),
+		openValue: () => this.openValue(),
+		disabled: () => this.disabled(),
+		canOpen: () => this.canOpen(),
+		pane: () => this.layer.element,
+		generation: () => this.state.openGeneration,
+		setOpen: (value) => this.openValue.set(value)
+	});
+	constructor() {
+		connectPopoverEffects({
+			openValue: () => this.openValue(),
+			disabled: () => this.disabled(),
+			canOpen: () => this.canOpen(),
+			side: () => this.side(),
+			align: () => this.align(),
+			sideOffset: () => this.sideOffset(),
+			alignOffset: () => this.alignOffset(),
+			dir: () => this.dir(),
+			label: () => this.label(),
+			panelClass: () => this.panelClass(),
+			syncOpen: (next) => this.layer.syncOpen(next),
+			applyPositionInputs: () => this.position.applyPositionInputs(),
+			syncPanelAria: () => this.registration.syncPanelAria(),
+			applyPanelClass: (panelClass) => this.layer.applyPanelClass(panelClass)
+		});
+	}
+	ngOnDestroy() {
+		this.layer.destroy();
+	}
+	registerTrigger(ref) {
+		this.registration.registerTrigger(ref);
+	}
+	unregisterTrigger(ref) {
+		this.registration.unregisterTrigger(ref);
+	}
+	registerContent(template) {
+		this.registration.registerContent(template);
+	}
+	unregisterContent(template) {
+		this.registration.unregisterContent(template);
+	}
+	registerTitle(element) {
+		this.registration.registerTitle(element);
+	}
+	unregisterTitle(element) {
+		this.registration.unregisterTitle(element);
+	}
+	registerDescription(element) {
+		this.registration.registerDescription(element);
+	}
+	unregisterDescription(element) {
+		this.registration.unregisterDescription(element);
+	}
+	toggleFromTrigger(ref) {
+		if (ref !== this.registration.triggerRef() || this.disabled() || ref.disabled) return;
+		if (this.open()) {
+			this.closeFromUser();
+			return;
+		}
+		this.openValue.set(true);
+	}
+	closeFromUser() {
+		if (!this.open()) return;
+		this.dismissal.setClosed();
+	}
+	close() {
+		this.dismissal.setClosed();
+	}
+	focusFirstInPanel() {
+		this.keyboard.focusFirstInPanel();
+	}
+	onTriggerTab(event) {
+		this.keyboard.onTriggerTab(event);
+	}
+	onFocusOut(event) {
+		this.dismissal.maybeCloseOnFocusOut(event);
+	}
+	onPanelFocusOut(event) {
+		this.dismissal.maybeCloseOnFocusOut(event);
+	}
+	onPanelKeydown(event) {
+		this.keyboard.onPanelKeydown(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmPopoverComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmPopoverComponent,
+		isStandalone: true,
+		selector: "raqm-popover",
+		inputs: {
+			openValue: {
+				classPropertyName: "openValue",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideOffset: {
+				classPropertyName: "sideOffset",
+				publicName: "sideOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			alignOffset: {
+				classPropertyName: "alignOffset",
+				publicName: "alignOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelClass: {
+				classPropertyName: "panelClass",
+				publicName: "panelClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { openValue: "openChange" },
+		host: { listeners: { "focusout": "onFocusOut($event)" } },
+		providers: [{
+			provide: RAQM_POPOVER,
+			useExisting: RaqmPopoverComponent
+		}],
+		viewQueries: [{
+			propertyName: "panelTemplate",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			read: TemplateRef,
+			isSignal: true
+		}],
+		exportAs: ["raqmPopover"],
+		ngImport: i0,
+		template: "<ng-content />\r\n\r\n<!-- The one panel template, instantiated into a CDK overlay when the popup opens.\r\n     Its wrapper nodes are created by this component's view (so this component's\r\n     own external stylesheet applies to them) while the projected template\r\n     children stay application-owned and are styled by the shipped relationship\r\n     partial. `NgTemplateOutlet` renders the registered content template. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-popover-content\"\r\n    tabindex=\"-1\"\r\n    [attr.id]=\"panelId()\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [attr.data-raqm-side]=\"resolvedSide()\"\r\n    [class.raqm-popover-content--closing]=\"closing()\"\r\n    [style.width]=\"width()\"\r\n    [style.transform-origin]=\"transformOrigin()\"\r\n    (focusout)=\"onPanelFocusOut($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-popover-content{display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 2.5);padding:calc(var(--raqm-spacing) * 2.5);border-radius:var(--raqm-radius-lg);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent),var(--raqm-shadow-md);outline:none;box-sizing:border-box;max-inline-size:var(--raqm-popover-available-width, none);max-block-size:var(--raqm-popover-available-height, none);overflow:auto;transform-origin:center top}.raqm-popover-content--entering{animation:raqm-popover-in var(--raqm-duration-fast) var(--raqm-ease-out)}.raqm-popover-content[data-raqm-side=bottom]{--raqm-popover-enter-translate: translateY(-8px)}.raqm-popover-content[data-raqm-side=top]{--raqm-popover-enter-translate: translateY(8px)}.raqm-popover-content[data-raqm-side=left]{--raqm-popover-enter-translate: translateX(8px)}.raqm-popover-content[data-raqm-side=right]{--raqm-popover-enter-translate: translateX(-8px)}@keyframes raqm-popover-in{0%{opacity:0;transform:var(--raqm-popover-enter-translate, none) scale(.95)}to{opacity:1;transform:none}}.raqm-popover-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-popover-content,.raqm-popover-content--closing{animation:none;transition:none}}@media(forced-colors:active){.raqm-popover-content{border:1px solid CanvasText}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmPopoverComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-popover",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			exportAs: "raqmPopover",
+			providers: [{
+				provide: RAQM_POPOVER,
+				useExisting: RaqmPopoverComponent
+			}],
+			host: { "(focusout)": "onFocusOut($event)" },
+			template: "<ng-content />\r\n\r\n<!-- The one panel template, instantiated into a CDK overlay when the popup opens.\r\n     Its wrapper nodes are created by this component's view (so this component's\r\n     own external stylesheet applies to them) while the projected template\r\n     children stay application-owned and are styled by the shipped relationship\r\n     partial. `NgTemplateOutlet` renders the registered content template. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-popover-content\"\r\n    tabindex=\"-1\"\r\n    [attr.id]=\"panelId()\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [attr.data-raqm-side]=\"resolvedSide()\"\r\n    [class.raqm-popover-content--closing]=\"closing()\"\r\n    [style.width]=\"width()\"\r\n    [style.transform-origin]=\"transformOrigin()\"\r\n    (focusout)=\"onPanelFocusOut($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-popover-content{display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 2.5);padding:calc(var(--raqm-spacing) * 2.5);border-radius:var(--raqm-radius-lg);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent),var(--raqm-shadow-md);outline:none;box-sizing:border-box;max-inline-size:var(--raqm-popover-available-width, none);max-block-size:var(--raqm-popover-available-height, none);overflow:auto;transform-origin:center top}.raqm-popover-content--entering{animation:raqm-popover-in var(--raqm-duration-fast) var(--raqm-ease-out)}.raqm-popover-content[data-raqm-side=bottom]{--raqm-popover-enter-translate: translateY(-8px)}.raqm-popover-content[data-raqm-side=top]{--raqm-popover-enter-translate: translateY(8px)}.raqm-popover-content[data-raqm-side=left]{--raqm-popover-enter-translate: translateX(8px)}.raqm-popover-content[data-raqm-side=right]{--raqm-popover-enter-translate: translateX(-8px)}@keyframes raqm-popover-in{0%{opacity:0;transform:var(--raqm-popover-enter-translate, none) scale(.95)}to{opacity:1;transform:none}}.raqm-popover-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-popover-content,.raqm-popover-content--closing{animation:none;transition:none}}@media(forced-colors:active){.raqm-popover-content{border:1px solid CanvasText}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		panelTemplate: [{
+			type: i0.ViewChild,
+			args: ["panel", {
+				read: TemplateRef,
+				isSignal: true
+			}]
+		}],
+		openValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		sideOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideOffset",
+				required: false
+			}]
+		}],
+		alignOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alignOffset",
+				required: false
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		panelClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelClass",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmPopoverTriggerDirective = class RaqmPopoverTriggerDirective {
+	host = inject(ElementRef);
+	popover = inject(RAQM_POPOVER, { optional: true });
+	destroyRef = inject(DestroyRef);
+	open = computed(() => this.popover?.open() ?? false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => this.popover?.panelId() ?? null, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	ref = (() => {
+		const self = this;
+		return {
+			get element() {
+				return self.host.nativeElement;
+			},
+			get disabled() {
+				return self.host.nativeElement.disabled;
+			},
+			focus() {
+				self.host.nativeElement.focus();
+			}
+		};
+	})();
+	constructor() {
+		const element = this.host.nativeElement;
+		if (!element.hasAttribute("type")) element.setAttribute("type", "button");
+		if (isDevMode() && this.popover === null) console.error("[raqm-popover-trigger] No parent <raqm-popover> found; the trigger cannot open a popup.");
+		this.destroyRef.onDestroy(() => this.popover?.unregisterTrigger(this.ref));
+	}
+	ngOnInit() {
+		this.popover?.registerTrigger(this.ref);
+	}
+	onClick() {
+		if (this.host.nativeElement.disabled) return;
+		this.popover?.toggleFromTrigger(this.ref);
+	}
+	onKeydown(event) {
+		if (this.host.nativeElement.disabled) return;
+		if (event.key === "Escape") {
+			if (this.popover?.open()) {
+				event.preventDefault();
+				event.stopPropagation();
+				this.popover.closeFromUser();
+			}
+			return;
+		}
+		if (event.key === "Tab") this.popover?.onTriggerTab(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmPopoverTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmPopoverTriggerDirective,
+		isStandalone: true,
+		selector: "button[raqm-popover-trigger]",
+		host: {
+			listeners: {
+				"click": "onClick()",
+				"keydown": "onKeydown($event)"
+			},
+			properties: {
+				"attr.aria-expanded": "open() ? \"true\" : \"false\"",
+				"attr.aria-controls": "open() ? panelId() : null"
+			},
+			classAttribute: "raqm-popover-trigger"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmPopoverTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-popover-trigger]",
+			host: {
+				class: "raqm-popover-trigger",
+				"[attr.aria-expanded]": "open() ? \"true\" : \"false\"",
+				"[attr.aria-controls]": "open() ? panelId() : null",
+				"(click)": "onClick()",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmPopoverContentDirective = class RaqmPopoverContentDirective {
+	template = inject(TemplateRef);
+	popover = inject(RAQM_POPOVER, { optional: true });
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		if (isDevMode() && this.popover === null) console.error("[raqm-popover-content] No parent <raqm-popover> found; the template is never rendered.");
+		this.destroyRef.onDestroy(() => this.popover?.unregisterContent(this.template));
+	}
+	ngOnInit() {
+		this.popover?.registerContent(this.template);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmPopoverContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmPopoverContentDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-popover-content]",
+		exportAs: ["raqmPopoverContent"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmPopoverContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[raqm-popover-content]",
+			exportAs: "raqmPopoverContent"
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmPopoverHeaderDirective = class RaqmPopoverHeaderDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmPopoverHeaderDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmPopoverHeaderDirective,
+		isStandalone: true,
+		selector: "[raqm-popover-header]",
+		host: { classAttribute: "raqm-popover-header" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmPopoverHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-popover-header]",
+			host: { class: "raqm-popover-header" }
+		}]
+	}]
+});
+var RaqmPopoverTitleDirective = class RaqmPopoverTitleDirective {
+	host = inject(ElementRef);
+	popover = inject(RAQM_POPOVER, { optional: true });
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		if (isDevMode() && this.popover === null) console.error("[raqm-popover-title] No parent <raqm-popover> found; the title cannot be associated with a popup.");
+		this.destroyRef.onDestroy(() => this.popover?.unregisterTitle(this.host.nativeElement));
+	}
+	ngOnInit() {
+		this.popover?.registerTitle(this.host.nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmPopoverTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmPopoverTitleDirective,
+		isStandalone: true,
+		selector: "[raqm-popover-title]",
+		host: { classAttribute: "raqm-popover-title" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmPopoverTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-popover-title]",
+			host: { class: "raqm-popover-title" }
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmPopoverDescriptionDirective = class RaqmPopoverDescriptionDirective {
+	host = inject(ElementRef);
+	popover = inject(RAQM_POPOVER, { optional: true });
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		if (isDevMode() && this.popover === null) console.error("[raqm-popover-description] No parent <raqm-popover> found; the description cannot be associated with a popup.");
+		this.destroyRef.onDestroy(() => this.popover?.unregisterDescription(this.host.nativeElement));
+	}
+	ngOnInit() {
+		this.popover?.registerDescription(this.host.nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmPopoverDescriptionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmPopoverDescriptionDirective,
+		isStandalone: true,
+		selector: "[raqm-popover-description]",
+		host: { classAttribute: "raqm-popover-description" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmPopoverDescriptionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-popover-description]",
+			host: { class: "raqm-popover-description" }
+		}]
+	}],
+	ctorParameters: () => []
+});
+const RaqmPopover = [
+	RaqmPopoverComponent,
+	RaqmPopoverTriggerDirective,
+	RaqmPopoverContentDirective,
+	RaqmPopoverHeaderDirective,
+	RaqmPopoverTitleDirective,
+	RaqmPopoverDescriptionDirective
+];
+export { RaqmPopover, RaqmPopoverComponent, RaqmPopoverContentDirective, RaqmPopoverDescriptionDirective, RaqmPopoverHeaderDirective, RaqmPopoverTitleDirective, RaqmPopoverTriggerDirective };
+
+//# sourceMappingURL=raqm-ui-popover.mjs.map