@rededor/cura 1.6.0-alpha.4 → 1.6.0

package/dist/components/cura-dropdown-search.js

@@ -1,11 +1,64 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as addBodyScrollLockClass, r as removeBodyScrollLockClass, c as checkMobile, d as defineCustomElement$4, b as checkIOS } from './cura-input-text2.js';
 import { d as defineCustomElement$6 } from './cura-button-transparent2.js';
 import { d as defineCustomElement$5 } from './cura-icon2.js';
-import { d as defineCustomElement$4 } from './cura-input-text2.js';
 import { d as defineCustomElement$3 } from './cura-label2.js';
 import { d as defineCustomElement$2 } from './cura-loader-circle2.js';
 
-const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex;margin-right:4px}.dropdown-mobile .dropdown-input-search cura-input-text{padding:12px 8px 12px 0px}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:calc(100vh - var(--dynamic-input-search-height, 0));max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
+class FixedElementScrollBehavior {
+    constructor(hostElement, scrollableElement) {
+        this._stopPropagationEvent = (e) => {
+            if (this.scrollableElement.scrollHeight <= this.scrollableElement.clientHeight) {
+                e.preventDefault();
+            }
+            e.stopPropagation();
+        };
+        this._preventEvent = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        if (!hostElement || !scrollableElement) {
+            console.error("Componentes host ou scrollable não foram informados corretamente ou não existem.");
+        }
+        else {
+            this.hostElement = hostElement;
+            this.scrollableElement = scrollableElement;
+        }
+    }
+    disableScroll() {
+        this.scrollPosition = window.scrollY;
+        window.scrollTo({ top: 0, behavior: 'instant' });
+        addBodyScrollLockClass();
+        this._addEvents();
+    }
+    enableScroll() {
+        removeBodyScrollLockClass();
+        window.scrollTo({ top: this.scrollPosition, behavior: 'instant' });
+        this._removeEvents();
+    }
+    _addEvents() {
+        this.hostElement.addEventListener('wheel', this._preventEvent, { passive: false });
+        this.hostElement.addEventListener('mousewheel', this._preventEvent, { passive: false });
+        this.hostElement.addEventListener('touchmove', this._preventEvent, { passive: false });
+        this.hostElement.addEventListener('scroll', this._preventEvent, { passive: false });
+        this.scrollableElement.addEventListener('wheel', this._stopPropagationEvent, { passive: false });
+        this.scrollableElement.addEventListener('mousewheel', this._stopPropagationEvent, { passive: false });
+        this.scrollableElement.addEventListener('touchmove', this._stopPropagationEvent, { passive: false });
+        this.scrollableElement.addEventListener('scroll', this._stopPropagationEvent, { passive: false });
+    }
+    _removeEvents() {
+        this.hostElement.removeEventListener('wheel', this._preventEvent);
+        this.hostElement.removeEventListener('mousewheel', this._preventEvent);
+        this.hostElement.removeEventListener('touchmove', this._preventEvent);
+        this.hostElement.removeEventListener('scroll', this._preventEvent);
+        this.scrollableElement.removeEventListener('wheel', this._stopPropagationEvent);
+        this.scrollableElement.removeEventListener('mousewheel', this._stopPropagationEvent);
+        this.scrollableElement.removeEventListener('touchmove', this._stopPropagationEvent);
+        this.scrollableElement.removeEventListener('scroll', this._stopPropagationEvent);
+    }
+}
+
+const curaDropdownSearchCss = ":host{display:block;box-sizing:border-box;position:relative}:host .component-controls{display:flex;align-items:center;justify-content:center;gap:calc(var(--cura-spacing-base) * 1px)}:host .component-controls #button-back{padding:0 0 0 calc(var(--cura-spacing-base) * 3px);width:max-content}:host .component-container{box-sizing:border-box;width:100%;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:min-content 1fr}:host .component-container.zoom{position:fixed;top:0;left:0;width:100vw;background:var(--purewhite);height:var(--height);z-index:9999;overscroll-behavior:contain}:host .component-container.zoom .component-controls{border-bottom:2px solid var(--primary);padding:calc(var(--cura-spacing-base) * 3px) 0}:host .component-container.zoom.error .component-controls{border-bottom:2px solid var(--error-dark);background-color:var(--error-lighter)}:host .component-container .dropdown-container{box-sizing:border-box;width:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:calc(var(--cura-spacing-base) * 3px);overscroll-behavior:contain}:host .component-container:not(.zoom) .dropdown-container{box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));position:absolute;bottom:0;left:0;transform:translateY(100%);max-height:var(--max-height);background-color:var(--purewhite);border-radius:0px 0px calc(var(--cura-spacing-base) * 1px) calc(var(--cura-spacing-base) * 1px);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);border-right:2px solid var(--neutral-light);display:none;z-index:9997}:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-field){border-radius:4px 4px 0px 0px}:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-text-helper){height:0px;overflow:hidden;margin-top:0px}:host .component-container:not(.zoom).dropdown-visible .dropdown-container{display:block}";
 const CuraDropdownSearchStyle0 = curaDropdownSearchCss;
 
 const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearch extends HTMLElement {
@@ -13,299 +66,293 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.valueChanged = createEvent(this, "valueChanged", 7);
-        this.onselect = createEvent(this, "onselect", 7);
-        this.overlayElement = null;
-        this.adjustInputPosition = () => {
-            setTimeout(() => {
-                var _a, _b;
-                const isKeyboardOpen = (window === null || window === void 0 ? void 0 : window.innerHeight) < this.screenDefaultHeight;
-                const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
-                if (dropdown) {
-                    dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
-                    dropdown.style.bottom = isKeyboardOpen ? `${((_b = window === null || window === void 0 ? void 0 : window.screen) === null || _b === void 0 ? void 0 : _b.height) - (window === null || window === void 0 ? void 0 : window.innerHeight)}px` : '0';
-                    window.scroll({ top: 0, left: 0 });
+        this.termchange = createEvent(this, "termchange", 7);
+        this.optionselect = createEvent(this, "optionselect", 7);
+        this.resizeTimeoutMs = 66;
+        this.focusTimeoutMs = 300;
+        this.blurTimeoutMs = 300;
+        this.highlightedIndex = -1;
+        this.dropdownSelectableItems = [];
+        this.handleSlotChange = () => { this.getSlotElements(); };
+        this.handleWindowResize = () => {
+            if (this.resizeTimeout)
+                clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = setTimeout(() => {
+                this.isMobile = checkMobile();
+                this.setZoomHeight();
+            }, this.resizeTimeoutMs);
+        };
+        this.handleFocus = () => {
+            if (this.focusTimeout)
+                clearTimeout(this.focusTimeout);
+            this.focusTimeout = setTimeout(() => {
+                this.isOnFocus = true;
+                this.clearHighlight();
+                if (this.isMobile && !this.zoomState)
+                    this.enterZoom();
+                if (this.zoomState)
+                    this.setZoomHeight();
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.selectedOptionElement) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
+                }, 10);
+            }, this.focusTimeoutMs);
+        };
+        this.handleBlur = () => {
+            if (this.blurTimeout)
+                clearTimeout(this.blurTimeout);
+            this.blurTimeout = setTimeout(() => {
+                if (this.zoomState) {
+                    const delay = checkIOS ? 500 : 100;
+                    setTimeout(() => this.setZoomHeight(), delay);
                 }
-            }, 300);
+                this.isOnFocus = false;
+            }, this.blurTimeoutMs);
         };
-        this.handleSlotChange = () => {
-            this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
-            this.addClickListenersToOptions();
-            this.updateHoveredIndex();
+        this.handleFocusout = () => {
+            if (this.zoomState)
+                this.setZoomHeight();
         };
-        this.handleInputChange = (event) => {
-            const input = event.target;
-            this.value = input.value;
-            this.onValueChange(this.value);
+        this.handleBackClick = () => { this.exitZoom(); };
+        this.handleOptionActionClick = (ev) => {
+            this.getInputElement().setFocus();
+            this._preventEvent(ev);
         };
-        this.handleKeyDown = (event) => {
-            if (event.key === 'ArrowDown') {
-                event.preventDefault();
-                this.moveHighlight(1);
-            }
-            else if (event.key === 'ArrowUp') {
-                event.preventDefault();
-                this.moveHighlight(-1);
-            }
-            else if (event.key === 'Enter') {
-                event.preventDefault();
-                if (this.hoveredIndex > -1) {
-                    this.handleOnBlur();
-                    this.onSelectedOption(this.hoveredIndex);
-                }
-            }
+        this.handleInputClear = (ev) => {
+            this.setValue('');
+            this.clearSelectedOptions();
+            this._preventEvent(ev);
         };
-        this.handleResize = () => {
-            this.isMobile = window.innerWidth < 768;
-            if (this.isDropdownOpen) {
-                if (this.isMobile) {
-                    this.showOverlay();
-                }
-                else {
-                    this.resetDropdownStyles();
-                    this.removeOverlay();
-                }
+        this.handleSelectOption = (ev) => {
+            this._selectOption(ev.detail);
+            this._preventEvent(ev);
+        };
+        this.handleInputValueChange = (ev) => {
+            this.setValue(ev.detail);
+            if (this.selectedOptionElement && ev.detail !== this.selectedOptionElement.value) {
+                this.clearSelectedOptions();
             }
+            this._preventEvent(ev);
+        };
+        this.handleDropdownMouseOver = () => {
+            if (this.highlightedElement || this.highlightedIndex >= 0)
+                this.clearHighlight();
         };
-        this.setUp = () => {
-            this.handleResize();
-            this.adjustInputPosition();
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'ArrowDown')
+                this.moveHighlight('next');
+            if (ev.key === 'ArrowUp')
+                this.moveHighlight('prev');
+            if (ev.key === 'Enter')
+                this.selectHighlight();
         };
+        this.getInputElement = () => { var _a; return (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('cura-input-text'); };
+        this._preventEvent = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        this.name = undefined;
         this.size = 'large';
         this.status = 'default';
         this.disabled = false;
-        this.name = undefined;
         this.required = false;
-        this.selected = false;
-        this.value = '';
         this.placeholder = '';
         this.label = '';
-        this.iconName = 'search';
-        this.dropdownMaxHeight = '630px';
-        this.overlayVisible = false;
-        this.isDropdownOpen = false;
+        this.icon = 'search';
+        this.maxheight = '400px';
+        this.value = '';
+        this.searchdelay = 400;
+        this.searchminchars = 3;
         this.styles = {};
-        this.isMobile = window.innerWidth < 768;
-        this.mode = 'default';
-        this.inputTextRef = undefined;
-        this.isOnBlurInput = true;
-        this.hoveredIndex = -1;
-        this.options = [];
-        this.originalOverflow = '';
-        this.screenDefaultHeight = 0;
+        this.zoomState = false;
+        this.isOnFocus = false;
+        this.dropdownItems = [];
+    }
+    /**
+     * Set focus to input field.
+     */
+    async setFocus() {
+        this.getInputElement().setFocus();
+    }
+    /**
+     * Select by optionid property of a selectable option component.
+     */
+    async selectOption(optionid) {
+        this._selectOption(optionid);
     }
     connectedCallback() {
         this.weights = window.CuraAPI.theme.fonts.getWeights();
-        this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');
-        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');
+        this.breakpoints = window.CuraAPI.theme.breakpoints.get();
+        this.styles['--info'] = window.CuraAPI.theme.colors.getColor('info-base');
+        this.styles['--purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');
         this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');
         this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');
         this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);
         this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');
         this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');
-        this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();
+        this.styles['--primary'] = window.CuraAPI.theme.colors.getColor('primary');
         this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
         this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
         this.styles['--font-weight-medium'] = this.weights.medium;
+        window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.handleWindowResize);
+        window === null || window === void 0 ? void 0 : window.addEventListener('orientationchange', this.handleWindowResize);
+        this.isMobile = checkMobile();
     }
-    onValueChange(newValue) {
-        this.value = newValue;
-        this.updateSelectedOption(newValue);
-        this.valueChanged.emit(newValue);
+    componentDidLoad() {
+        var _a;
+        this.dropdownElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-container');
+        this.host.addEventListener('actionclick', this.handleOptionActionClick);
+        this.host.addEventListener('selectoption', this.handleSelectOption);
+        this.scrollBehavior = new FixedElementScrollBehavior(this.host, this.dropdownElement);
+        setTimeout(() => this.getSlotElements(), 10);
     }
-    componentWillLoad() {
-        this.updateSelectedOption(this.value);
+    disconnectedCallback() {
+        window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.handleWindowResize);
+        window === null || window === void 0 ? void 0 : window.removeEventListener('orientationchange', this.handleWindowResize);
     }
-    componentDidRender() {
-        if (this.isDropdownOpen && this.isMobile) {
-            this.showOverlay();
-            this.getDropdownSearchListHeight();
+    moveHighlight(direction) {
+        if (!this.dropdownSelectableItems.length)
+            return;
+        let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;
+        if (position < 0) {
+            this.clearHighlight();
+            return;
         }
-        else {
-            this.removeOverlay();
+        const selectableItemsLastPosition = this.dropdownSelectableItems.length - 1;
+        if (position > selectableItemsLastPosition)
+            position = selectableItemsLastPosition;
+        if (this.highlightedElement)
+            this.highlightedElement.highlighted = false;
+        this.highlightedIndex = position;
+        this.highlightedElement = this.dropdownSelectableItems[position];
+        if (this.highlightedElement.selected) {
+            this.moveHighlight(direction);
+            return;
         }
+        this.highlightedElement.highlighted = true;
+        this.highlightedElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
     }
-    componentDidLoad() {
-        var _a;
-        this.screenDefaultHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
-        window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.setUp);
-        (_a = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.adjustInputPosition);
+    clearHighlight() {
+        if (this.highlightedElement) {
+            this.highlightedElement.highlighted = false;
+            this.highlightedElement = null;
+        }
+        this.highlightedIndex = -1;
     }
-    disconnectedCallback() {
-        var _a;
-        window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.setUp);
-        (_a = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.adjustInputPosition);
+    selectHighlight() {
+        if (this.highlightedElement) {
+            this._selectOption(this.highlightedElement.optionid);
+            this.clearHighlight();
+            this.getInputElement().blur();
+        }
     }
-    showOverlay() {
-        if (!this.overlayElement) {
-            this.overlayElement = document.createElement('div');
-            this.overlayElement.className = 'dropdown-overlay';
-            this.overlayElement.style.position = 'fixed';
-            this.overlayElement.style.top = '0';
-            this.overlayElement.style.left = '0';
-            this.overlayElement.style.width = '100%';
-            this.overlayElement.style.height = '100%';
-            this.overlayElement.style.zIndex = '9999';
-            this.overlayElement.style.backgroundColor = 'white';
-            document.body.appendChild(this.overlayElement);
-            this.originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
+    setValue(value) {
+        if (this.value !== value) {
+            this.value = value;
+            if (this.valueTimeout)
+                clearTimeout(this.valueTimeout);
+            this.valueTimeout = setTimeout(() => {
+                this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);
+            }, this.searchdelay || 300);
         }
     }
-    removeOverlay() {
-        if (this.overlayElement && this.overlayElement.parentNode === document.body) {
-            document.body.removeChild(this.overlayElement);
-            this.overlayElement = null;
-            document.body.style.overflow = this.originalOverflow;
+    _selectOption(optionid) {
+        if (!optionid) {
+            this.clearSelectedOptions();
+            this.setValue('');
+            return;
+        }
+        const optionElement = this.dropdownSelectableItems.find(option => option.optionid === optionid);
+        if (optionElement && !optionElement.selected) {
+            this.clearSelectedOptions();
+            this.selectedOptionElement = optionElement;
+            this.selectedOptionElement.selected = true;
+            this.setValue(this.selectedOptionElement.value);
+            this.optionselect.emit(this.selectedOptionElement.optionid);
+            if (this.zoomState)
+                setTimeout(() => this.exitZoom(), this.blurTimeoutMs);
         }
     }
-    addClickListenersToOptions() {
-        this.options.forEach((option, index) => {
-            option === null || option === void 0 ? void 0 : option.addEventListener('optionSelected', () => this.onSelectedOption(index));
+    clearSelectedOptions() {
+        this.dropdownSelectableItems.forEach(option => {
+            if (option.selected)
+                option.selected = false;
         });
+        this.selectedOptionElement = null;
     }
-    updateSelectedOption(value) {
-        const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);
-        this.hoveredIndex = selectedOptionIndex;
-        this.updateOptionAttribute('hovered', this.hoveredIndex);
-        this.updateOptionAttribute('selected', this.hoveredIndex);
-        this.scrollHoveredOptionIntoView();
-        this.adjustInputPosition();
-    }
-    onSelectedOption(index) {
-        setTimeout(() => {
-            const selectedOption = this.options[index];
-            if (selectedOption.selectable) {
-                const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
-                this.value = selectedValue || '';
-                this.updateSelectedOption(this.value);
-                this.isDropdownOpen = false;
-                this.isOnBlurInput = true;
-                this.resetDropdownStyles();
-                this.removeOverlay();
-            }
-        }, 200);
-    }
-    moveHighlight(direction) {
-        const visibleOptions = this.options;
-        const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;
-        this.hoveredIndex = newIndex;
-        this.updateOptionAttribute('hovered', this.hoveredIndex);
-        this.scrollHoveredOptionIntoView();
+    getSlotElements() {
+        const elements = [];
+        const selectable = [];
+        let hasNotFound = false;
+        if (this.dropdownElement) {
+            this.dropdownElement
+                .querySelector('slot')
+                .assignedElements()
+                .forEach(item => {
+                elements.push(item);
+                if (item.localName === 'cura-dropdown-search-option' && item["selectable"])
+                    selectable.push(item);
+                if (item.localName === 'cura-dropdown-search-not-found')
+                    hasNotFound = true;
+            });
+        }
+        this.dropdownSelectableItems = selectable;
+        this.dropdownItems = elements;
+        this.status = hasNotFound ? 'error' : 'default';
     }
-    updateOptionAttribute(attribute, indexToUpdate) {
-        this.options.forEach((option, index) => {
-            option[attribute] = index === indexToUpdate;
-        });
+    enterZoom() {
+        this.scrollBehavior.disableScroll();
+        this.setZoomHeight();
+        this.zoomState = true;
     }
-    updateHoveredIndex() {
-        const visibleOptions = this.options;
-        const currentValue = this.value;
-        this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);
+    exitZoom() {
+        this.scrollBehavior.enableScroll();
+        this.setZoomHeight();
+        setTimeout(() => { this.zoomState = false; }, 300);
     }
-    scrollHoveredOptionIntoView() {
+    setZoomHeight() {
         var _a;
-        const container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-search-list');
-        const hoveredOption = this.options[this.hoveredIndex];
-        if (container && hoveredOption) {
-            const optionRect = hoveredOption.getBoundingClientRect();
-            const containerRect = container.getBoundingClientRect();
-            if (optionRect.bottom > containerRect.bottom) {
-                container.scrollTop += optionRect.bottom - containerRect.bottom;
-            }
-            if (optionRect.top < containerRect.top) {
-                container.scrollTop -= containerRect.top - optionRect.top;
-            }
-        }
-    }
-    handleOnBlur() {
-        if (this.isOnBlurInput === true) {
-            setTimeout(() => {
-                this.isDropdownOpen = false;
-                this.resetDropdownStyles();
-                this.removeOverlay();
-            }, 200);
-        }
+        const h = window ? `${((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight}px` : '100vh';
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--height': h });
     }
     getClasses() {
         return {
-            'dropdown-input-search': true,
-            'dropdown-open': this.isDropdownOpen,
-            'disabled': this.disabled,
-            [this.status]: true,
+            "component-container": true,
+            "mobile": this.isMobile,
+            "zoom": this.zoomState,
+            "dropdown-visible": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),
+            "error": this.status === 'error'
         };
     }
-    getDropdownClasses() {
+    getHostCSSProperties() {
         return {
-            'dropdown-search-list': true,
-            'visible': this.options.length && this.isDropdownOpen ? true : false,
+            '--max-height': this.maxheight || '400px'
         };
     }
-    hostCSSProperties() {
-        return {
-            '--dropdown-max-height': this.dropdownMaxHeight,
-        };
-    }
-    handleOnFocus() {
-        this.isDropdownOpen = true;
-    }
-    getDropdownSearchListHeight() {
-        setTimeout(() => {
-            var _a;
-            const dropdownInputSearchElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-input-search');
-            if (dropdownInputSearchElement) {
-                this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
-            }
-        }, 310);
-    }
-    handleGoBack() {
-        this.resetDropdownStyles();
-        this.isMobile = false;
-    }
-    resetDropdownStyles() {
-        var _a;
-        const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
-        if (dropdown && dropdown.style.position === 'fixed') {
-            dropdown.style.position = 'relative';
-            dropdown.style.removeProperty('bottom');
-        }
-    }
     render() {
-        const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: '8e47b4652a5f7143b9f9d8704105624debd5ab86', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'a5c9a6878be61268fb2a6fe5f42c3811aaa25e92', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: 'c10d5a2793e7961370f63b124eb8538c0fe161a2', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'a5d8233857277aa56c7d4d8048c8d8199635f117', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '1f780e794a2e42fa4771f9f6f5cb04f44d5d17d3', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
-                this.handleOnBlur();
-            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '87882a490816c64d8780ce4a02b975034e111473', name: "helperText" }))), h("div", { key: 'b0120ab7c2db1a5dcc071e4b79f9aac7d50ae998', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'b780c4b317c6aa557a6be5fe3d4c957d943b92c8', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: '936c26e5c23d95d8e905f66d8bcf7c636781351e', style: this.getHostCSSProperties() }, h("div", { key: '6bd541e66e07d4db99af875886fbfaba5915fd48', class: this.getClasses(), style: this.styles }, h("div", { key: '4b5036b41878c317bc3b6716bf8590f1d672d21e', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: '7d0d8f3090389570d51612ad89cedda9c452527f', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'e9cbf139d9b16a50bf0ca547246a66132e722add', name: "helperText" }))), h("div", { key: 'd8d83a726ef6e87740240b9fb637742bc52151e2', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: '7cf5efd8ca64c1f07a19bf0ae6dfcdaeb057c04b', onSlotchange: () => this.handleSlotChange() })))));
     }
     get host() { return this; }
-    static get watchers() { return {
-        "value": ["onValueChange"]
-    }; }
     static get style() { return CuraDropdownSearchStyle0; }
 }, [1, "cura-dropdown-search", {
-        "size": [1537],
-        "status": [513],
-        "disabled": [516],
         "name": [513],
-        "required": [1540],
-        "selected": [1540],
-        "value": [1537],
-        "placeholder": [1537],
-        "label": [1537],
-        "iconName": [513, "icon-name"],
-        "dropdownMaxHeight": [513, "dropdown-max-height"],
-        "overlayVisible": [32],
-        "isDropdownOpen": [32],
+        "size": [513],
+        "status": [1537],
+        "disabled": [516],
+        "required": [516],
+        "placeholder": [513],
+        "label": [513],
+        "icon": [513],
+        "maxheight": [513],
+        "value": [1025],
+        "searchdelay": [514],
+        "searchminchars": [514],
         "styles": [32],
-        "isMobile": [32],
-        "mode": [32],
-        "inputTextRef": [32],
-        "isOnBlurInput": [32],
-        "hoveredIndex": [32],
-        "options": [32],
-        "originalOverflow": [32],
-        "screenDefaultHeight": [32]
-    }, undefined, {
-        "value": ["onValueChange"]
+        "zoomState": [32],
+        "isOnFocus": [32],
+        "dropdownItems": [32],
+        "setFocus": [64],
+        "selectOption": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {