@adyen/bento-vue2 1.24.0 → 1.25.0

package/dist/chunks/dropdown.669b858b.js

@@ -1,797 +0,0 @@
-import { ref as y, watch as ne, computed as c, defineComponent as I, useSlots as le, toRefs as se, nextTick as E, useAttrs as be, toRef as O, inject as ye } from "vue";
-import { d as X, B as ge } from "./index.ba6c1040.js";
-import { D as P, a as V, b as xe, c as we, B as he } from "./dropdown-default-textbox.c1f8fe5f.js";
-import { n as A } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { g as T } from "./unique-id.a2a2b458.js";
-import { u as Se } from "./aria-label.ac9651a5.js";
-import { u as W } from "./i18n.eb5b985b.js";
-import { u as Le } from "./use-form-layout-loading.d03e5d48.js";
-import { u as Ce } from "./use-has-slot.fbeb19ec.js";
-import { b as u, a as K, B as z, u as Oe } from "./listbox.e6e1bc90.js";
-import { B as $, a as $e } from "./keyboard-navigation.ca47dfa8.js";
-import { a as ee } from "./index.51308a21.js";
-import { a as Ee } from "./index.5d5f2200.js";
-import { E as De, F as Ie } from "./error-message.8734e591.js";
-import "../assets/dropdown.css";
-var L = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(L || {});
-const Be = {
-  "en-US": {
-    apply: "Apply",
-    cancel: "Cancel",
-    noOptionsMatchThisSearch: "No options match this search"
-  }
-}, Re = (n, e, o, t) => {
-  const l = y(n.value), { t: s } = W();
-  ne(n, () => {
-    l.value = n.value;
-  });
-  const a = c(
-    () => JSON.stringify(l.value) === JSON.stringify(n.value)
-  ), i = () => {
-    t(u.SELECT, l.value), t(u.CLOSE_DROPDOWN);
-  }, d = () => {
-    l.value = n.value, t(u.CLOSE_DROPDOWN);
-  }, f = () => {
-    o.value && e.value && (l.value = n.value);
-  }, v = c(() => [
-    {
-      title: s("apply"),
-      event: i,
-      disabled: a.value
-    },
-    {
-      title: s("cancel"),
-      event: d
-    }
-  ]), b = (r) => {
-    l.value = r, e.value || t(u.SELECT, r);
-  }, C = (r) => {
-    b(r), t(u.TAB);
-  }, g = (r) => {
-    b(r), t(u.ENTER);
-  }, w = (r) => {
-    b(r), t(u.SPACE);
-  }, x = () => {
-    d(), t(u.ESCAPE);
-  }, h = () => {
-    t(u.SHOW_MORE);
-  }, S = {
-    [u.SELECT]: b,
-    [u.SHOW_MORE]: h,
-    [u.TAB]: C,
-    [u.SPACE]: w,
-    [u.ENTER]: g
-  };
-  return {
-    // Values
-    actions: v,
-    internalSelectedValue: l,
-    // Methods
-    listeners: S,
-    onEscapeKey: x,
-    onOutsideDropdownClick: f
-  };
-}, Te = I({
-  i18n: { messages: Be },
-  name: "bento-dropdown-options-container"
-}), Ae = /* @__PURE__ */ I({
-  ...Te,
-  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 },
-    /**
-     * Dropdown input size
-     */
-    inputSize: {
-      type: String,
-      default: L.DEFAULT,
-      validator: (n) => Object.values(L).includes(n)
-    },
-    /**
-     * 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
-    },
-    /**
-     * 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
-    },
-    /**
-     * 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.AUTOMATIC,
-      validator: (n) => Object.values(K).includes(n)
-    },
-    /**
-     * Indicates if new options are loading.
-     */
-    loading: { type: Boolean, default: !1 },
-    /**
-     * If enabled, the user will be able to select multiple items.
-     */
-    multiple: { 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: z.props.searching,
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 },
-    /**
-     * Reference to the DOM element or Vue component for positioning
-     * the Dropdown container.
-     */
-    targetElement: { type: ee.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
-    }
-  },
-  setup(n, { expose: e, emit: o }) {
-    const t = n, l = le(), { selectedValue: s, multiple: a } = se(t), i = y(null), { t: d } = W(), f = c(() => t.open && !t.disabled), v = c(() => d("noOptionsMatchThisSearch")), b = c(() => ({
-      "b-dropdown-options-container--single": !(t != null && t.multiple)
-    })), C = c(() => ({
-      "b-dropdown-options-container__listbox--small": t.inputSize === L.SMALL,
-      "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: g, internalSelectedValue: w, listeners: x, onEscapeKey: h, onOutsideDropdownClick: S } = Re(s, a, f, o), r = c(() => t != null && t.multiple ? Ee : ee), p = c(() => {
-      var M;
-      const _ = {
-        "min-width": `${(M = t == null ? void 0 : t.targetElement) == null ? void 0 : M.clientWidth}px`,
-        "max-width": "min(500px, 95%)"
-      };
-      return t != null && t.multiple ? {
-        actionsLayout: "space-between",
-        actions: g.value,
-        divider: !0,
-        fallbackPosition: ["top-start"],
-        id: T(`dropdown-options-${t.id}`),
-        open: t.open,
-        position: "bottom-start",
-        style: {
-          width: "auto",
-          ..._
-        },
-        targetElement: t.targetElement
-      } : {
-        fallbackPosition: ["top-start"],
-        offset: [0, 8],
-        position: "bottom-start",
-        style: {
-          display: f.value ? "block" : "none",
-          ..._
-        },
-        targetElement: t.targetElement
-      };
-    });
-    return e({
-      onOutsideDropdownClick: S
-    }), { __sfc: !0, slots: l, emit: o, props: t, selectedValue: s, multiple: a, dropdownOptionsListboxRef: i, t: d, isDropdownOpen: f, noResultsMessage: v, conditionalClasses: b, conditionalListboxClasses: C, actions: g, internalSelectedValue: w, listeners: x, onEscapeKey: h, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: r, popperContainerOrPopoverProps: p, BentoListbox: z };
-  }
-});
-var Me = function() {
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o(t.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: t.conditionalClasses }, "component", t.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : t.onEscapeKey.apply(null, arguments);
-  } } }, [o(t.BentoListbox, e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: t.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": t.internalSelectedValue, multiple: t.multiple, "static-categories": e.staticCategories, "no-results-message": t.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(t.slots, function(l, s) {
-    return { key: s, fn: function(a) {
-      return [e._t(s, null, null, a)];
-    } };
-  })], null, !0) }, t.listeners))], 1)]);
-}, Ne = [], ke = /* @__PURE__ */ A(
-  Ae,
-  Me,
-  Ne,
-  !1,
-  null,
-  "1ccfc490",
-  null,
-  null
-);
-const Fe = ke.exports;
-let te = 0;
-const Pe = {
-  beforeCreate() {
-    this.uuid = te.toString(), te += 1;
-  }
-};
-var Ke = function() {
-  var e = this, o = e._self._c;
-  return o("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"] ? o("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), o("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" } })]);
-}, ze = [], We = /* @__PURE__ */ A(
-  Pe,
-  Ke,
-  ze,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const Ue = We.exports;
-let oe = 0;
-const je = {
-  beforeCreate() {
-    this.uuid = oe.toString(), oe += 1;
-  }
-};
-var qe = function() {
-  var e = this, o = e._self._c;
-  return o("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"] ? o("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), o("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" } })]);
-}, He = [], Je = /* @__PURE__ */ A(
-  je,
-  qe,
-  He,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const Ye = Je.exports, Ze = I({
-  name: "dropdown-small-textbox",
-  inheritAttrs: !1
-}), Ge = /* @__PURE__ */ I({
-  ...Ze,
-  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: ["open", "close"],
-  setup(n, { emit: e }) {
-    const o = n, t = c(() => ({
-      [`b-dropdown-small-textbox--${P.DISABLED}`]: o.disabled,
-      [`b-dropdown-small-textbox--${P.READONLY}`]: o.readonly,
-      [`b-dropdown-small-textbox--${P.OPENED}`]: o.open
-    })), l = c(() => o.open && !o.disabled && !o.readonly), s = () => {
-      e("open");
-    }, a = () => {
-      e("close");
-    }, i = {
-      [V.OPEN]: s,
-      [V.CLOSE]: a
-    };
-    return { __sfc: !0, emit: e, props: o, conditionalClasses: t, isDropdownOpen: l, openDropdown: s, closeDropdown: a, listeners: i, DropdownBaseTextbox: xe, ChevronDownSmallIcon: Ue, ChevronUpSmallIcon: Ye };
-  }
-});
-var Qe = function() {
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o("div", { staticClass: "b-dropdown-small-textbox", class: t.conditionalClasses }, [o(t.DropdownBaseTextbox, e._g(e._b({ staticClass: "b-dropdown-small-textbox__textbox", scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [o("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [o(t.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(t.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
-  }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
-}, Xe = [], Ve = /* @__PURE__ */ A(
-  Ge,
-  Qe,
-  Xe,
-  !1,
-  null,
-  "8dbfd5fb",
-  null,
-  null
-);
-const et = Ve.exports, tt = ({ items: n, placeholder: e, selectedValue: o, staticCategories: t }) => {
-  if (o.value == null || o.value === "")
-    return e.value || null;
-  let l;
-  if (t) {
-    const s = n.value.find((a) => a.items.some((i) => i.value === o.value));
-    l = s == null ? void 0 : s.items.find((a) => a.value === o.value);
-  } else
-    l = n.value.find(({ value: s }) => s === o.value);
-  return l ? l.label : o.value.toString();
-}, ot = ({ selectedValues: n, items: e, placeholder: o }) => {
-  var t;
-  return !n.value || ((t = n.value) == null ? void 0 : t.length) === 0 ? o.value || null : n.value.map((l) => {
-    const s = e.value.find(({ value: a }) => a === l);
-    return s ? s.label : l;
-  }).join(", ");
-}, nt = ({ selectedValues: n, items: e, placeholder: o }) => {
-  var t;
-  return !n.value || !((t = n.value) != null && t.length) ? o.value || null : e.value.reduce((l, s) => {
-    if (s.items) {
-      const a = s.items.filter(
-        (d) => n.value.includes(d.value)
-      );
-      a.length === s.items.length ? l.push(s.label) : a.forEach(({ label: d }) => l.push(d));
-    }
-    return n.value.includes(s.value) && l.push(s.label), l;
-  }, []).join(", ");
-}, lt = ({ items: n, placeholder: e, value: o, multiple: t, staticCategories: l }) => {
-  const s = c(() => n.value.find((i) => {
-    var d;
-    return (d = i.items) == null ? void 0 : d.length;
-  }));
-  return c(() => t.value ? s.value ? nt({ selectedValues: o, placeholder: e, items: n }) : ot({ selectedValues: o, items: n, placeholder: e }) : tt({
-    items: n,
-    placeholder: e,
-    selectedValue: o,
-    staticCategories: l.value
-  }));
-}, ae = (n) => {
-  var e;
-  (e = n.value.$children) == null || e[0].$refs.textbox.focus();
-}, st = ({
-  inputContainerRef: n,
-  optionsContainerRef: e,
-  selectedValueIndex: o,
-  isDropdownOpen: t,
-  isDynamicFltering: l,
-  items: s,
-  isMultiple: a
-}, i, d, f) => {
-  const v = ({ detail: r }) => {
-    r.preventDefault(), t.value || (d(), E(() => {
-      var p, _;
-      a ? (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (_ = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[o.value].$el.focus();
-    }));
-  }, b = ({ detail: r }) => {
-    r.preventDefault(), t.value || (d(), E(() => {
-      var p;
-      (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
-    }));
-  }, C = () => {
-    t.value || (d(), E(() => {
-      var r, p;
-      if (a) {
-        const _ = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[_.length - 1].$children[s.length - 1].$el.focus();
-      } else
-        (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[s.length - 1].$el.focus();
-    }));
-  }, g = () => {
-    t.value && (f(), ae(n));
-  }, w = () => {
-    t.value || d(), E(() => {
-      var r;
-      (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[0].$el.focus();
-    });
-  }, x = ({ detail: r }) => {
-    r.preventDefault(), i(), t.value && E(() => {
-      var p, _;
-      a ? (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (_ = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[o.value].$el.focus();
-    });
-  }, h = () => {
-    i(), t.value && E(() => {
-      var r, p;
-      a ? (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[0].$el.focus() : (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[o.value].$el.focus();
-    });
-  };
-  return c(() => ({
-    ...l.value ? {} : { [$.SPACE]: x },
-    [$.ENTER]: h,
-    [$.ARROW_DOWN]: v,
-    [$.ARROW_UP]: b,
-    [$.END]: C,
-    [$.ESCAPE]: g,
-    [$.HOME]: w
-  }));
-}, at = ({ inputContainerRef: n, isDropdownOpen: e }, o) => {
-  const t = () => {
-    e.value && o(), E(() => {
-      ae(n);
-    });
-  };
-  return {
-    [u.ENTER]: t,
-    [u.ESCAPE]: t,
-    [u.TAB]: t,
-    [u.SPACE]: t
-  };
-};
-function it(n, e, o) {
-  const t = y(n), l = y(e), s = (i, d = []) => d.flatMap((f) => f.label.toLocaleLowerCase().includes(i) ? [f, ...s(i, f.items)] : f.items ? [...s(i, f.items)] : []);
-  return ne(t, () => {
-    o !== void 0 && o(t.value);
-  }), c(() => {
-    if (!t.value || o !== void 0)
-      return l.value;
-    const i = t.value.toLocaleLowerCase();
-    return s(i, l.value);
-  });
-}
-const rt = {
-  "en-US": {
-    all: "All",
-    clearSearch: "Clear filter",
-    ariaLabelFallback: "Dropdown"
-  }
-}, dt = Symbol("input field component injection key"), ut = I({
-  i18n: { messages: rt },
-  name: "b-dropdown",
-  components: {
-    DropdownInputDefault: we,
-    DropdownInputSmall: et
-  }
-}), ct = /* @__PURE__ */ I({
-  ...ut,
-  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 },
-    /**
-     * 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 },
-    /**
-     * 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: () => []
-    },
-    /**
-     * Text that is displayed as a label above the element.
-     */
-    label: { type: String, default: null },
-    /**
-     * 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: z.props.lazyLoadType.default,
-      validator: (n) => Object.values(K).includes(n)
-    },
-    /*
-     * 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 },
-    /**
-     * Text that appears in the form control when it has no value set
-     */
-    placeholder: { type: String, default: null },
-    /**
-     * Sets the dropdown to readonly state
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Highlights the dropdown is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Dropdown search options and events.
-     * @see BentoDropdownSearchOptions
-     */
-    search: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.
-     */
-    showSlotContentInMultiple: { type: Boolean, default: !1 },
-    /**
-     * @deprecated Do not use. Only 'default' size should be used.
-     */
-    size: {
-      type: String,
-      default: null,
-      validator: (n) => Object.values(L).includes(n)
-    },
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 },
-    /**
-     * Adds a info icon next to the label to display the passed tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * 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
-    }
-  },
-  emits: ["input", "show-more"],
-  setup(n, { emit: e }) {
-    var Q;
-    const o = n, t = be(), l = le(), s = Ce(l), { t: a } = W(), i = y(null), d = y(null), f = y(null), v = y(!1), b = T("bento-dropdown-options-container"), C = T("dropdown-label"), g = T("dropdown-description"), w = T("dropdown-error"), { isReadOnly: x } = Le(O(o, "readonly")), h = y(t["aria-label"]), { ariaLabel: S } = se(o), r = Se({
-      ariaLabel: h.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: S,
-      defaultFallback: a("ariaLabelFallback")
-    }), p = o.size === L.SMALL || ye(dt, !1), _ = c(() => p ? L.SMALL : L.DEFAULT), M = c(() => ({
-      "b-dropdown--condensed": o.condensed
-    })), ie = c(() => ({
-      "b-dropdown__description--error": !!o.errorMessage
-    })), D = y(""), B = O(o, "items"), re = it(D, B, (Q = o == null ? void 0 : o.search) == null ? void 0 : Q.searchEvent), F = c(() => o.dynamicFiltering && !!D.value), de = lt({
-      items: B,
-      staticCategories: O(o, "staticCategories"),
-      multiple: O(o, "multiple"),
-      placeholder: O(o, "placeholder"),
-      value: O(o, "value")
-    }), ue = c(() => {
-      if (o != null && o.multiple)
-        return o.items.filter(
-          ({ value: m }) => (o == null ? void 0 : o.value) && (o == null ? void 0 : o.value).includes(m)
-        );
-      if (!o.multiple && o.staticCategories) {
-        const m = o.items.find(
-          (k) => k.items.some((_e) => _e.value === o.value)
-        );
-        return m ? m.items.find((k) => k.value === o.value) : null;
-      }
-      return o.items.find(({ value: m }) => m === (o == null ? void 0 : o.value));
-    }), U = c(() => {
-      const m = o.items.findIndex(({ value: R }) => o.value === R);
-      return m > 0 ? m : 0;
-    }), { isMultiLevelSelect: j, flattenedItemsList: q } = Oe(B), ce = c(() => {
-      var m;
-      if (o.multiple) {
-        const R = (m = o == null ? void 0 : o.value) == null ? void 0 : m.length;
-        return (j.value ? q.value.length : B.value.length) === R ? a("all") : R;
-      }
-      return null;
-    }), pe = c(
-      () => `${o.description ? g : ""} ${o.errorMessage ? w : ""}`.trim() || null
-    ), H = () => {
-      x.value || (v.value = !0);
-    }, N = () => {
-      v.value = !1;
-    }, J = () => {
-      x.value || (v.value = !v.value, F.value && (D.value = ""));
-    }, fe = () => {
-      F.value && (D.value = ""), v.value && (v.value = !1, f.value.onOutsideDropdownClick());
-    }, Y = (m) => {
-      o.multiple || (D.value = "", v.value = !1), e("input", m);
-    }, Z = () => {
-      e(u.SHOW_MORE);
-    }, ve = st(
-      {
-        inputContainerRef: i,
-        optionsContainerRef: f,
-        selectedValueIndex: U,
-        isDropdownOpen: v,
-        isDynamicFltering: O(o, "dynamicFiltering"),
-        items: o.items,
-        isMultiple: o.multiple
-      },
-      J,
-      H,
-      N
-    ), G = at(
-      {
-        inputContainerRef: i,
-        isDropdownOpen: v
-      },
-      N
-    ), me = {
-      [u.CLOSE_DROPDOWN]: N,
-      [u.SELECT]: Y,
-      [u.SHOW_MORE]: Z,
-      ...G
-    };
-    return o.error && X(
-      '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"
-    ), o.size && X('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), { __sfc: !0, attrs: t, slots: l, hasSlot: s, props: o, emit: e, t: a, inputContainerRef: i, inputContainerRefWrapper: d, optionsContainerRef: f, isDropdownOpen: v, dropdownOptionsContainerId: b, labelId: C, descriptionId: g, errorId: w, isReadOnly: x, ariaLabelAttribute: h, ariaLabel: S, computedAriaLabel: r, isInputComponent: p, size: _, conditionalClasses: M, descriptionConditionalClasses: ie, searchTerm: D, items: B, filteredItems: re, isSearching: F, displayValue: de, selectedValueItem: ue, selectedValueIndex: U, isMultiLevelSelect: j, flattenedItemsList: q, additionalItemsSelected: ce, ariaDescribedBy: pe, openDropdown: H, closeDropdown: N, toggleDropdown: J, clickOutsideDropdown: fe, onOptionSelected: Y, emitShowMoreEvent: Z, textboxKeyboardNavigationListeners: ve, listboxKeyboardNavigationListeners: G, listboxListeners: me, BentoDropdownOptionsContainer: Fe, BentoTypography: ge, ErrorMessage: De, FieldLabel: Ie, vBentoClickOutsideDirective: he, vBentoKeyboardNavigationDirective: $e };
-  }
-});
-var pt = function() {
-  var l;
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdown, expression: "clickOutsideDropdown" }], staticClass: "b-dropdown", class: t.conditionalClasses }, [e.label ? o(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), o("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, t.textboxKeyboardNavigationListeners), [o(t.size, { ref: "inputContainerRef", tag: "component", attrs: { condensed: e.condensed, value: t.searchTerm, "additional-items-selected": t.additionalItemsSelected, ariaControls: t.dropdownOptionsContainerId, ariaExpanded: t.isDropdownOpen, "aria-labelledby": e.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": t.computedAriaLabel, "aria-readonly": t.isReadOnly, readonly: t.isReadOnly, disabled: e.disabled, "display-value": t.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: t.isDropdownOpen, "selected-value-item": t.isInputComponent ? void 0 : t.selectedValueItem, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(s) {
-    t.searchTerm = s;
-  }, open: t.toggleDropdown, close: t.toggleDropdown }, scopedSlots: e._u([e._l(t.slots, function(s, a) {
-    return { key: a, fn: function(i) {
-      return [e._t(a, null, null, i)];
-    } };
-  })], null, !0) })], 1), t.inputContainerRef ? o(t.BentoDropdownOptionsContainer, e._g({ ref: "optionsContainerRef", attrs: { id: t.dropdownOptionsContainerId, "aria-label": t.computedAriaLabel, "empty-state": e.emptyState, "debounce-time": (l = e.search) == null ? void 0 : l.debounceTime, disabled: e.disabled, "input-size": t.size, "is-option-disabled": e.isOptionDisabled, items: t.filteredItems, multiple: e.multiple, "static-categories": e.staticCategories, open: t.isDropdownOpen, "selected-value": e.value, searching: t.isSearching, "target-element": t.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(s, a) {
-    return { key: a, fn: function(i) {
-      return [e._t(a, null, null, i)];
-    } };
-  })], null, !0) }, t.listboxListeners)) : e._e(), e.errorMessage ? o(t.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: t.errorId, "error-message": e.errorMessage } }) : e._e(), e.description || t.hasSlot("description") ? o(t.BentoTypography, { staticClass: "b-dropdown__description", class: t.descriptionConditionalClasses, attrs: { id: t.descriptionId, el: "span" } }, [e._t("description", function() {
-    return [e._v(" " + e._s(e.description) + " ")];
-  })], 2) : e._e()], 1);
-}, ft = [], vt = /* @__PURE__ */ A(
-  ct,
-  pt,
-  ft,
-  !1,
-  null,
-  "c2829fb3",
-  null,
-  null
-);
-const Dt = vt.exports;
-export {
-  Dt as B,
-  dt as I,
-  L as a,
-  it as u
-};
-//# sourceMappingURL=dropdown.669b858b.js.map