@tet/tet-components 1.3.125-testing → 1.3.126-testing

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

@@ -7730,8 +7730,10 @@
   font-weight: 500;
   color: var(--compare-card-benefit-text-color);
   position: relative;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding: 1rem 0.5rem 1rem 0.5rem;
+}
+.benefit-wrapper .benefit__dropdown {
+  padding-bottom: 0.75rem;
 }
 .benefit-wrapper .benefit__name {
   position: relative;

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

@@ -196,16 +196,7 @@ export class TetCompareCardV2 {
         return (_a = option === null || option === void 0 ? void 0 : option.bonuses) !== null && _a !== void 0 ? _a : [];
     }
     allBonuses() {
-        const unique = {};
-        this.options.forEach(option => {
-            var _a;
-            (_a = option.bonuses) === null || _a === void 0 ? void 0 : _a.forEach(bonus => {
-                if (bonus.modalId && !unique[bonus.modalId]) {
-                    unique[bonus.modalId] = bonus;
-                }
-            });
-        });
-        return Object.values(unique);
+        return this.options.flatMap(option => option.bonuses || []);
     }
     getTheme() {
         if (this.darkMode) {
@@ -216,10 +207,10 @@ export class TetCompareCardV2 {
         }
         return this.theme;
     }
-    benefitHandler(benefit) {
+    benefitHandler(benefit, isDropdownType = false) {
         const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
         const benefitAsImg = !!benefit.img;
-        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))));
+        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))));
     }
     /**
      * Renders the card body.
@@ -274,7 +265,7 @@ export class TetCompareCardV2 {
                     "bonuss--inactive": !isActive
                 }, key: bonus.modalId }, 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))), 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) => {
+            _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) => {
             const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
             const benefitAsImg = !!benefit.img;
             const isPreselected = this.preselectedKeys.includes(benefit.toggleKey);
@@ -285,7 +276,7 @@ export class TetCompareCardV2 {
         }))), 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: {
                 'secondary-link': true
-            } }, this.secondaryLinkOpenBlank ? (h("a", { 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" }) : ''));
+            } }, 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" }) : ''));
     }
     render() {
         if (this.showLoader) {