@adyen/bento-vue2 1.18.0 → 1.19.0

package/dist/info-icon.js

@@ -1,9 +1,9 @@
 import { defineComponent as n } from "vue";
-import { c as i } from "./chunks/index.290bbc9e.js";
+import { c as i } from "./chunks/index.dc985e76.js";
 import { I as r } from "./chunks/info.8b6328aa.js";
-import { B as s } from "./chunks/tooltip.d452f6c4.js";
+import { B as s } from "./chunks/tooltip.6748027a.js";
 import { n as a } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index8.css";
+import "./assets/index38.css";
 const p = n({
   name: "bento-info-icon",
   components: { InfoIcon: r },

package/dist/input-field.js

@@ -1,15 +1,15 @@
 import { defineComponent as H, useAttrs as Y, useSlots as j, ref as O, provide as W, toRef as q, computed as i, toRefs as K } from "vue";
-import { I as X, B as z } from "./chunks/dropdown.0a9acf8b.js";
-import { d as I, B as G } from "./chunks/index.546b27ae.js";
+import { I as X, B as z } from "./chunks/dropdown.0574f613.js";
+import { d as I, B as G } from "./chunks/index.de687404.js";
 import { g as u } from "./chunks/unique-id.a2a2b458.js";
 import { g as J } from "./chunks/get-slot-text.99c3d860.js";
 import { u as Q } from "./chunks/aria-label.ac9651a5.js";
 import { u as Z } from "./chunks/i18n.eb5b985b.js";
 import { u as ee } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { u as te } from "./chunks/use-has-slot.fbeb19ec.js";
-import { E as ae, F as oe } from "./chunks/error-message.317dd85f.js";
+import { E as ae, F as oe } from "./chunks/error-message.75666843.js";
 import { n as re } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index46.css";
+import "./assets/index27.css";
 var d = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(d || {}), n = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(n || {}), p = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(p || {}), h = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(h || {}), ie = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(ie || {});
 const ne = {
   "en-US": {

package/dist/internal.js

@@ -1,28 +1,81 @@
-import { B as r, L as e } from "./chunks/listbox-option-tag.720eabb5.js";
-import { C as s, a as p, b as l } from "./chunks/calendar.7a2d1894.js";
-import { C as i, a as n } from "./chunks/copy.e01532cf.js";
-import { C as m } from "./chunks/controls-group.2b645d54.js";
-import { E as d, F as L } from "./chunks/error-message.317dd85f.js";
-import { F as y } from "./chunks/fixed-scroller.afe02620.js";
-import { G as F, a as b } from "./chunks/grid-layout.e0025286.js";
-import { B as T, u as v } from "./chunks/listbox.dc3d986e.js";
-import { B as g } from "./chunks/teleport.d52e5254.js";
+import { B as I, L } from "./chunks/listbox-option-tag.89846151.js";
+import { C as y, a as A, b as S } from "./chunks/calendar.263cfc88.js";
+import { C as b, a as g } from "./chunks/copy.647aae54.js";
+import { C as T } from "./chunks/controls-group.8abe0bd1.js";
+import { B as D, b as F, a as N, D as P } from "./chunks/dialog-page.f787969c.js";
+import { E as K, F as M } from "./chunks/error-message.75666843.js";
+import { F as Y } from "./chunks/fixed-scroller.06574a66.js";
+import { G as W, a as j } from "./chunks/grid-layout.e0025286.js";
+import { B as z, u as H } from "./chunks/listbox.a8180c4a.js";
+import { ref as f, watch as v } from "vue";
+import { B as U } from "./chunks/teleport.84b0f20b.js";
+const p = (l, e) => {
+  for (const o of l) {
+    if (o.value === e)
+      return o.label;
+    if (o.items)
+      return p(o.items, e);
+  }
+  return null;
+}, d = (l, e, o) => {
+  const a = f([]), n = f(), i = (t) => {
+    n.value = o.value ? t.map(({ value: m }) => m) : t[0].value;
+  }, C = (t) => {
+    a.value = t, i(t);
+  }, u = () => {
+    a.value = [], n.value = null;
+  };
+  return v(
+    () => e.value,
+    () => {
+      if (!e.value) {
+        u();
+        return;
+      }
+      const t = !Array.isArray(e.value), m = [...a.value];
+      u();
+      const c = (r) => {
+        let s = p(l.value, r);
+        s || p(m, r), s || (s = r.toString()), a.value.push({ value: r, label: s });
+      };
+      if (t) {
+        const r = e.value;
+        c(r), i(a.value);
+        return;
+      }
+      e.value.forEach(c), i(a.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedValues: a,
+    simpleSelectedValuesCache: n,
+    // Methods
+    resetCache: u,
+    setCachedValues: C
+  };
+};
 export {
-  r as BentoAvatar,
-  T as BentoListbox,
-  g as BentoTeleport,
-  s as Calendar,
-  p as CalendarEvent,
-  l as CalendarFirstDayOfWeek,
-  m as ControlsGroup,
-  i as Copy,
-  n as CopyTooltipState,
-  d as ErrorMessage,
-  L as FieldLabel,
-  y as FixedScroller,
-  F as GridLayout,
-  b as GridLayoutContainerType,
-  e as ListboxOptionTag,
-  v as useMultiLevelItems
+  I as BentoAvatar,
+  D as BentoDialogPageAnimation,
+  z as BentoListbox,
+  U as BentoTeleport,
+  y as Calendar,
+  A as CalendarEvent,
+  S as CalendarFirstDayOfWeek,
+  T as ControlsGroup,
+  b as Copy,
+  g as CopyTooltipState,
+  F as DIALOG_PAGE_CONFIG_INJECTION_KEY,
+  N as DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,
+  P as DialogPage,
+  K as ErrorMessage,
+  M as FieldLabel,
+  Y as FixedScroller,
+  W as GridLayout,
+  j as GridLayoutContainerType,
+  L as ListboxOptionTag,
+  d as useCachedSelectedValues,
+  H as useMultiLevelItems
 };
 //# sourceMappingURL=internal.js.map

package/dist/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"internal.js","sources":["../src/components/internal/listbox/composables/use-cached-selected-values/use-cached-selected-values.ts"],"sourcesContent":["import {\n    BentoListboxMultiSelectValue,\n    BentoListboxOptions,\n    BentoListboxSelectedValue,\n    BentoListboxValue,\n} from '@/types';\nimport { ref, Ref, watch } from 'vue';\n\n/**\n * Extracts an item's label from the items in the list of options\n * displayed in the Listbox.\n *\n * Searches through all items and their sub-items (categories).\n *\n * @param items List of options displayed in the Listbox\n * @param value Selected value that needs to be found in the list\n * @returns Label found\n */\nconst findItemLabel = (items: BentoListboxOptions, value: BentoListboxValue): string => {\n    // eslint-disable-next-line no-restricted-syntax\n    for (const item of items) {\n        if (item.value === value) {\n            return item.label;\n        }\n\n        if (item.items) {\n            return findItemLabel(item.items, value);\n        }\n    }\n\n    return null;\n};\n\n/**\n * Creates two lists (one with value/label pairs and one simply with values) that are\n * used to cache the internal option selections to preserve the `label` in case the\n * value is loaded from external sources and might not be found in the list of `items`\n * later on.\n *\n * This helps with external searches and lazy loaded lists.\n *\n * @param items List of options displayed in the Listbox\n * @param selectedValues Selected list of values\n * @param multiple Indicates if the Listbox is multi-select (true) or single-select (false)\n * @returns Two lists of cached items. One list with label/value pairs and one with only the values stored.\n */\nexport const useCachedSelectedValues = (\n    items: Ref<BentoListboxOptions>,\n    selectedValues: Ref<BentoListboxSelectedValue>,\n    multiple: Ref<boolean>\n) => {\n    const cachedSelectedValues = ref<BentoListboxOptions>([]);\n    const simpleSelectedValuesCache = ref<BentoListboxSelectedValue>();\n\n    const setSimpleSelectedValues = (newSelectedValues: BentoListboxOptions) => {\n        simpleSelectedValuesCache.value = multiple.value\n            ? newSelectedValues.map(({ value }) => value)\n            : newSelectedValues[0].value;\n    };\n\n    const setCachedValues = (newSelectedValues: BentoListboxOptions) => {\n        cachedSelectedValues.value = newSelectedValues;\n        setSimpleSelectedValues(newSelectedValues);\n    };\n\n    const resetCache = () => {\n        cachedSelectedValues.value = [];\n        simpleSelectedValuesCache.value = null;\n    };\n\n    watch(\n        () => selectedValues.value,\n        () => {\n            if (!selectedValues.value) {\n                resetCache();\n                return;\n            }\n\n            const isSingleSelect = !Array.isArray(selectedValues.value);\n            // Make a copy of cache\n            const cachedCopy = [...cachedSelectedValues.value];\n            // Clear cache\n            resetCache();\n\n            const addValue = (value: BentoListboxValue) => {\n                // Search label by value in \"items\"\n                let selectedItemText = findItemLabel(items.value, value);\n\n                // Search in previous cache\n                if (!selectedItemText) {\n                    findItemLabel(cachedCopy, value);\n                }\n\n                // Transform value to label if not found anywhere\n                if (!selectedItemText) {\n                    selectedItemText = value.toString();\n                }\n\n                cachedSelectedValues.value.push({ value, label: selectedItemText });\n            };\n\n            if (isSingleSelect) {\n                const value = selectedValues.value as BentoListboxValue;\n\n                addValue(value);\n                setSimpleSelectedValues(cachedSelectedValues.value);\n                return;\n            }\n\n            // Add each selected value in the cache\n            (selectedValues.value as BentoListboxMultiSelectValue).forEach(addValue);\n            setSimpleSelectedValues(cachedSelectedValues.value);\n        },\n        { immediate: true }\n    );\n\n    return {\n        // Values\n        cachedSelectedValues,\n        simpleSelectedValuesCache,\n        // Methods\n        resetCache,\n        setCachedValues,\n    };\n};\n"],"names":["findItemLabel","items","value","item","useCachedSelectedValues","selectedValues","multiple","cachedSelectedValues","ref","simpleSelectedValuesCache","setSimpleSelectedValues","newSelectedValues","setCachedValues","resetCache","watch","isSingleSelect","cachedCopy","addValue","selectedItemText"],"mappings":";;;;;;;;;;;AAkBA,MAAMA,IAAgB,CAACC,GAA4BC,MAAqC;AAEpF,aAAWC,KAAQF,GAAO;AAClB,QAAAE,EAAK,UAAUD;AACf,aAAOC,EAAK;AAGhB,QAAIA,EAAK;AACE,aAAAH,EAAcG,EAAK,OAAOD,CAAK;AAAA;AAIvC,SAAA;AACX,GAeaE,IAA0B,CACnCH,GACAI,GACAC,MACC;AACK,QAAAC,IAAuBC,EAAyB,CAAA,CAAE,GAClDC,IAA4BD,KAE5BE,IAA0B,CAACC,MAA2C;AACxE,IAAAF,EAA0B,QAAQH,EAAS,QACrCK,EAAkB,IAAI,CAAC,EAAE,OAAAT,EAAA,MAAYA,CAAK,IAC1CS,EAAkB,CAAC,EAAE;AAAA,EAAA,GAGzBC,IAAkB,CAACD,MAA2C;AAChE,IAAAJ,EAAqB,QAAQI,GAC7BD,EAAwBC,CAAiB;AAAA,EAAA,GAGvCE,IAAa,MAAM;AACrB,IAAAN,EAAqB,QAAQ,IAC7BE,EAA0B,QAAQ;AAAA,EAAA;AAGtC,SAAAK;AAAA,IACI,MAAMT,EAAe;AAAA,IACrB,MAAM;AACE,UAAA,CAACA,EAAe,OAAO;AACZ,QAAAQ;AACX;AAAA;AAGJ,YAAME,IAAiB,CAAC,MAAM,QAAQV,EAAe,KAAK,GAEpDW,IAAa,CAAC,GAAGT,EAAqB,KAAK;AAEtC,MAAAM;AAEL,YAAAI,IAAW,CAACf,MAA6B;AAE3C,YAAIgB,IAAmBlB,EAAcC,EAAM,OAAOC,CAAK;AAGvD,QAAKgB,KACDlB,EAAcgB,GAAYd,CAAK,GAI9BgB,MACDA,IAAmBhB,EAAM,aAG7BK,EAAqB,MAAM,KAAK,EAAE,OAAAL,GAAO,OAAOgB,GAAkB;AAAA,MAAA;AAGtE,UAAIH,GAAgB;AAChB,cAAMb,IAAQG,EAAe;AAE7B,QAAAY,EAASf,CAAK,GACdQ,EAAwBH,EAAqB,KAAK;AAClD;AAAA;AAIH,MAAAF,EAAe,MAAuC,QAAQY,CAAQ,GACvEP,EAAwBH,EAAqB,KAAK;AAAA,IACtD;AAAA,IACA,EAAE,WAAW,GAAK;AAAA,EAAA,GAGf;AAAA;AAAA,IAEH,sBAAAA;AAAA,IACA,2BAAAE;AAAA;AAAA,IAEA,YAAAI;AAAA,IACA,iBAAAD;AAAA,EAAA;AAER;"}

package/dist/link.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/index.6c017121.js";
+import { B as o, a as t } from "./chunks/index.5b47c56b.js";
 export {
   o as BentoLink,
   t as BentoLinkVariant

package/dist/loading-indicator.js

@@ -1,6 +1,6 @@
 import { defineComponent as t, onMounted as s, onUnmounted as l, computed as i } from "vue";
 import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index10.css";
+import "./assets/index37.css";
 var a = /* @__PURE__ */ ((n) => (n.START = "loading-start", n.END = "loading-end", n))(a || {});
 const d = t({
   name: "bento-loading-indicator",

package/dist/menu.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/index.81443e01.js";
+import { B as o, a as t } from "./chunks/index.a52b98d1.js";
 export {
   o as BentoMenu,
   t as BentoMenuEvent

package/dist/modal-fullscreen.js

@@ -1,22 +1,98 @@
-import { defineComponent as p, toRefs as v, ref as r, useSlots as b, computed as y, watch as C, nextTick as h, onMounted as B, provide as g } from "vue";
-import { a as x } from "./chunks/button.f5739261.js";
-import { B as A } from "./chunks/index.6c299479.js";
-import { B as I } from "./chunks/index.546b27ae.js";
-import { C as F } from "./chunks/cross.04678d81.js";
-import { u as M } from "./chunks/i18n.eb5b985b.js";
-import { g as S } from "./chunks/unique-id.a2a2b458.js";
-import { u as k } from "./chunks/use-has-slot.fbeb19ec.js";
-import { BentoButtonActions as L } from "./button.js";
-import { n as O } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index12.css";
-const w = Symbol("modal fullscreen children element injection key"), E = {
+import { defineComponent as C, useSlots as B, onMounted as L, toRefs as O, ref as r, computed as M, watch as k, nextTick as T, provide as d } from "vue";
+import { a as D } from "./chunks/button.0b6cda85.js";
+import { B as N } from "./chunks/index.302e9cf2.js";
+import { B as w } from "./chunks/index.de687404.js";
+import { u as x } from "./chunks/use-has-slot.fbeb19ec.js";
+import { D as G, B as R, b as J, a as K } from "./chunks/dialog-page.f787969c.js";
+import { B as U } from "./chunks/button-actions.1dc90a19.js";
+import { n as P } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { C as Y } from "./chunks/cross.04678d81.js";
+import { u as $ } from "./chunks/i18n.eb5b985b.js";
+import { g as z } from "./chunks/unique-id.a2a2b458.js";
+import { M as H } from "./chunks/modal-fullscreen.keys.b9f31632.js";
+import "./assets/index41.css";
+const V = {}, j = /* @__PURE__ */ C({
+  ...V,
+  __name: "modal-fullscreen-page",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Label shown next to the modal actions
+     */
+    contextualLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Identifier of the page, used with activePage prop to handle sidepanel navigation
+     */
+    pageId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior
+     * Used when the back button should not take the user to the natural previous page
+     * Set to `null` to hide back button in the page
+     */
+    previousPage: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Title of the modal
+     */
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  setup(u) {
+    const e = u, a = B(), t = x(a);
+    return L(() => {
+      if (e.actions && e.actions.length > 2)
+        throw new Error("Not more than 2 action buttons may be provided in Bento Modal Fullscreen");
+    }), { __sfc: !0, props: e, slots: a, hasSlot: t, BentoButtonActions: U, BentoTypography: w, DialogPage: G };
+  }
+});
+var q = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a(t.DialogPage, { staticClass: "b-modal-fullscreen-page", attrs: { "page-id": e.pageId, "previous-page": e.previousPage, "always-show-border": "" }, scopedSlots: e._u([{ key: "header", fn: function() {
+    return [a("div", { staticClass: "b-modal-fullscreen-page__header" }, [a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title" }, [e.title ? a(t.BentoTypography, { staticClass: "b-modal-fullscreen-page__title", attrs: { el: "h2", variant: "title", title: e.title } }, [e._v(e._s(e.title))]) : e._e()], 1), t.hasSlot("header") ? a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot" }, [e._t("header")], 2) : e._e(), a("div", { staticClass: "b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions" }, [e.contextualLabel ? a(t.BentoTypography, { staticClass: "b-modal-fullscreen-page__contextual-label", attrs: { el: "span", title: e.contextualLabel } }, [e._v(e._s(e.contextualLabel))]) : e._e(), e.actions ? a(t.BentoButtonActions, { staticClass: "b-modal-fullscreen-page__actions", attrs: { actions: e.actions } }) : e._e(), a("div", { staticClass: "b-modal-fullscreen-page__separator" })], 1)])];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [a("div", { staticClass: "b-modal-fullscreen-page__content" }, [e._t("default")], 2)];
+  }, proxy: !0 }], null, !0) });
+}, Q = [], W = /* @__PURE__ */ P(
+  j,
+  q,
+  Q,
+  !1,
+  null,
+  "30654f2c",
+  null,
+  null
+);
+const X = W.exports, Z = {
   "en-US": {
     close: "Close"
   }
-}, T = {
-  i18n: { messages: E }
-}, D = /* @__PURE__ */ p({
-  ...T,
+}, ee = {
+  i18n: { messages: Z }
+}, te = /* @__PURE__ */ C({
+  ...ee,
   __name: "modal-fullscreen",
   props: {
     /**
@@ -33,6 +109,14 @@ const w = Symbol("modal fullscreen children element injection key"), E = {
       type: Array,
       default: null
     },
+    /**
+     * The id of the current active page
+     * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed
+     */
+    activePage: {
+      type: String,
+      default: null
+    },
     /**
      * Label shown next to the modal actions
      */
@@ -55,46 +139,62 @@ const w = Symbol("modal fullscreen children element injection key"), E = {
       default: null
     }
   },
-  emits: ["update:is-open"],
-  setup(i, { emit: e }) {
-    const t = i, { isOpen: l } = v(t), { t: s } = M(), a = r(null), o = r(!1), c = S("modal-fullscreen"), n = r(null), u = b(), _ = k(u), m = y(() => ({
-      "b-modal-fullscreen--hide": o.value
-    })), f = () => {
-      o.value && (a.value.close(), o.value = !1, n.value = !1, e("update:is-open", !1));
-    }, d = () => {
-      a.value.open && (o.value = !0);
+  emits: ["update:is-open", "update:active-page"],
+  setup(u, { emit: e }) {
+    const a = u, { activePage: t, isOpen: l } = O(a), { t: E } = $(), o = r(null), i = r(!1), p = z("modal-fullscreen"), _ = r(!1), f = B(), I = x(f), S = M(() => ({
+      "b-modal-fullscreen--hide": i.value
+    })), A = () => {
+      i.value && (o.value.close(), s.value[0] && e("update:active-page", s.value[0]), s.value = [], i.value = !1, _.value = !1, e("update:is-open", !1));
+    }, m = () => {
+      o.value.open && (i.value = !0);
     };
-    return C(
+    k(
       () => l.value,
       async () => {
-        await h(), a.value && (l.value ? (n.value = !0, a.value.showModal()) : a.value.open && d());
+        await T(), o.value && (l.value ? (_.value = !0, o.value.showModal(), s.value.length || s.value.push(t.value)) : o.value.open && m());
       },
       { immediate: !0 }
-    ), B(() => {
-      if (t.actions && t.actions.length > 2)
-        throw new Error("Not more than 2 action buttons may be provided in Bento Modal Fullscreen");
-    }), g(w, c), { __sfc: !0, props: t, emit: e, isOpen: l, t: s, modal: a, isClosing: o, modalFullscreenId: c, internalIsOpen: n, slots: u, hasSlot: _, conditionalClasses: m, closeModalAfterAnimation: f, startCloseModalAnimation: d, BentoButton: x, BentoButtonActions: L, BentoFocusTrap: A, BentoTypography: I, CrossIcon: F };
+    ), d(H, p);
+    const g = r(R.TRANSITION_LEVEL_DEEPER), c = r([]), s = r([]), v = (n) => e("update:active-page", n);
+    d(J, {
+      activePage: t,
+      animation: g,
+      isOpen: _,
+      pages: c,
+      previousPages: s,
+      updatePage: v
+    });
+    const y = (n) => () => {
+      var b;
+      c.value = (b = c.value) == null ? void 0 : b.filter((F) => F !== n);
+    }, h = (n) => (n && c.value.push(n), { unregisterPage: y(n) });
+    return d(K, h), { __sfc: !0, props: a, emit: e, activePage: t, isOpen: l, t: E, modal: o, isClosing: i, modalFullscreenId: p, internalIsOpen: _, slots: f, hasSlot: I, conditionalClasses: S, closeModalAfterAnimation: A, startCloseModalAnimation: m, animation: g, pages: c, previousPages: s, updatePage: v, unregisterPage: y, registerPage: h, BentoButton: D, BentoFocusTrap: N, BentoModalFullscreenPage: X, CrossIcon: Y };
   }
 });
-var N = function() {
-  var e = this, t = e._self._c, l = e._self._setupProxy;
-  return t("dialog", { ref: "modal", staticClass: "b-modal-fullscreen", class: l.conditionalClasses, attrs: { id: l.modalFullscreenId }, on: { animationend: l.closeModalAfterAnimation, keydown: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : (s.preventDefault(), l.startCloseModalAnimation.apply(null, arguments));
-  } } }, [l.internalIsOpen ? t(l.BentoFocusTrap, { staticClass: "b-modal-fullscreen__wrapper" }, [t("div", { staticClass: "b-modal-fullscreen__header" }, [t("div", { staticClass: "b-modal-fullscreen__header-section b-modal-fullscreen__header-section--title" }, [e.title ? t(l.BentoTypography, { staticClass: "b-modal-fullscreen__title", attrs: { el: "h2", variant: "title", title: e.title } }, [e._v(e._s(e.title))]) : e._e()], 1), l.hasSlot("header") ? t("div", { staticClass: "b-modal-fullscreen__header-section b-modal-fullscreen__header-section--slot" }, [e._t("header")], 2) : e._e(), t("div", { staticClass: "b-modal-fullscreen__header-section b-modal-fullscreen__header-section--actions" }, [e.contextualLabel ? t(l.BentoTypography, { staticClass: "b-modal-fullscreen__contextual-label", attrs: { el: "span", title: e.contextualLabel } }, [e._v(e._s(e.contextualLabel))]) : e._e(), e.actions ? t(l.BentoButtonActions, { staticClass: "b-modal-fullscreen__actions", attrs: { actions: e.actions } }) : e._e(), t("div", { staticClass: "b-modal-fullscreen__separator" }), t("div", { staticClass: "b-modal-fullscreen__close-button" }, [t(l.BentoButton, { attrs: { variant: "tertiary", "aria-label": l.t("close") }, on: { click: l.startCloseModalAnimation }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
-    return [t(l.CrossIcon, { attrs: { "aria-hidden": !0 } })];
-  }, proxy: !0 }], null, !1, 4214210411) })], 1)], 1)]), t("div", { staticClass: "b-modal-fullscreen__content" }, [e._t("default")], 2)]) : e._e()], 1);
-}, R = [], U = /* @__PURE__ */ O(
-  D,
-  N,
-  R,
+var ae = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a("dialog", { ref: "modal", staticClass: "b-modal-fullscreen", class: t.conditionalClasses, attrs: { id: t.modalFullscreenId }, on: { animationend: t.closeModalAfterAnimation, keydown: function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : (l.preventDefault(), t.startCloseModalAnimation.apply(null, arguments));
+  } } }, [t.internalIsOpen ? a(t.BentoFocusTrap, { staticClass: "b-modal-fullscreen__wrapper" }, [t.props.activePage ? [e._t("default")] : a(t.BentoModalFullscreenPage, { attrs: { actions: e.actions, "contextual-label": e.contextualLabel, title: e.title }, scopedSlots: e._u([t.hasSlot("default") ? { key: "default", fn: function() {
+    return [e._t("default")];
+  }, proxy: !0 } : null, t.hasSlot("header") ? { key: "header", fn: function() {
+    return [e._t("header")];
+  }, proxy: !0 } : null], null, !0) }), a("div", { staticClass: "b-modal-fullscreen__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", "aria-label": t.t("close") }, on: { click: t.startCloseModalAnimation }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [a(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }], null, !1, 4214210411) })], 1)], 2) : e._e()], 1);
+}, le = [], se = /* @__PURE__ */ P(
+  te,
+  ae,
+  le,
   !1,
   null,
-  "e8bea9ea",
+  "222ed9fd",
   null,
   null
 );
-const V = U.exports;
+const ve = se.exports;
 export {
-  V as BentoModalFullscreen
+  ve as BentoModalFullscreen,
+  X as BentoModalFullscreenPage
 };
 //# sourceMappingURL=modal-fullscreen.js.map

package/dist/modal-fullscreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-fullscreen.js","sources":["../src/components/modal-fullscreen/modal-fullscreen.keys.ts","../src/components/modal-fullscreen/modal-fullscreen.vue"],"sourcesContent":["export const MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY = Symbol('modal fullscreen children element injection key');\n","<template>\n    <dialog\n        :id=\"modalFullscreenId\"\n        ref=\"modal\"\n        class=\"b-modal-fullscreen\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeModalAfterAnimation\"\n        @keydown.esc.prevent=\"startCloseModalAnimation\"\n    >\n        <bento-focus-trap v-if=\"internalIsOpen\" class=\"b-modal-fullscreen__wrapper\">\n            <div class=\"b-modal-fullscreen__header\">\n                <div class=\"b-modal-fullscreen__header-section b-modal-fullscreen__header-section--title\">\n                    <bento-typography\n                        v-if=\"title\"\n                        el=\"h2\"\n                        variant=\"title\"\n                        class=\"b-modal-fullscreen__title\"\n                        :title=\"title\"\n                        >{{ title }}</bento-typography\n                    >\n                </div>\n                <div\n                    v-if=\"hasSlot('header')\"\n                    class=\"b-modal-fullscreen__header-section b-modal-fullscreen__header-section--slot\"\n                >\n                    <slot name=\"header\" />\n                </div>\n                <div class=\"b-modal-fullscreen__header-section b-modal-fullscreen__header-section--actions\">\n                    <bento-typography\n                        v-if=\"contextualLabel\"\n                        class=\"b-modal-fullscreen__contextual-label\"\n                        el=\"span\"\n                        :title=\"contextualLabel\"\n                        >{{ contextualLabel }}</bento-typography\n                    >\n                    <bento-button-actions v-if=\"actions\" class=\"b-modal-fullscreen__actions\" :actions=\"actions\" />\n                    <div class=\"b-modal-fullscreen__separator\"></div>\n                    <div class=\"b-modal-fullscreen__close-button\">\n                        <bento-button variant=\"tertiary\" :aria-label=\"t('close')\" @click=\"startCloseModalAnimation\">\n                            <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                        </bento-button>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"b-modal-fullscreen__content\">\n                <slot />\n            </div>\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, onMounted, PropType, provide, ref, toRefs, useSlots, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { BentoTypography } from '@/components/typography';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useHasSlot } from '@/composables';\n    import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n        /**\n         * Label shown next to the modal actions\n         */\n        contextualLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n        /**\n         * Title of the modal\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits 'update:is-open' event when the modal is closed\n         */\n        (e: 'update:is-open', isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const modal = ref(null);\n    const isClosing = ref(false);\n    const modalFullscreenId = generateUid('modal-fullscreen');\n    const internalIsOpen = ref(null);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-modal-fullscreen--hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value) {\n            modal.value.close();\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit('update:is-open', false);\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for modal ref to be created\n            await nextTick();\n\n            if (!modal.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                modal.value.showModal();\n            } else if (modal.value.open) {\n                startCloseModalAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 2) {\n            throw new Error('Not more than 2 action buttons may be provided in Bento Modal Fullscreen');\n        }\n    });\n\n    // lets children components know they are inside a Modal (dialog element)\n    provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information.\n     *\n     * @example\n     * import { BentoModalFullscreen } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModalFullscreen },\n     *     template: `\n     *          <bento-modal-fullscreen\n     *              :is-open=\"isOpen\"\n     *              @update:is-open=\"isOpen = $event\"\n     *              title='Fullscreen modal title'\n     *              contextual-label='Contextual label'\n     *              :actions=\"[{ title: 'Action', event: () => {}]\"\n     *          >\n     *              <template #header>{{ header slot }}</template>\n     *              {{ content }}\n     *          </bento-modal-fullscreen>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-fullscreen.scss\" />\n"],"names":["MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY","__default__","messages","isOpen","toRefs","props","t","useI18n","modal","ref","isClosing","modalFullscreenId","generateUid","internalIsOpen","slots","useSlots","hasSlot","useHasSlot","conditionalClasses","computed","closeModalAfterAnimation","emit","startCloseModalAnimation","watch","nextTick","onMounted","provide"],"mappings":";;;;;;;;;;;AAAa,MAAAA,IAAA,OAAA,iDAAA;;;;GCyMTC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAxFA,EAAA,QAAAC,EAAA,IAAAC,EAAAC,CAAA,GACA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GACAE,IAAAC,EAAA,kBAAA,GACAC,IAAAJ,EAAA,IAAA,GAEAK,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAGAI,IAAAC,EAAA,OAAA;AAAA,MAA2C,4BAAAT,EAAA;AAAA,IACD,EAAA,GAI1CU,IAAA,MAAA;AACI,MAAAV,EAAA,UACIF,EAAA,MAAA,MAAA,GACAE,EAAA,QAAA,IACAG,EAAA,QAAA,IACAQ,EAAA,kBAAA,EAAA;AAAA,IACJ,GAGJC,IAAA,MAAA;AACI,MAAAd,EAAA,MAAA,SAGAE,EAAA,QAAA;AAAA,IAAkB;AAItB,WAAAa;AAAA,MAAA,MAAApB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAqB,EAAA,GAEAhB,EAAA,UAIAL,EAAA,SACIU,EAAA,QAAA,IACAL,EAAA,MAAA,UAAA,KAAsBA,EAAA,MAAA,QAEtBc,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBG,EAAA,MAAA;AACI,UAAApB,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,0EAAA;AAAA,IACJ,CAAA,GAIJqB,EAAA1B,GAAAW,CAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"modal-fullscreen.js","sources":["../src/components/modal-fullscreen/components/modal-fullscreen-page.vue","../src/components/modal-fullscreen/modal-fullscreen.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-modal-fullscreen-page\" :page-id=\"pageId\" :previous-page=\"previousPage\" always-show-border>\n        <template #header>\n            <div class=\"b-modal-fullscreen-page__header\">\n                <div class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title\">\n                    <bento-typography\n                        v-if=\"title\"\n                        el=\"h2\"\n                        variant=\"title\"\n                        class=\"b-modal-fullscreen-page__title\"\n                        :title=\"title\"\n                        >{{ title }}</bento-typography\n                    >\n                </div>\n                <div\n                    v-if=\"hasSlot('header')\"\n                    class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot\"\n                >\n                    <slot name=\"header\" />\n                </div>\n                <div class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions\">\n                    <bento-typography\n                        v-if=\"contextualLabel\"\n                        class=\"b-modal-fullscreen-page__contextual-label\"\n                        el=\"span\"\n                        :title=\"contextualLabel\"\n                        >{{ contextualLabel }}</bento-typography\n                    >\n                    <bento-button-actions v-if=\"actions\" class=\"b-modal-fullscreen-page__actions\" :actions=\"actions\" />\n                    <div class=\"b-modal-fullscreen-page__separator\"></div>\n                </div>\n            </div>\n        </template>\n        <template #content>\n            <div class=\"b-modal-fullscreen-page__content\">\n                <slot />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, PropType, useSlots } from 'vue';\n\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { DialogPage } from '@/internal';\n\n    import { useHasSlot } from '@/composables';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Label shown next to the modal actions\n         */\n        contextualLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the modal\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 2) {\n            throw new Error('Not more than 2 action buttons may be provided in Bento Modal Fullscreen');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ModalFullscreenPage is used to render different pages of ModalFullscreen component\n     *\n     * @example\n     * import { BentoModalFullscreen, BentoModalFullscreenPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModalFullscreen, BentoModalFullscreenPage },\n     *     template: `\n     *          <bento-modal-fullscreen active-page='page1' is-open='true'>\n     *              <bento-modal-fullscreen-page\n     *                  title='Page 1'\n     *                  pageId='page1'\n     *                  contextual-label='Move to next page'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next page',\n     *                          event: () => {\n     *                              activePage.value = 'page2';\n     *                          },\n     *                      }]\">\n     *                  Page 1 info\n     *              </bento-modal-fullscreen-page>\n     *              <bento-modal-fullscreen-page\n     *                  title='Page 2'\n     *                  pageId='page2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Page 2 info\n     *              </bento-modal-fullscreen-page>\n     *          </bento-modal-fullscreen>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-fullscreen-page.scss\" />\n","<template>\n    <dialog\n        :id=\"modalFullscreenId\"\n        ref=\"modal\"\n        class=\"b-modal-fullscreen\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeModalAfterAnimation\"\n        @keydown.esc.prevent=\"startCloseModalAnimation\"\n    >\n        <bento-focus-trap v-if=\"internalIsOpen\" class=\"b-modal-fullscreen__wrapper\">\n            <template v-if=\"props.activePage\">\n                <slot />\n            </template>\n            <bento-modal-fullscreen-page v-else :actions=\"actions\" :contextual-label=\"contextualLabel\" :title=\"title\">\n                <template v-if=\"hasSlot('default')\" #default>\n                    <slot name=\"default\"></slot>\n                </template>\n                <template v-if=\"hasSlot('header')\" #header>\n                    <slot name=\"header\"></slot>\n                </template>\n            </bento-modal-fullscreen-page>\n            <div class=\"b-modal-fullscreen__close-button\">\n                <bento-button variant=\"tertiary\" :aria-label=\"t('close')\" @click=\"startCloseModalAnimation\">\n                    <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                </bento-button>\n            </div>\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, useSlots, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue';\n\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useHasSlot } from '@/composables';\n    import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n\n    import messages from './messages.json';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        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\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * The id of the current active page\n         * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Label shown next to the modal actions\n         */\n        contextualLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n        /**\n         * Title of the modal\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits 'update:is-open' event when the modal is closed\n         */\n        (e: 'update:is-open', isOpen: boolean): void;\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: 'update:active-page', page: string): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const modal = ref(null);\n    const isClosing = ref(false);\n    const modalFullscreenId = generateUid('modal-fullscreen');\n    const internalIsOpen = ref(false);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-modal-fullscreen--hide': isClosing.value,\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            internalIsOpen.value = false;\n            emit('update:is-open', false);\n        }\n    };\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for modal ref to be created\n            await nextTick();\n\n            if (!modal.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                modal.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (modal.value.open) {\n                startCloseModalAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // lets children components know they are inside a Modal (dialog element)\n    provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId);\n\n    // Pages\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n    const updatePage = page => emit('update:active-page', page);\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\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    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information.\n     *\n     * @example\n     * import { BentoModalFullscreen } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModalFullscreen },\n     *     template: `\n     *          <bento-modal-fullscreen\n     *              :is-open=\"isOpen\"\n     *              @update:is-open=\"isOpen = $event\"\n     *              title='Fullscreen modal title'\n     *              contextual-label='Contextual label'\n     *              :actions=\"[{ title: 'Action', event: () => {}]\"\n     *          >\n     *              <template #header>{{ header slot }}</template>\n     *              {{ content }}\n     *          </bento-modal-fullscreen>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-fullscreen.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","onMounted","props","__default__","messages","activePage","isOpen","toRefs","t","useI18n","modal","ref","isClosing","modalFullscreenId","generateUid","internalIsOpen","conditionalClasses","computed","closeModalAfterAnimation","previousPages","emit","startCloseModalAnimation","watch","nextTick","provide","MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY","animation","BentoDialogPageAnimation","pages","updatePage","page","DIALOG_PAGE_CONFIG_INJECTION_KEY","unregisterPage","pageIdToRemove","_a","pageId","registerPage","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":";;;;;;;;;;;;;AAqJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;AAEA,WAAAI,EAAA,MAAA;AACI,UAAAC,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,0EAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GC8HJC,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAxHA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,GAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GACAE,IAAAC,EAAA,kBAAA,GACAC,IAAAJ,EAAA,EAAA,GAEAd,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAGAmB,IAAAC,EAAA,OAAA;AAAA,MAA2C,4BAAAL,EAAA;AAAA,IACD,EAAA,GAI1CM,IAAA,MAAA;AACI,MAAAN,EAAA,UACIF,EAAA,MAAA,MAAA,GACAS,EAAA,MAAA,CAAA,KACIC,EAAA,sBAAAD,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAP,EAAA,QAAA,IACAG,EAAA,QAAA,IACAK,EAAA,kBAAA,EAAA;AAAA,IACJ,GAGJC,IAAA,MAAA;AACI,MAAAX,EAAA,MAAA,SAGAE,EAAA,QAAA;AAAA,IAAkB;AAItB,IAAAU;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAiB,EAAA,GAEAb,EAAA,UAIAJ,EAAA,SACIS,EAAA,QAAA,IACAL,EAAA,MAAA,UAAA,GACAS,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAd,EAAA,KAAA,KACJK,EAAA,MAAA,QAEAW,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAItBG,EAAAC,GAAAZ,CAAA;AAGA,UAAAa,IAAAf,EAAAgB,EAAA,uBAAA,GACAC,IAAAjB,EAAA,CAAA,CAAA,GACAQ,IAAAR,EAAA,CAAA,CAAA,GACAkB,IAAA,CAAAC,MAAAV,EAAA,sBAAAU,CAAA;AAEA,IAAAN,EAAAO,GAAA;AAAA,MAAqE,YAAA1B;AAAA,MACjE,WAAAqB;AAAA,MACA,QAAAX;AAAA,MACQ,OAAAa;AAAA,MACR,eAAAT;AAAA,MACA,YAAAU;AAAA,IACA,CAAA;AAIJ,UAAAG,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAAL,EAAA,SAAAM,IAAAN,EAAA,UAAA,gBAAAM,EAAA,OAAA,CAAAC,MAAAA,MAAAF;AAAA,IAAqE,GAIzEG,IAAA,CAAAD,OACIA,KACIP,EAAA,MAAA,KAAAO,CAAA,GAGJ,EAAA,gBAAAH,EAAAG,CAAA,EAAA;AAGJ,WAAAX,EAAAa,GAAAD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/modal.js

@@ -1,13 +1,13 @@
 import { defineComponent as d, useSlots as g, onMounted as A, toRefs as E, ref as L, computed as f, useAttrs as x, watch as T } from "vue";
-import { c as B, g as O, e as c, d as k, b as C, B as R, a as v } from "./chunks/base-modal.1dc6cf96.js";
-import { f as _t } from "./chunks/base-modal.1dc6cf96.js";
+import { c as B, g as O, e as c, d as k, b as C, B as R, a as v } from "./chunks/base-modal.27c6f2db.js";
+import { f as _t } from "./chunks/base-modal.27c6f2db.js";
 import { u as b } from "./chunks/use-has-slot.fbeb19ec.js";
-import { F as z } from "./chunks/footer-actions.e0b866b1.js";
+import { F as z } from "./chunks/footer-actions.0268a57b.js";
 import { n as S } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as M } from "./chunks/button.f5739261.js";
+import { B as M } from "./chunks/button.0b6cda85.js";
 import { u as N } from "./chunks/i18n.eb5b985b.js";
-import { BentoButtonActions as $ } from "./button.js";
-import { d as P } from "./chunks/index.546b27ae.js";
+import { B as $ } from "./chunks/button-actions.1dc90a19.js";
+import { d as P } from "./chunks/index.de687404.js";
 const F = d({
   name: "bento-modal-default"
 }), q = /* @__PURE__ */ d({

package/dist/pagination.js

@@ -1,12 +1,12 @@
 import { defineComponent as p, ref as P, computed as r, toRefs as L } from "vue";
 import { u as N } from "./chunks/aria-label.ac9651a5.js";
-import { B as C } from "./chunks/index.546b27ae.js";
-import { B as b } from "./chunks/dropdown.0a9acf8b.js";
+import { B as C } from "./chunks/index.de687404.js";
+import { B as b } from "./chunks/dropdown.0574f613.js";
 import { g as T } from "./chunks/unique-id.a2a2b458.js";
 import { g as y, a as x } from "./chunks/i18n.eb5b985b.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as S } from "./chunks/button.f5739261.js";
-import "./assets/index13.css";
+import { a as S } from "./chunks/button.0b6cda85.js";
+import "./assets/index23.css";
 const I = {
   "en-US": {
     showingItems: "Showing {itemCount} items",