@adyen/bento-vue3 1.6.1 → 1.7.0

package/dist/chunks/listbox.0f25778d.js

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