@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
154 lines (153 loc) • 8.21 kB
JavaScript
"use client";
import { jsxs as lt, jsx as h, Fragment as _t } from "react/jsx-runtime";
import { d as mt } from "./index.D-sRdssb.js";
import { c as F } from "./index.DL9mof6u.js";
import { forwardRef as ft } from "react";
import { D as vt } from "./Icon.CDLyB7Pv.js";
import { NumberIndicator as ht } from "../numberindicator.BdnPMogE.js";
import { Tooltip as st } from "../tooltip.Cj3AvYgB.js";
import { g as S } from "./helpers.CexwVao7.js";
import '../assets/ActionLink.CTh6IXrN.css';const bt = "ds-action-link_root_1xtta_1", kt = "ds-action-link_root--indent-level-1_1xtta_75", It = "ds-action-link_root--active_1xtta_78", ut = "ds-action-link_root--active--with-marker_1xtta_81", Nt = "ds-action-link_root--icon--top_1xtta_84", At = "ds-action-link_root--stretched_1xtta_110", gt = "ds-action-link_active-marker_1xtta_115", wt = "ds-action-link_active-marker--with-indent_1xtta_127", Wt = "ds-action-link_icon-wrapper_1xtta_131", xt = "ds-action-link_icon-wrapper--x-large_1xtta_134", Lt = "ds-action-link_icon-wrapper--with-number-indicator_1xtta_137", St = "ds-action-link_icon-wrapper--with-number-indicator--with-value_1xtta_145", Pt = "ds-action-link_label_1xtta_149", Tt = "ds-action-link_label--bold_1xtta_160", Dt = "ds-action-link_label--active_1xtta_171", Ct = "ds-action-link_label--icon-top_1xtta_182", Mt = "ds-action-link_number-indicator_1xtta_205", o = {
root: bt,
rootIndentLevel1: kt,
rootActive: It,
rootActiveWithMarker: ut,
rootIconTop: Nt,
rootStretched: At,
activeMarker: gt,
activeMarkerWithIndent: wt,
iconWrapper: Wt,
iconWrapperXLarge: xt,
iconWrapperWithNumberIndicator: Lt,
iconWrapperWithNumberIndicatorWithValue: St,
label: Pt,
labelBold: Tt,
labelActive: Dt,
labelIconTop: Ct,
numberIndicator: Mt
}, Ft = ["left", "top"], Gt = ["large", "x-large"], Rt = [0, 1], Zt = ["normal", "bold"], Et = ({
iconName: f,
iconSize: v,
iconSource: t,
iconPosition: c,
indentLevel: l,
stretched: s,
weight: p
}) => {
if (f && !t && v === "x-large" && console.warn(S("DSActionLink", '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.')), c === "top") {
if (!f && !t)
throw new Error(S("DSActionLink", '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(S("DSActionLink", 'An "iconSize" prop set to "x-large" has no effect when "iconPosition" is set to "top". Please remove the "iconSize" prop.')), p === "bold" && console.warn(S("DSActionLink", 'A "weight" prop set to "bold" with "iconPosition" set to "top" has no effect. Please remove the "weight" prop.')), l === 1 && console.warn(S("DSActionLink", 'An "indentLevel" prop set to "1" with "iconPosition" set to "top" has no effect. Please remove the "indentLevel" prop.')), s && console.warn(S("DSActionLink", 'A "stretched" prop set to "true" with "iconPosition" set to "top" has no effect. Please remove the "stretched" prop.'));
}
}, Ot = ft((f, v) => {
const t = mt.c(81);
let c, l, s, p, _, n, r, i, b, k, I, P, T, D, C, M, E, O, m;
t[0] !== f ? ({
children: l,
aria: c,
className: s,
download: p,
href: _,
iconName: n,
iconPosition: P,
iconSize: T,
iconSource: r,
indentLevel: D,
isActive: C,
numberIndicatorValue: i,
referrerPolicy: b,
rel: k,
stretched: M,
target: E,
tooltip: m,
weight: O,
...I
} = f, t[0] = f, t[1] = c, t[2] = l, t[3] = s, t[4] = p, t[5] = _, t[6] = n, t[7] = r, t[8] = i, t[9] = b, t[10] = k, t[11] = I, t[12] = P, t[13] = T, t[14] = D, t[15] = C, t[16] = M, t[17] = E, t[18] = O, t[19] = m) : (c = t[1], l = t[2], s = t[3], p = t[4], _ = t[5], n = t[6], r = t[7], i = t[8], b = t[9], k = t[10], I = t[11], P = t[12], T = t[13], D = t[14], C = t[15], M = t[16], E = t[17], O = t[18], m = t[19]);
const e = P === void 0 ? "left" : P, z = T === void 0 ? "large" : T, G = D === void 0 ? 0 : D, d = C === void 0 ? !1 : C, pt = M === void 0 ? !1 : M, R = E === void 0 ? "_self" : E, dt = O === void 0 ? "normal" : O;
process.env.NODE_ENV !== "production" && Et({
iconName: n,
iconSize: z,
iconSource: r,
iconPosition: e,
indentLevel: G,
stretched: pt,
weight: dt
});
const a = i?.trim() === "", Z = e === "top", $ = G === 1, q = d && e === "left", J = pt === !0 && e === "left";
let V;
t[20] !== s || t[21] !== d || t[22] !== q || t[23] !== J || t[24] !== Z || t[25] !== $ ? (V = F(o.root, s, {
[o.rootIconTop]: Z,
[o.rootIndentLevel1]: $,
[o.rootActive]: d,
[o.rootActiveWithMarker]: q,
[o.rootStretched]: J
}), t[20] = s, t[21] = d, t[22] = q, t[23] = J, t[24] = Z, t[25] = $, t[26] = V) : V = t[26];
const Q = V, U = G === 1;
let K;
t[27] !== U ? (K = F(o.activeMarker, {
[o.activeMarkerWithIndent]: U
}), t[27] = U, t[28] = K) : K = t[28];
const Y = K, tt = d && e === "left", et = dt === "bold", ot = e === "top";
let y;
t[29] !== tt || t[30] !== et || t[31] !== ot ? (y = F(o.label, {
[o.labelActive]: tt,
[o.labelBold]: et,
[o.labelIconTop]: ot
}), t[29] = tt, t[30] = et, t[31] = ot, t[32] = y) : y = t[32];
const it = y, nt = z === "x-large", rt = (n || r) && (i || a), at = (n || r) && !a;
let B;
t[33] !== nt || t[34] !== rt || t[35] !== at ? (B = F(o.iconWrapper, {
[o.iconWrapperXLarge]: nt,
[o.iconWrapperWithNumberIndicator]: rt,
[o.iconWrapperWithNumberIndicatorWithValue]: at
}), t[33] = nt, t[34] = rt, t[35] = at, t[36] = B) : B = t[36];
const ct = B, u = _ === void 0 ? "span" : "a";
let N;
t[37] !== u || t[38] !== p || t[39] !== _ || t[40] !== b || t[41] !== k || t[42] !== R ? (N = u === "a" && {
href: _,
target: R,
rel: k,
referrerPolicy: b,
download: p
}, t[37] = u, t[38] = p, t[39] = _, t[40] = b, t[41] = k, t[42] = R, t[43] = N) : N = t[43];
let A;
t[44] !== Y || t[45] !== e || t[46] !== d ? (A = d && e === "left" && /* @__PURE__ */ h("div", { className: Y }), t[44] = Y, t[45] = e, t[46] = d, t[47] = A) : A = t[47];
let g;
t[48] !== n || t[49] !== e || t[50] !== z || t[51] !== r || t[52] !== ct || t[53] !== a || t[54] !== i ? (g = (n || r) && /* @__PURE__ */ h(_t, { children: /* @__PURE__ */ lt("span", { className: ct, children: [
/* @__PURE__ */ h(vt, { name: n, theme: "light", source: r, "aria-hidden": "true", size: n || e === "top" ? "large" : z }),
(e === "left" && a || e === "top" && (i || a)) && /* @__PURE__ */ h(ht, { variant: "highlight", label: i })
] }) }), t[48] = n, t[49] = e, t[50] = z, t[51] = r, t[52] = ct, t[53] = a, t[54] = i, t[55] = g) : g = t[55];
let w;
t[56] !== l || t[57] !== it ? (w = /* @__PURE__ */ h("span", { className: it, children: l }), t[56] = l, t[57] = it, t[58] = w) : w = t[58];
let W;
t[59] !== e || t[60] !== a || t[61] !== i ? (W = e === "left" && i && !a && /* @__PURE__ */ h(ht, { variant: "default", label: i, className: o.numberIndicator }), t[59] = e, t[60] = a, t[61] = i, t[62] = W) : W = t[62];
let X;
t[63] !== u || t[64] !== c || t[65] !== v || t[66] !== I || t[67] !== Q || t[68] !== N || t[69] !== A || t[70] !== g || t[71] !== w || t[72] !== W ? (X = /* @__PURE__ */ lt(u, { className: Q, ...N, ...c, ...I, ref: v, children: [
A,
g,
w,
W
] }), t[63] = u, t[64] = c, t[65] = v, t[66] = I, t[67] = Q, t[68] = N, t[69] = A, t[70] = g, t[71] = w, t[72] = W, t[73] = X) : X = t[73];
const j = X;
if (m) {
let x;
t[74] !== j ? (x = /* @__PURE__ */ h(st.Anchor, { children: j }), t[74] = j, t[75] = x) : x = t[75];
let L;
t[76] !== m ? (L = /* @__PURE__ */ h(st.Content, { children: m }), t[76] = m, t[77] = L) : L = t[77];
let H;
return t[78] !== x || t[79] !== L ? (H = /* @__PURE__ */ lt(st, { placement: "top", tooltipOffset: 6, children: [
x,
L
] }), t[78] = x, t[79] = L, t[80] = H) : H = t[80], H;
}
return j;
});
Ot.displayName = "DSActionLink";
export {
Ft as A,
Ot as D,
Gt as a,
Rt as b,
Zt as c,
Et as v
};