@adyen/bento-vue3 1.8.0 → 1.9.0

package/dist/timeline.js

@@ -1,21 +1,21 @@
-import { defineComponent as ie, computed as a, ref as F, toRefs as ve, provide as z, resolveComponent as T, openBlock as t, createElementBlock as f, createBlock as S, withCtx as g, createTextVNode as N, toDisplayString as y, createCommentVNode as _, createVNode as M, createElementVNode as h, renderSlot as ne, mergeProps as H, pushScopeId as oe, popScopeId as ae, inject as P, onUnmounted as pe, normalizeClass as Y, resolveDynamicComponent as he, Fragment as V, renderList as be } from "vue";
-import { a as se } from "./chunks/button.82ed953e.js";
+import { defineComponent as ie, computed as a, ref as F, toRefs as _e, provide as z, resolveComponent as T, openBlock as t, createElementBlock as f, createBlock as S, withCtx as g, createTextVNode as N, toDisplayString as y, createCommentVNode as _, createVNode as M, createElementVNode as h, renderSlot as ne, mergeProps as H, inject as P, onUnmounted as fe, normalizeClass as Y, resolveDynamicComponent as ve, Fragment as V, renderList as pe, pushScopeId as he, popScopeId as be } from "vue";
+import { a as oe } from "./chunks/button.82ed953e.js";
 import { BentoTextarea as ge } from "./textarea.js";
-import { u as le } from "./chunks/i18n.6c402773.js";
+import { u as ae } from "./chunks/i18n.6c402773.js";
 import { BentoButtonActions as ye } from "./button.js";
 import { _ as q } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { B as Ie } from "./chunks/index.0ee895e0.js";
 import { BentoLink as Te } from "./link.js";
 import { BentoTag as Se } from "./tag.js";
 import { B as Ne } from "./chunks/index.75f3672e.js";
-import { B as we, a as Ce, S as Ee } from "./chunks/index.b043371e.js";
-import { C as Me } from "./chunks/checkmark-circle-fill.e6b84561.js";
-import { C as ke } from "./chunks/cross-circle-fill.0feb37b3.js";
+import { B as Ce, a as we, S as Ee } from "./chunks/index.edcaf766.js";
+import { C as Me } from "./chunks/checkmark-circle-fill.c45a999d.js";
+import { C as ke } from "./chunks/cross-circle-fill.1abec1a2.js";
 import { r as Le, e as Ae, t as B, g as Z } from "./chunks/index.f55fdc32.js";
 import { c as $e, a as Oe } from "./chunks/index.86453263.js";
 import { g as De } from "./chunks/unique-id.a2a2b458.js";
 import { u as Re } from "./chunks/use-has-slot.4d98bf29.js";
-import "./assets/index44.css";
+import "./assets/index46.css";
 var Q = 1e3 * 60, U = 60 * 24, W = U * 30, X = U * 365;
 function G(e, p) {
   var s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
@@ -30,39 +30,39 @@ function G(e, p) {
   l.addSuffix = !!s.addSuffix, l.comparison = I;
   var r, u;
   I > 0 ? (r = B(p), u = B(e)) : (r = B(e), u = B(p));
-  var v = s.roundingMethod == null ? "round" : String(s.roundingMethod), d;
+  var v = s.roundingMethod == null ? "round" : String(s.roundingMethod), m;
   if (v === "floor")
-    d = Math.floor;
+    m = Math.floor;
   else if (v === "ceil")
-    d = Math.ceil;
+    m = Math.ceil;
   else if (v === "round")
-    d = Math.round;
+    m = Math.round;
   else
     throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  var i = u.getTime() - r.getTime(), b = i / Q, w = Z(u) - Z(r), c = (i - w) / Q, o;
+  var i = u.getTime() - r.getTime(), b = i / Q, C = Z(u) - Z(r), c = (i - C) / Q, o;
   if (s.unit == null ? b < 1 ? o = "second" : b < 60 ? o = "minute" : b < U ? o = "hour" : c < W ? o = "day" : c < X ? o = "month" : o = "year" : o = String(s.unit), o === "second") {
-    var k = d(i / 1e3);
+    var k = m(i / 1e3);
     return n.formatDistance("xSeconds", k, l);
   } else if (o === "minute") {
-    var L = d(b);
+    var L = m(b);
     return n.formatDistance("xMinutes", L, l);
   } else if (o === "hour") {
-    var A = d(b / 60);
+    var A = m(b / 60);
     return n.formatDistance("xHours", A, l);
   } else if (o === "day") {
-    var R = d(c / U);
+    var R = m(c / U);
     return n.formatDistance("xDays", R, l);
   } else if (o === "month") {
-    var m = d(c / W);
-    return m === 12 && s.unit !== "month" ? n.formatDistance("xYears", 1, l) : n.formatDistance("xMonths", m, l);
+    var d = m(c / W);
+    return d === 12 && s.unit !== "month" ? n.formatDistance("xYears", 1, l) : n.formatDistance("xMonths", d, l);
   } else if (o === "year") {
-    var C = d(c / X);
-    return n.formatDistance("xYears", C, l);
+    var w = m(c / X);
+    return n.formatDistance("xYears", w, l);
   }
   throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
 }
 var D = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(D || {}), Fe = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(Fe || {}), E = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(E || {});
-const re = Symbol("timeline register entry injection key"), de = Symbol("timeline config obj injection key"), x = {
+const se = Symbol("timeline register entry injection key"), le = Symbol("timeline config obj injection key"), x = {
   "en-US": {
     addNote: "Add note",
     cancel: "Cancel"
@@ -70,7 +70,7 @@ const re = Symbol("timeline register entry injection key"), de = Symbol("timelin
 }, Be = ie({
   i18n: { messages: x },
   name: "bento-timeline",
-  components: { BentoButton: se, BentoButtonActions: ye, BentoTextarea: ge },
+  components: { BentoButton: oe, BentoButtonActions: ye, BentoTextarea: ge },
   props: {
     /**
      * If set to true, gives the possibility to manually add notes to the timeline via a textarea
@@ -99,11 +99,11 @@ const re = Symbol("timeline register entry injection key"), de = Symbol("timelin
   },
   emits: ["add-timeline-note"],
   setup(e, { emit: p }) {
-    const { t: s } = le({ messages: x }), n = a(() => s("addNote")), I = a(() => s("cancel")), l = F(), r = (m) => {
-      l.value = m;
+    const { t: s } = ae({ messages: x }), n = a(() => s("addNote")), I = a(() => s("cancel")), l = F(), r = (d) => {
+      l.value = d;
     }, u = F(!1), v = () => {
       u.value = !u.value;
-    }, d = () => {
+    }, m = () => {
       p("add-timeline-note", {
         description: l.value,
         timestamp: { date: /* @__PURE__ */ new Date() },
@@ -111,14 +111,14 @@ const re = Symbol("timeline register entry injection key"), de = Symbol("timelin
       }), v();
     }, i = F([]), b = a(
       () => e.showMore && i.value.length > e.showMore.limit ? i.value.length - e.showMore.limit : null
-    ), w = F(!1), { timegapLimit: c } = ve(e), o = a(() => {
+    ), C = F(!1), { timegapLimit: c } = _e(e), o = a(() => {
       if (!e.showMore)
         return null;
-      const m = Array.from(i.value.keys());
+      const d = Array.from(i.value.keys());
       return e.showMore.placement === D.BEFORE_LAST ? [
-        ...m.slice(0, e.showMore.limit - 1),
-        m[m.length - 1]
-      ] : e.showMore.placement === D.AFTER_FIRST ? [m[0], ...m.slice(-(e.showMore.limit - 1))] : m.slice(0, e.showMore.limit);
+        ...d.slice(0, e.showMore.limit - 1),
+        d[d.length - 1]
+      ] : e.showMore.placement === D.AFTER_FIRST ? [d[0], ...d.slice(-(e.showMore.limit - 1))] : d.slice(0, e.showMore.limit);
     }), k = a(() => {
       if (!e.showMore)
         return null;
@@ -131,25 +131,25 @@ const re = Symbol("timeline register entry injection key"), de = Symbol("timelin
         default:
           return e.showMore.limit - 1;
       }
-    }), L = (m) => () => {
-      var C;
-      i.value = (C = i.value) == null ? void 0 : C.filter(($, O) => O !== m);
-    }, A = ({ title: m, description: C, date: $ }) => {
+    }), L = (d) => () => {
+      var w;
+      i.value = (w = i.value) == null ? void 0 : w.filter(($, O) => O !== d);
+    }, A = ({ title: d, description: w, date: $ }) => {
       const O = i.value.length;
-      return i.value.push({ title: m, description: C, date: $ }), { timelineEntries: i, index: O, unregisterTimelineEntry: L(O) };
+      return i.value.push({ title: d, description: w, date: $ }), { timelineEntries: i, index: O, unregisterTimelineEntry: L(O) };
     }, R = {
-      showAll: w,
+      showAll: C,
       showMoreIndex: k,
       hiddenItems: b,
       visibleIndexes: o,
       timegapLimit: c
     };
-    return z(re, A), z(de, R), {
+    return z(se, A), z(le, R), {
       addNoteLabel: n,
       cancelLabel: I,
       toggleAddNote: v,
       updateNoteContent: r,
-      addNoteToTimeline: d,
+      addNoteToTimeline: m,
       showAddNoteTextArea: u
     };
   }
@@ -198,42 +198,41 @@ const He = {
   beforeCreate() {
     this.uuid = ee.toString(), ee += 1;
   }
-}, qe = (e) => (oe("data-v-f702de38"), e = e(), ae(), e), Je = { key: 0 }, Ke = /* @__PURE__ */ qe(() => /* @__PURE__ */ h("path", {
+}, qe = { key: 0 }, Je = /* @__PURE__ */ h("path", {
   fill: "#00112C",
-  "fill-rule": "evenodd",
-  d: "M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z",
-  "clip-rule": "evenodd"
-}, null, -1));
-function Pe(e, p, s, n, I, l) {
+  d: "M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z"
+}, null, -1);
+function Ke(e, p, s, n, I, l) {
   return t(), f("svg", H({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (t(), f("title", Je, y(e.$attrs["svg-title"]), 1)) : _("", !0),
-    Ke
+    e.$attrs["svg-title"] ? (t(), f("title", qe, y(e.$attrs["svg-title"]), 1)) : _("", !0),
+    Je
   ], 16);
 }
-const Ze = /* @__PURE__ */ q(He, [["render", Pe], ["__scopeId", "data-v-f702de38"]]), te = {
+const Pe = /* @__PURE__ */ q(He, [["render", Ke]]), te = {
   "en-US": {
     timegap: "{timegap} passed between the timeline events",
     showMore: "Show {items} more",
     showLess: "Show less"
   }
-}, Qe = ie({
+}, Ze = ie({
   name: "bento-timeline-item",
   components: {
-    BentoButton: se,
+    BentoButton: oe,
     BentoDate: Ie,
     BentoLink: Te,
     BentoTag: Se,
     BentoTypography: Ne,
-    BentoStructuredList: we,
-    BentoStructuredListItem: Ce,
+    BentoStructuredList: Ce,
+    BentoStructuredListItem: we,
     CrossCircleIcon: ke,
     CheckedCircleIcon: Me,
-    SquareSmallIcon: Ze
+    SquareSmallIcon: Pe
   },
   i18n: { messages: te },
   props: {
@@ -299,7 +298,7 @@ const Ze = /* @__PURE__ */ q(He, [["render", Pe], ["__scopeId", "data-v-f702de38
     }
   },
   setup(e, { slots: p }) {
-    const { t: s } = le({ messages: te }), n = a(() => e.type === "note"), I = a(
+    const { t: s } = ae({ messages: te }), n = a(() => e.type === "note"), I = a(
       () => n.value ? E.DEFAULT : e.variant
     ), l = a(() => ({
       "b-timeline-item__icon--default": e.variant === E.DEFAULT || n.value,
@@ -311,39 +310,39 @@ const Ze = /* @__PURE__ */ q(He, [["render", Pe], ["__scopeId", "data-v-f702de38
       "b-timeline-item--note": n.value
     }));
     z(Ee, !0);
-    const v = P(re), { timelineEntries: d, index: i, unregisterTimelineEntry: b } = v({
+    const v = P(se), { timelineEntries: m, index: i, unregisterTimelineEntry: b } = v({
       title: e.title,
       date: e.timestamp.date
     });
-    pe(() => b());
-    const { showAll: w, showMoreIndex: c, hiddenItems: o, visibleIndexes: k, timegapLimit: L } = P(de), A = a(() => w.value || !k.value), R = a(() => A.value ? !0 : k.value.includes(i)), m = a(() => typeof e.title == "object"), C = a(() => e.title), $ = a(() => {
+    fe(() => b());
+    const { showAll: C, showMoreIndex: c, hiddenItems: o, visibleIndexes: k, timegapLimit: L } = P(le), A = a(() => C.value || !k.value), R = a(() => A.value ? !0 : k.value.includes(i)), d = a(() => typeof e.title == "object"), w = a(() => e.title), $ = a(() => {
       var K;
       if (!L.value)
         return null;
-      const j = (K = d.value[i - 1]) == null ? void 0 : K.date, _e = A.value || k.value.includes(i - 1);
-      if (!j || !_e)
+      const j = (K = m.value[i - 1]) == null ? void 0 : K.date, ue = A.value || k.value.includes(i - 1);
+      if (!j || !ue)
         return null;
-      const { date: J } = d.value[i], fe = parseInt(
+      const { date: J } = m.value[i], ce = parseInt(
         G(j, J, { unit: L.value.unit }),
         10
       );
-      return L.value.amount < fe ? G(j, J, { roundingMethod: "floor" }) : null;
-    }), O = a(() => $.value ? s("timegap", { timegap: $.value }) : ""), ue = a(() => o.value && c.value === i), ce = a(() => i === d.value.length - 1);
+      return L.value.amount < ce ? G(j, J, { roundingMethod: "floor" }) : null;
+    }), O = a(() => $.value ? s("timegap", { timegap: $.value }) : ""), me = a(() => o.value && c.value === i), de = a(() => i === m.value.length - 1);
     return {
       // Values
       isNoteType: n,
       iconConditionalClasses: l,
       titleConditionalClasses: r,
       conditionalClasses: u,
-      displayShowMoreButton: ue,
-      showAll: w,
+      displayShowMoreButton: me,
+      showAll: C,
       hiddenItems: o,
       isVisible: R,
-      isLinkTitle: m,
-      linkTitleProps: C,
+      isLinkTitle: d,
+      linkTitleProps: w,
       timegap: $,
       timegapAriaLabel: O,
-      isLastItem: ce,
+      isLastItem: de,
       computedIconVariant: I,
       // Methods
       generateUid: De,
@@ -352,43 +351,43 @@ const Ze = /* @__PURE__ */ q(He, [["render", Pe], ["__scopeId", "data-v-f702de38
     };
   }
 });
-const me = (e) => (oe("data-v-a49f9329"), e = e(), ae(), e), We = {
+const re = (e) => (he("data-v-a49f9329"), e = e(), be(), e), Qe = {
   key: 0,
   class: "b-timeline-item__row"
-}, Xe = /* @__PURE__ */ me(() => /* @__PURE__ */ h("div", {
+}, We = /* @__PURE__ */ re(() => /* @__PURE__ */ h("div", {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
 }, [
   /* @__PURE__ */ h("div", { class: "b-timeline-item__icon b-timeline-item__icon--timegap" }),
   /* @__PURE__ */ h("div", { class: "b-timeline-item__separator" })
-], -1)), Ge = { class: "b-timeline-item__content" }, xe = { class: "b-timeline-item__row" }, et = {
+], -1)), Xe = { class: "b-timeline-item__content" }, Ge = { class: "b-timeline-item__row" }, xe = {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
-}, tt = {
+}, et = {
   key: 0,
   class: "b-timeline-item__separator",
   "data-testid": "last-timeline-item-separator"
-}, it = { class: "b-timeline-item__content" }, nt = { key: 1 }, ot = {
+}, tt = { class: "b-timeline-item__content" }, it = { key: 1 }, nt = {
   key: 4,
   class: "b-timeline-item__data-list"
-}, at = {
+}, ot = {
   key: 1,
   class: "b-timeline-item__row"
-}, st = /* @__PURE__ */ me(() => /* @__PURE__ */ h("div", {
+}, at = /* @__PURE__ */ re(() => /* @__PURE__ */ h("div", {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
 }, [
   /* @__PURE__ */ h("div", { class: "b-timeline-item__separator" })
-], -1)), lt = { class: "b-timeline-item__content" };
-function rt(e, p, s, n, I, l) {
-  const r = T("bento-typography"), u = T("bento-link"), v = T("bento-date"), d = T("bento-structured-list-item"), i = T("bento-structured-list"), b = T("bento-tag"), w = T("bento-button");
+], -1)), st = { class: "b-timeline-item__content" };
+function lt(e, p, s, n, I, l) {
+  const r = T("bento-typography"), u = T("bento-link"), v = T("bento-date"), m = T("bento-structured-list-item"), i = T("bento-structured-list"), b = T("bento-tag"), C = T("bento-button");
   return e.isVisible ? (t(), f("li", {
     key: 0,
     class: Y(["b-timeline-item", e.conditionalClasses])
   }, [
-    e.timegap ? (t(), f("div", We, [
-      Xe,
-      h("div", Ge, [
+    e.timegap ? (t(), f("div", Qe, [
+      We,
+      h("div", Xe, [
         M(r, {
           class: "b-timeline-item__timegap",
           "aria-label": e.timegapAriaLabel
@@ -400,14 +399,14 @@ function rt(e, p, s, n, I, l) {
         }, 8, ["aria-label"])
       ])
     ])) : _("", !0),
-    h("div", xe, [
-      h("div", et, [
-        (t(), S(he(e.computedIconVariant), {
+    h("div", Ge, [
+      h("div", xe, [
+        (t(), S(ve(e.computedIconVariant), {
           class: Y(["b-timeline-item__icon", e.iconConditionalClasses])
         }, null, 8, ["class"])),
-        e.isLastItem ? _("", !0) : (t(), f("div", tt))
+        e.isLastItem ? _("", !0) : (t(), f("div", et))
       ]),
-      h("div", it, [
+      h("div", tt, [
         e.isNoteType ? _("", !0) : (t(), S(r, {
           key: 0,
           el: "div",
@@ -422,7 +421,7 @@ function rt(e, p, s, n, I, l) {
                 N(y(e.linkTitleProps.title), 1)
               ]),
               _: 1
-            }, 16)) : (t(), f("span", nt, y(e.title), 1))
+            }, 16)) : (t(), f("span", it, y(e.title), 1))
           ]),
           _: 1
         }, 8, ["class"])),
@@ -471,10 +470,10 @@ function rt(e, p, s, n, I, l) {
           ]),
           _: 3
         })) : _("", !0),
-        !e.isNoteType && e.dataList ? (t(), f("div", ot, [
+        !e.isNoteType && e.dataList ? (t(), f("div", nt, [
           M(i, null, {
             default: g(() => [
-              (t(!0), f(V, null, be(e.dataList, (c) => (t(), S(d, {
+              (t(!0), f(V, null, pe(e.dataList, (c) => (t(), S(m, {
                 key: e.generateUid(c.label),
                 label: c.label
               }, {
@@ -495,10 +494,10 @@ function rt(e, p, s, n, I, l) {
         !e.isNoteType && e.tag ? (t(), S(b, H({ key: 5 }, e.tag, { class: "b-timeline-item__tag" }), null, 16)) : _("", !0)
       ])
     ]),
-    e.displayShowMoreButton ? (t(), f("div", at, [
-      st,
-      h("div", lt, [
-        M(w, {
+    e.displayShowMoreButton ? (t(), f("div", ot, [
+      at,
+      h("div", st, [
+        M(C, {
           class: "b-timeline__show-more",
           variant: "tertiary",
           onClick: p[0] || (p[0] = (c) => e.showAll = !e.showAll)
@@ -516,11 +515,11 @@ function rt(e, p, s, n, I, l) {
     ])) : _("", !0)
   ], 2)) : _("", !0);
 }
-const Et = /* @__PURE__ */ q(Qe, [["render", rt], ["__scopeId", "data-v-a49f9329"]]);
+const wt = /* @__PURE__ */ q(Ze, [["render", lt], ["__scopeId", "data-v-a49f9329"]]);
 export {
   Ct as BentoTimeline,
   Fe as BentoTimelineGapUnit,
-  Et as BentoTimelineItem,
+  wt as BentoTimelineItem,
   E as BentoTimelineItemVariant,
   D as BentoTimelineShowMorePlacement
 };