@stihl-design-system/components/chunks/ActionButton.CzaWZGPt.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as ut, jsx as u, Fragment as It } from "react/jsx-runtime";
import { d as Nt } from "./index.CgTHIF3K.js";
import { c as T } from "./index.CEyLAtio.js";
import { forwardRef as Wt } from "react";
import { D as ft } from "./Icon.DGTYCv63.js";
import { NumberIndicator as mt } from "../numberindicator.Ddf3ESi7.js";
import { g as A } from "./helpers.BbWkXTr3.js";
import '../assets/ActionButton.Ewi0i1hW.css';const gt = "ds-action-button_root_16ush_1", wt = "ds-action-button_root--indent-level-1_16ush_72", Tt = "ds-action-button_root--active_16ush_75", At = "ds-action-button_root--active--with-marker_16ush_78", St = "ds-action-button_root--icon--top_16ush_81", Pt = "ds-action-button_root--stretched_16ush_106", Ct = "ds-action-button_active-marker_16ush_111", Dt = "ds-action-button_active-marker--with-indent_16ush_123", Ot = "ds-action-button_icon-wrapper_16ush_127", Bt = "ds-action-button_icon-wrapper--x-large_16ush_130", kt = "ds-action-button_icon-wrapper--with-number-indicator_16ush_133", Lt = "ds-action-button_icon-wrapper--with-number-indicator--with-value_16ush_141", xt = "ds-action-button_label_16ush_145", Et = "ds-action-button_label--bold_16ush_156", Mt = "ds-action-button_label--active_16ush_167", Ut = "ds-action-button_label--icon-top_16ush_178", zt = "ds-action-button_number-indicator_16ush_201", Rt = "ds-action-button_label-wrapper_16ush_205", Vt = "ds-action-button_label-wrapper--icon-top_16ush_210", yt = "ds-action-button_chevron_16ush_214", Ht = "ds-action-button_chevron--icon-position-top_16ush_229", Xt = "ds-action-button_chevron--up_16ush_235", jt = "ds-action-button_chevron--right_16ush_246", Ft = "ds-action-button_chevron--left_16ush_257", o = {
  root: gt,
  rootIndentLevel1: wt,
  rootActive: Tt,
  rootActiveWithMarker: At,
  rootIconTop: St,
  rootStretched: Pt,
  activeMarker: Ct,
  activeMarkerWithIndent: Dt,
  iconWrapper: Ot,
  iconWrapperXLarge: Bt,
  iconWrapperWithNumberIndicator: kt,
  iconWrapperWithNumberIndicatorWithValue: Lt,
  label: xt,
  labelBold: Et,
  labelActive: Mt,
  labelIconTop: Ut,
  numberIndicator: zt,
  labelWrapper: Rt,
  labelWrapperIconTop: Vt,
  chevron: yt,
  chevronIconPositionTop: Ht,
  chevronUp: Xt,
  chevronRight: jt,
  chevronLeft: Ft
}, oo = ["left", "top"], eo = ["large", "x-large"], no = [0, 1], io = ["normal", "bold"], ro = ["up", "down", "right", "left"], Gt = ({
  iconName: _,
  iconSize: v,
  iconSource: t,
  iconPosition: l,
  indentLevel: r,
  stretched: p,
  weight: h
}) => {
  if (_ && !t && v === "x-large" && console.warn(A("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.')), l === "top") {
    if (!_ && !t)
      throw new Error(A("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.'));
    v === "x-large" && console.warn(A("DSActionButton", 'An "iconSize" prop set to "x-large" has no effect when "iconPosition" is set to "top". Please remove the "iconSize" prop.')), h === "bold" && console.warn(A("DSActionButton", 'A "weight" prop set to "bold" with "iconPosition" set to "top" has no effect. Please remove the "weight" prop.')), r === 1 && console.warn(A("DSActionButton", 'An "indentLevel" prop set to "1" with "iconPosition" set to "top" has no effect. Please remove the "indentLevel" prop.')), p && console.warn(A("DSActionButton", 'A "stretched" prop set to "true" with "iconPosition" set to "top" has no effect. Please remove the "stretched" prop.'));
  }
}, Zt = Wt((_, v) => {
  const t = Nt.c(83);
  let l, r, p, h, c, s, n, d, b, S, P, C, D, O, B, k;
  t[0] !== _ ? ({
    children: p,
    aria: l,
    chevronDirection: r,
    className: h,
    disabled: S,
    iconName: c,
    iconPosition: P,
    iconSize: C,
    iconSource: s,
    indentLevel: D,
    isActive: O,
    numberIndicatorValue: n,
    stretched: B,
    weight: k,
    onClick: d,
    ...b
  } = _, t[0] = _, t[1] = l, t[2] = r, t[3] = p, t[4] = h, t[5] = c, t[6] = s, t[7] = n, t[8] = d, t[9] = b, t[10] = S, t[11] = P, t[12] = C, t[13] = D, t[14] = O, t[15] = B, t[16] = k) : (l = t[1], r = t[2], p = t[3], h = t[4], c = t[5], s = t[6], n = t[7], d = t[8], b = t[9], S = t[10], P = t[11], C = t[12], D = t[13], O = t[14], B = t[15], k = t[16]);
  const i = S === void 0 ? !1 : S, e = P === void 0 ? "left" : P, L = C === void 0 ? "large" : C, H = D === void 0 ? 0 : D, f = O === void 0 ? !1 : O, _t = B === void 0 ? !1 : B, vt = k === void 0 ? "normal" : k;
  process.env.NODE_ENV !== "production" && Gt({
    iconName: c,
    iconSize: L,
    iconSource: s,
    iconPosition: e,
    indentLevel: H,
    stretched: _t,
    weight: vt
  });
  const a = (n == null ? void 0 : n.trim()) === "", X = e === "top", j = H === 1, F = f && !i, G = f && !i && e === "left", Z = _t === !0 && e === "left";
  let x;
  t[17] !== h || t[18] !== F || t[19] !== G || t[20] !== Z || t[21] !== X || t[22] !== j ? (x = T(o.root, h, {
    [o.rootIconTop]: X,
    [o.rootIndentLevel1]: j,
    [o.rootActive]: F,
    [o.rootActiveWithMarker]: G,
    [o.rootStretched]: Z
  }), t[17] = h, t[18] = F, t[19] = G, t[20] = Z, t[21] = X, t[22] = j, t[23] = x) : x = t[23];
  const $ = x, q = H === 1;
  let E;
  t[24] !== q ? (E = T(o.activeMarker, {
    [o.activeMarkerWithIndent]: q
  }), t[24] = q, t[25] = E) : E = t[25];
  const J = E, K = f && !i, Q = vt === "bold", Y = e === "top";
  let M;
  t[26] !== K || t[27] !== Q || t[28] !== Y ? (M = T(o.label, {
    [o.labelActive]: K,
    [o.labelBold]: Q,
    [o.labelIconTop]: Y
  }), t[26] = K, t[27] = Q, t[28] = Y, t[29] = M) : M = t[29];
  const tt = M, ot = e === "top";
  let U;
  t[30] !== ot ? (U = T(o.labelWrapper, {
    [o.labelWrapperIconTop]: ot
  }), t[30] = ot, t[31] = U) : U = t[31];
  const et = U, nt = e === "top", it = r === "up", rt = r === "right", ct = r === "left";
  let z;
  t[32] !== nt || t[33] !== it || t[34] !== rt || t[35] !== ct ? (z = T(o.chevron, {
    [o.chevronIconPositionTop]: nt,
    [o.chevronUp]: it,
    [o.chevronRight]: rt,
    [o.chevronLeft]: ct
  }), t[32] = nt, t[33] = it, t[34] = rt, t[35] = ct, t[36] = z) : z = t[36];
  const st = z, at = L === "x-large", lt = (c || s) && (n || a), pt = (c || s) && !a;
  let R;
  t[37] !== at || t[38] !== lt || t[39] !== pt ? (R = T(o.iconWrapper, {
    [o.iconWrapperXLarge]: at,
    [o.iconWrapperWithNumberIndicator]: lt,
    [o.iconWrapperWithNumberIndicatorWithValue]: pt
  }), t[37] = at, t[38] = lt, t[39] = pt, t[40] = R) : R = t[40];
  const ht = R;
  let V;
  t[41] !== i || t[42] !== d ? (V = (bt) => {
    if (i) {
      bt.preventDefault();
      return;
    }
    d && d(bt);
  }, t[41] = i, t[42] = d, t[43] = V) : V = t[43];
  const dt = V;
  let m;
  t[44] !== J || t[45] !== e || t[46] !== f ? (m = f && e === "left" && /* @__PURE__ */ u("div", { className: J }), t[44] = J, t[45] = e, t[46] = f, t[47] = m) : m = t[47];
  let I;
  t[48] !== i || t[49] !== c || t[50] !== e || t[51] !== L || t[52] !== s || t[53] !== ht || t[54] !== a || t[55] !== n ? (I = (c || s) && /* @__PURE__ */ u(It, { children: /* @__PURE__ */ ut("span", { className: ht, children: [
    /* @__PURE__ */ u(ft, { name: c, theme: "light", source: s, "aria-hidden": "true", size: c || e === "top" ? "large" : L }),
    !i && (e === "left" && a || e === "top" && (n || a)) && /* @__PURE__ */ u(mt, { variant: "highlight", label: n })
  ] }) }), t[48] = i, t[49] = c, t[50] = e, t[51] = L, t[52] = s, t[53] = ht, t[54] = a, t[55] = n, t[56] = I) : I = t[56];
  let N;
  t[57] !== p || t[58] !== tt ? (N = /* @__PURE__ */ u("span", { className: tt, children: p }), t[57] = p, t[58] = tt, t[59] = N) : N = t[59];
  let W;
  t[60] !== st || t[61] !== r ? (W = r && /* @__PURE__ */ u(ft, { name: "chevron-down", theme: "light", "aria-hidden": "true", className: st }), t[60] = st, t[61] = r, t[62] = W) : W = t[62];
  let g;
  t[63] !== et || t[64] !== N || t[65] !== W ? (g = /* @__PURE__ */ ut("div", { className: et, children: [
    N,
    W
  ] }), t[63] = et, t[64] = N, t[65] = W, t[66] = g) : g = t[66];
  let w;
  t[67] !== i || t[68] !== e || t[69] !== a || t[70] !== n ? (w = e === "left" && !i && n && !a && /* @__PURE__ */ u(mt, { variant: "default", label: n, className: o.numberIndicator }), t[67] = i, t[68] = e, t[69] = a, t[70] = n, t[71] = w) : w = t[71];
  let y;
  return t[72] !== l || t[73] !== i || t[74] !== dt || t[75] !== v || t[76] !== b || t[77] !== $ || t[78] !== m || t[79] !== I || t[80] !== g || t[81] !== w ? (y = /* @__PURE__ */ ut("button", { className: $, type: "button", onClick: dt, ...l, ...b, "aria-disabled": i, ref: v, children: [
    m,
    I,
    g,
    w
  ] }), t[72] = l, t[73] = i, t[74] = dt, t[75] = v, t[76] = b, t[77] = $, t[78] = m, t[79] = I, t[80] = g, t[81] = w, t[82] = y) : y = t[82], y;
});
Zt.displayName = "DSActionButton";
export {
  oo as A,
  Zt as D,
  eo as a,
  no as b,
  io as c,
  ro as d,
  Gt as v
};