import { focusElementTimeout as e } from "../internal/utils/focus.js";
import { getDisplayValue as t, getElementUpdate as n, getPropertyChanges as r } from "../internal/utils/dom.js";
import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
import { useStyles as a } from "../internal/styles/index.js";
import { createLightDismiss as o } from "../internal/utils/keynav.js";
import { __decorate as s } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
import { Icon as c } from "../icon/icon2.js";
import { Control as l } from "../forms/control/control2.js";
import { inputStyles as u } from "../input/input2.js";
import { Checkbox as d } from "../checkbox/checkbox2.js";
import { Tag as f } from "../tag/tag2.js";
import { Menu as p } from "../menu/menu2.js";
import { MenuItem as m } from "../menu/menu-item2.js";
import { Dropdown as h } from "../dropdown/dropdown2.js";
import g from "./combobox.js";
import { html as _, isServer as v, nothing as y } from "lit";
import { property as b } from "lit/decorators/property.js";
import { ifDefined as x } from "lit/directives/if-defined.js";
//#region src/combobox/combobox.ts
var S = class extends l {
	constructor(...e) {
		super(...e), this.#p = [], this.#m = !1, this._associateDatalist = !1, this.#w = /* @__PURE__ */ new Set();
	}
	static {
		this.styles = a([
			...l.styles,
			u,
			g
		]);
	}
	static {
		this.metadata = {
			tag: "nve-combobox",
			version: "2.0.2"
		};
	}
	static {
		this.elementDefinitions = {
			[d.metadata.tag]: d,
			[c.metadata.tag]: c,
			[h.metadata.tag]: h,
			[p.metadata.tag]: p,
			[m.metadata.tag]: m,
			[f.metadata.tag]: f
		};
	}
	#e;
	get #t() {
		return this.#e ||= this.shadowRoot ? this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 })?.find((e) => e.tagName === "DATALIST" || e.tagName === "SELECT") ?? this.querySelector("datalist, select") : null, this.#e;
	}
	#n;
	get #r() {
		return this.#n ||= this.shadowRoot ? this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 })?.find((e) => e.tagName === "SELECT") ?? this.querySelector("select") : null, this.#n;
	}
	get #i() {
		return Array.from(this.#t?.options ? this.#t.options : []);
	}
	get #a() {
		return Array.from(this.shadowRoot.querySelectorAll(m.metadata.tag));
	}
	get #o() {
		return this.shadowRoot.querySelector(h.metadata.tag);
	}
	get #s() {
		return this.shadowRoot.querySelector("[input]");
	}
	get #c() {
		return this.shadowRoot.querySelector(".tags");
	}
	get #l() {
		return this.#i.find((e) => !e.disabled && !e.hidden);
	}
	get #u() {
		return !!this.querySelector("[slot=\"footer\"]");
	}
	get #d() {
		if (!this.behaviorCreate || this.input?.disabled) return !1;
		let e = this.input?.value.trim();
		return e ? !this.#f(e) : !1;
	}
	#f(e) {
		let t = e.toLowerCase();
		return this.#i.find((e) => (e.textContent.trim() || e.value).toLowerCase() === t || e.value.toLowerCase() === t);
	}
	#p;
	#m;
	get prefixContent() {
		return this.#r?.multiple && !this.#h ? _`<div class="tags-label" aria-hidden="true">${this.#r.selectedOptions.length} ${this.i18n.selected}</div><div class="tags">${Array.from(this.#r.selectedOptions).map((e) => _`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#P(e)}">${t(e)}</nve-tag>`)}</div>` : _`<slot name="prefix-icon"></slot>`;
	}
	get #h() {
		return this.tagLayout === "hidden";
	}
	get #g() {
		return (this.#t?.options?.length ?? 0) > 50;
	}
	get #_() {
		return !this._internals.states.has("dirty");
	}
	get suffixContent() {
		if (v) return y;
		let e = this.#i, n = this.#g, r = this.#_, i = e.filter((e) => !e.hidden).filter((e) => !(e.value === "" && e.disabled)), a = i.filter((e) => !e.disabled).length === 0, o = this.#d;
		return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#O}" @close="${this.#k}" hidden .anchor="${this.#s}" position="bottom"><nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${i.map((e) => _`<nve-menu-item part="menu-item" .option="${t(e)}" role="option" @click="${() => this.#P(e)}" ?selected="${e.selected}" aria-selected="${e.selected ? "true" : "false"}" ?disabled="${e.disabled}" aria-label="${t(e)}">${this.#v(e)} ${n || r ? t(e) : _`<span role="presentation">${(e.label ? e.label : e.value)?.split("")?.map((e, t) => _`<span ?matches="${this.#L(e, t)}">${e}</span>`)}</span>`}</nve-menu-item>`)} ${a && !o ? _`<nve-menu-item part="menu-item" .value="${""}" disabled="disabled">${this.i18n.noResults}</nve-menu-item>` : y} ${o ? _`<nve-menu-item part="create-option" role="button" aria-label="${`${this.i18n.create} "${this.input?.value.trim()}"`}" @click="${this.#F}"><nve-icon part="icon" name="add" size="sm"></nve-icon>"${this.input?.value.trim()}"</nve-menu-item>` : y}</nve-menu><slot name="footer"></slot></nve-dropdown>`;
	}
	#v(e) {
		let t = this.#r;
		return t?.multiple && this.#g ? _`<input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}">` : t?.multiple ? _`<nve-checkbox part="checkbox"><input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}"></nve-checkbox>` : t ? _`<nve-icon part="icon" name="check" size="sm"></nve-icon>` : y;
	}
	async firstUpdated(e) {
		super.firstUpdated(e), this.shadowRoot.addEventListener("slotchange", () => {
			this.#e = null, this.#n = null, this.#E();
		}), await this.updateComplete, this.#y(), this.#b(), this.#A(), this.#j(), this.#N(), this.#U(), this.#G(), await this.#M(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
	}
	connectedCallback() {
		super.connectedCallback();
		let e = new MutationObserver((e) => {
			e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#E();
		});
		e.observe(this, {
			childList: !0,
			subtree: !0,
			attributes: !0,
			attributeFilter: [
				"selected",
				"disabled",
				"value"
			],
			characterData: !0
		}), this.#p.push(e);
	}
	disconnectedCallback() {
		super.disconnectedCallback(), this.#p.forEach((e) => e.disconnect());
	}
	reset() {
		this.#o.hidePopover(), this.#r && (this.#r.selectedIndex = -1), super.reset();
	}
	selectAll() {
		this.#i.forEach((e) => e.selected = !0), this.requestUpdate(), this.#r.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r.dispatchEvent(new Event("change", { bubbles: !0 }));
	}
	#y() {
		this.#r && !this.#r.multiple && (this.#x(), this.#C(), this.#T());
	}
	#b() {
		this.#r?.multiple && (this.#x(), this.#C(), this.#T(), this._internals.states.add("multiple"));
	}
	#x() {
		let e = Array.from(this.#r.selectedOptions).find((e) => e.hasAttribute("selected"));
		e && !this.#r.multiple && !this.input.defaultValue && (this.input.value = t(e));
	}
	#S() {
		!this.#r.multiple && !this.input.defaultValue && (this.input.value = t(Array.from(this.#r.selectedOptions).find((e) => e.value === this.#r.value)));
	}
	#C() {
		this.#p.push(n(this.#r, "value", () => {
			this.#S(), this.requestUpdate();
		}));
	}
	#w;
	#T() {
		this.#i.forEach((e) => {
			this.#w.has(e) || (this.#w.add(e), r(e, "selected", () => this.requestUpdate()));
		});
	}
	#E() {
		this.#m || (this.#m = !0, queueMicrotask(() => {
			this.#m = !1, this.#D(), this.#T(), this.requestUpdate();
		}));
	}
	#D() {
		let e = new Set(this.#i);
		for (let t of this.#w) e.has(t) || this.#w.delete(t);
	}
	#O() {
		this.#o.hidden = !1;
	}
	#k() {
		this.#o.hidden = !0, this._internals.states.delete("dirty"), this.#B();
	}
	#A() {
		this.addEventListener("keydown", (e) => {
			let t = this.input.value.trim();
			if (e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && t !== "" && (e.preventDefault(), this.#V(this.#a[0].option), this.#H(this.#i.find((e) => (e.label ? e.label : e.value) === this.#a[0].option))), this.#o.hidePopover()), e.code === "Enter" && this.behaviorCreate && !this.input.disabled && t) {
				let n = this.#f(t);
				n ? this.#P(n) : (e.preventDefault(), e.stopImmediatePropagation(), this.#I());
			}
		});
	}
	#j() {
		this.input.addEventListener("input", () => this.#R()), this.shadowRoot.addEventListener("slotchange", () => this.#R());
	}
	async #M() {
		let e = this.#o;
		await e.updateComplete, o({
			element: e.shadowRoot.querySelector("[internal-host]"),
			focusElement: this.input
		}, () => {
			this.#o.matches(":popover-open") && this.#o.hidePopover();
		});
	}
	#N() {
		this.#c?.addEventListener("pointerup", () => {
			this.tagLayout === "wrap" && (this.input.focus(), setTimeout(() => this.#z(), 0));
		}), this.input.addEventListener("pointerdown", () => {
			this.#z();
		}), this.addEventListener("keydown", (e) => {
			e.code !== "Tab" && e.code !== "Escape" && this.#z(), e?.code === "ArrowDown" && this.getRootNode().activeElement === this.input && (this.#o.tabIndex = 0, this.#a[0]?.focus(), e.preventDefault());
		});
	}
	#P(n) {
		this.#r?.multiple || (this.#V(t(n)), this.#o.hidePopover(), e(this.input)), this.#r && (n.selected = !n.selected, this.#H(n)), this.requestUpdate();
	}
	#F() {
		this.#I();
	}
	#I() {
		let t = this.input.value.trim();
		t && (this.dispatchEvent(new CustomEvent("create", {
			detail: { value: t },
			bubbles: !0,
			composed: !0
		})), this.input.value = "", this.#o.hidePopover(), e(this.input), this.requestUpdate());
	}
	#L(e, t) {
		return this.#l ? this.input.value.toLowerCase()[t]?.toLowerCase() === e.toLowerCase() : !1;
	}
	#R() {
		this.#i.forEach((e) => {
			e.textContent.trim().length ? e.hidden = !e.textContent.toLocaleLowerCase().includes(this.input?.value.toLowerCase()) : e.hidden = !e.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());
		}), this.requestUpdate();
	}
	#z() {
		!this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#R(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
	}
	#B() {
		this.#r && !this.#r.multiple && !this.#i.filter((e) => !(e.value === "" && e.disabled)).find((e) => t(e) === this.input.value) && (this.#i.forEach((e) => e.selected = !1), this.#V(""), this.#H({
			value: "",
			selected: !1
		}));
	}
	#V(e) {
		this.input.value = e, this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
	}
	#H(e) {
		let t = [...this.#i, {
			value: "",
			selected: null
		}].find((t) => t.value === e.value);
		t && (t.selected = e.selected ?? null), this.#r && !this.#r.multiple && (this.#r.value = e.value), this.#r?.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r?.dispatchEvent(new Event("change", { bubbles: !0 }));
	}
	#U() {
		if (this.#r?.multiple && !this.#h) {
			this.#r.selectedOptions.length > 1 && this.#W(this.#c.getBoundingClientRect().width);
			let e = new ResizeObserver((e) => this.#W(e[0].contentRect.width));
			this.#p.push(e), e.observe(this.#c);
		}
	}
	#W(e) {
		this.#r?.multiple && e > this.#s.getBoundingClientRect().width - 100 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
	}
	#G() {
		this.#K(), this.shadowRoot.addEventListener("slotchange", () => this.#K());
	}
	#K() {
		this.#u ? this._internals.states.add("footer-content") : this._internals.states.delete("footer-content");
	}
};
s([b({
	type: String,
	reflect: !0
})], S.prototype, "container", void 0), s([b({
	type: String,
	reflect: !0,
	attribute: "tag-layout"
})], S.prototype, "tagLayout", void 0), s([b({
	type: Boolean,
	reflect: !0,
	attribute: "behavior-create"
})], S.prototype, "behaviorCreate", void 0), S = s([i()], S);
//#endregion
export { S as Combobox };

//# sourceMappingURL=combobox2.js.map