@adyen/bento-vue2 1.56.2 → 1.57.0

package/dist/chunks/{pagination.CX5fg6Ma.js → pagination.1PxOrSA9.js}

@@ -1,38 +1,32 @@
-import { defineComponent as v, ref as b, computed as _, useSlots as y, useAttrs as B, toRefs as I } from "vue";
+import { defineComponent as v, ref as T, computed as _, useSlots as w, useAttrs as y, toRefs as N } from "vue";
 import { B as d } from "./typography.J1v_SPG3.js";
-import { B as L } from "./dropdown.DfnKDRBQ.js";
-import { g as x } from "./generate-uid.NJ8tVoha.js";
-import { u as f, g as S, a as $ } from "./i18n.BQkEbtPM.js";
-import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as N } from "./button.D7K0uXQm.js";
+import { B as L } from "./dropdown.Qc6K5BzU.js";
+import { g as $ } from "./generate-uid.NJ8tVoha.js";
+import { u as f, g as x, a as S } from "./i18n.BQkEbtPM.js";
+import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as I } from "./button.BuD-IsW5.js";
 /* empty css              */
 import { u as O } from "./aria-label.CaUURpnB.js";
 import { u as R } from "./use-has-slot.C9lQZ6nz.js";
 import "../assets/pagination.css";
 const F = {
   "de-DE": {
-    showingItems: "Zeigt {itemCount} Artikeln",
-    showingItemsWithTotal: "Zeigt {itemCount} von {totalCount} Artikeln"
+    showingItems: "{itemCount} Artikeln"
   },
   "en-US": {
-    showingItems: "Showing {itemCount} items",
-    showingItemsWithTotal: "Showing {itemCount} of {totalCount} items"
+    showingItems: "{itemCount} items"
   },
   "es-ES": {
-    showingItems: "Mostrando {itemCount} artículos",
-    showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} artículos"
+    showingItems: "{itemCount} artículos"
   },
   "fr-FR": {
-    showingItems: "Affichage de {itemCount} élément(s)",
-    showingItemsWithTotal: "Affichage de {itemCount} élément(s) sur {totalCount}"
+    showingItems: "{itemCount} élément(s)"
   },
   "ja-JP": {
-    showingItems: "{itemCount}個のアイテムを表示しています",
-    showingItemsWithTotal: "{totalCount}件中{itemCount}件のアイテムを表示"
+    showingItems: "{itemCount}個のアイテムを表示しています"
   },
   "pt-BR": {
-    showingItems: "Mostrando {itemCount} itens",
-    showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} itens"
+    showingItems: "{itemCount} itens"
   }
 }, k = {
   i18n: { messages: F }
@@ -40,73 +34,64 @@ const F = {
   ...k,
   __name: "pagination-results-per-page",
   props: {
-    itemsPerPage: { default: 50 },
-    totalCount: { default: null }
+    itemsPerPage: { default: 50 }
   },
   emits: ["select"],
   setup(n, { emit: t }) {
-    const e = n, a = [
+    const e = [
       { label: "10", value: 10 },
       { label: "20", value: 20 },
       { label: "50", value: 50 },
       { label: "75", value: 75 },
       { label: "100", value: 100 }
-    ], { t: o } = f(), i = x("b-pagination-context-number-elements"), p = b(a), l = $(), c = (s) => {
-      t("select", s);
-    }, r = _(() => e.totalCount ? "showingItemsWithTotal" : "showingItems");
-    return { __sfc: !0, PREDEFINED_RESULTS_PER_PAGE_VALUES: a, props: e, emit: t, t: o, dropdownId: i, dropdownOptions: p, i18nComponent: l, onSelectChange: c, translationPathKey: r, BentoTypography: d, BentoDropdown: L, getI18nProps: S };
+    ], { t: a } = f(), s = $("b-pagination-context-number-elements"), i = T(e), l = S();
+    return { __sfc: !0, PREDEFINED_RESULTS_PER_PAGE_VALUES: e, emit: t, t: a, dropdownId: s, dropdownOptions: i, i18nComponent: l, onSelectChange: (u) => {
+      t("select", u);
+    }, BentoTypography: d, BentoDropdown: L, getI18nProps: x };
   }
 });
 var z = 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(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.dropdownOptions, value: t.itemsPerPage }, on: { input: 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);
-}, E = [], D = /* @__PURE__ */ u(
+  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" }, scopedSlots: t._u([{ key: "itemCount", fn: function() {
+    return [e(a.BentoDropdown, { staticClass: "b-pagination-results-per-page__dropdown", attrs: { id: a.dropdownId, "aria-label": a.t("showingItems", { itemCount: t.itemsPerPage }), condensed: "", items: a.dropdownOptions, value: t.itemsPerPage }, on: { input: a.onSelectChange } })];
+  }, proxy: !0 }]) }, "component", a.getI18nProps("showingItems"), !1))], 1)], 1);
+}, E = [], D = /* @__PURE__ */ c(
   A,
   z,
   E,
   !1,
   null,
-  "c28c6859"
+  "1d5e06b4"
 );
 const Z = D.exports, M = {
   "de-DE": {
     pageNumber: "Seite {page}",
-    pageOfTotalPages: "Seite {page} von {totalPages}",
     pageOneOfOne: "Seite 1 von 1"
   },
   "en-US": {
     pageNumber: "Page {page}",
-    pageOfTotalPages: "Page {page} of {totalPages}",
     pageOneOfOne: "Page 1 of 1"
   },
   "es-ES": {
     pageNumber: "Página {page}",
-    pageOfTotalPages: "Página {page} de {totalPages}",
     pageOneOfOne: "Página 1 de 1"
   },
   "fr-FR": {
     pageNumber: "Page {page}",
-    pageOfTotalPages: "Page {page} sur {totalPages}",
     pageOneOfOne: "Page 1 sur 1"
   },
   "ja-JP": {
     pageNumber: "ページ{page}",
-    pageOfTotalPages: "ページ{page}/{totalPages}",
     pageOneOfOne: "ページ1/1"
   },
   "pt-BR": {
     pageNumber: "Página {page}",
-    pageOfTotalPages: "Página {page} de {totalPages}",
     pageOneOfOne: "Página 1 de 1"
   }
-}, W = {
+}, U = {
   i18n: { messages: M }
-}, U = /* @__PURE__ */ v({
-  ...W,
+}, j = /* @__PURE__ */ v({
+  ...U,
   __name: "pagination-context",
   props: {
     page: { default: 1 },
@@ -115,59 +100,57 @@ const Z = D.exports, M = {
   },
   emits: ["page-selected"],
   setup(n, { emit: t }) {
-    const e = n, { t: a } = f(), o = x("bento-pagination-context-current-page"), i = (s) => t("page-selected", s), p = $(), l = (s) => ({
-      label: s.toString(),
-      value: s
-    }), c = (s, m) => m + 1, r = _(
-      () => Array.from(new Array(e.totalPages), c).map(l)
+    const e = n, { t: a } = f(), s = $("bento-pagination-context-current-page"), i = (o) => t("page-selected", o), l = S(), g = (o) => ({
+      label: o.toString(),
+      value: o
+    }), u = (o, m) => m + 1, p = _(
+      () => Array.from(new Array(e.totalPages), u).map(g)
     );
-    return { __sfc: !0, props: e, emit: t, t: a, dropdownId: o, onPageSelectChange: i, i18nComponent: p, transformIntoOption: l, transformToPageNumber: c, listOfAvailablePages: r, BentoTypography: d, BentoDropdown: L, getI18nProps: S };
+    return { __sfc: !0, props: e, emit: t, t: a, dropdownId: s, onPageSelectChange: i, i18nComponent: l, transformIntoOption: g, transformToPageNumber: u, listOfAvailablePages: p, BentoTypography: d, BentoDropdown: L, getI18nProps: x };
   }
 });
-var j = function() {
+var H = 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(a.BentoDropdown, { staticClass: "b-pagination-context__dropdown", attrs: { id: a.dropdownId, "aria-label": a.t("pageOfTotalPages", { page: t.page, totalPages: t.totalPages }), condensed: "", items: a.listOfAvailablePages, value: t.page, "virtual-scroll": t.virtualScroll }, on: { input: a.onPageSelectChange } })];
-  }, proxy: !0 }, { key: "totalPages", fn: function() {
-    return [t._v(t._s(t.totalPages))];
-  }, proxy: !0 }], null, !1, 3215767573) }, "component", a.getI18nProps("pageOfTotalPages"), !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: t.page })) + " ")])], 1);
-}, H = [], J = /* @__PURE__ */ u(
-  U,
+    return [e(a.BentoDropdown, { staticClass: "b-pagination-context__dropdown", attrs: { id: a.dropdownId, "aria-label": a.t("pageNumber", { page: t.page }), condensed: "", items: a.listOfAvailablePages, value: t.page, "virtual-scroll": t.virtualScroll }, on: { input: a.onPageSelectChange } })];
+  }, proxy: !0 }], null, !1, 379172170) }, "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: t.page })) + " ")])], 1);
+}, J = [], V = /* @__PURE__ */ c(
   j,
   H,
+  J,
   !1,
   null,
-  "6ce0e160"
+  "18345698"
 );
-const K = J.exports;
-let P = 0;
-const V = {
+const G = V.exports;
+let h = 0;
+const q = {
   beforeCreate() {
-    this.uuid = P.toString(), P += 1;
+    this.uuid = h.toString(), h += 1;
   }
 };
-var G = function() {
+var K = 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: "#00112C", 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: "#00112C", d: "M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z" } })]);
-}, q = [], Q = /* @__PURE__ */ u(
-  V,
-  G,
+}, Q = [], W = /* @__PURE__ */ c(
   q,
+  K,
+  Q,
   !1,
   null,
   null
 );
-const X = Q.exports;
-let h = 0;
+const X = W.exports;
+let P = 0;
 const Y = {
   beforeCreate() {
-    this.uuid = h.toString(), h += 1;
+    this.uuid = P.toString(), P += 1;
   }
 };
 var tt = 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: "#00112C", 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: "#00112C", d: "M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z" } })]);
-}, et = [], at = /* @__PURE__ */ u(
+}, et = [], at = /* @__PURE__ */ c(
   Y,
   tt,
   et,
@@ -185,7 +168,7 @@ const st = {
 var ot = 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: "#00112C", d: "M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z" } })]);
-}, it = [], rt = /* @__PURE__ */ u(
+}, it = [], rt = /* @__PURE__ */ c(
   st,
   ot,
   it,
@@ -194,24 +177,24 @@ var ot = function() {
   null
 );
 const lt = rt.exports;
-let T = 0;
+let b = 0;
 const gt = {
   beforeCreate() {
-    this.uuid = T.toString(), T += 1;
+    this.uuid = b.toString(), b += 1;
   }
 };
 var pt = 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: "#00112C", d: "M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z" } })]);
-}, ut = [], ct = /* @__PURE__ */ u(
+}, ct = [], ut = /* @__PURE__ */ c(
   gt,
   pt,
-  ut,
+  ct,
   !1,
   null,
   null
 );
-const _t = ct.exports, vt = {
+const _t = ut.exports, vt = {
   "de-DE": {
     navigateToTheFirstPage: "Zur ersten Seite navigieren",
     navigateToTheLastPage: "Zur letzten Seite navigieren",
@@ -260,44 +243,44 @@ const _t = ct.exports, vt = {
   },
   emits: ["navigate"],
   setup(n, { emit: t }) {
-    const e = n, { t: a } = f(), o = _(() => e.page === 1), i = _(() => e.page === e.totalPages), p = _(() => !e.hasNext || i.value), l = _(() => {
-      const r = !e.hasNext, s = !e.totalPages;
-      return r || i.value || s;
+    const e = n, { t: a } = f(), s = _(() => e.page === 1), i = _(() => e.page === e.totalPages), l = _(() => !e.hasNext || i.value), g = _(() => {
+      const p = !e.hasNext, o = !e.totalPages;
+      return p || i.value || o;
     });
-    return { __sfc: !0, props: e, emit: t, t: a, isCurrentPageFirst: o, isCurrentPageLast: i, isNextButtonDisabled: p, isLastPageButtonDisabled: l, navigate: (r) => {
-      t("navigate", r);
-    }, BentoButton: N, SkipLeft: X, SkipRight: nt, ChevronLeft: lt, ChevronRight: _t };
+    return { __sfc: !0, props: e, emit: t, t: a, isCurrentPageFirst: s, isCurrentPageLast: i, isNextButtonDisabled: l, isLastPageButtonDisabled: g, navigate: (p) => {
+      t("navigate", p);
+    }, BentoButton: I, SkipLeft: X, SkipRight: nt, ChevronLeft: lt, ChevronRight: _t };
   }
 });
 var mt = 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(o) {
+  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(o) {
+  }, 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(o) {
+  }, 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(o) {
+  }, 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 = [], ht = /* @__PURE__ */ u(
+}, ht = [], Pt = /* @__PURE__ */ c(
   ft,
   mt,
-  Pt,
+  ht,
   !1,
   null,
   "65f213a4"
 );
-const Ct = ht.exports, Tt = {}, bt = /* @__PURE__ */ v({
-  ...Tt,
+const Ct = Pt.exports, bt = {}, Tt = /* @__PURE__ */ v({
+  ...bt,
   __name: "pagination",
   props: {
     ariaLabel: { default: null },
@@ -310,37 +293,37 @@ const Ct = ht.exports, Tt = {}, bt = /* @__PURE__ */ v({
   },
   emits: ["navigate", "items-page", "update:page", "update:size"],
   setup(n, { emit: t }) {
-    const e = n, a = y(), o = R(a), i = B(), p = b(i["aria-label"]), { ariaLabel: l } = I(e), c = O({
-      ariaLabel: p.value,
+    const e = n, a = w(), s = R(a), i = y(), l = T(i["aria-label"]), { ariaLabel: g } = N(e), u = O({
+      ariaLabel: l.value,
       // TODO: take this line away when the aria-label props is removed
-      label: l
-    }), r = _(
+      label: g
+    }), p = _(
       () => !e.totalCount || !e.size ? null : Math.ceil(e.totalCount / e.size)
-    ), s = (g, w) => {
-      e.hidePageSize ? t("navigate", g) : t("navigate", g, w ?? (e == null ? void 0 : e.size)), t("update:page", g);
+    ), o = (r, B) => {
+      e.hidePageSize ? t("navigate", r) : t("navigate", r, B ?? (e == null ? void 0 : e.size)), t("update:page", r);
     };
-    return { __sfc: !0, props: e, emit: t, slots: a, hasSlot: o, attrs: i, ariaLabelAttribute: p, ariaLabel: l, computedAriaLabel: c, totalPages: r, navigate: s, onPageSelected: (g) => {
-      s(g);
-    }, onItemsPerPageChange: (g) => {
-      t("items-page", g), t("update:size", g), s(1, g);
+    return { __sfc: !0, props: e, emit: t, slots: a, hasSlot: s, attrs: i, ariaLabelAttribute: l, ariaLabel: g, computedAriaLabel: u, totalPages: p, navigate: o, onPageSelected: (r) => {
+      o(r);
+    }, onItemsPerPageChange: (r) => {
+      t("items-page", r), t("update:size", r), o(1, r);
     }, navigationConditionalClasses: () => ({
-      "b-pagination__navigation--only-page-navigator": !o("default") && e.hidePageSize
-    }), BentoTypography: d, BentoPaginationResultsPerPage: Z, BentoPaginationContext: K, BentoPaginationControls: Ct };
+      "b-pagination__navigation--only-page-navigator": !s("default") && e.hidePageSize
+    }), BentoTypography: d, BentoPaginationResultsPerPage: Z, BentoPaginationContext: G, BentoPaginationControls: Ct };
   }
 });
 var Lt = 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)]);
-}, xt = [], St = /* @__PURE__ */ u(
-  bt,
+}, $t = [], xt = /* @__PURE__ */ c(
+  Tt,
   Lt,
-  xt,
+  $t,
   !1,
   null,
   "b3d5cd4e"
 );
-const Et = St.exports;
+const Et = xt.exports;
 export {
   Et as B
 };
-//# sourceMappingURL=pagination.CX5fg6Ma.js.map
+//# sourceMappingURL=pagination.1PxOrSA9.js.map

package/dist/chunks/pagination.1PxOrSA9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.1PxOrSA9.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('showingItems')\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('showingItems', { itemCount: itemsPerPage })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"dropdownOptions\"\n                        :value=\"itemsPerPage\"\n                        @input=\"onSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } 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\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const PREDEFINED_RESULTS_PER_PAGE_VALUES = [\n        { label: '10', value: 10 },\n        { label: '20', value: 20 },\n        { label: '50', value: 50 },\n        { label: '75', value: 75 },\n        { label: '100', value: 100 },\n    ];\n\n    defineProps({\n  itemsPerPage: { default: 50 }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const dropdownOptions = ref(PREDEFINED_RESULTS_PER_PAGE_VALUES);\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\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-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" 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                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @input=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { 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 { BentoListboxOptionItem } from '@/types';\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  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t } = 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: value.toString(),\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</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=\"#00112C\" 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=\"#00112C\" 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=\"#00112C\" 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=\"#00112C\" 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=\"#00112C\" 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=\"#00112C\" 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                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\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                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\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  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false }\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","PREDEFINED_RESULTS_PER_PAGE_VALUES","t","useI18n","dropdownId","generateUid","dropdownOptions","ref","i18nComponent","getI18nComponent","selectedNumberOfResults","emit","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","computed","props","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","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;AA3BA,UAAAC,IAAA;AAAA,MAA2C,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACd,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,OAAA,OAAA,IAAA;AAAA,IACE,GAS/B,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,sCAAA,GACAC,IAAAC,EAAAN,CAAA,GACAO,IAAAC,EAAA;mJAEA,CAAAC,MAAA;AACI,MAAAC,EAAA,UAAAD,CAAA;AAAA,IAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCM1CE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;iBAnBA,EAAA,GAAAX,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,uCAAA,GACAS,IAAA,CAAAC,MAAAJ,EAAA,iBAAAI,CAAA,GACAP,IAAAC,EAAA,GAGAO,IAAA,CAAAC,OAAA;AAAA,MAAwE,OAAAA,EAAA,SAAA;AAAA,MAC9C,OAAAA;AAAA,IACtB,IAEJC,IAAA,CAAAC,GAAAC,MAAAA,IAAA,GACAC,IAAAC;AAAA,MAA6B,MAAA,MAAA,KAAA,IAAA,MAAAC,EAAA,UAAA,GAAAL,CAAA,EAAA,IAAAF,CAAA;AAAA,IAC6D;;;;;;;;;;;;;;;;;;AClD9F,IAAAQ,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,KAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,KAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsEIE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;iBAvBA,EAAA,GAAA/B,EAAA,IAAAC,EAAA,GAEA+B,IAAAZ,EAAA,MAAAC,EAAA,SAAA,CAAA,GACAY,IAAAb,EAAA,MAAAC,EAAA,SAAAA,EAAA,UAAA,GACAa,IAAAd,EAAA,MACI,CAAAC,EAAA,WACAY,EAAA,KAA0C,GAE9CE,IAAAf,EAAA,MAAA;AACI,YAAAgB,IAAA,CAAAf,EAAA,SACAgB,IAAA,CAAAhB,EAAA;AAEA,aAAAe,KAAAH,EAAA,SAAAI;AAAA,IAAmD,CAAA;8JAGvD,CAAAC,MAAA;AACI,MAAA7B,EAAA,YAAA6B,CAAA;AAAA,IAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBCiD5BC,KAAA,CAAA;;;;;;;;;;;;;;iBAtEAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAzC,EAAAuC,EAAA,YAAA,CAAA,GACA,EAAA,WAAAG,EAAA,IAAAC,EAAA3B,CAAA,GACA4B,IAAAC,EAAA;AAAA,MAAuC,WAAAJ,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,IAEvB,CAAA,GAGXI,IAAA/B;AAAA,MAAmB,MAAA,CAAAC,EAAA,cAAA,CAAAA,EAAA,OAAA,OAAA,KAAA,KAAAA,EAAA,aAAAA,EAAA,IAAA;AAAA,IACkE,GAGrF+B,IAAA,CAAAd,GAAAe,MAAA;AACI,MAAAhC,EAAA,eACIZ,EAAA,YAAA6B,CAAA,IAEA7B,EAAA,YAAA6B,GAAAe,MAAAhC,KAAA,gBAAAA,EAAA,KAAA,GAEJZ,EAAA,eAAA6B,CAAA;AAAA,IAA2B;kLAG/B,CAAAgB,MAAA;AACI,MAAAF,EAAAE,CAAA;AAAA,IAAmB,yBAGvB,CAAAC,MAAA;AACI,MAAA9C,EAAA,cAAA8C,CAAA,GACA9C,EAAA,eAAA8C,CAAA,GAIAH,EAAA,GAAAG,CAAA;AAAA,IAAoB,iCAGxB,OAAA;AAAA,MAA4C,iDAAA,CAAAb,EAAA,SAAA,KAAArB,EAAA;AAAA,IACsC;;;;;;;;;;;;;;;"}

package/dist/chunks/{popover.Bb9JeZVy.js → popover.DXo3nXew.js}

@@ -1,12 +1,12 @@
 import { defineComponent as l, computed as i, useSlots as I, useAttrs as E, inject as r, ref as A, toRefs as L } from "vue";
-import { d as F, P as m, c as R } from "./popper-container.DieshXa8.js";
+import { d as F, P as m, c as R } from "./popper-container.1kHSxyxu.js";
 import { B as k, a as v } from "./typography.J1v_SPG3.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as w } from "./button.D7K0uXQm.js";
+import { B as w } from "./button.BuD-IsW5.js";
 import { C as x } from "./cross.CJ5EEL2c.js";
 import { u as N } from "./use-has-slot.C9lQZ6nz.js";
 import { u as $ } from "./aria-label.CaUURpnB.js";
-import { c as b, B as V } from "./button-actions.ZBlB7bp4.js";
+import { c as b, B as V } from "./button-actions.DUn_iPDm.js";
 import "../assets/popover.css";
 const D = l({
   components: { BentoTypography: k },
@@ -292,4 +292,4 @@ export {
   y as a,
   Q as b
 };
-//# sourceMappingURL=popover.Bb9JeZVy.js.map
+//# sourceMappingURL=popover.DXo3nXew.js.map

package/dist/chunks/{popover.Bb9JeZVy.js.map → popover.DXo3nXew.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover.Bb9JeZVy.js","sources":["../../src/components/popover/components/popover-title/popover-title.vue","../../src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue","../../src/components/popover/popover.types.ts","../../src/components/popover/popover.keys.ts","../../src/components/filter-bar/components/input-filter/input-filter.keys.ts","../../src/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys.ts","../../src/components/popover/popover.vue"],"sourcesContent":["<template>\n    <bento-typography :strongest=\"isStrongest\" :variant=\"titleVariant\" el=\"span\">\n        {{ title }}\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n\n    export default defineComponent({\n        components: { BentoTypography },\n        props: {\n            /**\n             * Indicates if the popover contains an image.\n             */\n            isImageTitle: { type: Boolean, default: false },\n\n            /**\n             * Indicates the title you want to give the popover.\n             */\n            title: { type: String, default: null },\n        },\n        setup(props) {\n            // Use strongest only when it has no image\n            const isStrongest = computed(() => !props.isImageTitle);\n\n            // If an image is present, change the variant from BODY to SUBTITLE and remove the \"strongest\" property of the title\n            const titleVariant = computed(() =>\n                props.isImageTitle ? BentoTypographyVariant.SUBTITLE : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                isStrongest,\n                titleVariant,\n            };\n        },\n    });\n</script>\n","<template>\n    <bento-button :class=\"conditionalClass\" variant=\"tertiary\" @click=\"$emit('click')\">\n        <template #iconLeft>\n            <cross-icon svg-title=\"dismiss\" />\n        </template>\n    </bento-button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    export default defineComponent({\n        name: 'bento-popover-dismiss-button',\n        components: { BentoButton, CrossIcon },\n        props: {\n            onImage: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            const conditionalClass = computed(() => ({ 'b-popover-dismiss-button--on-image': props.onImage }));\n\n            return {\n                // Values\n                conditionalClass,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover-dismiss-button.scss\" />\n","import { PopperContainerPosition } from '../popper-container';\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","export const POPOVER_OFFSET_INJECTION_KEY = Symbol('popover offset injection key');\n","/**\n * @deprecated from version 2.0.0. Use BentoFilterItemType.INPUT_DROPDOWN and INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY instead.\n */\nexport const INPUT_FILTER_POPOVER_INJECTION_KEY = Symbol('input field popover injection key');\n","export const INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY = Symbol('input field popover injection key');\n","<template>\n    <Transition name=\"b-popover__animation\">\n        <popper-container\n            v-if=\"open\"\n            :id=\"computedAttributes['id']\"\n            :aria-role=\"computedAttributes.role\"\n            :aria-label=\"computedAriaLabel\"\n            :arrow=\"{ classes: ['b-popover__arrow'] }\"\n            :disabled-focus-trap=\"disableFocusTrap\"\n            :class=\"conditionalClasses\"\n            :fallback-position=\"fallbackPosition\"\n            :fixed-positioning=\"fixedPositioning\"\n            :offset=\"[0, offset]\"\n            :position=\"position\"\n            :target-element=\"targetElement\"\n            class=\"b-popover\"\n            @placement=\"$emit('placement', $event)\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-popover__image\">\n                <div v-if=\"dismissible\" class=\"b-popover__image-dismiss-button\">\n                    <bento-popover-dismiss-button on-image @click=\"dismissPopover\" />\n                </div>\n                <slot name=\"image\"></slot>\n            </div>\n            <div v-if=\"title\" class=\"b-popover__header\">\n                <div class=\"b-popover__header-title\">\n                    <slot v-if=\"hasSlot('headerIcon')\" name=\"headerIcon\"></slot>\n                    <bento-popover-title :title=\"title\" :is-image-title=\"!!hasSlot('image')\" />\n                </div>\n                <div v-if=\"dismissible && !hasSlot('image')\">\n                    <bento-popover-dismiss-button @click=\"dismissPopover\" />\n                </div>\n            </div>\n\n            <div v-if=\"hasSlot('default')\" class=\"b-popover__content\" :class=\"contentConditionalClasses\">\n                <slot></slot>\n            </div>\n\n            <div v-if=\"actions\" class=\"b-popover__footer\">\n                <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n            </div>\n        </popper-container>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, PropType, ref, toRefs, useAttrs, useSlots } from 'vue';\n\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container';\n    import BentoPopoverTitle from './components/popover-title/popover-title.vue';\n    import BentoPopoverDismissButton from './components/popover-dismiss-button/popover-dismiss-button.vue';\n\n    import { BentoPopoverPositions } from './popover.types';\n    import { Placement } from '@floating-ui/vue';\n\n    import { useHasSlot } from '@/composables';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    import { POPOVER_OFFSET_INJECTION_KEY } from './popover.keys';\n    import { INPUT_FILTER_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-filter/input-filter.keys';\n    import { INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys';\n\n    const DEFAULT_OFFSET = 2;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: 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: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\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: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n        },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Defines a string value that provides an accessible name for the popover.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\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: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n         * */\n        disableFocusTrap: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n         */\n        dismissible: {\n            type: Boolean,\n            default: false,\n        },\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: {\n            type: Array as PropType<Placement[]>,\n            default: () => ['bottom-start', 'right-start', 'top-start', 'left-start'],\n        },\n\n        /**\n         * Sets the size of the container to fit its content\n         */\n        fitContent: { type: Boolean, default: false },\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: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Toggles the popover open and closed\n         */\n        open: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Displays the popover in a large size.\n         */\n        large: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * @deprecated\n         * NOTE: This property no longer functions since moving to the floating-ui framework.\n         */\n        modifiers: { type: Array, default: null },\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: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: BentoPopoverPositions.BOTTOM_START,\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n\n        /**\n         * Displays the popover in a small size.\n         */\n        small: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Indicates the title you want to give the popover.\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Popover's target element.\n         * The popover will position itself relatively to target element, in specified position.\n         */\n        targetElement: {\n            type: PopperContainer.props?.targetElement.type,\n            required: true,\n        },\n        /**\n         * Displays the popover without padding.\n         */\n        withoutSpace: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Allows content to appear outside of the popover. Used when there are nested popovers.\n         */\n        overflowVisible: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"dismiss\", \"placement\"]);\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n\n    const computedAttributes = computed(() => ({\n        id: attrs.id?.toString() as string,\n        role: attrs?.['role'] === null ? undefined : PopperContainerAriaRole.POPOVER,\n    }));\n\n    const offset = inject<number>(POPOVER_OFFSET_INJECTION_KEY, DEFAULT_OFFSET);\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, title } = 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        defaultFallback: title,\n    });\n\n    const isOverflowVisible =\n        inject(INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY, false) ||\n        inject(INPUT_FILTER_POPOVER_INJECTION_KEY, false);\n\n    const conditionalClasses = computed(() => ({\n        'b-popover--small': props.small && !props.large,\n        'b-popover--with-divider': !!props.divider,\n        'b-popover--large': props.large && !props.small,\n        'b-popover--fit-content': props.fitContent,\n        'b-popover--without-space': props.withoutSpace,\n        'b-popover--overflow-visible': props.overflowVisible || isOverflowVisible,\n    }));\n\n    const contentConditionalClasses = computed(() => ({\n        'b-popover__content--with-title': !!props.title,\n    }));\n\n    const dismissPopover = () => emit('dismiss');\n\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Example description of the component...\n     *\n     * @example\n     * import { BentoPopover } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoPopover },\n     *     template: `\n     *          <bento-popover id=\"your-popover-id\">\n     *              ...Example code of the component\n     *          </bento-popover>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover.scss\" />\n"],"names":["_sfc_main$2","defineComponent","BentoTypography","props","isStrongest","computed","titleVariant","BentoTypographyVariant","_sfc_main$1","BentoButton","CrossIcon","BentoPopoverPositions","PopperContainerPosition","POPOVER_OFFSET_INJECTION_KEY","INPUT_FILTER_POPOVER_INJECTION_KEY","INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY","__default__","DEFAULT_OFFSET","slots","useSlots","attrs","useAttrs","computedAttributes","_a","PopperContainerAriaRole","offset","inject","ariaLabelAttribute","ref","ariaLabel","title","toRefs","computedAriaLabel","useAriaLabel","isOverflowVisible","conditionalClasses","contentConditionalClasses","dismissPopover","emit","hasSlot","useHasSlot"],"mappings":";;;;;;;;;;AAUA,MAAAA,IAAAC,EAAA;AAAA,EAAA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,cAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAAC,IAAAC,EAAA,MAAA,CAAAF,EAAA,YAAA,GAGAG,IAAAD;AAAA,MAAA,MAAAF,EAAA,eAAAI,EAAA,WAAAA,EAAA;AAAA,IACA;AAGA,WAAA;AAAA;AAAA,MAAA,aAAAH;AAAA,MAEA,cAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;qBCzBAE,IAAAP,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAQ,GAAA,WAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAP,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,kBAFAE,EAAA,OAAA,EAAA,sCAAAF,EAAA,QAAA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBCzBaQ,IAAA,EAAA,GAAAC,EAAA,GCLAC,IAAA,OAAA,8BAAA,GCGAC,IAAA,OAAA,mCAAA,GCHAC,IAAA,OAAA,mCAAA,GCoTTC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArPAC,IAAA,GA4LAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GAEAC,IAAAjB,EAAA,MAAA;;AAAA;AAAA,QAA2C,KAAAkB,IAAAH,EAAA,OAAA,gBAAAG,EAAA;AAAA,QAChB,OAAAH,KAAA,gBAAAA,EAAA,UAAA,OAAA,SAAAI,EAAA;AAAA,MAC8C;AAAA,KAAA,GAGzEC,IAAAC,EAAAb,GAAAI,CAAA,GAEAU,IAAAC,EAAAR,EAAA,YAAA,CAAA,GACA,EAAA,WAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAA5B,CAAA,GACA6B,IAAAC,EAAA;AAAA,MAAuC,WAAAN,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,MAEvB,iBAAAC;AAAA,IACU,CAAA,GAGrBI,IAAAR,EAAAX,GAAA,EAAA,KAAAW,EAAAZ,GAAA,EAAA,GAIAqB,IAAA9B,EAAA,OAAA;AAAA,MAA2C,oBAAAF,EAAA,SAAA,CAAAA,EAAA;AAAA,MACG,2BAAA,CAAA,CAAAA,EAAA;AAAA,MACP,oBAAAA,EAAA,SAAA,CAAAA,EAAA;AAAA,MACO,0BAAAA,EAAA;AAAA,MACV,4BAAAA,EAAA;AAAA,MACE,+BAAAA,EAAA,mBAAA+B;AAAA,IACsB,EAAA,GAG5DE,IAAA/B,EAAA,OAAA;AAAA,MAAkD,kCAAA,CAAA,CAAAF,EAAA;AAAA,IACJ,EAAA,GAG9CkC,IAAA,MAAAC,EAAA,SAAA,GAEAC,IAAAC,EAAAtB,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"popover.DXo3nXew.js","sources":["../../src/components/popover/components/popover-title/popover-title.vue","../../src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue","../../src/components/popover/popover.types.ts","../../src/components/popover/popover.keys.ts","../../src/components/filter-bar/components/input-filter/input-filter.keys.ts","../../src/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys.ts","../../src/components/popover/popover.vue"],"sourcesContent":["<template>\n    <bento-typography :strongest=\"isStrongest\" :variant=\"titleVariant\" el=\"span\">\n        {{ title }}\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n\n    export default defineComponent({\n        components: { BentoTypography },\n        props: {\n            /**\n             * Indicates if the popover contains an image.\n             */\n            isImageTitle: { type: Boolean, default: false },\n\n            /**\n             * Indicates the title you want to give the popover.\n             */\n            title: { type: String, default: null },\n        },\n        setup(props) {\n            // Use strongest only when it has no image\n            const isStrongest = computed(() => !props.isImageTitle);\n\n            // If an image is present, change the variant from BODY to SUBTITLE and remove the \"strongest\" property of the title\n            const titleVariant = computed(() =>\n                props.isImageTitle ? BentoTypographyVariant.SUBTITLE : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                isStrongest,\n                titleVariant,\n            };\n        },\n    });\n</script>\n","<template>\n    <bento-button :class=\"conditionalClass\" variant=\"tertiary\" @click=\"$emit('click')\">\n        <template #iconLeft>\n            <cross-icon svg-title=\"dismiss\" />\n        </template>\n    </bento-button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    export default defineComponent({\n        name: 'bento-popover-dismiss-button',\n        components: { BentoButton, CrossIcon },\n        props: {\n            onImage: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            const conditionalClass = computed(() => ({ 'b-popover-dismiss-button--on-image': props.onImage }));\n\n            return {\n                // Values\n                conditionalClass,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover-dismiss-button.scss\" />\n","import { PopperContainerPosition } from '../popper-container';\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","export const POPOVER_OFFSET_INJECTION_KEY = Symbol('popover offset injection key');\n","/**\n * @deprecated from version 2.0.0. Use BentoFilterItemType.INPUT_DROPDOWN and INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY instead.\n */\nexport const INPUT_FILTER_POPOVER_INJECTION_KEY = Symbol('input field popover injection key');\n","export const INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY = Symbol('input field popover injection key');\n","<template>\n    <Transition name=\"b-popover__animation\">\n        <popper-container\n            v-if=\"open\"\n            :id=\"computedAttributes['id']\"\n            :aria-role=\"computedAttributes.role\"\n            :aria-label=\"computedAriaLabel\"\n            :arrow=\"{ classes: ['b-popover__arrow'] }\"\n            :disabled-focus-trap=\"disableFocusTrap\"\n            :class=\"conditionalClasses\"\n            :fallback-position=\"fallbackPosition\"\n            :fixed-positioning=\"fixedPositioning\"\n            :offset=\"[0, offset]\"\n            :position=\"position\"\n            :target-element=\"targetElement\"\n            class=\"b-popover\"\n            @placement=\"$emit('placement', $event)\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-popover__image\">\n                <div v-if=\"dismissible\" class=\"b-popover__image-dismiss-button\">\n                    <bento-popover-dismiss-button on-image @click=\"dismissPopover\" />\n                </div>\n                <slot name=\"image\"></slot>\n            </div>\n            <div v-if=\"title\" class=\"b-popover__header\">\n                <div class=\"b-popover__header-title\">\n                    <slot v-if=\"hasSlot('headerIcon')\" name=\"headerIcon\"></slot>\n                    <bento-popover-title :title=\"title\" :is-image-title=\"!!hasSlot('image')\" />\n                </div>\n                <div v-if=\"dismissible && !hasSlot('image')\">\n                    <bento-popover-dismiss-button @click=\"dismissPopover\" />\n                </div>\n            </div>\n\n            <div v-if=\"hasSlot('default')\" class=\"b-popover__content\" :class=\"contentConditionalClasses\">\n                <slot></slot>\n            </div>\n\n            <div v-if=\"actions\" class=\"b-popover__footer\">\n                <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n            </div>\n        </popper-container>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, PropType, ref, toRefs, useAttrs, useSlots } from 'vue';\n\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container';\n    import BentoPopoverTitle from './components/popover-title/popover-title.vue';\n    import BentoPopoverDismissButton from './components/popover-dismiss-button/popover-dismiss-button.vue';\n\n    import { BentoPopoverPositions } from './popover.types';\n    import { Placement } from '@floating-ui/vue';\n\n    import { useHasSlot } from '@/composables';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    import { POPOVER_OFFSET_INJECTION_KEY } from './popover.keys';\n    import { INPUT_FILTER_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-filter/input-filter.keys';\n    import { INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys';\n\n    const DEFAULT_OFFSET = 2;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: 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: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\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: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n        },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Defines a string value that provides an accessible name for the popover.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\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: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n         * */\n        disableFocusTrap: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n         */\n        dismissible: {\n            type: Boolean,\n            default: false,\n        },\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: {\n            type: Array as PropType<Placement[]>,\n            default: () => ['bottom-start', 'right-start', 'top-start', 'left-start'],\n        },\n\n        /**\n         * Sets the size of the container to fit its content\n         */\n        fitContent: { type: Boolean, default: false },\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: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Toggles the popover open and closed\n         */\n        open: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Displays the popover in a large size.\n         */\n        large: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * @deprecated\n         * NOTE: This property no longer functions since moving to the floating-ui framework.\n         */\n        modifiers: { type: Array, default: null },\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: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: BentoPopoverPositions.BOTTOM_START,\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n\n        /**\n         * Displays the popover in a small size.\n         */\n        small: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Indicates the title you want to give the popover.\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Popover's target element.\n         * The popover will position itself relatively to target element, in specified position.\n         */\n        targetElement: {\n            type: PopperContainer.props?.targetElement.type,\n            required: true,\n        },\n        /**\n         * Displays the popover without padding.\n         */\n        withoutSpace: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Allows content to appear outside of the popover. Used when there are nested popovers.\n         */\n        overflowVisible: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"dismiss\", \"placement\"]);\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n\n    const computedAttributes = computed(() => ({\n        id: attrs.id?.toString() as string,\n        role: attrs?.['role'] === null ? undefined : PopperContainerAriaRole.POPOVER,\n    }));\n\n    const offset = inject<number>(POPOVER_OFFSET_INJECTION_KEY, DEFAULT_OFFSET);\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, title } = 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        defaultFallback: title,\n    });\n\n    const isOverflowVisible =\n        inject(INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY, false) ||\n        inject(INPUT_FILTER_POPOVER_INJECTION_KEY, false);\n\n    const conditionalClasses = computed(() => ({\n        'b-popover--small': props.small && !props.large,\n        'b-popover--with-divider': !!props.divider,\n        'b-popover--large': props.large && !props.small,\n        'b-popover--fit-content': props.fitContent,\n        'b-popover--without-space': props.withoutSpace,\n        'b-popover--overflow-visible': props.overflowVisible || isOverflowVisible,\n    }));\n\n    const contentConditionalClasses = computed(() => ({\n        'b-popover__content--with-title': !!props.title,\n    }));\n\n    const dismissPopover = () => emit('dismiss');\n\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Example description of the component...\n     *\n     * @example\n     * import { BentoPopover } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoPopover },\n     *     template: `\n     *          <bento-popover id=\"your-popover-id\">\n     *              ...Example code of the component\n     *          </bento-popover>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover.scss\" />\n"],"names":["_sfc_main$2","defineComponent","BentoTypography","props","isStrongest","computed","titleVariant","BentoTypographyVariant","_sfc_main$1","BentoButton","CrossIcon","BentoPopoverPositions","PopperContainerPosition","POPOVER_OFFSET_INJECTION_KEY","INPUT_FILTER_POPOVER_INJECTION_KEY","INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY","__default__","DEFAULT_OFFSET","slots","useSlots","attrs","useAttrs","computedAttributes","_a","PopperContainerAriaRole","offset","inject","ariaLabelAttribute","ref","ariaLabel","title","toRefs","computedAriaLabel","useAriaLabel","isOverflowVisible","conditionalClasses","contentConditionalClasses","dismissPopover","emit","hasSlot","useHasSlot"],"mappings":";;;;;;;;;;AAUA,MAAAA,IAAAC,EAAA;AAAA,EAAA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,cAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAAC,IAAAC,EAAA,MAAA,CAAAF,EAAA,YAAA,GAGAG,IAAAD;AAAA,MAAA,MAAAF,EAAA,eAAAI,EAAA,WAAAA,EAAA;AAAA,IACA;AAGA,WAAA;AAAA;AAAA,MAAA,aAAAH;AAAA,MAEA,cAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;qBCzBAE,IAAAP,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAQ,GAAA,WAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAP,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,kBAFAE,EAAA,OAAA,EAAA,sCAAAF,EAAA,QAAA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBCzBaQ,IAAA,EAAA,GAAAC,EAAA,GCLAC,IAAA,OAAA,8BAAA,GCGAC,IAAA,OAAA,mCAAA,GCHAC,IAAA,OAAA,mCAAA,GCoTTC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArPAC,IAAA,GA4LAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GAEAC,IAAAjB,EAAA,MAAA;;AAAA;AAAA,QAA2C,KAAAkB,IAAAH,EAAA,OAAA,gBAAAG,EAAA;AAAA,QAChB,OAAAH,KAAA,gBAAAA,EAAA,UAAA,OAAA,SAAAI,EAAA;AAAA,MAC8C;AAAA,KAAA,GAGzEC,IAAAC,EAAAb,GAAAI,CAAA,GAEAU,IAAAC,EAAAR,EAAA,YAAA,CAAA,GACA,EAAA,WAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAA5B,CAAA,GACA6B,IAAAC,EAAA;AAAA,MAAuC,WAAAN,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,MAEvB,iBAAAC;AAAA,IACU,CAAA,GAGrBI,IAAAR,EAAAX,GAAA,EAAA,KAAAW,EAAAZ,GAAA,EAAA,GAIAqB,IAAA9B,EAAA,OAAA;AAAA,MAA2C,oBAAAF,EAAA,SAAA,CAAAA,EAAA;AAAA,MACG,2BAAA,CAAA,CAAAA,EAAA;AAAA,MACP,oBAAAA,EAAA,SAAA,CAAAA,EAAA;AAAA,MACO,0BAAAA,EAAA;AAAA,MACV,4BAAAA,EAAA;AAAA,MACE,+BAAAA,EAAA,mBAAA+B;AAAA,IACsB,EAAA,GAG5DE,IAAA/B,EAAA,OAAA;AAAA,MAAkD,kCAAA,CAAA,CAAAF,EAAA;AAAA,IACJ,EAAA,GAG9CkC,IAAA,MAAAC,EAAA,SAAA,GAEAC,IAAAC,EAAAtB,CAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{popper-container.DieshXa8.js → popper-container.1kHSxyxu.js}

@@ -1,6 +1,6 @@
 import { computed as R, unref as tt, ref as z, shallowRef as Zt, watch as it, getCurrentScope as te, onScopeDispose as ee, shallowReadonly as Z, defineComponent as ne, toRefs as oe } from "vue";
 import "./index.Cl4_42j5.js";
-import { B as ie } from "./focus-trap.DEHn1dxN.js";
+import { B as ie } from "./focus-trap.DiqwA-bw.js";
 import { n as re } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/popper-container.css";
 const Ht = ["top", "right", "bottom", "left"], _t = ["start", "end"], Et = /* @__PURE__ */ Ht.reduce((t, e) => t.concat(e, e + "-" + _t[0], e + "-" + _t[1]), []), nt = Math.min, G = Math.max, at = Math.round, ct = Math.floor, M = (t) => ({
@@ -1390,4 +1390,4 @@ export {
   sn as h,
   He as o
 };
-//# sourceMappingURL=popper-container.DieshXa8.js.map
+//# sourceMappingURL=popper-container.1kHSxyxu.js.map