import { r as a, m as pe, f as me, bV as fe, x as G, c7 as w, v as b, aB as O, j as l, aI as ge, aJ as he, b0 as be, aK as ye, ap as ve, c as S, F as we, aR as _, l as xe, E as J, _ as q } from "./index-6wLGsgHc.js";
import { I as Te } from "./uniqueId-DFKpdKNq-JXnJU4sg.js";
import { e as Ie } from "./InputInstructions-yTnPUqJo-Bm8iEcOD.js";
import { m as Ce } from "./FormClearHelper-Dgu5Halt-DyRdP6JG.js";
import { _ as ke } from "./sprintf-D5E86llw-yUkJWEcD.js";
import { a as Re } from "./input-BDVeiWWL-DJbU40h6.js";
var Q = /* @__PURE__ */ a.forwardRef(function(e, t) {
  var n = {
    fill: "currentColor",
    xmlns: "http://www.w3.org/2000/svg"
  };
  return /* @__PURE__ */ a.createElement(J, q({
    iconAttrs: n,
    iconVerticalAlign: "middle",
    iconViewBox: "0 0 8 8"
  }, e, {
    ref: t
  }), /* @__PURE__ */ a.createElement("path", {
    d: "M0 3v2h8V3H0z"
  }));
});
Q.displayName = "Minus";
var Y = /* @__PURE__ */ a.forwardRef(function(e, t) {
  var n = {
    fill: "currentColor",
    xmlns: "http://www.w3.org/2000/svg"
  };
  return /* @__PURE__ */ a.createElement(J, q({
    iconAttrs: n,
    iconVerticalAlign: "middle",
    iconViewBox: "0 0 8 8"
  }, e, {
    ref: t
  }), /* @__PURE__ */ a.createElement("path", {
    d: "M3 0v3H0v2h3v3h2V5h3V3H5V0H3z"
  }));
});
Y.displayName = "Plus";
const Ee = /* @__PURE__ */ S("div", {
  target: "e116k4er3"
})(({
  theme: e
}) => ({
  display: "flex",
  flexDirection: "row",
  flexWrap: "nowrap",
  alignItems: "center",
  height: e.sizes.minElementHeight,
  // Mimic the baseweb's borders here, so we can apply the focus style
  // to the entire container and not only the input itself
  borderWidth: e.sizes.borderWidth,
  borderStyle: "solid",
  borderColor: e.colors.widgetBorderColor ?? e.colors.secondaryBg,
  transitionDuration: "200ms",
  transitionProperty: "border",
  transitionTimingFunction: "cubic-bezier(0.2, 0.8, 0.4, 1)",
  borderRadius: e.radii.default,
  overflow: "hidden",
  // Fix rounded corner being overlaid with corner of internal input.
  "&.focused": {
    borderColor: e.colors.primary
  },
  input: {
    MozAppearance: "textfield",
    "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
      WebkitAppearance: "none",
      margin: e.spacing.none
    }
  }
}), ""), Se = /* @__PURE__ */ S("div", {
  target: "e116k4er2"
})({
  name: "76z9jo",
  styles: "display:flex;flex-direction:row;align-self:stretch"
}), K = /* @__PURE__ */ S("button", {
  target: "e116k4er1"
})(({
  theme: e
}) => ({
  margin: e.spacing.none,
  border: "none",
  height: e.sizes.full,
  display: "flex",
  alignItems: "center",
  width: e.sizes.numberInputControlsWidth,
  justifyContent: "center",
  color: e.colors.bodyText,
  transition: "color 300ms, backgroundColor 300ms",
  backgroundColor: e.colors.secondaryBg,
  "&:hover:enabled, &:focus:enabled": {
    color: e.colors.white,
    backgroundColor: e.colors.primary,
    transition: "none",
    outline: "none"
  },
  "&:active": {
    outline: "none",
    border: "none"
  },
  "&:disabled": {
    cursor: "not-allowed",
    color: e.colors.fadedText40
  }
}), ""), Ve = /* @__PURE__ */ S("div", {
  target: "e116k4er0"
})(({
  theme: e,
  clearable: t
}) => ({
  position: "absolute",
  marginRight: e.spacing.twoXS,
  left: 0,
  // The instructions should be placed after the two controls
  // and the clear button if it's present.
  right: `calc(${e.sizes.numberInputControlsWidth} * 2 + ${t ? "1em" : "0em"})`
}), ""), Ne = xe.getLogger("NumberInput");
function ze(e) {
  return b(e) || e === "" ? void 0 : e;
}
const E = ({
  value: e,
  format: t,
  step: n,
  dataType: f
}) => {
  if (b(e)) return null;
  let r = ze(t);
  if (b(r) && G(n)) {
    const i = n.toString();
    f === w.DataType.FLOAT && n !== 0 && i.includes(".") && (r = `%0.${i.split(".")[1].length}f`);
  }
  if (b(r)) return e.toString();
  try {
    return ke.sprintf(r, e);
  } catch (i) {
    return Ne.warn(`Error in sprintf(${r}, ${e}): ${i}`), String(e);
  }
}, je = (e, t, n) => b(e) ? !1 : e - t >= n, De = (e, t, n) => b(e) ? !1 : e + t <= n, We = (e) => (e.element.dataType === w.DataType.INT ? e.widgetMgr.getIntValue(e.element) : e.widgetMgr.getDoubleValue(e.element)) ?? e.element.default ?? null, X = ({
  step: e,
  dataType: t
}) => e || (t === w.DataType.INT ? 1 : 0.01), Fe = ({
  disabled: e,
  element: t,
  widgetMgr: n,
  fragmentId: f
}) => {
  const r = pe(), {
    dataType: i,
    id: V,
    formId: m,
    default: W,
    format: g,
    icon: N,
    min: y,
    max: v
  } = t, {
    width: F,
    elementRef: Z
  } = me(), [s, ee] = a.useState(() => X(t)), L = We({
    element: t,
    widgetMgr: n
  }), [h, x] = a.useState(!1), [d, T] = a.useState(L), [B, U] = a.useState(!1), C = a.useRef(null), M = a.useRef(Te("number_input_")), [A, I] = a.useState(() => E({
    value: L,
    dataType: i,
    format: g,
    step: s
  })), k = je(d, s, y), R = De(d, s, v), H = fe({
    formId: m
  }), te = H ? n.allowFormEnterToSubmit(m) : h, re = B && F > r.breakpoints.hideWidgetDetails;
  a.useEffect(() => {
    ee(X({
      step: t.step,
      dataType: t.dataType
    }));
  }, [t.dataType, t.step]), a.useEffect(() => {
    h || I(E({
      value: d,
      dataType: i,
      format: g,
      step: s
    }));
  }, [i, g, s]);
  const c = a.useCallback(({
    value: o,
    source: u
  }) => {
    if (G(o) && (y > o || o > v)) C.current?.reportValidity();
    else {
      const p = o ?? W ?? null;
      switch (i) {
        case w.DataType.INT:
          n.setIntValue({
            id: V,
            formId: m
          }, p, u, f);
          break;
        case w.DataType.FLOAT:
          n.setDoubleValue({
            id: V,
            formId: m
          }, p, u, f);
          break;
        default:
          throw new Error("Invalid data type");
      }
      x(!1), T(p), I(E({
        value: p,
        dataType: i,
        format: g,
        step: s
      }));
    }
  }, [y, v, C, n, f, s, i, V, m, W, g]), ae = a.useCallback(() => {
    h && c({
      value: d,
      source: {
        fromUi: !0
      }
    }), U(!1);
  }, [h, d, c]), oe = a.useCallback(() => {
    U(!0);
  }, []), $ = a.useCallback(() => {
    const {
      value: o
    } = t;
    t.setValue = !1, T(o ?? null), I(E({
      value: o ?? null,
      dataType: i,
      format: g,
      step: s
    })), c({
      value: o ?? null,
      source: {
        fromUi: !1
      }
    });
  }, [t, s, c, i, g]);
  a.useEffect(() => {
    t.setValue ? $() : c({
      value: d,
      source: {
        fromUi: !1
      }
    });
    const o = C.current;
    if (o) {
      const u = (p) => {
        p.preventDefault();
      };
      return o.addEventListener("wheel", u), () => {
        o.removeEventListener("wheel", u);
      };
    }
  }, []), t.setValue && $();
  const z = b(t.default) && !e, ne = a.useCallback(() => {
    const o = t.default ?? null;
    T(o), c({
      value: o,
      source: {
        fromUi: !0
      }
    });
  }, [t]);
  Ce({
    element: t,
    widgetMgr: n,
    onFormCleared: ne
  });
  const se = (o) => {
    const {
      value: u
    } = o.target;
    if (u === "") x(!0), T(null), I(null);
    else {
      let p;
      t.dataType === w.DataType.INT ? p = parseInt(u, 10) : p = parseFloat(u), x(!0), T(p), I(u);
    }
  }, j = a.useCallback(() => {
    R && (x(!0), c({
      value: (d ?? y) + s,
      source: {
        fromUi: !0
      }
    }));
  }, [d, y, s, R]), D = a.useCallback(() => {
    k && (x(!0), c({
      value: (d ?? v) - s,
      source: {
        fromUi: !0
      }
    }));
  }, [d, v, s, k]), le = a.useCallback((o) => {
    const {
      key: u
    } = o;
    switch (u) {
      case "ArrowUp":
        o.preventDefault(), j();
        break;
      case "ArrowDown":
        o.preventDefault(), D();
        break;
    }
  }, [j, D]), ie = a.useCallback((o) => {
    o.key === "Enter" && (h && c({
      value: d,
      source: {
        fromUi: !0
      }
    }), n.allowFormEnterToSubmit(m) && n.submitForm(m, f));
  }, [h, d, c, n, m, f]), P = N?.startsWith(":material"), de = P ? "lg" : "base", ue = (
    // Account for icon size + its left/right padding
    O(r.iconSizes.lg) + 2 * O(r.spacing.twoXS)
  ), ce = N ? r.breakpoints.hideNumberInputControls + ue : r.breakpoints.hideNumberInputControls;
  return /* @__PURE__ */ l.jsxs("div", {
    className: "stNumberInput",
    "data-testid": "stNumberInput",
    ref: Z,
    children: [/* @__PURE__ */ l.jsx(ge, {
      label: t.label,
      disabled: e,
      labelVisibility: he(t.labelVisibility?.value),
      htmlFor: M.current,
      children: t.help && /* @__PURE__ */ l.jsx(be, {
        children: /* @__PURE__ */ l.jsx(ye, {
          content: t.help,
          placement: ve.TOP_RIGHT
        })
      })
    }), /* @__PURE__ */ l.jsxs(Ee, {
      className: B ? "focused" : "",
      "data-testid": "stNumberInputContainer",
      children: [/* @__PURE__ */ l.jsx(Re, {
        type: "number",
        inputRef: C,
        value: A ?? "",
        placeholder: t.placeholder,
        onBlur: ae,
        onFocus: oe,
        onChange: se,
        onKeyPress: ie,
        onKeyDown: le,
        clearable: z,
        clearOnEscape: z,
        disabled: e,
        "aria-label": t.label,
        startEnhancer: t.icon && /* @__PURE__ */ l.jsx(we, {
          "data-testid": "stNumberInputIcon",
          iconValue: t.icon,
          size: de
        }),
        id: M.current,
        overrides: {
          ClearIconContainer: {
            style: {
              padding: 0
            }
          },
          ClearIcon: {
            props: {
              overrides: {
                Svg: {
                  style: {
                    color: r.colors.grayTextColor,
                    // setting this width and height makes the clear-icon align with dropdown arrows of other input fields
                    padding: r.spacing.threeXS,
                    height: r.sizes.clearIconSize,
                    width: r.sizes.clearIconSize,
                    ":hover": {
                      fill: r.colors.bodyText
                    }
                  }
                }
              }
            }
          },
          Input: {
            props: {
              "data-testid": "stNumberInputField",
              step: s,
              min: y,
              max: v,
              // We specify the type as "number" to have numeric keyboard on mobile devices.
              // We also set inputMode to "" since by default BaseWeb sets "text",
              // and for "decimal" / "numeric" IOS shows keyboard without a minus sign.
              type: "number",
              inputMode: ""
            },
            style: {
              fontWeight: r.fontWeights.normal,
              lineHeight: r.lineHeights.inputWidget,
              // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
              paddingRight: r.spacing.sm,
              paddingLeft: r.spacing.md,
              paddingBottom: r.spacing.sm,
              paddingTop: r.spacing.sm,
              "::placeholder": {
                color: r.colors.fadedText60
              }
            }
          },
          InputContainer: {
            style: () => ({
              borderTopRightRadius: 0,
              borderBottomRightRadius: 0
            })
          },
          Root: {
            style: {
              // Baseweb requires long-hand props, short-hand leads to weird bugs & warnings.
              borderTopRightRadius: 0,
              borderBottomRightRadius: 0,
              borderTopLeftRadius: 0,
              borderBottomLeftRadius: 0,
              borderLeftWidth: 0,
              borderRightWidth: 0,
              borderTopWidth: 0,
              borderBottomWidth: 0,
              paddingRight: 0,
              paddingLeft: N ? r.spacing.sm : 0
            }
          },
          StartEnhancer: {
            style: {
              paddingLeft: 0,
              paddingRight: 0,
              // Keeps emoji icons from being cut off on the right
              minWidth: r.iconSizes.lg,
              // Material icons color changed as inactionable
              color: P ? r.colors.fadedText60 : "inherit"
            }
          }
        }
      }), F > ce && /* @__PURE__ */ l.jsxs(Se, {
        children: [/* @__PURE__ */ l.jsx(K, {
          "data-testid": "stNumberInputStepDown",
          onClick: D,
          disabled: !k || e,
          tabIndex: -1,
          children: /* @__PURE__ */ l.jsx(_, {
            content: Q,
            size: "xs",
            color: k ? "inherit" : r.colors.fadedText40
          })
        }), /* @__PURE__ */ l.jsx(K, {
          "data-testid": "stNumberInputStepUp",
          onClick: j,
          disabled: !R || e,
          tabIndex: -1,
          children: /* @__PURE__ */ l.jsx(_, {
            content: Y,
            size: "xs",
            color: R ? "inherit" : r.colors.fadedText40
          })
        })]
      })]
    }), re && /* @__PURE__ */ l.jsx(Ve, {
      clearable: z,
      children: /* @__PURE__ */ l.jsx(Ie, {
        dirty: h,
        value: A ?? "",
        inForm: H,
        allowEnterToSubmit: te
      })
    })]
  });
}, $e = a.memo(Fe);
export {
  $e as default
};
//# sourceMappingURL=index-B_WoYQrI-Dzzc8A2V.js.map
