@tet/tet-components 1.3.75-staging → 1.3.76-staging

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

@@ -55,7 +55,7 @@ class AddressOffersProductsFilters {
                     if (intersection) {
                         simulatedIntersection = simulatedIntersection.filter(code => filter.products.includes(code));
                     }
-                    filter.disabled = simulatedIntersection.length <= 1;
+                    filter.disabled = simulatedIntersection.length <= 0;
                     filter.showIcon = false;
                 }
             }

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

@@ -1822,6 +1822,9 @@
   .tet-grid__cell--xl-show {
     display: block;
   }
+  .tet-grid--gg {
+    max-width: unset;
+  }
 }
 @media all and (min-width: 90rem) {
   .tet-grid__cell--mg-span-1 {
@@ -1878,10 +1881,13 @@
   .tet-grid__cell--mg-show {
     display: block;
   }
+  .tet-grid--gg {
+    padding: 0 4.875rem;
+  }
 }
 @media all and (min-width: 120rem) {
   .tet-grid--gg {
-    max-width: calc(120rem + 5rem);
+    max-width: 120rem;
   }
   .tet-grid__cell--gg-span-1 {
     display: block;
@@ -7838,6 +7844,10 @@
   border: 0.125rem solid rgb(35, 40, 46);
   outline: unset;
 }
+.card.light .best-choice-title.floating {
+  background: var(--tc-yellow-40);
+  color: var(--tc-foundation-black);
+}
 .card.light.with-border {
   outline: 0.0625rem solid rgb(35, 40, 46);
   border: 0.125rem solid transparent;
@@ -8038,6 +8048,7 @@
   top: -1.125rem;
   border-radius: 1rem;
   padding: 0.375rem 1.25rem;
+  background-color: var(--tc-yellow-40);
 }
 
 .image-wrapper {

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

@@ -539,6 +539,11 @@
 .force-column .cards.column-two {
   grid-template-columns: minmax(1rem, 32rem);
 }
+.cards.column-four {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(19rem, 21rem));
+  gap: 1rem;
+}
 
 .force-column .cards {
   --compare-cards-wrap: wrap;

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: 'd585201b1bfb8a7334ed8737a1e3018d1f93d0f1', class: {
+        return (h(Host, { key: 'e7c6f33748bc103ba2d31d9ea10f71a4b0b9b749', class: {
                 'must-initialize': true,
                 'initialized': this.initializedState
             } }, this.showLoader ? (this.renderLoader()) : (h("div", { class: {
@@ -220,7 +220,7 @@ export class TetCompareCards {
                 "mutable": false,
                 "complexType": {
                     "original": "CompareCardsLayout",
-                    "resolved": "\"column-two\" | \"default\"",
+                    "resolved": "\"column-four\" | \"column-two\" | \"default\"",
                     "references": {
                         "CompareCardsLayout": {
                             "location": "local",

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

@@ -66,7 +66,7 @@ class CompareCardsTabProductsFilters {
                     if (intersection) {
                         simulatedIntersection = simulatedIntersection.filter(code => filter.products.includes(code));
                     }
-                    filter.disabled = simulatedIntersection.length <= 1;
+                    filter.disabled = simulatedIntersection.length <= 0;
                     filter.showIcon = false;
                 }
             }

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

@@ -56,7 +56,9 @@
   padding-bottom: 0.75rem;
 }
 .tet-compare-cards-tab__filters {
-  align-self: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-bottom: 1rem;
 }
 .tet-compare-cards-tab__header--image {

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

@@ -18,6 +18,13 @@ export class TetTabCompareCards {
                 'tet-compare-cards-tab__placeholder': true,
                 'visible': this.showLoader
             } }, [...Array(3)].map(() => h("tet-placeholder", { class: "tet-placeholder", height: "27rem", width: "21.5rem" }))));
+        /**
+         * Renders product filters component.
+         * @returns Renders product filters component
+         */
+        this.renderProductFilters = () => {
+            return (h("tet-address-offers-filters-products", { productCodes: this.productSACData, class: "center tet-compare-cards-tab__filters", clearFilterButton: true, onFilteredProductsChanged: this.handleFilteredProductsChanged, theme: this.darkMode ? 'dark' : 'light' }));
+        };
         this.data = undefined;
         this.forceColumn = false;
         this.layout = 'default';
@@ -26,6 +33,7 @@ export class TetTabCompareCards {
         this.darkMode = false;
         this.isNetflixCard = false;
         this.darkHeader = false;
+        this.withProductFilters = false;
         this.productDataLoaded = false;
         this.showLoader = true;
         this.productSACData = undefined;
@@ -133,7 +141,7 @@ export class TetTabCompareCards {
                 tab.disabled = true;
             }
         });
-        return (h("div", { class: "tet-compare-cards-tab__header-container" }, tabList.withProductFilters && (h("tet-address-offers-filters-products", { productCodes: this.productSACData, class: "center tet-compare-cards-tab__filters", clearFilterButton: true, onFilteredProductsChanged: this.handleFilteredProductsChanged, theme: this.darkMode ? 'dark' : 'light' })), h("tet-tab-header", { darkMode: this.darkHeader ? true : this.darkMode, position: tabList.tabHeader.position, "default-tab": `tab-${level}-${tabList.tabHeader.defaultTabIndex}`, segmented: tabList.tabHeader.segmented, sizing: tabList.tabHeader.sizing, "data-name": tabList.tabHeader.dataName, class: "tet-compare-cards-tab__header" }, tabList.tabs.map((element, index) => (h("button", { "data-name": `tab-${level}-${index}`, class: { disabled: element.disabled || this.showLoader, 'button': true } }, element.image && !element.imagePositionRight ?
+        return (h("div", { class: "tet-compare-cards-tab__header-container" }, h("tet-tab-header", { darkMode: this.darkHeader ? true : this.darkMode, position: tabList.tabHeader.position, "default-tab": `tab-${level}-${tabList.tabHeader.defaultTabIndex}`, segmented: tabList.tabHeader.segmented, sizing: tabList.tabHeader.sizing, "data-name": tabList.tabHeader.dataName, class: "tet-compare-cards-tab__header" }, tabList.tabs.map((element, index) => (h("button", { "data-name": `tab-${level}-${index}`, class: { disabled: element.disabled || this.showLoader, 'button': true } }, element.image && !element.imagePositionRight ?
             h("img", { class: "tet-compare-cards-tab__header--image", src: element.image, alt: element.altText }) : '', element.title, element.image && element.imagePositionRight ?
             h("img", { class: { 'tet-compare-cards-tab__header--image': true, 'right': true }, src: element.image, alt: element.altText }) : ''))))));
     }
@@ -160,7 +168,7 @@ export class TetTabCompareCards {
     renderCompareCards(cards, vatText = '', cardScript = '') {
         let filteredCards = cards;
         if (this.filteredProductCodes && this.filteredProductCodes.length > 0) {
-            filteredCards = cards.filter(card => this.filteredProductCodes.includes(card.productCode));
+            filteredCards = cards.filter(card => !card.productCode || this.filteredProductCodes.includes(card.productCode));
         }
         let cardsWithAddedSACData = [];
         filteredCards.forEach((element) => {
@@ -181,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: '54a44d3d6d76143678f77c9fefe66902a1f1654a' }, h("div", { key: 'b52b3b1d124835ad6eeb4bfc4f14d386477b3ba1', class: "tet-compare-cards-tab-wrapper" }, this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: '70ed32288ced853110f3675f535537519a4545da', class: {
+        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: {
                 'tet-compare-cards-tab__cards': true,
                 'hidden': this.showLoader
             } }, this.productDataLoaded ? this.renderContent(this.data, 1) : ''))));
@@ -244,7 +252,7 @@ export class TetTabCompareCards {
                 "mutable": false,
                 "complexType": {
                     "original": "CompareCardsLayout",
-                    "resolved": "\"column-two\" | \"default\"",
+                    "resolved": "\"column-four\" | \"column-two\" | \"default\"",
                     "references": {
                         "CompareCardsLayout": {
                             "location": "import",
@@ -358,6 +366,24 @@ export class TetTabCompareCards {
                 "attribute": "dark-header",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "withProductFilters": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables product filters above the compare cards."
+                },
+                "attribute": "with-product-filters",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css

@@ -1823,6 +1823,9 @@
   .tet-grid__cell--xl-show {
     display: block;
   }
+  .tet-grid--gg {
+    max-width: unset;
+  }
 }
 @media all and (min-width: 90rem) {
   .tet-grid__cell--mg-span-1 {
@@ -1879,10 +1882,13 @@
   .tet-grid__cell--mg-show {
     display: block;
   }
+  .tet-grid--gg {
+    padding: 0 4.875rem;
+  }
 }
 @media all and (min-width: 120rem) {
   .tet-grid--gg {
-    max-width: calc(120rem + 5rem);
+    max-width: 120rem;
   }
   .tet-grid__cell--gg-span-1 {
     display: block;