npm - @adyen/bento-vue3 - Versions diffs - 1.83.1 → 1.84.0 - Mend

@adyen/bento-vue3 1.83.1 → 1.84.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (306) hide show

package/dist/chunks/{base-modal.B8HZItVN.js → base-modal.D3GyeCFT.js} RENAMED Viewed

@@ -1,41 +1,43 @@
-import { defineComponent as $, useSlots as ee, ref as g, computed as d, inject as ce, watch as Y, nextTick as re, onUnmounted as me, createBlock as P, openBlock as A, normalizeClass as J, createSlots as te, withCtx as l, createElementVNode as L, normalizeStyle as O, createCommentVNode as w, unref as t, renderSlot as c, createVNode as j, useAttrs as ge, toRefs as ve, onMounted as pe, provide as G, createElementBlock as fe, withKeys as _e, withDirectives as ye } from "vue";
+import { defineComponent as $, useSlots as ee, ref as g, computed as d, inject as ce, watch as Y, nextTick as re, onUnmounted as me, createBlock as P, openBlock as A, normalizeClass as J, createSlots as te, withCtx as l, createElementVNode as h, normalizeStyle as O, createCommentVNode as w, unref as t, renderSlot as c, createVNode as j, useAttrs as ge, toRefs as ve, onMounted as pe, provide as G, createElementBlock as fe, withKeys as _e, withDirectives as ye } from "vue";
 import { B as be } from "./button.CSp48LJt.js";
-import { B as he } from "./focus-trap.BaHvK7aT.js";
+import { B as Le } from "./focus-trap.BaHvK7aT.js";
 import { u as ae } from "./use-has-slot.B7eQSabc.js";
-import { u as Le } from "./index.pdBj0KQU.js";
-import { j as Ae } from "./button-actions.O0cnu1_g.js";
+import { u as he } from "./index.pdBj0KQU.js";
+import { j as Ae } from "./button-actions.Crj4QFAd.js";
 import { g as Ce } from "./generate-uid.NJ8tVoha.js";
 import { B as Ee } from "./directive.Cbdox5VL.js";
 import { C as Ie } from "./cross.B92GxFTY.js";
-import { D as Oe, B as Pe, b as Se, a as De } from "./dialog-page.CTEyyZ_R.js";
+import { D as Oe, B as Pe, b as Se, a as ke } from "./dialog-page.DaZSlMzY.js";
 import { B as x } from "./typography.6Oo5TOMP.js";
-import { F as ke } from "./footer-actions.CTCV-SW-.js";
+import { F as De } from "./footer-actions.BqNvwVk7.js";
 import { o as Be } from "./resize.Bqks3WUm.js";
 import { G as Te, a as Ne } from "./grid-layout.DDaRNz4-.js";
 import { _ as oe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/base-modal.css";
-var Ge = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.DIALOG = "dialog", e))(Ge || {}), we = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(we || {}), R = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(R || {}), k = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(k || {}), q = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(q || {}), Re = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(Re || {}), $e = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))($e || {});
+var Ge = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.DIALOG = "dialog", e))(Ge || {}), we = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(we || {}), R = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(R || {}), D = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(D || {}), q = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(q || {}), Re = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(Re || {}), $e = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))($e || {});
 const ne = {
   "en-US": {
     ariaLabelFallback: "modal",
     close: "Close"
   },
   "ja-JP": {
+    ariaLabelFallback: "モーダル",
     close: "閉じる"
   },
   "pt-BR": {
+    ariaLabelFallback: "modal",
     close: "Fechar"
   }
-}, se = /* @__PURE__ */ Symbol("modal config data injection key"), Me = { class: "b-modal-page__header" }, ze = {
+}, se = /* @__PURE__ */ Symbol("modal config data injection key"), Fe = { class: "b-modal-page__header" }, Me = {
   "aria-label": "modal actions",
   class: "b-modal-page__actions"
-}, Fe = $({}), Ue = /* @__PURE__ */ $({
-  ...Fe,
+}, ze = $({}), Ue = /* @__PURE__ */ $({
+  ...ze,
   __name: "modal-page",
   props: {
     actions: { default: null },
     actionsLabel: { default: null },
-    columnsSize: { default: k.SMALLER },
+    columnsSize: { default: D.SMALLER },
     customPadding: { default: null },
     destructiveActions: { type: Boolean, default: !1 },
     withColumnLayout: { type: Boolean, default: !1 },
@@ -43,7 +45,7 @@ const ne = {
     previousPage: { default: void 0 }
   },
   setup(e) {
-    const M = ee(), u = ae(M), f = g(null), s = e, z = d(() => ({
+    const F = ee(), u = ae(F), f = g(null), s = e, M = d(() => ({
       "b-modal-page--custom-padding": s.customPadding
     })), _ = d(() => {
       var a;
@@ -69,36 +71,36 @@ const ne = {
         actions: { ...a, paddingBottom: s.customPadding },
         backButton: { top: s.customPadding, paddingLeft: s.customPadding }
       };
-    }), y = d(() => s.withColumnLayout && U.value === R.LARGE), B = d(() => s.columnsSize === k.SMALLER ? [
+    }), y = d(() => s.withColumnLayout && U.value === R.LARGE), B = d(() => s.columnsSize === D.SMALLER ? [
       { small: 4, medium: 4, large: 4 },
       { small: 8, medium: 8, large: 8 }
-    ] : s.columnsSize === k.BIGGER ? [
+    ] : s.columnsSize === D.BIGGER ? [
       { small: 8, medium: 8, large: 8 },
       { small: 4, medium: 4, large: 4 }
     ] : [
       { small: 6, medium: 6, large: 6 },
       { small: 6, medium: 6, large: 6 }
-    ]), { activePage: b, height: n, isAnimationActive: S, pageCustomPadding: C, showCloseButton: F, size: U } = ce(se), K = d(() => b.value === s.pageId || !b.value);
-    let h = null;
+    ]), { activePage: b, height: n, isAnimationActive: S, pageCustomPadding: C, showCloseButton: z, size: U } = ce(se), K = d(() => b.value === s.pageId || !b.value);
+    let L = null;
     return Y(
       () => b.value,
       async (a, r) => {
         var m, v;
-        K.value && (await re(), n.value = `${(v = (m = f.value) == null ? void 0 : m.$el) == null ? void 0 : v.clientHeight}px`, C.value = s.customPadding, S.value = r !== void 0, h = Be(f.value, () => {
+        K.value && (await re(), n.value = `${(v = (m = f.value) == null ? void 0 : m.$el) == null ? void 0 : v.clientHeight}px`, C.value = s.customPadding, S.value = r !== void 0, L = Be(f.value, () => {
           var T, E;
-          const D = `${(E = (T = f.value) == null ? void 0 : T.$el) == null ? void 0 : E.clientHeight}px`;
-          D && D !== n.value && (n.value = D);
+          const k = `${(E = (T = f.value) == null ? void 0 : T.$el) == null ? void 0 : E.clientHeight}px`;
+          k && k !== n.value && (n.value = k);
         }));
       },
       { immediate: !0 }
     ), me(() => {
-      h == null || h.disconnect();
+      L == null || L.disconnect();
     }), (a, r) => {
       var m;
       return A(), P(Oe, {
         ref_key: "page",
         ref: f,
-        class: J(["b-modal-page", z.value]),
+        class: J(["b-modal-page", M.value]),
         "page-id": a.pageId,
         "always-show-border": y.value,
         "back-button-styling": (m = i.value) == null ? void 0 : m.backButton,
@@ -106,7 +108,7 @@ const ne = {
         onAnimationend: r[0] || (r[0] = (v) => S.value = !1)
       }, te({
         content: l(() => [
-          L("div", {
+          h("div", {
             class: J(["b-modal-page__content", _.value]),
             style: O(i.value.content)
           }, [
@@ -137,14 +139,14 @@ const ne = {
         ]),
         _: 2
       }, [
-        t(u)("default") || t(F) ? {
+        t(u)("default") || t(z) ? {
           name: "header",
           fn: l(() => [
-            L("div", {
+            h("div", {
               class: "b-modal-page__header-container",
               style: O(i.value.header)
             }, [
-              L("div", Me, [
+              h("div", Fe, [
                 j(t(x), {
                   class: "b-modal-page__title",
                   el: "span",
@@ -164,11 +166,11 @@ const ne = {
         t(u)("actions") ? {
           name: "footer",
           fn: l(() => [
-            L("div", {
+            h("div", {
               class: "b-modal-page__actions-container",
               style: O(i.value.actions)
             }, [
-              L("div", ze, [
+              h("div", Me, [
                 c(a.$slots, "actions", {}, void 0, !0)
               ])
             ], 4)
@@ -177,11 +179,11 @@ const ne = {
         } : a.actions && a.actions.length > 0 ? {
           name: "footer",
           fn: l(() => [
-            L("div", {
+            h("div", {
               class: "b-modal-page__actions-container",
               style: O(i.value.actions)
             }, [
-              j(t(ke), {
+              j(t(De), {
                 actions: a.actions,
                 "actions-label": a.actionsLabel,
                 "destructive-actions": a.destructiveActions
@@ -244,7 +246,7 @@ const ne = {
      */
     columnsSize: {
       type: String,
-      default: k.SMALLER
+      default: D.SMALLER
     },
     /**
      * If provided, manages the padding of the whole modal container
@@ -287,8 +289,8 @@ const ne = {
     withColumnLayout: { type: Boolean, default: !1 }
   },
   emits: ["update:active-page", "close-modal"],
-  setup(e, { expose: W, emit: M }) {
-    const { t: f } = Le({ messages: ne }), s = ee(), z = ge(), _ = ae(s), i = g(null), y = g(!1), B = Ce("modal"), b = M, n = e, S = d(() => n.isDismissible && !n.hideCloseButton), C = g(n.customPadding), F = d(() => C.value ? { top: C.value, right: C.value } : {}), U = d(() => z["aria-label"] ?? f("ariaLabelFallback")), K = d(() => n.withColumnLayout && n.size === R.LARGE), h = () => {
+  setup(e, { expose: W, emit: F }) {
+    const { t: f } = he({ messages: ne }), s = ee(), M = ge(), _ = ae(s), i = g(null), y = g(!1), B = Ce("modal"), b = F, n = e, S = d(() => n.isDismissible && !n.hideCloseButton), C = g(n.customPadding), z = d(() => C.value ? { top: C.value, right: C.value } : {}), U = d(() => M["aria-label"] ?? f("ariaLabelFallback")), K = d(() => n.withColumnLayout && n.size === R.LARGE), L = () => {
       i.value.showModal();
     }, a = () => {
       b("close-modal");
@@ -298,7 +300,7 @@ const ne = {
       i.value.open && (y.value = !0);
     }, v = (o) => {
       o && o.preventDefault(), !(!n.isDismissible && n.modalRole === q.DIALOG) && m();
-    }, D = () => {
+    }, k = () => {
       n.isDismissible && v();
     }, T = d(() => ({
       [`b-modal-base__container--${n.size}`]: n.size,
@@ -311,7 +313,7 @@ const ne = {
       ([o, p], [, H]) => {
         if (!p)
           return;
-        o ? (h(), I.value.length || I.value.push(E.value)) : !H || m();
+        o ? (L(), I.value.length || I.value.push(E.value)) : !H || m();
       }
     ), Y(
       () => n.actions,
@@ -321,7 +323,7 @@ const ne = {
       },
       { deep: !0 }
     ), pe(() => {
-      n.isOpen && i.value && h();
+      n.isOpen && i.value && L();
     }), W({
       internalModalActionClose: v
     }), G(Ae, B);
@@ -343,8 +345,8 @@ const ne = {
       pages: N,
       previousPages: I,
       updatePage: ie
-    }), G(De, de), (o, p) => (A(), fe("div", He, [
-      L("dialog", {
+    }), G(ke, de), (o, p) => (A(), fe("div", He, [
+      h("dialog", {
         ref_key: "modal",
         ref: i,
         role: e.modalRole,
@@ -355,7 +357,7 @@ const ne = {
         onAnimationend: r,
         onKeydown: _e(v, ["esc"])
       }, [
-        t(Q) || e.initiallyOpen ? ye((A(), P(t(he), {
+        t(Q) || e.initiallyOpen ? ye((A(), P(t(Le), {
           key: 0,
           id: t(B)
         }, {
@@ -365,7 +367,7 @@ const ne = {
               class: "b-modal-base__close-button",
               variant: "tertiary",
               type: "button",
-              style: O(F.value),
+              style: O(z.value),
               onClick: v
             }, {
               default: l(() => [
@@ -421,7 +423,7 @@ const ne = {
           ]),
           _: 3
         }, 8, ["id"])), [
-          [t(Ee), D]
+          [t(Ee), k]
         ]) : w("", !0)
       ], 46, Ye)
     ]));
@@ -431,11 +433,11 @@ export {
   Ge as B,
   we as a,
   R as b,
-  k as c,
+  D as c,
   q as d,
   Re as e,
   $e as f,
   Ke as g,
   dt as h
 };
-//# sourceMappingURL=base-modal.B8HZItVN.js.map
+//# sourceMappingURL=base-modal.D3GyeCFT.js.map

package/dist/chunks/{base-modal.B8HZItVN.js.map → base-modal.D3GyeCFT.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-modal.B8HZItVN.js","sources":["../../../vue2/src/components/modal/modal.types.ts","../../../vue2/src/components/modal/modal.keys.ts","../../../vue2/src/components/modal/components/modal-page/modal-page.vue","../../../vue2/src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { type ComputedRef, type Ref } from 'vue';\n\n/*\n Public\n /\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalVariant {\n DEFAULT = 'default',\n DIALOG = 'dialog',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalVariantMapping {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n\n/\n Private\n /\nexport interface BentoModalConfigData {\n activePage: Ref<string>;\n height: Ref<string>;\n isAnimationActive: Ref<boolean>;\n pageCustomPadding: Ref<string>;\n showCloseButton: ComputedRef<boolean>;\n size: Ref<BentoModalSize \| `${BentoModalSize}`>;\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n <dialog-page\n ref=\"page\"\n class=\"b-modal-page\"\n :class=\"modalPageConditionalClasses\"\n :page-id=\"pageId\"\n :always-show-border=\"hasColumnLayout\"\n :back-button-styling=\"customPaddingStyles?.backButton\"\n :previous-page=\"previousPage\"\n @animationend=\"isAnimationActive = false\"\n >\n <template v-if=\"hasSlot('default') \|\| showCloseButton\" #header>\n <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n <div class=\"b-modal-page__header\">\n <bento-typography class=\"b-modal-page__title\" el=\"span\" variant=\"title\" stronger>\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n </div>\n </div>\n </template>\n\n <template #content>\n <div\n class=\"b-modal-page__content\"\n :class=\"modalContentConditionalClasses\"\n :style=\"customPaddingStyles.content\"\n >\n <bento-typography\n v-if=\"hasSlot('content') \|\| (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n el=\"div\"\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n no-gap\n class=\"b-modal-page__grid\"\n >\n <template #col-1><slot name=\"content-col-1\"></slot></template>\n <template #col-2><slot name=\"content-col-2\"></slot></template>\n </grid-layout>\n <slot v-else name=\"content\" />\n </bento-typography>\n </div>\n </template>\n <template v-if=\"hasSlot('actions')\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </template>\n <template v-else-if=\"actions && actions.length > 0\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <footer-actions\n :actions=\"actions\"\n :actions-label=\"actionsLabel\"\n :destructive-actions=\"destructiveActions\"\n />\n </div>\n </template>\n </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, inject, nextTick, onUnmounted, ref, useSlots, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoTypography } from '@/components/typography';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n\n import { FooterActions } from '@/components/internal/footer-actions';\n\n import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import { observeSizeOfElement } from '@/utils/ts/resize';\n import type { BentoModalPageProps } from './modal-page.types';\n\n const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const page = ref<InstanceType<typeof DialogPage>>(null);\n\n const props = withDefaults(defineProps<BentoModalPageProps>(), {\n actions: null,\n actionsLabel: null,\n columnsSize: BentoModalColumnLayoutVariant.SMALLER,\n customPadding: null,\n destructiveActions: false,\n withColumnLayout: false,\n pageId: undefined,\n previousPage: undefined,\n });\n\n const modalPageConditionalClasses = computed(() => ({\n 'b-modal-page--custom-padding': props.customPadding,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-page__content--with-header': hasSlot('default'),\n 'b-modal-page__content--with-actions': hasSlot('actions') \|\| props.actions?.length,\n }));\n\n // Setting custom padding styles\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: {\n ...xPadding,\n paddingTop: props.customPadding,\n paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n flex: 1,\n },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n };\n });\n\n // Column layout styles\n const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [\n { small: 4, medium: 4, large: 4 },\n { small: 8, medium: 8, large: 8 },\n ];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [\n { small: 8, medium: 8, large: 8 },\n { small: 4, medium: 4, large: 4 },\n ];\n }\n return [\n { small: 6, medium: 6, large: 6 },\n { small: 6, medium: 6, large: 6 },\n ];\n });\n\n // Register page to parent component and inject data from parent component\n const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n const isCurrentPage = computed(() => activePage.value === props.pageId \|\| !activePage.value);\n\n // Animation\n // Set resize observer on mount of update the height of the dialog on resize\n let pageElementObserver: ResizeObserver \| null = null;\n\n // Watching activePage changes to set the height of the page and set isAnimationActive\n watch(\n () => activePage.value,\n async (value, oldValue) => {\n if (isCurrentPage.value) {\n await nextTick();\n height.value = `${page.value?.$el?.clientHeight}px`;\n pageCustomPadding.value = props.customPadding;\n // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n isAnimationActive.value = oldValue !== undefined;\n\n pageElementObserver = observeSizeOfElement(page.value, () => {\n const pageHeight = `${page.value?.$el?.clientHeight}px`;\n if (pageHeight && pageHeight !== height.value) {\n height.value = pageHeight;\n }\n });\n }\n },\n { immediate: true }\n );\n\n // Disconnect observer on unmounting the page\n onUnmounted(() => {\n pageElementObserver?.disconnect();\n });\n</script>\n\n<script lang=\"ts\">\n /\n ModalPage is used to render different pages of the Modal component\n \n @example\n * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoModal, BentoModalPage },\n * template: `\n * <bento-modal active-page='page1' :is-open='true'>\n * <bento-modal-page\n * pageId='page1'\n * actions-label='Move to next page'\n * :actions=\"[\n * {\n * title: 'Next page',\n * event: () => {\n * activePage.value = 'page2';\n * },\n * }]\">\n * Page 1\n * <template #content>\n * Page 1 content\n * </template>\n * </bento-modal-page>\n * <bento-modal-page\n * pageId='page2'\n * :actions=\"[\n * {\n * title: 'Save',\n * event: () => {},\n * }]\">\n * Page 2\n * <template #content>\n * Page 2 content\n * </template>\n * </bento-modal-page>\n * </bento-modal>\n * `\n * }\n /\n export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n :style=\"{ height: height }\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap\n v-if=\"isOpen \|\| initiallyOpen\"\n :id=\"modalId\"\n v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n >\n <bento-button\n v-if=\"showCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n :style=\"customPaddingStyles\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon :svg-title=\"t('close')\" />\n </bento-button>\n <template v-if=\"props.activePage\">\n <slot />\n </template>\n <bento-modal-page\n v-else\n :with-column-layout=\"withColumnLayout\"\n :size=\"size\"\n :custom-padding=\"customPadding\"\n :columns-size=\"columnsSize\"\n >\n <template v-if=\"hasSlot('default')\" #default>\n <slot></slot>\n </template>\n <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n ><slot name=\"content-col-1\"></slot\n ></template>\n <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n ><slot name=\"content-col-2\"></slot\n ></template>\n <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n </bento-modal-page>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import {\n computed,\n defineComponent,\n onMounted,\n type PropType,\n provide,\n ref,\n toRefs,\n useAttrs,\n useSlots,\n watch,\n } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoButton, type BentoButtonActionsList } from '@/components/button';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n import { generateUid } from '@/core/utils/ts';\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n import messages from './messages.json';\n\n import { BentoModalPage } from '@/components/modal/components/modal-page';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import {\n BentoDialogPageAnimation,\n type BentoDialogPageConfigData,\n type BentoDialogPageRegisterPage,\n DIALOG_PAGE_CONFIG_INJECTION_KEY,\n DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n } from '@/internal';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const slots = useSlots();\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref<HTMLDialogElement>(null);\n const isClosing = ref(false);\n const modalId = generateUid('modal');\n\n const emit = defineEmits<{\n /\n Emits update event when page is changed internally\n /\n (e: 'update:active-page', page: string): void;\n /\n Emitted when the modal is closed.\n /\n (e: 'close-modal');\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 * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n \n ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n /\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /\n The id of the current active page\n * Should be the same id as the BentoModalPage to be displayed\n /\n activePage: {\n type: String,\n default: null,\n },\n\n /\n If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n /\n columnsSize: {\n type: String as PropType<BentoModalColumnLayoutVariant>,\n default: BentoModalColumnLayoutVariant.SMALLER,\n },\n\n /\n If provided, manages the padding of the whole modal container\n /\n customPadding: { type: String, default: null },\n\n /\n If passed - sets first button color to red\n /\n destructiveActions: { type: Boolean, default: false },\n\n /\n Hides a cross icon on the right side of the title\n /\n hideCloseButton: { type: Boolean, required: true },\n\n /\n Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n /\n initiallyOpen: { type: Boolean, default: false },\n\n /\n If set to true, it allows the modal to be closed by clicking outside of it\n /\n isDismissible: { type: Boolean, required: true },\n\n /\n Controls the modal's state from the outside. Set it to true to open the modal\n /\n isOpen: { type: Boolean, required: true },\n\n /\n Defines whether the modal will be an alert modal\n /\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /\n Sets the width of the modal\n /\n size: {\n type: String as PropType<BentoModalSize \| `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /\n If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n /\n withColumnLayout: { type: Boolean, default: false },\n });\n\n const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n const pageCustomPadding = ref(props.customPadding);\n\n const customPaddingStyles = computed(() => {\n if (!pageCustomPadding.value) {\n return {};\n }\n\n return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n });\n\n const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit('close-modal');\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n if (previousPages.value[0]) {\n emit('update:active-page', previousPages.value[0]);\n }\n previousPages.value = [];\n isClosing.value = false;\n emitCloseEvent();\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n /\n If the user has pressed escape, clicked outside or clicked the close icon.\n * Needs to be called from outside, following the \"dialog.close()\" pattern,\n * when the closing event is triggered outside of the \"base-modal\"\n * component (e.g. from a closing action).\n /\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n return;\n }\n startCloseModalAnimation();\n };\n\n const closeModalOnClickOutside = () => {\n if (props.isDismissible) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n 'b-modal-base__container--animation': isAnimationActive.value,\n }));\n\n watch(\n () => [props.isOpen, modal.value],\n ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n if (!newModalValue) {\n return;\n }\n\n const isFirstMutation = !oldModalValue;\n if (newIsOpen) {\n openModal();\n // add the first page to the array when the modal opens\n if (!previousPages.value.length) {\n previousPages.value.push(activePage.value);\n }\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n /\n Expose methods through its 'ref'\n /\n defineExpose({\n internalModalActionClose,\n });\n\n // Let's Children components know they are inside a Modal (dialog element)\n provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n // Modal pagination\n const { activePage, isOpen, size } = toRefs(props);\n const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n const pages = ref<Array<string>>([]);\n const previousPages = ref([]);\n\n const updatePage = page => emit('update:active-page', page);\n\n // unregister page if removed / destroyed\n const unregisterPage = (pageIdToRemove: string) => () => {\n pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n };\n\n // Provide data and function to register page to subcomponent\n const registerPage: BentoDialogPageRegisterPage = pageId => {\n if (pageId) {\n pages.value.push(pageId);\n }\n\n return { unregisterPage: unregisterPage(pageId) };\n };\n\n const height = ref('');\n const isAnimationActive = ref(false);\n\n provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n activePage,\n height,\n isAnimationActive,\n pageCustomPadding,\n showCloseButton,\n size,\n });\n\n provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n activePage,\n animation,\n isOpen,\n pages,\n previousPages,\n updatePage,\n });\n\n provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n /\n Dialog container. It creates a dialog HTML element for the modal to use.\n \n @example\n * import BaseModal from './components/base-modal/base-modal.vue';\n \n export default {\n * components: { BaseModal },\n * template: `\n * <base-modal\n * :hide-close-button=\"true\"\n * :is-dismissible=\"false\"\n * :is-open=\"isOpen\"\n * @close-modal=\"isOpen = false\"\n * >\n * <template #content-col-1>\n * // Content on the left side column\n * </template>\n \n <template #content-col-2>\n * // Content on the right side column\n * </template>\n \n <template v-if=\"actions\" #actions>\n * <footer-actions :actions=\"actions\" />\n * </template>\n * </base-modal>\n * `,\n * setup() {\n * const isOpen = ref(true)\n * const footerActions = [{\n * title: 'Primary action',\n * event: () => { ... }\n * }]\n * }\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","slots","useSlots","hasSlot","useHasSlot","page","ref","props","__props","modalPageConditionalClasses","computed","modalContentConditionalClasses","_a","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","_b","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","t","useI18n","attrs","useAttrs","modal","isClosing","modalId","generateUid","emit","__emit","computedAriaLabel","openModal","emitCloseEvent","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","__expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}
1	+ {"version":3,"file":"base-modal.D3GyeCFT.js","sources":["../../../vue2/src/components/modal/modal.types.ts","../../../vue2/src/components/modal/modal.keys.ts","../../../vue2/src/components/modal/components/modal-page/modal-page.vue","../../../vue2/src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { type ComputedRef, type Ref } from 'vue';\n\n/*\n Public\n /\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalVariant {\n DEFAULT = 'default',\n DIALOG = 'dialog',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalVariantMapping {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/\n @deprecated for usage with properties since version 2.0. Use the string literal instead.\n /\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n\n/\n Private\n /\nexport interface BentoModalConfigData {\n activePage: Ref<string>;\n height: Ref<string>;\n isAnimationActive: Ref<boolean>;\n pageCustomPadding: Ref<string>;\n showCloseButton: ComputedRef<boolean>;\n size: Ref<BentoModalSize \| `${BentoModalSize}`>;\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n <dialog-page\n ref=\"page\"\n class=\"b-modal-page\"\n :class=\"modalPageConditionalClasses\"\n :page-id=\"pageId\"\n :always-show-border=\"hasColumnLayout\"\n :back-button-styling=\"customPaddingStyles?.backButton\"\n :previous-page=\"previousPage\"\n @animationend=\"isAnimationActive = false\"\n >\n <template v-if=\"hasSlot('default') \|\| showCloseButton\" #header>\n <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n <div class=\"b-modal-page__header\">\n <bento-typography class=\"b-modal-page__title\" el=\"span\" variant=\"title\" stronger>\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n </div>\n </div>\n </template>\n\n <template #content>\n <div\n class=\"b-modal-page__content\"\n :class=\"modalContentConditionalClasses\"\n :style=\"customPaddingStyles.content\"\n >\n <bento-typography\n v-if=\"hasSlot('content') \|\| (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n el=\"div\"\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n no-gap\n class=\"b-modal-page__grid\"\n >\n <template #col-1><slot name=\"content-col-1\"></slot></template>\n <template #col-2><slot name=\"content-col-2\"></slot></template>\n </grid-layout>\n <slot v-else name=\"content\" />\n </bento-typography>\n </div>\n </template>\n <template v-if=\"hasSlot('actions')\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </template>\n <template v-else-if=\"actions && actions.length > 0\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <footer-actions\n :actions=\"actions\"\n :actions-label=\"actionsLabel\"\n :destructive-actions=\"destructiveActions\"\n />\n </div>\n </template>\n </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, inject, nextTick, onUnmounted, ref, useSlots, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoTypography } from '@/components/typography';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n\n import { FooterActions } from '@/components/internal/footer-actions';\n\n import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import { observeSizeOfElement } from '@/utils/ts/resize';\n import type { BentoModalPageProps } from './modal-page.types';\n\n const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const page = ref<InstanceType<typeof DialogPage>>(null);\n\n const props = withDefaults(defineProps<BentoModalPageProps>(), {\n actions: null,\n actionsLabel: null,\n columnsSize: BentoModalColumnLayoutVariant.SMALLER,\n customPadding: null,\n destructiveActions: false,\n withColumnLayout: false,\n pageId: undefined,\n previousPage: undefined,\n });\n\n const modalPageConditionalClasses = computed(() => ({\n 'b-modal-page--custom-padding': props.customPadding,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-page__content--with-header': hasSlot('default'),\n 'b-modal-page__content--with-actions': hasSlot('actions') \|\| props.actions?.length,\n }));\n\n // Setting custom padding styles\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: {\n ...xPadding,\n paddingTop: props.customPadding,\n paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n flex: 1,\n },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n };\n });\n\n // Column layout styles\n const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [\n { small: 4, medium: 4, large: 4 },\n { small: 8, medium: 8, large: 8 },\n ];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [\n { small: 8, medium: 8, large: 8 },\n { small: 4, medium: 4, large: 4 },\n ];\n }\n return [\n { small: 6, medium: 6, large: 6 },\n { small: 6, medium: 6, large: 6 },\n ];\n });\n\n // Register page to parent component and inject data from parent component\n const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n const isCurrentPage = computed(() => activePage.value === props.pageId \|\| !activePage.value);\n\n // Animation\n // Set resize observer on mount of update the height of the dialog on resize\n let pageElementObserver: ResizeObserver \| null = null;\n\n // Watching activePage changes to set the height of the page and set isAnimationActive\n watch(\n () => activePage.value,\n async (value, oldValue) => {\n if (isCurrentPage.value) {\n await nextTick();\n height.value = `${page.value?.$el?.clientHeight}px`;\n pageCustomPadding.value = props.customPadding;\n // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n isAnimationActive.value = oldValue !== undefined;\n\n pageElementObserver = observeSizeOfElement(page.value, () => {\n const pageHeight = `${page.value?.$el?.clientHeight}px`;\n if (pageHeight && pageHeight !== height.value) {\n height.value = pageHeight;\n }\n });\n }\n },\n { immediate: true }\n );\n\n // Disconnect observer on unmounting the page\n onUnmounted(() => {\n pageElementObserver?.disconnect();\n });\n</script>\n\n<script lang=\"ts\">\n /\n ModalPage is used to render different pages of the Modal component\n \n @example\n * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoModal, BentoModalPage },\n * template: `\n * <bento-modal active-page='page1' :is-open='true'>\n * <bento-modal-page\n * pageId='page1'\n * actions-label='Move to next page'\n * :actions=\"[\n * {\n * title: 'Next page',\n * event: () => {\n * activePage.value = 'page2';\n * },\n * }]\">\n * Page 1\n * <template #content>\n * Page 1 content\n * </template>\n * </bento-modal-page>\n * <bento-modal-page\n * pageId='page2'\n * :actions=\"[\n * {\n * title: 'Save',\n * event: () => {},\n * }]\">\n * Page 2\n * <template #content>\n * Page 2 content\n * </template>\n * </bento-modal-page>\n * </bento-modal>\n * `\n * }\n /\n export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n :style=\"{ height: height }\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap\n v-if=\"isOpen \|\| initiallyOpen\"\n :id=\"modalId\"\n v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n >\n <bento-button\n v-if=\"showCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n :style=\"customPaddingStyles\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon :svg-title=\"t('close')\" />\n </bento-button>\n <template v-if=\"props.activePage\">\n <slot />\n </template>\n <bento-modal-page\n v-else\n :with-column-layout=\"withColumnLayout\"\n :size=\"size\"\n :custom-padding=\"customPadding\"\n :columns-size=\"columnsSize\"\n >\n <template v-if=\"hasSlot('default')\" #default>\n <slot></slot>\n </template>\n <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n ><slot name=\"content-col-1\"></slot\n ></template>\n <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n ><slot name=\"content-col-2\"></slot\n ></template>\n <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n </bento-modal-page>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import {\n computed,\n defineComponent,\n onMounted,\n type PropType,\n provide,\n ref,\n toRefs,\n useAttrs,\n useSlots,\n watch,\n } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoButton, type BentoButtonActionsList } from '@/components/button';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n import { generateUid } from '@/core/utils/ts';\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n import messages from './messages.json';\n\n import { BentoModalPage } from '@/components/modal/components/modal-page';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import {\n BentoDialogPageAnimation,\n type BentoDialogPageConfigData,\n type BentoDialogPageRegisterPage,\n DIALOG_PAGE_CONFIG_INJECTION_KEY,\n DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n } from '@/internal';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const slots = useSlots();\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref<HTMLDialogElement>(null);\n const isClosing = ref(false);\n const modalId = generateUid('modal');\n\n const emit = defineEmits<{\n /\n Emits update event when page is changed internally\n /\n (e: 'update:active-page', page: string): void;\n /\n Emitted when the modal is closed.\n /\n (e: 'close-modal');\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 * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n \n ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n /\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /\n The id of the current active page\n * Should be the same id as the BentoModalPage to be displayed\n /\n activePage: {\n type: String,\n default: null,\n },\n\n /\n If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n /\n columnsSize: {\n type: String as PropType<BentoModalColumnLayoutVariant>,\n default: BentoModalColumnLayoutVariant.SMALLER,\n },\n\n /\n If provided, manages the padding of the whole modal container\n /\n customPadding: { type: String, default: null },\n\n /\n If passed - sets first button color to red\n /\n destructiveActions: { type: Boolean, default: false },\n\n /\n Hides a cross icon on the right side of the title\n /\n hideCloseButton: { type: Boolean, required: true },\n\n /\n Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n /\n initiallyOpen: { type: Boolean, default: false },\n\n /\n If set to true, it allows the modal to be closed by clicking outside of it\n /\n isDismissible: { type: Boolean, required: true },\n\n /\n Controls the modal's state from the outside. Set it to true to open the modal\n /\n isOpen: { type: Boolean, required: true },\n\n /\n Defines whether the modal will be an alert modal\n /\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /\n Sets the width of the modal\n /\n size: {\n type: String as PropType<BentoModalSize \| `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /\n If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n /\n withColumnLayout: { type: Boolean, default: false },\n });\n\n const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n const pageCustomPadding = ref(props.customPadding);\n\n const customPaddingStyles = computed(() => {\n if (!pageCustomPadding.value) {\n return {};\n }\n\n return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n });\n\n const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit('close-modal');\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n if (previousPages.value[0]) {\n emit('update:active-page', previousPages.value[0]);\n }\n previousPages.value = [];\n isClosing.value = false;\n emitCloseEvent();\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n /\n If the user has pressed escape, clicked outside or clicked the close icon.\n * Needs to be called from outside, following the \"dialog.close()\" pattern,\n * when the closing event is triggered outside of the \"base-modal\"\n * component (e.g. from a closing action).\n /\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n return;\n }\n startCloseModalAnimation();\n };\n\n const closeModalOnClickOutside = () => {\n if (props.isDismissible) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n 'b-modal-base__container--animation': isAnimationActive.value,\n }));\n\n watch(\n () => [props.isOpen, modal.value],\n ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n if (!newModalValue) {\n return;\n }\n\n const isFirstMutation = !oldModalValue;\n if (newIsOpen) {\n openModal();\n // add the first page to the array when the modal opens\n if (!previousPages.value.length) {\n previousPages.value.push(activePage.value);\n }\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n /\n Expose methods through its 'ref'\n /\n defineExpose({\n internalModalActionClose,\n });\n\n // Let's Children components know they are inside a Modal (dialog element)\n provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n // Modal pagination\n const { activePage, isOpen, size } = toRefs(props);\n const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n const pages = ref<Array<string>>([]);\n const previousPages = ref([]);\n\n const updatePage = page => emit('update:active-page', page);\n\n // unregister page if removed / destroyed\n const unregisterPage = (pageIdToRemove: string) => () => {\n pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n };\n\n // Provide data and function to register page to subcomponent\n const registerPage: BentoDialogPageRegisterPage = pageId => {\n if (pageId) {\n pages.value.push(pageId);\n }\n\n return { unregisterPage: unregisterPage(pageId) };\n };\n\n const height = ref('');\n const isAnimationActive = ref(false);\n\n provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n activePage,\n height,\n isAnimationActive,\n pageCustomPadding,\n showCloseButton,\n size,\n });\n\n provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n activePage,\n animation,\n isOpen,\n pages,\n previousPages,\n updatePage,\n });\n\n provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n /\n Dialog container. It creates a dialog HTML element for the modal to use.\n \n @example\n * import BaseModal from './components/base-modal/base-modal.vue';\n \n export default {\n * components: { BaseModal },\n * template: `\n * <base-modal\n * :hide-close-button=\"true\"\n * :is-dismissible=\"false\"\n * :is-open=\"isOpen\"\n * @close-modal=\"isOpen = false\"\n * >\n * <template #content-col-1>\n * // Content on the left side column\n * </template>\n \n <template #content-col-2>\n * // Content on the right side column\n * </template>\n \n <template v-if=\"actions\" #actions>\n * <footer-actions :actions=\"actions\" />\n * </template>\n * </base-modal>\n * `,\n * setup() {\n * const isOpen = ref(true)\n * const footerActions = [{\n * title: 'Primary action',\n * event: () => { ... }\n * }]\n * }\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","slots","useSlots","hasSlot","useHasSlot","page","ref","props","__props","modalPageConditionalClasses","computed","modalContentConditionalClasses","_a","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","_b","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","t","useI18n","attrs","useAttrs","modal","isClosing","modalId","generateUid","emit","__emit","computedAriaLabel","openModal","emitCloseEvent","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","__expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}

package/dist/chunks/{button-actions-with-menu.LlNWeD3B.js → button-actions-with-menu.B8xFgt-p.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { ref as v, watch as h, nextTick as m, defineComponent as w, toRef as b, computed as p, provide as A, createElementBlock as B, openBlock as y, createElementVNode as N, normalizeClass as k, createVNode as E, createBlock as T, createCommentVNode as C, unref as I } from "vue";
-import { M as W, e as M, B as R, f as g } from "./button-actions.O0cnu1_g.js";
+import { M as W, e as M, B as R, f as g } from "./button-actions.Crj4QFAd.js";
 import { u as O } from "./index.E60QniEu.js";
 import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/button-actions-with-menu.css";
@@ -90,4 +90,4 @@ const S = (f) => {
 export {
   J as B
 };
-//# sourceMappingURL=button-actions-with-menu.LlNWeD3B.js.map
+//# sourceMappingURL=button-actions-with-menu.B8xFgt-p.js.map

package/dist/chunks/{button-actions-with-menu.LlNWeD3B.js.map → button-actions-with-menu.B8xFgt-p.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-actions-with-menu.LlNWeD3B.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, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n breakpoint?: number;\n container: Ref<HTMLElement>;\n defaultActionsCount: Ref<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(defaultActionsCount.value);\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.value) {\n displayedActionsCount.value += 1;\n\n await 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 await 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 await showActions();\n } else {\n await hideActions();\n }\n });\n\n watch(defaultActionsCount, async count => {\n displayedActionsCount.value = count;\n\n if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n await 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 { type 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 { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n import { useResponsiveActions } from './composables/use-responsive-actions';\n\n const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n actionsLayout: 'buttons-end',\n disableResponsiveBehavior: false,\n displayedActions: undefined,\n inverse: false,\n hideDisplayedActionsBreakpoint: 0,\n menuPosition: '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: toRef(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 if (displayedActionsCount.value === undefined \|\| displayedActionsCount.value >= props.actions.length) {\n return [];\n }\n\n const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n return actionsToProcess.flatMap<BentoMenuItem>(action => {\n if (!action.data) {\n return {\n text: action.title,\n handler: () => action.event?.({} as Event),\n icon: action.icon,\n critical: action.critical,\n disabled: action.disabled,\n };\n }\n\n return action.data;\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","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":"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"}
1	+ {"version":3,"file":"button-actions-with-menu.B8xFgt-p.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, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n breakpoint?: number;\n container: Ref<HTMLElement>;\n defaultActionsCount: Ref<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(defaultActionsCount.value);\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.value) {\n displayedActionsCount.value += 1;\n\n await 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 await 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 await showActions();\n } else {\n await hideActions();\n }\n });\n\n watch(defaultActionsCount, async count => {\n displayedActionsCount.value = count;\n\n if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n await 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 { type 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 { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n import { useResponsiveActions } from './composables/use-responsive-actions';\n\n const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n actionsLayout: 'buttons-end',\n disableResponsiveBehavior: false,\n displayedActions: undefined,\n inverse: false,\n hideDisplayedActionsBreakpoint: 0,\n menuPosition: '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: toRef(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 if (displayedActionsCount.value === undefined \|\| displayedActionsCount.value >= props.actions.length) {\n return [];\n }\n\n const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n return actionsToProcess.flatMap<BentoMenuItem>(action => {\n if (!action.data) {\n return {\n text: action.title,\n handler: () => action.event?.({} as Event),\n icon: action.icon,\n critical: action.critical,\n disabled: action.disabled,\n };\n }\n\n return action.data;\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","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":"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"}