@adyen/bento-vue3 1.0.0 → 1.1.0

package/dist/chunks/listbox.ceacb0ca.js

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