@adyen/bento-vue3 1.43.0 → 1.44.0

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.LBw_ALfS.js";
+import { _ as t } from "./chunks/tutorial.vue_vue_type_script_setup_true_lang.ltZUbc6M.js";
 export {
   t as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "description": "Adyen Bento Vue 3 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,7 +35,7 @@
     "focus-lock": "0.11.0",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.43.0"
+    "@adyen/bento-design-tokens": "1.44.0"
   },
   "peerDependencies": {
     "vue": "^3.2.47",

package/dist/@types/packages/vue2/src/components/button/button.demo.d.ts

@@ -1,6 +0,0 @@
-import BentoButton from './button.vue';
-import type { Meta, StoryObj } from '@storybook/vue';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj<typeof BentoButton>;
-export declare const Secondary: Story;

package/dist/assets/loading-button.css

@@ -1 +0,0 @@
-@keyframes spin-07b9c537{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.b-loading-button--loading[data-v-07b9c537]:hover{cursor:default}.b-loading-button--primary-loading[data-v-07b9c537],.b-loading-button--primary-loading[data-v-07b9c537]:hover{background-color:var(--b-loading-button-primary-loading-background-color)}.b-loading-button--primary-loading.b-loading-button--inverse[data-v-07b9c537],.b-loading-button--inverse .b-loading-button--primary-loading[data-v-07b9c537],.b-loading-button--primary-loading:hover.b-loading-button--inverse[data-v-07b9c537],.b-loading-button--inverse .b-loading-button--primary-loading[data-v-07b9c537]:hover{background-color:var(--b-loading-button-primary-loading-background-color-inverse)}.b-loading-button--primary-success[data-v-07b9c537]{background-color:var(--b-loading-button-primary-success-background-color);color:var(--b-loading-button-primary-success-color)}.b-loading-button--primary-success[data-v-07b9c537]:hover{background-color:var(--b-loading-button-primary-success-hover-background-color)}.b-loading-button--primary-success[data-v-07b9c537]:active{background-color:var(--b-loading-button-primary-success-active-background-color)}.b-loading-button--primary-success[data-v-07b9c537]:disabled{background-color:var(--b-loading-button-primary-success-disabled-background-color);color:var(--b-loading-button-primary-success-disabled-color)}.b-loading-button--secondary-loading[data-v-07b9c537],.b-loading-button--secondary-loading[data-v-07b9c537]:hover{background-color:var(--b-loading-button-secondary-loading-background-color);color:var(--b-loading-button-secondary-loading-color)}.b-loading-button--secondary-loading.b-loading-button--inverse[data-v-07b9c537],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-07b9c537],.b-loading-button--secondary-loading:hover.b-loading-button--inverse[data-v-07b9c537],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-07b9c537]:hover{background-color:var(--b-loading-button-secondary-loading-background-color-inverse)}.b-loading-button--secondary-loading.b-loading-button--inverse[data-v-07b9c537],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-07b9c537],.b-loading-button--secondary-loading:hover.b-loading-button--inverse[data-v-07b9c537],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-07b9c537]:hover{color:var(--b-loading-button-secondary-loading-color-inverse)}.b-loading-button--secondary-loading[data-v-07b9c537]:hover:not(:focus),.b-loading-button--secondary-loading[data-v-07b9c537]:hover:hover:not(:focus){box-shadow:none}.b-loading-button--secondary-success[data-v-07b9c537]{background-color:var(--b-loading-button-secondary-success-background-color);border-color:var(--b-loading-button-secondary-success-border-color);color:var(--b-loading-button-secondary-success-color)}.b-loading-button--secondary-success[data-v-07b9c537]:hover{border-color:var(--b-loading-button-secondary-success-hover-border-color);box-shadow:var(--b-loading-button-secondary-success-hover-box-shadow)}.b-loading-button--secondary-success[data-v-07b9c537]:active{background-color:var(--b-loading-button-secondary-success-active-background-color);border-color:var(--b-loading-button-secondary-success-active-border-color)}.b-loading-button--secondary-success[data-v-07b9c537]:disabled{background-color:var(--b-loading-button-secondary-success-disabled-background-color);border-color:var(--b-loading-button-secondary-success-disabled-border-color);box-shadow:unset;color:var(--b-loading-button-secondary-success-disabled-color)}.b-loading-button--tertiary-loading[data-v-07b9c537],.b-loading-button--tertiary-loading[data-v-07b9c537]:hover{background-color:var(--b-loading-button-tertiary-loading-background-color);color:var(--b-loading-button-tertiary-loading-color);text-decoration:var(--b-loading-button-tertiary-loading-text-decoration)}.b-loading-button__icon[data-v-07b9c537]{display:inline-flex}

package/dist/chunks/action-bar.COQrEUYU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.COQrEUYU.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected\n         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        (e: 'cancel'): void;\n        (e: 'save'): void;\n    }>();\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","useI18n","label","computed","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqPIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjMA,UAAAC,IAAAC,GAuDAC,IAAAC,GASA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAP,EAAA,CAAA,GACAQ,IAAAC,EAAA,MAAAR,EAAA,iBAAAA,EAAA,iBAAAI,EAAA,UAAA,CAAA,GAGAK,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAb,CAAA,GACA,EAAA,OAAAc,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAV,EAAA,MAAAR,EAAA,YAAA,cAAA;AAEA,IAAAmB;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAb,EAAA,OAAA;AAAA,MAA2C,+BAAAG,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAA,CAAA;AAGA,UAAAC,IAAAhB,EAAA,MAAA;AAEI,YAAAiB,IAAAzB,EAAA,QAAA,IAAA,CAAA0B,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAArB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAF,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAE,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAF,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJ4B,IAAA,YAAA;AACI,YAAAC,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,KAAA,OAAAO,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAc,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,MAAAO,EAAA,QAAA,MACIA,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ;AAIJ,WAAAb;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAmB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAtB,EAAA;AACI;AAEJ,cAAA0B,IAAAF,IAAAC;AACA,QAAApB,EAAA,QAAA,MACIE,EAAA,QAAA,IAAiCmB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/button-actions-with-menu.Bn7Kdx4v.js

@@ -1,106 +0,0 @@
-import { defineComponent as r, computed as i, toRef as d, provide as u, openBlock as s, createElementBlock as l, createElementVNode as p, createVNode as m, unref as _, createBlock as v, createCommentVNode as f } from "vue";
-import { M as B, B as b } from "./menu.BpqOdkxR.js";
-import { a as h } from "./popover.D9Zw4w9l.js";
-import { B as y } from "./button-actions.Bjfo46Q_.js";
-import { _ as A } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/button-actions-with-menu.css";
-const N = { class: "b-button-actions-with-menu" }, E = {
-  role: "group",
-  class: "b-button-actions-with-menu__container-wrapper"
-}, g = {}, M = /* @__PURE__ */ r({
-  ...g,
-  __name: "button-actions-with-menu",
-  props: {
-    /**
-         * List of actions that will be used to render the buttons.
-         * First element in the list will be rendered as "primary".
-         * All elements after the first will be rendered as "secondary".
-         *
-         * Each object in the list should have a `title`, an `event` and
-         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-         *
-         * `title`: Button's text.
-         *
-         * `event`: Event triggered when clicking the Button.
-         *
-         * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
-         *
-         * @see BentoButton for a list of all the other props supported by each button action.
-         *
-         * ```
-         * [{
-         *   title: 'Primary',
-         *   event: () => { ... },
-         *   icon: FourPeopleIcon,
-         *   link: {
-                    variant: 'default',
-                    external: true,
-                    to: 'https://www.adyen.com/'
-                },
-         * }, {
-         *   title: 'Secondary',
-         *   event: () => { ... }
-         *   disabled: true,
-         *   variant: 'primary',
-         *   critical: true
-         * }]
-         * ```
-         */
-    actions: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.
-     */
-    displayedActions: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * Set inverse color scheme to buttons and menu
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The position of where the menu should open.
-     */
-    menuPosition: {
-      type: String,
-      default: "bottom-start",
-      validator: (o) => Object.values(h).includes(o)
-    }
-  },
-  setup(o) {
-    const t = o, a = i(() => t.actions.slice(0, t.displayedActions)), c = d(t, "inverse");
-    u(B, c);
-    const n = i(
-      () => t.displayedActions !== void 0 && t.displayedActions < t.actions.length ? t.actions.slice(t.displayedActions, t.actions.length).map((e) => ({
-        text: e.title,
-        handler: e.event,
-        icon: e.icon,
-        critical: e.critical,
-        disabled: e.disabled
-      })) : []
-    );
-    return (e, k) => (s(), l("div", N, [
-      p("div", E, [
-        m(_(y), {
-          actions: a.value,
-          inverse: o.inverse
-        }, null, 8, ["actions", "inverse"]),
-        n.value.length ? (s(), v(b, {
-          key: 0,
-          data: n.value,
-          "menu-position": o.menuPosition
-        }, null, 8, ["data", "menu-position"])) : f("", !0)
-      ])
-    ]));
-  }
-}), C = /* @__PURE__ */ A(M, [["__scopeId", "data-v-f58eba13"]]);
-export {
-  C as B
-};
-//# sourceMappingURL=button-actions-with-menu.Bn7Kdx4v.js.map

package/dist/chunks/button-actions-with-menu.Bn7Kdx4v.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions-with-menu.Bn7Kdx4v.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\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             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","props","__props","computedActions","computed","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;;;;GAwJIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/GA,UAAAC,IAAAC,GAmEAC,IAAAC,EAAA,MAAAH,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAI,IAAAC,EAAAL,GAAA,SAAA;AAEA,IAAAM,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAL;AAAA,MAA4B,MAAAH,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAS,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;"}

package/dist/chunks/button-actions.Bjfo46Q_.js

@@ -1,150 +0,0 @@
-import { defineComponent as S, computed as p, openBlock as a, createElementBlock as l, createElementVNode as h, normalizeClass as L, Fragment as A, renderList as I, createBlock as t, unref as O, mergeProps as _, toHandlers as f, withCtx as s, createTextVNode as m, toDisplayString as g, createSlots as R, resolveDynamicComponent as y } from "vue";
-import { B as u } from "./button.pwNCxwPu.js";
-import { B as x } from "./loading-button.CNWhVIPK.js";
-import { _ as w } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/button-actions.css";
-var B = /* @__PURE__ */ ((i) => (i.BUTTONS_END = "buttons-end", i.FILL_CONTAINER = "fill-container", i.SPACE_BETWEEN = "space-between", i.VERTICAL_STACK = "vertical-stack", i))(B || {}), T = /* @__PURE__ */ ((i) => (i.BUTTONS_START = "buttons-start", i))(T || {});
-const k = { ...B, ...T }, D = { class: "b-button-actions" }, V = {}, U = /* @__PURE__ */ S({
-  ...V,
-  __name: "button-actions",
-  props: {
-    /**
-     * List of actions that will be used to render the buttons.
-     * First element in the list will be rendered as "primary".
-     * All elements after the first will be rendered as "secondary".
-     *
-     * Each object in the list should have a `title`, an `event` and
-     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-     *
-     * `title`: Button's text.
-     *
-     * `event`: Event triggered when clicking the Button.
-     *
-     * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
-     *
-     * @see BentoButton for a list of all the other props supported by each button action.
-     *
-     * ```
-     * [{
-     *   title: 'Primary',
-     *   event: () => { ... },
-     *   icon: FourPeopleIcon,
-     *   link: {
-     *           variant: 'default',
-     *           external: true,
-     *           to: 'https://www.adyen.com/'
-     *       },
-     *  }, {
-     *   title: 'Secondary',
-     *   event: () => { ... }
-     *   disabled: true,
-     *   variant: 'secondary',
-     *   critical: true
-     * }]
-     * ```
-     */
-    actions: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * Sets the Button Actions to color scheme inverse
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Defines the layout in which the button actions is presented.
-     * It can be one of:
-     *
-     * @values BUTTONS_START
-     * @values BUTTONS_END
-     * @values FILL_CONTAINER
-     * @values SPACE_BETWEEN
-     * @values VERTICAL_STACK
-     */
-    layout: {
-      type: String,
-      default: k.BUTTONS_END,
-      validator: (i) => Object.values(k).includes(i)
-    }
-  },
-  setup(i) {
-    const r = i, E = p(() => r.actions.slice().reverse()), o = (n) => {
-      const v = r.actions.length - 1;
-      return n === v ? "primary" : "secondary";
-    }, N = p(() => ({
-      [`b-button-actions--${r.layout}`]: !0
-    })), d = (n) => (n == null ? void 0 : n.event) !== void 0 ? {
-      click: n.event
-    } : {}, C = (n) => n.iconOnly && (n.iconLeft || n.iconRight || n.icon);
-    return (n, v) => (a(), l("div", D, [
-      h("div", {
-        class: L(["b-button-actions__container-wrapper", N.value]),
-        role: "group"
-      }, [
-        (a(!0), l(A, null, I(E.value, (e, c) => (a(), l("div", {
-          key: c,
-          class: "b-button-actions__button-wrapper"
-        }, [
-          e.state ? (a(), t(O(x), _({
-            key: 0,
-            condensed: e.condensed,
-            critical: e.critical,
-            disabled: e.disabled,
-            inverse: i.inverse,
-            state: e.state,
-            variant: e.variant || o(c)
-          }, f(d(e))), {
-            default: s(() => [
-              m(g(e.title), 1)
-            ]),
-            _: 2
-          }, 1040, ["condensed", "critical", "disabled", "inverse", "state", "variant"])) : (a(), t(u, _({
-            key: 1,
-            condensed: e.condensed,
-            critical: e.critical,
-            disabled: e.disabled,
-            inverse: i.inverse,
-            link: e.link,
-            variant: e.variant || o(c)
-          }, f(d(e))), R({ _: 2 }, [
-            e.icon || e.iconLeft ? {
-              name: "iconLeft",
-              fn: s(() => [
-                (a(), t(y(e.icon || e.iconLeft), {
-                  "svg-title": e.title
-                }, null, 8, ["svg-title"]))
-              ]),
-              key: "0"
-            } : void 0,
-            C(e) ? void 0 : {
-              name: "default",
-              fn: s(() => [
-                m(g(e.title), 1)
-              ]),
-              key: "1"
-            },
-            e.iconRight ? {
-              name: "iconRight",
-              fn: s(() => [
-                (a(), t(y(e.iconRight), {
-                  "svg-title": e.title
-                }, null, 8, ["svg-title"]))
-              ]),
-              key: "2"
-            } : void 0
-          ]), 1040, ["condensed", "critical", "disabled", "inverse", "link", "variant"]))
-        ]))), 128))
-      ], 2)
-    ]));
-  }
-}), z = /* @__PURE__ */ w(U, [["__scopeId", "data-v-0fd4bf14"]]);
-export {
-  z as B,
-  B as a,
-  T as b,
-  k as c
-};
-//# sourceMappingURL=button-actions.Bjfo46Q_.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions.Bjfo46Q_.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../../vue2/src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { BentoButtonProps } from '@/core/components/button/button.types';\nimport { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\nexport interface BentoButtonActionObject<IconType = object> extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: IconType;\n    iconLeft?: IconType;\n    iconRight?: IconType;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList<IconType = object> = Array<BentoButtonActionObject<IconType>>;\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}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\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-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    <template v-if=\"!isIconOnly(button)\" #default>\n                        {{ button.title }}\n                    </template>\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import BentoButton from '../../button.vue';\n    import {\n        BentoButtonActionObject,\n        BentoButtonActionsLayout,\n        BentoButtonActionsList,\n    } from '@/core/components/button-actions/button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\n\n    const props = defineProps({\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         * @see BentoButton for a list of all the other props supported by each button action.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon,\n         *   link: {\n         *           variant: 'default',\n         *           external: true,\n         *           to: 'https://www.adyen.com/'\n         *       },\n         *  }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         *   disabled: true,\n         *   variant: 'secondary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Sets the Button Actions to color scheme inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\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 | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (layout: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(layout),\n        },\n    });\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button-actions/button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","__default__","props","__props","reversedActionsList","computed","generateButtonVariantByIndex","actionIndex","lastActionIndex","conditionalClasses","generateButtonEvents","button","isIconOnly"],"mappings":";;;;;AAeY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAOL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,sCCwIHG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjHA,UAAAC,IAAAC,GAkEAC,IAAAC,EAAA,MAAAH,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAI,IAAA,CAAAC,MAAA;AACI,YAAAC,IAAAN,EAAA,QAAA,SAAA;AACA,aAAAK,MAAAC,IAAA,YAAA;AAAA,IAAqD,GAGzDC,IAAAJ,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAH,EAAA,MAAA,EAAA,GAAA;AAAA,IACA,EAAA,GAG3CQ,IAAA,CAAAC,OAAAA,KAAA,gBAAAA,EAAA,WAAA,SAAA;AAAA,MAEU,OAAAA,EAAA;AAAA,IACkB,IAAA,CAAA,GAI5BC,IAAA,CAAAD,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}