@adyen/adyen-platform-experience-web
Version:
63 lines (62 loc) • 2.81 kB
JavaScript
import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
/* empty css */
import { useMemo as c } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import p from "../../../utils/random/uniqueId.js";
import r from "../Typography/Typography.js";
import { TypographyVariant as l } from "../Typography/types.js";
import b from "classnames";
import N from "../../../core/Context/preact/useCoreContext.js";
import y from "../Slider/Slider.js";
const E = ({
dynamicOffersConfig: a,
value: i = a.minAmount.value,
onValueChange: h,
onRelease: v,
className: x
}) => {
const s = c(() => p("elem"), []), n = c(() => p("elem"), []), { i18n: t } = N(), d = c(
() => t.amount(i, a.minAmount.currency, { maximumFractionDigits: 0 }),
[t, i, a.minAmount.currency]
), A = (m) => {
const u = Number(m.target.value);
h?.(u);
}, o = (m) => {
const u = Number(m.target.value);
v?.(u);
};
return /* @__PURE__ */ e("div", { className: b("adyen-pe-capital-slider", x), children: [
/* @__PURE__ */ e("label", { id: s, htmlFor: n, className: "adyen-pe-capital-slider__label", role: "presentation", children: /* @__PURE__ */ e(r, { variant: l.BODY, stronger: !0, children: t.get("capital.offer.selection.slider.a11y.label") }) }),
/* @__PURE__ */ e("div", { children: [
/* @__PURE__ */ e("output", { "aria-labelledby": s, htmlFor: n, className: "adyen-pe-capital-slider__value", "aria-live": "polite", children: /* @__PURE__ */ e(r, { variant: l.TITLE, strongest: !0, children: d }) }),
/* @__PURE__ */ e(
y,
{
id: n,
value: i,
min: a.minAmount.value,
max: a.maxAmount.value,
step: a.step,
onChange: A,
onMouseUp: o,
onTouchEnd: o,
onKeyUp: o,
className: "adyen-pe-capital-slider__input",
"aria-valuetext": d
}
)
] }),
/* @__PURE__ */ e("div", { className: "adyen-pe-capital-slider__labels", "aria-hidden": "true", children: [
/* @__PURE__ */ e("div", { children: [
/* @__PURE__ */ e(r, { variant: l.CAPTION, children: t.get("capital.offer.selection.slider.markers.min") }),
/* @__PURE__ */ e(r, { variant: l.BODY, children: t.amount(a.minAmount.value, a.minAmount.currency, { maximumFractionDigits: 0 }) })
] }),
/* @__PURE__ */ e("div", { children: [
/* @__PURE__ */ e(r, { variant: l.CAPTION, children: t.get("capital.offer.selection.slider.markers.max") }),
/* @__PURE__ */ e(r, { variant: l.BODY, children: t.amount(a.maxAmount.value, a.maxAmount.currency, { maximumFractionDigits: 0 }) })
] })
] })
] });
};
export {
E as default
};