import { I18nController as e, i18n as t } from "../internal/controllers/i18n.controller.js";
import { onChildListMutation as n } from "../internal/utils/events.js";
import { focusElementTimeout as r, onListboxActivate as i } from "../internal/utils/focus.js";
import { getElementUpdate as a } from "../internal/utils/dom.js";
import { scopedRegistry as o } from "../internal/decorators/scoped-registry.js";
import { useStyles as s } from "../internal/styles/index.js";
import { __decorate as c } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
import { Icon as l } from "../icon/icon2.js";
import { Control as u } from "../forms/control/control2.js";
import { Tag as d } from "../tag/tag2.js";
import { Menu as f } from "../menu/menu2.js";
import { MenuItem as p } from "../menu/menu-item2.js";
import { Dropdown as m } from "../dropdown/dropdown2.js";
import h from "./select.js";
import { html as g, nothing as _ } from "lit";
import { property as v } from "lit/decorators/property.js";
import { ifDefined as y } from "lit/directives/if-defined.js";
//#region src/select/select.ts
var b = class extends u {
	constructor(...t) {
		super(...t), this.#e = new e(this), this.i18n = this.#e.i18n, this.#l = [], this.#p = /* @__PURE__ */ new Set();
	}
	static {
		this.styles = s([...u.styles, h]);
	}
	static {
		this.metadata = {
			tag: "nve-select",
			version: "0.2.3"
		};
	}
	static {
		this.elementDefinitions = {
			[l.metadata.tag]: l,
			[m.metadata.tag]: m,
			[f.metadata.tag]: f,
			[p.metadata.tag]: p,
			[d.metadata.tag]: d
		};
	}
	#e;
	get #t() {
		return this.input;
	}
	get #n() {
		return Array.from(this.#t?.options ? this.#t.options : []);
	}
	get #r() {
		return this.shadowRoot.querySelector(m.metadata.tag);
	}
	get #i() {
		return this.shadowRoot.querySelectorAll(p.metadata.tag);
	}
	get #a() {
		return this.shadowRoot.querySelector("[input]");
	}
	get #o() {
		return this.shadowRoot.querySelector(".tags");
	}
	get #s() {
		return this.shadowRoot.querySelector("[name=\"caret\"]");
	}
	get #c() {
		return this.#n.find((e) => e.selected && e.hidden && e.disabled);
	}
	#l;
	get #u() {
		let e = this.#c, t = e ? e.innerText : `${this.#t.selectedOptions.length} ${this.i18n.selected}`;
		return g`<div class="tags-label ${e ? "placeholder" : ""}" aria-hidden="true">${t}</div>`;
	}
	get prefixContent() {
		return this.#t?.multiple && this.#t?.size === 0 ? g`${this.#u}<div class="tags">${this.#n.filter((e) => e.selected && e !== this.#c).map((e) => g`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#y(e, !1)}">${e.textContent}</nve-tag>`)}</div>` : _;
	}
	get #d() {
		return g`<nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${y(this.i18n.select)}">${this.#n.filter((e) => e !== this.#c).map((e, t) => g`<nve-menu-item part="menu-item" role="option" @click="${() => this.#y(e, !e.selected)}" ?selected="${e.selected}" ?disabled="${e.disabled}" ?hidden="${!!e.hidden}" aria-selected="${e.selected}"><slot name="option-${t + 1}"><nve-icon part="icon" name="check" size="sm" aria-hidden="true"></nve-icon>${e.innerText}</slot></nve-menu-item>`)}</nve-menu>`;
	}
	get suffixContent() {
		return this.#t?.size === 0 ? g`<nve-icon name="caret" part="caret" direction="down" size="sm" aria-hidden="true"></nve-icon><nve-dropdown part="dropdown" @close="${this.#_}" @open="${this.#g}" hidden .anchor="${this.#a}" .trigger="${this.#a}" position="bottom">${this.#d}</nve-dropdown>` : this.#d;
	}
	async firstUpdated(e) {
		super.firstUpdated(e), await this.updateComplete, this.#h(), this.#v(), this.#f(), this.#m();
	}
	#f() {
		this.#l.push(a(this.#t, "value", () => this.requestUpdate()), n(this.#t, () => this.requestUpdate(), {
			attributes: !0,
			subtree: !0
		}), n(this.#t, () => this.#m(), { subtree: !0 }));
	}
	#p;
	#m() {
		this.#n.forEach((e) => {
			this.#p.has(e) || (this.#p.add(e), this.#l.push(a(e, "selected", () => this.requestUpdate())));
		});
	}
	disconnectedCallback() {
		super.disconnectedCallback(), this.#l.forEach((e) => e.disconnect());
	}
	async updated(e) {
		super.updated(e), this.#t?.size && this.#t?.size !== 0 && (this._internals.states.add("size"), this.style.setProperty("--size", `${this.#t?.size + .75}`)), this.#t?.multiple && this.#t?.size === 0 && this._internals.states.add("multiple");
	}
	#h() {
		this.#t?.size === 0 && i(this.#t, () => {
			this.requestUpdate(), this.#r.style.setProperty("--min-width", `${this.#a.getBoundingClientRect().width}px`), this.#r.showPopover(), r(this.#i[0]);
		});
	}
	#g() {
		this.#r.hidden = !1, this.#s.direction = "up";
	}
	#_() {
		this.#r.hidden = !0, this.#s.direction = "down";
	}
	#v() {
		let e = new ResizeObserver((e) => this.#b(e[0].contentRect.width));
		this.#l.push(e), e.observe(this.#a);
	}
	async #y(e, t) {
		(this.#t.multiple || !this.#t.multiple && e.value !== this.#t.value) && (e.selected = t), this.#t.selectedOptions.length < 1 && (this.#t.value = t ? e.value : ""), this.#t.dispatchEvent(new Event("input", { bubbles: !0 })), this.#t.dispatchEvent(new Event("change", { bubbles: !0 })), this.requestUpdate(), !this.#t.multiple && this.#r ? this.#r.hidePopover() : (await this.updateComplete, this.#b(this.#a.getBoundingClientRect().width));
	}
	#b(e) {
		let t = this.#o;
		this.#t?.multiple && t && t.getBoundingClientRect().width > e - 48 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
	}
};
c([v({
	type: String,
	reflect: !0
})], b.prototype, "container", void 0), c([v({ type: Object })], b.prototype, "i18n", void 0), b = c([t(), o()], b);
//#endregion
export { b as Select };

//# sourceMappingURL=select2.js.map