@adyen/bento-vue2 1.68.2 → 1.70.0

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

@@ -1,194 +0,0 @@
-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.hF-nD1Og.js";
-import { o as R } from "./resize.Bqks3WUm.js";
-import { f as x } from "./es6.n1ewaW31.js";
-import { B as U } from "./loading-indicator.z8COalOc.js";
-import { C as $ } from "./cross-circle-fill.DTDtgLMf.js";
-import { C as F } from "./checkmark-circle-fill.BttTCjrM.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 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": {
-    failed: "Failed",
-    succeded: "Succeded"
-  },
-  "ja-JP": {
-    failed: "失敗しました"
-  },
-  "pt-BR": {
-    failed: "Falha"
-  }
-}, w = {
-  i18n: { messages: P }
-}, j = /* @__PURE__ */ y({
-  ...w,
-  __name: "loading-button",
-  props: {
-    /**
-     * Reduces sizing of button
-     */
-    condensed: {
-      type: l.props.condensed.type,
-      default: !1
-    },
-    /**
-     * Displays loading-button as critical
-     */
-    critical: {
-      type: l.props.critical.type,
-      default: !1
-    },
-    /**
-     * Disables button functonality
-     */
-    disabled: {
-      type: l.props.disabled.type,
-      default: !1
-    },
-    /**
-     * Sets color set to inverse
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * State of the button.
-     * @values start, loading, success, fail
-     */
-    state: {
-      type: String,
-      default: i.START,
-      validator: (a) => Object.values(i).includes(a)
-    },
-    /**
-     * Types of flavour of Button
-     */
-    variant: {
-      type: l.props.variant.type,
-      default: "primary",
-      validator: l.props.variant.validator
-    }
-  },
-  emits: ["click"],
-  setup(a, { emit: t }) {
-    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,
-      "b-loading-button--inverse": e.inverse
-    })), c = u(
-      () => e.variant === "primary" && !e.inverse || e.variant !== "primary" && e.inverse
-    ), f = u(
-      () => e.critical && e.state === i.START || e.state === i.FAIL
-    );
-    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: U, BentoButton: l, Cross: $, Checkmark: F };
-  }
-});
-var M = function() {
-  var t = this, e = t._self._c, s = t._self._setupProxy;
-  return e(s.BentoButton, { staticClass: "b-loading-button", class: s.conditionalClasses, attrs: { critical: s.isCritical, variant: t.variant, condensed: t.condensed, disabled: t.disabled, inverse: t.inverse }, on: { "!click": function(n) {
-    return n.stopPropagation(), s.onClick.apply(null, arguments);
-  } }, scopedSlots: t._u([t.state === "start" && s.hasSlot("iconLeft") ? { key: "iconLeft", fn: function() {
-    return [t._t("iconLeft")];
-  }, 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__ */ I(
-  j,
-  M,
-  V,
-  !1,
-  null,
-  "86f46480"
-);
-const H = z.exports, J = Symbol(
-  "button actions with menu container injection key"
-), K = 242, C = parseInt(x, 10), Y = (a, t, e) => {
-  const s = p(0);
-  let n = null;
-  const { buttonActionsWithMenu: r, menu: d, stackButtons: c } = E(J, {
-    buttonActionsWithMenu: p(null),
-    menu: p(null),
-    stackButtons: p(!1)
-  }), f = u(() => r.value ?? a.value), _ = u(() => d.value ? [...t.value, d.value.$el] : t.value), o = (v) => {
-    var g;
-    const S = (g = _.value) == null ? void 0 : g.reduce(
-      (T, A) => T + A.clientWidth + C,
-      -C - 1
-    ), m = f.value.clientWidth;
-    return v && (s.value = m >= K && !c.value ? S : 0), s.value > m;
-  };
-  return N(
-    () => e,
-    () => {
-      L(() => {
-        c.value = o(!0);
-      });
-    },
-    { deep: !0 }
-  ), O(() => {
-    n = R(f.value, () => {
-      c.value = o(s.value === 0);
-    });
-  }), b(() => {
-    n == null || n.disconnect();
-  }), c;
-}, Q = {}, q = /* @__PURE__ */ y({
-  ...Q,
-  __name: "button-actions",
-  props: {
-    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 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
-    }));
-    return { __sfc: !0, props: t, buttonActions: e, buttons: s, stackButtons: n, reversedActionsList: r, generateButtonVariantByIndex: d, conditionalClasses: c, generateButtonEvents: (o) => (o == null ? void 0 : o.event) !== void 0 ? {
-      click: o.event
-    } : {}, isIconOnly: (o) => o.iconOnly && (o.iconLeft || o.iconRight || o.icon), BentoButton: l, BentoLoadingButton: H };
-  }
-});
-var X = function() {
-  var t = this, e = t._self._c, s = t._self._setupProxy;
-  return e("div", { ref: "buttonActions", staticClass: "b-button-actions" }, [e("div", { staticClass: "b-button-actions__container-wrapper", class: s.conditionalClasses, attrs: { role: "group" } }, t._l(s.reversedActionsList, function(n, r) {
-    return e("div", { key: r, ref: "buttons", refInFor: !0, staticClass: "b-button-actions__button-wrapper" }, [n.state ? e(s.BentoLoadingButton, t._g({ attrs: { condensed: n.condensed, critical: n.critical, disabled: n.disabled, inverse: t.inverse, state: n.state, variant: n.variant || s.generateButtonVariantByIndex(r) } }, s.generateButtonEvents(n)), [t._v(" " + t._s(n.title) + " ")]) : e(s.BentoButton, t._g({ attrs: { condensed: n.condensed, critical: n.critical, disabled: n.disabled, inverse: t.inverse, link: n.link, variant: n.variant || s.generateButtonVariantByIndex(r) }, scopedSlots: t._u([n.icon || n.iconLeft ? { key: "iconLeft", fn: function() {
-      return [e(n.icon || n.iconLeft, { tag: "component", attrs: { "svg-title": n.title } })];
-    }, proxy: !0 } : null, s.isIconOnly(n) ? null : { key: "default", fn: function() {
-      return [t._v(" " + t._s(n.title) + " ")];
-    }, proxy: !0 }, n.iconRight ? { key: "iconRight", fn: 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__ */ I(
-  q,
-  X,
-  Z,
-  !1,
-  null,
-  "5ea3e6cd"
-);
-const dt = tt.exports;
-export {
-  dt as B,
-  B as a,
-  k as b,
-  G as c,
-  H as d,
-  i as e,
-  J as f
-};
-//# sourceMappingURL=button-actions.Ju27CRNG.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions.Ju27CRNG.js","sources":["../../src/components/button/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 '@adyen/bento-core/src/components/button/button.types';\nimport type { BentoLoadingButtonState } from '@adyen/bento-core/src/components/loading-button/loading-button.types';\nimport type { VueNodeElement } from '@/types';\n\nexport interface BentoButtonActionObject extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: VueNodeElement;\n    iconLeft?: VueNodeElement;\n    iconRight?: VueNodeElement;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: 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}\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\nexport interface BentoButtonActionsProps {\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: BentoButtonActionsList;\n\n    /**\n     * Sets the Button Actions to color scheme inverse\n     */\n    inverse?: boolean;\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?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n}\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 { BentoButtonActionObject, BentoButtonActionsLayout } from './button-actions.types';\n    import type { BentoButtonActionsProps } from './button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\n    import { useStackButtons } from './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/button.hF-nD1Og.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.hF-nD1Og.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n    TERTIARY_WITH_BACKGROUND = 'tertiary-with-background',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"{ ...conditionalClasses, ...getIconOnlyClass() }\"\n        @click.capture=\"onClickButton\"\n    >\n        <span\n            v-if=\"hasSlot('iconLeft')\"\n            class=\"b-button__icon-left\"\n            data-testid=\"icon-button-left\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-button__label\">\n            <slot />\n        </bento-typography>\n        <span\n            v-if=\"hasSlot('iconRight')\"\n            class=\"b-button__icon-right\"\n            data-testid=\"icon-button-right\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, useAttrs, useSlots } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { Booleanish } from '@/types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoLink, BentoLinkVariant } from '@/components/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        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Displays button as critical\n         */\n        critical: { type: Boolean, default: false },\n\n        /**\n         * Disables button functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: { type: Boolean, default: false },\n\n        /**\n         * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n         */\n        link: { type: Object, default: undefined },\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         * Types of flavour of Button\n         * @values primary, secondary, tertiary, tertiary-with-background\n         */\n        variant: {\n            type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n            default: BentoButtonVariant.PRIMARY,\n            validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"blur\", \"click\", \"focus\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const componentType = computed(() => {\n        if (props?.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return props.disabled ? 'span' : 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            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the button is a disabled link, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers.\n                   */\n                  'aria-disabled': props.disabled ? 'true' : undefined,\n                  role: props.disabled ? 'link' : undefined,\n              }\n    );\n\n    const variantClass = computed(() => ({\n        [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        ...variantClass.value,\n        [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n        [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n        [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n    }));\n\n    const getIconOnlyClass = () => ({\n        [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'),\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</script>\n\n<script lang=\"ts\">\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @example\n     * import { BentoButton } from '@adyen/bento-vue2';\n     * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             variant=\"secondary\"\n     *         >\n     *              <template #iconLeft>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *\n     *              Button text\n     *\n     *              <template #iconRight>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","props","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"mappings":";;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,2BAAA,4BAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjGAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SAMIA,EAAA,WAAA,SAAAC,IAEJ,QAAO,GAEXC,IAAAH,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAI,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,QACe,kBAAAC,IAAAZ,EAAA,eAAA,MAAA,gBAAAY,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAN;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAI,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAM,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAN,EAAA,WAAA,SAAA;AAAA,QAMiC,MAAAA,EAAA,WAAA,SAAA;AAAA,MACX;AAAA,IACpC,GAGVO,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAC,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAX,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,SAAA,EAAA,GAAAW,EAAA;AAAA,MACuC,CAAA,aAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACD,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAW,EAAA;AAAA,IACD,EAAA;6LAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAX,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAa,MAAA;AACI,MAAAT,EAAA,YAGIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAC,EAAA,SAAAD,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;"}