@tet/tet-components 1.3.90-testing → 1.3.91-staging

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

@@ -52,17 +52,6 @@ export class TetAddressSearch {
             this.manualAddressInput.emit();
             this.clearInputAction();
         };
-        /**
-         * Functionality that is executed when component is redesigned to automatically submit address
-         * if it was clicked, and select it if keyboard navigation was used
-         */
-        this.redesignedActionCallback = (event, option) => {
-            var _a;
-            this.searchByAddressKey((_a = option === null || option === void 0 ? void 0 : option.value) === null || _a === void 0 ? void 0 : _a.addressKey);
-            if (event instanceof PointerEvent) {
-                this.searchSubmitted.emit(option === null || option === void 0 ? void 0 : option.label);
-            }
-        };
         /**
          * Filters autocomplete options by the given keyword.
          *
@@ -78,7 +67,6 @@ export class TetAddressSearch {
                 return {
                     label: fullAddress,
                     value: { addressKey, postalCode },
-                    clickCallback: this.redesignedStyle ? this.redesignedActionCallback : undefined,
                 };
             });
             if (this.manualAddressTriggers && addressOptions.length > 0) {
@@ -145,11 +133,21 @@ export class TetAddressSearch {
          */
         this.handleAutocompleteOptionSelection = (event) => {
             // Convert back to the original API address interface to keep the data structures in sync.
-            this.addressSelected.emit({
-                addressKey: event.detail.value.addressKey,
-                fullAddress: event.detail.label,
-                postalCode: event.detail.value.postalCode
-            });
+            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.
@@ -194,7 +192,7 @@ export class TetAddressSearch {
             return;
         }
         if (newValue) {
-            await this.searchByAddressKey(newValue);
+            await this.searchByAddressKey();
         }
         else {
             await this.resetInputState();
@@ -229,7 +227,7 @@ export class TetAddressSearch {
             this.nativeInput.style.textOverflow = 'ellipsis';
         }
         if (this.addressKey) {
-            await this.searchByAddressKey(this.addressKey);
+            await this.searchByAddressKey();
         }
     }
     disconnectedCallback() {
@@ -251,10 +249,10 @@ export class TetAddressSearch {
     /**
      * Initiates the address search by the address key and sets the value of the input field.
      */
-    async searchByAddressKey(addressKey) {
+    async searchByAddressKey() {
         const keepInputDisabled = this.inputDisabled;
         this.inputDisabled = true;
-        const address = await searchAddressByKey(addressKey);
+        const address = await searchAddressByKey(this.addressKey);
         if (address && address.fullAddress) {
             this.addressSelected.emit(address);
             this.nativeInput.value = address.fullAddress;
@@ -281,20 +279,20 @@ export class TetAddressSearch {
         if (this.newFormsStyle) {
             inputClasses.push('address-search__input--forms');
         }
-        return (h(Host, { key: '291ffa21c3727c7fbb628ee5b7d5b8afc1fc152a', class: {
+        return (h(Host, { key: 'f20e86469ba824401c9434fe3e3044e9ae2ed4eb', class: {
                 "address-search": true,
                 "address-search--redesigned": this.redesignedStyle,
                 "keyboard-focus": this.focusVisible,
                 "active": this.elementActive,
                 [this.theme]: true,
-            } }, h("tet-autocomplete", { key: 'be4a6bb92174c4e57b3f6a6d0b882fef3f44a244', class: `address-search--redesigned__autocomplete
+            } }, h("tet-autocomplete", { key: '9f8256cd4c78fcfb32748aebeae77b01ebf9ea34', class: `address-search--redesigned__autocomplete
             ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}
           `, part: "autocomplete", optionsFilterAction: this.debounceAddressFilter, onOptionSelected: this.handleAutocompleteOptionSelection, noOptionsMessage: t('components-address-search-not-found-message'), noOptionsRenderFunction: this.manualAddressTriggers ? this.renderManualAddressInputNoOptionsMessage : undefined, clearCallback: this.autocompleteClearInputCallback, finishedLoading: this.finishedLoading, darkTheme: this.theme === 'dark' || this.theme === 'mint-original', newStyle: this.newStyle, ref: (el) => (this.autocomplete = el), optionsIcon: "location", redesignedStyle: this.redesignedStyle }, this.redesignedStyle ? (h("div", { class: "address-search--redesigned__autocomplete-content" }, h("div", { class: `address-search--redesigned__input-wrapper
                 ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}` }, h("tet-input", { class: `address-search__input address-search--redesigned__input
                     ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}`, part: "input", "input-class": inputClasses.join(' '), "input-placeholder": this.placeholder, "input-disabled": this.inputDisabled, label: this.label, accessibilityLabel: this.accessibilityLabel, iconLeft: this.newFormsStyle ? '' : 'tc-search-short', iconRight: this.inputIconRight, iconRightClickCallback: this.clearInputAction, ref: (el) => (this.inputComponent = el), error: this.isInputInvalid, autocomplete: "off" }, this.isLoading &&
             h("tet-spinner", { theme: this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : 'light', class: "address-search__spinner", size: "small" }))), h("div", { class: `address-search--redesigned__button-wrapper
                 ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}` }, h("tet-button", { class: "submit-address js-button-mobile button-icon", type: "primary", "accessibility-label": t('components-address-search-search'), iconName: "arrow-right", iconMode: true, onClick: this.handleSearchSubmit }), h("tet-button", { class: "submit-address button js-button", type: "primary", size: "medium", onClick: this.handleSearchSubmit }, this.searchButtonText)))) : (h("tet-input", { class: "address-search__input", part: "input", "input-class": inputClasses.join(' '), "input-placeholder": this.placeholder, "input-disabled": this.inputDisabled, label: this.label, accessibilityLabel: this.accessibilityLabel, iconLeft: this.newFormsStyle ? '' : 'search', iconRight: this.inputIconRight, iconRightClickCallback: this.clearInputAction, theme: this.theme, ref: (el) => (this.inputComponent = el), error: this.isInputInvalid, autocomplete: "off" }, this.isLoading &&
-            h("tet-spinner", { theme: this.theme === 'dark' ? 'dark' : 'light', class: "address-search__spinner", size: "small" })))), this.redesignedStyle && (h("div", { key: '6b356fc067dc1a94f8863ecc3c0fadc004263e51', class: "address-search--redesigned__close-button" }, h("tet-button", { key: '1eee81b47c0282fddf32a7deddd8ce1da9baf8b5', type: "link", iconName: "close", theme: "dark" }, this.closeButtonText)))));
+            h("tet-spinner", { theme: this.theme === 'dark' ? 'dark' : 'light', class: "address-search__spinner", size: "small" })))), this.redesignedStyle && (h("div", { key: '1cf5a09db87ede666aa5bf95da8fabf6dffe7f2e', class: "address-search--redesigned__close-button" }, h("tet-button", { key: 'fb67ce64ff0369a15a0e798c0f4d93c8ff5c42b1', type: "link", iconName: "close", theme: "dark" }, this.closeButtonText)))));
     }
     static get is() { return "tet-address-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class TetAutocomplete {
             this.updateFilteredOptions(filterValue);
         }, this.typingDebounceTime);
         this.onOptionSelect = async (event, option) => {
-            await this.selectOption(Object.assign(Object.assign({}, option), { userInteraction: true }));
+            await this.selectOption(Object.assign(Object.assign({}, option), { userInteraction: true, _originalEvent: event }));
             event.stopPropagation();
         };
         /**
@@ -378,10 +378,10 @@ export class TetAutocomplete {
         }
     }
     render() {
-        return (h(Host, { key: '32cf8dabcce07274ae091b07fcc4baaf6f5d34cd', class: {
+        return (h(Host, { key: 'e8508d459623e09260709642020a0b4bd94b720a', class: {
                 'autocomplete': true,
                 'dark': this.darkTheme,
-            } }, h("slot", { key: '08720835a9b06a1196d11e5734a1d1a8a43fa192' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
+            } }, h("slot", { key: 'c258024a02c50334eb0d6d3bb2008d2614ff551a' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
     }
     static get is() { return "tet-autocomplete"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class TetAutocompleteDropdown {
         return this.inputValue.length ? IconName.Close : IconName.ChevronDown;
     }
     render() {
-        return (h(Host, { key: '61d6b74c7e0ed7a3c5d822a63ef37e93e3a30143' }, h("tet-autocomplete", { key: '3fa526eb25d2c1e41cdd50a31d6f0f0586e501c5', 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: '33804b7e9df8f031c4229869c78beaee69e31bd2', 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: 'c24518ff6efc594fb75f5a1064ea0f64d9784a3c', class: "error-message" }, this.errorMessage)));
+        return (h(Host, { key: '575c8b59ff73c2b0e818d7581b619e0d5c6f41fb' }, h("tet-autocomplete", { key: '90c27880b7389802c0ab08011fd3a5c41e2a31a4', 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: '326e50e2efa955ef0b0c006f6de06149986433d4', 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: '220e8567bce426e238e3b424b4719990230a3a55', class: "error-message" }, this.errorMessage)));
     }
     static get is() { return "tet-autocomplete-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-business-card/tet-business-card.js

@@ -53,14 +53,14 @@ export class TetBusinessCard {
     }
     render() {
         const { mainTitle, subTitle, infoText, type, size, theme } = this;
-        return (h("div", { key: '28faec233cce59c4075945abe8045f5961d4352e', ref: divRef => {
+        return (h("div", { key: '5cb86233a4c1f1e64d8cdc7a3254069f5cfd87a1', ref: divRef => {
                 this.rootRef = divRef;
             }, class: {
                 'tet-business-card': true,
                 [`tet-business-card__type--${type}`]: true,
                 [`tet-business-card__size--${size}`]: true,
                 [`theme-${theme}`]: true,
-            } }, h("div", { key: '40e474ddc3ad398a72f66482616a7f8ca452c9dd', class: "tet-business-card__body" }, h("div", { key: 'd39e096fabdaa48c7df4a7f76e9d16b836fd640d', class: "tet-business-card__content" }, h("div", { key: '8286238455561e8b8721832d612d2e66526597e6', class: "tet-business-card__title" }, h("slot", { key: 'be12ed3e35acd4750d42475a891c5285e4cb41c1', name: "title" }, h("h3", { key: '0d156530ff7409a348cc2ba32ee6baa10fca717e' }, mainTitle))), h("slot", { key: '5452fe80a1bc5a825b5d15ae13ae1379f571cafc', name: "subtitle" }, subTitle && (h("div", { key: '06935ac91b3e5b8a710d0c3eb741066efebc2e47', class: { 'tet-business-card__subtitle': true, 'tet-business-card__subtitle--large': !infoText } }, subTitle)))), h("slot", { key: '79c89afd01e9bb6e12f2427c0f3f0a0e58560ce3', name: "button" })), h("slot", { key: '5e796d1dfc9bdf0835ce481ccf48073597a3aee1', name: "infotext" }, infoText && h("div", { key: '35ac031e9a4b22c67befb4b3e7b9254d2119077d', class: "tet-business-card__infotext" }, infoText))));
+            } }, h("div", { key: '4cc201bcede8fe220a02916086aa138bfab92e3f', class: "tet-business-card__body" }, h("div", { key: '970e17856d056bb92fad217884455b2c43cb86ed', class: "tet-business-card__content" }, h("div", { key: '5172584354442c0d727142e2b614d154234c73c6', class: "tet-business-card__title" }, h("slot", { key: '4b8eef0883c353a50cae9370029121a79995f06a', name: "title" }, h("h3", { key: '3740fee1c9a6378329328b720580251ed9a07c47' }, mainTitle))), h("slot", { key: 'ebaf8e619450e2ba334e259925b84626f406ffe7', name: "subtitle" }, subTitle && (h("div", { key: '25496a821259fb1048c2f33e11972c84a2022dc0', class: { 'tet-business-card__subtitle': true, 'tet-business-card__subtitle--large': !infoText } }, subTitle)))), h("slot", { key: '3307c6fbcd951a786f81b0f5af60e957ac2a4f0c', name: "button" })), h("slot", { key: '8855cbc6145df0136f0fe1ada8f6d88077201219', name: "infotext" }, infoText && h("div", { key: 'e149f67f68d6295d403fd4675d1d9b077f0d86ab', class: "tet-business-card__infotext" }, infoText))));
     }
     static get is() { return "tet-business-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-business-compare-card/tet-business-compare-card.js

@@ -28,10 +28,10 @@ export class TetBusinessCompareCard {
     }
     render() {
         const { mainTitle, bulletPoints, theme, pricePrefix, price, currency } = this;
-        return (h("div", { key: 'd8d3a6c52faed1547807ced6a914a4ee504e4daa', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: '9cc6bb6dbf7a03d255e52907354b1fd623d3f645', class: "tet-business-compare-card__body" }, h("div", { key: '440ba081486bf6a95e0252497dffd0a38bb46087', class: "tet-business-compare-card__title" }, h("slot", { key: 'ff9fbaee45b2d3523bf7e16c93ca6f57aefe2f65', name: "title" }, h("h3", { key: '9c836f70c1e5736baad15116afba7d6629597ebe' }, mainTitle))), h("div", { key: 'e88610818f9db7f701b7772b1f61e889eff3d88b', class: "tet-business-compare-card__content" }, h("slot", { key: 'd1cd16a6c66c133bc2147f1891fffadb36992402', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '84cb34e3fc046a7a65c9c22934653284e61f1d76', class: "bullet-points", theme: this.theme === 'dark' ? 'dark' : 'light' }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: 'd83a165cf13fdafb97145dd482345218577cfc7f', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: 'eace12a700f51515dea2775a4b9b6a6665735cd6', class: "tet-business-compare-card__price" }, h("span", { key: '4dcbb8c8c2bba27688721afa94a8f0b21229facc', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: '0f7c0cf8c5445f70cedd41d6751b539aed451c77', class: "tet-business-compare-card__price" }, price), h("div", { key: '794e9a62dc5f5a97ff56aa117332d72e606df69d', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: '95eb30bd8a5b915e6560617f1afd1e5fc5e2fd5f', class: {
+        return (h("div", { key: '5cf7c27be14b92dde785b9e66f3edc75eec64b04', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: '749ac8325a11b218fdc998af80a1e06287e7b29c', class: "tet-business-compare-card__body" }, h("div", { key: '6a6186b50cf44eea4f4f07cc70ab98ce11f0f4ec', class: "tet-business-compare-card__title" }, h("slot", { key: '232ebb2bde3b8f88e27e9bb5037e056df48b22aa', name: "title" }, h("h3", { key: '009c40856d9295f7bb7ccd8dc0ce97a164486e6b' }, mainTitle))), h("div", { key: '477ea288b5a362758b74001a5d482645c008c708', class: "tet-business-compare-card__content" }, h("slot", { key: 'c1901af9365e113378db89c27923a7775b995163', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '2f5806b3c0af98bce159d977f4be5744fc29cbaa', class: "bullet-points", theme: this.theme === 'dark' ? 'dark' : 'light' }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: 'f05ce0dc75895096faad7ee3bbd641e20f598203', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: '2df091d3959d0e16c09f4755af37b0b671a770b2', class: "tet-business-compare-card__price" }, h("span", { key: '5d614b748f71fb1e29c13f08689db40c14ed43bd', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: 'e9a5cf352b4505b4c6ac125fa0b2106f39202db1', class: "tet-business-compare-card__price" }, price), h("div", { key: '8c7dd7317125a4165c52aca6d6772393b6cac768', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: '4b4f3bd6d53642d866d23496ce88158e090ad2b0', class: {
                 'tet-business-compare-card__footer': true,
                 'tet-business-compare-card__footer--show': this.hasContentInFooter,
-            } }, h("slot", { key: '4fa7c8453bb73f5aa7a927e2791b13f6090fe7ad', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: 'f8d13e30560a2c53cedf2890c8aa9326bdd16c8a', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));
+            } }, h("slot", { key: 'c9499d825848aa623bdb4b08c3f237219e0e194d', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: 'eae6fb4e431f0c1dc73fb817fd2bcbeba80cdece', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));
     }
     static get is() { return "tet-business-compare-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-card-list/tet-card-list.js

@@ -646,19 +646,19 @@ export class TetCardList {
         this.dimensions.element.width = elementRect.width;
     }
     render() {
-        return (h(Host, { key: 'a37659927c73cbed1a822f4820f93264f7418c0c' }, h("div", { key: '18a78c6bea76843bbb3205d780088dcdfedc3d65', class: {
+        return (h(Host, { key: 'ba1eec9601d03fbc4577c62d8c6038c2d4828360' }, h("div", { key: '14d8df437a71eaba5fb86939ea4ed26e8135fede', class: {
                 'tet-card-list__container': true,
                 'tet-card-list--no-scroll': this.disableScroll,
                 [this.theme]: true,
-            }, part: "card-list-container" }, h("div", { key: '41d9611df428e1acf887e18d18bb0e74c266d27d', class: "tet-card-list__scroll-container" }, h("div", { key: 'f7118998798402c40df4d75e0fd907bec12b66c4', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: '5a022794ed879bf94157e77985fedf24fdbc70a0' }))), h("tet-button", { key: '5ea21737f2c05511bca92be2a5e4c3839c60b28c', theme: this.theme, iconMode: true, class: {
+            }, part: "card-list-container" }, h("div", { key: 'e3d642e7a10591621917e7cf231773795d3dfa4d', class: "tet-card-list__scroll-container" }, h("div", { key: '376c7f750c3f63a2b9f7e1331d103b45254547c6', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: 'f60bf5346854d2b083dd9d3eeb4507b000f5b743' }))), h("tet-button", { key: 'aa8f7fb3786b60b1057ec5da2975b474af52ed4d', theme: this.theme, iconMode: true, class: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--left': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.left,
-            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleLeftControl, onKeyUp: this.handleLeftControlKeyUp }, h("tet-icon", { key: 'df14f0040d1924e9c003ec3e7e2a75ad087a83ca', name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon" })), h("tet-button", { key: '6967a738582c95efa21a6f2bd35b66fea9b70f2a', theme: this.theme, iconMode: true, class: {
+            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleLeftControl, onKeyUp: this.handleLeftControlKeyUp }, h("tet-icon", { key: '399cb33fbbdd4aaecc4f68fa7d474659f67b31aa', name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon" })), h("tet-button", { key: '7d69bde58b12453ca3a86055e8d11c30c5750e96', theme: this.theme, iconMode: true, class: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--right': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.right,
-            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, onKeyUp: this.handleRightControlKeyUp }, h("tet-icon", { key: 'cf1009c29f76c9a70719656b40de39b205236b55', name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: 'bd348b095be531deec965fb621269fe90cebfd8e', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: 'd5361269a2d18273d6aefd3a8f1ecb75f79e617f', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
+            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, onKeyUp: this.handleRightControlKeyUp }, h("tet-icon", { key: '9bf045c8c76a5edec871ae6b09e36834fc98ac38', name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: 'fde82d4330368dc82e40fbdfec2afa051554311b', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: '4c353a5543738cd2fb6810bf1a54b77e51caea50', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
     }
     static get is() { return "tet-card-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-compare-cards/tet-compare-cards.js

@@ -105,7 +105,7 @@ export class TetCompareCards {
         });
     }
     render() {
-        return (h(Host, { key: 'e7c6f33748bc103ba2d31d9ea10f71a4b0b9b749', class: {
+        return (h(Host, { key: 'eb922234344d41a7249a7f4ae52d5bd7e3273c47', class: {
                 'must-initialize': true,
                 'initialized': this.initializedState
             } }, this.showLoader ? (this.renderLoader()) : (h("div", { class: {

package/dist/collection/components/advanced/cards/tet-compare-cards-tab/tet-compare-cards-tab.js

@@ -189,7 +189,7 @@ export class TetTabCompareCards {
         return (h("div", { class: "tet-compare-cards-tab__content" }, h("tet-compare-cards", { theme: this.theme, "dark-mode": this.darkMode, "is-netflix-card": this.isNetflixCard, layout: this.layout, "force-column": this.forceColumn, "vat-text": vatText !== null && vatText !== void 0 ? vatText : false, "card-script": cardScript !== null && cardScript !== void 0 ? cardScript : false, data: cardsWithAddedSACData, newUrlGeneratorStructure: this.newUrlGeneratorStructure })));
     }
     render() {
-        return (h(Host, { key: '6440f18b850154ce52417307a14d7b961f9f1e25' }, h("div", { key: 'c268744e5ec91a57d0e9092105dacb18cfbf2cab', class: "tet-compare-cards-tab-wrapper" }, this.withProductFilters ? this.renderProductFilters() : '', this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: '9b3a2f7fc6e48d4585f2cc2ea08edaf3702255eb', class: {
+        return (h(Host, { key: 'a2eaa17a14542eaf4ecbce243864ec8421f9c12c' }, h("div", { key: 'a707dedd4a49d7f3c14c861bee03993c619a5b57', class: "tet-compare-cards-tab-wrapper" }, this.withProductFilters ? this.renderProductFilters() : '', this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: 'ef1a0476463b7110cf3296c6696db28874023744', class: {
                 'tet-compare-cards-tab__cards': true,
                 'hidden': this.showLoader
             } }, this.productDataLoaded ? this.renderContent(this.data, 1) : ''))));

package/dist/collection/components/advanced/cards/tet-dynamic-card/tet-dynamic-card.css

@@ -0,0 +1,332 @@
+:host {
+  /**
+  * @prop --image-type: The type of image.
+  * @prop --image-background-color: The background color of the image.
+  */
+  --image-type: cover;
+  --image-background-color: var(--tc-background-white-black);
+  --card-width-mobile: 17.5rem;
+  --card-height-mobile: 28.375rem;
+  --card-width-tablet: 21.375rem;
+  --card-height-tablet: 35.5rem;
+  --card-width-desktop: 25.625rem;
+  --card-height-desktop: 39.625rem;
+  --option-card-bg: var(--tc-background-white-black);
+  --option-card-text: var(--tc-text-primary);
+  --option-card-border: var(--tc-border-quaternary);
+  display: block;
+  font-family: var(--tet-font-family-primary);
+}
+
+.card {
+  -webkit-user-drag: none;
+  user-select: none;
+  cursor: pointer;
+  background: var(--tc-background-white-black);
+  border-radius: 1rem;
+  border: 0.0625rem solid var(--tc-border-quaternary);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin: 0 auto;
+  min-width: var(--card-width-mobile);
+  width: var(--card-width-mobile);
+  height: var(--card-height-mobile);
+  transition: box-shadow 0.15s ease;
+}
+.card.size-S {
+  width: var(--card-width-mobile);
+  height: var(--card-height-mobile);
+}
+.card.size-XL, .card.size-L, .card.size-M {
+  width: 100%;
+}
+.card:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+}
+.card:hover {
+  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1), 0 1.5px 6px 0 rgba(0, 0, 0, 0.08);
+}
+.card:hover ::slotted(img) {
+  transform: scale(1.06);
+}
+.card:active {
+  box-shadow: 0 0 1px 0 rgba(12, 12, 14, 0.08), 0 1px 3px 0 rgba(12, 12, 14, 0.12);
+}
+.card:active ::slotted(img) {
+  transform: scale(1.01);
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.image {
+  -webkit-user-drag: none;
+  user-select: none;
+  flex-shrink: 0;
+  width: 100%;
+  height: 16.125rem;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--image-background-color);
+}
+.image ::slotted(img) {
+  transition: transform 0.3s ease;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--image-type);
+  display: block;
+}
+
+.price {
+  position: absolute;
+  bottom: 0.75rem;
+  right: 0.75rem;
+  z-index: 1;
+}
+
+.tags-container {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  z-index: 1;
+}
+
+.content {
+  height: auto;
+  padding: 0 1rem;
+  text-align: center;
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-family-fallback);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--tc-text-primary);
+  line-height: 1.5rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  max-height: 3rem;
+}
+
+.subtitle {
+  color: var(--tc-text-primary);
+  text-align: center;
+  font-family: var(--font-family-content);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: -0.003125rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  max-height: 2.5rem;
+}
+
+.button {
+  margin-top: auto;
+  margin-bottom: 1.5rem;
+  width: fit-content;
+  text-wrap: nowrap;
+}
+
+.tags-container {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.tag {
+  border: 0.0625px solid var(--tc-border-tertiary);
+  padding: 0.1875rem 0.3125rem;
+  border-radius: 0.375rem;
+  background: var(--tc-layer-primary);
+  color: var(--tc-text-primary);
+  font-family: var(--font-family-content);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1rem;
+}
+.tag.colored--white {
+  background: var(--tc-layer-primary);
+  color: var(--tc-text-primary);
+  border: 0.0625px solid var(--tc-border-tertiary);
+}
+.tag.colored--black {
+  color: var(--tc-text-primary-dark);
+  background: var(--tc-layer-primary-dark);
+  border: 0.0625px solid var(--tc-border-primary);
+}
+.tag.colored--yellow {
+  background: var(--tc-yellow-20);
+  color: var(--tc-text-primary);
+  border: 0.0625px solid var(--tc-border-tertiary);
+}
+
+.theme-dark {
+  background: var(--tc-layer-primary-dark);
+  border: 0.0625rem solid var(--tc-border-quaternary-dark);
+}
+.theme-dark .title {
+  color: var(--tc-text-primary-dark);
+}
+.theme-dark .subtitle {
+  color: var(--tc-text-primary-dark);
+}
+.theme-dark .tag:not(.colored) {
+  color: var(--tc-text-primary-dark);
+  background: var(--tc-layer-primary-dark);
+  border: 0.0625px solid var(--tc-border-primary);
+}
+
+@media all and (min-width: 48rem) {
+  .card {
+    width: var(--card-width-tablet);
+    height: var(--card-height-tablet);
+  }
+  .card.size-S {
+    width: var(--card-width-tablet);
+    height: var(--card-height-tablet);
+  }
+  .card.size-M {
+    width: 100%;
+  }
+  .card.size-M .image {
+    width: 100%;
+    height: 24.25rem;
+  }
+  .card.size-M.carousel-true {
+    width: 44rem;
+  }
+  .card.size-XL, .card.size-L {
+    width: 100%;
+    flex-direction: row;
+    gap: 0;
+  }
+  .card.size-XL .image, .card.size-L .image {
+    width: 60%;
+    height: 100%;
+  }
+  .card.size-XL .button, .card.size-L .button {
+    margin-top: 0;
+  }
+  .card.size-XL.position-right, .card.size-L.position-right {
+    flex-direction: row-reverse;
+  }
+  .card.size-XL.carousel-true, .card.size-L.carousel-true {
+    width: 44rem;
+  }
+  .image {
+    width: var(--card-width-tablet);
+    height: var(--card-width-tablet);
+  }
+  .title {
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+    max-height: 3.5rem;
+  }
+  .tag {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    letter-spacing: -0.003125rem;
+  }
+}
+@media all and (min-width: 90rem) {
+  .card.size-M {
+    width: 100%;
+  }
+  .card.size-M.carousel-true {
+    width: 39.375rem;
+  }
+  .card.size-L {
+    width: 100%;
+    flex-direction: row;
+    gap: 0;
+  }
+  .card.size-L .image {
+    width: 62%;
+    height: 100%;
+  }
+  .card.size-L .button {
+    margin-top: 0;
+  }
+  .card.size-L.position-right {
+    flex-direction: row-reverse;
+  }
+  .card.size-L.carousel-true {
+    width: 57.25rem;
+  }
+  .card.size-XL .image {
+    width: 64%;
+  }
+  .card.size-XL.carousel-true {
+    width: 80.25rem;
+  }
+}
+@media all and (min-width: 120rem) {
+  .card {
+    width: var(--card-width-desktop);
+    height: var(--card-height-desktop);
+  }
+  .card.size-S {
+    width: var(--card-width-desktop);
+    height: var(--card-height-desktop);
+  }
+  .card.size-L.carousel-true {
+    width: 83.125rem;
+  }
+  .card.size-XL .image {
+    width: 72%;
+  }
+  .card.size-XL.carousel-true {
+    width: 110.25rem;
+  }
+  .image {
+    width: var(--card-width-desktop);
+    height: var(--card-width-desktop);
+  }
+  .title {
+    font-size: 1.75rem;
+    line-height: 2rem;
+    max-height: 4rem;
+  }
+  .subtitle {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: -0.00625rem;
+    max-height: 3rem;
+  }
+}