@stihl-design-system/components/chunks/InputStepper.CNfA7g7U.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as I, jsxs as ft } from "react/jsx-runtime";
import { d as Lt } from "./index.CgTHIF3K.js";
import { c as R } from "./index.CEyLAtio.js";
import { forwardRef as Et, useState as xe, useRef as mt, useEffect as bt } from "react";
import { h as Rt } from "./has-window.ut_-aShB.js";
import { u as kt } from "./useBreakpoint.CMOR9ZOB.js";
import { u as xt } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { Asterisk as Ct } from "../asterisk.CR60hx8S.js";
import { DSButton as yt } from "../button.Bt0-bRGX.js";
import { M as _t, a as ht } from "./Input.utils.CCYTBWD_.js";
import { DSSystemFeedback as Ft } from "../systemfeedback.BpKZEv4U.js";
import { g as Ge } from "./helpers.CcqWV-wZ.js";
import '../assets/InputStepper.DzzrAdma.css';const Pt = "ds-input-stepper_input_1m4pp_1", $t = "ds-input-stepper_input--invalid_1m4pp_113", Ht = "ds-input-stepper_input--small_1m4pp_120", Vt = "ds-input-stepper_input--has-affix_1m4pp_191", Tt = "ds-input-stepper_input--is-ready_1m4pp_205", qt = "ds-input-stepper_root_1m4pp_215", Wt = "ds-input-stepper_hint_1m4pp_224", Mt = "ds-input-stepper_label_1m4pp_224", Xt = "ds-input-stepper_wrapper_1m4pp_228", jt = "ds-input-stepper_affix_1m4pp_234", zt = "ds-input-stepper_affix--small_1m4pp_255", Gt = "ds-input-stepper_affix--disabled_1m4pp_268", Ot = "ds-input-stepper_prefix_1m4pp_276", Ut = "ds-input-stepper_affix--readonly_1m4pp_279", Jt = "ds-input-stepper_suffix_1m4pp_289", Kt = "ds-input-stepper_action-button_1m4pp_296", Qt = "ds-input-stepper_label--hidden_1m4pp_314", Yt = "ds-input-stepper_label--disabled_1m4pp_327", Zt = "ds-input-stepper_feedback_1m4pp_347", en = "ds-input-stepper_second-action-button_1m4pp_361", tn = "ds-input-stepper_value-announcer_1m4pp_365", t = {
  input: Pt,
  inputInvalid: $t,
  inputSmall: Ht,
  inputHasAffix: Vt,
  inputIsReady: Tt,
  root: qt,
  hint: Wt,
  label: Mt,
  wrapper: Xt,
  affix: jt,
  affixSmall: zt,
  affixDisabled: Gt,
  prefix: Ot,
  affixReadonly: Ut,
  suffix: Jt,
  actionButton: Kt,
  labelHidden: Qt,
  labelDisabled: Yt,
  feedback: Zt,
  secondActionButton: en,
  valueAnnouncer: tn
}, nn = ({
  id: k,
  label: A,
  prefix: e,
  suffix: d
}) => {
  if (!k)
    throw new Error(Ge("DSInputStepper", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputStepper component.'));
  if (!A)
    throw new Error(Ge("DSInputStepper", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputStepper component. If you don't want to display a label, set hideLabel={true}.`));
  e && e.length > _t && console.warn(Ge("DSInputStepper", `Prefix length must not exceed ${_t} characters.`)), d && d.length > ht && console.warn(Ge("DSInputStepper", `Suffix length must not exceed ${ht} characters.`));
}, sn = Et((k, A) => {
  const e = Lt.c(187);
  let d, C, m, s, F, b, _, l, g, i, u, te, ne, se, le, ie, ae, oe, pe, re, ce, h;
  e[0] !== k ? ({
    id: s,
    label: b,
    announcementText: te,
    className: d,
    disabled: se,
    decreaseAmountButtonProps: C,
    hint: m,
    hideLabel: le,
    invalid: ie,
    increaseAmountButtonProps: F,
    prefix: l,
    max: ae,
    min: oe,
    readonly: pe,
    required: re,
    size: ce,
    step: ne,
    suffix: i,
    systemFeedback: u,
    value: h,
    onChange: _,
    ...g
  } = k, e[0] = k, e[1] = d, e[2] = C, e[3] = m, e[4] = s, e[5] = F, e[6] = b, e[7] = _, e[8] = l, e[9] = g, e[10] = i, e[11] = u, e[12] = te, e[13] = ne, e[14] = se, e[15] = le, e[16] = ie, e[17] = ae, e[18] = oe, e[19] = pe, e[20] = re, e[21] = ce, e[22] = h) : (d = e[1], C = e[2], m = e[3], s = e[4], F = e[5], b = e[6], _ = e[7], l = e[8], g = e[9], i = e[10], u = e[11], te = e[12], ne = e[13], se = e[14], le = e[15], ie = e[16], ae = e[17], oe = e[18], pe = e[19], re = e[20], ce = e[21], h = e[22]);
  const ue = te === void 0 ? "Value changed to" : te, r = se === void 0 ? !1 : se, St = le === void 0 ? !1 : le, o = ie === void 0 ? !1 : ie, P = ae === void 0 ? 100 : ae, $ = oe === void 0 ? 0 : oe, v = pe === void 0 ? !1 : pe, D = re === void 0 ? !1 : re, n = ce === void 0 ? "medium" : ce, de = ne === void 0 ? 1 : ne;
  process.env.NODE_ENV !== "production" && nn({
    id: s,
    label: b,
    prefix: l,
    suffix: i
  });
  let H;
  e[23] !== C ? (H = C || {}, e[23] = C, e[24] = H) : H = e[24];
  let V, fe;
  e[25] !== H ? ({
    label: fe,
    ...V
  } = H, e[25] = H, e[26] = V, e[27] = fe) : (V = e[26], fe = e[27]);
  const Oe = fe === void 0 ? "Decrease" : fe;
  let T;
  e[28] !== F ? (T = F || {}, e[28] = F, e[29] = T) : T = e[29];
  let q, me;
  e[30] !== T ? ({
    label: me,
    ...q
  } = T, e[30] = T, e[31] = q, e[32] = me) : (q = e[31], me = e[32]);
  const Ue = me === void 0 ? "Increase" : me, [be, It] = xe(!1), [x, Je] = xe(h), [y, vt] = xe(""), [Ke, At] = xe(!1);
  let ye;
  e[33] === Symbol.for("react.memo_cache_sentinel") ? (ye = {}, e[33] = ye) : ye = e[33];
  const [_e, gt] = xe(ye), S = mt(null);
  let Se;
  e[34] !== A ? (Se = (a) => {
    S.current = a, typeof A == "function" ? A(a) : A && (A.current = a);
  }, e[34] = A, e[35] = Se) : Se = e[35];
  const he = Se;
  let Ie;
  e[36] !== l ? (Ie = l == null ? void 0 : l.substring(0, _t), e[36] = l, e[37] = Ie) : Ie = e[37];
  const Qe = Ie, Ye = mt(null);
  let Ae;
  e[38] !== i ? (Ae = i == null ? void 0 : i.substring(0, ht), e[38] = i, e[39] = Ae) : Ae = e[39];
  const Ze = Ae, et = mt(null), ve = kt(St);
  let ge, De;
  e[40] !== h ? (ge = () => {
    h && Je(h);
  }, De = [h], e[40] = h, e[41] = ge, e[42] = De) : (ge = e[41], De = e[42]), bt(ge, De);
  let Ne, Be;
  e[43] !== y ? (Ne = () => {
    if (y) {
      const a = setTimeout(() => {
        vt("");
      }, 3e3);
      return () => clearTimeout(a);
    }
  }, Be = [y], e[43] = y, e[44] = Ne, e[45] = Be) : (Ne = e[44], Be = e[45]), bt(Ne, Be);
  let we, Le;
  e[46] === Symbol.for("react.memo_cache_sentinel") ? (we = () => {
    var f;
    const a = ln;
    return (f = S.current) == null || f.addEventListener("wheel", a, {
      passive: !1
    }), () => {
      var c;
      (c = S.current) == null || c.removeEventListener("wheel", a);
    };
  }, Le = [], e[46] = we, e[47] = Le) : (we = e[46], Le = e[47]), bt(we, Le);
  let Ee;
  e[48] !== n ? (Ee = () => {
    const a = n === "medium" ? 16 : 8, f = {};
    if (Ye.current) {
      const c = Ye.current.offsetWidth;
      f.paddingInlineStart = a + c + "px";
    }
    if (et.current) {
      const c = et.current.offsetWidth;
      f.paddingInlineEnd = a + c + "px";
    }
    gt(f), It(!0);
  }, e[48] = n, e[49] = Ee) : Ee = e[49];
  let Re;
  e[50] !== Ke || e[51] !== l || e[52] !== n || e[53] !== i ? (Re = [l, i, n, Ke], e[50] = Ke, e[51] = l, e[52] = n, e[53] = i, e[54] = Re) : Re = e[54], xt(Ee, Re);
  let ke, Ce;
  e[55] === Symbol.for("react.memo_cache_sentinel") ? (ke = () => {
    Rt && (async () => {
      "fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), At(!0));
    })();
  }, Ce = [], e[55] = ke, e[56] = Ce) : (ke = e[55], Ce = e[56]), xt(ke, Ce);
  const tt = n === "small";
  let W, M, X, j, z, G, N, O, U, B, w, L, E;
  if (e[57] !== ue || e[58] !== d || e[59] !== r || e[60] !== Qe || e[61] !== Ze || e[62] !== he || e[63] !== ve || e[64] !== m || e[65] !== s || e[66] !== _e || e[67] !== x || e[68] !== o || e[69] !== be || e[70] !== b || e[71] !== P || e[72] !== $ || e[73] !== _ || e[74] !== l || e[75] !== v || e[76] !== D || e[77] !== g || e[78] !== n || e[79] !== de || e[80] !== i || e[81] !== u || e[82] !== tt || e[83] !== y) {
    const a = R(t.affix, {
      [t.affixSmall]: tt,
      [t.affixDisabled]: r,
      [t.affixReadonly]: v
    }), f = `${s}-label`, c = `${s}-feedback`, Pe = `${s}-hint`, Y = `${s}-value-announcer`, Dt = m ? ` ${Pe}` : "";
    let $e;
    e[97] !== d ? ($e = R(t.root, d), e[97] = d, e[98] = $e) : $e = e[98];
    const Nt = $e, lt = n === "small", it = l || i;
    let He;
    e[99] !== o || e[100] !== be || e[101] !== lt || e[102] !== it ? (He = R(t.input, {
      [t.inputSmall]: lt,
      [t.inputInvalid]: o,
      [t.inputHasAffix]: it,
      [t.inputIsReady]: be
    }), e[99] = o, e[100] = be, e[101] = lt, e[102] = it, e[103] = He) : He = e[103];
    const at = He;
    let Ve;
    e[104] !== r || e[105] !== ve ? (Ve = R(t.label, {
      [t.labelHidden]: ve,
      [t.labelDisabled]: r
    }), e[104] = r, e[105] = ve, e[106] = Ve) : Ve = e[106];
    const ot = Ve, pt = n === "small";
    let Te;
    e[107] !== pt ? (Te = R(t.secondActionButton, {
      [t.secondActionButtonSmall]: pt
    }), e[107] = pt, e[108] = Te) : Te = e[108], W = Te;
    const rt = n === "small";
    let qe;
    e[109] !== rt ? (qe = R(t.actionButton, {
      [t.actionButtonSmall]: rt
    }), e[109] = rt, e[110] = qe) : qe = e[110], j = qe;
    let We;
    e[111] !== o || e[112] !== u || e[113] !== c || e[114] !== Y ? (We = () => {
      const p = [Y];
      return o && u && p.push(c), p.join(" ");
    }, e[111] = o, e[112] = u, e[113] = c, e[114] = Y, e[115] = We) : We = e[115];
    const Bt = We;
    let Me;
    e[116] !== ue ? (Me = () => {
      var p;
      if (S.current) {
        Je(S.current.value);
        const wt = new Event("change", {
          bubbles: !0
        });
        (p = S.current) == null || p.dispatchEvent(wt), vt(`${ue} ${S.current.value}`);
      }
    }, e[116] = ue, e[117] = Me) : Me = e[117];
    const Z = Me;
    let Xe;
    e[118] !== Z ? (Xe = () => {
      var p;
      (p = S.current) == null || p.stepDown(), Z();
    }, e[118] = Z, e[119] = Xe) : Xe = e[119], M = Xe;
    let je;
    e[120] !== Z ? (je = () => {
      var p;
      (p = S.current) == null || p.stepUp(), Z();
    }, e[120] = Z, e[121] = je) : je = e[121], X = je;
    let ze;
    e[122] !== _ ? (ze = (p) => {
      Je(p.target.value), _ && _(p);
    }, e[122] = _, e[123] = ze) : ze = e[123];
    const ct = ze;
    U = Nt;
    let ee;
    e[124] !== D ? (ee = D && /* @__PURE__ */ I(Ct, {}), e[124] = D, e[125] = ee) : ee = e[125], e[126] !== s || e[127] !== f || e[128] !== b || e[129] !== ot || e[130] !== ee ? (B = /* @__PURE__ */ ft("label", { className: ot, id: f, htmlFor: s, children: [
      b,
      ee
    ] }), e[126] = s, e[127] = f, e[128] = b, e[129] = ot, e[130] = ee, e[131] = B) : B = e[131], e[132] !== m || e[133] !== Pe ? (w = m && /* @__PURE__ */ I("div", { className: t.hint, id: Pe, children: m }), e[132] = m, e[133] = Pe, e[134] = w) : w = e[134], e[135] !== y || e[136] !== Y ? (L = /* @__PURE__ */ I("div", { "aria-live": "polite", "aria-atomic": "true", className: t.valueAnnouncer, id: Y, children: y }), e[135] = y, e[136] = Y, e[137] = L) : L = e[137], e[138] !== o || e[139] !== u || e[140] !== c ? (E = o && u && /* @__PURE__ */ I(Ft, { className: t.feedback, message: u, type: "invalid", id: c }), e[138] = o, e[139] = u, e[140] = c, e[141] = E) : E = e[141], z = t.wrapper, G = l && /* @__PURE__ */ I("span", { className: R(a, t.prefix), ref: Ye, "aria-disabled": r, children: Qe });
    const ut = `${f}${Dt}`, dt = Bt();
    e[142] !== r || e[143] !== he || e[144] !== ct || e[145] !== s || e[146] !== at || e[147] !== _e || e[148] !== x || e[149] !== o || e[150] !== P || e[151] !== $ || e[152] !== v || e[153] !== D || e[154] !== g || e[155] !== de || e[156] !== ut || e[157] !== dt ? (N = /* @__PURE__ */ I("input", { className: at, id: s, ...g, style: _e, ref: he, "aria-labelledby": ut, "aria-describedby": dt, "aria-invalid": o, "aria-disabled": v, disabled: r, min: $, max: P, readOnly: v, required: D, step: de, type: "number", value: x, onChange: ct }), e[142] = r, e[143] = he, e[144] = ct, e[145] = s, e[146] = at, e[147] = _e, e[148] = x, e[149] = o, e[150] = P, e[151] = $, e[152] = v, e[153] = D, e[154] = g, e[155] = de, e[156] = ut, e[157] = dt, e[158] = N) : N = e[158], O = i && /* @__PURE__ */ I("span", { className: R(a, t.suffix), ref: et, "aria-disabled": r, children: Ze }), e[57] = ue, e[58] = d, e[59] = r, e[60] = Qe, e[61] = Ze, e[62] = he, e[63] = ve, e[64] = m, e[65] = s, e[66] = _e, e[67] = x, e[68] = o, e[69] = be, e[70] = b, e[71] = P, e[72] = $, e[73] = _, e[74] = l, e[75] = v, e[76] = D, e[77] = g, e[78] = n, e[79] = de, e[80] = i, e[81] = u, e[82] = tt, e[83] = y, e[84] = W, e[85] = M, e[86] = X, e[87] = j, e[88] = z, e[89] = G, e[90] = N, e[91] = O, e[92] = U, e[93] = B, e[94] = w, e[95] = L, e[96] = E;
  } else
    W = e[84], M = e[85], X = e[86], j = e[87], z = e[88], G = e[89], N = e[90], O = e[91], U = e[92], B = e[93], w = e[94], L = e[95], E = e[96];
  const nt = r || v || !!x && Number(x) <= Number($);
  let J;
  e[159] !== W || e[160] !== Oe || e[161] !== M || e[162] !== V || e[163] !== n || e[164] !== nt ? (J = /* @__PURE__ */ I(yt, { ...V, hideLabel: !0, theme: "light", iconName: "minus", variant: "filled", className: W, size: n, onClick: M, disabled: nt, type: "button", children: Oe }), e[159] = W, e[160] = Oe, e[161] = M, e[162] = V, e[163] = n, e[164] = nt, e[165] = J) : J = e[165];
  const st = r || v || !!x && Number(x) >= Number(P);
  let K;
  e[166] !== X || e[167] !== Ue || e[168] !== j || e[169] !== q || e[170] !== n || e[171] !== st ? (K = /* @__PURE__ */ I(yt, { ...q, hideLabel: !0, theme: "light", iconName: "plus", variant: "filled", className: j, size: n, onClick: X, disabled: st, type: "button", children: Ue }), e[166] = X, e[167] = Ue, e[168] = j, e[169] = q, e[170] = n, e[171] = st, e[172] = K) : K = e[172];
  let Q;
  e[173] !== z || e[174] !== G || e[175] !== N || e[176] !== O || e[177] !== J || e[178] !== K ? (Q = /* @__PURE__ */ ft("div", { className: z, children: [
    G,
    N,
    O,
    J,
    K
  ] }), e[173] = z, e[174] = G, e[175] = N, e[176] = O, e[177] = J, e[178] = K, e[179] = Q) : Q = e[179];
  let Fe;
  return e[180] !== U || e[181] !== B || e[182] !== w || e[183] !== L || e[184] !== E || e[185] !== Q ? (Fe = /* @__PURE__ */ ft("div", { className: U, children: [
    B,
    w,
    L,
    E,
    Q
  ] }), e[180] = U, e[181] = B, e[182] = w, e[183] = L, e[184] = E, e[185] = Q, e[186] = Fe) : Fe = e[186], Fe;
});
sn.displayName = "DSInputStepper";
function ln(k) {
  k.preventDefault();
}
export {
  sn as D,
  nn as v
};