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

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

@@ -13,156 +13,6 @@ import { a11yBtnClick } from "../../../../services/utils/a11y";
  */
 export class TetAddressSearch {
     constructor() {
-        this.handleClick = () => {
-            this.elementActive = true;
-            this.focusVisible = false;
-        };
-        this.handleInputTyping = (event) => {
-            this.elementActive = true;
-            if (event === null || event === void 0 ? void 0 : event.data) {
-                this.focusVisible = false;
-            }
-        };
-        this.handleActiveStateChange = (event) => {
-            this.elementActive = event.detail !== null;
-        };
-        /**
-         * Toggles the icon on the right side of the input based on the current input value.
-         *
-         * @param event
-         */
-        this.toggleInputClearIcon = ({ target }) => {
-            const value = normalize(target.value);
-            this.inputValueLength = value.length;
-            if (this.newStyle && this.inputValueLength >= this.minSearchKeywordLength) {
-                this.addLoadIcon();
-                this.removeIconRight();
-                return;
-            }
-            if (value && !this.inputIconRight) {
-                this.addClearIcon();
-            }
-            if (!value && this.inputIconRight) {
-                this.removeIconRight();
-            }
-        };
-        /**
-         * Functionality that is executed when a manual address input trigger element is clicked upon or selected.
-         */
-        this.manualAddressInputAction = () => {
-            this.manualAddressInput.emit();
-            this.clearInputAction();
-        };
-        /**
-         * Filters autocomplete options by the given keyword.
-         *
-         * @param keyword
-         */
-        this.addressFilterFunction = async (keyword) => {
-            var _a;
-            if (keyword.length < this.minSearchKeywordLength) {
-                return Promise.resolve([]);
-            }
-            const addresses = (_a = (await searchAddress(keyword))) !== null && _a !== void 0 ? _a : [];
-            const addressOptions = addresses.map(({ fullAddress, addressKey, postalCode }) => {
-                return {
-                    label: fullAddress,
-                    value: { addressKey, postalCode },
-                };
-            });
-            if (this.manualAddressTriggers && addressOptions.length > 0) {
-                addressOptions.push({
-                    label: t('components-address-search-manual-address-input'),
-                    value: 'manual-input',
-                    clickCallback: this.manualAddressInputAction,
-                    ignoreHighlighting: true,
-                    cssPart: `manual-input-option`
-                });
-            }
-            return addressOptions;
-        };
-        this.debounceAddressFilter = debounceAsync(this.addressFilterFunction, 300);
-        /**
-         * Removes the icon on the right side of the input.
-         */
-        this.removeIconRight = () => {
-            this.inputIconRight = '';
-        };
-        /**
-         * Executes input "clear" functionality.
-         */
-        this.clearInputAction = () => {
-            var _a;
-            (_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.clear();
-        };
-        /**
-         * Functionality to execute after the autocomplete input field has been cleared.
-         */
-        this.autocompleteClearInputCallback = () => {
-            this.removeIconRight();
-            this.inputValueLength = 0;
-            this.clearInputField.emit();
-        };
-        /**
-         * Adds the `clear` icon in the input field.
-         */
-        this.addClearIcon = () => {
-            this.isLoading = false;
-            this.inputIconRight = 'close';
-        };
-        /**
-         * Removes the loader icon and adds the clear icon.
-         */
-        this.finishedLoading = () => {
-            if (this.newStyle) {
-                this.removeIconRight();
-                if (this.inputValueLength >= 1) {
-                    this.addClearIcon();
-                }
-            }
-        };
-        /**
-         * Adds the "load" icon to the input field.
-         */
-        this.addLoadIcon = () => {
-            this.isLoading = true;
-        };
-        /**
-         * The function that is executed when an autocomplete option is selected.
-         *
-         * @param event
-         */
-        this.handleAutocompleteOptionSelection = (event) => {
-            // Convert back to the original API address interface to keep the data structures in sync.
-            if (event.detail._originalEvent instanceof PointerEvent) {
-                this.addressSelected.emit({
-                    addressKey: event.detail.value.addressKey,
-                    fullAddress: event.detail.label,
-                    postalCode: event.detail.value.postalCode
-                });
-                this.searchSubmitted.emit(event.detail.label);
-            }
-            else {
-                this.addressSelected.emit({
-                    addressKey: event.detail.value.addressKey,
-                    fullAddress: event.detail.label,
-                    postalCode: event.detail.value.postalCode
-                });
-            }
-        };
-        /**
-         * Handles the search button click.
-         */
-        this.handleSearchSubmit = () => {
-            var _a;
-            this.searchSubmitted.emit((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.value);
-        };
-        /**
-         * Renders the content that is shown when there are no matching addresses.
-         */
-        this.renderManualAddressInputNoOptionsMessage = () => {
-            return (h("div", { part: "address-not-found" }, h("p", null, t('components-address-search-not-found-message')), h("p", { part: `manual-input ${this.theme}` }, h("a", { onClick: this.manualAddressInputAction, onKeyDown: a11yBtnClick, class: { 'tet-link': true, 'dark': this.theme === 'dark' }, tabindex: "0", role: "button" }, t('components-address-search-manual-address-input')))));
-        };
         this.language = 'lv';
         this.minSearchKeywordLength = 4;
         this.placeholder = 'Piemēram, Nometņu iela 10 - 5, Salaspils';
@@ -185,6 +35,12 @@ export class TetAddressSearch {
         this.searchButtonText = 'Parbaudīt';
         this.closeButtonText = 'Aizvert';
     }
+    /** The reference to the autocomplete element. */
+    autocomplete;
+    /** The reference to the native input element inside tet-input. */
+    nativeInput;
+    /** The reference to the tet-input element. */
+    inputComponent;
     onLanguageChanged(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
@@ -202,6 +58,14 @@ export class TetAddressSearch {
     onInputDisabledStateChange(inputDisabled) {
         inputDisabled ? this.removeIconRight() : this.addClearIcon();
     }
+    /** The event that is emitted when the user selects an address via autocomplete. */
+    addressSelected;
+    /** The event that is emitted when the input field is cleared automatically. */
+    clearInputField;
+    /** The event that is emitted when the user selects the manual address input option. */
+    manualAddressInput;
+    /** The event that is emitted when the user clicks the search button. */
+    searchSubmitted;
     /**
      * - Resets the native input value to an empty string
      * - Resets input value length state
@@ -216,12 +80,11 @@ export class TetAddressSearch {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     async componentDidLoad() {
-        var _a, _b, _c, _d, _e;
-        this.nativeInput = await ((_a = this.inputComponent) === null || _a === void 0 ? void 0 : _a.getInputHtmlElement());
-        (_b = this.nativeInput) === null || _b === void 0 ? void 0 : _b.addEventListener('input', this.toggleInputClearIcon);
-        (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.addEventListener('input', this.handleInputTyping);
-        (_d = this.nativeInput) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.handleClick);
-        (_e = this.autocomplete) === null || _e === void 0 ? void 0 : _e.addEventListener('activeComponentStateChanged', this.handleActiveStateChange);
+        this.nativeInput = await this.inputComponent?.getInputHtmlElement();
+        this.nativeInput?.addEventListener('input', this.toggleInputClearIcon);
+        this.nativeInput?.addEventListener('input', this.handleInputTyping);
+        this.nativeInput?.addEventListener('click', this.handleClick);
+        this.autocomplete?.addEventListener('activeComponentStateChanged', this.handleActiveStateChange);
         if (this.nativeInput) {
             this.nativeInput.style.whiteSpace = 'nowrap';
             this.nativeInput.style.overflow = 'hidden';
@@ -232,18 +95,29 @@ export class TetAddressSearch {
         }
     }
     disconnectedCallback() {
-        var _a, _b, _c, _d;
-        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', this.toggleInputClearIcon);
-        (_b = this.nativeInput) === null || _b === void 0 ? void 0 : _b.removeEventListener('input', this.handleInputTyping);
-        (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.handleClick);
-        (_d = this.autocomplete) === null || _d === void 0 ? void 0 : _d.removeEventListener('activeComponentStateChanged', this.handleActiveStateChange);
+        this.nativeInput?.removeEventListener('input', this.toggleInputClearIcon);
+        this.nativeInput?.removeEventListener('input', this.handleInputTyping);
+        this.nativeInput?.removeEventListener('click', this.handleClick);
+        this.autocomplete?.removeEventListener('activeComponentStateChanged', this.handleActiveStateChange);
     }
+    handleClick = () => {
+        this.elementActive = true;
+        this.focusVisible = false;
+    };
+    handleInputTyping = (event) => {
+        this.elementActive = true;
+        if (event?.data) {
+            this.focusVisible = false;
+        }
+    };
+    handleActiveStateChange = (event) => {
+        this.elementActive = event.detail !== null;
+    };
     /**
      * Listen for Tab key event.
      */
     onKeyDown(event) {
-        var _a;
-        if (event.key === 'Tab' && !((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.value)) {
+        if (event.key === 'Tab' && !this.nativeInput?.value) {
             this.focusVisible = true;
         }
     }
@@ -269,6 +143,140 @@ export class TetAddressSearch {
             this.inputDisabled = false;
         }
     }
+    /**
+     * Toggles the icon on the right side of the input based on the current input value.
+     *
+     * @param event
+     */
+    toggleInputClearIcon = ({ target }) => {
+        const value = normalize(target.value);
+        this.inputValueLength = value.length;
+        if (this.newStyle && this.inputValueLength >= this.minSearchKeywordLength) {
+            this.addLoadIcon();
+            this.removeIconRight();
+            return;
+        }
+        if (value && !this.inputIconRight) {
+            this.addClearIcon();
+        }
+        if (!value && this.inputIconRight) {
+            this.removeIconRight();
+        }
+    };
+    /**
+     * Functionality that is executed when a manual address input trigger element is clicked upon or selected.
+     */
+    manualAddressInputAction = () => {
+        this.manualAddressInput.emit();
+        this.clearInputAction();
+    };
+    /**
+     * Filters autocomplete options by the given keyword.
+     *
+     * @param keyword
+     */
+    addressFilterFunction = async (keyword) => {
+        if (keyword.length < this.minSearchKeywordLength) {
+            return Promise.resolve([]);
+        }
+        const addresses = (await searchAddress(keyword)) ?? [];
+        const addressOptions = addresses.map(({ fullAddress, addressKey, postalCode }) => {
+            return {
+                label: fullAddress,
+                value: { addressKey, postalCode },
+            };
+        });
+        if (this.manualAddressTriggers && addressOptions.length > 0) {
+            addressOptions.push({
+                label: t('components-address-search-manual-address-input'),
+                value: 'manual-input',
+                clickCallback: this.manualAddressInputAction,
+                ignoreHighlighting: true,
+                cssPart: `manual-input-option`
+            });
+        }
+        return addressOptions;
+    };
+    debounceAddressFilter = debounceAsync(this.addressFilterFunction, 300);
+    /**
+     * Removes the icon on the right side of the input.
+     */
+    removeIconRight = () => {
+        this.inputIconRight = '';
+    };
+    /**
+     * Executes input "clear" functionality.
+     */
+    clearInputAction = () => {
+        this.autocomplete?.clear();
+    };
+    /**
+     * Functionality to execute after the autocomplete input field has been cleared.
+     */
+    autocompleteClearInputCallback = () => {
+        this.removeIconRight();
+        this.inputValueLength = 0;
+        this.clearInputField.emit();
+    };
+    /**
+     * Adds the `clear` icon in the input field.
+     */
+    addClearIcon = () => {
+        this.isLoading = false;
+        this.inputIconRight = 'close';
+    };
+    /**
+     * Removes the loader icon and adds the clear icon.
+     */
+    finishedLoading = () => {
+        if (this.newStyle) {
+            this.removeIconRight();
+            if (this.inputValueLength >= 1) {
+                this.addClearIcon();
+            }
+        }
+    };
+    /**
+     * Adds the "load" icon to the input field.
+     */
+    addLoadIcon = () => {
+        this.isLoading = true;
+    };
+    /**
+     * The function that is executed when an autocomplete option is selected.
+     *
+     * @param event
+     */
+    handleAutocompleteOptionSelection = (event) => {
+        // Convert back to the original API address interface to keep the data structures in sync.
+        if (event.detail._originalEvent instanceof PointerEvent) {
+            this.addressSelected.emit({
+                addressKey: event.detail.value.addressKey,
+                fullAddress: event.detail.label,
+                postalCode: event.detail.value.postalCode
+            });
+            this.searchSubmitted.emit(event.detail.label);
+        }
+        else {
+            this.addressSelected.emit({
+                addressKey: event.detail.value.addressKey,
+                fullAddress: event.detail.label,
+                postalCode: event.detail.value.postalCode
+            });
+        }
+    };
+    /**
+     * Handles the search button click.
+     */
+    handleSearchSubmit = () => {
+        this.searchSubmitted.emit(this.nativeInput?.value);
+    };
+    /**
+     * Renders the content that is shown when there are no matching addresses.
+     */
+    renderManualAddressInputNoOptionsMessage = () => {
+        return (h("div", { part: "address-not-found" }, h("p", null, t('components-address-search-not-found-message')), h("p", { part: `manual-input ${this.theme}` }, h("a", { onClick: this.manualAddressInputAction, onKeyDown: a11yBtnClick, class: { 'tet-link': true, 'dark': this.theme === 'dark' }, tabindex: "0", role: "button" }, t('components-address-search-manual-address-input')))));
+    };
     render() {
         const inputClasses = ['autocomplete-input'];
         if (this.redesignedStyle) {