import { a as e } from "../../sanitize-uWpY18N9.js";
import { n as t } from "../../utils-CSEWuKHo.js";
import { n } from "../../a11y-ZYZ3T617.js";
//#region src/components/modal/index.ts
var r = class r {
	overlayEl = null;
	dialogEl = null;
	config;
	titleId;
	isLoading = !1;
	focusTrap = null;
	handleKeyDown;
	constructor(e) {
		this.config = e, this.titleId = t("cmm-modal-title"), this.handleKeyDown = (e) => {
			this.onKeyDown(e);
		};
	}
	static open(e) {
		let t = new r(e);
		return t.show(), t;
	}
	close() {
		if (document.removeEventListener("keydown", this.handleKeyDown), this.focusTrap?.deactivate(), this.focusTrap = null, this.overlayEl) {
			this.overlayEl.classList.remove("cmm-modal--open"), this.overlayEl.setAttribute("data-state", "closed"), this.dialogEl?.setAttribute("data-state", "closed");
			let e = this.overlayEl;
			setTimeout(() => {
				e.remove();
			}, 200), this.overlayEl = null, this.dialogEl = null;
		}
		this.config.onCancel?.();
	}
	setBody(t) {
		if (!this.dialogEl) return;
		let n = this.dialogEl.querySelector(".cmm-modal__body");
		n && (typeof t == "string" ? e(n, t) : (n.replaceChildren(), n.appendChild(t)));
	}
	setLoading(e) {
		this.isLoading = e, this.dialogEl && this.dialogEl.querySelectorAll(".cmm-modal__footer button").forEach((t) => {
			t.disabled = e;
		});
	}
	show() {
		let t = document.createElement("div");
		t.className = "cmm-modal", t.setAttribute("data-slot", "modal"), t.setAttribute("data-state", "closed");
		let r = this.config.size ?? "md";
		t.classList.add(`cmm-modal--${r}`), this.overlayEl = t, this.config.closeOnBackdrop !== !1 && t.addEventListener("click", (e) => {
			e.target === t && this.close();
		});
		let i = document.createElement("div");
		i.className = "cmm-modal__dialog", i.setAttribute("data-slot", "modal-content"), i.setAttribute("data-state", "closed"), i.setAttribute("role", "dialog"), i.setAttribute("aria-modal", "true"), i.setAttribute("aria-labelledby", this.titleId), this.dialogEl = i;
		let o = document.createElement("div");
		o.className = "cmm-modal__header", o.setAttribute("data-slot", "modal-header");
		let s = document.createElement("h2");
		if (s.className = "cmm-modal__title", s.setAttribute("data-slot", "modal-title"), s.id = this.titleId, s.textContent = this.config.title, o.appendChild(s), this.config.showCloseButton !== !1) {
			let e = document.createElement("button");
			e.type = "button", e.className = "cmm-modal__close", e.setAttribute("data-slot", "modal-close"), e.setAttribute("aria-label", "Close"), e.appendChild(a());
			let t = document.createElement("span");
			t.className = "cmm-sr-only", t.textContent = "Close", e.appendChild(t), e.addEventListener("click", () => {
				this.close();
			}), o.appendChild(e);
		}
		i.appendChild(o);
		let c = document.createElement("div");
		c.className = "cmm-modal__body", c.setAttribute("data-slot", "modal-body"), this.config.body !== void 0 && (typeof this.config.body == "string" ? e(c, this.config.body) : c.appendChild(this.config.body)), i.appendChild(c);
		let l = document.createElement("div");
		if (l.className = "cmm-modal__footer", l.setAttribute("data-slot", "modal-footer"), (this.config.variant ?? "confirm") === "alert") {
			let e = document.createElement("button");
			e.className = "cmm-modal__btn cmm-modal__btn--primary", e.textContent = this.config.confirmLabel ?? "OK", e.addEventListener("click", () => {
				this.close();
			}), l.appendChild(e);
		} else {
			let e = document.createElement("button");
			e.className = "cmm-modal__btn cmm-modal__btn--secondary", e.textContent = this.config.cancelLabel ?? "Cancel", e.addEventListener("click", () => {
				this.close();
			}), l.appendChild(e);
			let t = document.createElement("button");
			t.className = this.config.destructive === !0 ? "cmm-modal__btn cmm-modal__btn--destructive" : "cmm-modal__btn cmm-modal__btn--primary", t.textContent = this.config.confirmLabel ?? "Confirm", t.addEventListener("click", () => {
				this.handleConfirm();
			}), l.appendChild(t);
		}
		i.appendChild(l), t.appendChild(i), document.body.appendChild(t), requestAnimationFrame(() => {
			t.classList.add("cmm-modal--open"), t.setAttribute("data-state", "open"), i.setAttribute("data-state", "open");
		}), this.config.closeOnEscape !== !1 && document.addEventListener("keydown", this.handleKeyDown), i.setAttribute("tabindex", "-1"), this.focusTrap = n(i), this.focusTrap.activate();
	}
	async handleConfirm() {
		if (this.isLoading) return;
		if (this.config.onConfirm === void 0) {
			this.close();
			return;
		}
		let e = this.config.onConfirm();
		if (e !== void 0) {
			this.setLoading(!0);
			try {
				await e;
			} finally {
				this.setLoading(!1);
			}
		}
		this.close();
	}
	onKeyDown(e) {
		e.key === "Escape" && this.close();
	}
}, i = "http://www.w3.org/2000/svg";
function a() {
	let e = document.createElementNS(i, "svg");
	e.setAttribute("class", "cmm-modal__close-icon"), e.setAttribute("xmlns", i), e.setAttribute("viewBox", "0 0 24 24"), e.setAttribute("fill", "none"), e.setAttribute("stroke", "currentColor"), e.setAttribute("stroke-width", "2"), e.setAttribute("stroke-linecap", "round"), e.setAttribute("stroke-linejoin", "round"), e.setAttribute("aria-hidden", "true");
	let t = document.createElementNS(i, "path");
	t.setAttribute("d", "M18 6 6 18"), e.appendChild(t);
	let n = document.createElementNS(i, "path");
	return n.setAttribute("d", "m6 6 12 12"), e.appendChild(n), e;
}
//#endregion
export { r as Modal };

//# sourceMappingURL=index.js.map