@adyen/bento-vue2 1.59.0 → 1.60.0

package/dist/chunks/dropdown.DYN8Okpo.js

@@ -1,818 +0,0 @@
-import { ref as C, watch as ue, computed as p, defineComponent as A, useSlots as pe, toRefs as fe, nextTick as L, useAttrs as Le, toRef as x, inject as Oe } from "vue";
-import { d as ie, B as Ee } from "./typography.J1v_SPG3.js";
-import { g as P } from "./generate-uid.NJ8tVoha.js";
-import { u as De } from "./aria-label.CaUURpnB.js";
-import { u as V } from "./i18n.BQkEbtPM.js";
-import { u as Be } from "./use-form-layout-loading.D3lALhtC.js";
-import { a as U, b as M, c as Ie, B as k, D as Te } from "./dropdown-default-textbox.AUsF-RIc.js";
-import { u as Ne } from "./use-has-slot.C9lQZ6nz.js";
-import { a as u, b as H, B as J, c as Ae, u as Re } from "./use-cached-selected-values.C6VRhL5_.js";
-import { B as D, a as $e } from "./keyboard-navigation.pB8weElW.js";
-import { B as Me } from "./directive.Cbdox5VL.js";
-import { F as Pe, E as ke } from "./error-message.BM8Y6-u5.js";
-import { P as re } from "./popper-container.DUNt7nKd.js";
-import { B as Fe } from "./popover.K53VtitI.js";
-import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-/* empty css              */
-import { s as q } from "./events.CMzGybJJ.js";
-import "../assets/dropdown.css";
-const Ke = {
-  "en-US": {
-    apply: "Apply",
-    cancel: "Cancel",
-    noOptionsMatchThisSearch: "No options match this search"
-  },
-  "ja-JP": {
-    apply: "適用",
-    cancel: "キャンセル"
-  },
-  "pt-BR": {
-    apply: "Aplicar",
-    cancel: "Cancelar"
-  }
-}, ze = (a, t, o, e) => {
-  const n = C(a.value), { t: l } = V();
-  ue(a, () => {
-    n.value = a.value;
-  });
-  const s = p(
-    () => JSON.stringify(n.value) === JSON.stringify(a.value)
-  ), i = () => {
-    e(u.SELECT, n.value), e(u.CLOSE_DROPDOWN);
-  }, c = () => {
-    n.value = a.value, e(u.CLOSE_DROPDOWN);
-  }, m = () => {
-    o.value && t.value && (n.value = a.value);
-  }, r = p(() => [
-    {
-      title: l("apply"),
-      event: i,
-      disabled: s.value
-    },
-    {
-      title: l("cancel"),
-      event: c
-    }
-  ]), d = (y) => {
-    n.value = y, t.value || e(u.SELECT, y);
-  }, g = (y) => {
-    d(y), e(u.TAB);
-  }, h = (y) => {
-    d(y), e(u.ENTER);
-  }, v = (y) => {
-    d(y), e(u.SPACE);
-  }, O = () => {
-    c(), e(u.ESCAPE);
-  }, S = () => {
-    e(u.SHOW_MORE);
-  }, w = {
-    [u.SELECT]: d,
-    [u.SHOW_MORE]: S,
-    [u.TAB]: g,
-    [u.SPACE]: v,
-    [u.ENTER]: h
-  };
-  return {
-    // Values
-    actions: r,
-    internalSelectedValue: n,
-    // Methods
-    listeners: w,
-    onEscapeKey: O,
-    onOutsideDropdownClick: m
-  };
-}, je = A({
-  i18n: { messages: Ke },
-  name: "bento-dropdown-options-container"
-}), We = /* @__PURE__ */ A({
-  ...je,
-  props: {
-    /**
-     * Defines a string value that labels an interactive element.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Indicates that dropdown items are loading
-     */
-    componentLoading: { 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 },
-    /**
-     * 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
-    },
-    /**
-     * 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: J.AUTOMATIC,
-      validator: (a) => Object.values(J).includes(a)
-    },
-    /**
-     * Indicates if new options are lazy 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: 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: H.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: re.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: [],
-  setup(a, { expose: t, emit: o }) {
-    const e = a, n = pe(), { selectedValue: l, multiple: s } = fe(e), i = C(null), { t: c } = V(), m = p(() => e.open && !e.disabled), r = p(() => c("noOptionsMatchThisSearch")), d = p(() => ({
-      "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), g = p(() => ({
-      "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: S, onOutsideDropdownClick: w } = ze(l, s, m, o), y = p(() => e != null && e.multiple ? Fe : re), I = p(() => {
-      var T;
-      const B = {
-        "min-width": `${(T = e == null ? void 0 : e.targetElement) == null ? void 0 : T.clientWidth}px`,
-        "max-width": "min(500px, 95%)"
-      };
-      return e != null && e.multiple ? {
-        actionsLayout: "space-between",
-        actions: h.value,
-        divider: !0,
-        fallbackPosition: ["top-start"],
-        id: P(`dropdown-options-${e.id}`),
-        open: e.open,
-        position: "bottom-start",
-        style: {
-          width: "auto",
-          ...B
-        },
-        targetElement: e.targetElement
-      } : {
-        fallbackPosition: ["top-start"],
-        offset: [0, 8],
-        position: "bottom-start",
-        style: {
-          display: m.value ? "block" : "none",
-          ...B
-        },
-        targetElement: e.targetElement
-      };
-    });
-    return t({
-      onOutsideDropdownClick: w
-    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: m, noResultsMessage: r, conditionalClasses: d, conditionalListboxClasses: g, actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: S, onOutsideDropdownClick: w, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: I, BentoListbox: H };
-  }
-});
-var Ue = function() {
-  var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses, attrs: { "aria-label": t.ariaLabel } }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(n) {
-    return !n.type.indexOf("key") && t._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(n, l) {
-    return { key: l, fn: function(s) {
-      return [t._t(l, null, null, s)];
-    } };
-  })], null, !0) }, e.listeners))], 1)]);
-}, qe = [], He = /* @__PURE__ */ F(
-  We,
-  Ue,
-  qe,
-  !1,
-  null,
-  "35feb278"
-);
-const Je = He.exports;
-let de = 0;
-const Ve = {
-  beforeCreate() {
-    this.uuid = de.toString(), de += 1;
-  }
-};
-var Ye = function() {
-  var t = this, o = t._self._c;
-  return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._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 = [], Qe = /* @__PURE__ */ F(
-  Ve,
-  Ye,
-  Ze,
-  !1,
-  null,
-  null
-);
-const Xe = Qe.exports;
-let ce = 0;
-const Ge = {
-  beforeCreate() {
-    this.uuid = ce.toString(), ce += 1;
-  }
-};
-var et = function() {
-  var t = this, o = t._self._c;
-  return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._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" } })]);
-}, tt = [], ot = /* @__PURE__ */ F(
-  Ge,
-  et,
-  tt,
-  !1,
-  null,
-  null
-);
-const nt = ot.exports, at = A({
-  name: "dropdown-small-textbox",
-  inheritAttrs: !1
-}), st = /* @__PURE__ */ A({
-  ...at,
-  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: ["clear", "close", "input", "keydown", "open"],
-  setup(a, { expose: t, emit: o }) {
-    const e = a, n = C(null), l = p(() => ({
-      [`b-dropdown-small-textbox--${U.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${U.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${U.OPENED}`]: e.open
-    })), s = p(() => e.open && !e.disabled && !e.readonly), i = (v) => {
-      o("input", v);
-    }, c = (v) => {
-      o("keydown", v);
-    }, m = (v) => {
-      q(v), o("open");
-    }, r = (v) => {
-      q(v), o("close");
-    }, d = (v) => {
-      q(v), o("clear");
-    }, g = {
-      [M.INPUT]: i,
-      [M.OPEN]: m,
-      [M.CLOSE]: r,
-      [M.CLEAR]: d,
-      [M.KEYDOWN]: c
-    }, h = () => {
-      n.value.focus();
-    };
-    return t({
-      focus: h
-    }), { __sfc: !0, emit: o, props: e, baseTextbox: n, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: m, closeDropdown: r, clearValue: d, listeners: g, focus: h, BentoDropdownSize: k, DropdownBaseTextbox: Ie, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: nt };
-  }
-});
-var lt = function() {
-  var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [o(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: e.BentoDropdownSize.SMALL }, scopedSlots: t._u([{ key: "icon", fn: function() {
-    return [o("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [o(e.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(e.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
-  }, proxy: !0 }]) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, it = [], rt = /* @__PURE__ */ F(
-  st,
-  lt,
-  it,
-  !1,
-  null,
-  "d0e53db8"
-);
-const dt = rt.exports, ct = (a, t) => t.value.reduce((o, e) => {
-  if (e.items) {
-    const n = e.items.filter(
-      (s) => a.value.find((i) => i.value === s.value)
-    );
-    n.length === e.items.length ? o.push(e.displayValue ?? e.label) : n.forEach(({ label: s, displayValue: i }) => o.push(i ?? s));
-  }
-  return a.value.find((n) => n.value === e.value) && o.push(e.displayValue ?? e.label), o;
-}, []).join(", "), ut = ({ items: a, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
-  const n = p(
-    () => e.value && a.value.find((s) => {
-      var i;
-      return (i = s.items) == null ? void 0 : i.length;
-    })
-  );
-  return p(() => o.value.length ? n.value ? ct(o, a) : o.value.map(({ label: s, displayValue: i }) => i ?? s).join(", ") : t.value || null);
-}, ve = (a) => {
-  var t;
-  (t = a.value.$children) == null || t[0].$refs.textbox.focus();
-}, pt = ({
-  inputContainerRef: a,
-  optionsContainerRef: t,
-  selectedValueIndex: o,
-  isDropdownOpen: e,
-  isDynamicFltering: n,
-  items: l,
-  isMultiple: s
-}, i, c, m) => {
-  const r = async (f) => {
-    var b, E;
-    n.value && await L(), (E = (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : b.$el.querySelectorAll('[role="option"]')[f]) == null || E.focus();
-  }, d = async (f) => {
-    var E, K;
-    n.value && await L();
-    const b = (E = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : E.$el.querySelectorAll(
-      "button"
-    );
-    b.length ? (K = b[f]) == null || K.focus() : r(f);
-  }, g = (f) => {
-    var b;
-    return (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : b.setListboxFocusedIndex(
-      f
-    );
-  }, h = ({ detail: f }) => {
-    f.preventDefault(), e.value || c(), L(() => {
-      s ? d(0) : (g(o.value), r(o.value));
-    });
-  }, v = ({ detail: f }) => {
-    f.preventDefault(), e.value || c(), L(() => {
-      s ? d(0) : (g(o.value), r(o.value));
-    });
-  }, O = () => {
-    e.value || (c(), L(() => {
-      var f;
-      if (s) {
-        const b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (f = b == null ? void 0 : b[b.length - 1].$el.querySelectorAll('[role="option"]')[l.length - 1]) == null || f.focus();
-      } else
-        g(l.length - 1), r(l.length - 1);
-    }));
-  }, S = () => {
-    e.value && (m(), ve(a));
-  }, w = () => {
-    e.value && m();
-  }, y = () => {
-    e.value || c(), L(() => {
-      s ? d(0) : r(0);
-    });
-  }, I = ({ detail: f }) => {
-    f.preventDefault(), i(), e.value && L(() => {
-      s ? d(0) : (g(o.value), r(o.value));
-    });
-  }, B = ({ detail: f }) => {
-    f.preventDefault(), i(), e.value && L(() => {
-      s ? d(0) : (g(o.value), r(o.value));
-    });
-  };
-  return p(() => ({
-    ...n.value ? {} : { [D.SPACE]: I },
-    [D.ENTER]: B,
-    [D.ARROW_DOWN]: h,
-    [D.ARROW_UP]: v,
-    [D.END]: O,
-    [D.ESCAPE]: S,
-    [D.HOME]: y,
-    [D.TAB]: w
-  }));
-}, ft = ({ inputContainerRef: a, isDropdownOpen: t }, o) => {
-  const e = () => {
-    t.value && o(), L(() => {
-      ve(a);
-    });
-  };
-  return {
-    [u.ENTER]: e,
-    [u.ESCAPE]: e,
-    [u.TAB]: e,
-    [u.SPACE]: e
-  };
-};
-function vt(a, t, o, e) {
-  const n = C(a), l = C(t), s = (c, m = []) => m.flatMap((r) => r.label.toLocaleLowerCase().includes(c) ? e != null && e.value && r.items ? [...s(c, r.items)] : [r, ...s(c, r.items)] : r.items ? [...s(c, r.items)] : []);
-  return ue(n, () => {
-    o !== void 0 && o(n.value);
-  }), p(() => {
-    if (!n.value || o !== void 0)
-      return l.value;
-    const c = n.value.toLocaleLowerCase();
-    return s(c, l.value);
-  });
-}
-const mt = {
-  "en-US": {
-    all: "All",
-    ariaLabelFallback: "Dropdown",
-    clearSearch: "Clear filter"
-  },
-  "ja-JP": {
-    all: "すべて",
-    clearFilter: "フィルターをクリア"
-  },
-  "pt-BR": {
-    all: "Todos",
-    clearFilter: "Limpar filtro"
-  }
-}, yt = Symbol("input field component injection key"), Ft = Symbol("input field hint injection key"), Kt = Symbol("input field parent component injection key"), bt = A({
-  i18n: { messages: mt },
-  name: "b-dropdown",
-  components: {
-    DropdownInputDefault: Te,
-    DropdownInputSmall: dt
-  }
-}), _t = /* @__PURE__ */ A({
-  ...bt,
-  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 lazy loading.
-     */
-    loading: { type: Boolean, default: !1 },
-    /**
-     * Indicates that dropdown items are loading
-     */
-    componentLoading: { 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: H.props.lazyLoadType.default,
-      validator: (a) => Object.values(J).includes(a)
-    },
-    /*
-     * 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: (a) => Object.values(k).includes(a)
-    },
-    /**
-     * 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(a, { expose: t, emit: o }) {
-    var le;
-    const e = a, n = Le(), l = pe(), s = Ne(l), { t: i } = V(), c = C(null), m = C(null), r = C(null), d = C(!1), g = P("bento-dropdown-options-container"), h = P("dropdown-label"), v = P("dropdown-description"), O = P("dropdown-error"), { isReadOnly: S } = Be(x(e, "readonly")), { cachedSelectedListboxOptions: w, cachedListboxSelectedValues: y, setCachedValues: I } = Ae(
-      x(e, "items"),
-      x(e, "value"),
-      x(e, "multiple")
-    ), B = C(n["aria-label"]), { ariaLabel: T, label: f } = fe(e), b = De({
-      // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: T.value || B,
-      label: f,
-      defaultFallback: i("ariaLabelFallback")
-    }), E = e.size === k.SMALL || Oe(yt, !1), K = p(() => E ? k.SMALL : k.DEFAULT), me = p(() => ({
-      "b-dropdown--condensed": e.condensed
-    })), ye = p(() => ({
-      "b-dropdown__description--error": !!e.errorMessage
-    })), N = C(""), R = x(e, "items"), Y = x(e, "staticCategories"), Z = vt(N, R, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent, Y), j = p(() => e.dynamicFiltering && !!N.value), be = ut({
-      items: R,
-      placeholder: x(e, "placeholder"),
-      isMultiSelect: x(e, "multiple"),
-      selectedValues: w
-    }), _e = p(() => {
-      if (e != null && e.multiple && Array.isArray(e.value))
-        return e.items.filter(
-          ({ value: _ }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(_)
-        );
-      if (!e.multiple && e.staticCategories) {
-        const _ = e.items.find(
-          (W) => W.items.some((xe) => xe.value === e.value)
-        );
-        return _ ? _.items.find((W) => W.value === e.value) : null;
-      }
-      return e.items.find(({ value: _ }) => _ === (e == null ? void 0 : e.value));
-    }), Q = p(() => {
-      const _ = Z.value.findIndex(({ value: $ }) => e.value === $);
-      return _ > -1 ? _ : 0;
-    }), { isMultiLevelSelect: X, flattenedItemsList: G } = Re(R), ge = p(() => {
-      if (e.multiple) {
-        const _ = Array.isArray(e.value) ? e.value.length : 0, $ = X.value ? G.value.length : R.value.length;
-        return _ === 0 ? null : !e.hasMoreItems && $ > 0 && $ === _ ? i("all") : _;
-      }
-      return null;
-    }), he = p(
-      () => `${e.description ? v : ""} ${e.errorMessage ? O : ""}`.trim() || null
-    ), ee = () => {
-      S.value || (d.value = !0);
-    }, z = () => {
-      d.value = !1;
-    }, te = () => {
-      S.value || (d.value = !d.value, j.value && (N.value = ""));
-    }, Ce = () => {
-      j.value && (N.value = ""), d.value && (d.value = !1, r.value.onOutsideDropdownClick());
-    }, oe = (_) => {
-      e.multiple || (N.value = "", d.value = !1), I(_), o("input", y.value);
-    }, ne = () => {
-      o(u.SHOW_MORE);
-    }, Se = pt(
-      {
-        inputContainerRef: c,
-        optionsContainerRef: r,
-        selectedValueIndex: Q,
-        isDropdownOpen: d,
-        isDynamicFltering: x(e, "dynamicFiltering"),
-        items: e.items,
-        isMultiple: e.multiple
-      },
-      te,
-      ee,
-      z
-    ), ae = ft(
-      {
-        inputContainerRef: c,
-        isDropdownOpen: d
-      },
-      z
-    ), we = {
-      [u.CLOSE_DROPDOWN]: z,
-      [u.SELECT]: oe,
-      [u.SHOW_MORE]: ne,
-      ...ae
-    };
-    e.error && ie(
-      '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"
-    ), e.size && ie('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
-    const se = () => {
-      c.value.focus();
-    };
-    return t({
-      focus: se
-    }), { __sfc: !0, attrs: n, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: m, optionsContainerRef: r, isDropdownOpen: d, dropdownOptionsContainerId: g, labelId: h, descriptionId: v, errorId: O, isReadOnly: S, cachedSelectedListboxOptions: w, cachedListboxSelectedValues: y, setCachedValues: I, ariaLabelAttribute: B, ariaLabel: T, label: f, computedAriaLabel: b, isInputComponent: E, computedSize: K, conditionalClasses: me, descriptionConditionalClasses: ye, searchTerm: N, items: R, staticCategories: Y, filteredItems: Z, isSearching: j, displayValue: be, selectedValueItem: _e, selectedValueIndex: Q, isMultiLevelSelect: X, flattenedItemsList: G, additionalItemsSelected: ge, ariaDescribedBy: he, openDropdown: ee, closeDropdown: z, toggleDropdown: te, clickOutsideDropdown: Ce, onOptionSelected: oe, emitShowMoreEvent: ne, textboxKeyboardNavigationListeners: Se, listboxKeyboardNavigationListeners: ae, listboxListeners: we, focus: se, BentoDropdownOptionsContainer: Je, BentoTypography: Ee, ErrorMessage: ke, FieldLabel: Pe, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: $e };
-  }
-});
-var gt = function() {
-  var n;
-  var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o("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 ? o(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: e.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), o("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [o(e.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.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: t.disabled, "display-value": e.displayValue, "dynamic-filtering": t.dynamicFiltering, "is-invalid": !!t.errorMessage || t.error, multiple: t.multiple, open: e.isDropdownOpen, "selected-value-item": e.isInputComponent ? void 0 : e.selectedValueItem, "show-slot-content-in-multiple": t.showSlotContentInMultiple }, on: { input: function(l) {
-    e.searchTerm = l;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
-    return { key: s, fn: function(i) {
-      return [t._t(s, null, null, i)];
-    } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "debounce-time": (n = t.search) == null ? void 0 : n.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
-    return { key: s, fn: function(i) {
-      return [t._t(s, null, null, i)];
-    } };
-  })], null, !0) }, e.listboxListeners)) : t._e(), t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? o(e.BentoTypography, { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [t._t("description", function() {
-    return [t._v(" " + t._s(t.description) + " ")];
-  })], 2) : t._e()], 1);
-}, ht = [], Ct = /* @__PURE__ */ F(
-  _t,
-  gt,
-  ht,
-  !1,
-  null,
-  "01f9156a"
-);
-const zt = Ct.exports;
-export {
-  zt as B,
-  Ft as I,
-  yt as a,
-  Kt as b,
-  vt as u
-};
-//# sourceMappingURL=dropdown.DYN8Okpo.js.map