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