@adyen/bento-vue2 1.0.0 → 1.1.0

package/dist/toast.js

@@ -1,20 +1,19 @@
 import { defineComponent as p, ref as u, computed as c, onMounted as b, watch as T } from "vue";
 import { u as y } from "./chunks/toastController.0e01443d.js";
 import { C as B, I as C } from "./chunks/info-filled.48f3268f.js";
-import { B as k, a as S } from "./chunks/button.98f2271d.js";
-import { B as x, c as w, a as I } from "./chunks/index.3aedb3dd.js";
-import { h as $ } from "./chunks/hasSlot.dceac207.js";
-import { n as d } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index21.css";
-const A = {
+import { B as k, a as S } from "./chunks/button.f64585fc.js";
+import { B as x, a as w, b as I } from "./chunks/index.e1fcc9e0.js";
+import { u as $ } from "./chunks/use-has-slot.068222e6.js";
+import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index17.css";
+const H = {
   "en-US": {
     dismiss: "Dismiss"
   }
 }, R = p({
-  i18n: { messages: A },
+  i18n: { messages: H },
   name: "toast-item",
   components: { BentoButton: k, BentoTypography: x, CrossIcon: B, InfoIcon: C },
-  inheritAttrs: !1,
   props: {
     text: {
       type: String,
@@ -42,25 +41,24 @@ const A = {
     };
   }
 });
-var D = function() {
+var A = function() {
   var t = this, s = t._self._c;
   return t._self._setupProxy, s("div", { staticClass: "b-toast-item", attrs: { "data-testid": "toast-item" } }, [s("div", { staticClass: "b-toast-item__container" }, [s("info-icon", { staticClass: "b-toast-item__left-icon b-toast-item__info-icon", attrs: { name: "info", "aria-hidden": "true" } }), s("output", { attrs: { role: "status" } }, [s("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, strongest: "" } }, [t._v(" " + t._s(t.text) + " ")])], 1)], 1), s("div", { staticClass: "b-toast-item__container" }, [t.action ? s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.onActionClicked } }, [t._v(" " + t._s(t.action.text) + " ")]) : t._e(), s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.dismissButtonClicked }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [s("cross-icon", { attrs: { "svg-title": t.$t("dismiss") } })];
   }, proxy: !0 }]) })], 1)]);
-}, E = [], H = /* @__PURE__ */ d(
+}, D = [], E = /* @__PURE__ */ f(
   R,
+  A,
   D,
-  E,
   !1,
   null,
-  "36035c0a",
+  "16fe1c9d",
   null,
   null
 );
-const O = H.exports, P = 5e3, V = p({
+const O = E.exports, P = 5e3, V = p({
   name: "bento-toast",
   components: { ToastItem: O },
-  inheritAttrs: !1,
   setup() {
     const { state: a } = y(), t = u(null), s = u(null), o = c(() => a.queue.slice(-3)), e = () => {
       clearTimeout(t.value);
@@ -81,7 +79,7 @@ const O = H.exports, P = 5e3, V = p({
         o.value.length && (e(), _());
       }
     );
-    const f = c(
+    const d = c(
       () => o.value.map((n, i) => {
         const g = o.value.length - 1;
         return {
@@ -89,7 +87,7 @@ const O = H.exports, P = 5e3, V = p({
           width: `${100 - 10 * (g - i)}%`
         };
       })
-    ), h = c(() => {
+    ), v = c(() => {
       var r;
       const n = (r = s.value) == null ? void 0 : r.offsetWidth, i = o.value.length - 1, m = i ? 10 * i : 0;
       return {
@@ -99,8 +97,8 @@ const O = H.exports, P = 5e3, V = p({
     });
     return {
       // Values,
-      computedPositioning: f,
-      computedHeight: h,
+      computedPositioning: d,
+      computedHeight: v,
       toastsToShow: o,
       toast: s
     };
@@ -113,13 +111,13 @@ var F = function() {
       return o.dismiss();
     } } })], 1);
   }), 0)], 1) : t._e();
-}, Y = [], q = /* @__PURE__ */ d(
+}, Y = [], q = /* @__PURE__ */ f(
   V,
   F,
   Y,
   !1,
   null,
-  "d558ce5a",
+  "680af2e2",
   null,
   null
 );

package/dist/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\" data-testid=\"toast-item\">\n        <div class=\"b-toast-item__container\">\n            <info-icon\n                class=\"b-toast-item__left-icon b-toast-item__info-icon\"\n                name=\"info\"\n                aria-hidden=\"true\"\n            ></info-icon>\n            <output role=\"status\">\n                <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" strongest>\n                    {{ text }}\n                </bento-typography>\n            </output>\n        </div>\n        <div class=\"b-toast-item__container\">\n            <bento-button\n                v-if=\"action\"\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"onActionClicked\"\n            >\n                {{ action.text }}\n            </bento-button>\n            <bento-button\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"dismissButtonClicked\"\n            >\n                <template #iconLeft>\n                    <cross-icon :svg-title=\"$t('dismiss')\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info-filled';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import messages from './messages.json';\n    import { BentoToastItemAction } from './toast-item.types';\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n\n    /**\n     * @example\n     * Toast item component, for internal use only.\n     *\n     * import { BentoToastItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToastItem },\n     *     template: `\n     *          <bento-toast-item>\n     *              This is a toast message\n     *              <template #primaryAction>Button text</template>\n     *          </bento-toast-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'toast-item',\n        components: { BentoButton, BentoTypography, CrossIcon, InfoIcon },\n        inheritAttrs: false,\n        props: {\n            text: {\n                type: String,\n                required: true,\n            },\n            action: {\n                type: Object as PropType<BentoToastItemAction>,\n                default: null,\n            },\n        },\n        emits: ['click', 'dismiss'],\n        setup(props, { slots, emit }) {\n            const dismissButtonClicked = () => emit('dismiss');\n            const onActionClicked = () => {\n                props.action.handler();\n                emit('dismiss');\n            };\n\n            return {\n                // Enums\n                BentoButtonVariant,\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Methods\n                dismissButtonClicked,\n                hasSlot: hasSlot(slots),\n                onActionClicked,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div v-if=\"toastsToShow.length\" class=\"b-toast\" :style=\"computedHeight\">\n        <transition-group\n            name=\"b-toast\"\n            tag=\"ul\"\n            class=\"b-toast__container\"\n            aria-live=\"polite\"\n            move-class=\"b-toast__container--move\"\n            enter-active-class=\"b-toast__container--enter-active\"\n            leave-active-class=\"b-toast__container--leave-active\"\n            enter-from-class=\"b-toast__container--enter-from\"\n            leave-to-class=\"b-toast__container--leave-to\"\n        >\n            <li\n                v-for=\"(item, index) in toastsToShow\"\n                :key=\"index\"\n                class=\"b-toast__item\"\n                :style=\"computedPositioning[index]\"\n                :inert=\"index !== toastsToShow.length - 1\"\n            >\n                <toast-item\n                    :ref=\"index === toastsToShow.length - 1 ? 'toast' : null\"\n                    :class=\"index !== toastsToShow.length - 1 ? 'b-toast--light-background' : null\"\n                    :text=\"item.text\"\n                    :action=\"item.action\"\n                    @dismiss=\"item.dismiss()\"\n                />\n            </li>\n        </transition-group>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, ref, watch } from 'vue';\n    import { ToastItem } from './components/toast-item';\n    import { useBentoToastController } from '@/utils/ts/toastController';\n\n    const DURATION = 5000;\n\n    /**\n     * @example\n     * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToast },\n     *     template: `\n     *          // in your project root\n     *          <bento-toast />\n     *      setup() {\n     *          bentoToastController = useBentoToastController();\n     *          onTrigger = () => {\n     *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });\n     *      }\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toast',\n        components: { ToastItem },\n        inheritAttrs: false,\n        setup() {\n            const { state } = useBentoToastController();\n            const dismissTimer = ref(null);\n            const toast = ref(null);\n            const toastsToShow = computed(() => state.queue.slice(-3));\n\n            const cancelDismissTimer = () => {\n                clearTimeout(dismissTimer.value);\n            };\n\n            const startTimer = toastToDismiss => {\n                dismissTimer.value = setTimeout(() => {\n                    cancelDismissTimer();\n                    toastToDismiss.dismiss();\n                }, DURATION);\n            };\n\n            const startDismissTimer = () => {\n                cancelDismissTimer();\n\n                const toastToDismiss = toastsToShow.value.slice(-1)[0];\n                if (toastToDismiss) {\n                    startTimer(toastToDismiss);\n                }\n            };\n\n            onMounted(() => {\n                startDismissTimer();\n            });\n\n            watch(\n                () => toastsToShow.value,\n                () => {\n                    if (toastsToShow.value.length) {\n                        cancelDismissTimer();\n                        startDismissTimer();\n                    }\n                }\n            );\n\n            const computedPositioning = computed(() =>\n                toastsToShow.value.map((el, index) => {\n                    const diff = 10;\n                    const width = 100;\n                    const min = 10;\n                    const numberOfElements = toastsToShow.value.length - 1;\n                    return {\n                        top: `${diff * index}px`,\n                        width: `${width - min * (numberOfElements - index)}%`,\n                    };\n                })\n            );\n\n            const computedHeight = computed(() => {\n                // Get shown toast element height (last in the queue)\n                const visibleToastHeight = toast.value?.offsetWidth;\n                // Get number of elements excluding the toast currently displayed\n                const numberOfElements = toastsToShow.value.length - 1;\n                // Set height = number of stacked elements\n                const stackedToastHeight = 10;\n                // Set a stack height only if there's elements present\n                const stackHeight = numberOfElements ? stackedToastHeight * numberOfElements : 0;\n                // Set bottom to be padding + height of the visible toast :)\n                return {\n                    bottom: `${visibleToastHeight}px`,\n                    height: `${stackHeight}px`,\n                };\n            });\n\n            return {\n                // Values,\n                computedPositioning,\n                computedHeight,\n                toastsToShow,\n                toast,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["_sfc_main$1","defineComponent","messages","BentoButton","BentoTypography","CrossIcon","InfoIcon","props","slots","emit","dismissButtonClicked","onActionClicked","BentoButtonVariant","BentoTypographyElement","BentoTypographyVariant","hasSlot","DURATION","_sfc_main","ToastItem","state","useBentoToastController","dismissTimer","ref","toast","toastsToShow","computed","cancelDismissTimer","startTimer","toastToDismiss","startDismissTimer","onMounted","watch","computedPositioning","el","index","numberOfElements","computedHeight","visibleToastHeight","_a","stackHeight"],"mappings":";;;;;;;;;;;;GA8DAA,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,GAAA,WAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAA,MAAAD,EAAA,SAAA,GACAE,IAAA,MAAA;AACA,MAAAJ,EAAA,OAAA,QAAA,GACAE,EAAA,SAAA;AAAA,IAAA;AAGA,WAAA;AAAA;AAAA,MAAA,oBAAAG;AAAA,MAEA,wBAAAC;AAAA,MACA,wBAAAC;AAAA;AAAA,MACA,sBAAAJ;AAAA,MAGA,SAAAK,EAAAP,CAAA;AAAA,MACA,iBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBC5DAK,IAAA,KAmBAC,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,WAAAiB,EAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAEA,UAAA,EAAA,OAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,MAAAN,EAAA,MAAA,MAAA,EAAA,CAAA,GAEAO,IAAA,MAAA;AACA,mBAAAL,EAAA,KAAA;AAAA,IAAA,GAGAM,IAAA,CAAAC,MAAA;AACA,MAAAP,EAAA,QAAA,WAAA,MAAA;AACA,QAAAK,EAAA,GACAE,EAAA,QAAA;AAAA,MAAA,GAAAZ,CAAA;AAAA,IACA,GAGAa,IAAA,MAAA;AACA,MAAAH,EAAA;AAEA,YAAAE,IAAAJ,EAAA,MAAA,MAAA,EAAA,EAAA,CAAA;AACA,MAAAI,KACAD,EAAAC,CAAA;AAAA,IACA;AAGA,IAAAE,EAAA,MAAA;AACA,MAAAD,EAAA;AAAA,IAAA,CAAA,GAGAE;AAAA,MAAA,MAAAP,EAAA;AAAA,MACA,MAAA;AAEA,QAAAA,EAAA,MAAA,WACAE,EAAA,GACAG,EAAA;AAAA,MACA;AAAA,IACA;AAGA,UAAAG,IAAAP;AAAA,MAAA,MAAAD,EAAA,MAAA,IAAA,CAAAS,GAAAC,MAAA;AAKA,cAAAC,IAAAX,EAAA,MAAA,SAAA;AACA,eAAA;AAAA,UAAA,KAAA,GAAA,KAAAU;AAAA,UACA,OAAA,GAAA,MAAA,MAAAC,IAAAD;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA,GAGAE,IAAAX,EAAA,MAAA;;AAEA,YAAAY,KAAAC,IAAAf,EAAA,UAAA,gBAAAe,EAAA,aAEAH,IAAAX,EAAA,MAAA,SAAA,GAIAe,IAAAJ,IAFA,KAEAA,IAAA;AAEA,aAAA;AAAA,QAAA,QAAA,GAAAE;AAAA,QACA,QAAA,GAAAE;AAAA,MACA;AAAA,IACA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,qBAAAP;AAAA,MAEA,gBAAAI;AAAA,MACA,cAAAZ;AAAA,MACA,OAAAD;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\" data-testid=\"toast-item\">\n        <div class=\"b-toast-item__container\">\n            <info-icon\n                class=\"b-toast-item__left-icon b-toast-item__info-icon\"\n                name=\"info\"\n                aria-hidden=\"true\"\n            ></info-icon>\n            <output role=\"status\">\n                <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" strongest>\n                    {{ text }}\n                </bento-typography>\n            </output>\n        </div>\n        <div class=\"b-toast-item__container\">\n            <bento-button\n                v-if=\"action\"\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"onActionClicked\"\n            >\n                {{ action.text }}\n            </bento-button>\n            <bento-button\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"dismissButtonClicked\"\n            >\n                <template #iconLeft>\n                    <cross-icon :svg-title=\"$t('dismiss')\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info-filled';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import messages from './messages.json';\n    import { BentoToastItemAction } from './toast-item.types';\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    /**\n     * @example\n     * Toast item component, for internal use only.\n     *\n     * import { BentoToastItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToastItem },\n     *     template: `\n     *          <bento-toast-item>\n     *              This is a toast message\n     *              <template #primaryAction>Button text</template>\n     *          </bento-toast-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'toast-item',\n        components: { BentoButton, BentoTypography, CrossIcon, InfoIcon },\n        props: {\n            text: {\n                type: String,\n                required: true,\n            },\n            action: {\n                type: Object as PropType<BentoToastItemAction>,\n                default: null,\n            },\n        },\n        emits: ['click', 'dismiss'],\n        setup(props, { slots, emit }) {\n            const dismissButtonClicked = () => emit('dismiss');\n            const onActionClicked = () => {\n                props.action.handler();\n                emit('dismiss');\n            };\n\n            return {\n                // Enums\n                BentoButtonVariant,\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Methods\n                dismissButtonClicked,\n                hasSlot: useHasSlot(slots),\n                onActionClicked,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div v-if=\"toastsToShow.length\" class=\"b-toast\" :style=\"computedHeight\">\n        <transition-group\n            name=\"b-toast\"\n            tag=\"ul\"\n            class=\"b-toast__container\"\n            aria-live=\"polite\"\n            move-class=\"b-toast__container--move\"\n            enter-active-class=\"b-toast__container--enter-active\"\n            leave-active-class=\"b-toast__container--leave-active\"\n            enter-from-class=\"b-toast__container--enter-from\"\n            leave-to-class=\"b-toast__container--leave-to\"\n        >\n            <li\n                v-for=\"(item, index) in toastsToShow\"\n                :key=\"index\"\n                class=\"b-toast__item\"\n                :style=\"computedPositioning[index]\"\n                :inert=\"index !== toastsToShow.length - 1\"\n            >\n                <toast-item\n                    :ref=\"index === toastsToShow.length - 1 ? 'toast' : null\"\n                    :class=\"index !== toastsToShow.length - 1 ? 'b-toast--light-background' : null\"\n                    :text=\"item.text\"\n                    :action=\"item.action\"\n                    @dismiss=\"item.dismiss()\"\n                />\n            </li>\n        </transition-group>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, ref, watch } from 'vue';\n    import { ToastItem } from './components/toast-item';\n    import { useBentoToastController } from '@/utils/ts/toastController';\n\n    const DURATION = 5000;\n\n    /**\n     * @example\n     * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToast },\n     *     template: `\n     *          // in your project root\n     *          <bento-toast />\n     *      setup() {\n     *          bentoToastController = useBentoToastController();\n     *          onTrigger = () => {\n     *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });\n     *      }\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toast',\n        components: { ToastItem },\n        setup() {\n            const { state } = useBentoToastController();\n            const dismissTimer = ref(null);\n            const toast = ref(null);\n            const toastsToShow = computed(() => state.queue.slice(-3));\n\n            const cancelDismissTimer = () => {\n                clearTimeout(dismissTimer.value);\n            };\n\n            const startTimer = toastToDismiss => {\n                dismissTimer.value = setTimeout(() => {\n                    cancelDismissTimer();\n                    toastToDismiss.dismiss();\n                }, DURATION);\n            };\n\n            const startDismissTimer = () => {\n                cancelDismissTimer();\n\n                const toastToDismiss = toastsToShow.value.slice(-1)[0];\n                if (toastToDismiss) {\n                    startTimer(toastToDismiss);\n                }\n            };\n\n            onMounted(() => {\n                startDismissTimer();\n            });\n\n            watch(\n                () => toastsToShow.value,\n                () => {\n                    if (toastsToShow.value.length) {\n                        cancelDismissTimer();\n                        startDismissTimer();\n                    }\n                }\n            );\n\n            const computedPositioning = computed(() =>\n                toastsToShow.value.map((el, index) => {\n                    const diff = 10;\n                    const width = 100;\n                    const min = 10;\n                    const numberOfElements = toastsToShow.value.length - 1;\n                    return {\n                        top: `${diff * index}px`,\n                        width: `${width - min * (numberOfElements - index)}%`,\n                    };\n                })\n            );\n\n            const computedHeight = computed(() => {\n                // Get shown toast element height (last in the queue)\n                const visibleToastHeight = toast.value?.offsetWidth;\n                // Get number of elements excluding the toast currently displayed\n                const numberOfElements = toastsToShow.value.length - 1;\n                // Set height = number of stacked elements\n                const stackedToastHeight = 10;\n                // Set a stack height only if there's elements present\n                const stackHeight = numberOfElements ? stackedToastHeight * numberOfElements : 0;\n                // Set bottom to be padding + height of the visible toast :)\n                return {\n                    bottom: `${visibleToastHeight}px`,\n                    height: `${stackHeight}px`,\n                };\n            });\n\n            return {\n                // Values,\n                computedPositioning,\n                computedHeight,\n                toastsToShow,\n                toast,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["_sfc_main$1","defineComponent","messages","BentoButton","BentoTypography","CrossIcon","InfoIcon","props","slots","emit","dismissButtonClicked","onActionClicked","BentoButtonVariant","BentoTypographyElement","BentoTypographyVariant","useHasSlot","DURATION","_sfc_main","ToastItem","state","useBentoToastController","dismissTimer","ref","toast","toastsToShow","computed","cancelDismissTimer","startTimer","toastToDismiss","startDismissTimer","onMounted","watch","computedPositioning","el","index","numberOfElements","computedHeight","visibleToastHeight","_a","stackHeight"],"mappings":";;;;;;;;;;;;GA8DAA,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,GAAA,WAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAA,MAAAD,EAAA,SAAA,GACAE,IAAA,MAAA;AACA,MAAAJ,EAAA,OAAA,QAAA,GACAE,EAAA,SAAA;AAAA,IAAA;AAGA,WAAA;AAAA;AAAA,MAAA,oBAAAG;AAAA,MAEA,wBAAAC;AAAA,MACA,wBAAAC;AAAA;AAAA,MACA,sBAAAJ;AAAA,MAGA,SAAAK,EAAAP,CAAA;AAAA,MACA,iBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBC3DAK,IAAA,KAmBAC,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,WAAAiB,EAAA;AAAA,EACA,QAAA;AAEA,UAAA,EAAA,OAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,MAAAN,EAAA,MAAA,MAAA,EAAA,CAAA,GAEAO,IAAA,MAAA;AACA,mBAAAL,EAAA,KAAA;AAAA,IAAA,GAGAM,IAAA,CAAAC,MAAA;AACA,MAAAP,EAAA,QAAA,WAAA,MAAA;AACA,QAAAK,EAAA,GACAE,EAAA,QAAA;AAAA,MAAA,GAAAZ,CAAA;AAAA,IACA,GAGAa,IAAA,MAAA;AACA,MAAAH,EAAA;AAEA,YAAAE,IAAAJ,EAAA,MAAA,MAAA,EAAA,EAAA,CAAA;AACA,MAAAI,KACAD,EAAAC,CAAA;AAAA,IACA;AAGA,IAAAE,EAAA,MAAA;AACA,MAAAD,EAAA;AAAA,IAAA,CAAA,GAGAE;AAAA,MAAA,MAAAP,EAAA;AAAA,MACA,MAAA;AAEA,QAAAA,EAAA,MAAA,WACAE,EAAA,GACAG,EAAA;AAAA,MACA;AAAA,IACA;AAGA,UAAAG,IAAAP;AAAA,MAAA,MAAAD,EAAA,MAAA,IAAA,CAAAS,GAAAC,MAAA;AAKA,cAAAC,IAAAX,EAAA,MAAA,SAAA;AACA,eAAA;AAAA,UAAA,KAAA,GAAA,KAAAU;AAAA,UACA,OAAA,GAAA,MAAA,MAAAC,IAAAD;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA,GAGAE,IAAAX,EAAA,MAAA;;AAEA,YAAAY,KAAAC,IAAAf,EAAA,UAAA,gBAAAe,EAAA,aAEAH,IAAAX,EAAA,MAAA,SAAA,GAIAe,IAAAJ,IAFA,KAEAA,IAAA;AAEA,aAAA;AAAA,QAAA,QAAA,GAAAE;AAAA,QACA,QAAA,GAAAE;AAAA,MACA;AAAA,IACA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,qBAAAP;AAAA,MAEA,gBAAAI;AAAA,MACA,cAAAZ;AAAA,MACA,OAAAD;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/toggle.js

@@ -1,4 +1,4 @@
-import { B as a, a as g } from "./chunks/index.950568af.js";
+import { B as a, a as g } from "./chunks/index.4ec4409f.js";
 export {
   a as BentoToggle,
   g as BentoTogglePropClass

package/dist/typography.js

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

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -338,6 +338,7 @@
             },
             {
               "name": "error",
+              "description": "Highlights the dropdown in an erroneous state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1506,6 +1507,7 @@
             },
             {
               "name": "hasError",
+              "description": "If set to true, renders all checkboxes in the group in an error state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2759,6 +2761,7 @@
             },
             {
               "name": "error",
+              "description": "Adds error validation class for outlining input-field.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3180,6 +3183,48 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "bento-listbox-single-select",
+          "description": "Listbox single-select options list",
+          "attributes": [
+            {
+              "name": "isOptionDisabled",
+              "description": "Function that allows the options to be disabled",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxIsOptionDisabled"
+              },
+              "default": "() => false"
+            },
+            {
+              "name": "items",
+              "required": true,
+              "description": "The option elements to populate the listbox with.\nIt must be an array of {@see BentoListboxOptionItem }.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxOptions"
+              }
+            },
+            {
+              "name": "selectedValue",
+              "description": "The `input` value.\nProviding an empty string will select no options.\nSet to an empty string `''` if you don't want any of the available options to be selected",
+              "value": {
+                "kind": "expression",
+                "type": "BentoListboxSelectedValue"
+              },
+              "default": "undefined"
+            }
+          ],
+          "slots": [
+            {
+              "name": "innerSlot"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/listbox/components/listbox-single-select/listbox-single-select.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "bento-listbox-single-select-option",
           "description": "Listbox option element.",
@@ -4181,6 +4226,7 @@
             },
             {
               "name": "hasError",
+              "description": "If set to true, renders all radio-buttons in the group in an error state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6802,6 +6848,43 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "footer-actions",
+          "description": "",
+          "attributes": [
+            {
+              "name": "actions",
+              "required": true,
+              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\nBut you may change the color of 1-st action to red with 'critial' key\nNot more than 3 action buttons can be provided\nOr 2 action buttons and 1 Label for them\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n\n```\n[{\n  title: 'Primary',2\n  event: () => { ... },\n  icon: FourPeopleIcon\n}, {\n  title: 'Secondary',\n  event: () => { ... }\n}]\n```",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              }
+            },
+            {
+              "name": "actionsLabel",
+              "description": "Text label that is displayed left to the action buttons",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "destructiveActions",
+              "description": "If passed - sets first button color to red",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/footer-actions/footer-actions.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "grid-layout",
           "description": "Component used to render the grid layout in the bento-summary-grid. For internal use only",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -56,14 +56,14 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.0.0",
+        "@adyen/bento-design-tokens": "1.1.0",
         "@adyen/ui-assets-flag-icons": "1.2.0",
         "@adyen/ui-assets-icons-16": "3.1.0",
         "@adyen/ui-assets-payment-method-icons": "5.2.0",
-        "@codemirror/commands": "^6.2.5",
-        "@codemirror/language-data": "^6.3.1",
-        "@codemirror/state": "^6.2.1",
-        "@codemirror/view": "^6.20.0",
+        "@codemirror/commands": "6.3.3",
+        "@codemirror/language-data": "6.4.0",
+        "@codemirror/state": "6.4.0",
+        "@codemirror/view": "6.23.1",
         "@popperjs/core": "2.11.8",
         "date-fns": "2.28.0",
         "focus-lock": "0.11.0",
@@ -75,10 +75,11 @@
         "vue-router": "~3.6"
     },
     "overrides": {
+        "@codemirror/state": "6.4.0",
         "react": "16.14.0"
     },
     "devDependencies": {
-        "@adyen/bento-cli": "0.0.9",
+        "@adyen/bento-cli": "0.0.10",
         "@playwright/experimental-ct-vue2": "1.30.0",
         "@playwright/test": "^1.21.0",
         "@storybook/addon-a11y": "7.0.4",

package/dist/@types/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.types.d.ts

@@ -1,3 +0,0 @@
-export declare enum BentoListboxMultiSelectEvent {
-    SELECT = "select"
-}

package/dist/@types/components/internal/listbox/composables/use-listbox-keyboard-navigation.d.ts

@@ -1,14 +0,0 @@
-import { BentoListboxSelectedValue } from '@/types';
-import type { SetupContext } from 'vue/types/v3-setup-context';
-export declare const useListboxKeyboardNavigation: ({ items, isOptionDisabled }: {
-    items: any;
-    isOptionDisabled: any;
-}, focusItem: any, emit: SetupContext['emit']) => {
-    moveToFirstElement: () => void;
-    moveToLastElement: () => void;
-    moveToNextElement: () => void;
-    moveToPreviousElement: () => void;
-    onTabKey: (selectedValue: BentoListboxSelectedValue) => void;
-    onSpaceKey: (selectedValue: BentoListboxSelectedValue) => void;
-    onEnterKey: (selectedValue: BentoListboxSelectedValue) => void;
-};

package/dist/@types/utils/ts/hasSlot.d.ts

@@ -1,2 +0,0 @@
-import type { Slots } from 'vue/types/v3-setup-context';
-export declare const hasSlot: (slots: Slots) => (name: string) => boolean;

package/dist/assets/chevron-up.css

@@ -1 +0,0 @@
-svg[data-v-58c18347]{display:inline-flex;flex-shrink:0}svg[data-v-58c18347],svg *[data-v-58c18347]{fill:currentcolor}svg[data-v-32f5f438]{display:inline-flex;flex-shrink:0}svg[data-v-32f5f438],svg *[data-v-32f5f438]{fill:currentcolor}

package/dist/chunks/base-button.23c7948c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-button.23c7948c.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-base-button__label\"\n        >\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                hasSlot: hasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","hasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;AC4DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,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,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AASA,WAAA;AAAA;AAAA,MAAA,wBAAAS;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAP;AAAA,MAGA,oBAAAK;AAAA;AAAA,MACA,eAbA,CAAAG,MAAA;AACA,QAAAZ,EAAA,YACAE,EAAAP,EAAA,OAAAiB,CAAA;AAAA,MACA;AAAA,MAaA,SAAAC,EAAAZ,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/button-actions.c87eaee6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions.c87eaee6.js","sources":["../../src/components/button/components/button-actions/button-actions.types.ts","../../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { VueNodeElement } from '@/types';\nimport type { BentoButtonVariant } from '@/components/button';\n\nexport interface BentoButtonActionObject {\n    title: string;\n    event: (event: Event) => void;\n    icon?: VueNodeElement;\n    disabled?: boolean;\n    variant?: BentoButtonVariant;\n    critical?: boolean;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\n\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n    <div class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n                <bento-button\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    @click=\"button.event\"\n                >\n                    <template v-if=\"button.icon\" #iconLeft>\n                        <component :is=\"button.icon\" :svg-title=\"button.title\"></component>\n                    </template>\n                    {{ button.title }}\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonVariant } from '../../button.types';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n\n    export default defineComponent({\n        name: 'bento-button-actions',\n        components: { BentoButton },\n        inheritAttrs: false,\n        props: {\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `disabled` (optional): Disables the action.\n             *\n             * `variant` (optional): Sets button's variant background color.\n             *\n             * `critical` (optional): Sets button red border adn color.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: BentoButtonVariant.PRIMARY,\n             *   critical: true\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                required: true,\n            },\n\n            /**\n             * Defines the layout in which the button actions is presented.\n             * It can be one of:\n             *\n             * @values BUTTONS_START\n             * @values BUTTONS_END\n             * @values FILL_CONTAINER\n             * @values SPACE_BETWEEN\n             * @values VERTICAL_STACK\n             */\n            layout: {\n                type: String as PropType<BentoButtonActionsLayout>,\n                default: BentoButtonActionsLayout.BUTTONS_END,\n                validator: (layout: BentoButtonActionsLayout) =>\n                    Object.values(BentoButtonActionsLayout).includes(layout),\n            },\n        },\n        setup(props) {\n            const reversedActionsList = computed(() => props.actions.slice().reverse());\n            const generateButtonVariantByIndex = actionIndex => {\n                const lastActionIndex = props.actions.length - 1;\n                return actionIndex === lastActionIndex ? BentoButtonVariant.PRIMARY : BentoButtonVariant.SECONDARY;\n            };\n\n            const conditionalClasses = computed(() => ({\n                [`b-button-actions--${props.layout}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                reversedActionsList,\n\n                // Methods\n                generateButtonVariantByIndex,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","_sfc_main","defineComponent","BentoButton","layout","props","reversedActionsList","computed","generateButtonVariantByIndex","actionIndex","lastActionIndex","BentoButtonVariant"],"mappings":";;;;AAcY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAIL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCCPG,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAmCA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAYA,MAAA;AAAA,MACA,SAAAH,EAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAEA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAAF,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAG,IAAA,CAAAC,MAAA;AACA,YAAAC,IAAAL,EAAA,QAAA,SAAA;AACA,aAAAI,MAAAC,IAAAC,EAAA,UAAAA,EAAA;AAAA,IAAA;AAOA,WAAA;AAAA;AAAA,MAAA,oBAJAJ,EAAA,OAAA;AAAA,QAAA,CAAA,qBAAAF,EAAA,QAAA,GAAA;AAAA,MACA,EAAA;AAAA,MAKA,qBAAAC;AAAA;AAAA,MACA,8BAAAE;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/button.98f2271d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.98f2271d.js","sources":["../../src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["export enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"conditionalClasses\"\n        @click.capture=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-button__label\"\n        >\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from './button.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n    import { Booleanish } from '@/types';\n    import type { RouterLinkProps } from 'vue-router/types/router';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoLink, BentoLinkVariant } from '../link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        // eslint-disable-next-line vue/require-default-prop\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @usage\n     * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             :icon-position=\"AdlIconPosition.AFTER\"\n     *         >\n     *             Button text\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-button',\n        components: { BentoTypography },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n\n            /**\n             * Reduces sizing of button\n             */\n            condensed: {\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: String as PropType<BentoButtonVariant>,\n                default: BentoButtonVariant.PRIMARY,\n                validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n            },\n\n            /**\n             * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n             */\n            link: {\n                type: Object,\n                default: undefined,\n            },\n        },\n        emits: ['click', 'focus', 'blur', 'keydown.esc'],\n        setup(props, { slots, emit, attrs }) {\n            const componentType = computed(() => {\n                if (props?.link !== undefined) {\n                    return BentoLink;\n                }\n                return 'button';\n            });\n            const ariaAttributes = computed(() => ({\n                'aria-controls': attrs['aria-controls']?.toString() as string,\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const componentProps = computed(() =>\n                componentType.value === 'button'\n                    ? {\n                          ...ariaAttributes.value,\n                          disabled: props.disabled,\n                          type: props.type,\n                      }\n                    : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT }\n            );\n\n            const variantClass = computed((): { [x: string]: boolean } => ({\n                [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n            }));\n\n            const conditionalClasses = computed(\n                (): {\n                    [x: string]: boolean;\n                } => ({\n                    ...variantClass.value,\n                    [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n                    [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n                    [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n                })\n            );\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit('click', e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n                componentType,\n                componentProps,\n\n                // Methods\n                onClickButton,\n                hasSlot: hasSlot(slots),\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","hasSlot"],"mappings":";;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aAJQA,IAAAD,KAAA,CAAA,CAAA;AC4DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA,QAAA,aAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OACAL,KAAA,gBAAAA,EAAA,UAAA,SACAM,IAEA,QAAA,GAEAC,IAAAF,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAG,IAAAL,EAAA,eAAA,MAAA,gBAAAK,EAAA;AAAA,QACA,kBAAAC,IAAAN,EAAA,eAAA,MAAA,gBAAAM,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAL;AAAA,MAAA,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEA,GAAAG,EAAA;AAAA,QACA,UAAAP,EAAA;AAAA,QACA,MAAAA,EAAA;AAAA,MACA,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAW,EAAA,QAAA;AAAA,IAEA,GAGAC,IAAAP,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAL,EAAA,UAAAA,EAAA,WAAA,IAAAN,EAAA,gBAAA,IAAA,GAAA;AAAA,IACA,EAAA,GAGAmB,IAAAR;AAAA,MAAA,OAAA;AAAA,QAGA,GAAAO,EAAA;AAAA,QACA,CAAA,aAAAlB,EAAA,WAAA,GAAAM,EAAA;AAAA,QACA,CAAA,aAAAN,EAAA,WAAA,GAAA,CAAAO,EAAA;AAAA,QACA,CAAA,aAAAP,EAAA,UAAA,GAAAM,EAAA;AAAA,MACA;AAAA,IACA;AAYA,WAAA;AAAA;AAAA,MAAA,wBAAAc;AAAA,MAEA,wBAAAC;AAAA;AAAA,MACA,gBAAAR;AAAA,MAGA,oBAAAM;AAAA,MACA,eAAAT;AAAA,MACA,gBAAAM;AAAA;AAAA,MACA,eAlBA,CAAAM,MAAA;AACA,QAAAhB,EAAA,YAGAgB,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAd,EAAA,SAAAc,CAAA;AAAA,MAIA;AAAA,MAeA,SAAAC,EAAAhB,CAAA;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}