@tet/tet-components 1.3.157-testing → 1.4.0-production

package/dist/collection/components/advanced/address/tet-autocomplete/tet-autocomplete.js

@@ -8,185 +8,9 @@ import { containsFocusableStencilVNode } from "../../../../services/utils/contai
  */
 export class TetAutocomplete {
     constructor() {
-        /** The property to skip the next automatic options filtering. */
-        this.skipNextFilterValueChange = false;
-        /** The property that keeps track of the last filter value that was used for the autocomplete. */
-        this.lastFilteredValue = '';
-        this.handleNoOptionsFocusOut = (event) => {
-            var _a;
-            const relatedTarget = event.relatedTarget;
-            if (relatedTarget &&
-                relatedTarget instanceof HTMLElement &&
-                relatedTarget.classList.contains('icon-right')) {
-                return;
-            }
-            (_a = this.noOptionsElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusout', this.handleNoOptionsFocusOut);
-            this.showOptions = false;
-        };
-        this.handleInputFocusOutline = (remove = true) => {
-            var _a;
-            const input = (_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-            if (!(input instanceof HTMLInputElement) || !this.isKeyboardFocus) {
-                return;
-            }
-            if (remove) {
-                input.focus();
-                requestAnimationFrame(() => input.classList.remove('keyboard-focus'));
-            }
-            else {
-                input.classList.add('keyboard-focus');
-            }
-        };
-        this.tryToExecuteFinishedLoading = () => {
-            if (this.finishedLoading instanceof Function) {
-                this.finishedLoading();
-            }
-        };
-        this.tryToDisplayOptions = () => {
-            var _a;
-            this.showOptions = true;
-            this.activeComponentStateChanged.emit(this.internalUniqueId);
-            if (this.inputElement) {
-                this.updateFilteredOptions((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value);
-            }
-        };
-        this.onInputChange = (event) => {
-            this.debouncedUpdateFilteredOptions(event.target.value);
-        };
-        /**
-         * Filters autocomplete options based on the new filter keyword.
-         *
-         * @param filterValue
-         */
-        this.updateFilteredOptions = (filterValue) => {
-            this.activeOption = null;
-            const normalizedFilterValue = normalize(filterValue !== null && filterValue !== void 0 ? filterValue : '');
-            if (this.defaultOptions.length && !normalizedFilterValue) {
-                this.filteredOptions = this.defaultOptions;
-                return this.tryToExecuteFinishedLoading();
-            }
-            if (!normalizedFilterValue || this.lastFilteredValue === normalizedFilterValue) {
-                // Extra check to avoid unnecessary re-render on the assignment.
-                if (this.filteredOptions.length && !normalizedFilterValue) {
-                    this.filteredOptions = [];
-                }
-                this.lastFilteredValue = normalizedFilterValue;
-                return this.tryToExecuteFinishedLoading();
-            }
-            const options = this.optionsFilterAction(normalizedFilterValue);
-            if (isPromise(options)) {
-                this.showLoader = true;
-                this.filteredOptions = [];
-                options
-                    .then((options) => {
-                    this.filteredOptions = options;
-                    this.lastFilteredValue = normalizedFilterValue;
-                })
-                    .finally(() => {
-                    this.showLoader = false;
-                });
-            }
-            else {
-                this.filteredOptions = options;
-                this.lastFilteredValue = normalizedFilterValue;
-            }
-            this.tryToExecuteFinishedLoading();
-        };
-        /**
-         * Reduces the amount of times the component is rendered for better performance.
-         */
-        this.debouncedUpdateFilteredOptions = debounce((filterValue) => {
-            this.updateFilteredOptions(filterValue);
-        }, this.typingDebounceTime);
-        this.onOptionSelect = async (event, option) => {
-            await this.selectOption(Object.assign(Object.assign({}, option), { userInteraction: true, _originalEvent: event }));
-            event.stopPropagation();
-        };
-        /**
-         * Returns the function that should be executed when the option is selected.
-         *
-         * @param option
-         */
-        this.getOptionSelectAction = (option) => {
-            return isFunction(option === null || option === void 0 ? void 0 : option.clickCallback) ? event => option.clickCallback(event, option) : event => this.onOptionSelect(event, option);
-        };
-        /**
-         * Returns the content that should be shown when there are no options matching the keyword.
-         */
-        this.getNoOptionsContent = () => {
-            if (isFunction(this.noOptionsRenderFunction)) {
-                return this.noOptionsRenderFunction() || this.noOptionsMessage;
-            }
-            return this.noOptionsMessage;
-        };
-        this.renderOptionsLoader = () => {
-            if (!this.showLoader || this.newStyle || this.redesignedStyle) {
-                return;
-            }
-            return (h("ul", { class: "autocomplete-options" }, h("li", { class: { 'autocomplete-options-loader': true, 'dark': this.darkTheme } }, h("tet-loader", null))));
-        };
-        /**
-         * Renders the message to show when no options were found.
-         */
-        this.renderNoOptionsMessage = () => {
-            const noOptionsContent = this.getNoOptionsContent();
-            const attributes = {};
-            // JSX is an object and will not work with innerHTML.
-            if (!isObject(noOptionsContent)) {
-                attributes.innerHTML = noOptionsContent;
-            }
-            return (h("li", Object.assign({ class: { 'autocomplete-options-none-message': true, 'dark': this.darkTheme } }, attributes, { "aria-live": "polite", ref: el => (this.noOptionsElement = el) }), isObject(noOptionsContent) ? noOptionsContent : null));
-        };
-        /**
-         * Renders a single option.
-         *
-         * @param option
-         */
-        this.renderOption = (option, idx) => {
-            let { label: optionLabel, ignoreHighlighting, cssPart } = option;
-            const onClickAction = this.getOptionSelectAction(option);
-            const keywordPartsRegexes = this.lastFilteredValue
-                .split(/\s+/)
-                // Regex excludes HTML tags from matches. This ensures that already highlighted text isn't processed again.
-                .map((part) => new RegExp(`(?:!</?[^>]*|&[^;]*)(${part})`, 'ig'));
-            if (this.highlightOptionsKeyword && !ignoreHighlighting) {
-                // Highlight each keyword part separately. This allows to highlight the text that is non-continuous.
-                keywordPartsRegexes.forEach((regex) => {
-                    optionLabel = optionLabel.replace(regex, '<strong>$&</strong>');
-                });
-            }
-            return (h("li", { class: { 'autocomplete-options-item': true,
-                    'active': option === this.activeOption, 'dark': this.darkTheme, 'focus-visible': (option === this.activeOption && this.isKeyboardFocus) }, part: cssPart, onClick: onClickAction, onKeyDown: (event) => {
-                    if (event.key === 'Enter')
-                        onClickAction(option);
-                }, ref: (element) => option === this.activeOption && (this.activeOptionElement = element), id: `${this.internalUniqueId}-${idx}`, role: "option" }, option.value === 'manual-input'
-                ? h("a", { class: { 'tet-link': true, 'dark': this.darkTheme, 'manual-input': true }, innerHTML: optionLabel })
-                : [
-                    this.optionsIcon && (this.newStyle || this.redesignedStyle) && (h("tet-icon", { class: "icon", name: this.optionsIcon })),
-                    h("span", { innerHTML: optionLabel })
-                ]));
-        };
-        this.renderOptions = (options) => {
-            var _a;
-            if (!this.showOptions) {
-                return;
-            }
-            const showNoOptionsMessage = !options.length &&
-                !this.showLoader && ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) && !!this.getNoOptionsContent();
-            if (!showNoOptionsMessage && !options.length) {
-                return;
-            }
-            return (h("div", { class: {
-                    'autocomplete-options-container': true,
-                    'dark': this.darkTheme,
-                    'new-style': this.newStyle || this.redesignedStyle,
-                    'redesigned-style': this.redesignedStyle,
-                }, part: "autocomplete-options-container", role: "combobox", "aria-expanded": this.showOptions, "aria-activedescendant": this.activeOption ? `${this.internalUniqueId}-${this.filteredOptions.indexOf(this.activeOption)}` : undefined }, h("ul", { class: "autocomplete-options", ref: (el) => (this.optionsContainer = el), role: "listbox", tabindex: "-1" }, showNoOptionsMessage && this.renderNoOptionsMessage(), options.map(this.renderOption))));
-        };
         this.showOptionsOnEscapeClear = false;
         this.defaultOptions = [];
         this.optionsFilterAction = () => [];
-        this.typingDebounceTime = 250;
         this.noOptionsMessage = undefined;
         this.noOptionsRenderFunction = () => null;
         this.clearCallback = undefined;
@@ -202,10 +26,31 @@ export class TetAutocomplete {
         this.showLoader = false;
         this.isKeyboardFocus = true;
     }
+    /** The component root HTML element. */
+    rootElement;
+    /** Unique component ID. */
+    internalUniqueId;
+    /** The property to store the autocomplete input HTML element reference. */
+    inputElement;
+    /** The property to store the reference of HTML element of the autocomplete option container. */
+    optionsContainer;
+    /** The property to store the currently active (not selected!) option reference. */
+    activeOptionElement;
+    /** The property to store the reference of the "no options available" HTML element. */
+    noOptionsElement;
+    /** The property to skip the next automatic options filtering. */
+    skipNextFilterValueChange = false;
+    /** The property that keeps track of the last filter value that was used for the autocomplete. */
+    lastFilteredValue = '';
+    /** The time in milliseconds after the last filter value when options filtering should be executed. */
+    typingDebounceTime = 250;
+    /** The autocomplete option selection event. */
+    optionSelected;
+    /** Emits "tet-autocomplete" unique id, when an attempt to open selection options is identified. */
+    activeComponentStateChanged;
     componentDidLoad() {
-        var _a, _b, _c;
         this.internalUniqueId = randomString(12);
-        const inputHtmlElement = (_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelector('.autocomplete-input');
+        const inputHtmlElement = this.rootElement?.querySelector('.autocomplete-input');
         if (inputHtmlElement !== null) {
             this.inputElement = reactive(inputHtmlElement, {
                 value: (newValue) => {
@@ -216,13 +61,12 @@ export class TetAutocomplete {
                 }
             });
         }
-        (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.origin.addEventListener('input', this.onInputChange);
-        (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.origin.addEventListener('focus', this.tryToDisplayOptions);
+        this.inputElement?.origin.addEventListener('input', this.onInputChange);
+        this.inputElement?.origin.addEventListener('focus', this.tryToDisplayOptions);
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.origin.removeEventListener('input', this.onInputChange);
-        (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.origin.removeEventListener('focus', this.tryToDisplayOptions);
+        this.inputElement?.origin.removeEventListener('input', this.onInputChange);
+        this.inputElement?.origin.removeEventListener('focus', this.tryToDisplayOptions);
     }
     onPointerUp(event) {
         event.stopPropagation();
@@ -304,9 +148,18 @@ export class TetAutocomplete {
                 this.showOptions = true;
         }
     }
+    handleNoOptionsFocusOut = (event) => {
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget &&
+            relatedTarget instanceof HTMLElement &&
+            relatedTarget.classList.contains('icon-right')) {
+            return;
+        }
+        this.noOptionsElement?.removeEventListener('focusout', this.handleNoOptionsFocusOut);
+        this.showOptions = false;
+    };
     /** Handles the focusout event to close the options menu if focus moves outside the component. */
     handleFocusOut(event) {
-        var _a, _b;
         const relatedTarget = event.relatedTarget;
         if (isFunction(this.noOptionsRenderFunction)
             && this.noOptionsRenderFunction() !== null
@@ -315,8 +168,8 @@ export class TetAutocomplete {
             && this.rootElement.contains(relatedTarget)) {
             const vnode = this.noOptionsRenderFunction();
             if (containsFocusableStencilVNode(vnode)) {
-                (_a = this.noOptionsElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusout', this.handleNoOptionsFocusOut);
-                (_b = this.noOptionsElement) === null || _b === void 0 ? void 0 : _b.addEventListener('focusout', this.handleNoOptionsFocusOut);
+                this.noOptionsElement?.removeEventListener('focusout', this.handleNoOptionsFocusOut);
+                this.noOptionsElement?.addEventListener('focusout', this.handleNoOptionsFocusOut);
                 return;
             }
         }
@@ -379,11 +232,173 @@ export class TetAutocomplete {
             this.inputElement.value = option.label;
         }
     }
+    handleInputFocusOutline = (remove = true) => {
+        const input = this.rootElement?.querySelector('input');
+        if (!(input instanceof HTMLInputElement) || !this.isKeyboardFocus) {
+            return;
+        }
+        if (remove) {
+            input.focus();
+            requestAnimationFrame(() => input.classList.remove('keyboard-focus'));
+        }
+        else {
+            input.classList.add('keyboard-focus');
+        }
+    };
+    tryToExecuteFinishedLoading = () => {
+        if (this.finishedLoading instanceof Function) {
+            this.finishedLoading();
+        }
+    };
+    tryToDisplayOptions = () => {
+        this.showOptions = true;
+        this.activeComponentStateChanged.emit(this.internalUniqueId);
+        if (this.inputElement) {
+            this.updateFilteredOptions(this.inputElement?.value);
+        }
+    };
+    onInputChange = (event) => {
+        this.debouncedUpdateFilteredOptions(event.target.value);
+    };
+    /**
+     * Filters autocomplete options based on the new filter keyword.
+     *
+     * @param filterValue
+     */
+    updateFilteredOptions = (filterValue) => {
+        this.activeOption = null;
+        const normalizedFilterValue = normalize(filterValue ?? '');
+        if (this.defaultOptions.length && !normalizedFilterValue) {
+            this.filteredOptions = this.defaultOptions;
+            return this.tryToExecuteFinishedLoading();
+        }
+        if (!normalizedFilterValue || this.lastFilteredValue === normalizedFilterValue) {
+            // Extra check to avoid unnecessary re-render on the assignment.
+            if (this.filteredOptions.length && !normalizedFilterValue) {
+                this.filteredOptions = [];
+            }
+            this.lastFilteredValue = normalizedFilterValue;
+            return this.tryToExecuteFinishedLoading();
+        }
+        const options = this.optionsFilterAction(normalizedFilterValue);
+        if (isPromise(options)) {
+            this.showLoader = true;
+            this.filteredOptions = [];
+            options
+                .then((options) => {
+                this.filteredOptions = options;
+                this.lastFilteredValue = normalizedFilterValue;
+            })
+                .finally(() => {
+                this.showLoader = false;
+            });
+        }
+        else {
+            this.filteredOptions = options;
+            this.lastFilteredValue = normalizedFilterValue;
+        }
+        this.tryToExecuteFinishedLoading();
+    };
+    /**
+     * Reduces the amount of times the component is rendered for better performance.
+     */
+    debouncedUpdateFilteredOptions = debounce((filterValue) => {
+        this.updateFilteredOptions(filterValue);
+    }, this.typingDebounceTime);
+    onOptionSelect = async (event, option) => {
+        await this.selectOption({
+            ...option,
+            userInteraction: true,
+            _originalEvent: event
+        });
+        event.stopPropagation();
+    };
+    /**
+     * Returns the function that should be executed when the option is selected.
+     *
+     * @param option
+     */
+    getOptionSelectAction = (option) => {
+        return isFunction(option?.clickCallback) ? event => option.clickCallback(event, option) : event => this.onOptionSelect(event, option);
+    };
+    /**
+     * Returns the content that should be shown when there are no options matching the keyword.
+     */
+    getNoOptionsContent = () => {
+        if (isFunction(this.noOptionsRenderFunction)) {
+            return this.noOptionsRenderFunction() || this.noOptionsMessage;
+        }
+        return this.noOptionsMessage;
+    };
+    renderOptionsLoader = () => {
+        if (!this.showLoader || this.newStyle || this.redesignedStyle) {
+            return;
+        }
+        return (h("ul", { class: "autocomplete-options" }, h("li", { class: { 'autocomplete-options-loader': true, 'dark': this.darkTheme } }, h("tet-loader", null))));
+    };
+    /**
+     * Renders the message to show when no options were found.
+     */
+    renderNoOptionsMessage = () => {
+        const noOptionsContent = this.getNoOptionsContent();
+        const attributes = {};
+        // JSX is an object and will not work with innerHTML.
+        if (!isObject(noOptionsContent)) {
+            attributes.innerHTML = noOptionsContent;
+        }
+        return (h("li", { class: { 'autocomplete-options-none-message': true, 'dark': this.darkTheme }, ...attributes, "aria-live": "polite", ref: el => (this.noOptionsElement = el) }, isObject(noOptionsContent) ? noOptionsContent : null));
+    };
+    /**
+     * Renders a single option.
+     *
+     * @param option
+     * @param idx
+     */
+    renderOption = (option, idx) => {
+        let { label: optionLabel, ignoreHighlighting, cssPart } = option;
+        const onClickAction = this.getOptionSelectAction(option);
+        const keywordPartsRegexes = this.lastFilteredValue
+            .split(/\s+/)
+            // Regex excludes HTML tags from matches. This ensures that already highlighted text isn't processed again.
+            .map((part) => new RegExp(`(?:!</?[^>]*|&[^;]*)(${part})`, 'ig'));
+        if (this.highlightOptionsKeyword && !ignoreHighlighting) {
+            // Highlight each keyword part separately. This allows to highlight the text that is non-continuous.
+            keywordPartsRegexes.forEach((regex) => {
+                optionLabel = optionLabel.replace(regex, '<strong>$&</strong>');
+            });
+        }
+        return (h("li", { class: { 'autocomplete-options-item': true,
+                'active': option === this.activeOption, 'dark': this.darkTheme, 'focus-visible': (option === this.activeOption && this.isKeyboardFocus) }, part: cssPart, onClick: onClickAction, onKeyDown: (event) => {
+                if (event.key === 'Enter')
+                    onClickAction(option);
+            }, ref: (element) => option === this.activeOption && (this.activeOptionElement = element), id: `${this.internalUniqueId}-${idx}`, role: "option" }, option.value === 'manual-input'
+            ? h("a", { class: { 'tet-link': true, 'dark': this.darkTheme, 'manual-input': true }, innerHTML: optionLabel })
+            : [
+                this.optionsIcon && (this.newStyle || this.redesignedStyle) && (h("tet-icon", { class: "icon", name: this.optionsIcon })),
+                h("span", { innerHTML: optionLabel })
+            ]));
+    };
+    renderOptions = (options) => {
+        if (!this.showOptions) {
+            return;
+        }
+        const showNoOptionsMessage = !options.length &&
+            !this.showLoader && this.inputElement?.value && !!this.getNoOptionsContent();
+        if (!showNoOptionsMessage && !options.length) {
+            return;
+        }
+        return (h("div", { class: {
+                'autocomplete-options-container': true,
+                'dark': this.darkTheme,
+                'new-style': this.newStyle || this.redesignedStyle,
+                'redesigned-style': this.redesignedStyle,
+            }, part: "autocomplete-options-container", role: "combobox", "aria-expanded": this.showOptions, "aria-activedescendant": this.activeOption ? `${this.internalUniqueId}-${this.filteredOptions.indexOf(this.activeOption)}` : undefined }, h("ul", { class: "autocomplete-options", ref: (el) => (this.optionsContainer = el), role: "listbox", tabindex: "-1" }, showNoOptionsMessage && this.renderNoOptionsMessage(), options.map(this.renderOption))));
+    };
     render() {
-        return (h(Host, { key: 'c6816d110afba208c52c71452fbe0dd178704eb5', class: {
+        return (h(Host, { key: '74e0ce0bd9373267485e191d057f77181c00bcdc', class: {
                 'autocomplete': true,
                 'dark': this.darkTheme,
-            } }, h("slot", { key: '9736b0030b67f8b16559b18732ec9987fa205ab1' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
+            } }, h("slot", { key: 'da7465cd514a819ab49fcc81d7d639e5e81f58dd' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
     }
     static get is() { return "tet-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -465,24 +480,6 @@ export class TetAutocomplete {
                 },
                 "defaultValue": "() => []"
             },
-            "typingDebounceTime": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The time in milliseconds after the last filter value when options filtering should be executed."
-                },
-                "attribute": "typing-debounce-time",
-                "reflect": false,
-                "defaultValue": "250"
-            },
             "noOptionsMessage": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/advanced/address/tet-autocomplete-dropdown/tet-autocomplete-dropdown.js

@@ -6,31 +6,6 @@ import { IconName } from "../../../../types/enums";
  */
 export class TetAutocompleteDropdown {
     constructor() {
-        this.nativeInputCallback = ({ target }) => {
-            const originalInputValue = target.value;
-            if (originalInputValue) {
-                this.inputValue = normalize(originalInputValue);
-                this.inputValueChanged.emit(originalInputValue);
-            }
-        };
-        this.iconRightClickCallback = async () => {
-            if (this.rightIconName === IconName.ChevronDown) {
-                return;
-            }
-            await this.autocomplete.clear();
-            this.inputValueCleared.emit();
-        };
-        this.autocompleteClearInputCallback = () => {
-            this.inputValue = '';
-            this.inputValueCleared.emit();
-        };
-        this.handleAutocompleteOptionSelection = ({ detail: option }) => {
-            this.inputValue = option.label;
-            this.optionSelected.emit(option);
-        };
-        this.optionsFilterAction = (filterValue) => {
-            return this.options.filter(({ label }) => label.toLowerCase().includes(normalize(filterValue)));
-        };
         this.options = [];
         this.defaultOption = undefined;
         this.noOptionsMessage = undefined;
@@ -41,6 +16,18 @@ export class TetAutocompleteDropdown {
         this.errorMessage = '';
         this.inputValue = '';
     }
+    /** A reference to the autocomplete HTML element. */
+    autocomplete;
+    /** The reference to the native HTML input contained in tet-input element. */
+    nativeInput;
+    /** The reference to the tet-input HTML element. */
+    inputComponent;
+    /** Event that is emitted when an option is selected. */
+    optionSelected;
+    /** Event that is emitted when the input value is cleared. */
+    inputValueCleared;
+    /** Event that is emitted when the selected option input value has been changed. */
+    inputValueChanged;
     /**
      * Clears the autocomplete native input value.
      */
@@ -54,20 +41,43 @@ export class TetAutocompleteDropdown {
         await this.autocomplete.focusOnNativeInput();
     }
     async componentDidLoad() {
-        var _a;
         this.nativeInput = await this.inputComponent.getInputHtmlElement();
-        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.addEventListener('input', this.nativeInputCallback);
+        this.nativeInput?.addEventListener('input', this.nativeInputCallback);
         if (this.defaultOption) {
             await this.autocomplete.selectOption(this.defaultOption);
         }
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', this.nativeInputCallback);
+        this.nativeInput?.removeEventListener('input', this.nativeInputCallback);
     }
+    nativeInputCallback = ({ target }) => {
+        const originalInputValue = target.value;
+        if (originalInputValue) {
+            this.inputValue = normalize(originalInputValue);
+            this.inputValueChanged.emit(originalInputValue);
+        }
+    };
     get rightIconName() {
         return this.inputValue.length ? IconName.Close : IconName.ChevronDown;
     }
+    iconRightClickCallback = async () => {
+        if (this.rightIconName === IconName.ChevronDown) {
+            return;
+        }
+        await this.autocomplete.clear();
+        this.inputValueCleared.emit();
+    };
+    autocompleteClearInputCallback = () => {
+        this.inputValue = '';
+        this.inputValueCleared.emit();
+    };
+    handleAutocompleteOptionSelection = ({ detail: option }) => {
+        this.inputValue = option.label;
+        this.optionSelected.emit(option);
+    };
+    optionsFilterAction = (filterValue) => {
+        return this.options.filter(({ label }) => label.toLowerCase().includes(normalize(filterValue)));
+    };
     render() {
         return (h(Host, { key: '09626dd5b16793682ebb6a3c417b6a443a987ab0' }, h("tet-autocomplete", { key: 'a09c9933a058f0c45544f911608892e0ceeb7f74', newStyle: true, defaultOptions: this.options, showOptionsOnEscapeClear: true, noOptionsMessage: this.noOptionsMessage, optionsFilterAction: this.optionsFilterAction, clearCallback: this.autocompleteClearInputCallback, onOptionSelected: this.handleAutocompleteOptionSelection, ref: (element) => (this.autocomplete = element), darkTheme: this.theme === 'dark' }, h("tet-input", { key: '2e4aa513b8ce2f3022846148e167a7c700f57b41', class: "input", label: this.label, error: this.hasError, "icon-right": this.rightIconName, "input-class": "autocomplete-input", "input-placeholder": this.placeholder, ref: (element) => (this.inputComponent = element), iconRightClickCallback: this.iconRightClickCallback, theme: this.theme })), this.hasError && this.errorMessage && h("p", { key: 'd96bf1c5594f90ff5a5880ee6a7d5eb147c8bd50', class: "error-message" }, this.errorMessage)));
     }