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

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

@@ -9,119 +9,6 @@ import { querySelectorAllDeep, querySelectorDeep } from "query-selector-shadow-d
  */
 export class TetCompareCard {
     constructor() {
-        /** The parent element containing the components siblings. */
-        this.parentElement = null;
-        /** The resize observer watching element resizes. */
-        this.resizeObserver = null;
-        /** An object containing the previous, watched, element sizes.
-         * index: element class name.
-         * number: the height sum of the element's children.
-         */
-        this.sizes = {};
-        /**
-         * Dispatches a custom 'tet-card-resize' event to the `parentElement` with class names of the elements that have changed size.
-         */
-        this.emitResize = () => {
-            /* Skip resize on wide cards */
-            if (this.currentCardType === 'wide60-40') {
-                return;
-            }
-            const resizedElements = [];
-            const resizeables = Array.from(querySelectorAllDeep("[class*='js-resize']", this.host));
-            for (const resizeable of resizeables) {
-                const resizeableHeight = this.getElementInnerHeight(resizeable);
-                const selector = Array.from(resizeable.classList).find((className) => className.includes('js-resize'));
-                if (this.sizes[selector] !== resizeableHeight) {
-                    resizedElements.push(selector);
-                }
-                this.sizes[selector] = resizeableHeight;
-            }
-            /** Only dispatch if there are changes. */
-            if (resizedElements.length) {
-                this.parentElement.dispatchEvent(new CustomEvent('tet-card-resize', { detail: resizedElements }));
-            }
-        };
-        /**
-         * Adds bottom padding to the observed elements if they are smaller than those of their sibling cards.
-         * @param event A custom event containing the selectors of the elements that have changed size.
-         */
-        this.resizeCard = (event) => {
-            const tabCardsContainer = closestPastShadow(this.parentElement, '.tet-compare-cards-tab__cards');
-            let parentContainer;
-            if (tabCardsContainer) {
-                parentContainer = querySelectorAllDeep('tet-compare-card', tabCardsContainer);
-            }
-            else {
-                parentContainer = this.parentElement.querySelectorAll('tet-compare-card');
-            }
-            const siblings = Array.from(parentContainer).filter((card) => card != this.host);
-            const hostShadowRoot = this.host.shadowRoot;
-            const elementSizes = {};
-            for (const sibling of siblings) {
-                const siblingShadowRoot = sibling.shadowRoot;
-                /** if a sibling is `best-choice` add extra padding to the top. */
-                if (!this.bestChoice && siblingShadowRoot.querySelector('.card').classList.contains('best-choice')) {
-                    const firstElement = hostShadowRoot.querySelector('.best-choice-title');
-                    firstElement.style.paddingBottom = '1rem';
-                }
-                const siblingElements = Array.from(querySelectorAllDeep("[class*='js-resize']", sibling));
-                for (const siblingElement of siblingElements) {
-                    const selector = Array.from(siblingElement.classList).find((className) => className.includes('js-resize'));
-                    if (!event.detail.includes(selector)) {
-                        continue;
-                    }
-                    if (elementSizes[selector] === undefined) {
-                        elementSizes[selector] = [];
-                    }
-                    const height = this.getElementInnerHeight(siblingElement);
-                    elementSizes[selector].push({ element: siblingElement, height });
-                }
-            }
-            for (const selector in elementSizes) {
-                const element = querySelectorDeep(`.${selector}`, this.host);
-                const elementHeight = this.getElementInnerHeight(element);
-                /** Get the largest of the elements out of all cards. */
-                const largestHeight = elementSizes[selector].reduce((siblingA, siblingB) => (siblingA.height >= siblingB.height ? siblingA : siblingB), { element, height: elementHeight });
-                this.resizeObserver.unobserve(element);
-                if (largestHeight.element === element) {
-                    /** If the current element is the largest, remove the extra padding. */
-                    element.style.paddingBottom = null;
-                }
-                else {
-                    /** Get the current padding from the largest sibling, as they will not have the manually added padding. */
-                    const paddingBottom = getConvertedPixels(getComputedStyle(largestHeight.element).paddingBottom);
-                    element.style.paddingBottom = `${largestHeight.height - elementHeight + paddingBottom}px`;
-                }
-                this.resizeObserver.observe(element);
-            }
-        };
-        /** Gets the height sum of all direct child elements.
-         * @param element The parent element.
-         * @returns a pixel value of the child element height sum.
-         */
-        this.getElementInnerHeight = (element) => {
-            return Array.from(element.children)
-                .map((child) => child.getBoundingClientRect().height)
-                .reduce((a, b) => a + b, 0);
-        };
-        /** Attaches the `resizeObserver` to all elements containing a class selector containing `js-resize` */
-        this.observeResize = () => {
-            for (const element of Array.from(this.host.shadowRoot.querySelectorAll("[class*='js-resize']"))) {
-                this.resizeObserver.observe(element);
-            }
-        };
-        /**
-         * Set the current card type based on window width, essentially simulating media query behavior.
-         */
-        this.setCardType = () => {
-            const windowWidth = window.innerWidth;
-            if (this.currentCardType === 'wide60-40' && windowWidth <= this.minWideWidth) {
-                this.currentCardType = 'regular';
-            }
-            else if (this.currentCardType === 'regular' && windowWidth > this.minWideWidth) {
-                this.currentCardType = 'wide60-40';
-            }
-        };
         this.clickCallback = () => null;
         this.index = undefined;
         this.cardType = 'regular';
@@ -154,6 +41,23 @@ export class TetCompareCard {
         this.darkMode = false;
         this.currentCardType = this.cardType;
     }
+    /**
+     * The HTML element that should trigger the tooltip.
+     */
+    host;
+    /**
+     * The selectEvent event emitter.
+     */
+    selectEvent;
+    /** The parent element containing the components siblings. */
+    parentElement = null;
+    /** The resize observer watching element resizes. */
+    resizeObserver = null;
+    /** An object containing the previous, watched, element sizes.
+     * index: element class name.
+     * number: the height sum of the element's children.
+     */
+    sizes = {};
     onClick() {
         this.selectEvent.emit({ index: this.index, target: this });
     }
@@ -190,6 +94,110 @@ export class TetCompareCard {
         }
         return this.parentElement;
     }
+    /**
+     * Dispatches a custom 'tet-card-resize' event to the `parentElement` with class names of the elements that have changed size.
+     */
+    emitResize = () => {
+        /* Skip resize on wide cards */
+        if (this.currentCardType === 'wide60-40') {
+            return;
+        }
+        const resizedElements = [];
+        const resizeables = Array.from(querySelectorAllDeep("[class*='js-resize']", this.host));
+        for (const resizeable of resizeables) {
+            const resizeableHeight = this.getElementInnerHeight(resizeable);
+            const selector = Array.from(resizeable.classList).find((className) => className.includes('js-resize'));
+            if (this.sizes[selector] !== resizeableHeight) {
+                resizedElements.push(selector);
+            }
+            this.sizes[selector] = resizeableHeight;
+        }
+        /** Only dispatch if there are changes. */
+        if (resizedElements.length) {
+            this.parentElement.dispatchEvent(new CustomEvent('tet-card-resize', { detail: resizedElements }));
+        }
+    };
+    /**
+     * Adds bottom padding to the observed elements if they are smaller than those of their sibling cards.
+     * @param event A custom event containing the selectors of the elements that have changed size.
+     */
+    resizeCard = (event) => {
+        const tabCardsContainer = closestPastShadow(this.parentElement, '.tet-compare-cards-tab__cards');
+        let parentContainer;
+        if (tabCardsContainer) {
+            parentContainer = querySelectorAllDeep('tet-compare-card', tabCardsContainer);
+        }
+        else {
+            parentContainer = this.parentElement.querySelectorAll('tet-compare-card');
+        }
+        const siblings = Array.from(parentContainer).filter((card) => card != this.host);
+        const hostShadowRoot = this.host.shadowRoot;
+        const elementSizes = {};
+        for (const sibling of siblings) {
+            const siblingShadowRoot = sibling.shadowRoot;
+            /** if a sibling is `best-choice` add extra padding to the top. */
+            if (!this.bestChoice && siblingShadowRoot.querySelector('.card').classList.contains('best-choice')) {
+                const firstElement = hostShadowRoot.querySelector('.best-choice-title');
+                firstElement.style.paddingBottom = '1rem';
+            }
+            const siblingElements = Array.from(querySelectorAllDeep("[class*='js-resize']", sibling));
+            for (const siblingElement of siblingElements) {
+                const selector = Array.from(siblingElement.classList).find((className) => className.includes('js-resize'));
+                if (!event.detail.includes(selector)) {
+                    continue;
+                }
+                if (elementSizes[selector] === undefined) {
+                    elementSizes[selector] = [];
+                }
+                const height = this.getElementInnerHeight(siblingElement);
+                elementSizes[selector].push({ element: siblingElement, height });
+            }
+        }
+        for (const selector in elementSizes) {
+            const element = querySelectorDeep(`.${selector}`, this.host);
+            const elementHeight = this.getElementInnerHeight(element);
+            /** Get the largest of the elements out of all cards. */
+            const largestHeight = elementSizes[selector].reduce((siblingA, siblingB) => (siblingA.height >= siblingB.height ? siblingA : siblingB), { element, height: elementHeight });
+            this.resizeObserver.unobserve(element);
+            if (largestHeight.element === element) {
+                /** If the current element is the largest, remove the extra padding. */
+                element.style.paddingBottom = null;
+            }
+            else {
+                /** Get the current padding from the largest sibling, as they will not have the manually added padding. */
+                const paddingBottom = getConvertedPixels(getComputedStyle(largestHeight.element).paddingBottom);
+                element.style.paddingBottom = `${largestHeight.height - elementHeight + paddingBottom}px`;
+            }
+            this.resizeObserver.observe(element);
+        }
+    };
+    /** Gets the height sum of all direct child elements.
+     * @param element The parent element.
+     * @returns a pixel value of the child element height sum.
+     */
+    getElementInnerHeight = (element) => {
+        return Array.from(element.children)
+            .map((child) => child.getBoundingClientRect().height)
+            .reduce((a, b) => a + b, 0);
+    };
+    /** Attaches the `resizeObserver` to all elements containing a class selector containing `js-resize` */
+    observeResize = () => {
+        for (const element of Array.from(this.host.shadowRoot.querySelectorAll("[class*='js-resize']"))) {
+            this.resizeObserver.observe(element);
+        }
+    };
+    /**
+     * Set the current card type based on window width, essentially simulating media query behavior.
+     */
+    setCardType = () => {
+        const windowWidth = window.innerWidth;
+        if (this.currentCardType === 'wide60-40' && windowWidth <= this.minWideWidth) {
+            this.currentCardType = 'regular';
+        }
+        else if (this.currentCardType === 'regular' && windowWidth > this.minWideWidth) {
+            this.currentCardType = 'wide60-40';
+        }
+    };
     getTheme() {
         if (this.darkMode) {
             if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
@@ -207,7 +215,7 @@ export class TetCompareCard {
             buttonContent = h("div", { class: "button", innerHTML: button });
         }
         else if (buttonArgs && buttonTitle) {
-            buttonContent = (h("div", { class: "button" }, h("tet-button", Object.assign({}, buttonArgs, { theme: this.darkMode || this.theme === 'dark' ? 'dark' : 'light', type: buttonType }), buttonTitle), buttonStyle && h("style", null, buttonStyle)));
+            buttonContent = (h("div", { class: "button" }, h("tet-button", { ...buttonArgs, theme: this.darkMode || this.theme === 'dark' ? 'dark' : 'light', type: buttonType }, buttonTitle), buttonStyle && h("style", null, buttonStyle)));
         }
         return (h("a", { target: target, href: link, "data-form-link": link, tabIndex: -1 }, buttonContent));
     }
@@ -236,7 +244,6 @@ export class TetCompareCard {
      * @returns rendered card body.
      */
     renderCard() {
-        var _a, _b, _c, _d, _e, _f;
         return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
                 'card': true,
                 [`${this.currentCardType}`]: true,
@@ -261,7 +268,7 @@ export class TetCompareCard {
                 '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'))) : (''), this.options.infoTitle ? h("div", { class: "info-title" }, this.options.infoTitle) : ''))) : (''), h("div", { class: "content-wrapper js-resize-content" }, h("div", { class: "custom-content-wrapper" }, h("slot", { name: "custom-slot" })), this.showBulletPoints && !this.options.bulletPointPositionBottom ? (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: {
+            } }, 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'))) : (''), this.options.infoTitle ? h("div", { class: "info-title" }, this.options.infoTitle) : ''))) : (''), h("div", { class: "content-wrapper js-resize-content" }, h("div", { class: "custom-content-wrapper" }, h("slot", { name: "custom-slot" })), this.showBulletPoints && !this.options.bulletPointPositionBottom ? (h("div", { class: "bullet-points-wrapper" }, this.options?.bulletPoints?.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
@@ -269,17 +276,16 @@ export class TetCompareCard {
                 'secondary-link': true,
                 'tet-link': true,
                 [`${this.secondaryLinkPosition}`]: true
-            } }, this.options.secondaryLinkOpenBlank ? (h("a", { target: "_blank", href: this.options.secondaryLink }, this.options.secondaryLinkText)) : (h("a", { href: this.options.secondaryLink }, this.options.secondaryLinkText))))), this.showBulletPoints && this.options.bulletPointPositionBottom ? (h("div", { class: "bullet-points-wrapper bottom" }, (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.bulletPoints) === null || _d === void 0 ? void 0 : _d.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : ('')), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : '', h("div", { class: "data-hidden" }, h("div", { "data-attribute": "hero-title" }, this.options.heroTitle ? this.options.heroTitle : ''), h("div", { "data-attribute": "main-title" }, this.options.mainTitle ? this.options.mainTitle : ''), h("div", { "data-attribute": "sub-title" }, this.options.subTitle ? this.options.subTitle : ''), h("div", { "data-attribute": "price" }, this.options.price ? this.formatPrice(this.options.price) : ''), h("div", { "data-attribute": "old-price" }, this.options.oldPrice ? this.formatPrice(this.options.oldPrice) : ''), h("div", { "data-attribute": "term" }, this.options.term ? this.options.term : ''), h("div", { "data-attribute": "term-text" }, this.options.termText ? this.options.termText : ''), h("div", { "data-attribute": "helper" }, this.options.helper ? this.options.helper : ''), h("div", { "data-attribute": "description" }, h("slot", { name: "description-slot" })), h("div", { "data-attribute": "custom-slot" }, h("slot", { name: "custom-slot" })), this.showBulletPoints ? (h("div", { "data-attribute": "bullet-points" }, (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.bulletPoints) === null || _f === void 0 ? void 0 : _f.map((bulletpoint) => (h("div", null, bulletpoint))))) : (''), h("div", { "data-attribute": "divided-information" }, h("slot", { name: "divided-information-slot" })), this.options.pricePrefix ?
+            } }, this.options.secondaryLinkOpenBlank ? (h("a", { target: "_blank", href: this.options.secondaryLink }, this.options.secondaryLinkText)) : (h("a", { href: this.options.secondaryLink }, this.options.secondaryLinkText))))), this.showBulletPoints && this.options.bulletPointPositionBottom ? (h("div", { class: "bullet-points-wrapper bottom" }, this.options?.bulletPoints?.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : ('')), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : '', h("div", { class: "data-hidden" }, h("div", { "data-attribute": "hero-title" }, this.options.heroTitle ? this.options.heroTitle : ''), h("div", { "data-attribute": "main-title" }, this.options.mainTitle ? this.options.mainTitle : ''), h("div", { "data-attribute": "sub-title" }, this.options.subTitle ? this.options.subTitle : ''), h("div", { "data-attribute": "price" }, this.options.price ? this.formatPrice(this.options.price) : ''), h("div", { "data-attribute": "old-price" }, this.options.oldPrice ? this.formatPrice(this.options.oldPrice) : ''), h("div", { "data-attribute": "term" }, this.options.term ? this.options.term : ''), h("div", { "data-attribute": "term-text" }, this.options.termText ? this.options.termText : ''), h("div", { "data-attribute": "helper" }, this.options.helper ? this.options.helper : ''), h("div", { "data-attribute": "description" }, h("slot", { name: "description-slot" })), h("div", { "data-attribute": "custom-slot" }, h("slot", { name: "custom-slot" })), this.showBulletPoints ? (h("div", { "data-attribute": "bullet-points" }, this.options?.bulletPoints?.map((bulletpoint) => (h("div", null, bulletpoint))))) : (''), h("div", { "data-attribute": "divided-information" }, h("slot", { name: "divided-information-slot" })), this.options.pricePrefix ?
             h("div", { "data-attribute": "price-prefix" }, this.options.pricePrefix)
             : '', this.options.priceInfo ?
             h("div", { "data-attribute": "price-info" }, this.options.priceInfo)
             : '')));
     }
     render() {
-        var _a;
         const card = this.renderCard();
         if (this.thumbnail) {
-            return (h("div", { class: "card-wrapper js-card-wrapper" }, h("img", { src: this.thumbnail, class: "card-thumbnail", alt: (_a = this.thumbnailAlt) !== null && _a !== void 0 ? _a : '' }), card));
+            return (h("div", { class: "card-wrapper js-card-wrapper" }, h("img", { src: this.thumbnail, class: "card-thumbnail", alt: this.thumbnailAlt ?? '' }), card));
         }
         return card;
     }

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

@@ -7,24 +7,6 @@ import { productComparison } from "../../../../services/api/index";
  */
 export class TetCompareCardV2 {
     constructor() {
-        /**
-         * Indicates whether the card has already emitted the loaded event.
-         */
-        this.cardHasEmitted = false;
-        /**
-         * Counter for unique bonus IDs.
-         */
-        this.bonusCounter = 0;
-        /**
-         * WeakMap to store unique IDs for bonuses.
-         */
-        this.bonusWeakMap = new WeakMap();
-        /**
-         * Renders the loader.
-         */
-        this.renderLoader = () => {
-            return (h("div", { class: "cards" }, [...Array(1)].map(() => [h("tet-placeholder", { class: "tet-placeholder", height: "37rem", width: "20.5rem", darkTheme: this.darkMode })])));
-        };
         this.clickCallback = () => null;
         this.cardType = 'static';
         this.theme = 'classic';
@@ -56,6 +38,30 @@ export class TetCompareCardV2 {
         this.allProductData = {};
         this.preselectedRemountId = 0;
     }
+    /**
+     * The HTML element that should trigger the tooltip.
+     */
+    host;
+    /**
+     * Indicates whether the card has already emitted the loaded event.
+     */
+    cardHasEmitted = false;
+    /**
+     * Counter for unique bonus IDs.
+     */
+    bonusCounter = 0;
+    /**
+     * WeakMap to store unique IDs for bonuses.
+     */
+    bonusWeakMap = new WeakMap();
+    /**
+     * Emitted when the card has loaded.
+     */
+    cardLoaded;
+    /**
+     * Emitted when the selected product has changed.
+     */
+    productChanged;
     /**
      * @param event
      */
@@ -65,7 +71,6 @@ export class TetCompareCardV2 {
         this.productChanged.emit();
     }
     async componentWillLoad() {
-        var _a;
         if (this.cardType === 'dropdown') {
             this.pushDataToDropdownOptions();
             const preselected = this.options.find(option => option.preselected);
@@ -86,7 +91,7 @@ export class TetCompareCardV2 {
             return;
         }
         if (this.cardType === 'static') {
-            this.selectedProductCode = ((_a = this.options.find(option => option.productCode)) === null || _a === void 0 ? void 0 : _a.productCode) || '';
+            this.selectedProductCode = this.options.find(option => option.productCode)?.productCode || '';
             this.productChanged.emit();
         }
     }
@@ -117,7 +122,7 @@ export class TetCompareCardV2 {
         const benefit = this.benefits.find(benefit => benefit.toggleKey === key);
         let activeKeys = [...this.selectedSwitchKeys];
         if (checked) {
-            if (benefit === null || benefit === void 0 ? void 0 : benefit.selectAll) {
+            if (benefit?.selectAll) {
                 const fullCombo = this.getFullComboToggleOption();
                 if (fullCombo) {
                     this.selectedSwitchKeys = [...fullCombo.keys];
@@ -190,8 +195,7 @@ export class TetCompareCardV2 {
         this.showLoader = false;
     }
     selectedContractTerm() {
-        var _a;
-        if (!((_a = this.allProductData[this.selectedProductCode]) === null || _a === void 0 ? void 0 : _a.contractTerms)) {
+        if (!this.allProductData[this.selectedProductCode]?.contractTerms) {
             return;
         }
         if (this.contractTerm !== undefined) {
@@ -202,9 +206,8 @@ export class TetCompareCardV2 {
         }
     }
     currentBonuses() {
-        var _a;
         const option = this.options.find(option => option.productCode === this.selectedProductCode);
-        return (_a = option === null || option === void 0 ? void 0 : option.bonuses) !== null && _a !== void 0 ? _a : [];
+        return option?.bonuses ?? [];
     }
     allBonuses() {
         return this.options.flatMap(option => option.bonuses || []);
@@ -227,38 +230,37 @@ export class TetCompareCardV2 {
     benefitHandler(benefit, isDropdownType = false) {
         const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
         const benefitAsImg = !!benefit.img;
-        return (h("div", { class: { 'benefit': true, 'benefit__dropdown': isDropdownType }, key: benefit.toggleKey }, benefitAsImg ? (h("img", { src: benefit.img, class: "benefit__icon benefit__img" })) : (h("tet-icon", { class: "benefit__icon icon", name: benefit.icon })), benefitAsLink ? (h("a", Object.assign({ class: "benefit__name benefit__link" }, (benefit.dataAttributes || {})), benefit.name)) : (h("span", { class: "benefit__name" }, benefit.name))));
+        return (h("div", { class: { 'benefit': true, 'benefit__dropdown': isDropdownType }, key: benefit.toggleKey }, benefitAsImg ? (h("img", { src: benefit.img, class: "benefit__icon benefit__img" })) : (h("tet-icon", { class: "benefit__icon icon", name: benefit.icon })), benefitAsLink ? (h("a", { class: "benefit__name benefit__link", ...(benefit.dataAttributes || {}) }, benefit.name)) : (h("span", { class: "benefit__name" }, benefit.name))));
     }
     /**
      * Renders the card body.
      * @returns rendered card body.
      */
     renderCard() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         // Get data for rendering
         const comparisonData = this.allProductData[this.selectedProductCode];
         const contractTermData = this.selectedContractTerm();
-        const overridePoductAttribute = comparisonData === null || comparisonData === void 0 ? void 0 : comparisonData.attributes.find(attr => attr.key === 'overrideProductName');
-        const overridePoductName = overridePoductAttribute === null || overridePoductAttribute === void 0 ? void 0 : overridePoductAttribute.value;
-        const mainTitle = overridePoductName !== null && overridePoductName !== void 0 ? overridePoductName : (_a = comparisonData === null || comparisonData === void 0 ? void 0 : comparisonData.name) === null || _a === void 0 ? void 0 : _a[this.language];
-        const price = (_b = contractTermData.amount.toString()) !== null && _b !== void 0 ? _b : '';
-        const promotionCode = (_c = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.promotionCode) !== null && _c !== void 0 ? _c : '';
-        const term = (_d = contractTermData.term) !== null && _d !== void 0 ? _d : '';
-        const priceDescription = (_f = (_e = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.priceDescription) === null || _e === void 0 ? void 0 : _e[this.language]) !== null && _f !== void 0 ? _f : '';
-        const secondaryLink = (_g = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.contract) !== null && _g !== void 0 ? _g : '';
-        const baseUrl = ((_h = comparisonData === null || comparisonData === void 0 ? void 0 : comparisonData.formUrl) === null || _h === void 0 ? void 0 : _h[this.language]) || '';
+        const overridePoductAttribute = comparisonData?.attributes.find(attr => attr.key === 'overrideProductName');
+        const overridePoductName = overridePoductAttribute?.value;
+        const mainTitle = overridePoductName ?? comparisonData?.name?.[this.language];
+        const price = contractTermData.amount.toString() ?? '';
+        const promotionCode = contractTermData?.promotionCode ?? '';
+        const term = contractTermData.term ?? '';
+        const priceDescription = contractTermData?.priceDescription?.[this.language] ?? '';
+        const secondaryLink = contractTermData?.contract ?? '';
+        const baseUrl = comparisonData?.formUrl?.[this.language] || '';
         const params = new URLSearchParams({
-            contractTerm: (_j = term === null || term === void 0 ? void 0 : term.toString()) !== null && _j !== void 0 ? _j : '',
+            contractTerm: term?.toString() ?? '',
             product: this.selectedProductCode,
-            promotion: promotionCode !== null && promotionCode !== void 0 ? promotionCode : '',
-            lang: (_k = this.language) !== null && _k !== void 0 ? _k : '',
+            promotion: promotionCode ?? '',
+            lang: this.language ?? '',
             from: 'tet.lv'
         });
         const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
         const currentBonuses = this.currentBonuses();
         const currentBonusIds = currentBonuses.map(this.getUniqueBonusId.bind(this));
         const allBonuses = this.allBonuses();
-        const isBestChoice = ((_l = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _l === void 0 ? void 0 : _l.bestChoice) || false;
+        const isBestChoice = this.options.find(options => options.productCode === this.selectedProductCode)?.bestChoice || false;
         return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
                 'card': true,
                 [`${this.cardType}`]: true,
@@ -282,20 +284,24 @@ export class TetCompareCardV2 {
                     'bonuss--active': isActive,
                     'bonuss--inactive': !isActive
                 }, key: id }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))));
-        }))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_m = this === null || this === void 0 ? void 0 : this.benefits) === null || _m === void 0 ? void 0 :
-            _m.map((benefit) => this.benefitHandler(benefit, true)), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
+        }))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this?.benefits?.map((benefit) => this.benefitHandler(benefit, true)), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
             const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
             const benefitAsImg = !!benefit.img;
             const isPreselected = this.preselectedKeys.includes(benefit.toggleKey);
             const switchKey = isPreselected
                 ? `${benefit.toggleKey}-${this.preselectedRemountId}`
                 : benefit.toggleKey;
-            return (h("div", { class: "benefit", key: benefit.toggleKey }, benefitAsImg ? (h("img", { src: benefit.img, class: "benefit__icon benefit__img" })) : (h("tet-icon", { class: "benefit__icon icon", name: benefit.icon })), benefitAsLink ? (h("a", Object.assign({ class: "benefit__name benefit__link" }, (benefit.dataAttributes || {})), benefit.name)) : (h("span", { class: "benefit__name" }, benefit.name)), h("tet-switch", { key: switchKey, name: benefit.toggleKey, checked: this.selectedSwitchKeys.includes(benefit.toggleKey), onCheck: (e) => this.handleSwitchToggle(benefit.toggleKey, e.detail.checked) })));
-        }))), this.cardType === 'static' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_o = this === null || this === void 0 ? void 0 : this.benefits) === null || _o === void 0 ? void 0 :
-            _o.map((benefit) => this.benefitHandler(benefit)))) : (''), h("div", { class: "button-wrapper" }, secondaryLink && this.secondaryLinkText && (h("div", { class: {
+            return (h("div", { class: "benefit", key: benefit.toggleKey }, benefitAsImg ? (h("img", { src: benefit.img, class: "benefit__icon benefit__img" })) : (h("tet-icon", { class: "benefit__icon icon", name: benefit.icon })), benefitAsLink ? (h("a", { class: "benefit__name benefit__link", ...(benefit.dataAttributes || {}) }, benefit.name)) : (h("span", { class: "benefit__name" }, benefit.name)), h("tet-switch", { key: switchKey, name: benefit.toggleKey, checked: this.selectedSwitchKeys.includes(benefit.toggleKey), onCheck: (e) => this.handleSwitchToggle(benefit.toggleKey, e.detail.checked) })));
+        }))), this.cardType === 'static' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this?.benefits?.map((benefit) => this.benefitHandler(benefit)))) : (''), h("div", { class: "button-wrapper" }, secondaryLink && this.secondaryLinkText && (h("div", { class: {
                 'secondary-link': true
             } }, this.secondaryLinkOpenBlank ? (h("a", { class: "tet-link", target: "_blank", href: secondaryLink }, this.secondaryLinkText)) : (h("a", { class: "tet-link", href: secondaryLink }, this.secondaryLinkText))))))), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : ''));
     }
+    /**
+     * Renders the loader.
+     */
+    renderLoader = () => {
+        return (h("div", { class: "cards" }, [...Array(1)].map(() => [h("tet-placeholder", { class: "tet-placeholder", height: "37rem", width: "20.5rem", darkTheme: this.darkMode })])));
+    };
     render() {
         if (this.showLoader) {
             return this.renderLoader();

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

@@ -6,14 +6,6 @@ import { fillProductData } from "../utils";
  */
 export class TetCompareCards {
     constructor() {
-        /**
-         * Renders the loader.
-         */
-        this.renderLoader = () => {
-            return (h("div", { class: "cards" }, [...Array(3)].map(() => [
-                h("tet-placeholder", { class: "tet-placeholder", height: "27rem", width: "21.5rem", darkTheme: this.darkMode })
-            ])));
-        };
         this.data = undefined;
         this.vatText = undefined;
         this.forceColumn = undefined;
@@ -33,6 +25,14 @@ export class TetCompareCards {
         this.compareCardDataChange.emit();
         this.initializedState = true;
     }
+    /**
+     * The data change event emitter.
+     */
+    compareCardDataChange;
+    /**
+     * The cards have been rendered event emitter.
+     */
+    compareCardsDidRender;
     /**
      * @param event
      */
@@ -43,6 +43,7 @@ export class TetCompareCards {
         productCode.push(this.changedProductCode);
         this.getProductData(productCode.join(','), false);
     }
+    host;
     /**
      * If the product codes are provided, get product data from SAC
      */
@@ -99,6 +100,14 @@ export class TetCompareCards {
             this.showLoader = false;
         });
     }
+    /**
+     * Renders the loader.
+     */
+    renderLoader = () => {
+        return (h("div", { class: "cards" }, [...Array(3)].map(() => [
+            h("tet-placeholder", { class: "tet-placeholder", height: "27rem", width: "21.5rem", darkTheme: this.darkMode })
+        ])));
+    };
     render() {
         return (h(Host, { key: 'fc759bc25d67a88995fbc0e6e24067ad34bf5580', class: {
                 'must-initialize': true,
@@ -106,13 +115,10 @@ export class TetCompareCards {
             } }, this.showLoader ? (this.renderLoader()) : (h("div", { class: {
                 'tet-compare-cards-wrapper': true,
                 'force-column': this.forceColumn
-            } }, h("div", { class: { cards: true, [`${this.layout}`]: true } }, this.data.map((el, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            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, 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" }) : ''));
+            } }, h("div", { class: { cards: true, [`${this.layout}`]: true } }, this.data.map((el, index) => (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, 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: (el.image ?? '').split('/')?.pop()?.split('.')[0] ?? el.image })), h("div", { slot: "logo-slot" }, h("img", { style: { width: '100%' }, src: el.logo, alt: (el.logo ?? '').split('/')?.pop()?.split('.')[0] ?? 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"; }
     static get encapsulation() { return "shadow"; }