@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

package/dist/collection/components/six-dropdown/six-dropdown.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { scrollIntoView } from '../../utils/scroll';
 import { getNearestTabbableElement } from '../../utils/tabbable';
 import Popover from '../../utils/popover';
@@ -27,53 +27,7 @@ export class SixDropdown {
     this.componentId = `dropdown-${++id}`;
     this.isVisible = false;
     this.hasBeenInitialized = false;
-    /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /**
-     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-     * inside of the viewport.
-     */
-    this.placement = 'bottom-start';
-    /** Determines whether the dropdown should hide when a menu item is selected. */
-    this.closeOnSelect = true;
-    /** The distance in pixels from which to offset the panel away from its trigger. */
-    this.distance = 0;
-    /** The distance in pixels from which to offset the panel along its trigger. */
-    this.skidding = 0;
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    this.hoist = false;
-    /**
-     * Set to true to allow auto filtering for entries in the dropdown.
-     * With this flag the dropdown will automatically filter itsel.
-     * If you need to coordinate the shown elements yourself,
-     * e.g. because you need to call an endpoint use asyncFilter instead
-     */
-    this.filter = false;
-    /**
-     * Set to true to allow async filtering.
-     * When you enter something in the search field the component will only emit an event but not filter any elements itself.
-     * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
-     */
-    this.asyncFilter = false;
-    /** The filter's placeholder text. */
-    this.filterPlaceholder = 'Filter...';
-    /** By default the search field will be focused when opening a dropdown with filtering enabled. */
-    this.autofocusFilter = true;
-    /** The debounce for the filter callbacks. */
-    this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
-    /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */
-    this.disableHideOnEnterAndSpace = false;
-    /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/
-    this.options = null;
-    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
-     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
-    this.virtualScroll = false;
     this.eventListeners = new EventListeners();
-    // internal representation of options, so we don't have to make options mutable
-    this._options = null;
     this.getMenuItems = () => {
       if (this._options !== null) {
         return this._options.map((option) => h("six-menu-item", { value: option.value }, option.label));
@@ -93,6 +47,22 @@ export class SixDropdown {
       }
       this.sixAutoFilterFired.emit({ filterValue: lowerCaseFilterTerm });
     };
+    this.open = false;
+    this.placement = 'bottom-start';
+    this.closeOnSelect = true;
+    this.distance = 0;
+    this.skidding = 0;
+    this.hoist = false;
+    this.containingElement = undefined;
+    this.filter = false;
+    this.asyncFilter = false;
+    this.filterPlaceholder = 'Filter...';
+    this.autofocusFilter = true;
+    this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
+    this.disableHideOnEnterAndSpace = false;
+    this.options = null;
+    this.virtualScroll = false;
+    this._options = null;
   }
   get hasFilterEnabled() {
     return this.filter || this.asyncFilter;
@@ -133,7 +103,7 @@ export class SixDropdown {
     this.handleDropdownScroll = this.handleDropdownScroll.bind(this);
     if (this.hasBeenInitialized && !this.popover) {
       // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter
-      // disconnectedCallback() is executed. However since componentDidLoad() will not be rerendered the popover was had
+      // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had
       // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,
       // to re-initialize the popover in case the component has already been initialized but the popover is undefined.
       this.initializePopover();
@@ -206,12 +176,11 @@ export class SixDropdown {
   }
   handleFilteringForSlotItems(lowerCaseFilterTerm) {
     const menuItems = this.getMenuItems();
-    menuItems.forEach((menuItem) => {
-      var _a, _b;
-      const lowerCaseMenuItemValue = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.value) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-      const lowerCaseMenuText = (_b = menuItem === null || menuItem === void 0 ? void 0 : menuItem.innerText) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    menuItems.forEach(async (menuItem) => {
+      var _a, _b, _c, _d;
       // hide all elements which don't contain the entered substring
-      const elementContainsFilterTerm = (lowerCaseMenuItemValue === null || lowerCaseMenuItemValue === void 0 ? void 0 : lowerCaseMenuItemValue.includes(lowerCaseFilterTerm)) || (lowerCaseMenuText === null || lowerCaseMenuText === void 0 ? void 0 : lowerCaseMenuText.includes(lowerCaseFilterTerm));
+      const elementContainsFilterTerm = ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm)) ||
+        ((_d = (_c = (await (menuItem === null || menuItem === void 0 ? void 0 : menuItem.getTextLabel()))) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm));
       menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';
     });
   }
@@ -427,513 +396,524 @@ export class SixDropdown {
     return (h("div", { part: "base", id: this.componentId, class: {
         dropdown: true,
         'dropdown--open': this.open,
-      } },
-      h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp },
-        h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })),
-      h("div", { ref: (el) => (this.positioner = el), class: {
-          dropdown__positioner: true,
-          dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
-        } },
-        this.hasFilterEnabled && (h("six-input", { class: {
-            'filter-hidden': !this.open,
-          }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })),
-        h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll },
-          h("slot", null),
-          this._options && (h("six-menu", { part: "menu", items: this._options, virtualScroll: this.virtualScroll }))))));
+      } }, h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { ref: (el) => (this.positioner = el), class: {
+        dropdown__positioner: true,
+        dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
+      } }, this.hasFilterEnabled && (h("six-input", { class: {
+        'filter-hidden': !this.open,
+      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll }, h("slot", null), this._options && (h("six-menu", { part: "menu", items: this._options, virtualScroll: this.virtualScroll }))))));
   }
   static get is() { return "six-dropdown"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-dropdown.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-dropdown.css"]
-  }; }
-  static get properties() { return {
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport."
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom-start'"
-    },
-    "closeOnSelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines whether the dropdown should hide when a menu item is selected."
-      },
-      "attribute": "close-on-select",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "distance": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The distance in pixels from which to offset the panel away from its trigger."
-      },
-      "attribute": "distance",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "skidding": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The distance in pixels from which to offset the panel along its trigger."
-      },
-      "attribute": "skidding",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "hoist": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
-      },
-      "attribute": "hoist",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "containingElement": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
-      }
-    },
-    "filter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to allow auto filtering for entries in the dropdown.\nWith this flag the dropdown will automatically filter itsel.\nIf you need to coordinate the shown elements yourself,\ne.g. because you need to call an endpoint use asyncFilter instead"
-      },
-      "attribute": "filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "asyncFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to allow async filtering.\nWhen you enter something in the search field the component will only emit an event but not filter any elements itself.\nYou can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself"
-      },
-      "attribute": "async-filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "filterPlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The filter's placeholder text."
-      },
-      "attribute": "filter-placeholder",
-      "reflect": false,
-      "defaultValue": "'Filter...'"
-    },
-    "autofocusFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "By default the search field will be focused when opening a dropdown with filtering enabled."
-      },
-      "attribute": "autofocus-filter",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "filterDebounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The debounce for the filter callbacks."
-      },
-      "attribute": "filter-debounce",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "disableHideOnEnterAndSpace": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this"
-      },
-      "attribute": "disable-hide-on-enter-and-space",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "options": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "SixMenuItemData[] | null",
-        "resolved": "SixMenuItemData[]",
-        "references": {
-          "SixMenuItemData": {
-            "location": "import",
-            "path": "../six-menu/six-menu"
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom-start'"
+      },
+      "closeOnSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the dropdown should hide when a menu item is selected."
+        },
+        "attribute": "close-on-select",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "distance": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The distance in pixels from which to offset the panel away from its trigger."
+        },
+        "attribute": "distance",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "skidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The distance in pixels from which to offset the panel along its trigger."
+        },
+        "attribute": "skidding",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "hoist": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
+        },
+        "attribute": "hoist",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "containingElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
-      },
-      "defaultValue": "null"
-    },
-    "virtualScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
-      },
-      "attribute": "virtual-scroll",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "_options": {}
-  }; }
-  static get events() { return [{
-      "method": "sixShow",
-      "name": "six-dropdown-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+      "filter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to allow auto filtering for entries in the dropdown.\nWith this flag the dropdown will automatically filter itsel.\nIf you need to coordinate the shown elements yourself,\ne.g. because you need to call an endpoint use asyncFilter instead"
+        },
+        "attribute": "filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "asyncFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to allow async filtering.\nWhen you enter something in the search field the component will only emit an event but not filter any elements itself.\nYou can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself"
+        },
+        "attribute": "async-filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "filterPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The filter's placeholder text."
+        },
+        "attribute": "filter-placeholder",
+        "reflect": false,
+        "defaultValue": "'Filter...'"
+      },
+      "autofocusFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "By default the search field will be focused when opening a dropdown with filtering enabled."
+        },
+        "attribute": "autofocus-filter",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "filterDebounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The debounce for the filter callbacks."
+        },
+        "attribute": "filter-debounce",
+        "reflect": false,
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+      },
+      "disableHideOnEnterAndSpace": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this"
+        },
+        "attribute": "disable-hide-on-enter-and-space",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SixMenuItemData[] | null",
+          "resolved": "SixMenuItemData[]",
+          "references": {
+            "SixMenuItemData": {
+              "location": "import",
+              "path": "../six-menu/six-menu"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
+        },
+        "defaultValue": "null"
+      },
+      "virtualScroll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
+        },
+        "attribute": "virtual-scroll",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }, {
-      "method": "sixAfterShow",
-      "name": "six-dropdown-after-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted after the dropdown opens and all transitions are complete."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+    };
+  }
+  static get states() {
+    return {
+      "_options": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixShow",
+        "name": "six-dropdown-show",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixHide",
-      "name": "six-dropdown-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+      }, {
+        "method": "sixAfterShow",
+        "name": "six-dropdown-after-show",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted after the dropdown opens and all transitions are complete."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixAfterHide",
-      "name": "six-dropdown-after-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted after the dropdown closes and all transitions are complete."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+      }, {
+        "method": "sixHide",
+        "name": "six-dropdown-hide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixAutoFilterFired",
-      "name": "six-dropdown-auto-filter-fired",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the auto filter is triggered"
-      },
-      "complexType": {
-        "original": "SixDropdownAutoFilterPayload",
-        "resolved": "SixDropdownAutoFilterPayload",
-        "references": {
-          "SixDropdownAutoFilterPayload": {
-            "location": "local"
+      }, {
+        "method": "sixAfterHide",
+        "name": "six-dropdown-after-hide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted after the dropdown closes and all transitions are complete."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixAsyncFilterFired",
-      "name": "six-async-filter-fired",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the async filter is triggered"
-      },
-      "complexType": {
-        "original": "SixDropdownAsyncFilterPayload",
-        "resolved": "SixDropdownAsyncFilterPayload",
-        "references": {
-          "SixDropdownAsyncFilterPayload": {
-            "location": "local"
+      }, {
+        "method": "sixAutoFilterFired",
+        "name": "six-dropdown-auto-filter-fired",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the auto filter is triggered"
+        },
+        "complexType": {
+          "original": "SixDropdownAutoFilterPayload",
+          "resolved": "SixDropdownAutoFilterPayload",
+          "references": {
+            "SixDropdownAutoFilterPayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-dropdown/six-dropdown.tsx"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixScroll",
-      "name": "six-dropdown-scroll",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the user scrolls inside dropdown panel."
-      },
-      "complexType": {
-        "original": "SixDropdownScrollPayload",
-        "resolved": "SixDropdownScrollPayload",
-        "references": {
-          "SixDropdownScrollPayload": {
-            "location": "local"
+      }, {
+        "method": "sixAsyncFilterFired",
+        "name": "six-async-filter-fired",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the async filter is triggered"
+        },
+        "complexType": {
+          "original": "SixDropdownAsyncFilterPayload",
+          "resolved": "SixDropdownAsyncFilterPayload",
+          "references": {
+            "SixDropdownAsyncFilterPayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-dropdown/six-dropdown.tsx"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "sixScroll",
+        "name": "six-dropdown-scroll",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the user scrolls inside dropdown panel."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Shows the dropdown panel",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "SixDropdownScrollPayload",
+          "resolved": "SixDropdownScrollPayload",
+          "references": {
+            "SixDropdownScrollPayload": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-dropdown/six-dropdown.tsx"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Shows the dropdown panel",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Hides the dropdown panel",
-        "tags": []
-      }
-    },
-    "reposition": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Hides the dropdown panel",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.",
-        "tags": []
+      "reposition": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "handleOpenChange"
-    }, {
-      "propName": "distance",
-      "methodName": "handlePopoverOptionsChange"
-    }, {
-      "propName": "hoist",
-      "methodName": "handlePopoverOptionsChange"
-    }, {
-      "propName": "placement",
-      "methodName": "handlePopoverOptionsChange"
-    }, {
-      "propName": "skidding",
-      "methodName": "handlePopoverOptionsChange"
-    }, {
-      "propName": "options",
-      "methodName": "handleOptionsChange"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "handleOpenChange"
+      }, {
+        "propName": "distance",
+        "methodName": "handlePopoverOptionsChange"
+      }, {
+        "propName": "hoist",
+        "methodName": "handlePopoverOptionsChange"
+      }, {
+        "propName": "placement",
+        "methodName": "handlePopoverOptionsChange"
+      }, {
+        "propName": "skidding",
+        "methodName": "handlePopoverOptionsChange"
+      }, {
+        "propName": "options",
+        "methodName": "handleOptionsChange"
+      }];
+  }
 }
+//# sourceMappingURL=six-dropdown.js.map