@adyen/bento-vue3 1.89.2 → 1.90.0

package/dist/chunks/pagination.dpVc6Yt0.js

@@ -1,401 +0,0 @@
-import { defineComponent as z, computed as f, watch as H, openBlock as r, createElementBlock as P, createVNode as m, unref as e, withCtx as c, createBlock as C, resolveDynamicComponent as R, mergeProps as L, createSlots as J, createTextVNode as B, toDisplayString as S, createCommentVNode as k, createElementVNode as v, useSlots as x, useAttrs as K, ref as q, toRefs as G, normalizeClass as Q, renderSlot as X } from "vue";
-import { p as Y, B as $ } from "./typography.B3J6_tYk.js";
-import { B as V } from "./dropdown.MhmX1P9o.js";
-import { g as Z } from "./generate-uid.DBWe4g6T.js";
-import { u as A, g as E, a as W } from "./index.B875RXHM.js";
-import { _ as N } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as y } from "./button.DWF7FSIw.js";
-/* empty css              */
-import { C as ee } from "./chevron-right-small.BCinNiMt.js";
-import { u as te } from "./aria-label.CaUURpnB.js";
-import { u as ae } from "./use-has-slot.CyMiImRQ.js";
-import "../assets/pagination.css";
-const M = {
-  "de-DE": { showingItems: "{itemCount} Artikeln", showingItemsWithTotal: "{itemCount} von {totalCount} Artikeln" },
-  "en-US": { showingItems: "{itemCount} items", showingItemsWithTotal: "{itemCount} of {totalCount} items" },
-  "es-ES": { showingItems: "{itemCount} artículos", showingItemsWithTotal: "{itemCount} de {totalCount} artículos" },
-  "fr-FR": { showingItems: "{itemCount} élément(s)", showingItemsWithTotal: "{itemCount} élément(s) sur {totalCount}" },
-  "ja-JP": { showingItems: "{itemCount}件のアイテム", showingItemsWithTotal: "{itemCount}/{totalCount}件" },
-  "pt-BR": { showingItems: "{itemCount} itens", showingItemsWithTotal: "{itemCount} de {totalCount} itens" }
-}, oe = { class: "b-pagination-results-per-page" }, ne = {
-  i18n: { messages: M }
-}, ie = /* @__PURE__ */ z({
-  ...ne,
-  __name: "pagination-results-per-page",
-  props: {
-    hidePageSizeSelection: { type: Boolean, default: !1 },
-    itemsPerPage: { default: 50 },
-    totalCount: { default: null },
-    pageSizeItems: { default: () => [10, 20, 50, 75, 100] }
-  },
-  emits: ["select"],
-  setup(i, { emit: n }) {
-    const { t, n: d } = A({ messages: M }), l = i, p = n, _ = f(
-      () => Array.isArray(l.pageSizeItems) && l.pageSizeItems.every((a) => Number.isInteger(a))
-    );
-    H(
-      _,
-      (a) => {
-        a || Y("BentoPagination: pageSizeItems must be an array of integers.");
-      },
-      { immediate: !0 }
-    );
-    const T = Z("b-pagination-context-number-elements"), b = f(
-      () => l.pageSizeItems.map((a) => ({
-        label: d(a),
-        value: a
-      }))
-    ), h = W(), u = (a) => {
-      p("select", a);
-    }, s = f(() => l.totalCount ? "showingItemsWithTotal" : "showingItems");
-    return (a, g) => (r(), P("div", oe, [
-      m(e($), { el: "div" }, {
-        default: c(() => [
-          (r(), C(R(e(h)), L(e(E)(s.value), {
-            class: "b-pagination-results-per-page__dropdown-container",
-            tag: "div",
-            plural: a.totalCount
-          }), J({ _: 2 }, [
-            a.hidePageSizeSelection ? {
-              name: "itemCount",
-              fn: c(() => [
-                B(S(a.itemsPerPage), 1)
-              ]),
-              key: "0"
-            } : {
-              name: "itemCount",
-              fn: c(() => [
-                m(e(V), {
-                  id: e(T),
-                  "aria-label": e(t)(s.value, { itemCount: a.itemsPerPage, totalCount: a.totalCount }),
-                  class: "b-pagination-results-per-page__dropdown",
-                  condensed: "",
-                  items: b.value,
-                  "model-value": a.itemsPerPage,
-                  "onUpdate:modelValue": u
-                }, null, 8, ["id", "aria-label", "items", "model-value"])
-              ]),
-              key: "1"
-            },
-            a.totalCount ? {
-              name: "totalCount",
-              fn: c(() => [
-                B(S(a.totalCount), 1)
-              ]),
-              key: "2"
-            } : void 0
-          ]), 1040, ["plural"]))
-        ]),
-        _: 1
-      })
-    ]));
-  }
-}), se = /* @__PURE__ */ N(ie, [["__scopeId", "data-v-c00c04e0"]]), U = {
-  "de-DE": { pageNumber: "Seite {page}", pageNumberOfTotal: "Seite {page} von {totalPages}" },
-  "en-US": { pageNumber: "Page {page}", pageNumberOfTotal: "Page {page} of {totalPages}" },
-  "es-ES": { pageNumber: "Página {page}", pageNumberOfTotal: "Página {page} de {totalPages}" },
-  "fr-FR": { pageNumber: "Page {page}", pageNumberOfTotal: "Page {page} sur {totalPages}" },
-  "ja-JP": { pageNumber: "ページ {page}", pageNumberOfTotal: "ページ {page}/{totalPages}" },
-  "pt-BR": { pageNumber: "Página {page}", pageNumberOfTotal: "Página {page} de {totalPages}" }
-}, le = { class: "b-pagination-context" }, ge = {
-  i18n: { messages: U }
-}, re = /* @__PURE__ */ z({
-  ...ge,
-  __name: "pagination-context",
-  props: {
-    hidePageSelection: { type: Boolean, default: !1 },
-    page: { default: 1 },
-    totalPages: { default: null },
-    virtualScroll: { type: Boolean, default: !1 }
-  },
-  emits: ["page-selected"],
-  setup(i, { emit: n }) {
-    const t = i, d = n, { t: l, n: p } = A({ messages: U }), _ = Z("bento-pagination-context-current-page"), T = (g) => d("page-selected", g), b = W(), h = (g) => ({
-      label: p(g),
-      value: g
-    }), u = (g, I) => I + 1, s = f(
-      () => Array.from(new Array(t.totalPages), u).map(h)
-    ), a = f(
-      () => t.totalPages === 1 || t.hidePageSelection && t.page <= t.totalPages
-    );
-    return (g, I) => (r(), P("div", le, [
-      g.totalPages > 1 && !g.hidePageSelection ? (r(), C(e($), {
-        key: 0,
-        el: "div"
-      }, {
-        default: c(() => [
-          (r(), C(R(e(b)), L(e(E)("pageNumber"), { tag: "div" }), {
-            page: c(() => [
-              m(e(V), {
-                id: e(_),
-                "aria-label": e(l)("pageNumber", { page: e(p)(g.page) }),
-                class: "b-pagination-context__dropdown",
-                condensed: "",
-                items: s.value,
-                "model-value": g.page,
-                "virtual-scroll": g.virtualScroll,
-                "onUpdate:modelValue": T
-              }, null, 8, ["id", "aria-label", "items", "model-value", "virtual-scroll"])
-            ]),
-            _: 1
-          }, 16))
-        ]),
-        _: 1
-      })) : a.value ? (r(), C(e($), {
-        key: 1,
-        el: "span"
-      }, {
-        default: c(() => [
-          B(S(e(l)("pageNumberOfTotal", { page: e(p)(g.page), totalPages: e(p)(g.totalPages) })), 1)
-        ]),
-        _: 1
-      })) : (r(), C(e($), {
-        key: 2,
-        el: "span"
-      }, {
-        default: c(() => [
-          B(S(e(l)("pageNumber", { page: e(p)(g.page) })), 1)
-        ]),
-        _: 1
-      }))
-    ]));
-  }
-}), pe = /* @__PURE__ */ N(re, [["__scopeId", "data-v-85be3d36"]]);
-let F = 0;
-const ue = {
-  beforeCreate() {
-    this.uuid = F.toString(), F += 1;
-  }
-}, de = { key: 0 };
-function me(i, n, t, d, l, p) {
-  return r(), P("svg", L({ role: "img" }, i.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    i.$attrs["svg-title"] ? (r(), P("title", de, S(i.$attrs["svg-title"]), 1)) : k("", !0),
-    n[0] || (n[0] = v("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"
-    }, null, -1)),
-    n[1] || (n[1] = v("path", {
-      fill: "#001222",
-      d: "M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z"
-    }, null, -1))
-  ], 16);
-}
-const ce = /* @__PURE__ */ N(ue, [["render", me]]);
-let O = 0;
-const ve = {
-  beforeCreate() {
-    this.uuid = O.toString(), O += 1;
-  }
-}, he = { key: 0 };
-function fe(i, n, t, d, l, p) {
-  return r(), P("svg", L({ role: "img" }, i.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    i.$attrs["svg-title"] ? (r(), P("title", he, S(i.$attrs["svg-title"]), 1)) : k("", !0),
-    n[0] || (n[0] = v("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"
-    }, null, -1)),
-    n[1] || (n[1] = v("path", {
-      fill: "#001222",
-      d: "M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z"
-    }, null, -1))
-  ], 16);
-}
-const Pe = /* @__PURE__ */ N(ve, [["render", fe]]);
-let D = 0;
-const _e = {
-  beforeCreate() {
-    this.uuid = D.toString(), D += 1;
-  }
-}, Te = { key: 0 };
-function be(i, n, t, d, l, p) {
-  return r(), P("svg", L({ role: "img" }, i.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    i.$attrs["svg-title"] ? (r(), P("title", Te, S(i.$attrs["svg-title"]), 1)) : k("", !0),
-    n[0] || (n[0] = v("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"
-    }, null, -1))
-  ], 16);
-}
-const Ce = /* @__PURE__ */ N(_e, [["render", be]]), j = {
-  "de-DE": { navigateToTheFirstPage: "Zur ersten Seite navigieren", navigateToTheLastPage: "Zur letzten Seite navigieren", navigateToTheNextPage: "Zur nächsten Seite navigieren", navigateToThePreviousPage: "Zur vorherigen Seite navigieren" },
-  "en-US": { navigateToTheFirstPage: "Navigate to the first page", navigateToTheLastPage: "Navigate to the last page", navigateToTheNextPage: "Navigate to the next page", navigateToThePreviousPage: "Navigate to the previous page" },
-  "es-ES": { navigateToTheFirstPage: "Ir a la primera página", navigateToTheLastPage: "Ir a la última página", navigateToTheNextPage: "Ir a la página siguiente", navigateToThePreviousPage: "Ir a la página anterior" },
-  "fr-FR": { navigateToTheFirstPage: "Accéder à la première page", navigateToTheLastPage: "Accéder à la dernière page", navigateToTheNextPage: "Accéder à la page suivante", navigateToThePreviousPage: "Accéder à la page précédente" },
-  "ja-JP": { navigateToTheFirstPage: "最初のページに移動", navigateToTheLastPage: "最後のページに移動", navigateToTheNextPage: "次のページに移動", navigateToThePreviousPage: "前のページに移動" },
-  "pt-BR": { navigateToTheFirstPage: "Ir para a primeira página", navigateToTheLastPage: "Ir para a última página", navigateToTheNextPage: "Ir para a próxima página", navigateToThePreviousPage: "Ir para a página anterior" }
-}, Se = { class: "b-pagination-controls" }, Ne = { class: "b-pagination-controls__item" }, $e = { class: "b-pagination-controls__item" }, Le = { class: "b-pagination-controls__item" }, Ie = { class: "b-pagination-controls__item" }, we = {
-  i18n: { messages: j }
-}, ye = /* @__PURE__ */ z({
-  ...we,
-  __name: "pagination-controls",
-  props: {
-    hasNext: { type: Boolean, default: null },
-    page: {},
-    totalPages: { default: null }
-  },
-  emits: ["navigate"],
-  setup(i, { emit: n }) {
-    const t = i, d = n, { t: l } = A({ messages: j }), p = f(() => t.page === 1), _ = f(() => t.page === t.totalPages), T = f(() => !t.hasNext || _.value), b = f(() => {
-      const u = !t.hasNext, s = !t.totalPages;
-      return u || _.value || s;
-    }), h = (u) => {
-      d("navigate", u);
-    };
-    return (u, s) => (r(), P("ul", Se, [
-      v("li", Ne, [
-        m(e(y), {
-          disabled: p.value,
-          variant: "tertiary",
-          condensed: "",
-          onClick: s[0] || (s[0] = (a) => h(1))
-        }, {
-          iconLeft: c(() => [
-            m(e(ce), {
-              "svg-title": e(l)("navigateToTheFirstPage")
-            }, null, 8, ["svg-title"])
-          ]),
-          _: 1
-        }, 8, ["disabled"])
-      ]),
-      v("li", $e, [
-        m(e(y), {
-          disabled: p.value,
-          variant: "tertiary",
-          condensed: "",
-          onClick: s[1] || (s[1] = (a) => h(u.page - 1))
-        }, {
-          iconLeft: c(() => [
-            m(e(Ce), {
-              "svg-title": e(l)("navigateToThePreviousPage")
-            }, null, 8, ["svg-title"])
-          ]),
-          _: 1
-        }, 8, ["disabled"])
-      ]),
-      v("li", Le, [
-        m(e(y), {
-          disabled: T.value,
-          variant: "tertiary",
-          condensed: "",
-          onClick: s[2] || (s[2] = (a) => h(u.page + 1))
-        }, {
-          iconLeft: c(() => [
-            m(e(ee), {
-              "svg-title": e(l)("navigateToTheNextPage")
-            }, null, 8, ["svg-title"])
-          ]),
-          _: 1
-        }, 8, ["disabled"])
-      ]),
-      v("li", Ie, [
-        m(e(y), {
-          disabled: b.value,
-          variant: "tertiary",
-          condensed: "",
-          onClick: s[3] || (s[3] = (a) => h(u.totalPages))
-        }, {
-          iconLeft: c(() => [
-            m(e(Pe), {
-              "svg-title": e(l)("navigateToTheLastPage")
-            }, null, 8, ["svg-title"])
-          ]),
-          _: 1
-        }, 8, ["disabled"])
-      ])
-    ]));
-  }
-}), Be = /* @__PURE__ */ N(ye, [["__scopeId", "data-v-58ca56c8"]]), ze = { class: "b-pagination" }, ke = ["aria-label"], Ae = { class: "b-pagination__page-navigator" }, Fe = {}, Oe = /* @__PURE__ */ z({
-  ...Fe,
-  __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 },
-    pageSizeItems: { default: void 0 }
-  },
-  emits: ["navigate", "items-page", "update:page", "update:size"],
-  setup(i, { emit: n }) {
-    const t = i, d = n, l = x(), p = ae(l), _ = K(), T = q(_["aria-label"]), { ariaLabel: b } = G(t), h = te({
-      ariaLabel: T.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: b
-    }), u = f(
-      () => !t.totalCount || !t.size ? null : Math.ceil(t.totalCount / t.size)
-    ), s = (o, w) => {
-      t.hidePageSize ? d("navigate", o) : d("navigate", o, w ?? t?.size), d("update:page", o);
-    }, a = (o) => {
-      s(o);
-    }, g = (o) => {
-      d("items-page", o), d("update:size", o), s(1, o);
-    }, I = () => ({
-      "b-pagination__navigation--only-page-navigator": !p("default") && t.hidePageSize
-    });
-    return (o, w) => (r(), P("div", ze, [
-      v("nav", {
-        "aria-label": e(h),
-        class: Q(["b-pagination__navigation", I()])
-      }, [
-        o.hidePageSize ? e(p)("default") ? (r(), C(e($), { key: 1 }, {
-          default: c(() => [
-            X(o.$slots, "default", {}, void 0, !0)
-          ]),
-          _: 3
-        })) : k("", !0) : (r(), C(se, {
-          key: 0,
-          class: "b-pagination__results-per-page",
-          "hide-page-size-selection": o.hidePageSizeSelection,
-          "items-per-page": o.size,
-          "total-count": o.totalCount,
-          "page-size-items": o.pageSizeItems,
-          onSelect: g
-        }, null, 8, ["hide-page-size-selection", "items-per-page", "total-count", "page-size-items"])),
-        v("div", Ae, [
-          m(pe, {
-            class: "b-pagination__context",
-            "total-pages": u.value,
-            page: o.page,
-            "virtual-scroll": o.virtualScroll,
-            "hide-page-selection": o.hidePageSelection,
-            onPageSelected: a
-          }, null, 8, ["total-pages", "page", "virtual-scroll", "hide-page-selection"]),
-          w[0] || (w[0] = v("div", { class: "b-pagination__divider" }, null, -1)),
-          m(Be, {
-            class: "b-pagination__controls",
-            "has-next": o.hasNext,
-            page: o.page,
-            "total-pages": u.value,
-            onNavigate: s
-          }, null, 8, ["has-next", "page", "total-pages"])
-        ])
-      ], 10, ke)
-    ]));
-  }
-}), xe = /* @__PURE__ */ N(Oe, [["__scopeId", "data-v-416da4ed"]]);
-export {
-  xe as B
-};
-//# sourceMappingURL=pagination.dpVc6Yt0.js.map

package/dist/chunks/search-bar.CsFyP0_I.js

@@ -1,107 +0,0 @@
-import { defineComponent as A, provide as P, toRef as T, useAttrs as y, ref as p, watch as F, openBlock as N, createElementBlock as S, createVNode as n, mergeProps as U, unref as o, createSlots as g, withCtx as m, createElementVNode as L, withKeys as f } from "vue";
-import { d as k } from "./debounce.DUTu11PS.js";
-import { u as K } from "./index.B875RXHM.js";
-import { I as R } from "./dropdown.MhmX1P9o.js";
-import { B as w } from "./input-field.CfU0ZKtL.js";
-import { S as B } from "./search.ClLmZAgC.js";
-import { C as D } from "./cross-circle-fill.BWCKKn0E.js";
-import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/search-bar.css";
-var b = /* @__PURE__ */ ((e) => (e.CLEAR = "clear", e.ESCAPE = "escape-pressed", e.INPUT = "input", e.UPDATE = "update:search-term", e))(b || {}), $ = /* @__PURE__ */ ((e) => (e.CLEAR = "search-clear", e.INPUT = "search-input", e.UPDATE = "update:search-term", e))($ || {});
-const h = {
-  "en-US": { clearSearch: "Clear search", search: "Search" },
-  "ja-JP": { clearSearch: "検索をクリア", search: "検索" },
-  "pt-BR": { clearSearch: "Limpar busca", search: "Buscar" }
-}, x = { class: "b-search-bar" }, J = {
-  i18n: { messages: h }
-}, j = /* @__PURE__ */ A({
-  ...J,
-  __name: "search-bar",
-  props: {
-    inputFieldAriaLabel: {},
-    condensed: { type: Boolean, default: !1 },
-    debounceTime: { default: 300 },
-    disabled: { type: Boolean, default: !1 },
-    hint: { default: "" },
-    placeholder: { default: "" },
-    value: { default: void 0 }
-  },
-  emits: ["input", "clear", "escape-pressed", "blur", "focus"],
-  setup(e, { expose: v, emit: _ }) {
-    const { t: d } = K({ messages: h }), l = e, a = _;
-    P(R, T(l, "hint"));
-    const I = y(), s = p(l.value), i = p();
-    F(
-      () => l.value,
-      () => {
-        s.value = l.value;
-      },
-      { immediate: !0 }
-    );
-    const c = () => {
-      s.value = "", a("clear"), a("input", "");
-    }, C = k(() => {
-      a("input", s.value);
-    }, l.debounceTime), E = (r) => {
-      s.value = r, C();
-    };
-    return v({
-      /**
-       * Focus on the input field when called.
-       */
-      focus: () => {
-        i.value.focusInput();
-      }
-    }), (r, t) => (N(), S("div", x, [
-      n(w, U({
-        ref_key: "bentoInputField",
-        ref: i
-      }, o(I), {
-        "model-value": s.value,
-        type: "search",
-        condensed: r.condensed,
-        "aria-label": r.inputFieldAriaLabel,
-        "aria-hidden": !1,
-        disabled: r.disabled,
-        placeholder: r.placeholder,
-        "onUpdate:modelValue": E,
-        onFocus: t[0] || (t[0] = (u) => a("focus")),
-        onBlur: t[1] || (t[1] = (u) => a("blur")),
-        onEscapePressed: t[2] || (t[2] = (u) => a(o(b).ESCAPE))
-      }), g({
-        iconBefore: m(() => [
-          n(o(B), {
-            "svg-title": o(d)("search"),
-            "aria-hidden": "true"
-          }, null, 8, ["svg-title"])
-        ]),
-        _: 2
-      }, [
-        s.value ? {
-          name: "iconAfter",
-          fn: m(() => [
-            L("div", {
-              class: "b-search-bar__clear-search",
-              tabindex: "0",
-              "data-testid": "b-search-bar-clear-search-button",
-              onClick: c,
-              onKeypress: f(c, ["enter"]),
-              onKeyup: f(c, ["space"])
-            }, [
-              n(o(D), {
-                "svg-title": o(d)("clearSearch")
-              }, null, 8, ["svg-title"])
-            ], 32)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["model-value", "condensed", "aria-label", "disabled", "placeholder"])
-    ]));
-  }
-}), X = /* @__PURE__ */ V(j, [["__scopeId", "data-v-1e808071"]]);
-export {
-  X as B,
-  $ as a,
-  b
-};
-//# sourceMappingURL=search-bar.CsFyP0_I.js.map

package/dist/chunks/secondary-nav.CLBdq98c.js

@@ -1,138 +0,0 @@
-import { defineComponent as g, inject as E, computed as u, openBlock as a, createElementBlock as o, normalizeClass as L, createVNode as f, unref as t, withCtx as I, createTextVNode as w, toDisplayString as V, createElementVNode as j, Fragment as B, renderList as A, ref as M, readonly as O, watch as T, provide as x, createBlock as y } from "vue";
-import { B as F } from "./dropdown.MhmX1P9o.js";
-import { j as R } from "./index.DDwcHPb6.js";
-import { u as U } from "./index.B875RXHM.js";
-import { a as q } from "./es6.C1DXQV6f.js";
-import { B as N } from "./typography.B3J6_tYk.js";
-import { _ as h } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/secondary-nav.css";
-const S = /* @__PURE__ */ Symbol("secondary nav state"), z = ["aria-current"], J = {}, P = /* @__PURE__ */ g({
-  ...J,
-  __name: "secondary-nav-item",
-  props: {
-    label: {},
-    value: {}
-  },
-  emits: ["click"],
-  setup(m, { emit: s }) {
-    const { activeItemValue: d, updateActiveItemValue: n } = E(S), v = m, l = u(() => d.value === v.value), p = u(() => ({
-      "b-secondary-nav-item--active": l.value
-    })), b = s, _ = (c) => {
-      b("click", c), n(v.value);
-    };
-    return (c, i) => (a(), o("button", {
-      class: L(["b-secondary-nav-item", p.value]),
-      "aria-current": l.value ? "page" : void 0,
-      onClick: _
-    }, [
-      f(t(N), {
-        class: "b-secondary-nav-item__title",
-        variant: "body",
-        stronger: ""
-      }, {
-        default: I(() => [
-          w(V(c.label), 1)
-        ]),
-        _: 1
-      })
-    ], 10, z));
-  }
-}), C = /* @__PURE__ */ h(P, [["__scopeId", "data-v-e693bf7c"]]), Q = ["aria-label"], Y = { class: "b-secondary-nav__list" }, G = {}, H = /* @__PURE__ */ g({
-  ...G,
-  __name: "secondary-nav-category",
-  props: {
-    label: {},
-    items: {}
-  },
-  setup(m) {
-    return (s, d) => (a(), o("section", {
-      class: "b-secondary-nav-category",
-      "aria-label": s.label
-    }, [
-      f(t(N), {
-        el: "h1",
-        class: "b-secondary-nav-category__label",
-        variant: "caption",
-        stronger: ""
-      }, {
-        default: I(() => [
-          w(V(s.label), 1)
-        ]),
-        _: 1
-      }),
-      j("ul", Y, [
-        (a(!0), o(B, null, A(s.items, (n) => (a(), o("li", {
-          key: n.value
-        }, [
-          f(t(C), {
-            label: n.label,
-            value: n.value
-          }, null, 8, ["label", "value"])
-        ]))), 128))
-      ])
-    ], 8, Q));
-  }
-}), K = /* @__PURE__ */ h(H, [["__scopeId", "data-v-2e57c7c0"]]), D = {
-  "en-US": { mobileDropdownAriaLabel: "Navigation options dropdown" },
-  "ja-JP": { mobileDropdownAriaLabel: "ナビゲーションオプションのドロップダウン" },
-  "pt-BR": { mobileDropdownAriaLabel: "Menu suspenso de opções de navegação" }
-}, W = { class: "b-secondary-nav" }, X = {
-  key: 1,
-  class: "b-secondary-nav__list"
-}, Z = {
-  i18n: { messages: D }
-}, ee = /* @__PURE__ */ g({
-  ...Z,
-  __name: "secondary-nav",
-  props: {
-    items: {},
-    value: {}
-  },
-  emits: ["change"],
-  setup(m, { emit: s }) {
-    const { t: d } = U({ messages: D }), v = R({
-      s: q
-    }).smallerOrEqual("s"), l = m, p = s, b = u(() => l.items.some((e) => Object.hasOwn(e, "items"))), _ = u(() => l.items), c = u(() => {
-      const e = _.value[0];
-      return "items" in e ? e.items[0].value : e.value;
-    }), i = M(l.value ?? c.value), k = (e) => {
-      i.value = e, p("change", e);
-    }, $ = {
-      activeItemValue: O(i),
-      updateActiveItemValue: k
-    };
-    return T(
-      () => l.value,
-      (e) => {
-        i.value = e;
-      }
-    ), x(S, $), (e, ae) => (a(), o("nav", W, [
-      t(v) ? (a(), y(t(F), {
-        key: 0,
-        "aria-label": t(d)("mobileDropdownAriaLabel"),
-        items: _.value,
-        "static-categories": b.value,
-        "model-value": i.value,
-        "onUpdate:modelValue": k
-      }, null, 8, ["aria-label", "items", "static-categories", "model-value"])) : (a(), o("ul", X, [
-        (a(!0), o(B, null, A(e.items, (r) => (a(), o("li", {
-          key: r.label
-        }, [
-          "items" in r ? (a(), y(t(K), {
-            key: 0,
-            label: r.label,
-            items: r.items
-          }, null, 8, ["label", "items"])) : (a(), y(t(C), {
-            key: 1,
-            label: r.label,
-            value: r.value
-          }, null, 8, ["label", "value"]))
-        ]))), 128))
-      ]))
-    ]));
-  }
-}), ie = /* @__PURE__ */ h(ee, [["__scopeId", "data-v-7cc545aa"]]);
-export {
-  ie as s
-};
-//# sourceMappingURL=secondary-nav.CLBdq98c.js.map

package/dist/chunks/secondary-nav.CLBdq98c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"secondary-nav.CLBdq98c.js","sources":["../../../vue2/src/components/secondary-nav/secondary-nav.keys.ts","../../../vue2/src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../../vue2/src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../../vue2/src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { type InjectionKey } from 'vue';\nimport { type BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button\n        class=\"b-secondary-nav-item\"\n        :class=\"conditionalClasses\"\n        :aria-current=\"isItemSelected ? 'page' : undefined\"\n        @click=\"onClick\"\n    >\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': isItemSelected.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: Array<BentoSecondaryNavItemsItem>;\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :model-value=\"activeItemValue\"\n            @update:model-value=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { type BentoSecondaryNavItems, type BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoListboxOptions } from '@/types/listbox';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","props","__props","isItemSelected","computed","conditionalClasses","emit","__emit","onClick","e","__default__$1","__default__","messages","t","useI18n","isMobile","useBreakpoints","BMediaQuerySMax","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGO,MAAAA,IAAA,uBAAA,qBAAA,yBCmDHC,IAAA,CAAA;;;;;;;;;AApCA,UAAA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,GAWAC,IAAAC,EAAA,MAAAN,EAAA,UAAAG,EAAA,KAAA,GAEAI,IAAAD,EAAA,OAAA;AAAA,MAA2C,gCAAAD,EAAA;AAAA,IACQ,EAAA,GAGnDG,IAAAC,GAOAC,IAAA,CAAAC,MAAA;AACI,MAAAH,EAAA,SAAAG,CAAA,GACAV,EAAAE,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;;;;;8HCZrCS,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsFAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;AAvFA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAMAG,IAJAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,EAGP,eAAA,GAAA,GACAhB,IAAAC,GAaAI,IAAAC,GAOAW,IAAAd,EAAA,MAAAH,EAAA,MAAA,KAAA,CAAAkB,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAhB,EAAA,MAAAH,EAAA,KAAA,GAEAoB,IAAAjB,EAAA,MAAA;AACI,YAAAkB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJxB,IAAAyB,EAAAtB,EAAA,SAAAoB,EAAA,KAAA,GACAtB,IAAA,CAAAyB,MAAA;AACI,MAAA1B,EAAA,QAAA0B,GACAlB,EAAA,UAAAkB,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAA5B,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAA4B;AAAA,MAAA,MAAA1B,EAAA;AAAA,MACgB,CAAAuB,MAAA;AAER,QAAA1B,EAAA,QAAA0B;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAAhC,GAAA6B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}