(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".pl-number-field{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);--color-hint: #9d9eae}.pl-number-field ::placeholder{color:#cfd1db;opacity:1}.pl-number-field__main-wrapper{height:40px;position:relative}.pl-number-field__wrapper{padding-left:12px;border-radius:6px}.pl-number-field__wrapper.withoutArrows{padding-right:12px}.pl-number-field__icons{width:40px;border-radius:0 6px 6px 0;border-left:1px solid var(--contour-color)}.pl-number-field__icon{line-height:0}.pl-number-field__icon.disabled{cursor:not-allowed;position:relative;z-index:1}.pl-number-field__icon.disabled svg path{fill:#cfd1db}.pl-number-field__icon:hover{background-color:#9babcc29}.pl-number-field__icon:first-child{border-bottom:1px solid var(--contour-color)}.pl-number-field__hint{margin-top:3px;color:var(--color-hint)}.pl-number-field__error{margin-top:3px;color:var(--txt-error);font-size:12px;font-weight:500;line-height:16px}.pl-number-field input{outline:none;border:none;width:100%;background:unset;text-overflow:ellipsis}.pl-number-field__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;transition:all .3s}.pl-number-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-number-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-number-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--color-hint: var(--txt-error)}.pl-number-field.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);cursor:not-allowed}.pl-number-field.disabled label,.pl-number-field.disabled .mi-number-field__hint,.pl-number-field.disabled input{color:var(--contour-color)}.pl-number-field.disabled svg path{fill:var(--contour-color)}.pl-number-field.disabled .mi-number-field__icons{pointer-events:none}.pl-number-field label{position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);display:flex;align-items:center;padding:0 4px;overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);transition:color .3s}.pl-number-field label .required{display:inline-block;font-weight:500;font-size:12px;line-height:16px;color:var(--txt-error);margin-right:4px}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
import { defineComponent as S, mergeModels as A, useModel as R, useSlots as F, ref as f, computed as i, watch as $, createElementBlock as c, openBlock as d, normalizeClass as p, createElementVNode as r, createCommentVNode as m, createVNode as j, withDirectives as T, createTextVNode as U, createBlock as K, toDisplayString as _, unref as C, withCtx as P, renderSlot as Z, vModelText as q } from "vue";

import z from "../../utils/DoubleContour.vue.js";
import { useLabelNotch as G } from "../../utils/useLabelNotch.js";
import H from "../PlTooltip/PlTooltip.vue.js";
import { parseNumber as M } 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"
}, ue = /* @__PURE__ */ S({
  ...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 }
  }, {
    modelValue: { required: !0 },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(g) {
    const t = g, n = R(g, "modelValue"), D = F(), V = f(), v = f();
    G(V);
    function x(e) {
      return e === void 0 ? "" : String(+e);
    }
    const u = i(() => M(t, s.value)), w = f(void 0), O = () => w.value = void 0;
    $(n, (e) => {
      const l = u.value;
      (l.error || e !== l.value) && O();
    });
    const s = i({
      get() {
        return w.value ?? x(n.value);
      },
      set(e) {
        const l = M(t, e);
        w.value = l.cleanInput, l.error || t.updateOnEnterOrClickOutside ? v.value.value = l.cleanInput : n.value = l.value;
      }
    }), h = f(!1);
    function E() {
      u.value.error === void 0 && (n.value = u.value.value);
    }
    const b = i(() => {
      let e = [];
      t.errorMessage && e.push(t.errorMessage);
      const l = u.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 = i(() => {
      const e = u.value;
      return t.maxValue !== void 0 && e.value !== void 0 ? e.value >= t.maxValue : !1;
    }), k = i(() => {
      const e = u.value;
      return t.minValue !== void 0 && e.value !== void 0 ? e.value <= t.minValue : !1;
    }), a = i(
      () => {
        var e;
        return 10 ** (((e = t.step.toString().split(".").at(1)) == null ? void 0 : e.length) ?? 0);
      }
    );
    function B() {
      const l = u.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, n.value = t.maxValue !== void 0 ? Math.min(t.maxValue, o) : o;
      }
    }
    function L() {
      const l = u.value.value;
      if (!k.value) {
        let o;
        l === void 0 ? o = 0 : o = ((l || 0) * a.value - t.step * a.value) / a.value, n.value = t.minValue !== void 0 ? Math.max(t.minValue, o) : o;
      }
    }
    function I(e) {
      var l, o;
      t.updateOnEnterOrClickOutside && (e.code === "Escape" && (s.value = x(n.value), (l = v.value) == null || l.blur()), e.code === "Enter" && ((o = v.value) == null || o.blur())), e.code === "Enter" && (s.value = String(n.value)), ["ArrowDown", "ArrowUp"].includes(e.code) && e.preventDefault(), t.useIncrementButtons && e.code === "ArrowUp" && B(), t.useIncrementButtons && e.code === "ArrowDown" && L();
    }
    const N = (e) => {
      e.detail > 1 && e.preventDefault();
    };
    return (e, l) => (d(), c("div", {
      ref_key: "rootRef",
      ref: V,
      class: p([{ error: !!b.value.trim(), disabled: e.disabled }, "pl-number-field d-flex-column"]),
      onKeydown: l[3] || (l[3] = (o) => I(o))
    }, [
      r("div", J, [
        j(z, { class: "pl-number-field__contour" }),
        r("div", {
          class: p(["pl-number-field__wrapper flex-grow d-flex flex-align-center", { withoutArrows: !e.useIncrementButtons }])
        }, [
          e.label ? (d(), c("label", Q, [
            U(_(e.label) + " ", 1),
            C(D).tooltip ? (d(), K(C(H), {
              key: 0,
              class: "info",
              position: "top"
            }, {
              tooltip: P(() => [
                Z(e.$slots, "tooltip")
              ]),
              _: 3
            })) : m("", !0)
          ])) : m("", !0),
          T(r("input", {
            ref_key: "inputRef",
            ref: v,
            "onUpdate:modelValue": l[0] || (l[0] = (o) => s.value = o),
            disabled: e.disabled,
            placeholder: e.placeholder,
            class: "text-s flex-grow",
            onFocusin: l[1] || (l[1] = (o) => h.value = !0),
            onFocusout: l[2] || (l[2] = (o) => {
              h.value = !1, E();
            })
          }, null, 40, W), [
            [q, s.value]
          ])
        ], 2),
        e.useIncrementButtons ? (d(), c("div", {
          key: 0,
          class: "pl-number-field__icons d-flex-column",
          onMousedown: N
        }, [
          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)) : m("", !0)
      ]),
      b.value.trim() ? (d(), c("div", X, _(b.value), 1)) : m("", !0)
    ], 34));
  }
});
export {
  ue as default
};
//# sourceMappingURL=PlNumberField.vue.js.map
