@adyen/bento-vue2 1.86.1 → 1.87.1

package/dist/chunks/{pagination.wuEIlDcq.js → pagination.iN0eYByB.js}

@@ -1,15 +1,15 @@
-import { defineComponent as d, computed as p, useSlots as S, useAttrs as B, ref as N, toRefs as I } from "vue";
-import { B as f } from "./typography.C8lPlsbD.js";
-import { B as L } from "./dropdown.DDPfKc74.js";
+import { defineComponent as f, computed as l, watch as B, useSlots as N, useAttrs as I, ref as z, toRefs as F } from "vue";
+import { p as R, B as m } from "./typography.C8lPlsbD.js";
+import { B as y } from "./dropdown.ET_mq1_P.js";
 import { g as x } from "./generate-uid.NJ8tVoha.js";
-import { u as m, g as $, a as w } from "./index.B6WW_F-J.js";
-import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as O } from "./button.Ctj3rkxw.js";
+import { u as h, g as L, a as $ } from "./index.B6WW_F-J.js";
+import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as k } from "./button.Ctj3rkxw.js";
 /* empty css              */
-import { u as F } from "./aria-label.CaUURpnB.js";
-import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { u as A } from "./aria-label.CaUURpnB.js";
+import { u as O } from "./use-has-slot.C9lQZ6nz.js";
 import "../assets/pagination.css";
-const k = {
+const D = {
   "de-DE": {
     showingItems: "{itemCount} Artikeln",
     showingItemsWithTotal: "{itemCount} von {totalCount} Artikeln"
@@ -34,176 +34,192 @@ const k = {
     showingItems: "{itemCount} itens",
     showingItemsWithTotal: "{itemCount} de {totalCount} itens"
   }
-}, z = {
-  i18n: { messages: k }
-}, A = /* @__PURE__ */ d({
-  ...z,
+}, Z = {
+  i18n: { messages: D }
+}, W = /* @__PURE__ */ f({
+  ...Z,
   __name: "pagination-results-per-page",
   props: {
+    hidePageSizeSelection: { type: Boolean, default: !1 },
     itemsPerPage: { default: 50 },
-    totalCount: { default: null }
+    totalCount: { default: null },
+    pageSizeItems: { default: () => [10, 20, 50, 75, 100] }
   },
   emits: ["select"],
-  setup(s, { emit: t }) {
-    const e = s, { t: a, n } = m(), i = x("b-pagination-context-number-elements"), g = p(() => [
-      { label: n(10), value: 10 },
-      { label: n(20), value: 20 },
-      { label: n(50), value: 50 },
-      { label: n(75), value: 75 },
-      { label: n(100), value: 100 }
-    ]), u = w(), _ = (r) => {
+  setup(n, { emit: t }) {
+    const e = n, { t: a, n: s } = h(), o = l(
+      () => Array.isArray(e.pageSizeItems) && e.pageSizeItems.every((r) => Number.isInteger(r))
+    );
+    B(
+      o,
+      (r) => {
+        r || R("BentoPagination: pageSizeItems must be an array of integers.");
+      },
+      { immediate: !0 }
+    );
+    const u = x("b-pagination-context-number-elements"), c = l(
+      () => e.pageSizeItems.map((r) => ({
+        label: s(r),
+        value: r
+      }))
+    ), d = $(), i = (r) => {
       t("select", r);
-    }, o = p(() => e.totalCount ? "showingItemsWithTotal" : "showingItems");
-    return { __sfc: !0, t: a, n, props: e, emit: t, dropdownId: i, predefinedDropdownOptions: g, i18nComponent: u, onSelectChange: _, translationPathKey: o, BentoTypography: f, BentoDropdown: L, getI18nProps: $ };
+    }, g = l(() => e.totalCount ? "showingItemsWithTotal" : "showingItems");
+    return { __sfc: !0, t: a, n: s, props: e, emit: t, isValid: o, dropdownId: u, predefinedDropdownOptions: c, i18nComponent: d, onSelectChange: i, translationPathKey: g, BentoTypography: m, BentoDropdown: y, getI18nProps: L };
   }
 });
-var D = function() {
+var M = function() {
   var t = this, e = t._self._c, a = t._self._setupProxy;
-  return e("div", { staticClass: "b-pagination-results-per-page" }, [e(a.BentoTypography, { attrs: { el: "div" } }, [e(a.i18nComponent, t._b({ tag: "component", staticClass: "b-pagination-results-per-page__dropdown-container", attrs: { tag: "div", plural: t.totalCount }, scopedSlots: t._u([{ key: "itemCount", fn: function() {
+  return e("div", { staticClass: "b-pagination-results-per-page" }, [e(a.BentoTypography, { attrs: { el: "div" } }, [e(a.i18nComponent, t._b({ tag: "component", staticClass: "b-pagination-results-per-page__dropdown-container", attrs: { tag: "div", plural: t.totalCount }, scopedSlots: t._u([t.hidePageSizeSelection ? { key: "itemCount", fn: function() {
+    return [t._v(t._s(t.itemsPerPage))];
+  }, proxy: !0 } : { key: "itemCount", fn: function() {
     return [e(a.BentoDropdown, { staticClass: "b-pagination-results-per-page__dropdown", attrs: { id: a.dropdownId, "aria-label": a.t(a.translationPathKey, { itemCount: t.itemsPerPage, totalCount: t.totalCount }), condensed: "", items: a.predefinedDropdownOptions, "model-value": t.itemsPerPage }, on: { "update:model-value": a.onSelectChange } })];
   }, proxy: !0 }, t.totalCount ? { key: "totalCount", fn: function() {
     return [t._v(t._s(t.totalCount))];
   }, proxy: !0 } : null], null, !0) }, "component", a.getI18nProps(a.translationPathKey), !1))], 1)], 1);
-}, Z = [], M = /* @__PURE__ */ c(
-  A,
-  D,
-  Z,
+}, E = [], U = /* @__PURE__ */ _(
+  W,
+  M,
+  E,
   !1,
   null,
-  "03112c6d"
+  "5b489e82"
 );
-const W = M.exports, E = {
+const j = U.exports, H = {
   "de-DE": {
     pageNumber: "Seite {page}",
-    pageOneOfOne: "Seite 1 von 1"
+    pageNumberOfTotal: "Seite {page} von {totalPages}"
   },
   "en-US": {
     pageNumber: "Page {page}",
-    pageOneOfOne: "Page 1 of 1"
+    pageNumberOfTotal: "Page {page} of {totalPages}"
   },
   "es-ES": {
     pageNumber: "Página {page}",
-    pageOneOfOne: "Página 1 de 1"
+    pageNumberOfTotal: "Página {page} de {totalPages}"
   },
   "fr-FR": {
-    pageNumber: "Page {page}",
-    pageOneOfOne: "Page 1 sur 1"
+    pageNumber: "Page {page}",
+    pageNumberOfTotal: "Page {page} sur {totalPages}"
   },
   "ja-JP": {
     pageNumber: "ページ {page}",
-    pageOneOfOne: "ページ1/1"
+    pageNumberOfTotal: "ページ {page}/{totalPages}"
   },
   "pt-BR": {
     pageNumber: "Página {page}",
-    pageOneOfOne: "Página 1 de 1"
+    pageNumberOfTotal: "Página {page} de {totalPages}"
   }
-}, U = {
-  i18n: { messages: E }
-}, j = /* @__PURE__ */ d({
-  ...U,
+}, J = {
+  i18n: { messages: H }
+}, K = /* @__PURE__ */ f({
+  ...J,
   __name: "pagination-context",
   props: {
+    hidePageSelection: { type: Boolean, default: !1 },
     page: { default: 1 },
     totalPages: { default: null },
     virtualScroll: { type: Boolean, default: !1 }
   },
   emits: ["page-selected"],
-  setup(s, { emit: t }) {
-    const e = s, { t: a, n } = m(), i = x("bento-pagination-context-current-page"), g = (v) => t("page-selected", v), u = w(), _ = (v) => ({
-      label: n(v),
+  setup(n, { emit: t }) {
+    const e = n, { t: a, n: s } = h(), o = x("bento-pagination-context-current-page"), u = (v) => t("page-selected", v), c = $(), d = (v) => ({
+      label: s(v),
       value: v
-    }), o = (v, h) => h + 1, r = p(
-      () => Array.from(new Array(e.totalPages), o).map(_)
+    }), i = (v, P) => P + 1, g = l(
+      () => Array.from(new Array(e.totalPages), i).map(d)
+    ), r = l(
+      () => e.totalPages === 1 || e.hidePageSelection && e.page <= e.totalPages
     );
-    return { __sfc: !0, props: e, emit: t, t: a, n, dropdownId: i, onPageSelectChange: g, i18nComponent: u, transformIntoOption: _, transformToPageNumber: o, listOfAvailablePages: r, BentoTypography: f, BentoDropdown: L, getI18nProps: $ };
+    return { __sfc: !0, props: e, emit: t, t: a, n: s, dropdownId: o, onPageSelectChange: u, i18nComponent: c, transformIntoOption: d, transformToPageNumber: i, listOfAvailablePages: g, showPageNumberOfTotal: r, BentoTypography: m, BentoDropdown: y, getI18nProps: L };
   }
 });
-var H = function() {
+var V = function() {
   var t = this, e = t._self._c, a = t._self._setupProxy;
-  return e("div", { staticClass: "b-pagination-context" }, [t.totalPages > 1 ? e(a.BentoTypography, { attrs: { el: "div" } }, [e(a.i18nComponent, t._b({ tag: "component", attrs: { tag: "div" }, scopedSlots: t._u([{ key: "page", fn: function() {
+  return e("div", { staticClass: "b-pagination-context" }, [t.totalPages > 1 && !t.hidePageSelection ? e(a.BentoTypography, { attrs: { el: "div" } }, [e(a.i18nComponent, t._b({ tag: "component", attrs: { tag: "div" }, scopedSlots: t._u([{ key: "page", fn: function() {
     return [e(a.BentoDropdown, { staticClass: "b-pagination-context__dropdown", attrs: { id: a.dropdownId, "aria-label": a.t("pageNumber", { page: a.n(t.page) }), condensed: "", items: a.listOfAvailablePages, "model-value": t.page, "virtual-scroll": t.virtualScroll }, on: { "update:model-value": a.onPageSelectChange } })];
-  }, proxy: !0 }], null, !1, 71756474) }, "component", a.getI18nProps("pageNumber"), !1))], 1) : t.totalPages === 1 ? e(a.BentoTypography, { attrs: { el: "span" } }, [t._v(" " + t._s(a.t("pageOneOfOne")) + " ")]) : e(a.BentoTypography, { attrs: { el: "span" } }, [t._v(" " + t._s(a.t("pageNumber", { page: a.n(t.page) })) + " ")])], 1);
-}, J = [], K = /* @__PURE__ */ c(
-  j,
-  H,
-  J,
+  }, proxy: !0 }], null, !1, 71756474) }, "component", a.getI18nProps("pageNumber"), !1))], 1) : a.showPageNumberOfTotal ? e(a.BentoTypography, { attrs: { el: "span" } }, [t._v(" " + t._s(a.t("pageNumberOfTotal", { page: a.n(t.page), totalPages: a.n(t.totalPages) })) + " ")]) : e(a.BentoTypography, { attrs: { el: "span" } }, [t._v(" " + t._s(a.t("pageNumber", { page: a.n(t.page) })) + " ")])], 1);
+}, q = [], G = /* @__PURE__ */ _(
+  K,
+  V,
+  q,
   !1,
   null,
-  "17c29a81"
+  "aed5b81a"
 );
-const V = K.exports;
-let P = 0;
-const q = {
+const Q = G.exports;
+let C = 0;
+const X = {
   beforeCreate() {
-    this.uuid = P.toString(), P += 1;
+    this.uuid = C.toString(), C += 1;
   }
 };
-var G = function() {
+var Y = function() {
   var t = this, e = t._self._c;
   return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#001222", d: "M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z" } }), e("path", { attrs: { fill: "#001222", d: "M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z" } })]);
-}, Q = [], X = /* @__PURE__ */ c(
-  q,
-  G,
-  Q,
+}, tt = [], et = /* @__PURE__ */ _(
+  X,
+  Y,
+  tt,
   !1,
   null,
   null
 );
-const Y = X.exports;
-let C = 0;
-const tt = {
+const at = et.exports;
+let b = 0;
+const nt = {
   beforeCreate() {
-    this.uuid = C.toString(), C += 1;
+    this.uuid = b.toString(), b += 1;
   }
 };
-var et = function() {
+var st = function() {
   var t = this, e = t._self._c;
   return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#001222", d: "M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z" } }), e("path", { attrs: { fill: "#001222", d: "M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z" } })]);
-}, at = [], nt = /* @__PURE__ */ c(
-  tt,
-  et,
-  at,
+}, ot = [], it = /* @__PURE__ */ _(
+  nt,
+  st,
+  ot,
   !1,
   null,
   null
 );
-const st = nt.exports;
-let b = 0;
-const ot = {
+const rt = it.exports;
+let T = 0;
+const lt = {
   beforeCreate() {
-    this.uuid = b.toString(), b += 1;
+    this.uuid = T.toString(), T += 1;
   }
 };
-var it = function() {
+var gt = function() {
   var t = this, e = t._self._c;
   return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#001222", d: "M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z" } })]);
-}, rt = [], lt = /* @__PURE__ */ c(
-  ot,
-  it,
-  rt,
+}, pt = [], ut = /* @__PURE__ */ _(
+  lt,
+  gt,
+  pt,
   !1,
   null,
   null
 );
-const gt = lt.exports;
-let T = 0;
-const ut = {
+const ct = ut.exports;
+let S = 0;
+const _t = {
   beforeCreate() {
-    this.uuid = T.toString(), T += 1;
+    this.uuid = S.toString(), S += 1;
   }
 };
-var pt = function() {
+var dt = function() {
   var t = this, e = t._self._c;
   return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#001222", d: "M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z" } })]);
-}, ct = [], _t = /* @__PURE__ */ c(
-  ut,
-  pt,
-  ct,
+}, vt = [], ft = /* @__PURE__ */ _(
+  _t,
+  dt,
+  vt,
   !1,
   null,
   null
 );
-const vt = _t.exports, dt = {
+const mt = ft.exports, ht = {
   "de-DE": {
     navigateToTheFirstPage: "Zur ersten Seite navigieren",
     navigateToTheLastPage: "Zur letzten Seite navigieren",
@@ -240,10 +256,10 @@ const vt = _t.exports, dt = {
     navigateToTheNextPage: "Ir para a próxima página",
     navigateToThePreviousPage: "Ir para a página anterior"
   }
-}, ft = {
-  i18n: { messages: dt }
-}, mt = /* @__PURE__ */ d({
-  ...ft,
+}, Pt = {
+  i18n: { messages: ht }
+}, Ct = /* @__PURE__ */ f({
+  ...Pt,
   __name: "pagination-controls",
   props: {
     hasNext: { type: Boolean, default: null },
@@ -251,88 +267,91 @@ const vt = _t.exports, dt = {
     totalPages: { default: null }
   },
   emits: ["navigate"],
-  setup(s, { emit: t }) {
-    const e = s, { t: a } = m(), n = p(() => e.page === 1), i = p(() => e.page === e.totalPages), g = p(() => !e.hasNext || i.value), u = p(() => {
-      const o = !e.hasNext, r = !e.totalPages;
-      return o || i.value || r;
+  setup(n, { emit: t }) {
+    const e = n, { t: a } = h(), s = l(() => e.page === 1), o = l(() => e.page === e.totalPages), u = l(() => !e.hasNext || o.value), c = l(() => {
+      const i = !e.hasNext, g = !e.totalPages;
+      return i || o.value || g;
     });
-    return { __sfc: !0, props: e, emit: t, t: a, isCurrentPageFirst: n, isCurrentPageLast: i, isNextButtonDisabled: g, isLastPageButtonDisabled: u, navigate: (o) => {
-      t("navigate", o);
-    }, BentoButton: O, SkipLeft: Y, SkipRight: st, ChevronLeft: gt, ChevronRight: vt };
+    return { __sfc: !0, props: e, emit: t, t: a, isCurrentPageFirst: s, isCurrentPageLast: o, isNextButtonDisabled: u, isLastPageButtonDisabled: c, navigate: (i) => {
+      t("navigate", i);
+    }, BentoButton: k, SkipLeft: at, SkipRight: rt, ChevronLeft: ct, ChevronRight: mt };
   }
 });
-var ht = function() {
+var bt = function() {
   var t = this, e = t._self._c, a = t._self._setupProxy;
-  return e("ul", { staticClass: "b-pagination-controls" }, [e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isCurrentPageFirst, variant: "tertiary", condensed: "" }, on: { click: function(n) {
+  return e("ul", { staticClass: "b-pagination-controls" }, [e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isCurrentPageFirst, variant: "tertiary", condensed: "" }, on: { click: function(s) {
     return a.navigate(1);
   } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [e(a.SkipLeft, { attrs: { "svg-title": a.t("navigateToTheFirstPage") } })];
-  }, proxy: !0 }]) })], 1), e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isCurrentPageFirst, variant: "tertiary", condensed: "" }, on: { click: function(n) {
+  }, proxy: !0 }]) })], 1), e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isCurrentPageFirst, variant: "tertiary", condensed: "" }, on: { click: function(s) {
     return a.navigate(t.page - 1);
   } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [e(a.ChevronLeft, { attrs: { "svg-title": a.t("navigateToThePreviousPage") } })];
-  }, proxy: !0 }]) })], 1), e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isNextButtonDisabled, variant: "tertiary", condensed: "" }, on: { click: function(n) {
+  }, proxy: !0 }]) })], 1), e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isNextButtonDisabled, variant: "tertiary", condensed: "" }, on: { click: function(s) {
     return a.navigate(t.page + 1);
   } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [e(a.ChevronRight, { attrs: { "svg-title": a.t("navigateToTheNextPage") } })];
-  }, proxy: !0 }]) })], 1), e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isLastPageButtonDisabled, variant: "tertiary", condensed: "" }, on: { click: function(n) {
+  }, proxy: !0 }]) })], 1), e("li", { staticClass: "b-pagination-controls__item" }, [e(a.BentoButton, { attrs: { disabled: a.isLastPageButtonDisabled, variant: "tertiary", condensed: "" }, on: { click: function(s) {
     return a.navigate(t.totalPages);
   } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [e(a.SkipRight, { attrs: { "svg-title": a.t("navigateToTheLastPage") } })];
   }, proxy: !0 }]) })], 1)]);
-}, Pt = [], Ct = /* @__PURE__ */ c(
-  mt,
-  ht,
-  Pt,
+}, Tt = [], St = /* @__PURE__ */ _(
+  Ct,
+  bt,
+  Tt,
   !1,
   null,
   "65f213a4"
 );
-const bt = Ct.exports, Tt = {}, Lt = /* @__PURE__ */ d({
-  ...Tt,
+const yt = St.exports, xt = {}, Lt = /* @__PURE__ */ f({
+  ...xt,
   __name: "pagination",
   props: {
     ariaLabel: { default: null },
     hasNext: { type: Boolean, default: null },
     hidePageSize: { type: Boolean, default: !1 },
+    hidePageSelection: { type: Boolean, default: !1 },
+    hidePageSizeSelection: { type: Boolean, default: !1 },
     page: { default: 1 },
     size: { default: 20 },
     totalCount: { default: null },
-    virtualScroll: { type: Boolean, default: !1 }
+    virtualScroll: { type: Boolean, default: !1 },
+    pageSizeItems: { default: void 0 }
   },
   emits: ["navigate", "items-page", "update:page", "update:size"],
-  setup(s, { emit: t }) {
-    const e = s, a = S(), n = R(a), i = B(), g = N(i["aria-label"]), { ariaLabel: u } = I(e), _ = F({
-      ariaLabel: g.value,
+  setup(n, { emit: t }) {
+    const e = n, a = N(), s = O(a), o = I(), u = z(o["aria-label"]), { ariaLabel: c } = F(e), d = A({
+      ariaLabel: u.value,
       // TODO: take this line away when the aria-label props is removed
-      label: u
-    }), o = p(
+      label: c
+    }), i = l(
       () => !e.totalCount || !e.size ? null : Math.ceil(e.totalCount / e.size)
-    ), r = (l, y) => {
-      e.hidePageSize ? t("navigate", l) : t("navigate", l, y ?? (e == null ? void 0 : e.size)), t("update:page", l);
+    ), g = (p, w) => {
+      e.hidePageSize ? t("navigate", p) : t("navigate", p, w ?? (e == null ? void 0 : e.size)), t("update:page", p);
     };
-    return { __sfc: !0, props: e, emit: t, slots: a, hasSlot: n, attrs: i, ariaLabelAttribute: g, ariaLabel: u, computedAriaLabel: _, totalPages: o, navigate: r, onPageSelected: (l) => {
-      r(l);
-    }, onItemsPerPageChange: (l) => {
-      t("items-page", l), t("update:size", l), r(1, l);
+    return { __sfc: !0, props: e, emit: t, slots: a, hasSlot: s, attrs: o, ariaLabelAttribute: u, ariaLabel: c, computedAriaLabel: d, totalPages: i, navigate: g, onPageSelected: (p) => {
+      g(p);
+    }, onItemsPerPageChange: (p) => {
+      t("items-page", p), t("update:size", p), g(1, p);
     }, navigationConditionalClasses: () => ({
-      "b-pagination__navigation--only-page-navigator": !n("default") && e.hidePageSize
-    }), BentoTypography: f, BentoPaginationResultsPerPage: W, BentoPaginationContext: V, BentoPaginationControls: bt };
+      "b-pagination__navigation--only-page-navigator": !s("default") && e.hidePageSize
+    }), BentoTypography: m, BentoPaginationResultsPerPage: j, BentoPaginationContext: Q, BentoPaginationControls: yt };
   }
 });
-var xt = function() {
+var $t = function() {
   var t = this, e = t._self._c, a = t._self._setupProxy;
-  return e("div", { staticClass: "b-pagination" }, [e("nav", { staticClass: "b-pagination__navigation", class: a.navigationConditionalClasses(), attrs: { "aria-label": a.computedAriaLabel } }, [t.hidePageSize ? a.hasSlot("default") ? e(a.BentoTypography, [t._t("default")], 2) : t._e() : e(a.BentoPaginationResultsPerPage, { staticClass: "b-pagination__results-per-page", attrs: { "items-per-page": t.size, "total-count": t.totalCount }, on: { select: a.onItemsPerPageChange } }), e("div", { staticClass: "b-pagination__page-navigator" }, [e(a.BentoPaginationContext, { staticClass: "b-pagination__context", attrs: { "total-pages": a.totalPages, page: t.page, "total-count": t.totalCount, "virtual-scroll": t.virtualScroll }, on: { "page-selected": a.onPageSelected } }), e("div", { staticClass: "b-pagination__divider" }), e(a.BentoPaginationControls, { staticClass: "b-pagination__controls", attrs: { "has-next": t.hasNext, page: t.page, "total-pages": a.totalPages }, on: { navigate: a.navigate } })], 1)], 1)]);
-}, $t = [], wt = /* @__PURE__ */ c(
+  return e("div", { staticClass: "b-pagination" }, [e("nav", { staticClass: "b-pagination__navigation", class: a.navigationConditionalClasses(), attrs: { "aria-label": a.computedAriaLabel } }, [t.hidePageSize ? a.hasSlot("default") ? e(a.BentoTypography, [t._t("default")], 2) : t._e() : e(a.BentoPaginationResultsPerPage, { staticClass: "b-pagination__results-per-page", attrs: { "hide-page-size-selection": t.hidePageSizeSelection, "items-per-page": t.size, "total-count": t.totalCount, "page-size-items": t.pageSizeItems }, on: { select: a.onItemsPerPageChange } }), e("div", { staticClass: "b-pagination__page-navigator" }, [e(a.BentoPaginationContext, { staticClass: "b-pagination__context", attrs: { "total-pages": a.totalPages, page: t.page, "virtual-scroll": t.virtualScroll, "hide-page-selection": t.hidePageSelection }, on: { "page-selected": a.onPageSelected } }), e("div", { staticClass: "b-pagination__divider" }), e(a.BentoPaginationControls, { staticClass: "b-pagination__controls", attrs: { "has-next": t.hasNext, page: t.page, "total-pages": a.totalPages }, on: { navigate: a.navigate } })], 1)], 1)]);
+}, wt = [], Bt = /* @__PURE__ */ _(
   Lt,
-  xt,
   $t,
+  wt,
   !1,
   null,
-  "b3d5cd4e"
+  "e147b87d"
 );
-const Dt = wt.exports;
+const Wt = Bt.exports;
 export {
-  Dt as B
+  Wt as B
 };
-//# sourceMappingURL=pagination.wuEIlDcq.js.map
+//# sourceMappingURL=pagination.iN0eYByB.js.map

package/dist/chunks/pagination.iN0eYByB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.iN0eYByB.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template v-if=\"hidePageSizeSelection\" #itemCount>{{ itemsPerPage }}</template>\n\n                <template v-else #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  hidePageSizeSelection: { type: Boolean, default: false },\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null },\n  pageSizeItems: { default: () => [10, 20, 50, 75, 100] }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const isValid = computed(\n        () => Array.isArray(props.pageSizeItems) && props.pageSizeItems.every(option => Number.isInteger(option))\n    );\n\n    watch(\n        isValid,\n        valid => {\n            if (!valid) {\n                printDevelopmentWarning('BentoPagination: pageSizeItems must be an array of integers.');\n            }\n        },\n        { immediate: true }\n    );\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() =>\n        props.pageSizeItems.map(option => ({\n            label: n(option),\n            value: option,\n        }))\n    );\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1 && !hidePageSelection\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"showPageNumberOfTotal\" el=\"span\">\n            {{ t('pageNumberOfTotal', { page: n(page), totalPages: n(totalPages) }) }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hidePageSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n    const showPageNumberOfTotal = computed(\n        () => props.totalPages === 1 || (props.hidePageSelection && props.page <= props.totalPages)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :hide-page-size-selection=\"hidePageSizeSelection\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                :page-size-items=\"pageSizeItems\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :virtual-scroll=\"virtualScroll\"\n                    :hide-page-selection=\"hidePageSelection\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  hasNext: { type: Boolean, default: null },\n  hidePageSize: { type: Boolean, default: false },\n  hidePageSelection: { type: Boolean, default: false },\n  hidePageSizeSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false },\n  pageSizeItems: { default: undefined }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","n","useI18n","isValid","computed","props","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}

package/dist/chunks/popover.types.hA13DZPg.js

@@ -0,0 +1,6 @@
+import { b as o } from "./popper-container.C_n9Ds1W.js";
+const i = { ...o };
+export {
+  i as B
+};
+//# sourceMappingURL=popover.types.hA13DZPg.js.map

package/dist/chunks/{popover.types.DkiRUQ4Z.js.map → popover.types.hA13DZPg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover.types.DkiRUQ4Z.js","sources":["../../src/components/popover/popover.types.ts"],"sourcesContent":["import { PopperContainerPosition } from '../popper-container/popper-container.types';\nimport type { Placement } from '@floating-ui/vue';\nimport type {\n    BentoButtonActionsLayout,\n    BentoButtonActionsList,\n} from '../button/components/button-actions/button-actions.types';\nimport { type VueNodeElement } from '@/types/elements';\nimport type { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n\nexport interface BentoPopoverProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     * First element in the list will be rendered as \"primary\".\n     * All elements after the first will be rendered as \"secondary\".\n     *\n     * Each object in the list should have a `title`, an `event` and\n     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n     *\n     * `title`: Button's text.\n     *\n     * `event`: Event triggered when clicking the Button.\n     *\n     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   icon: FourPeopleIcon\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     * }]\n     * ```\n     */\n    actions?: BentoButtonActionsList;\n\n    /**\n     * Defines the layout in which the button actions is presented.\n     * It can be one of:\n     *\n     * @values BUTTONS_END\n     * @values FILL_CONTAINER\n     * @values SPACE_BETWEEN\n     * @values VERTICAL_STACK\n     */\n    actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n    /**\n     * Defines a string value that provides an accessible name for the popover.\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n     */\n    divider?: boolean;\n\n    /**\n     * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n     * */\n    disableFocusTrap?: boolean;\n\n    /**\n     * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n     */\n    dismissible?: boolean;\n\n    /**\n     * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n     * Useful when not using auto as starting placement.\n     * https://floating-ui.com/docs/flip#fallbackplacements\n     */\n    fallbackPosition?: Array<Placement>;\n\n    /**\n     * Sets the size of the container to fit its content\n     */\n    fitContent?: boolean;\n\n    /**\n     * Instructs popover to be visible outside of the containing container.\n     * Useful when component would be used in limited containers like Modal, Side panel, etc.\n     * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n     */\n    fixedPositioning?: boolean;\n\n    /**\n     * Toggles the popover open and closed\n     */\n    open?: boolean;\n\n    /**\n     * Displays the popover in a large size.\n     */\n    large?: boolean;\n\n    /**\n     * @deprecated\n     * NOTE: This property no longer functions since moving to the floating-ui framework.\n     */\n    modifiers?: Array<unknown>;\n\n    /**\n     * Popover's position relative to the target element.\n     * Possible values are:\n     * 'auto',    'auto-start',    'auto-end',\n     * 'top',     'top-start',     'top-end'\n     * 'right',   'right-start',   'right-end'\n     * 'bottom',  'bottom-start',  'bottom-end'\n     * 'left',    'left-start',    'left-end'\n     */\n    position?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n    /**\n     * Displays the popover in a small size.\n     */\n    small?: boolean;\n\n    /**\n     * Indicates the title you want to give the popover.\n     */\n    title?: string;\n\n    /**\n     * Popover's target element.\n     * The popover will position itself relatively to target element, in specified position.\n     */\n    targetElement: VueNodeElement;\n\n    /**\n     * Activates focus trap for both arrow and tab keys.\n     */\n    trapAll?: boolean;\n\n    /**\n     * Configurations for the focus-trap when trap-all is active.\n     */\n    trapAllOptions?: FocusTrapOptions;\n\n    /**\n     * Displays the popover without padding.\n     */\n    withoutSpace?: boolean;\n\n    /**\n     * Allows content to appear outside of the popover. Used when there are nested popovers.\n     */\n    overflowVisible?: boolean;\n}\n"],"names":["BentoPopoverPositions","PopperContainerPosition"],"mappings":";AAYO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}
+{"version":3,"file":"popover.types.hA13DZPg.js","sources":["../../src/components/popover/popover.types.ts"],"sourcesContent":["import { PopperContainerPosition } from '../popper-container/popper-container.types';\nimport type { Placement } from '@floating-ui/vue';\nimport type {\n    BentoButtonActionsLayout,\n    BentoButtonActionsList,\n} from '../button/components/button-actions/button-actions.types';\nimport { type VueNodeElement } from '@/types/elements';\nimport type { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n\nexport interface BentoPopoverProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     * First element in the list will be rendered as \"primary\".\n     * All elements after the first will be rendered as \"secondary\".\n     *\n     * Each object in the list should have a `title`, an `event` and\n     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n     *\n     * `title`: Button's text.\n     *\n     * `event`: Event triggered when clicking the Button.\n     *\n     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   icon: FourPeopleIcon\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     * }]\n     * ```\n     */\n    actions?: BentoButtonActionsList;\n\n    /**\n     * Defines the layout in which the button actions is presented.\n     * It can be one of:\n     *\n     * @values BUTTONS_END\n     * @values FILL_CONTAINER\n     * @values SPACE_BETWEEN\n     * @values VERTICAL_STACK\n     */\n    actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n    /**\n     * Defines a string value that provides an accessible name for the popover.\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n     */\n    divider?: boolean;\n\n    /**\n     * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n     * */\n    disableFocusTrap?: boolean;\n\n    /**\n     * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n     */\n    dismissible?: boolean;\n\n    /**\n     * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n     * Useful when not using auto as starting placement.\n     * https://floating-ui.com/docs/flip#fallbackplacements\n     */\n    fallbackPosition?: Array<Placement>;\n\n    /**\n     * Sets the size of the container to fit its content\n     */\n    fitContent?: boolean;\n\n    /**\n     * Instructs popover to be visible outside of the containing container.\n     * Useful when component would be used in limited containers like Modal, Side panel, etc.\n     * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n     */\n    fixedPositioning?: boolean;\n\n    /**\n     * Toggles the popover open and closed\n     */\n    open?: boolean;\n\n    /**\n     * Displays the popover in a large size.\n     */\n    large?: boolean;\n\n    /**\n     * @deprecated\n     * NOTE: This property no longer functions since moving to the floating-ui framework.\n     */\n    modifiers?: Array<unknown>;\n\n    /**\n     * Popover's position relative to the target element.\n     * Possible values are:\n     * 'auto',    'auto-start',    'auto-end',\n     * 'top',     'top-start',     'top-end'\n     * 'right',   'right-start',   'right-end'\n     * 'bottom',  'bottom-start',  'bottom-end'\n     * 'left',    'left-start',    'left-end'\n     */\n    position?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n    /**\n     * Displays the popover in a small size.\n     */\n    small?: boolean;\n\n    /**\n     * Indicates the title you want to give the popover.\n     */\n    title?: string;\n\n    /**\n     * Popover's target element.\n     * The popover will position itself relatively to target element, in specified position.\n     */\n    targetElement: VueNodeElement;\n\n    /**\n     * Activates focus trap for both arrow and tab keys.\n     */\n    trapAll?: boolean;\n\n    /**\n     * Configurations for the focus-trap when trap-all is active.\n     */\n    trapAllOptions?: FocusTrapOptions;\n\n    /**\n     * Displays the popover without padding.\n     */\n    withoutSpace?: boolean;\n\n    /**\n     * Allows content to appear outside of the popover. Used when there are nested popovers.\n     */\n    overflowVisible?: boolean;\n}\n"],"names":["BentoPopoverPositions","PopperContainerPosition"],"mappings":";AAYO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}

package/dist/chunks/{popper-container.D4dworD4.js → popper-container.C_n9Ds1W.js}

@@ -1,6 +1,6 @@
 import { computed as S, unref as Z, ref as j, shallowRef as ee, watch as ot, getCurrentScope as ne, onScopeDispose as oe, shallowReadonly as Q, defineComponent as ie, toRefs as re } from "vue";
 import "./index.Cl4_42j5.js";
-import { B as se } from "./focus-trap.DMc1wL3A.js";
+import { B as se } from "./focus-trap.DRqjHzt6.js";
 import { n as le } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/popper-container.css";
 const Wt = ["top", "right", "bottom", "left"], Rt = ["start", "end"], St = /* @__PURE__ */ Wt.reduce((t, e) => t.concat(e, e + "-" + Rt[0], e + "-" + Rt[1]), []), et = Math.min, q = Math.max, lt = Math.round, st = Math.floor, M = (t) => ({
@@ -1420,4 +1420,4 @@ export {
   bn as h,
   Ze as o
 };
-//# sourceMappingURL=popper-container.D4dworD4.js.map
+//# sourceMappingURL=popper-container.C_n9Ds1W.js.map