@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
75 lines (74 loc) • 3.67 kB
JavaScript
"use client";
import { jsx as t, Fragment as c, jsxs as g } from "react/jsx-runtime";
import { d as x } from "./chunks/index.cKLI89Eg.js";
import { c as l } from "./chunks/index.DQOqod3i.js";
import { DSSpinner as N } from "./spinner.DtLnsqVV.js";
import './assets/progressindicator.BK8L7Bd4.css';const v = "ds-input-file_root_168c2_1", B = "ds-input-file_bar-background_168c2_7", I = "ds-input-file_bar-background--dark_168c2_23", T = "ds-input-file_bar-fill_168c2_27", L = "ds-input-file_bar-fill--dark_168c2_32", $ = "ds-input-file_bar-fill--error_168c2_35", w = "ds-input-file_bar-fill-indeterminate_168c2_46", E = "ds-input-file_bar-fill-indeterminate--dark_168c2_61", S = "ds-input-file_percent-label_168c2_70", j = "ds-input-file_percent-label--dark_168c2_83", y = "ds-input-file_progress-text_168c2_87", A = "ds-input-file_progress-text--dark_168c2_102", P = "ds-input-file_progress-bar_168c2_106", e = {
root: v,
barBackground: B,
barBackgroundDark: I,
barFill: T,
barFillDark: L,
barFillError: $,
barFillIndeterminate: w,
barFillIndeterminateDark: E,
percentLabel: S,
percentLabelDark: j,
progressText: y,
progressTextDark: A,
progressBar: P
}, H = (F) => {
const r = x.c(17), {
className: d,
fileName: f,
id: p,
percent: n,
progressStatus: h,
variant: b,
theme: D,
t: a
} = F, i = (D === void 0 ? "light" : D) === "dark", s = n === "indeterminate";
let u;
r[0] !== a ? (u = a("uploadStatus"), r[0] = a, r[1] = u) : u = r[1];
let _;
r[2] !== f || r[3] !== s || r[4] !== a ? (_ = s ? `, ${a("fileListIndeterminate", {
fileName: f
})}` : "", r[2] = f, r[3] = s, r[4] = a, r[5] = _) : _ = r[5];
const o = `${u}${_}`, m = s ? void 0 : n;
let k;
return r[6] !== m || r[7] !== d || r[8] !== p || r[9] !== i || r[10] !== s || r[11] !== n || r[12] !== h || r[13] !== o || r[14] !== a || r[15] !== b ? (k = b === "text" ? /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t("span", { id: p, className: l(e.root, e.progressText, {
[e.progressTextDark]: i
}, d), role: "progressbar", "aria-label": o, "aria-valuenow": m, children: s ? /* @__PURE__ */ g(c, { children: [
/* @__PURE__ */ t(N, { aria: {
"aria-label": a("uploading")
} }),
/* @__PURE__ */ t("span", { children: a("uploading") })
] }) : `${o} ${n}%` }) }) : b === "bar" ? /* @__PURE__ */ g(c, { children: [
/* @__PURE__ */ t("div", { id: p, className: l(e.root, e.progressBar, d), role: "progressbar", "aria-label": o, "aria-valuenow": m, children: s ? /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t("div", { className: l(e.barBackground, {
[e.barBackgroundDark]: i
}), "aria-hidden": "true", children: /* @__PURE__ */ t("div", { className: l(e.barFillIndeterminate, {
[e.barFillIndeterminateDark]: i
}) }) }) }) : /* @__PURE__ */ g(c, { children: [
/* @__PURE__ */ t("div", { className: l(e.barBackground, {
[e.barBackgroundDark]: i
}), "aria-hidden": "true", children: /* @__PURE__ */ t("div", { className: l(e.barFill, {
[e.barFillDark]: i,
[e.barFillError]: h === "error"
}), style: {
width: `${n}%`
} }) }),
/* @__PURE__ */ g("span", { className: l(e.percentLabel, {
[e.percentLabelDark]: i
}), "aria-hidden": "true", children: [
n,
"%"
] })
] }) }),
s && /* @__PURE__ */ t("div", { className: l(e.progressText, {
[e.progressTextDark]: i
}), children: a("uploading") })
] }) : null, r[6] = m, r[7] = d, r[8] = p, r[9] = i, r[10] = s, r[11] = n, r[12] = h, r[13] = o, r[14] = a, r[15] = b, r[16] = k) : k = r[16], k;
};
export {
H as ProgressIndicator
};