@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-dialog.mjs

@@ -0,0 +1,1214 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, Renderer2, TemplateRef, afterNextRender, booleanAttribute, computed, effect, inject, input, isDevMode, model, signal, untracked, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { FocusMonitor, InteractivityChecker } from "@angular/cdk/a11y";
+import { Directionality } from "@angular/cdk/bidi";
+import { Dialog } from "@angular/cdk/dialog";
+import { RaqmButton } from "@raqm/ui/button";
+import { ScrollStrategyOptions } from "@angular/cdk/overlay";
+import { hasModifierKey } from "@angular/cdk/keycodes";
+import { registerOverlayOwnership } from "@raqm/ui/overlay-internal";
+const RAQM_DIALOG = new InjectionToken("RaqmDialog");
+const RAQM_DIALOG_POLICY = new InjectionToken("RaqmDialogPolicy");
+var RaqmDialogScrollLock = class {
+	strategy;
+	active = 0;
+	constructor(options) {
+		this.strategy = options.block();
+	}
+	acquire() {
+		this.active += 1;
+		this.strategy.enable();
+	}
+	release() {
+		if (this.active === 0) return;
+		this.active -= 1;
+		if (this.active === 0) this.strategy.disable();
+	}
+	createLease() {
+		return new RaqmDialogScrollLease(this);
+	}
+};
+var RaqmDialogScrollLease = class {
+	held = false;
+	lock;
+	constructor(lock) {
+		this.lock = lock;
+	}
+	attach(_overlayRef) {}
+	enable() {
+		if (this.held) return;
+		this.held = true;
+		this.lock.acquire();
+	}
+	disable() {
+		if (!this.held) return;
+		this.held = false;
+		this.lock.release();
+	}
+	detach() {
+		this.disable();
+	}
+};
+const RAQM_DIALOG_SCROLL_LOCK = new InjectionToken("RaqmDialogScrollLock", {
+	providedIn: "root",
+	factory: () => new RaqmDialogScrollLock(inject(ScrollStrategyOptions))
+});
+function connectDialogEffects(host) {
+	effect(() => {
+		const next = host.openValue() && !host.disabled() && host.canOpen();
+		untracked(() => host.syncOpen(next));
+	});
+	effect(() => {
+		const panelClass = host.panelClass();
+		untracked(() => host.applyPanelClass(panelClass));
+	});
+	effect(() => {
+		host.label();
+		untracked(() => host.syncContainerAria());
+	});
+	effect(() => {
+		host.dir();
+		untracked(() => host.applyDirection());
+	});
+	effect(() => {
+		if (isDevMode() && host.closeButtonVisible() && !host.closeLabelText()) console.error("[raqm-dialog-family] The close control has no accessible name. Provide `closeLabel`.");
+	});
+}
+const PANE_CLASS = "raqm-dialog-overlay-pane";
+const CONTAINER_CLASS = "cdk-dialog-container";
+const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]";
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function toDir(value) {
+	return value === "ltr" || value === "rtl" ? value : void 0;
+}
+function resolveDialogDirection(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 RaqmDialogFocus = class {
+	dialogService;
+	focusMonitor;
+	checker;
+	state;
+	host;
+	constructor(dialogService, focusMonitor, checker, state, host) {
+		this.dialogService = dialogService;
+		this.focusMonitor = focusMonitor;
+		this.checker = checker;
+		this.state = state;
+		this.host = host;
+	}
+	maybeRestoreOriginFocus() {
+		if (this.state.destroyed || this.state.suppressFocusRestore) return;
+		const trigger = this.host.trigger()?.element;
+		const origin = trigger ?? this.state.triggerlessOrigin;
+		if (!origin || !origin.isConnected) return;
+		if (!trigger && (origin.closest("[inert]") || !this.checker.isFocusable(origin))) return;
+		const active = origin.ownerDocument.activeElement;
+		const remaining = this.dialogService.openDialogs;
+		if (remaining.length > 0) {
+			const topSurface = remaining[remaining.length - 1].overlayRef.overlayElement;
+			if (!topSurface.contains(origin)) return;
+			if (active !== null && topSurface.contains(active)) return;
+		} else if (active !== null && active !== origin.ownerDocument.body) return;
+		this.focusMonitor.focusVia(origin, this.state.lastCloseOrigin ?? "program");
+	}
+	focusInitial() {
+		const overlayElement = this.host.pane();
+		if (!overlayElement) return;
+		const container = overlayElement.querySelector(`.cdk-dialog-container`) ?? overlayElement;
+		((this.host.touchOpening() ? container : this.firstTabbable(container)) ?? container).focus();
+	}
+	validateAccessibleName() {
+		if (!isDevMode()) return;
+		if (!this.host.hasTitle() && !this.host.label()) console.error("[raqm-dialog] The dialog has no accessible name. Provide a `[raqm-dialog-title]` or an explicit `label`.");
+	}
+	firstTabbable(root) {
+		const candidates = root.querySelectorAll(FOCUSABLE_SELECTOR);
+		for (const candidate of Array.from(candidates)) if (this.checker.isTabbable(candidate)) return candidate;
+		return null;
+	}
+};
+var RaqmDialogOverlay = class {
+	dialogService;
+	scrollLock;
+	injector;
+	state;
+	policy;
+	host;
+	dialogRef;
+	pendingDialogRef;
+	exitTimer;
+	pendingCloseOrigin;
+	finalizing = false;
+	backdropSubscription;
+	keydownSubscription;
+	closedSubscription;
+	appliedPaneClasses = [];
+	constructor(dialogService, scrollLock, injector, state, policy, host) {
+		this.dialogService = dialogService;
+		this.scrollLock = scrollLock;
+		this.injector = injector;
+		this.state = state;
+		this.policy = policy;
+		this.host = host;
+	}
+	get element() {
+		return this.dialogRef?.overlayRef.overlayElement;
+	}
+	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 && !this.policy?.allowWithoutTrigger || !template || !panelTemplate) {
+			this.state.currentOpen = false;
+			return;
+		}
+		this.flushPendingDispose();
+		this.releaseSubscriptions();
+		const generation = ++this.state.openGeneration;
+		this.state.closing.set(false);
+		this.state.entering.set(true);
+		this.state.attached.set(false);
+		this.state.dialogId.set(this.host.dialogRootId);
+		this.pendingCloseOrigin = void 0;
+		this.state.suppressFocusRestore = false;
+		const dir = this.host.direction();
+		this.state.panelDir.set(dir);
+		const config = {
+			id: this.host.dialogRootId,
+			role: this.policy?.role ?? "dialog",
+			ariaModal: true,
+			hasBackdrop: true,
+			backdropClass: this.policy?.backdropClass ?? "raqm-dialog-overlay-backdrop",
+			panelClass: this.paneClasses(this.host.panelClass()),
+			width: this.policy?.side ? "100%" : void 0,
+			height: this.policy?.side ? "100%" : void 0,
+			disableClose: true,
+			closeOnNavigation: true,
+			direction: dir,
+			scrollStrategy: this.scrollLock.createLease(),
+			restoreFocus: false,
+			autoFocus: false
+		};
+		const focused = this.host.root.ownerDocument.activeElement;
+		this.state.triggerlessOrigin = !trigger && this.policy?.allowWithoutTrigger && focused instanceof HTMLElement ? focused : null;
+		const dialogRef = this.dialogService.open(panelTemplate, config);
+		const origin = trigger?.element ?? this.host.root;
+		registerOverlayOwnership(origin, dialogRef.overlayRef, true);
+		this.dialogRef = dialogRef;
+		this.appliedPaneClasses = this.paneClasses(this.host.panelClass());
+		this.backdropSubscription = dialogRef.backdropClick.subscribe(() => {
+			if (this.policy?.dismissOnBackdrop !== false) this.requestClose("mouse");
+		});
+		this.keydownSubscription = dialogRef.keydownEvents.subscribe((event) => {
+			if (event.key === "Escape" && !hasModifierKey(event)) {
+				event.preventDefault();
+				event.stopPropagation();
+				this.requestClose("keyboard");
+			}
+		});
+		this.closedSubscription = dialogRef.closed.subscribe(() => {
+			this.onDialogClosed(dialogRef);
+		});
+		this.state.attached.set(true);
+		this.host.syncContainerAria();
+		afterNextRender(() => {
+			if (generation !== this.state.openGeneration || this.dialogRef !== dialogRef || !this.state.attached()) return;
+			this.host.focusInitial();
+			this.host.validateAccessibleName();
+		}, { injector: this.injector });
+	}
+	beginClose() {
+		this.state.dialogId.set(null);
+		this.state.closing.set(false);
+		this.state.entering.set(false);
+		this.state.attached.set(false);
+		const dialogRef = this.dialogRef;
+		this.dialogRef = void 0;
+		this.releaseInputSubscriptions();
+		this.appliedPaneClasses = [];
+		if (!dialogRef) return;
+		const pane = dialogRef.overlayRef.overlayElement;
+		pane.setAttribute("inert", "");
+		pane.setAttribute("aria-hidden", "true");
+		dialogRef.overlayRef.backdropElement?.classList.remove("cdk-overlay-backdrop-showing");
+		const content = pane.querySelector(".raqm-dialog-content");
+		content?.classList.remove("raqm-dialog-content--entering");
+		content?.classList.add("raqm-dialog-content--closing");
+		this.state.closing.set(true);
+		this.pendingDialogRef = dialogRef;
+		if (prefersReducedMotion()) {
+			this.finalizeClose(dialogRef, true);
+			return;
+		}
+		this.exitTimer = setTimeout(() => {
+			this.exitTimer = void 0;
+			this.state.closing.set(false);
+			this.finalizeClose(dialogRef, true);
+		}, this.policy?.exitAnimationMs ?? 100);
+	}
+	finalizeClose(dialogRef, restore) {
+		const origin = this.pendingCloseOrigin;
+		this.pendingCloseOrigin = void 0;
+		this.state.lastCloseOrigin = origin;
+		if (this.exitTimer !== void 0) {
+			clearTimeout(this.exitTimer);
+			this.exitTimer = void 0;
+		}
+		const options = origin ? { focusOrigin: origin } : void 0;
+		this.state.closing.set(false);
+		this.finalizing = true;
+		dialogRef.close(void 0, options);
+		this.finalizing = false;
+		if (this.pendingDialogRef === dialogRef) this.pendingDialogRef = void 0;
+		if (restore) this.host.maybeRestoreOriginFocus();
+	}
+	requestClose(origin) {
+		this.pendingCloseOrigin = origin;
+		if (this.host.openValue()) this.host.setOpenValue(false);
+	}
+	flushPendingDispose() {
+		if (this.exitTimer !== void 0) {
+			clearTimeout(this.exitTimer);
+			this.exitTimer = void 0;
+		}
+		this.state.closing.set(false);
+		const pending = this.pendingDialogRef;
+		if (!pending) return;
+		this.pendingDialogRef = void 0;
+		this.state.suppressFocusRestore = true;
+		pending.close();
+	}
+	onDialogClosed(dialogRef) {
+		const isLive = this.dialogRef === dialogRef;
+		const isPending = this.pendingDialogRef === dialogRef;
+		if (!isLive && !isPending) return;
+		if (isPending && this.exitTimer !== void 0) {
+			clearTimeout(this.exitTimer);
+			this.exitTimer = void 0;
+		}
+		if (isPending) this.pendingDialogRef = void 0;
+		if (isLive) this.dialogRef = void 0;
+		this.releaseInputSubscriptions();
+		this.releaseClosedSubscription();
+		this.appliedPaneClasses = [];
+		this.state.attached.set(false);
+		this.state.entering.set(false);
+		this.state.closing.set(false);
+		this.state.dialogId.set(null);
+		this.state.currentOpen = false;
+		if (!this.finalizing) this.state.suppressFocusRestore = true;
+		this.setClosed();
+	}
+	setClosed() {
+		if (this.host.openValue()) this.host.setOpenValue(false);
+	}
+	destroy() {
+		this.state.openGeneration += 1;
+		this.state.destroyed = true;
+		this.state.triggerlessOrigin = null;
+		this.state.suppressFocusRestore = true;
+		this.releaseSubscriptions();
+		if (this.exitTimer !== void 0) {
+			clearTimeout(this.exitTimer);
+			this.exitTimer = void 0;
+		}
+		const dialogRef = this.dialogRef;
+		this.dialogRef = void 0;
+		const pending = this.pendingDialogRef;
+		this.pendingDialogRef = void 0;
+		this.appliedPaneClasses = [];
+		this.state.attached.set(false);
+		dialogRef?.close();
+		pending?.close();
+	}
+	paneClasses(panelClass) {
+		const extra = (panelClass ?? "").split(/\s+/).filter(Boolean);
+		return [
+			PANE_CLASS,
+			...this.policy?.paneClass ? [this.policy.paneClass] : [],
+			...extra
+		];
+	}
+	applyPanelClass(panelClass) {
+		const dialogRef = this.dialogRef;
+		if (!dialogRef) return;
+		const next = this.paneClasses(panelClass);
+		if (next.length === this.appliedPaneClasses.length && next.every((value, index) => value === this.appliedPaneClasses[index])) return;
+		this.removePaneClasses(this.appliedPaneClasses);
+		dialogRef.addPanelClass(next);
+		this.appliedPaneClasses = next;
+	}
+	removePaneClasses(classes) {
+		const dialogRef = this.dialogRef;
+		if (!dialogRef) return;
+		dialogRef.removePanelClass(classes);
+	}
+	applyDirection() {
+		const dir = this.host.direction();
+		this.state.panelDir.set(dir);
+		this.dialogRef?.overlayRef.setDirection(dir);
+	}
+	releaseInputSubscriptions() {
+		this.backdropSubscription?.unsubscribe();
+		this.backdropSubscription = void 0;
+		this.keydownSubscription?.unsubscribe();
+		this.keydownSubscription = void 0;
+	}
+	releaseClosedSubscription() {
+		this.closedSubscription?.unsubscribe();
+		this.closedSubscription = void 0;
+	}
+	releaseSubscriptions() {
+		this.releaseInputSubscriptions();
+		this.releaseClosedSubscription();
+	}
+};
+let nextDialogId = 0;
+var RaqmDialogRegistration = class {
+	renderer;
+	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 = ++nextDialogId;
+	dialogRootId = `raqm-dialog-${this.rootId}`;
+	titleRootId = `raqm-dialog-title-${this.rootId}`;
+	descriptionRootId = `raqm-dialog-description-${this.rootId}`;
+	constructor(renderer, host) {
+		this.renderer = renderer;
+		this.host = host;
+	}
+	get hasTitle() {
+		return this.titleElement() !== null;
+	}
+	registerTrigger(ref) {
+		const current = this.triggerRef();
+		if (current !== null && current !== ref) {
+			if (isDevMode()) console.error("[raqm-dialog] Only one `button[raqm-dialog-trigger]` is supported per <raqm-dialog>; 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-dialog] Only one `ng-template[raqm-dialog-content]` is supported per <raqm-dialog>; 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-dialog] Only one `[raqm-dialog-title]` is expected per <raqm-dialog>; the latest registration wins.");
+		if (!element.id) element.id = this.titleRootId;
+		this.titleElement.set(element);
+		this.syncContainerAria();
+	}
+	unregisterTitle(element) {
+		if (this.titleElement() === element) {
+			this.titleElement.set(null);
+			this.syncContainerAria();
+		}
+	}
+	registerDescription(element) {
+		if (isDevMode() && this.descriptionElement() !== null && this.descriptionElement() !== element) console.error("[raqm-dialog] Only one `[raqm-dialog-description]` is expected per <raqm-dialog>; the latest registration wins.");
+		if (!element.id) element.id = this.descriptionRootId;
+		this.descriptionElement.set(element);
+		this.syncContainerAria();
+	}
+	unregisterDescription(element) {
+		if (this.descriptionElement() === element) {
+			this.descriptionElement.set(null);
+			this.syncContainerAria();
+		}
+	}
+	syncContainerAria() {
+		const pane = this.host.pane();
+		if (!pane) return;
+		const container = pane.querySelector(`.${CONTAINER_CLASS}`);
+		if (!container) return;
+		const title = this.titleElement();
+		const label = this.host.label();
+		if (title) {
+			this.renderer.setAttribute(container, "aria-labelledby", title.id);
+			this.renderer.removeAttribute(container, "aria-label");
+		} else {
+			this.renderer.removeAttribute(container, "aria-labelledby");
+			if (label) this.renderer.setAttribute(container, "aria-label", label);
+			else this.renderer.removeAttribute(container, "aria-label");
+		}
+		const description = this.descriptionElement();
+		if (description) this.renderer.setAttribute(container, "aria-describedby", description.id);
+		else this.renderer.removeAttribute(container, "aria-describedby");
+	}
+};
+var RaqmDialogState = class {
+	attached = signal(false, ...ngDevMode ? [{ debugName: "attached" }] : /* istanbul ignore next */ []);
+	dialogId = signal(null, ...ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []);
+	entering = signal(false, ...ngDevMode ? [{ debugName: "entering" }] : /* istanbul ignore next */ []);
+	closing = signal(false, ...ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []);
+	panelDir = signal("ltr", ...ngDevMode ? [{ debugName: "panelDir" }] : /* istanbul ignore next */ []);
+	triggerlessOrigin = null;
+	currentOpen = false;
+	openGeneration = 0;
+	destroyed = false;
+	suppressFocusRestore = false;
+	lastCloseOrigin;
+};
+var RaqmDialogBaseComponent = class RaqmDialogBaseComponent {
+	policy = inject(RAQM_DIALOG_POLICY, {
+		optional: true,
+		self: true
+	});
+	host = inject(ElementRef);
+	dialogService = inject(Dialog);
+	directionality = inject(Directionality, { optional: true });
+	renderer = inject(Renderer2);
+	focusMonitor = inject(FocusMonitor);
+	checker = inject(InteractivityChecker);
+	injector = inject(Injector);
+	scrollLock = inject(RAQM_DIALOG_SCROLL_LOCK);
+	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
+	});
+	dir = input(void 0, {
+		...ngDevMode ? { debugName: "dir" } : /* istanbul ignore next */ {},
+		transform: toDir
+	});
+	panelClass = input(void 0, ...ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []);
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	state = new RaqmDialogState();
+	registration = new RaqmDialogRegistration(this.renderer, {
+		label: () => this.label(),
+		pane: () => this.overlay.element
+	});
+	canOpen = computed(() => (this.registration.triggerRef() !== null || this.policy?.allowWithoutTrigger === true) && 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 */ []);
+	dialogId = this.state.dialogId;
+	entering = this.state.entering;
+	closing = this.state.closing;
+	panelDir = this.state.panelDir;
+	contentTemplate = this.registration.contentTemplate;
+	overlay = new RaqmDialogOverlay(this.dialogService, this.scrollLock, this.injector, this.state, this.policy, {
+		root: this.host.nativeElement,
+		dialogRootId: this.registration.dialogRootId,
+		trigger: () => this.registration.triggerRef(),
+		contentTemplate: () => this.registration.contentTemplate(),
+		panelTemplate: () => this.panelTemplate(),
+		panelClass: () => this.panelClass(),
+		openValue: () => this.openValue(),
+		setOpenValue: (value) => this.openValue.set(value),
+		direction: () => this.readResolvedDir(),
+		syncContainerAria: () => this.registration.syncContainerAria(),
+		focusInitial: () => this.focus.focusInitial(),
+		validateAccessibleName: () => this.focus.validateAccessibleName(),
+		maybeRestoreOriginFocus: () => this.focus.maybeRestoreOriginFocus()
+	});
+	focus = new RaqmDialogFocus(this.dialogService, this.focusMonitor, this.checker, this.state, {
+		pane: () => this.overlay.element,
+		trigger: () => this.registration.triggerRef(),
+		hasTitle: () => this.registration.hasTitle,
+		label: () => this.label(),
+		touchOpening: () => this.policy?.touchOpening()
+	});
+	constructor() {
+		connectDialogEffects({
+			openValue: () => this.openValue(),
+			disabled: () => this.disabled(),
+			canOpen: () => this.canOpen(),
+			panelClass: () => this.panelClass(),
+			label: () => this.label(),
+			dir: () => this.dir(),
+			closeButtonVisible: () => this.closeButtonVisible(),
+			closeLabelText: () => this.closeLabelText(),
+			syncOpen: (next) => this.overlay.syncOpen(next),
+			applyPanelClass: (panelClass) => this.overlay.applyPanelClass(panelClass),
+			syncContainerAria: () => this.registration.syncContainerAria(),
+			applyDirection: () => this.overlay.applyDirection()
+		});
+	}
+	ngOnDestroy() {
+		this.overlay.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() {
+		this.overlay.requestClose();
+	}
+	onCloseButtonClick() {
+		this.overlay.requestClose("mouse");
+	}
+	readResolvedDir() {
+		return resolveDialogDirection(this.dir(), this.host.nativeElement, this.directionality);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogBaseComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmDialogBaseComponent,
+		isStandalone: true,
+		selector: "raqm-dialog-base",
+		inputs: {
+			openValue: {
+				classPropertyName: "openValue",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				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" },
+		viewQueries: [{
+			propertyName: "panelTemplate",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			read: TemplateRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 4);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 4);border-radius:var(--raqm-radius-xl);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);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-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-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;top:calc(var(--raqm-spacing) * 2);inset-inline-end:calc(var(--raqm-spacing) * 2)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: RaqmButton,
+			selector: "button[raqm-button], a[raqm-button]",
+			inputs: [
+				"raqm-button",
+				"extra-small",
+				"small",
+				"large",
+				"icon",
+				"icon-extra-small",
+				"icon-small",
+				"icon-large",
+				"disabled",
+				"tabindex"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogBaseComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-dialog-base",
+			imports: [NgTemplateOutlet, RaqmButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 4);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 4);border-radius:var(--raqm-radius-xl);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);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-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-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;top:calc(var(--raqm-spacing) * 2);inset-inline-end:calc(var(--raqm-spacing) * 2)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-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
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				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 RaqmDialogComponent = class RaqmDialogComponent extends RaqmDialogBaseComponent {
+	showCloseButton = input(true, {
+		...ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeLabel = input(void 0, ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	closeButtonVisible = this.showCloseButton;
+	closeLabelText = this.closeLabel;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmDialogComponent,
+		isStandalone: true,
+		selector: "raqm-dialog",
+		inputs: {
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: RAQM_DIALOG,
+			useExisting: RaqmDialogComponent
+		}],
+		exportAs: ["raqmDialog"],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 4);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 4);border-radius:var(--raqm-radius-xl);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);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-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-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;top:calc(var(--raqm-spacing) * 2);inset-inline-end:calc(var(--raqm-spacing) * 2)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: RaqmButton,
+			selector: "button[raqm-button], a[raqm-button]",
+			inputs: [
+				"raqm-button",
+				"extra-small",
+				"small",
+				"large",
+				"icon",
+				"icon-extra-small",
+				"icon-small",
+				"icon-large",
+				"disabled",
+				"tabindex"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-dialog",
+			imports: [NgTemplateOutlet, RaqmButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			exportAs: "raqmDialog",
+			providers: [{
+				provide: RAQM_DIALOG,
+				useExisting: RaqmDialogComponent
+			}],
+			template: "<ng-content />\r\n\r\n<!-- The CDK container, not this wrapper, is the role=dialog element. -->\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-small]=\"policy?.small?.() ? '' : null\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n    <!-- showCloseButton=false hides only this control; Escape and backdrop dismissal still close. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 4);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 4);border-radius:var(--raqm-radius-xl);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);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-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-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;top:calc(var(--raqm-spacing) * 2);inset-inline-end:calc(var(--raqm-spacing) * 2)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n"]
+		}]
+	}],
+	propDecorators: {
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmDialogTriggerDirective = class RaqmDialogTriggerDirective {
+	host = inject(ElementRef);
+	dialog = inject(RAQM_DIALOG, { optional: true });
+	destroyRef = inject(DestroyRef);
+	open = computed(() => this.dialog?.open() ?? false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	dialogId = computed(() => this.dialog?.dialogId() ?? null, ...ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []);
+	ref = (() => {
+		const self = this;
+		return {
+			get element() {
+				return self.host.nativeElement;
+			},
+			get disabled() {
+				return self.host.nativeElement.disabled;
+			}
+		};
+	})();
+	constructor() {
+		const element = this.host.nativeElement;
+		if (!element.hasAttribute("type")) element.setAttribute("type", "button");
+		if (isDevMode() && this.dialog === null) console.error("[raqm-dialog-trigger] No parent <raqm-dialog> found; the trigger cannot open a dialog.");
+		this.destroyRef.onDestroy(() => this.dialog?.unregisterTrigger(this.ref));
+	}
+	ngOnInit() {
+		this.dialog?.registerTrigger(this.ref);
+	}
+	onClick() {
+		if (this.host.nativeElement.disabled) return;
+		this.dialog?.toggleFromTrigger(this.ref);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDialogTriggerDirective,
+		isStandalone: true,
+		selector: "button[raqm-dialog-trigger]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"attr.aria-haspopup": "\"dialog\"",
+				"attr.aria-expanded": "open() ? \"true\" : \"false\"",
+				"attr.aria-controls": "open() ? dialogId() : null"
+			},
+			classAttribute: "raqm-dialog-trigger"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-dialog-trigger]",
+			host: {
+				class: "raqm-dialog-trigger",
+				"[attr.aria-haspopup]": "\"dialog\"",
+				"[attr.aria-expanded]": "open() ? \"true\" : \"false\"",
+				"[attr.aria-controls]": "open() ? dialogId() : null",
+				"(click)": "onClick()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmDialogContentDirective = class RaqmDialogContentDirective {
+	template = inject(TemplateRef);
+	dialog = inject(RAQM_DIALOG, { optional: true });
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		if (isDevMode() && this.dialog === null) console.error("[raqm-dialog-content] No parent <raqm-dialog> found; the template is never rendered.");
+		this.destroyRef.onDestroy(() => this.dialog?.unregisterContent(this.template));
+	}
+	ngOnInit() {
+		this.dialog?.registerContent(this.template);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDialogContentDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-dialog-content]",
+		exportAs: ["raqmDialogContent"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[raqm-dialog-content]",
+			exportAs: "raqmDialogContent"
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmDialogCloseDirective = class RaqmDialogCloseDirective {
+	host = inject(ElementRef);
+	dialog = inject(RAQM_DIALOG, { optional: true });
+	constructor() {
+		const element = this.host.nativeElement;
+		if (!element.hasAttribute("type")) element.setAttribute("type", "button");
+		if (isDevMode() && this.dialog === null) console.error("[raqm-dialog-close] No parent <raqm-dialog> found; the control cannot close a dialog.");
+	}
+	onClick() {
+		this.dialog?.closeFromUser();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogCloseDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDialogCloseDirective,
+		isStandalone: true,
+		selector: "button[raqm-dialog-close]",
+		host: {
+			listeners: { "click": "onClick()" },
+			classAttribute: "raqm-dialog-close-control"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogCloseDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-dialog-close]",
+			host: {
+				class: "raqm-dialog-close-control",
+				"(click)": "onClick()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmDialogHeaderDirective = class RaqmDialogHeaderDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogHeaderDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDialogHeaderDirective,
+		isStandalone: true,
+		selector: "[raqm-dialog-header]",
+		host: { classAttribute: "raqm-dialog-header" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-dialog-header]",
+			host: { class: "raqm-dialog-header" }
+		}]
+	}]
+});
+var RaqmDialogFooterDirective = class RaqmDialogFooterDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogFooterDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDialogFooterDirective,
+		isStandalone: true,
+		selector: "[raqm-dialog-footer]",
+		host: { classAttribute: "raqm-dialog-footer" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-dialog-footer]",
+			host: { class: "raqm-dialog-footer" }
+		}]
+	}]
+});
+var RaqmDialogTitleDirective = class RaqmDialogTitleDirective {
+	host = inject(ElementRef);
+	dialog = inject(RAQM_DIALOG, { optional: true });
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		if (isDevMode() && this.dialog === null) console.error("[raqm-dialog-title] No parent <raqm-dialog> found; the title cannot be associated with a dialog.");
+		this.destroyRef.onDestroy(() => this.dialog?.unregisterTitle(this.host.nativeElement));
+	}
+	ngOnInit() {
+		this.dialog?.registerTitle(this.host.nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDialogTitleDirective,
+		isStandalone: true,
+		selector: "[raqm-dialog-title]",
+		host: { classAttribute: "raqm-dialog-title" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-dialog-title]",
+			host: { class: "raqm-dialog-title" }
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmDialogDescriptionDirective = class RaqmDialogDescriptionDirective {
+	host = inject(ElementRef);
+	dialog = inject(RAQM_DIALOG, { optional: true });
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		if (isDevMode() && this.dialog === null) console.error("[raqm-dialog-description] No parent <raqm-dialog> found; the description cannot be associated with a dialog.");
+		this.destroyRef.onDestroy(() => this.dialog?.unregisterDescription(this.host.nativeElement));
+	}
+	ngOnInit() {
+		this.dialog?.registerDescription(this.host.nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDialogDescriptionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDialogDescriptionDirective,
+		isStandalone: true,
+		selector: "[raqm-dialog-description]",
+		host: { classAttribute: "raqm-dialog-description" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDialogDescriptionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-dialog-description]",
+			host: { class: "raqm-dialog-description" }
+		}]
+	}],
+	ctorParameters: () => []
+});
+const RaqmDialog = [
+	RaqmDialogComponent,
+	RaqmDialogTriggerDirective,
+	RaqmDialogContentDirective,
+	RaqmDialogCloseDirective,
+	RaqmDialogHeaderDirective,
+	RaqmDialogFooterDirective,
+	RaqmDialogTitleDirective,
+	RaqmDialogDescriptionDirective
+];
+export { RAQM_DIALOG, RAQM_DIALOG_POLICY, RaqmDialog, RaqmDialogBaseComponent, RaqmDialogCloseDirective, RaqmDialogComponent, RaqmDialogContentDirective, RaqmDialogDescriptionDirective, RaqmDialogFooterDirective, RaqmDialogHeaderDirective, RaqmDialogTitleDirective, RaqmDialogTriggerDirective };
+
+//# sourceMappingURL=raqm-ui-dialog.mjs.map