@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
181 lines (180 loc) • 9.69 kB
JavaScript
"use client";
import { jsxs as Z, jsx as p, Fragment as wt } from "react/jsx-runtime";
import { d as At } from "./index.CgTHIF3K.js";
import { c as S } from "./index.CEyLAtio.js";
import { forwardRef as yt } from "react";
import { D as gt } from "./Icon.NSsVrYeq.js";
import { NumberIndicator as Tt } from "../numberindicator.Ddf3ESi7.js";
import { Tooltip as It } from "../tooltip.CUCSRXd3.js";
import { g as C } from "./helpers.BbWkXTr3.js";
import '../assets/ActionButton.oGVPTS1J.css';const St = "ds-action-button_root_15ybf_1", Ct = "ds-action-button_root--indent-level-1_15ybf_75", Ot = "ds-action-button_root--active_15ybf_78", Pt = "ds-action-button_root--active--with-marker_15ybf_81", Dt = "ds-action-button_root--icon--top_15ybf_84", Bt = "ds-action-button_root--stretched_15ybf_110", kt = "ds-action-button_active-marker_15ybf_115", Lt = "ds-action-button_active-marker--with-indent_15ybf_127", Et = "ds-action-button_icon-wrapper_15ybf_131", xt = "ds-action-button_icon-wrapper--x-large_15ybf_134", Mt = "ds-action-button_icon-wrapper--with-number-indicator_15ybf_137", Ut = "ds-action-button_icon-wrapper--with-number-indicator--with-value_15ybf_145", zt = "ds-action-button_label_15ybf_149", Rt = "ds-action-button_label--bold_15ybf_160", Vt = "ds-action-button_label--active_15ybf_171", Ht = "ds-action-button_label--icon-top_15ybf_182", Xt = "ds-action-button_number-indicator_15ybf_205", jt = "ds-action-button_label-wrapper_15ybf_209", Ft = "ds-action-button_label-wrapper--icon-top_15ybf_214", Gt = "ds-action-button_chevron_15ybf_218", Zt = "ds-action-button_chevron--icon-position-top_15ybf_233", $t = "ds-action-button_chevron--up_15ybf_239", qt = "ds-action-button_chevron--right_15ybf_250", Jt = "ds-action-button_chevron--left_15ybf_261", o = {
root: St,
rootIndentLevel1: Ct,
rootActive: Ot,
rootActiveWithMarker: Pt,
rootIconTop: Dt,
rootStretched: Bt,
activeMarker: kt,
activeMarkerWithIndent: Lt,
iconWrapper: Et,
iconWrapperXLarge: xt,
iconWrapperWithNumberIndicator: Mt,
iconWrapperWithNumberIndicatorWithValue: Ut,
label: zt,
labelBold: Rt,
labelActive: Vt,
labelIconTop: Ht,
numberIndicator: Xt,
labelWrapper: jt,
labelWrapperIconTop: Ft,
chevron: Gt,
chevronIconPositionTop: Zt,
chevronUp: $t,
chevronRight: qt,
chevronLeft: Jt
}, ao = ["left", "top"], so = ["large", "x-large"], lo = [0, 1], po = ["normal", "bold"], ho = ["up", "down", "right", "left"], Kt = ({
iconName: v,
iconSize: u,
iconSource: t,
iconPosition: d,
indentLevel: r,
stretched: h,
weight: b
}) => {
if (v && !t && u === "x-large" && console.warn(C("DSActionButton", 'An "iconSize" prop set to "x-large" has no effect when "iconName" is set. Please remove the "iconSize" prop or provide a custom icon via the "iconSource" prop.')), d === "top") {
if (!v && !t)
throw new Error(C("DSActionButton", 'The "iconPosition" prop should not be set to "top", when no "iconName" or "iconSource" prop was provided. Please either remove the "iconPosition" prop or set a valid icon via the "iconName" or "iconSource" prop.'));
u === "x-large" && console.warn(C("DSActionButton", 'An "iconSize" prop set to "x-large" has no effect when "iconPosition" is set to "top". Please remove the "iconSize" prop.')), b === "bold" && console.warn(C("DSActionButton", 'A "weight" prop set to "bold" with "iconPosition" set to "top" has no effect. Please remove the "weight" prop.')), r === 1 && console.warn(C("DSActionButton", 'An "indentLevel" prop set to "1" with "iconPosition" set to "top" has no effect. Please remove the "indentLevel" prop.')), h && console.warn(C("DSActionButton", 'A "stretched" prop set to "true" with "iconPosition" set to "top" has no effect. Please remove the "stretched" prop.'));
}
}, Qt = yt((v, u) => {
const t = At.c(91);
let d, r, h, b, c, a, n, f, m, O, P, D, B, k, L, E, _;
t[0] !== v ? ({
children: h,
aria: d,
chevronDirection: r,
className: b,
disabled: O,
iconName: c,
iconPosition: P,
iconSize: D,
iconSource: a,
indentLevel: B,
isActive: k,
numberIndicatorValue: n,
stretched: L,
weight: E,
tooltip: _,
onClick: f,
...m
} = v, t[0] = v, t[1] = d, t[2] = r, t[3] = h, t[4] = b, t[5] = c, t[6] = a, t[7] = n, t[8] = f, t[9] = m, t[10] = O, t[11] = P, t[12] = D, t[13] = B, t[14] = k, t[15] = L, t[16] = E, t[17] = _) : (d = t[1], r = t[2], h = t[3], b = t[4], c = t[5], a = t[6], n = t[7], f = t[8], m = t[9], O = t[10], P = t[11], D = t[12], B = t[13], k = t[14], L = t[15], E = t[16], _ = t[17]);
const i = O === void 0 ? !1 : O, e = P === void 0 ? "left" : P, x = D === void 0 ? "large" : D, $ = B === void 0 ? 0 : B, I = k === void 0 ? !1 : k, Nt = L === void 0 ? !1 : L, Wt = E === void 0 ? "normal" : E;
process.env.NODE_ENV !== "production" && Kt({
iconName: c,
iconSize: x,
iconSource: a,
iconPosition: e,
indentLevel: $,
stretched: Nt,
weight: Wt
});
const s = (n == null ? void 0 : n.trim()) === "", q = e === "top", J = $ === 1, K = I && !i, Q = I && !i && e === "left", Y = Nt === !0 && e === "left";
let M;
t[18] !== b || t[19] !== K || t[20] !== Q || t[21] !== Y || t[22] !== q || t[23] !== J ? (M = S(o.root, b, {
[o.rootIconTop]: q,
[o.rootIndentLevel1]: J,
[o.rootActive]: K,
[o.rootActiveWithMarker]: Q,
[o.rootStretched]: Y
}), t[18] = b, t[19] = K, t[20] = Q, t[21] = Y, t[22] = q, t[23] = J, t[24] = M) : M = t[24];
const tt = M, ot = $ === 1;
let U;
t[25] !== ot ? (U = S(o.activeMarker, {
[o.activeMarkerWithIndent]: ot
}), t[25] = ot, t[26] = U) : U = t[26];
const et = U, nt = I && !i, it = Wt === "bold", rt = e === "top";
let z;
t[27] !== nt || t[28] !== it || t[29] !== rt ? (z = S(o.label, {
[o.labelActive]: nt,
[o.labelBold]: it,
[o.labelIconTop]: rt
}), t[27] = nt, t[28] = it, t[29] = rt, t[30] = z) : z = t[30];
const ct = z, at = e === "top";
let R;
t[31] !== at ? (R = S(o.labelWrapper, {
[o.labelWrapperIconTop]: at
}), t[31] = at, t[32] = R) : R = t[32];
const st = R, lt = e === "top", pt = r === "up", dt = r === "right", ht = r === "left";
let V;
t[33] !== lt || t[34] !== pt || t[35] !== dt || t[36] !== ht ? (V = S(o.chevron, {
[o.chevronIconPositionTop]: lt,
[o.chevronUp]: pt,
[o.chevronRight]: dt,
[o.chevronLeft]: ht
}), t[33] = lt, t[34] = pt, t[35] = dt, t[36] = ht, t[37] = V) : V = t[37];
const bt = V, ft = x === "x-large", _t = (c || a) && (n || s), vt = (c || a) && !s;
let H;
t[38] !== ft || t[39] !== _t || t[40] !== vt ? (H = S(o.iconWrapper, {
[o.iconWrapperXLarge]: ft,
[o.iconWrapperWithNumberIndicator]: _t,
[o.iconWrapperWithNumberIndicatorWithValue]: vt
}), t[38] = ft, t[39] = _t, t[40] = vt, t[41] = H) : H = t[41];
const ut = H;
let X;
t[42] !== i || t[43] !== f ? (X = (l) => {
if (i) {
l.preventDefault();
return;
}
f && f(l);
}, t[42] = i, t[43] = f, t[44] = X) : X = t[44];
const mt = X;
let N;
t[45] !== et || t[46] !== e || t[47] !== I ? (N = I && e === "left" && /* @__PURE__ */ p("div", { className: et }), t[45] = et, t[46] = e, t[47] = I, t[48] = N) : N = t[48];
let W;
t[49] !== i || t[50] !== c || t[51] !== e || t[52] !== x || t[53] !== a || t[54] !== ut || t[55] !== s || t[56] !== n ? (W = (c || a) && /* @__PURE__ */ p(wt, { children: /* @__PURE__ */ Z("span", { className: ut, children: [
/* @__PURE__ */ p(gt, { name: c, theme: "light", source: a, "aria-hidden": "true", size: c || e === "top" ? "large" : x }),
!i && (e === "left" && s || e === "top" && (n || s)) && /* @__PURE__ */ p(Tt, { variant: "highlight", label: n })
] }) }), t[49] = i, t[50] = c, t[51] = e, t[52] = x, t[53] = a, t[54] = ut, t[55] = s, t[56] = n, t[57] = W) : W = t[57];
let g;
t[58] !== h || t[59] !== ct ? (g = /* @__PURE__ */ p("span", { className: ct, children: h }), t[58] = h, t[59] = ct, t[60] = g) : g = t[60];
let T;
t[61] !== bt || t[62] !== r ? (T = r && /* @__PURE__ */ p(gt, { name: "chevron-down", theme: "light", "aria-hidden": "true", className: bt }), t[61] = bt, t[62] = r, t[63] = T) : T = t[63];
let w;
t[64] !== st || t[65] !== g || t[66] !== T ? (w = /* @__PURE__ */ Z("div", { className: st, children: [
g,
T
] }), t[64] = st, t[65] = g, t[66] = T, t[67] = w) : w = t[67];
let A;
t[68] !== i || t[69] !== e || t[70] !== s || t[71] !== n ? (A = e === "left" && !i && n && !s && /* @__PURE__ */ p(Tt, { variant: "default", label: n, className: o.numberIndicator }), t[68] = i, t[69] = e, t[70] = s, t[71] = n, t[72] = A) : A = t[72];
let j;
t[73] !== d || t[74] !== i || t[75] !== mt || t[76] !== u || t[77] !== m || t[78] !== tt || t[79] !== N || t[80] !== W || t[81] !== w || t[82] !== A ? (j = /* @__PURE__ */ Z("button", { className: tt, type: "button", onClick: mt, ...d, ...m, "aria-disabled": i, ref: u, children: [
N,
W,
w,
A
] }), t[73] = d, t[74] = i, t[75] = mt, t[76] = u, t[77] = m, t[78] = tt, t[79] = N, t[80] = W, t[81] = w, t[82] = A, t[83] = j) : j = t[83];
const F = j;
if (_) {
let l;
t[84] !== F ? (l = /* @__PURE__ */ p(It.Anchor, { children: F }), t[84] = F, t[85] = l) : l = t[85];
let y;
t[86] !== _ ? (y = /* @__PURE__ */ p(It.Content, { children: _ }), t[86] = _, t[87] = y) : y = t[87];
let G;
return t[88] !== l || t[89] !== y ? (G = /* @__PURE__ */ Z(It, { placement: "top", tooltipOffset: 6, children: [
l,
y
] }), t[88] = l, t[89] = y, t[90] = G) : G = t[90], G;
}
return F;
});
Qt.displayName = "DSActionButton";
export {
ao as A,
Qt as D,
so as a,
lo as b,
po as c,
ho as d,
Kt as v
};