import { defineComponent as _, mergeModels as A, useModel as R, useSlots as $, ref as c, computed as s, watch as F, createElementBlock as m, openBlock as v, normalizeClass as p, createElementVNode as r, createCommentVNode as g, createVNode as P, withDirectives as j, createTextVNode as T, createBlock as U, toDisplayString as M, unref as C, withCtx as K, renderSlot as Z, vModelText as q } from "vue";
/* empty css                     */
import z from "../../utils/DoubleContour.vue2.js";
/* empty css                            */
import { useLabelNotch as G } from "../../utils/useLabelNotch.js";
import H from "../PlTooltip/PlTooltip.vue.js";
import { parseNumber as D } from "./parseNumber.js";
const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
  key: 0,
  class: "text-description"
}, W = ["disabled", "placeholder"], X = {
  key: 0,
  class: "pl-number-field__error"
}, Y = {
  name: "PlNumberField"
}, ie = /* @__PURE__ */ _({
  ...Y,
  props: /* @__PURE__ */ A({
    disabled: { type: Boolean },
    label: { default: void 0 },
    placeholder: { default: void 0 },
    step: { default: 1 },
    minValue: { default: void 0 },
    maxValue: { default: void 0 },
    useIncrementButtons: { type: Boolean, default: !0 },
    updateOnEnterOrClickOutside: { type: Boolean },
    errorMessage: { default: void 0 },
    validate: { type: Function, default: void 0 },
    groupPosition: { default: void 0 }
  }, {
    modelValue: { required: !0 },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(n) {
    const t = n, u = R(n, "modelValue"), O = $(), V = c(), f = c();
    G(V);
    function b(e) {
      return e === void 0 ? "" : String(+e);
    }
    const i = s(() => D(t, d.value)), w = c(void 0), E = () => w.value = void 0;
    F(u, (e) => {
      const l = i.value;
      (l.error || e !== l.value) && E();
    });
    const d = s({
      get() {
        return w.value ?? b(u.value);
      },
      set(e) {
        const l = D(t, e);
        w.value = l.cleanInput, l.error || t.updateOnEnterOrClickOutside ? f.value.value = l.cleanInput : u.value = l.value;
      }
    }), h = c(!1);
    function I() {
      i.value.error === void 0 && (u.value = i.value.value);
    }
    const x = s(() => {
      let e = [];
      t.errorMessage && e.push(t.errorMessage);
      const l = i.value;
      if (l.error)
        e.push(l.error.message);
      else if (t.validate && l.value !== void 0) {
        const o = t.validate(l.value);
        o && e.push(o);
      }
      return e = [...e], e.join(" ");
    }), y = s(() => {
      const e = i.value;
      return t.maxValue !== void 0 && e.value !== void 0 ? e.value >= t.maxValue : !1;
    }), k = s(() => {
      const e = i.value;
      return t.minValue !== void 0 && e.value !== void 0 ? e.value <= t.minValue : !1;
    }), a = s(
      () => {
        var e;
        return 10 ** (((e = t.step.toString().split(".").at(1)) == null ? void 0 : e.length) ?? 0);
      }
    );
    function B() {
      const l = i.value.value;
      if (!y.value) {
        let o;
        l === void 0 ? o = t.minValue ? t.minValue : 0 : o = ((l || 0) * a.value + t.step * a.value) / a.value, u.value = t.maxValue !== void 0 ? Math.min(t.maxValue, o) : o;
      }
    }
    function L() {
      const l = i.value.value;
      if (!k.value) {
        let o;
        l === void 0 ? o = 0 : o = ((l || 0) * a.value - t.step * a.value) / a.value, u.value = t.minValue !== void 0 ? Math.max(t.minValue, o) : o;
      }
    }
    function N(e) {
      var l, o;
      t.updateOnEnterOrClickOutside && (e.code === "Escape" && (d.value = b(u.value), (l = f.value) == null || l.blur()), e.code === "Enter" && ((o = f.value) == null || o.blur())), e.code === "Enter" && (d.value = String(u.value)), ["ArrowDown", "ArrowUp"].includes(e.code) && e.preventDefault(), t.useIncrementButtons && e.code === "ArrowUp" && B(), t.useIncrementButtons && e.code === "ArrowDown" && L();
    }
    const S = (e) => {
      e.detail > 1 && e.preventDefault();
    };
    return (e, l) => (v(), m("div", {
      ref_key: "rootRef",
      ref: V,
      class: p([{ error: !!x.value.trim(), disabled: n.disabled }, "pl-number-field d-flex-column"]),
      onKeydown: l[3] || (l[3] = (o) => N(o))
    }, [
      r("div", J, [
        P(z, {
          class: "pl-number-field__contour",
          "group-position": n.groupPosition
        }, null, 8, ["group-position"]),
        r("div", {
          class: p(["pl-number-field__wrapper flex-grow d-flex flex-align-center", { withoutArrows: !n.useIncrementButtons }])
        }, [
          n.label ? (v(), m("label", Q, [
            T(M(n.label) + " ", 1),
            C(O).tooltip ? (v(), U(C(H), {
              key: 0,
              class: "info",
              position: "top"
            }, {
              tooltip: K(() => [
                Z(e.$slots, "tooltip")
              ]),
              _: 3
            })) : g("", !0)
          ])) : g("", !0),
          j(r("input", {
            ref_key: "inputRef",
            ref: f,
            "onUpdate:modelValue": l[0] || (l[0] = (o) => d.value = o),
            disabled: n.disabled,
            placeholder: n.placeholder,
            class: "text-s flex-grow",
            onFocusin: l[1] || (l[1] = (o) => h.value = !0),
            onFocusout: l[2] || (l[2] = (o) => {
              h.value = !1, I();
            })
          }, null, 40, W), [
            [q, d.value]
          ])
        ], 2),
        n.useIncrementButtons ? (v(), m("div", {
          key: 0,
          class: "pl-number-field__icons d-flex-column",
          onMousedown: S
        }, [
          r("div", {
            class: p([{ disabled: y.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
            onClick: B
          }, [...l[4] || (l[4] = [
            r("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              width: "16",
              height: "16",
              viewBox: "0 0 16 16",
              fill: "none"
            }, [
              r("path", {
                "fill-rule": "evenodd",
                "clip-rule": "evenodd",
                d: "M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z",
                fill: "#110529"
              })
            ], -1)
          ])], 2),
          r("div", {
            class: p([{ disabled: k.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
            onClick: L
          }, [...l[5] || (l[5] = [
            r("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              width: "16",
              height: "16",
              viewBox: "0 0 16 16",
              fill: "none"
            }, [
              r("path", {
                "fill-rule": "evenodd",
                "clip-rule": "evenodd",
                d: "M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z",
                fill: "#110529"
              })
            ], -1)
          ])], 2)
        ], 32)) : g("", !0)
      ]),
      x.value.trim() ? (v(), m("div", X, M(x.value), 1)) : g("", !0)
    ], 34));
  }
});
export {
  ie as default
};
//# sourceMappingURL=PlNumberField.vue.js.map
