@adyen/bento-vue2 1.11.0 → 1.12.0

package/dist/chunks/dropdown.4152cc00.js

@@ -1,887 +0,0 @@
-import { ref as y, watch as Z, computed as f, defineComponent as K, toRefs as Y, nextTick as C, toRef as O } from "vue";
-import { B as pe, d as me } from "./index.b0a89960.js";
-import { D as be, a as D, b as N, c as ye } from "./dropdown-default-textbox.1cba89ea.js";
-import { n as I } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { g as B } from "./unique-id.a2a2b458.js";
-import { u as _e } from "./aria-label.ac9651a5.js";
-import { u as W } from "./i18n.eb5b985b.js";
-import { u as ge } from "./use-form-layout-loading.d03e5d48.js";
-import { a as i, B as k, b as F, u as xe } from "./listbox.7cf6d6b4.js";
-import { B as L, a as we } from "./keyboard-navigation.ca47dfa8.js";
-import { u as he } from "./use-has-slot.fbeb19ec.js";
-import { a as P } from "./index.58282364.js";
-import { a as q } from "./index.f18f79eb.js";
-import { B as G } from "./directive.0408e565.js";
-import { E as Se, F as Oe } from "./field-label.a0c54b7d.js";
-import "../assets/dropdown.css";
-var E = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(E || {});
-const Le = {
-  "en-US": {
-    apply: "Apply",
-    cancel: "Cancel",
-    noOptionsMatchThisSearch: "No options match this search"
-  }
-}, Ce = (t, e, n, l) => {
-  const a = y(t.value), { t: o } = W();
-  Z(t, () => {
-    a.value = t.value;
-  });
-  const d = f(
-    () => JSON.stringify(a.value) === JSON.stringify(t.value)
-  ), u = () => {
-    l(i.SELECT, a.value), l(i.CLOSE_DROPDOWN);
-  }, s = () => {
-    a.value = t.value, l(i.CLOSE_DROPDOWN);
-  }, p = () => {
-    n.value && e.value && (a.value = t.value);
-  }, x = f(() => [
-    {
-      title: o("apply"),
-      event: u,
-      disabled: d.value
-    },
-    {
-      title: o("cancel"),
-      event: s
-    }
-  ]), m = (r) => {
-    a.value = r, e.value || l(i.SELECT, r);
-  }, g = (r) => {
-    m(r), l(i.TAB);
-  }, _ = (r) => {
-    m(r), l(i.ENTER);
-  }, w = (r) => {
-    m(r), l(i.SPACE);
-  }, h = () => {
-    s(), l(i.ESCAPE);
-  }, S = () => {
-    l(i.SHOW_MORE);
-  }, $ = {
-    [i.SELECT]: m,
-    [i.SHOW_MORE]: S,
-    [i.TAB]: g,
-    [i.SPACE]: w,
-    [i.ENTER]: _
-  };
-  return {
-    // Values
-    actions: x,
-    internalSelectedValue: a,
-    // Methods
-    listeners: $,
-    onEscapeKey: h,
-    onOutsideDropdownClick: p
-  };
-}, Ee = K({
-  i18n: { messages: Le },
-  name: "bento-dropdown-options-container",
-  components: {
-    BentoListbox: k,
-    PopperContainer: P,
-    BentoPopover: q
-  },
-  directives: { BentoClickOutsideDirective: G },
-  props: {
-    /**
-     * Defines a string value that labels an interactive element.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Empty state props used with the inner empty state component which is displayed when no search results are found.
-     */
-    emptyState: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Disables dropdown functionality
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * 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 {BentoDropdownIsOptionDisabled}
-     * @param {BentoDropdownOptionItem} option - Dropdown 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: void 0
-    },
-    /**
-     * Dropdown input size
-     */
-    inputSize: {
-      type: String,
-      default: E.DEFAULT,
-      validator: (t) => Object.values(E).includes(t)
-    },
-    /**
-     * The option elements to populate the dropdown with.
-     * It must be an array of {@see BentoDropdownOptionItem }
-     *  * @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: F.AUTOMATIC,
-      validator: (t) => Object.values(F).includes(t)
-    },
-    /**
-     * If enabled, the user will be able to select multiple items.
-     */
-    multiple: { type: Boolean, default: !1 },
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 },
-    /**
-     * Indicates if the dropdown is open so that
-     * the container can be displayed.
-     */
-    open: { type: Boolean, required: !0 },
-    /**
-     * 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: null
-    },
-    /**
-     * 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,
-    /**
-     * Reference to the DOM element or Vue component for positioning
-     * the Dropdown container.
-     */
-    targetElement: { type: P.props.targetElement.type, required: !0 },
-    /**
-     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
-     * The itemHeight function is used to calculate the height of rendered item given it's index.
-     */
-    virtualScroll: {
-      type: [Boolean, Object],
-      default: !1
-    }
-  },
-  emits: [
-    i.CLOSE_DROPDOWN,
-    i.SHOW_MORE,
-    i.SELECT,
-    i.ENTER,
-    i.ESCAPE,
-    i.SPACE,
-    i.TAB
-  ],
-  setup(t, { emit: e, slots: n }) {
-    const { selectedValue: l, multiple: a } = Y(t), o = y(null), { t: d } = W(), u = f(() => t.open && !t.disabled), s = f(() => d("noOptionsMatchThisSearch")), p = f(() => ({
-      "b-dropdown-options-container--single": !(t != null && t.multiple)
-    })), x = f(() => ({
-      "b-dropdown-options-container__listbox--small": t.inputSize === E.SMALL,
-      "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: m, internalSelectedValue: g, listeners: _, onEscapeKey: w, onOutsideDropdownClick: h } = Ce(l, a, u, e), S = f(
-      () => t != null && t.multiple ? q : P
-    ), $ = f(() => {
-      var c;
-      const r = {
-        "min-width": `${(c = t == null ? void 0 : t.targetElement) == null ? void 0 : c.clientWidth}px`,
-        "max-width": "min(500px, 95%)"
-      };
-      return t != null && t.multiple ? {
-        actionsLayout: "space-between",
-        actions: m.value,
-        divider: !0,
-        fallbackPosition: ["top-start"],
-        id: B(`dropdown-options-${t.id}`),
-        open: t.open,
-        position: "bottom-start",
-        style: {
-          width: "auto",
-          ...r
-        },
-        targetElement: t.targetElement
-      } : {
-        fallbackPosition: ["top-start"],
-        offset: [0, 8],
-        position: "bottom-start",
-        style: {
-          display: u.value ? "block" : "none",
-          ...r
-        },
-        targetElement: t.targetElement
-      };
-    });
-    return {
-      // Values
-      isDropdownOpen: u,
-      conditionalClasses: p,
-      conditionalListboxClasses: x,
-      noResultsMessage: s,
-      slots: n,
-      actions: m,
-      internalSelectedValue: g,
-      // Component wrapper
-      popperContainerOrPopoverComponent: S,
-      popperContainerOrPopoverProps: $,
-      // Refs
-      dropdownOptionsListboxRef: o,
-      // Events
-      onEscapeKey: w,
-      onOutsideDropdownClick: h,
-      listeners: _
-    };
-  }
-});
-var $e = function() {
-  var e = this, n = e._self._c;
-  return e._self._setupProxy, n(e.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [n("div", { on: { keydown: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [n("bento-listbox", e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": e.staticCategories, "no-results-message": e.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
-    return { key: a, fn: function(o) {
-      return [e._t(a, null, null, o)];
-    } };
-  })], null, !0) }, e.listeners))], 1)]);
-}, De = [], Re = /* @__PURE__ */ I(
-  Ee,
-  $e,
-  De,
-  !1,
-  null,
-  "9f64e5d1",
-  null,
-  null
-);
-const Be = Re.exports;
-let J = 0;
-const Ie = {
-  beforeCreate() {
-    this.uuid = J.toString(), J += 1;
-  }
-};
-var Te = function() {
-  var e = this, n = e._self._c;
-  return n("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, Ae = [], Me = /* @__PURE__ */ I(
-  Ie,
-  Te,
-  Ae,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const Ne = Me.exports;
-let V = 0;
-const Pe = {
-  beforeCreate() {
-    this.uuid = V.toString(), V += 1;
-  }
-};
-var ke = function() {
-  var e = this, n = e._self._c;
-  return n("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, Fe = [], Ke = /* @__PURE__ */ I(
-  Pe,
-  ke,
-  Fe,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const We = Ke.exports, ze = K({
-  name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Ne, ChevronUpSmallIcon: We, DropdownBaseTextbox: be },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * The number of additional items that have been selected in the dropdown.
-     */
-    additionalItemsSelected: { type: [Number, String], default: 0 },
-    /**
-     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.
-     */
-    ariaControls: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.
-     */
-    ariaExpanded: {
-      type: [String, Boolean],
-      required: !0
-    },
-    /**
-     * If no label element is used then the aria-label is be set should be set.
-     */
-    ariaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Corresponds to the label's id that labels the textbox element.
-     */
-    ariaLabelledby: {
-      type: String,
-      default: null
-    },
-    /**
-     * Custom debounce time. Default: 300
-     */
-    debounceTime: { type: Number, default: 300 },
-    /**
-     * Disables any textbox functionality
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Selected option's label
-     */
-    displayValue: { type: String, default: null },
-    /**
-     * Sets the possibility to type into the textbox
-     */
-    dynamicFiltering: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Marks the textbox as invalid, rendering an error state
-     */
-    isInvalid: { type: Boolean, default: !1 },
-    /**
-     * Indicates if the dropdown is open so that
-     * the respective event can be emitted
-     */
-    open: { type: Boolean, default: !1 },
-    /**
-     * Sets the dropdown to readonly state
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The input value
-     */
-    value: { type: String, default: "" }
-  },
-  emits: [D.OPEN, D.CLOSE],
-  setup(t, { emit: e }) {
-    const n = f(() => ({
-      [`b-dropdown-small-textbox--${N.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${N.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${N.OPENED}`]: t.open
-    })), l = f(() => t.open && !t.disabled && !t.readonly), a = () => {
-      e(D.OPEN);
-    }, o = () => {
-      e(D.CLOSE);
-    }, d = {
-      [D.OPEN]: a,
-      [D.CLOSE]: o
-    };
-    return {
-      // Values
-      conditionalClasses: n,
-      isDropdownOpen: l,
-      // Events
-      listeners: d
-    };
-  }
-});
-var Ue = function() {
-  var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [n("dropdown-base-textbox", e._g(e._b({ staticClass: "b-dropdown-small-textbox__textbox", scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [n("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [n("chevron-up-small-icon", { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), n("chevron-down-small-icon", { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
-  }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), e.listeners))], 1);
-}, je = [], He = /* @__PURE__ */ I(
-  ze,
-  Ue,
-  je,
-  !1,
-  null,
-  "bc324b09",
-  null,
-  null
-);
-const qe = He.exports, Je = ({ items: t, placeholder: e, selectedValue: n, staticCategories: l }) => {
-  let a;
-  if (l) {
-    const o = t.value.find((d) => d.items.some((u) => u.value === n.value));
-    a = o == null ? void 0 : o.items.find((d) => d.value === n.value);
-  } else
-    a = t.value.find(({ value: o }) => o === n.value);
-  return (a == null ? void 0 : a.label) || e.value || null;
-}, Ve = ({ selectedValues: t, items: e, placeholder: n }) => {
-  var l;
-  return !t.value || ((l = t.value) == null ? void 0 : l.length) === 0 ? n.value || null : t.value.map((a) => {
-    const { label: o } = e.value.find(({ value: d }) => d === a);
-    return o;
-  }).join(", ");
-}, Ze = ({ selectedValues: t, items: e, placeholder: n }) => {
-  var l;
-  return !t.value || !((l = t.value) != null && l.length) ? n.value || null : e.value.reduce((a, o) => {
-    if (o.items) {
-      const d = o.items.filter(
-        (s) => t.value.includes(s.value)
-      );
-      d.length === o.items.length ? a.push(o.label) : d.forEach(({ label: s }) => a.push(s));
-    }
-    return t.value.includes(o.value) && a.push(o.label), a;
-  }, []).join(", ");
-}, Ye = ({ items: t, placeholder: e, value: n, multiple: l, staticCategories: a }) => {
-  const o = f(() => t.value.find((u) => {
-    var s;
-    return (s = u.items) == null ? void 0 : s.length;
-  }));
-  return f(() => l.value ? o.value ? Ze({ selectedValues: n, placeholder: e, items: t }) : Ve({ selectedValues: n, items: t, placeholder: e }) : Je({
-    items: t,
-    placeholder: e,
-    selectedValue: n,
-    staticCategories: a.value
-  }));
-}, Q = (t) => {
-  var e;
-  (e = t.value.$children) == null || e[0].$refs.textbox.focus();
-}, Ge = ({
-  inputContainerRef: t,
-  optionsContainerRef: e,
-  selectedValueIndex: n,
-  isDropdownOpen: l,
-  isDynamicFltering: a,
-  items: o,
-  isMultiple: d
-}, u, s, p) => {
-  const x = ({ detail: r }) => {
-    r.preventDefault(), l.value || (s(), C(() => {
-      var c, b;
-      d ? (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[n.value].$el.focus();
-    }));
-  }, m = ({ detail: r }) => {
-    r.preventDefault(), l.value || (s(), C(() => {
-      var c;
-      (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus();
-    }));
-  }, g = () => {
-    l.value || (s(), C(() => {
-      var r, c;
-      if (d) {
-        const b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[b.length - 1].$children[o.length - 1].$el.focus();
-      } else
-        (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[o.length - 1].$el.focus();
-    }));
-  }, _ = () => {
-    l.value && (p(), Q(t));
-  }, w = () => {
-    l.value || s(), C(() => {
-      var r;
-      (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[0].$el.focus();
-    });
-  }, h = ({ detail: r }) => {
-    r.preventDefault(), u(), l.value && C(() => {
-      var c, b;
-      d ? (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[n.value].$el.focus();
-    });
-  }, S = () => {
-    u(), l.value && C(() => {
-      var r, c;
-      d ? (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[0].$el.focus() : (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[n.value].$el.focus();
-    });
-  };
-  return f(() => ({
-    ...a.value ? {} : { [L.SPACE]: h },
-    [L.ENTER]: S,
-    [L.ARROW_DOWN]: x,
-    [L.ARROW_UP]: m,
-    [L.END]: g,
-    [L.ESCAPE]: _,
-    [L.HOME]: w
-  }));
-}, Qe = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
-  const l = () => {
-    e.value && n(), C(() => {
-      Q(t);
-    });
-  };
-  return {
-    [i.ENTER]: l,
-    [i.ESCAPE]: l,
-    [i.TAB]: l,
-    [i.SPACE]: l
-  };
-};
-function Xe(t, e, n) {
-  const l = y(t), a = y(e), o = (u, s = []) => s.flatMap((p) => p.label.toLocaleLowerCase().includes(u) ? [p, ...o(u, p.items)] : p.items ? [...o(u, p.items)] : []);
-  return Z(l, () => {
-    n !== void 0 && n(l.value);
-  }), f(() => {
-    if (!l.value || n !== void 0)
-      return a.value;
-    const u = l.value.toLocaleLowerCase();
-    return o(u, a.value);
-  });
-}
-const et = {
-  "en-US": {
-    all: "All",
-    clearSearch: "Clear filter",
-    ariaLabelFallback: "Dropdown"
-  }
-}, tt = K({
-  i18n: { messages: et },
-  name: "b-dropdown",
-  components: {
-    BentoDropdownOptionsContainer: Be,
-    BentoTypography: pe,
-    DropdownInputDefault: ye,
-    DropdownInputSmall: qe,
-    ErrorMessage: Se,
-    FieldLabel: Oe
-  },
-  directives: { BentoClickOutsideDirective: G, BentoKeyboardNavigationDirective: we },
-  props: {
-    /**
-     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
-     */
-    /**
-     * Defines a string value that labels an interactive element.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Renders the dropdown with a condensed style.
-     */
-    condensed: { type: Boolean, default: !1 },
-    /**
-     * Empty state props used with the inner empty state component which is displayed when no search results are found.
-     */
-    emptyState: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Disables dropdown functionality.
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Text that appears in the form control when it has no value set
-     */
-    placeholder: {
-      type: String,
-      default: null
-    },
-    /**
-     * Sets the possibility to type into the textbox.
-     */
-    dynamicFiltering: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Highlights the dropdown in an erroneous state.
-     *
-     * @deprecated Use "errorMessage" prop instead
-     */
-    error: { type: Boolean, default: !1 },
-    /**
-     * Highlights the dropdown in an erroneous state with an error message.
-     */
-    errorMessage: { type: String, default: null },
-    /**
-     * Text that is displayed as a label above the element.
-     */
-    label: { type: String, default: null },
-    /**
-     * Descriptive supporting text visbile underneath the dropdown.
-     */
-    description: { type: String, default: null },
-    /**
-     * Indicates whether there are more items to load
-     */
-    hasMoreItems: { type: Boolean, default: !1 },
-    /**
-     * Function that dertermines which options are disabled from interaction.
-     *
-     * @type {BentoListboxIsOptionDisabled}
-     * @param {BentoListboxOptionItem} option - Dropdown 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: void 0
-    },
-    /**
-     * The option elements to populate the dropdown 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,
-      default: () => []
-    },
-    /**
-     * 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.props.lazyLoadType.default,
-      validator: (t) => Object.values(F).includes(t)
-    },
-    /*
-     * If enabled, the user will be able to select multiple items.
-     */
-    multiple: { type: Boolean, default: !1 },
-    /**
-     * Highlights the dropdown is optional.
-     */
-    optional: { type: Boolean, default: !1 },
-    /**
-     * Sets the dropdown to readonly state
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Highlights the dropdown is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.
-     */
-    showSlotContentInMultiple: { type: Boolean, default: !1 },
-    /**
-     * Dropdown input size
-     * * @see BentoDropdownSize
-     */
-    size: {
-      type: String,
-      default: E.DEFAULT,
-      validator: (t) => Object.values(E).includes(t)
-    },
-    /**
-     * Adds a info icon next to the label to display the passed tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 },
-    /**
-     * 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.
-     */
-    value: {
-      type: [String, Number, Array],
-      default: null
-    },
-    /**
-     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
-     * The itemHeight function is used to calculate the height of rendered item given it's index.
-     */
-    virtualScroll: {
-      type: [Boolean, Object],
-      default: !1
-    },
-    /**
-     * Dropdown search options and events.
-     * @see BentoDropdownSearchOptions
-     */
-    search: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["input", i.SHOW_MORE],
-  setup(t, { attrs: e, emit: n, slots: l }) {
-    var H;
-    const { t: a } = W(), o = y(null), d = y(null), u = y(null), s = y(!1), p = B("bento-dropdown-options-container"), x = B("dropdown-label"), m = B("dropdown-description"), g = B("dropdown-error"), { isReadOnly: _ } = ge(O(t, "readonly")), w = y(e["aria-label"]), { ariaLabel: h } = Y(t), S = _e({
-      ariaLabel: w.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: h,
-      defaultFallback: a("ariaLabelFallback")
-    }), $ = f(() => ({
-      "b-dropdown--condensed": t.condensed
-    })), r = f(() => ({
-      "b-dropdown__description--error": !!t.errorMessage
-    })), c = y(""), b = O(t, "items"), X = Xe(c, b, (H = t == null ? void 0 : t.search) == null ? void 0 : H.searchEvent), A = f(() => t.dynamicFiltering && !!c.value), ee = Ye({
-      items: b,
-      staticCategories: O(t, "staticCategories"),
-      multiple: O(t, "multiple"),
-      placeholder: O(t, "placeholder"),
-      value: O(t, "value")
-    }), te = f(() => t.size === E.DEFAULT), ne = f(() => {
-      if (t != null && t.multiple)
-        return t.items.filter(
-          ({ value: v }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(v)
-        );
-      if (!t.multiple && t.staticCategories) {
-        const v = t.items.find(
-          (T) => T.items.some((ve) => ve.value === t.value)
-        );
-        return v ? v.items.find((T) => T.value === t.value) : null;
-      }
-      return t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value));
-    }), le = f(() => {
-      const v = t.items.findIndex(({ value: R }) => t.value === R);
-      return v > 0 ? v : 0;
-    }), { isMultiLevelSelect: ae, flattenedItemsList: oe } = xe(b), se = f(() => {
-      var v;
-      if (t.multiple) {
-        const R = (v = t == null ? void 0 : t.value) == null ? void 0 : v.length;
-        return (ae.value ? oe.value.length : b.value.length) === R ? a("all") : R;
-      }
-      return null;
-    }), ie = f(
-      () => `${t.description ? m : ""} ${t.errorMessage ? g : ""}`.trim() || null
-    ), re = () => {
-      _.value || (s.value = !0);
-    }, M = () => {
-      s.value = !1;
-    }, z = () => {
-      _.value || (s.value = !s.value, A.value && (c.value = ""));
-    }, de = () => {
-      A.value && (c.value = ""), s.value && (s.value = !1, u.value.onOutsideDropdownClick());
-    }, U = (v) => {
-      t.multiple || (c.value = "", s.value = !1), n("input", v);
-    }, j = () => {
-      n(i.SHOW_MORE);
-    }, ue = Ge(
-      {
-        inputContainerRef: o,
-        optionsContainerRef: u,
-        selectedValueIndex: le,
-        isDropdownOpen: s,
-        isDynamicFltering: O(t, "dynamicFiltering"),
-        items: t.items,
-        isMultiple: t.multiple
-      },
-      z,
-      re,
-      M
-    ), ce = Qe(
-      {
-        inputContainerRef: o,
-        isDropdownOpen: s
-      },
-      M
-    ), fe = {
-      [i.CLOSE_DROPDOWN]: M,
-      [i.SELECT]: U,
-      [i.SHOW_MORE]: j,
-      ...ce
-    };
-    return t.error && me(
-      'BentoDropdown "error" property',
-      `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
-                        Having the field as "undefined" will hide/remove the error.
-                        <bento-dropdown errorMessage="Error message text" />`,
-      "2.0.0"
-    ), {
-      // Values
-      conditionalClasses: $,
-      computedAriaLabel: S,
-      additionalItemsSelected: se,
-      idDefaultSize: te,
-      isDropdownOpen: s,
-      displayValue: ee,
-      dropdownOptionsContainerId: p,
-      filteredItems: X,
-      isSearching: A,
-      isReadOnly: _,
-      searchTerm: c,
-      labelId: x,
-      descriptionId: m,
-      errorId: g,
-      ariaDescribedBy: ie,
-      selectedValueItem: ne,
-      // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
-      // The setup method and the "useSlots" composible define
-      // { slots } as a proxy of $scopedSlots and $scopes in their
-      // respective Vue version. Source: https://github.com/vuejs/composition-api/issues/84#issuecomment-524885445
-      slots: l,
-      descriptionConditionalClasses: r,
-      // Methods
-      hasSlot: he(l),
-      // Refs
-      inputContainerRef: o,
-      inputContainerRefWrapper: d,
-      optionsContainerRef: u,
-      // Events
-      clickOutsideDropdown: de,
-      toggleDropdown: z,
-      onOptionSelected: U,
-      emitShowMoreEvent: j,
-      textboxKeyboardNavigationListeners: ue,
-      listboxListeners: fe
-    };
-  }
-});
-var nt = function() {
-  var l;
-  var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.clickOutsideDropdown, expression: "clickOutsideDropdown" }], staticClass: "b-dropdown", class: e.conditionalClasses }, [e.label ? n("field-label", { attrs: { id: e.labelId, condensed: e.condensed, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), n("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [n(e.size, { ref: "inputContainerRef", tag: "component", attrs: { condensed: e.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, ariaControls: e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.computedAriaLabel, "aria-readonly": e.isReadOnly, readonly: e.isReadOnly, disabled: e.disabled, "display-value": e.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: e.isDropdownOpen, "selected-value-item": e.idDefaultSize ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(a) {
-    e.searchTerm = a;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(a, o) {
-    return { key: o, fn: function(d) {
-      return [e._t(o, null, null, d)];
-    } };
-  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": e.emptyState, "debounce-time": (l = e.search) == null ? void 0 : l.debounceTime, disabled: e.disabled, "input-size": e.size, "is-option-disabled": e.isOptionDisabled, items: e.filteredItems, multiple: e.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.value, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(a, o) {
-    return { key: o, fn: function(d) {
-      return [e._t(o, null, null, d)];
-    } };
-  })], null, !0) }, e.listboxListeners)) : e._e(), e.errorMessage ? n("error-message", { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description || e.hasSlot("description") ? n("bento-typography", { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [e._t("description", function() {
-    return [e._v(" " + e._s(e.description) + " ")];
-  })], 2) : e._e()], 1);
-}, lt = [], at = /* @__PURE__ */ I(
-  tt,
-  nt,
-  lt,
-  !1,
-  null,
-  "df383e41",
-  null,
-  null
-);
-const xt = at.exports;
-export {
-  xt as B,
-  E as a,
-  Xe as u
-};
-//# sourceMappingURL=dropdown.4152cc00.js.map