import { t as e } from "../../sanitize-CDxuPfMB.js";
//#region src/components/tabs/index.ts
function t(e) {
	if (typeof e == "string") {
		let t = document.querySelector(e);
		if (!t) throw Error(`TabPanel container not found: ${e}`);
		return t;
	}
	return e;
}
var n = 0;
function r(e) {
	return `${e}-${String(++n)}`;
}
var i = class {
	container;
	config;
	instanceId;
	tabs;
	activeTabId;
	barEl = null;
	panelsEl = null;
	panelMap = /* @__PURE__ */ new Map();
	boundKeydownHandler;
	constructor(e) {
		this.container = t(e.container), this.config = e, this.instanceId = r("cmm-tabs"), this.tabs = [...e.tabs];
		let n = this.tabs[0];
		this.activeTabId = e.activeTab ?? (n === void 0 ? "" : n.id), this.boundKeydownHandler = this.handleKeydown.bind(this), this.render();
	}
	setActiveTab(e) {
		let t = this.tabs.find((t) => t.id === e);
		t && t.disabled !== !0 && (this.activeTabId = e, this.updateTabBar(), this.updatePanelVisibility(), this.config.onTabChange?.(e));
	}
	getActiveTab() {
		return this.activeTabId;
	}
	addTab(e) {
		this.tabs.push(e), this.render();
	}
	removeTab(e) {
		let t = this.tabs.findIndex((t) => t.id === e);
		if (!(t < 0)) {
			if (this.tabs.splice(t, 1), this.panelMap.delete(e), this.activeTabId === e) {
				let e = this.tabs[0];
				this.activeTabId = e === void 0 ? "" : e.id;
			}
			this.config.onTabClose?.(e), this.render();
		}
	}
	getPanel(e) {
		let t = this.panelMap.get(e);
		if (t !== void 0) return t;
		let n = document.createElement("div");
		return n.className = "cmm-tabs__panel", n.dataset.tabPanel = e, e === this.activeTabId && n.classList.add("cmm-tabs__panel--active"), this.panelMap.set(e, n), this.panelsEl && this.panelsEl.appendChild(n), n;
	}
	destroy() {
		this.barEl !== null && this.barEl.removeEventListener("keydown", this.boundKeydownHandler), this.container.innerHTML = "", this.barEl = null, this.panelsEl = null, this.panelMap.clear();
	}
	handleKeydown(e) {
		let t = this.tabs.filter((e) => e.disabled !== !0);
		if (t.length === 0) return;
		let n = t.findIndex((e) => e.id === this.activeTabId), r;
		switch (e.key) {
			case "ArrowLeft":
				r = n > 0 ? n - 1 : t.length - 1, e.preventDefault();
				break;
			case "ArrowRight":
				r = n < t.length - 1 ? n + 1 : 0, e.preventDefault();
				break;
			case "Home":
				r = 0, e.preventDefault();
				break;
			case "End":
				r = t.length - 1, e.preventDefault();
				break;
			default: return;
		}
		let i = t[r];
		i !== void 0 && i.id !== this.activeTabId && (this.setActiveTab(i.id), this.focusTab(i.id));
	}
	focusTab(e) {
		this.barEl !== null && this.barEl.querySelector(`[data-tab-id="${e}"]`)?.focus();
	}
	render() {
		this.container.innerHTML = "", this.panelMap.clear();
		let e = document.createElement("div");
		e.className = "cmm-tabs";
		let t = document.createElement("div");
		t.className = "cmm-tabs__bar", t.setAttribute("role", "tablist"), t.setAttribute("aria-label", "Tabs"), t.addEventListener("keydown", this.boundKeydownHandler), this.barEl = t;
		for (let e of this.tabs) t.appendChild(this.buildTabButton(e));
		e.appendChild(t);
		let n = document.createElement("div");
		n.className = "cmm-tabs__panels", this.panelsEl = n;
		for (let e of this.tabs) {
			let t = document.createElement("div");
			t.className = "cmm-tabs__panel", t.id = `${this.instanceId}-panel-${e.id}`, t.dataset.tabPanel = e.id, t.setAttribute("role", "tabpanel"), t.setAttribute("aria-labelledby", `${this.instanceId}-tab-${e.id}`), t.tabIndex = 0, e.id === this.activeTabId && t.classList.add("cmm-tabs__panel--active"), this.panelMap.set(e.id, t), n.appendChild(t);
		}
		e.appendChild(n), this.container.appendChild(e);
	}
	buildTabButton(t) {
		let n = document.createElement("button");
		if (n.type = "button", n.className = "cmm-tabs__tab", n.setAttribute("role", "tab"), n.setAttribute("aria-selected", t.id === this.activeTabId ? "true" : "false"), n.setAttribute("aria-controls", `${this.instanceId}-panel-${t.id}`), n.id = `${this.instanceId}-tab-${t.id}`, n.dataset.tabId = t.id, n.tabIndex = t.id === this.activeTabId ? 0 : -1, t.id === this.activeTabId && n.classList.add("cmm-tabs__tab--active"), t.disabled === !0 && (n.classList.add("cmm-tabs__tab--disabled"), n.disabled = !0, n.tabIndex = -1), t.icon !== void 0) {
			let e = document.createElement("span");
			e.className = "cmm-tabs__tab-icon", e.textContent = t.icon, n.appendChild(e);
		}
		let r = document.createElement("span");
		if (r.className = "cmm-tabs__tab-label", r.innerHTML = e(t.label), n.appendChild(r), n.addEventListener("click", () => {
			this.setActiveTab(t.id);
		}), t.closeable === !0) {
			let e = document.createElement("button");
			e.type = "button", e.className = "cmm-tabs__tab-close", e.textContent = "×", e.setAttribute("aria-label", `Close ${t.label}`), e.tabIndex = -1, e.addEventListener("click", (e) => {
				e.stopPropagation(), this.removeTab(t.id);
			}), n.appendChild(e);
		}
		return n;
	}
	updateTabBar() {
		this.barEl && this.barEl.querySelectorAll(".cmm-tabs__tab").forEach((e) => {
			let t = e.dataset.tabId, n = this.tabs.find((e) => e.id === t)?.disabled === !0;
			t === this.activeTabId ? (e.classList.add("cmm-tabs__tab--active"), e.setAttribute("aria-selected", "true"), e.tabIndex = 0, e.disabled = !1) : (e.classList.remove("cmm-tabs__tab--active"), e.setAttribute("aria-selected", "false"), e.tabIndex = -1, e.disabled = n);
		});
	}
	updatePanelVisibility() {
		for (let [e, t] of this.panelMap) e === this.activeTabId ? t.classList.add("cmm-tabs__panel--active") : t.classList.remove("cmm-tabs__panel--active");
	}
};
//#endregion
export { i as TabPanel };

//# sourceMappingURL=index.js.map