@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
293 lines (292 loc) • 12.8 kB
JavaScript
"use client";
import { jsx as b, jsxs as Se } from "react/jsx-runtime";
import { d as nt } from "./index.CgTHIF3K.js";
import { c as T } from "./index.CEyLAtio.js";
import { forwardRef as ot, useState as Xe, useRef as ct } from "react";
import { u as dt } from "./useBreakpoint.CMOR9ZOB.js";
import { DSInput as ut } from "../input.REQvMr96.js";
import { g as Je } from "./helpers.CcqWV-wZ.js";
import '../assets/Slider.C8i4U4iT.css';const pt = "ds-slider_root_84q0h_1", mt = "ds-slider_hint_84q0h_10", bt = "ds-slider_label_84q0h_10", ht = "ds-slider_number-input_84q0h_13", ft = "ds-slider_label-hint-input-wrapper_84q0h_17", _t = "ds-slider_label--hidden_84q0h_37", Tt = "ds-slider_label--disabled_84q0h_50", xt = "ds-slider_number-input--small_84q0h_79", vt = "ds-slider_min-max-label-wrapper_84q0h_84", gt = "ds-slider_min-max-label-wrapper--disabled_84q0h_98", kt = "ds-slider_min-label_84q0h_103", Nt = "ds-slider_max-label_84q0h_107", St = "ds-slider_slider-wrapper_84q0h_111", yt = "ds-slider_slider_84q0h_111", Dt = "ds-slider_value-tooltip_84q0h_135", It = "ds-slider_proxy-thumb_84q0h_139", qt = "ds-slider_proxy-thumb--disabled_84q0h_206", Mt = "ds-slider_custom-track_84q0h_235", Lt = "ds-slider_custom-track--progress_84q0h_240", Vt = "ds-slider_custom-track--runnable_84q0h_252", wt = "ds-slider_custom-track--disabled_84q0h_266", Ct = "ds-slider_tick-wrapper_84q0h_286", Wt = "ds-slider_tick_84q0h_286", $t = "ds-slider_value-tooltip--visible_84q0h_358", Pt = "ds-slider_value-tooltip--disabled_84q0h_361", a = {
root: pt,
hint: mt,
label: bt,
numberInput: ht,
labelHintInputWrapper: ft,
labelHidden: _t,
labelDisabled: Tt,
numberInputSmall: xt,
minMaxLabelWrapper: vt,
minMaxLabelWrapperDisabled: gt,
minLabel: kt,
maxLabel: Nt,
sliderWrapper: St,
slider: yt,
valueTooltip: Dt,
proxyThumb: It,
proxyThumbDisabled: qt,
customTrack: Mt,
customTrackProgress: Lt,
customTrackRunnable: Vt,
customTrackDisabled: wt,
tickWrapper: Ct,
tick: Wt,
valueTooltipVisible: $t,
valueTooltipDisabled: Pt
}, At = 11, Qe = 4, Ye = (p) => p.toString().length, Et = (p, r, e) => {
if (r === 0)
return !0;
const m = 1e-10, n = (p - e) / r;
return Math.abs(Math.round(n) - n) < m;
}, Rt = (p, r, e, m) => {
var o;
const n = parseFloat(r), h = e, c = Math.round((p - h) / n);
let d = h + c * n;
d = Math.min(Math.max(d, e), m);
const v = ((o = n.toString().split(".")[1]) == null ? void 0 : o.length) || 0;
return parseFloat(d.toFixed(v));
}, Ft = (p, r, e) => {
const m = (p - r) / (e - r) * 100, n = `calc(-0.24 * ${m}px + 10px)`;
return `calc(${m}% + ${n})`;
}, Ht = ({
id: p,
label: r
}) => {
if (!p)
throw new Error(Je("DSSlider", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSlider component.'));
if (!r)
throw new Error(Je("DSSlider", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSlider component. If you don't want to display a label, set hideLabel={true}.`));
}, Bt = ot((p, r) => {
const e = nt.c(154);
let m, n, h, c, d, v, o, S, U, G, X, J, Q, Y, Z, g;
e[0] !== p ? ({
id: c,
label: d,
className: m,
defaultValue: n,
disabled: U,
hideLabel: G,
hideNumberInput: X,
hint: h,
isTooltipAlwaysVisible: J,
max: Q,
min: Y,
numberInputProps: v,
step: Z,
value: g,
onChange: o,
...S
} = p, e[0] = p, e[1] = m, e[2] = n, e[3] = h, e[4] = c, e[5] = d, e[6] = v, e[7] = o, e[8] = S, e[9] = U, e[10] = G, e[11] = X, e[12] = J, e[13] = Q, e[14] = Y, e[15] = Z, e[16] = g) : (m = e[1], n = e[2], h = e[3], c = e[4], d = e[5], v = e[6], o = e[7], S = e[8], U = e[9], G = e[10], X = e[11], J = e[12], Q = e[13], Y = e[14], Z = e[15], g = e[16]);
const l = U === void 0 ? !1 : U, Ze = G === void 0 ? !1 : G, y = X === void 0 ? !1 : X, ye = J === void 0 ? !1 : J, et = Q === void 0 ? 100 : Q, tt = Y === void 0 ? 0 : Y, ee = Z === void 0 ? 1 : Z;
process.env.NODE_ENV !== "production" && Ht({
id: c,
label: d
});
const i = Number(et), t = Number(tt), u = Number(ee), De = dt(Ze), D = `${c}-label`, Ie = `${c}-hint`, qe = `${c}-number-input`;
let se;
e[17] !== n || e[18] !== t || e[19] !== g ? (se = g || n || t.toString() || "0", e[17] = n, e[18] = t, e[19] = g, e[20] = se) : se = e[20];
const [I, le] = Xe(se), [x, ae] = Xe(g || n || t || 0), st = ct(null);
let ie;
e[21] !== r ? (ie = (s) => {
st.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
}, e[21] = r, e[22] = ie) : ie = e[22];
const Me = ie;
let re;
e[23] !== v ? (re = v || {}, e[23] = v, e[24] = re) : re = e[24];
const {
size: Ge,
suffix: Le
} = re, ne = Ge === void 0 ? "medium" : Ge;
let oe;
e[25] !== o ? (oe = (s) => {
const f = parseFloat(s.target.value);
ae(f), le(s.target.value), o && o(s);
}, e[25] = o, e[26] = oe) : oe = e[26];
const Ve = oe;
let ce;
e[27] === Symbol.for("react.memo_cache_sentinel") ? (ce = (s) => {
const f = s.target.value;
if (le(f), /^-?\d+(\.\d+)?$/.test(f)) {
const _ = parseFloat(f);
Number.isNaN(_) || ae(_);
}
}, e[27] = ce) : ce = e[27];
const lt = ce;
let k;
if (e[28] !== I || e[29] !== o || e[30] !== i || e[31] !== t || e[32] !== ee) {
k = (f) => {
const te = parseFloat(I);
if (Number.isNaN(te)) {
s(f);
return;
}
let _ = Math.min(Math.max(te, t), i);
Et(_, parseFloat(ee), t) || (_ = Rt(_, ee, t, i)), le(_.toString()), ae(_), o && o(f);
};
const s = (f) => {
le(t.toString()), ae(t), o && o(f);
};
e[28] = I, e[29] = o, e[30] = i, e[31] = t, e[32] = ee, e[33] = k;
} else
k = e[33];
const q = (u === 0 ? !1 : (i - t) / u <= At) && (i - t) / u || 0;
let de;
if (e[34] !== i || e[35] !== t || e[36] !== u || e[37] !== q) {
let s;
e[39] !== i || e[40] !== t || e[41] !== u ? (s = (f, te) => {
const _ = t + te * u, rt = Ft(_, t, i);
return /* @__PURE__ */ b("span", { className: a.tick, style: {
left: rt
} }, _);
}, e[39] = i, e[40] = t, e[41] = u, e[42] = s) : s = e[42], de = Array.from({
length: q + 1
}, s), e[34] = i, e[35] = t, e[36] = u, e[37] = q, e[38] = de;
} else
de = e[38];
const we = de;
let ue;
e[43] !== i || e[44] !== t || e[45] !== x ? (ue = () => {
if (t === i)
throw new Error("Min and max values cannot be the same.");
const s = (x - t) / (i - t) * 100;
return Math.max(0, Math.min(s, 100));
}, e[43] = i, e[44] = t, e[45] = x, e[46] = ue) : ue = e[46];
const N = ue;
let pe;
e[47] !== N ? (pe = () => {
const s = N();
return s < 50 ? `calc(${s}% + 4px)` : `calc(${s}% - 4px)`;
}, e[47] = N, e[48] = pe) : pe = e[48];
const at = pe;
let me;
e[49] !== N ? (me = () => {
const s = 100 - N();
return s < 50 ? `calc(${s}% + 4px)` : `calc(${s}% - 4px)`;
}, e[49] = N, e[50] = me) : me = e[50];
const it = me;
let be;
e[51] !== m ? (be = T(a.slider, m), e[51] = m, e[52] = be) : be = e[52];
const Ce = be;
let he;
e[53] !== l || e[54] !== De ? (he = T(a.label, {
[a.labelHidden]: De,
[a.labelDisabled]: l
}), e[53] = l, e[54] = De, e[55] = he) : he = e[55];
const We = he, $e = ne === "small";
let fe;
e[56] !== $e ? (fe = T(a.numberInput, {
[a.numberInputSmall]: $e
}), e[56] = $e, e[57] = fe) : fe = e[57];
const Pe = fe;
let _e;
e[58] !== l ? (_e = T(a.minMaxLabelWrapper, {
[a.minMaxLabelWrapperDisabled]: l
}), e[58] = l, e[59] = _e) : _e = e[59];
const Ae = _e;
let Te;
e[60] !== l ? (Te = T(a.customTrack, a.customTrackProgress, {
[a.customTrackDisabled]: l
}), e[60] = l, e[61] = Te) : Te = e[61];
const Ee = Te;
let xe;
e[62] !== l ? (xe = T(a.customTrack, a.customTrackRunnable, {
[a.customTrackDisabled]: l
}), e[62] = l, e[63] = xe) : xe = e[63];
const Re = xe;
let ve;
e[64] !== l ? (ve = T(a.proxyThumb, {
[a.proxyThumbDisabled]: l
}), e[64] = l, e[65] = ve) : ve = e[65];
const Fe = ve;
let ge;
e[66] !== l || e[67] !== ye ? (ge = T(a.valueTooltip, {
[a.valueTooltipVisible]: ye,
[a.valueTooltipDisabled]: l
}), e[66] = l, e[67] = ye, e[68] = ge) : ge = e[68];
const He = ge;
let M;
e[69] !== c || e[70] !== d || e[71] !== We || e[72] !== D ? (M = /* @__PURE__ */ b("label", { className: We, htmlFor: c, id: D, children: d }), e[69] = c, e[70] = d, e[71] = We, e[72] = D, e[73] = M) : M = e[73];
let L;
e[74] !== h || e[75] !== Ie ? (L = h && /* @__PURE__ */ b("div", { className: a.hint, id: Ie, children: h }), e[74] = h, e[75] = Ie, e[76] = L) : L = e[76];
let V;
e[77] !== l || e[78] !== k || e[79] !== y || e[80] !== qe || e[81] !== I || e[82] !== d || e[83] !== Pe || e[84] !== ne || e[85] !== Le || e[86] !== i || e[87] !== t || e[88] !== u ? (V = !y && /* @__PURE__ */ b(ut, { id: qe, className: Pe, type: "number", min: t, max: i, step: u, inputMode: "decimal", autoComplete: "off", disabled: l, hideLabel: !0, value: I, onChange: lt, onBlur: k, onKeyDown: (s) => {
s.key === "Enter" && (s.preventDefault(), k(s));
}, label: d, size: ne, suffix: Le }), e[77] = l, e[78] = k, e[79] = y, e[80] = qe, e[81] = I, e[82] = d, e[83] = Pe, e[84] = ne, e[85] = Le, e[86] = i, e[87] = t, e[88] = u, e[89] = V) : V = e[89];
let w;
e[90] !== M || e[91] !== L || e[92] !== V ? (w = /* @__PURE__ */ Se("div", { className: a.labelHintInputWrapper, children: [
M,
L,
V
] }), e[90] = M, e[91] = L, e[92] = V, e[93] = w) : w = e[93];
const Be = Ye(t) < Qe;
let C;
e[94] !== Be ? (C = T({
[a.minLabel]: Be
}), e[94] = Be, e[95] = C) : C = e[95];
let W;
e[96] !== t || e[97] !== C ? (W = /* @__PURE__ */ b("div", { className: C, children: t }), e[96] = t, e[97] = C, e[98] = W) : W = e[98];
const Oe = Ye(i) < Qe;
let $;
e[99] !== Oe ? ($ = T({
[a.maxLabel]: Oe
}), e[99] = Oe, e[100] = $) : $ = e[100];
let P;
e[101] !== i || e[102] !== $ ? (P = /* @__PURE__ */ b("div", { className: $, children: i }), e[101] = i, e[102] = $, e[103] = P) : P = e[103];
let A;
e[104] !== Ae || e[105] !== W || e[106] !== P ? (A = /* @__PURE__ */ Se("div", { className: Ae, children: [
W,
P
] }), e[104] = Ae, e[105] = W, e[106] = P, e[107] = A) : A = e[107];
const ze = `${N()}`;
let ke;
e[108] !== ze ? (ke = {
"--ds-input-slider-thumb-position": ze
}, e[108] = ze, e[109] = ke) : ke = e[109];
const Ke = ke, je = at();
let E;
e[110] !== je ? (E = {
width: je
}, e[110] = je, e[111] = E) : E = e[111];
let R;
e[112] !== Ee || e[113] !== E ? (R = /* @__PURE__ */ b("div", { className: Ee, style: E }), e[112] = Ee, e[113] = E, e[114] = R) : R = e[114];
const Ue = it();
let F;
e[115] !== Ue ? (F = {
width: Ue
}, e[115] = Ue, e[116] = F) : F = e[116];
let H;
e[117] !== Re || e[118] !== F ? (H = /* @__PURE__ */ b("div", { className: Re, style: F }), e[117] = Re, e[118] = F, e[119] = H) : H = e[119];
let B;
e[120] !== l || e[121] !== Me || e[122] !== Ve || e[123] !== c || e[124] !== i || e[125] !== t || e[126] !== u || e[127] !== S || e[128] !== Ce || e[129] !== D || e[130] !== x ? (B = /* @__PURE__ */ b("input", { ...S, id: c, type: "range", ref: Me, className: Ce, min: t, max: i, step: u, value: x, disabled: l, "aria-labelledby": D, onChange: Ve }), e[120] = l, e[121] = Me, e[122] = Ve, e[123] = c, e[124] = i, e[125] = t, e[126] = u, e[127] = S, e[128] = Ce, e[129] = D, e[130] = x, e[131] = B) : B = e[131];
let O;
e[132] !== q || e[133] !== we ? (O = q > 0 && /* @__PURE__ */ b("div", { className: a.tickWrapper, children: we }), e[132] = q, e[133] = we, e[134] = O) : O = e[134];
let z;
e[135] !== Fe ? (z = /* @__PURE__ */ b("div", { className: Fe }), e[135] = Fe, e[136] = z) : z = e[136];
let K;
e[137] !== l || e[138] !== y || e[139] !== x || e[140] !== He ? (K = y && /* @__PURE__ */ b("div", { className: He, "aria-disabled": l, children: x }), e[137] = l, e[138] = y, e[139] = x, e[140] = He, e[141] = K) : K = e[141];
let j;
e[142] !== Ke || e[143] !== R || e[144] !== H || e[145] !== B || e[146] !== O || e[147] !== z || e[148] !== K ? (j = /* @__PURE__ */ Se("div", { className: a.sliderWrapper, style: Ke, children: [
R,
H,
B,
O,
z,
K
] }), e[142] = Ke, e[143] = R, e[144] = H, e[145] = B, e[146] = O, e[147] = z, e[148] = K, e[149] = j) : j = e[149];
let Ne;
return e[150] !== w || e[151] !== A || e[152] !== j ? (Ne = /* @__PURE__ */ Se("div", { className: a.root, children: [
w,
A,
j
] }), e[150] = w, e[151] = A, e[152] = j, e[153] = Ne) : Ne = e[153], Ne;
});
Bt.displayName = "DSSlider";
export {
Bt as D,
Qe as L,
At as M,
Ft as a,
Ye as g,
Et as i,
Rt as s,
Ht as v
};