@adyen/bento-vue2 1.11.0 → 1.12.0

package/dist/chunks/dropdown.eaee22a3.js

@@ -0,0 +1,797 @@
+import { ref as y, watch as te, computed as c, defineComponent as B, useSlots as oe, toRefs as ne, nextTick as E, useAttrs as me, toRef as O } from "vue";
+import { d as be, B as _e } from "./index.99a2184a.js";
+import { g as T } from "./unique-id.a2a2b458.js";
+import { u as ye } from "./aria-label.ac9651a5.js";
+import { u as W } from "./i18n.eb5b985b.js";
+import { u as ge } from "./use-form-layout-loading.d03e5d48.js";
+import { u as xe } from "./use-has-slot.fbeb19ec.js";
+import { D as P, a as k, b as we, c as he } from "./dropdown-default-textbox.c595fd31.js";
+import { n as A } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { b as u, a as K, B as z, u as Se } from "./listbox.23c6b393.js";
+import { B as $, a as Le } from "./keyboard-navigation.ca47dfa8.js";
+import { a as X } from "./index.d90c5838.js";
+import { a as Ce } from "./index.45aa17fc.js";
+import { E as Oe, F as $e } from "./field-label.66f52c8f.js";
+import { B as Ee } from "./directive.0408e565.js";
+import "../assets/dropdown.css";
+var D = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(D || {});
+const De = {
+  "en-US": {
+    apply: "Apply",
+    cancel: "Cancel",
+    noOptionsMatchThisSearch: "No options match this search"
+  }
+}, Be = (n, e, o, t) => {
+  const l = y(n.value), { t: s } = W();
+  te(n, () => {
+    l.value = n.value;
+  });
+  const a = c(
+    () => JSON.stringify(l.value) === JSON.stringify(n.value)
+  ), r = () => {
+    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: r,
+      disabled: a.value
+    },
+    {
+      title: s("cancel"),
+      event: d
+    }
+  ]), _ = (i) => {
+    l.value = i, e.value || t(u.SELECT, i);
+  }, C = (i) => {
+    _(i), t(u.TAB);
+  }, g = (i) => {
+    _(i), t(u.ENTER);
+  }, h = (i) => {
+    _(i), t(u.SPACE);
+  }, x = () => {
+    d(), t(u.ESCAPE);
+  }, S = () => {
+    t(u.SHOW_MORE);
+  }, L = {
+    [u.SELECT]: _,
+    [u.SHOW_MORE]: S,
+    [u.TAB]: C,
+    [u.SPACE]: h,
+    [u.ENTER]: g
+  };
+  return {
+    // Values
+    actions: v,
+    internalSelectedValue: l,
+    // Methods
+    listeners: L,
+    onEscapeKey: x,
+    onOutsideDropdownClick: f
+  };
+}, Ie = B({
+  i18n: { messages: De },
+  name: "bento-dropdown-options-container"
+}), Re = /* @__PURE__ */ B({
+  ...Ie,
+  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: D.DEFAULT,
+      validator: (n) => Object.values(D).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: X.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 = oe(), { selectedValue: s, multiple: a } = ne(t), r = y(null), { t: d } = W(), f = c(() => t.open && !t.disabled), v = c(() => d("noOptionsMatchThisSearch")), _ = c(() => ({
+      "b-dropdown-options-container--single": !(t != null && t.multiple)
+    })), C = c(() => ({
+      "b-dropdown-options-container__listbox--small": t.inputSize === D.SMALL,
+      "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
+    })), { actions: g, internalSelectedValue: h, listeners: x, onEscapeKey: S, onOutsideDropdownClick: L } = Be(s, a, f, o), i = c(() => t != null && t.multiple ? Ce : X), p = c(() => {
+      var w;
+      const b = {
+        "min-width": `${(w = t == null ? void 0 : t.targetElement) == null ? void 0 : w.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",
+          ...b
+        },
+        targetElement: t.targetElement
+      } : {
+        fallbackPosition: ["top-start"],
+        offset: [0, 8],
+        position: "bottom-start",
+        style: {
+          display: f.value ? "block" : "none",
+          ...b
+        },
+        targetElement: t.targetElement
+      };
+    });
+    return e({
+      onOutsideDropdownClick: L
+    }), { __sfc: !0, slots: l, emit: o, props: t, selectedValue: s, multiple: a, dropdownOptionsListboxRef: r, t: d, isDropdownOpen: f, noResultsMessage: v, conditionalClasses: _, conditionalListboxClasses: C, actions: g, internalSelectedValue: h, listeners: x, onEscapeKey: S, onOutsideDropdownClick: L, popperContainerOrPopoverComponent: i, popperContainerOrPopoverProps: p, BentoListbox: z };
+  }
+});
+var Te = 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)]);
+}, Ae = [], Me = /* @__PURE__ */ A(
+  Re,
+  Te,
+  Ae,
+  !1,
+  null,
+  "1ccfc490",
+  null,
+  null
+);
+const Ne = Me.exports;
+let V = 0;
+const ke = {
+  beforeCreate() {
+    this.uuid = V.toString(), V += 1;
+  }
+};
+var Fe = 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" } })]);
+}, Pe = [], Ke = /* @__PURE__ */ A(
+  ke,
+  Fe,
+  Pe,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const ze = Ke.exports;
+let ee = 0;
+const We = {
+  beforeCreate() {
+    this.uuid = ee.toString(), ee += 1;
+  }
+};
+var Ue = 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" } })]);
+}, je = [], qe = /* @__PURE__ */ A(
+  We,
+  Ue,
+  je,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const He = qe.exports, Je = B({
+  name: "dropdown-small-textbox",
+  inheritAttrs: !1
+}), Ze = /* @__PURE__ */ B({
+  ...Je,
+  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: "" }
+  },
+  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(k.OPEN);
+    }, a = () => {
+      e(k.CLOSE);
+    }, r = {
+      [k.OPEN]: s,
+      [k.CLOSE]: a
+    };
+    return { __sfc: !0, emit: e, props: o, conditionalClasses: t, isDropdownOpen: l, openDropdown: s, closeDropdown: a, listeners: r, DropdownBaseTextbox: we, ChevronDownSmallIcon: ze, ChevronUpSmallIcon: He };
+  }
+});
+var Ye = 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);
+}, Ge = [], Qe = /* @__PURE__ */ A(
+  Ze,
+  Ye,
+  Ge,
+  !1,
+  null,
+  "1bc3a61b",
+  null,
+  null
+);
+const Xe = Qe.exports, Ve = ({ items: n, placeholder: e, selectedValue: o, staticCategories: t }) => {
+  if (!o.value)
+    return e.value || null;
+  let l;
+  if (t) {
+    const s = n.value.find((a) => a.items.some((r) => r.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();
+}, et = ({ 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(", ");
+}, tt = ({ 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(", ");
+}, ot = ({ items: n, placeholder: e, value: o, multiple: t, staticCategories: l }) => {
+  const s = c(() => n.value.find((r) => {
+    var d;
+    return (d = r.items) == null ? void 0 : d.length;
+  }));
+  return c(() => t.value ? s.value ? tt({ selectedValues: o, placeholder: e, items: n }) : et({ selectedValues: o, items: n, placeholder: e }) : Ve({
+    items: n,
+    placeholder: e,
+    selectedValue: o,
+    staticCategories: l.value
+  }));
+}, le = (n) => {
+  var e;
+  (e = n.value.$children) == null || e[0].$refs.textbox.focus();
+}, nt = ({
+  inputContainerRef: n,
+  optionsContainerRef: e,
+  selectedValueIndex: o,
+  isDropdownOpen: t,
+  isDynamicFltering: l,
+  items: s,
+  isMultiple: a
+}, r, d, f) => {
+  const v = ({ detail: i }) => {
+    i.preventDefault(), t.value || (d(), E(() => {
+      var p, b;
+      a ? (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[o.value].$el.focus();
+    }));
+  }, _ = ({ detail: i }) => {
+    i.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 i, p;
+      if (a) {
+        const b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (i = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[b.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(), le(n));
+  }, h = () => {
+    t.value || d(), E(() => {
+      var i;
+      (i = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus();
+    });
+  }, x = ({ detail: i }) => {
+    i.preventDefault(), r(), t.value && E(() => {
+      var p, b;
+      a ? (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[o.value].$el.focus();
+    });
+  }, S = () => {
+    r(), t.value && E(() => {
+      var i, p;
+      a ? (i = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus() : (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[o.value].$el.focus();
+    });
+  };
+  return c(() => ({
+    ...l.value ? {} : { [$.SPACE]: x },
+    [$.ENTER]: S,
+    [$.ARROW_DOWN]: v,
+    [$.ARROW_UP]: _,
+    [$.END]: C,
+    [$.ESCAPE]: g,
+    [$.HOME]: h
+  }));
+}, lt = ({ inputContainerRef: n, isDropdownOpen: e }, o) => {
+  const t = () => {
+    e.value && o(), E(() => {
+      le(n);
+    });
+  };
+  return {
+    [u.ENTER]: t,
+    [u.ESCAPE]: t,
+    [u.TAB]: t,
+    [u.SPACE]: t
+  };
+};
+function st(n, e, o) {
+  const t = y(n), l = y(e), s = (r, d = []) => d.flatMap((f) => f.label.toLocaleLowerCase().includes(r) ? [f, ...s(r, f.items)] : f.items ? [...s(r, f.items)] : []);
+  return te(t, () => {
+    o !== void 0 && o(t.value);
+  }), c(() => {
+    if (!t.value || o !== void 0)
+      return l.value;
+    const r = t.value.toLocaleLowerCase();
+    return s(r, l.value);
+  });
+}
+const at = {
+  "en-US": {
+    all: "All",
+    clearSearch: "Clear filter",
+    ariaLabelFallback: "Dropdown"
+  }
+}, rt = B({
+  i18n: { messages: at },
+  name: "b-dropdown",
+  components: {
+    DropdownInputDefault: he,
+    DropdownInputSmall: Xe
+  }
+}), it = /* @__PURE__ */ B({
+  ...rt,
+  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 },
+    /**
+     * Dropdown input size
+     * * @see BentoDropdownSize
+     */
+    size: {
+      type: String,
+      default: D.DEFAULT,
+      validator: (n) => Object.values(D).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 = me(), l = oe(), s = xe(l), { t: a } = W(), r = y(null), d = y(null), f = y(null), v = y(!1), _ = T("bento-dropdown-options-container"), C = T("dropdown-label"), g = T("dropdown-description"), h = T("dropdown-error"), { isReadOnly: x } = ge(O(o, "readonly")), S = y(t["aria-label"]), { ariaLabel: L } = ne(o), i = ye({
+      ariaLabel: S.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: L,
+      defaultFallback: a("ariaLabelFallback")
+    }), p = c(() => ({
+      "b-dropdown--condensed": o.condensed
+    })), b = c(() => ({
+      "b-dropdown__description--error": !!o.errorMessage
+    })), w = y(""), I = O(o, "items"), se = st(w, I, (Q = o == null ? void 0 : o.search) == null ? void 0 : Q.searchEvent), F = c(() => o.dynamicFiltering && !!w.value), ae = ot({
+      items: I,
+      staticCategories: O(o, "staticCategories"),
+      multiple: O(o, "multiple"),
+      placeholder: O(o, "placeholder"),
+      value: O(o, "value")
+    }), re = c(() => o.size === D.DEFAULT), ie = 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(
+          (N) => N.items.some((ve) => ve.value === o.value)
+        );
+        return m ? m.items.find((N) => N.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 } = Se(I), de = 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 : I.value.length) === R ? a("all") : R;
+      }
+      return null;
+    }), ue = c(
+      () => `${o.description ? g : ""} ${o.errorMessage ? h : ""}`.trim() || null
+    ), H = () => {
+      x.value || (v.value = !0);
+    }, M = () => {
+      v.value = !1;
+    }, J = () => {
+      x.value || (v.value = !v.value, F.value && (w.value = ""));
+    }, ce = () => {
+      F.value && (w.value = ""), v.value && (v.value = !1, f.value.onOutsideDropdownClick());
+    }, Z = (m) => {
+      o.multiple || (w.value = "", v.value = !1), e("input", m);
+    }, Y = () => {
+      e(u.SHOW_MORE);
+    }, pe = nt(
+      {
+        inputContainerRef: r,
+        optionsContainerRef: f,
+        selectedValueIndex: U,
+        isDropdownOpen: v,
+        isDynamicFltering: O(o, "dynamicFiltering"),
+        items: o.items,
+        isMultiple: o.multiple
+      },
+      J,
+      H,
+      M
+    ), G = lt(
+      {
+        inputContainerRef: r,
+        isDropdownOpen: v
+      },
+      M
+    ), fe = {
+      [u.CLOSE_DROPDOWN]: M,
+      [u.SELECT]: Z,
+      [u.SHOW_MORE]: Y,
+      ...G
+    };
+    return o.error && be(
+      '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"
+    ), { __sfc: !0, attrs: t, slots: l, hasSlot: s, props: o, emit: e, t: a, inputContainerRef: r, inputContainerRefWrapper: d, optionsContainerRef: f, isDropdownOpen: v, dropdownOptionsContainerId: _, labelId: C, descriptionId: g, errorId: h, isReadOnly: x, ariaLabelAttribute: S, ariaLabel: L, computedAriaLabel: i, conditionalClasses: p, descriptionConditionalClasses: b, searchTerm: w, items: I, filteredItems: se, isSearching: F, displayValue: ae, idDefaultSize: re, selectedValueItem: ie, selectedValueIndex: U, isMultiLevelSelect: j, flattenedItemsList: q, additionalItemsSelected: de, ariaDescribedBy: ue, openDropdown: H, closeDropdown: M, toggleDropdown: J, clickOutsideDropdown: ce, onOptionSelected: Z, emitShowMoreEvent: Y, textboxKeyboardNavigationListeners: pe, listboxKeyboardNavigationListeners: G, listboxListeners: fe, BentoDropdownOptionsContainer: Ne, BentoTypography: _e, ErrorMessage: Oe, FieldLabel: $e, vBentoClickOutsideDirective: Ee, vBentoKeyboardNavigationDirective: Le };
+  }
+});
+var dt = 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(e.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.idDefaultSize ? t.selectedValueItem : void 0, "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(r) {
+      return [e._t(a, null, null, r)];
+    } };
+  })], 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": e.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(r) {
+      return [e._t(a, null, null, r)];
+    } };
+  })], 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);
+}, ut = [], ct = /* @__PURE__ */ A(
+  it,
+  dt,
+  ut,
+  !1,
+  null,
+  "bdb41062",
+  null,
+  null
+);
+const $t = ct.exports;
+export {
+  $t as B,
+  D as a,
+  st as u
+};
+//# sourceMappingURL=dropdown.eaee22a3.js.map