@tet/tet-components 1.3.107-staging → 1.3.108-staging

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

@@ -7684,13 +7684,14 @@
 
 .tet-electricity {
   --compare-card-background-color: transparent;
-  background: radial-gradient(100% 100% at 0% 0%, #fefbf6 0%, #fbf0d8 100%);
+  background: radial-gradient(116.09% 141.42% at 0% 0%, var(--tc-gradient-yellow-lin1, rgb(254, 251, 246)) 0%, var(--tc-gradient-yellow-lin2, rgb(251, 240, 216)) 100%);
 }
 .tet-electricity.color-icons {
-  --compare-card-bullet-point-icon-color: var(--tc-yellow-40);
+  --compare-card-bullet-point-icon-color: var(--tc-text-primary);
 }
-.tet-electricity.card.best-choice {
-  --compare-card-border-color: var(--tc-yellow-30);
+.tet-electricity.card .best-choice-title {
+  background: var(--tc-yellow-40);
+  color: var(--tc-text-primary);
 }
 
 .tet-internet {
@@ -8048,17 +8049,17 @@
 }
 .best-choice-title.left, .best-choice-title.right {
   background: rgb(121, 232, 145);
-  top: -0.125rem;
+  top: 0;
   border-radius: 0 1.5rem 0 1rem;
   color: rgb(43, 82, 51);
   font-family: var(--font-family-content);
 }
 .best-choice-title.left {
-  left: -0.125rem;
+  left: 0;
   border-radius: 1.5rem 0 1rem 0;
 }
 .best-choice-title.right {
-  right: -0.125rem;
+  right: 0;
   border-radius: 0 1.5rem 0 1rem;
 }
 .best-choice-title.active {
@@ -8159,11 +8160,20 @@
 .title-wrapper .sub-title .info-item .icon {
   cursor: pointer;
 }
+.title-wrapper .info-title {
+  font: 400 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
+  color: var(--compare-card-title-text-color);
+  margin-bottom: 1rem;
+}
 
 .bullet-points-wrapper {
   margin-bottom: 0.75rem;
   line-height: 1.5rem;
 }
+.bullet-points-wrapper.bottom {
+  margin-top: 2rem;
+  margin-bottom: 0;
+}
 .bullet-points-wrapper .bullet-point {
   font: 400 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
   color: var(--compare-card-bullet-point-text-color);

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

@@ -234,7 +234,7 @@ export class TetCompareCard {
      * @returns rendered card body.
      */
     renderCard() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
                 'card': true,
                 [`${this.currentCardType}`]: true,
@@ -259,14 +259,14 @@ 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'))) : ('')))) : (''), 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: {
+            } }, 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: {
                 'price-wrapper': true,
                 'price-wrap': this.options.priceWrap,
                 'price-flex-column': this.priceShownVertically
             } }, h("div", { class: "price-container" }, this.options.pricePrefix && h("div", { class: "price-prefix", innerHTML: this.options.pricePrefix }), h("div", { class: "new-price translation-none" }, parseFloat(this.options.price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.options.currency), this.renderTooltip('priceInfo'))), this.options.oldPrice ? (h("div", { class: "old-price-container" }, h("div", { class: "old-price translation-none" }, parseFloat(this.options.oldPrice.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "old-currency" }, this.options.currency))) : (''), this.options.priceBadge ? h("div", { class: "price-badge" }, this.options.priceBadge) : '')) : (''), this.showHelper ? (h("div", { class: "helper" }, this.options.term ? h("div", { class: "term" }, this.options.term) : '', this.options.termText ? h("div", { class: "term-text", innerHTML: this.options.termText }) : '', h("span", { innerHTML: this.options.helper }))) : (''), this.isNetflixCard && this.options.selectOptions !== undefined ? (h("div", { class: "select" }, h("tet-dropdown", { id: "dropdown", class: "cards-dropdown", theme: this.darkMode ? 'dark' : 'light', "button-label": "", "label-logo": this.options.selectOptions[0].labelLogo, "label-right": this.options.selectOptions[0].labelRight, "label-right-color": this.options.selectOptions[0].labelRightColor, "close-on-selection": true, options: this.options.selectOptions, "flex-layout": true }))) : ('')), h("div", { class: "button-wrapper" }, this.renderButton(), h("div", { class: "description-wrapper js-resize-divide-slot" }, h("slot", { name: "description-slot" })), this.options.secondaryLink && this.options.secondaryLinkText && (h("div", { class: {
                 'secondary-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.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" }, (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.bulletPoints) === null || _d === void 0 ? void 0 : _d.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" }, (_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 ?
             h("div", { "data-attribute": "price-prefix" }, this.options.pricePrefix)
             : '', this.options.priceInfo ?
             h("div", { "data-attribute": "price-info" }, this.options.priceInfo)

package/dist/components/{p-78f36947.js → p-215ddf03.js}

@@ -3,7 +3,7 @@ import { e as endpoints, A as ApiRequest } from './p-813a10ca.js';
 import { g as generateFormUrl } from './p-6e631dc7.js';
 import { d as defineCustomElement$7 } from './p-affe13a1.js';
 import { d as defineCustomElement$6 } from './p-5af39094.js';
-import { d as defineCustomElement$5 } from './p-9810ed43.js';
+import { d as defineCustomElement$5 } from './p-6651bfbc.js';
 import { d as defineCustomElement$4 } from './p-f12bd355.js';
 import { d as defineCustomElement$3 } from './p-d7ee107e.js';
 import { d as defineCustomElement$2 } from './p-41bb5fa4.js';