@six-group/ui-library 0.0.0-insider.a8d68c7 → 0.0.0-insider.b26fdef

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

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
-import { getNearestTabbableElement } from '../../utils/tabbable';
-import Popover from '../../utils/popover';
-import { EventListeners } from '../../utils/event-listeners';
-import { getSlotChildren } from '../../utils/slot';
-import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
+import { h } from "@stencil/core";
+import { getNearestTabbableElement } from "../../utils/tabbable";
+import Popover from "../../utils/popover";
+import { EventListeners } from "../../utils/event-listeners";
+import { getSlotChildren } from "../../utils/slot";
+import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
 const isTagName = (name) => (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === name.toLowerCase();
 const isSixMenu = isTagName('six-menu');
 const isSixMenuItem = isTagName('six-menu-item');
@@ -22,910 +22,922 @@ let id = 0;
  * @part panel - The panel that gets shown when the dropdown is open.
  */
 export class SixDropdown {
-  constructor() {
-    this.componentId = `dropdown-${++id}`;
-    this.isVisible = false;
-    this.hasBeenInitialized = false;
-    this.eventListeners = new EventListeners();
-    this.getMenuItems = () => {
-      if (this.filteredOptions.length > 0) {
-        return this.filteredOptions.map((option) => h("six-menu-item", { value: option.value }, option.label));
-      }
-      if (this.panel == null)
-        return [];
-      const [panel] = getSlotChildren(this.panel);
-      // the menu-items can be in a slot e.g. in six-select or direct children of the panel
-      return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));
-    };
-    this.handleFilterInputChange = () => {
-      var _a, _b;
-      if (this.filterInputElement == null)
-        return;
-      const lowerCaseFilterTerm = ((_b = (_a = this.filterInputElement.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-      if (this.filteredOptions.length > 0) {
-        this.handleFilteringForAttributeItems(lowerCaseFilterTerm);
-      }
-      else {
-        this.handleFilteringForSlotItems(lowerCaseFilterTerm);
-      }
-      this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });
-    };
-    this.handleDocumentKeyDown = (event) => {
-      var _a;
-      const keyboardEvent = event;
-      // Close when escape is pressed
-      if (keyboardEvent.key === 'Escape') {
-        void this.hide();
-        this.focusOnTrigger();
-        return;
-      }
-      if (this.filterInputElement === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
-        if (keyboardEvent.key === 'ArrowDown') {
-          const item = this.getMenuItems().find((item) => item.style.display !== 'none');
-          if (item != null) {
-            item.setFocus();
-          }
-        }
-      }
-      // Handle tabbing
-      if (keyboardEvent.key === 'Tab') {
-        // Tabbing within an open menu should close the dropdown and refocus the trigger
-        if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {
-          keyboardEvent.preventDefault();
-          void this.hide();
-          this.focusOnTrigger();
-          return;
-        }
-        // Tabbing outside the containing element closes the panel
-        //
-        // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
-        // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
-        setTimeout(() => {
-          var _a, _b;
-          const activeElement = this.container.getRootNode() instanceof ShadowRoot
-            ? (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement
-            : document.activeElement;
-          if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
-            void this.hide();
-            return;
-          }
-        });
-      }
-    };
-    this.handleDocumentMouseDown = (event) => {
-      // Close when clicking outside the containing element
-      const path = event.composedPath();
-      if (!path.includes(this.container)) {
-        void this.hide();
-        return;
-      }
-    };
-    this.handlePanelSelect = (event) => {
-      const target = event.target;
-      // Hide the dropdown when a menu item is selected
-      if (this.closeOnSelect && isSixMenu(target)) {
-        void this.hide();
-        this.focusOnTrigger();
-      }
-    };
-    this.handleTriggerClick = () => {
-      this.open ? this.hide() : this.show();
-    };
-    this.handleTriggerKeyDown = (event) => {
-      // Close when escape or tab is pressed
-      if (event.key === 'Escape') {
-        this.focusOnTrigger();
-        void this.hide();
-        return;
-      }
-      // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
-      // key again to hide the menu in case they don't want to make a selection.
-      if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
-        event.preventDefault();
-        this.open ? void this.hide() : void this.show();
-        return;
-      }
-      const menu = this.getMenu();
-      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
-      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
-      // faster navigation.
-      if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-        event.preventDefault();
-        // Show the menu if it's not already open
-        if (!this.open) {
-          void this.show();
-        }
-        if (menu == null) {
-          return;
-        }
-        const menuItems = [...menu.querySelectorAll('six-menu-item')];
-        const firstMenuItem = menuItems.at(0);
-        const lastMenuItem = menuItems.at(menuItems.length - 1);
-        // Focus on a menu item
-        if (event.key === 'ArrowDown' && firstMenuItem != null) {
-          firstMenuItem.setFocus();
-          return;
-        }
-        if (event.key === 'ArrowUp' && lastMenuItem != null) {
-          lastMenuItem.setFocus();
-          return;
-        }
-      }
-      // Other keys bring focus to the menu and initiate type-to-select behavior
-      const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
-      if (this.open && menu != null && !ignoredKeys.includes(event.key)) {
-        void menu.typeToSelect(event.key);
-        return;
-      }
-    };
-    this.handleTriggerKeyUp = (event) => {
-      // Prevent space from triggering a click event in Firefox
-      if (event.key === ' ') {
-        event.preventDefault();
-      }
-    };
-    this.handleTriggerSlotChange = () => {
-      this.updateAccessibleTrigger();
-    };
-    this.handleDropdownScroll = () => {
-      if (this.panel == null)
-        return;
-      this.sixScroll.emit({
-        scrollHeight: this.panel.scrollHeight,
-        scrollTop: this.panel.scrollTop,
-        scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
-        scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
-      });
-    };
-    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 = [];
-    this.virtualScroll = false;
-    this.filteredOptions = [];
-  }
-  get hasFilterEnabled() {
-    return this.filter || this.asyncFilter;
-  }
-  get container() {
-    return this.containingElement || this.host;
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-    this.updateAccessibleTrigger();
-  }
-  handlePopoverOptionsChange() {
-    if (this.popover == null)
-      return;
-    this.popover.setOptions({
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-    });
-  }
-  handleOptionsChange() {
-    if (Array.isArray(this.options)) {
-      this.filteredOptions = [...this.options];
-    }
-  }
-  connectedCallback() {
-    if (this.virtualScroll && this.options === null) {
-      console.error('Options must be defined when using virtual scrolling');
+    constructor() {
+        this.componentId = `dropdown-${++id}`;
+        this.isVisible = false;
+        this.hasBeenInitialized = false;
+        this.eventListeners = new EventListeners();
+        this.getMenuItems = () => {
+            if (this.filteredOptions.length > 0) {
+                return this.filteredOptions.map((option) => h("six-menu-item", { value: option.value }, option.label));
+            }
+            if (this.panel == null)
+                return [];
+            const [panel] = getSlotChildren(this.panel);
+            // the menu-items can be in a slot e.g. in six-select or direct children of the panel
+            return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));
+        };
+        this.handleFilterInputChange = () => {
+            var _a, _b;
+            if (this.filterInputElement == null)
+                return;
+            const lowerCaseFilterTerm = ((_b = (_a = this.filterInputElement.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            if (this.filteredOptions.length > 0) {
+                this.handleFilteringForAttributeItems(lowerCaseFilterTerm);
+            }
+            else {
+                this.handleFilteringForSlotItems(lowerCaseFilterTerm);
+            }
+            this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });
+        };
+        this.handleDocumentKeyDown = (event) => {
+            var _a;
+            const keyboardEvent = event;
+            // Close when escape is pressed
+            if (keyboardEvent.key === 'Escape') {
+                void this.hide();
+                this.focusOnTrigger();
+                return;
+            }
+            if (this.filterInputElement === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+                if (keyboardEvent.key === 'ArrowDown') {
+                    const item = this.getMenuItems().find((item) => item.style.display !== 'none');
+                    if (item != null) {
+                        item.setFocus();
+                    }
+                }
+            }
+            // Handle tabbing
+            if (keyboardEvent.key === 'Tab') {
+                // Tabbing within an open menu should close the dropdown and refocus the trigger
+                if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {
+                    keyboardEvent.preventDefault();
+                    void this.hide();
+                    this.focusOnTrigger();
+                    return;
+                }
+                // Tabbing outside the containing element closes the panel
+                //
+                // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+                // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+                setTimeout(() => {
+                    var _a, _b;
+                    const activeElement = this.container.getRootNode() instanceof ShadowRoot
+                        ? (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement
+                        : document.activeElement;
+                    if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
+                        void this.hide();
+                        return;
+                    }
+                });
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // Close when clicking outside the containing element
+            const path = event.composedPath();
+            if (!path.includes(this.container)) {
+                void this.hide();
+                return;
+            }
+        };
+        this.handlePanelSelect = (event) => {
+            const target = event.target;
+            // Hide the dropdown when a menu item is selected
+            if (this.closeOnSelect && isSixMenu(target)) {
+                void this.hide();
+                this.focusOnTrigger();
+            }
+        };
+        this.handleTriggerClick = () => {
+            this.open ? this.hide() : this.show();
+        };
+        this.handleTriggerKeyDown = (event) => {
+            // Close when escape or tab is pressed
+            if (event.key === 'Escape') {
+                this.focusOnTrigger();
+                void this.hide();
+                return;
+            }
+            // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+            // key again to hide the menu in case they don't want to make a selection.
+            if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
+                event.preventDefault();
+                this.open ? void this.hide() : void this.show();
+                return;
+            }
+            const menu = this.getMenu();
+            // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+            // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+            // faster navigation.
+            if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                event.preventDefault();
+                // Show the menu if it's not already open
+                if (!this.open) {
+                    void this.show();
+                }
+                if (menu == null) {
+                    return;
+                }
+                const menuItems = [...menu.querySelectorAll('six-menu-item')];
+                const firstMenuItem = menuItems.at(0);
+                const lastMenuItem = menuItems.at(menuItems.length - 1);
+                // Focus on a menu item
+                if (event.key === 'ArrowDown' && firstMenuItem != null) {
+                    firstMenuItem.setFocus();
+                    return;
+                }
+                if (event.key === 'ArrowUp' && lastMenuItem != null) {
+                    lastMenuItem.setFocus();
+                    return;
+                }
+            }
+            // Other keys bring focus to the menu and initiate type-to-select behavior
+            const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
+            if (this.open && menu != null && !ignoredKeys.includes(event.key)) {
+                void menu.typeToSelect(event.key);
+                return;
+            }
+        };
+        this.handleTriggerKeyUp = (event) => {
+            // Prevent space from triggering a click event in Firefox
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        };
+        this.handleTriggerSlotChange = () => {
+            this.updateAccessibleTrigger();
+        };
+        this.handleDropdownScroll = () => {
+            if (this.panel == null)
+                return;
+            this.sixScroll.emit({
+                scrollHeight: this.panel.scrollHeight,
+                scrollTop: this.panel.scrollTop,
+                scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
+                scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
+            });
+        };
+        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 = [];
+        this.virtualScroll = false;
+        this.filteredOptions = [];
     }
-    if (Array.isArray(this.options)) {
-      this.filteredOptions = [...this.options];
+    get hasFilterEnabled() {
+        return this.filter || this.asyncFilter;
     }
-    if (this.hasBeenInitialized && this.popover == null) {
-      // 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 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();
+    get container() {
+        return this.containingElement || this.host;
     }
-  }
-  componentDidLoad() {
-    this.hasBeenInitialized = true;
-    this.initializePopover();
-    // Show on init if open
-    if (this.open) {
-      void this.show();
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
+        this.updateAccessibleTrigger();
     }
-    if (this.filter) {
-      this.setupFiltering(this.handleFilterInputChange);
+    handlePopoverOptionsChange() {
+        if (this.popover == null)
+            return;
+        this.popover.setOptions({
+            strategy: this.hoist ? 'fixed' : 'absolute',
+            placement: this.placement,
+            distance: this.distance,
+            skidding: this.skidding,
+        });
     }
-    else if (this.asyncFilter) {
-      this.setupFiltering(() => { var _a, _b; return this.sixAsyncFilterFired.emit({ filterValue: (_b = (_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '' }); });
+    handleOptionsChange() {
+        if (Array.isArray(this.options)) {
+            this.filteredOptions = [...this.options];
+        }
     }
-  }
-  initializePopover() {
-    if (this.trigger == null || this.positioner == null)
-      return;
-    const onAfterHide = () => {
-      if (this.filter && this.filterInputElement != null) {
-        this.filterInputElement.value = '';
-        if (this.filteredOptions.length > 0) {
-          this.filteredOptions = [...this.options];
+    connectedCallback() {
+        if (this.virtualScroll && this.options === null) {
+            console.error('Options must be defined when using virtual scrolling');
         }
-        else {
-          const menuItems = this.getMenuItems();
-          menuItems.forEach((item) => (item.style.display = 'unset'));
+        if (Array.isArray(this.options)) {
+            this.filteredOptions = [...this.options];
+        }
+        if (this.hasBeenInitialized && this.popover == null) {
+            // 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 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();
         }
-      }
-      this.sixAfterHide.emit();
-    };
-    const onAfterShow = async () => {
-      var _a;
-      if (this.hasFilterEnabled && this.autofocusFilter) {
-        // if dropdown filter is enabled we should autofocus the search field
-        await ((_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
-      }
-      this.sixAfterShow.emit();
-    };
-    const onTransitionEnd = () => {
-      if (!this.open && this.panel != null) {
-        this.panel.scrollTop = 0;
-      }
-    };
-    this.popover = new Popover(this.trigger, this.positioner, {
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-      transitionElement: this.panel,
-      onAfterHide,
-      onAfterShow,
-      onTransitionEnd,
-    });
-  }
-  setupFiltering(callback) {
-    if (this.filterInputElement != null) {
-      this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));
-    }
-  }
-  handleFilteringForAttributeItems(lowerCaseFilterTerm) {
-    if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {
-      this.filteredOptions = [...this.options];
-      return;
-    }
-    this.filteredOptions = this.options.filter((option) => {
-      var _a, _b, _c, _d;
-      return (option.label && ((_b = (_a = String(option.label)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm))) ||
-        (option.value && ((_d = (_c = String(option.value)) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm)));
-    });
-  }
-  handleFilteringForSlotItems(lowerCaseFilterTerm) {
-    const menuItems = this.getMenuItems();
-    menuItems.forEach(async (menuItem) => {
-      var _a, _b, _c, _d;
-      // hide all elements which don't contain the entered substring
-      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';
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    this.eventListeners.removeAll();
-    void this.hide();
-    (_a = this.popover) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.popover = undefined;
-  }
-  /** Shows the dropdown panel */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible || this.popover == null || this.panel == null) {
-      return;
     }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    componentDidLoad() {
+        this.hasBeenInitialized = true;
+        this.initializePopover();
+        // Show on init if open
+        if (this.open) {
+            void this.show();
+        }
+        if (this.filter) {
+            this.setupFiltering(this.handleFilterInputChange);
+        }
+        else if (this.asyncFilter) {
+            this.setupFiltering(() => { var _a, _b; return this.sixAsyncFilterFired.emit({ filterValue: (_b = (_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '' }); });
+        }
     }
-    this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
-    this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
-    this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
-    this.isVisible = true;
-    this.open = true;
-    this.popover.show();
-  }
-  /** Hides the dropdown panel */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible || this.panel == null || this.popover == null) {
-      return;
+    initializePopover() {
+        if (this.trigger == null || this.positioner == null)
+            return;
+        const onAfterHide = () => {
+            if (this.filter && this.filterInputElement != null) {
+                this.filterInputElement.value = '';
+                if (this.filteredOptions.length > 0) {
+                    this.filteredOptions = [...this.options];
+                }
+                else {
+                    const menuItems = this.getMenuItems();
+                    menuItems.forEach((item) => (item.style.display = 'unset'));
+                }
+            }
+            this.sixAfterHide.emit();
+        };
+        const onAfterShow = async () => {
+            var _a;
+            if (this.hasFilterEnabled && this.autofocusFilter) {
+                // if dropdown filter is enabled we should autofocus the search field
+                await ((_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
+            }
+            this.sixAfterShow.emit();
+        };
+        const onTransitionEnd = () => {
+            if (!this.open && this.panel != null) {
+                this.panel.scrollTop = 0;
+            }
+        };
+        this.popover = new Popover(this.trigger, this.positioner, {
+            strategy: this.hoist ? 'fixed' : 'absolute',
+            placement: this.placement,
+            distance: this.distance,
+            skidding: this.skidding,
+            transitionElement: this.panel,
+            onAfterHide,
+            onAfterShow,
+            onTransitionEnd,
+        });
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    setupFiltering(callback) {
+        if (this.filterInputElement != null) {
+            this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));
+        }
     }
-    this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
-    this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);
-    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
-    this.isVisible = false;
-    this.open = false;
-    this.popover.hide();
-  }
-  focusOnTrigger() {
-    if (this.trigger == null)
-      return;
-    const [trigger] = getSlotChildren(this.trigger);
-    if (trigger != null) {
-      if (typeof trigger.setFocus === 'function') {
-        trigger.setFocus();
-      }
-      else if (typeof trigger.focus === 'function') {
-        trigger.focus();
-      }
+    handleFilteringForAttributeItems(lowerCaseFilterTerm) {
+        if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {
+            this.filteredOptions = [...this.options];
+            return;
+        }
+        this.filteredOptions = this.options.filter((option) => {
+            var _a, _b, _c, _d;
+            return (option.label && ((_b = (_a = String(option.label)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm))) ||
+                (option.value && ((_d = (_c = String(option.value)) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm)));
+        });
     }
-  }
-  getMenu() {
-    if (this.panel == null)
-      return;
-    return getSlotChildren(this.panel).filter(isSixMenu).at(0);
-  }
-  /**
-   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   */
-  async reposition() {
-    if (!this.open || this.popover == null) {
-      return;
+    handleFilteringForSlotItems(lowerCaseFilterTerm) {
+        const menuItems = this.getMenuItems();
+        menuItems.forEach(async (menuItem) => {
+            var _a, _b, _c, _d;
+            // hide all elements which don't contain the entered substring
+            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';
+        });
     }
-    this.popover.reposition();
-  }
-  //
-  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
-  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
-  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
-  // a child of the slotted element, or an element in the slotted element's shadow root.
-  //
-  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
-  //
-  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
-  //
-  updateAccessibleTrigger() {
-    if (this.trigger == null)
-      return;
-    const accessibleTrigger = getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);
-    if (accessibleTrigger != null) {
-      accessibleTrigger.setAttribute('aria-haspopup', 'true');
-      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    disconnectedCallback() {
+        var _a;
+        this.eventListeners.removeAll();
+        void this.hide();
+        (_a = this.popover) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popover = undefined;
     }
-  }
-  render() {
-    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.filteredOptions.length > 0 && (h("six-menu", { part: "menu", items: this.filteredOptions, 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 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 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 | undefined",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "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[]",
-          "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": "[]"
-      },
-      "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 {
-      "filteredOptions": {}
-    };
-  }
-  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"
-            }
-          }
+    /** Shows the dropdown panel */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible || this.popover == null || this.panel == null) {
+            return;
         }
-      }, {
-        "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"
-            }
-          }
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
         }
-      }, {
-        "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"
-            }
-          }
+        this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
+        this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+        this.isVisible = true;
+        this.open = true;
+        this.popover.show();
+    }
+    /** Hides the dropdown panel */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible || this.panel == null || this.popover == null) {
+            return;
         }
-      }, {
-        "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"
-            }
-          }
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
         }
-      }, {
-        "method": "sixAutoFilter",
-        "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"
+        this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);
+        this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
+        this.isVisible = false;
+        this.open = false;
+        this.popover.hide();
+    }
+    focusOnTrigger() {
+        if (this.trigger == null)
+            return;
+        const [trigger] = getSlotChildren(this.trigger);
+        if (trigger != null) {
+            if (typeof trigger.setFocus === 'function') {
+                trigger.setFocus();
             }
-          }
-        }
-      }, {
-        "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"
+            else if (typeof trigger.focus === 'function') {
+                trigger.focus();
             }
-          }
         }
-      }, {
-        "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",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-dropdown/six-dropdown.tsx"
-            }
-          }
+    }
+    getMenu() {
+        if (this.panel == null)
+            return;
+        return getSlotChildren(this.panel).filter(isSixMenu).at(0);
+    }
+    /**
+     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+     * is activated.
+     */
+    async reposition() {
+        if (!this.open || this.popover == null) {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the dropdown panel",
-          "tags": []
+        this.popover.reposition();
+    }
+    //
+    // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+    // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+    // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+    // a child of the slotted element, or an element in the slotted element's shadow root.
+    //
+    // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
+    //
+    // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+    //
+    updateAccessibleTrigger() {
+        if (this.trigger == null)
+            return;
+        const accessibleTrigger = getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);
+        if (accessibleTrigger != null) {
+            accessibleTrigger.setAttribute('aria-haspopup', 'true');
+            accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    render() {
+        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.filteredOptions.length > 0 && (h("six-menu", { part: "menu", items: this.filteredOptions, 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 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 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 | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "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[]",
+                    "resolved": "SixMenuItemData[]",
+                    "references": {
+                        "SixMenuItemData": {
+                            "location": "import",
+                            "path": "../six-menu/six-menu",
+                            "id": "src/components/six-menu/six-menu.tsx::SixMenuItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
+                },
+                "defaultValue": "[]"
+            },
+            "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"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the dropdown panel",
-          "tags": []
-        }
-      },
-      "reposition": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+    }
+    static get states() {
+        return {
+            "filteredOptions": {}
+        };
+    }
+    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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixAutoFilter",
+                "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",
+                            "id": "src/components/six-dropdown/six-dropdown.tsx::SixDropdownAutoFilterPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/six-dropdown/six-dropdown.tsx::SixDropdownAsyncFilterPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-dropdown/six-dropdown.tsx",
+                            "id": "src/components/six-dropdown/six-dropdown.tsx::SixDropdownScrollPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the dropdown panel",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the dropdown panel",
+                    "tags": []
+                }
+            },
+            "reposition": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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": []
+                }
             }
-          },
-          "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 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"
+            }];
+    }
 }
 //# sourceMappingURL=six-dropdown.js.map