@adyen/adyen-platform-experience-web
Version:
57 lines (56 loc) • 2.52 kB
JavaScript
import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { useMemo as l } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import y from "classnames";
/* empty css */
import i from "../Typography/Typography.js";
import { TypographyVariant as p, TypographyElement as c } from "../Typography/types.js";
import { Tooltip as u } from "../Tooltip/Tooltip.js";
import { clamp as _ } from "../../../utils/value/number.js";
const $ = ({ max: n = 1, value: a, labels: r, tooltips: o, className: s }) => {
const t = l(() => _(0, a * 100 / n, 100), [a, n]), d = !!(r?.current || r?.max), g = r?.ariaLabel ?? (r?.current ? `${r.current}: ${a}` : `${a}/${n}`);
return /* @__PURE__ */ e(
"div",
{
role: "progressbar",
"aria-valuenow": a,
"aria-valuemin": 0,
"aria-valuemax": n,
"aria-valuetext": `${t}%`,
"aria-label": g,
className: y("adyen-pe-progress-bar", s),
children: [
/* @__PURE__ */ e("div", { className: "adyen-pe-progress-bar__track", role: "presentation", children: [
/* @__PURE__ */ e("div", { className: "adyen-pe-progress-bar__track-background" }),
/* @__PURE__ */ e(
m,
{
tooltipContent: o?.progress,
title: r?.current,
percentage: t,
className: "adyen-pe-progress-bar__track-fill"
}
),
/* @__PURE__ */ e(
m,
{
tooltipContent: o?.remaining,
title: r?.max,
percentage: 100 - t,
className: "adyen-pe-progress-bar__track-remaining"
}
)
] }),
d && /* @__PURE__ */ e("div", { className: "adyen-pe-progress-bar__legend", "aria-hidden": "true", children: [
r.current && /* @__PURE__ */ e(i, { el: c.SPAN, variant: p.CAPTION, className: "adyen-pe-progress-bar__legend-label", children: r.current }),
r.max && /* @__PURE__ */ e(i, { el: c.SPAN, variant: p.CAPTION, className: "adyen-pe-progress-bar__legend-label", children: r.max })
] })
]
}
);
}, m = ({ tooltipContent: n, title: a, percentage: r, className: o }) => {
const s = (t) => /* @__PURE__ */ e("div", { className: o, "aria-label": t, style: { width: `${r}%` } });
return n ? /* @__PURE__ */ e(u, { content: n, children: s(a) }) : s(a);
};
export {
$ as default
};