@tet/tet-components 1.3.68-testing → 1.3.69-staging

package/dist/collection/components/advanced/address/tet-address-offers-filters-products/tet-address-offers-filters-products.js

@@ -0,0 +1,314 @@
+import { forceUpdate, h, Host } from "@stencil/core";
+import { processTranslations, t } from "../../../../services/translations/index";
+import { AddressOffersProductsFilters } from "./address-offers-products-filters";
+import { CompareCardsTabProductsFilters } from "../../cards/tet-compare-cards-tab/compare-cards-tab-products-filters";
+export class TetAddressOffersFiltersProducts {
+    constructor() {
+        this.clearAllFilters = () => {
+            if (this.filtersHelper) {
+                this.filtersHelper.clearFilters(this.category);
+            }
+            if (this.compareCardsFiltersHelper) {
+                this.compareCardsFiltersHelper.clearFilters();
+            }
+        };
+        this.renderClearFilterBtn = () => {
+            if (!this.clearFilterButton || this.availableTvProducts.length === 0) {
+                return null;
+            }
+            return (h("button", { class: { 'clear-button': true, [`theme-${this.theme}`]: true }, onClick: () => this.clearAllFilters() }, h("tet-icon", { name: "tc-reload", part: "icon-selected" }), t('components-address-offers-filters-clear-btn')));
+        };
+        this.renderLoader = () => {
+            return (h("div", { class: "loader" }, Array.from({ length: 4 }).map(() => (h("tet-placeholder", { height: "2rem", width: "8rem", class: "tag-placeholder" })))));
+        };
+        this.language = 'lv';
+        this.clearFilterButton = false;
+        this.theme = 'light';
+        this.catalog = undefined;
+        this.productCodes = undefined;
+        this.category = undefined;
+        this.subcategoryId = undefined;
+        this.availableTvProducts = [];
+        this.activeTvFilters = [];
+    }
+    /**
+     * Change translations on language change
+     * @param {Language} language
+     */
+    async onLanguageChange(language) {
+        processTranslations('tet-components', language).then(() => forceUpdate(this));
+    }
+    onDataChange() {
+        this.initFilters();
+    }
+    onProductCodesChanged() {
+        this.initFilters();
+    }
+    /**
+     * Lifecycle method
+     */
+    componentWillLoad() {
+        processTranslations('tet-components', this.language).then(() => forceUpdate(this));
+        this.initFilters();
+    }
+    /**
+     * Determines which helper to use and initializes filters.
+     */
+    initFilters() {
+        if (this.catalog && this.category) {
+            this.initAdrressOffersFilters();
+        }
+        else if (this.productCodes) {
+            this.initCompareCardFilters();
+        }
+    }
+    initAdrressOffersFilters() {
+        this.filtersHelper = new AddressOffersProductsFilters((filters, activeFilterIds, filteredProductIds) => {
+            this.availableTvProducts = filters.map(tag => (Object.assign(Object.assign({}, tag), { clickAction: () => this.toggleFilter(tag.id) })));
+            this.activeTvFilters = activeFilterIds;
+            this.activeFiltersChanged.emit(activeFilterIds);
+            this.filteredProductsChanged.emit({
+                subcategoryId: this.subcategoryId,
+                filteredProductIds,
+            });
+        });
+        this.filtersHelper.initialize(this.catalog, this.category);
+    }
+    initCompareCardFilters() {
+        this.compareCardsFiltersHelper = new CompareCardsTabProductsFilters((filters, activeFilterIds, filteredProductIds) => {
+            this.availableTvProducts = filters.map(tag => (Object.assign(Object.assign({}, tag), { clickAction: () => this.toggleCompareCardsFilter(tag.id) })));
+            this.activeTvFilters = activeFilterIds;
+            this.activeFiltersChanged.emit(activeFilterIds);
+            this.filteredProductsChanged.emit({
+                subcategoryId: this.subcategoryId,
+                filteredProductIds,
+            });
+        });
+        this.compareCardsFiltersHelper.initialize(this.productCodes);
+    }
+    toggleFilter(filterId) {
+        const filter = this.filtersHelper.getAvailableFilters().find(tag => tag.id === filterId);
+        if (filter && !filter.disabled) {
+            this.filtersHelper.filterClickAction(filter, this.category);
+        }
+    }
+    toggleCompareCardsFilter(filterId) {
+        const filter = this.compareCardsFiltersHelper.getAvailableFilters().find(tag => tag.id === filterId);
+        if (filter && !filter.disabled) {
+            this.compareCardsFiltersHelper.filterClickAction(filter);
+        }
+    }
+    render() {
+        return (h(Host, { key: '1572f9f51a53dedd278603fcd3fc9c824d089ef5' }, this.availableTvProducts.length === 0 && this.renderLoader(), h("tet-tag-group", { key: 'c2cab43e37381789d36cb1926b4aa586d9e38c2d', tags: this.availableTvProducts, language: this.language, theme: this.theme }), this.renderClearFilterBtn()));
+    }
+    static get is() { return "tet-address-offers-filters-products"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-address-offers-filters-products.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-address-offers-filters-products.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Language",
+                    "resolved": "\"en\" | \"lv\" | \"ru\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "@services/translations",
+                            "id": "src/services/translations/index.ts::Language"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The translation language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'lv'"
+            },
+            "clearFilterButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if clear filter button should appear"
+                },
+                "attribute": "clear-filter-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the clear Filters button and tags."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "catalog": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvailableServicesModel",
+                    "resolved": "AvailableServicesModel",
+                    "references": {
+                        "AvailableServicesModel": {
+                            "location": "import",
+                            "path": "../../../../services/api/services/catalog/service-availability-services",
+                            "id": "src/services/api/services/catalog/service-availability-services.ts::AvailableServicesModel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The catalog data from the API."
+                }
+            },
+            "productCodes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CompareCardProductCodesProp",
+                    "resolved": "ProductComparisonInterface[] | { products: { [key: string]: { productCode: string; }; }; productTags: any[]; }",
+                    "references": {
+                        "CompareCardProductCodesProp": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/address/tet-address-offers-filters-products/tet-address-offers-filters-products.tsx",
+                            "id": "src/components/advanced/address/tet-address-offers-filters-products/tet-address-offers-filters-products.tsx::CompareCardProductCodesProp"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The prop that contains products."
+                }
+            },
+            "category": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StructureModel",
+                    "resolved": "StructureModel",
+                    "references": {
+                        "StructureModel": {
+                            "location": "import",
+                            "path": "../../../../services/api/services/catalog/service-availability-services",
+                            "id": "src/services/api/services/catalog/service-availability-services.ts::StructureModel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The category to show filters for."
+                }
+            },
+            "subcategoryId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subcategory ID to identify the filtered products."
+                },
+                "attribute": "subcategory-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "availableTvProducts": {},
+            "activeTvFilters": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "activeFiltersChanged",
+                "name": "activeFiltersChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when active filters change, sending array of active filter IDs."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "filteredProductsChanged",
+                "name": "filteredProductsChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when filtered products change, sending subcategory ID and array of filtered product IDs."
+                },
+                "complexType": {
+                    "original": "{ subcategoryId: string; filteredProductIds: string[] }",
+                    "resolved": "{ subcategoryId: string; filteredProductIds: string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "onLanguageChange"
+            }, {
+                "propName": "catalog",
+                "methodName": "onDataChange"
+            }, {
+                "propName": "category",
+                "methodName": "onDataChange"
+            }, {
+                "propName": "productCodes",
+                "methodName": "onProductCodesChanged"
+            }];
+    }
+}

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

@@ -281,20 +281,20 @@ export class TetAddressSearch {
         if (this.newFormsStyle) {
             inputClasses.push('address-search__input--forms');
         }
-        return (h(Host, { key: '825bd78e49c58337466a6d735b58bbce2f93e3e8', class: {
+        return (h(Host, { key: '291ffa21c3727c7fbb628ee5b7d5b8afc1fc152a', class: {
                 "address-search": true,
                 "address-search--redesigned": this.redesignedStyle,
                 "keyboard-focus": this.focusVisible,
                 "active": this.elementActive,
                 [this.theme]: true,
-            } }, h("tet-autocomplete", { key: 'f57c061683254fd285e151c15951a85535cfb8f2', class: `address-search--redesigned__autocomplete
+            } }, h("tet-autocomplete", { key: 'be4a6bb92174c4e57b3f6a6d0b882fef3f44a244', 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: 'e16e4fb65a0123459e4bdbdeb364aa01f5f8b52b', class: "address-search--redesigned__close-button" }, h("tet-button", { key: '3a0fc57d239b98846c33dba9466b1ca43106fc8f', 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: '6b356fc067dc1a94f8863ecc3c0fadc004263e51', class: "address-search--redesigned__close-button" }, h("tet-button", { key: '1eee81b47c0282fddf32a7deddd8ce1da9baf8b5', 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-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: '26d9895642efe283b331bff8fdfc108b12e3d74c' }, h("tet-autocomplete", { key: '99bee4f0b87a43d21320c39101d2aa3d1cf4a90e', 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: '583090a2f9e715606e05dba01dcf57828c2d0395', 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: '0c8ee886ae658c5fbaeee15e662758b4697cd9d2', class: "error-message" }, this.errorMessage)));
+        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)));
     }
     static get is() { return "tet-autocomplete-dropdown"; }
     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: 'cf32a3fd7ed74d75e7b4fc5dcaa51993e1927236', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: 'f357097d8dd152dcc4fce98d921e984ecfa0fbaf', class: "tet-business-compare-card__body" }, h("div", { key: 'b9b8e301ab08b550aa0e55a6b6f3f32906e783b4', class: "tet-business-compare-card__title" }, h("slot", { key: '4d7d8d10fb08514ad0dc743eab034bddb56e50d6', name: "title" }, h("h3", { key: 'e4a397409521ee5f03fc30895e86a89c1a1eec8f' }, mainTitle))), h("div", { key: '3af68a4599478f20d4463ccfa70168a1005d36d1', class: "tet-business-compare-card__content" }, h("slot", { key: '54986938110ad7fffe20078157af86464da61d7d', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '5c04461dd8ea8eeda912377e3643d12008944ee4', class: "bullet-points", theme: this.theme === 'dark' ? 'dark' : 'light' }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: '3887263480af0312802c568583235c501675defd', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: 'e633e4f1b5a49e5b970358a010db057fdad53172', class: "tet-business-compare-card__price" }, h("span", { key: '5aa23336c7edd881fc1a6970020deacb1ad567b8', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: '3264dbe2e51891166a0d5611bc62b888f43cd493', class: "tet-business-compare-card__price" }, price), h("div", { key: '754c6bbd3dfb3245059c0f61893cdfd335199d26', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: '777464cfe291b8667931093b3239fbee6051f4dd', class: {
+        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: {
                 'tet-business-compare-card__footer': true,
                 'tet-business-compare-card__footer--show': this.hasContentInFooter,
-            } }, h("slot", { key: '2bf75ccc957f4d4fd4778e11ca0b6681730d0957', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: '1155778c60ecfc67c685abbd93ebb94209aa40d0', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));
+            } }, 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" }))));
     }
     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: 'a29e3674f3a70dc958884f5e55068b0ee1e9e9f1' }, h("div", { key: 'b0dbcd458dfad675fe2b84374c6a42593dc60f0f', class: {
+        return (h(Host, { key: 'a37659927c73cbed1a822f4820f93264f7418c0c' }, h("div", { key: '18a78c6bea76843bbb3205d780088dcdfedc3d65', class: {
                 'tet-card-list__container': true,
                 'tet-card-list--no-scroll': this.disableScroll,
                 [this.theme]: true,
-            }, part: "card-list-container" }, h("div", { key: 'da2e0847aa7b99b98a38338ee1d2c49a5383e932', class: "tet-card-list__scroll-container" }, h("div", { key: 'cbf9de8dd119e43c011990acb16827294d7a0964', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: 'b790e0dcbf209914de05fafc7276d8b0defe5922' }))), h("tet-button", { key: '52ab640145806053a8e3d44336f7e0a3b6744376', theme: this.theme, iconMode: true, class: {
+            }, 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: {
                 '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: '79b3ab0a0ff652d77956e7a36f6c131f7827117d', name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon" })), h("tet-button", { key: '0c20bf2053e6efd912b7e8b8c9b7feab6a73648e', theme: this.theme, iconMode: true, class: {
+            }, 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: {
                 '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: '62f0198d2c8fc74fc0332a7c2190564ab5af434a', name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: 'b6deef611e47e53daaddb807afef74b1a43c18bf', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: 'fbe9c8909514121c295ef2d894c695e058c363fa', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
+            }, 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) })))));
     }
     static get is() { return "tet-card-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,6 +71,9 @@ describe('tet-compare-card', () => {
                     </div>
                   </div>
                 </div>
+                <div class="upsell-block">
+                  <slot name="upsell-block-slot" />
+                </div>
               </div>
               <div class="divided-information-wrapper js-resize-divide-slot">
                 <slot name="divided-information-slot"></slot>
@@ -199,6 +202,9 @@ describe('tet-compare-card', () => {
                     </div>
                   </div>
                 </div>
+                <div class="upsell-block">
+                  <slot name="upsell-block-slot" />
+                </div>
               </div>
               <div class="divided-information-wrapper js-resize-divide-slot">
                 <slot name="divided-information-slot"></slot>

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

@@ -7626,6 +7626,9 @@
 .grey.dark {
   background: radial-gradient(110.2% 141.42% at 0% 0%, var(--tc-grey-20-dark, #26292C) 0%, var(--tc-grey-10-dark, #18191B) 100%);
 }
+.grey.dark .best-choice-title {
+  color: var(--tc-grey-minus-10-dark);
+}
 .grey.card.best-choice {
   --compare-card-border-color: var(--tet-compare-card-best-choice-border);
 }
@@ -8031,6 +8034,11 @@
 .best-choice-title.active {
   visibility: visible;
 }
+.best-choice-title.floating {
+  top: -1.125rem;
+  border-radius: 1rem;
+  padding: 0.375rem 1.25rem;
+}
 
 .image-wrapper {
   display: flex;

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

@@ -145,6 +145,7 @@ export class TetCompareCard {
         this.withBorder = false;
         this.priceShownVertically = false;
         this.bestChoiceTextPosition = 'center';
+        this.bestChoiceTextFloating = false;
         this.secondaryLinkPosition = 'center';
         this.showBulletPoints = true;
         this.showSubTitle = true;
@@ -250,14 +251,15 @@ export class TetCompareCard {
             }, style: !this.darkMode ? { backgroundColor: this.cardBackgroundColor } : {} }, h("div", { class: {
                 'best-choice-title': true,
                 'active': this.bestChoice,
-                [`${this.bestChoiceTextPosition}`]: true
+                [`${this.bestChoiceTextPosition}`]: true,
+                'floating': this.bestChoiceTextFloating
             } }, this.options.bestChoiceText), h("div", { class: { 'image-wrapper': true, [`${this.cardHeader}`]: true } }, this.cardHeader === 'image' ? h("slot", { name: "image-slot" }) : '', this.cardHeader === 'logo' ? h("slot", { name: "logo-slot" }) : ''), h("div", { class: "compare-card-half-60" }, this.options.heroTitle || this.options.mainTitle ? (h("div", { class: {
                 'title-wrapper': true,
                 'js-resize-title': true,
                 'no-divider': this.priceShownVertically
             }, part: "compare-card-title-wrapper" }, h("div", { class: {
                 'title-wrapper-inner': true
-            } }, this.options.heroTitle ? h("h3", { class: "hero-title" }, this.options.heroTitle) : '', this.options.mainTitle ? h("h3", { class: "main-title" }, this.options.mainTitle) : '', this.showSubTitle && this.options.subTitle ? (h("div", { class: "sub-title" }, this.options.subTitle, this.renderTooltip('infoItem'))) : ('')))) : (''), h("div", { class: "content-wrapper js-resize-content" }, h("div", { class: "custom-content-wrapper" }, h("slot", { name: "custom-slot" })), this.showBulletPoints ? (h("div", { class: "bullet-points-wrapper" }, (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.bulletPoints) === null || _b === void 0 ? void 0 : _b.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : ('')), this.options.netflixProductDescription ? (h("div", { class: "netflix-product-description" }, this.options.netflixProductDescription)) : (''), h("div", { class: "divided-information-wrapper js-resize-divide-slot" }, h("slot", { name: "divided-information-slot" }))), h("div", { class: "compare-card-half-40" }, h("div", { class: "price js-resize-price" }, this.options.price && !isNaN(parseFloat(this.options.price)) ? (h("div", { class: {
+            } }, this.options.heroTitle ? h("h3", { class: "hero-title" }, this.options.heroTitle) : '', this.options.mainTitle ? h("h3", { class: "main-title" }, this.options.mainTitle) : '', this.showSubTitle && this.options.subTitle ? (h("div", { class: "sub-title" }, this.options.subTitle, this.renderTooltip('infoItem'))) : ('')))) : (''), h("div", { class: "content-wrapper js-resize-content" }, h("div", { class: "custom-content-wrapper" }, h("slot", { name: "custom-slot" })), this.showBulletPoints ? (h("div", { class: "bullet-points-wrapper" }, (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.bulletPoints) === null || _b === void 0 ? void 0 : _b.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : (''), h("div", { class: "upsell-block" }, h("slot", { name: "upsell-block-slot" }))), this.options.netflixProductDescription ? (h("div", { class: "netflix-product-description" }, this.options.netflixProductDescription)) : (''), h("div", { class: "divided-information-wrapper js-resize-divide-slot" }, h("slot", { name: "divided-information-slot" }))), h("div", { class: "compare-card-half-40" }, h("div", { class: "price js-resize-price" }, this.options.price && !isNaN(parseFloat(this.options.price)) ? (h("div", { class: {
                 'price-wrapper': true,
                 'price-wrap': this.options.priceWrap,
                 'price-flex-column': this.priceShownVertically
@@ -347,7 +349,7 @@ export class TetCompareCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ServiceAvailabilityServicesCategoryTheme",
+                    "original": "'light' | 'dark' | ServiceAvailabilityServicesCategoryTheme",
                     "resolved": "\"classic\" | \"dark\" | \"grey\" | \"light\" | \"netflix\" | \"non-netflix\" | \"tet-bundles\" | \"tet-business-blue\" | \"tet-business-default\" | \"tet-business-green\" | \"tet-business-mint\" | \"tet-business-purple\" | \"tet-business-red\" | \"tet-business-yellow\" | \"tet-electricity\" | \"tet-internet\" | \"tet-tv\" | \"tet-tv-plus\" | \"tet-vtv\"",
                     "references": {
                         "ServiceAvailabilityServicesCategoryTheme": {
@@ -711,6 +713,24 @@ export class TetCompareCard {
                 "reflect": false,
                 "defaultValue": "'center'"
             },
+            "bestChoiceTextFloating": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines if the best choice text should be floating over the card."
+                },
+                "attribute": "best-choice-text-floating",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "secondaryLinkPosition": {
                 "type": "string",
                 "mutable": false,

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

@@ -485,7 +485,6 @@
   justify-content: center;
 }
 .vat__text {
-  max-width: 53rem;
   width: 100%;
   text-align: center;
   padding-top: 0.5rem;

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

@@ -89,7 +89,7 @@ export class TetCompareCards {
                         requestedProduct = element.productCode;
                     }
                 }
-                const requestedProductData = response[requestedProduct];
+                const requestedProductData = response['products'][requestedProduct];
                 if (requestedProductData) {
                     if (this.newUrlGeneratorStructure) {
                         element = fillProductData(element, requestedProduct, requestedProductData, this.theme);
@@ -105,7 +105,7 @@ export class TetCompareCards {
         });
     }
     render() {
-        return (h(Host, { key: '93ccc91ac8ced1734d70e8700878c5beba261539', class: {
+        return (h(Host, { key: 'd585201b1bfb8a7334ed8737a1e3018d1f93d0f1', class: {
                 'must-initialize': true,
                 'initialized': this.initializedState
             } }, this.showLoader ? (this.renderLoader()) : (h("div", { class: {
@@ -116,7 +116,7 @@ export class TetCompareCards {
             return (h("tet-compare-card", { class: {
                     'tet-compare-card': true,
                     'tet-compare-card--thumbnail': !!el.thumbnail
-                }, index: index, language: el.language, options: el.options, "card-type": el.cardType, theme: el.theme, "best-choice": el.bestChoice, "color-icons": el.colorIcons, "full-height": el.fullHeight, "card-header": el.cardHeader, logo: el.logo, image: el.image, "card-background-color": el.cardBackgroundColor, "card-script": el.cardScript, hideBestChoiceBorder: el.hideBestChoiceBorder, withBorder: el.withBorder, "best-choice-text-position": el.bestChoiceTextPosition, priceShownVertically: el.priceShownVertically, "secondary-link-position": el.secondaryLinkPosition, thumbnail: el.thumbnail, thumbnailAlt: el.thumbnailAlt, showBulletPoints: el.showBulletPoints, showSubTitle: el.showSubTitle, showHelper: el.showHelper, isNetflixCard: el.isNetflixCard, darkMode: this.darkMode }, h("div", { slot: "image-slot" }, h("img", { style: { width: '100%' }, src: el.image, alt: (_d = (_c = (_b = ((_a = el.image) !== null && _a !== void 0 ? _a : '').split('/')) === null || _b === void 0 ? void 0 : _b.pop()) === null || _c === void 0 ? void 0 : _c.split('.')[0]) !== null && _d !== void 0 ? _d : el.image })), h("div", { slot: "logo-slot" }, h("img", { style: { width: '100%' }, src: el.logo, alt: (_h = (_g = (_f = ((_e = el.logo) !== null && _e !== void 0 ? _e : '').split('/')) === null || _f === void 0 ? void 0 : _f.pop()) === null || _g === void 0 ? void 0 : _g.split('.')[0]) !== null && _h !== void 0 ? _h : el.logo })), h("div", { slot: "description-slot", innerHTML: el.cardDescription, class: this.darkMode ? 'dark' : '' })));
+                }, index: index, language: el.language, options: el.options, "card-type": el.cardType, theme: el.theme, "best-choice": el.bestChoice, "color-icons": el.colorIcons, "full-height": el.fullHeight, "card-header": el.cardHeader, logo: el.logo, image: el.image, "card-background-color": el.cardBackgroundColor, "card-script": el.cardScript, hideBestChoiceBorder: el.hideBestChoiceBorder, withBorder: el.withBorder, "best-choice-text-position": el.bestChoiceTextPosition, bestChoiceTextFloating: el.bestChoiceTextFloating, priceShownVertically: el.priceShownVertically, "secondary-link-position": el.secondaryLinkPosition, thumbnail: el.thumbnail, thumbnailAlt: el.thumbnailAlt, showBulletPoints: el.showBulletPoints, showSubTitle: el.showSubTitle, showHelper: el.showHelper, isNetflixCard: el.isNetflixCard, darkMode: this.darkMode }, h("div", { slot: "image-slot" }, h("img", { style: { width: '100%' }, src: el.image, alt: (_d = (_c = (_b = ((_a = el.image) !== null && _a !== void 0 ? _a : '').split('/')) === null || _b === void 0 ? void 0 : _b.pop()) === null || _c === void 0 ? void 0 : _c.split('.')[0]) !== null && _d !== void 0 ? _d : el.image })), h("div", { slot: "logo-slot" }, h("img", { style: { width: '100%' }, src: el.logo, alt: (_h = (_g = (_f = ((_e = el.logo) !== null && _e !== void 0 ? _e : '').split('/')) === null || _f === void 0 ? void 0 : _f.pop()) === null || _g === void 0 ? void 0 : _g.split('.')[0]) !== null && _h !== void 0 ? _h : el.logo })), h("div", { slot: "description-slot", innerHTML: el.cardDescription, class: this.darkMode ? 'dark' : '' })));
         })), this.vatText ? (h("div", { class: "vat" }, h("div", { class: "vat__text", innerHTML: this.vatText }))) : (''))), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : ''));
     }
     static get is() { return "tet-compare-cards"; }