@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
167 lines (166 loc) • 9.11 kB
JavaScript
"use client";
import { jsxs as _t, jsx as v, Fragment as wt } from "react/jsx-runtime";
import { d as bt } from "./index.cKLI89Eg.js";
import { c as $ } from "./index.DQOqod3i.js";
import { forwardRef as It } from "react";
import { D as Nt } from "./Icon.DYtaQgbw.js";
import { NumberIndicator as kt } from "../numberindicator.DsK65Bj3.js";
import { Tooltip as mt } from "../tooltip.BFQG-7VR.js";
import { g as k } from "./helpers.CexwVao7.js";
import '../assets/ActionLink.B1Jjaf7k.css';const ut = "ds-action-link_root_j17qw_1", At = "ds-action-link_root--indent-level-1_j17qw_75", gt = "ds-action-link_root--active_j17qw_78", Wt = "ds-action-link_root--active--with-marker_j17qw_81", Lt = "ds-action-link_root--icon--top_j17qw_84", St = "ds-action-link_root--stretched_j17qw_110", Dt = "ds-action-link_root--dark_j17qw_114", jt = "ds-action-link_active-marker_j17qw_164", qt = "ds-action-link_active-marker--with-indent_j17qw_176", Pt = "ds-action-link_active-marker--dark_j17qw_179", Tt = "ds-action-link_icon-wrapper_j17qw_188", Mt = "ds-action-link_icon-wrapper--x-large_j17qw_191", xt = "ds-action-link_icon-wrapper--with-number-indicator_j17qw_194", Ct = "ds-action-link_icon-wrapper--with-number-indicator--with-value_j17qw_202", Et = "ds-action-link_label_j17qw_206", Ot = "ds-action-link_label--bold_j17qw_217", zt = "ds-action-link_label--active_j17qw_229", Vt = "ds-action-link_label--icon-top_j17qw_241", yt = "ds-action-link_number-indicator_j17qw_264", e = {
root: ut,
rootIndentLevel1: At,
rootActive: gt,
rootActiveWithMarker: Wt,
rootIconTop: Lt,
rootStretched: St,
rootDark: Dt,
activeMarker: jt,
activeMarkerWithIndent: qt,
activeMarkerDark: Pt,
iconWrapper: Tt,
iconWrapperXLarge: Mt,
iconWrapperWithNumberIndicator: xt,
iconWrapperWithNumberIndicatorWithValue: Ct,
label: Et,
labelBold: Ot,
labelActive: zt,
labelIconTop: Vt,
numberIndicator: yt
}, Qt = ["left", "top"], Ut = ["large", "x-large"], Yt = [0, 1], te = ["normal", "bold"], Kt = ({
iconName: w,
iconSize: b,
iconSource: t,
iconPosition: s,
indentLevel: p,
stretched: d,
weight: h,
numberIndicatorValue: r,
numberIndicatorAriaLabel: n
}) => {
if (w && !t && b === "x-large" && console.warn(k("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.')), s === "top") {
if (!w && !t)
throw new Error(k("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.'));
b === "x-large" && console.warn(k("DSActionLink", '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(k("DSActionLink", 'A "weight" prop set to "bold" with "iconPosition" set to "top" has no effect. Please remove the "weight" prop.')), p === 1 && console.warn(k("DSActionLink", 'An "indentLevel" prop set to "1" with "iconPosition" set to "top" has no effect. Please remove the "indentLevel" prop.')), d && console.warn(k("DSActionLink", 'A "stretched" prop set to "true" with "iconPosition" set to "top" has no effect. Please remove the "stretched" prop.'));
}
(r || r === "") && !n && console.warn(k("DSActionLink", "Please provide a descriptive aria-label for the Number Indicator for better accessibility."));
}, Bt = It((w, b) => {
const t = bt.c(91);
let s, p, d, h, r, n, a, c, i, I, N, u, T, M, x, C, E, O, z, V, f;
t[0] !== w ? ({
children: p,
aria: s,
className: d,
download: h,
href: r,
iconName: n,
iconPosition: T,
iconSize: M,
iconSource: a,
indentLevel: x,
isActive: C,
numberIndicatorValue: i,
numberIndicatorAriaLabel: c,
referrerPolicy: I,
rel: N,
stretched: E,
target: O,
theme: z,
tooltip: f,
weight: V,
...u
} = w, t[0] = w, t[1] = s, t[2] = p, t[3] = d, t[4] = h, t[5] = r, t[6] = n, t[7] = a, t[8] = c, t[9] = i, t[10] = I, t[11] = N, t[12] = u, t[13] = T, t[14] = M, t[15] = x, t[16] = C, t[17] = E, t[18] = O, t[19] = z, t[20] = V, t[21] = f) : (s = t[1], p = t[2], d = t[3], h = t[4], r = t[5], n = t[6], a = t[7], c = t[8], i = t[9], I = t[10], N = t[11], u = t[12], T = t[13], M = t[14], x = t[15], C = t[16], E = t[17], O = t[18], z = t[19], V = t[20], f = t[21]);
const o = T === void 0 ? "left" : T, y = M === void 0 ? "large" : M, J = x === void 0 ? 0 : x, _ = C === void 0 ? !1 : C, vt = E === void 0 ? !1 : E, Q = O === void 0 ? "_self" : O, m = z === void 0 ? "light" : z, ft = V === void 0 ? "normal" : V;
process.env.NODE_ENV !== "production" && Kt({
iconName: n,
iconSize: y,
iconSource: a,
iconPosition: o,
indentLevel: J,
numberIndicatorValue: i,
numberIndicatorAriaLabel: c,
stretched: vt,
weight: ft
});
let K;
t[22] !== i ? (K = i?.trim(), t[22] = i, t[23] = K) : K = t[23];
const l = K === "", A = m === "dark", U = o === "top", Y = J === 1, tt = _ && o === "left", et = vt === !0 && o === "left";
let B;
t[24] !== d || t[25] !== _ || t[26] !== A || t[27] !== U || t[28] !== Y || t[29] !== tt || t[30] !== et ? (B = $(e.root, d, {
[e.rootDark]: A,
[e.rootIconTop]: U,
[e.rootIndentLevel1]: Y,
[e.rootActive]: _,
[e.rootActiveWithMarker]: tt,
[e.rootStretched]: et
}), t[24] = d, t[25] = _, t[26] = A, t[27] = U, t[28] = Y, t[29] = tt, t[30] = et, t[31] = B) : B = t[31];
const ot = B, it = J === 1;
let X;
t[32] !== A || t[33] !== it ? (X = $(e.activeMarker, {
[e.activeMarkerDark]: A,
[e.activeMarkerWithIndent]: it
}), t[32] = A, t[33] = it, t[34] = X) : X = t[34];
const nt = X, rt = _ && o === "left", at = ft === "bold", ct = o === "top";
let H;
t[35] !== rt || t[36] !== at || t[37] !== ct ? (H = $(e.label, {
[e.labelActive]: rt,
[e.labelBold]: at,
[e.labelIconTop]: ct
}), t[35] = rt, t[36] = at, t[37] = ct, t[38] = H) : H = t[38];
const lt = H, st = y === "x-large", pt = (n || a) && (i || l), dt = (n || a) && !l;
let F;
t[39] !== st || t[40] !== pt || t[41] !== dt ? (F = $(e.iconWrapper, {
[e.iconWrapperXLarge]: st,
[e.iconWrapperWithNumberIndicator]: pt,
[e.iconWrapperWithNumberIndicatorWithValue]: dt
}), t[39] = st, t[40] = pt, t[41] = dt, t[42] = F) : F = t[42];
const ht = F, g = r === void 0 ? "span" : "a";
let W;
t[43] !== g || t[44] !== h || t[45] !== r || t[46] !== I || t[47] !== N || t[48] !== Q ? (W = g === "a" && {
href: r,
target: Q,
rel: N,
referrerPolicy: I,
download: h
}, t[43] = g, t[44] = h, t[45] = r, t[46] = I, t[47] = N, t[48] = Q, t[49] = W) : W = t[49];
let L;
t[50] !== nt || t[51] !== o || t[52] !== _ ? (L = _ && o === "left" && /* @__PURE__ */ v("div", { className: nt }), t[50] = nt, t[51] = o, t[52] = _, t[53] = L) : L = t[53];
let S;
t[54] !== n || t[55] !== o || t[56] !== y || t[57] !== a || t[58] !== ht || t[59] !== l || t[60] !== c || t[61] !== i || t[62] !== m ? (S = (n || a) && /* @__PURE__ */ v(wt, { children: /* @__PURE__ */ _t("span", { className: ht, children: [
/* @__PURE__ */ v(Nt, { name: n, theme: m, source: a, "aria-hidden": "true", size: n || o === "top" ? "large" : y }),
(o === "left" && l || o === "top" && (i || l)) && /* @__PURE__ */ v(kt, { variant: "highlight", "aria-label": c, label: i, theme: m })
] }) }), t[54] = n, t[55] = o, t[56] = y, t[57] = a, t[58] = ht, t[59] = l, t[60] = c, t[61] = i, t[62] = m, t[63] = S) : S = t[63];
let D;
t[64] !== p || t[65] !== lt ? (D = /* @__PURE__ */ v("span", { className: lt, children: p }), t[64] = p, t[65] = lt, t[66] = D) : D = t[66];
let j;
t[67] !== o || t[68] !== l || t[69] !== c || t[70] !== i || t[71] !== m ? (j = o === "left" && i && !l && /* @__PURE__ */ v(kt, { variant: "default", "aria-label": c, label: i, className: e.numberIndicator, theme: m }), t[67] = o, t[68] = l, t[69] = c, t[70] = i, t[71] = m, t[72] = j) : j = t[72];
let G;
t[73] !== g || t[74] !== s || t[75] !== b || t[76] !== u || t[77] !== ot || t[78] !== W || t[79] !== L || t[80] !== S || t[81] !== D || t[82] !== j ? (G = /* @__PURE__ */ _t(g, { className: ot, ...W, ...s, ...u, ref: b, children: [
L,
S,
D,
j
] }), t[73] = g, t[74] = s, t[75] = b, t[76] = u, t[77] = ot, t[78] = W, t[79] = L, t[80] = S, t[81] = D, t[82] = j, t[83] = G) : G = t[83];
const R = G;
if (f) {
let q;
t[84] !== R ? (q = /* @__PURE__ */ v(mt.Anchor, { children: R }), t[84] = R, t[85] = q) : q = t[85];
let P;
t[86] !== f ? (P = /* @__PURE__ */ v(mt.Content, { children: f }), t[86] = f, t[87] = P) : P = t[87];
let Z;
return t[88] !== q || t[89] !== P ? (Z = /* @__PURE__ */ _t(mt, { placement: "top", tooltipOffset: 6, children: [
q,
P
] }), t[88] = q, t[89] = P, t[90] = Z) : Z = t[90], Z;
}
return R;
});
Bt.displayName = "DSActionLink";
export {
Qt as A,
Bt as D,
Ut as a,
Yt as b,
te as c,
Kt as v
};