@adyen/bento-vue3 1.0.0 → 1.1.0

package/dist/chunks/listbox.b34141cd.js

@@ -1,1099 +0,0 @@
-import { computed as m, defineComponent as W, openBlock as v, createElementBlock as O, mergeProps as Z, withKeys as re, renderSlot as R, toDisplayString as B, createCommentVNode as z, pushScopeId as _e, popScopeId as he, createElementVNode as k, resolveComponent as S, createBlock as $, toHandlerKey as de, withCtx as h, normalizeProps as U, guardReactiveProps as K, createVNode as E, createTextVNode as N, withDirectives as se, vShow as ue, ref as q, normalizeClass as ce, Fragment as te, renderList as F, watch as Oe, createSlots as le, onMounted as Ae, toRef as Le, resolveDirective as Ie, toHandlers as pe } from "vue";
-import { B as J, c as Q } from "./index.1d501e31.js";
-import { BentoLoadingIndicator as $e } from "../loading-indicator.js";
-import { a as Be } from "./button.51be5335.js";
-import { u as be } from "./i18n.3619d46c.js";
-import { B as Y, a as ke, d as De } from "./debounce.f8d92e44.js";
-import { _ as V } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as me } from "./checkbox.7e9349cf.js";
-import { C as Ne, a as Re } from "./chevron-up.cc78e526.js";
-import { B as Me, a as ge } from "./loading-button.75ae5144.js";
-import "../assets/listbox.css";
-const Ce = (e, t, p, g) => {
-  const n = m(
-    () => {
-      var c, a;
-      return !!((c = e.value) != null && c.length) && ((a = e.value) == null ? void 0 : a.length) === t.value.length;
-    }
-  ), s = m(() => {
-    var c;
-    return e.value == null || e.value.length === 0 ? !1 : ((c = e.value) == null ? void 0 : c.length) !== t.value.length;
-  });
-  return {
-    isAllSelected: n,
-    isIndeterminate: s,
-    toggleSelectAll: (c) => {
-      c ? p() : g();
-    }
-  };
-};
-var f = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(f || {}), H = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(H || {});
-const we = W({
-  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: [f.CLICK, f.ENTER, f.SPACE, f.TAB],
-  setup(e, { emit: t }) {
-    const p = m(() => ({
-      "b-listbox-option--disabled": e.disabled,
-      "b-listbox-option--selected": e.selected
-    }));
-    return {
-      // Enums
-      BentoKeyboardNavigationKeyDownEvent: Y,
-      BentoListboxEvent: f,
-      // Values
-      conditionalClasses: p,
-      // Events
-      onClick: (s) => {
-        t(f.CLICK, s);
-      },
-      onOptionSelected: (s, o) => {
-        t(s, o);
-      }
-    };
-  }
-});
-function Pe(e, t, p, g, n, s) {
-  return v(), O("label", Z({
-    class: ["b-listbox-option", e.conditionalClasses],
-    role: "option"
-  }, e.$attrs, {
-    onClick: t[0] || (t[0] = (...o) => e.onClick && e.onClick(...o)),
-    onKeydown: [
-      t[1] || (t[1] = re((o) => e.onOptionSelected(e.BentoListboxEvent.ENTER, o), ["enter"])),
-      t[2] || (t[2] = re((o) => e.onOptionSelected(e.BentoListboxEvent.SPACE, o), ["space"])),
-      t[3] || (t[3] = re((o) => e.onOptionSelected(e.BentoListboxEvent.TAB, o), ["tab"]))
-    ]
-  }), [
-    R(e.$slots, "default", {}, void 0, !0)
-  ], 16);
-}
-const oe = /* @__PURE__ */ V(we, [["render", Pe], ["__scopeId", "data-v-18a61f5d"]]);
-let ve = 0;
-const Ue = {
-  beforeCreate() {
-    this.uuid = ve.toString(), ve += 1;
-  }
-}, Ke = (e) => (_e("data-v-4687fbd0"), e = e(), he(), e), Ve = { key: 0 }, Ge = /* @__PURE__ */ Ke(() => /* @__PURE__ */ k("path", {
-  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"
-}, null, -1));
-function Ye(e, t, p, g, n, s) {
-  return v(), O("svg", Z({ role: "img" }, e.$attrs, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    e.$attrs["svg-title"] ? (v(), O("title", Ve, B(e.$attrs["svg-title"]), 1)) : z("", !0),
-    Ge
-  ], 16);
-}
-const He = /* @__PURE__ */ V(Ue, [["render", Ye], ["__scopeId", "data-v-4687fbd0"]]), Fe = W({
-  name: "bento-listbox-single-select-option",
-  components: {
-    BentoListboxOption: oe,
-    BentoTypography: J,
-    CheckmarkIcon: He
-  },
-  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: [f.ENTER, f.SELECT, f.SPACE, f.TAB],
-  setup(e, { emit: t }) {
-    const p = (o) => {
-      e.disabled || t(o, e.option.value);
-    }, g = m(() => e.disabled ? !0 : null), n = m(() => e.selected ? !0 : null), s = m(() => e.disabled ? -1 : 0);
-    return {
-      // Values
-      ariaDisabled: g,
-      ariaSelected: n,
-      tabIndex: s,
-      // Enums
-      BentoTypographyElement: Q,
-      BentoListboxEvent: f,
-      // Events
-      onOptionSelected: p
-    };
-  }
-});
-const ze = { class: "b-listbox-single-select-option__text" }, qe = { class: "b-listbox-single-select-option__check-icon" };
-function We(e, t, p, g, n, s) {
-  const o = S("bento-typography"), c = S("checkmark-icon"), a = S("bento-listbox-option");
-  return v(), $(a, Z({
-    class: "b-listbox-single-select-option",
-    disabled: e.disabled,
-    selected: e.selected,
-    "aria-selected": e.ariaSelected,
-    "aria-disabled": e.ariaDisabled,
-    tabindex: e.tabIndex,
-    onClick: t[0] || (t[0] = (d) => e.onOptionSelected(e.BentoListboxEvent.SELECT))
-  }, {
-    [de(e.BentoListboxEvent.ENTER)]: t[1] || (t[1] = (d) => e.onOptionSelected(e.BentoListboxEvent.ENTER))
-  }, {
-    [de(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (d) => e.onOptionSelected(e.BentoListboxEvent.SPACE))
-  }, {
-    [de(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (d) => e.onOptionSelected(e.BentoListboxEvent.TAB))
-  }), {
-    default: h(() => [
-      R(e.$slots, "default", U(K(e.option)), () => [
-        k("span", ze, [
-          E(o, {
-            el: e.BentoTypographyElement.SPAN
-          }, {
-            default: h(() => [
-              N(B(e.option.label), 1)
-            ]),
-            _: 1
-          }, 8, ["el"]),
-          e.option.description ? (v(), $(o, {
-            key: 0,
-            class: "b-listbox-single-select-option__description",
-            el: e.BentoTypographyElement.SPAN
-          }, {
-            default: h(() => [
-              N(B(e.option.description), 1)
-            ]),
-            _: 1
-          }, 8, ["el"])) : z("", !0)
-        ])
-      ], !0),
-      k("span", qe, [
-        se(E(c, { "svg-title": "selected" }, null, 512), [
-          [ue, e.selected]
-        ])
-      ])
-    ]),
-    _: 3
-  }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
-}
-const Xe = /* @__PURE__ */ V(Fe, [["render", We], ["__scopeId", "data-v-e9c63397"]]);
-var Ee = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e))(Ee || {}), X = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(X || {});
-const je = {
-  "en-US": {
-    categoryClosed: "{category} closed",
-    categoryOpened: "{category} opened"
-  }
-}, Ze = W({
-  i18n: { messages: je },
-  name: "bento-listbox-multi-select-category",
-  components: {
-    BentoCheckbox: me,
-    BentoTypography: J,
-    BentoListboxOption: oe,
-    ChevronDownIcon: Ne,
-    ChevronUpIcon: Re
-  },
-  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: [X.SELECT_CATEGORY, X.UNSELECT_CATEGORY],
-  setup(e, { emit: t }) {
-    const p = q(!1), { t: g } = be(), n = m(
-      () => e.category.items.every((C) => e.isOptionDisabled(C))
-    ), s = m(() => ({
-      [`b-listbox-multi-select-category--${Ee.DISABLED}`]: n.value
-    })), o = (C) => {
-      C.preventDefault(), p.value = !p.value;
-    }, c = (C) => {
-      var w;
-      const u = e.isOptionDisabled(C), A = ((w = e.selectedItemsList) == null ? void 0 : w.includes(C.value)) || !1;
-      return { isDisabled: u, isPreSelected: A };
-    }, a = m(
-      () => e.category.items.filter((C) => {
-        const { isDisabled: u, isPreSelected: A } = c(C);
-        return u && A || !u;
-      })
-    ), d = m(
-      () => {
-        var C;
-        return (C = a.value) == null ? void 0 : C.filter(
-          ({ value: u }) => {
-            var A;
-            return (A = e.selectedItemsList) == null ? void 0 : A.includes(u);
-          }
-        );
-      }
-    ), T = m(() => {
-      const C = p.value ? "categoryOpened" : "categoryClosed";
-      return g(C, { category: e.category.label });
-    }), l = () => {
-      t(X.SELECT_CATEGORY);
-    }, y = () => {
-      t(X.UNSELECT_CATEGORY);
-    }, { isAllSelected: L, isIndeterminate: I, toggleSelectAll: M } = Ce(
-      d,
-      a,
-      l,
-      y
-    );
-    return {
-      // Values
-      chevronTitle: T,
-      conditionalClass: s,
-      hasAllPropsDisabled: n,
-      isOpen: p,
-      isAllSelected: L,
-      isIndeterminate: I,
-      // Enums
-      BentoTypographyElement: Q,
-      // Methods
-      toggleOpen: o,
-      toggleSelectAll: M
-    };
-  }
-});
-const Je = { class: "b-listbox-multi-select-category__label" };
-function Qe(e, t, p, g, n, s) {
-  const o = S("bento-checkbox"), c = S("bento-typography"), a = S("chevron-up-icon"), d = S("chevron-down-icon"), T = S("bento-listbox-option");
-  return v(), O("div", null, [
-    E(T, {
-      class: ce(["b-listbox-multi-select-category__option", e.conditionalClass])
-    }, {
-      default: h(() => [
-        E(o, {
-          "model-value": e.isAllSelected,
-          indeterminate: e.isIndeterminate,
-          disabled: e.hasAllPropsDisabled,
-          "aria-label": e.category.label,
-          value: e.category.value,
-          "onUpdate:modelValue": e.toggleSelectAll
-        }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"]),
-        k("span", Je, [
-          E(c, {
-            el: e.BentoTypographyElement.SPAN,
-            class: "b-listbox-multi-select-category__label-text"
-          }, {
-            default: h(() => [
-              N(B(e.category.label), 1)
-            ]),
-            _: 1
-          }, 8, ["el"]),
-          k("div", {
-            class: "b-listbox-multi-select-category__label-chevron",
-            "data-testid": "toggle-listbox",
-            onClickCapture: t[0] || (t[0] = (...l) => e.toggleOpen && e.toggleOpen(...l))
-          }, [
-            e.isOpen ? (v(), $(a, {
-              key: 0,
-              "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (v(), $(d, {
-              key: 1,
-              "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"]))
-          ], 32)
-        ])
-      ]),
-      _: 1
-    }, 8, ["class"]),
-    se(k("div", null, [
-      R(e.$slots, "default", {}, void 0, !0)
-    ], 512), [
-      [ue, e.isOpen]
-    ])
-  ]);
-}
-const xe = /* @__PURE__ */ V(Ze, [["render", Qe], ["__scopeId", "data-v-eed3bf52"]]);
-var P = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(P || {});
-const et = W({
-  name: "listbox-multi-select-options",
-  components: {
-    BentoCheckbox: me,
-    BentoListboxOption: oe,
-    BentoTypography: J,
-    ListboxMultiSelectCategory: xe
-  },
-  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: [
-    P.TOGGLE_CHECKBOX_SELECTION,
-    P.SELECT_CATEGORY,
-    P.UNSELECT_CATEGORY
-  ],
-  setup(e, { emit: t }) {
-    const p = (a) => t(P.TOGGLE_CHECKBOX_SELECTION, a), g = (a) => !!a.items, n = (a) => {
-      const d = e.isMultiLevel && e.searching;
-      return a.description && (!e.isMultiLevel || d);
-    }, s = (a) => a.items ? !!a.items.find((d) => e.selectedItemsList.includes(d.value)) : e.selectedItemsList.includes(a.value), o = (a, d) => {
-      if (g(d))
-        return t(a ? P.SELECT_CATEGORY : P.UNSELECT_CATEGORY, d);
-      p(d.value);
-    };
-    return {
-      // Values
-      conditionalClasses: m(() => ({
-        "b-listbox-multi-select-options__category-option": e.categoryItems
-      })),
-      // Methods
-      isCategory: g,
-      isOptionSelected: s,
-      shouldShowDescription: n,
-      toggleCheckboxSelection: p,
-      selectSearch: o,
-      // Enums
-      BentoTypographyElement: Q,
-      ListboxMultiSelectOptionsEvent: P
-    };
-  }
-});
-const tt = { class: "b-listbox-multi-select__option-text" }, lt = { class: "b-listbox-multi-select__option-text" };
-function st(e, t, p, g, n, s) {
-  const o = S("bento-checkbox"), c = S("bento-typography"), a = S("bento-listbox-option"), d = S("listbox-multi-select-options", !0), T = S("listbox-multi-select-category");
-  return v(), O("div", null, [
-    (v(!0), O(te, null, F(e.items, (l) => (v(), O("div", {
-      key: `selected-${l.value}`
-    }, [
-      e.searching && e.isMultiLevel ? (v(), $(a, {
-        key: 0,
-        class: ce(["b-listbox-multi-select-options", e.conditionalClasses]),
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
-      }, {
-        default: h(() => [
-          E(o, {
-            "model-value": e.isOptionSelected(l),
-            "aria-label": l.label,
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-            value: l.value,
-            "onUpdate:modelValue": (y) => e.selectSearch(y, l)
-          }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-          R(e.$slots, "default", U(K(l)), () => [
-            k("span", tt, [
-              E(c, {
-                el: e.BentoTypographyElement.SPAN
-              }, {
-                default: h(() => [
-                  N(B(l.label), 1)
-                ]),
-                _: 2
-              }, 1032, ["el"]),
-              e.shouldShowDescription(l) ? (v(), $(c, {
-                key: 0,
-                class: "b-listbox-multi-select__option-description",
-                el: e.BentoTypographyElement.SPAN
-              }, {
-                default: h(() => [
-                  N(B(l.description), 1)
-                ]),
-                _: 2
-              }, 1032, ["el"])) : z("", !0)
-            ])
-          ], !0)
-        ]),
-        _: 2
-      }, 1032, ["class", "disabled"])) : (v(), O(te, { key: 1 }, [
-        l.items ? (v(), $(T, {
-          key: 0,
-          category: l,
-          "is-option-disabled": e.isOptionDisabled,
-          "selected-items-list": e.selectedItemsList,
-          onSelectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l),
-          onUnselectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l)
-        }, {
-          default: h(() => [
-            E(d, {
-              "category-items": "",
-              items: l.items,
-              "is-option-disabled": e.isOptionDisabled,
-              "is-multi-level": e.isMultiLevel,
-              "selected-items-list": e.selectedItemsList,
-              searching: e.searching,
-              onToggleCheckboxSelection: t[0] || (t[0] = (y) => e.toggleCheckboxSelection(y))
-            }, null, 8, ["items", "is-option-disabled", "is-multi-level", "selected-items-list", "searching"])
-          ]),
-          _: 2
-        }, 1032, ["category", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (v(), $(a, {
-          key: 1,
-          class: ce(["b-listbox-multi-select-options", e.conditionalClasses]),
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
-        }, {
-          default: h(() => [
-            E(o, {
-              "model-value": e.selectedItemsList,
-              "aria-label": l.label,
-              disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-              value: l.value,
-              "onUpdate:modelValue": (y) => e.toggleCheckboxSelection(l.value)
-            }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-            R(e.$slots, "default", U(K(l)), () => [
-              k("span", lt, [
-                E(c, {
-                  el: e.BentoTypographyElement.SPAN
-                }, {
-                  default: h(() => [
-                    N(B(l.label), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["el"]),
-                e.shouldShowDescription(l) ? (v(), $(c, {
-                  key: 0,
-                  class: "b-listbox-multi-select__option-description",
-                  el: e.BentoTypographyElement.SPAN
-                }, {
-                  default: h(() => [
-                    N(B(l.description), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["el"])) : z("", !0)
-              ])
-            ], !0)
-          ]),
-          _: 2
-        }, 1032, ["class", "disabled"]))
-      ], 64))
-    ]))), 128))
-  ]);
-}
-const ot = /* @__PURE__ */ V(et, [["render", st], ["__scopeId", "data-v-722f5eb1"]]), ye = {
-  "en-US": {
-    allSelected: "All selected ({total})",
-    numberOfTotalSelected: "{number} of {total} selected",
-    selectAll: "Select all ({total})"
-  }
-};
-var j = /* @__PURE__ */ ((e) => (e.SELECT = "select", e))(j || {});
-const nt = W({
-  i18n: { messages: ye },
-  name: "bento-listbox-multi-select",
-  components: {
-    BentoCheckbox: me,
-    BentoListboxOption: oe,
-    BentoTypography: J,
-    ListboxMultiSelectOptions: ot
-  },
-  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: [j.SELECT],
-  setup(e, { emit: t, slots: p }) {
-    const { t: g } = be({ messages: ye }), n = q();
-    Oe(
-      () => e.selectedValues,
-      () => {
-        n.value = [...e.selectedValues ?? []];
-      },
-      {
-        immediate: !0
-      }
-    );
-    const s = m(() => !!e.items.find(({ items: i }) => !!i)), o = m(() => s.value ? e.items.reduce((i, b) => (b.items ? i.push(...b.items.flat()) : i.push(b), i), []) : e.items), c = (i) => {
-      var r;
-      const b = e.isOptionDisabled(i), _ = ((r = n.value) == null ? void 0 : r.includes(i.value)) || !1;
-      return { isDisabled: b, isPreSelected: _ };
-    }, a = m(
-      () => e.searching && s ? e.items : o.value.filter((i) => {
-        const { isDisabled: b, isPreSelected: _ } = c(i);
-        return b && _ || !b;
-      })
-    ), d = m(
-      () => {
-        var i;
-        return (i = a.value) == null ? void 0 : i.filter((b) => {
-          var _;
-          return b.items && s.value && e.searching ? b.items.filter(
-            (D) => (e.selectedValues ?? []).includes(
-              D.value
-            )
-          ).length === b.items.length : (_ = n.value) == null ? void 0 : _.includes(b.value);
-        });
-      }
-    ), T = () => s.value && !e.searching ? a.value.length : e.items.length, l = m(() => {
-      var _;
-      const i = T(), b = ((_ = d.value) == null ? void 0 : _.length) || 0;
-      return b === 0 ? g("selectAll", { total: i }) : b === i ? g("allSelected", { total: i }) : g("numberOfTotalSelected", { number: b, total: i });
-    }), y = (i) => {
-      const b = (r) => {
-        const { isDisabled: D, isPreSelected: ae } = c(r);
-        return D && ae || !D;
-      }, _ = i.filter(b).filter((r) => !n.value.includes(r.value)).map(({ value: r }) => r);
-      n.value = [...n.value, ..._], t(j.SELECT, n.value);
-    }, L = (i) => {
-      const b = (r) => {
-        const { isDisabled: D, isPreSelected: ae } = c(r);
-        return !(D && ae);
-      }, _ = i.filter(b).map(({ value: r }) => r);
-      n.value = n.value.filter((r) => !(_ != null && _.includes(r))), t(j.SELECT, n.value);
-    }, I = () => {
-      y(o.value);
-    }, M = () => {
-      L(o.value);
-    }, { isAllSelected: C, isIndeterminate: u, toggleSelectAll: A } = Ce(
-      d,
-      a,
-      I,
-      M
-    ), w = (i) => {
-      y(i.items);
-    }, G = (i) => {
-      L(i.items);
-    }, x = (i) => {
-      let b = !1;
-      n.value = n.value.filter((_) => i === _ ? (b = !0, !1) : !0), b || n.value.push(i), t(j.SELECT, n.value);
-    }, ee = m(() => {
-      const i = (r) => n.value.includes(r.value), b = (r) => !!r.find((D) => i(D));
-      return e.items.filter((r) => r.items && b(r.items) ? !0 : i(r));
-    }), ne = m(() => {
-      var i;
-      return ((i = ee.value) == null ? void 0 : i.length) > 0;
-    }), ie = m(
-      () => {
-        var i, b;
-        return ((i = d.value) == null ? void 0 : i.length) === ((b = o.value) == null ? void 0 : b.length);
-      }
-    );
-    return {
-      // Values
-      isAllSelected: C,
-      isAllItemsIncludingDisabled: ie,
-      isAnOptionSelected: ne,
-      isIndeterminate: u,
-      isMultiLevelSelect: s,
-      flattenedItemsList: o,
-      selectedItemsList: n,
-      selectAllCheckboxText: l,
-      selectedOptions: ee,
-      slots: p,
-      // Enums
-      BentoTypographyElement: Q,
-      // Methods
-      selectAllCategory: w,
-      toggleCheckboxSelection: x,
-      toggleSelectAll: A,
-      unselectAllCategory: G
-    };
-  }
-});
-const Te = (e) => (_e("data-v-cb12976a"), e = e(), he(), e), it = { class: "b-listbox-multi-select" }, at = { key: 0 }, rt = /* @__PURE__ */ Te(() => /* @__PURE__ */ k("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), dt = /* @__PURE__ */ Te(() => /* @__PURE__ */ k("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
-function ct(e, t, p, g, n, s) {
-  const o = S("bento-checkbox"), c = S("bento-typography"), a = S("bento-listbox-option"), d = S("listbox-multi-select-options");
-  return v(), O("div", it, [
-    E(a, { class: "b-listbox-multi-select__option" }, {
-      default: h(() => [
-        E(o, {
-          "aria-label": e.selectAllCheckboxText,
-          "model-value": e.isAllSelected,
-          indeterminate: e.isIndeterminate,
-          "onUpdate:modelValue": e.toggleSelectAll
-        }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
-        E(c, {
-          el: e.BentoTypographyElement.SPAN
-        }, {
-          default: h(() => [
-            N(B(e.selectAllCheckboxText), 1)
-          ]),
-          _: 1
-        }, 8, ["el"])
-      ]),
-      _: 1
-    }),
-    e.isAnOptionSelected ? (v(), O("div", at, [
-      rt,
-      E(d, {
-        items: e.selectedOptions,
-        "is-option-disabled": e.isOptionDisabled,
-        "is-multi-level": e.isMultiLevelSelect,
-        searching: e.searching,
-        "selected-items-list": e.selectedItemsList,
-        onSelectCategory: e.selectAllCategory,
-        onUnselectCategory: e.unselectAllCategory,
-        onToggleCheckboxSelection: e.toggleCheckboxSelection
-      }, le({ _: 2 }, [
-        F(e.slots, (T, l) => ({
-          name: l,
-          fn: h((y) => [
-            R(e.$slots, l, U(K(y)), void 0, !0)
-          ])
-        }))
-      ]), 1032, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory", "onToggleCheckboxSelection"])
-    ])) : z("", !0),
-    se(k("div", null, [
-      dt,
-      E(d, {
-        items: e.items,
-        "is-option-disabled": e.isOptionDisabled,
-        "is-multi-level": e.isMultiLevelSelect,
-        searching: e.searching,
-        "selected-items-list": e.selectedItemsList,
-        onToggleCheckboxSelection: e.toggleCheckboxSelection,
-        onSelectCategory: e.selectAllCategory,
-        onUnselectCategory: e.unselectAllCategory
-      }, le({ _: 2 }, [
-        F(e.slots, (T, l) => ({
-          name: l,
-          fn: h((y) => [
-            R(e.$slots, l, U(K(y)), void 0, !0)
-          ])
-        }))
-      ]), 1032, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onToggleCheckboxSelection", "onSelectCategory", "onUnselectCategory"])
-    ], 512), [
-      [ue, !e.isAllItemsIncludingDisabled]
-    ])
-  ]);
-}
-const fe = /* @__PURE__ */ V(nt, [["render", ct], ["__scopeId", "data-v-cb12976a"]]), ut = ({ items: e, isOptionDisabled: t }, p, g) => {
-  const n = q(e.value.length - 1), s = q(0);
-  Ae(() => {
-    t && (s.value = e.value.findIndex((u) => !t(u)));
-  });
-  const o = (u) => !t || !!t && t(e.value[u]), c = (u) => !t || !!t && !t(e.value[u]), a = (u) => {
-    switch (u) {
-      case "increase":
-        s.value += 1;
-        break;
-      case "decrease":
-        s.value -= 1;
-        break;
-    }
-  }, d = ({ edgeCaseItem: u, isItemBeforeEdgeCaseItem: A }, w, G) => {
-    s.value !== u && (A ? c(u) && a(G) : (a(G), o(s.value) && w()), p(s.value));
-  }, T = () => {
-    const u = s.value === n.value - 1;
-    d(
-      {
-        isItemBeforeEdgeCaseItem: u,
-        edgeCaseItem: n.value
-      },
-      T,
-      "increase"
-      /* INCREASE */
-    );
-  }, l = () => {
-    const u = s.value === 1;
-    d(
-      {
-        edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: u
-      },
-      l,
-      "decrease"
-      /* DECREASE */
-    );
-  };
-  return {
-    moveToFirstElement: () => {
-      s.value = 0, o(s.value) ? T() : p(s.value);
-    },
-    moveToLastElement: () => {
-      s.value = n.value, o(s.value) ? l() : p(s.value);
-    },
-    moveToNextElement: T,
-    moveToPreviousElement: l,
-    onTabKey: (u) => {
-      g(f.TAB, u);
-    },
-    onSpaceKey: (u) => {
-      g(f.SPACE, u);
-    },
-    onEnterKey: (u) => {
-      g(f.ENTER, u);
-    }
-  };
-}, Se = {
-  "en-US": {
-    showMore: "Show more",
-    loading: "Loading"
-  }
-}, bt = W({
-  name: "bento-listbox",
-  components: {
-    BentoListboxSingleSelectOption: Xe,
-    BentoListboxMultiSelect: fe,
-    BentoTypography: J,
-    BentoLoadingIndicator: $e,
-    BentoLoadingButton: Me
-  },
-  directives: { BentoKeyboardNavigationDirective: ke },
-  i18n: { messages: Se },
-  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: H.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: fe.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: [f.SELECT, f.SHOW_MORE, f.ESCAPE, f.TAB],
-  setup(e, { emit: t, slots: p }) {
-    const { t: g } = be({ messages: Se }), n = q(null), s = q([]), o = m(() => e.lazyLoadType !== H.AUTOMATIC), c = m(() => e.lazyLoadType === H.AUTOMATIC), a = m(
-      () => o.value ? "true" : void 0
-    ), d = m(
-      () => o.value && e.loading ? "true" : "false"
-    ), T = m(
-      () => o.value ? "polite" : void 0
-    ), l = (r) => {
-      t(f.SELECT, r);
-    }, y = () => {
-      t(f.SHOW_MORE);
-    }, L = De(() => {
-      const r = n.value, D = r.scrollTop + r.clientHeight >= r.scrollHeight;
-      e.hasMoreItems && D && !e.loading && y();
-    }), I = m(() => {
-      var r;
-      return e.searching && ((r = e.items) == null ? void 0 : r.length) === 0;
-    }), M = m(
-      () => e.lazyLoadType === H.BUTTON && e.hasMoreItems
-    ), C = m(
-      () => e.loading ? ge.LOADING : ge.START
-    ), u = m(() => e.loading ? g("loading") : g("showMore")), A = (r) => e.multiple ? null : s.value[r].$el.focus(), {
-      moveToNextElement: w,
-      moveToPreviousElement: G,
-      moveToFirstElement: x,
-      moveToLastElement: ee,
-      onTabKey: ne,
-      onSpaceKey: ie,
-      onEnterKey: i
-    } = ut(
-      {
-        items: Le(e, "items"),
-        isOptionDisabled: e.isOptionDisabled
-      },
-      A,
-      t
-    ), b = {
-      [Y.ARROW_UP]: G,
-      [Y.ARROW_DOWN]: w,
-      [Y.HOME]: x,
-      [Y.END]: ee
-    }, _ = {
-      [f.SPACE]: ie,
-      [f.TAB]: ne,
-      [f.ENTER]: i
-    };
-    return {
-      // Refs
-      listboxRef: n,
-      listboxItemRef: s,
-      // a11y
-      ariaAtomic: a,
-      ariaBusy: d,
-      ariaLive: T,
-      // Values
-      hasAutomaticLazyLoader: c,
-      isSearchResultEmpty: I,
-      loadingButtonState: C,
-      slots: p,
-      shouldDisplayShowMoreButton: M,
-      showMoreButtonText: u,
-      // Enums
-      BentoTypographyElement: Q,
-      BentoButtonVariant: Be,
-      BentoListboxLazyLoadType: H,
-      BentoKeyboardNavigationKeyDownEvent: Y,
-      BentoListboxEvent: f,
-      // Methods
-      onOptionSelected: l,
-      emitShowMoreOnScrollEnd: L,
-      emitShowMore: y,
-      // Keyboard navigation
-      listboxListeners: b,
-      listboxOptionListeners: _
-    };
-  }
-});
-const mt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], pt = {
-  key: 0,
-  class: "b-listbox__empty-search-message"
-}, gt = {
-  key: 2,
-  class: "b-listbox__lazy-load"
-}, vt = {
-  key: 3,
-  class: "b-listbox__lazy-load"
-};
-function yt(e, t, p, g, n, s) {
-  const o = S("bento-typography"), c = S("bento-listbox-multi-select"), a = S("bento-listbox-single-select-option"), d = S("bento-loading-button"), T = S("bento-loading-indicator"), l = Ie("bento-keyboard-navigation-directive");
-  return se((v(), O("div", Z({
-    id: e.id,
-    ref: "listboxRef",
-    class: "b-listbox",
-    role: "listbox",
-    tabindex: "-1",
-    "aria-busy": e.ariaBusy,
-    "aria-atomic": e.ariaAtomic,
-    "aria-label": e.ariaLabel,
-    "aria-live": e.ariaLive,
-    onScroll: t[0] || (t[0] = () => e.hasAutomaticLazyLoader ? e.emitShowMoreOnScrollEnd() : void 0)
-  }, pe(e.listboxListeners, !0)), [
-    e.isSearchResultEmpty ? (v(), O("div", pt, [
-      E(o, {
-        el: e.BentoTypographyElement.SPAN
-      }, {
-        default: h(() => [
-          N(B(e.noResultsMessage), 1)
-        ]),
-        _: 1
-      }, 8, ["el"])
-    ])) : (v(), O(te, { key: 1 }, [
-      e.multiple ? (v(), $(c, {
-        key: 0,
-        items: e.items,
-        "selected-values": e.selectedValue,
-        searching: e.searching,
-        "is-option-disabled": e.isOptionDisabled,
-        onSelect: e.onOptionSelected
-      }, le({ _: 2 }, [
-        F(e.slots, (y, L) => ({
-          name: L,
-          fn: h((I) => [
-            R(e.$slots, L, U(K(I)), void 0, !0)
-          ])
-        }))
-      ]), 1032, ["items", "selected-values", "searching", "is-option-disabled", "onSelect"])) : (v(!0), O(te, { key: 1 }, F(e.items, (y) => (v(), $(a, Z({
-        key: y.value,
-        ref_for: !0,
-        ref: "listboxItemRef",
-        role: "option",
-        option: y,
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(y) : null,
-        selected: y.value === e.selectedValue,
-        onSelect: e.onOptionSelected
-      }, pe(e.listboxOptionListeners)), le({ _: 2 }, [
-        F(e.slots, (L, I) => ({
-          name: I,
-          fn: h((M) => [
-            R(e.$slots, I, U(K(M)), void 0, !0)
-          ])
-        }))
-      ]), 1040, ["option", "disabled", "selected", "onSelect"]))), 128)),
-      e.shouldDisplayShowMoreButton ? (v(), O("div", gt, [
-        E(d, {
-          state: e.loadingButtonState,
-          variant: e.BentoButtonVariant.SECONDARY,
-          onClick: e.emitShowMore
-        }, {
-          default: h(() => [
-            N(B(e.showMoreButtonText), 1)
-          ]),
-          _: 1
-        }, 8, ["state", "variant", "onClick"])
-      ])) : e.loading ? (v(), O("div", vt, [
-        E(T)
-      ])) : z("", !0)
-    ], 64))
-  ], 16, mt)), [
-    [l]
-  ]);
-}
-const It = /* @__PURE__ */ V(bt, [["render", yt], ["__scopeId", "data-v-15f76482"]]);
-export {
-  It as B,
-  He as C,
-  f as a,
-  H as b
-};
-//# sourceMappingURL=listbox.b34141cd.js.map