@adyen/bento-vue3 1.89.2 → 1.90.0

package/dist/chunks/{base-modal.C2-JyHC_.js → base-modal.BjjDrx0z.js}

@@ -1,25 +1,32 @@
-import { defineComponent as G, useSlots as X, ref as m, computed as d, inject as ce, watch as U, nextTick as re, onUnmounted as me, openBlock as b, createBlock as C, normalizeClass as K, createSlots as Z, withCtx as l, createElementVNode as y, normalizeStyle as A, unref as t, renderSlot as c, createCommentVNode as T, createVNode as H, useAttrs as ge, onMounted as ve, provide as B, toRefs as pe, createElementBlock as fe, withKeys as _e, withDirectives as ye } from "vue";
-import { B as be } from "./button.DWF7FSIw.js";
+import { defineComponent as G, useSlots as X, ref as m, computed as d, inject as ue, watch as U, nextTick as re, onUnmounted as me, openBlock as y, createBlock as E, normalizeClass as K, createSlots as Z, withCtx as n, createElementVNode as b, normalizeStyle as C, unref as a, renderSlot as u, createCommentVNode as T, createVNode as H, useAttrs as ge, onMounted as ve, provide as B, toRefs as pe, createElementBlock as fe, withKeys as _e, withDirectives as be } from "vue";
+import { B as ye } from "./button.DWF7FSIw.js";
 import { B as Le } from "./focus-trap.BAiM_ywb.js";
 import { u as x } from "./use-has-slot.CyMiImRQ.js";
 import { u as he } from "./index.B875RXHM.js";
-import { l as Ae } from "./button-actions.cMQWyZne.js";
-import { g as Ce } from "./generate-uid.DBWe4g6T.js";
-import { B as Ee } from "./directive.Dpivxq_t.js";
+import { l as Ce } from "./button-actions.Bh_PZ_fV.js";
+import { g as Ee } from "./generate-uid.DBWe4g6T.js";
+import { B as Ae } from "./directive.Dpivxq_t.js";
 import { C as Oe } from "./cross.CCHdi6v3.js";
-import { b as Ie, B as Pe, D as Se, a as ke } from "./dialog-page.COfKqjT-.js";
+import { b as Ie, B as ke, D as Pe, a as Se } from "./dialog-page.Bh-7RAwX.js";
 import { B as V } from "./typography.B3J6_tYk.js";
-import { F as De } from "./footer-actions.BcYSsoUg.js";
+import { F as De } from "./footer-actions.uoNbOGAQ.js";
 import { o as Be } from "./resize.Bqks3WUm.js";
 import { G as Te, a as Ne } from "./grid-layout.CCWNscU_.js";
 import { _ as ee } 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 || {}), N = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(N || {}), I = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(I || {}), Y = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(Y || {}), 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 te = {
+var Ge = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.DIALOG = "dialog", e))(Ge || {}), Fe = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(Fe || {}), N = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(N || {}), I = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(I || {}), Y = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(Y || {}), Re = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(Re || {}), we = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(we || {});
+const ae = {
+  "de-DE": { ariaLabelFallback: "Modal", close: "Schließen" },
+  "en-GB": { ariaLabelFallback: "modal", close: "Close" },
   "en-US": { ariaLabelFallback: "modal", close: "Close" },
+  "es-ES": { ariaLabelFallback: "modal", close: "Cerrar" },
+  "es-MX": { ariaLabelFallback: "modal", close: "Cerrar" },
+  "fr-FR": { ariaLabelFallback: "fenêtre modale", close: "Fermer" },
+  "it-IT": { ariaLabelFallback: "modale", close: "Chiudi" },
   "ja-JP": { ariaLabelFallback: "モーダル", close: "閉じる" },
-  "pt-BR": { ariaLabelFallback: "modal", close: "Fechar" }
-}, ae = /* @__PURE__ */ Symbol("modal config data injection key"), Fe = { class: "b-modal-page__header" }, Me = {
+  "pt-BR": { ariaLabelFallback: "modal", close: "Fechar" },
+  "zh-CN": { ariaLabelFallback: "模态", close: "关闭" }
+}, te = /* @__PURE__ */ Symbol("modal config data injection key"), $e = { class: "b-modal-page__header" }, Me = {
   "aria-label": "modal actions",
   class: "b-modal-page__actions"
 }, ze = G({}), Ue = /* @__PURE__ */ G({
@@ -36,30 +43,30 @@ const te = {
     previousPage: { default: void 0 }
   },
   setup(e) {
-    const w = X(), u = x(w), v = m(null), o = e, R = d(() => ({
+    const F = X(), c = x(F), v = m(null), o = e, R = d(() => ({
       "b-modal-page--custom-padding": o.customPadding
     })), p = d(() => ({
-      "b-modal-page__content--with-header": u("default"),
-      "b-modal-page__content--with-actions": u("actions") || o.actions?.length
+      "b-modal-page__content--with-header": c("default"),
+      "b-modal-page__content--with-actions": c("actions") || o.actions?.length
     })), i = d(() => {
       if (!o.customPadding)
         return {};
-      const n = {
+      const l = {
         paddingLeft: o.customPadding,
         paddingRight: o.customPadding
-      }, r = { ...n, paddingTop: void 0, paddingBottom: void 0 };
-      return u("default") || (r.paddingTop = o.customPadding), u("actions") || (r.paddingBottom = o.customPadding), {
+      }, r = { ...l, paddingTop: void 0, paddingBottom: void 0 };
+      return c("default") || (r.paddingTop = o.customPadding), c("actions") || (r.paddingBottom = o.customPadding), {
         header: {
-          ...n,
+          ...l,
           paddingTop: o.customPadding,
           paddingRight: `${parseInt(o.customPadding, 10) + 26}px`,
           flex: 1
         },
         content: r,
-        actions: { ...n, paddingBottom: o.customPadding },
+        actions: { ...l, paddingBottom: o.customPadding },
         backButton: { top: o.customPadding, paddingLeft: o.customPadding }
       };
-    }), f = d(() => o.withColumnLayout && F.value === N.LARGE), P = d(() => o.columnsSize === I.SMALLER ? [
+    }), f = d(() => o.withColumnLayout && $.value === N.LARGE), k = d(() => o.columnsSize === I.SMALLER ? [
       { small: 4, medium: 4, large: 4 },
       { small: 8, medium: 8, large: 8 }
     ] : o.columnsSize === I.BIGGER ? [
@@ -68,54 +75,54 @@ const te = {
     ] : [
       { small: 6, medium: 6, large: 6 },
       { small: 6, medium: 6, large: 6 }
-    ]), { activePage: _, height: a, isAnimationActive: E, pageCustomPadding: L, showCloseButton: $, size: F } = ce(ae), M = d(() => _.value === o.pageId || !_.value);
+    ]), { activePage: _, height: t, isAnimationActive: A, pageCustomPadding: L, showCloseButton: w, size: $ } = ue(te), M = d(() => _.value === o.pageId || !_.value);
     let O = null;
     return U(
       () => _.value,
-      async (n, r) => {
-        M.value && (await re(), a.value = `${v.value?.$el?.clientHeight}px`, L.value = o.customPadding, E.value = r !== void 0, O = Be(v.value, () => {
+      async (l, r) => {
+        M.value && (await re(), t.value = `${v.value?.$el?.clientHeight}px`, L.value = o.customPadding, A.value = r !== void 0, O = Be(v.value, () => {
           const g = `${v.value?.$el?.clientHeight}px`;
-          g && g !== a.value && (a.value = g);
+          g && g !== t.value && (t.value = g);
         }));
       },
       { immediate: !0 }
     ), me(() => {
       O?.disconnect();
-    }), (n, r) => (b(), C(Ie, {
+    }), (l, r) => (y(), E(Ie, {
       ref_key: "page",
       ref: v,
       class: K(["b-modal-page", R.value]),
-      "page-id": n.pageId,
+      "page-id": l.pageId,
       "always-show-border": f.value,
       "back-button-styling": i.value?.backButton,
-      "previous-page": n.previousPage,
-      onAnimationend: r[0] || (r[0] = (g) => E.value = !1)
+      "previous-page": l.previousPage,
+      onAnimationend: r[0] || (r[0] = (g) => A.value = !1)
     }, Z({
-      content: l(() => [
-        y("div", {
+      content: n(() => [
+        b("div", {
           class: K(["b-modal-page__content", p.value]),
-          style: A(i.value.content)
+          style: C(i.value.content)
         }, [
-          t(u)("content") || t(u)("content-col-1") && t(u)("content-col-2") ? (b(), C(t(V), {
+          a(c)("content") || a(c)("content-col-1") && a(c)("content-col-2") ? (y(), E(a(V), {
             key: 0,
             el: "div"
           }, {
-            default: l(() => [
-              f.value ? (b(), C(t(Te), {
+            default: n(() => [
+              f.value ? (y(), E(a(Te), {
                 key: 0,
-                "column-width": P.value,
-                "container-type": t(Ne).NORMAL,
+                "column-width": k.value,
+                "container-type": a(Ne).NORMAL,
                 "no-gap": "",
                 class: "b-modal-page__grid"
               }, {
-                "col-1": l(() => [
-                  c(n.$slots, "content-col-1", {}, void 0, !0)
+                "col-1": n(() => [
+                  u(l.$slots, "content-col-1", {}, void 0, !0)
                 ]),
-                "col-2": l(() => [
-                  c(n.$slots, "content-col-2", {}, void 0, !0)
+                "col-2": n(() => [
+                  u(l.$slots, "content-col-2", {}, void 0, !0)
                 ]),
                 _: 3
-              }, 8, ["column-width", "container-type"])) : c(n.$slots, "content", { key: 1 }, void 0, !0)
+              }, 8, ["column-width", "container-type"])) : u(l.$slots, "content", { key: 1 }, void 0, !0)
             ]),
             _: 3
           })) : T("", !0)
@@ -123,22 +130,22 @@ const te = {
       ]),
       _: 2
     }, [
-      t(u)("default") || t($) ? {
+      a(c)("default") || a(w) ? {
         name: "header",
-        fn: l(() => [
-          y("div", {
+        fn: n(() => [
+          b("div", {
             class: "b-modal-page__header-container",
-            style: A(i.value.header)
+            style: C(i.value.header)
           }, [
-            y("div", Fe, [
-              H(t(V), {
+            b("div", $e, [
+              H(a(V), {
                 class: "b-modal-page__title",
                 el: "span",
                 variant: "title",
                 stronger: ""
               }, {
-                default: l(() => [
-                  t(u)("default") ? c(n.$slots, "default", { key: 0 }, void 0, !0) : T("", !0)
+                default: n(() => [
+                  a(c)("default") ? u(l.$slots, "default", { key: 0 }, void 0, !0) : T("", !0)
                 ]),
                 _: 3
               })
@@ -147,30 +154,30 @@ const te = {
         ]),
         key: "0"
       } : void 0,
-      t(u)("actions") ? {
+      a(c)("actions") ? {
         name: "footer",
-        fn: l(() => [
-          y("div", {
+        fn: n(() => [
+          b("div", {
             class: "b-modal-page__actions-container",
-            style: A(i.value.actions)
+            style: C(i.value.actions)
           }, [
-            y("div", Me, [
-              c(n.$slots, "actions", {}, void 0, !0)
+            b("div", Me, [
+              u(l.$slots, "actions", {}, void 0, !0)
             ])
           ], 4)
         ]),
         key: "1"
-      } : n.actions && n.actions.length > 0 ? {
+      } : l.actions && l.actions.length > 0 ? {
         name: "footer",
-        fn: l(() => [
-          y("div", {
+        fn: n(() => [
+          b("div", {
             class: "b-modal-page__actions-container",
-            style: A(i.value.actions)
+            style: C(i.value.actions)
           }, [
-            H(t(De), {
-              actions: n.actions,
-              "actions-label": n.actionsLabel,
-              "destructive-actions": n.destructiveActions
+            H(a(De), {
+              actions: l.actions,
+              "actions-label": l.actionsLabel,
+              "destructive-actions": l.destructiveActions
             }, null, 8, ["actions", "actions-label", "destructive-actions"])
           ], 4)
         ]),
@@ -179,7 +186,7 @@ const te = {
     ]), 1032, ["class", "page-id", "always-show-border", "back-button-styling", "previous-page"]));
   }
 }), Ke = /* @__PURE__ */ ee(Ue, [["__scopeId", "data-v-1e6a91c3"]]), He = { class: "b-modal-base" }, Ye = ["role", "aria-label", "open"], Je = G({
-  i18n: { messages: te },
+  i18n: { messages: ae },
   name: "base-modal"
 }), qe = /* @__PURE__ */ G({
   ...Je,
@@ -272,131 +279,131 @@ const te = {
     withColumnLayout: { type: Boolean, default: !1 }
   },
   emits: ["update:active-page", "close-modal"],
-  setup(e, { expose: J, emit: w }) {
-    const { t: v } = he({ messages: te }), o = X(), R = ge(), p = x(o), i = m(null), f = m(!1), P = Ce("modal"), _ = w, a = e, E = d(() => a.isDismissible && !a.hideCloseButton), L = m(a.customPadding), $ = d(() => L.value ? { top: L.value, right: L.value } : {}), F = d(() => R["aria-label"] ?? v("ariaLabelFallback")), M = d(() => a.withColumnLayout && a.size === N.LARGE), O = () => {
+  setup(e, { expose: J, emit: F }) {
+    const { t: v } = he({ messages: ae }), o = X(), R = ge(), p = x(o), i = m(null), f = m(!1), k = Ee("modal"), _ = F, t = e, A = d(() => t.isDismissible && !t.hideCloseButton), L = m(t.customPadding), w = d(() => L.value ? { top: L.value, right: L.value } : {}), $ = d(() => R["aria-label"] ?? v("ariaLabelFallback")), M = d(() => t.withColumnLayout && t.size === N.LARGE), O = () => {
       i.value.showModal();
-    }, n = () => {
+    }, l = () => {
       _("close-modal");
     }, r = () => {
-      f.value && i.value && (i.value.close(), h.value[0] && _("update:active-page", h.value[0]), h.value = [], f.value = !1, n());
+      f.value && i.value && (i.value.close(), h.value[0] && _("update:active-page", h.value[0]), h.value = [], f.value = !1, l());
     }, g = () => {
       i.value.open && (f.value = !0);
-    }, S = (s) => {
-      s && s.preventDefault(), !(!a.isDismissible && a.modalRole === Y.DIALOG) && g();
+    }, P = (s) => {
+      s && s.preventDefault(), !(!t.isDismissible && t.modalRole === Y.DIALOG) && g();
     }, oe = () => {
-      a.isDismissible && S();
-    }, ne = d(() => ({
-      [`b-modal-base__container--${a.size}`]: a.size,
+      t.isDismissible && P();
+    }, le = d(() => ({
+      [`b-modal-base__container--${t.size}`]: t.size,
       "b-modal-base__container--hide": f.value,
       "b-modal-base__container--column-layout": M.value,
       "b-modal-base__container--animation": Q.value
     }));
     U(
-      () => [a.isOpen, i.value],
+      () => [t.isOpen, i.value],
       ([s, D], [, de]) => {
         if (!D)
           return;
         s ? (O(), h.value.length || h.value.push(z.value)) : !de || g();
       }
     ), U(
-      () => a.actions,
+      () => t.actions,
       () => {
-        a.actions?.[0]?.state === "success" && setTimeout(g, 500);
+        t.actions?.[0]?.state === "success" && setTimeout(g, 500);
       },
       { deep: !0 }
     ), ve(() => {
-      a.isOpen && i.value && O();
+      t.isOpen && i.value && O();
     }), J({
-      internalModalActionClose: S
-    }), B(Ae, P);
-    const { activePage: z, isOpen: q, size: W } = pe(a), se = m(Pe.TRANSITION_LEVEL_DEEPER), k = m([]), h = m([]), le = (s) => _("update:active-page", s), ie = (s) => () => {
-      k.value = k.value?.filter((D) => D !== s);
-    }, ue = (s) => (s && k.value.push(s), { unregisterPage: ie(s) }), j = m(""), Q = m(!1);
-    return B(ae, {
+      internalModalActionClose: P
+    }), B(Ce, k);
+    const { activePage: z, isOpen: q, size: W } = pe(t), se = m(ke.TRANSITION_LEVEL_DEEPER), S = m([]), h = m([]), ne = (s) => _("update:active-page", s), ie = (s) => () => {
+      S.value = S.value?.filter((D) => D !== s);
+    }, ce = (s) => (s && S.value.push(s), { unregisterPage: ie(s) }), j = m(""), Q = m(!1);
+    return B(te, {
       activePage: z,
       height: j,
       isAnimationActive: Q,
       pageCustomPadding: L,
-      showCloseButton: E,
+      showCloseButton: A,
       size: W
-    }), B(Se, {
+    }), B(Pe, {
       activePage: z,
       animation: se,
       isOpen: q,
-      pages: k,
+      pages: S,
       previousPages: h,
-      updatePage: le
-    }), B(ke, ue), (s, D) => (b(), fe("div", He, [
-      y("dialog", {
+      updatePage: ne
+    }), B(Se, ce), (s, D) => (y(), fe("div", He, [
+      b("dialog", {
         ref_key: "modal",
         ref: i,
         role: e.modalRole,
-        "aria-label": F.value,
-        style: A({ height: j.value }),
-        class: K(["b-modal-base__container", ne.value]),
+        "aria-label": $.value,
+        style: C({ height: j.value }),
+        class: K(["b-modal-base__container", le.value]),
         open: e.initiallyOpen,
         onAnimationend: r,
-        onKeydown: _e(S, ["esc"])
+        onKeydown: _e(P, ["esc"])
       }, [
-        t(q) || e.initiallyOpen ? ye((b(), C(t(Le), {
+        a(q) || e.initiallyOpen ? be((y(), E(a(Le), {
           key: 0,
-          id: t(P)
+          id: a(k)
         }, {
-          default: l(() => [
-            E.value ? (b(), C(t(be), {
+          default: n(() => [
+            A.value ? (y(), E(a(ye), {
               key: 0,
               class: "b-modal-base__close-button",
               variant: "tertiary",
               type: "button",
-              style: A($.value),
-              onClick: S
+              style: C(w.value),
+              onClick: P
             }, {
-              default: l(() => [
-                H(t(Oe), {
-                  "svg-title": t(v)("close")
+              default: n(() => [
+                H(a(Oe), {
+                  "svg-title": a(v)("close")
                 }, null, 8, ["svg-title"])
               ]),
               _: 1
             }, 8, ["style"])) : T("", !0),
-            a.activePage ? c(s.$slots, "default", { key: 1 }, void 0, !0) : (b(), C(t(Ke), {
+            t.activePage ? u(s.$slots, "default", { key: 1 }, void 0, !0) : (y(), E(a(Ke), {
               key: 2,
               "with-column-layout": e.withColumnLayout,
-              size: t(W),
+              size: a(W),
               "custom-padding": e.customPadding,
               "columns-size": e.columnsSize
             }, Z({ _: 2 }, [
-              t(p)("default") ? {
+              a(p)("default") ? {
                 name: "default",
-                fn: l(() => [
-                  c(s.$slots, "default", {}, void 0, !0)
+                fn: n(() => [
+                  u(s.$slots, "default", {}, void 0, !0)
                 ]),
                 key: "0"
               } : void 0,
-              t(p)("content-col-1") ? {
+              a(p)("content-col-1") ? {
                 name: "content-col-1",
-                fn: l(() => [
-                  c(s.$slots, "content-col-1", {}, void 0, !0)
+                fn: n(() => [
+                  u(s.$slots, "content-col-1", {}, void 0, !0)
                 ]),
                 key: "1"
               } : void 0,
-              t(p)("content-col-2") ? {
+              a(p)("content-col-2") ? {
                 name: "content-col-2",
-                fn: l(() => [
-                  c(s.$slots, "content-col-2", {}, void 0, !0)
+                fn: n(() => [
+                  u(s.$slots, "content-col-2", {}, void 0, !0)
                 ]),
                 key: "2"
               } : void 0,
-              t(p)("content") ? {
+              a(p)("content") ? {
                 name: "content",
-                fn: l(() => [
-                  c(s.$slots, "content", {}, void 0, !0)
+                fn: n(() => [
+                  u(s.$slots, "content", {}, void 0, !0)
                 ]),
                 key: "3"
               } : void 0,
-              t(p)("actions") ? {
+              a(p)("actions") ? {
                 name: "actions",
-                fn: l(() => [
-                  c(s.$slots, "actions", {}, void 0, !0)
+                fn: n(() => [
+                  u(s.$slots, "actions", {}, void 0, !0)
                 ]),
                 key: "4"
               } : void 0
@@ -404,21 +411,21 @@ const te = {
           ]),
           _: 3
         }, 8, ["id"])), [
-          [t(Ee), oe]
+          [a(Ae), oe]
         ]) : T("", !0)
       ], 46, Ye)
     ]));
   }
-}), dt = /* @__PURE__ */ ee(qe, [["__scopeId", "data-v-8f2a75a1"]]);
+}), da = /* @__PURE__ */ ee(qe, [["__scopeId", "data-v-8f2a75a1"]]);
 export {
   I as B,
   Re as a,
-  $e as b,
+  we as b,
   Ke as c,
   Y as d,
   N as e,
   Ge as f,
-  we as g,
-  dt as h
+  Fe as g,
+  da as h
 };
-//# sourceMappingURL=base-modal.C2-JyHC_.js.map
+//# sourceMappingURL=base-modal.BjjDrx0z.js.map