@adyen/bento-vue3 1.74.0 → 1.76.0

package/dist/chunks/timeline-item.C8PA_w7m.js

@@ -1,568 +0,0 @@
-import { defineComponent as oe, computed as a, ref as R, toRefs as fe, watch as ve, provide as V, nextTick as pe, resolveComponent as w, createElementBlock as v, openBlock as i, createCommentVNode as c, createElementVNode as y, createBlock as C, withCtx as g, createTextVNode as I, toDisplayString as N, createVNode as M, renderSlot as q, mergeProps as J, inject as Z, onUnmounted as _e, normalizeClass as G, Fragment as H, renderList as be } from "vue";
-import { B as se } from "./button.DhcxX2GJ.js";
-import { B as he } from "./textarea.C1jkfowf.js";
-import { u as le } from "./index.pdBj0KQU.js";
-import { B as ge } from "./button-actions.BQ3AFQqt.js";
-import { _ as P } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as ye } from "./date.DZvVL-uz.js";
-import { B as Ne } from "./link.cwPmWlsk.js";
-import { B as Te } from "./tag.CEmpyuYX.js";
-import { B as we, d as Ee } from "./typography.yBEME_Gu.js";
-import { a as Ie, B as Se, S as Ce } from "./structured-list-item.BTPh7SPj.js";
-/* empty css              */
-import { g as Me } from "./generate-uid.NJ8tVoha.js";
-import { u as ke } from "./use-has-slot.B7eQSabc.js";
-import { r as Le, l as Ae, c as Re, t as j, g as Q } from "./index.BrH1t1iu.js";
-import { c as Oe } from "./index.BxBB1rsx.js";
-import "../assets/timeline-item.css";
-var X = 1e3 * 60, F = 60 * 24, x = F * 30, ee = F * 365;
-function te(e, o) {
-  var l = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  Le(2, arguments);
-  var r = l.locale || Ae;
-  if (!r.formatDistance)
-    throw new RangeError("locale must contain localize.formatDistance property");
-  var T = Re(e, o);
-  if (isNaN(T))
-    throw new RangeError("Invalid time value");
-  var d = Oe(l);
-  d.addSuffix = !!l.addSuffix, d.comparison = T;
-  var s, f;
-  T > 0 ? (s = j(o), f = j(e)) : (s = j(e), f = j(o));
-  var _ = l.roundingMethod == null ? "round" : String(l.roundingMethod), n;
-  if (_ === "floor")
-    n = Math.floor;
-  else if (_ === "ceil")
-    n = Math.ceil;
-  else if (_ === "round")
-    n = Math.round;
-  else
-    throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  var E = f.getTime() - s.getTime(), b = E / X, u = Q(f) - Q(s), h = (E - u) / X, t;
-  if (l.unit == null ? b < 1 ? t = "second" : b < 60 ? t = "minute" : b < F ? t = "hour" : h < x ? t = "day" : h < ee ? t = "month" : t = "year" : t = String(l.unit), t === "second") {
-    var k = n(E / 1e3);
-    return r.formatDistance("xSeconds", k, d);
-  } else if (t === "minute") {
-    var m = n(b);
-    return r.formatDistance("xMinutes", m, d);
-  } else if (t === "hour") {
-    var L = n(b / 60);
-    return r.formatDistance("xHours", L, d);
-  } else if (t === "day") {
-    var $ = n(h / F);
-    return r.formatDistance("xDays", $, d);
-  } else if (t === "month") {
-    var A = n(h / x);
-    return A === 12 && l.unit !== "month" ? r.formatDistance("xYears", 1, d) : r.formatDistance("xMonths", A, d);
-  } else if (t === "year") {
-    var D = n(h / ee);
-    return r.formatDistance("xYears", D, d);
-  }
-  throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
-}
-var O = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(O || {}), $e = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))($e || {}), U = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(U || {}), re = /* @__PURE__ */ ((e) => (e.BLACK = "black", e.BLUE = "blue", e.GREEN = "green", e.GREY = "grey", e.ORANGE = "orange", e.RED = "red", e.YELLOW = "yellow", e))(re || {});
-const de = Symbol("timeline register entry injection key"), ue = Symbol("timeline config obj injection key"), ie = {
-  "en-US": {
-    addNote: "Add note",
-    cancel: "Cancel"
-  },
-  "ja-JP": {
-    addNote: "メモを追加",
-    cancel: "キャンセル"
-  },
-  "pt-BR": {
-    addNote: "Adicionar anotação",
-    cancel: "Cancelar"
-  }
-}, De = oe({
-  i18n: { messages: ie },
-  name: "bento-timeline",
-  components: { BentoButton: se, BentoButtonActions: ge, BentoTextarea: he },
-  props: {
-    /**
-     * If set to true, gives the possibility to manually add notes to the timeline via a textarea
-     */
-    addNote: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Object that determines the max number of items to show without clicking the show more button
-     * and where in the timeline is the show more button placed
-     */
-    showMore: {
-      type: Object,
-      default: null
-    },
-    /**
-     * Object that determines minimum amount of time for the automatic timegap indicator;
-     * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }).
-     * If null, automatic timegap detection will be turned off
-     */
-    timegapLimit: {
-      type: Object,
-      default: null
-    }
-  },
-  emits: ["add-timeline-note"],
-  setup(e, { emit: o }) {
-    const { t: l } = le({ messages: ie }), r = a(() => l("addNote")), T = a(() => l("cancel")), d = R(), s = (p) => {
-      d.value = p;
-    }, f = R(null), _ = R(null), n = R(!1), E = async () => {
-      var p, S;
-      n.value = !n.value, await pe(), n.value ? (p = f.value.$refs.textareaElement) == null || p.focus() : (S = _.value.$el) == null || S.focus();
-    }, b = () => {
-      o("add-timeline-note", {
-        description: d.value,
-        timestamp: { date: /* @__PURE__ */ new Date() },
-        type: "note"
-      }), E();
-    }, u = R([]), h = a(
-      () => e.showMore && u.value.length > e.showMore.limit ? u.value.length - e.showMore.limit : null
-    ), t = R(!1), { timegapLimit: k } = fe(e), m = a(() => Array.from(u.value.keys())), L = a(() => e.showMore ? e.showMore.placement === O.BEFORE_LAST ? [
-      ...m.value.slice(0, e.showMore.limit - 1),
-      m.value[m.value.length - 1]
-    ] : e.showMore.placement === O.AFTER_FIRST ? [m.value[0], ...m.value.slice(-(e.showMore.limit - 1))] : m.value.slice(0, e.showMore.limit) : null), $ = a(() => {
-      if (!e.showMore)
-        return null;
-      switch (e.showMore.placement) {
-        case O.BEFORE_LAST:
-          return e.showMore.limit - 2;
-        case O.AFTER_FIRST:
-          return 0;
-        case O.BOTTOM:
-        default:
-          return e.showMore.limit - 1;
-      }
-    }), A = () => {
-      u.value.sort((p, S) => new Date(S.date).getTime() - new Date(p.date).getTime());
-    }, D = (p) => () => {
-      const S = u.value.indexOf(p);
-      S > -1 && u.value.splice(S, 1);
-    }, B = (p) => (u.value.push(p), { timelineEntries: u, unregisterTimelineEntry: D(p) });
-    ve(
-      () => u.value.length,
-      () => A()
-    );
-    const Y = {
-      showAll: t,
-      showMoreIndex: $,
-      hiddenItems: h,
-      visibleIndexes: L,
-      timegapLimit: k,
-      timelineEntries: u
-    };
-    return V(de, B), V(ue, Y), {
-      addNoteLabel: r,
-      cancelLabel: T,
-      toggleAddNote: E,
-      updateNoteContent: s,
-      addNoteToTimeline: b,
-      showAddNoteTextArea: n,
-      // refs
-      addNoteTextareaRef: f,
-      addNoteButtonRef: _
-    };
-  }
-}), Be = { class: "b-timeline" }, je = {
-  key: 0,
-  class: "b-timeline__add-note-section"
-}, Ue = { key: 1 }, Fe = { class: "b-timeline__items" };
-function Ye(e, o, l, r, T, d) {
-  const s = w("bento-button"), f = w("bento-textarea"), _ = w("bento-button-actions");
-  return i(), v("div", Be, [
-    e.addNote ? (i(), v("div", je, [
-      e.showAddNoteTextArea ? c("", !0) : (i(), C(s, {
-        key: 0,
-        ref: "addNoteButtonRef",
-        variant: "tertiary",
-        onClick: e.toggleAddNote
-      }, {
-        default: g(() => [
-          I(N(e.addNoteLabel), 1)
-        ]),
-        _: 1
-      }, 8, ["onClick"])),
-      e.showAddNoteTextArea ? (i(), v("div", Ue, [
-        M(f, {
-          ref: "addNoteTextareaRef",
-          label: e.addNoteLabel,
-          "character-limit": 150,
-          resizable: "vertical",
-          onInput: e.updateNoteContent
-        }, null, 8, ["label", "onInput"]),
-        M(_, {
-          actions: [
-            { title: e.addNoteLabel, event: e.addNoteToTimeline },
-            { title: e.cancelLabel, event: e.toggleAddNote }
-          ]
-        }, null, 8, ["actions"])
-      ])) : c("", !0)
-    ])) : c("", !0),
-    y("ol", Fe, [
-      q(e.$slots, "default", {}, void 0, !0)
-    ])
-  ]);
-}
-const gt = /* @__PURE__ */ P(De, [["render", Ye], ["__scopeId", "data-v-8dcc5ff3"]]);
-let ne = 0;
-const ze = {
-  beforeCreate() {
-    this.uuid = ne.toString(), ne += 1;
-  }
-}, He = { key: 0 };
-function Ve(e, o, l, r, T, d) {
-  return i(), v("svg", J({ 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"] ? (i(), v("title", He, N(e.$attrs["svg-title"]), 1)) : c("", !0),
-    o[0] || (o[0] = y("path", {
-      fill: "#001222",
-      d: "M10 3.25C11.5188 3.25 12.75 4.48122 12.75 6V10C12.75 11.5188 11.5188 12.75 10 12.75H6C4.48122 12.75 3.25 11.5188 3.25 10V6C3.25 4.48122 4.48122 3.25 6 3.25H10Z"
-    }, null, -1))
-  ], 16);
-}
-const qe = /* @__PURE__ */ P(ze, [["render", Ve]]), ae = {
-  "en-US": {
-    showLess: "Show less",
-    showMore: "Show {items} more",
-    timegap: "{timegap} passed between the timeline events"
-  },
-  "ja-JP": {
-    showLess: "表示内容を減らす"
-  },
-  "pt-BR": {
-    showLess: "Mostrar menos"
-  }
-}, Je = oe({
-  name: "bento-timeline-item",
-  components: {
-    BentoButton: se,
-    BentoDate: ye,
-    BentoLink: Ne,
-    BentoTag: Te,
-    BentoTypography: we,
-    BentoStructuredList: Se,
-    BentoStructuredListItem: Ie,
-    SquareSmallIcon: qe
-  },
-  i18n: { messages: ae },
-  props: {
-    /**
-     * Additional timestamp of the event
-     */
-    additionalTimestamp: {
-      type: Object,
-      default: null
-    },
-    /**
-     * Relevant key-value pair data to display in the event
-     */
-    dataList: {
-      type: Array,
-      default: null
-    },
-    /**
-     * Description of the event
-     */
-    description: {
-      type: String,
-      default: null
-    },
-    /**
-     * Modifier that changes the color of the timeline icon
-     * @values blue, black, green, grey, orange, red, yellow
-     */
-    status: {
-      type: String,
-      default: "black",
-      validator: (e) => Object.values(re).includes(e)
-    },
-    /**
-     * Tag props that will be passed down to inner tag component
-     */
-    tag: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Main timestamp of the event. Used for timegap detection.
-     */
-    timestamp: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * Title of the event
-     */
-    title: {
-      type: [Object, String],
-      default: null
-    },
-    /**
-     * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.
-     * @values milestone, note
-     */
-    type: {
-      type: String,
-      default: "milestone",
-      validator: (e) => ["milestone", "note"].includes(e)
-    },
-    /**
-     * Variant for the timeline item
-     * @values DEFAULT, SUCCESS, CRITICAL
-     *
-     * @deprecated Use "status" prop instead
-     */
-    variant: {
-      type: String,
-      default: null,
-      validator: (e) => Object.values(U).includes(e)
-    }
-  },
-  setup(e, { slots: o }) {
-    const { t: l } = le({ messages: ae }), r = a(() => e.type === "note"), T = a(() => e.variant === U.CRITICAL ? "red" : e.variant === U.SUCCESS ? "green" : e.status);
-    e.variant && Ee(
-      'BentoTimelineItem "variant" property',
-      `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon.
-                    <bento-timeline-item status="red" />`,
-      "2.0.0"
-    );
-    const d = a(() => ({
-      [`b-timeline-item__icon--${T.value}`]: T.value && !r.value
-    })), s = a(() => ({
-      "b-timeline-item--note": r.value
-    }));
-    V(Ce, !0);
-    const f = {
-      title: e.title,
-      date: e.timestamp.date
-    }, _ = Z(de), { timelineEntries: n, unregisterTimelineEntry: E } = _(f);
-    _e(() => E());
-    const { showAll: b, showMoreIndex: u, hiddenItems: h, visibleIndexes: t, timegapLimit: k } = Z(ue), m = a(() => n.value.indexOf(f)), L = a(() => b.value || !t.value), $ = a(
-      () => L.value ? !0 : t.value.includes(m.value)
-    ), A = a(() => typeof e.title == "object"), D = a(() => e.title), B = a(() => {
-      var W;
-      if (!k.value)
-        return null;
-      const z = (W = n.value[m.value - 1]) == null ? void 0 : W.date, me = L.value || t.value.includes(m.value - 1);
-      if (!z || !me)
-        return null;
-      const { date: K } = n.value[m.value], ce = parseInt(
-        te(z, K, { unit: k.value.unit }),
-        10
-      );
-      return k.value.amount < ce ? te(z, K, { roundingMethod: "floor" }) : null;
-    }), Y = a(() => B.value ? l("timegap", { timegap: B.value }) : ""), p = a(() => h.value && u.value === m.value), S = a(() => m.value !== -1 && m.value === n.value.length - 1);
-    return {
-      // Values
-      isNoteType: r,
-      iconConditionalClasses: d,
-      conditionalClasses: s,
-      displayShowMoreButton: p,
-      showAll: b,
-      hiddenItems: h,
-      isVisible: $,
-      isLinkTitle: A,
-      linkTitleProps: D,
-      timegap: B,
-      timegapAriaLabel: Y,
-      isLastItem: S,
-      // Methods
-      generateUid: Me,
-      hasSlot: ke(o),
-      t: l
-    };
-  }
-}), Pe = {
-  key: 0,
-  class: "b-timeline-item__row"
-}, Ke = { class: "b-timeline-item__content" }, We = { class: "b-timeline-item__row" }, Ze = {
-  class: "b-timeline-item__marker",
-  "aria-hidden": "true"
-}, Ge = {
-  key: 0,
-  class: "b-timeline-item__separator",
-  "data-testid": "last-timeline-item-separator"
-}, Qe = { class: "b-timeline-item__content" }, Xe = { key: 1 }, xe = {
-  key: 5,
-  class: "b-timeline-item__data-list"
-}, et = {
-  key: 1,
-  class: "b-timeline-item__row"
-}, tt = { class: "b-timeline-item__content" };
-function it(e, o, l, r, T, d) {
-  const s = w("bento-typography"), f = w("square-small-icon"), _ = w("bento-link"), n = w("bento-date"), E = w("bento-structured-list-item"), b = w("bento-structured-list"), u = w("bento-tag"), h = w("bento-button");
-  return e.isVisible ? (i(), v("li", {
-    key: 0,
-    class: G(["b-timeline-item", e.conditionalClasses])
-  }, [
-    e.timegap ? (i(), v("div", Pe, [
-      o[1] || (o[1] = y("div", {
-        class: "b-timeline-item__marker",
-        "aria-hidden": "true"
-      }, [
-        y("div", { class: "b-timeline-item__icon b-timeline-item__icon--timegap" }),
-        y("div", { class: "b-timeline-item__separator" })
-      ], -1)),
-      y("div", Ke, [
-        M(s, {
-          class: "b-timeline-item__timegap",
-          "aria-label": e.timegapAriaLabel
-        }, {
-          default: g(() => [
-            I(N(e.timegap), 1)
-          ]),
-          _: 1
-        }, 8, ["aria-label"])
-      ])
-    ])) : c("", !0),
-    y("div", We, [
-      y("div", Ze, [
-        M(f, {
-          class: G(["b-timeline-item__icon", e.iconConditionalClasses])
-        }, null, 8, ["class"]),
-        e.isLastItem ? c("", !0) : (i(), v("div", Ge))
-      ]),
-      y("div", Qe, [
-        e.isNoteType ? c("", !0) : (i(), C(s, {
-          key: 0,
-          el: "div",
-          variant: "body",
-          strongest: "",
-          class: "b-timeline-item__title",
-          role: "heading",
-          "aria-level": "2"
-        }, {
-          default: g(() => [
-            e.isLinkTitle ? (i(), C(_, J({ key: 0 }, e.linkTitleProps, { "disable-typography": "" }), {
-              default: g(() => [
-                I(N(e.linkTitleProps.title), 1)
-              ]),
-              _: 1
-            }, 16)) : (i(), v("span", Xe, N(e.title), 1))
-          ]),
-          _: 1
-        })),
-        e.isNoteType && (e.description || e.hasSlot("default")) ? (i(), C(s, {
-          key: 1,
-          el: "div",
-          variant: "body",
-          class: "b-timeline-item__description"
-        }, {
-          default: g(() => [
-            q(e.$slots, "default", {}, () => [
-              I(N(e.description), 1)
-            ], !0)
-          ]),
-          _: 3
-        })) : c("", !0),
-        e.timestamp ? (i(), C(s, {
-          key: 2,
-          class: "b-timeline-item__timestamp",
-          el: "div",
-          variant: "caption"
-        }, {
-          default: g(() => [
-            M(n, {
-              date: e.timestamp.date,
-              format: e.timestamp.format,
-              "disable-typography": ""
-            }, null, 8, ["date", "format"]),
-            I(" " + N(e.timestamp.value), 1)
-          ]),
-          _: 1
-        })) : c("", !0),
-        !e.isNoteType && e.additionalTimestamp ? (i(), C(s, {
-          key: 3,
-          class: "b-timeline-item__timestamp",
-          el: "div",
-          variant: "caption"
-        }, {
-          default: g(() => [
-            M(n, {
-              date: e.additionalTimestamp.date,
-              format: e.additionalTimestamp.format,
-              "disable-typography": ""
-            }, null, 8, ["date", "format"]),
-            I(" " + N(e.additionalTimestamp.value), 1)
-          ]),
-          _: 1
-        })) : c("", !0),
-        !e.isNoteType && (e.description || e.hasSlot("default")) ? (i(), C(s, {
-          key: 4,
-          el: "div",
-          variant: "body",
-          class: "b-timeline-item__description"
-        }, {
-          default: g(() => [
-            q(e.$slots, "default", {}, () => [
-              I(N(e.description), 1)
-            ], !0)
-          ]),
-          _: 3
-        })) : c("", !0),
-        !e.isNoteType && e.dataList ? (i(), v("div", xe, [
-          M(b, null, {
-            default: g(() => [
-              (i(!0), v(H, null, be(e.dataList, (t) => (i(), C(E, {
-                key: e.generateUid(t.label),
-                label: t.label
-              }, {
-                default: g(() => [
-                  M(s, { variant: "caption" }, {
-                    default: g(() => [
-                      I(N(t.value), 1)
-                    ]),
-                    _: 2
-                  }, 1024)
-                ]),
-                _: 2
-              }, 1032, ["label"]))), 128))
-            ]),
-            _: 1
-          })
-        ])) : c("", !0),
-        !e.isNoteType && e.tag ? (i(), C(u, J({ key: 6 }, e.tag, { class: "b-timeline-item__tag" }), null, 16)) : c("", !0)
-      ])
-    ]),
-    e.displayShowMoreButton ? (i(), v("div", et, [
-      o[2] || (o[2] = y("div", {
-        class: "b-timeline-item__marker",
-        "aria-hidden": "true"
-      }, [
-        y("div", { class: "b-timeline-item__separator" })
-      ], -1)),
-      y("div", tt, [
-        M(h, {
-          class: "b-timeline__show-more",
-          variant: "tertiary",
-          onClick: o[0] || (o[0] = (t) => e.showAll = !e.showAll)
-        }, {
-          default: g(() => [
-            e.showAll ? (i(), v(H, { key: 1 }, [
-              I(N(e.t("showLess")), 1)
-            ], 64)) : (i(), v(H, { key: 0 }, [
-              I(N(e.t("showMore", { items: e.hiddenItems })), 1)
-            ], 64))
-          ]),
-          _: 1
-        })
-      ])
-    ])) : c("", !0)
-  ], 2)) : c("", !0);
-}
-const yt = /* @__PURE__ */ P(Je, [["render", it], ["__scopeId", "data-v-d5270159"]]);
-export {
-  O as B,
-  yt as a,
-  $e as b,
-  U as c,
-  re as d,
-  gt as t
-};
-//# sourceMappingURL=timeline-item.C8PA_w7m.js.map