@adyen/adyen-platform-experience-web 0.1.1 → 1.0.0-beta

package/dist/index-c88cd37e.mjs

@@ -0,0 +1,243 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _locale, _languageCode, _supportedLocales, _customTranslations, _translations, _translationsLoader, _ready, _currentRefresh, _markRefreshAsDone, _refreshWatchable, _restamp, _refreshTranslations, refreshTranslations_fn;
+import { getLocalisedAmount } from "./es/core/Localization/amount/amount-util.js";
+import { FALLBACK_LOCALE, defaultTranslation } from "./es/core/Localization/constants/locale.js";
+import { EXCLUDE_PROPS, DEFAULT_LOCALES, DEFAULT_DATETIME_FORMAT } from "./es/core/Localization/constants/localization.js";
+import restamper from "./es/core/Localization/datetime/restamper/restamper.js";
+import "./es/core/Localization/datetime/restamper/constants.js";
+import { systemToTimezone } from "./es/core/Localization/datetime/restamper/utils.js";
+import { loadTranslations, formatLocale, parseLocale, toTwoLetterCode, formatCustomTranslations, getTranslation } from "./es/core/Localization/utils.js";
+import { struct, isFunction, noop } from "./es/utils/common/index.js";
+import watchable from "./es/utils/watchable/index.js";
+import { en_US } from "./es/core/Localization/translations/index.js";
+function createTranslationsLoader() {
+  let _locale2 = this.locale;
+  let _preferredLocale = _locale2;
+  let _supportedLocales2 = this.supportedLocales;
+  return struct({
+    load: { value: (customTranslations) => loadTranslations(_locale2, this.preferredTranslations, customTranslations) },
+    locale: {
+      get: () => _locale2,
+      set: (locale) => {
+        _preferredLocale = locale;
+        _locale2 = formatLocale(locale) || parseLocale(locale, _supportedLocales2) || FALLBACK_LOCALE;
+      }
+    },
+    supportedLocales: {
+      get: () => _locale2,
+      set(supportedLocales) {
+        _supportedLocales2 = supportedLocales;
+        this.locale = _preferredLocale;
+      }
+    }
+  });
+}
+function getLocalizationProxyDescriptors() {
+  const descriptors = {};
+  for (const [prop, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(Localization.prototype))) {
+    if (EXCLUDE_PROPS.includes(prop))
+      continue;
+    if (isFunction(descriptor.get)) {
+      descriptors[prop] = { get: descriptor.get.bind(this) };
+    } else if (isFunction(descriptor.value)) {
+      descriptors[prop] = { value: descriptor.value.bind(this) };
+    } else {
+      descriptors[prop] = { get: () => this[prop] };
+    }
+  }
+  return descriptors;
+}
+class Localization {
+  constructor(locale = FALLBACK_LOCALE, translationsFiles) {
+    __privateAdd(this, _refreshTranslations);
+    __privateAdd(this, _locale, FALLBACK_LOCALE);
+    __privateAdd(this, _languageCode, toTwoLetterCode(__privateGet(this, _locale)));
+    __privateAdd(this, _supportedLocales, DEFAULT_LOCALES);
+    __privateAdd(this, _customTranslations, void 0);
+    __privateAdd(this, _translations, defaultTranslation);
+    __privateAdd(this, _translationsLoader, createTranslationsLoader.call(this));
+    __privateAdd(this, _ready, Promise.resolve());
+    __privateAdd(this, _currentRefresh, void 0);
+    __privateAdd(this, _markRefreshAsDone, void 0);
+    __privateAdd(this, _refreshWatchable, watchable({ timestamp: () => performance.now() }));
+    __privateAdd(this, _restamp, restamper());
+    __publicField(this, "watch", __privateGet(this, _refreshWatchable).watch.bind(void 0));
+    __publicField(this, "i18n", struct(getLocalizationProxyDescriptors.call(this)));
+    __publicField(this, "preferredTranslations");
+    this.watch(noop);
+    this.preferredTranslations = translationsFiles && translationsFiles.reduce((prev, curr) => ({ ...prev, ...curr }), {
+      [FALLBACK_LOCALE]: en_US["en_US"]
+    });
+    this.locale = locale;
+  }
+  get customTranslations() {
+    return __privateGet(this, _customTranslations) ?? {};
+  }
+  set customTranslations(customTranslations) {
+    let translations = void 0;
+    let supportedLocales = [...DEFAULT_LOCALES];
+    if (customTranslations != void 0) {
+      translations = formatCustomTranslations(customTranslations, DEFAULT_LOCALES);
+      const localesFromCustomTranslations = Object.keys(translations);
+      supportedLocales = [...DEFAULT_LOCALES, ...localesFromCustomTranslations].filter(
+        (locale, index, locales) => locales.indexOf(locale) === index
+      );
+    }
+    __privateGet(this, _translationsLoader).supportedLocales = supportedLocales;
+    __privateMethod(this, _refreshTranslations, refreshTranslations_fn).call(this, translations);
+  }
+  get languageCode() {
+    return __privateGet(this, _languageCode);
+  }
+  get lastRefreshTimestamp() {
+    return __privateGet(this, _refreshWatchable).snapshot.timestamp;
+  }
+  get locale() {
+    return __privateGet(this, _locale);
+  }
+  set locale(locale) {
+    if (locale != void 0) {
+      __privateGet(this, _translationsLoader).locale = locale;
+      if (__privateGet(this, _locale) === __privateGet(this, _translationsLoader).locale)
+        return;
+      __privateMethod(this, _refreshTranslations, refreshTranslations_fn).call(this, __privateGet(this, _customTranslations));
+    } else
+      this.locale = FALLBACK_LOCALE;
+  }
+  get ready() {
+    return __privateGet(this, _ready);
+  }
+  get supportedLocales() {
+    return __privateGet(this, _supportedLocales);
+  }
+  get timezone() {
+    return __privateGet(this, _restamp).tz.current;
+  }
+  set timezone(timezone) {
+    __privateGet(this, _restamp).tz = timezone;
+  }
+  /**
+   * Returns a translated string from a key in the current {@link Localization.locale}
+   * @param key - Translation key
+   * @param options - Translation options
+   * @returns Translated string
+   */
+  get(key, options) {
+    const translation = getTranslation(__privateGet(this, _translations), key, options);
+    return translation !== null ? translation : key;
+  }
+  /**
+   * Returns a boolean that checks if the translation key exists in the current {@link Localization.locale}
+   * @param key - Translation key
+   * @param options - Translation options
+   * @returns boolean
+   */
+  has(key, options) {
+    const translation = getTranslation(__privateGet(this, _translations), key, options);
+    return !!translation;
+  }
+  /**
+   * Returns a localized string for an amount
+   * @param amount - Amount to be converted
+   * @param currencyCode - Currency code of the amount
+   * @param options - Options for String.prototype.toLocaleString
+   */
+  amount(amount, currencyCode, options) {
+    const { hideCurrency, ...restOfOptions } = options || {};
+    const localisedAmount = getLocalisedAmount(amount, __privateGet(this, _locale), currencyCode, hideCurrency, {
+      ...restOfOptions,
+      currencyDisplay: "symbol",
+      signDisplay: "never"
+    });
+    return amount < 0 ? `- ${localisedAmount}` : localisedAmount;
+  }
+  /**
+   * Returns a localized string for a date
+   * @param date - Date to be localized
+   * @param options - Options for {@link Date.toLocaleDateString}
+   */
+  date(date, options = {}) {
+    const dateOptions = { ...DEFAULT_DATETIME_FORMAT, timeZone: __privateGet(this, _restamp).tz.current, ...options };
+    return new Date(date).toLocaleDateString(__privateGet(this, _locale), dateOptions);
+  }
+  /**
+   * Returns a localized string for a full date
+   * @param date - Date to be localized
+   */
+  fullDate(date) {
+    const timestamp = systemToTimezone(__privateGet(this, _restamp), date);
+    const [, month, day, year, time] = new Date(timestamp).toString().split(/\s+/g);
+    return `${month} ${day}, ${year}, ${time}`;
+  }
+}
+_locale = new WeakMap();
+_languageCode = new WeakMap();
+_supportedLocales = new WeakMap();
+_customTranslations = new WeakMap();
+_translations = new WeakMap();
+_translationsLoader = new WeakMap();
+_ready = new WeakMap();
+_currentRefresh = new WeakMap();
+_markRefreshAsDone = new WeakMap();
+_refreshWatchable = new WeakMap();
+_restamp = new WeakMap();
+_refreshTranslations = new WeakSet();
+refreshTranslations_fn = function(customTranslations) {
+  if (__privateGet(this, _markRefreshAsDone) === void 0) {
+    __privateSet(this, _ready, new Promise((resolve) => {
+      __privateSet(this, _markRefreshAsDone, () => {
+        resolve(__privateGet(this, _currentRefresh));
+        __privateSet(this, _currentRefresh, __privateSet(this, _markRefreshAsDone, void 0));
+      });
+    }));
+  }
+  const currentRefreshDone = () => {
+    var _a;
+    if (__privateGet(this, _currentRefresh) === currentRefresh)
+      (_a = __privateGet(this, _markRefreshAsDone)) == null ? void 0 : _a.call(this);
+  };
+  const currentRefresh = __privateSet(this, _currentRefresh, (async () => {
+    __privateSet(this, _translations, await __privateGet(this, _translationsLoader).load(customTranslations));
+    __privateSet(this, _locale, __privateGet(this, _translationsLoader).locale);
+    __privateSet(this, _supportedLocales, __privateGet(this, _translationsLoader).supportedLocales);
+    __privateSet(this, _customTranslations, customTranslations);
+    __privateSet(this, _languageCode, toTwoLetterCode(__privateGet(this, _locale)));
+    __privateGet(this, _refreshWatchable).notify();
+  })());
+  currentRefresh.then(currentRefreshDone).catch((reason) => {
+    currentRefreshDone();
+    console.error(reason);
+  });
+};
+export {
+  Localization as L,
+  createTranslationsLoader as c,
+  getLocalizationProxyDescriptors as g
+};

package/dist/index-f5bc0382.mjs

@@ -0,0 +1,155 @@
+import './index2.css';
+import { o } from "./jsxRuntime.module-69493d81.mjs";
+import { h, T, F, p, _ } from "./hooks.module-8565d716.mjs";
+import "./es/utils/common/index.js";
+import { C as CommitAction } from "./types-e6a6a3ff.mjs";
+import useCoreContext from "./es/core/Context/useCoreContext.js";
+import DatePicker from "./es/components/internal/DatePicker/DatePicker.js";
+import BaseFilter from "./es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js";
+import { EMPTY_OBJECT } from "./es/utils/common/constants.js";
+var DateRangeFilterParam = /* @__PURE__ */ ((DateRangeFilterParam2) => {
+  DateRangeFilterParam2["FROM"] = "from";
+  DateRangeFilterParam2["TO"] = "to";
+  return DateRangeFilterParam2;
+})(DateRangeFilterParam || {});
+const DateFilter$1 = "";
+const formattingOptions = {
+  month: "short",
+  day: "numeric",
+  year: "numeric"
+};
+const baseDateTimeFormatter = new Intl.DateTimeFormat("en-US", formattingOptions);
+const computeDateFilterValue = (i18n, fromDate, toDate) => {
+  const from = fromDate && i18n.fullDate(fromDate);
+  const to = toDate && i18n.fullDate(toDate);
+  if (from && to)
+    return `${from} - ${to}`;
+  if (from)
+    return i18n.get("filter.date.since", { values: { date: from } });
+  if (to)
+    return i18n.get("filter.date.until", { values: { date: to } });
+};
+const resolveDate = (date) => {
+  try {
+    return new Date(date || "").toISOString();
+  } catch {
+    return "";
+  }
+};
+const renderDateFilterModalBody = (() => {
+  const DateFilterEditModalBody = ({
+    editAction,
+    from,
+    to,
+    now,
+    onChange,
+    onValueUpdated,
+    showTimezoneInfo,
+    selectedPresetOption,
+    timeRangePresetOptions,
+    timezone,
+    sinceDate,
+    untilDate
+  }) => {
+    const { i18n } = useCoreContext();
+    const [presetOption, setPresetOption] = h(selectedPresetOption);
+    const originDate = F(() => [new Date(from), new Date(to)], [from, to]);
+    const datePickerRef = _();
+    const onHighlight = T(
+      (from2, to2) => {
+        onValueUpdated(computeDateFilterValue(i18n, resolveDate(from2), resolveDate(to2)));
+      },
+      [i18n, onValueUpdated]
+    );
+    p(() => {
+      var _a, _b, _c;
+      switch (editAction) {
+        case CommitAction.APPLY:
+          onChange({
+            selectedPresetOption: presetOption,
+            [DateRangeFilterParam.FROM]: resolveDate((_a = datePickerRef.current) == null ? void 0 : _a.from),
+            [DateRangeFilterParam.TO]: resolveDate((_b = datePickerRef.current) == null ? void 0 : _b.to)
+          });
+          break;
+        case CommitAction.CLEAR:
+          (_c = datePickerRef.current) == null ? void 0 : _c.clear();
+          onChange();
+      }
+    }, [editAction, onChange, presetOption]);
+    return /* @__PURE__ */ o(
+      DatePicker,
+      {
+        ref: datePickerRef,
+        now,
+        originDate,
+        onHighlight,
+        onPresetOptionSelected: setPresetOption,
+        selectedPresetOption,
+        timeRangePresetOptions,
+        timezone,
+        showTimezoneInfo,
+        sinceDate: resolveDate(sinceDate),
+        untilDate: resolveDate(untilDate)
+      }
+    );
+  };
+  return (props) => /* @__PURE__ */ o(DateFilterEditModalBody, { ...props });
+})();
+const customDateRangeFormat = (formatter, fromDate, toDate) => {
+  return formatter.formatRange(fromDate, toDate);
+};
+function DateFilter({ title, from, to, selectedPresetOption, ...props }) {
+  const { i18n } = useCoreContext();
+  const [selectedPresetOptionValue, setSelectedPresetOption] = h();
+  const [fromValue, setFrom] = h();
+  const [toValue, setTo] = h();
+  const onChange = T(
+    (params) => {
+      const { from: from2, to: to2, selectedPresetOption: selectedPresetOption2 } = params ?? EMPTY_OBJECT;
+      try {
+        setSelectedPresetOption(selectedPresetOptionValue ?? selectedPresetOption2);
+        setFrom(resolveDate(fromValue ?? from2));
+        setTo(resolveDate(toValue ?? to2));
+      } finally {
+        props.onChange({ from: from2, to: to2, selectedPresetOption: selectedPresetOption2 });
+      }
+    },
+    [selectedPresetOptionValue, fromValue, toValue, props]
+  );
+  const [customSelection, dateTimeFormatter] = F(() => {
+    let formatter = baseDateTimeFormatter;
+    try {
+      formatter = new Intl.DateTimeFormat(i18n.locale, formattingOptions);
+    } catch {
+    }
+    return [i18n.get("rangePreset.custom"), formatter];
+  }, [i18n]);
+  p(() => setSelectedPresetOption(selectedPresetOption), [selectedPresetOption]);
+  p(() => setFrom(resolveDate(from || Date.now())), [from]);
+  p(() => setTo(resolveDate(to || Date.now())), [to]);
+  const label = F(() => {
+    if (selectedPresetOption === customSelection && fromValue && toValue) {
+      return customDateRangeFormat(dateTimeFormatter, new Date(fromValue), new Date(toValue));
+    }
+    return selectedPresetOption ?? props.label;
+  }, [customSelection, dateTimeFormatter, fromValue, toValue, selectedPresetOption, props.label]);
+  return /* @__PURE__ */ o(
+    BaseFilter,
+    {
+      ...props,
+      from,
+      to,
+      type: "date",
+      label,
+      onChange,
+      render: renderDateFilterModalBody,
+      selectedPresetOption,
+      value: computeDateFilterValue(i18n, from, to),
+      withContentPadding: false
+    }
+  );
+}
+export {
+  DateRangeFilterParam as D,
+  DateFilter as a
+};

package/dist/index.css

@@ -0,0 +1,65 @@
+:root {
+  --adyen-sdk-border-radius-xs: 2px;
+  --adyen-sdk-border-radius-s: 4px;
+  --adyen-sdk-border-radius-m: 8px;
+  --adyen-sdk-border-radius-l: 12px;
+  --adyen-sdk-border-radius-xl: 24px;
+  --adyen-sdk-width-s: 1px;
+  --adyen-sdk-width-m: 2px;
+  --adyen-sdk-width-l: 3px;
+  --adyen-sdk-color-label-primary: #00112c;
+  --adyen-sdk-color-label-primary-active: #8d95a3;
+  --adyen-sdk-color-label-primary-hover: #5c687c;
+  --adyen-sdk-color-label-secondary: #5c687c;
+  --adyen-sdk-color-label-tertiary: #8d95a3;
+  --adyen-sdk-color-label-disabled: #8d95a3;
+  --adyen-sdk-color-label-inverse: #ffffff;
+  --adyen-sdk-color-label-critical: #e22d2d;
+  --adyen-sdk-color-background-primary: #ffffff;
+  --adyen-sdk-color-background-primary-hover: #f7f7f8;
+  --adyen-sdk-color-background-primary-active: #eeeff1;
+  --adyen-sdk-color-background-secondary: #f7f7f8;
+  --adyen-sdk-color-background-secondary-hover: #eeeff1;
+  --adyen-sdk-color-background-tertiary: #eeeff1;
+  --adyen-sdk-color-background-tertiary-hover: #e3e5e9;
+  --adyen-sdk-color-background-disabled: #eeeff1;
+  --adyen-sdk-color-background-inverse-primary: #00112c;
+  --adyen-sdk-color-background-inverse-primary-hover: #5c687c;
+  --adyen-sdk-color-background-inverse-primary-active: #8d95a3;
+  --adyen-sdk-color-outline-primary: #dbdee2;
+  --adyen-sdk-color-outline-primary-hover: #c9cdd3;
+  --adyen-sdk-color-outline-primary-active: #00112c;
+  --adyen-sdk-color-outline-secondary: #c9cdd3;
+  --adyen-sdk-color-outline-tertiary: #8d95a3;
+  --adyen-sdk-color-outline-disabled: #dbdee2;
+  --adyen-sdk-font-size-100: 12px;
+  --adyen-sdk-font-size-200: 14px;
+  --adyen-sdk-font-size-300: 16px;
+  --adyen-sdk-font-size-400: 18px;
+  --adyen-sdk-font-size-500: 20px;
+  --adyen-sdk-font-size-600: 24px;
+  --adyen-sdk-font-size-700: 32px;
+  --adyen-sdk-font-weight-200: 200;
+  --adyen-sdk-font-weight-400: 400;
+  --adyen-sdk-font-weight-500: 500;
+  --adyen-sdk-font-weight-600: 600;
+  --adyen-sdk-font-weight-700: 700;
+  --adyen-sdk-line-height-100: 18px;
+  --adyen-sdk-line-height-200: 20px;
+  --adyen-sdk-line-height-300: 24px;
+  --adyen-sdk-line-height-400: 26px;
+  --adyen-sdk-line-height-500: 28px;
+  --adyen-sdk-line-height-600: 30px;
+  --adyen-sdk-line-height-700: 34px;
+  --adyen-sdk-line-height-800: 44px;
+}.adyen-pe-title {
+  color: var(--adyen-sdk-color-label-primary);
+  font-size: var(--adyen-sdk-font-size-700);
+  font-weight: var(--adyen-sdk-font-size-600);
+  line-height: var(--adyen-sdk-line-height-300);
+  margin: 16px 0;
+}
+
+.adyen-pe-component {
+  color: var(--adyen-sdk-color-label-primary);
+}

package/dist/index2.css

@@ -0,0 +1,4 @@
+.adyen-pe-date-filter .adyen-pe-button,
+.adyen-pe-date-filter .adyen-pe-field {
+  width: initial;
+}

package/dist/jsxRuntime.module-69493d81.mjs

@@ -0,0 +1,15 @@
+import { l } from "./preact.module-38e5a571.mjs";
+var _ = 0;
+function o(o2, e, n, t, f, l$1) {
+  var s, u, a = {};
+  for (u in e)
+    "ref" == u ? s = e[u] : a[u] = e[u];
+  var i = { type: o2, props: a, key: n, ref: s, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: --_, __source: f, __self: l$1 };
+  if ("function" == typeof o2 && (s = o2.defaultProps))
+    for (u in s)
+      void 0 === a[u] && (a[u] = s[u]);
+  return l.vnode && l.vnode(i), i;
+}
+export {
+  o
+};