@adyen/bento-vue2 1.60.0 → 1.60.1

package/dist/chunks/toast.B2u2W_TQ.js

@@ -0,0 +1,171 @@
+import { defineComponent as B, ref as c, computed as d, watch as k, onMounted as P, nextTick as Y } from "vue";
+import "./index.Cl4_42j5.js";
+import { C as q } from "./cross-small.CZqsjZDz.js";
+import { u as L } from "./i18n.BQkEbtPM.js";
+import { B as N } from "./button.BuD-IsW5.js";
+import { B as U } from "./typography.J1v_SPG3.js";
+import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as O } from "./use-bento-toast-controller.Cn_2Eogn.js";
+import "../assets/toast.css";
+const M = {
+  "en-US": {
+    dismiss: "Dismiss"
+  },
+  "ja-JP": {
+    dismiss: "却下"
+  },
+  "pt-BR": {
+    dismiss: "Descartar"
+  }
+}, W = {
+  i18n: { messages: M }
+}, z = /* @__PURE__ */ B({
+  ...W,
+  __name: "toast-item",
+  props: {
+    toast: { type: Object, required: !0 }
+  },
+  setup(m) {
+    const t = m, { t: e } = L();
+    return { __sfc: !0, props: t, t: e, onAction: () => {
+      typeof t.toast.action.handler == "function" && t.toast.action.handler(), t.toast.dismiss();
+    }, CrossIcon: q, BentoButton: N, BentoTypography: U };
+  }
+});
+var V = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "b-toast-item" }, [e("output", { staticClass: "b-toast-item__text", attrs: { role: "status" } }, [e(s.BentoTypography, { attrs: { title: t.toast.text, el: "span", variant: "body", strongest: "" } }, [t._v(" " + t._s(t.toast.text) + " ")])], 1), t.toast.action ? e(s.BentoButton, { staticClass: "b-toast-item__btn", attrs: { variant: "tertiary", "data-testid": "toast-item-action-btn" }, on: { click: s.onAction } }, [t._v(" " + t._s(t.toast.action.text) + " ")]) : t._e(), e(s.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 [e(s.CrossIcon, { attrs: { "svg-title": s.t("dismiss") } })];
+  }, proxy: !0 }]) })], 1);
+}, j = [], E = /* @__PURE__ */ $(
+  z,
+  V,
+  j,
+  !1,
+  null,
+  "e4019e01"
+);
+const H = E.exports, F = /* @__PURE__ */ B({
+  __name: "toast-shadow-stack",
+  emits: ["update"],
+  setup(m, { emit: t }) {
+    const { stack: e } = O(), s = c(), o = c(), u = c(), _ = c(), f = [o, u, _], v = d(() => e.value.slice(0, 3)), r = async () => {
+      await Y();
+      const { top: h } = s.value.getBoundingClientRect(), T = e.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);
+    };
+    return k(e, r), P(() => {
+      e.value.length > 0 && r();
+    }), { __sfc: !0, stack: e, emit: t, shadowStack: s, toast0: o, toast1: u, toast2: _, toastRefs: f, toasts: v, shareToastsWithDimensions: r, ToastItem: H };
+  }
+});
+var J = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { ref: "shadowStack", staticClass: "b-toast-shadow-stack" }, [s.toasts[0] ? e(s.ToastItem, { ref: "toast0", attrs: { toast: s.toasts[0] } }) : t._e(), s.toasts[1] ? e(s.ToastItem, { ref: "toast1", attrs: { toast: s.toasts[1] } }) : t._e(), s.toasts[2] ? e(s.ToastItem, { ref: "toast2", attrs: { toast: s.toasts[2] } }) : t._e()], 1);
+}, X = [], G = /* @__PURE__ */ $(
+  F,
+  J,
+  X,
+  !1,
+  null,
+  "77dcc427"
+);
+const K = G.exports, Q = /* @__PURE__ */ B({
+  __name: "toast",
+  setup(m) {
+    const e = c(!1), { stack: s } = O();
+    k(
+      s,
+      (a) => {
+        a.length > 0 && !e.value && (e.value = !0);
+      },
+      { immediate: !0 }
+    );
+    const o = c(!1), u = c([]), _ = 40, f = 10, v = d(() => u.value.length), r = d(() => Math.min(o.value ? 2 : 0, v.value - 1)), h = d(() => {
+      const a = u.value[r.value];
+      return a ? a.bottom + a.height : 0;
+    }), T = d(() => {
+      const a = h.value - _;
+      return u.value.map((n, l) => {
+        const D = l > r.value, R = !o.value && l > 1, S = D ? a + f * (R ? 2 : 1) : n.bottom;
+        return {
+          ...n,
+          styles: {
+            height: `${D ? _ : n.height}px`,
+            transform: D ? `translateY(${S * -1}px) scaleX(${R ? "0.8" : "0.9"})` : `translateY(${S * -1}px)`,
+            "z-index": v.value - l
+          },
+          // first toast has different animation, and toasts above index 2/3 are not visible so no need for a custom animation
+          dismissTransform: l > 0 && l < (o.value ? 4 : 3) ? `translateY(${(S - n.height) * -1}px) scale(0.5, 0.1)` : null,
+          isFirst: l === 0,
+          isInert: l > (o.value ? 2 : 0)
+        };
+      });
+    }), 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`;
+    });
+    let p = null, g = null, i = 5e3;
+    const I = (a, n) => {
+      g = Date.now(), p = setTimeout(() => a.dismiss(), n);
+    }, A = (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) && A(a);
+      },
+      { immediate: !0 }
+    );
+    const C = () => {
+      i = i - Date.now() + g, clearTimeout(p);
+    }, x = () => {
+      i > 0 && I(T.value[0], i);
+    };
+    k(o, (a) => {
+      a ? C() : x();
+    });
+    const w = c();
+    return { __sfc: !0, TOAST_DISPLAY_DURATION: 5e3, renderToast: e, stack: s, hovered: o, toastsWithDimensions: u, collapsedToastHeight: _, stackIndicatorHeight: f, queueSize: v, lastVisibleToastIndex: r, lastVisibleToastBottom: h, queue: T, onBeforeToastLeave: b, stackHeight: y, dismissTimout: p, timeoutStart: g, remainingTimeToDismiss: i, startTimer: I, startNewDismissTimer: A, pauseDismissTimer: C, resumeDismissTimer: x, root: w, checkHover: () => setTimeout(() => {
+      o.value = o.value ? w.value.matches(":hover") : !1;
+    }), ToastShadowStack: K, ToastItem: H };
+  }
+});
+var Z = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return s.renderToast ? e("div", { ref: "root", staticClass: "b-toast", style: { height: s.stackHeight }, attrs: { "data-testid": "toast" }, on: { mouseenter: function(o) {
+    s.hovered = !0;
+  }, mouseleave: function(o) {
+    s.hovered = !1;
+  } } }, [e(s.ToastShadowStack, { on: { update: function(o) {
+    s.toastsWithDimensions = o;
+  } } }), e("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": s.onBeforeToastLeave, "after-leave": s.checkHover } }, t._l(s.queue, function(o) {
+    return e(s.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 = [], st = /* @__PURE__ */ $(
+  Q,
+  Z,
+  tt,
+  !1,
+  null,
+  "9a3ea236"
+);
+const mt = st.exports;
+export {
+  mt as t
+};
+//# sourceMappingURL=toast.B2u2W_TQ.js.map

package/dist/chunks/toast.B2u2W_TQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.B2u2W_TQ.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([\"update\"]);\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":";;;;;;;;;;;;;;;;;;;GAsDIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;iBAbA,EAAA,GAAAC,EAAA,IAAAC,EAAA;kDAEA,MAAA;AACI,MAAA,OAAAC,EAAA,MAAA,OAAA,WAAA,cACIA,EAAA,MAAA,OAAA,QAAA,GAEJA,EAAA,MAAA,QAAA;AAAA,IAAoB;;;;;;;;;;;;;;;;;;;;;;ACxBxB,UAAA,EAAA,OAAAC,EAAA,IAAAC,EAAA,GAIAC,IAAAC,EAAA,GACAC,IAAAD,EAAA,GACAE,IAAAF,EAAA,GACAG,IAAAH,EAAA,GACAI,IAAA,CAAAH,GAAAC,GAAAC,CAAA,GAGAE,IAAAC,EAAA,MAAAT,EAAA,MAAA,MAAA,GAAA,CAAA,CAAA,GAEAU,IAAA,YAAA;AAEI,YAAAC,EAAA;AAGA,YAAA,EAAA,KAAAC,EAAA,IAAAV,EAAA,MAAA,sBAAA,GAEAW,IAAAb,EAAA,MAAA,IAAA,CAAAc,GAAAC,MAAA;AACI,YAAAA,IAAA;AACI,iBAAA,EAAA,GAAAD,GAAA,QAAA,GAAA,QAAA,EAAA;AAEJ,cAAA,EAAA,QAAAE,GAAA,KAAAC,EAAA,IAAAV,EAAAQ,CAAA,EAAA,MAAA,IAAA,sBAAA;AACA,eAAA,EAAA,GAAAD,GAAA,QAAAE,GAAA,QAAAC,IAAAL,EAAA;AAAA,MAAmD,CAAA;AAEvD,MAAAM,EAAA,UAAAL,CAAA;AAAA,IAAmC;AAGvC,WAAAM,EAAAnB,GAAAU,CAAA,GAEAU,EAAA,MAAA;AAEI,MAAApB,EAAA,MAAA,SAAA,KACIU,EAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;ACbJ,UAAAW,IAAAlB,EAAA,EAAA,GACA,EAAA,OAAAH,EAAA,IAAAC,EAAA;AAEA,IAAAkB;AAAA,MAAAnB;AAAA,MACI,CAAAsB,MAAA;AAEI,QAAAA,EAAA,SAAA,KAAA,CAAAD,EAAA,UACIA,EAAA,QAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAE,IAAApB,EAAA,EAAA,GACAU,IAAAV,EAAA,CAAA,CAAA,GAGAqB,IAAA,IAEAC,IAAA,IAEAC,IAAAjB,EAAA,MAAAI,EAAA,MAAA,MAAA,GACAc,IAAAlB,EAAA,MAAA,KAAA,IAAAc,EAAA,QAAA,IAAA,GAAAG,EAAA,QAAA,CAAA,CAAA,GACAE,IAAAnB,EAAA,MAAA;AACI,YAAAK,IAAAD,EAAA,MAAAc,EAAA,KAAA;AACA,aAAAb,IAAAA,EAAA,SAAAA,EAAA,SAAA;AAAA,IAA6C,CAAA,GAGjDe,IAAApB,EAAA,MAAA;AACI,YAAAqB,IAAAF,EAAA,QAAAJ;AACA,aAAAX,EAAA,MAAA,IAAA,CAAAC,GAAAC,MAAA;AACI,cAAAgB,IAAAhB,IAAAY,EAAA,OACAK,IAAA,CAAAT,EAAA,SAAAR,IAAA,GACAkB,IAAAF,IAAAD,IAAAL,KAAAO,IAAA,IAAA,KAAAlB,EAAA;AAIA,eAAA;AAAA,UAAO,GAAAA;AAAA,UACA,QAAA;AAAA,YACK,QAAA,GAAAiB,IAAAP,IAAAV,EAAA,MAAA;AAAA,YACsD,WAAAiB,IAAA,cAAAE,IAAA,EAAA,cAAAD,IAAA,QAAA,KAAA,MAAA,cAAAC,IAAA,EAAA;AAAA,YAGvB,WAAAP,EAAA,QAAAX;AAAA,UACN;AAAA;AAAA,UACjC,kBAAAA,IAAA,KAAAA,KAAAQ,EAAA,QAAA,IAAA,KAAA,eAAAU,IAAAnB,EAAA,UAAA,EAAA,wBAAA;AAAA,UAKU,SAAAC,MAAA;AAAA,UACS,SAAAA,KAAAQ,EAAA,QAAA,IAAA;AAAA,QACmB;AAAA,MAC1C,CAAA;AAAA,IACH,CAAA,GAGLW,IAAA,CAAAC,MAAA;AAKI,MAAAA,EAAA,QAAA,qBAEIA,EAAA,MAAA,YAAAA,EAAA,QAAA;AAAA,IACJ,GAGJC,IAAA3B,EAAA,MAAA;AAGI,UAAAO,IAAA;AACA,UAAAW,EAAA,SAAA,GAAA;AACI,cAAAU,IAAAZ,IAAA,KAAA,IAAAC,EAAA,QAAA,IAAAC,EAAA,OAAAJ,EAAA,QAAA,IAAA,CAAA;AAGA,QAAAP,IAAA,KAAA,IAAAY,EAAA,QAAAS,GAAA,SAAA,KAAA,cAAA,YAAA;AAAA,MAAyG;AAE7G,aAAA,GAAArB,CAAA;AAAA,IAAgB,CAAA;AAGpB,QAAAsB,IAAA,MACAC,IAAA,MACAC,IAAA;AAEA,UAAAC,IAAA,CAAA3B,GAAA4B,MAAA;AACI,MAAAH,IAAA,KAAA,IAAA,GACAD,IAAA,WAAA,MAAAxB,EAAA,QAAA,GAAA4B,CAAA;AAAA,IAA0D,GAG9DC,IAAA,CAAA7B,MAAA;AAEI,mBAAAwB,CAAA,GACAxB,KACI0B,IAAA,KACAjB,EAAA,SACIkB,EAAA3B,GAAA0B,CAAA,KAGJA,IAAA;AAAA,IACJ;AAGJ,IAAArB;AAAA,MAAA,MAAAU,EAAA,MAAA,CAAA;AAAA,MACuB,CAAAe,GAAAC,MAAA;AAEf,SAAAD,KAAA,gBAAAA,EAAA,SAAAC,KAAA,gBAAAA,EAAA,OAGAF,EAAAC,CAAA;AAAA,MAA+B;AAAA,MACnC,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAE,IAAA,MAAA;AACI,MAAAN,IAAAA,IAAA,KAAA,IAAA,IAAAD,GACA,aAAAD,CAAA;AAAA,IAA0B,GAG9BS,IAAA,MAAA;AACI,MAAAP,IAAA,KACIC,EAAAZ,EAAA,MAAA,CAAA,GAAAW,CAAA;AAAA,IACJ;AAGJ,IAAArB,EAAAI,GAAA,CAAAyB,MAAA;AACI,MAAAA,IACIF,EAAA,IAEAC,EAAA;AAAA,IACJ,CAAA;AAGJ,UAAAE,IAAA9C,EAAA;kcAKA,MAAA,WAAA,MAAA;AAEQ,MAAAoB,EAAA,QAAAA,EAAA,QAAA0B,EAAA,MAAA,QAAA,QAAA,IAAA;AAAA,IAA+D,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/toggle-button.ChDbeBZ8.js

@@ -0,0 +1,83 @@
+import { defineComponent as u, computed as d, useSlots as c } from "vue";
+import { B as a } from "./button.BuD-IsW5.js";
+import "./index.Cl4_42j5.js";
+import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/toggle-button.css";
+const g = {}, f = /* @__PURE__ */ u({
+  ...g,
+  __name: "toggle-button",
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: {
+      type: a.props.condensed.type,
+      default: !1
+    },
+    /**
+     * Disables button functonality
+     */
+    disabled: {
+      type: a.props.disabled.type,
+      default: !1
+    },
+    /**
+     * Sets color set to inverse
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
+    variant: {
+      type: a.props.variant.type,
+      default: "primary",
+      validator: a.props.variant.validator
+    },
+    /**
+     * The state of the button whether it is toggled or not.
+     */
+    toggled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click", "update:toggled"],
+  setup(r, { emit: t }) {
+    const e = r, o = d(
+      () => e.variant === "tertiary" ? "tertiary-with-background" : e.variant
+    ), s = d(() => ({
+      "b-toggle-button--condensed": e == null ? void 0 : e.condensed,
+      [`b-toggle-button--${o.value}-toggled`]: e.toggled,
+      "b-toggle-button--inverse": e.inverse
+    })), n = (l) => {
+      l.stopPropagation(), e != null && e.disabled || (t("click", l), t("update:toggled", !e.toggled));
+    }, i = c();
+    return { __sfc: !0, props: e, emit: t, computedVariant: o, conditionalClasses: s, onClick: n, slots: i, getSlotKeyIfVue3: (l) => ({}), BentoButton: a };
+  }
+});
+var _ = function() {
+  var t = this, e = t._self._c, o = t._self._setupProxy;
+  return e(o.BentoButton, t._b({ staticClass: "b-toggle-button", class: o.conditionalClasses, attrs: { "aria-expanded": `${t.toggled}`, "aria-pressed": `${t.toggled}`, condensed: t.condensed, disabled: t.disabled, inverse: t.inverse, variant: o.computedVariant }, on: { "!click": function(s) {
+    return s.stopPropagation(), o.onClick.apply(null, arguments);
+  } }, scopedSlots: t._u([t._l(o.slots, function(s, n) {
+    return { key: n, fn: function() {
+      return [t._t(n, null, null, o.getSlotKeyIfVue3(n))];
+    }, proxy: !0 };
+  })], null, !0) }, "bento-button", t.$attrs, !1));
+}, m = [], b = /* @__PURE__ */ p(
+  f,
+  _,
+  m,
+  !1,
+  null,
+  "3282eb05"
+);
+const x = b.exports;
+export {
+  x as B
+};
+//# sourceMappingURL=toggle-button.ChDbeBZ8.js.map

package/dist/chunks/toggle-button.ChDbeBZ8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.ChDbeBZ8.js","sources":["../../src/components/button/components/toggle-button/toggle-button.vue"],"sourcesContent":["<template>\n    <bento-button\n        class=\"b-toggle-button\"\n        v-bind=\"$attrs\"\n        :aria-expanded=\"`${toggled}`\"\n        :aria-pressed=\"`${toggled}`\"\n        :condensed=\"condensed\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        :variant=\"computedVariant\"\n        @click.capture.stop=\"onClick\"\n    >\n        <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]>\n            <slot :name=\"innerSlot\" v-bind=\"getSlotKeyIfVue3(innerSlot)\" />\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import BentoButton from '@/components/button/button.vue';\n    import { BentoButtonVariant } from '@/core/components/button/button.types';\n    import { isVue3 } from 'vue-demi';\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n\n        /**\n         * The state of the button whether it is toggled or not.\n         */\n        toggled: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"click\", \"update:toggled\"]);\n\n    const computedVariant = computed(\n        () => (props.variant === 'tertiary' ? 'tertiary-with-background' : props.variant) as BentoButtonVariant\n    );\n\n    const conditionalClasses = computed(() => ({\n        [`b-toggle-button--condensed`]: props?.condensed,\n        [`b-toggle-button--${computedVariant.value}-toggled`]: props.toggled,\n        [`b-toggle-button--inverse`]: props.inverse,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n        if (!props?.disabled) {\n            emit('click', e);\n            emit('update:toggled', !props.toggled);\n        }\n    };\n\n    const slots = useSlots();\n    // If we don't provide a key to `slot` in vue 3, we will get type errors\n    const getSlotKeyIfVue3 = (slotName: string | number) => (isVue3 ? { key: slotName } : {});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Toggle button is used to switch between two states (example: menu shown, menu hidden).\n     * It functions as a regular button but retains its state to indicate whether the associated menu or element is active or inactive.\n     *\n     * @example\n     * import { BentoToggleButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToggleButton },\n     *     template: `\n     *          <bento-toggle-button state=\"toggled\" variant=\"secondary\">\n     *              Button that can be toggled\n     *          </bento-toggle-button>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle-button.scss\" />\n"],"names":["__default__","computedVariant","computed","props","conditionalClasses","onClick","e","emit","slots","useSlots","slotName"],"mappings":";;;;;AAgHI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzCAC,IAAAC;AAAA,MAAwB,MAAAC,EAAA,YAAA,aAAA,6BAAAA,EAAA;AAAA,IACqD,GAG7EC,IAAAF,EAAA,OAAA;AAAA,MAA2C,8BAAAC,KAAA,gBAAAA,EAAA;AAAA,MACA,CAAA,oBAAAF,EAAA,KAAA,UAAA,GAAAE,EAAA;AAAA,MACsB,4BAAAA,EAAA;AAAA,IACzB,EAAA,GAGxCE,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GACAH,KAAA,QAAAA,EAAA,aACII,EAAA,SAAAD,CAAA,GACAC,EAAA,kBAAA,CAAAJ,EAAA,OAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA;8HAEA,CAAAC,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/toggle.Q52IIKfi.js

@@ -0,0 +1,121 @@
+import { defineComponent as k, ref as p, computed as u, toRefs as I, watch as A } from "vue";
+import { C as B } from "./checkmark-small.C8T8ISN6.js";
+import { B as L } from "./typography.J1v_SPG3.js";
+import { g as E } from "./generate-uid.NJ8tVoha.js";
+import { u as F } from "./use-default-slot-validator.BDn0wkYP.js";
+import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { g } from "./get-slot-text.BQS5Olxm.js";
+import { u as x } from "./aria-label.CaUURpnB.js";
+import { n as T } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/toggle.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",
+  components: { BentoTypography: L, CheckmarkSmall: B },
+  props: {
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
+    /**
+     * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label
+     */
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Disable the toggle (optional)
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Position of the label relative to the toggle (optional)
+     * @values before, after
+     */
+    labelPosition: {
+      type: String,
+      default: d.BEFORE,
+      validator: (t) => Object.values(d).includes(t)
+    },
+    /**
+     * Setting this property to true will set the toggle to read only state.
+     */
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indicates if the switch is "on" or "off"
+     */
+    value: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["input"],
+  setup(t, { attrs: e, slots: a, emit: n }) {
+    const l = R(a), r = p(t.value), i = E("toggle-description"), c = g(a)("default"), o = g(a)("description");
+    F("bento-toggle", a.default, a.description);
+    const b = u(() => l("default") ? g(a)("default") : null), m = p(e["aria-label"]), { ariaLabel: _ } = I(t), y = x({
+      ariaLabel: m.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: _,
+      defaultFallback: b
+    }), h = u(() => i ?? null), v = u(() => ({
+      [`b-toggle--${f.LABEL_FIRST}`]: t.labelPosition === d.BEFORE,
+      "b-toggle--disabled": t.disabled,
+      "b-toggle--readonly": t.readonly
+    })), C = (s) => {
+      n("input", s.target.checked);
+    }, S = (s) => {
+      t.readonly && s.preventDefault();
+    };
+    return A(
+      () => t.value,
+      (s) => {
+        r.value = s;
+      }
+    ), {
+      // Refs
+      toggleInput: r,
+      // Values
+      computedAriaLabel: y,
+      computedDescription: h,
+      defaultSlotValue: c,
+      descriptionSlotValue: o,
+      conditionalClasses: v,
+      descriptionId: i,
+      // Method
+      hasSlot: l,
+      onChange: C,
+      onClick: S
+    };
+  }
+});
+var O = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("label", { staticClass: "b-toggle", class: e.conditionalClasses, attrs: { "data-testid": "label" } }, [a("input", { directives: [{ name: "model", rawName: "v-model", value: e.toggleInput, expression: "toggleInput" }], staticClass: "b-toggle__input", attrs: { "aria-label": e.computedAriaLabel, "aria-describedby": e.computedDescription, disabled: e.disabled, "aria-readonly": e.readonly, role: "switch", type: "checkbox" }, domProps: { checked: Array.isArray(e.toggleInput) ? e._i(e.toggleInput, null) > -1 : e.toggleInput }, on: { change: [function(n) {
+    var l = e.toggleInput, r = n.target, i = !!r.checked;
+    if (Array.isArray(l)) {
+      var c = null, o = e._i(l, c);
+      r.checked ? o < 0 && (e.toggleInput = l.concat([c])) : o > -1 && (e.toggleInput = l.slice(0, o).concat(l.slice(o + 1)));
+    } else
+      e.toggleInput = i;
+  }, (n) => e.onChange(n)], click: e.onClick } }), a("span", { staticClass: "b-toggle__track", attrs: { "aria-hidden": "true" } }, [a("span", { staticClass: "b-toggle__handle" }, [e.toggleInput ? a("checkmark-small") : e._e()], 1)]), e.hasSlot("default") ? a("span", { staticClass: "b-toggle__label-container" }, [e.hasSlot("default") ? a("bento-typography", { attrs: { el: "span", variant: "body", "data-testid": "inner-label" } }, [e._t("default")], 2) : e._e(), e.hasSlot("default") && e.hasSlot("description") ? a("bento-typography", { staticClass: "b-toggle__description", attrs: { id: e.descriptionId, el: "span", variant: "body" } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
+}, w = [], P = /* @__PURE__ */ T(
+  D,
+  O,
+  w,
+  !1,
+  null,
+  "c80e6c06"
+);
+const K = P.exports;
+export {
+  K as B,
+  f as a,
+  d as b
+};
+//# sourceMappingURL=toggle.Q52IIKfi.js.map

package/dist/chunks/toggle.Q52IIKfi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.Q52IIKfi.js","sources":["../../src/components/toggle/toggle.types.ts","../../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 lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, 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    /**\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 defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\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        emits: ['input'],\n        setup(props, { attrs, slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n            const labelSlot = computed((): string => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\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}`]:\n                    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\n            return {\n                // Refs\n                toggleInput,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Method\n                hasSlot,\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmallIcon","value","props","attrs","slots","emit","hasSlot","useHasSlot","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;AC0DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,GAAA,gBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAOA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAAP,EAAA,KAAA,GACAQ,IAAAC,EAAA,oBAAA,GAEAC,IAAAC,EAAAT,CAAA,EAAA,SAAA,GACAU,IAAAD,EAAAT,CAAA,EAAA,aAAA;AAEA,IAAAW,EAAA,gBAAAX,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAY,IAAAC,EAAA,MAAAX,EAAA,SAAA,IAAAO,EAAAT,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAc,IAAAT,EAAAN,EAAA,YAAA,CAAA,GACA,EAAA,WAAAgB,EAAA,IAAAC,EAAAlB,CAAA,GACAmB,IAAAC,EAAA;AAAA,MAAA,WAAAJ,EAAA;AAAA;AAAA,MACA,OAAAC;AAAA,MAEA,iBAAAH;AAAA,IACA,CAAA,GAGAO,IAAAN,EAAA,MAAAP,KAAA,IAAA,GAEAc,IAAAP,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAxB,EAAA,WAAA,EAAA,GAAAS,EAAA,kBAAAP,EAAA;AAAA,MAEA,sBAAAO,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGAuB,IAAA,CAAAC,MAAA;AACA,MAAArB,EAAA,SAAAqB,EAAA,OAAA,OAAA;AAAA,IAAA,GAIAC,IAAA,CAAAD,MAAA;AACA,MAAAxB,EAAA,YACAwB,EAAA,eAAA;AAAA,IACA;AAGA,WAAAE;AAAA,MAAA,MAAA1B,EAAA;AAAA,MACA,CAAA2B,MAAA;AAEA,QAAArB,EAAA,QAAAqB;AAAA,MAAA;AAAA,IACA,GAGA;AAAA;AAAA,MAAA,aAAArB;AAAA;AAAA,MAEA,mBAAAa;AAAA,MAGA,qBAAAE;AAAA,MACA,kBAAAX;AAAA,MACA,sBAAAE;AAAA,MACA,oBAAAU;AAAA,MACA,eAAAd;AAAA;AAAA,MACA,SAAAJ;AAAA,MAGA,UAAAmB;AAAA,MACA,SAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/tooltip.DyZIyMZN.js

@@ -0,0 +1,189 @@
+import { defineComponent as A, computed as S, reactive as y, nextTick as O } from "vue";
+import { l as a } from "./events.CMzGybJJ.js";
+import { g as C } from "./generate-uid.NJ8tVoha.js";
+import { a as R, P as D, c as B } from "./popper-container.DIFqmRsp.js";
+import { V as N } from "./index.Cl4_42j5.js";
+import { B as $ } from "./typography.J1v_SPG3.js";
+import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/tooltip.css";
+const p = { ...R };
+var _ = /* @__PURE__ */ ((t) => (t.HIDDEN = "hidden", t))(_ || {}), T = /* @__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))(T || {});
+const I = A({
+  name: "tooltip",
+  components: { BentoTypography: $, PopperContainer: D },
+  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: p.TOP,
+      validator: (t) => Object.values(p).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 = S(() => ({
+      [`b-tooltip--${_.HIDDEN}`]: !t.isShown
+    }));
+    return {
+      // Enums
+      PopperContainerAriaRole: B,
+      // Values
+      conditionalClasses: o
+    };
+  }
+});
+var x = function() {
+  var o = this, e = o._self._c;
+  return o._self._setupProxy, e("popper-container", { staticClass: "b-tooltip", class: o.conditionalClasses, attrs: { id: o.id, "aria-role": o.PopperContainerAriaRole.TOOLTIP, arrow: { classes: ["b-tooltip__arrow"] }, "fallback-position": o.fallbackPosition, "is-hidden": !o.isShown, offset: [0, 4], position: o.position, "target-element": o.targetElement, "disabled-focus-trap": o.disabledFocusTrap } }, [e("bento-typography", { attrs: { el: "span", variant: "caption" } }, [o._v(" " + o._s(o.content) + " ")])], 1);
+}, U = [], W = /* @__PURE__ */ k(
+  I,
+  x,
+  U,
+  !1,
+  null,
+  "cca09a35"
+);
+const q = W.exports, s = [], b = "aria-describedby", m = C("tooltip");
+let n, u = !1;
+const r = y({
+  targetElement: null,
+  content: "START_MESSAGE",
+  id: m,
+  position: void 0,
+  isShown: !1
+}), F = (t) => {
+  t.setAttribute("tabindex", "0");
+  {
+    const o = N.extend(q);
+    n = new o({ propsData: { targetElement: t, content: "", id: m } }).$mount(), document.body.appendChild(n.$el);
+  }
+}, H = () => {
+  document.contains(n.$el) && document.body.removeChild(n.$el), n.$destroy(), n = void 0;
+}, v = (t) => Object.values(p).includes(t.arg) ? t.arg : p.TOP, h = (t) => s.find(
+  (o) => (
+    // isEqualNode doesn't work correct for svg element, hence the second check here
+    o.target.isEqualNode(t) && o.target === t
+  )
+), L = (t) => {
+  const o = h(t);
+  if (!o.content || !t)
+    return;
+  t && t.setAttribute(b, m);
+  let e = !1;
+  document.querySelectorAll("dialog").forEach((i) => {
+    e = (i == null ? void 0 : i.open) || e;
+  }), e && (t.after(n.$el), e = !1), u = !0, n.content = o.content, n.position = o.position, r.content = o.content, r.position = o.position, O(() => {
+    u && (n.targetElement = t, n.isShown = !0, r.targetElement = t, r.isShown = !0);
+  });
+}, P = (t) => {
+  var o, e, i, l;
+  (e = (o = n.$el) == null ? void 0 : o.parentElement) != null && e.tagName && ((l = (i = n.$el) == null ? void 0 : i.parentElement) == null ? void 0 : l.tagName) !== "BODY" && document.body.appendChild(n.$el), u = !1, n.isShown = !1, r.isShown = !1, t && t.removeAttribute(b);
+}, d = (t, o) => {
+  if (!o.hasOwnProperty("value") || o.value) {
+    s.length === 0 && F(t);
+    const e = () => L(t), i = () => P(t), l = {
+      target: t,
+      content: o.value,
+      position: v(o),
+      removeListeners: [
+        a(t, "mouseenter", e),
+        a(t, "mouseleave", i),
+        a(t, "focus", () => {
+          t.matches(":focus-visible") && e();
+        }),
+        a(t, "blur", (c) => {
+          var E;
+          ((E = c.relatedTarget) == null ? void 0 : E.getAttribute("role")) !== "tooltip" && i();
+        }),
+        a(t, "keydown", (c) => {
+          c.key === T.ESCAPE && i();
+        })
+      ]
+    };
+    s.push(l);
+  }
+}, f = (t, o) => {
+  const e = h(t);
+  if (e) {
+    if ((e == null ? void 0 : e.content) !== o.value && (e.content = o.value, n.isShown && n.targetElement.isEqualNode(t) && (e.content ? n.content = o.value : n.isShown = !1)), e.position !== o.arg) {
+      const i = v(o);
+      e.position = i, n.position = i;
+    }
+  } else !e && o.value && d(t, o);
+}, g = (t) => {
+  const o = h(t);
+  o && (o.removeListeners.forEach((e) => {
+    e();
+  }), P(), s.splice(s.indexOf(o), 1), s.length === 0 && H());
+}, Q = {
+  // Vue 2 Directive hooks
+  bind(t, o) {
+    d(t, o);
+  },
+  update(t, o) {
+    f(t, o);
+  },
+  unbind(t) {
+    g(t);
+  },
+  // Vue 3 Directive hooks
+  beforeMount(t, o) {
+    d(t, o);
+  },
+  mounted(t, o) {
+    f(t, o);
+  },
+  updated(t, o) {
+    f(t, o);
+  },
+  unmounted(t) {
+    g(t);
+  }
+};
+export {
+  Q as B,
+  T as E,
+  q as T,
+  p as a,
+  _ as b
+};
+//# sourceMappingURL=tooltip.DyZIyMZN.js.map