@adyen/bento-vue2 1.89.2 → 1.91.0

package/dist/chunks/dropdown.Ca-f8tdX.js

@@ -0,0 +1,1140 @@
+import { ref as w, watch as j, computed as s, defineComponent as D, useSlots as H, toRefs as xe, useAttrs as we, nextTick as O, toRef as T, inject as $e } from "vue";
+import { B as Ce, d as te } from "./typography.C8lPlsbD.js";
+import { g as $ } from "./generate-uid.NJ8tVoha.js";
+import { u as Y } from "./index.B6WW_F-J.js";
+import { u as Le } from "./use-has-slot.C9lQZ6nz.js";
+import { C as Ve } from "./cross-circle-fill.DTDtgLMf.js";
+import { C as Ke } from "./cross-circle-fill-small.DfxDedRr.js";
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { s as V } from "./events.BQOQSSb7.js";
+import { C as qe } from "./chevron-down.eYtgv5ly.js";
+import { C as ze } from "./chevron-up.d8cwIlA_.js";
+/* empty css              */
+import { u as Ue } from "./aria-label.CaUURpnB.js";
+import { u as We } from "./form-field.D_2g7vaP.js";
+import { B as m, b as ae, a as _e, d as je, u as He, c as Ye, e as Je } from "./use-cached-selected-values.BJbWbkEQ.js";
+import { u as Xe } from "./use-form-layout-loading.CWbjZiwP.js";
+import { B as k, a as Ze } from "./keyboard-navigation.DWmhelVv.js";
+import { B as Qe } from "./directive.Bfr4fuOy.js";
+import { F as Ge } from "./field-label.DjjjkcO6.js";
+import { E as et } from "./error-message.CyERcfdt.js";
+import { P as he } from "./popper-container.C_n9Ds1W.js";
+import { h as tt } from "./button-actions.Bdbu0bvt.js";
+import "../assets/dropdown.css";
+var K = /* @__PURE__ */ ((l) => (l.DEFAULT = "DropdownInputDefault", l.SMALL = "DropdownInputSmall", l))(K || {});
+const at = {
+  "de-DE": {
+    apply: "Anwenden",
+    cancel: "Abbrechen",
+    noOptionsMatchThisSearch: "Für diese Suche wurden keine Ergebnisse gefunden."
+  },
+  "en-GB": {
+    apply: "Apply",
+    cancel: "Cancel",
+    noOptionsMatchThisSearch: "No options match this search"
+  },
+  "en-US": {
+    apply: "Apply",
+    cancel: "Cancel",
+    noOptionsMatchThisSearch: "No options match this search"
+  },
+  "es-ES": {
+    apply: "Aplicar",
+    cancel: "Cancelar",
+    noOptionsMatchThisSearch: "No hay opciones que coincidan con esta búsqueda"
+  },
+  "es-MX": {
+    apply: "Aplicar",
+    cancel: "Cancelar",
+    noOptionsMatchThisSearch: "No hay opciones que coincidan con esta búsqueda"
+  },
+  "fr-FR": {
+    apply: "Appliquer",
+    cancel: "Annuler",
+    noOptionsMatchThisSearch: "Aucune option ne correspond à cette recherche"
+  },
+  "it-IT": {
+    apply: "Applica",
+    cancel: "Annulla",
+    noOptionsMatchThisSearch: "Nessun risultato corrispondente a questa ricerca"
+  },
+  "ja-JP": {
+    apply: "適用",
+    cancel: "キャンセル",
+    noOptionsMatchThisSearch: "この検索に一致するオプションはありません"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    cancel: "Cancelar",
+    noOptionsMatchThisSearch: "Nenhuma opção corresponde a esta busca"
+  },
+  "zh-CN": {
+    apply: "应用",
+    cancel: "取消",
+    noOptionsMatchThisSearch: "没有符合此搜索条件的选项"
+  }
+}, ot = (l, t, a, e) => {
+  const o = w(l.value), { t: n } = Y();
+  j(l, () => {
+    o.value = l.value;
+  });
+  const r = s(
+    () => JSON.stringify(o.value) === JSON.stringify(l.value)
+  ), d = () => {
+    e(m.SELECT, o.value), e(m.CLOSE_DROPDOWN);
+  }, c = () => {
+    o.value = l.value, e(m.CLOSE_DROPDOWN);
+  }, y = () => {
+    a.value && t.value && (o.value = l.value);
+  }, u = s(() => [
+    {
+      title: n("apply"),
+      event: d,
+      disabled: r.value
+    },
+    {
+      title: n("cancel"),
+      event: c
+    }
+  ]), p = (f) => {
+    o.value = f, t.value || e(m.SELECT, f);
+  }, i = (f) => {
+    p(f), e(m.TAB);
+  }, x = (f) => {
+    p(f), e(m.ENTER);
+  }, b = (f) => {
+    p(f), e(m.SPACE);
+  }, _ = () => {
+    c(), e(m.ESCAPE);
+  }, C = () => {
+    e(m.SHOW_MORE);
+  }, L = {
+    [m.SELECT]: p,
+    [m.SHOW_MORE]: C,
+    [m.TAB]: i,
+    [m.SPACE]: b,
+    [m.ENTER]: x
+  };
+  return {
+    // Values
+    actions: u,
+    internalSelectedValue: o,
+    // Methods
+    listeners: L,
+    onEscapeKey: _,
+    onOutsideDropdownClick: y
+  };
+}, lt = D({
+  i18n: { messages: at },
+  name: "bento-dropdown-options-container"
+}), nt = /* @__PURE__ */ D({
+  ...lt,
+  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: _e.AUTOMATIC,
+      validator: (l) => Object.values(_e).includes(l)
+    },
+    /**
+     * 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: ae.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: he.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(l, { expose: t, emit: a }) {
+    const e = l, o = H(), { selectedValue: n, multiple: r } = xe(e), d = w(null), { t: c } = Y(), y = s(() => e.open && !e.disabled), u = s(() => c("noOptionsMatchThisSearch")), p = s(() => ({
+      "b-dropdown-options-container--single": !(e != null && e.multiple)
+    })), i = s(() => ({
+      "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
+    })), { actions: x, internalSelectedValue: b, listeners: _, onEscapeKey: C, onOutsideDropdownClick: L } = ot(n, r, y, a), f = s(() => e != null && e.multiple ? tt : he), B = s(() => {
+      var A;
+      const I = {
+        "min-width": `${(A = e == null ? void 0 : e.targetElement) == null ? void 0 : A.clientWidth}px`,
+        "max-width": "min(500px, 95%)"
+      };
+      return e != null && e.multiple ? {
+        actionsLayout: "space-between",
+        ariaLabel: e.ariaLabel,
+        actions: x.value,
+        divider: !0,
+        fallbackPosition: ["top-start"],
+        id: $(`dropdown-options-${e.id}`),
+        open: e.open,
+        position: "bottom-start",
+        style: {
+          width: "auto",
+          ...I
+        },
+        targetElement: e.targetElement
+      } : {
+        fallbackPosition: ["top-start"],
+        offset: [0, 8],
+        position: "bottom-start",
+        style: {
+          display: y.value ? "block" : "none",
+          ...I
+        },
+        targetElement: e.targetElement
+      };
+    });
+    return t({
+      onOutsideDropdownClick: L
+    }), { __sfc: !0, slots: o, emit: a, props: e, selectedValue: n, multiple: r, dropdownOptionsListboxRef: d, t: c, isDropdownOpen: y, noResultsMessage: u, conditionalClasses: p, conditionalListboxClasses: i, actions: x, internalSelectedValue: b, listeners: _, onEscapeKey: C, onOutsideDropdownClick: L, popperContainerOrPopoverComponent: f, popperContainerOrPopoverProps: B, BentoListbox: ae };
+  }
+});
+var st = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return e.isDropdownOpen ? a(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [a("div", { on: { keydown: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
+  } } }, [a(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(o, n) {
+    return { key: n, fn: function(r) {
+      return [t._t(n, null, null, r)];
+    } };
+  })], null, !0) }, e.listeners))], 1)]) : t._e();
+}, rt = [], it = /* @__PURE__ */ N(
+  nt,
+  st,
+  rt,
+  !1,
+  null,
+  "eb9fd4be"
+);
+const dt = it.exports;
+var E = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.READONLY = "readonly", l.HAS_ITEMS = "has-items", l.OPENED = "opened", l.ERROR = "error", l))(E || {}), S = /* @__PURE__ */ ((l) => (l.OPEN = "dropdown-base-open", l.KEYDOWN = "dropdown-base-keydown", l.CLOSE = "dropdown-base-close", l.INPUT = "dropdown-base-input", l.CLEAR = "dropdown-base-clear", l))(S || {});
+const ct = {
+  "de-DE": {
+    clearSearch: "Suche löschen"
+  },
+  "en-GB": {
+    clearSearch: "Clear search"
+  },
+  "en-US": {
+    clearSearch: "Clear search"
+  },
+  "es-ES": {
+    clearSearch: "Borrar búsqueda"
+  },
+  "es-MX": {
+    clearSearch: "Borrar búsqueda"
+  },
+  "fr-FR": {
+    clearSearch: "Effacer la recherche"
+  },
+  "it-IT": {
+    clearSearch: "Cancella ricerca"
+  },
+  "ja-JP": {
+    clearSearch: "検索をクリア"
+  },
+  "pt-BR": {
+    clearSearch: "Limpar busca"
+  },
+  "zh-CN": {
+    clearSearch: "清除搜索"
+  }
+}, ut = D({
+  i18n: { messages: ct },
+  name: "dropdown-base-textbox",
+  inheritAttrs: !1
+}), pt = /* @__PURE__ */ D({
+  ...ut,
+  props: {
+    /**
+     * The number of additional items that have been selected in the dropdown.
+     */
+    additionalItemsSelected: { type: [Number, String], default: 0 },
+    /**
+     * If the combobox DOM element should be an `input` element.
+     */
+    alwaysComboboxIsInput: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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 },
+    /**
+     * 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 },
+    /*
+     * 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 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: "" },
+    /**
+     * The selected value's list box item.
+     */
+    selectedValueItem: {
+      type: [Object, Array],
+      default: void 0
+    },
+    /**
+     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.
+     */
+    showSlotContentInMultiple: { type: Boolean, default: !1 },
+    /**
+     * Dropdown size
+     */
+    size: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [],
+  setup(l, { expose: t, emit: a }) {
+    const e = l, { t: o } = Y(), n = we(), r = H(), d = Le(r), c = w(null), y = $("textbox"), u = s(() => ({
+      [`b-dropdown-base-textbox--${E.DISABLED}`]: e.disabled,
+      [`b-dropdown-base-textbox--${E.READONLY}`]: e.readonly,
+      [`b-dropdown-base-textbox--${E.HAS_ITEMS}`]: !!e.additionalItemsSelected
+    })), p = s(
+      () => C.value && n["aria-required"] ? "true" : null
+    ), i = s(() => ({
+      "b-dropdown-base-textbox__input--dynamic-filtering": e.dynamicFiltering
+    })), x = s(() => e.dynamicFiltering && !!e.value && e.open), b = s(
+      () => {
+        var v;
+        return {
+          "aria-haspopup": "listbox",
+          "aria-controls": e.ariaControls,
+          "aria-describedby": (v = n["aria-describedby"]) == null ? void 0 : v.toString(),
+          "aria-expanded": e.ariaExpanded ? "true" : "false",
+          "aria-labelledby": e.ariaLabelledby,
+          "aria-label": e.ariaLabelledby ? null : e.ariaLabel,
+          "aria-invalid": e.isInvalid,
+          "aria-disabled": e.disabled ? !0 : null,
+          "aria-required": n["aria-required"]
+        };
+      }
+    ), _ = s(
+      () => e.multiple ? e.selectedValueItem : []
+    ), C = s(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), L = s(() => e.selectedValueItem && !e.multiple), f = s(
+      () => e.multiple && e.selectedValueItem && _.value.length > 0 && e.showSlotContentInMultiple
+    );
+    j(
+      () => C.value,
+      () => {
+        C.value && !e.alwaysComboboxIsInput && O(() => {
+          c.value.focus();
+        });
+      }
+    );
+    const B = async () => {
+      !e.disabled && !e.readonly && (a(S.OPEN), await O(), c.value.focus());
+    }, I = () => {
+      e.open && (c.value.focus(), a(S.CLOSE));
+    }, A = (v) => e.open && v.target.tagName === "INPUT" ? null : e.open ? I() : B(), M = () => {
+      a(S.CLEAR), a(S.INPUT, ""), c.value.focus();
+    }, q = (v) => {
+      !e.readonly && !e.disabled ? a(S.INPUT, v.target.value) : (v.preventDefault(), v.stopPropagation());
+    }, h = () => {
+      c.value.focus();
+    };
+    return t({
+      focus: h
+    }), { __sfc: !0, t: o, attrs: n, slots: r, hasSlot: d, props: e, emit: a, textbox: c, textboxId: y, conditionalClasses: u, showRequiredAttribute: p, comboboxConditionalClasses: i, isFiltering: x, ariaAttributes: b, selectedValueItems: _, shouldShowInput: C, shouldShowSingleSelectSlot: L, shouldShowMultipleSlot: f, onOpenDropdown: B, onCloseDropdown: I, onToggleDropdown: A, onClearSearch: M, onInputEvent: q, focus: h, BentoTypography: Ce, DropdownBaseTextboxEvent: S, CrossCircleFillIcon: Ve, CrossCircleFillSmallIcon: Ke, BentoDropdownSize: K };
+  }
+});
+var ft = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { class: t.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: e.onToggleDropdown, keydown: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "escape", void 0, o.key, void 0) ? null : e.onCloseDropdown.apply(null, arguments);
+  } } }, [a(e.BentoTypography, { staticClass: "b-dropdown-base-textbox", class: e.conditionalClasses, attrs: { el: "div", "data-testid": "base-textbox" } }, [e.shouldShowInput ? a("input", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", attrs: { id: e.textboxId, role: "combobox", type: "text", "aria-autocomplete": "list", size: "1", disabled: t.disabled ? !0 : null, readonly: t.readonly, required: e.showRequiredAttribute }, domProps: { value: t.open ? t.value : t.displayValue }, on: { keydown: [function(o) {
+    return t.$emit(e.DropdownBaseTextboxEvent.KEYDOWN, o);
+  }, function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : e.onToggleDropdown.apply(null, arguments);
+  }], input: e.onInputEvent } }, "input", e.ariaAttributes, !1)) : a("div", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", class: e.comboboxConditionalClasses, attrs: { id: e.textboxId, "aria-readonly": t.readonly ? "true" : null, role: "combobox", tabindex: t.disabled ? -1 : 0 } }, "div", e.ariaAttributes, !1), [e.shouldShowSingleSelectSlot ? [e.hasSlot("display-value") ? t._t("display-value", null, null, t.selectedValueItem) : t._t("default", function() {
+    return [t._v(" " + t._s(t.displayValue) + " ")];
+  }, null, t.selectedValueItem)] : e.shouldShowMultipleSlot ? [a("div", { staticClass: "b-dropdown-base-textbox__input-multiple-selected" }, t._l(e.selectedValueItems, function(o) {
+    return a("div", { key: o.value }, [a("div", { staticClass: "b-dropdown-base-textbox__input-selected-element" }, [t._t("default", function() {
+      return [t._v(" " + t._s(t.displayValue) + " ")];
+    }, null, o)], 2)]);
+  }), 0)] : [t._v(t._s(t.displayValue))]], 2), t.additionalItemsSelected ? a("span", { staticClass: "b-dropdown-base-textbox__additional-items" }, [t._v(" " + t._s(t.additionalItemsSelected) + " ")]) : t._e(), e.hasSlot("icon") && !e.isFiltering ? a("span", { staticClass: "b-dropdown-base-textbox__icon", attrs: { "aria-hidden": "true" } }, [t._t("icon")], 2) : t._e(), e.isFiltering ? a("span", { staticClass: "b-dropdown-base-textbox__clear-search", attrs: { tabindex: t.disabled ? -1 : 0, "data-testid": "clear-search-button" }, on: { click: function(o) {
+    return o.stopPropagation(), e.onClearSearch.apply(null, arguments);
+  }, keydown: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : (o.stopPropagation(), e.onClearSearch.apply(null, arguments));
+  }, keyup: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "space", 32, o.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
+  } } }, [t.size === e.BentoDropdownSize.SMALL ? a(e.CrossCircleFillSmallIcon, { attrs: { "svg-title": e.t("clearSearch") } }) : a(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1) : t._e()])], 1);
+}, bt = [], yt = /* @__PURE__ */ N(
+  pt,
+  ft,
+  bt,
+  !1,
+  null,
+  "36875648"
+);
+const Oe = yt.exports, vt = D({
+  name: "dropdown-default-textbox",
+  inheritAttrs: !1
+}), mt = /* @__PURE__ */ D({
+  ...vt,
+  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
+    },
+    /**
+     * Renders the dropdown with a condensed style.
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * 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 selected value's list box item.
+     */
+    selectedValueItem: {
+      type: [Object, Array],
+      default: void 0
+    },
+    /**
+     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.
+     */
+    showSlotContentInMultiple: { type: Boolean, default: !1 },
+    /**
+     * The input value
+     */
+    value: { type: String, default: "" },
+    /*
+     * If enabled, the user will be able to select multiple items.
+     */
+    multiple: { type: Boolean, default: !1 }
+  },
+  emits: ["clear", "close", "input", "keydown", "open"],
+  setup(l, { expose: t, emit: a }) {
+    const e = l, o = H(), n = w(null), r = s(() => ({
+      [`b-dropdown-default-textbox--${E.ERROR}`]: !e.disabled && !e.readonly && e.isInvalid,
+      [`b-dropdown-default-textbox--${E.DISABLED}`]: e.disabled,
+      [`b-dropdown-default-textbox--${E.READONLY}`]: e.readonly,
+      [`b-dropdown-default-textbox--${E.OPENED}`]: e.open,
+      "b-dropdown-default-textbox--condensed": e.condensed
+    })), d = s(() => e.open && !e.disabled && !e.readonly), c = (_) => {
+      a("input", _);
+    }, y = (_) => {
+      a("keydown", _);
+    }, u = (_) => {
+      V(_), a("open");
+    }, p = (_) => {
+      V(_), a("close");
+    }, i = (_) => {
+      V(_), a("clear");
+    }, x = {
+      [S.INPUT]: c,
+      [S.OPEN]: u,
+      [S.CLOSE]: p,
+      [S.CLEAR]: i,
+      [S.KEYDOWN]: y
+    }, b = () => {
+      n.value.focus();
+    };
+    return t({
+      focus: b
+    }), { __sfc: !0, emit: a, slots: o, props: e, baseTextbox: n, conditionalClasses: r, isDropdownOpen: d, onInput: c, onKeyDown: y, openDropdown: u, closeDropdown: p, clearValue: i, listeners: x, focus: b, DropdownBaseTextbox: Oe, ChevronDownIcon: qe, ChevronUpIcon: ze };
+  }
+});
+var _t = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { staticClass: "b-dropdown-default-textbox", class: e.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [a(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: t.value }, scopedSlots: t._u([t._l(e.slots, function(o, n) {
+    return { key: n, fn: function(r) {
+      return [t._t(n, null, null, r ?? {})];
+    } };
+  }), { key: "icon", fn: function() {
+    return [a("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [a(e.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), a(e.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
+  }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
+}, ht = [], gt = /* @__PURE__ */ N(
+  mt,
+  _t,
+  ht,
+  !1,
+  null,
+  "bf2d43b0"
+);
+const St = gt.exports;
+let ge = 0;
+const xt = {
+  beforeCreate() {
+    this.uuid = ge.toString(), ge += 1;
+  }
+};
+var wt = function() {
+  var t = this, a = t._self._c;
+  return a("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"] ? a("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), a("path", { attrs: { fill: "#001222", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
+}, Ct = [], Lt = /* @__PURE__ */ N(
+  xt,
+  wt,
+  Ct,
+  !1,
+  null,
+  null
+);
+const Ot = Lt.exports;
+let Se = 0;
+const Et = {
+  beforeCreate() {
+    this.uuid = Se.toString(), Se += 1;
+  }
+};
+var It = function() {
+  var t = this, a = t._self._c;
+  return a("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"] ? a("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), a("path", { attrs: { fill: "#001222", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
+}, Dt = [], Bt = /* @__PURE__ */ N(
+  Et,
+  It,
+  Dt,
+  !1,
+  null,
+  null
+);
+const At = Bt.exports, Tt = D({
+  name: "dropdown-small-textbox",
+  inheritAttrs: !1
+}), kt = /* @__PURE__ */ D({
+  ...Tt,
+  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 },
+    /**
+     * 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(l, { expose: t, emit: a }) {
+    const e = l, o = w(null), n = s(() => ({
+      [`b-dropdown-small-textbox--${E.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${E.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${E.OPENED}`]: e.open
+    })), r = s(() => e.open && !e.disabled && !e.readonly), d = (b) => {
+      a("input", b);
+    }, c = (b) => {
+      a("keydown", b);
+    }, y = (b) => {
+      V(b), a("open");
+    }, u = (b) => {
+      V(b), a("close");
+    }, p = (b) => {
+      V(b), a("clear");
+    }, i = {
+      [S.INPUT]: d,
+      [S.OPEN]: y,
+      [S.CLOSE]: u,
+      [S.CLEAR]: p,
+      [S.KEYDOWN]: c
+    }, x = () => {
+      o.value.focus();
+    };
+    return t({
+      focus: x
+    }), { __sfc: !0, emit: a, props: e, baseTextbox: o, conditionalClasses: n, isDropdownOpen: r, onInput: d, onKeyDown: c, openDropdown: y, closeDropdown: u, clearValue: p, listeners: i, focus: x, BentoDropdownSize: K, DropdownBaseTextbox: Oe, ChevronDownSmallIcon: Ot, ChevronUpSmallIcon: At };
+  }
+});
+var Nt = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [a(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 [a("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [a(e.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), a(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);
+}, Mt = [], Rt = /* @__PURE__ */ N(
+  kt,
+  Nt,
+  Mt,
+  !1,
+  null,
+  "faba160c"
+);
+const Ft = Rt.exports, Pt = (l, t) => t.value.reduce((a, e) => {
+  if (e.items) {
+    const o = e.items.filter(
+      (r) => l.value.find((d) => d.value === r.value)
+    );
+    o.length === e.items.length ? a.push(e.displayValue ?? e.label) : o.forEach(({ label: r, displayValue: d }) => a.push(d ?? r));
+  }
+  return l.value.find((o) => o.value === e.value) && a.push(e.displayValue ?? e.label), a;
+}, []).join(", "), $t = ({ items: l, placeholder: t, selectedValues: a, isMultiSelect: e }) => {
+  const o = s(
+    () => e.value && l.value.find((r) => {
+      var d;
+      return (d = r.items) == null ? void 0 : d.length;
+    })
+  );
+  return s(() => a.value.length ? o.value ? Pt(a, l) : a.value.map(({ label: r, displayValue: d }) => d ?? r).join(", ") : t.value || null);
+}, Ee = (l) => {
+  var t;
+  (t = l.value.$children) == null || t[0].$refs.textbox.focus();
+}, Vt = ({
+  inputContainerRef: l,
+  optionsContainerRef: t,
+  selectedValueIndex: a,
+  isDropdownOpen: e,
+  isDynamicFltering: o,
+  items: n,
+  isMultiple: r
+}, d, c, y) => {
+  const u = async (h) => {
+    var v;
+    o.value && await O(), (v = n.value[h]) == null || v.focus();
+  }, p = async (h) => {
+    var R, U;
+    o.value && await O();
+    const v = (R = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : R.$el.querySelectorAll(
+      "button"
+    );
+    v != null && v.length ? (U = v[h]) == null || U.focus() : u(h);
+  }, i = (h) => {
+    var v;
+    return (v = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : v.setListboxFocusedIndex(
+      h
+    );
+  }, x = () => {
+    e.value || c(), O(() => {
+      i(0), u(0);
+    });
+  }, b = () => {
+    e.value || c(), O(() => {
+      i(n.value.length - 1), u(n.value.length - 1);
+    });
+  }, _ = ({ detail: h }) => {
+    h.preventDefault(), x();
+  }, C = ({ detail: h }) => {
+    h.preventDefault(), b();
+  }, L = () => {
+    x();
+  }, f = () => {
+    b();
+  }, B = ({ detail: h }) => {
+    h.preventDefault(), d(), e.value && O(() => {
+      r ? p(0) : (i(a.value), u(a.value));
+    });
+  }, I = ({ detail: h }) => {
+    h.preventDefault(), d(), e.value && O(() => {
+      r ? p(0) : (i(a.value), u(a.value));
+    });
+  }, A = () => {
+    e.value && y();
+  }, M = () => {
+    e.value && (y(), Ee(l));
+  };
+  return s(() => ({
+    [k.ARROW_DOWN]: _,
+    [k.ARROW_UP]: C,
+    [k.HOME]: L,
+    [k.END]: f,
+    ...o.value ? {} : { [k.SPACE]: B },
+    [k.ENTER]: I,
+    ...o.value ? {} : { [k.TAB]: A },
+    [k.ESCAPE]: M
+  }));
+}, Kt = ({ inputContainerRef: l, isDropdownOpen: t }, a) => {
+  const e = () => {
+    t.value && a(), O(() => {
+      Ee(l);
+    });
+  };
+  return {
+    [m.ENTER]: e,
+    [m.ESCAPE]: e,
+    [m.TAB]: e,
+    [m.SPACE]: e
+  };
+};
+function qt(l, t, a, e, o) {
+  const n = w(l), r = w(t), d = (u, p = []) => p.flatMap((i) => i.label.toLocaleLowerCase().includes(u) ? e != null && e.value && i.items ? [...d(u, i.items)] : [i, ...d(u, i.items)] : i.items ? [...d(u, i.items)] : []), c = a !== void 0 ? je(() => a(n.value), o ?? 300) : void 0;
+  return j(n, () => {
+    c !== void 0 && c();
+  }), s(() => {
+    if (!n.value || a !== void 0)
+      return r.value;
+    const u = n.value.toLocaleLowerCase();
+    return d(u, r.value);
+  });
+}
+const zt = {
+  "de-DE": {
+    all: "Alle",
+    ariaLabelFallback: "Dropdown",
+    clearSearch: "Filter löschen"
+  },
+  "en-GB": {
+    all: "All",
+    ariaLabelFallback: "Dropdown",
+    clearSearch: "Clear filter"
+  },
+  "en-US": {
+    all: "All",
+    ariaLabelFallback: "Dropdown",
+    clearSearch: "Clear filter"
+  },
+  "es-ES": {
+    all: "Todos",
+    ariaLabelFallback: "Menú desplegable",
+    clearSearch: "Limpiar filtro"
+  },
+  "es-MX": {
+    all: "Todos",
+    ariaLabelFallback: "Menú desplegable",
+    clearSearch: "Limpiar filtro"
+  },
+  "fr-FR": {
+    all: "Tous",
+    ariaLabelFallback: "Menu déroulant",
+    clearSearch: "Effacer le filtre"
+  },
+  "it-IT": {
+    all: "Tutti",
+    ariaLabelFallback: "Menu a discesa",
+    clearSearch: "Cancella filtro"
+  },
+  "ja-JP": {
+    all: "すべて",
+    ariaLabelFallback: "ドロップダウン",
+    clearSearch: "フィルターをクリア"
+  },
+  "pt-BR": {
+    all: "Todos",
+    ariaLabelFallback: "Menu suspenso",
+    clearSearch: "Limpar filtro"
+  },
+  "zh-CN": {
+    all: "全部",
+    ariaLabelFallback: "下拉菜单",
+    clearSearch: "清除筛选器"
+  }
+}, Ut = /* @__PURE__ */ Symbol("input field component injection key"), _a = /* @__PURE__ */ Symbol("input field hint injection key"), ha = /* @__PURE__ */ Symbol("input field parent component injection key"), Wt = D({
+  i18n: { messages: zt },
+  name: "b-dropdown",
+  components: {
+    DropdownInputDefault: St,
+    DropdownInputSmall: Ft
+  },
+  model: { prop: "modelValue" }
+}), jt = /* @__PURE__ */ D({
+  ...Wt,
+  props: {
+    description: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    errorMessage: { default: null },
+    label: { default: null },
+    optional: { type: Boolean, default: !1 },
+    placeholder: { default: null },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    tooltipText: { default: null },
+    ariaLabel: { default: null },
+    condensed: { type: Boolean, default: !1 },
+    emptyState: { default: void 0 },
+    dynamicFiltering: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    hasMoreItems: { type: Boolean, default: !1 },
+    isOptionDisabled: { type: Function, default: void 0 },
+    items: { default: () => [] },
+    loading: { type: Boolean, default: !1 },
+    componentLoading: { type: Boolean, default: !1 },
+    lazyLoadType: { default: ae.props.lazyLoadType.default },
+    multiple: { type: Boolean, default: !1 },
+    search: { default: void 0 },
+    showSlotContentInMultiple: { type: Boolean, default: !1 },
+    size: { default: null },
+    staticCategories: { type: Boolean, default: !1 },
+    value: { default: null },
+    modelValue: { default: null },
+    virtualScroll: { type: Boolean, default: !1 },
+    enableValueLabelPair: { type: Boolean, default: !1 }
+  },
+  emits: ["input", "update:model-value", "show-more", "open"],
+  setup(l, { expose: t, emit: a }) {
+    var ve, me;
+    const e = l, o = we(), n = H(), r = Le(n), { t: d } = Y(), { emitValue: c } = We(a), y = w(null), u = w(null), p = w(null), i = w(!1), x = $("bento-dropdown-options-container"), b = $("dropdown-label"), _ = $("dropdown-description"), C = $("dropdown-error"), { isReadOnly: L } = Xe(T(e, "readonly")), f = s(() => e.modelValue ?? e.value), { cachedSelectedListboxOptions: B, cachedListboxSelectedValues: I, setCachedValues: A } = He(
+      T(e, "items"),
+      f,
+      T(e, "multiple"),
+      T(e, "enableValueLabelPair")
+    ), M = w(o["aria-label"]), q = w(o["aria-describedby"]), { ariaLabel: h, label: v } = xe(e), R = s(() => d("ariaLabelFallback")), U = Ue({
+      // TODO: take ariaLabel ref away when aria-label prop is removed
+      ariaLabel: h.value || M,
+      label: v,
+      defaultFallback: R
+    }), oe = e.size === K.SMALL || $e(Ut, !1), Ie = s(() => oe ? K.SMALL : K.DEFAULT), De = s(() => ({
+      "b-dropdown--condensed": e.condensed
+    })), Be = s(() => ({
+      "b-dropdown__description--error": !!e.errorMessage
+    })), F = w(""), z = T(e, "items"), le = T(e, "staticCategories"), J = qt(
+      F,
+      z,
+      (ve = e == null ? void 0 : e.search) == null ? void 0 : ve.searchEvent,
+      le,
+      (me = e == null ? void 0 : e.search) == null ? void 0 : me.debounceTime
+    ), X = s(() => e.dynamicFiltering && !!F.value), Ae = $t({
+      items: z,
+      placeholder: T(e, "placeholder"),
+      isMultiSelect: T(e, "multiple"),
+      selectedValues: B
+    }), Te = s(() => {
+      if (e != null && e.multiple && Array.isArray(f.value))
+        return e.items.filter(
+          ({ value: g }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(g)
+        );
+      if (!e.multiple && e.staticCategories) {
+        const g = e.items.find(
+          (ee) => ee.items.some((Pe) => Pe.value === f.value)
+        );
+        return g ? g.items.find((ee) => ee.value === f.value) : null;
+      }
+      return e.items.find(({ value: g }) => g === f.value);
+    }), ne = s(() => {
+      const g = J.value.findIndex(({ value: P }) => e.enableValueLabelPair ? f.value.value === P : f.value === P);
+      return g > -1 ? g : 0;
+    }), { isMultiLevelSelect: Z, flattenedItemsList: se } = Ye(z), re = s(() => Z.value && !e.staticCategories), ie = s(() => re.value ? "treeitem" : "option"), ke = s(() => {
+      if (e.multiple) {
+        const g = Array.isArray(f.value) ? f.value.length : 0, P = Z.value ? se.value.length : z.value.length;
+        return g === 0 ? null : !e.hasMoreItems && P > 0 && P === g ? d("all") : g;
+      }
+      return null;
+    }), Ne = s(
+      () => [
+        e.description ? _ : null,
+        q.value,
+        e.errorMessage ? C : null
+      ].filter(Boolean).join(" ") || null
+    ), de = s(() => {
+      var g;
+      return (g = p.value) == null ? void 0 : g.$el;
+    }), { visibleDomOptions: ce, updateVisibleDomOptions: Q } = Je(
+      de,
+      J,
+      ie
+    ), ue = () => {
+      L.value || (i.value = !0, O(() => {
+        Q();
+      }));
+    }, W = () => {
+      i.value = !1;
+    }, pe = () => {
+      L.value || (i.value = !i.value, O(() => {
+        Q();
+      }), X.value && (F.value = ""));
+    }, Me = () => {
+      X.value && (F.value = ""), i.value && (i.value = !1, p.value.onOutsideDropdownClick());
+    }, fe = async (g) => {
+      e.multiple || (F.value = "", i.value = !1), A(g), c(I.value), e.multiple || (await O(), G());
+    }, be = () => {
+      a(m.SHOW_MORE);
+    }, Re = Vt(
+      {
+        inputContainerRef: y,
+        optionsContainerRef: p,
+        selectedValueIndex: ne,
+        isDropdownOpen: i,
+        isDynamicFltering: T(e, "dynamicFiltering"),
+        items: ce,
+        isMultiple: e.multiple
+      },
+      pe,
+      ue,
+      W
+    ), ye = Kt(
+      {
+        inputContainerRef: y,
+        isDropdownOpen: i
+      },
+      W
+    ), Fe = {
+      [m.CLOSE_DROPDOWN]: W,
+      [m.SELECT]: fe,
+      [m.SHOW_MORE]: be,
+      ...ye
+    };
+    e.error && te(
+      '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 && te('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), e.value && te(
+      'BentoDropdown "value" property',
+      `The use of "value" prop in "BentoDropdown" is no longer supported.
+                Use the "v-model" or "model-value" property instead.`,
+      "2.0.0"
+    );
+    const G = () => {
+      y.value.focus();
+    };
+    return j(
+      () => i.value,
+      (g) => {
+        g && a("open");
+      }
+    ), t({
+      focus: G
+    }), { __sfc: !0, attrs: o, slots: n, hasSlot: r, props: e, emit: a, t: d, emitValue: c, inputContainerRef: y, inputContainerRefWrapper: u, optionsContainerRef: p, isDropdownOpen: i, dropdownOptionsContainerId: x, labelId: b, descriptionId: _, errorId: C, isReadOnly: L, dropdownValue: f, cachedSelectedListboxOptions: B, cachedListboxSelectedValues: I, setCachedValues: A, ariaLabelAttribute: M, ariaDescribedByAttribute: q, ariaLabel: h, label: v, computedAriaLabelFallbackMessage: R, computedAriaLabel: U, isInputComponent: oe, computedSize: Ie, conditionalClasses: De, descriptionConditionalClasses: Be, searchTerm: F, items: z, staticCategories: le, filteredItems: J, isSearching: X, displayValue: Ae, selectedValueItem: Te, selectedValueIndex: ne, isMultiLevelSelect: Z, flattenedItemsList: se, isTreePattern: re, computedOptionRole: ie, additionalItemsSelected: ke, ariaDescribedBy: Ne, listboxRef: de, visibleDomOptions: ce, updateVisibleDomOptions: Q, openDropdown: ue, closeDropdown: W, toggleDropdown: pe, clickOutsideDropdown: Me, onOptionSelected: fe, emitShowMoreEvent: be, textboxKeyboardNavigationListeners: Re, listboxKeyboardNavigationListeners: ye, listboxListeners: Fe, focus: G, BentoDropdownOptionsContainer: dt, BentoTypography: Ce, ErrorMessage: et, FieldLabel: Ge, vBentoClickOutsideDirective: Qe, vBentoKeyboardNavigationDirective: Ze };
+  }
+});
+var Ht = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("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 ? a(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: e.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), a("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [a(e.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, "aria-controls": e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.computedAriaLabel, "aria-readonly": e.isReadOnly, "aria-required": t.required, 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(o) {
+    e.searchTerm = o;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(o, n) {
+    return { key: n, fn: function(r) {
+      return [t._t(n, null, null, r)];
+    } };
+  })], null, !0) })], 1), e.inputContainerRef ? a(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, 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(o, n) {
+    return { key: n, fn: function(r) {
+      return [t._t(n, null, null, r)];
+    } };
+  })], null, !0) }, e.listboxListeners)) : t._e(), t.errorMessage ? a(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? a(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);
+}, Yt = [], Jt = /* @__PURE__ */ N(
+  jt,
+  Ht,
+  Yt,
+  !1,
+  null,
+  "3edb5f79"
+);
+const ga = Jt.exports;
+export {
+  ga as B,
+  St as D,
+  _a as I,
+  K as a,
+  Ut as b,
+  ha as c,
+  qt as u
+};
+//# sourceMappingURL=dropdown.Ca-f8tdX.js.map