@adyen/bento-vue3 1.60.0 → 1.60.1

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

@@ -0,0 +1,174 @@
+import { ref as m, watch as y, nextTick as f, defineComponent as A, toRef as B, computed as v, provide as b, createElementBlock as N, openBlock as h, createElementVNode as T, normalizeClass as w, createVNode as E, createBlock as k, createCommentVNode as C, unref as I } from "vue";
+import { M as W, B as S } from "./menu.BcXV6WhV.js";
+import { a as O } from "./popover.KFyR9BXF.js";
+import { c as _, f as R, B as M } from "./button-actions.1MReMMnL.js";
+import { u as g } from "./index.FNUaPG4G.js";
+import { _ as U } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/button-actions-with-menu.css";
+const D = (a) => {
+  const { breakpoint: e, container: l, defaultActionsCount: c, offset: n } = a, { width: d } = g(), o = m(c), r = 150, u = async () => {
+    var s;
+    await f();
+    const i = l.value.clientWidth, t = r * o.value + (((s = n == null ? void 0 : n.value) == null ? void 0 : s.offsetWidth) ?? 0) + r;
+    i >= t && o.value < c && (o.value += 1, u());
+  }, p = async () => {
+    var s;
+    await f();
+    const i = l.value.clientWidth, t = r * o.value + (((s = n == null ? void 0 : n.value) == null ? void 0 : s.offsetWidth) ?? 0);
+    i < t && o.value > 0 && (o.value -= 1, p());
+  };
+  return y([d, l], async ([i, t], [s]) => {
+    if (!t || !c || i > e)
+      return;
+    await f(), i > s ? u() : p();
+  }), {
+    displayedActionsCount: o
+  };
+}, L = { class: "b-button-actions-with-menu" }, x = {}, V = /* @__PURE__ */ A({
+  ...x,
+  __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
+    },
+    /**
+     * Defines the layout in which the button actions is presented.
+     *
+     * @see {@link BentoButtonActionsLayout}
+     *
+     */
+    actionsLayout: {
+      type: String,
+      default: _.BUTTONS_END
+    },
+    /**
+     * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.
+     */
+    disableResponsiveBehavior: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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 min-width breakpoint to hide the button actions.
+     *
+     * For example, a value of 200 means that buttons will be hidden at <= 200px.
+     *
+     * Defaults to 0 i.e. it shows all buttons.
+     */
+    hideDisplayedActionsBreakpoint: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The position of where the menu should open.
+     */
+    menuPosition: {
+      type: String,
+      default: "bottom-start",
+      validator: (a) => Object.values(O).includes(a)
+    }
+  },
+  setup(a) {
+    const e = a, l = B(e, "inverse"), c = m(null), n = m(null), d = m(!1), o = v(() => {
+      const t = e.hideDisplayedActionsBreakpoint ? u.value : e.displayedActions;
+      return e.actions.slice(0, t);
+    }), r = v(() => {
+      var t;
+      return (t = n == null ? void 0 : n.value) == null ? void 0 : t.$el;
+    }), { displayedActionsCount: u } = D({
+      breakpoint: e.hideDisplayedActionsBreakpoint,
+      container: c,
+      defaultActionsCount: e.displayedActions,
+      offset: r
+    });
+    b(W, l), e.disableResponsiveBehavior || b(R, { buttonActionsWithMenu: c, menu: n, stackButtons: d });
+    const p = v(() => ({
+      "b-button-actions-with-menu__container-wrapper--buttons-end": e.actionsLayout === _.BUTTONS_END,
+      "b-button-actions-with-menu__container-wrapper--buttons-start": e.actionsLayout === _.BUTTONS_START,
+      "b-button-actions-with-menu__container-wrapper--stacked-buttons": d.value
+    })), i = v(
+      () => u.value !== void 0 && u.value < e.actions.length ? e.actions.slice(u.value, e.actions.length).map((t) => ({
+        text: t.title,
+        handler: t.event,
+        icon: t.icon,
+        critical: t.critical,
+        disabled: t.disabled
+      })) : []
+    );
+    return (t, s) => (h(), N("div", L, [
+      T("div", {
+        ref_key: "buttonActionsWithMenu",
+        ref: c,
+        role: "group",
+        class: w(["b-button-actions-with-menu__container-wrapper", p.value])
+      }, [
+        E(I(M), {
+          actions: o.value,
+          inverse: a.inverse,
+          layout: a.actionsLayout
+        }, null, 8, ["actions", "inverse", "layout"]),
+        i.value.length ? (h(), k(S, {
+          key: 0,
+          ref_key: "menu",
+          ref: n,
+          data: i.value,
+          "menu-position": a.menuPosition
+        }, null, 8, ["data", "menu-position"])) : C("", !0)
+      ], 2)
+    ]));
+  }
+}), q = /* @__PURE__ */ U(V, [["__scopeId", "data-v-0fd9bb45"]]);
+export {
+  q as B
+};
+//# sourceMappingURL=button-actions-with-menu.DG5t9zB7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions-with-menu.DG5t9zB7.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, Ref, ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n    breakpoint?: number;\n    container: Ref<HTMLElement>;\n    defaultActionsCount: number;\n    offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n    const { breakpoint, container, defaultActionsCount, offset } = props;\n\n    const { width: windowWidth } = useWindowSize();\n\n    const displayedActionsCount = ref<number>(defaultActionsCount);\n\n    const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n    const showActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth =\n            AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n            (offset?.value?.offsetWidth ?? 0) +\n            AVERAGE_BUTTON_WIDTH;\n\n        // Only add actions if there's enough space and we haven't reached max\n        if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount) {\n            displayedActionsCount.value += 1;\n\n            showActions(); // keep trying to show more\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n\n        const availableSpace = container.value.clientWidth;\n        const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n        // Hide actions if they overflow the container\n        if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n            displayedActionsCount.value -= 1;\n\n            hideActions(); // keep hiding until it fits\n        }\n    };\n\n    watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n        if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n            return;\n        }\n\n        await nextTick();\n\n        const isIncreasing = newWidth > oldWidth;\n\n        if (isIncreasing) {\n            showActions();\n        } else {\n            hideActions();\n        }\n    });\n\n    return {\n        displayedActionsCount,\n    };\n};\n","<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoPopoverPositions } from '@/components/popover';\n    import { computed, PropType, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\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         * Defines the layout in which the button actions is presented.\n         *\n         * @see {@link BentoButtonActionsLayout}\n         *\n         */\n        actionsLayout: {\n            type: String as PropType<`${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\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        disableResponsiveBehavior: {\n            type: Boolean,\n            default: false,\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 min-width breakpoint to hide the button actions.\n         *\n         * For example, a value of 200 means that buttons will be hidden at <= 200px.\n         *\n         * Defaults to 0 i.e. it shows all buttons.\n         */\n        hideDisplayedActionsBreakpoint: {\n            type: Number,\n            default: 0,\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 inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref(null);\n    const stackButtons = ref(false);\n\n    const computedActions = computed(() => {\n        const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n            ? displayedActionsCount.value\n            : props.displayedActions;\n\n        return props.actions.slice(0, displayedActionsLimit);\n    });\n    const computedMenuRef = computed(() => menu?.value?.$el);\n\n    const { displayedActionsCount } = useResponsiveActions({\n        breakpoint: props.hideDisplayedActionsBreakpoint,\n        container: buttonActionsWithMenu,\n        defaultActionsCount: props.displayedActions,\n        offset: computedMenuRef,\n    });\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--buttons-end`]:\n            props.actionsLayout === BentoButtonActionsLayout.BUTTONS_END,\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]:\n            props.actionsLayout === BentoButtonActionsLayout.BUTTONS_START,\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() =>\n        displayedActionsCount.value !== undefined && displayedActionsCount.value < props.actions.length\n            ? (props.actions.slice(displayedActionsCount.value, 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":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","_a","hideActions","watch","newWidth","containerEl","oldWidth","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","BentoButtonActionsLayout","computedMenuActions","el"],"mappings":";;;;;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,CAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,WAAAO,IAAAV,KAAA,gBAAAA,EAAA,UAAA,gBAAAU,EAAA,gBAAA,KAAAL;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,MACII,EAAA,SAAA,GAEAG,EAAA;AAAA,EACJ,GAGJK,IAAA,YAAA;;AACI,UAAAJ,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,WAAAO,IAAAV,KAAA,gBAAAA,EAAA,UAAA,gBAAAU,EAAA,gBAAA;AAGA,IAAAF,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEAQ,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAX,GAAAH,CAAA,GAAA,OAAA,CAAAe,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAf,KAAAc,IAAAhB;AACI;AAGJ,UAAAU,EAAA,GAEAM,IAAAE,IAGIT,EAAA,IAEAK,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAR;AAAA,EACH;AAER,gDC4JIa,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5KA,UAAApB,IAAAqB,GAkGAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAA;;AAAA,cAAAd,IAAAW,KAAA,gBAAAA,EAAA,UAAA,gBAAAX,EAAA;AAAA,KAAA,GAEA,EAAA,uBAAAP,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAxB,EAAA;AAAA,MACgB,QAAA8B;AAAA,IACnB,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAAmC,EAAA;AAAA,MAEc,gEAAAnC,EAAA,kBAAAmC,EAAA;AAAA,MAEA,kEAAAT,EAAA;AAAA,IAC4B,EAAA,GAGrFU,IAAAR;AAAA,MAA4B,MAAArB,EAAA,UAAA,UAAAA,EAAA,QAAAP,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAqC,OAAA;AAAA,QAEiE,MAAAA,EAAA;AAAA,QACtE,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.1MReMMnL.js

@@ -0,0 +1,264 @@
+import { defineComponent as O, useSlots as P, computed as g, createBlock as v, openBlock as i, withModifiers as V, normalizeClass as R, createSlots as U, withCtx as y, renderSlot as N, unref as m, createElementVNode as W, createCommentVNode as j, ref as C, inject as x, watch as H, nextTick as z, onMounted as J, onUnmounted as K, createElementBlock as S, Fragment as Y, renderList as Q, mergeProps as A, toHandlers as b, createTextVNode as h, toDisplayString as B, resolveDynamicComponent as E } from "vue";
+import { B as p } from "./button.CVZJTZv0.js";
+import { o as q } from "./resize.Bqks3WUm.js";
+import { f as X } from "./es6.n1ewaW31.js";
+import { B as Z } from "./loading-indicator.DEepb9Wl.js";
+import { C as ee } from "./cross-circle-fill.B7YpDLTK.js";
+import { C as te } from "./checkmark-circle-fill.jicbqe7k.js";
+import { u as ne } from "./use-has-slot.B7eQSabc.js";
+import { u as ae } from "./i18n.B6g5VX0q.js";
+import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/button-actions.css";
+var D = /* @__PURE__ */ ((e) => (e.BUTTONS_END = "buttons-end", e.FILL_CONTAINER = "fill-container", e.SPACE_BETWEEN = "space-between", e.VERTICAL_STACK = "vertical-stack", e))(D || {}), F = /* @__PURE__ */ ((e) => (e.BUTTONS_START = "buttons-start", e))(F || {});
+const se = { ...D, ...F };
+var s = /* @__PURE__ */ ((e) => (e.START = "start", e.LOADING = "loading", e.SUCCESS = "success", e.FAIL = "fail", e))(s || {});
+const w = {
+  "en-US": {
+    failed: "Failed",
+    succeded: "Succeded"
+  },
+  "ja-JP": {
+    failed: "失敗しました"
+  },
+  "pt-BR": {
+    failed: "Falha"
+  }
+}, ie = {
+  class: "b-loading-button__icon",
+  "data-testid": "loading-button-rotating-icon"
+}, oe = {
+  i18n: { messages: w }
+}, le = /* @__PURE__ */ O({
+  ...oe,
+  __name: "loading-button",
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: {
+      type: p.props.condensed.type,
+      default: !1
+    },
+    /**
+     * Displays loading-button as critical
+     */
+    critical: {
+      type: p.props.critical.type,
+      default: !1
+    },
+    /**
+     * Disables button functonality
+     */
+    disabled: {
+      type: p.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: s.START,
+      validator: (e) => Object.values(s).includes(e)
+    },
+    /**
+     * Types of flavour of Button
+     */
+    variant: {
+      type: p.props.variant.type,
+      default: "primary",
+      validator: p.props.variant.validator
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: l }) {
+    const n = e, c = l, r = P(), _ = ne(r), { t: d } = ae({ messages: w }), u = g(() => ({
+      [`b-loading-button--${n.variant}-${s.LOADING}`]: n.state === s.LOADING && !n.disabled,
+      "b-loading-button--loading": n.state === s.LOADING && !n.disabled,
+      [`b-loading-button--${n.variant}-${s.SUCCESS}`]: n.state === s.SUCCESS,
+      "b-loading-button--inverse": n.inverse
+    })), f = g(
+      () => n.variant === "primary" && !n.inverse || n.variant !== "primary" && n.inverse
+    ), T = g(
+      () => n.critical && n.state === s.START || n.state === s.FAIL
+    ), a = (o) => {
+      o.stopPropagation(), n.state !== s.LOADING && c("click", o);
+    };
+    return (o, t) => (i(), v(p, {
+      critical: T.value,
+      variant: e.variant,
+      condensed: e.condensed,
+      disabled: e.disabled,
+      inverse: e.inverse,
+      class: R(["b-loading-button", u.value]),
+      onClickCapture: V(a, ["stop"])
+    }, U({
+      default: y(() => [
+        N(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 2
+    }, [
+      e.state === "start" && m(_)("iconLeft") ? {
+        name: "iconLeft",
+        fn: y(() => [
+          N(o.$slots, "iconLeft", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : e.state !== "start" ? {
+        name: "iconLeft",
+        fn: y(() => [
+          W("span", ie, [
+            e.state === "fail" ? (i(), v(m(ee), {
+              key: 0,
+              "svg-title": m(d)("failed")
+            }, null, 8, ["svg-title"])) : e.state === "success" ? (i(), v(m(te), {
+              key: 1,
+              "svg-title": m(d)("succeded")
+            }, null, 8, ["svg-title"])) : e.state === "loading" ? (i(), v(m(Z), {
+              key: 2,
+              small: "",
+              inverse: f.value
+            }, null, 8, ["inverse"])) : j("", !0)
+          ])
+        ]),
+        key: "1"
+      } : void 0
+    ]), 1032, ["critical", "variant", "condensed", "disabled", "inverse", "class"]));
+  }
+}), ce = /* @__PURE__ */ $(le, [["__scopeId", "data-v-07b9c537"]]), re = Symbol(
+  "button actions with menu container injection key"
+), de = 242, L = parseInt(X, 10), ue = (e, l, n) => {
+  const c = C(0);
+  let r = null;
+  const { buttonActionsWithMenu: _, menu: d, stackButtons: u } = x(re, {
+    buttonActionsWithMenu: C(null),
+    menu: C(null),
+    stackButtons: C(!1)
+  }), f = g(() => _.value ?? e.value), T = g(() => d.value ? [...l.value, d.value.$el] : l.value), a = (o) => {
+    var I;
+    const t = (I = T.value) == null ? void 0 : I.reduce(
+      (G, M) => G + M.clientWidth + L,
+      -L - 1
+    ), k = f.value.clientWidth;
+    return o && (c.value = k >= de && !u.value ? t : 0), c.value > k;
+  };
+  return H(
+    () => n,
+    () => {
+      z(() => {
+        u.value = a(!0);
+      });
+    },
+    { deep: !0 }
+  ), J(() => {
+    r = q(f.value, () => {
+      u.value = a(c.value === 0);
+    });
+  }), K(() => {
+    r == null || r.disconnect();
+  }), u;
+}, ve = {}, fe = /* @__PURE__ */ O({
+  ...ve,
+  __name: "button-actions",
+  props: {
+    actions: {},
+    inverse: { type: Boolean, default: !1 },
+    layout: { default: se.BUTTONS_END }
+  },
+  setup(e) {
+    const l = e, n = C(null), c = C(null), r = ue(n, c, l.actions), _ = g(() => l.actions.slice().reverse()), d = (a) => {
+      const o = l.actions.length - 1;
+      return a === o ? "primary" : "secondary";
+    }, u = g(() => ({
+      [`b-button-actions--${l.layout}`]: !0,
+      "b-button-actions--stacked-buttons": r.value
+    })), f = (a) => (a == null ? void 0 : a.event) !== void 0 ? {
+      click: a.event
+    } : {}, T = (a) => a.iconOnly && (a.iconLeft || a.iconRight || a.icon);
+    return (a, o) => (i(), S("div", {
+      ref_key: "buttonActions",
+      ref: n,
+      class: "b-button-actions"
+    }, [
+      W("div", {
+        class: R(["b-button-actions__container-wrapper", u.value]),
+        role: "group"
+      }, [
+        (i(!0), S(Y, null, Q(_.value, (t, k) => (i(), S("div", {
+          key: k,
+          ref_for: !0,
+          ref_key: "buttons",
+          ref: c,
+          class: "b-button-actions__button-wrapper"
+        }, [
+          t.state ? (i(), v(m(ce), A({
+            key: 0,
+            condensed: t.condensed,
+            critical: t.critical,
+            disabled: t.disabled,
+            inverse: a.inverse,
+            state: t.state,
+            variant: t.variant || d(k)
+          }, b(f(t))), {
+            default: y(() => [
+              h(B(t.title), 1)
+            ]),
+            _: 2
+          }, 1040, ["condensed", "critical", "disabled", "inverse", "state", "variant"])) : (i(), v(p, A({
+            key: 1,
+            condensed: t.condensed,
+            critical: t.critical,
+            disabled: t.disabled,
+            inverse: a.inverse,
+            link: t.link,
+            variant: t.variant || d(k)
+          }, b(f(t))), U({ _: 2 }, [
+            t.icon || t.iconLeft ? {
+              name: "iconLeft",
+              fn: y(() => [
+                (i(), v(E(t.icon || t.iconLeft), {
+                  "svg-title": t.title
+                }, null, 8, ["svg-title"]))
+              ]),
+              key: "0"
+            } : void 0,
+            T(t) ? void 0 : {
+              name: "default",
+              fn: y(() => [
+                h(B(t.title), 1)
+              ]),
+              key: "1"
+            },
+            t.iconRight ? {
+              name: "iconRight",
+              fn: y(() => [
+                (i(), v(E(t.iconRight), {
+                  "svg-title": t.title
+                }, null, 8, ["svg-title"]))
+              ]),
+              key: "2"
+            } : void 0
+          ]), 1040, ["condensed", "critical", "disabled", "inverse", "link", "variant"]))
+        ]))), 128))
+      ], 2)
+    ], 512));
+  }
+}), Ne = /* @__PURE__ */ $(fe, [["__scopeId", "data-v-0b415008"]]);
+export {
+  Ne as B,
+  D as a,
+  F as b,
+  se as c,
+  ce as d,
+  s as e,
+  re as f
+};
+//# sourceMappingURL=button-actions.1MReMMnL.js.map

package/dist/chunks/button-actions.1MReMMnL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions.1MReMMnL.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../../core/src/components/loading-button/loading-button.types.ts","../../../vue2/src/components/button/components/loading-button/loading-button.vue","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.keys.ts","../../../vue2/src/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons.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","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<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\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 = withDefaults(defineProps<BentoButtonActionsProps>(), {\n        inverse: false,\n        layout: 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","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","t","useI18n","conditionalClasses","computed","isInverseLoadingIndicator","isCritical","onClick","e","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","generateButtonEvents","isIconOnly"],"mappings":"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"}

package/dist/chunks/button.CVZJTZv0.js

@@ -0,0 +1,120 @@
+import { defineComponent as I, useAttrs as C, useSlots as N, computed as i, createBlock as f, openBlock as r, resolveDynamicComponent as T, mergeProps as A, withCtx as m, createElementBlock as y, createCommentVNode as c, unref as n, renderSlot as d } from "vue";
+import { B as O } from "./typography.DN5eC5ch.js";
+import { u as $ } from "./use-has-slot.B7eQSabc.js";
+import { B as L, a as Y } from "./link.CTH1xj0i.js";
+import { _ as B } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/button.css";
+var u = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.TERTIARY = "tertiary", t.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", t))(u || {}), s = /* @__PURE__ */ ((t) => (t.CONDENSED = "condensed", t.DESTRUCTIVE = "critical", t.DISABLED = "disabled", t.ICON_ONLY = "icon-only", t.INVERSE = "inverse", t))(s || {});
+const U = ["aria-hidden"], w = ["aria-hidden"], x = {
+  name: "bento-button"
+}, V = /* @__PURE__ */ I({
+  ...x,
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Displays button as critical
+     */
+    critical: { type: Boolean, default: !1 },
+    /**
+     * Disables button functionality
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Sets color set to inverse
+     */
+    inverse: { type: Boolean, default: !1 },
+    /**
+     * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.
+     */
+    link: { type: Object, default: void 0 },
+    /**
+     * The default behavior of the button.
+     * Possible values are: 'button', 'reset', 'submit'
+     */
+    type: {
+      type: String,
+      default: "button"
+    },
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary, tertiary-with-background
+     */
+    variant: {
+      type: String,
+      default: u.PRIMARY,
+      validator: (t) => Object.values(u).includes(t)
+    }
+  },
+  emits: ["blur", "click", "focus", "keydown.esc"],
+  setup(t, { emit: v }) {
+    const e = t, _ = v, b = C(), E = N(), o = $(E), p = i(() => (e == null ? void 0 : e.link) !== void 0 ? L : "button"), k = i(() => {
+      var a, l;
+      return {
+        "aria-controls": (a = b["aria-controls"]) == null ? void 0 : a.toString(),
+        "aria-expanded": (l = b["aria-expanded"]) == null ? void 0 : l.toString()
+      };
+    }), S = i(
+      () => p.value === "button" ? {
+        ...k.value,
+        disabled: e.disabled,
+        type: e.type
+      } : { ...e.link, disableTypography: !0, variant: Y.DEFAULT, isButton: !0 }
+    ), h = i(() => ({
+      [`b-button--${e.variant}${e.critical ? `-${s.DESTRUCTIVE}` : ""}`]: !0
+    })), R = i(() => ({
+      ...h.value,
+      [`b-button--${s.CONDENSED}`]: e.condensed,
+      [`b-button--${s.DISABLED}`]: e.disabled,
+      [`b-button--${s.INVERSE}`]: e.inverse
+    })), g = () => ({
+      [`b-button--${s.ICON_ONLY}`]: !o("default")
+    }), D = (a) => {
+      e.disabled ? (a.preventDefault(), a.stopPropagation()) : _("click", a);
+    };
+    return (a, l) => (r(), f(T(p.value), A(S.value, {
+      class: ["b-button", { ...R.value, ...g() }],
+      onClickCapture: D
+    }), {
+      default: m(() => [
+        n(o)("iconLeft") ? (r(), y("span", {
+          key: 0,
+          class: "b-button__icon-left",
+          "data-testid": "icon-button-left",
+          "aria-hidden": n(o)("default") ? "true" : null
+        }, [
+          d(a.$slots, "iconLeft", {}, void 0, !0)
+        ], 8, U)) : c("", !0),
+        n(o)("default") ? (r(), f(n(O), {
+          key: 1,
+          el: "span",
+          variant: "body",
+          stronger: "",
+          class: "b-button__label"
+        }, {
+          default: m(() => [
+            d(a.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        })) : c("", !0),
+        n(o)("iconRight") ? (r(), y("span", {
+          key: 2,
+          class: "b-button__icon-right",
+          "data-testid": "icon-button-right",
+          "aria-hidden": n(o)("default") ? "true" : null
+        }, [
+          d(a.$slots, "iconRight", {}, void 0, !0)
+        ], 8, w)) : c("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), K = /* @__PURE__ */ B(V, [["__scopeId", "data-v-a2e09f98"]]);
+export {
+  K as B,
+  u as a,
+  s as b
+};
+//# sourceMappingURL=button.CVZJTZv0.js.map

package/dist/chunks/button.CVZJTZv0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.CVZJTZv0.js","sources":["../../../core/src/components/button/button.types.ts","../../../vue2/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<{\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur');\n\n        /**\n         * Emitted when the button is clicked\n         */\n        (e: 'click', event: MouseEvent);\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus');\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: 'keydown.esc');\n    }>();\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            return BentoLink;\n        }\n        return 'button';\n    });\n    const ariaAttributes = computed(() => ({\n        'aria-controls': attrs['aria-controls']?.toString() as string,\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        componentType.value === 'button'\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT, isButton: true }\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__","props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","getIconOnlyClass","onClickButton","e"],"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;gDC2LRE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApJA,UAAAC,IAAAC,GA8CAC,IAAAC,GAsBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIX,KAAA,gBAAAA,EAAA,UAAA,SACIY,IAEJ,QAAO,GAEXC,IAAAF,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAG,IAAAV,EAAA,eAAA,MAAA,gBAAAU,EAAA;AAAA,QACe,kBAAAC,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAL;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAG,EAAA;AAAA,QACsB,UAAAb,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAiB,EAAA,SAAA,UAAA,GAAA;AAAA,IAE4E,GAGtGC,IAAAP,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAX,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAH,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGsB,IAAAR,EAAA,OAAA;AAAA,MAA2C,GAAAO,EAAA;AAAA,MACvB,CAAA,aAAArB,EAAA,SAAA,EAAA,GAAAG,EAAA;AAAA,MACuC,CAAA,aAAAH,EAAA,QAAA,EAAA,GAAAG,EAAA;AAAA,MACD,CAAA,aAAAH,EAAA,OAAA,EAAA,GAAAG,EAAA;AAAA,IACD,EAAA,GAGzDoB,IAAA,OAAA;AAAA,MAAgC,CAAA,aAAAvB,EAAA,SAAA,EAAA,GAAA,CAAAW,EAAA,SAAA;AAAA,IACuC,IAGvEa,IAAA,CAAAC,MAAA;AACI,MAAAtB,EAAA,YAGIsB,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHApB,EAAA,SAAAoB,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}