import { i as e } from "../../sanitize-CDxuPfMB.js";
import { n as t, t as n } from "../../utils-C_mWfcFX.js";
//#region src/navigation/dropdown-menu/index.ts
function r(e) {
	return Array.from(e.querySelectorAll(".cmm-dropdown-menu__item:not(.cmm-dropdown-menu__item--disabled)"));
}
var i = class {
	trigger;
	items;
	placement;
	className;
	onOpenCallback;
	onCloseCallback;
	menuId;
	menuEl = null;
	subMenuEl = null;
	opened = !1;
	destroyed = !1;
	activeIndex = -1;
	subMenuActiveIndex = -1;
	handleTriggerClick;
	handleDocumentClick;
	handleKeyDown;
	constructor(e) {
		n(e.container), this.trigger = e.trigger, this.items = [...e.items], this.placement = e.placement ?? "bottom-start", this.className = e.className, this.onOpenCallback = e.onOpen, this.onCloseCallback = e.onClose, this.menuId = t("cmm-dropdown-menu"), this.handleTriggerClick = () => {
			this.toggle();
		}, this.handleDocumentClick = (e) => {
			let t = e.target;
			t instanceof Node && this.menuEl && !this.menuEl.contains(t) && !this.trigger.contains(t) && this.subMenuEl?.contains(t) !== !0 && this.close();
		}, this.handleKeyDown = (e) => {
			this.opened && this.onKeyDown(e);
		}, this.trigger.setAttribute("aria-haspopup", "menu"), this.trigger.setAttribute("aria-expanded", "false"), this.trigger.addEventListener("click", this.handleTriggerClick);
	}
	isOpen() {
		return this.opened;
	}
	open() {
		this.destroyed || this.opened || (this.opened = !0, this.activeIndex = 0, this.trigger.setAttribute("aria-expanded", "true"), this.createMenuElement(), this.positionMenu(), setTimeout(() => {
			document.addEventListener("click", this.handleDocumentClick);
		}, 0), document.addEventListener("keydown", this.handleKeyDown), this.highlightActiveItem(), this.onOpenCallback?.());
	}
	close() {
		this.opened && (this.opened = !1, this.activeIndex = -1, this.trigger.setAttribute("aria-expanded", "false"), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.closeSubMenu(), this.menuEl &&= (this.menuEl.remove(), null), this.onCloseCallback?.());
	}
	toggle() {
		this.opened ? this.close() : this.open();
	}
	update(e) {
		this.items.length = 0, this.items.push(...e), this.opened && (this.close(), this.open());
	}
	destroy() {
		this.destroyed || (this.destroyed = !0, this.close(), this.trigger.removeEventListener("click", this.handleTriggerClick), this.trigger.removeAttribute("aria-haspopup"), this.trigger.removeAttribute("aria-expanded"));
	}
	closeSubMenu() {
		this.subMenuEl &&= (this.subMenuEl.remove(), null), this.subMenuActiveIndex = -1;
	}
	createMenuElement() {
		this.menuEl && this.menuEl.remove();
		let e = document.createElement("div");
		e.className = "cmm-dropdown-menu", e.id = this.menuId, e.setAttribute("role", "menu"), e.setAttribute("tabindex", "-1"), this.className && e.classList.add(this.className), this.renderItems(e, this.items), document.body.appendChild(e), this.menuEl = e;
	}
	renderItems(t, n) {
		for (let r of n) {
			if (this.isRadioGroup(r)) {
				this.renderRadioGroup(t, r);
				continue;
			}
			let n = r;
			if (n.type === "separator") {
				let e = document.createElement("div");
				e.className = "cmm-dropdown-menu__separator", e.setAttribute("role", "separator"), t.appendChild(e);
				continue;
			}
			let i = document.createElement("div");
			if (i.className = "cmm-dropdown-menu__item", i.setAttribute("role", "menuitem"), n.disabled === !0 && (i.classList.add("cmm-dropdown-menu__item--disabled"), i.setAttribute("aria-disabled", "true")), n.type === "checkbox") {
				let e = document.createElement("span");
				e.className = "cmm-dropdown-menu__check", e.setAttribute("aria-hidden", "true"), e.textContent = n.checked === !0 ? "✓" : "", i.appendChild(e), n.checked === !0 && i.classList.add("cmm-dropdown-menu__item--checked");
			}
			if (n.icon) {
				let t = document.createElement("span");
				t.className = "cmm-dropdown-menu__icon", t.setAttribute("aria-hidden", "true"), e(t, n.icon), i.appendChild(t);
			}
			if (n.label) {
				let e = document.createElement("span");
				e.className = "cmm-dropdown-menu__label", e.textContent = n.label, i.appendChild(e);
			}
			if (n.shortcut) {
				let e = document.createElement("span");
				e.className = "cmm-dropdown-menu__shortcut", e.textContent = n.shortcut, i.appendChild(e);
			}
			if (n.children && n.children.length > 0) {
				let e = document.createElement("span");
				e.className = "cmm-dropdown-menu__arrow", e.setAttribute("aria-hidden", "true"), e.textContent = "▸", i.appendChild(e), i.addEventListener("mouseenter", () => {
					n.children && this.openSubMenu(i, n.children);
				});
			} else i.addEventListener("mouseenter", () => {
				this.closeSubMenu();
			});
			n.disabled !== !0 && (!n.children || n.children.length === 0) && i.addEventListener("click", (e) => {
				e.stopPropagation(), n.type === "checkbox" && (n.checked = n.checked !== !0), n.onSelect && n.onSelect(), this.close();
			}), t.appendChild(i);
		}
	}
	renderRadioGroup(e, t) {
		let n = document.createElement("div");
		n.className = "cmm-dropdown-menu__radio-group", n.setAttribute("role", "group");
		for (let e of t.items) {
			let r = document.createElement("div");
			r.className = "cmm-dropdown-menu__item", r.setAttribute("role", "menuitemradio"), e.disabled === !0 && (r.classList.add("cmm-dropdown-menu__item--disabled"), r.setAttribute("aria-disabled", "true"));
			let i = t.value === e.value;
			r.setAttribute("aria-checked", i ? "true" : "false");
			let a = document.createElement("span");
			a.className = "cmm-dropdown-menu__check", a.setAttribute("aria-hidden", "true"), a.textContent = i ? "●" : "", r.appendChild(a), i && r.classList.add("cmm-dropdown-menu__item--checked");
			let o = document.createElement("span");
			o.className = "cmm-dropdown-menu__label", o.textContent = e.label, r.appendChild(o), e.disabled !== !0 && r.addEventListener("click", (n) => {
				n.stopPropagation(), t.value = e.value, t.onChange && t.onChange(e.value), this.close();
			}), n.appendChild(r);
		}
		e.appendChild(n);
	}
	openSubMenu(e, t) {
		this.closeSubMenu();
		let n = document.createElement("div");
		n.className = "cmm-dropdown-menu cmm-dropdown-menu--sub", n.setAttribute("role", "menu"), this.renderItems(n, t), document.body.appendChild(n), this.subMenuEl = n;
		let r = e.getBoundingClientRect(), i = n.getBoundingClientRect(), a = r.right + 2, o = r.top;
		a + i.width > window.innerWidth && (a = r.left - i.width - 2), o + i.height > window.innerHeight && (o = window.innerHeight - i.height - 4), n.style.left = `${String(Math.max(0, a))}px`, n.style.top = `${String(Math.max(0, o))}px`, this.subMenuActiveIndex = 0, this.highlightSubMenuActiveItem();
	}
	positionMenu() {
		if (!this.menuEl) return;
		let e = this.trigger.getBoundingClientRect(), t = this.menuEl.getBoundingClientRect(), n = window.innerWidth, r = window.innerHeight, i, a, o = this.placement.startsWith("top"), s = this.placement.endsWith("end");
		i = o ? e.top - t.height - 4 : e.bottom + 4, a = s ? e.right - t.width : e.left, !o && i + t.height > r ? i = e.top - t.height - 4 : o && i < 0 && (i = e.bottom + 4), a = Math.max(4, Math.min(a, n - t.width - 4)), i = Math.max(4, Math.min(i, r - t.height - 4)), this.menuEl.style.left = `${String(a)}px`, this.menuEl.style.top = `${String(i)}px`;
	}
	highlightActiveItem() {
		this.menuEl && r(this.menuEl).forEach((e, t) => {
			t === this.activeIndex ? e.classList.add("cmm-dropdown-menu__item--active") : e.classList.remove("cmm-dropdown-menu__item--active");
		});
	}
	highlightSubMenuActiveItem() {
		this.subMenuEl && r(this.subMenuEl).forEach((e, t) => {
			t === this.subMenuActiveIndex ? e.classList.add("cmm-dropdown-menu__item--active") : e.classList.remove("cmm-dropdown-menu__item--active");
		});
	}
	onKeyDown(e) {
		if (this.subMenuEl) {
			if (e.key === "ArrowDown") {
				e.preventDefault();
				let t = r(this.subMenuEl).length;
				t > 0 && (this.subMenuActiveIndex = Math.min(this.subMenuActiveIndex + 1, t - 1), this.highlightSubMenuActiveItem());
				return;
			}
			if (e.key === "ArrowUp") {
				e.preventDefault(), this.subMenuActiveIndex = Math.max(this.subMenuActiveIndex - 1, 0), this.highlightSubMenuActiveItem();
				return;
			}
			if (e.key === "ArrowLeft" || e.key === "Escape") {
				e.preventDefault(), this.closeSubMenu();
				return;
			}
			if (e.key === "Enter" || e.key === " ") {
				e.preventDefault();
				let t = r(this.subMenuEl)[this.subMenuActiveIndex];
				t && t.click();
				return;
			}
			return;
		}
		if (e.key === "Escape") {
			e.preventDefault(), this.close(), this.trigger.focus();
			return;
		}
		if (e.key === "ArrowDown") {
			if (e.preventDefault(), this.menuEl) {
				let e = r(this.menuEl).length;
				e > 0 && (this.activeIndex = Math.min(this.activeIndex + 1, e - 1), this.highlightActiveItem());
			}
			return;
		}
		if (e.key === "ArrowUp") {
			e.preventDefault(), this.activeIndex = Math.max(this.activeIndex - 1, 0), this.highlightActiveItem();
			return;
		}
		if (e.key === "Home") {
			e.preventDefault(), this.activeIndex = 0, this.highlightActiveItem();
			return;
		}
		if (e.key === "End") {
			if (e.preventDefault(), this.menuEl) {
				let e = r(this.menuEl).length;
				this.activeIndex = Math.max(0, e - 1), this.highlightActiveItem();
			}
			return;
		}
		if (e.key === "ArrowRight") {
			if (e.preventDefault(), this.menuEl) {
				let e = r(this.menuEl)[this.activeIndex];
				if (e !== void 0 && e.querySelector(".cmm-dropdown-menu__arrow")) {
					let t = this.getFlatMenuItems()[this.activeIndex];
					t !== void 0 && "children" in t && this.openSubMenu(e, t.children);
				}
			}
			return;
		}
		if ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.menuEl)) {
			let e = r(this.menuEl)[this.activeIndex];
			if (e) if (e.querySelector(".cmm-dropdown-menu__arrow")) {
				let t = this.getFlatMenuItems()[this.activeIndex];
				t !== void 0 && "children" in t && this.openSubMenu(e, t.children);
			} else e.click();
		}
	}
	getFlatMenuItems() {
		let e = [];
		for (let t of this.items) if (this.isRadioGroup(t)) for (let n of t.items) e.push({
			type: "item",
			label: n.label,
			value: n.value,
			disabled: n.disabled
		});
		else {
			let n = t;
			n.type !== "separator" && e.push(n);
		}
		return e;
	}
	isRadioGroup(e) {
		return e.type === "radio-group" && "items" in e;
	}
};
//#endregion
export { i as DropdownMenu };

//# sourceMappingURL=index.js.map