@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
195 lines (194 loc) • 10.6 kB
JavaScript
"use client";
import { jsxs as Q, jsx as d, Fragment as Pt } from "react/jsx-runtime";
import { d as Ct } from "./index.cKLI89Eg.js";
import { c as O } from "./index.DQOqod3i.js";
import { forwardRef as Ot } from "react";
import { D as Dt } from "./Icon.DYtaQgbw.js";
import { NumberIndicator as St } from "../numberindicator.DsK65Bj3.js";
import { Tooltip as wt } from "../tooltip.BFQG-7VR.js";
import { g as m } from "./helpers.CexwVao7.js";
import '../assets/ActionButton.Dw2FeIaW.css';const Bt = "ds-action-button_root_1hfui_1", Lt = "ds-action-button_root--indent-level-1_1hfui_75", Mt = "ds-action-button_root--active_1hfui_78", Et = "ds-action-button_root--active--with-marker_1hfui_81", xt = "ds-action-button_root--icon--top_1hfui_84", Ut = "ds-action-button_root--stretched_1hfui_110", zt = "ds-action-button_root--dark_1hfui_114", Rt = "ds-action-button_active-marker_1hfui_164", Vt = "ds-action-button_active-marker--with-indent_1hfui_176", yt = "ds-action-button_active-marker--dark_1hfui_179", Ht = "ds-action-button_icon-wrapper_1hfui_188", Xt = "ds-action-button_icon-wrapper--x-large_1hfui_191", jt = "ds-action-button_icon-wrapper--with-number-indicator_1hfui_194", Ft = "ds-action-button_icon-wrapper--with-number-indicator--with-value_1hfui_202", Gt = "ds-action-button_label_1hfui_206", Zt = "ds-action-button_label--bold_1hfui_217", $t = "ds-action-button_label--active_1hfui_229", qt = "ds-action-button_label--icon-top_1hfui_241", Jt = "ds-action-button_number-indicator_1hfui_264", Kt = "ds-action-button_label-wrapper_1hfui_268", Qt = "ds-action-button_label-wrapper--icon-top_1hfui_273", Yt = "ds-action-button_chevron_1hfui_277", to = "ds-action-button_chevron--icon-position-top_1hfui_292", oo = "ds-action-button_chevron--up_1hfui_298", eo = "ds-action-button_chevron--right_1hfui_309", no = "ds-action-button_chevron--left_1hfui_320", o = {
root: Bt,
rootIndentLevel1: Lt,
rootActive: Mt,
rootActiveWithMarker: Et,
rootIconTop: xt,
rootStretched: Ut,
rootDark: zt,
activeMarker: Rt,
activeMarkerWithIndent: Vt,
activeMarkerDark: yt,
iconWrapper: Ht,
iconWrapperXLarge: Xt,
iconWrapperWithNumberIndicator: jt,
iconWrapperWithNumberIndicatorWithValue: Ft,
label: Gt,
labelBold: Zt,
labelActive: $t,
labelIconTop: qt,
numberIndicator: Jt,
labelWrapper: Kt,
labelWrapperIconTop: Qt,
chevron: Yt,
chevronIconPositionTop: to,
chevronUp: oo,
chevronRight: eo,
chevronLeft: no
}, _o = ["left", "top"], bo = ["large", "x-large"], vo = [0, 1], mo = ["normal", "bold"], Io = ["up", "down", "right", "left"], io = ({
iconName: I,
iconSize: N,
iconSource: t,
iconPosition: u,
indentLevel: a,
stretched: f,
weight: _,
numberIndicatorValue: r,
numberIndicatorAriaLabel: c
}) => {
if (I && !t && N === "x-large" && console.warn(m("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.')), u === "top") {
if (!I && !t)
throw new Error(m("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.'));
N === "x-large" && console.warn(m("DSActionButton", 'An "iconSize" prop set to "x-large" has no effect when "iconPosition" is set to "top". Please remove the "iconSize" prop.')), _ === "bold" && console.warn(m("DSActionButton", 'A "weight" prop set to "bold" with "iconPosition" set to "top" has no effect. Please remove the "weight" prop.')), a === 1 && console.warn(m("DSActionButton", 'An "indentLevel" prop set to "1" with "iconPosition" set to "top" has no effect. Please remove the "indentLevel" prop.')), f && console.warn(m("DSActionButton", 'A "stretched" prop set to "true" with "iconPosition" set to "top" has no effect. Please remove the "stretched" prop.'));
}
(r || r === "") && !c && console.warn(m("DSActionButton", "Please provide a descriptive aria-label for the Number Indicator for better accessibility."));
}, ro = Ot((I, N) => {
const t = Ct.c(102);
let u, a, f, _, r, c, l, n, b, W, B, L, M, E, x, U, z, R, v;
t[0] !== I ? ({
children: f,
aria: u,
chevronDirection: a,
className: _,
disabled: B,
iconName: r,
iconPosition: L,
iconSize: M,
iconSource: c,
indentLevel: E,
isActive: x,
numberIndicatorValue: n,
numberIndicatorAriaLabel: l,
stretched: U,
weight: z,
theme: R,
tooltip: v,
onClick: b,
...W
} = I, t[0] = I, t[1] = u, t[2] = a, t[3] = f, t[4] = _, t[5] = r, t[6] = c, t[7] = l, t[8] = n, t[9] = b, t[10] = W, t[11] = B, t[12] = L, t[13] = M, t[14] = E, t[15] = x, t[16] = U, t[17] = z, t[18] = R, t[19] = v) : (u = t[1], a = t[2], f = t[3], _ = t[4], r = t[5], c = t[6], l = t[7], n = t[8], b = t[9], W = t[10], B = t[11], L = t[12], M = t[13], E = t[14], x = t[15], U = t[16], z = t[17], R = t[18], v = t[19]);
const i = B === void 0 ? !1 : B, e = L === void 0 ? "left" : L, V = M === void 0 ? "large" : M, Y = E === void 0 ? 0 : E, A = x === void 0 ? !1 : x, gt = U === void 0 ? !1 : U, kt = z === void 0 ? "normal" : z, s = R === void 0 ? "light" : R;
process.env.NODE_ENV !== "production" && io({
iconName: r,
iconSize: V,
iconSource: c,
iconPosition: e,
indentLevel: Y,
numberIndicatorValue: n,
numberIndicatorAriaLabel: l,
stretched: gt,
weight: kt
});
const T = s === "dark";
let y;
t[20] !== n ? (y = n?.trim(), t[20] = n, t[21] = y) : y = t[21];
const p = y === "", tt = e === "top", ot = Y === 1, et = A && !i, nt = A && !i && e === "left", it = gt === !0 && e === "left";
let H;
t[22] !== _ || t[23] !== T || t[24] !== tt || t[25] !== ot || t[26] !== et || t[27] !== nt || t[28] !== it ? (H = O(o.root, _, {
[o.rootDark]: T,
[o.rootIconTop]: tt,
[o.rootIndentLevel1]: ot,
[o.rootActive]: et,
[o.rootActiveWithMarker]: nt,
[o.rootStretched]: it
}), t[22] = _, t[23] = T, t[24] = tt, t[25] = ot, t[26] = et, t[27] = nt, t[28] = it, t[29] = H) : H = t[29];
const rt = H, ct = Y === 1;
let X;
t[30] !== T || t[31] !== ct ? (X = O(o.activeMarker, {
[o.activeMarkerDark]: T,
[o.activeMarkerWithIndent]: ct
}), t[30] = T, t[31] = ct, t[32] = X) : X = t[32];
const at = X, st = A && !i, lt = kt === "bold", pt = e === "top";
let j;
t[33] !== st || t[34] !== lt || t[35] !== pt ? (j = O(o.label, {
[o.labelActive]: st,
[o.labelBold]: lt,
[o.labelIconTop]: pt
}), t[33] = st, t[34] = lt, t[35] = pt, t[36] = j) : j = t[36];
const ht = j, dt = e === "top";
let F;
t[37] !== dt ? (F = O(o.labelWrapper, {
[o.labelWrapperIconTop]: dt
}), t[37] = dt, t[38] = F) : F = t[38];
const ut = F, ft = e === "top", _t = a === "up", bt = a === "right", vt = a === "left";
let G;
t[39] !== ft || t[40] !== _t || t[41] !== bt || t[42] !== vt ? (G = O(o.chevron, {
[o.chevronIconPositionTop]: ft,
[o.chevronUp]: _t,
[o.chevronRight]: bt,
[o.chevronLeft]: vt
}), t[39] = ft, t[40] = _t, t[41] = bt, t[42] = vt, t[43] = G) : G = t[43];
const mt = G, It = V === "x-large", Nt = (r || c) && (n || p), Wt = (r || c) && !p;
let Z;
t[44] !== It || t[45] !== Nt || t[46] !== Wt ? (Z = O(o.iconWrapper, {
[o.iconWrapperXLarge]: It,
[o.iconWrapperWithNumberIndicator]: Nt,
[o.iconWrapperWithNumberIndicatorWithValue]: Wt
}), t[44] = It, t[45] = Nt, t[46] = Wt, t[47] = Z) : Z = t[47];
const At = Z;
let $;
t[48] !== i || t[49] !== b ? ($ = (h) => {
if (i) {
h.preventDefault();
return;
}
b && b(h);
}, t[48] = i, t[49] = b, t[50] = $) : $ = t[50];
const Tt = $;
let w;
t[51] !== at || t[52] !== e || t[53] !== A ? (w = A && e === "left" && /* @__PURE__ */ d("div", { className: at }), t[51] = at, t[52] = e, t[53] = A, t[54] = w) : w = t[54];
let g;
t[55] !== i || t[56] !== r || t[57] !== e || t[58] !== V || t[59] !== c || t[60] !== At || t[61] !== p || t[62] !== l || t[63] !== n || t[64] !== s ? (g = (r || c) && /* @__PURE__ */ d(Pt, { children: /* @__PURE__ */ Q("span", { className: At, children: [
/* @__PURE__ */ d(Dt, { name: r, theme: s, source: c, "aria-hidden": "true", size: r || e === "top" ? "large" : V }),
!i && (e === "left" && p || e === "top" && (n || p)) && /* @__PURE__ */ d(St, { variant: "highlight", "aria-label": l, label: n, theme: s })
] }) }), t[55] = i, t[56] = r, t[57] = e, t[58] = V, t[59] = c, t[60] = At, t[61] = p, t[62] = l, t[63] = n, t[64] = s, t[65] = g) : g = t[65];
let k;
t[66] !== f || t[67] !== ht ? (k = /* @__PURE__ */ d("span", { className: ht, children: f }), t[66] = f, t[67] = ht, t[68] = k) : k = t[68];
let D;
t[69] !== mt || t[70] !== a || t[71] !== s ? (D = a && /* @__PURE__ */ d(Dt, { name: "chevron-down", theme: s, "aria-hidden": "true", className: mt }), t[69] = mt, t[70] = a, t[71] = s, t[72] = D) : D = t[72];
let S;
t[73] !== ut || t[74] !== k || t[75] !== D ? (S = /* @__PURE__ */ Q("div", { className: ut, children: [
k,
D
] }), t[73] = ut, t[74] = k, t[75] = D, t[76] = S) : S = t[76];
let P;
t[77] !== i || t[78] !== e || t[79] !== p || t[80] !== l || t[81] !== n || t[82] !== s ? (P = e === "left" && !i && n && !p && /* @__PURE__ */ d(St, { variant: "default", "aria-label": l, label: n, className: o.numberIndicator, theme: s }), t[77] = i, t[78] = e, t[79] = p, t[80] = l, t[81] = n, t[82] = s, t[83] = P) : P = t[83];
let q;
t[84] !== u || t[85] !== i || t[86] !== Tt || t[87] !== N || t[88] !== W || t[89] !== rt || t[90] !== w || t[91] !== g || t[92] !== S || t[93] !== P ? (q = /* @__PURE__ */ Q("button", { className: rt, type: "button", onClick: Tt, ...u, ...W, "aria-disabled": i, ref: N, children: [
w,
g,
S,
P
] }), t[84] = u, t[85] = i, t[86] = Tt, t[87] = N, t[88] = W, t[89] = rt, t[90] = w, t[91] = g, t[92] = S, t[93] = P, t[94] = q) : q = t[94];
const J = q;
if (v) {
let h;
t[95] !== J ? (h = /* @__PURE__ */ d(wt.Anchor, { children: J }), t[95] = J, t[96] = h) : h = t[96];
let C;
t[97] !== v ? (C = /* @__PURE__ */ d(wt.Content, { children: v }), t[97] = v, t[98] = C) : C = t[98];
let K;
return t[99] !== h || t[100] !== C ? (K = /* @__PURE__ */ Q(wt, { placement: "top", tooltipOffset: 6, children: [
h,
C
] }), t[99] = h, t[100] = C, t[101] = K) : K = t[101], K;
}
return J;
});
ro.displayName = "DSActionButton";
export {
Io as A,
ro as D,
_o as a,
bo as b,
vo as c,
mo as d,
io as v
};