import { I18nController as e } from "../../internal/controllers/i18n.controller.js";
import { appendRootNodeStyle as t, getAttributeListChanges as n } from "../../internal/utils/dom.js";
import { associateAriaDescribedBy as r, associateDataList as i, associateLabel as a, attachInternals as o } from "../../internal/utils/a11y.js";
import { typeSSR as s } from "../../internal/controllers/type-ssr.controller.js";
import { hostAttr as c } from "../../internal/decorators/host-attr.js";
import { useStyles as l } from "../../internal/styles/index.js";
import { __decorate as u } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
import { inputQuery as d, setupControlStates as f, setupControlStatusStates as p, setupControlValidationStates as m } from "../utils/states.js";
import { setupControlLayoutStates as h } from "../utils/layout.js";
import g from "./control.global.js";
import _ from "./control.js";
import { LitElement as v, html as y, isServer as b, nothing as x } from "lit";
import { property as S } from "lit/decorators/property.js";
//#region src/forms/control/control.ts
var C = class extends v {
	constructor(...t) {
		super(...t), this.fitText = !1, this.fitContent = !1, this.#e = new e(this), this.i18n = this.#e.i18n, this.nveControl = "", this.#i = [], this._associateDatalist = !0, this.#a = () => {
			this.#f(), this.input && this.#i.length === 0 && (this.#o(), this.#c());
		}, this.#s = () => {
			this.#f(), this.#p();
		}, this.#l = () => {
			this.#u();
		};
	}
	#e;
	get #t() {
		return this.shadowRoot?.querySelector("slot[name=\"label\"]")?.assignedElements({ flatten: !0 })?.[0];
	}
	get #n() {
		return this.shadowRoot?.querySelector("slot[name=\"messages\"]")?.assignedElements({ flatten: !0 }) ?? [];
	}
	#r;
	get input() {
		if (!b && !this.#r) {
			let e = this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]"));
			this.#r = e || this.querySelector(d);
		}
		return this.#r;
	}
	get prefixContent() {
		return x;
	}
	get suffixContent() {
		return x;
	}
	#i;
	static {
		this.styles = l([_]);
	}
	static {
		this.metadata = {
			tag: "nve-control",
			version: "0.2.3"
		};
	}
	render() {
		return this.nveControl === "inline" ? y`<div internal-host part="_internal-host"><div input part="_input"><slot interaction-state></slot></div><slot name="label" part="_label"></slot><slot name="messages" part="_messages"></slot></div>` : y`<div internal-host part="_internal-host"><slot name="label" part="_label"></slot><div input part="_input">${this.prefixContent}<slot></slot>${this.suffixContent}</div><slot name="messages" part="_messages"></slot></div>`;
	}
	connectedCallback() {
		super.connectedCallback(), o(this), t(this, g), this.shadowRoot.addEventListener("slotchange", this.#a);
	}
	disconnectedCallback() {
		super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#s), this.fitText && this.input && (this.input.removeEventListener("input", this.#l), this.input.removeEventListener("change", this.#l)), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
	}
	#a;
	reset() {
		this.input.value = this.input.getAttribute("value") ?? "", this.requestUpdate(), this.dispatchEvent(new CustomEvent("reset", {
			bubbles: !0,
			composed: !0
		}));
	}
	#o() {
		m(this, this.#n), this.#i.push(...f(this), ...p(this, this.#n), h(this), n(this, ["hidden", "status"], () => this.#f())), this.#d(), this.#p(), this.shadowRoot.addEventListener("slotchange", this.#s);
	}
	#s;
	#c() {
		this.fitText && (this.#u(), this.input.addEventListener("input", this.#l), this.input.addEventListener("change", this.#l));
	}
	#l;
	#u() {
		if (this.input.tagName === "INPUT") {
			let e = this.input.type === "text" ? 0 : 4;
			this.style.setProperty("--control-width", `${this.input.value.length + e}ch`), this.input.style.setProperty("max-width", `${this.input.value.length + 2}ch`, "important");
		} else this.input.tagName === "SELECT" && this.style.setProperty("--control-width", `${this.input.options[this.input.selectedIndex].textContent.length + 4}ch`);
	}
	#d() {
		this.input.showPicker || (this.input.showPicker = () => this.input.focus());
	}
	#f() {
		this.input && (this.toggleAttribute("multiple", this.input?.multiple), this.input?.hasAttribute("size") ? this.setAttribute("size", "") : this.removeAttribute("size"));
	}
	#p() {
		this.#m(), a(this.#t, this.input), r(Array.from(this.#n), this.input), this._associateDatalist && i(this.querySelector("datalist"), this.input);
	}
	#m() {
		let e = this.querySelector("label") || this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).find((e) => e.tagName === "LABEL");
		e && (e.slot = "label");
	}
	showPicker() {
		try {
			this.input.showPicker();
		} catch {}
	}
};
u([S({ type: String })], C.prototype, "status", void 0), u([S({
	type: String,
	reflect: !0
})], C.prototype, "layout", void 0), u([S({
	type: Boolean,
	reflect: !0,
	attribute: "fit-text"
})], C.prototype, "fitText", void 0), u([S({
	type: Boolean,
	reflect: !0,
	attribute: "fit-content"
})], C.prototype, "fitContent", void 0), u([S({ type: Object })], C.prototype, "i18n", void 0), u([S({
	type: String,
	reflect: !0
})], C.prototype, "prominence", void 0), u([c({ attribute: "nve-control" })], C.prototype, "nveControl", void 0), C = u([s()], C);
//#endregion
export { C as Control };

//# sourceMappingURL=control2.js.map