@adyen/bento-vue3 1.88.1 → 1.89.1

package/dist/chunks/{toast.Bbtq3Icj.js → toast.C2oehk9P.js}

@@ -1,26 +1,20 @@
-import { defineComponent as L, openBlock as r, createElementBlock as $, createElementVNode as G, createVNode as b, unref as y, withCtx as I, createTextVNode as H, toDisplayString as R, createBlock as T, createCommentVNode as B, ref as d, computed as _, watch as S, onMounted as J, nextTick as X, normalizeStyle as K, TransitionGroup as Q, Fragment as Z, renderList as F, mergeProps as tt } from "vue";
-import { u as P } from "./use-bento-toast-controller.BFctDoMg.js";
+import { defineComponent as L, openBlock as r, createElementBlock as $, createElementVNode as j, createVNode as y, unref as k, withCtx as I, createTextVNode as H, toDisplayString as R, createBlock as b, createCommentVNode as B, ref as v, computed as _, watch as S, onMounted as G, nextTick as J, normalizeStyle as X, TransitionGroup as K, Fragment as Q, renderList as Z, mergeProps as tt } from "vue";
+import { u as O } from "./use-bento-toast-controller.D_NSnBxi.js";
 import { C as et } from "./cross-small.Bjq2Gqvh.js";
 import { u as st } from "./index.B875RXHM.js";
-import { B as Y } from "./button.C6t9_lzm.js";
+import { B as Y } from "./button.DWF7FSIw.js";
 import { B as at } from "./typography.B3J6_tYk.js";
 import { _ as M } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/toast.css";
-const U = {
-  "en-US": {
-    dismiss: "Dismiss"
-  },
-  "ja-JP": {
-    dismiss: "却下"
-  },
-  "pt-BR": {
-    dismiss: "Descartar"
-  }
+const P = {
+  "en-US": { dismiss: "Dismiss" },
+  "ja-JP": { dismiss: "却下" },
+  "pt-BR": { dismiss: "Descartar" }
 }, ot = { class: "b-toast-item" }, nt = {
   class: "b-toast-item__text",
   role: "status"
 }, it = {
-  i18n: { messages: U }
+  i18n: { messages: P }
 }, rt = /* @__PURE__ */ L({
   ...it,
   __name: "toast-item",
@@ -28,12 +22,12 @@ const U = {
     toast: { type: Object, required: !0 }
   },
   setup(l) {
-    const n = l, { t: u } = st({ messages: U }), a = () => {
+    const n = l, { t: u } = st({ messages: P }), a = () => {
       typeof n.toast.action.handler == "function" && n.toast.action.handler(), n.toast.dismiss();
     };
     return (c, i) => (r(), $("div", ot, [
-      G("output", nt, [
-        b(y(at), {
+      j("output", nt, [
+        y(k(at), {
           title: l.toast.text,
           el: "span",
           variant: "body",
@@ -45,7 +39,7 @@ const U = {
           _: 1
         }, 8, ["title"])
       ]),
-      l.toast.action ? (r(), T(y(Y), {
+      l.toast.action ? (r(), b(k(Y), {
         key: 0,
         class: "b-toast-item__btn",
         variant: "tertiary",
@@ -57,15 +51,15 @@ const U = {
         ]),
         _: 1
       })) : B("", !0),
-      b(y(Y), {
+      y(k(Y), {
         class: "b-toast-item__btn",
         variant: "tertiary",
         "data-testid": "toast-item-close-btn",
         onClick: i[0] || (i[0] = (m) => l.toast.dismiss())
       }, {
         iconLeft: I(() => [
-          b(y(et), {
-            "svg-title": y(u)("dismiss")
+          y(k(et), {
+            "svg-title": k(u)("dismiss")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
@@ -76,47 +70,47 @@ const U = {
   __name: "toast-shadow-stack",
   emits: ["update"],
   setup(l, { emit: n }) {
-    const { stack: u } = P(), a = n, c = d(), i = d(), m = d(), p = d(), h = [i, m, p], v = _(() => u.value.slice(0, 3)), D = async () => {
-      await X();
-      const { top: f } = c.value.getBoundingClientRect(), g = u.value.map((o, k) => {
-        if (k > 2)
+    const { stack: u } = O(), a = n, c = v(), i = v(), m = v(), p = v(), h = [i, m, p], d = _(() => u.value.slice(0, 3)), D = async () => {
+      await J();
+      const { top: f } = c.value.getBoundingClientRect(), T = u.value.map((o, g) => {
+        if (g > 2)
           return { ...o, bottom: 0, height: 0 };
-        const { height: w, top: C } = h[k].value.$el.getBoundingClientRect();
+        const { height: w, top: C } = h[g].value.$el.getBoundingClientRect();
         return { ...o, height: w, bottom: C - f };
       });
-      a("update", g);
+      a("update", T);
     };
-    return S(u, D), J(() => {
+    return S(u, D), G(() => {
       u.value.length > 0 && D();
-    }), (f, g) => (r(), $("div", {
+    }), (f, T) => (r(), $("div", {
       ref_key: "shadowStack",
       ref: c,
       class: "b-toast-shadow-stack"
     }, [
-      v.value[0] ? (r(), T(x, {
+      d.value[0] ? (r(), b(x, {
         key: 0,
         ref_key: "toast0",
         ref: i,
-        toast: v.value[0]
+        toast: d.value[0]
       }, null, 8, ["toast"])) : B("", !0),
-      v.value[1] ? (r(), T(x, {
+      d.value[1] ? (r(), b(x, {
         key: 1,
         ref_key: "toast1",
         ref: m,
-        toast: v.value[1]
+        toast: d.value[1]
       }, null, 8, ["toast"])) : B("", !0),
-      v.value[2] ? (r(), T(x, {
+      d.value[2] ? (r(), b(x, {
         key: 2,
         ref_key: "toast2",
         ref: p,
-        toast: v.value[2]
+        toast: d.value[2]
       }, null, 8, ["toast"])) : B("", !0)
     ], 512));
   }
-}), ut = /* @__PURE__ */ M(lt, [["__scopeId", "data-v-81490a5e"]]), z = 5e3, E = 40, O = 10, ct = /* @__PURE__ */ L({
+}), ut = /* @__PURE__ */ M(lt, [["__scopeId", "data-v-81490a5e"]]), z = 5e3, E = 40, F = 10, ct = /* @__PURE__ */ L({
   __name: "toast",
   setup(l) {
-    const n = d(!1), { stack: u } = P();
+    const n = v(!1), { stack: u } = O();
     S(
       u,
       (t) => {
@@ -124,89 +118,89 @@ const U = {
       },
       { immediate: !0 }
     );
-    const a = d(!1), c = d([]), i = _(() => c.value.length), m = _(() => Math.min(a.value ? 2 : 0, i.value - 1)), p = _(() => {
+    const a = v(!1), c = v([]), i = _(() => c.value.length), m = _(() => Math.min(a.value ? 2 : 0, i.value - 1)), p = _(() => {
       const t = c.value[m.value];
       return t ? t.bottom + t.height : 0;
     }), h = _(() => {
       const t = p.value - E;
-      return c.value.map((e, s) => {
-        const V = s > m.value, A = !a.value && s > 1, q = V ? t + O * (A ? 2 : 1) : e.bottom;
+      return c.value.map((s, e) => {
+        const V = e > m.value, A = !a.value && e > 1, q = V ? t + F * (A ? 2 : 1) : s.bottom;
         return {
-          ...e,
+          ...s,
           styles: {
-            height: `${V ? E : e.height}px`,
+            height: `${V ? E : s.height}px`,
             transform: V ? `translateY(${q * -1}px) scaleX(${A ? "0.8" : "0.9"})` : `translateY(${q * -1}px)`,
-            "z-index": i.value - s
+            "z-index": i.value - e
           },
           // first toast has different animation, and toasts above index 2/3 are not visible so no need for a custom animation
-          dismissTransform: s > 0 && s < (a.value ? 4 : 3) ? `translateY(${(q - e.height) * -1}px) scale(0.5, 0.1)` : null,
-          isFirst: s === 0,
-          isInert: s > (a.value ? 2 : 0)
+          dismissTransform: e > 0 && e < (a.value ? 4 : 3) ? `translateY(${(q - s.height) * -1}px) scale(0.5, 0.1)` : null,
+          isFirst: e === 0,
+          isInert: e > (a.value ? 2 : 0)
         };
       });
-    }), v = (t) => {
+    }), d = (t) => {
       t.dataset.dismissTransform && (t.style.transform = t.dataset.dismissTransform);
     }, D = _(() => {
       let t = 0;
       if (m.value >= 0) {
-        const e = O * Math.min(i.value - 1 - m.value, a.value ? 1 : 2);
-        t = Math.min(p.value + e, document.body.parentElement.clientHeight);
+        const s = F * Math.min(i.value - 1 - m.value, a.value ? 1 : 2);
+        t = Math.min(p.value + s, document.body.parentElement.clientHeight);
       }
       return `${t}px`;
     });
-    let f = null, g = null, o = z;
-    const k = (t, e) => {
-      g = Date.now(), f = setTimeout(() => t.dismiss(), e);
+    let f = null, T = null, o = z;
+    const g = (t, s) => {
+      T = Date.now(), f = setTimeout(() => t.dismiss(), s);
     }, w = (t) => {
-      clearTimeout(f), t ? (o = z, a.value || k(t, o)) : o = 0;
+      clearTimeout(f), t ? (o = z, a.value || g(t, o)) : o = 0;
     };
     S(
       () => h.value[0],
-      (t, e) => {
-        (t == null ? void 0 : t.id) !== (e == null ? void 0 : e.id) && w(t);
+      (t, s) => {
+        t?.id !== s?.id && w(t);
       },
       { immediate: !0 }
     );
     const C = () => {
-      o = o - Date.now() + g, clearTimeout(f);
-    }, W = () => {
-      o > 0 && k(h.value[0], o);
+      o = o - Date.now() + T, clearTimeout(f);
+    }, U = () => {
+      o > 0 && g(h.value[0], o);
     };
     S(a, (t) => {
-      t ? C() : W();
+      t ? C() : U();
     });
-    const N = d(), j = () => setTimeout(() => {
+    const N = v(), W = () => setTimeout(() => {
       a.value = a.value ? N.value.matches(":hover") : !1;
     });
-    return (t, e) => n.value ? (r(), $("div", {
+    return (t, s) => n.value ? (r(), $("div", {
       key: 0,
       ref_key: "root",
       ref: N,
       class: "b-toast",
       "data-testid": "toast",
-      style: K({ height: D.value }),
-      onMouseenter: e[1] || (e[1] = (s) => a.value = !0),
-      onMouseleave: e[2] || (e[2] = (s) => a.value = !1)
+      style: X({ height: D.value }),
+      onMouseenter: s[1] || (s[1] = (e) => a.value = !0),
+      onMouseleave: s[2] || (s[2] = (e) => a.value = !1)
     }, [
-      b(ut, {
-        onUpdate: e[0] || (e[0] = (s) => c.value = s)
+      y(ut, {
+        onUpdate: s[0] || (s[0] = (e) => c.value = e)
       }),
-      b(Q, {
+      y(K, {
         name: "b-toast__queue",
         tag: "div",
         "aria-live": "polite",
         "enter-class": "b-toast__queue--enter",
         "leave-to-class": "b-toast__queue--leave-to",
-        onBeforeLeave: v,
-        onAfterLeave: j
+        onBeforeLeave: d,
+        onAfterLeave: W
       }, {
         default: I(() => [
-          (r(!0), $(Z, null, F(h.value, (s) => (r(), T(x, tt({ ref_for: !0 }, { "data-dismiss-transform": s.dismissTransform }, {
-            key: s.id,
-            toast: s,
-            style: s.styles,
-            class: [{ "b-toast__item--first": s.isFirst }, "b-toast__item"],
-            inert: s.isInert,
+          (r(!0), $(Q, null, Z(h.value, (e) => (r(), b(x, tt({ ref_for: !0 }, { "data-dismiss-transform": e.dismissTransform }, {
+            key: e.id,
+            toast: e,
+            style: e.styles,
+            class: [{ "b-toast__item--first": e.isFirst }, "b-toast__item"],
+            inert: e.isInert,
             "data-testid": "toast-item"
           }), null, 16, ["toast", "style", "class", "inert"]))), 128))
         ]),
@@ -214,8 +208,8 @@ const U = {
       })
     ], 36)) : B("", !0);
   }
-}), gt = /* @__PURE__ */ M(ct, [["__scopeId", "data-v-4487b91a"]]);
+}), Tt = /* @__PURE__ */ M(ct, [["__scopeId", "data-v-4487b91a"]]);
 export {
-  gt as B
+  Tt as B
 };
-//# sourceMappingURL=toast.Bbtq3Icj.js.map
+//# sourceMappingURL=toast.C2oehk9P.js.map

package/dist/chunks/{toast.Bbtq3Icj.js.map → toast.C2oehk9P.js.map}

@@ -1 +1 @@
-{"version":3,"file":"toast.Bbtq3Icj.js","sources":["../../../vue2/src/components/toast/components/toast-item/toast-item.vue","../../../vue2/src/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue","../../../vue2/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 { type 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 ToastShadowStack from './components/toast-shadow-stack/toast-shadow-stack.vue';\n    import ToastItem from './components/toast-item/toast-item.vue';\n    import { useBentoToastController } from '@/composables/use-bento-toast-controller';\n    import type { BentoToastItemWithDimensions } from './components/toast-shadow-stack/toast-shadow-stack.types';\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","props","__props","t","useI18n","onAction","stack","useBentoToastController","emit","__emit","shadowStack","ref","toast0","toast1","toast2","toastRefs","toasts","computed","shareToastsWithDimensions","nextTick","parentTop","toastsWithDimensions","toast","index","height","top","watch","onMounted","TOAST_DISPLAY_DURATION","collapsedToastHeight","stackIndicatorHeight","renderToast","toastStack","hovered","queueSize","lastVisibleToastIndex","lastVisibleToastBottom","queue","translateBaseValue","collapsed","isSmallerStack","translateY","onBeforeToastLeave","el","stackHeight","stackIndicator","dismissTimout","timeoutStart","remainingTimeToDismiss","startTimer","duration","startNewDismissTimer","firstToast","oldFirstToast","pauseDismissTimer","resumeDismissTimer","isHovered","root","checkHover"],"mappings":"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"}
+{"version":3,"file":"toast.C2oehk9P.js","sources":["../../../vue2/src/components/toast/components/toast-item/toast-item.vue","../../../vue2/src/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue","../../../vue2/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 { type 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 ToastShadowStack from './components/toast-shadow-stack/toast-shadow-stack.vue';\n    import ToastItem from './components/toast-item/toast-item.vue';\n    import { useBentoToastController } from '@/composables/use-bento-toast-controller';\n    import type { BentoToastItemWithDimensions } from './components/toast-shadow-stack/toast-shadow-stack.types';\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","props","__props","t","useI18n","onAction","stack","useBentoToastController","emit","__emit","shadowStack","ref","toast0","toast1","toast2","toastRefs","toasts","computed","shareToastsWithDimensions","nextTick","parentTop","toastsWithDimensions","toast","index","height","top","watch","onMounted","TOAST_DISPLAY_DURATION","collapsedToastHeight","stackIndicatorHeight","renderToast","toastStack","hovered","queueSize","lastVisibleToastIndex","lastVisibleToastBottom","queue","translateBaseValue","collapsed","isSmallerStack","translateY","onBeforeToastLeave","el","stackHeight","stackIndicator","dismissTimout","timeoutStart","remainingTimeToDismiss","startTimer","duration","startNewDismissTimer","firstToast","oldFirstToast","pauseDismissTimer","resumeDismissTimer","isHovered","root","checkHover"],"mappings":"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"}

package/dist/chunks/{toggle.BupEBkIG.js → toggle.BQoprdX-.js}

@@ -1,10 +1,10 @@
 import { defineComponent as T, useSlots as w, useAttrs as D, ref as O, computed as d, toRefs as V, watch as $, openBlock as s, createElementBlock as m, normalizeClass as N, withDirectives as U, createElementVNode as p, unref as t, vModelCheckbox as j, createBlock as f, createCommentVNode as u, withCtx as _, renderSlot as v } from "vue";
 import { C as z } from "./checkmark-small.CRuZauJc.js";
 import { B as y } from "./typography.B3J6_tYk.js";
-import { g as H } from "./generate-uid.NJ8tVoha.js";
-import { u as M } from "./use-default-slot-validator.O02rzsob.js";
-import { u as P } from "./use-has-slot.B7eQSabc.js";
-import { g as q } from "./get-slot-text.CQRAP2_q.js";
+import { g as H } from "./generate-uid.DBWe4g6T.js";
+import { u as M } from "./use-default-slot-validator.BzHcrgmy.js";
+import { u as P } from "./use-has-slot.CyMiImRQ.js";
+import { g as q } from "./get-slot-text.8Fbl1GOr.js";
 import { u as G } from "./aria-label.CaUURpnB.js";
 import { _ as J } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/toggle.css";
@@ -140,4 +140,4 @@ export {
   c as a,
   h as b
 };
-//# sourceMappingURL=toggle.BupEBkIG.js.map
+//# sourceMappingURL=toggle.BQoprdX-.js.map

package/dist/chunks/{toggle.BupEBkIG.js.map → toggle.BQoprdX-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"toggle.BupEBkIG.js","sources":["../../../vue2/src/components/toggle/toggle.types.ts","../../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n            <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                el=\"span\"\n                variant=\"body\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, ref, toRefs, useAttrs, useSlots, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/core/utils/ts';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n         */\n        ariaLabel: {\n            type: String,\n            default: undefined,\n        },\n        /**\n         * Disable the toggle (optional)\n         */\n        disabled: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Position of the label relative to the toggle (optional)\n         * @values before, after\n         */\n        labelPosition: {\n            type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n            default: BentoToggleLabelPosition.BEFORE,\n            validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n        },\n        /**\n         * Setting this property to true will set the toggle to read only state.\n         */\n        readonly: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Indicates if the switch is \"on\" or \"off\"\n         */\n        value: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        (e: 'input', value: boolean): void;\n    }>();\n\n    const toggleInput = ref(props.value);\n    const descriptionId: string = generateUid('toggle-description');\n\n    useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n    const labelSlot = computed((): string | null => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n    const ariaLabelAttribute = computed(() => attrs['aria-label'] as string);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: labelSlot,\n    });\n\n    const computedDescription = computed((): string | null => descriptionId ?? null);\n\n    const conditionalClasses = computed((): { [key: string]: boolean } => ({\n        [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === BentoToggleLabelPosition.BEFORE,\n        'b-toggle--disabled': props.disabled,\n        'b-toggle--readonly': props.readonly,\n    }));\n\n    const onChange = (event: Event) => {\n        emit('input', (event.target as HTMLInputElement).checked);\n    };\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (props.readonly) {\n            event.preventDefault();\n        }\n    };\n\n    watch(\n        () => props.value,\n        newValue => {\n            toggleInput.value = newValue;\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-toggle',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","__default__","slots","useSlots","attrs","useAttrs","hasSlot","useHasSlot","props","__props","emit","__emit","toggleInput","ref","descriptionId","generateUid","useDefaultSlotValidator","labelSlot","computed","getSlotText","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;GCyJRE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApHA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAL,CAAA,GAEAM,IAAAC,GA2CAC,IAAAC,GAIAC,IAAAC,EAAAL,EAAA,KAAA,GACAM,IAAAC,EAAA,oBAAA;AAEA,IAAAC,EAAA,gBAAAd,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAe,IAAAC,EAAA,MAAAZ,EAAA,SAAA,IAAAa,EAAAjB,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAkB,IAAAF,EAAA,MAAAd,EAAA,YAAA,CAAA,GACA,EAAA,WAAAiB,EAAA,IAAAC,EAAAd,CAAA,GACAe,IAAAC,EAAA;AAAA,MAAuC,WAAAJ,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,MAEvB,iBAAAJ;AAAA,IACU,CAAA,GAGrBQ,IAAAP,EAAA,MAAAJ,KAAA,IAAA,GAEAY,IAAAR,EAAA,OAAA;AAAA,MAAuE,CAAA,aAAArB,EAAA,WAAA,EAAA,GAAAW,EAAA,kBAAAT,EAAA;AAAA,MACiC,sBAAAS,EAAA;AAAA,MACxE,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGhCmB,IAAA,CAAAC,MAAA;AACI,MAAAlB,EAAA,SAAAkB,EAAA,OAAA,OAAA;AAAA,IAAwD,GAI5DC,IAAA,CAAAD,MAAA;AACI,MAAApB,EAAA,YACIoB,EAAA,eAAA;AAAA,IACJ;AAGJ,WAAAE;AAAA,MAAA,MAAAtB,EAAA;AAAA,MACgB,CAAAuB,MAAA;AAER,QAAAnB,EAAA,QAAAmB;AAAA,MAAoB;AAAA,IACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toggle.BQoprdX-.js","sources":["../../../vue2/src/components/toggle/toggle.types.ts","../../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n            <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                el=\"span\"\n                variant=\"body\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, ref, toRefs, useAttrs, useSlots, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/core/utils/ts';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n         */\n        ariaLabel: {\n            type: String,\n            default: undefined,\n        },\n        /**\n         * Disable the toggle (optional)\n         */\n        disabled: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Position of the label relative to the toggle (optional)\n         * @values before, after\n         */\n        labelPosition: {\n            type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n            default: BentoToggleLabelPosition.BEFORE,\n            validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n        },\n        /**\n         * Setting this property to true will set the toggle to read only state.\n         */\n        readonly: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Indicates if the switch is \"on\" or \"off\"\n         */\n        value: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        (e: 'input', value: boolean): void;\n    }>();\n\n    const toggleInput = ref(props.value);\n    const descriptionId: string = generateUid('toggle-description');\n\n    useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n    const labelSlot = computed((): string | null => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n    const ariaLabelAttribute = computed(() => attrs['aria-label'] as string);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: labelSlot,\n    });\n\n    const computedDescription = computed((): string | null => descriptionId ?? null);\n\n    const conditionalClasses = computed((): { [key: string]: boolean } => ({\n        [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === BentoToggleLabelPosition.BEFORE,\n        'b-toggle--disabled': props.disabled,\n        'b-toggle--readonly': props.readonly,\n    }));\n\n    const onChange = (event: Event) => {\n        emit('input', (event.target as HTMLInputElement).checked);\n    };\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (props.readonly) {\n            event.preventDefault();\n        }\n    };\n\n    watch(\n        () => props.value,\n        newValue => {\n            toggleInput.value = newValue;\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-toggle',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","__default__","slots","useSlots","attrs","useAttrs","hasSlot","useHasSlot","props","__props","emit","__emit","toggleInput","ref","descriptionId","generateUid","useDefaultSlotValidator","labelSlot","computed","getSlotText","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;GCyJRE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApHA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAL,CAAA,GAEAM,IAAAC,GA2CAC,IAAAC,GAIAC,IAAAC,EAAAL,EAAA,KAAA,GACAM,IAAAC,EAAA,oBAAA;AAEA,IAAAC,EAAA,gBAAAd,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAe,IAAAC,EAAA,MAAAZ,EAAA,SAAA,IAAAa,EAAAjB,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAkB,IAAAF,EAAA,MAAAd,EAAA,YAAA,CAAA,GACA,EAAA,WAAAiB,EAAA,IAAAC,EAAAd,CAAA,GACAe,IAAAC,EAAA;AAAA,MAAuC,WAAAJ,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,MAEvB,iBAAAJ;AAAA,IACU,CAAA,GAGrBQ,IAAAP,EAAA,MAAAJ,KAAA,IAAA,GAEAY,IAAAR,EAAA,OAAA;AAAA,MAAuE,CAAA,aAAArB,EAAA,WAAA,EAAA,GAAAW,EAAA,kBAAAT,EAAA;AAAA,MACiC,sBAAAS,EAAA;AAAA,MACxE,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGhCmB,IAAA,CAAAC,MAAA;AACI,MAAAlB,EAAA,SAAAkB,EAAA,OAAA,OAAA;AAAA,IAAwD,GAI5DC,IAAA,CAAAD,MAAA;AACI,MAAApB,EAAA,YACIoB,EAAA,eAAA;AAAA,IACJ;AAGJ,WAAAE;AAAA,MAAA,MAAAtB,EAAA;AAAA,MACgB,CAAAuB,MAAA;AAER,QAAAnB,EAAA,QAAAmB;AAAA,MAAoB;AAAA,IACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/tooltip.CbADa_4p.js

@@ -0,0 +1,199 @@
+import { defineComponent as R, computed as C, openBlock as I, createBlock as _, unref as p, normalizeClass as k, withCtx as T, createVNode as x, createTextVNode as U, toDisplayString as H, nextTick as W, createApp as $, h as q, reactive as L } from "vue";
+import { l as r } from "./events.BQOQSSb7.js";
+import { g as F } from "./generate-uid.DBWe4g6T.js";
+import { c as w, P as G, a as j } from "./popper-container.DMN8n5iC.js";
+import { B as M } from "./typography.B3J6_tYk.js";
+import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/tooltip.css";
+const g = { ...w };
+var z = /* @__PURE__ */ ((t) => (t.HIDDEN = "hidden", t))(z || {}), P = /* @__PURE__ */ ((t) => (t.ESCAPE = "Escape", t.ENTER = "Enter", t.ARROW_LEFT = "ArrowLeft", t.ARROW_UP = "ArrowUp", t.ARROW_RIGHT = "ArrowRight", t.ARROW_DOWN = "ArrowDown", t.PAGE_UP = "PageUp", t.PAGE_DOWN = "PageDown", t.END = "End", t.HOME = "Home", t.TAB = "Tab", t))(P || {});
+const b = { ...w };
+var S = /* @__PURE__ */ ((t) => (t.HIDDEN = "hidden", t))(S || {});
+const Y = {
+  name: "tooltip"
+}, J = /* @__PURE__ */ R({
+  ...Y,
+  props: {
+    /**
+     * The tooltip's id. Necessary for accessibility purposes.
+     */
+    id: { type: String, default: null },
+    /**
+     * Tooltip's target reference to the DOM element or Vue component.
+     * The tooltip will position itself relatively to target element, in the specified position.
+     */
+    targetElement: { type: [Element, Object], required: !0 },
+    /**
+     * Tooltip's position relative to the target element.
+     * Possible values are: 'top', 'bottom', 'left' and 'right'.
+     */
+    position: {
+      type: String,
+      default: b.TOP,
+      validator: (t) => Object.values(b).includes(t)
+    },
+    /**
+     * Tooltip's offset.
+     * If specified, the tooltip will have an offset in pixels between it and the target element
+     * in specified position.
+     */
+    offset: { type: Number, default: 0 },
+    /**
+     * Tooltip's text content.
+     */
+    content: { type: String, required: !0 },
+    /**
+     * Shows / Hides the Tooltip component
+     */
+    isShown: { type: Boolean, default: !1 },
+    /**
+     * Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...].
+     * Useful when not using auto as starting placement.
+     * @see {@link https://floating-ui.com/docs/flip#fallbackplacements}
+     */
+    fallbackPosition: {
+      type: [Array, String],
+      default: () => ["top", "bottom", "right", "left"]
+    },
+    /**
+     * Disables focus-trap for tooltip.
+     * Useful for maintaining focus on the target element.
+     */
+    disabledFocusTrap: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const o = t, n = C(() => ({
+      [`b-tooltip--${S.HIDDEN}`]: !o.isShown
+    }));
+    return (i, E) => (I(), _(p(G), {
+      id: t.id,
+      "aria-role": p(j).TOOLTIP,
+      arrow: { classes: ["b-tooltip__arrow"] },
+      class: k([n.value, "b-tooltip"]),
+      "fallback-position": t.fallbackPosition,
+      "is-hidden": !t.isShown,
+      offset: [0, 4],
+      position: t.position,
+      "target-element": t.targetElement,
+      "disabled-focus-trap": t.disabledFocusTrap
+    }, {
+      default: T(() => [
+        x(p(M), {
+          el: "span",
+          variant: "caption"
+        }, {
+          default: T(() => [
+            U(H(t.content), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["id", "aria-role", "class", "fallback-position", "is-hidden", "position", "target-element", "disabled-focus-trap"]));
+  }
+}), A = /* @__PURE__ */ V(J, [["__scopeId", "data-v-72e03ce3"]]), s = [], O = "aria-describedby", D = F("tooltip");
+let l, e, u = !1;
+const a = L({
+  targetElement: null,
+  content: "START_MESSAGE",
+  id: D,
+  position: void 0,
+  isShown: !1
+}), Q = (t) => {
+  t.setAttribute("tabindex", "0"), a.targetElement = t, e = $({
+    components: { Tooltip: A },
+    setup() {
+      return () => q(A, { ...a }, "");
+    }
+  }), l = document.createElement("div"), l.id = "tooltip-parent", document.body.appendChild(l), e.mount("#tooltip-parent");
+}, X = () => {
+  e.unmount(), document.contains(l) && document.body.removeChild(l), e = void 0;
+}, B = (t) => Object.values(g).includes(t.arg) ? t.arg : g.TOP, m = (t) => s.find(
+  (o) => (
+    // isEqualNode doesn't work correct for svg element, hence the second check here
+    o.target.isEqualNode(t) && o.target === t
+  )
+), N = (t) => {
+  const o = m(t);
+  if (!o || !o.content || !t || !e)
+    return;
+  t && t.setAttribute(O, D);
+  let n = !1;
+  document.querySelectorAll("dialog").forEach((i) => {
+    n = i?.open || n;
+  }), n && (e?._instance?.vnode?.el && t.after(e?._instance?.vnode?.el), n = !1), u = !0, e.content = o.content, e.position = o.position, a.content = o.content, a.position = o.position, W(() => {
+    !u || !e || (e.targetElement = t, e.isShown = !0, a.targetElement = t, a.isShown = !0);
+  });
+}, h = (t) => {
+  e?.$el?.parentElement?.tagName && e.$el.parentElement.tagName !== "BODY" && document.body.appendChild(e.$el), u = !1, e && (e.isShown = !1), a.isShown = !1, t && t.removeAttribute(O);
+}, f = (t, o) => {
+  if (!o.hasOwnProperty("value") || o.value) {
+    s.length === 0 && Q(t);
+    const n = () => N(t), i = () => h(t), E = {
+      target: t,
+      content: o.value,
+      position: B(o),
+      removeListeners: [
+        r(t, "mouseenter", n),
+        r(t, "mouseleave", i),
+        r(t, "focus", () => {
+          t.matches(":focus-visible") && n();
+        }),
+        r(t, "blur", (c) => {
+          c.relatedTarget?.getAttribute("role") !== "tooltip" && i();
+        }),
+        r(t, "keydown", (c) => {
+          c.key === P.ESCAPE && i();
+        })
+      ]
+    };
+    s.push(E);
+  }
+}, d = (t, o) => {
+  const n = m(t);
+  if (n) {
+    if (n?.content !== o.value && (n.content = o.value, e.isShown && e.targetElement.isEqualNode(t) && (n.content ? e.content = o.value : e.isShown = !1, h(t), N(t))), n.position !== o.arg) {
+      const i = B(o);
+      n.position = i, e.position = i;
+    }
+  } else !n && o.value && f(t, o);
+}, v = (t) => {
+  const o = m(t);
+  o && (o.removeListeners.forEach((n) => {
+    n();
+  }), h(), s.splice(s.indexOf(o), 1), s.length === 0 && X());
+}, it = {
+  // Vue 2 Directive hooks
+  bind(t, o) {
+    f(t, o);
+  },
+  update(t, o) {
+    d(t, o);
+  },
+  unbind(t) {
+    v(t);
+  },
+  // Vue 3 Directive hooks
+  beforeMount(t, o) {
+    f(t, o);
+  },
+  mounted(t, o) {
+    d(t, o);
+  },
+  updated(t, o) {
+    d(t, o);
+  },
+  unmounted(t) {
+    v(t);
+  }
+};
+export {
+  b as B,
+  P as E,
+  A as T,
+  S as a,
+  it as b,
+  g as c,
+  z as d
+};
+//# sourceMappingURL=tooltip.CbADa_4p.js.map