import { defineComponent as z, useSlots as F, reactive as I, computed as r, ref as v, watch as K, createElementBlock as i, openBlock as s, normalizeClass as R, createElementVNode as l, createCommentVNode as a, createBlock as P, toDisplayString as m, unref as _, withCtx as U, renderSlot as O, normalizeStyle as h, 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 b } 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"
}, _e = /* @__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(n, { emit: A }) {
    const B = F(), V = A, e = n, d = I({
      deltaValue: 0
    }), y = r(() => e.max - e.min), x = r(() => b((e.modelValue ?? 0) + d.deltaValue, e.min, e.max)), c = v(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(() => (x.value - e.min) / y.value), N = r(() => ({
      right: Math.ceil((1 - k.value) * 100) + "%"
    })), E = r(() => ({
      right: `calc(${Math.ceil((1 - k.value) * 100)}%) `
    })), w = v(), S = v();
    K(
      () => e.modelValue,
      (t) => {
        c.value = t;
      }
    );
    function p(t) {
      const o = b(t, e.min, e.max);
      return Math.round((o + Number.EPSILON) * (1 / e.step)) / (1 / e.step);
    }
    G(S, (t) => {
      var o;
      H((o = _(w)) == null ? void 0 : o.getBoundingClientRect(), (u) => {
        const { dx: f } = t;
        d.deltaValue = f / u.width * y.value, c.value = p(b((e.modelValue ?? 0) + d.deltaValue, e.min, e.max)), t.stop && (V("update:modelValue", p(x.value)), d.deltaValue = 0);
      });
    });
    function M(t) {
      V("update:modelValue", p(t));
    }
    function D(t) {
      M(+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;
      M(e.modelValue + o);
    }
    return (t, o) => (s(), i("div", {
      class: R([e.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"])
    }, [
      l("div", {
        class: R([`ui-slider__mode-${e.mode}`, "ui-slider"])
      }, [
        l("div", W, [
          l("div", X, [
            n.label ? (s(), i("label", Y, [
              l("span", null, m(n.label), 1),
              _(B).tooltip ? (s(), P(_(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, m(c.value) + m(n.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: h(N.value)
                }, null, 4)
              ], 512)
            ]),
            l("div", le, [
              e.breakpoints ? (s(!0), i(j, { key: 0 }, q(_($), (u, f) => (s(), i("div", {
                key: f,
                style: h({ right: `${u}%` }),
                class: "ui-slider__thumb-step"
              }, null, 4))), 128)) : a("", !0),
              l("div", {
                ref_key: "thumbRef",
                ref: S,
                tabindex: "0",
                class: "ui-slider__thumb ui-slider__thumb-active",
                style: h(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: c.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, m(g.value), 1)) : a("", !0)
    ], 2));
  }
});
export {
  _e as default
};
//# sourceMappingURL=Slider.vue.js.map
