@adyen/bento-vue2 1.0.0 → 1.1.0

package/dist/chunks/listbox.99d23071.js

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