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