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

package/dist/esm/tet-autocomplete.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7f1e2a22.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-209dece3.js';
 import { d as debounce } from './debounce-dee91907.js';
 import { n as normalize } from './string-67efb7d1.js';
-import { b as isPromise, c as isFunction, i as isObject } from './typecheck-31fd6c02.js';
+import { b as isFunction, c as isPromise, i as isObject } from './typecheck-4abf0258.js';
 import { r as randomString } from './random-6d0158f1.js';
 
 /**
@@ -66,185 +66,9 @@ const TetAutocomplete = class {
         registerInstance(this, hostRef);
         this.optionSelected = createEvent(this, "optionSelected", 7);
         this.activeComponentStateChanged = createEvent(this, "activeComponentStateChanged", 7);
-        /** 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;
@@ -260,10 +84,30 @@ const TetAutocomplete = class {
         this.showLoader = false;
         this.isKeyboardFocus = true;
     }
+    get rootElement() { return getElement(this); }
+    /** 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) => {
@@ -274,13 +118,12 @@ const TetAutocomplete = class {
                 }
             });
         }
-        (_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();
@@ -362,9 +205,18 @@ const TetAutocomplete = class {
                 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
@@ -373,8 +225,8 @@ const TetAutocomplete = class {
             && 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;
             }
         }
@@ -437,13 +289,174 @@ const TetAutocomplete = class {
             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)));
     }
-    get rootElement() { return getElement(this); }
 };
 TetAutocomplete.style = TetAutocompleteStyle0;