@tet/tet-components 1.4.29-testing → 1.4.30-staging

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

@@ -0,0 +1,373 @@
+import { Host, h } from "@stencil/core";
+import { findArticles } from "../../../../services/api/services/article-search";
+import { normalize, debounceAsync, innerTextFromHtml } from "../../../../services/utils/index";
+/**
+ * Support search input with autocomplete suggestions fetched from the configured support search API endpoint.
+ * Emits `searchSubmitted` for manual searches and `optionSelected` when a suggested article is chosen.
+ */
+export class TetSupportSearch {
+    constructor() {
+        this.theme = 'light';
+        this.minSearchLength = 4;
+        this.showInputLabel = false;
+        this.labels = undefined;
+        this.disabled = false;
+        this.searchApiUrl = '';
+        this.maxSearchResults = 5;
+        this.inputIconRight = '';
+        this.inputValueLength = 0;
+        this.isLoading = false;
+    }
+    /** The event that is emitted when the user clicks the search button. */
+    searchSubmitted;
+    /** The autocomplete option selection event. */
+    optionSelected;
+    /** The reference to the native input element inside tet-input. */
+    nativeInput;
+    /** The reference to the tet-input element. */
+    inputComponent;
+    /** Pre-bound callback references to preserve component context when passing methods as handlers. */
+    boundOptionsFilterFunction = this.optionsFilterFunction.bind(this);
+    boundFinishedLoadingFunction = this.finishedLoading.bind(this);
+    boundHandleAutocompleteOptionSelection = this.handleAutocompleteOptionSelection.bind(this);
+    boundHandleSearchSubmit = this.handleSearchSubmit.bind(this);
+    boundHandleInputRightIcon = this.handleInputRightIcon.bind(this);
+    boundRenderOption = this.renderOption.bind(this);
+    onDisabledStateChange() {
+        if (this.disabled) {
+            this.removeIconRight();
+        }
+        else {
+            this.inputValueLength && this.addClearIcon();
+        }
+    }
+    /** Resets the input value, icon, and loading state to the initial state. */
+    async resetInputState() {
+        if (this.nativeInput) {
+            this.nativeInput.value = '';
+        }
+        this.inputValueLength = 0;
+        this.isLoading = false;
+        this.removeIconRight();
+    }
+    async componentDidLoad() {
+        this.nativeInput = await this.inputComponent.getInputHtmlElement();
+        this.nativeInput?.addEventListener('input', this.boundHandleInputRightIcon);
+    }
+    disconnectedCallback() {
+        this.nativeInput?.removeEventListener('input', this.boundHandleInputRightIcon);
+    }
+    handleInputRightIcon({ target }) {
+        const value = normalize(target.value);
+        this.inputValueLength = value.length;
+        if (this.inputValueLength >= this.minSearchLength) {
+            this.addLoadIcon();
+            this.removeIconRight();
+            return;
+        }
+        if (value && !this.inputIconRight) {
+            this.addClearIcon();
+        }
+        if (!value && this.inputIconRight) {
+            this.removeIconRight();
+        }
+    }
+    /**
+     * Filters autocomplete options by the given keyword.
+     *
+     * @param keyword
+     */
+    async optionsFilterFunction(keyword) {
+        if (keyword.length < this.minSearchLength || !this.searchApiUrl) {
+            return [];
+        }
+        const articles = await findArticles(this.searchApiUrl, keyword);
+        const limitedArticles = articles.slice(0, this.maxSearchResults);
+        const articleOptions = limitedArticles.map(({ title, id, description, categories, url }) => {
+            const label = innerTextFromHtml(title);
+            return {
+                label,
+                value: { id, description, categories, url, htmlLabel: title },
+            };
+        });
+        if (articleOptions.length > 0) {
+            articleOptions.push({
+                label: this.labels.moreResultsLabel,
+                value: 'more-results',
+                clickCallback: this.boundHandleSearchSubmit,
+                ignoreHighlighting: true,
+                cssPart: `more-results`
+            });
+        }
+        return articleOptions;
+    }
+    debounceOptionsFilter = debounceAsync(this.boundOptionsFilterFunction, 300);
+    removeIconRight() {
+        this.inputIconRight = '';
+    }
+    addClearIcon() {
+        this.isLoading = false;
+        this.inputIconRight = 'tc-close';
+    }
+    /** Removes the loader icon and adds the clear icon. */
+    finishedLoading() {
+        this.removeIconRight();
+        if (this.inputValueLength >= 1) {
+            this.addClearIcon();
+        }
+    }
+    addLoadIcon() {
+        this.isLoading = true;
+    }
+    /**
+     * The function that is executed when an autocomplete option is selected.
+     *
+     * @param event
+     */
+    handleAutocompleteOptionSelection(event) {
+        event.stopPropagation();
+        const { label, value, _originalEvent } = event.detail;
+        const detail = {
+            label,
+            id: value.id,
+            url: value.url,
+            originalEvent: _originalEvent
+        };
+        this.optionSelected.emit(detail);
+    }
+    handleSearchSubmit() {
+        this.searchSubmitted.emit(this.nativeInput?.value ?? '');
+    }
+    renderOption(option) {
+        const { description, categories, htmlLabel } = option.value;
+        return (h("div", { part: "dropdown-option" }, h("tet-icon", { part: "option-icon", class: "icon", name: "tc-arrow-right" }), h("div", { part: "dropdown-option-content" }, h("div", { part: "option-label", innerHTML: htmlLabel }), description && (h("div", { part: "option-description", innerHTML: description })), categories?.length && (h("div", { part: "option-categories" }, categories.map((category, i) => ([
+            h("span", { innerHTML: category }),
+            (i < categories.length - 1) && (h("tet-icon", { name: "tc-chevron-right-small", theme: this.theme, type: "secondary", part: "option-category-separator" }))
+        ])))))));
+    }
+    render() {
+        return (h(Host, { key: '2fcf66c81bc71b0a869760c2df5e4279e1490cc2', class: {
+                "search-container": true,
+                [this.theme]: true,
+            } }, h("div", { key: '899abc00ebffe0b6d8f0cad8c724f432d83841ff', class: "search-container__inner-wrapper" }, h("tet-autocomplete", { key: '01c77e473e4afeac84736469e2fec4d9cc3f65dc', optionsFilterAction: this.debounceOptionsFilter, onOptionSelected: this.boundHandleAutocompleteOptionSelection, noOptionsMessage: this.labels.notFoundMessage, customOptionRenderFunction: this.boundRenderOption, finishedLoading: this.boundFinishedLoadingFunction, darkTheme: this.theme === 'dark', newStyle: true }, h("tet-input", { key: '650b286ac63028063ed50dc8b19afcd9b848acc3', class: "search-container__input", "input-class": `autocomplete-input search-container__input ${this.isLoading ? 'with-loader' : ''}`, "input-placeholder": this.labels.placeholder, "input-disabled": this.disabled, label: this.showInputLabel ? this.labels.label : undefined, accessibilityLabel: this.showInputLabel ? undefined : this.labels.label, iconLeft: "tc-search-short", iconRight: this.inputIconRight, iconRightClickCallback: () => this.resetInputState(), iconRightAccessibilityLabel: this.labels.clearButtonLabel, theme: this.theme, ref: (el) => (this.inputComponent = el), autocomplete: "off" }, this.isLoading &&
+            h("tet-spinner", { key: 'e9e3028b2a69557a9ba39feb401e38fd9bf29fae', theme: this.theme, class: "search-container__spinner", size: "small" }))), h("tet-button", { key: '13611884e5fed25ef0f92ae8cfd281f73ba40911', class: "search-container__button search-container__button--mobile", theme: this.theme, size: "small", "accessibility-label": this.labels.searchButtonLabel, iconName: "tc-arrow-right", iconMode: true, disabled: this.disabled, onClick: this.boundHandleSearchSubmit }), h("tet-button", { key: '6bd17d80b7e744ebdce53f2cd0e40aadc5fdc3f3', class: "search-container__button search-container__button--desktop", theme: this.theme, size: "large", disabled: this.disabled, onClick: this.boundHandleSearchSubmit }, this.labels.searchButtonLabel))));
+    }
+    static get is() { return "tet-support-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-support-search.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-support-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "minSearchLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum length of the keyword before search functionality is applied."
+                },
+                "attribute": "min-search-length",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "showInputLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the input label should be shown."
+                },
+                "attribute": "show-input-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Labels",
+                    "resolved": "Labels",
+                    "references": {
+                        "Labels": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/search/tet-support-search/tet-support-search.tsx",
+                            "id": "src/components/advanced/search/tet-support-search/tet-support-search.tsx::Labels"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required labels and texts used in the component."
+                }
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The enabled or disabled state of the component."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "searchApiUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the search API endpoint used to fetch autocomplete results for the entered query."
+                },
+                "attribute": "search-api-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "maxSearchResults": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum number of search results to be shown in the dropdown."
+                },
+                "attribute": "max-search-results",
+                "reflect": false,
+                "defaultValue": "5"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputIconRight": {},
+            "inputValueLength": {},
+            "isLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "searchSubmitted",
+                "name": "searchSubmitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The event that is emitted when the user clicks the search button."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "optionSelected",
+                "name": "optionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The autocomplete option selection event."
+                },
+                "complexType": {
+                    "original": "OptionSelectedEventDetail",
+                    "resolved": "{ label: string; id: string | number; url: string; originalEvent: Event; }",
+                    "references": {
+                        "OptionSelectedEventDetail": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/search/tet-support-search/tet-support-search.tsx",
+                            "id": "src/components/advanced/search/tet-support-search/tet-support-search.tsx::OptionSelectedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resetInputState": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the input value, icon, and loading state to the initial state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledStateChange"
+            }];
+    }
+}

package/dist/collection/components/basic/buttons/tet-switch/tet-switch.js

@@ -46,16 +46,16 @@ export class TetSwitch {
     }
     render() {
         const { label, name, theme, disabled, checked, accessibilityLabel, labelFont, alignCenter, labelPosition } = this;
-        return (h(Host, { key: 'b9ab784392f96bcd9c675a17309a074f257c1b6a' }, h("div", { key: 'c747d4f40d343d3fb437a6371e60c4409242e0a7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '51521ad5b256229e559c1264edfcbddff077f01e', class: {
+        return (h(Host, { key: '9353eee67de4abd810beea107865694ee2c36fb2' }, h("div", { key: '6bbae8932cb99a054e3ed9f02ea18f8925b0dc8d', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: 'feaa3924ba8a2b869d5130fcf44194809123ffbb', class: {
                 'switch__container': true,
                 'switch__container--align-start': !alignCenter,
                 [`switch__container--${labelFont}`]: true,
                 'switch__container--focus-style': this.focusStyleOnContainer,
-            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: '24429f5b7d57b9ab1d94bfbf5ae8fcb1af156c82', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), labelPosition === 'right' && this.renderSwitch(), h("span", { key: '259bfd14a0082b379a733f5605eb760f5cb5dfaf', class: {
+            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: 'a6cdceb08729e1d6f156c93af49e8963db480744', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), labelPosition === 'right' && this.renderSwitch(), h("span", { key: '19482e239c3c5b873751f04f9c6e387bf36dff7d', class: {
                 'switch__label': true,
                 ...(labelPosition === 'left' ? { 'switch__label--left': true } : {}),
                 ...(labelFont ? { [`switch__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: '17bd908993e20dba389ebea6165bba4546bd4853' })), labelPosition === 'left' && this.renderSwitch()))));
+            }, innerHTML: label }, h("slot", { key: '20487b7313d9a0393f0056eb972200f13645c6d2' })), labelPosition === 'left' && this.renderSwitch()))));
     }
     static get is() { return "tet-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-content/tet-tab-content.js

@@ -161,11 +161,11 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: 'b6c8711fc9850aeaf025e215f04fb2932d4208c4' }, h("div", { key: 'ab5f83843944f003cb6f75378f3768b95d295339', class: {
+        return (h(Host, { key: 'ced475171679de9cca4b613f81f0d6c0badbf286' }, h("div", { key: '55ab49bc392db797c16c37874fec99545e2a8de9', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: '38e182f182fe04c9dcd250323c0f9a5048362c6f' }))));
+            } }, h("slot", { key: '9e5e1dd3c987d5d899ac83a1cec08615e9732367' }))));
     }
     static get is() { return "tet-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -471,14 +471,14 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: '8e1924cd0f19ed6987c8cda6df5d7c9cb044c569', "data-id-suffix": this.idSuffix }, h("div", { key: 'd5582e17dd959d569ff981180540b8acaf07803d', class: {
+        return (h(Host, { key: '5c045abbb1262176d0db6c82f3631c2d6e8460cb', "data-id-suffix": this.idSuffix }, h("div", { key: '95b8b8238282f8924d4f6b7307c29a08335155c2', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 [this.position]: true,
                 [this.theme]: true,
                 [this.sizing]: true,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: 'b7a3ed5fdfb64cb8ff2ab9614bea51d5b4c7f0a4', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '7a1d6571c66f66a854be259817bb1d0e39e442ed', class: {
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: '0cf3da0a4a3daefeec430b107c4951760546e29d', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '02f14be1cbb29f08c4a95e56dcabf13528f530ab', class: {
                 'tabs-line': !this.segmented,
                 'no-underline': this.hideHeaderUnderline,
                 [this.theme]: true,

package/dist/collection/components/basic/buttons/tet-tag/tet-tag.js

@@ -20,12 +20,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '400777c5cd77465279f0f3dd106ac26e6a15807c' }, h("button", { key: '98998a4119d014a1c7692bf8c409d81851c0a5fc', class: {
+        return (h(Host, { key: '69e61de08a865ff1cc66829a63ef817c6b49da85' }, h("button", { key: '530f302e2facb86c2f5fed622508f83a9f405284', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '08322bdc4685a7bd7896cc9d8fa39cb0845bf720', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'd0186bd43116b76036813a6b043d18d627d5dd80', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '479c9d4b1c60d72e9733ec17c8eabe49b7d8492e', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '85387ea3d832c4223058d994fefc61e66b80f1cb', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'ba57579100e91d04d5e56da8a504426b45f11863', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '76c08e7ddd6ec54e301bf3fc12ff5d9a0baad7d9', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/carousel/tet-carousel/tet-carousel.js

@@ -890,22 +890,22 @@ export class TetCarousel {
                 trackTransition = 'none';
             }
         }
-        return (h(Host, { key: '9767de8c2faf3b0e4830a392c9ba0d86c613646e' }, h("div", { key: 'fa87bbfcf929287a5440accd922698d4ad1f6d4b', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: 'f5650393d39f906e8c47fd299680b09f82b00a07', class: "tet-carousel__container" }, h("div", { key: 'f6bd47326c58ef355d35e33c037025e1d5a7b5a8', class: "tet-carousel__gradient-left", ref: (el) => {
+        return (h(Host, { key: '1fc3deb3e6e9262c20d9efd2abeedbf8563decf4' }, h("div", { key: '41b6db12fd2fb76a80a1d6575bfd1124a94a2934', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '255d5aa266e74f878025e53d3fd8521d66ace586', class: "tet-carousel__container" }, h("div", { key: '687ae940a8e941b0f24f84263606e079fcdcdd7c', class: "tet-carousel__gradient-left", ref: (el) => {
                 this.leftGradientRef = el;
-            } }), h("div", { key: '685cad2d917518a83c6db28ef451563fe349c218', class: "tet-carousel__gradient-right", ref: (el) => {
+            } }), h("div", { key: '8dcf6c321a78b979916c66ffc633cd1f217c375a', class: "tet-carousel__gradient-right", ref: (el) => {
                 this.rightGradientRef = el;
-            } }), h("div", { key: '2f5acf14605c82e42c845766bd50e61a644a6fe6', class: `tet-carousel__track ${showControls ? '' : 'tet-carousel__track--center'}`, ref: (el) => (this.trackElement = el), style: {
+            } }), h("div", { key: '10ced8c4f5e98d3a6fd8127a010bfd6003865ba0', class: `tet-carousel__track ${showControls ? '' : 'tet-carousel__track--center'}`, ref: (el) => (this.trackElement = el), style: {
                 transform: `translate3d(${this.dragOffset}px, 0, 0)`,
                 transition: trackTransition,
                 willChange: 'transform'
-            }, onPointerDown: this.onPointerDown, onPointerUp: this.onPointerUp }, h("div", { key: '84bcc48d810f6cd0d15022cdc6d48841187613ad', class: {
+            }, onPointerDown: this.onPointerDown, onPointerUp: this.onPointerUp }, h("div", { key: 'e92fdef0719e7de5cc7103b54966f5af9a677236', class: {
                 'tet-carousel__track-content': true,
                 'tet-carousel__track-content--nudge': this.isNudgeAnimating
             }, ref: (el) => (this.trackContentElement = el), style: {
                 '--tet-carousel-nudge-distance': `${TetCarousel.NUDGE_DISTANCE_PX}px`
-            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: '008187ecc9d482ffd1565aaa2c6da818a7bf34ed' })))), !!this.label && h("div", { key: 'd040796e5dc156331fdb2356cd7bb20e7900f460', class: "tet-carousel__label" }, this.label), showControls && (h("div", { key: '4446a2194185bae6fef623d21790f89346378194', class: "tet-carousel__controls" }, showButtons && (h("div", { key: '6c3c10f149b11f9b6503392f16d2d74b526d74c8', class: "tet-carousel__buttons tet-carousel__buttons--mobile", ref: (el) => (this.mobileBackButtonWrapper = el) }, h("tet-button", { key: 'e8f3dad8e0978add649e844149b94072e366f4d8', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }))), showDots && (h("div", { key: 'a747eb625e0bf36603a279f29f17ccac16c2e84c', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: idx === this.activeDotIndex ? 0 : -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, "aria-label": `${idx === this.activeDotIndex
+            }, onAnimationEnd: this.onNudgeAnimationEnd }, h("slot", { key: 'dfa939715794282bf8f23dc5e11f8726853d6d65' })))), !!this.label && h("div", { key: 'f071b398922a60152db92ce0531920a2f53cb7b1', class: "tet-carousel__label" }, this.label), showControls && (h("div", { key: 'e62f01e1fdb4d979f00b3d5766609a147a8ee1c4', class: "tet-carousel__controls" }, showButtons && (h("div", { key: 'ff466189f9a91c7c223945c5e082e6cff612d0f9', class: "tet-carousel__buttons tet-carousel__buttons--mobile", ref: (el) => (this.mobileBackButtonWrapper = el) }, h("tet-button", { key: '13af12bfd4c7fcc7cb414b8f0057513f523a8d13', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }))), showDots && (h("div", { key: 'e78cbe6992aec81ccaca814380a554be11b9bb94', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: idx === this.activeDotIndex ? 0 : -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, "aria-label": `${idx === this.activeDotIndex
                 ? t('components-carousel-indicator-button-active')
-                : t('components-carousel-indicator-button')} ${idx + 1}/${this.dotCount}`, "aria-current": idx === this.activeDotIndex ? 'true' : undefined, onPointerDown: (e) => e.stopPropagation(), onKeyDown: (event) => this.handleDotKeyDown(event, idx), onClick: () => this.handleDotClick(idx) }))))), showButtons && (h("div", { key: '4ffa948621436b96fb9b8d6b10308ec9aa98dff3', class: "tet-carousel__buttons" }, h("tet-button", { key: '43de7d0b8e92e6b1e0e2b7f1ff5f851c4fc75ead', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }), h("tet-button", { key: 'eb7b1f82803e0bc39ffb41721a1a906dd5fc6d55', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handleNext(), accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
+                : t('components-carousel-indicator-button')} ${idx + 1}/${this.dotCount}`, "aria-current": idx === this.activeDotIndex ? 'true' : undefined, onPointerDown: (e) => e.stopPropagation(), onKeyDown: (event) => this.handleDotKeyDown(event, idx), onClick: () => this.handleDotClick(idx) }))))), showButtons && (h("div", { key: '78bcece033f881bf1b74fa5cec0c252f706ae5bf', class: "tet-carousel__buttons" }, h("tet-button", { key: '7edd52dfbf520ffe68b97d073c58ddbd86dd809c', class: "tet-carousel__buttons--desktop", theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconLeft, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handlePrev(), accessibilityLabel: t('components-carousel-previous'), disabled: this.isLeftNavigationDisabled() }), h("tet-button", { key: 'd7daa187520f89d4ffb24348e1408e6658dc4d4a', theme: this.theme, type: "secondary", size: "medium", "icon-name": this.buttonIconRight, "icon-mode": true, onPointerDown: (e) => e.stopPropagation(), onClick: () => this.handleNext(), accessibilityLabel: t('components-carousel-next'), disabled: this.isRightNavigationDisabled() }))))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/icon/tet-icon.js

@@ -50,7 +50,7 @@ export class TetIcon {
     };
     shouldUseDefaultColor = () => (this.useDefaultColor || defaultColorIcons.includes(this.name));
     render() {
-        return (h("span", { key: 'ed320686c17d5866f26d5f418f328c6948d3640f', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: '8d5eb263eba6ce33576caff437625d5f021f9b19', class: {
+        return (h("span", { key: '69140342318871e93c5af7ae735bc5bcf48871a2', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: '50b9d8e357da93c531178787f9757ae5c8476eda', class: {
                 'icon-container': true,
                 'default-color': this.shouldUseDefaultColor(),
                 [this.theme]: true,

package/dist/collection/components/basic/loaders/tet-loader/tet-loader.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TetLoader {
     render() {
-        return (h("div", { key: '85b2d0e291d3ef70af1e83c6adba5ace485b9010', class: "loader" }, h("div", { key: '962714060397a7dec7af28e046e5cd6533ed4505', class: "loader-inner" })));
+        return (h("div", { key: '1f30e22daa123f5fb09fa3e5e6c22ada0e5abfb9', class: "loader" }, h("div", { key: '418a872069e33873223afefae0941d4e86a54072', class: "loader-inner" })));
     }
     static get is() { return "tet-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-placeholder/tet-placeholder.js

@@ -9,7 +9,7 @@ export class TetPlaceholder {
         this.darkTheme = false;
     }
     render() {
-        return (h(Host, { key: 'f9c9d1dfed194378e90fe06171441b0db34111cd', style: { width: this.width, height: this.height } }, h("div", { key: 'd1f3b190ecfae5bfbb58a4a84901bf6ff7da64dd', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '79e229334a49b944ef89c27e3aefbcd053f2dc9d', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: 'e70566c609c168ce6849e92e0acd233ba07a4b5c', style: { width: this.width, height: this.height } }, h("div", { key: '591fb7e0b39cdc2fa415e66a6ecf41416763928f', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '22c17cfdd054de5bde801b07af0dd19d95aad779', class: "placeholder", style: { height: this.height } }))));
     }
     static get is() { return "tet-placeholder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-spinner/tet-spinner.js

@@ -48,13 +48,13 @@ export class TetSpinner {
         foreignObject.setAttribute('clip-path', 'url(#clip)');
     };
     render() {
-        return (h("div", { key: 'c5de3ff62bae17c64468e3406729a4c4a3a587f8', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '13ae0e053eeada739f10619cbbf4f98eb10c389d', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: 'acb4ecdbf2a75a47aae09a18a1fa44d8f942b6c5', viewBox: "0 0 40 40" }, h("clipPath", { key: 'f45be4277077512749cd357ec78146d2d180cf46', id: "clip" }, h("path", { key: '4d82466e60d835501e4622ae28e6cc3b90229c33', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
-              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '62877b47af730b01ec32cb094b24445c0a4fa328' }, h("div", { key: 'b09da6b267c7dcfee4e17bedd0bc297ffea54ace', class: "spinner__gradient" })))));
+            } }, h("svg", { key: 'b52bd4856e3b00b2f312c144d9efc4f3b177e9b1', viewBox: "0 0 40 40" }, h("clipPath", { key: 'bba9a5c73c41e135c288cfbe4f34e6841219cd5e', id: "clip" }, h("path", { key: 'e51d5c18783abd377adcf3b5d3555fcfbb45d758', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
+              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '11ecac3df9f973b0603780a477474d9ee2d5654b' }, h("div", { key: '92a728196dee849b2f43e4ab237d5e935405175a', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/misc/tet-label/tet-label.js

@@ -13,12 +13,12 @@ export class TetLabel {
         this.showIcon = false;
     }
     render() {
-        return (h(Host, { key: 'e126e5919f6be51dc62a20027556a7c0e803f9a4' }, h("div", { key: '08ce2538f49bb446d065eb7e1ca22e43ae732d3d', class: {
+        return (h(Host, { key: '9876dfb683eac5551d760607e9c3c5c697c57fac' }, h("div", { key: 'f9508bd2394f93ac8de72134926ceccfc8151030', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: '7ebcaf67ad4fe0fa7fbab9956bbe5cbe7fc1016c', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'bcc130874d361d1765c5a0c6b2478e79435f2a63', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, this.labelTitle && h("p", { key: '1c1367b3f17ba7cbe09a009703db9aa75b2b18d5', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: '3acc811cc3f9136a95b13e3d9be3489370159f0d', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-header/tet-datepicker-header.js

@@ -55,9 +55,9 @@ export class TetDatepickerHeader {
         this.datepickerViewChanged.emit(view);
     };
     render() {
-        return (h("div", { key: 'eabd0fd41ab5d16da4c28f953b040a628c472825', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: '2f4f6ac6b1b1833d82dde21157ce6520c6aa8c7d', class: "header" }, this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))
-            : h("div", null), h("div", { key: 'a41aabaa5e06a7632874ea12e33ace557989594f', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '6765d3880b0fa9dd11582d4109104d75c8e735e9', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : h("div", null), h("div", { key: '2847bbb4cda20689ff7314c84ad2e1cd0db0eab4', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: 'd80fde6078109ad9eb9bac9a751bd3965d60925d', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-right" })))
             : h("div", null)));
     }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-month-view/tet-datepicker-month-view.js

@@ -159,7 +159,7 @@ export class TetDatepickerMonthView {
         };
     };
     render() {
-        return (h(Host, { key: '5006dcdcb3b2fb73458d2570ee3e5868e9746bad' }, h("div", { key: '397d63b6868d5f0bf83d78fe0281921b8eff9d3f', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'cb15ac94b2e1500655d0a98216d99b899da83b83', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
+        return (h(Host, { key: 'b3656c8199631d9c250d30a3810618488f6a4193' }, h("div", { key: '600d8c7b8c465afec62149ebc707212d0053741d', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'c80a3249c9c9bc613c54a4b6fe0c1b1557c0fcb4', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
     }
     static get is() { return "tet-datepicker-month-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-multi-year-view/tet-datepicker-multi-year-view.js

@@ -32,7 +32,7 @@ export class TetDatepickerMultiYearView {
         return { year: true, current: year === currentYear, selected: this.isSelectedYear(year) };
     };
     render() {
-        return (h("div", { key: '1015708cc1361091f9cd7e96c771c6d9f14053b3', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '1d0a9d61b12bea36428970f842ee568579120848', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
     }
     static get is() { return "tet-datepicker-multi-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-year-view/tet-datepicker-year-view.js

@@ -39,7 +39,7 @@ export class TetDatepickerYearView {
         };
     };
     render() {
-        return (h("div", { key: 'c6cebcc616dc7ad4ebe644c37aafd1379ee86867', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
+        return (h("div", { key: '798ce08920471d6f52d33da79c38bce7575ce16c', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
     }
     static get is() { return "tet-datepicker-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/tet-datepicker.js

@@ -100,10 +100,10 @@ export class TetDatepicker {
         return { overlay: true, closed: !this.isOpen, 'overlay-effect': this.overlayEffect };
     };
     render() {
-        return (h("div", { key: '86dabe383b21b6fda3d4ee7de596c1eb90dcca8f', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: 'd6ab55b8985e2a392f5f3ffbdce0cb53c5a48477', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '179b9fcceddfcfcdaac97b6def9d33d9746c3139', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: '9c9e0046ca5b1f287cc8464eb01d6a02c19596cf', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: '378525502835c38a657722116e9d87ce3b649815', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: '5ad09fb548685b6cd3942d84ed687f848cb03130', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: '92c942fc6361a7d28b77fc67a2176fb32b34c4a8', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: 'de9b3e6fb1cd6bb816bd40257c39d59a91e7f67e', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: 'cadad1987474fd59280983c19fb7c14816dfa990', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: '1dd2b9a88844de67d35824f75265b0b98c764bce', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: '5b28ac53a2cc050fbef71f79d6b86bdd0ad42650', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: '28ae9b16de7f4b1db5457a8ca4de26e43a64acd8', selectedDate: this.date, internalDate: this.internalDate }))));
     }
     static get is() { return "tet-datepicker"; }
     static get encapsulation() { return "shadow"; }