@adyen/bento-vue2 1.65.0 → 1.66.0

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import { B as t, a } from "./chunks/checkbox.nHrvoKfp.js";
+import { B as t, a } from "./chunks/checkbox.Bg5FM5Oa.js";
 import { C as x } from "./chunks/minus-small.DJacLGTw.js";
-import { c as B, B as c } from "./chunks/checkbox-group.DVX0GFm9.js";
+import { c as B, B as c } from "./chunks/checkbox-group.BVMGnokj.js";
 export {
   t as BentoCheckbox,
   a as BentoCheckboxEvent,

package/dist/chunks/{action-bar.DHdrZtmW.js → action-bar.C8zeHAJG.js}

@@ -1,15 +1,15 @@
-import { defineComponent as x, computed as c, ref as b, toRefs as O, watch as g, provide as P, nextTick as B } from "vue";
-import { B as V } from "./button.hF-nD1Og.js";
-import { B as R } from "./typography.J1v_SPG3.js";
-import { B as F } from "./button-actions-with-menu.CYkEoiee.js";
-import { C as W } from "./cross.CC_B-vG-.js";
-import { u as L } from "./i18n.BQkEbtPM.js";
-import { u as k } from "./index.BdrLbvtJ.js";
-import { P as M } from "./popover.B05xkQ4e.js";
-import { B as U } from "./button-actions._OIvTdKt.js";
-import { n as z } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { defineComponent as O, computed as c, ref as b, toRefs as P, watch as g, provide as V, nextTick as B } from "vue";
+import { B as R } from "./button.hF-nD1Og.js";
+import { B as F } from "./typography.J1v_SPG3.js";
+import { B as W } from "./button-actions-with-menu.BVU1NS0m.js";
+import { C as L } from "./cross.CC_B-vG-.js";
+import { u as k } from "./i18n.BQkEbtPM.js";
+import { u as M } from "./index.BdrLbvtJ.js";
+import { P as U } from "./popover.B05xkQ4e.js";
+import { B as z } from "./button-actions._OIvTdKt.js";
+import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/action-bar.css";
-const D = {
+const G = {
   "en-US": {
     actionBar: "Action bar",
     cancel: "Cancel",
@@ -32,10 +32,10 @@ const D = {
     selected: "selecionados",
     unsavedChanges: "alteração não salva | alterações não salvas"
   }
-}, G = {
-  i18n: { messages: D }
-}, J = /* @__PURE__ */ x({
-  ...G,
+}, J = {
+  i18n: { messages: G }
+}, K = /* @__PURE__ */ O({
+  ...J,
   __name: "action-bar",
   props: {
     /**
@@ -93,7 +93,7 @@ const D = {
   },
   emits: ["close", "cancel", "save"],
   setup(o, { emit: e }) {
-    const a = o, t = 100, v = 7, C = 500, m = 32, { t: r, tc: S } = L(), E = c(() => a.selectionLabel ? a.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: y, visibleActions: h } = O(a), { width: i } = k(), n = b(null), u = b(null), A = c(() => a.variant === "confirmation");
+    const a = o, t = 100, v = 7, C = 500, m = 32, { t: r, tc: S, n: E } = k(), I = c(() => a.selectionLabel ? a.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: y, visibleActions: h } = P(a), { width: i } = M(), n = b(null), u = b(null), A = c(() => a.variant === "confirmation");
     g(
       () => h.value,
       (s) => {
@@ -101,18 +101,18 @@ const D = {
       },
       { immediate: !0 }
     );
-    const I = c(() => ({
+    const T = c(() => ({
       "b-action-bar--extra-spacing": y.value,
       "b-action-bar--confirmation": A.value
     }));
-    P(M, v);
-    const T = c(() => {
-      const s = a.actions.map((w) => ({
-        ...w,
+    V(U, v);
+    const N = c(() => {
+      const s = a.actions.map((x) => ({
+        ...x,
         variant: "secondary"
       })), f = s.slice(0, n.value).reverse(), _ = s.slice(n.value);
       return [...f, ..._];
-    }), N = c(() => [
+    }), w = c(() => [
       {
         title: r("save"),
         event: () => e("save")
@@ -136,26 +136,26 @@ const D = {
         i.value < C ? n.value = 0 : _ ? d() : p();
       },
       { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: v, RESPONSIVE_BREAKPOINT: C, SPACING: m, props: a, emit: e, t: r, tc: S, label: E, actionBar: l, extraBottomSpacing: y, visibleActions: h, width: i, internalDisplayedActions: n, internalVisibleActions: u, isConfirmationVariant: A, conditionalClasses: I, actionsInternal: T, confirmationActions: N, showActions: d, hideActions: p, BentoButton: V, BentoButtonActions: U, BentoTypography: R, ButtonActionsWithMenu: F, CrossIcon: W };
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: v, RESPONSIVE_BREAKPOINT: C, SPACING: m, props: a, emit: e, t: r, tc: S, n: E, label: I, actionBar: l, extraBottomSpacing: y, visibleActions: h, width: i, internalDisplayedActions: n, internalVisibleActions: u, isConfirmationVariant: A, conditionalClasses: T, actionsInternal: N, confirmationActions: w, showActions: d, hideActions: p, BentoButton: R, BentoButtonActions: z, BentoTypography: F, ButtonActionsWithMenu: W, CrossIcon: L };
   }
 });
-var K = function() {
+var j = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
   return a("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [a("section", { staticClass: "b-action-bar", class: t.conditionalClasses, attrs: { "aria-label": t.t("actionBar") } }, [a("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t.isConfirmationVariant ? e._e() : a("div", { staticClass: "b-action-bar__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": t.t("close") }, on: { click: function(v) {
     return t.emit("close");
   } }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [a(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
-  }, proxy: !0 }], null, !1, 4214210411) })], 1), a(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [e._v(" " + e._s(e.itemCounter) + " " + e._s(t.isConfirmationVariant ? t.tc("unsavedChanges", e.itemCounter) : t.label) + " ")]), t.isConfirmationVariant ? a(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : a(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", "disable-responsive-behavior": "", inverse: "" } })], 1)])]);
-}, j = [], q = /* @__PURE__ */ z(
-  J,
+  }, proxy: !0 }], null, !1, 4214210411) })], 1), a(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [e._v(" " + e._s(t.n(e.itemCounter)) + " " + e._s(t.isConfirmationVariant ? t.tc("unsavedChanges", e.itemCounter) : t.label) + " ")]), t.isConfirmationVariant ? a(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : a(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", "disable-responsive-behavior": "", inverse: "" } })], 1)])]);
+}, q = [], Y = /* @__PURE__ */ D(
   K,
   j,
+  q,
   !1,
   null,
-  "46adfbb2"
+  "96fd1efb"
 );
-const st = q.exports;
+const ot = Y.exports;
 export {
-  st as B
+  ot as B
 };
-//# sourceMappingURL=action-bar.DHdrZtmW.js.map
+//# sourceMappingURL=action-bar.C8zeHAJG.js.map

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

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

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

@@ -0,0 +1,83 @@
+import { ref as f, watch as A, nextTick as v, defineComponent as b, toRef as h, computed as _, provide as m } from "vue";
+import { M as y, B } from "./menu.BCD4FW54.js";
+import { f as w, B as C } from "./button-actions._OIvTdKt.js";
+import { u as M } from "./index.BdrLbvtJ.js";
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/button-actions-with-menu.css";
+const W = (d) => {
+  const { breakpoint: t, container: s, defaultActionsCount: o, offset: e } = d, { width: l } = M(), i = f(o), r = 150, a = async () => {
+    var u;
+    await v();
+    const c = s.value.clientWidth, n = r * i.value + (((u = e == null ? void 0 : e.value) == null ? void 0 : u.offsetWidth) ?? 0) + r;
+    c >= n && i.value < o && (i.value += 1, a());
+  }, p = async () => {
+    var u;
+    await v();
+    const c = s.value.clientWidth, n = r * i.value + (((u = e == null ? void 0 : e.value) == null ? void 0 : u.offsetWidth) ?? 0);
+    c < n && i.value > 0 && (i.value -= 1, p());
+  };
+  return A([l, s], async ([c, n], [u]) => {
+    if (!n || !o || c > t)
+      return;
+    await v(), c > u ? a() : p();
+  }), {
+    displayedActionsCount: i
+  };
+}, E = {}, I = /* @__PURE__ */ b({
+  ...E,
+  __name: "button-actions-with-menu",
+  props: {
+    actions: null,
+    actionsLayout: { default: "buttons-end" },
+    disableResponsiveBehavior: { type: Boolean, default: !1 },
+    displayedActions: { default: void 0 },
+    inverse: { type: Boolean, default: !1 },
+    hideDisplayedActionsBreakpoint: { default: 0 },
+    menuPosition: { default: "bottom-start" }
+  },
+  setup(d) {
+    const t = d, s = h(t, "inverse"), o = f(null), e = f(null), l = f(!1), i = _(() => {
+      const n = t.hideDisplayedActionsBreakpoint ? a.value : t.displayedActions;
+      return t.actions.slice(0, n);
+    }), r = _(() => {
+      var n;
+      return (n = e == null ? void 0 : e.value) == null ? void 0 : n.$el;
+    }), { displayedActionsCount: a } = W({
+      breakpoint: t.hideDisplayedActionsBreakpoint,
+      container: o,
+      defaultActionsCount: t.displayedActions,
+      offset: r
+    });
+    m(y, s), t.disableResponsiveBehavior || m(w, { buttonActionsWithMenu: o, menu: e, stackButtons: l });
+    const p = _(() => ({
+      "b-button-actions-with-menu__container-wrapper--buttons-end": t.actionsLayout === "buttons-end",
+      "b-button-actions-with-menu__container-wrapper--buttons-start": t.actionsLayout === "buttons-start",
+      "b-button-actions-with-menu__container-wrapper--stacked-buttons": l.value
+    })), c = _(
+      () => a.value !== void 0 && a.value < t.actions.length ? t.actions.slice(a.value, t.actions.length).map((n) => ({
+        text: n.title,
+        handler: n.event,
+        icon: n.icon,
+        critical: n.critical,
+        disabled: n.disabled
+      })) : []
+    );
+    return { __sfc: !0, props: t, inverseRef: s, buttonActionsWithMenu: o, menu: e, stackButtons: l, computedActions: i, computedMenuRef: r, displayedActionsCount: a, conditionalClasses: p, computedMenuActions: c, BentoButtonActions: C, BentoMenu: B };
+  }
+});
+var T = function() {
+  var t = this, s = t._self._c, o = t._self._setupProxy;
+  return s("div", { staticClass: "b-button-actions-with-menu" }, [s("div", { ref: "buttonActionsWithMenu", staticClass: "b-button-actions-with-menu__container-wrapper", class: o.conditionalClasses, attrs: { role: "group" } }, [s(o.BentoButtonActions, { attrs: { actions: o.computedActions, inverse: t.inverse, layout: t.actionsLayout } }), o.computedMenuActions.length ? s(o.BentoMenu, { ref: "menu", attrs: { data: o.computedMenuActions, "menu-position": t.menuPosition } }) : t._e()], 1)]);
+}, R = [], k = /* @__PURE__ */ N(
+  I,
+  T,
+  R,
+  !1,
+  null,
+  "bf9aca55"
+);
+const U = k.exports;
+export {
+  U as B
+};
+//# sourceMappingURL=button-actions-with-menu.BVU1NS0m.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions-with-menu.BVU1NS0m.js","sources":["../../src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../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 } 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 { computed, provide, ref, toRef } from 'vue';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n    import { ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n    import { useResponsiveActions } from './composables/use-responsive-actions';\n\n    const props = defineProps({\n  actions: null,\n  actionsLayout: { default: 'buttons-end' },\n  disableResponsiveBehavior: { type: Boolean, default: false },\n  displayedActions: { default: undefined },\n  inverse: { type: Boolean, default: false },\n  hideDisplayedActionsBreakpoint: { default: 0 },\n  menuPosition: { default: 'bottom-start' }\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`]: props.actionsLayout === 'buttons-end',\n        [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === '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     *        {\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     *        {\n     *          title: 'Secondary',\n     *          event: () => { ... }\n     *          disabled: true,\n     *          variant: BentoButtonVariant.PRIMARY,\n     *          critical: true\n     *      }]\"\n     *      :displayedActions=\"2\"\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__","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","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,GC2CIa,IAAA,CAAA;;;;;;;;;;;;;iBAzEAC,IAAAC,EAAAtB,GAAA,SAAA,GACAuB,IAAAf,EAAA,IAAA,GACAgB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,EAAA,GAEAkB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA5B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA4B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAA;;AAAA,cAAAb,IAAAU,KAAA,gBAAAA,EAAA,UAAA,gBAAAV,EAAA;AAAA,KAAA,GAEA,EAAA,uBAAAP,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAuB;AAAA,MACP,qBAAAvB,EAAA;AAAA,MACgB,QAAA6B;AAAA,IACnB,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEArB,EAAA,6BACI8B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA3B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAAyB,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP;AAAA,MAA4B,MAAApB,EAAA,UAAA,UAAAA,EAAA,QAAAP,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAmC,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;;;;;;;;;;;;;;;;"}