@tet/tet-components 1.3.58-testing → 1.3.59-staging

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

@@ -5455,7 +5455,7 @@
   --tc-blue-50: rgba(21, 85, 185, 1);
   --tc-blue-40: rgb(25, 98, 212);
   --tc-blue-30: rgba(78, 135, 222, 1);
-  --tc-blue-20: rgba(78, 135, 222, 1);
+  --tc-blue-20: rgba(131,172,232, 1);
   --tc-blue-10: rgba(184, 208, 242, 1);
   --tc-blue-00: rgba(237, 245, 252, 1);
   --tc-green-80: rgba(31, 66, 45, 1);
@@ -5710,20 +5710,20 @@
    */
   display: inline-block;
   flex: 1 0 0;
-  --compare-card-background-color: rgb(235, 237, 239);
+  --compare-card-background-color: var(--tc-layer-tertiary);
   --compare-card-border-color: transparent;
-  --compare-card-best-choice-text-color: rgb(10, 11, 13);
-  --compare-card-divider-border-color: rgb(192, 197, 206);
-  --compare-card-title-text-color: rgb(10, 11, 13);
-  --compare-card-bullet-point-text-color: rgb(10, 11, 13);
-  --compare-card-price-text-color: rgb(10, 11, 13);
-  --compare-card-old-price-text-color: rgb(88, 99, 116);
-  --compare-card-helper-text-color: rgb(88, 99, 116);
-  --compare-card-secondary-link-text-color: rgb(88, 99, 116);
+  --compare-card-best-choice-text-color: var(--tc-text-black-permanent-dark);
+  --compare-card-divider-border-color: var(--tc-border-tertiary);
+  --compare-card-title-text-color: var(--tc-text-primary);
+  --compare-card-bullet-point-text-color: var(--tc-text-primary);
+  --compare-card-price-text-color: var(--tc-text-primary);
+  --compare-card-old-price-text-color: var(--tc-text-tertiary);
+  --compare-card-helper-text-color: var(--tc-text-secondary);
+  --compare-card-secondary-link-text-color: var(--tc-text-tertiary);
   --compare-card-hover-box-shadow: 0 0 0.0625rem rgba(10, 11, 13, 0.08), 0 0.1875rem 0.25rem rgba(10, 11, 13, 0.12);
-  --compare-card-info-icon-color: rgb(67, 75, 86);
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
-  --compare-card-price-icon-color: rgb(67, 75, 86);
+  --compare-card-info-icon-color: var(--tc-grey-70);
+  --compare-card-bullet-point-icon-color: var(--tc-text-primary);
+  --compare-card-price-icon-color: var(--tc-grey-70);
   --compare-card-padding: 2rem;
   --compare-card-border-radius: 1.5rem;
   --compare-card-price-padding: 0;
@@ -5739,7 +5739,7 @@
   --compare-card-thumbnail-display: flex;
   --compare-card-thumbnail-card-radius: 0 var(--compare-card-border-radius) var(--compare-card-border-radius) 0;
   --compare-card-thumbnail-card-width: 44rem;
-  --compare-card-background-netflix-color: var(--tc-background-primary);
+  --compare-card-background-netflix-color: var(--tc-layer-primary);
   --compare-card-helper-text: var(--tc-text-secondary);
   --compare-card-focus-outline-color: var(--tc-blue-40);
 }
@@ -5760,17 +5760,25 @@
   display: none;
 }
 
+.grey {
+  --tet-compare-card-best-choice-border: var(--tc-yellow-40);
+  --compare-card-background-color: transparent;
+  background: radial-gradient(110.2% 141.42% at 0% 0%, #FAFAFA 0%, #ECEDEE 100%);
+}
+.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.card.best-choice {
+  --compare-card-border-color: var(--tet-compare-card-best-choice-border);
+}
+
 .tet-tv {
   --tet-compare-card-best-choice-border: var(--tc-gradient-green-accent);
   --compare-card-background-color: transparent;
   background: radial-gradient(100% 100% at 0% 0%, #f8fff5 0%, #ddf2e6 100%);
 }
-.tet-tv.dark {
-  background: radial-gradient(100% 100% at 0% 0%, #203C2E 0%, #13290A 100%);
-  --tet-compare-card-best-choice-border: var(--tc-gradient-green-accent2-dark);
-}
 .tet-tv.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(66, 215, 128);
+  --compare-card-bullet-point-icon-color: var(--tc-green-30);
 }
 .tet-tv.card.best-choice {
   --compare-card-border-color: var(--tet-compare-card-best-choice-border);
@@ -5780,11 +5788,8 @@
   --compare-card-background-color: transparent;
   background: radial-gradient(100% 100% at 0% 0%, #f2fdff 0%, #fafeff 0.01%, #def0f8 100%);
 }
-.tet-tv-plus.dark {
-  background: radial-gradient(100% 100% at 0% 0%, #20333C 0%, #20333C 0.01%, #0A2329 100%);
-}
 .tet-tv-plus.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(52, 132, 244);
+  --compare-card-bullet-point-icon-color: rgb(31, 208, 214);
 }
 .tet-tv-plus.card.best-choice {
   --compare-card-border-color: rgb(111, 227, 231);
@@ -5794,28 +5799,22 @@
   --compare-card-background-color: transparent;
   background: radial-gradient(100% 100% at 0% 0%, #fff0eb 0%, #fffafa 0.01%, #ffd8cc 100%);
 }
-.tet-vtv.dark {
-  background: radial-gradient(100% 100% at 0% 0%, #3C2720 0%, #3C2720 0.01%, #290A0A 100%);
-}
 .tet-vtv.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(239, 119, 108);
+  --compare-card-bullet-point-icon-color: var(--tc-red-30);
 }
 .tet-vtv.card.best-choice {
-  --compare-card-border-color: rgb(243, 153, 145);
+  --compare-card-border-color: var(--tc-red-20);
 }
 
 .tet-electricity {
   --compare-card-background-color: transparent;
   background: radial-gradient(100% 100% at 0% 0%, #fefbf6 0%, #fbf0d8 100%);
 }
-.tet-electricity.dark {
-  background: radial-gradient(100% 100% at 0% 0%, #3C3320 0%, #291D0A 100%);
-}
 .tet-electricity.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(251, 200, 91);
+  --compare-card-bullet-point-icon-color: var(--tc-yellow-40);
 }
 .tet-electricity.card.best-choice {
-  --compare-card-border-color: rgb(249, 212, 134);
+  --compare-card-border-color: var(--tc-yellow-30);
 }
 
 .tet-internet {
@@ -5823,12 +5822,8 @@
   --compare-card-background-color: transparent;
   background: radial-gradient(100% 100% at 0% 0%, #fbfdff 0%, #dceeff 100%);
 }
-.tet-internet.dark {
-  background: radial-gradient(100% 100% at 0% 0%, #202E3C 0%, #0A1A29 100%);
-  --tet-compare-card-best-choice-border: var(--tc-gradient-blue-accent-dark);
-}
 .tet-internet.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(52, 132, 244);
+  --compare-card-bullet-point-icon-color: var(--tc-blue-30);
 }
 .tet-internet.card.best-choice {
   --compare-card-border-color: var(--tet-compare-card-best-choice-border);
@@ -5839,110 +5834,102 @@
   --compare-card-background-color: transparent;
   background: radial-gradient(100% 100% at 0% 0%, #fcfbff 0%, #e5e5ff 100%);
 }
-.tet-bundles.dark {
-  background: radial-gradient(100% 100% at 0% 0%, #20203C 0%, #130A29 100%);
-  --tet-compare-card-best-choice-border: var(--tc-gradient-purple-accent-dark);
-}
 .tet-bundles.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(149, 116, 231);
+  --compare-card-bullet-point-icon-color: var(--tc-violet-40);
 }
 .tet-bundles.card.best-choice {
   --compare-card-border-color: var(--tet-compare-card-best-choice-border);
 }
 
-.classic.dark {
-  background: radial-gradient(100% 100% at 0% 0%, #2E2E2E 0%, #191919 100%);
-}
-
 .tet-business-purple {
-  --compare-card-background-color: rgb(239, 236, 248);
+  --compare-card-background-color: var(--tc-violet-00);
 }
 .tet-business-purple.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
+  --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
 }
 .tet-business-purple.card.best-choice {
-  --compare-card-border-color: rgb(10, 11, 13);
+  --compare-card-border-color: var(--tc-border-primary);
 }
 .tet-business-purple.card .best-choice-title {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
+  --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
 }
 
 .tet-business-green {
-  --compare-card-background-color: rgb(231, 249, 238);
+  --compare-card-background-color: var(--tc-green-00);
 }
 .tet-business-green.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
+  --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
 }
 .tet-business-green.card.best-choice {
-  --compare-card-border-color: rgb(10, 11, 13);
+  --compare-card-border-color: var(--tc-border-primary);
 }
 .tet-business-green.card .best-choice-title {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
+  --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
 }
 
 .tet-business-red {
-  --compare-card-background-color: rgb(252, 238, 238);
+  --compare-card-background-color: var(--tc-red-00);
 }
 .tet-business-red.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
+  --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
 }
 .tet-business-red.card.best-choice {
-  --compare-card-border-color: rgb(10, 11, 13);
+  --compare-card-border-color: var(--tc-border-primary);
 }
 .tet-business-red.card .best-choice-title {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
+  --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
 }
 
 .tet-business-yellow {
-  --compare-card-background-color: rgb(252, 244, 227);
+  --compare-card-background-color: var(--tc-yellow-00);
 }
 .tet-business-yellow.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
+  --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
 }
 .tet-business-yellow.card.best-choice {
-  --compare-card-border-color: rgb(10, 11, 13);
+  --compare-card-border-color: var(--tc-border-primary);
 }
 .tet-business-yellow.card .best-choice-title {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
+  --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
 }
 
 .tet-business-mint {
   --compare-card-background-color: rgb(229, 250, 250);
 }
 .tet-business-mint.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
+  --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
 }
 .tet-business-mint.card.best-choice {
-  --compare-card-border-color: rgb(10, 11, 13);
+  --compare-card-border-color: var(--tc-border-primary);
 }
 .tet-business-mint.card .best-choice-title {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
+  --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
 }
 
 .tet-business-blue {
-  --compare-card-background-color: rgb(237, 245, 252);
+  --compare-card-background-color: var(--tc-blue-00);
 }
 .tet-business-blue.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
+  --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
 }
 .tet-business-blue.card.best-choice {
-  --compare-card-border-color: rgb(10, 11, 13);
+  --compare-card-border-color: var(--tc-border-primary);
 }
 .tet-business-blue.card .best-choice-title {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
+  --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
 }
 
 .tet-business-default {
-  --compare-card-background-color: rgb(247, 247, 247);
+  --compare-card-background-color: var(--tc-grey-10);
 }
 .tet-business-default.color-icons {
-  --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
+  --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
 }
 .tet-business-default.card.best-choice {
-  --compare-card-border-color: rgb(10, 11, 13);
+  --compare-card-border-color: var(--tc-border-primary);
 }
 .tet-business-default.card .best-choice-title {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
+  --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
 }
 
 .card {
@@ -5957,19 +5944,18 @@
   background-repeat: no-repeat;
 }
 .card.dark {
-  --compare-card-background-color: var(--tc-background-primary-dark);
-  --compare-card-best-choice-text-color: var(--tc-button-text-primary-dark);
-  --compare-card-divider-border-color: rgb(192, 197, 206);
+  --compare-card-background-color: var(--tc-layer-primary-dark);
+  --compare-card-divider-border-color: var(--tc-border-tertiary-dark);
   --compare-card-title-text-color: var(--tc-text-primary-dark);
   --compare-card-bullet-point-text-color: var(--tc-text-primary-dark);
   --compare-card-price-text-color: var(--tc-text-primary-dark);
   --compare-card-old-price-text-color: var(--tc-text-tertiary-dark);
   --compare-card-helper-text-color: var(--tc-text-secondary-dark);
   --compare-card-secondary-link-text-color: var(--tc-text-tertiary-dark);
-  --compare-card-info-icon-color: var(--tc-tooltip-text-inverse-secondary-dark);
+  --compare-card-info-icon-color: var(--tc-grey-70-dark);
   --compare-card-bullet-point-icon-color: var(--tc-text-primary-dark);
   --compare-card-price-icon-color: var(--tc-tooltip-text-inverse-secondary-dark);
-  --compare-card-background-netflix-color: var(--tc-background-primary-dark);
+  --compare-card-background-netflix-color: var(--tc-layer-primary-dark);
   --compare-card-focus-outline-color: var(--tc-blue-40-dark);
 }
 .card:focus-visible {
@@ -6104,11 +6090,11 @@
   }
 }
 .card:hover {
-  --compare-card-border-color: rgb(192, 197, 206);
+  --compare-card-border-color: var(--tc-grey-40);
   box-shadow: var(--compare-card-hover-box-shadow);
 }
 .card.hide-best-choice-border:hover {
-  --compare-card-border-color: rgb(192, 197, 206);
+  --compare-card-border-color: var(--tc-grey-40);
   border: 0.125rem solid var(--compare-card-border-color);
 }
 .card.netflix {
@@ -6131,43 +6117,25 @@
   border: 0.125rem solid #E50914;
   outline: unset;
 }
-.card.netflix .best-choice-title.left, .card.netflix .best-choice-title.right {
+.card.netflix .best-choice-title {
   background: rgb(229, 9, 20);
-  color: rgb(255, 255, 255);
-}
-.card .is-selected__icon {
-  display: none;
-}
-.card.is-selected {
-  --compare-card-background-color: rgb(255, 255, 255);
-  --compare-card-border-color: rgb(0, 96, 245);
-}
-.card.is-selected .is-selected__icon {
-  --icon-color: rgb(0, 96, 245);
-  display: block;
-  position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
+  color: var(--compare-card-best-choice-text-color);
 }
 .card:before {
   content: "";
   position: absolute;
   left: 15%;
   right: 14%;
-  fill: rgb(0, 96, 245);
+  fill: var(--tc-blue-40);
 }
 .card.best-choice {
   margin-top: 0;
-  --compare-card-border-color: rgb(117, 225, 162);
+  --compare-card-border-color: var(--tc-green-20);
 }
 .card.best-choice.card-list {
   height: 100%;
   margin-top: 0;
 }
-.card.best-choice.is-selected {
-  --compare-card-best-choice-text-color: rgb(255, 255, 255);
-  --compare-card-border-color: rgb(0, 96, 245);
-}
 
 .best-choice-title {
   position: absolute;
@@ -6175,7 +6143,7 @@
   display: flex;
   visibility: hidden;
   margin: 0 auto;
-  color: var(--compare-card-title-text-color);
+  color: var(--compare-card-best-choice-text-color);
   background: var(--compare-card-border-color);
   padding: 0.125rem 1.5rem 0.25rem;
   font-weight: 600;
@@ -6466,7 +6434,7 @@
   border-radius: var(--compare-card-border-radius);
 }
 .card-wrapper:hover {
-  --compare-card-border-color: rgb(192, 197, 206);
+  --compare-card-border-color: var(--tc-grey-40);
   box-shadow: var(--compare-card-hover-box-shadow);
 }
 .card-wrapper .card:hover {

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

@@ -126,7 +126,6 @@ export class TetCompareCard {
         this.index = undefined;
         this.cardType = 'regular';
         this.theme = 'classic';
-        this.canSelect = false;
         this.colorIcons = false;
         this.fullHeight = true;
         this.bestChoice = false;
@@ -152,21 +151,10 @@ export class TetCompareCard {
         this.showHelper = true;
         this.isNetflixCard = false;
         this.darkMode = false;
-        this.darkModeOverride = false;
-        this.isSelected = false;
         this.currentCardType = this.cardType;
     }
     onClick() {
         this.selectEvent.emit({ index: this.index, target: this });
-        if (this.canSelect) {
-            this.setState(true);
-        }
-    }
-    /**
-     * @param state
-     */
-    async setState(state) {
-        this.isSelected = state;
     }
     componentWillLoad() {
         if (this.cardType === 'wide60-40') {
@@ -177,7 +165,6 @@ export class TetCompareCard {
         }
         const parentElement = this.getParentElement();
         if (parentElement.children.length > 1) {
-            console.log(parentElement.children);
             this.resizeObserver = new ResizeObserver(this.emitResize);
             parentElement.addEventListener('tet-card-resize', this.resizeCard);
         }
@@ -203,8 +190,14 @@ export class TetCompareCard {
     getDropdownTheme() {
         return this.options.dropdownTheme;
     }
-    get isDarkMode() {
-        return this.darkMode && (!this.isNetflixCard || this.darkModeOverride);
+    getTheme() {
+        if (this.darkMode) {
+            if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
+                return `dark ${this.theme}`;
+            }
+            return 'dark grey';
+        }
+        return this.theme;
     }
     /**
      * Renders the card body.
@@ -215,19 +208,17 @@ export class TetCompareCard {
         return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
                 'card': true,
                 [`${this.currentCardType}`]: true,
-                [`${this.theme}`]: true,
+                [`${this.getTheme()}`]: true,
                 'best-choice': this.bestChoice,
                 'hide-best-choice-border': this.hideBestChoiceBorder,
                 'with-border': this.withBorder,
                 'full-height': this.fullHeight,
                 'color-icons': this.colorIcons,
-                'is-selected': this.isSelected,
                 'card-list': this.cardList,
                 'thumbnail': !!this.thumbnail,
                 'netflix': this.isNetflixCard,
                 'dark-mode': this.darkMode,
-                'dark': this.isDarkMode,
-            }, style: { background: this.cardBackgroundColor } }, h("div", { class: {
+            }, style: { backgroundColor: this.cardBackgroundColor } }, h("div", { class: {
                 'best-choice-title': true,
                 'active': this.bestChoice,
                 [`${this.bestChoiceTextPosition}`]: true
@@ -244,7 +235,7 @@ export class TetCompareCard {
             } }, 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), h("div", { class: "price-info", innerHTML: this.options.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.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.getDropdownTheme(), "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.options.giftModalAttribute ? (h("div", { class: "button", "data-form-link": this.options.link, innerHTML: this.options.giftModalAttribute })) : this.options.linkOpenBlank ? (h("a", { target: "_blank", href: this.options.link, "data-form-link": this.options.link, tabIndex: -1 }, h("div", { class: "button", innerHTML: this.options.button }))) : (h("a", { href: this.options.link, "data-form-link": this.options.link, tabIndex: -1 }, h("div", { class: "button", innerHTML: this.options.button }))), 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("tet-icon", { name: "check", class: "is-selected__icon" }), 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 ? parseFloat(this.options.price.replace(',', '.')).toFixed(2).replace('.', ',') : ''), h("div", { "data-attribute": "old-price" }, this.options.oldPrice ? parseFloat(this.options.oldPrice.replace(',', '.')).toFixed(2).replace('.', ',') : ''), 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.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 ? parseFloat(this.options.price.replace(',', '.')).toFixed(2).replace('.', ',') : ''), h("div", { "data-attribute": "old-price" }, this.options.oldPrice ? parseFloat(this.options.oldPrice.replace(',', '.')).toFixed(2).replace('.', ',') : ''), 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 ?
             h("div", { "data-attribute": "price-prefix" }, this.options.pricePrefix)
             : '', this.options.priceInfo ?
             h("div", { "data-attribute": "price-info" }, this.options.priceInfo)
@@ -328,7 +319,7 @@ export class TetCompareCard {
                 "mutable": false,
                 "complexType": {
                     "original": "ServiceAvailabilityServicesCategoryTheme",
-                    "resolved": "\"classic\" | \"dark\" | \"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\"",
+                    "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": {
                             "location": "import",
@@ -347,24 +338,6 @@ export class TetCompareCard {
                 "reflect": false,
                 "defaultValue": "'classic'"
             },
-            "canSelect": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines whether the card can be selected."
-                },
-                "attribute": "can-select",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "colorIcons": {
                 "type": "boolean",
                 "mutable": false,
@@ -816,30 +789,11 @@ export class TetCompareCard {
                 "attribute": "dark-mode",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "darkModeOverride": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "This prop allows to use dark theme cards when isNetflixCard=true"
-                },
-                "attribute": "dark-mode-override",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isSelected": {},
             "currentCardType": {}
         };
     }
@@ -867,34 +821,6 @@ export class TetCompareCard {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "setState": {
-                "complexType": {
-                    "signature": "(state: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "state",
-                            "type": "boolean",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "param",
-                            "text": "state"
-                        }]
-                }
-            }
-        };
-    }
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{