@adyen/bento-vue3 1.97.0 → 1.98.0

package/dist/chunks/header-meta.yBxBW12f.js

@@ -1,243 +0,0 @@
-import { shallowRef as O, watch as C, defineComponent as X, ref as $, openBlock as u, createElementBlock as M, mergeProps as H, toHandlers as L, unref as i, createVNode as S, createBlock as b, withCtx as h, renderSlot as w, toDisplayString as D, createCommentVNode as v, computed as j, useSlots as F, createTextVNode as U } from "vue";
-import { h as A, a as Y } from "./button-actions.CWmTl4cF.js";
-import { B as G } from "./popover.types.DATOPtuh.js";
-import { p as V, B } from "./typography.B3J6_tYk.js";
-import { g as W } from "./generate-uid.DBWe4g6T.js";
-import { u as z } from "./index.B875RXHM.js";
-import { I as J } from "./info.6Z6NxUst.js";
-import { u as q } from "./use-bento-delayed-hover.Csc3nIWt.js";
-import { _ as P } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { u as K } from "./use-has-slot.CyMiImRQ.js";
-import { c as Q } from "./constructNow.DyOJDyZZ.js";
-import { t as T, d as Z, n as ee, k, j as te, o as x, p as g, g as oe } from "./en-US.BR6y7foR.js";
-import { d as ae } from "./differenceInMonths.yz4Dfe-b.js";
-import { g as ne } from "./getRoundingMethod.C3eaeGLR.js";
-import { R as se } from "./refresh.C31KClfx.js";
-import "../assets/header-meta.css";
-const I = /* @__PURE__ */ Object.assign({
-  "../../../node_modules/date-fns/locale/de.js": () => import("./de.ctR_lBqr.js"),
-  "../../../node_modules/date-fns/locale/en-GB.js": () => import("./en-GB.BsQNm5GT.js"),
-  "../../../node_modules/date-fns/locale/en-US.js": () => import("./en-US.BR6y7foR.js").then((t) => t.x),
-  "../../../node_modules/date-fns/locale/es.js": () => import("./es.DxqH-QhP.js"),
-  "../../../node_modules/date-fns/locale/fr.js": () => import("./fr.DJtn8ron.js"),
-  "../../../node_modules/date-fns/locale/it.js": () => import("./it.keS7oN5l.js"),
-  "../../../node_modules/date-fns/locale/ja.js": () => import("./ja.cLwacUE6.js"),
-  "../../../node_modules/date-fns/locale/pt-BR.js": () => import("./pt-BR.ChPOra5s.js"),
-  "../../../node_modules/date-fns/locale/zh-CN.js": () => import("./zh-CN.ZG6obniO.js")
-});
-function re(t) {
-  const n = O(void 0);
-  return C(
-    t,
-    async (a) => {
-      if (!a) {
-        n.value = void 0;
-        return;
-      }
-      const r = (l) => `../../../node_modules/date-fns/locale/${l}.js`;
-      let e = r(a);
-      if (I[e] || (e = r(a.substring(0, 2))), I[e] || (e = r("en-US")), I[e])
-        try {
-          const l = await I[e]();
-          n.value = l.default;
-        } catch (l) {
-          V(`Failed to load date-fns locale: ${a}`, l);
-        }
-    },
-    { immediate: !0 }
-  ), n;
-}
-function ie(t, n) {
-  return +T(t) - +T(n);
-}
-function de(t, n, a) {
-  const r = ie(t, n) / 1e3;
-  return ne(a?.roundingMethod)(r);
-}
-function le(t, n, a) {
-  const r = oe(), e = a?.locale ?? r.locale ?? te, l = 2520, m = Z(t, n);
-  if (isNaN(m)) throw new RangeError("Invalid time value");
-  const o = Object.assign({}, a, {
-    addSuffix: a?.addSuffix,
-    comparison: m
-  }), [_, d] = ee(
-    a?.in,
-    ...m > 0 ? [n, t] : [t, n]
-  ), f = de(d, _), E = (k(d) - k(_)) / 1e3, s = Math.round((f - E) / 60);
-  let p;
-  if (s < 2)
-    return a?.includeSeconds ? f < 5 ? e.formatDistance("lessThanXSeconds", 5, o) : f < 10 ? e.formatDistance("lessThanXSeconds", 10, o) : f < 20 ? e.formatDistance("lessThanXSeconds", 20, o) : f < 40 ? e.formatDistance("halfAMinute", 0, o) : f < 60 ? e.formatDistance("lessThanXMinutes", 1, o) : e.formatDistance("xMinutes", 1, o) : s === 0 ? e.formatDistance("lessThanXMinutes", 1, o) : e.formatDistance("xMinutes", s, o);
-  if (s < 45)
-    return e.formatDistance("xMinutes", s, o);
-  if (s < 90)
-    return e.formatDistance("aboutXHours", 1, o);
-  if (s < x) {
-    const c = Math.round(s / 60);
-    return e.formatDistance("aboutXHours", c, o);
-  } else {
-    if (s < l)
-      return e.formatDistance("xDays", 1, o);
-    if (s < g) {
-      const c = Math.round(s / x);
-      return e.formatDistance("xDays", c, o);
-    } else if (s < g * 2)
-      return p = Math.round(s / g), e.formatDistance("aboutXMonths", p, o);
-  }
-  if (p = ae(d, _), p < 12) {
-    const c = Math.round(s / g);
-    return e.formatDistance("xMonths", c, o);
-  } else {
-    const c = p % 12, y = Math.trunc(p / 12);
-    return c < 3 ? e.formatDistance("aboutXYears", y, o) : c < 9 ? e.formatDistance("overXYears", y, o) : e.formatDistance("almostXYears", y + 1, o);
-  }
-}
-function ce(t, n) {
-  return le(t, Q(t), n);
-}
-const N = {
-  "de-DE": { moreInformation: "Weitere Informationen" },
-  "en-GB": { moreInformation: "More information" },
-  "en-US": { moreInformation: "More information" },
-  "es-ES": { moreInformation: "Más información" },
-  "es-MX": { moreInformation: "Más información" },
-  "fr-FR": { moreInformation: "Plus d'informations" },
-  "it-IT": { moreInformation: "Ulteriori informazioni" },
-  "ja-JP": { moreInformation: "詳細情報" },
-  "pt-BR": { moreInformation: "Mais informações" },
-  "zh-CN": { moreInformation: "更多信息" }
-}, me = { key: 0 }, fe = {
-  i18n: { messages: N }
-}, ue = /* @__PURE__ */ X({
-  ...fe,
-  __name: "info-icon-with-popover",
-  props: {
-    /**
-     * Text showed in the popover on hover
-     */
-    popoverText: { type: String, default: null },
-    /**
-     * Position the popover should take if space is available
-     */
-    popoverPosition: {
-      type: String,
-      default: "bottom-start",
-      validator: (t) => Object.values(G).includes(t)
-    }
-  },
-  setup(t) {
-    const { t: n } = z({ messages: N }), a = $(null), r = W("bento-info-icon-with-popover"), { isOpen: e, hoverEvents: l } = q();
-    return (m, o) => (u(), M("div", H({
-      class: "b-info-icon-with-popover",
-      tabindex: "0",
-      "data-testid": "info-icon-with-popover"
-    }, L(i(l), !0)), [
-      S(i(J), {
-        ref_key: "targetElement",
-        ref: a,
-        class: "b-info-icon-with-popover__svg",
-        "aria-expanded": i(e),
-        "aria-describedby": i(r),
-        "svg-title": i(n)("moreInformation")
-      }, null, 8, ["aria-expanded", "aria-describedby", "svg-title"]),
-      a.value ? (u(), b(i(A), {
-        key: 0,
-        open: i(e),
-        "target-element": a.value,
-        position: t.popoverPosition,
-        role: "tooltip",
-        "fit-content": "",
-        "disable-focus-trap": ""
-      }, {
-        default: h(() => [
-          S(i(B), null, {
-            default: h(() => [
-              w(m.$slots, "default", {}, () => [
-                t.popoverText ? (u(), M("div", me, D(t.popoverText), 1)) : v("", !0)
-              ], !0)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["open", "target-element", "position"])) : v("", !0)
-    ], 16));
-  }
-}), ze = /* @__PURE__ */ P(ue, [["__scopeId", "data-v-4276d767"]]), R = {
-  "de-DE": { lastUpdated: "Letzte Aktualisierung: {date}" },
-  "en-GB": { lastUpdated: "Last updated: {date}" },
-  "en-US": { lastUpdated: "Last updated: {date}" },
-  "es-ES": { lastUpdated: "Última actualización: {date}" },
-  "es-MX": { lastUpdated: "Última actualización: {date}" },
-  "fr-FR": { lastUpdated: "Dernière mise à jour : le {date}" },
-  "it-IT": { lastUpdated: "Ultimo aggiornamento: {date}" },
-  "ja-JP": { lastUpdated: "最終更新日: {date}" },
-  "pt-BR": { lastUpdated: "Última atualização: {date}" },
-  "zh-CN": { lastUpdated: "最后更新时间：{date}" }
-}, pe = { class: "b-header-meta__container" }, he = {
-  key: 1,
-  class: "b-header-meta__timestamp-section"
-}, _e = {
-  i18n: { messages: R }
-}, ve = /* @__PURE__ */ X({
-  ..._e,
-  __name: "header-meta",
-  props: {
-    description: { default: null },
-    lastUpdated: { default: null },
-    reloadButton: { default: null }
-  },
-  setup(t) {
-    const { t: n, locale: a } = z({ messages: R }), r = t, e = j(() => r.lastUpdated ? a.value : ""), l = re(e), m = j(
-      () => r.lastUpdated ? n("lastUpdated", {
-        date: ce(r.lastUpdated, {
-          locale: l.value,
-          addSuffix: !0
-        })
-      }) : null
-    ), o = F(), _ = K(o);
-    return (d, f) => (u(), M("div", pe, [
-      d.description || i(_)("description") ? (u(), b(i(B), {
-        key: 0,
-        class: "b-header-meta__description",
-        el: "div"
-      }, {
-        default: h(() => [
-          w(d.$slots, "description", {}, () => [
-            U(D(d.description), 1)
-          ], !0)
-        ]),
-        _: 3
-      })) : v("", !0),
-      d.lastUpdated ? (u(), M("div", he, [
-        S(i(B), {
-          class: "b-header-meta__timestamp",
-          el: "div"
-        }, {
-          default: h(() => [
-            U(D(m.value), 1)
-          ]),
-          _: 1
-        }),
-        d.reloadButton ? (u(), b(i(Y), {
-          key: 0,
-          variant: "tertiary",
-          state: d.reloadButton.state,
-          onClick: d.reloadButton.event
-        }, {
-          iconLeft: h(() => [
-            S(i(se), { "aria-hidden": "true" })
-          ]),
-          default: h(() => [
-            U(D(d.reloadButton.title), 1)
-          ]),
-          _: 1
-        }, 8, ["state", "onClick"])) : v("", !0)
-      ])) : v("", !0)
-    ]));
-  }
-}), Pe = /* @__PURE__ */ P(ve, [["__scopeId", "data-v-7ffeebd4"]]);
-export {
-  Pe as H,
-  ze as I
-};
-//# sourceMappingURL=header-meta.yBxBW12f.js.map

package/dist/chunks/list-item.E1o7yuEB.js

@@ -1,128 +0,0 @@
-import { defineComponent as f, computed as b, openBlock as e, createBlock as n, resolveDynamicComponent as B, withCtx as m, renderSlot as r, useSlots as g, createElementBlock as l, createVNode as S, unref as s, normalizeClass as D, createCommentVNode as i, createElementVNode as p, Fragment as $, createTextVNode as I, toDisplayString as h, mergeProps as T } from "vue";
-import { _ as y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { C as E } from "./chevron-right-small.BCinNiMt.js";
-import { B as N } from "./status.H00BAmRx.js";
-import { B as V } from "./tag.Uu-6AQys.js";
-import { B as v } from "./typography.B3J6_tYk.js";
-import { u as x } from "./use-has-slot.CyMiImRQ.js";
-import "../assets/list-item.css";
-const K = {
-  name: "bento-list"
-}, z = /* @__PURE__ */ f({
-  ...K,
-  props: {
-    type: { default: "unordered" }
-  },
-  setup(d) {
-    const c = d, _ = b(() => c.type === "ordered" ? "ol" : "ul");
-    return (a, t) => (e(), n(B(_.value), { class: "b-list" }, {
-      default: m(() => [
-        r(a.$slots, "default", {}, void 0, !0)
-      ]),
-      _: 3
-    }));
-  }
-}), Z = /* @__PURE__ */ y(z, [["__scopeId", "data-v-d608f2b4"]]), F = {
-  key: 0,
-  class: "b-list-item__image"
-}, H = {
-  key: 1,
-  class: "b-list-item__start"
-}, P = { class: "b-list-item__content" }, R = {
-  key: 0,
-  class: "b-list-item__label"
-}, j = { class: "b-list-item__header" }, q = {
-  key: 0,
-  class: "b-list-item__description"
-}, A = {
-  key: 2,
-  class: "b-list-item__end"
-}, G = {
-  name: "bento-list-item"
-}, J = /* @__PURE__ */ f({
-  ...G,
-  props: {
-    label: {},
-    description: {},
-    showStatus: { type: Boolean, default: !1 },
-    statusColor: { default: "blue" },
-    tag: { default: void 0 },
-    withChevron: { type: Boolean, default: !1 },
-    showTopDivider: { type: Boolean, default: !1 },
-    showBottomDivider: { type: Boolean, default: !1 }
-  },
-  emits: ["click"],
-  setup(d, { emit: c }) {
-    const _ = g(), a = x(_), t = d, u = c, k = () => {
-      t.withChevron && u("click");
-    }, C = (o) => {
-      t.withChevron && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), u("click"));
-    }, w = b(() => ({
-      "b-list-item__inner--clickable": t.withChevron,
-      "b-list-item__inner--top-divider": t.showTopDivider,
-      "b-list-item__inner--bottom-divider": t.showBottomDivider
-    }));
-    return (o, L) => (e(), l("li", {
-      class: "b-list-item",
-      onClick: k,
-      onKeydown: C
-    }, [
-      S(s(v), {
-        class: D(["b-list-item__inner", w.value]),
-        el: "div",
-        role: t.withChevron ? "button" : void 0,
-        tabindex: t.withChevron ? 0 : void 0
-      }, {
-        default: m(() => [
-          s(a)("image") ? (e(), l("div", F, [
-            r(o.$slots, "image", {}, void 0, !0)
-          ])) : i("", !0),
-          s(a)("start") ? (e(), l("div", H, [
-            r(o.$slots, "start", {}, void 0, !0)
-          ])) : i("", !0),
-          p("div", P, [
-            s(a)("content") ? (e(), l("div", R, [
-              r(o.$slots, "content", {}, void 0, !0)
-            ])) : (e(), l($, { key: 1 }, [
-              p("div", j, [
-                t.label ? (e(), n(s(v), {
-                  key: 0,
-                  class: "b-list-item__label",
-                  el: "span",
-                  stronger: ""
-                }, {
-                  default: m(() => [
-                    I(h(t.label), 1)
-                  ]),
-                  _: 1
-                })) : i("", !0),
-                t.showStatus ? (e(), n(s(N), {
-                  key: 1,
-                  class: "b-list-item__status",
-                  variant: t.statusColor,
-                  "aria-hidden": "true"
-                }, null, 8, ["variant"])) : i("", !0),
-                t.tag ? (e(), n(s(V), T({ key: 2 }, t.tag, { class: "b-list-item__tag" }), null, 16)) : i("", !0)
-              ]),
-              t.description ? (e(), l("span", q, h(t.description), 1)) : i("", !0)
-            ], 64))
-          ]),
-          s(a)("end") ? (e(), l("div", A, [
-            r(o.$slots, "end", {}, void 0, !0)
-          ])) : i("", !0),
-          t.withChevron ? (e(), n(s(E), {
-            key: 3,
-            class: "b-list-item__chevron",
-            "aria-hidden": "true"
-          })) : i("", !0)
-        ]),
-        _: 3
-      }, 8, ["class", "role", "tabindex"])
-    ], 32));
-  }
-}), tt = /* @__PURE__ */ y(J, [["__scopeId", "data-v-07053e2a"]]);
-export {
-  tt as a,
-  Z as l
-};
-//# sourceMappingURL=list-item.E1o7yuEB.js.map

package/dist/chunks/list-item.E1o7yuEB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-item.E1o7yuEB.js","sources":["../../../vue2/src/components/list/list.vue","../../../vue2/src/components/list/components/list-item/list-item.vue"],"sourcesContent":["<template>\n    <component :is=\"listElement\" class=\"b-list\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import type { BentoListProps } from './list.types';\n\n    const props = withDefaults(defineProps<BentoListProps>(), {\n        type: 'unordered',\n    });\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows.\n     *\n     * @example\n     * import { BentoList, BentoListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              />\n     *              <bento-list-item\n     *                  label=\"Risk configuration\"\n     *                  description=\"Updated yesterday\"\n     *                  :tag=\"{ label: 'Review', variant: 'orange' }\"\n     *              />\n     *          </bento-list>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-list',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li class=\"b-list-item\" @click=\"onItemClick\" @keydown=\"onItemKeydown\">\n        <bento-typography\n            class=\"b-list-item__inner\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            :role=\"props.withChevron ? 'button' : undefined\"\n            :tabindex=\"props.withChevron ? 0 : undefined\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-list-item__image\">\n                <slot name=\"image\" />\n            </div>\n\n            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\">\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography v-if=\"props.label\" class=\"b-list-item__label\" el=\"span\" stronger>\n                            {{ props.label }}\n                        </bento-typography>\n                        <bento-status\n                            v-if=\"props.showStatus\"\n                            class=\"b-list-item__status\"\n                            :variant=\"props.statusColor\"\n                            aria-hidden=\"true\"\n                        />\n                        <bento-tag v-if=\"props.tag\" v-bind=\"props.tag\" class=\"b-list-item__tag\" />\n                    </div>\n                    <span v-if=\"props.description\" class=\"b-list-item__description\">\n                        {{ props.description }}\n                    </span>\n                </template>\n            </div>\n\n            <div v-if=\"hasSlot('end')\" class=\"b-list-item__end\">\n                <slot name=\"end\" />\n            </div>\n\n            <chevron-right-icon v-if=\"props.withChevron\" class=\"b-list-item__chevron\" aria-hidden=\"true\" />\n        </bento-typography>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n    import { BentoStatus } from '@/components/status';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import type { BentoListItemProps } from './list-item.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(defineProps<BentoListItemProps>(), {\n        showStatus: false,\n        statusColor: 'blue',\n        tag: undefined,\n        withChevron: false,\n        showTopDivider: false,\n        showBottomDivider: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when a clickable list item is triggered.\n         */\n        (e: 'click'): void;\n    }>();\n\n    const onItemClick = (): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        emit('click');\n    };\n\n    const onItemKeydown = (event: KeyboardEvent): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            emit('click');\n        }\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-list-item__inner--clickable': props.withChevron,\n        'b-list-item__inner--top-divider': props.showTopDivider,\n        'b-list-item__inner--bottom-divider': props.showBottomDivider,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoListItem` renders an item to be used inside `BentoList`.\n     *\n     * @example\n     * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem, BentoButton, BentoToggle },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              >\n     *                  <template #start>\n     *                      <bento-toggle />\n     *                  </template>\n     *                  <template #end>\n     *                      <bento-button variant=\"secondary\">Edit</bento-button>\n     *                  </template>\n     *              </bento-list-item>\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list-item',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["__default__$1","props","__props","listElement","computed","__default__","slots","useSlots","hasSlot","useHasSlot","emit","__emit","onItemClick","onItemKeydown","event","conditionalClasses"],"mappings":";;;;;;;;AA2CI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;AAnCA,UAAAC,IAAAC,GAIAC,IAAAC,EAAA,MAAAH,EAAA,SAAA,YAAA,OAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;GCqHAI,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAL,IAAAC,GASAQ,IAAAC,GAOAC,IAAA,MAAA;AACI,MAAAX,EAAA,eAGAS,EAAA,OAAA;AAAA,IAAY,GAGhBG,IAAA,CAAAC,MAAA;AACI,MAAAb,EAAA,gBAGAa,EAAA,QAAA,WAAAA,EAAA,QAAA,SACIA,EAAA,eAAA,GACAJ,EAAA,OAAA;AAAA,IACJ,GAGJK,IAAAX,EAAA,OAAA;AAAA,MAA2C,iCAAAH,EAAA;AAAA,MACA,mCAAAA,EAAA;AAAA,MACE,sCAAAA,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/popover.types.DATOPtuh.js

@@ -1,6 +0,0 @@
-import { b as o } from "./popper-container.BH4WxeUj.js";
-const i = { ...o };
-export {
-  i as B
-};
-//# sourceMappingURL=popover.types.DATOPtuh.js.map