import { appendRootNodeStyle as e, getElementUpdate as t } from "../internal/utils/dom.js";
import { useStyles as n } from "../internal/styles/index.js";
import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
import { Control as i } from "../forms/control/control2.js";
import a from "./range.global.js";
import o from "./range.js";
import { html as s, isServer as c, nothing as l } from "lit";
import { property as u } from "lit/decorators/property.js";
//#region src/range/range.ts
var d = class extends i {
	constructor(...e) {
		super(...e), this.orientation = "horizontal";
	}
	static {
		this.styles = n([...i.styles, o]);
	}
	static {
		this.metadata = {
			tag: "nve-range",
			version: "0.2.3"
		};
	}
	connectedCallback() {
		super.connectedCallback(), e(this, a), this._internals.ariaOrientation = this.orientation;
	}
	firstUpdated(e) {
		super.firstUpdated(e), this.#e(), this.input.addEventListener("input", () => this.#e()), t(this.input, "value", (e) => this.#e(e));
	}
	updated(e) {
		super.updated(e), e.has("orientation") && (this._internals.ariaOrientation = this.orientation);
	}
	#e(e) {
		let t = e ?? this.input.valueAsNumber, n = this.input.min ? parseFloat(this.input.min) : 0, r = this.input.max ? parseFloat(this.input.max) : 100;
		this.style.setProperty("--track-width", `${Math.floor((t - n) / (r - n) * 100) / 100}`);
	}
	get suffixContent() {
		let e = c ? null : this.querySelector("datalist");
		return e ? this.#t(e) : l;
	}
	#t(e) {
		let t = Array.from(e.options), n = this.input?.min ? parseFloat(this.input.min) : 0, r = this.input?.max ? parseFloat(this.input.max) : 100;
		return s`<div class="datalist-labels">${t.map((e) => {
			let t = parseFloat(e.value), i = (t - n) / (r - n) * 100;
			return s`<span class="datalist-tick" style="${this.orientation === "vertical" ? `bottom: ${i}%; transform: translateY(${i}%)` : `left: ${i}%; transform: translateX(-${i}%)`}">${e.textContent || t}</span>`;
		})}</div>`;
	}
};
r([u({
	type: String,
	reflect: !0
})], d.prototype, "orientation", void 0);
//#endregion
export { d as Range };

//# sourceMappingURL=range2.js.map