@adyen/adyen-platform-experience-web 1.1.0 → 1.2.0

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

@@ -1,4 +1,4 @@
-import { useState as J, useMemo as l, useRef as $, useCallback as y, useImperativeHandle as G, useEffect as P } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as J, useMemo as l, useRef as _, useCallback as $, useImperativeHandle as G, useEffect as P } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import Q from "../../../../core/Context/useCoreContext.js";
 import { getDateObjectFromTimestamp as K } from "../calendar/utils.js";
 import U from "../../../../hooks/element/useFocusCursor.js";
@@ -21,38 +21,30 @@ const X = ({
   untilDate: d,
   useYearView: b
 }, B) => {
-  const {
-    i18n: O
-  } = Q(), [R, S] = J(performance.now()), x = l(() => n.slice(E, d), [E, d]), F = $(u), I = l(() => f ?? (L(N) ? n.controls.MINIMAL : n.controls.NONE), [f, N]), k = l(() => p ?? (L(s) ? n.highlight.ONE : n.highlight.NONE), [p, s]), {
-    grid: t,
-    kill: _
-  } = l(() => {
-    const {
-      grid: e,
-      kill: r
-    } = n(function() {
-      S(performance.now()), F.current = this, !(o === e.highlight.from && h === e.highlight.to) && (o = e.highlight.from, h = e.highlight.to, s == null || s(o, h));
+  const { i18n: O } = Q(), [R, S] = J(performance.now()), F = l(() => n.slice(E, d), [E, d]), I = _(u), x = l(
+    () => f ?? (L(N) ? n.controls.MINIMAL : n.controls.NONE),
+    [f, N]
+  ), A = l(
+    () => p ?? (L(s) ? n.highlight.ONE : n.highlight.NONE),
+    [p, s]
+  ), { grid: t, kill: j } = l(() => {
+    const { grid: e, kill: r } = n(function() {
+      S(performance.now()), I.current = this, !(o === e.highlight.from && h === e.highlight.to) && (o = e.highlight.from, h = e.highlight.to, s == null || s(o, h));
     });
-    let {
-      from: o,
-      to: h
-    } = e.highlight;
+    let { from: o, to: h } = e.highlight;
     return e.config.cursorIndex = (i) => {
       let c = i.target;
       for (; c && c !== i.currentTarget; ) {
-        const A = Number(c.dataset.cursorPosition);
-        if (Number.isFinite(A))
-          return A;
+        const k = Number(c.dataset.cursorPosition);
+        if (Number.isFinite(k))
+          return k;
         c = c.parentNode;
       }
     }, e.config.shiftFactor = function(i) {
       if (this.controls === n.controls.MINIMAL)
         return i != null && i.shiftKey ? 12 : i != null && i.altKey ? this.blocks : 1;
-    }, {
-      grid: e,
-      kill: r
-    };
-  }, []), j = l(() => {
+    }, { grid: e, kill: r };
+  }, []), q = l(() => {
     const e = (r) => {
       t.cursor(r);
     };
@@ -64,57 +56,70 @@ const X = ({
         t.cursor(r) && r.preventDefault();
       }
     };
-  }, [t]), q = U(y((e, r) => {
-    r instanceof Element && r.removeAttribute("aria-selected"), e instanceof Element && e.setAttribute("aria-selected", "true");
-  }, []));
-  return G(B, () => {
-    const {
-      from: e,
-      to: r
-    } = (t == null ? void 0 : t.highlight) || u;
-    return {
-      clear: () => {
-        t != null && t.highlight && (t.highlight.from = void 0);
-      },
-      get config() {
-        return {
-          ...F.current ?? u
-        };
-      },
-      get from() {
-        return K(e);
+  }, [t]), y = U(
+    $(
+      (e, r) => {
+        r instanceof Element && r.removeAttribute("aria-selected"), e instanceof Element && e.setAttribute("aria-selected", "true");
       },
-      set from(o) {
-        t != null && t.highlight && o && (t.highlight.from = o.getTime());
-      },
-      get to() {
-        return K(r);
-      },
-      set to(o) {
-        t != null && t.highlight && o && (t.highlight.to = o.getTime());
-      }
-    };
-  }, [t, R]), P(() => {
+      []
+    )
+  );
+  return G(
+    B,
+    () => {
+      const { from: e, to: r } = (t == null ? void 0 : t.highlight) || u;
+      return {
+        clear: () => {
+          t != null && t.highlight && (t.highlight.from = void 0);
+        },
+        get config() {
+          return { ...I.current ?? u };
+        },
+        get from() {
+          return K(e);
+        },
+        set from(o) {
+          t != null && t.highlight && o && (t.highlight.from = o.getTime());
+        },
+        get to() {
+          return K(r);
+        },
+        set to(o) {
+          t != null && t.highlight && o && (t.highlight.to = o.getTime());
+        }
+      };
+    },
+    [t, R]
+  ), P(() => {
     t.config({
       blocks: a,
-      controls: I,
+      controls: x,
       firstWeekDay: g,
       fixedBlockHeight: !m,
-      highlight: k,
+      highlight: A,
       locale: C ?? O.locale,
       minified: b,
-      timeslice: x,
+      timeslice: F,
       timezone: M,
       trackCurrentDay: T
     });
-  }, [I, k, a, m, g, t, O, C, x, M, T, b]), P(() => {
+  }, [
+    x,
+    A,
+    a,
+    m,
+    g,
+    t,
+    O,
+    C,
+    F,
+    M,
+    T,
+    b
+  ]), P(() => {
     const e = [].concat(w).slice(0, 2).map(Number).filter(Boolean);
-    return e[0] && (t.highlight.from = +e[0]), e[1] && (t.highlight.to = +e[1]), _;
-  }, []), {
-    cursorElementRef: q,
-    cursorRootProps: j,
-    grid: t
-  };
+    return e[0] && (t.highlight.from = +e[0]), e[1] && (t.highlight.to = +e[1]), j;
+  }, []), { cursorElementRef: y, cursorRootProps: q, grid: t };
 }, v = X;
 export {
   v as default

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

@@ -1,45 +1,50 @@
+import { jsx as l } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { ButtonVariant as m } from "../../Button/types.js";
 import { useCallback as c } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import f from "../../SVGIcons/ChevronDown.js";
 import d from "../../SVGIcons/ChevronUp.js";
 import p from "../../../../core/Context/useCoreContext.js";
 import C from "../../../../hooks/element/useDetachedRender.js";
-import { jsx as l } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import R from "../../Button/Button.js";
 import { isFunction as b } from "../../../../utils/value/is.js";
 const h = (e) => {
-  const {
-    i18n: a
-  } = p();
-  return C(c((u, r, t) => {
-    if (!(u instanceof HTMLElement))
-      return null;
-    if (b(e))
-      return e(r, t);
-    let o, n, i;
-    switch (r) {
-      case "PREV":
-        o = "prev", n = "previous", i = d;
-        break;
-      case "NEXT":
-        o = n = "next", i = f;
-        break;
-      default:
-        return null;
-    }
-    const s = t();
-    return s ? l(R, {
-      "aria-label": a.get(`calendar.${n}Month`),
-      variant: m.TERTIARY,
-      disabled: !s,
-      classNameModifiers: ["circle", o],
-      iconButton: !0,
-      onClick: t,
-      children: l(i, {
-        role: "presentation"
-      })
-    }, r) : null;
-  }, [a, e]));
+  const { i18n: a } = p();
+  return C(
+    c(
+      (u, r, t) => {
+        if (!(u instanceof HTMLElement))
+          return null;
+        if (b(e))
+          return e(r, t);
+        let o, n, i;
+        switch (r) {
+          case "PREV":
+            o = "prev", n = "previous", i = d;
+            break;
+          case "NEXT":
+            o = n = "next", i = f;
+            break;
+          default:
+            return null;
+        }
+        const s = t();
+        return s ? /* @__PURE__ */ l(
+          R,
+          {
+            "aria-label": a.get(`calendar.${n}Month`),
+            variant: m.TERTIARY,
+            disabled: !s,
+            classNameModifiers: ["circle", o],
+            iconButton: !0,
+            onClick: t,
+            children: /* @__PURE__ */ l(i, { role: "presentation" })
+          },
+          r
+        ) : null;
+      },
+      [a, e]
+    )
+  );
 }, D = h;
 export {
   D as default

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

@@ -5,40 +5,24 @@ import _ from "../../../../primitives/time/clock/main.js";
 import { isWatchlistUnsubscribeToken as G } from "../../../../primitives/reactive/watchlist/main.js";
 import { boolOrFalse as O } from "../../../../utils/value/bool.js";
 import { noop as a } from "../../../../utils/common.js";
-import { EMPTY_OBJECT as S, EMPTY_ARRAY as F } from "../../../../utils/value/constants.js";
-const {
-  getTimezoneTime: R,
-  getUsedTimezone: U
-} = (() => {
+import { EMPTY_OBJECT as S, EMPTY_ARRAY as R } from "../../../../utils/value/constants.js";
+const { getTimezoneTime: U, getUsedTimezone: $ } = (() => {
   const n = /\d{2}:\d{2}(?=:\d{2}(?:\.\d+)?\s+([AP]M))/i, m = /^GMT|0(?=\d:00)|:00/g, e = M();
-  return {
-    getTimezoneTime: (t, i = Date.now()) => {
-      e.tz = t;
-      const {
-        formatted: o
-      } = e(i), [f = "", s = ""] = (o == null ? void 0 : o.match(n)) ?? F, u = l(o), z = `${f}${s && ` ${s}`}`, p = E(u).replace(m, "");
-      return [z, p];
-    },
-    getUsedTimezone: (t) => (e.tz = t, e.tz.current)
-  };
-})(), $ = ({
-  timezone: n,
-  withClock: m = !1
-} = S) => {
-  const e = c(() => O(m), [m]), r = c(() => U(n), [n]), T = g(a), [t, i] = d(Date.now()), [o, f] = c(() => R(r, t), [t, r]);
+  return { getTimezoneTime: (t, i = Date.now()) => {
+    e.tz = t;
+    const { formatted: o } = e(i), [f = "", s = ""] = (o == null ? void 0 : o.match(n)) ?? R, u = l(o), z = `${f}${s && ` ${s}`}`, p = E(u).replace(m, "");
+    return [z, p];
+  }, getUsedTimezone: (t) => (e.tz = t, e.tz.current) };
+})(), A = ({ timezone: n, withClock: m = !1 } = S) => {
+  const e = c(() => O(m), [m]), r = c(() => $(n), [n]), T = g(a), [t, i] = d(Date.now()), [o, f] = c(() => U(r, t), [t, r]);
   return c(() => {
     T.current(), T.current = e ? _.subscribe((s) => {
       G(s) || i(s.now);
     }) : a;
-  }, [i, e]), {
-    clockTime: o,
-    GMTOffset: f,
-    timestamp: t,
-    timezone: r
-  };
-}, P = $;
+  }, [i, e]), { clockTime: o, GMTOffset: f, timestamp: t, timezone: r };
+}, P = A;
 export {
   P as default,
-  R as getTimezoneTime,
-  U as getUsedTimezone
+  U as getTimezoneTime,
+  $ as getUsedTimezone
 };

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

@@ -0,0 +1,6 @@
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { Header as t } from "../Header/Header.js";
+const p = (e) => /* @__PURE__ */ r(t, { ...e, subtitleKey: "capital.poweredByAdyen" });
+export {
+  p as CapitalHeader
+};

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

@@ -0,0 +1,57 @@
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import "./CapitalSlider.scss.js";
+import h from "../../../utils/random/uniqueId.js";
+import e 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 N = ({
+  dynamicOffersConfig: a,
+  value: p = a.minAmount.value,
+  onValueChange: l,
+  onRelease: m,
+  className: d
+}) => {
+  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);
+  };
+  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,
+        {
+          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"
+        }
+      )
+    ] }),
+    /* @__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__ */ 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 }) })
+      ] })
+    ] })
+  ] });
+}, B = N;
+export {
+  B as default
+};

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

@@ -0,0 +1,4 @@
+const a = "";
+export {
+  a as default
+};

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

@@ -1,48 +1,50 @@
-import { CARD_BASE_CLASS as l, CARD_FILLED as o, CARD_NO_OUTLINE as h, CARD_HEADER as L, CARD_HEADER_CONTENT as O, CARD_TITLE as n, CARD_SUBTITLE as p, CARD_BODY as I, CARD_BODY_WITH_TITLE as f, CARD_FOOTER as B } from "./constants.js";
-import A from "classnames";
-import "./Card.scss.js";
 import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const S = ({
+import { CARD_BASE_CLASS as O, CARD_FILLED as h, CARD_NO_OUTLINE as I, CARD_NO_PADDING as L, CARD_HEADER as n, CARD_HEADER_CONTENT as p, CARD_TITLE as d, CARD_SUBTITLE as t, CARD_BODY as f, CARD_BODY_WITH_TITLE as B, CARD_FOOTER as S } from "./constants.js";
+import C from "classnames";
+import "./Card.scss.js";
+const v = ({
   title: c,
   subTitle: _,
-  children: C,
-  footer: m,
+  children: m,
+  footer: A,
   el: R,
   renderHeader: a,
   renderFooter: D,
-  filled: E,
-  noOutline: N,
-  classNameModifiers: T
+  filled: N,
+  noOutline: E,
+  noPadding: i,
+  classNameModifiers: T,
+  testId: l
 }) => {
-  const i = R || "header";
-  return s("section", {
-    className: A(l, {
-      [o]: E,
-      [h]: N
-    }, T),
-    children: [(c || a) && s(i, {
-      className: L,
-      children: (c || a) && s("div", {
-        className: O,
-        children: [a || s("span", {
-          className: n,
-          children: c
-        }), _ && s("div", {
-          className: p,
-          children: _
-        })]
-      })
-    }), s("div", {
-      className: A(I, {
-        [f]: c || a
-      }),
-      children: C
-    }), (m || D) && s("footer", {
-      className: B,
-      children: D || m
-    })]
-  });
-}, u = S;
+  const o = R || "header";
+  return /* @__PURE__ */ s(
+    "section",
+    {
+      className: C(
+        O,
+        { [h]: N, [I]: E, [L]: i },
+        T
+      ),
+      "data-testid": l,
+      children: [
+        (c || a) && /* @__PURE__ */ s(o, { className: n, children: (c || a) && /* @__PURE__ */ s("div", { className: p, children: [
+          a || /* @__PURE__ */ s("span", { className: d, children: c }),
+          _ && /* @__PURE__ */ s("div", { className: t, children: _ })
+        ] }) }),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: C(f, {
+              [B]: c || a
+            }),
+            children: m
+          }
+        ),
+        (A || D) && /* @__PURE__ */ s("footer", { className: S, children: D || A })
+      ]
+    }
+  );
+}, g = v;
 export {
-  u as default
+  g as default
 };

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

@@ -1,13 +1,14 @@
-const _ = "adyen-pe-card", t = `${_}__body`, o = `${_}__header`, n = `${_}__title`, D = `${_}__subtitle`, A = `${o}-content`, R = `${t}--with-title`, c = `${_}--no-outline`, e = `${_}--filled`, C = `${_}__footer`;
+const _ = "adyen-pe-card", t = `${_}__body`, o = `${_}__header`, n = `${_}__title`, D = `${_}__subtitle`, A = `${o}-content`, R = `${t}--with-title`, c = `${_}--no-outline`, C = `${_}--no-padding`, e = `${_}--filled`, s = `${_}__footer`;
 export {
   _ as CARD_BASE_CLASS,
   t as CARD_BODY,
   R as CARD_BODY_WITH_TITLE,
   e as CARD_FILLED,
-  C as CARD_FOOTER,
+  s as CARD_FOOTER,
   o as CARD_HEADER,
   A as CARD_HEADER_CONTENT,
   c as CARD_NO_OUTLINE,
+  C as CARD_NO_PADDING,
   D as CARD_SUBTITLE,
   n as CARD_TITLE
 };

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

@@ -1,40 +1,80 @@
-import { ButtonVariant as l } from "../Button/types.js";
-import { useState as s, useCallback as r } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { Tooltip as c } from "../Tooltip/Tooltip.js";
-import m from "../SVGIcons/Copy.js";
-import "./CopyText.scss.js";
 import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import f from "../Button/Button.js";
-const u = ({
-  text: o
+import a from "classnames";
+import { useState as y, useCallback as p } from "../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../../../core/Context/useCoreContext.js";
+import { ButtonVariant as u } from "../Button/types.js";
+import { Tooltip as s } from "../Tooltip/Tooltip.js";
+import "./CopyText.scss.js";
+import h from "../Button/Button.js";
+import L from "../Icon/Icon.js";
+const k = ({
+  textToCopy: o,
+  isHovered: l,
+  buttonLabel: i,
+  showCopyTextTooltip: m = !0,
+  type: e = "Link"
 }) => {
-  const [i, a] = s(o), n = r(async () => {
+  const { i18n: n } = f(), [d, c] = y(n.get("copy")), _ = p(async () => {
     if (o)
       try {
-        await navigator.clipboard.writeText(o), a("Copied");
-      } catch (p) {
-        console.log(p);
+        await navigator.clipboard.writeText(o), c(n.get("copied"));
+      } catch (x) {
+        console.log(x);
       }
-  }, [o]), e = r(() => {
-    a(o);
-  }, [a, o]);
-  return t(c, {
-    content: i,
-    children: t(f, {
-      variant: l.TERTIARY,
-      className: "adyen-pe-copy-text",
-      onClick: n,
-      onBlur: e,
-      onMouseLeaveCapture: e,
-      children: [t("span", {
-        className: "adyen-pe-copy-text__information",
-        children: o
-      }), t(m, {
-        fill: "#0070f5"
-      })]
-    })
-  });
-}, v = u;
+  }, [n, o]), r = p(() => {
+    c(n.get("copy"));
+  }, [n]);
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: a("adyen-pe-copy-text__container", {
+        "adyen-pe-copy-text__container--information": e === "Link"
+      }),
+      children: [
+        m ? /* @__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: d, children: /* @__PURE__ */ t(
+          h,
+          {
+            variant: u.TERTIARY,
+            className: "adyen-pe-copy-text",
+            onClick: _,
+            onBlur: r,
+            onMouseLeaveCapture: r,
+            children: /* @__PURE__ */ t(
+              "div",
+              {
+                className: a("adyen-pe-copy-text__icon", {
+                  "adyen-pe-copy-text__icon--information": e === "Link"
+                }),
+                children: /* @__PURE__ */ t(L, { name: "copy" })
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}, I = k;
 export {
-  v as default
+  I as default
 };