@six-group/ui-library 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc

package/dist/components/p-CuE-oPzq.js

@@ -0,0 +1,627 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-Cy1zyYSA.js';
+import { P as Popover } from './p-kHci8ddv.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { d as debounce, D as DEFAULT_DEBOUNCE_FAST } from './p-ltzGzaAu.js';
+import { d as defineCustomElement$6 } from './p-BDYD7iMs.js';
+import { d as defineCustomElement$5 } from './p-Ca6q_xWY.js';
+import { d as defineCustomElement$4 } from './p-CUHXUlFv.js';
+import { d as defineCustomElement$3 } from './p-DDGLl92O.js';
+import { d as defineCustomElement$2 } from './p-DGX0unPn.js';
+import { d as defineCustomElement$1 } from './p-Bg1ETngq.js';
+
+function isTabbable(el) {
+    const tabIndex = el.tabIndex;
+    return tabIndex > -1;
+}
+function getNearestTabbableElement(el) {
+    // Check the element
+    if (isTabbable(el)) {
+        return el;
+    }
+    // Check the element's shadow root
+    if (el.shadowRoot != null) {
+        const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e));
+        if (tabbableShadowChild != null) {
+            return tabbableShadowChild;
+        }
+    }
+    // Check the element's children
+    if (el.children != null) {
+        return [...el.children].map((e) => getNearestTabbableElement(e)).at(0);
+    }
+    return undefined;
+}
+
+const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);border:1px solid var(--six-color-web-rock-300);box-shadow:var(--six-shadow-small);opacity:0;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;max-width:90vw}.dropdown__panel__scroll{max-height:18.75rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.dropdown__panel__scroll--virtual{overflow-y:hidden;overflow-x:hidden}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}.filter{border-bottom:1px solid var(--six-color-web-rock-300)}.filter__icon{color:var(--six-color-web-rock-600)}";
+
+let id = 0;
+const SixDropdown = /*@__PURE__*/ proxyCustomElement(class SixDropdown extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixShow = createEvent(this, "six-dropdown-show");
+        this.sixAfterShow = createEvent(this, "six-dropdown-after-show");
+        this.sixHide = createEvent(this, "six-dropdown-hide");
+        this.sixAfterHide = createEvent(this, "six-dropdown-after-hide");
+        this.sixAutoFilter = createEvent(this, "six-dropdown-auto-filter-fired");
+        this.sixAsyncFilterFired = createEvent(this, "six-async-filter-fired");
+        this.sixScroll = createEvent(this, "six-dropdown-scroll");
+        this.componentId = `dropdown-${++id}`;
+        this.isVisible = false;
+        this.resizeObserver = new ResizeObserver(debounce(() => this.updatePanelPosition(), 100));
+        /** Indicates whether 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 the viewport.
+         */
+        this.placement = 'bottom-start';
+        /** Determines whether the dropdown should hide when a menu item is selected. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.closeOnSelect = true;
+        /** The distance in pixels from which to offset the panel away from its trigger. */
+        this.distance = 4;
+        /** 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. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.autofocusFilter = true;
+        /** The debounce for the filter callbacks. */
+        this.filterDebounce = 0;
+        /** 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 = [];
+        /** 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;
+        /**
+         * Determines if the dropdown panel's width should match the width of the trigger element.
+         *
+         * If set to `true`, the panel will resize its width to align with the trigger's width.
+         * If `false` or omitted, the panel will maintain its default width.
+         */
+        this.matchTriggerWidth = false;
+        this.eventListeners = new EventListeners();
+        // internal representation of options, so we don't have to make options mutable
+        this.renderedOptions = [];
+        this.getMenuItems = () => {
+            var _a, _b, _c, _d;
+            if (this.options.length > 0) {
+                return {
+                    sixMenuItems: this.renderedOptions.map((option) => (h("six-menu-item", { value: option.value }, option.label))),
+                    selectionContainerItems: [],
+                };
+            }
+            if (this.panel == null)
+                return { sixMenuItems: [], selectionContainerItems: [] };
+            // Relies on the implementation of six-select. Its dropdown slot contains two elements,
+            // one for the selected menu items, and one for the other items.
+            const selectionContainer = (_a = this.panelSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).filter(isSelectionContainer).at(0);
+            const sixMenuElement = (_b = this.panelSlot) === null || _b === void 0 ? void 0 : _b.assignedElements({ flatten: true }).filter(isSixMenu).at(0);
+            const selectionContainerItems = (selectionContainer === null || selectionContainer === void 0 ? void 0 : selectionContainer.querySelectorAll('six-menu-item')) || [];
+            let sixMenuItems = ((_c = sixMenuElement === null || sixMenuElement === void 0 ? void 0 : sixMenuElement.querySelector('slot')) === null || _c === void 0 ? void 0 : _c.assignedElements().filter((el) => isSixMenuItem(el))) || [];
+            if (sixMenuItems.length === 0) {
+                sixMenuItems = Array.from(((_d = sixMenuElement === null || sixMenuElement === void 0 ? void 0 : sixMenuElement.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('six-menu-item')) || []);
+            }
+            if (selectionContainerItems.length > 0 || sixMenuItems.length > 0) {
+                return { sixMenuItems, selectionContainerItems: [...selectionContainerItems] };
+            }
+            else {
+                return {
+                    sixMenuItems: sixMenuElement ? Array.from(sixMenuElement.querySelectorAll('six-menu-item')) : [],
+                    selectionContainerItems: [],
+                };
+            }
+        };
+        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 { sixMenuItems, selectionContainerItems } = this.getMenuItems();
+                    const item = [...selectionContainerItems, ...sixMenuItems].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.scrollPanel == null)
+                return;
+            this.sixScroll.emit({
+                scrollHeight: this.scrollPanel.scrollHeight,
+                scrollTop: this.scrollPanel.scrollTop,
+                scrollbarHeight: this.scrollPanel.offsetHeight * (this.scrollPanel.offsetHeight / this.scrollPanel.scrollHeight),
+                scrollRatio: this.scrollPanel.scrollTop / (this.scrollPanel.scrollHeight - this.scrollPanel.clientHeight),
+            });
+        };
+    }
+    get filterEnabled() {
+        return this.filter || this.asyncFilter;
+    }
+    get container() {
+        return this.containingElement || this.host;
+    }
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
+        this.updateAccessibleTrigger();
+    }
+    handlePopoverOptionsChange() {
+        if (this.popoverHelper == null)
+            return;
+        this.popoverHelper.setOptions({
+            strategy: this.hoist ? 'fixed' : 'absolute',
+            placement: this.placement,
+            distance: this.distance,
+            skidding: this.skidding,
+        });
+    }
+    handleOptionsChange() {
+        this.validateOptions();
+    }
+    validateOptions() {
+        if (!Array.isArray(this.options)) {
+            this.options = [];
+        }
+        if (this.virtualScroll && this.options.length === 0) {
+            console.error('Options must be defined when using virtual scrolling');
+        }
+        this.renderedOptions = [...this.options];
+    }
+    componentWillLoad() {
+        this.validateOptions();
+        if (this.asyncFilter) {
+            this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
+        }
+    }
+    componentDidLoad() {
+        this.init();
+        if (this.open) {
+            void this.show();
+        }
+    }
+    connectedCallback() {
+        this.init();
+    }
+    init() {
+        this.initPopover();
+        // listen to filter
+        const filterInputElement = this.filterInputElement;
+        if (filterInputElement != null) {
+            this.eventListeners.add(filterInputElement, 'six-input-input', debounce(() => {
+                var _a;
+                const filterValue = (_a = filterInputElement.value) !== null && _a !== void 0 ? _a : '';
+                if (this.filter) {
+                    this.applyFilter(filterValue);
+                }
+                this.emitFilterEvents(filterValue);
+            }, this.filterDebounce));
+        }
+    }
+    applyFilter(filterTerm) {
+        var _a;
+        const lowerCaseFilterTerm = ((_a = filterTerm.toLowerCase()) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        if (this.options.length > 0) {
+            this.renderedOptions = 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)));
+            });
+        }
+        else {
+            const { selectionContainerItems, sixMenuItems } = this.getMenuItems();
+            const selectionContainerValues = selectionContainerItems.map((s) => s.value);
+            // Filter items in selection container
+            selectionContainerItems.forEach(async (menuItem) => {
+                menuItem.style.display = (await containsFilterTerm(menuItem, lowerCaseFilterTerm)) ? 'unset' : 'none';
+            });
+            // Filter other items. Always hide items which contained in the selection container.
+            sixMenuItems.forEach(async (menuItem) => {
+                menuItem.style.display =
+                    (await containsFilterTerm(menuItem, lowerCaseFilterTerm)) &&
+                        !selectionContainerValues.includes(menuItem.value)
+                        ? 'unset'
+                        : 'none';
+            });
+        }
+    }
+    resetFilter() {
+        if (this.filterInputElement != null) {
+            this.filterInputElement.value = '';
+            this.emitFilterEvents('');
+        }
+        if (this.options.length > 0) {
+            this.renderedOptions = [...this.options];
+        }
+        else {
+            const { selectionContainerItems, sixMenuItems } = this.getMenuItems();
+            [...selectionContainerItems, ...sixMenuItems].forEach((item) => (item.style.display = 'unset'));
+        }
+    }
+    emitFilterEvents(filterValue) {
+        if (this.filter) {
+            this.sixAutoFilter.emit({ filterValue });
+        }
+        else if (this.asyncFilter) {
+            this.sixAsyncFilterFired.emit({ filterValue });
+        }
+    }
+    initPopover() {
+        if (this.trigger == null || this.positioner == null)
+            return;
+        this.popoverHelper = new Popover(this.trigger, this.positioner, {
+            strategy: this.hoist ? 'fixed' : 'absolute',
+            placement: this.placement,
+            distance: this.distance,
+            skidding: this.skidding,
+            transitionElement: this.panel,
+            onAfterHide: () => {
+                if (this.filterEnabled) {
+                    this.resetFilter();
+                }
+                this.sixAfterHide.emit();
+            },
+            onAfterShow: async () => {
+                this.sixAfterShow.emit();
+            },
+            onTransitionEnd: () => {
+                if (!this.open && this.scrollPanel != null) {
+                    this.scrollPanel.scrollTop = 0;
+                }
+            },
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.resizeObserver.disconnect();
+        this.eventListeners.removeAll();
+        void this.hide();
+        (_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popoverHelper = 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.popoverHelper == null || this.panel == null) {
+            return;
+        }
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
+        }
+        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;
+        if (this.trigger != null) {
+            this.resizeObserver.observe(this.trigger);
+        }
+        this.updatePanelPosition();
+        this.popoverHelper.show();
+        if (this.filterEnabled && this.autofocusFilter) {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
+            });
+        }
+    }
+    /**
+     * Set min width of dropdown panel to the width of the trigger element
+     */
+    updatePanelPosition() {
+        if (!this.open) {
+            return;
+        }
+        if (this.matchTriggerWidth && this.trigger != null && this.panel != null) {
+            const width = this.trigger.getBoundingClientRect().width;
+            this.panel.style.minWidth = `${width}px`;
+        }
+        if (this.popoverHelper != null) {
+            this.popoverHelper.reposition();
+        }
+    }
+    /** Hides the dropdown panel */
+    async hide() {
+        this.resizeObserver.disconnect();
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible || this.panel == null || this.popoverHelper == null) {
+            return;
+        }
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
+        }
+        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.popoverHelper.hide();
+    }
+    focusOnTrigger() {
+        var _a;
+        if (this.trigger == null)
+            return;
+        const trigger = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).at(0);
+        if (trigger != null) {
+            if (typeof trigger.setFocus === 'function') {
+                trigger.setFocus();
+            }
+            else if (typeof trigger.focus === 'function') {
+                trigger.focus();
+            }
+        }
+    }
+    getMenu() {
+        var _a;
+        return (_a = this.panelSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).filter(isSixMenu).at(0);
+    }
+    //
+    // 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() {
+        var _a;
+        if (this.trigger == null)
+            return;
+        const assignedElements = (((_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true })) || []);
+        const accessibleTrigger = assignedElements.map(getNearestTabbableElement).at(0);
+        if (accessibleTrigger != null) {
+            accessibleTrigger.setAttribute('aria-haspopup', 'true');
+            accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+        }
+    }
+    render() {
+        return (h("div", { key: '04210ff1a4689e32c72f73ee76a94cbe9867b0de', part: "base", id: this.componentId, class: {
+                dropdown: true,
+                'dropdown--open': this.open,
+            } }, h("span", { key: '9eb3c0e703b08734e9458b25021c0844d255ec6e', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, h("slot", { key: '5cec1b43f07f830dfdebb3a71eb56f3233a539c4', name: "trigger", ref: (el) => (this.triggerSlot = el), onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8761367cfff9b66fdd4a7733f1c59440a507178b', ref: (el) => (this.positioner = el), class: {
+                dropdown__positioner: true,
+                dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
+            } }, h("div", { key: '2ab6c7166cea3892e429db21f3b56e7a81e94735', ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId }, this.filterEnabled && (h("six-input", { key: 'f7425daad22c1a756dfda4ecefa6293ac5cdcca5', class: {
+                filter: true,
+                'filter-hidden': !this.open,
+            }, "dropdown-search": true, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder }, h("six-icon", { key: '6416f4e28bc437c18b1cff0e0a9eaa54c9aba3d5', class: "filter__icon", slot: "suffix", size: "small" }, "search"))), h("div", { key: '479140f2107baad72960b415bd69d9ac80bb6f64', class: {
+                dropdown__panel__scroll: true,
+                'dropdown__panel__scroll--virtual': this.virtualScroll,
+            }, onScroll: this.handleDropdownScroll, ref: (el) => (this.scrollPanel = el) }, h("slot", { key: '539cda534eb5ef042526b66487bec3d22c89fdd7', ref: (el) => (this.panelSlot = el) }), this.options.length > 0 && (h("six-menu", { key: '6294182636491e13514380d9516f904f8a9b2204', part: "menu", items: this.renderedOptions, virtualScroll: this.virtualScroll }))), h("slot", { key: '9029f9f9a69d2b6fd19b36755ab9771181a7d1c6', name: "dropdown-footer" })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"],
+        "distance": ["handlePopoverOptionsChange"],
+        "hoist": ["handlePopoverOptionsChange"],
+        "placement": ["handlePopoverOptionsChange"],
+        "skidding": ["handlePopoverOptionsChange"],
+        "options": ["handleOptionsChange"],
+        "virtualScroll": ["handleOptionsChange"]
+    }; }
+    static get style() { return sixDropdownCss; }
+}, [1, "six-dropdown", {
+        "open": [1540],
+        "placement": [1],
+        "closeOnSelect": [4, "close-on-select"],
+        "distance": [2],
+        "skidding": [2],
+        "hoist": [4],
+        "containingElement": [16],
+        "filter": [4],
+        "asyncFilter": [4, "async-filter"],
+        "filterPlaceholder": [1, "filter-placeholder"],
+        "autofocusFilter": [4, "autofocus-filter"],
+        "filterDebounce": [1026, "filter-debounce"],
+        "disableHideOnEnterAndSpace": [4, "disable-hide-on-enter-and-space"],
+        "options": [1040],
+        "virtualScroll": [4, "virtual-scroll"],
+        "matchTriggerWidth": [4, "match-trigger-width"],
+        "renderedOptions": [32],
+        "show": [64],
+        "hide": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"],
+        "distance": ["handlePopoverOptionsChange"],
+        "hoist": ["handlePopoverOptionsChange"],
+        "placement": ["handlePopoverOptionsChange"],
+        "skidding": ["handlePopoverOptionsChange"],
+        "options": ["handleOptionsChange"],
+        "virtualScroll": ["handleOptionsChange"]
+    }]);
+function isSixMenu(el) {
+    return (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu';
+}
+function isSixMenuItem(el) {
+    return (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
+}
+function isSelectionContainer(el) {
+    var _a;
+    return ((_a = el === null || el === void 0 ? void 0 : el.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.includes('selection-container')) || false;
+}
+async function containsFilterTerm(menuItem, lowerCaseFilterTerm) {
+    return (menuItem.value.toLowerCase().includes(lowerCaseFilterTerm) ||
+        (await menuItem.getTextLabel()).toLowerCase().includes(lowerCaseFilterTerm));
+}
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-dropdown", "six-checkbox", "six-error", "six-icon", "six-input", "six-menu", "six-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixDropdown);
+            }
+            break;
+        case "six-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "six-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixDropdown as S, defineCustomElement as d };
+//# sourceMappingURL=p-CuE-oPzq.js.map
+
+//# sourceMappingURL=p-CuE-oPzq.js.map