import { n as e, t } from "../../utils-C_mWfcFX.js";
//#region src/primitives/select/index.ts
var n = class {
	el;
	triggerEl;
	dropdownEl;
	listboxId;
	triggerId;
	searchInputEl = null;
	liveRegionEl = null;
	optionEls = [];
	config;
	currentOptions;
	selectedValue = null;
	highlightedIndex = -1;
	isOpen = !1;
	isDestroyed = !1;
	handleTriggerClick;
	handleTriggerKeydown;
	handleDocumentClick;
	handleDropdownKeydown;
	constructor(n) {
		this.config = n, this.currentOptions = [...n.options], this.listboxId = e("cmm-select-listbox"), this.triggerId = e("cmm-select-trigger"), n.value !== void 0 && (this.selectedValue = n.value), this.el = document.createElement("div"), this.el.className = this.buildRootClass(), this.triggerEl = document.createElement("button"), this.triggerEl.type = "button", this.triggerEl.id = this.triggerId, this.triggerEl.className = "cmm-select__trigger", this.triggerEl.setAttribute("role", "combobox"), this.triggerEl.setAttribute("aria-haspopup", "listbox"), this.triggerEl.setAttribute("aria-expanded", "false"), this.triggerEl.setAttribute("aria-controls", this.listboxId), this.triggerEl.setAttribute("aria-owns", this.listboxId);
		let r = n.ariaLabel ?? n.placeholder ?? "Select an option";
		this.triggerEl.setAttribute("aria-label", r), n.disabled === !0 && (this.triggerEl.disabled = !0, this.el.classList.add("cmm-select--disabled")), this.updateTriggerContent();
		let i = document.createElement("span");
		i.className = "cmm-select__chevron", i.setAttribute("aria-hidden", "true"), i.innerHTML = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>", this.triggerEl.appendChild(i), this.dropdownEl = document.createElement("div"), this.dropdownEl.id = this.listboxId, this.dropdownEl.className = "cmm-select__dropdown", this.dropdownEl.setAttribute("role", "listbox"), this.dropdownEl.style.display = "none", n.searchable === !0 && (this.buildSearchInput(), this.buildLiveRegion()), this.renderOptions(this.currentOptions), this.el.appendChild(this.triggerEl), this.el.appendChild(this.dropdownEl), this.handleTriggerClick = () => {
			this.isDestroyed || (this.isOpen ? this.close() : this.open());
		}, this.handleTriggerKeydown = (e) => {
			this.isDestroyed || this.onTriggerKeydown(e);
		}, this.handleDocumentClick = (e) => {
			if (this.isDestroyed) return;
			let t = e.target;
			this.el.contains(t) || this.close();
		}, this.handleDropdownKeydown = (e) => {
			this.isDestroyed || this.onDropdownKeydown(e);
		}, this.triggerEl.addEventListener("click", this.handleTriggerClick), this.triggerEl.addEventListener("keydown", this.handleTriggerKeydown), this.dropdownEl.addEventListener("keydown", this.handleDropdownKeydown), n.container !== void 0 && t(n.container).appendChild(this.el);
	}
	getValue() {
		return this.selectedValue;
	}
	setValue(e) {
		this.currentOptions.find((t) => t.value === e) !== void 0 && (this.selectedValue = e, this.updateTriggerContent(), this.updateSelectedState());
	}
	setOptions(e) {
		this.currentOptions = [...e], this.renderOptions(this.currentOptions), this.updateTriggerContent();
	}
	setDisabled(e) {
		this.triggerEl.disabled = e, e ? (this.el.classList.add("cmm-select--disabled"), this.isOpen && this.close()) : this.el.classList.remove("cmm-select--disabled");
	}
	open() {
		if (this.isOpen || this.triggerEl.disabled) return;
		this.isOpen = !0, this.dropdownEl.style.display = "", this.triggerEl.setAttribute("aria-expanded", "true"), this.triggerEl.classList.add("cmm-select__trigger--open"), this.positionDropdown(), this.searchInputEl !== null && (this.searchInputEl.value = "", this.searchInputEl.focus(), this.renderOptions(this.currentOptions));
		let e = this.getSelectableOptions().findIndex((e) => e.value === this.selectedValue);
		this.setHighlightedIndex(e >= 0 ? e : 0), document.addEventListener("click", this.handleDocumentClick), this.config.onOpen?.();
	}
	close() {
		this.isOpen && (this.isOpen = !1, this.dropdownEl.style.display = "none", this.triggerEl.setAttribute("aria-expanded", "false"), this.triggerEl.classList.remove("cmm-select__trigger--open"), this.triggerEl.removeAttribute("aria-activedescendant"), this.highlightedIndex = -1, this.clearHighlight(), document.removeEventListener("click", this.handleDocumentClick), this.config.onClose?.());
	}
	destroy() {
		this.isDestroyed = !0, this.close(), this.triggerEl.removeEventListener("click", this.handleTriggerClick), this.triggerEl.removeEventListener("keydown", this.handleTriggerKeydown), this.dropdownEl.removeEventListener("keydown", this.handleDropdownKeydown), document.removeEventListener("click", this.handleDocumentClick), this.liveRegionEl !== null && (this.liveRegionEl.remove(), this.liveRegionEl = null), this.el.remove();
	}
	buildRootClass() {
		let e = ["cmm-select"];
		return this.config.size !== void 0 && e.push(`cmm-select--${this.config.size}`), this.config.className && e.push(this.config.className), e.join(" ");
	}
	buildSearchInput() {
		let e = document.createElement("div");
		e.className = "cmm-select__search-wrap", this.searchInputEl = document.createElement("input"), this.searchInputEl.type = "text", this.searchInputEl.className = "cmm-select__search", this.searchInputEl.placeholder = "Search...", this.searchInputEl.setAttribute("aria-label", "Search options"), this.searchInputEl.addEventListener("input", () => {
			let e = this.searchInputEl?.value.toLowerCase() ?? "", t;
			e ? (t = this.currentOptions.filter((t) => t.label.toLowerCase().includes(e)), this.renderOptions(t)) : (t = this.currentOptions, this.renderOptions(this.currentOptions)), this.setHighlightedIndex(0), this.announceResultsCount(t.length, e);
		}), e.appendChild(this.searchInputEl), this.dropdownEl.appendChild(e);
	}
	buildLiveRegion() {
		this.liveRegionEl = document.createElement("div"), this.liveRegionEl.setAttribute("role", "status"), this.liveRegionEl.setAttribute("aria-live", "polite"), this.liveRegionEl.setAttribute("aria-atomic", "true"), this.liveRegionEl.className = "cmm-sr-only", this.liveRegionEl.style.cssText = "\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    ", this.el.appendChild(this.liveRegionEl);
	}
	announceResultsCount(e, t) {
		if (this.liveRegionEl !== null) {
			if (t === "") {
				this.liveRegionEl.textContent = "";
				return;
			}
			e === 0 ? this.liveRegionEl.textContent = "No results found" : e === 1 ? this.liveRegionEl.textContent = "1 result available" : this.liveRegionEl.textContent = `${String(e)} results available`;
		}
	}
	renderOptions(e) {
		this.dropdownEl.querySelectorAll(".cmm-select__option, .cmm-select__group-header").forEach((e) => {
			e.remove();
		}), this.optionEls = [];
		let t = /* @__PURE__ */ new Map(), n = [];
		for (let r of e) if (r.group) {
			let e = t.get(r.group);
			e === void 0 ? t.set(r.group, [r]) : e.push(r);
		} else n.push(r);
		for (let e of n) this.appendOption(e);
		for (let [e, n] of t) {
			let t = document.createElement("div");
			t.className = "cmm-select__group-header", t.textContent = e, t.setAttribute("aria-hidden", "true"), this.dropdownEl.appendChild(t);
			for (let e of n) this.appendOption(e);
		}
	}
	appendOption(t) {
		let n = document.createElement("div");
		n.id = e("cmm-select-option"), n.className = "cmm-select__option", n.setAttribute("role", "option"), n.setAttribute("data-value", t.value), n.textContent = t.label, t.disabled === !0 && (n.classList.add("cmm-select__option--disabled"), n.setAttribute("aria-disabled", "true")), t.value === this.selectedValue ? (n.classList.add("cmm-select__option--selected"), n.setAttribute("aria-selected", "true")) : n.setAttribute("aria-selected", "false"), n.addEventListener("click", (e) => {
			e.stopPropagation(), t.disabled !== !0 && this.selectOption(t.value);
		}), this.dropdownEl.appendChild(n), this.optionEls.push(n);
	}
	selectOption(e) {
		this.selectedValue = e, this.updateTriggerContent(), this.updateSelectedState(), this.close(), this.triggerEl.focus(), this.config.onChange?.(e);
	}
	updateTriggerContent() {
		let e = this.triggerEl.querySelector(".cmm-select__value"), t = this.triggerEl.querySelector(".cmm-select__chevron"), n = this.currentOptions.find((e) => e.value === this.selectedValue);
		e !== null && e.remove();
		let r = document.createElement("span");
		n === void 0 ? (r.className = "cmm-select__value cmm-select__placeholder", r.textContent = this.config.placeholder ?? "Select...") : (r.className = "cmm-select__value", r.textContent = n.label), t === null ? this.triggerEl.insertBefore(r, this.triggerEl.firstChild) : this.triggerEl.insertBefore(r, t);
	}
	updateSelectedState() {
		for (let e of this.optionEls) e.getAttribute("data-value") === this.selectedValue ? (e.classList.add("cmm-select__option--selected"), e.setAttribute("aria-selected", "true")) : (e.classList.remove("cmm-select__option--selected"), e.setAttribute("aria-selected", "false"));
	}
	positionDropdown() {
		let e = this.triggerEl.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = e.top;
		t < 256 && n > t ? (this.dropdownEl.classList.add("cmm-select__dropdown--above"), this.dropdownEl.classList.remove("cmm-select__dropdown--below")) : (this.dropdownEl.classList.add("cmm-select__dropdown--below"), this.dropdownEl.classList.remove("cmm-select__dropdown--above"));
	}
	getSelectableOptions() {
		return this.currentOptions.filter((e) => e.disabled !== !0);
	}
	getSelectableOptionEls() {
		return this.optionEls.filter((e) => !e.classList.contains("cmm-select__option--disabled"));
	}
	setHighlightedIndex(e) {
		this.clearHighlight();
		let t = this.getSelectableOptionEls();
		if (t.length === 0) {
			this.highlightedIndex = -1;
			return;
		}
		this.highlightedIndex = Math.max(0, Math.min(e, t.length - 1));
		let n = t[this.highlightedIndex];
		n !== void 0 && (n.classList.add("cmm-select__option--highlighted"), n.scrollIntoView({ block: "nearest" }), this.triggerEl.setAttribute("aria-activedescendant", n.id));
	}
	clearHighlight() {
		for (let e of this.optionEls) e.classList.remove("cmm-select__option--highlighted");
	}
	onTriggerKeydown(e) {
		switch (e.key) {
			case "ArrowDown":
			case "ArrowUp":
			case "Enter":
			case " ":
				e.preventDefault(), this.isOpen || this.open();
				break;
			case "Escape":
				this.isOpen && (e.preventDefault(), this.close());
				break;
		}
	}
	onDropdownKeydown(e) {
		let t = this.getSelectableOptionEls();
		if (t.length !== 0) switch (e.key) {
			case "ArrowDown": {
				e.preventDefault();
				let n = this.highlightedIndex < t.length - 1 ? this.highlightedIndex + 1 : 0;
				this.setHighlightedIndex(n);
				break;
			}
			case "ArrowUp": {
				e.preventDefault();
				let n = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : t.length - 1;
				this.setHighlightedIndex(n);
				break;
			}
			case "Enter": {
				e.preventDefault();
				let n = t[this.highlightedIndex];
				if (n !== void 0) {
					let e = n.getAttribute("data-value");
					e !== null && this.selectOption(e);
				}
				break;
			}
			case "Escape":
				e.preventDefault(), this.close(), this.triggerEl.focus();
				break;
			case "Tab":
				this.close();
				break;
		}
	}
};
//#endregion
export { n as Select };

//# sourceMappingURL=index.js.map