@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
144 lines (143 loc) • 6.2 kB
JavaScript
"use client";
import { jsxs as h, jsx as m } from "react/jsx-runtime";
import { d as B } from "./chunks/index.cKLI89Eg.js";
import { c as v } from "./chunks/index.DQOqod3i.js";
import { D as x } from "./chunks/Button.CCol--xy.js";
import { D as A } from "./chunks/SystemFeedback.DhWcYjnu.js";
import { FilePreview as I } from "./filepreview.B2Ot9SZ7.js";
import { ProgressIndicator as y } from "./progressindicator.CAb_O3VK.js";
import './assets/filelist.B-Ru0GP_.css';const T = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), U = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), W = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), z = /[^\p{L}\d]+/giu, E = "$1\0$2", D = "";
function w(r) {
let e = r.trim();
e = e.replace(T, E).replace(U, E), e = e.replace(z, "\0");
let i = 0, a = e.length;
for (; e.charAt(i) === "\0"; )
i++;
if (i === a)
return [];
for (; e.charAt(a - 1) === "\0"; )
a--;
return e.slice(i, a).split(/\0/g);
}
function $(r) {
const e = w(r);
for (let i = 0; i < e.length; i++) {
const a = e[i], s = W.exec(a);
if (s) {
const o = s.index + (s[1] ?? s[2]).length;
e.splice(i, 1, a.slice(0, o), a.slice(o));
}
}
return e;
}
function M(r, e) {
const [i, a, s] = X(r, e);
return i + a.map(j(e?.locale)).join(e?.delimiter ?? " ") + s;
}
function C(r, e) {
return M(r, { delimiter: "-", ...e });
}
function j(r) {
return r === !1 ? (e) => e.toLowerCase() : (e) => e.toLocaleLowerCase(r);
}
function X(r, e = {}) {
const i = e.split ?? (e.separateNumbers ? $ : w), a = e.prefixCharacters ?? D, s = e.suffixCharacters ?? D;
let o = 0, d = r.length;
for (; o < r.length; ) {
const n = r.charAt(o);
if (!a.includes(n))
break;
o++;
}
for (; d > o; ) {
const n = d - 1, l = r.charAt(n);
if (!s.includes(l))
break;
d = n;
}
return [
r.slice(0, o),
i(r.slice(o, d)),
r.slice(d)
];
}
const G = "ds-input-file_root_1t180_1", H = "ds-input-file_file-wrapper_1t180_7", K = "ds-input-file_file-wrapper--dark_1t180_16", O = "ds-input-file_file-wrapper--invalid_1t180_19", V = "ds-input-file_file-details_1t180_26", q = "ds-input-file_file-name_1t180_40", J = "ds-input-file_file-name--dark_1t180_43", Q = "ds-input-file_file-size_1t180_47", Y = "ds-input-file_file-size--dark_1t180_62", Z = "ds-input-file_progress-bar_1t180_66", ee = "ds-input-file_feedback_1t180_71", c = {
root: G,
fileWrapper: H,
fileWrapperDark: K,
fileWrapperInvalid: O,
fileDetails: V,
fileName: q,
fileNameDark: J,
fileSize: Q,
fileSizeDark: Y,
progressBar: Z,
feedback: ee
}, te = (r) => r >= 1024 * 1024 ? (r / (1024 * 1024)).toFixed(1) + " MB" : r >= 1024 ? (r / 1024).toFixed(0) + " KB" : r + " B", pe = (r) => {
const e = B.c(15), {
files: i,
onRemoveFile: a,
t: s,
showProgress: o,
theme: d
} = r, n = d === void 0 ? "light" : d, l = n === "dark", k = re, L = se;
let u;
if (e[0] !== i || e[1] !== l || e[2] !== a || e[3] !== o || e[4] !== s || e[5] !== n) {
let P;
e[7] !== l || e[8] !== a || e[9] !== o || e[10] !== s || e[11] !== n ? (P = (t, g) => {
const p = t.uploadStatus === "error", f = t.uploadStatus === "success", _ = t.uploadStatus === "uploading";
let S = "indeterminate";
if (t.uploadPercent !== void 0 && t.uploadPercent !== "indeterminate") {
const R = f ? 100 : 0, F = t.uploadPercent === void 0 ? R : t.uploadPercent;
S = Math.min(Math.max(F, 0), 100);
}
const N = _ ? s("fileListCancelUploadButtonLabel", {
fileName: t.name
}) : f ? s("fileListDeleteFileButtonLabel", {
fileName: t.name
}) : s("fileListRemoveSelectionButtonLabel", {
fileName: t.name
});
return /* @__PURE__ */ h("div", { className: v(c.fileWrapper, {
[c.fileWrapperDark]: l,
[c.fileWrapperInvalid]: p
}), "aria-busy": _ ? "true" : "false", "aria-describedby": _ ? L(t.name) : k(t.name), "aria-invalid": p ? !0 : void 0, children: [
/* @__PURE__ */ m(I, { file: t, t: s, theme: n }),
/* @__PURE__ */ h("div", { className: c.fileDetails, children: [
/* @__PURE__ */ m("span", { className: v(c.fileName, {
[c.fileNameDark]: l
}), children: t.name }),
/* @__PURE__ */ m("span", { className: v(c.fileSize, {
[c.fileSizeDark]: l
}), children: te(t.size) })
] }),
/* @__PURE__ */ h("div", { children: [
p && t.retryButtonProps && /* @__PURE__ */ h(x, { ...t.retryButtonProps, onClick: t.retryButtonProps.onClick, hideLabel: !0, iconName: "arrow-counterclockwise", size: "small", variant: "ghost", type: "button", "aria-describedby": t.feedback ? k(t.name) : void 0, tooltip: s("retry"), theme: n, children: [
s("retry"),
"."
] }),
(_ || f) && !t.removeButtonProps?.onClick ? null : /* @__PURE__ */ h(x, { ...t.removeButtonProps, onClick: () => {
t.uploadStatus !== void 0 && t.removeButtonProps?.onClick ? t.removeButtonProps?.onClick() : a(g);
}, hideLabel: !0, iconName: "cross", size: "small", variant: "ghost", type: "button", "aria-describedby": t.feedback && p ? k(t.name) : void 0, tooltip: N, theme: n, children: [
N,
"."
] })
] }),
(_ || p) && o && /* @__PURE__ */ m(y, { id: L(t.name), fileName: t.name, percent: S, progressStatus: p ? "error" : "uploading", className: c.progressBar, variant: o, theme: n, t: s }),
(t.feedback && (p || f) || t.feedback === void 0 && f) && /* @__PURE__ */ m(A, { variant: p ? "error" : "success", id: k(t.name), message: t.feedback || s("success"), className: c.feedback, theme: n })
] }, g + t.name);
}, e[7] = l, e[8] = a, e[9] = o, e[10] = s, e[11] = n, e[12] = P) : P = e[12], u = i.map(P), e[0] = i, e[1] = l, e[2] = a, e[3] = o, e[4] = s, e[5] = n, e[6] = u;
} else
u = e[6];
let b;
return e[13] !== u ? (b = /* @__PURE__ */ m("div", { className: c.root, children: u }), e[13] = u, e[14] = b) : b = e[14], b;
};
function re(r) {
return `file-feedback-${C(r)}`;
}
function se(r) {
return `progress-${C(r)}`;
}
export {
pe as FileList
};