@rivinia/modal 0.3.0 → 0.5.0

package/fesm2022/rivinia-modal-ui.mjs

@@ -0,0 +1,1001 @@
+import * as i0 from "@angular/core";
+import { Component, DOCUMENT, Directive, Injector, Service, computed, contentChild, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
+import { RIVINIA_MODAL_CONTEXT } from "@rivinia/modal";
+var RiviniaModalScrollLock = class RiviniaModalScrollLock {
+	_doc = inject(DOCUMENT, { optional: true });
+	_locks = 0;
+	_previousOverflow = null;
+	get active() {
+		return this._locks;
+	}
+	acquire() {
+		const doc = this.document;
+		if (!doc) return;
+		this._locks += 1;
+		if (this._locks > 1) return;
+		const body = doc.body;
+		this._previousOverflow = body.style.overflow || null;
+		body.style.overflow = "hidden";
+		doc.documentElement.style.setProperty("scrollbar-gutter", "stable");
+	}
+	release() {
+		const doc = this.document;
+		if (!doc || this._locks === 0) {
+			this._locks = 0;
+			return;
+		}
+		this._locks -= 1;
+		if (this._locks > 0) return;
+		const body = doc.body;
+		if (this._previousOverflow === null) body.style.removeProperty("overflow");
+		else body.style.overflow = this._previousOverflow;
+		this._previousOverflow = null;
+		doc.documentElement.style.removeProperty("scrollbar-gutter");
+	}
+	get document() {
+		try {
+			return this._doc ?? (typeof document === "undefined" ? null : document);
+		} catch {
+			return null;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaModalScrollLock,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaModalScrollLock
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RiviniaModalScrollLock,
+	decorators: [{ type: Service }]
+});
+const EXIT_FALLBACK_MS = 200;
+var RvModalHeader = class RvModalHeader {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RvModalHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RvModalHeader,
+		isStandalone: true,
+		selector: "[rvModalHeader]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RvModalHeader,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rvModalHeader]",
+			standalone: true
+		}]
+	}]
+});
+var RvModalFooter = class RvModalFooter {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RvModalFooter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RvModalFooter,
+		isStandalone: true,
+		selector: "[rvModalFooter]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RvModalFooter,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rvModalFooter]",
+			standalone: true
+		}]
+	}]
+});
+var RiviniaModalDialog = class RiviniaModalDialog {
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	position = input("center", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	animation = input("scale", ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
+	closeOnEscape = input(true, ...ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []);
+	backdrop = input("close", ...ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []);
+	showCloseButton = input(true, ...ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []);
+	managed = input(false, ...ngDevMode ? [{ debugName: "managed" }] : /* istanbul ignore next */ []);
+	closing = input(false, ...ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []);
+	confirmed = output();
+	dismissed = output();
+	cancelled = output();
+	dismissRequested = output();
+	exitDone = output();
+	dialog = viewChild("dialog", ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
+	headerSlot = contentChild(RvModalHeader, ...ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []);
+	footerSlot = contentChild(RvModalFooter, ...ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []);
+	doc = inject(DOCUMENT, { optional: true });
+	scrollLock = inject(RiviniaModalScrollLock, { optional: true });
+	titleId = `rv-modal-${++dialogSeq}`;
+	descriptionId = `rv-modal-desc-${dialogSeq}`;
+	phase = signal("closed", ...ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []);
+	invoker = { current: null };
+	exitTimer = null;
+	state = computed(() => this.phase(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	hasCustomHeader = computed(() => this.headerSlot() !== void 0, ...ngDevMode ? [{ debugName: "hasCustomHeader" }] : /* istanbul ignore next */ []);
+	hasCustomFooter = computed(() => this.footerSlot() !== void 0, ...ngDevMode ? [{ debugName: "hasCustomFooter" }] : /* istanbul ignore next */ []);
+	computedLabel = computed(() => this.ariaLabel() || null, ...ngDevMode ? [{ debugName: "computedLabel" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (this.open()) this.show();
+			else if (this.phase() === "open") this.hide();
+		});
+		effect(() => {
+			if (this.managed() && this.closing() && this.phase() === "open") this.playExit(() => this.exitDone.emit());
+		});
+	}
+	confirm(value) {
+		if (this.phase() !== "open") return false;
+		this.finish("confirmed", value);
+		return true;
+	}
+	close(value) {
+		return value === void 0 ? this.dismiss() : this.confirm(value);
+	}
+	dismiss(reason) {
+		if (this.phase() !== "open") return false;
+		this.finish("dismissed", void 0, reason);
+		return true;
+	}
+	cancel(reason) {
+		if (this.phase() !== "open") return false;
+		this.finish("cancelled", void 0, reason);
+		return true;
+	}
+	onCloseButton() {
+		if (this.managed()) {
+			if (this.phase() === "open") this.dismissRequested.emit("button");
+			return;
+		}
+		this.dismiss("close-button");
+	}
+	onCancel(event) {
+		if (!this.closeOnEscape()) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		if (this.managed()) {
+			if (this.phase() === "open") this.dismissRequested.emit("escape");
+			return;
+		}
+		this.dismiss("escape");
+	}
+	onBackdropClick(event) {
+		const el = this.dialog()?.nativeElement;
+		if (!el || event.target !== el) return;
+		if (this.backdrop() !== "close") return;
+		if (this.managed()) {
+			if (this.phase() === "open") this.dismissRequested.emit("backdrop");
+			return;
+		}
+		this.dismiss("backdrop");
+	}
+	onKeydown(event) {
+		if (event.key !== "Tab") return;
+		const el = this.dialog()?.nativeElement;
+		if (!el) return;
+		const items = focusables(el);
+		if (items.length === 0) {
+			event.preventDefault();
+			return;
+		}
+		const first = items[0];
+		const last = items[items.length - 1];
+		const active = (this.doc ?? document).activeElement;
+		if (event.shiftKey && (active === first || !el.contains(active))) {
+			event.preventDefault();
+			last.focus();
+		} else if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	get live() {
+		return typeof window !== "undefined" && !!this.doc;
+	}
+	show() {
+		if (!this.live) return;
+		const el = this.dialog()?.nativeElement;
+		if (!el || this.phase() !== "closed") return;
+		try {
+			this.invoker.current = this.doc?.activeElement ?? null;
+		} catch {
+			this.invoker.current = null;
+		}
+		this.scrollLock?.acquire();
+		this.phase.set("open");
+		if (!el.open) try {
+			el.showModal();
+		} catch {}
+		focusFirst(el, this.showCloseButton());
+	}
+	hide() {
+		if (this.phase() === "closed") return;
+		this.teardown(false);
+	}
+	finish(kind, value, reason) {
+		this.teardown(true);
+		if (kind === "confirmed") this.confirmed.emit(value);
+		else if (kind === "dismissed") this.dismissed.emit(reason);
+		else this.cancelled.emit(reason);
+		if (this.open()) this.open.set(false);
+	}
+	teardown(animate) {
+		if (!animate) {
+			if (this.exitTimer) {
+				clearTimeout(this.exitTimer);
+				this.exitTimer = null;
+			}
+			this.finalize(this.dialog()?.nativeElement ?? null);
+			return;
+		}
+		this.playExit(() => {});
+	}
+	playExit(done) {
+		if (this.phase() !== "open") {
+			done();
+			return;
+		}
+		if (this.exitTimer) {
+			clearTimeout(this.exitTimer);
+			this.exitTimer = null;
+		}
+		const el = this.dialog()?.nativeElement ?? null;
+		const animated = this.animation() !== "none" && this.prefersMotion() && !!el?.open;
+		this.phase.set(animated ? "closing" : "closed");
+		if (!animated) {
+			this.finalize(el);
+			done();
+			return;
+		}
+		this.exitTimer = setTimeout(() => {
+			this.finalize(el);
+			done();
+		}, this.exitDurationMs(el));
+	}
+	exitDurationMs(el) {
+		try {
+			const seconds = (el ? getComputedStyle(el).animationDuration : "").split(",").map((part) => parseFloat(part)).filter((n) => Number.isFinite(n));
+			if (seconds.length > 0) return Math.max(0, Math.max(...seconds) * 1e3) + 50;
+		} catch {}
+		return EXIT_FALLBACK_MS;
+	}
+	finalize(el) {
+		this.exitTimer = null;
+		try {
+			el?.close();
+		} catch {}
+		this.phase.set("closed");
+		this.scrollLock?.release();
+		const invoker = this.invoker.current;
+		this.invoker.current = null;
+		try {
+			invoker?.focus?.();
+		} catch {}
+	}
+	prefersMotion() {
+		try {
+			return typeof window !== "undefined" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		} catch {
+			return true;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaModalDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RiviniaModalDialog,
+		isStandalone: true,
+		selector: "rv-modal-dialog",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			animation: {
+				classPropertyName: "animation",
+				publicName: "animation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnEscape: {
+				classPropertyName: "closeOnEscape",
+				publicName: "closeOnEscape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			backdrop: {
+				classPropertyName: "backdrop",
+				publicName: "backdrop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			managed: {
+				classPropertyName: "managed",
+				publicName: "managed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closing: {
+				classPropertyName: "closing",
+				publicName: "closing",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			open: "openChange",
+			confirmed: "confirmed",
+			dismissed: "dismissed",
+			cancelled: "cancelled",
+			dismissRequested: "dismissRequested",
+			exitDone: "exitDone"
+		},
+		queries: [{
+			propertyName: "headerSlot",
+			first: true,
+			predicate: RvModalHeader,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "footerSlot",
+			first: true,
+			predicate: RvModalFooter,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "dialog",
+			first: true,
+			predicate: ["dialog"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <dialog
+      #dialog
+      tabindex="-1"
+      class="rv-modal"
+      [attr.data-size]="size()"
+      [attr.data-position]="position()"
+      [attr.data-animation]="animation()"
+      [attr.data-state]="state()"
+      [attr.aria-label]="computedLabel()"
+      [attr.aria-labelledby]="title() && !ariaLabel() ? titleId : null"
+      [attr.aria-describedby]="description() ? descriptionId : null"
+      (cancel)="onCancel($event)"
+      (click)="onBackdropClick($event)"
+      (keydown)="onKeydown($event)"
+    >
+      @if (hasCustomHeader()) {
+        <div class="rv-modal-header rv-modal-header-custom">
+          <ng-content select="[rv-modal-header]"></ng-content>
+        </div>
+      } @else if (title() || showCloseButton()) {
+        <div class="rv-modal-header">
+          <div class="rv-modal-heading">
+            @if (title()) {
+              <h2 class="rv-modal-title" [id]="titleId">{{ title() }}</h2>
+            }
+            @if (description()) {
+              <p class="rv-modal-description" [id]="descriptionId">{{ description() }}</p>
+            }
+          </div>
+          @if (showCloseButton()) {
+            <button
+              type="button"
+              class="rv-modal-close"
+              (click)="onCloseButton()"
+              aria-label="Close dialog"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          }
+        </div>
+      }
+      <div class="rv-modal-body">
+        <ng-content></ng-content>
+      </div>
+      @if (hasCustomFooter()) {
+        <div class="rv-modal-footer">
+          <ng-content select="[rv-modal-footer]"></ng-content>
+        </div>
+      }
+    </dialog>
+  `,
+		isInline: true,
+		styles: [".rv-modal{color-scheme:light dark;--rv-modal-bg: #ffffff;--rv-modal-fg: #111111;--rv-modal-muted: #555555;--rv-modal-border: #e0e0e0;--rv-modal-radius: 12px;--rv-modal-shadow: 0 24px 64px rgba(0, 0, 0, .28);--rv-modal-backdrop: rgba(0, 0, 0, .5);--rv-modal-pad: 20px;--rv-modal-gap: 12px;--rv-modal-width-sm: 24rem;--rv-modal-width-md: 32rem;--rv-modal-width-lg: 48rem;--rv-modal-width-xl: 64rem;--rv-modal-max-height: min(86dvh, 100%);--rv-modal-duration: .15s;--rv-modal-duration-in: var(--rv-modal-duration);--rv-modal-duration-out: .12s;--rv-modal-easing: ease-out;--rv-modal-easing-in: var(--rv-modal-easing);--rv-modal-easing-out: ease-in;--rv-modal-radius-sheet: 20px;--rv-modal-width-panel: 24rem;padding:0;border:1px solid var(--rv-modal-border);border-radius:var(--rv-modal-radius);background:var(--rv-modal-bg);color:var(--rv-modal-fg);box-shadow:var(--rv-modal-shadow);max-height:var(--rv-modal-max-height);width:var(--rv-modal-width-md);max-width:calc(100dvw - 2rem)}@media(prefers-color-scheme:dark){.rv-modal{--rv-modal-bg: #161616;--rv-modal-fg: #f2f2f2;--rv-modal-muted: #a8a8a8;--rv-modal-border: #333333;--rv-modal-shadow: 0 24px 64px rgba(0, 0, 0, .6)}}.rv-modal::backdrop{background:var(--rv-modal-backdrop)}.rv-modal[data-size=sm]{width:var(--rv-modal-width-sm)}.rv-modal[data-size=lg]{width:var(--rv-modal-width-lg)}.rv-modal[data-size=xl]{width:var(--rv-modal-width-xl)}.rv-modal[data-size=full]{width:calc(100dvw - 2rem)}.rv-modal[data-size=auto]{width:auto}.rv-modal[data-position=top]{margin-block-start:8dvh}.rv-modal[data-position=bottom]{margin-block-start:auto;margin-block-end:8dvh}.rv-modal[data-position=top-start],.rv-modal[data-position=center-start]{margin-inline-start:1rem;margin-inline-end:auto}.rv-modal[data-position=top-end],.rv-modal[data-position=center-end]{margin-inline-start:auto;margin-inline-end:1rem}.rv-modal[data-position=bottom-start]{margin-block-start:auto;margin-inline-start:1rem}.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-inline-end:1rem}.rv-modal[data-position=fullscreen]{inset:0;width:100dvw;height:100dvh;max-width:none;max-height:none;border-radius:0}.rv-modal[data-position=side-start],.rv-modal[data-position=side-end]{height:100dvh;max-height:none;width:var(--rv-modal-width-panel);margin-block:0}.rv-modal[data-position=side-start]{margin-inline-start:0;margin-inline-end:auto;border-start-start-radius:0;border-end-start-radius:0}.rv-modal[data-position=side-end]{margin-inline-start:auto;margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}@media(max-width:640px){.rv-modal[data-position=center],.rv-modal[data-position=top],.rv-modal[data-position=bottom],.rv-modal[data-position=bottom-start],.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-block-end:0;margin-inline:0;width:100dvw;max-width:none;border-end-end-radius:0;border-end-start-radius:0;border-start-start-radius:var(--rv-modal-radius-sheet);border-start-end-radius:var(--rv-modal-radius-sheet)}.rv-modal[data-position=center][data-state=open],.rv-modal[data-position=top][data-state=open],.rv-modal[data-position=bottom][data-state=open],.rv-modal[data-position=bottom-start][data-state=open],.rv-modal[data-position=bottom-end][data-state=open]{animation-name:rv-modal-in-bottom}}.rv-modal[data-animation]:not([data-animation=none])[data-state=open]{animation:var(--rv-modal-animation-in, rv-modal-in) var(--rv-modal-duration-in) var(--rv-modal-easing-in)}.rv-modal[data-animation=scale][data-state=open]{--rv-modal-animation-in: rv-modal-in-scale}.rv-modal[data-animation=slide-top][data-state=open]{--rv-modal-animation-in: rv-modal-in-top}.rv-modal[data-animation=slide-bottom][data-state=open]{--rv-modal-animation-in: rv-modal-in-bottom}.rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-animation=slide-end][data-state=open],[dir=rtl] .rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-end}[dir=rtl] .rv-modal[data-animation=slide-end][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-state=closing]{animation:rv-modal-out var(--rv-modal-duration-out) var(--rv-modal-easing-out) forwards}@keyframes rv-modal-in{0%{opacity:0}}@keyframes rv-modal-in-scale{0%{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes rv-modal-in-top{0%{opacity:0;transform:translateY(-24px)}}@keyframes rv-modal-in-bottom{0%{opacity:0;transform:translateY(24px)}}@keyframes rv-modal-in-start{0%{opacity:0;transform:translate(-24px)}}@keyframes rv-modal-in-end{0%{opacity:0;transform:translate(24px)}}@keyframes rv-modal-out{to{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.rv-modal[data-animation]{animation:none}}.rv-modal-header{display:flex;align-items:flex-start;gap:var(--rv-modal-gap);padding:var(--rv-modal-pad) var(--rv-modal-pad) 0}.rv-modal-header-custom>:first-child{flex:1;min-width:0}.rv-modal-heading:empty{display:none}.rv-modal-title{margin:0;font-size:1.125rem;flex:1}.rv-modal-heading{flex:1;display:flex;flex-direction:column;gap:4px}.rv-modal-description{margin:0;font-size:.875rem;color:var(--rv-modal-muted)}.rv-modal-close{margin-inline-start:auto;flex:none;border:1px solid var(--rv-modal-border);border-radius:8px;background:transparent;color:inherit;font-size:1.25rem;line-height:1;padding:4px 10px;cursor:pointer}.rv-modal-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.rv-modal-body{padding:var(--rv-modal-pad);overflow:auto;max-height:inherit}.rv-modal-footer{display:flex;gap:var(--rv-modal-gap);justify-content:flex-end;padding:0 var(--rv-modal-pad) var(--rv-modal-pad)}.rv-modal-footer:empty{display:none}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RiviniaModalDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rv-modal-dialog",
+			standalone: true,
+			template: `
+    <dialog
+      #dialog
+      tabindex="-1"
+      class="rv-modal"
+      [attr.data-size]="size()"
+      [attr.data-position]="position()"
+      [attr.data-animation]="animation()"
+      [attr.data-state]="state()"
+      [attr.aria-label]="computedLabel()"
+      [attr.aria-labelledby]="title() && !ariaLabel() ? titleId : null"
+      [attr.aria-describedby]="description() ? descriptionId : null"
+      (cancel)="onCancel($event)"
+      (click)="onBackdropClick($event)"
+      (keydown)="onKeydown($event)"
+    >
+      @if (hasCustomHeader()) {
+        <div class="rv-modal-header rv-modal-header-custom">
+          <ng-content select="[rv-modal-header]"></ng-content>
+        </div>
+      } @else if (title() || showCloseButton()) {
+        <div class="rv-modal-header">
+          <div class="rv-modal-heading">
+            @if (title()) {
+              <h2 class="rv-modal-title" [id]="titleId">{{ title() }}</h2>
+            }
+            @if (description()) {
+              <p class="rv-modal-description" [id]="descriptionId">{{ description() }}</p>
+            }
+          </div>
+          @if (showCloseButton()) {
+            <button
+              type="button"
+              class="rv-modal-close"
+              (click)="onCloseButton()"
+              aria-label="Close dialog"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          }
+        </div>
+      }
+      <div class="rv-modal-body">
+        <ng-content></ng-content>
+      </div>
+      @if (hasCustomFooter()) {
+        <div class="rv-modal-footer">
+          <ng-content select="[rv-modal-footer]"></ng-content>
+        </div>
+      }
+    </dialog>
+  `,
+			styles: [".rv-modal{color-scheme:light dark;--rv-modal-bg: #ffffff;--rv-modal-fg: #111111;--rv-modal-muted: #555555;--rv-modal-border: #e0e0e0;--rv-modal-radius: 12px;--rv-modal-shadow: 0 24px 64px rgba(0, 0, 0, .28);--rv-modal-backdrop: rgba(0, 0, 0, .5);--rv-modal-pad: 20px;--rv-modal-gap: 12px;--rv-modal-width-sm: 24rem;--rv-modal-width-md: 32rem;--rv-modal-width-lg: 48rem;--rv-modal-width-xl: 64rem;--rv-modal-max-height: min(86dvh, 100%);--rv-modal-duration: .15s;--rv-modal-duration-in: var(--rv-modal-duration);--rv-modal-duration-out: .12s;--rv-modal-easing: ease-out;--rv-modal-easing-in: var(--rv-modal-easing);--rv-modal-easing-out: ease-in;--rv-modal-radius-sheet: 20px;--rv-modal-width-panel: 24rem;padding:0;border:1px solid var(--rv-modal-border);border-radius:var(--rv-modal-radius);background:var(--rv-modal-bg);color:var(--rv-modal-fg);box-shadow:var(--rv-modal-shadow);max-height:var(--rv-modal-max-height);width:var(--rv-modal-width-md);max-width:calc(100dvw - 2rem)}@media(prefers-color-scheme:dark){.rv-modal{--rv-modal-bg: #161616;--rv-modal-fg: #f2f2f2;--rv-modal-muted: #a8a8a8;--rv-modal-border: #333333;--rv-modal-shadow: 0 24px 64px rgba(0, 0, 0, .6)}}.rv-modal::backdrop{background:var(--rv-modal-backdrop)}.rv-modal[data-size=sm]{width:var(--rv-modal-width-sm)}.rv-modal[data-size=lg]{width:var(--rv-modal-width-lg)}.rv-modal[data-size=xl]{width:var(--rv-modal-width-xl)}.rv-modal[data-size=full]{width:calc(100dvw - 2rem)}.rv-modal[data-size=auto]{width:auto}.rv-modal[data-position=top]{margin-block-start:8dvh}.rv-modal[data-position=bottom]{margin-block-start:auto;margin-block-end:8dvh}.rv-modal[data-position=top-start],.rv-modal[data-position=center-start]{margin-inline-start:1rem;margin-inline-end:auto}.rv-modal[data-position=top-end],.rv-modal[data-position=center-end]{margin-inline-start:auto;margin-inline-end:1rem}.rv-modal[data-position=bottom-start]{margin-block-start:auto;margin-inline-start:1rem}.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-inline-end:1rem}.rv-modal[data-position=fullscreen]{inset:0;width:100dvw;height:100dvh;max-width:none;max-height:none;border-radius:0}.rv-modal[data-position=side-start],.rv-modal[data-position=side-end]{height:100dvh;max-height:none;width:var(--rv-modal-width-panel);margin-block:0}.rv-modal[data-position=side-start]{margin-inline-start:0;margin-inline-end:auto;border-start-start-radius:0;border-end-start-radius:0}.rv-modal[data-position=side-end]{margin-inline-start:auto;margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}@media(max-width:640px){.rv-modal[data-position=center],.rv-modal[data-position=top],.rv-modal[data-position=bottom],.rv-modal[data-position=bottom-start],.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-block-end:0;margin-inline:0;width:100dvw;max-width:none;border-end-end-radius:0;border-end-start-radius:0;border-start-start-radius:var(--rv-modal-radius-sheet);border-start-end-radius:var(--rv-modal-radius-sheet)}.rv-modal[data-position=center][data-state=open],.rv-modal[data-position=top][data-state=open],.rv-modal[data-position=bottom][data-state=open],.rv-modal[data-position=bottom-start][data-state=open],.rv-modal[data-position=bottom-end][data-state=open]{animation-name:rv-modal-in-bottom}}.rv-modal[data-animation]:not([data-animation=none])[data-state=open]{animation:var(--rv-modal-animation-in, rv-modal-in) var(--rv-modal-duration-in) var(--rv-modal-easing-in)}.rv-modal[data-animation=scale][data-state=open]{--rv-modal-animation-in: rv-modal-in-scale}.rv-modal[data-animation=slide-top][data-state=open]{--rv-modal-animation-in: rv-modal-in-top}.rv-modal[data-animation=slide-bottom][data-state=open]{--rv-modal-animation-in: rv-modal-in-bottom}.rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-animation=slide-end][data-state=open],[dir=rtl] .rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-end}[dir=rtl] .rv-modal[data-animation=slide-end][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-state=closing]{animation:rv-modal-out var(--rv-modal-duration-out) var(--rv-modal-easing-out) forwards}@keyframes rv-modal-in{0%{opacity:0}}@keyframes rv-modal-in-scale{0%{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes rv-modal-in-top{0%{opacity:0;transform:translateY(-24px)}}@keyframes rv-modal-in-bottom{0%{opacity:0;transform:translateY(24px)}}@keyframes rv-modal-in-start{0%{opacity:0;transform:translate(-24px)}}@keyframes rv-modal-in-end{0%{opacity:0;transform:translate(24px)}}@keyframes rv-modal-out{to{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.rv-modal[data-animation]{animation:none}}.rv-modal-header{display:flex;align-items:flex-start;gap:var(--rv-modal-gap);padding:var(--rv-modal-pad) var(--rv-modal-pad) 0}.rv-modal-header-custom>:first-child{flex:1;min-width:0}.rv-modal-heading:empty{display:none}.rv-modal-title{margin:0;font-size:1.125rem;flex:1}.rv-modal-heading{flex:1;display:flex;flex-direction:column;gap:4px}.rv-modal-description{margin:0;font-size:.875rem;color:var(--rv-modal-muted)}.rv-modal-close{margin-inline-start:auto;flex:none;border:1px solid var(--rv-modal-border);border-radius:8px;background:transparent;color:inherit;font-size:1.25rem;line-height:1;padding:4px 10px;cursor:pointer}.rv-modal-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.rv-modal-body{padding:var(--rv-modal-pad);overflow:auto;max-height:inherit}.rv-modal-footer{display:flex;gap:var(--rv-modal-gap);justify-content:flex-end;padding:0 var(--rv-modal-pad) var(--rv-modal-pad)}.rv-modal-footer:empty{display:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		animation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animation",
+				required: false
+			}]
+		}],
+		closeOnEscape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnEscape",
+				required: false
+			}]
+		}],
+		backdrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backdrop",
+				required: false
+			}]
+		}],
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		managed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "managed",
+				required: false
+			}]
+		}],
+		closing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closing",
+				required: false
+			}]
+		}],
+		confirmed: [{
+			type: i0.Output,
+			args: ["confirmed"]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}],
+		cancelled: [{
+			type: i0.Output,
+			args: ["cancelled"]
+		}],
+		dismissRequested: [{
+			type: i0.Output,
+			args: ["dismissRequested"]
+		}],
+		exitDone: [{
+			type: i0.Output,
+			args: ["exitDone"]
+		}],
+		dialog: [{
+			type: i0.ViewChild,
+			args: ["dialog", { isSignal: true }]
+		}],
+		headerSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RvModalHeader), { isSignal: true }]
+		}],
+		footerSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RvModalFooter), { isSignal: true }]
+		}]
+	}
+});
+let dialogSeq = 0;
+function focusables(root) {
+	return Array.from(root.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"));
+}
+function focusFirst(dialog, closeVisible) {
+	try {
+		const auto = dialog.querySelector("[autofocus]");
+		if (auto) {
+			auto.focus({ preventScroll: true });
+			return;
+		}
+		if (!closeVisible) {
+			const title = dialog.querySelector(".rv-modal-title");
+			if (title) {
+				title.setAttribute("tabindex", "-1");
+				title.focus({ preventScroll: true });
+				return;
+			}
+		}
+		dialog.focus({ preventScroll: true });
+	} catch {}
+}
+var RiviniaModalHost = class RiviniaModalHost {
+	modal = input.required(...ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	showCloseButton = input(true, ...ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []);
+	titleOf = input(...ngDevMode ? [void 0, { debugName: "titleOf" }] : /* istanbul ignore next */ []);
+	visible = computed(() => this.modal().visible(), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	titleOfInstance(instance) {
+		try {
+			const custom = this.titleOf()?.(instance);
+			if (custom !== void 0) return custom;
+		} catch {}
+		const meta = instance.metadata?.["title"];
+		if (typeof meta === "string" && meta.length > 0) return meta;
+		return instance.ref ?? "";
+	}
+	templateContext(instance) {
+		return {
+			$implicit: instance.data,
+			modal: this.modalContext(instance)
+		};
+	}
+	contextInjector(instance) {
+		const modal = this.modal();
+		return Injector.create({ providers: [{
+			provide: RIVINIA_MODAL_CONTEXT,
+			useValue: {
+				id: instance.id,
+				data: instance.data,
+				parentId: instance.parentId,
+				close: (result) => modal.close(instance.id, result),
+				dismiss: (reason) => modal.dismiss(instance.id, reason)
+			}
+		}] });
+	}
+	async onIntent(id, origin) {
+		try {
+			await this.modal().requestDismiss(id, origin);
+		} catch {}
+	}
+	onExitDone(id) {
+		this.modal().confirmClosed(id);
+	}
+	modalContext(instance) {
+		const modal = this.modal();
+		const id = instance.id;
+		return {
+			id,
+			data: instance.data,
+			parentId: instance.parentId,
+			close: (result) => modal.close(id, result),
+			dismiss: (reason) => modal.dismiss(id, reason)
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RiviniaModalHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RiviniaModalHost,
+		isStandalone: true,
+		selector: "rv-modal-host",
+		inputs: {
+			modal: {
+				classPropertyName: "modal",
+				publicName: "modal",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			titleOf: {
+				classPropertyName: "titleOf",
+				publicName: "titleOf",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @for (instance of visible(); track instance.id) {
+      <rv-modal-dialog
+        [open]="true"
+        [managed]="true"
+        [closing]="instance.status === 'closing'"
+        [title]="titleOfInstance(instance)"
+        [size]="size()"
+        [showCloseButton]="showCloseButton()"
+        [closeOnEscape]="instance.dismiss.closeOnEscape ?? true"
+        [backdrop]="instance.dismiss.backdrop ?? 'close'"
+        (dismissRequested)="onIntent(instance.id, $event)"
+        (exitDone)="onExitDone(instance.id)"
+      >
+        @if (instance.content.kind === 'template') {
+          <ng-container
+            *ngTemplateOutlet="instance.content.template; context: templateContext(instance)"
+          ></ng-container>
+        } @else {
+          <ng-container
+            *ngComponentOutlet="
+              instance.content.component;
+              inputs: instance.content.inputs;
+              injector: contextInjector(instance)
+            "
+          ></ng-container>
+        }
+      </rv-modal-dialog>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: RiviniaModalDialog,
+				selector: "rv-modal-dialog",
+				inputs: [
+					"open",
+					"title",
+					"description",
+					"ariaLabel",
+					"size",
+					"position",
+					"animation",
+					"closeOnEscape",
+					"backdrop",
+					"showCloseButton",
+					"managed",
+					"closing"
+				],
+				outputs: [
+					"openChange",
+					"confirmed",
+					"dismissed",
+					"cancelled",
+					"dismissRequested",
+					"exitDone"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RiviniaModalHost,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rv-modal-host",
+			standalone: true,
+			imports: [
+				RiviniaModalDialog,
+				NgComponentOutlet,
+				NgTemplateOutlet
+			],
+			template: `
+    @for (instance of visible(); track instance.id) {
+      <rv-modal-dialog
+        [open]="true"
+        [managed]="true"
+        [closing]="instance.status === 'closing'"
+        [title]="titleOfInstance(instance)"
+        [size]="size()"
+        [showCloseButton]="showCloseButton()"
+        [closeOnEscape]="instance.dismiss.closeOnEscape ?? true"
+        [backdrop]="instance.dismiss.backdrop ?? 'close'"
+        (dismissRequested)="onIntent(instance.id, $event)"
+        (exitDone)="onExitDone(instance.id)"
+      >
+        @if (instance.content.kind === 'template') {
+          <ng-container
+            *ngTemplateOutlet="instance.content.template; context: templateContext(instance)"
+          ></ng-container>
+        } @else {
+          <ng-container
+            *ngComponentOutlet="
+              instance.content.component;
+              inputs: instance.content.inputs;
+              injector: contextInjector(instance)
+            "
+          ></ng-container>
+        }
+      </rv-modal-dialog>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		modal: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "modal",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		titleOf: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "titleOf",
+				required: false
+			}]
+		}]
+	}
+});
+export { RiviniaModalDialog, RiviniaModalHost, RiviniaModalScrollLock, RvModalFooter, RvModalHeader };
+
+//# sourceMappingURL=rivinia-modal-ui.mjs.map