@adyen/bento-vue2 1.52.0 → 1.54.0

package/dist/chunks/{button-actions.DAvSJtOB.js → button-actions.XlUhz42n.js}

@@ -1,16 +1,16 @@
-import { defineComponent as I, useSlots as E, computed as u, ref as p, inject as N, watch as L, nextTick as O, onMounted as b, onUnmounted as R } from "vue";
+import { defineComponent as y, useSlots as h, computed as u, ref as p, inject as E, watch as N, nextTick as L, onMounted as O, onUnmounted as b } from "vue";
 import { B as l } from "./button.D-3uUhuG.js";
-import { o as x } from "./resize.Bqks3WUm.js";
-import { f as U } from "./es6.BtaxuP0b.js";
-import { B as $ } from "./loading-indicator.z8COalOc.js";
-import { C as F } from "./cross-circle-fill.Ra0-PIUo.js";
-import { C as W } from "./checkmark-circle-fill.DZBl7CeY.js";
-import { u as D } from "./use-has-slot.C9lQZ6nz.js";
-import { u as G } from "./i18n.BQkEbtPM.js";
-import { n as B } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { o as R } from "./resize.Bqks3WUm.js";
+import { f as x } from "./es6.BtaxuP0b.js";
+import { B as U } from "./loading-indicator.z8COalOc.js";
+import { C as $ } from "./cross-circle-fill.Ra0-PIUo.js";
+import { C as F } from "./checkmark-circle-fill.DZBl7CeY.js";
+import { u as W } from "./use-has-slot.C9lQZ6nz.js";
+import { u as D } from "./i18n.BQkEbtPM.js";
+import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/button-actions.css";
-var S = /* @__PURE__ */ ((a) => (a.BUTTONS_END = "buttons-end", a.FILL_CONTAINER = "fill-container", a.SPACE_BETWEEN = "space-between", a.VERTICAL_STACK = "vertical-stack", a))(S || {}), k = /* @__PURE__ */ ((a) => (a.BUTTONS_START = "buttons-start", a))(k || {});
-const y = { ...S, ...k };
+var B = /* @__PURE__ */ ((a) => (a.BUTTONS_END = "buttons-end", a.FILL_CONTAINER = "fill-container", a.SPACE_BETWEEN = "space-between", a.VERTICAL_STACK = "vertical-stack", a))(B || {}), k = /* @__PURE__ */ ((a) => (a.BUTTONS_START = "buttons-start", a))(k || {});
+const G = { ...B, ...k };
 var i = /* @__PURE__ */ ((a) => (a.START = "start", a.LOADING = "loading", a.SUCCESS = "success", a.FAIL = "fail", a))(i || {});
 const P = {
   "en-US": {
@@ -23,10 +23,10 @@ const P = {
   "pt-BR": {
     failed: "Falha"
   }
-}, j = {
+}, w = {
   i18n: { messages: P }
-}, w = /* @__PURE__ */ I({
-  ...j,
+}, j = /* @__PURE__ */ y({
+  ...w,
   __name: "loading-button",
   props: {
     /**
@@ -77,7 +77,7 @@ const P = {
   },
   emits: ["click"],
   setup(a, { emit: t }) {
-    const e = a, s = E(), n = D(s), { t: r } = G(), d = u(() => ({
+    const e = a, s = h(), n = W(s), { t: r } = D(), d = u(() => ({
       [`b-loading-button--${e.variant}-${i.LOADING}`]: e.state === i.LOADING && !e.disabled,
       "b-loading-button--loading": e.state === i.LOADING && !e.disabled,
       [`b-loading-button--${e.variant}-${i.SUCCESS}`]: e.state === i.SUCCESS,
@@ -89,7 +89,7 @@ const P = {
     );
     return { __sfc: !0, props: e, emit: t, slots: s, hasSlot: n, t: r, conditionalClasses: d, isInverseLoadingIndicator: c, isCritical: f, onClick: (o) => {
       o.stopPropagation(), e.state !== i.LOADING && t("click", o);
-    }, BentoLoadingIndicator: $, BentoButton: l, Cross: F, Checkmark: W };
+    }, BentoLoadingIndicator: U, BentoButton: l, Cross: $, Checkmark: F };
   }
 });
 var M = function() {
@@ -101,8 +101,8 @@ var M = function() {
   }, proxy: !0 } : t.state !== "start" ? { key: "iconLeft", fn: function() {
     return [e("span", { staticClass: "b-loading-button__icon", attrs: { "data-testid": "loading-button-rotating-icon" } }, [t.state === "fail" ? e(s.Cross, { attrs: { "svg-title": s.t("failed") } }) : t.state === "success" ? e(s.Checkmark, { attrs: { "svg-title": s.t("succeded") } }) : t.state === "loading" ? e(s.BentoLoadingIndicator, { attrs: { small: "", inverse: s.isInverseLoadingIndicator } }) : t._e()], 1)];
   }, proxy: !0 } : null], null, !0) }, [t._t("default")], 2);
-}, V = [], z = /* @__PURE__ */ B(
-  w,
+}, V = [], z = /* @__PURE__ */ I(
+  j,
   M,
   V,
   !1,
@@ -111,106 +111,48 @@ var M = function() {
 );
 const H = z.exports, J = Symbol(
   "button actions with menu container injection key"
-), K = 242, C = parseInt(U, 10), Y = (a, t, e) => {
+), K = 242, C = parseInt(x, 10), Y = (a, t, e) => {
   const s = p(0);
   let n = null;
-  const { buttonActionsWithMenu: r, menu: d, stackButtons: c } = N(J, {
+  const { buttonActionsWithMenu: r, menu: d, stackButtons: c } = E(J, {
     buttonActionsWithMenu: p(null),
     menu: p(null),
     stackButtons: p(!1)
-  }), f = u(() => r.value ?? a.value), v = u(() => d.value ? [...t.value, d.value.$el] : t.value), o = (_) => {
+  }), f = u(() => r.value ?? a.value), _ = u(() => d.value ? [...t.value, d.value.$el] : t.value), o = (v) => {
     var g;
-    const T = (g = v.value) == null ? void 0 : g.reduce(
-      (A, h) => A + h.clientWidth + C,
+    const S = (g = _.value) == null ? void 0 : g.reduce(
+      (T, A) => T + A.clientWidth + C,
       -C - 1
     ), m = f.value.clientWidth;
-    return _ && (s.value = m >= K && !c.value ? T : 0), s.value > m;
+    return v && (s.value = m >= K && !c.value ? S : 0), s.value > m;
   };
-  return L(
+  return N(
     () => e,
     () => {
-      O(() => {
+      L(() => {
         c.value = o(!0);
       });
     },
     { deep: !0 }
-  ), b(() => {
-    n = x(f.value, () => {
+  ), O(() => {
+    n = R(f.value, () => {
       c.value = o(s.value === 0);
     });
-  }), R(() => {
+  }), b(() => {
     n == null || n.disconnect();
   }), c;
-}, q = {}, Q = /* @__PURE__ */ I({
-  ...q,
+}, Q = {}, q = /* @__PURE__ */ y({
+  ...Q,
   __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: y.BUTTONS_END,
-      validator: (a) => Object.values(y).includes(a)
-    }
+    actions: null,
+    inverse: { type: Boolean, default: !1 },
+    layout: { default: G.BUTTONS_END }
   },
   setup(a) {
     const t = a, e = p(null), s = p(null), n = Y(e, s, t.actions), r = u(() => t.actions.slice().reverse()), d = (o) => {
-      const _ = t.actions.length - 1;
-      return o === _ ? "primary" : "secondary";
+      const v = t.actions.length - 1;
+      return o === v ? "primary" : "secondary";
     }, c = u(() => ({
       [`b-button-actions--${t.layout}`]: !0,
       "b-button-actions--stacked-buttons": n.value
@@ -231,22 +173,22 @@ var X = function() {
       return [e(n.iconRight, { tag: "component", attrs: { "svg-title": n.title } })];
     }, proxy: !0 } : null], null, !0) }, s.generateButtonEvents(n)))], 1);
   }), 0)]);
-}, Z = [], tt = /* @__PURE__ */ B(
-  Q,
+}, Z = [], tt = /* @__PURE__ */ I(
+  q,
   X,
   Z,
   !1,
   null,
-  "0c874a6f"
+  "ed119c9e"
 );
 const dt = tt.exports;
 export {
   dt as B,
-  S as a,
+  B as a,
   k as b,
-  y as c,
+  G as c,
   H as d,
   i as e,
   J as f
 };
-//# sourceMappingURL=button-actions.DAvSJtOB.js.map
+//# sourceMappingURL=button-actions.XlUhz42n.js.map

package/dist/chunks/{button-actions.DAvSJtOB.js.map → button-actions.XlUhz42n.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions.DAvSJtOB.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../../core/src/components/loading-button/loading-button.types.ts","../../src/components/button/components/loading-button/loading-button.vue","../../src/components/internal/button-actions-with-menu/button-actions-with-menu.keys.ts","../../src/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons.ts","../../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","export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"isCritical\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n\n        <template v-if=\"state === 'start' && hasSlot('iconLeft')\" #iconLeft>\n            <slot name=\"iconLeft\"></slot>\n        </template>\n        <template v-else-if=\"state !== 'start'\" #iconLeft>\n            <span class=\"b-loading-button__icon\" data-testid=\"loading-button-rotating-icon\">\n                <cross v-if=\"state === 'fail'\" :svg-title=\"t('failed')\" />\n                <checkmark v-else-if=\"state === 'success'\" :svg-title=\"t('succeded')\" />\n                <!-- TODO: Replace with new loading-indicator component -->\n                <bento-loading-indicator v-else-if=\"state === 'loading'\" small :inverse=\"isInverseLoadingIndicator\" />\n            </span>\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, useSlots } from 'vue';\n    import { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import BentoButton from '@/components/button/button.vue';\n    import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Displays loading-button as critical\n         */\n        critical: {\n            type: BentoButton.props.critical.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n    });\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n    const isCritical = computed(\n        () =>\n            (props.critical && props.state === BentoLoadingButtonState.START) ||\n            props.state === BentoLoadingButtonState.FAIL\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/loading-button/loading-button.scss\" />\n","export const BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY = Symbol(\n    'button actions with menu container injection key'\n);\n","import { computed, inject, nextTick, onMounted, onUnmounted, ref, Ref, watch } from 'vue';\nimport { observeSizeOfElement } from '@/utils/ts/resize';\nimport { BButtonActionsButtonsEndColumnGap } from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoButtonActionsList } from '../../button-actions.types';\nimport { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from '@/internal/button-actions-with-menu/button-actions-with-menu.keys';\n\nconst CONTAINER_QUERY = 242;\nconst BUTTONS_GAP = parseInt(BButtonActionsButtonsEndColumnGap, 10);\n\n/**\n * Calculates the width of the container and the buttons and decides if the buttons should be stacked or not\n *\n * @param buttonActions Reference to the container element\n * @param buttons Reference array of button elements\n * @param actions Button actions actions prop\n */\nexport const useStackButtons = (\n    buttonActions: Ref<HTMLDivElement>,\n    buttons: Ref<HTMLDivElement[]>,\n    actions: BentoButtonActionsList\n) => {\n    const originalButtonsWidth = ref(0);\n    let containerObserver: ResizeObserver | null = null;\n\n    const { buttonActionsWithMenu, menu, stackButtons } = inject(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, {\n        buttonActionsWithMenu: ref(null),\n        menu: ref(null),\n        stackButtons: ref(false),\n    });\n\n    const container = computed(() => buttonActionsWithMenu.value ?? buttonActions.value);\n\n    const computedButtons = computed(() => (menu.value ? [...buttons.value, menu.value.$el] : buttons.value));\n\n    const areButtonsWiderThanContainer = (updateOriginalButtonsWidth?: boolean) => {\n        const buttonsWidth = computedButtons.value?.reduce(\n            (acc, button) => acc + button.clientWidth + BUTTONS_GAP,\n            -BUTTONS_GAP - 1 // to remove the extra spacing, as if there's 3 buttons, only two will have a gap in between\n        );\n\n        const containersWidth = container.value.clientWidth;\n\n        if (updateOriginalButtonsWidth) {\n            originalButtonsWidth.value = containersWidth >= CONTAINER_QUERY && !stackButtons.value ? buttonsWidth : 0;\n        }\n        return originalButtonsWidth.value > containersWidth;\n    };\n\n    watch(\n        () => actions,\n        () => {\n            nextTick(() => {\n                stackButtons.value = areButtonsWiderThanContainer(true);\n            });\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        containerObserver = observeSizeOfElement(container.value, () => {\n            stackButtons.value = areButtonsWiderThanContainer(originalButtonsWidth.value === 0);\n        });\n    });\n\n    onUnmounted(() => {\n        containerObserver?.disconnect();\n    });\n\n    return stackButtons;\n};\n","<template>\n    <div ref=\"buttonActions\" class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div\n                v-for=\"(button, index) in reversedActionsList\"\n                :key=\"index\"\n                ref=\"buttons\"\n                class=\"b-button-actions__button-wrapper\"\n            >\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, ref } 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    import { useStackButtons } from '@/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons';\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 buttonActions = ref<HTMLDivElement>(null);\n    const buttons = ref<HTMLDivElement[]>(null);\n    const stackButtons = useStackButtons(buttonActions, buttons, props.actions);\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        [`b-button-actions--stacked-buttons`]: stackButtons.value,\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","BentoLoadingButtonState","BentoLoadingButtonState2","__default__$1","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","conditionalClasses","computed","props","isInverseLoadingIndicator","isCritical","e","emit","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","CONTAINER_QUERY","BUTTONS_GAP","BButtonActionsButtonsEndColumnGap","useStackButtons","buttonActions","buttons","actions","originalButtonsWidth","ref","containerObserver","buttonActionsWithMenu","menu","stackButtons","inject","container","computedButtons","areButtonsWiderThanContainer","updateOriginalButtonsWidth","buttonsWidth","_a","acc","button","containersWidth","watch","nextTick","onMounted","observeSizeOfElement","onUnmounted","__default__","reversedActionsList","generateButtonVariantByIndex","actionIndex","lastActionIndex"],"mappings":"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"}
+{"version":3,"file":"button-actions.XlUhz42n.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../../core/src/components/loading-button/loading-button.types.ts","../../src/components/button/components/loading-button/loading-button.vue","../../src/components/internal/button-actions-with-menu/button-actions-with-menu.keys.ts","../../src/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons.ts","../../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","export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"isCritical\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n\n        <template v-if=\"state === 'start' && hasSlot('iconLeft')\" #iconLeft>\n            <slot name=\"iconLeft\"></slot>\n        </template>\n        <template v-else-if=\"state !== 'start'\" #iconLeft>\n            <span class=\"b-loading-button__icon\" data-testid=\"loading-button-rotating-icon\">\n                <cross v-if=\"state === 'fail'\" :svg-title=\"t('failed')\" />\n                <checkmark v-else-if=\"state === 'success'\" :svg-title=\"t('succeded')\" />\n                <!-- TODO: Replace with new loading-indicator component -->\n                <bento-loading-indicator v-else-if=\"state === 'loading'\" small :inverse=\"isInverseLoadingIndicator\" />\n            </span>\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, useSlots } from 'vue';\n    import { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import BentoButton from '@/components/button/button.vue';\n    import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Displays loading-button as critical\n         */\n        critical: {\n            type: BentoButton.props.critical.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n    });\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n    const isCritical = computed(\n        () =>\n            (props.critical && props.state === BentoLoadingButtonState.START) ||\n            props.state === BentoLoadingButtonState.FAIL\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/loading-button/loading-button.scss\" />\n","export const BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY = Symbol(\n    'button actions with menu container injection key'\n);\n","import { computed, inject, nextTick, onMounted, onUnmounted, ref, Ref, watch } from 'vue';\nimport { observeSizeOfElement } from '@/utils/ts/resize';\nimport { BButtonActionsButtonsEndColumnGap } from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoButtonActionsList } from '../../button-actions.types';\nimport { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from '@/internal/button-actions-with-menu/button-actions-with-menu.keys';\n\nconst CONTAINER_QUERY = 242;\nconst BUTTONS_GAP = parseInt(BButtonActionsButtonsEndColumnGap, 10);\n\n/**\n * Calculates the width of the container and the buttons and decides if the buttons should be stacked or not\n *\n * @param buttonActions Reference to the container element\n * @param buttons Reference array of button elements\n * @param actions Button actions actions prop\n */\nexport const useStackButtons = (\n    buttonActions: Ref<HTMLDivElement>,\n    buttons: Ref<HTMLDivElement[]>,\n    actions: BentoButtonActionsList\n) => {\n    const originalButtonsWidth = ref(0);\n    let containerObserver: ResizeObserver | null = null;\n\n    const { buttonActionsWithMenu, menu, stackButtons } = inject(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, {\n        buttonActionsWithMenu: ref(null),\n        menu: ref(null),\n        stackButtons: ref(false),\n    });\n\n    const container = computed(() => buttonActionsWithMenu.value ?? buttonActions.value);\n\n    const computedButtons = computed(() => (menu.value ? [...buttons.value, menu.value.$el] : buttons.value));\n\n    const areButtonsWiderThanContainer = (updateOriginalButtonsWidth?: boolean) => {\n        const buttonsWidth = computedButtons.value?.reduce(\n            (acc, button) => acc + button.clientWidth + BUTTONS_GAP,\n            -BUTTONS_GAP - 1 // to remove the extra spacing, as if there's 3 buttons, only two will have a gap in between\n        );\n\n        const containersWidth = container.value.clientWidth;\n\n        if (updateOriginalButtonsWidth) {\n            originalButtonsWidth.value = containersWidth >= CONTAINER_QUERY && !stackButtons.value ? buttonsWidth : 0;\n        }\n        return originalButtonsWidth.value > containersWidth;\n    };\n\n    watch(\n        () => actions,\n        () => {\n            nextTick(() => {\n                stackButtons.value = areButtonsWiderThanContainer(true);\n            });\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        containerObserver = observeSizeOfElement(container.value, () => {\n            stackButtons.value = areButtonsWiderThanContainer(originalButtonsWidth.value === 0);\n        });\n    });\n\n    onUnmounted(() => {\n        containerObserver?.disconnect();\n    });\n\n    return stackButtons;\n};\n","<template>\n    <div ref=\"buttonActions\" class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div\n                v-for=\"(button, index) in reversedActionsList\"\n                :key=\"index\"\n                ref=\"buttons\"\n                class=\"b-button-actions__button-wrapper\"\n            >\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, ref } from 'vue';\n    import BentoButton from '../../button.vue';\n    import {\n        BentoButtonActionObject,\n        BentoButtonActionsLayout,\n    } from '@/core/components/button-actions/button-actions.types';\n    import type { BentoButtonActionsProps } from './button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\n    import { useStackButtons } from '@/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons';\n\n    const props = defineProps({\n  actions: null,\n  inverse: { type: Boolean, default: false },\n  layout: { default: BentoButtonActionsLayout.BUTTONS_END }\n});\n\n    const buttonActions = ref<HTMLDivElement>(null);\n    const buttons = ref<HTMLDivElement[]>(null);\n    const stackButtons = useStackButtons(buttonActions, buttons, props.actions);\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        [`b-button-actions--stacked-buttons`]: stackButtons.value,\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","BentoLoadingButtonState","BentoLoadingButtonState2","__default__$1","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","conditionalClasses","computed","props","isInverseLoadingIndicator","isCritical","e","emit","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","CONTAINER_QUERY","BUTTONS_GAP","BButtonActionsButtonsEndColumnGap","useStackButtons","buttonActions","buttons","actions","originalButtonsWidth","ref","containerObserver","buttonActionsWithMenu","menu","stackButtons","inject","container","computedButtons","areButtonsWiderThanContainer","updateOriginalButtonsWidth","buttonsWidth","_a","acc","button","containersWidth","watch","nextTick","onMounted","observeSizeOfElement","onUnmounted","__default__","reversedActionsList","generateButtonVariantByIndex","actionIndex","lastActionIndex"],"mappings":"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"}

package/dist/chunks/{calendar.Bq67h02Z.js → calendar.D4dMXwc0.js}

@@ -8,7 +8,7 @@ import { n as ae } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { C as Le, a as Re } from "./chevron-left.DOMTgGel.js";
 import { g as Ye } from "./generate-uid.NJ8tVoha.js";
 import { u as Ae } from "./i18n.BQkEbtPM.js";
-import { h as We } from "./index.-wO_BQCb.js";
+import { h as We } from "./index.48Mn1OCp.js";
 import { a as Ce } from "./keyboard-navigation.pB8weElW.js";
 import "../assets/calendar.css";
 function ee(e, t) {
@@ -816,7 +816,7 @@ var Mt = function() {
     return a.moveToNextYear(r, !0);
   } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [n(a.ChevronRightIcon, { attrs: { "svg-title": a.t("nextYear") } })];
-  }, proxy: !0 }], null, !1, 3324005926) }) : t._e()], 1)], 1), n("table", { staticClass: "b-calendar-month__month-container", attrs: { role: "grid", "aria-labelledby": a.yearLabelId } }, [n("tbody", t._l(a.monthRows, function(r, s) {
+  }, proxy: !0 }], null, !1, 3324005926) }) : t._e()], 1)], 1), n("table", { staticClass: "b-calendar-year__year-container", attrs: { role: "grid", "aria-labelledby": a.yearLabelId } }, [n("tbody", t._l(a.monthRows, function(r, s) {
     return n("tr", { key: s }, t._l(r, function(u, o) {
       return n(a.CalendarYearMonth, { key: `calendar-month-${o}`, ref: a.addDayRef(u), refInFor: !0, attrs: { month: u, disabled: a.isDateDisabled(u), selected: a.isSelectedDate(u), variant: a.monthVariant(u) }, on: { click: a.onMonthClicked, mouseover: function(c) {
         return a.emit("mouseover", u);
@@ -829,7 +829,7 @@ var Mt = function() {
   wt,
   !1,
   null,
-  "be54c469"
+  "88d584a6"
 );
 const we = St.exports, Tt = ({ selectedDate: e }, t) => {
   const n = Se({
@@ -1127,4 +1127,4 @@ export {
   se as s,
   It as u
 };
-//# sourceMappingURL=calendar.Bq67h02Z.js.map
+//# sourceMappingURL=calendar.D4dMXwc0.js.map