import { n as e } from "../../utils-C_mWfcFX.js";
//#region src/overlays/alert-dialog/index.ts
function t(e) {
	let t = [
		"a[href]",
		"button:not([disabled])",
		"input:not([disabled])",
		"select:not([disabled])",
		"textarea:not([disabled])",
		"[tabindex]:not([tabindex=\"-1\"])"
	].join(", ");
	return Array.from(e.querySelectorAll(t));
}
var n = class n {
	overlayEl = null;
	dialogEl = null;
	confirmBtn = null;
	cancelBtn = null;
	confirmInput = null;
	config;
	isLoading = !1;
	titleId;
	descId;
	handleKeyDown;
	constructor(t) {
		this.config = t, this.titleId = e("cmm-alert-title"), this.descId = e("cmm-alert-desc"), this.handleKeyDown = (e) => {
			this.onKeyDown(e);
		};
	}
	static open(e) {
		let t = new n(e);
		return t.show(), t;
	}
	close() {
		if (document.removeEventListener("keydown", this.handleKeyDown), this.overlayEl) {
			this.overlayEl.classList.remove("cmm-alert-dialog--open");
			let e = this.overlayEl;
			setTimeout(() => {
				e.remove();
			}, 200), this.overlayEl = null, this.dialogEl = null, this.confirmBtn = null, this.cancelBtn = null, this.confirmInput = null;
		}
	}
	show() {
		let t = this.config.variant ?? "info", n = document.createElement("div");
		n.className = `cmm-alert-dialog cmm-alert-dialog--${t}`, this.overlayEl = n;
		let r = document.createElement("div");
		r.className = "cmm-alert-dialog__dialog", r.setAttribute("role", "alertdialog"), r.setAttribute("aria-modal", "true"), r.setAttribute("aria-labelledby", this.titleId), r.setAttribute("aria-describedby", this.descId), r.setAttribute("tabindex", "-1"), this.dialogEl = r;
		let i = document.createElement("div");
		i.className = "cmm-alert-dialog__header";
		let a = document.createElement("h2");
		a.className = "cmm-alert-dialog__title", a.id = this.titleId, a.textContent = this.config.title, i.appendChild(a);
		let o = document.createElement("p");
		if (o.className = "cmm-alert-dialog__description", o.id = this.descId, o.textContent = this.config.description, i.appendChild(o), r.appendChild(i), t === "destructive" && this.config.confirmText) {
			let t = document.createElement("div");
			t.className = "cmm-alert-dialog__confirm-group";
			let n = document.createElement("label");
			n.className = "cmm-alert-dialog__confirm-label";
			let i = e("cmm-alert-confirm-input");
			n.setAttribute("for", i), n.textContent = `Type "${this.config.confirmText}" to confirm`, t.appendChild(n);
			let a = document.createElement("input");
			a.className = "cmm-alert-dialog__confirm-input", a.id = i, a.type = "text", a.autocomplete = "off", a.spellcheck = !1, a.setAttribute("aria-required", "true"), a.addEventListener("input", () => {
				this.updateConfirmButtonState();
			}), t.appendChild(a), this.confirmInput = a, r.appendChild(t);
		}
		let s = document.createElement("div");
		s.className = "cmm-alert-dialog__footer";
		let c = document.createElement("button");
		c.className = "cmm-alert-dialog__btn cmm-alert-dialog__btn--cancel", c.type = "button", c.textContent = this.config.cancelLabel ?? "Cancel", c.addEventListener("click", () => {
			this.handleCancel();
		}), s.appendChild(c), this.cancelBtn = c;
		let l = document.createElement("button");
		l.className = "cmm-alert-dialog__btn cmm-alert-dialog__btn--confirm", l.type = "button", l.textContent = this.config.confirmLabel ?? "Confirm", l.addEventListener("click", () => {
			this.handleConfirm();
		}), s.appendChild(l), this.confirmBtn = l, r.appendChild(s), n.appendChild(r), document.body.appendChild(n), this.updateConfirmButtonState(), requestAnimationFrame(() => {
			n.classList.add("cmm-alert-dialog--open");
		}), document.addEventListener("keydown", this.handleKeyDown), this.confirmInput ? this.confirmInput.focus() : c.focus();
	}
	isConfirmTextValid() {
		return this.config.variant !== "destructive" || !this.config.confirmText || !this.confirmInput ? !0 : this.confirmInput.value === this.config.confirmText;
	}
	updateConfirmButtonState() {
		this.confirmBtn && (this.config.variant === "destructive" && this.config.confirmText ? this.confirmBtn.disabled = !this.isConfirmTextValid() || this.isLoading : this.confirmBtn.disabled = this.isLoading);
	}
	setLoading(e) {
		if (this.isLoading = e, this.confirmBtn) if (this.confirmBtn.disabled = e, e) {
			let e = document.createElement("span");
			e.className = "cmm-alert-dialog__spinner", this.confirmBtn.prepend(e);
		} else {
			let e = this.confirmBtn.querySelector(".cmm-alert-dialog__spinner");
			e && e.remove();
		}
		this.cancelBtn && (this.cancelBtn.disabled = e), this.confirmInput && (this.confirmInput.disabled = e);
	}
	async handleConfirm() {
		if (this.isLoading || !this.isConfirmTextValid()) return;
		if (this.config.onConfirm === void 0) {
			this.close();
			return;
		}
		let e = this.config.onConfirm();
		if (e !== void 0 && typeof e.then == "function") {
			this.setLoading(!0);
			try {
				await e;
			} finally {
				this.setLoading(!1);
			}
		}
		this.close();
	}
	handleCancel() {
		this.isLoading || (this.config.onCancel?.(), this.close());
	}
	onKeyDown(e) {
		if (e.key === "Escape") {
			e.preventDefault();
			return;
		}
		if (e.key === "Tab" && this.dialogEl) {
			let n = t(this.dialogEl);
			if (n.length === 0) {
				e.preventDefault();
				return;
			}
			let r = n[0], i = n[n.length - 1];
			if (r === void 0 || i === void 0) {
				e.preventDefault();
				return;
			}
			e.shiftKey ? document.activeElement === r && (e.preventDefault(), i.focus()) : document.activeElement === i && (e.preventDefault(), r.focus());
		}
	}
};
//#endregion
export { n as AlertDialog };

//# sourceMappingURL=index.js.map