@adyen/bento-vue2 1.22.0 → 1.24.0

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/index.66c8d79f.js";
+import { B as r, a as o } from "./chunks/index.ff09389c.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/summary-grid.js

@@ -4,10 +4,10 @@ import { S as h } from "./chunks/summary-grid.keys.1d1028c2.js";
 import { G as E } from "./chunks/grid-layout.e0025286.js";
 import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoInfoIcon as O } from "./info-icon.js";
-import { B as L, a as g } from "./chunks/index.0c33067d.js";
+import { B as L, a as g } from "./chunks/index.ba6c1040.js";
 import { BentoTag as M, BentoTagVariant as f } from "./tag.js";
-import { C as G } from "./chunks/copy.2d2c6b85.js";
-import "./assets/index42.css";
+import { C as G } from "./chunks/copy.acc9f1b0.js";
+import "./assets/index29.css";
 const P = l({
   name: "bento-summary-grid",
   components: { GridLayout: E },

package/dist/tabs.js

@@ -1,10 +1,10 @@
 import { defineComponent as m, toRefs as C, ref as b, provide as u, computed as w, inject as p, onUnmounted as A, watch as N, nextTick as B } from "vue";
 import { E as k, T as I, a as h } from "./chunks/tabs.keys.358742f2.js";
 import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as R } from "./chunks/index.0c33067d.js";
+import { B as R } from "./chunks/index.ba6c1040.js";
 import { g as D } from "./chunks/unique-id.a2a2b458.js";
-import { F as S } from "./chunks/fixed-scroller.e917ed3f.js";
-import "./assets/index46.css";
+import { F as S } from "./chunks/fixed-scroller.772ad033.js";
+import "./assets/index30.css";
 const K = m({
   props: {
     /**

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as c, computed as o } from "vue";
-import { B as d } from "./chunks/index.0c33067d.js";
+import { B as d } from "./chunks/index.ba6c1040.js";
 import { u as m } from "./chunks/aria-label.ac9651a5.js";
 import { g as s } from "./chunks/get-slot-text.99c3d860.js";
-import { b as _ } from "./chunks/tooltip.a9133b59.js";
+import { b as _ } from "./chunks/tooltip.8e9d733c.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index34.css";
+import "./assets/index31.css";
 var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
 const p = c({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,14 +1,14 @@
 import { defineComponent as K, useAttrs as Q, toRefs as O, ref as d, toRef as X, computed as n, watch as L, nextTick as ee, onMounted as te, onUnmounted as ae } from "vue";
-import { a as le } from "./chunks/button.80c3c527.js";
-import { B as re } from "./chunks/index.0c33067d.js";
+import { a as le } from "./chunks/button.6e6324f0.js";
+import { B as re } from "./chunks/index.ba6c1040.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { g as se } from "./chunks/unique-id.a2a2b458.js";
 import { o as F } from "./chunks/resize.a041304d.js";
 import { u as oe } from "./chunks/aria-label.ac9651a5.js";
 import { u as ne } from "./chunks/i18n.eb5b985b.js";
 import { u as ie } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as ue, F as ce } from "./chunks/error-message.5fdafd8c.js";
-import "./assets/index35.css";
+import { E as ue, F as ce } from "./chunks/error-message.8734e591.js";
+import "./assets/index32.css";
 let H = 0;
 const de = {
   beforeCreate() {

package/dist/timeline.js

@@ -1,19 +1,19 @@
 import { defineComponent as Y, computed as r, ref as N, toRefs as Z, provide as A, inject as D, onUnmounted as G } from "vue";
-import { a as z } from "./chunks/button.80c3c527.js";
+import { a as z } from "./chunks/button.6e6324f0.js";
 import { BentoTextarea as Q } from "./textarea.js";
 import { u as H } from "./chunks/i18n.eb5b985b.js";
-import { B as X } from "./chunks/button-actions.2bf1d9d1.js";
+import { B as X } from "./chunks/button-actions.239456cb.js";
 import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ee } from "./chunks/index.823243d9.js";
-import { B as te } from "./chunks/index.d681cfda.js";
+import { B as ee } from "./chunks/index.03ae22b4.js";
+import { B as te } from "./chunks/index.8e6bc325.js";
 import { BentoTag as ie } from "./tag.js";
-import { B as ae, d as se } from "./chunks/index.0c33067d.js";
-import { B as ne, a as oe, S as re } from "./chunks/index.66c8d79f.js";
+import { B as ae, d as se } from "./chunks/index.ba6c1040.js";
+import { B as ne, a as oe, S as re } from "./chunks/index.ff09389c.js";
 import { g as le } from "./chunks/unique-id.a2a2b458.js";
 import { u as me } from "./chunks/use-has-slot.fbeb19ec.js";
 import { r as ce, e as de, t as w, g as k } from "./chunks/index.f55fdc32.js";
 import { c as ue, a as _e } from "./chunks/index.86453263.js";
-import "./assets/index37.css";
+import "./assets/index33.css";
 var F = 1e3 * 60, M = 60 * 24, U = M * 30, j = M * 365;
 function B(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};

package/dist/toast.js

@@ -1,126 +1,171 @@
-import { defineComponent as d, ref as u, computed as c, onMounted as g, watch as T } from "vue";
-import { u as y } from "./chunks/toastController.fd667b68.js";
-import { I as C } from "./chunks/info-filled.ee9571d9.js";
-import { C as k } from "./chunks/cross-small.e3c016cb.js";
-import { a as x } from "./chunks/button.80c3c527.js";
-import { B as S } from "./chunks/index.0c33067d.js";
-import { u as w } from "./chunks/use-has-slot.fbeb19ec.js";
-import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index38.css";
-const $ = {
+import { defineComponent as $, ref as c, computed as d, watch as k, onMounted as Y, nextTick as q } from "vue";
+import "./chunks/index.4c062058.js";
+import { C as L } from "./chunks/cross-small.e851e0de.js";
+import { u as P } from "./chunks/i18n.eb5b985b.js";
+import { a as N } from "./chunks/button.6e6324f0.js";
+import { B as U } from "./chunks/index.ba6c1040.js";
+import { n as B } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { u as O } from "./chunks/use-bento-toast-controller.7d4436ad.js";
+import "./assets/index34.css";
+const M = {
   "en-US": {
     dismiss: "Dismiss"
   }
-}, B = d({
-  i18n: { messages: $ },
-  name: "toast-item",
-  components: { BentoButton: x, BentoTypography: S, CrossIcon: k, InfoIcon: C },
+}, W = {
+  i18n: { messages: M }
+}, z = /* @__PURE__ */ $({
+  ...W,
+  __name: "toast-item",
   props: {
-    text: {
-      type: String,
-      required: !0
-    },
-    action: {
-      type: Object,
-      default: null
-    }
+    toast: { type: Object, required: !0 }
   },
-  emits: ["click", "dismiss"],
-  setup(a, { slots: t, emit: s }) {
-    const e = () => s("dismiss"), o = () => {
-      a.action.handler(), s("dismiss");
-    };
-    return {
-      // Methods
-      dismissButtonClicked: e,
-      hasSlot: w(t),
-      onActionClicked: o
-    };
+  setup(u) {
+    const t = u, { t: s } = P();
+    return { __sfc: !0, props: t, t: s, onAction: () => {
+      typeof t.toast.action.handler == "function" && t.toast.action.handler(), t.toast.dismiss();
+    }, CrossIcon: L, BentoButton: N, BentoTypography: U };
   }
 });
-var I = function() {
-  var t = this, s = t._self._c;
-  return t._self._setupProxy, s("div", { staticClass: "b-toast-item", attrs: { "data-testid": "toast-item" } }, [s("div", { staticClass: "b-toast-item__container" }, [s("info-icon", { staticClass: "b-toast-item__left-icon b-toast-item__info-icon", attrs: { name: "info", "aria-hidden": "true" } }), s("output", { attrs: { role: "status" } }, [s("bento-typography", { attrs: { el: "span", variant: "body", strongest: "" } }, [t._v(" " + t._s(t.text) + " ")])], 1)], 1), s("div", { staticClass: "b-toast-item__container" }, [t.action ? s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: "tertiary" }, on: { click: t.onActionClicked } }, [t._v(" " + t._s(t.action.text) + " ")]) : t._e(), s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: "tertiary" }, on: { click: t.dismissButtonClicked }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
-    return [s("cross-icon", { attrs: { "svg-title": t.$t("dismiss") } })];
-  }, proxy: !0 }]) })], 1)]);
-}, H = [], D = /* @__PURE__ */ f(
-  B,
-  I,
-  H,
+var V = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { staticClass: "b-toast-item" }, [s("output", { staticClass: "b-toast-item__text", attrs: { role: "status" } }, [s(e.BentoTypography, { attrs: { title: t.toast.text, el: "span", variant: "body", strongest: "" } }, [t._v(" " + t._s(t.toast.text) + " ")])], 1), t.toast.action ? s(e.BentoButton, { staticClass: "b-toast-item__btn", attrs: { variant: "tertiary", "data-testid": "toast-item-action-btn" }, on: { click: e.onAction } }, [t._v(" " + t._s(t.toast.action.text) + " ")]) : t._e(), s(e.BentoButton, { staticClass: "b-toast-item__btn", attrs: { variant: "tertiary", "data-testid": "toast-item-close-btn" }, on: { click: function(o) {
+    return t.toast.dismiss();
+  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [s(e.CrossIcon, { attrs: { "svg-title": e.t("dismiss") } })];
+  }, proxy: !0 }]) })], 1);
+}, j = [], E = /* @__PURE__ */ B(
+  z,
+  V,
+  j,
   !1,
   null,
-  "2eefbdd1",
+  "e4019e01",
   null,
   null
 );
-const O = D.exports, P = 5e3, A = d({
-  name: "bento-toast",
-  components: { ToastItem: O },
-  setup() {
-    const { state: a } = y(), t = u(null), s = u(null), e = c(() => a.queue.slice(-3)), o = () => {
-      clearTimeout(t.value);
-    }, l = (n) => {
-      t.value = setTimeout(() => {
-        o(), n.dismiss();
-      }, P);
-    }, _ = () => {
-      o();
-      const n = e.value.slice(-1)[0];
-      n && l(n);
+const H = E.exports, F = /* @__PURE__ */ $({
+  __name: "toast-shadow-stack",
+  emits: ["update"],
+  setup(u, { emit: t }) {
+    const { stack: s } = O(), e = c(), o = c(), l = c(), m = c(), f = [o, l, m], v = d(() => s.value.slice(0, 3)), r = async () => {
+      await q();
+      const { top: h } = e.value.getBoundingClientRect(), T = s.value.map((b, y) => {
+        if (y > 2)
+          return { ...b, bottom: 0, height: 0 };
+        const { height: p, top: g } = f[y].value.$el.getBoundingClientRect();
+        return { ...b, height: p, bottom: g - h };
+      });
+      t("update", T);
     };
-    g(() => {
-      _();
-    }), T(
-      () => e.value,
-      () => {
-        e.value.length && (o(), _());
-      }
+    return k(s, r), Y(() => {
+      s.value.length > 0 && r();
+    }), { __sfc: !0, stack: s, emit: t, shadowStack: e, toast0: o, toast1: l, toast2: m, toastRefs: f, toasts: v, shareToastsWithDimensions: r, ToastItem: H };
+  }
+});
+var X = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { ref: "shadowStack", staticClass: "b-toast-shadow-stack" }, [e.toasts[0] ? s(e.ToastItem, { ref: "toast0", attrs: { toast: e.toasts[0] } }) : t._e(), e.toasts[1] ? s(e.ToastItem, { ref: "toast1", attrs: { toast: e.toasts[1] } }) : t._e(), e.toasts[2] ? s(e.ToastItem, { ref: "toast2", attrs: { toast: e.toasts[2] } }) : t._e()], 1);
+}, G = [], J = /* @__PURE__ */ B(
+  F,
+  X,
+  G,
+  !1,
+  null,
+  "9e646b8f",
+  null,
+  null
+);
+const K = J.exports, Q = /* @__PURE__ */ $({
+  __name: "toast",
+  setup(u) {
+    const s = c(!1), { stack: e } = O();
+    k(
+      e,
+      (a) => {
+        a.length > 0 && !s.value && (s.value = !0);
+      },
+      { immediate: !0 }
     );
-    const p = c(
-      () => e.value.map((n, i) => {
-        const b = e.value.length - 1;
+    const o = c(!1), l = c([]), m = 40, f = 10, v = d(() => l.value.length), r = d(() => Math.min(o.value ? 2 : 0, v.value - 1)), h = d(() => {
+      const a = l.value[r.value];
+      return a ? a.bottom + a.height : 0;
+    }), T = d(() => {
+      const a = h.value - m;
+      return l.value.map((n, _) => {
+        const S = _ > r.value, R = !o.value && _ > 1, D = S ? a + f * (R ? 2 : 1) : n.bottom;
         return {
-          top: `${10 * i}px`,
-          width: `${100 - 10 * (b - i)}%`
+          ...n,
+          styles: {
+            height: `${S ? m : n.height}px`,
+            transform: S ? `translateY(${D * -1}px) scaleX(${R ? "0.8" : "0.9"})` : `translateY(${D * -1}px)`,
+            "z-index": v.value - _
+          },
+          // first toast has different animation, and toasts above index 2/3 are not visible so no need for a custom animation
+          dismissTransform: _ > 0 && _ < (o.value ? 4 : 3) ? `translateY(${(D - n.height) * -1}px) scale(0.5, 0.1)` : null,
+          isFirst: _ === 0,
+          isInert: _ > (o.value ? 2 : 0)
         };
-      })
-    ), v = c(() => {
-      var r;
-      const n = (r = s.value) == null ? void 0 : r.offsetWidth, i = e.value.length - 1, m = i ? 10 * i : 0;
-      return {
-        bottom: `${n}px`,
-        height: `${m}px`
-      };
+      });
+    }), b = (a) => {
+      a.dataset.dismissTransform && (a.style.transform = a.dataset.dismissTransform);
+    }, y = d(() => {
+      let a = 0;
+      if (r.value >= 0) {
+        const n = f * Math.min(v.value - 1 - r.value, o.value ? 1 : 2);
+        a = Math.min(h.value + n, document.body.parentElement.clientHeight);
+      }
+      return `${a}px`;
     });
-    return {
-      // Values,
-      computedPositioning: p,
-      computedHeight: v,
-      toastsToShow: e,
-      toast: s
+    let p = null, g = null, i = 5e3;
+    const I = (a, n) => {
+      g = Date.now(), p = setTimeout(() => a.dismiss(), n);
+    }, x = (a) => {
+      clearTimeout(p), a ? (i = 5e3, o.value || I(a, i)) : i = 0;
     };
+    k(
+      () => T.value[0],
+      (a, n) => {
+        (a == null ? void 0 : a.id) !== (n == null ? void 0 : n.id) && x(a);
+      },
+      { immediate: !0 }
+    );
+    const A = () => {
+      i = i - Date.now() + g, clearTimeout(p);
+    }, C = () => {
+      i > 0 && I(T.value[0], i);
+    };
+    k(o, (a) => {
+      a ? A() : C();
+    });
+    const w = c();
+    return { __sfc: !0, TOAST_DISPLAY_DURATION: 5e3, renderToast: s, stack: e, hovered: o, toastsWithDimensions: l, collapsedToastHeight: m, stackIndicatorHeight: f, queueSize: v, lastVisibleToastIndex: r, lastVisibleToastBottom: h, queue: T, onBeforeToastLeave: b, stackHeight: y, dismissTimout: p, timeoutStart: g, remainingTimeToDismiss: i, startTimer: I, startNewDismissTimer: x, pauseDismissTimer: A, resumeDismissTimer: C, root: w, checkHover: () => setTimeout(() => {
+      o.value = o.value ? w.value.matches(":hover") : !1;
+    }), ToastShadowStack: K, ToastItem: H };
   }
 });
-var F = function() {
-  var t = this, s = t._self._c;
-  return t._self._setupProxy, t.toastsToShow.length ? s("div", { staticClass: "b-toast", style: t.computedHeight }, [s("transition-group", { staticClass: "b-toast__container", attrs: { name: "b-toast", tag: "ul", "aria-live": "polite", "move-class": "b-toast__container--move", "enter-active-class": "b-toast__container--enter-active", "leave-active-class": "b-toast__container--leave-active", "enter-from-class": "b-toast__container--enter-from", "leave-to-class": "b-toast__container--leave-to" } }, t._l(t.toastsToShow, function(e, o) {
-    return s("li", { key: o, staticClass: "b-toast__item", style: t.computedPositioning[o], attrs: { inert: o !== t.toastsToShow.length - 1 } }, [s("toast-item", { ref: o === t.toastsToShow.length - 1 ? "toast" : null, refInFor: !0, class: o !== t.toastsToShow.length - 1 ? "b-toast--light-background" : null, attrs: { text: e.text, action: e.action }, on: { dismiss: function(l) {
-      return e.dismiss();
-    } } })], 1);
-  }), 0)], 1) : t._e();
-}, R = [], q = /* @__PURE__ */ f(
-  A,
-  F,
-  R,
+var Z = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return e.renderToast ? s("div", { ref: "root", staticClass: "b-toast", style: { height: e.stackHeight }, attrs: { "data-testid": "toast" }, on: { mouseenter: function(o) {
+    e.hovered = !0;
+  }, mouseleave: function(o) {
+    e.hovered = !1;
+  } } }, [s(e.ToastShadowStack, { on: { update: function(o) {
+    e.toastsWithDimensions = o;
+  } } }), s("transition-group", { attrs: { name: "b-toast__queue", tag: "div", "aria-live": "polite", "enter-class": "b-toast__queue--enter", "leave-to-class": "b-toast__queue--leave-to" }, on: { "before-leave": e.onBeforeToastLeave, "after-leave": e.checkHover } }, t._l(e.queue, function(o) {
+    return s(e.ToastItem, t._b({ key: o.id, staticClass: "b-toast__item", class: { "b-toast__item--first": o.isFirst }, style: o.styles, attrs: { toast: o, inert: o.isInert, "data-testid": "toast-item" } }, "toast-item", { "data-dismiss-transform": o.dismissTransform }, !1));
+  }), 1)], 1) : t._e();
+}, tt = [], et = /* @__PURE__ */ B(
+  Q,
+  Z,
+  tt,
   !1,
   null,
-  "680af2e2",
+  "9a3ea236",
   null,
   null
 );
-const G = q.exports;
+const ut = et.exports;
 export {
-  G as BentoToast,
-  y as useBentoToastController
+  ut as BentoToast
 };
 //# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\" data-testid=\"toast-item\">\n        <div class=\"b-toast-item__container\">\n            <info-icon\n                class=\"b-toast-item__left-icon b-toast-item__info-icon\"\n                name=\"info\"\n                aria-hidden=\"true\"\n            ></info-icon>\n            <output role=\"status\">\n                <bento-typography el=\"span\" variant=\"body\" strongest>\n                    {{ text }}\n                </bento-typography>\n            </output>\n        </div>\n        <div class=\"b-toast-item__container\">\n            <bento-button v-if=\"action\" class=\"b-toast-item__right-icon\" variant=\"tertiary\" @click=\"onActionClicked\">\n                {{ action.text }}\n            </bento-button>\n            <bento-button class=\"b-toast-item__right-icon\" variant=\"tertiary\" @click=\"dismissButtonClicked\">\n                <template #iconLeft>\n                    <cross-icon :svg-title=\"$t('dismiss')\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info-filled';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import messages from './messages.json';\n    import { BentoToastItemAction } from './toast-item.types';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    /**\n     * @example\n     * Toast item component, for internal use only.\n     *\n     * import { BentoToastItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToastItem },\n     *     template: `\n     *          <bento-toast-item>\n     *              This is a toast message\n     *              <template #primaryAction>Button text</template>\n     *          </bento-toast-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'toast-item',\n        components: { BentoButton, BentoTypography, CrossIcon, InfoIcon },\n        props: {\n            text: {\n                type: String,\n                required: true,\n            },\n            action: {\n                type: Object as PropType<BentoToastItemAction>,\n                default: null,\n            },\n        },\n        emits: ['click', 'dismiss'],\n        setup(props, { slots, emit }) {\n            const dismissButtonClicked = () => emit('dismiss');\n            const onActionClicked = () => {\n                props.action.handler();\n                emit('dismiss');\n            };\n\n            return {\n                // Methods\n                dismissButtonClicked,\n                hasSlot: useHasSlot(slots),\n                onActionClicked,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div v-if=\"toastsToShow.length\" class=\"b-toast\" :style=\"computedHeight\">\n        <transition-group\n            name=\"b-toast\"\n            tag=\"ul\"\n            class=\"b-toast__container\"\n            aria-live=\"polite\"\n            move-class=\"b-toast__container--move\"\n            enter-active-class=\"b-toast__container--enter-active\"\n            leave-active-class=\"b-toast__container--leave-active\"\n            enter-from-class=\"b-toast__container--enter-from\"\n            leave-to-class=\"b-toast__container--leave-to\"\n        >\n            <li\n                v-for=\"(item, index) in toastsToShow\"\n                :key=\"index\"\n                class=\"b-toast__item\"\n                :style=\"computedPositioning[index]\"\n                :inert=\"index !== toastsToShow.length - 1\"\n            >\n                <toast-item\n                    :ref=\"index === toastsToShow.length - 1 ? 'toast' : null\"\n                    :class=\"index !== toastsToShow.length - 1 ? 'b-toast--light-background' : null\"\n                    :text=\"item.text\"\n                    :action=\"item.action\"\n                    @dismiss=\"item.dismiss()\"\n                />\n            </li>\n        </transition-group>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, ref, watch } from 'vue';\n    import { ToastItem } from './components/toast-item';\n    import { useBentoToastController } from '@/utils/ts/toastController';\n\n    const DURATION = 5000;\n\n    /**\n     * @example\n     * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToast },\n     *     template: `\n     *          // in your project root\n     *          <bento-toast />\n     *      setup() {\n     *          bentoToastController = useBentoToastController();\n     *          onTrigger = () => {\n     *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });\n     *      }\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toast',\n        components: { ToastItem },\n        setup() {\n            const { state } = useBentoToastController();\n            const dismissTimer = ref(null);\n            const toast = ref(null);\n            const toastsToShow = computed(() => state.queue.slice(-3));\n\n            const cancelDismissTimer = () => {\n                clearTimeout(dismissTimer.value);\n            };\n\n            const startTimer = toastToDismiss => {\n                dismissTimer.value = setTimeout(() => {\n                    cancelDismissTimer();\n                    toastToDismiss.dismiss();\n                }, DURATION);\n            };\n\n            const startDismissTimer = () => {\n                cancelDismissTimer();\n\n                const toastToDismiss = toastsToShow.value.slice(-1)[0];\n                if (toastToDismiss) {\n                    startTimer(toastToDismiss);\n                }\n            };\n\n            onMounted(() => {\n                startDismissTimer();\n            });\n\n            watch(\n                () => toastsToShow.value,\n                () => {\n                    if (toastsToShow.value.length) {\n                        cancelDismissTimer();\n                        startDismissTimer();\n                    }\n                }\n            );\n\n            const computedPositioning = computed(() =>\n                toastsToShow.value.map((el, index) => {\n                    const diff = 10;\n                    const width = 100;\n                    const min = 10;\n                    const numberOfElements = toastsToShow.value.length - 1;\n                    return {\n                        top: `${diff * index}px`,\n                        width: `${width - min * (numberOfElements - index)}%`,\n                    };\n                })\n            );\n\n            const computedHeight = computed(() => {\n                // Get shown toast element height (last in the queue)\n                const visibleToastHeight = toast.value?.offsetWidth;\n                // Get number of elements excluding the toast currently displayed\n                const numberOfElements = toastsToShow.value.length - 1;\n                // Set height = number of stacked elements\n                const stackedToastHeight = 10;\n                // Set a stack height only if there's elements present\n                const stackHeight = numberOfElements ? stackedToastHeight * numberOfElements : 0;\n                // Set bottom to be padding + height of the visible toast :)\n                return {\n                    bottom: `${visibleToastHeight}px`,\n                    height: `${stackHeight}px`,\n                };\n            });\n\n            return {\n                // Values,\n                computedPositioning,\n                computedHeight,\n                toastsToShow,\n                toast,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["_sfc_main$1","defineComponent","messages","BentoButton","BentoTypography","CrossIcon","InfoIcon","props","slots","emit","dismissButtonClicked","onActionClicked","useHasSlot","DURATION","_sfc_main","ToastItem","state","useBentoToastController","dismissTimer","ref","toast","toastsToShow","computed","cancelDismissTimer","startTimer","toastToDismiss","startDismissTimer","onMounted","watch","computedPositioning","el","index","numberOfElements","computedHeight","visibleToastHeight","_a","stackHeight"],"mappings":";;;;;;;;;;;;;GAqDAA,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,GAAA,WAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAA,MAAAD,EAAA,SAAA,GACAE,IAAA,MAAA;AACA,MAAAJ,EAAA,OAAA,QAAA,GACAE,EAAA,SAAA;AAAA,IAAA;AAGA,WAAA;AAAA;AAAA,MAAA,sBAAAC;AAAA,MAEA,SAAAE,EAAAJ,CAAA;AAAA,MACA,iBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBC7CAE,IAAA,KAmBAC,IAAAb,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,WAAAc,EAAA;AAAA,EACA,QAAA;AAEA,UAAA,EAAA,OAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,MAAAN,EAAA,MAAA,MAAA,EAAA,CAAA,GAEAO,IAAA,MAAA;AACA,mBAAAL,EAAA,KAAA;AAAA,IAAA,GAGAM,IAAA,CAAAC,MAAA;AACA,MAAAP,EAAA,QAAA,WAAA,MAAA;AACA,QAAAK,EAAA,GACAE,EAAA,QAAA;AAAA,MAAA,GAAAZ,CAAA;AAAA,IACA,GAGAa,IAAA,MAAA;AACA,MAAAH,EAAA;AAEA,YAAAE,IAAAJ,EAAA,MAAA,MAAA,EAAA,EAAA,CAAA;AACA,MAAAI,KACAD,EAAAC,CAAA;AAAA,IACA;AAGA,IAAAE,EAAA,MAAA;AACA,MAAAD,EAAA;AAAA,IAAA,CAAA,GAGAE;AAAA,MAAA,MAAAP,EAAA;AAAA,MACA,MAAA;AAEA,QAAAA,EAAA,MAAA,WACAE,EAAA,GACAG,EAAA;AAAA,MACA;AAAA,IACA;AAGA,UAAAG,IAAAP;AAAA,MAAA,MAAAD,EAAA,MAAA,IAAA,CAAAS,GAAAC,MAAA;AAKA,cAAAC,IAAAX,EAAA,MAAA,SAAA;AACA,eAAA;AAAA,UAAA,KAAA,GAAA,KAAAU;AAAA,UACA,OAAA,GAAA,MAAA,MAAAC,IAAAD;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA,GAGAE,IAAAX,EAAA,MAAA;;AAEA,YAAAY,KAAAC,IAAAf,EAAA,UAAA,gBAAAe,EAAA,aAEAH,IAAAX,EAAA,MAAA,SAAA,GAIAe,IAAAJ,IAFA,KAEAA,IAAA;AAEA,aAAA;AAAA,QAAA,QAAA,GAAAE;AAAA,QACA,QAAA,GAAAE;AAAA,MACA;AAAA,IACA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,qBAAAP;AAAA,MAEA,gBAAAI;AAAA,MACA,cAAAZ;AAAA,MACA,OAAAD;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\">\n        <output class=\"b-toast-item__text\" role=\"status\">\n            <bento-typography :title=\"toast.text\" el=\"span\" variant=\"body\" strongest>\n                {{ toast.text }}\n            </bento-typography>\n        </output>\n        <bento-button\n            v-if=\"toast.action\"\n            class=\"b-toast-item__btn\"\n            variant=\"tertiary\"\n            data-testid=\"toast-item-action-btn\"\n            @click=\"onAction\"\n        >\n            {{ toast.action.text }}\n        </bento-button>\n        <bento-button\n            class=\"b-toast-item__btn\"\n            variant=\"tertiary\"\n            data-testid=\"toast-item-close-btn\"\n            @click=\"toast.dismiss()\"\n        >\n            <template #iconLeft>\n                <cross-icon :svg-title=\"t('dismiss')\" />\n            </template>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import type { BentoToastItem } from '@/composables';\n    import messages from './messages.json';\n\n    const props = defineProps({\n        toast: { type: Object as PropType<BentoToastItem>, required: true },\n    });\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const onAction = () => {\n        if (typeof props.toast.action.handler === 'function') {\n            props.toast.action.handler();\n        }\n        props.toast.dismiss();\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div ref=\"shadowStack\" class=\"b-toast-shadow-stack\">\n        <!--\n            since we only interested in the size of the last 3 toasts and order of the toast items\n            is not guaranteed when we use ref with v-for (more info at the end of this section https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for),\n            toast items would be rendered independently with individual ref references.\n        -->\n        <toast-item v-if=\"toasts[0]\" ref=\"toast0\" :toast=\"toasts[0]\" />\n        <toast-item v-if=\"toasts[1]\" ref=\"toast1\" :toast=\"toasts[1]\" />\n        <toast-item v-if=\"toasts[2]\" ref=\"toast2\" :toast=\"toasts[2]\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    /**\n     * This component will \"shadow-render\" ToastItems positioned relatively to each other,\n     * would grab their positions and size and would emit augmented list of toasts with those\n     * additional details. This would allow us to have perfect control over toasts positioning and animation\n     * in the parent Toast component, where ToastItems would actually be visible.\n     */\n    import { computed, nextTick, onMounted, ref, watch } from 'vue';\n    import { useBentoToastController } from '@/composables';\n    import type { BentoToastItemWithDimensions } from './toast-shadow-stack.types';\n    import ToastItem from '../toast-item/toast-item.vue';\n\n    const { stack } = useBentoToastController();\n\n    const emit = defineEmits<{\n        /**\n         *\n         */\n        (e: 'update', toasts: Array<BentoToastItemWithDimensions>): void;\n    }>();\n\n    const shadowStack = ref<HTMLElement>();\n    const toast0 = ref<InstanceType<typeof ToastItem>>();\n    const toast1 = ref<InstanceType<typeof ToastItem>>();\n    const toast2 = ref<InstanceType<typeof ToastItem>>();\n    const toastRefs = [toast0, toast1, toast2];\n\n    // only get 3 last toast as only they would be rendered on the screen\n    const toasts = computed(() => stack.value.slice(0, 3));\n\n    const shareToastsWithDimensions = async () => {\n        // Wait for all toasts to render, so we would be able to get their ClientRect\n        await nextTick();\n\n        // Parent container \"top\" value should be 0, but can be something else due to CSS. So have to account for it\n        const { top: parentTop } = shadowStack.value.getBoundingClientRect();\n\n        const toastsWithDimensions = stack.value.map((toast, index) => {\n            if (index > 2) {\n                return { ...toast, bottom: 0, height: 0 };\n            }\n            const { height, top } = toastRefs[index].value.$el.getBoundingClientRect();\n            return { ...toast, height, bottom: top - parentTop };\n        });\n        emit('update', toastsWithDimensions);\n    };\n\n    watch(stack, shareToastsWithDimensions);\n\n    onMounted(() => {\n        // Refs would be null until component is mounted, so let's make sure we only do it after that\n        if (stack.value.length > 0) {\n            shareToastsWithDimensions();\n        }\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-shadow-stack.scss\" />\n","<template>\n    <div\n        v-if=\"renderToast\"\n        ref=\"root\"\n        class=\"b-toast\"\n        data-testid=\"toast\"\n        :style=\"{ height: stackHeight }\"\n        @mouseenter=\"hovered = true\"\n        @mouseleave=\"hovered = false\"\n    >\n        <toast-shadow-stack @update=\"toastsWithDimensions = $event\" />\n\n        <transition-group\n            name=\"b-toast__queue\"\n            tag=\"div\"\n            aria-live=\"polite\"\n            enter-class=\"b-toast__queue--enter\"\n            leave-to-class=\"b-toast__queue--leave-to\"\n            @before-leave=\"onBeforeToastLeave\"\n            @after-leave=\"checkHover\"\n        >\n            <toast-item\n                v-for=\"toast in queue\"\n                v-bind=\"{ 'data-dismiss-transform': toast.dismissTransform }\"\n                :key=\"toast.id\"\n                :toast=\"toast\"\n                :style=\"toast.styles\"\n                :class=\"{ 'b-toast__item--first': toast.isFirst }\"\n                :inert=\"toast.isInert\"\n                data-testid=\"toast-item\"\n                class=\"b-toast__item\"\n            />\n        </transition-group>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { useBentoToastController } from '@/composables';\n    import ToastShadowStack from './components/toast-shadow-stack/toast-shadow-stack.vue';\n    import type { BentoToastItemWithDimensions } from './components/toast-shadow-stack/toast-shadow-stack.types';\n    import ToastItem from './components/toast-item/toast-item.vue';\n\n    // By design, top-most toast should be visible for 5 seconds before auto-dismiss\n    const TOAST_DISPLAY_DURATION = 5000;\n\n    // Delay first render of the toast until we actually need it, to skip all the positioning calculation logic\n    // until we actually have anything to render.\n    const renderToast = ref(false);\n    const { stack } = useBentoToastController();\n\n    watch(\n        stack,\n        toastStack => {\n            if (toastStack.length > 0 && !renderToast.value) {\n                renderToast.value = true;\n            }\n        },\n        { immediate: true }\n    );\n\n    const hovered = ref(false);\n    const toastsWithDimensions = ref<Array<BentoToastItemWithDimensions>>([]);\n    // In collapsed mode we need for toast to \"stick out\", but not overflow another toast in the forefront.\n    // Random number that satisfies this condition (single-line toast is roughly 52px height)\n    const collapsedToastHeight = 40;\n    // How much pixels of the stacked toast will be \"sticking out\" from the visible toast\n    const stackIndicatorHeight = 10;\n\n    const queueSize = computed(() => toastsWithDimensions.value.length);\n    const lastVisibleToastIndex = computed(() => Math.min(hovered.value ? 2 : 0, queueSize.value - 1));\n    const lastVisibleToastBottom = computed(() => {\n        const toast = toastsWithDimensions.value[lastVisibleToastIndex.value];\n        return toast ? toast.bottom + toast.height : 0;\n    });\n\n    const queue = computed(() => {\n        const translateBaseValue = lastVisibleToastBottom.value - collapsedToastHeight;\n        return toastsWithDimensions.value.map((toast, index) => {\n            const collapsed = index > lastVisibleToastIndex.value;\n            const isSmallerStack = !hovered.value && index > 1;\n            const translateY = collapsed\n                ? translateBaseValue + stackIndicatorHeight * (isSmallerStack ? 2 : 1)\n                : toast.bottom;\n\n            return {\n                ...toast,\n                styles: {\n                    height: `${collapsed ? collapsedToastHeight : toast.height}px`,\n                    transform: collapsed\n                        ? `translateY(${translateY * -1}px) scaleX(${isSmallerStack ? '0.8' : '0.9'})`\n                        : `translateY(${translateY * -1}px)`,\n                    'z-index': queueSize.value - index,\n                },\n                // first toast has different animation, and toasts above index 2/3 are not visible so no need for a custom animation\n                dismissTransform:\n                    index > 0 && index < (hovered.value ? 4 : 3)\n                        ? `translateY(${(translateY - toast.height) * -1}px) scale(0.5, 0.1)`\n                        : null,\n                isFirst: index === 0,\n                isInert: index > (hovered.value ? 2 : 0),\n            };\n        });\n    });\n\n    const onBeforeToastLeave = (el: HTMLElement) => {\n        // We have to swap transformation on the toast element that is about to be removed\n        // Unfortunately we cannot do it via transition classes as transformation function is\n        // unique per toast, and we cannot use reactivity because it won't be applied for a toast\n        // that is removed. So direct DOM manipulation is the only way it seems.\n        if (el.dataset.dismissTransform) {\n            /* eslint-disable no-param-reassign -- explicitly manipulating with DOM properties, no way around it unfortunately */\n            el.style.transform = el.dataset.dismissTransform;\n        }\n    };\n\n    const stackHeight = computed(() => {\n        // Track stack container height, so that hover over would work without glitches\n        // (when mouse is over space between toasts)\n        let height = 0;\n        if (lastVisibleToastIndex.value >= 0) {\n            const stackIndicator =\n                stackIndicatorHeight *\n                Math.min(queueSize.value - 1 - lastVisibleToastIndex.value, hovered.value ? 1 : 2);\n            height = Math.min(lastVisibleToastBottom.value + stackIndicator, document.body.parentElement.clientHeight);\n        }\n        return `${height}px`;\n    });\n\n    let dismissTimout = null;\n    let timeoutStart = null;\n    let remainingTimeToDismiss = TOAST_DISPLAY_DURATION;\n\n    const startTimer = (toast, duration) => {\n        timeoutStart = Date.now();\n        dismissTimout = setTimeout(() => toast.dismiss(), duration);\n    };\n\n    const startNewDismissTimer = toast => {\n        // stop previous timeouts, if any\n        clearTimeout(dismissTimout);\n        if (toast) {\n            remainingTimeToDismiss = TOAST_DISPLAY_DURATION;\n            if (!hovered.value) {\n                startTimer(toast, remainingTimeToDismiss);\n            }\n        } else {\n            remainingTimeToDismiss = 0;\n        }\n    };\n\n    watch(\n        () => queue.value[0],\n        (firstToast, oldFirstToast) => {\n            if (firstToast?.id === oldFirstToast?.id) {\n                return;\n            }\n            startNewDismissTimer(firstToast);\n        },\n        { immediate: true }\n    );\n\n    const pauseDismissTimer = () => {\n        remainingTimeToDismiss = remainingTimeToDismiss - Date.now() + timeoutStart;\n        clearTimeout(dismissTimout);\n    };\n\n    const resumeDismissTimer = () => {\n        if (remainingTimeToDismiss > 0) {\n            startTimer(queue.value[0], remainingTimeToDismiss);\n        }\n    };\n\n    watch(hovered, isHovered => {\n        if (isHovered) {\n            pauseDismissTimer();\n        } else {\n            resumeDismissTimer();\n        }\n    });\n\n    const root = ref<HTMLElement>();\n    // \"mouseleave\" event would be emitted for the root element when the mouse moves out of the root element,\n    // but browser wouldn't emit this event when root element shrinks to the point when mouse is not over element anymore.\n    // This can happen when user clicks on dismiss button the top-most toast and doesn't move the mouse during animation,\n    // after which browser would think that root element is still hovered. This workaround addresses this particular issue.\n    const checkHover = () =>\n        setTimeout(() => {\n            hovered.value = hovered.value ? root.value.matches(':hover') : false;\n        });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["__default__","messages","t","useI18n","props","stack","useBentoToastController","shadowStack","ref","toast0","toast1","toast2","toastRefs","toasts","computed","shareToastsWithDimensions","nextTick","parentTop","toastsWithDimensions","toast","index","height","top","emit","watch","onMounted","renderToast","toastStack","hovered","collapsedToastHeight","stackIndicatorHeight","queueSize","lastVisibleToastIndex","lastVisibleToastBottom","queue","translateBaseValue","collapsed","isSmallerStack","translateY","onBeforeToastLeave","el","stackHeight","stackIndicator","dismissTimout","timeoutStart","remainingTimeToDismiss","startTimer","duration","startNewDismissTimer","firstToast","oldFirstToast","pauseDismissTimer","resumeDismissTimer","isHovered","root"],"mappings":"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"}

package/dist/toggle.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, ref as p, computed as u, toRefs as I, watch as A } from "vue";
-import { C as B } from "./chunks/checkmark-small.07adbfcb.js";
-import { B as L } from "./chunks/index.0c33067d.js";
+import { C as B } from "./chunks/checkmark-small.520f01b1.js";
+import { B as L } from "./chunks/index.ba6c1040.js";
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
 import { u as F } from "./chunks/use-default-slot-validator.b9bff4c6.js";
 import { u as R } from "./chunks/use-has-slot.fbeb19ec.js";
 import { g } from "./chunks/get-slot-text.99c3d860.js";
 import { u as x } from "./chunks/aria-label.ac9651a5.js";
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index36.css";
+import "./assets/index47.css";
 var f = /* @__PURE__ */ ((t) => (t.LABEL_FIRST = "label-first", t))(f || {}), d = /* @__PURE__ */ ((t) => (t.BEFORE = "before", t.AFTER = "after", t))(d || {});
 const D = k({
   name: "bento-toggle",

package/dist/tutorial.js

@@ -1,14 +1,14 @@
 import { defineComponent as g, ref as d, computed as a, isRef as R, watch as F, nextTick as $ } from "vue";
-import { B as I } from "./chunks/index.929dda57.js";
-import { B as S, a as P } from "./chunks/index.937a82c2.js";
-import { B as k } from "./chunks/index.0c33067d.js";
+import { B as I } from "./chunks/index.87180cdd.js";
+import { B as S, a as P } from "./chunks/index.5d5f2200.js";
+import { B as k } from "./chunks/index.ba6c1040.js";
 import { BentoImage as w } from "./image.js";
 import { u as A } from "./chunks/i18n.eb5b985b.js";
-import { R as N } from "./chunks/refresh.f8e1b23c.js";
+import { R as N } from "./chunks/refresh.71a03998.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as T, h as D, o as M } from "./chunks/index.0c4a8dd9.js";
-import { B as V } from "./chunks/button-actions.2bf1d9d1.js";
-import "./assets/index39.css";
+import { a as T, h as D, o as M } from "./chunks/index.51308a21.js";
+import { B as V } from "./chunks/button-actions.239456cb.js";
+import "./assets/index41.css";
 var E;
 const j = /* @__PURE__ */ g({
   __name: "tutorial-indicator",

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, c as e, b as r, a as y } from "./chunks/index.0c33067d.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/index.ba6c1040.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,