@adyen/adyen-platform-experience-web 1.7.1 → 1.8.1

package/dist/es/components/internal/Calendar/components/CalendarGrid/CalendarGrid.js

@@ -1,38 +1,38 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { memo as c, forwardRef as p } from "../../../../../external/preact/compat/dist/compat.module.js";
-import h from "./CalendarGridDate.js";
-import y from "./CalendarGridDayOfWeek.js";
+import { memo as p, forwardRef as h } from "../../../../../external/preact/compat/dist/compat.module.js";
+import y from "./CalendarGridDate.js";
+import _ from "./CalendarGridDayOfWeek.js";
 /* empty css                  */
-const _ = p(({ cursorRootProps: t, onlyCellsWithin: i, prepare: d, grid: r }, s) => /* @__PURE__ */ e("ol", { className: "adyen-pe-calendar", role: "none", ...t, children: r.map((a) => /* @__PURE__ */ e("li", { className: "adyen-pe-calendar__month", role: "none", children: [
+const f = h(({ cursorRootProps: t, onlyCellsWithin: i, prepare: d, getGridLabel: s, grid: r }, o) => /* @__PURE__ */ e("ol", { className: "adyen-pe-calendar", role: "none", ...t, children: r.map((a) => /* @__PURE__ */ e("li", { className: "adyen-pe-calendar__month", role: "none", children: [
   /* @__PURE__ */ e("div", { className: "adyen-pe-calendar__month-name", role: "none", children: /* @__PURE__ */ e("time", { dateTime: a.datetime, "aria-hidden": "true", children: a.label }) }),
   /* @__PURE__ */ e(
     "table",
     {
       role: "grid",
       "aria-multiselectable": !0,
-      "aria-label": `${a.label} calendar`,
+      "aria-label": s(a),
       className: "adyen-pe-calendar__grid",
       style: { "--adyen-pe-calendar-rowspan": r.rowspan },
       children: [
-        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "adyen-pe-calendar__row", children: r.weekdays.map((l, n) => /* @__PURE__ */ e(y, { grid: r, block: a, prepare: d, cell: n, ...l }, l.labels.long)) }) }),
-        /* @__PURE__ */ e("tbody", { children: a.map((l, n) => /* @__PURE__ */ e("tr", { className: "adyen-pe-calendar__row", children: l.map((m, o) => /* @__PURE__ */ e(
-          h,
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "adyen-pe-calendar__row", children: r.weekdays.map((n, l) => /* @__PURE__ */ e(_, { grid: r, block: a, prepare: d, cell: l, ...n }, n.labels.long)) }) }),
+        /* @__PURE__ */ e("tbody", { children: a.map((n, l) => /* @__PURE__ */ e("tr", { className: "adyen-pe-calendar__row", children: n.map((m, c) => /* @__PURE__ */ e(
+          y,
           {
-            ref: s,
+            ref: o,
             grid: r,
             block: a,
             prepare: d,
-            cell: o,
+            cell: c,
             onlyCellsWithin: i,
-            row: n,
+            row: l,
             ...m
           },
           `${a.month}:${m.timestamp}`
-        )) }, `${a.month}:${n}`)) })
+        )) }, `${a.month}:${l}`)) })
       ]
     }
   )
-] }, a.datetime)) })), C = c(_);
+] }, a.datetime)) })), G = p(f);
 export {
-  C as default
+  G as default
 };

package/dist/es/components/internal/Calendar/hooks/useCalendarControlsRendering.js

@@ -1,20 +1,20 @@
-import { jsx as s } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ButtonVariant as c } from "../../Button/types.js";
-import { useCallback as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as l } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ButtonVariant as u } from "../../Button/types.js";
+import { useCallback as c } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import f from "../../../../core/Context/useCoreContext.js";
 import d from "../../../../hooks/element/useDetachedRender.js";
 import { Icon as p } from "../../Icon/Icon.js";
 import b from "../../Button/Button.js";
 import { isFunction as h } from "../../../../utils/value/is.js";
-const g = (e) => {
+const T = (e) => {
   const { i18n: a } = f();
   return d(
-    m(
-      (u, r, t) => {
-        if (!(u instanceof HTMLElement)) return null;
-        if (h(e)) return e(r, t);
+    c(
+      (m, t, r) => {
+        if (!(m instanceof HTMLElement)) return null;
+        if (h(e)) return e(t, r);
         let o, i, n;
-        switch (r) {
+        switch (t) {
           case "PREV":
             o = "prev", i = "previous", n = "chevron-left";
             break;
@@ -24,19 +24,19 @@ const g = (e) => {
           default:
             return null;
         }
-        const l = t();
-        return l ? /* @__PURE__ */ s(
+        const s = r();
+        return s ? /* @__PURE__ */ l(
           b,
           {
-            "aria-label": a.get(`calendar.${i}Month`),
-            variant: c.TERTIARY,
-            disabled: !l,
+            "aria-label": a.get(`common.filters.types.date.calendar.navigation.${i}Month`),
+            variant: u.TERTIARY,
+            disabled: !s,
             classNameModifiers: ["circle", o],
             iconButton: !0,
-            onClick: t,
-            children: /* @__PURE__ */ s(p, { name: n })
+            onClick: r,
+            children: /* @__PURE__ */ l(p, { name: n })
           },
-          r
+          t
         ) : null;
       },
       [a, e]
@@ -44,5 +44,5 @@ const g = (e) => {
   );
 };
 export {
-  g as default
+  T as default
 };

package/dist/es/components/internal/CapitalHeader/helpers.js

@@ -1,36 +1,36 @@
-import { supportedCountries as n, supportedRegions as s, SupportedLocation as o } from "./constants.js";
-const u = (e) => {
-  var r;
-  const t = (r = e == null ? void 0 : e.regions) == null ? void 0 : r.find((c) => c.type === "capital");
-  return (t == null ? void 0 : t.value) ?? "";
-}, p = (e) => {
-  switch (e) {
-    case o.EU:
-      return "capital.legalSubtitleEU";
+import { supportedCountries as u, supportedRegions as s, SupportedLocation as e } from "./constants.js";
+const c = (o) => {
+  var n;
+  const r = (n = o == null ? void 0 : o.regions) == null ? void 0 : n.find((t) => t.type === "capital");
+  return (r == null ? void 0 : r.value) ?? "";
+}, d = (o) => {
+  switch (o) {
+    case e.EU:
+      return "capital.common.loanProviderInfo.EU";
     default:
       return null;
   }
-}, a = (e) => {
-  switch (e) {
-    case o.AU:
-      return "capital.legalSubtitleAU";
-    case o.GB:
-      return "capital.legalSubtitleGB";
-    case o.US:
-      return "capital.legalSubtitleUS";
-    case o.CA:
-      return "capital.legalSubtitleCA";
+}, p = (o) => {
+  switch (o) {
+    case e.AU:
+      return "capital.common.loanProviderInfo.AU";
+    case e.GB:
+      return "capital.common.loanProviderInfo.GB";
+    case e.US:
+      return "capital.common.loanProviderInfo.US";
+    case e.CA:
+      return "capital.common.loanProviderInfo.CA";
     default:
       return null;
   }
-}, d = (e) => {
-  const t = u(e), r = e == null ? void 0 : e.countryCode;
-  return a(r) ?? p(t);
-}, S = (e) => {
-  const t = u(e), r = (e == null ? void 0 : e.countryCode) ?? "";
-  return n.includes(r) || s.includes(t);
+}, i = (o) => {
+  const r = c(o), n = o == null ? void 0 : o.countryCode;
+  return p(n) ?? d(r);
+}, m = (o) => {
+  const r = c(o), n = (o == null ? void 0 : o.countryCode) ?? "";
+  return u.includes(n) || s.includes(r);
 };
 export {
-  d as getCapitalHeaderSubtitleByLegalEntity,
-  S as isCapitalRegionSupported
+  i as getCapitalHeaderSubtitleByLegalEntity,
+  m as isCapitalRegionSupported
 };

package/dist/es/components/internal/CapitalSlider/CapitalSlider.js

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

package/dist/es/components/internal/Card/Card.js

@@ -1,80 +1,79 @@
 import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import r from "classnames";
-import { useState as p, useMemo as _, useCallback as E } from "../../../external/preact/hooks/dist/hooks.module.js";
+import n from "classnames";
+import { useState as S, useMemo as E, useCallback as e } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { InteractionKeyCode as R } from "../../types.js";
-import { CARD_TOGGLE_CLASS as v, CARD_TITLE as w, CARD_SUBTITLE as B, CARD_HEADER_CONTENT as P, CARD_HEADER as g, CARD_BODY as G, CARD_BODY_WITH_TITLE as k, CARD_FOOTER as y, CARD_BASE_CLASS as K, CARD_COMPACT as M, CARD_EXPANDABLE_CLASS as U, CARD_NO_PADDING as Y, CARD_NO_OUTLINE as j, CARD_FILLED as q } from "./constants.js";
+import { CARD_TOGGLE_CLASS as O, CARD_TITLE as p, CARD_SUBTITLE as v, CARD_HEADER_CONTENT as w, CARD_HEADER as B, CARD_BODY as P, CARD_BODY_WITH_TITLE as G, CARD_FOOTER as g, CARD_BASE_CLASS as k, CARD_COMPACT as y, CARD_EXPANDABLE_CLASS as K, CARD_NO_PADDING as M, CARD_NO_OUTLINE as U, CARD_FILLED as Y } from "./constants.js";
 /* empty css          */
-import { Icon as W } from "../Icon/Icon.js";
-import { uuid as X } from "../../../utils/random/uuid.js";
-const $ = ({
-  title: i,
+import { Icon as j } from "../Icon/Icon.js";
+import { uuid as q } from "../../../utils/random/uuid.js";
+const V = ({
+  title: C,
   subTitle: m,
   children: l,
   expandable: o = !1,
   footer: D,
-  el: N,
   renderHeader: t,
-  renderFooter: C,
-  filled: T,
-  noOutline: u,
-  noPadding: d,
-  classNameModifiers: f,
-  testId: h,
-  compact: I
+  renderFooter: r,
+  filled: N,
+  noOutline: d,
+  noPadding: T,
+  classNameModifiers: u,
+  testId: f,
+  compact: h
 }) => {
-  const L = N || "header", [c, S] = p(!1), A = _(() => X(), []), a = E(() => {
-    o && S((n) => !n);
-  }, [o]), e = E(
-    (n) => {
-      switch (n.code) {
+  const [c, I] = S(!1), A = E(() => q(), []), a = e(() => {
+    o && I((i) => !i);
+  }, [o]), _ = e(
+    (i) => {
+      switch (i.code) {
         case R.ENTER:
         case R.SPACE:
-          n.preventDefault(), a();
+          i.preventDefault(), a();
           return;
       }
     },
     [a]
-  ), O = _(() => o ? {
+  ), L = E(() => o ? {
     role: "button",
     tabIndex: 0,
     onClick: a,
-    onKeyDown: e,
+    onKeyDown: _,
     "aria-controls": A,
     "aria-expanded": c
-  } : {}, [o, c, A, e, a]);
+  } : {}, [o, c, A, _, a]);
   return /* @__PURE__ */ s(
-    "section",
+    "div",
     {
-      "data-testid": h,
-      className: r(K, f, {
-        [q]: T,
-        [j]: u,
-        [Y]: d,
-        [U]: o,
-        [M]: I
+      "data-testid": f,
+      className: n(k, u, {
+        [Y]: N,
+        [U]: d,
+        [M]: T,
+        [K]: o,
+        [y]: h
       }),
-      ...O,
+      ...L,
       children: [
-        (i || t) && /* @__PURE__ */ s(L, { className: r(g), children: /* @__PURE__ */ s("div", { className: r(P), children: [
-          o && /* @__PURE__ */ s(W, { name: c ? "chevron-up" : "chevron-down", className: v, role: "presentation" }),
-          t || /* @__PURE__ */ s("span", { className: w, children: i }),
-          m && /* @__PURE__ */ s("div", { className: B, children: m })
+        (C || t) && /* @__PURE__ */ s("div", { className: n(B), children: /* @__PURE__ */ s("div", { className: n(w), children: [
+          o && /* @__PURE__ */ s(j, { name: c ? "chevron-up" : "chevron-down", className: O, role: "presentation" }),
+          t || /* @__PURE__ */ s("span", { className: p, children: C }),
+          m && /* @__PURE__ */ s("div", { className: v, children: m })
         ] }) }),
         (!o || c) && /* @__PURE__ */ s(
           "div",
           {
             id: A,
-            className: r(G, {
-              [k]: i || t
+            className: n(P, {
+              [G]: C || t
             }),
             children: l
           }
         ),
-        (D || C) && /* @__PURE__ */ s("footer", { className: y, children: C || D })
+        (D || r) && /* @__PURE__ */ s("div", { className: g, children: r || D })
       ]
     }
   );
 };
 export {
-  $ as default
+  V as default
 };

package/dist/es/components/internal/CopyText/CopyText.js

@@ -1,76 +1,87 @@
-import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "classnames";
-import { useState as f, useCallback as p } from "../../../external/preact/hooks/dist/hooks.module.js";
-import u from "../../../core/Context/useCoreContext.js";
-import { ButtonVariant as h } from "../Button/types.js";
-import { Tooltip as s } from "../Tooltip/Tooltip.js";
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import r from "classnames";
+import { useState as x, useCallback as u, useMemo as _ } from "../../../external/preact/hooks/dist/hooks.module.js";
+import C from "../../../core/Context/useCoreContext.js";
+import { Tooltip as b } from "../Tooltip/Tooltip.js";
+import { ButtonVariant as g } from "../Button/types.js";
 /* empty css              */
-import L from "../Button/Button.js";
-import { Icon as k } from "../Icon/Icon.js";
-const I = ({ textToCopy: o, isHovered: l, buttonLabel: i, showCopyTextTooltip: d = !0, type: e = "Link", ...m }) => {
-  const { i18n: n } = u(), [_, c] = f(n.get("copy")), y = p(async () => {
-    if (o)
+import B from "../Button/Button.js";
+import { Icon as S } from "../Icon/Icon.js";
+const n = "adyen-pe-copy-text", a = {
+  base: n,
+  container: n + "__container",
+  containerInformation: n + "__container--information",
+  icon: n + "__icon",
+  iconInformation: n + "__icon--information",
+  information: n + "__information",
+  label: n + "__label",
+  text: n + "__text"
+}, D = ({
+  copyButtonAriaLabelKey: s,
+  isHovered: h,
+  textToCopy: i,
+  visibleText: l,
+  onCopyText: c,
+  showCopyTextTooltip: v = !0,
+  type: e = "Link",
+  ...I
+}) => {
+  const { i18n: t } = C(), [m, d] = x(!1), f = u(() => d(!1), []), k = _(() => t.get(s ?? "common.actions.copy.labels.default"), [t, s]), L = u(async () => {
+    if (i)
       try {
-        await navigator.clipboard.writeText(o), c(n.get("copied"));
-      } catch (x) {
-        console.log(x);
+        await navigator.clipboard.writeText(i), d(!0), c && c();
+      } catch (N) {
+        console.error(N);
       }
-  }, [n, o]), r = p(() => {
-    c(n.get("copy"));
-  }, [n]);
-  return /* @__PURE__ */ t(
+  }, [i, c]), p = _(
+    () => /* @__PURE__ */ o(
+      "span",
+      {
+        className: r({
+          [a.label]: e !== "Default",
+          [a.information]: e === "Link",
+          [a.text]: e === "Text"
+        }),
+        children: l || i
+      }
+    ),
+    [l, i, e]
+  );
+  return /* @__PURE__ */ o(
     "span",
     {
-      className: a("adyen-pe-copy-text__container", {
-        "adyen-pe-copy-text__container--information": e === "Link"
+      className: r(a.container, {
+        [a.containerInformation]: e === "Link"
       }),
-      ...m,
+      ...I,
       children: [
-        d ? /* @__PURE__ */ t(s, { content: o, isContainerHovered: l, children: /* @__PURE__ */ t(
-          "span",
-          {
-            className: a({
-              "adyen-pe-copy-text__label": e !== "Default",
-              "adyen-pe-copy-text__information": e === "Link",
-              "adyen-pe-copy-text__text": e === "Text"
-            }),
-            children: i || o
-          }
-        ) }) : /* @__PURE__ */ t(
-          "span",
-          {
-            className: a({
-              "adyen-pe-copy-text__label": e !== "Default",
-              "adyen-pe-copy-text__information": e === "Link",
-              "adyen-pe-copy-text__text": e === "Text"
-            }),
-            children: i || o
-          }
-        ),
-        /* @__PURE__ */ t(s, { content: _, children: /* @__PURE__ */ t(
-          L,
+        v ? /* @__PURE__ */ o(b, { content: i, isContainerHovered: h, children: p }) : p,
+        /* @__PURE__ */ o(b, { content: t.get(m ? "common.actions.copy.labels.done" : "common.actions.copy.labels.default"), children: /* @__PURE__ */ o(
+          B,
           {
-            variant: h.TERTIARY,
-            className: "adyen-pe-copy-text",
-            onClick: y,
-            onBlur: r,
-            onMouseLeaveCapture: r,
+            variant: g.TERTIARY,
+            className: a.base,
+            onClick: L,
+            onBlur: f,
+            onMouseLeaveCapture: f,
+            "aria-label": k,
             "data-testid": "copyText",
-            children: /* @__PURE__ */ t(
+            children: /* @__PURE__ */ o(
               "div",
               {
-                className: a("adyen-pe-copy-text__icon", {
-                  "adyen-pe-copy-text__icon--information": e === "Link"
+                className: r(a.icon, {
+                  [a.iconInformation]: e === "Link"
                 }),
-                children: /* @__PURE__ */ t(k, { name: "copy", "data-testid": "copy-icon" })
+                children: /* @__PURE__ */ o(S, { name: "copy", "data-testid": "copy-icon" })
               }
             )
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ o("div", { className: "adyen-pe-visually-hidden", "aria-atomic": "true", "aria-live": "polite", children: m && t.get("common.actions.copy.labels.done") })
       ]
     }
   );
 };
 export {
-  I as default
+  D as default
 };