@adyen/adyen-platform-experience-web 0.1.1

package/dist/es/components/internal/FilterBar/filters/AmountFilter/AmountFilter.js

@@ -0,0 +1,39 @@
+import { jsx as c } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { RangeSelection as f } from "./RangeSelection.js";
+import { useState as s, useCallback as x } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { PopoverContainerSize as S } from "../../../Popover/types.js";
+import v from "../BaseFilter/BaseFilter.js";
+import { EMPTY_OBJECT as C } from "../../../../../utils/common/constants.js";
+const r = 1e5, E = ({ updateFilters: t, selectedCurrencies: a, availableCurrencies: u, ...o }) => {
+  const [n, l] = s(), A = x(
+    (m) => {
+      l(m.filterValue);
+      const { minAmount: e, maxAmount: i } = m ?? C;
+      t({
+        minAmount: e !== void 0 ? String(e * r) : void 0,
+        maxAmount: i !== void 0 ? String(i * r) : void 0
+      });
+    },
+    [t]
+  );
+  return /* @__PURE__ */ c(
+    v,
+    {
+      ...o,
+      updateFilters: t,
+      minAmount: o.minAmount,
+      maxAmount: o.maxAmount,
+      onChange: A,
+      value: n,
+      label: n || o.label,
+      type: "text",
+      containerSize: S.MEDIUM,
+      selectedCurrencies: a,
+      availableCurrencies: u,
+      render: f
+    }
+  );
+};
+export {
+  E as AmountFilter
+};

package/dist/es/components/internal/FilterBar/filters/AmountFilter/AmountFilter.scss.js

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

package/dist/es/components/internal/FilterBar/filters/AmountFilter/RangeSelection.js

@@ -0,0 +1,80 @@
+import { jsx as u } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import y from "../../../FormFields/InputBase.js";
+import "./AmountFilter.scss.js";
+import { useMemo as $, useCallback as h, useState as V, useEffect as I } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { CommitAction as N } from "../../../../../hooks/useCommitAction/types.js";
+import _ from "../../../../../core/Context/useCoreContext.js";
+const j = ({
+  onChange: d,
+  editAction: i,
+  onValueUpdated: A,
+  selectedCurrencies: f,
+  availableCurrencies: o,
+  ...p
+}) => {
+  const { i18n: m } = _(), g = $(() => (f == null ? void 0 : f.length) === 1 || (o == null ? void 0 : o.length) === 1 ? !0 : (((o == null ? void 0 : o.length) ?? 0) > 1, !1), [o == null ? void 0 : o.length, f == null ? void 0 : f.length]), l = h(
+    (r, M) => {
+      const S = new Intl.NumberFormat(m.locale);
+      return M ? m.amount(r, (f == null ? void 0 : f[0]) || (o == null ? void 0 : o[0]) || "EUR") : S.format(r);
+    },
+    [o, m, f]
+  ), [t, v] = V(p.minAmount !== void 0 ? parseFloat(p.minAmount) : void 0), [n, F] = V(p.maxAmount !== void 0 ? parseFloat(p.maxAmount) : void 0), a = $(() => {
+    if (t !== void 0 && t < 0)
+      return null;
+    if (t !== void 0 && n !== void 0)
+      return n < t ? null : `${l(t, g)} to ${l(n, g)}`;
+    if (t !== void 0)
+      return `${m.get("from")} ${l(t, g)}`;
+    if (n !== void 0)
+      return `${m.get("to")} ${l(n, g)}`;
+  }, [l, m, n, t, g]), x = h(() => {
+    d({ minAmount: t, maxAmount: n, filterValue: a !== void 0 ? a : void 0 });
+  }, [a, n, t, d]), T = h(() => {
+    d({ minAmount: void 0, maxAmount: void 0, filterValue: void 0 }), F(void 0), v(void 0);
+  }, [d]);
+  return I(() => {
+    i === N.APPLY && x(), i === N.CLEAR && T();
+  }, [x, T, i]), I(() => {
+    A(a);
+  }, [a, A]), /* @__PURE__ */ u("div", { className: "adyen-fp-range-selection-filter", children: [
+    /* @__PURE__ */ u("div", { className: "adyen-fp-range-selection-filter__input", children: [
+      /* @__PURE__ */ u("label", { htmlFor: "minValue", children: `${m.get("from")}:` }),
+      /* @__PURE__ */ u(
+        y,
+        {
+          lang: m.locale,
+          name: "minValue",
+          type: "number",
+          value: t,
+          onInput: (r) => {
+            r.currentTarget && v(r.currentTarget.value !== "" ? parseFloat(r.currentTarget.value) : void 0);
+          },
+          min: 0,
+          isInvalid: t ? t < 0 : !1,
+          errorMessage: m.get("noNegativeNumbersAllowed")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ u("div", { className: "adyen-fp-range-selection-filter__input", children: [
+      /* @__PURE__ */ u("label", { htmlFor: "maxValue", children: `${m.get("to")}:` }),
+      /* @__PURE__ */ u(
+        y,
+        {
+          lang: m.locale,
+          name: "maxValue",
+          type: "number",
+          value: n,
+          onInput: (r) => {
+            r.currentTarget && F(r.currentTarget.value !== "" ? parseFloat(r.currentTarget.value) : void 0);
+          },
+          min: t,
+          isInvalid: n !== void 0 && t !== void 0 ? n < t : !1,
+          errorMessage: m.get("secondValueShouldBeGreaterThanTheFirstOne")
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  j as RangeSelection
+};

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js

@@ -0,0 +1,129 @@
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import w from "../../components/FilterButton/FilterButton.js";
+import U from "../../../Popover/Popover.js";
+import { TypographyElement as F, TypographyVariant as N } from "../../../Typography/types.js";
+import B from "../../../Typography/Typography.js";
+import Y from "../../../../../hooks/useCommitAction/useCommitAction.js";
+import { CommitAction as _ } from "../../../../../hooks/useCommitAction/types.js";
+import $ from "../../../../../hooks/element/useUniqueIdentifier.js";
+import { isEmpty as z } from "../../../../../utils/validator-utils.js";
+import { memo as H } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as v, useCallback as D, useEffect as E, useState as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../../../../../hooks/useBooleanState/useBooleanState.js";
+import O from "../../../FormFields/InputText.js";
+import "./BaseFilter.scss.js";
+import { Fragment as j } from "preact";
+const q = (d) => !d || z(d), R = (() => {
+  const d = (e) => {
+    const { editAction: t, name: y, onChange: c, onValueUpdated: l } = e, [a, o] = L(e.value), r = D(
+      (s) => {
+        const u = s.target.value.trim();
+        o(u), l(u);
+      },
+      [l]
+    );
+    return E(() => {
+      if (t === _.CLEAR) {
+        const s = "";
+        o(s), l(s), c(s);
+      }
+      t === _.APPLY && c(a ?? "");
+    }, [a, t, c, l]), /* @__PURE__ */ i(O, { name: y, value: a, onInput: r });
+  };
+  return (e) => /* @__PURE__ */ i(d, { ...e });
+})(), G = ({ render: d, ...e }) => {
+  var C;
+  const [t, y] = f(!1), [c, l] = f(!1), a = v(() => e.isValueEmpty ?? q, [e.isValueEmpty]), [o, r] = f(a(e.value)), [s, u] = f(!1), [I, h] = f(!1), [P, g] = f(a(e.value)), b = $(), S = v(() => d ?? R, [d]), T = D(
+    (n) => {
+      const m = a(n ?? void 0);
+      r(m), g(n === null), h(s ? n !== e.value : !m);
+    },
+    [a, r, g, h, s, e.value]
+  ), { commitAction: x, commitActionButtons: k, committing: A, resetCommitAction: V } = Y({
+    applyDisabled: P || !I,
+    resetDisabled: o
+  }), [p, M] = v(() => {
+    const n = (m) => () => {
+      m !== t && (m && (V(), h(!1), u(!1)), y(m), l(m));
+    };
+    return [n(!1), n(!0)];
+  }, [y, t, V, l, u, h]);
+  return E(() => {
+    if (c) {
+      const n = a(e.value);
+      l(!1), r(n), u(!n);
+    }
+  }, [e.value, c, a, l, r, u]), E(() => {
+    A && p(), r(o);
+  }, [A, p, r, o]), /* @__PURE__ */ i(j, { children: [
+    /* @__PURE__ */ i("div", { className: `adyen-fp-filter adyen-fp-filter--${e.type}`, children: v(
+      () => /* @__PURE__ */ i(
+        w,
+        {
+          classNameModifiers: [
+            ...e.appliedFilterAmount ? ["with-counter"] : [],
+            ...e.classNameModifiers ?? [],
+            ...t ? ["active"] : [],
+            ...o ? [] : ["has-selection"]
+          ],
+          onClick: t ? p : M,
+          tabIndex: 0,
+          ref: b,
+          children: /* @__PURE__ */ i("div", { className: "adyen-fp-filter-button__default-container", children: [
+            /* @__PURE__ */ i(
+              B,
+              {
+                el: F.SPAN,
+                variant: N.BODY,
+                stronger: !0,
+                className: "adyen-fp-filter-button__label",
+                children: e.label
+              }
+            ),
+            !!e.appliedFilterAmount && /* @__PURE__ */ i("div", { className: "adyen-fp-filter-button__counter-wrapper", children: /* @__PURE__ */ i(
+              B,
+              {
+                el: F.SPAN,
+                variant: N.BODY,
+                stronger: !0,
+                className: "adyen-fp-filter-button__counter",
+                children: e.appliedFilterAmount
+              }
+            ) })
+          ] })
+        }
+      ),
+      [
+        e.appliedFilterAmount,
+        e.classNameModifiers,
+        e.label,
+        t,
+        o,
+        p,
+        M,
+        b
+      ]
+    ) }),
+    t && /* @__PURE__ */ i(
+      U,
+      {
+        actions: k,
+        title: (C = e.title) == null ? void 0 : C.trim(),
+        modifiers: ["filter"],
+        open: t,
+        "aria-label": `${e.label}`,
+        dismiss: p,
+        dismissible: !1,
+        withContentPadding: e.withContentPadding ?? !0,
+        divider: !0,
+        targetElement: b,
+        disableFocusTrap: !1,
+        containerSize: e.containerSize,
+        children: S({ ...e, editAction: x, onValueUpdated: T })
+      }
+    )
+  ] });
+}, de = H(G);
+export {
+  de as default
+};

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.scss.js

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

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilter.js

@@ -0,0 +1,109 @@
+import { jsx as y } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as w, useCallback as R, useEffect as C, useMemo as S, useRef as B } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { CommitAction as E } from "../../../../../hooks/useCommitAction/types.js";
+import T from "../../../../../core/Context/useCoreContext.js";
+import { DateRangeFilterParam as M } from "./types.js";
+import "./DateFilter.scss.js";
+import x from "../BaseFilter/BaseFilter.js";
+import V from "../../../DatePicker/DatePicker.js";
+import { EMPTY_OBJECT as A } from "../../../../../utils/common/constants.js";
+const k = (n, e, o) => {
+  const t = e && n.fullDate(e), r = o && n.fullDate(o);
+  if (t && r)
+    return `${t} - ${r}`;
+  if (t)
+    return n.get("filter.date.since", { values: { date: t } });
+  if (r)
+    return n.get("filter.date.until", { values: { date: r } });
+}, a = (n) => {
+  try {
+    return new Date(n || "").toISOString();
+  } catch {
+    return "";
+  }
+}, L = (() => {
+  const n = ({
+    editAction: e,
+    from: o,
+    to: t,
+    now: r,
+    onChange: i,
+    onValueUpdated: l,
+    showTimezoneInfo: u,
+    selectedPresetOption: c,
+    timeRangePresetOptions: f,
+    timezone: m,
+    sinceDate: d,
+    untilDate: h
+  }) => {
+    const { i18n: D } = T(), [P, p] = w(c), F = S(() => [new Date(o), new Date(t)], [o, t]), s = B(), v = R(
+      (g, O) => {
+        l(k(D, a(g), a(O)));
+      },
+      [D, l]
+    );
+    return C(() => {
+      var g, O, b;
+      switch (e) {
+        case E.APPLY:
+          i({
+            selectedPresetOption: P,
+            [M.FROM]: a((g = s.current) == null ? void 0 : g.from),
+            [M.TO]: a((O = s.current) == null ? void 0 : O.to)
+          });
+          break;
+        case E.CLEAR:
+          (b = s.current) == null || b.clear(), i();
+      }
+    }, [e, i, P]), /* @__PURE__ */ y(
+      V,
+      {
+        ref: s,
+        now: r,
+        originDate: F,
+        onHighlight: v,
+        onPresetOptionSelected: p,
+        selectedPresetOption: c,
+        timeRangePresetOptions: f,
+        timezone: m,
+        showTimezoneInfo: u,
+        sinceDate: a(d),
+        untilDate: a(h)
+      }
+    );
+  };
+  return (e) => /* @__PURE__ */ y(n, { ...e });
+})();
+function G({ title: n, from: e, to: o, selectedPresetOption: t, ...r }) {
+  const { i18n: i } = T(), [l, u] = w(), [c, f] = w(), [m, d] = w(), h = R(
+    (P) => {
+      const { from: p, to: F, selectedPresetOption: s } = P ?? A;
+      try {
+        u(l ?? s), f(a(c ?? p)), d(a(m ?? F));
+      } finally {
+        r.onChange({ from: p, to: F, selectedPresetOption: s });
+      }
+    },
+    [l, c, m, r]
+  );
+  C(() => u(t), [t]), C(() => f(a(e || Date.now())), [e]), C(() => d(a(o || Date.now())), [o]);
+  const D = S(() => t ?? r.label, [t, r.label]);
+  return /* @__PURE__ */ y(
+    x,
+    {
+      ...r,
+      from: e,
+      to: o,
+      type: "date",
+      label: D,
+      onChange: h,
+      render: L,
+      selectedPresetOption: t,
+      value: k(i, e, o),
+      withContentPadding: !1
+    }
+  );
+}
+export {
+  G as default
+};

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilter.scss.js

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

package/dist/es/components/internal/FilterBar/filters/DateFilter/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((o) => (o.FROM = "from", o.TO = "to", o))(r || {});
+export {
+  r as DateRangeFilterParam
+};

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

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

package/dist/es/components/internal/FormFields/InputBase.js

@@ -0,0 +1,73 @@
+import { jsx as f } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ARIA_ERROR_SUFFIX as h } from "../../../core/Errors/constants.js";
+import { hasOwnProperty as k } from "../../../utils/common/index.js";
+import w from "classnames";
+import { forwardRef as P } from "../../../external/preact/compat/dist/compat.module.js";
+import { useCallback as r } from "../../../external/preact/hooks/dist/hooks.module.js";
+import "./FormFields.scss.js";
+import { Fragment as q } from "preact";
+function u({ onInput: a, onKeyUp: d, trimOnBlur: c, onBlurHandler: t, onBlur: e, onFocusHandler: s, errorMessage: l, ...p }, v) {
+  const { autoCorrect: A, classNameModifiers: m, isInvalid: n, isValid: C, readonly: I = !1, spellCheck: O, type: y, uniqueId: o, isCollatingErrors: $, disabled: g } = p;
+  k(p, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
+  const N = r(
+    (i) => {
+      a == null || a(i);
+    },
+    [a]
+  ), R = r(
+    (i) => {
+      d && d(i);
+    },
+    [d]
+  ), b = r(
+    (i) => {
+      t == null || t(i), c && (i.target.value = i.target.value.trim()), e == null || e(i);
+    },
+    [e, t, c]
+  ), x = r(
+    (i) => {
+      s == null || s(i);
+    },
+    [s]
+  ), E = w(
+    "adyen-fp-input",
+    [`adyen-fp-input--${y}`],
+    p.className,
+    {
+      "adyen-fp-input--invalid": n,
+      "adyen-fp-input--valid": C
+    },
+    m == null ? void 0 : m.map((i) => `adyen-fp-input--${i}`)
+  ), { classNameModifiers: V, uniqueId: j, isInvalid: F, isValid: S, isCollatingErrors: T, ..._ } = p;
+  return /* @__PURE__ */ f(q, { children: [
+    /* @__PURE__ */ f(
+      "input",
+      {
+        id: o,
+        ..._,
+        type: y,
+        className: E,
+        readOnly: I,
+        "aria-describedby": $ ? void 0 : `${o}${h}`,
+        "aria-invalid": n,
+        onInput: N,
+        onBlur: b,
+        onFocus: x,
+        onKeyUp: R,
+        disabled: g,
+        ref: v
+      }
+    ),
+    n && l && /* @__PURE__ */ f("span", { className: "adyen-fp-input__invalid-value", id: `${o}${h}`, children: l })
+  ] });
+}
+u.defaultProps = {
+  type: "text",
+  classNameModifiers: [],
+  onInput: () => {
+  }
+};
+const M = P(u);
+export {
+  M as default
+};

package/dist/es/components/internal/FormFields/InputText.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import a from "./InputBase.js";
+import { forwardRef as i } from "../../../external/preact/compat/dist/compat.module.js";
+const u = i(function(e, r) {
+  return /* @__PURE__ */ t(a, { classNameModifiers: e.classNameModifiers, ...e, ref: r, "aria-required": e.required, type: "text" });
+});
+export {
+  u as default
+};