@adyen/bento-vue2 1.0.0 → 1.1.0

package/dist/chunks/listbox.13cefddb.js

@@ -1,849 +0,0 @@
-import { computed as u, defineComponent as N, ref as D, watch as Q, onMounted as ee, toRef as te } from "vue";
-import { B as M, c as P } from "./index.3aedb3dd.js";
-import { BentoLoadingIndicator as se } from "../loading-indicator.js";
-import { a as le } from "./button.98f2271d.js";
-import { u as V } from "./i18n.36074534.js";
-import { B, a as ne, d as oe } from "./debounce.f8d92e44.js";
-import { n as T } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as H } from "./checkbox.e8292504.js";
-import { C as ie, a as ae } from "./chevron-up.5b117675.js";
-import { B as ce, a as z } from "./loading-button.d77079fe.js";
-import "../assets/listbox.css";
-const Z = (t, e, s, l) => {
-  const n = u(
-    () => {
-      var f, d;
-      return !!((f = t.value) != null && f.length) && ((d = t.value) == null ? void 0 : d.length) === e.value.length;
-    }
-  ), o = u(() => {
-    var f;
-    return t.value == null || t.value.length === 0 ? !1 : ((f = t.value) == null ? void 0 : f.length) !== e.value.length;
-  });
-  return {
-    isAllSelected: n,
-    isIndeterminate: o,
-    toggleSelectAll: (f) => {
-      f ? s() : l();
-    }
-  };
-};
-var _ = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(_ || {}), k = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(k || {});
-const re = N({
-  name: "bento-listbox-option",
-  props: {
-    /**
-     * Setting this property to true will disable the option.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Indicates if the value is selected. Only one element can be selected at a time.
-     */
-    selected: { type: Boolean, default: !1 }
-  },
-  emits: [_.CLICK, _.ENTER, _.SPACE, _.TAB],
-  setup(t, { emit: e }) {
-    const s = u(() => ({
-      "b-listbox-option--disabled": t.disabled,
-      "b-listbox-option--selected": t.selected
-    }));
-    return {
-      // Enums
-      BentoKeyboardNavigationKeyDownEvent: B,
-      BentoListboxEvent: _,
-      // Values
-      conditionalClasses: s,
-      // Events
-      onClick: (o) => {
-        e(_.CLICK, o);
-      },
-      onOptionSelected: (o, b) => {
-        e(o, b);
-      }
-    };
-  }
-});
-var ue = function() {
-  var e = this, s = e._self._c;
-  return e._self._setupProxy, s("label", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, l);
-  }, function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, l);
-  }, function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "tab", 9, l.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, l);
-  }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, de = [], _e = /* @__PURE__ */ T(
-  re,
-  ue,
-  de,
-  !1,
-  null,
-  "d7fb415c",
-  null,
-  null
-);
-const K = _e.exports;
-let q = 0;
-const be = {
-  beforeCreate() {
-    this.uuid = q.toString(), q += 1;
-  }
-};
-var me = function() {
-  var e = this, s = e._self._c;
-  return s("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z", "clip-rule": "evenodd" } })]);
-}, ve = [], fe = /* @__PURE__ */ T(
-  be,
-  me,
-  ve,
-  !1,
-  null,
-  "4687fbd0",
-  null,
-  null
-);
-const ge = fe.exports, ye = N({
-  name: "bento-listbox-single-select-option",
-  components: {
-    BentoListboxOption: K,
-    BentoTypography: M,
-    CheckmarkIcon: ge
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Setting this property to true will disable the option.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * The option item that contains all the option item's data.
-     * @type {BentoListboxOptionItem}
-     */
-    option: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * Indicates if the value is selected. Only one element can be selected at a time.
-     */
-    selected: { type: Boolean, default: !1 }
-  },
-  emits: [_.ENTER, _.SELECT, _.SPACE, _.TAB],
-  setup(t, { emit: e }) {
-    const s = (b) => {
-      t.disabled || e(b, t.option.value);
-    }, l = u(() => t.disabled ? !0 : null), n = u(() => t.selected ? !0 : null), o = u(() => t.disabled ? -1 : 0);
-    return {
-      // Values
-      ariaDisabled: l,
-      ariaSelected: n,
-      tabIndex: o,
-      // Enums
-      BentoTypographyElement: P,
-      BentoListboxEvent: _,
-      // Events
-      onOptionSelected: s
-    };
-  }
-});
-var pe = function() {
-  var e = this, s = e._self._c;
-  return e._self._setupProxy, s("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: e._d({ click: function(l) {
-    return e.onOptionSelected(e.BentoListboxEvent.SELECT);
-  } }, [e.BentoListboxEvent.ENTER, function(l) {
-    return e.onOptionSelected(e.BentoListboxEvent.ENTER);
-  }, e.BentoListboxEvent.SPACE, function(l) {
-    return e.onOptionSelected(e.BentoListboxEvent.SPACE);
-  }, e.BentoListboxEvent.TAB, function(l) {
-    return e.onOptionSelected(e.BentoListboxEvent.TAB);
-  }]) }, [e._t("default", function() {
-    return [s("span", { staticClass: "b-listbox-single-select-option__text" }, [s("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(e.option.label))]), e.option.description ? s("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
-  }, null, e.option), s("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [s("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, Se = [], he = /* @__PURE__ */ T(
-  ye,
-  pe,
-  Se,
-  !1,
-  null,
-  "a0a393c6",
-  null,
-  null
-);
-const Ce = he.exports;
-var J = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t))(J || {}), R = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(R || {});
-const Ee = {
-  "en-US": {
-    categoryClosed: "{category} closed",
-    categoryOpened: "{category} opened"
-  }
-}, xe = N({
-  i18n: { messages: Ee },
-  name: "bento-listbox-multi-select-category",
-  components: {
-    BentoCheckbox: H,
-    BentoTypography: M,
-    BentoListboxOption: K,
-    ChevronDownIcon: ie,
-    ChevronUpIcon: ae
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * The option elements to populate the listbox with.
-     * It must be an array of {@see BentoListboxOptionItem }.
-     *
-     * @property {string} value.label - Text to be displayed in the option
-     * @property {string,number} value.value - Value of the option
-     * @property {BentoListboxOptionItem} value.items - Category items list
-     */
-    category: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * Function that allows the options to be disabled
-     *
-     * @type {BentoListboxIsOptionDisabled}
-     * @param {BentoListboxOptionItem} option - listbox option object
-     * @param {string} option.label - Option's label text
-     * @param {string|number} option.value - Option's value
-     * @param {unknown} option.data - Option's extra data to be passed to the default slot
-     */
-    isOptionDisabled: {
-      type: [Function],
-      default: () => !1
-    },
-    /**
-     * The `input` value.
-     * Providing an empty array will select no options.
-     */
-    selectedItemsList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: [R.SELECT_CATEGORY, R.UNSELECT_CATEGORY],
-  setup(t, { emit: e }) {
-    const s = D(!1), { t: l } = V(), n = u(
-      () => t.category.items.every((g) => t.isOptionDisabled(g))
-    ), o = u(() => ({
-      [`b-listbox-multi-select-category--${J.DISABLED}`]: n.value
-    })), b = (g) => {
-      g.preventDefault(), s.value = !s.value;
-    }, f = (g) => {
-      var E;
-      const c = t.isOptionDisabled(g), y = ((E = t.selectedItemsList) == null ? void 0 : E.includes(g.value)) || !1;
-      return { isDisabled: c, isPreSelected: y };
-    }, d = u(
-      () => t.category.items.filter((g) => {
-        const { isDisabled: c, isPreSelected: y } = f(g);
-        return c && y || !c;
-      })
-    ), v = u(
-      () => {
-        var g;
-        return (g = d.value) == null ? void 0 : g.filter(
-          ({ value: c }) => {
-            var y;
-            return (y = t.selectedItemsList) == null ? void 0 : y.includes(c);
-          }
-        );
-      }
-    ), S = u(() => {
-      const g = s.value ? "categoryOpened" : "categoryClosed";
-      return l(g, { category: t.category.label });
-    }), h = () => {
-      e(R.SELECT_CATEGORY);
-    }, C = () => {
-      e(R.UNSELECT_CATEGORY);
-    }, { isAllSelected: O, isIndeterminate: A, toggleSelectAll: L } = Z(
-      v,
-      d,
-      h,
-      C
-    );
-    return {
-      // Values
-      chevronTitle: S,
-      conditionalClass: o,
-      hasAllPropsDisabled: n,
-      isOpen: s,
-      isAllSelected: O,
-      isIndeterminate: A,
-      // Enums
-      BentoTypographyElement: P,
-      // Methods
-      toggleOpen: b,
-      toggleSelectAll: L
-    };
-  }
-});
-var Oe = function() {
-  var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [s("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.category.label) + " ")]), s("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(l) {
-    return e.toggleOpen.apply(null, arguments);
-  } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen, expression: "isOpen" }] }, [e._t("default")], 2)], 1);
-}, Te = [], Ae = /* @__PURE__ */ T(
-  xe,
-  Oe,
-  Te,
-  !1,
-  null,
-  "2897e5f7",
-  null,
-  null
-);
-const Le = Ae.exports;
-var x = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(x || {});
-const Ie = N({
-  name: "listbox-multi-select-options",
-  components: {
-    BentoCheckbox: H,
-    BentoListboxOption: K,
-    BentoTypography: M,
-    ListboxMultiSelectCategory: Le
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Indicates if the items listed are inside a category
-     * so they can be padded to right by one level in recursion.
-     * Items of categories are automatically defined as "categoryItems"
-     */
-    categoryItems: { type: Boolean, default: !1 },
-    /**
-     * Function that allows the options to be disabled
-     *
-     * @type {BentoListboxIsOptionDisabled}
-     * @param {BentoListboxOptionItem} option - listbox option object
-     * @param {string} option.label - Option's label text
-     * @param {string|number} option.value - Option's value
-     * @param {unknown} option.data - Option's extra data to be passed to the default slot
-     */
-    isOptionDisabled: {
-      type: Function,
-      default: () => !1
-    },
-    /**
-     * The option elements to populate the listbox with.
-     * It must be an array of {@see BentoListboxOptionItem }.
-     *
-     * @property {string} value.label - Text to be displayed in the option
-     * @property {string,number} value.value - Value of the option
-     */
-    items: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * Indicates if the elements options are inside a multi-level category
-     */
-    isMultiLevel: { type: Boolean, default: !1 },
-    /**
-     * Flag that indicates that an external search it's being made
-     * to filter out the items inside the the multi-select listbox
-     *
-     * If enabled, hides the "Select all" checkbox in "multiple" mode.
-     */
-    searching: { type: Boolean, default: !1 },
-    /**
-     * List of selected items.
-     * Providing an empty array will select no options.
-     */
-    selectedItemsList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: [
-    x.TOGGLE_CHECKBOX_SELECTION,
-    x.SELECT_CATEGORY,
-    x.UNSELECT_CATEGORY
-  ],
-  setup(t, { emit: e }) {
-    const s = (d) => e(x.TOGGLE_CHECKBOX_SELECTION, d), l = (d) => !!d.items, n = (d) => {
-      const v = t.isMultiLevel && t.searching;
-      return d.description && (!t.isMultiLevel || v);
-    }, o = (d) => d.items ? !!d.items.find((v) => t.selectedItemsList.includes(v.value)) : t.selectedItemsList.includes(d.value), b = (d, v) => {
-      if (l(v))
-        return e(d ? x.SELECT_CATEGORY : x.UNSELECT_CATEGORY, v);
-      s(v.value);
-    };
-    return {
-      // Values
-      conditionalClasses: u(() => ({
-        "b-listbox-multi-select-options__category-option": t.categoryItems
-      })),
-      // Methods
-      isCategory: l,
-      isOptionSelected: o,
-      shouldShowDescription: n,
-      toggleCheckboxSelection: s,
-      selectSearch: b,
-      // Enums
-      BentoTypographyElement: P,
-      ListboxMultiSelectOptionsEvent: x
-    };
-  }
-});
-var Be = function() {
-  var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", e._l(e.items, function(l) {
-    return s("div", { key: `selected-${l.value}` }, [e.searching && e.isMultiLevel ? [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [s("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(l), "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { "update:model-value": (n) => e.selectSearch(n, l) } }), e._t("default", function() {
-      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
-    }, null, l)], 2)] : [l.items ? [s("listbox-multi-select-category", { attrs: { category: l, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "select-category": function(n) {
-      return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l);
-    }, "unselect-category": function(n) {
-      return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l);
-    } } }, [s("listbox-multi-select-options", { attrs: { "category-items": "", items: l.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevel, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 1)] : s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [s("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { "update:model-value": function(n) {
-      return e.toggleCheckboxSelection(l.value);
-    } } }), e._t("default", function() {
-      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
-    }, null, l)], 2)]], 2);
-  }), 0);
-}, ke = [], De = /* @__PURE__ */ T(
-  Ie,
-  Be,
-  ke,
-  !1,
-  null,
-  "4db1d196",
-  null,
-  null
-);
-const Ne = De.exports, W = {
-  "en-US": {
-    allSelected: "All selected ({total})",
-    numberOfTotalSelected: "{number} of {total} selected",
-    selectAll: "Select all ({total})"
-  }
-};
-var w = /* @__PURE__ */ ((t) => (t.SELECT = "select", t))(w || {});
-const Re = N({
-  i18n: { messages: W },
-  name: "bento-listbox-multi-select",
-  components: {
-    BentoCheckbox: H,
-    BentoListboxOption: K,
-    BentoTypography: M,
-    ListboxMultiSelectOptions: Ne
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Function that allows the options to be disabled
-     *
-     * @type {BentoListboxIsOptionDisabled}
-     * @param {BentoListboxOptionItem} option - listbox option object
-     * @param {string} option.label - Option's label text
-     * @param {string|number} option.value - Option's value
-     * @param {unknown} option.data - Option's extra data to be passed to the default slot
-     */
-    isOptionDisabled: {
-      type: Function,
-      default: () => !1
-    },
-    /**
-     * The option elements to populate the listbox with.
-     * It must be an array of {@see BentoListboxOptionItem }.
-     *
-     * @property {string} value.label - Text to be displayed in the option
-     * @property {string,number} value.value - Value of the option
-     */
-    items: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * Flag that indicates that an external search it's being made
-     * to filter out the items inside the the multi-select listbox
-     *
-     * If enabled, hides the "Select all" checkbox in "multiple" mode.
-     */
-    searching: { type: Boolean, default: !1 },
-    /**
-     * The `input` value.
-     * Providing an empty array will select no options.
-     */
-    selectedValues: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: [w.SELECT],
-  setup(t, { emit: e, slots: s }) {
-    const { t: l } = V({ messages: W }), n = D();
-    Q(
-      () => t.selectedValues,
-      () => {
-        n.value = [...t.selectedValues ?? []];
-      },
-      {
-        immediate: !0
-      }
-    );
-    const o = u(() => !!t.items.find(({ items: i }) => !!i)), b = u(() => o.value ? t.items.reduce((i, r) => (r.items ? i.push(...r.items.flat()) : i.push(r), i), []) : t.items), f = (i) => {
-      var a;
-      const r = t.isOptionDisabled(i), m = ((a = n.value) == null ? void 0 : a.includes(i.value)) || !1;
-      return { isDisabled: r, isPreSelected: m };
-    }, d = u(
-      () => t.searching && o ? t.items : b.value.filter((i) => {
-        const { isDisabled: r, isPreSelected: m } = f(i);
-        return r && m || !r;
-      })
-    ), v = u(
-      () => {
-        var i;
-        return (i = d.value) == null ? void 0 : i.filter((r) => {
-          var m;
-          return r.items && o.value && t.searching ? r.items.filter(
-            (p) => (t.selectedValues ?? []).includes(
-              p.value
-            )
-          ).length === r.items.length : (m = n.value) == null ? void 0 : m.includes(r.value);
-        });
-      }
-    ), S = () => o.value && !t.searching ? d.value.length : t.items.length, h = u(() => {
-      var m;
-      const i = S(), r = ((m = v.value) == null ? void 0 : m.length) || 0;
-      return r === 0 ? l("selectAll", { total: i }) : r === i ? l("allSelected", { total: i }) : l("numberOfTotalSelected", { number: r, total: i });
-    }), C = (i) => {
-      const r = (a) => {
-        const { isDisabled: p, isPreSelected: Y } = f(a);
-        return p && Y || !p;
-      }, m = i.filter(r).filter((a) => !n.value.includes(a.value)).map(({ value: a }) => a);
-      n.value = [...n.value, ...m], e(w.SELECT, n.value);
-    }, O = (i) => {
-      const r = (a) => {
-        const { isDisabled: p, isPreSelected: Y } = f(a);
-        return !(p && Y);
-      }, m = i.filter(r).map(({ value: a }) => a);
-      n.value = n.value.filter((a) => !(m != null && m.includes(a))), e(w.SELECT, n.value);
-    }, A = () => {
-      C(b.value);
-    }, L = () => {
-      O(b.value);
-    }, { isAllSelected: g, isIndeterminate: c, toggleSelectAll: y } = Z(
-      v,
-      d,
-      A,
-      L
-    ), E = (i) => {
-      C(i.items);
-    }, I = (i) => {
-      O(i.items);
-    }, $ = (i) => {
-      let r = !1;
-      n.value = n.value.filter((m) => i === m ? (r = !0, !1) : !0), r || n.value.push(i), e(w.SELECT, n.value);
-    }, G = u(() => {
-      const i = (a) => n.value.includes(a.value), r = (a) => !!a.find((p) => i(p));
-      return t.items.filter((a) => a.items && r(a.items) ? !0 : i(a));
-    }), U = u(() => {
-      var i;
-      return ((i = G.value) == null ? void 0 : i.length) > 0;
-    }), F = u(
-      () => {
-        var i, r;
-        return ((i = v.value) == null ? void 0 : i.length) === ((r = b.value) == null ? void 0 : r.length);
-      }
-    );
-    return {
-      // Values
-      isAllSelected: g,
-      isAllItemsIncludingDisabled: F,
-      isAnOptionSelected: U,
-      isIndeterminate: c,
-      isMultiLevelSelect: o,
-      flattenedItemsList: b,
-      selectedItemsList: n,
-      selectAllCheckboxText: h,
-      selectedOptions: G,
-      slots: s,
-      // Enums
-      BentoTypographyElement: P,
-      // Methods
-      selectAllCategory: E,
-      toggleCheckboxSelection: $,
-      toggleSelectAll: y,
-      unselectAllCategory: I
-    };
-  }
-});
-var we = function() {
-  var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", { staticClass: "b-listbox-multi-select" }, [s("bento-listbox-option", { staticClass: "b-listbox-multi-select__option" }, [s("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), s("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? s("div", [s("hr", { staticClass: "b-listbox-multi-select__divider" }), s("listbox-multi-select-options", { attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: { "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory, "toggle-checkbox-selection": e.toggleCheckboxSelection }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
-    return { key: n, fn: function(o) {
-      return [e._t(n, null, null, o)];
-    } };
-  })], null, !0) })], 1) : e._e(), s("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isAllItemsIncludingDisabled, expression: "!isAllItemsIncludingDisabled" }] }, [s("hr", { staticClass: "b-listbox-multi-select__divider" }), s("listbox-multi-select-options", { attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: { "toggle-checkbox-selection": e.toggleCheckboxSelection, "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
-    return { key: n, fn: function(o) {
-      return [e._t(n, null, null, o)];
-    } };
-  })], null, !0) })], 1)], 1);
-}, Me = [], Pe = /* @__PURE__ */ T(
-  Re,
-  we,
-  Me,
-  !1,
-  null,
-  "c1a87cc1",
-  null,
-  null
-);
-const X = Pe.exports, $e = ({ items: t, isOptionDisabled: e }, s, l) => {
-  const n = D(t.value.length - 1), o = D(0);
-  ee(() => {
-    e && (o.value = t.value.findIndex((c) => !e(c)));
-  });
-  const b = (c) => !e || !!e && e(t.value[c]), f = (c) => !e || !!e && !e(t.value[c]), d = (c) => {
-    switch (c) {
-      case "increase":
-        o.value += 1;
-        break;
-      case "decrease":
-        o.value -= 1;
-        break;
-    }
-  }, v = ({ edgeCaseItem: c, isItemBeforeEdgeCaseItem: y }, E, I) => {
-    o.value !== c && (y ? f(c) && d(I) : (d(I), b(o.value) && E()), s(o.value));
-  }, S = () => {
-    const c = o.value === n.value - 1;
-    v(
-      {
-        isItemBeforeEdgeCaseItem: c,
-        edgeCaseItem: n.value
-      },
-      S,
-      "increase"
-      /* INCREASE */
-    );
-  }, h = () => {
-    const c = o.value === 1;
-    v(
-      {
-        edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: c
-      },
-      h,
-      "decrease"
-      /* DECREASE */
-    );
-  };
-  return {
-    moveToFirstElement: () => {
-      o.value = 0, b(o.value) ? S() : s(o.value);
-    },
-    moveToLastElement: () => {
-      o.value = n.value, b(o.value) ? h() : s(o.value);
-    },
-    moveToNextElement: S,
-    moveToPreviousElement: h,
-    onTabKey: (c) => {
-      l(_.TAB, c);
-    },
-    onSpaceKey: (c) => {
-      l(_.SPACE, c);
-    },
-    onEnterKey: (c) => {
-      l(_.ENTER, c);
-    }
-  };
-}, j = {
-  "en-US": {
-    showMore: "Show more",
-    loading: "Loading"
-  }
-}, Ge = N({
-  name: "bento-listbox",
-  components: {
-    BentoListboxSingleSelectOption: Ce,
-    BentoListboxMultiSelect: X,
-    BentoTypography: M,
-    BentoLoadingIndicator: se,
-    BentoLoadingButton: ce
-  },
-  directives: { BentoKeyboardNavigationDirective: ne },
-  i18n: { messages: j },
-  props: {
-    /**
-     * Defines a string value that labels an interactive element.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Indicates whether there are more items to load
-     */
-    hasMoreItems: { type: Boolean, default: !1 },
-    /**
-     *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.
-     */
-    id: { type: String, required: !0 },
-    /**
-     * Function that allows the options to be disabled
-     *
-     * @type {BentoListboxIsOptionDisabled}
-     * @param {BentoListboxOptionItem} option - Listbox option object
-     * @param {string} option.label - Option's label text
-     * @param {string|number} option.value - Option's value
-     * @param {unknown} option.data - Option's extra data to be passed to the default slot
-     */
-    isOptionDisabled: {
-      type: Function,
-      default: () => {
-      }
-    },
-    /**
-     * The option elements to populate the listbox with.
-     * It must be an array of {@see BentoListboxOptionItem }
-     *  * @property {string} value.label - Text to be displayed in the option
-     *  * @property {string,number} value.value - Value of the option
-     */
-    items: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * Indicates if new options are loading.
-     */
-    loading: { type: Boolean, default: !1 },
-    /**
-     * The type of `Lazy Load`.
-     * Type "automatic" will enable infinite scrolling
-     * Type "button" will enable lazy loading with "Show more" button
-     */
-    lazyLoadType: {
-      type: String,
-      default: k.NONE
-    },
-    /**
-     * If enabled, the user will be able to select multiple items.
-     */
-    multiple: { type: Boolean, default: !1 },
-    /**
-     * Messaged displayed when no items are listed in the listbox
-     */
-    noResultsMessage: { type: String, required: !0 },
-    /**
-     * Flag that indicates that an external search it's being made
-     * to filter out the items inside the the multi-select listbox
-     *
-     * If enabled, hides the "Select all" checkbox in "multiple" mode.
-     */
-    searching: X.props.searching,
-    /**
-     * The `input` value.
-     * Providing an empty string or empty array will select no options.
-     * Set to an empty string `''` if you don't want any of the available options to be selected for single select
-     */
-    selectedValue: {
-      type: [String, Number, Array],
-      default: void 0
-    }
-  },
-  emits: [_.SELECT, _.SHOW_MORE, _.ESCAPE, _.TAB],
-  setup(t, { emit: e, slots: s }) {
-    const { t: l } = V({ messages: j }), n = D(null), o = D([]), b = u(() => t.lazyLoadType !== k.AUTOMATIC), f = u(() => t.lazyLoadType === k.AUTOMATIC), d = u(
-      () => b.value ? "true" : void 0
-    ), v = u(
-      () => b.value && t.loading ? "true" : "false"
-    ), S = u(
-      () => b.value ? "polite" : void 0
-    ), h = (a) => {
-      e(_.SELECT, a);
-    }, C = () => {
-      e(_.SHOW_MORE);
-    }, O = oe(() => {
-      const a = n.value, p = a.scrollTop + a.clientHeight >= a.scrollHeight;
-      t.hasMoreItems && p && !t.loading && C();
-    }), A = u(() => {
-      var a;
-      return t.searching && ((a = t.items) == null ? void 0 : a.length) === 0;
-    }), L = u(
-      () => t.lazyLoadType === k.BUTTON && t.hasMoreItems
-    ), g = u(
-      () => t.loading ? z.LOADING : z.START
-    ), c = u(() => t.loading ? l("loading") : l("showMore")), y = (a) => t.multiple ? null : o.value[a].$el.focus(), {
-      moveToNextElement: E,
-      moveToPreviousElement: I,
-      moveToFirstElement: $,
-      moveToLastElement: G,
-      onTabKey: U,
-      onSpaceKey: F,
-      onEnterKey: i
-    } = $e(
-      {
-        items: te(t, "items"),
-        isOptionDisabled: t.isOptionDisabled
-      },
-      y,
-      e
-    ), r = {
-      [B.ARROW_UP]: I,
-      [B.ARROW_DOWN]: E,
-      [B.HOME]: $,
-      [B.END]: G
-    }, m = {
-      [_.SPACE]: F,
-      [_.TAB]: U,
-      [_.ENTER]: i
-    };
-    return {
-      // Refs
-      listboxRef: n,
-      listboxItemRef: o,
-      // a11y
-      ariaAtomic: d,
-      ariaBusy: v,
-      ariaLive: S,
-      // Values
-      hasAutomaticLazyLoader: f,
-      isSearchResultEmpty: A,
-      loadingButtonState: g,
-      slots: s,
-      shouldDisplayShowMoreButton: L,
-      showMoreButtonText: c,
-      // Enums
-      BentoTypographyElement: P,
-      BentoButtonVariant: le,
-      BentoListboxLazyLoadType: k,
-      BentoKeyboardNavigationKeyDownEvent: B,
-      BentoListboxEvent: _,
-      // Methods
-      onOptionSelected: h,
-      emitShowMoreOnScrollEnd: O,
-      emitShowMore: C,
-      // Keyboard navigation
-      listboxListeners: r,
-      listboxOptionListeners: m
-    };
-  }
-});
-var Ke = function() {
-  var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: () => e.hasAutomaticLazyLoader ? e.emitShowMoreOnScrollEnd() : void 0 } }, e.listboxListeners), [e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [s("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("bento-listbox-multi-select", { attrs: { items: e.items, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, on: { select: e.onOptionSelected }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
-    return { key: n, fn: function(o) {
-      return [e._t(n, null, null, o)];
-    } };
-  })], null, !0) })] : e._l(e.items, function(l) {
-    return s("bento-listbox-single-select-option", e._g({ key: l.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: l, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, selected: l.value === e.selectedValue }, on: { select: e.onOptionSelected }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
-      return { key: o, fn: function(b) {
-        return [e._t(o, null, null, b)];
-      } };
-    })], null, !0) }, e.listboxOptionListeners));
-  }), e.shouldDisplayShowMoreButton ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: e.BentoButtonVariant.SECONDARY }, on: { click: e.emitShowMore } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-indicator")], 1) : e._e()]], 2);
-}, Ue = [], Fe = /* @__PURE__ */ T(
-  Ge,
-  Ke,
-  Ue,
-  !1,
-  null,
-  "4e32b747",
-  null,
-  null
-);
-const Qe = Fe.exports;
-export {
-  Qe as B,
-  ge as C,
-  _ as a,
-  k as b
-};
-//# sourceMappingURL=listbox.13cefddb.js.map