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