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 { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, watch as C, withCtx as w } 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" }, N = ["value"], P = {
	key: 0,
	class: "ui-slider__error"
}, F = /* @__PURE__ */ f({
	__name: "Slider",
	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(f, { emit: F }) {
		let I = S(), L = F, R = f, z = g({ deltaValue: 0 }), B = s(() => R.max - R.min), V = s(() => n((R.modelValue ?? 0) + z.deltaValue, R.min, R.max)), H = _(R.modelValue), U = s(() => {
			let e = R.modelValue;
			return Number.isFinite(e) ? e < R.min ? `Min value: ${R.min}` : e > R.max ? `Max value: ${R.max}` : a(R.error) : "Not a number";
		}), W = i(s(() => R)), G = s(() => (V.value - R.min) / B.value), K = s(() => ({ right: Math.ceil((1 - G.value) * 100) + "%" })), q = s(() => ({ right: `calc(${Math.ceil((1 - G.value) * 100)}%) ` })), J = _(), Y = _();
		C(() => R.modelValue, (e) => {
			H.value = e;
		});
		function X(e) {
			let t = n(e, R.min, R.max);
			return Math.round((t + 2 ** -52) * (1 / R.step)) / (1 / R.step);
		}
		e(Y, (e) => {
			t(x(J)?.getBoundingClientRect(), (t) => {
				let { dx: r } = e;
				z.deltaValue = r / t.width * B.value, H.value = X(n((R.modelValue ?? 0) + z.deltaValue, R.min, R.max)), e.stop && (L("update:modelValue", X(V.value)), z.deltaValue = 0);
			});
		});
		function Z(e) {
			L("update:modelValue", X(e));
		}
		function Q(e) {
			Z(+e.target.value);
		}
		function $(e) {
			[
				"ArrowDown",
				"ArrowUp",
				"ArrowRight",
				"ArrowLeft",
				"Enter"
			].includes(e.code) && e.preventDefault();
			let t = e.code === "ArrowUp" || e.code === "ArrowRight" ? R.step * 1 : e.code === "ArrowDown" || e.code === "ArrowLeft" ? R.step * -1 : 0;
			Z(R.modelValue + t);
		}
		return (e, t) => (h(), u("div", { class: p([R.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"]) }, [d("div", { class: p([`ui-slider__mode-${R.mode}`, "ui-slider"]) }, [d("div", T, [d("div", E, [f.label ? (h(), u("label", D, [d("span", null, b(f.label), 1), x(I).tooltip ? (h(), c(x(r), {
			key: 0,
			class: "info",
			position: "top"
		}, {
			tooltip: w(() => [y(e.$slots, "tooltip")]),
			_: 3
		})) : l("", !0)])) : l("", !0), R.mode === "text" ? (h(), u("div", O, b(H.value) + b(f.measure), 1)) : l("", !0)]), d("div", k, [d("div", A, [d("div", {
			ref_key: "barRef",
			ref: J,
			class: "ui-slider__bar"
		}, [d("div", {
			class: "ui-slider__progress",
			style: m(K.value)
		}, null, 4)], 512)]), d("div", j, [R.breakpoints ? (h(!0), u(o, { key: 0 }, v(x(W), (e, t) => (h(), u("div", {
			key: t,
			style: m({ right: `${e}%` }),
			class: "ui-slider__thumb-step"
		}, null, 4))), 128)) : l("", !0), d("div", {
			ref_key: "thumbRef",
			ref: Y,
			tabindex: "0",
			class: "ui-slider__thumb ui-slider__thumb-active",
			style: m(q.value),
			onKeydown: $
		}, [...t[1] ||= [d("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36)])])]), d("div", M, [R.mode === "input" ? (h(), u("input", {
			key: 0,
			value: H.value,
			class: "ui-slider__value text-s",
			onChange: t[0] ||= (e) => Q(e)
		}, null, 40, N)) : l("", !0)])], 2), U.value ? (h(), u("div", P, b(U.value), 1)) : l("", !0)], 2));
	}
});
export { F as default };

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