@rededor/cura 1.5.0 → 1.6.0-alpha.0

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

@@ -0,0 +1,592 @@
+import { Host, h } from "@stencil/core";
+import { checkMobile, checkIOS } from "../../utils/utils";
+import { FixedElementScrollBehavior } from "../../utils/FixedElementScrollBehavior";
+export class CuraDropdownSearchNew {
+    constructor() {
+        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);
+                }
+                this.isOnFocus = false;
+            }, this.blurTimeoutMs);
+        };
+        this.handleFocusout = () => {
+            if (this.zoomState)
+                this.setZoomHeight();
+        };
+        this.handleBackClick = () => { this.exitZoom(); };
+        this.handleOptionActionClick = (ev) => {
+            this.getInputElement().setFocus();
+            this._preventEvent(ev);
+        };
+        this.handleInputClear = (ev) => {
+            this.setValue('');
+            this.clearSelectedOptions();
+            this._preventEvent(ev);
+        };
+        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.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.required = false;
+        this.placeholder = '';
+        this.label = '';
+        this.icon = 'search';
+        this.maxheight = '400px';
+        this.value = '';
+        this.searchdelay = 400;
+        this.searchminchars = 3;
+        this.styles = {};
+        this.zoomState = false;
+        this.isOnFocus = false;
+        this.dropdownItems = [];
+    }
+    handleMaxHeightChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.styles = Object.assign(Object.assign({}, this.styles), { '--max-height': newValue });
+    }
+    /**
+     * 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.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['--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;
+        this.handleMaxHeightChange(this.maxheight, '');
+        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();
+    }
+    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);
+    }
+    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);
+    }
+    moveHighlight(direction) {
+        if (!this.dropdownSelectableItems.length)
+            return;
+        let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;
+        if (position < 0) {
+            this.clearHighlight();
+            return;
+        }
+        if (position > this.dropdownSelectableItems.length - 1)
+            position = this.dropdownSelectableItems.length - 1;
+        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' });
+    }
+    clearHighlight() {
+        if (this.highlightedElement) {
+            this.highlightedElement.highlighted = false;
+            this.highlightedElement = null;
+        }
+        this.highlightedIndex = -1;
+    }
+    selectHighlight() {
+        if (this.highlightedElement) {
+            this._selectOption(this.highlightedElement.optionid);
+            this.clearHighlight();
+            this.getInputElement().blur();
+        }
+    }
+    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);
+        }
+    }
+    _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);
+        }
+    }
+    clearSelectedOptions() {
+        this.dropdownSelectableItems.forEach(option => {
+            if (option.selected)
+                option.selected = false;
+        });
+        this.selectedOptionElement = null;
+    }
+    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-new' && item["selectable"])
+                    selectable.push(item);
+                if (item.localName === 'cura-dropdown-search-not-found')
+                    hasNotFound = true;
+            });
+        }
+        this.dropdownSelectableItems = selectable;
+        this.dropdownItems = elements;
+        if (hasNotFound)
+            this.status = 'error';
+    }
+    enterZoom() {
+        this.scrollBehavior.disableScroll();
+        this.setZoomHeight();
+        this.zoomState = true;
+    }
+    exitZoom() {
+        this.scrollBehavior.enableScroll();
+        this.setZoomHeight();
+        this.zoomState = false;
+    }
+    setZoomHeight() {
+        var _a;
+        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 {
+            "component-container": true,
+            "mobile": this.isMobile,
+            "zoom": this.zoomState,
+            "dropdown-visible": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),
+            "error": this.status === 'error'
+        };
+    }
+    render() {
+        return (h(Host, { key: '2fddf33d55ce7fd0e9648270012a462827fed62b' }, h("div", { key: 'c45c76906309db7a3bd9789bc87bebeef5fdfdb0', class: this.getClasses(), style: this.styles }, h("div", { key: 'be29c3debdb21abcdf90dd2446dfef2de8f1f5f6', 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: 'a27635ad3101a80d7116c3d6a605d37577b45893', 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: 'b96c64c5f5b01a487c6fc190e19af136576eb45f', name: "helperText" }))), h("div", { key: '249a0fd49fd854c7b69565194a06b27781b93b9b', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: '9e2e0ea5eaaade2a22956383baab4d8fc84d35a2', onSlotchange: () => this.handleSlotChange() })))));
+    }
+    static get is() { return "cura-dropdown-search-new"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-dropdown-search-new.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-dropdown-search-new.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the field.\nRequired."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the dropdown search component\nValues: 'small', 'medium' or 'large' (default)."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'large'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'error' | 'default' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define component status.\nValues: 'error' or 'default'."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state. Default: false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field is required. Default: false."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text."
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label."
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon name. Default: search."
+                },
+                "attribute": "icon",
+                "reflect": true,
+                "defaultValue": "'search'"
+            },
+            "maxheight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS max-height property for dropdown item.\nCan also be used by css property --max-height.\nDefault: 400px"
+                },
+                "attribute": "maxheight",
+                "reflect": false,
+                "defaultValue": "'400px'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Readonly property value.\nRepresents the term on the search input field."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "searchdelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in milliseconds to dispatch search events.\nDefault: 400"
+                },
+                "attribute": "searchdelay",
+                "reflect": true,
+                "defaultValue": "400"
+            },
+            "searchminchars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Min chars to dispatch search events.\nDefault: 3"
+                },
+                "attribute": "searchminchars",
+                "reflect": true,
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {},
+            "zoomState": {},
+            "isOnFocus": {},
+            "dropdownItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "termchange",
+                "name": "termchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "optionselect",
+                "name": "optionselect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set focus to input field.",
+                    "tags": []
+                }
+            },
+            "selectOption": {
+                "complexType": {
+                    "signature": "(optionid: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "optionid",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select by optionid property of a selectable option component.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "maxheight",
+                "methodName": "handleMaxHeightChange"
+            }];
+    }
+}
+//# sourceMappingURL=cura-dropdown-search-new.js.map

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-new.js","sourceRoot":"","sources":["../../../src/components/cura-dropdown-search-new/cura-dropdown-search-new.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State, Watch, Method, Event, EventEmitter } from '@stencil/core';\nimport { checkMobile, checkIOS } from '../../utils/utils';\nimport { FixedElementScrollBehavior } from '../../utils/FixedElementScrollBehavior';\n\n@Component({\n  tag: 'cura-dropdown-search-new',\n  styleUrl: 'cura-dropdown-search-new.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchNew {\n  @Element() host: HTMLElement;\n  /**\n   * Name of the field.\n   * Required.\n   */\n  @Prop({ reflect: true }) name!: string;\n  /**\n   * Size of the dropdown search component\n   * Values: 'small', 'medium' or 'large' (default).\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' | string = 'large';\n  /**\n   * Define component status.\n   * Values: 'error' or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'default' | string = 'default';\n  /**\n   * Disabled state. Default: false.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Field is required. Default: false.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * The placeholder text.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n  /**\n   * The label.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) icon: string = 'search';\n  /**\n   * CSS max-height property for dropdown item.\n   * Can also be used by css property --max-height.\n   * Default: 400px\n   */\n  @Prop() maxheight: string = '400px';\n  @Watch('maxheight')\n  handleMaxHeightChange(newValue: string, oldValue: string) {\n    if( newValue !== oldValue) this.styles = { ...this.styles, '--max-height': newValue };\n  }\n  /**\n   * Readonly property value.\n   * Represents the term on the search input field.\n   */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Delay in milliseconds to dispatch search events.\n   * Default: 400\n   */\n  @Prop({ reflect: true }) searchdelay: number = 400;\n  /**\n   * Min chars to dispatch search events.\n   * Default: 3\n   */\n  @Prop({ reflect: true }) searchminchars: number = 3;\n\n  /**\n   * Set focus to input field.\n   */\n  @Method()\n  async setFocus() {\n    this.getInputElement().setFocus();\n  }\n  /**\n   * Select by optionid property of a selectable option component.\n   */\n  @Method()\n  async selectOption(optionid: string) {\n    this._selectOption(optionid);\n  }\n\n  @Event() termchange: EventEmitter<string>;\n  @Event() optionselect: EventEmitter<string>;\n\n  @State() styles = {};\n  @State() zoomState = false;\n  @State() isOnFocus: boolean = false;\n\n  scrollBehavior: FixedElementScrollBehavior;\n\n  weights: any;\n  breakpoints: any;\n  isMobile: boolean;\n\n  resizeTimeout: any;\n  resizeTimeoutMs = 66;\n  focusTimeout: any;\n  focusTimeoutMs = 300;\n  blurTimeout: any;\n  blurTimeoutMs = 300;\n  valueTimeout: any;\n\n  dropdownElement: HTMLDivElement;\n  selectedOptionElement: any;\n  highlightedElement: any;\n  highlightedIndex: number = -1;\n  @State() dropdownItems = [];\n  dropdownSelectableItems = [];\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.breakpoints = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--info'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--primary'] = window.CuraAPI.theme.colors.getColor('primary');\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.handleMaxHeightChange(this.maxheight, '');\n    window?.addEventListener('resize', this.handleWindowResize);\n    window?.addEventListener('orientationchange', this.handleWindowResize);\n    this.isMobile = checkMobile();\n  }\n\n  componentDidLoad() {\n    this.dropdownElement = this.host.shadowRoot?.querySelector('.dropdown-container');\n    this.host.addEventListener('actionclick', this.handleOptionActionClick);\n    this.host.addEventListener('selectoption', this.handleSelectOption);\n    this.scrollBehavior = new FixedElementScrollBehavior(this.host, this.dropdownElement);\n    setTimeout(() => this.getSlotElements(), 10);\n  }\n\n  disconnectedCallback() {\n    window?.removeEventListener('resize', this.handleWindowResize);\n    window?.removeEventListener('orientationchange', this.handleWindowResize);\n  }\n\n  handleSlotChange = () => { this.getSlotElements(); }\n\n  handleWindowResize = () => {\n    if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n    this.resizeTimeout = setTimeout(() => {\n      this.isMobile = checkMobile();\n      this.setZoomHeight();\n    }, this.resizeTimeoutMs);\n  }\n\n  handleFocus = () => {\n    if (this.focusTimeout) clearTimeout(this.focusTimeout);\n    this.focusTimeout = setTimeout(() => {\n      this.isOnFocus = true;\n      this.clearHighlight();\n      if (this.isMobile && !this.zoomState) this.enterZoom();\n      if (this.zoomState) this.setZoomHeight();\n      setTimeout(() => {\n          this.selectedOptionElement?.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest'});\n      }, 10);\n    }, this.focusTimeoutMs);\n  }\n\n  handleBlur = () => {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.zoomState) {\n        const delay = checkIOS ? 500 : 100;\n        setTimeout(() => this.setZoomHeight(), delay);\n      }\n      this.isOnFocus = false;\n    }, this.blurTimeoutMs);\n  }\n\n  handleFocusout = () => {\n    if( this.zoomState ) this.setZoomHeight();\n  }\n\n  handleBackClick = () => { this.exitZoom(); }\n\n  handleOptionActionClick = (ev: CustomEvent) => {\n    this.getInputElement().setFocus();\n    this._preventEvent(ev);\n  }\n\n  handleInputClear = (ev: CustomEvent) => {\n    this.setValue('');\n    this.clearSelectedOptions();\n    this._preventEvent(ev);\n  }\n\n  handleSelectOption = (ev: CustomEvent) => {\n    this._selectOption(ev.detail);\n    this._preventEvent(ev);\n  }\n\n  handleInputValueChange = (ev: CustomEvent) => {\n    this.setValue(ev.detail);\n    if( this.selectedOptionElement && ev.detail !== this.selectedOptionElement.value) {\n      this.clearSelectedOptions();\n    }\n    this._preventEvent(ev);\n  }\n\n  handleDropdownMouseOver = () => {\n    if( this.highlightedElement || this.highlightedIndex >= 0 ) this.clearHighlight();\n  }\n\n  handleKeyDown = (ev: KeyboardEvent) => {\n    if( ev.key === 'ArrowDown' ) this.moveHighlight('next');\n    if( ev.key === 'ArrowUp' ) this.moveHighlight('prev');\n    if( ev.key === 'Enter' ) this.selectHighlight();\n  }\n\n  moveHighlight(direction: 'next' | 'prev') {\n    if (!this.dropdownSelectableItems.length) return;\n    let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;\n    if( position < 0) {\n      this.clearHighlight();\n      return;\n    }\n    if( position > this.dropdownSelectableItems.length - 1 ) position = this.dropdownSelectableItems.length - 1;\n    if( this.highlightedElement ) this.highlightedElement.highlighted = false;\n    this.highlightedIndex = position;\n    this.highlightedElement = this.dropdownSelectableItems[position];\n    if( this.highlightedElement.selected ) {\n      this.moveHighlight(direction);\n      return;\n    }\n    this.highlightedElement.highlighted = true;\n    this.highlightedElement.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest' });\n  }\n\n  clearHighlight() {\n    if( this.highlightedElement ) {\n      this.highlightedElement.highlighted = false;\n      this.highlightedElement = null;\n    }\n    this.highlightedIndex = -1;\n  }\n\n  selectHighlight() {\n    if( this.highlightedElement ) {\n      this._selectOption(this.highlightedElement.optionid);\n      this.clearHighlight();\n      this.getInputElement().blur();\n    }\n  }\n\n  setValue(value: string) {\n    if (this.value !== value) {\n      this.value = value;\n      if( this.valueTimeout) clearTimeout(this.valueTimeout);\n      this.valueTimeout = setTimeout(() => {\n        this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);\n      }, this.searchdelay || 300);\n    }\n  }\n\n  _selectOption(optionid: string) {\n    if (!optionid) {\n      this.clearSelectedOptions();\n      this.setValue('');\n      return;\n    }\n    const optionElement = this.dropdownSelectableItems.find(option => option.optionid === optionid);\n    if( optionElement && !optionElement.selected ) {\n      this.clearSelectedOptions();\n      this.selectedOptionElement = optionElement;\n      this.selectedOptionElement.selected = true;\n      this.setValue(this.selectedOptionElement.value);\n      this.optionselect.emit(this.selectedOptionElement.optionid);\n      if (this.zoomState) setTimeout(() => this.exitZoom(), this.blurTimeoutMs);\n    }\n  }\n\n  clearSelectedOptions() {\n    this.dropdownSelectableItems.forEach(option => {\n      if( option.selected ) option.selected = false;\n    });\n    this.selectedOptionElement = null;\n  }\n\n  getSlotElements()  {\n    const elements = [];\n    const selectable = [];\n    let hasNotFound = false;\n    if( this.dropdownElement ) {\n      this.dropdownElement\n        .querySelector('slot')\n        .assignedElements()\n        .forEach(item => {\n          elements.push(item);\n          if( item.localName === 'cura-dropdown-search-option-new' && item[\"selectable\"] ) selectable.push(item);\n          if( item.localName === 'cura-dropdown-search-not-found' ) hasNotFound = true;\n        });\n    }\n    this.dropdownSelectableItems = selectable;\n    this.dropdownItems = elements;\n    if( hasNotFound ) this.status = 'error';\n  }\n\n\n  enterZoom() {\n    this.scrollBehavior.disableScroll();\n    this.setZoomHeight();\n    this.zoomState = true;\n  }\n\n  exitZoom() {\n    this.scrollBehavior.enableScroll();\n    this.setZoomHeight();\n    this.zoomState = false;\n  }\n\n  getInputElement = () => this.host.shadowRoot?.querySelector('cura-input-text');\n\n  setZoomHeight() {\n    const h = window ? `${window.visualViewport?.height || window.innerHeight}px` : '100vh';\n    this.styles = { ...this.styles, '--height': h };\n  }\n\n  getClasses() {\n    return {\n      \"component-container\": true,\n      \"mobile\": this.isMobile,\n      \"zoom\": this.zoomState,\n      \"dropdown-visible\": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),\n      \"error\": this.status === 'error'\n    }\n  }\n\n  _preventEvent = (ev: Event) => {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"component-controls\">\n            { this.isMobile && this.zoomState ? (\n              <cura-button-transparent\n                fontColor=\"dark\"\n                onClick={ () => this.handleBackClick() }\n                iconName=\"arrowLeft\"\n                size=\"large\"\n                iconOnly\n                color=\"primary\"\n                id=\"button-back\">\n              </cura-button-transparent>\n            ) : '' }\n            <cura-input-text\n              disabled={ this.disabled }\n              label={ this.label }\n              part=\"cura-input-field\"\n              mode={ this.zoomState ? 'transparent' : 'default' }\n              required={ this.required }\n              iconName={ this.icon || 'search' }\n              value={ this.value }\n              status={ this.status }\n              onValueChange={ (ev) => this.handleInputValueChange(ev) }\n              onInput={ (ev) => this._preventEvent(ev) }\n              onFocus={ () => this.handleFocus() }\n              onClick={ (ev) => this._preventEvent(ev) }\n              onBlur={ () => this.handleBlur() }\n              onFocusout={ () => this.handleFocusout() }\n              onInputClear={ (ev) => this.handleInputClear(ev) }\n              placeholder={ this.placeholder }\n              size={ this.size }\n              onKeyDown={ (ev) => this.handleKeyDown(ev) }\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div class=\"dropdown-container\" onMouseOver={ () => this.handleDropdownMouseOver() }>\n            <slot onSlotchange={ () => this.handleSlotChange() }></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}