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

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

@@ -1,60 +1,59 @@
-import C from "./hooks/useButton.js";
-import { ICON_BUTTON_CLASSNAME as S, ICON_BUTTON_CONTENT_CLASSNAME as B, BUTTON_ICON_LEFT_CLASSNAME as O, BUTTON_LABEL_CLASSNAME as E, BUTTON_ICON_RIGHT_CLASSNAME as L, DEFAULT_BUTTON_CLASSNAME as M } from "./constants.js";
-import { TypographyElement as U, TypographyVariant as y } from "../Typography/types.js";
-import I from "../Typography/Typography.js";
-import { useMemo as p } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { ButtonVariant as d } from "./types.js";
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import U from "./hooks/useButton.js";
+import { ICON_BUTTON_CLASSNAME as S, BUTTON_CONDENSED_CLASSNAME as d, BUTTON_FULL_WIDTH_CLASSNAME as h, BUTTON_LOADING_CLASSNAME as y, ICON_BUTTON_CONTENT_CLASSNAME as H, BUTTON_ICON_LEFT_CLASSNAME as I, BUTTON_LABEL_CLASSNAME as D, BUTTON_ICON_RIGHT_CLASSNAME as g, DEFAULT_BUTTON_CLASSNAME as x } from "./constants.js";
+import { TypographyElement as F, TypographyVariant as P } from "../Typography/types.js";
+import R from "../Typography/Typography.js";
+import { useMemo as m } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { ButtonVariant as V } from "./types.js";
 import "./Button.scss.js";
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { fixedForwardRef as h } from "../../../utils/preact/fixedForwardRef.js";
-import { parseClassName as g } from "../../../utils/preact/className.js";
-import { parseBooleanProp as F } from "../../../utils/preact/props.js";
-import { Fragment as V } from "../../../external/preact/dist/preact.module.js";
-function $({
-  variant: n = d.PRIMARY,
-  disabled: o = !1,
-  onClick: T,
-  classNameModifiers: l = [],
-  iconLeft: a,
-  iconRight: t,
-  type: i = "button",
-  children: m,
-  className: s,
-  iconButton: e = !1,
-  ...f
-}, A) {
-  const _ = p(() => g("", s) || "", [s]), c = p(() => F(o), [o]), {
-    classes: N,
-    click: u
-  } = C(_, [...l, n], M, c, T);
-  return r("button", {
-    className: e ? `${S} ${N}` : N,
-    type: i,
-    disabled: o,
-    onClick: u,
-    ref: A,
-    ...f,
-    children: e ? r("div", {
-      className: `${B}`,
-      children: m
-    }) : r(V, {
-      children: [a && r("span", {
-        className: O,
-        children: a
-      }), r(I, {
-        className: E,
-        el: U.SPAN,
-        variant: y.BODY,
-        stronger: !0,
-        children: m
-      }), t && r("span", {
-        className: L,
-        children: t
-      })]
-    })
-  });
+import $ from "classnames";
+import { fixedForwardRef as b } from "../../../utils/preact/fixedForwardRef.js";
+import { parseClassName as w } from "../../../utils/preact/className.js";
+import { parseBooleanProp as k } from "../../../utils/preact/props.js";
+import v from "../Spinner/Spinner.js";
+import { Fragment as G } from "../../../external/preact/dist/preact.module.js";
+const Y = (r) => r && r.current instanceof HTMLAnchorElement, j = (r) => r && r.current instanceof HTMLButtonElement;
+function z({
+  variant: r = V.PRIMARY,
+  disabled: t = !1,
+  onClick: f,
+  classNameModifiers: L = [],
+  iconLeft: s,
+  iconRight: l,
+  type: C = "button",
+  children: N,
+  className: p,
+  iconButton: a = !1,
+  fullWidth: i,
+  condensed: A,
+  href: c,
+  state: e = "default",
+  ...E
+}, n) {
+  const B = m(() => w("", p) || "", [p]), M = m(() => k(t), [t]), { classes: T, click: O } = U(B, [...L, r], x, M, f), _ = m(
+    () => ({
+      className: $(a ? `${S} ${T}` : T, {
+        [S]: a,
+        [d]: A,
+        [h]: i,
+        [y]: e === "loading"
+      }),
+      disabled: t || e === "loading",
+      ...E
+    }),
+    [T, A, t, i, a, E, e]
+  ), u = m(
+    () => a ? /* @__PURE__ */ o("div", { className: `${H}`, children: N }) : /* @__PURE__ */ o(G, { children: [
+      e === "loading" && /* @__PURE__ */ o(v, { size: "x-small" }),
+      s && /* @__PURE__ */ o("span", { className: I, children: s }),
+      /* @__PURE__ */ o(R, { className: D, el: F.SPAN, variant: P.BODY, children: N }),
+      l && /* @__PURE__ */ o("span", { className: g, children: l })
+    ] }),
+    [N, a, s, l, e]
+  );
+  return c ? (n && j(n) && console.warn("Button ref should be of type HTMLAnchorElement"), /* @__PURE__ */ o("a", { ..._, href: c, ref: n, children: u })) : (n && Y(n) && console.warn("Button ref should be of type HTMLButtonElement"), /* @__PURE__ */ o("button", { ..._, ref: n, type: C, onClick: O, children: u }));
 }
-const H = h($);
+const so = b(z);
 export {
-  H as default
+  so as default
 };

package/dist/es/components/internal/Button/ButtonActions/ButtonActions.js

@@ -1,35 +1,30 @@
+import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { ButtonActionsLayout as c } from "./types.js";
-import { BUTTON_ACTION_CLASSNAME as n, BUTTON_ACTION_CONTAINER_CLASSNAME as A } from "../constants.js";
-import { ButtonVariant as i } from "../types.js";
+import { BUTTON_ACTION_CLASSNAME as o, BUTTON_ACTION_CONTAINER_CLASSNAME as d } from "../constants.js";
+import { ButtonVariant as a } from "../types.js";
 import "./ButtonActions.scss.js";
-import { memo as d } from "../../../../external/preact/compat/dist/compat.module.js";
+import { memo as A } from "../../../../external/preact/compat/dist/compat.module.js";
 import { useMemo as N } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { jsx as e } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import p from "../Button.js";
-function u({
-  actions: o,
-  layout: a = c.BUTTONS_END
-}) {
-  const s = () => `${n}--${a}`, m = (t) => {
-    const r = o.length - 1;
-    return t === r ? i.PRIMARY : i.SECONDARY;
-  }, l = N(() => [...o].reverse(), [o]);
-  return e("div", {
-    className: n,
-    children: e("div", {
-      className: `${A} ${s()}`,
-      role: "group",
-      children: l.map((t, r) => e(p, {
-        "aria-label": t.title,
-        disabled: t.disabled,
-        variant: t.variant || m(r),
-        onClick: t.event,
-        children: t.title
-      }, r))
-    })
-  });
+import T from "../Button.js";
+function p({ actions: t, layout: s = c.BUTTONS_END }) {
+  const n = () => `${o}--${s}`, l = (e) => {
+    const r = t.length - 1;
+    return e === r ? a.PRIMARY : a.SECONDARY;
+  }, m = N(() => [...t].reverse(), [t]);
+  return /* @__PURE__ */ i("div", { className: o, children: /* @__PURE__ */ i("div", { className: `${d} ${n()}`, role: "group", children: m.map((e, r) => /* @__PURE__ */ i(
+    T,
+    {
+      "aria-label": e.title,
+      disabled: e.disabled,
+      variant: e.variant || l(r),
+      onClick: e.event,
+      state: e.state ?? "default",
+      children: e.renderTitle ? e.renderTitle(e.title) : e.title
+    },
+    `${r}_${e.title || "0"}`
+  )) }) });
 }
-const _ = d(u);
+const I = A(p);
 export {
-  _ as default
+  I as default
 };

package/dist/es/components/internal/Button/ButtonActions/types.js

@@ -1,8 +1,5 @@
 var r = /* @__PURE__ */ ((e) => (e.BUTTONS_END = "buttons-end", e.FILL_CONTAINER = "fill-container", e.SPACE_BETWEEN = "space-between", e.VERTICAL_STACK = "vertical-stack", e))(r || {}), T = /* @__PURE__ */ ((e) => (e.BUTTONS_START = "buttons-start", e))(T || {});
-const E = {
-  ...r,
-  ...T
-};
+const E = { ...r, ...T };
 export {
   E as ButtonActionsLayout,
   r as ButtonActionsLayoutBasic,

package/dist/es/components/internal/Button/DownloadButton/DownloadButton.js

@@ -1,18 +1,15 @@
+import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import g from "classnames";
 import { useState as k, useEffect as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import x from "../../../../core/Context/useCoreContext.js";
-import { useResponsiveViewport as B, mediaQueries as C } from "../../../hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as B, mediaQueries as y } from "../../../../hooks/useResponsiveViewport.js";
 import h from "../../SVGIcons/Download.js";
 import v from "../Button.js";
-import { ButtonVariant as _ } from "../types.js";
-import E from "./useDownload.js";
+import { ButtonVariant as b } from "../types.js";
+import C from "./useDownload.js";
 import "./DownloadButton.scss.js";
-import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import b from "../../Spinner/Spinner.js";
-function N({
-  blob: r,
-  filename: c
-}) {
+import L from "../../Spinner/Spinner.js";
+function E({ blob: r, filename: c }) {
   const t = document.createElement("a"), n = URL.createObjectURL(r);
   t.href = n, t.download = c || "download";
   const a = () => {
@@ -20,61 +17,34 @@ function N({
       URL.revokeObjectURL(n);
     }, 150);
   };
-  t.addEventListener("click", a, {
-    once: !0
-  }), t.click();
+  t.addEventListener("click", a, { once: !0 }), t.click();
 }
-function Y({
-  className: r,
-  disabled: c,
-  endpointName: t,
-  params: n,
-  setError: a,
-  errorDisplay: f,
-  onDownloadRequested: d
-}) {
-  const {
-    i18n: p
-  } = x(), [s, u] = k(!1), L = B(C.down.xs), {
-    data: l,
-    error: i,
-    isFetching: e
-  } = E(t, n, s);
+function Y({ className: r, disabled: c, endpointName: t, params: n, setError: a, errorDisplay: f, onDownloadRequested: d }) {
+  const { i18n: p } = x(), [s, u] = k(!1), _ = B(y.down.xs), { data: l, error: i, isFetching: e } = C(t, n, s);
   m(() => {
     s && u(!1);
   }, [s]), m(() => {
-    l && N(l);
+    l && E(l);
   }, [l]), m(() => {
     a && i && a(i);
   }, [i]);
   const w = () => {
     u(!0), d == null || d();
   };
-  return o("div", {
-    className: "adyen-pe-download",
-    children: [L ? o(v, {
-      iconButton: !0,
-      variant: _.TERTIARY,
-      onClick: w,
-      children: e ? o(b, {
-        size: "small"
-      }) : o(h, {})
-    }) : o(v, {
-      className: g("adyen-pe-download__button", {
-        "adyen-pe-download__button--loading": e
-      }, r),
-      disabled: c || e,
-      variant: _.SECONDARY,
-      onClick: w,
-      iconLeft: e ? o(b, {
-        size: "small"
-      }) : o(h, {}),
-      children: e ? `${p.get("downloading")}..` : p.get("download")
-    }), i && f && o("div", {
-      className: "adyen-pe-download__error",
-      children: f
-    })]
-  });
+  return /* @__PURE__ */ o("div", { className: "adyen-pe-download", children: [
+    _ ? /* @__PURE__ */ o(v, { iconButton: !0, variant: b.TERTIARY, onClick: w, children: e ? /* @__PURE__ */ o(L, { size: "small" }) : /* @__PURE__ */ o(h, {}) }) : /* @__PURE__ */ o(
+      v,
+      {
+        className: g("adyen-pe-download__button", { "adyen-pe-download__button--loading": e }, r),
+        disabled: c || e,
+        variant: b.SECONDARY,
+        onClick: w,
+        iconLeft: e ? /* @__PURE__ */ o(L, { size: "small" }) : /* @__PURE__ */ o(h, {}),
+        children: e ? `${p.get("downloading")}..` : p.get("download")
+      }
+    ),
+    i && f && /* @__PURE__ */ o("div", { className: "adyen-pe-download__error", children: f })
+  ] });
 }
 export {
   Y as default

package/dist/es/components/internal/Button/DownloadButton/useDownload.js

@@ -1,16 +1,11 @@
-import { useFetch as r } from "../../../../hooks/useFetch/useFetch.js";
+import { useFetch as r } from "../../../../hooks/useFetch.js";
 import { useAuthContext as s } from "../../../../core/Auth/context.js";
 import { EMPTY_OBJECT as u } from "../../../../utils/value/constants.js";
 const a = (t, e, n) => {
   const o = s().endpoints[t];
   return r({
-    fetchOptions: {
-      enabled: !!o && n,
-      keepPrevData: !0
-    },
-    queryFn: async () => o(u, {
-      ...e
-    })
+    fetchOptions: { enabled: !!o && n, keepPrevData: !0 },
+    queryFn: async () => o(u, { ...e })
   });
 }, i = a;
 export {

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

@@ -1,11 +1,14 @@
-const _ = "adyen-pe-button", N = `${_}-actions`, T = `${_}--icon`, A = `${_}--icon-content`, n = `${N}__container-wrapper`, o = `${_}__label`, t = `${_}__icon-right`, C = `${_}__icon-left`;
+const N = "adyen-pe-button", _ = `${N}-actions`, T = `${N}--icon`, A = `${N}--icon-content`, n = `${_}__container-wrapper`, S = `${N}__label`, o = `${N}__icon-right`, t = `${N}__icon-left`, O = `${N}--condensed`, C = `${N}--full-width`, c = `${N}--loading`;
 export {
-  N as BUTTON_ACTION_CLASSNAME,
+  _ as BUTTON_ACTION_CLASSNAME,
   n as BUTTON_ACTION_CONTAINER_CLASSNAME,
-  C as BUTTON_ICON_LEFT_CLASSNAME,
-  t as BUTTON_ICON_RIGHT_CLASSNAME,
-  o as BUTTON_LABEL_CLASSNAME,
-  _ as DEFAULT_BUTTON_CLASSNAME,
+  O as BUTTON_CONDENSED_CLASSNAME,
+  C as BUTTON_FULL_WIDTH_CLASSNAME,
+  t as BUTTON_ICON_LEFT_CLASSNAME,
+  o as BUTTON_ICON_RIGHT_CLASSNAME,
+  S as BUTTON_LABEL_CLASSNAME,
+  c as BUTTON_LOADING_CLASSNAME,
+  N as DEFAULT_BUTTON_CLASSNAME,
   T as ICON_BUTTON_CLASSNAME,
   A as ICON_BUTTON_CONTENT_CLASSNAME
 };

package/dist/es/components/internal/Button/hooks/useButton.js

@@ -1,14 +1,17 @@
 import { useCallback as p, useMemo as n } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import { getModifierClasses as a } from "../../../../utils/preact/className.js";
 const c = (s, e, r, u, t) => {
-  const f = p((o) => {
-    o.preventDefault(), u || t == null || t(o);
-  }, [u, t]);
-  return {
-    classes: n(() => a(r, e, [r, s]), [e, s]),
-    click: f
-  };
-}, g = c;
+  const f = p(
+    (o) => {
+      o.preventDefault(), u || t == null || t(o);
+    },
+    [u, t]
+  );
+  return { classes: n(
+    () => a(r, e, [r, s]),
+    [e, s]
+  ), click: f };
+}, q = c;
 export {
-  g as default
+  q as default
 };

package/dist/es/components/internal/Button/types.js

@@ -1,4 +1,4 @@
-var R = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.SECONDARY = "secondary", r.TERTIARY = "tertiary", r.LINK = "link", r))(R || {});
+var R = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.SECONDARY = "secondary", r.TERTIARY = "tertiary", r.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", r.LINK = "link", r))(R || {});
 export {
   R as ButtonVariant
 };

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

@@ -1,26 +1,25 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { memo as i, forwardRef as t } from "../../../external/preact/compat/dist/compat.module.js";
 import d from "./hooks/useCalendar.js";
 import "./Calendar.scss.js";
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import l from "./components/CalendarControls/CalendarControls.js";
 import s from "./components/CalendarGrid/CalendarGrid.js";
 const m = t((o, a) => {
   const r = d(o, a), n = r.grid.config();
-  return e("div", {
-    role: "none",
-    children: [e(l, {
-      config: n,
-      grid: r.grid,
-      renderer: o.renderControl
-    }), e(s, {
-      ref: r.cursorElementRef,
-      config: n,
-      cursorRootProps: r.cursorRootProps,
-      grid: r.grid,
-      onlyCellsWithin: o.onlyCellsWithin,
-      prepare: o.prepare
-    })]
-  });
+  return /* @__PURE__ */ e("div", { role: "none", children: [
+    /* @__PURE__ */ e(l, { config: n, grid: r.grid, renderer: o.renderControl }),
+    /* @__PURE__ */ e(
+      s,
+      {
+        ref: r.cursorElementRef,
+        config: n,
+        cursorRootProps: r.cursorRootProps,
+        grid: r.grid,
+        onlyCellsWithin: o.onlyCellsWithin,
+        prepare: o.prepare
+      }
+    )
+  ] });
 }), R = i(m);
 export {
   R as default