@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 v } 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.DG20x6gh.js";
import { g as Je } from "./helpers.BbWkXTr3.js";
import '../assets/Slider.Bidyhb-B.css';const pt = "ds-slider_root_13uvg_1", mt = "ds-slider_hint_13uvg_13", bt = "ds-slider_label_13uvg_13", ft = "ds-slider_number-input_13uvg_16", _t = "ds-slider_label-hint-input-wrapper_13uvg_20", ht = "ds-slider_label--hidden_13uvg_40", vt = "ds-slider_label--disabled_13uvg_53", gt = "ds-slider_number-input--small_13uvg_82", Tt = "ds-slider_min-max-label-wrapper_13uvg_87", xt = "ds-slider_min-max-label-wrapper--disabled_13uvg_101", kt = "ds-slider_min-label_13uvg_106", Nt = "ds-slider_max-label_13uvg_110", St = "ds-slider_slider-wrapper_13uvg_114", yt = "ds-slider_slider_13uvg_114", Dt = "ds-slider_value-tooltip_13uvg_138", It = "ds-slider_proxy-thumb_13uvg_142", Mt = "ds-slider_proxy-thumb--disabled_13uvg_209", Lt = "ds-slider_custom-track_13uvg_238", Vt = "ds-slider_custom-track--progress_13uvg_243", wt = "ds-slider_custom-track--runnable_13uvg_255", Ct = "ds-slider_custom-track--disabled_13uvg_269", Wt = "ds-slider_tick-wrapper_13uvg_289", $t = "ds-slider_tick_13uvg_289", Pt = "ds-slider_value-tooltip--visible_13uvg_348", At = "ds-slider_value-tooltip--disabled_13uvg_351", a = {
root: pt,
hint: mt,
label: bt,
numberInput: ft,
labelHintInputWrapper: _t,
labelHidden: ht,
labelDisabled: vt,
numberInputSmall: gt,
minMaxLabelWrapper: Tt,
minMaxLabelWrapperDisabled: xt,
minLabel: kt,
maxLabel: Nt,
sliderWrapper: St,
slider: yt,
valueTooltip: Dt,
proxyThumb: It,
proxyThumbDisabled: Mt,
customTrack: Lt,
customTrackProgress: Vt,
customTrackRunnable: wt,
customTrackDisabled: Ct,
tickWrapper: Wt,
tick: $t,
valueTooltipVisible: Pt,
valueTooltipDisabled: At
}, Et = 11, Qe = 4, Ye = (p) => p.toString().length, Rt = (p, r, e) => {
if (r === 0)
return !0;
const m = 1e-10, n = (p - e) / r;
return Math.abs(Math.round(n) - n) < m;
}, Ft = (p, r, e, m) => {
var o;
const n = parseFloat(r), f = e, c = Math.round((p - f) / n);
let d = f + c * n;
d = Math.min(Math.max(d, e), m);
const T = ((o = n.toString().split(".")[1]) == null ? void 0 : o.length) || 0;
return parseFloat(d.toFixed(T));
}, Ht = (p, r, e) => {
const m = (p - r) / (e - r) * 100, n = `calc(-0.24 * ${m}px + 10px)`;
return `calc(${m}% + ${n})`;
}, Bt = ({
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}.`));
}, qt = ot((p, r) => {
const e = nt.c(154);
let m, n, f, c, d, T, o, S, U, G, X, J, Q, Y, Z, x;
e[0] !== p ? ({
id: c,
label: d,
className: m,
defaultValue: n,
disabled: U,
hideLabel: G,
hideNumberInput: X,
hint: f,
isTooltipAlwaysVisible: J,
max: Q,
min: Y,
numberInputProps: T,
step: Z,
value: x,
onChange: o,
...S
} = p, e[0] = p, e[1] = m, e[2] = n, e[3] = f, e[4] = c, e[5] = d, e[6] = T, 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] = x) : (m = e[1], n = e[2], f = e[3], c = e[4], d = e[5], T = 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], x = 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" && Bt({
id: c,
label: d
});
const i = Number(et), t = Number(tt), u = Number(ee), De = dt(Ze), D = `${c}-label`, Ie = `${c}-hint`, Me = `${c}-number-input`;
let se;
e[17] !== n || e[18] !== t || e[19] !== x ? (se = x || n || t.toString() || "0", e[17] = n, e[18] = t, e[19] = x, e[20] = se) : se = e[20];
const [I, le] = Xe(se), [g, ae] = Xe(x || 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 Le = ie;
let re;
e[23] !== T ? (re = T || {}, e[23] = T, e[24] = re) : re = e[24];
const {
size: Ge,
suffix: Ve
} = re, ne = Ge === void 0 ? "medium" : Ge;
let oe;
e[25] !== o ? (oe = (s) => {
const _ = parseFloat(s.target.value);
ae(_), le(s.target.value), o && o(s);
}, e[25] = o, e[26] = oe) : oe = e[26];
const we = oe;
let ce;
e[27] === Symbol.for("react.memo_cache_sentinel") ? (ce = (s) => {
const _ = s.target.value;
if (le(_), /^-?\d+(\.\d+)?$/.test(_)) {
const h = parseFloat(_);
Number.isNaN(h) || ae(h);
}
}, 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 = (_) => {
const te = parseFloat(I);
if (Number.isNaN(te)) {
s(_);
return;
}
let h = Math.min(Math.max(te, t), i);
Rt(h, parseFloat(ee), t) || (h = Ft(h, ee, t, i)), le(h.toString()), ae(h), o && o(_);
};
const s = (_) => {
le(t.toString()), ae(t), o && o(_);
};
e[28] = I, e[29] = o, e[30] = i, e[31] = t, e[32] = ee, e[33] = k;
} else
k = e[33];
const M = (u === 0 ? !1 : (i - t) / u <= Et) && (i - t) / u || 0;
let de;
if (e[34] !== i || e[35] !== t || e[36] !== u || e[37] !== M) {
let s;
e[39] !== i || e[40] !== t || e[41] !== u ? (s = (_, te) => {
const h = t + te * u, rt = Ht(h, t, i);
return /* @__PURE__ */ b("span", { className: a.tick, style: {
left: rt
} }, h);
}, e[39] = i, e[40] = t, e[41] = u, e[42] = s) : s = e[42], de = Array.from({
length: M + 1
}, s), e[34] = i, e[35] = t, e[36] = u, e[37] = M, e[38] = de;
} else
de = e[38];
const Ce = de;
let ue;
e[43] !== i || e[44] !== t || e[45] !== g ? (ue = () => {
if (t === i)
throw new Error("Min and max values cannot be the same.");
const s = (g - t) / (i - t) * 100;
return Math.max(0, Math.min(s, 100));
}, e[43] = i, e[44] = t, e[45] = g, 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 = v(a.slider, m), e[51] = m, e[52] = be) : be = e[52];
const We = be;
let fe;
e[53] !== l || e[54] !== De ? (fe = v(a.label, {
[a.labelHidden]: De,
[a.labelDisabled]: l
}), e[53] = l, e[54] = De, e[55] = fe) : fe = e[55];
const $e = fe, Pe = ne === "small";
let _e;
e[56] !== Pe ? (_e = v(a.numberInput, {
[a.numberInputSmall]: Pe
}), e[56] = Pe, e[57] = _e) : _e = e[57];
const Ae = _e;
let he;
e[58] !== l ? (he = v(a.minMaxLabelWrapper, {
[a.minMaxLabelWrapperDisabled]: l
}), e[58] = l, e[59] = he) : he = e[59];
const Ee = he;
let ve;
e[60] !== l ? (ve = v(a.customTrack, a.customTrackProgress, {
[a.customTrackDisabled]: l
}), e[60] = l, e[61] = ve) : ve = e[61];
const Re = ve;
let ge;
e[62] !== l ? (ge = v(a.customTrack, a.customTrackRunnable, {
[a.customTrackDisabled]: l
}), e[62] = l, e[63] = ge) : ge = e[63];
const Fe = ge;
let Te;
e[64] !== l ? (Te = v(a.proxyThumb, {
[a.proxyThumbDisabled]: l
}), e[64] = l, e[65] = Te) : Te = e[65];
const He = Te;
let xe;
e[66] !== l || e[67] !== ye ? (xe = v(a.valueTooltip, {
[a.valueTooltipVisible]: ye,
[a.valueTooltipDisabled]: l
}), e[66] = l, e[67] = ye, e[68] = xe) : xe = e[68];
const Be = xe;
let L;
e[69] !== c || e[70] !== d || e[71] !== $e || e[72] !== D ? (L = /* @__PURE__ */ b("label", { className: $e, htmlFor: c, id: D, children: d }), e[69] = c, e[70] = d, e[71] = $e, e[72] = D, e[73] = L) : L = e[73];
let V;
e[74] !== f || e[75] !== Ie ? (V = f && /* @__PURE__ */ b("div", { className: a.hint, id: Ie, children: f }), e[74] = f, e[75] = Ie, e[76] = V) : V = e[76];
let w;
e[77] !== l || e[78] !== k || e[79] !== y || e[80] !== Me || e[81] !== I || e[82] !== d || e[83] !== Ae || e[84] !== ne || e[85] !== Ve || e[86] !== i || e[87] !== t || e[88] !== u ? (w = !y && /* @__PURE__ */ b(ut, { id: Me, className: Ae, 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: Ve }), e[77] = l, e[78] = k, e[79] = y, e[80] = Me, e[81] = I, e[82] = d, e[83] = Ae, e[84] = ne, e[85] = Ve, e[86] = i, e[87] = t, e[88] = u, e[89] = w) : w = e[89];
let C;
e[90] !== L || e[91] !== V || e[92] !== w ? (C = /* @__PURE__ */ Se("div", { className: a.labelHintInputWrapper, children: [
L,
V,
w
] }), e[90] = L, e[91] = V, e[92] = w, e[93] = C) : C = e[93];
const qe = Ye(t) < Qe;
let W;
e[94] !== qe ? (W = v({
[a.minLabel]: qe
}), e[94] = qe, e[95] = W) : W = e[95];
let $;
e[96] !== t || e[97] !== W ? ($ = /* @__PURE__ */ b("div", { className: W, children: t }), e[96] = t, e[97] = W, e[98] = $) : $ = e[98];
const Oe = Ye(i) < Qe;
let P;
e[99] !== Oe ? (P = v({
[a.maxLabel]: Oe
}), e[99] = Oe, e[100] = P) : P = e[100];
let A;
e[101] !== i || e[102] !== P ? (A = /* @__PURE__ */ b("div", { className: P, children: i }), e[101] = i, e[102] = P, e[103] = A) : A = e[103];
let E;
e[104] !== Ee || e[105] !== $ || e[106] !== A ? (E = /* @__PURE__ */ Se("div", { className: Ee, children: [
$,
A
] }), e[104] = Ee, e[105] = $, e[106] = A, e[107] = E) : E = 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 R;
e[110] !== je ? (R = {
width: je
}, e[110] = je, e[111] = R) : R = e[111];
let F;
e[112] !== Re || e[113] !== R ? (F = /* @__PURE__ */ b("div", { className: Re, style: R }), e[112] = Re, e[113] = R, e[114] = F) : F = e[114];
const Ue = it();
let H;
e[115] !== Ue ? (H = {
width: Ue
}, e[115] = Ue, e[116] = H) : H = e[116];
let B;
e[117] !== Fe || e[118] !== H ? (B = /* @__PURE__ */ b("div", { className: Fe, style: H }), e[117] = Fe, e[118] = H, e[119] = B) : B = e[119];
let q;
e[120] !== l || e[121] !== Le || e[122] !== we || e[123] !== c || e[124] !== i || e[125] !== t || e[126] !== u || e[127] !== S || e[128] !== We || e[129] !== D || e[130] !== g ? (q = /* @__PURE__ */ b("input", { ...S, id: c, type: "range", ref: Le, className: We, min: t, max: i, step: u, value: g, disabled: l, "aria-labelledby": D, onChange: we }), e[120] = l, e[121] = Le, e[122] = we, e[123] = c, e[124] = i, e[125] = t, e[126] = u, e[127] = S, e[128] = We, e[129] = D, e[130] = g, e[131] = q) : q = e[131];
let O;
e[132] !== M || e[133] !== Ce ? (O = M > 0 && /* @__PURE__ */ b("div", { className: a.tickWrapper, children: Ce }), e[132] = M, e[133] = Ce, e[134] = O) : O = e[134];
let z;
e[135] !== He ? (z = /* @__PURE__ */ b("div", { className: He }), e[135] = He, e[136] = z) : z = e[136];
let K;
e[137] !== l || e[138] !== y || e[139] !== g || e[140] !== Be ? (K = y && /* @__PURE__ */ b("div", { className: Be, "aria-disabled": l, children: g }), e[137] = l, e[138] = y, e[139] = g, e[140] = Be, e[141] = K) : K = e[141];
let j;
e[142] !== Ke || e[143] !== F || e[144] !== B || e[145] !== q || e[146] !== O || e[147] !== z || e[148] !== K ? (j = /* @__PURE__ */ Se("div", { className: a.sliderWrapper, style: Ke, children: [
F,
B,
q,
O,
z,
K
] }), e[142] = Ke, e[143] = F, e[144] = B, e[145] = q, e[146] = O, e[147] = z, e[148] = K, e[149] = j) : j = e[149];
let Ne;
return e[150] !== C || e[151] !== E || e[152] !== j ? (Ne = /* @__PURE__ */ Se("div", { className: a.root, children: [
C,
E,
j
] }), e[150] = C, e[151] = E, e[152] = j, e[153] = Ne) : Ne = e[153], Ne;
});
qt.displayName = "DSSlider";
export {
qt as D,
Qe as L,
Et as M,
Ht as a,
Ye as g,
Rt as i,
Ft as s,
Bt as v
};