import { useMouseCapture as e } from "../composition/useMouseCapture.js";
import { tapIf as t } from "../helpers/functions.js";
import { clamp as n } from "../helpers/math.js";
import r from "./PlTooltip/PlTooltip.js";
import "./PlTooltip/index.js";
import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
import { getErrorMessage as a } from "../helpers/error.js";
import o from "./InputRange.js";
import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, reactive as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useSlots as C, watch as w, withCtx as ee } from "vue";
var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section" }, D = {
	key: 0,
	class: "text-s"
}, O = {
	key: 1,
	class: "ui-slider__value-static text-s"
}, k = { class: "ui-slider__base" }, A = { class: "ui-slider__container" }, j = { class: "ui-slider__container ui-slider__container-thumb" }, M = { class: "ui-slider__input-wrapper d-flex" }, te = {
	key: 0,
	class: "ui-slider__error"
}, N = /* @__PURE__ */ p({
	__name: "SliderRange",
	props: {
		modelValue: {},
		min: { default: 0 },
		max: {},
		step: { default: 1 },
		label: { default: void 0 },
		helper: { default: void 0 },
		error: { default: void 0 },
		mode: { default: "text" },
		measure: { default: "" },
		breakpoints: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		}
	},
	emits: ["update:modelValue"],
	setup(p, { emit: N }) {
		let ne = C(), re = N, P = p, F = _({
			deltaValue1: 0,
			deltaValue2: 0
		}), I = v(), L = v(), R = v(), z = v(P.modelValue), B = v(P.modelValue[0]), V = v(P.modelValue[1]), H = i(c(() => P)), U = c(() => [B.value, V.value].sort((e, t) => e - t).join("-")), W = c(() => P.max - P.min), G = c(() => n((P.modelValue[0] ?? 0) + F.deltaValue1, P.min, P.max)), K = c(() => n((P.modelValue[1] ?? 0) + F.deltaValue2, P.min, P.max)), q = c(() => {
			let e = P.modelValue;
			return Array.isArray(e) && e.length === 2 && e.every((e) => Number.isFinite(e)) ? a(P.error) : "Expected model [number, number]";
		}), J = c(() => (G.value - P.min) / W.value), Y = c(() => (K.value - P.min) / W.value), X = c(() => se()), ie = c(() => ({
			right: X.value[0] + "%",
			left: 100 - X.value[1] + "%"
		})), ae = c(() => ({ right: Math.ceil((1 - J.value) * 100) + "%" })), oe = c(() => ({ right: Math.ceil((1 - Y.value) * 100) + "%" }));
		w(() => P.modelValue, (e) => {
			z.value = e, B.value = +e[0], V.value = +e[1];
		}, { immediate: !0 }), e(L, (e) => {
			t(S(I)?.getBoundingClientRect(), (t) => {
				let { dx: r } = e;
				F.deltaValue1 = r / t.width * W.value, B.value = Z(n((P.modelValue[0] ?? 0) + F.deltaValue1, P.min, P.max)), z.value = [B.value, V.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), F.deltaValue1 = 0);
			});
		}), e(R, (e) => {
			t(S(I)?.getBoundingClientRect(), (t) => {
				let { dx: r } = e;
				F.deltaValue2 = r / t.width * W.value, V.value = Z(n((P.modelValue[1] ?? 0) + F.deltaValue2, P.min, P.max)), z.value = [B.value, V.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), F.deltaValue2 = 0);
			});
		});
		function se() {
			return [Math.ceil((1 - J.value) * 100), Math.ceil((1 - Y.value) * 100)].sort((e, t) => e - t);
		}
		function Z(e) {
			let t = n(e, P.min, P.max);
			return Math.round((t + 2 ** -52) * (1 / P.step)) / (1 / P.step);
		}
		function Q(e) {
			re("update:modelValue", e);
		}
		function $(e, t) {
			[
				"ArrowDown",
				"ArrowUp",
				"ArrowRight",
				"ArrowLeft",
				"Enter"
			].includes(e.code) && e.preventDefault();
			let r = e.code === "ArrowUp" || e.code === "ArrowRight" ? P.step * 1 : e.code === "ArrowDown" || e.code === "ArrowLeft" ? P.step * -1 : 0, i = [...P.modelValue];
			i[t] = n(i[t] + r, P.min, P.max), Q(i);
		}
		return (e, t) => (g(), d("div", { class: m([P.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"]) }, [f("div", { class: m([`ui-slider__mode-${P.mode}`, "ui-slider"]) }, [f("div", T, [f("div", E, [p.label ? (g(), d("label", D, [f("span", null, x(p.label), 1), S(ne).tooltip ? (g(), l(S(r), {
			key: 0,
			class: "info",
			position: "top"
		}, {
			tooltip: ee(() => [b(e.$slots, "tooltip")]),
			_: 3
		})) : u("", !0)])) : u("", !0), P.mode === "text" ? (g(), d("div", O, x(U.value), 1)) : u("", !0)]), f("div", k, [f("div", A, [f("div", {
			ref_key: "barRef",
			ref: I,
			class: "ui-slider__bar"
		}, [f("div", {
			class: "ui-slider__progress",
			style: h(ie.value)
		}, null, 4)], 512)]), f("div", j, [
			P.breakpoints ? (g(!0), d(s, { key: 0 }, y(S(H), (e, t) => (g(), d("div", {
				key: t,
				style: h({ right: `${e}%` }),
				class: "ui-slider__thumb-step"
			}, null, 4))), 128)) : u("", !0),
			f("div", {
				ref_key: "thumbRef1",
				ref: L,
				style: h(ae.value),
				class: "ui-slider__thumb",
				tabindex: "0",
				onKeydown: t[0] ||= (e) => $(e, 0)
			}, [...t[3] ||= [f("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36),
			f("div", {
				ref_key: "thumbRef2",
				ref: R,
				style: h(oe.value),
				class: "ui-slider__thumb",
				tabindex: "0",
				onKeydown: t[1] ||= (e) => $(e, 1)
			}, [...t[4] ||= [f("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36)
		])])]), f("div", M, [P.mode === "input" ? (g(), l(o, {
			key: 0,
			modelValue: z.value,
			"onUpdate:modelValue": t[2] ||= (e) => z.value = e,
			class: "ui-focused-border",
			onChange: Q
		}, null, 8, ["modelValue"])) : u("", !0)])], 2), q.value ? (g(), d("div", te, x(q.value), 1)) : u("", !0)], 2));
	}
});
export { N as default };

//# sourceMappingURL=SliderRange.vue2.js.map