@adyen/bento-vue3 1.52.0 → 1.53.0

package/dist/chunks/bin.CA6UQCNZ.js

@@ -0,0 +1,37 @@
+/* empty css              */
+import { createElementBlock as r, openBlock as s, mergeProps as l, createCommentVNode as n, createElementVNode as o, toDisplayString as C } from "vue";
+import { _ as p } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+let i = 0;
+const H = {
+  beforeCreate() {
+    this.uuid = i.toString(), i += 1;
+  }
+}, a = { key: 0 };
+function m(e, t, d, u, f, L) {
+  return s(), r("svg", l({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (s(), r("title", a, C(e.$attrs["svg-title"]), 1)) : n("", !0),
+    t[0] || (t[0] = o("path", {
+      fill: "#00112C",
+      d: "M7.25 6.25H5.75V12.75H7.25V6.25Z"
+    }, null, -1)),
+    t[1] || (t[1] = o("path", {
+      fill: "#00112C",
+      d: "M8.75 6.25H10.25V12.75H8.75V6.25Z"
+    }, null, -1)),
+    t[2] || (t[2] = o("path", {
+      fill: "#00112C",
+      d: "M14.75 3.24999H12.54L12.05 1.74999C11.9 1.29999 11.61 0.92999 11.22 0.64999C10.83 0.37999 10.34 0.24999 9.92 0.23999H6.09C5.64 0.23999 5.17 0.37999 4.78 0.64999C4.39 0.91999 4.11 1.29999 3.95 1.75999L3.46 3.23999H1.25V4.73999H2.32L3.14 13.7C3.19 14.26 3.45 14.78 3.86 15.16C4.27 15.54 4.81 15.75 5.37 15.75H10.64C11.2 15.75 11.74 15.54 12.15 15.16C12.57 14.78 12.82 14.26 12.87 13.7L13.69 4.73999H14.76V3.23999L14.75 3.24999ZM5.37 2.24999C5.42 2.09999 5.52 1.97999 5.64 1.88999C5.77 1.79999 5.92 1.74999 6.08 1.75999H9.93C10.08 1.75999 10.23 1.80999 10.35 1.88999C10.48 1.97999 10.57 2.09999 10.62 2.23999L10.95 3.25999H5.02L5.35 2.25999L5.37 2.24999ZM11.37 13.58C11.35 13.77 11.27 13.94 11.13 14.06C10.99 14.19 10.81 14.25 10.63 14.25H5.36C5.17 14.25 5 14.18 4.86 14.06C4.72 13.93 4.64 13.76 4.62 13.57L3.81 4.74999H12.17L11.36 13.57L11.37 13.58Z"
+    }, null, -1))
+  ], 16);
+}
+const w = /* @__PURE__ */ p(H, [["render", m]]);
+export {
+  w as B
+};
+//# sourceMappingURL=bin.CA6UQCNZ.js.map

package/dist/chunks/bin.CA6UQCNZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bin.CA6UQCNZ.js","sources":["../../../ui-assets/icons-16/dist/vue/bin.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M7.25 6.25H5.75V12.75H7.25V6.25Z\"/><path fill=\"#00112C\" d=\"M8.75 6.25H10.25V12.75H8.75V6.25Z\"/><path fill=\"#00112C\" d=\"M14.75 3.24999H12.54L12.05 1.74999C11.9 1.29999 11.61 0.92999 11.22 0.64999C10.83 0.37999 10.34 0.24999 9.92 0.23999H6.09C5.64 0.23999 5.17 0.37999 4.78 0.64999C4.39 0.91999 4.11 1.29999 3.95 1.75999L3.46 3.23999H1.25V4.73999H2.32L3.14 13.7C3.19 14.26 3.45 14.78 3.86 15.16C4.27 15.54 4.81 15.75 5.37 15.75H10.64C11.2 15.75 11.74 15.54 12.15 15.16C12.57 14.78 12.82 14.26 12.87 13.7L13.69 4.73999H14.76V3.23999L14.75 3.24999ZM5.37 2.24999C5.42 2.09999 5.52 1.97999 5.64 1.88999C5.77 1.79999 5.92 1.74999 6.08 1.75999H9.93C10.08 1.75999 10.23 1.80999 10.35 1.88999C10.48 1.97999 10.57 2.09999 10.62 2.23999L10.95 3.25999H5.02L5.35 2.25999L5.37 2.24999ZM11.37 13.58C11.35 13.77 11.27 13.94 11.13 14.06C10.99 14.19 10.81 14.25 10.63 14.25H5.36C5.17 14.25 5 14.18 4.86 14.06C4.72 13.93 4.64 13.76 4.62 13.57L3.81 4.74999H12.17L11.36 13.57L11.37 13.58Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["uuid","_sfc_main","_openBlock","_createElementBlock","_mergeProps","_ctx","_hoisted_1","_createCommentVNode","_createElementVNode"],"mappings":";;;AAOI,IAAIA,IAAO;AAEX,MAAKC,IAAU;AAAA,EACX,eAAe;AACX,SAAK,OAAOD,EAAK,SAAU,GAC3BA,KAAQ;AAAA,EACX;AACJ,SAdL,KAAA,EAAA;;AAEI,SAAAE,EAAA,GAAAC,EAA2qC,OAA3qCC,EAA2qC,EAAtqC,MAAK,MAAK,GAASC,EAAM,QAAA;AAAA,IAAE,OAAM;AAAA,IAAqB,OAAM;AAAA,IAA6B,OAAM;AAAA,IAAK,QAAO;AAAA,IAAK,MAAK;AAAA;IAAoBA,EAAM,OAAA,WAAA,UAAnBF,EAAmE,SAFxMG,KAE0KD,EAAM,OAAA,WAAA,CAAA,GAAA,CAAA,KAFhLE,EAAA,IAAA,EAAA;AAAA,oBAEwMC,EAA2D,QAAA;AAAA,MAArD,MAAK;AAAA,MAAU,GAAE;AAAA;oBAAoCA,EAA4D,QAAA;AAAA,MAAtD,MAAK;AAAA,MAAU,GAAE;AAAA;oBAAqCA,EAA02B,QAAA;AAAA,MAAp2B,MAAK;AAAA,MAAU,GAAE;AAAA;;;;"}

package/dist/chunks/{button-actions-with-menu.DQaq1bkf.js → button-actions-with-menu.DFD7gbdT.js}

@@ -1,8 +1,8 @@
 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.DfzP2nRU.js";
-import { a as O } from "./popover.COzLcAET.js";
+import { M as W, B as S } from "./menu.DBRBVdsd.js";
+import { a as O } from "./popover.BBnUL5Y_.js";
 import { c as _, f as R, B as M } from "./button-actions.BvGAE7sw.js";
-import { u as g } from "./index.CMGT-6mh.js";
+import { u as g } from "./index.C5sL_d0I.js";
 import { _ as U } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/button-actions-with-menu.css";
 const D = (a) => {
@@ -171,4 +171,4 @@ const D = (a) => {
 export {
   q as B
 };
-//# sourceMappingURL=button-actions-with-menu.DQaq1bkf.js.map
+//# sourceMappingURL=button-actions-with-menu.DFD7gbdT.js.map

package/dist/chunks/{button-actions-with-menu.DQaq1bkf.js.map → button-actions-with-menu.DFD7gbdT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions-with-menu.DQaq1bkf.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;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-actions-with-menu.DFD7gbdT.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/{calendar.D2X834TU.js → calendar.DKHNrb9_.js}

@@ -10,7 +10,7 @@ import "./events.FNmSWp_P.js";
 import { a as Ze } from "./keyboard-navigation.CqgGzfZQ.js";
 import { g as et } from "./generate-uid.NJ8tVoha.js";
 import { u as tt } from "./i18n.D9azDLPe.js";
-import { h as ct } from "./index.CMGT-6mh.js";
+import { h as ct } from "./index.C5sL_d0I.js";
 import "../assets/calendar.css";
 function fe(e, t) {
   S(2, arguments);
@@ -1249,4 +1249,4 @@ export {
   Ne as s,
   Zt as u
 };
-//# sourceMappingURL=calendar.D2X834TU.js.map
+//# sourceMappingURL=calendar.DKHNrb9_.js.map