@tet/tet-components 1.3.11-testing → 1.3.12-production

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

@@ -5362,7 +5362,7 @@
   /**
   * Colors
   */
-  --tc-grey-100-dark: rgb(255, 255, 255);
+  --tc-grey-100-dark: rgba(251, 251, 251, 1);
   --tc-grey-90-dark: rgba(247, 247, 247, 1);
   --tc-grey-80-dark: rgba(235, 237, 239, 1);
   --tc-grey-70-dark: rgba(215, 219, 224, 1);
@@ -5427,12 +5427,13 @@
   --tc-background-secondary-dark: var(--tc-grey-10-dark);
   --tc-background-tertiary-dark: var(--tc-grey-20-dark);
   --tc-background-quaternary-dark: var(--tc-grey-30-dark);
+  --tc-background-white-black-dark: rgb(0, 0, 0);
   --tc-layer-primary-dark: var(--tc-grey-00-dark);
   --tc-layer-primary-black-dark: var(--tc-grey-00-dark);
   --tc-layer-secondary-dark: var(--tc-grey-10-dark);
   --tc-layer-tertiary-dark: var(--tc-grey-20-dark);
   --tc-layer-quaternary-dark: var(--tc-grey-30-dark);
-  --tc-layer-inverse-primary-dark: var(--tc-grey-100-dark);
+  --tc-layer-inverse-primary-dark: rgb(255, 255, 255);
   --tc-icon-primary-dark: var(--tc-grey-100-dark);
   --tc-icon-white-dark: var(--tc-grey-100-dark);
   --tc-icon-secondary-dark: var(--tc-grey-50-dark);
@@ -5446,12 +5447,47 @@
   --tc-border-inverse-secondary-dark: var(--tc-grey-50-dark);
   --tc-border-inverse-tertiary-dark: var(--tc-grey-60-inverse-dark);
   --tc-border-inverse-quaternary-dark: var(--tc-grey-70-dark);
+  --tc-alert-info-dark: var(--tc-blue-80-dark);
+  --tc-alert-success-dark: var(--tc-green-80-dark);
+  --tc-alert-warning-dark: var(--tc-yellow-80-dark);
+  --tc-alert-error-dark: var(--tc-red-80-dark);
+  --tc-alert-neutral-dark: var(--tc-violet-80-dark);
+  --tc-alert-white-dark: var(--tc-grey-20-dark);
   --tc-alert-accent-info-dark: rgb(52, 129, 247);
   --tc-alert-accent-success-dark: rgb(48, 192, 108);
   --tc-alert-accent-warning-dark: rgb(232, 174, 48);
   --tc-alert-accent-error-dark: rgb(235, 90, 77);
   --tc-alert-accent-neutral-dark: rgb(172, 147, 236);
   --tc-alert-accent-orange-dark: rgb(220, 78, 34);
+  --tc-alert-colorwave-info-dark: var(--tc-blue-10-dark);
+  --tc-alert-colorwave-success-dark: var(--tc-green-10-dark);
+  --tc-alert-colorwave-warning-dark: var(--tc-yellow-10-dark);
+  --tc-alert-colorwave-error-dark: var(--tc-red-10-dark);
+  --tc-alert-colorwave-neutral-dark: var(--tc-violet-10-dark);
+  --tc-modal-primary-dark: var(--tc-grey-20-dark);
+  --tc-gradient-green-lin1-dark: rgba(32, 60, 46, 1);
+  --tc-gradient-green-lin2-dark: rgba(19, 41, 10, 1);
+  --tc-gradient-green-accent-dark: rgba(19, 41, 10, 1);
+  --tc-gradient-mint-lin1-dark: rgba(32, 51, 60, 1);
+  --tc-gradient-mint-lin2-dark: rgba(32, 51, 60, 1);
+  --tc-gradient-mint-lin3-dark: rgba(10, 35, 41, 1);
+  --tc-gradient-mint-accent-dark: rgba(10, 35, 41, 1);
+  --tc-gradient-red-lin1-dark: rgba(60, 39, 32, 1);
+  --tc-gradient-red-lin2-dark: rgba(60, 39, 32, 1);
+  --tc-gradient-red-lin3-dark: rgba(41, 10, 10, 1);
+  --tc-gradient-red-accent-dark: rgba(126, 40, 32, 1);
+  --tc-gradient-yellow-lin1-dark: rgba(60, 51, 32, 1);
+  --tc-gradient-yellow-lin2-dark: rgba(41, 29, 10, 1);
+  --tc-gradient-yellow-accent-dark: rgba(153, 109, 10, 1);
+  --tc-gradient-blue-lin1-dark: rgba(32, 46, 60, 1);
+  --tc-gradient-blue-lin2-dark: rgba(10, 26, 41, 1);
+  --tc-gradient-blue-accent-dark: rgba(20, 60, 123, 1);
+  --tc-gradient-purple-lin1-dark: rgba(32, 32, 60, 1);
+  --tc-gradient-purple-lin2-dark: rgba(19, 10, 41, 1);
+  --tc-gradient-purple-accent-dark: rgba(68, 69, 126, 1);
+  --tc-gradient-grey-lin1-dark: rgba(46, 46, 46, 1);
+  --tc-gradient-grey-lin2-dark: rgba(25, 25, 25, 1);
+  --tc-gradient-grey-accent-dark: var(--tc-grey-30-dark);
   /**
   * Interactions
   */
@@ -5477,15 +5513,15 @@
   --tc-button-icon-primary-dark: var(--tc-grey-00-dark);
   --tc-button-icon-secondary-dark: var(--tc-grey-100-dark);
   --tc-button-icon-disabled-dark: rgba(10, 11, 13, 0.32);
-  --tc-button-icon-white-permanent-dark: rgb(255, 255, 255);
-  --tc-button-icon-black-permanent-dark: rgb(10, 11, 13);
+  --tc-button-icon-white-permanent-dark: var(--tc-grey-100-dark);
+  --tc-button-icon-black-permanent-dark: var(--tc-grey-00-dark);
   --tc-button-icon-inverse-primary-dark: var(--tc-grey-100-dark);
   --tc-button-icon-inverse-secondary-dark: var(--tc-grey-00-dark);
   --tc-button-icon-inverse-disabled-dark: rgba(255, 255, 255, 0.49);
   --tc-menu-item-hover-dark: rgba(235, 237, 239, 0.12);
   --tc-menu-item-pressed-dark: rgba(235, 237, 239, 0.24);
   --tc-menu-item-active-dark: rgba(29, 50, 84, 1);
-  --tc-theme-switcher-background-light-theme-default-dark: var(--tc-grey-100-dark);
+  --tc-theme-switcher-background-light-theme-default-dark: rgb(255, 255, 255);
   --tc-theme-switcher-background-light-theme-hover-dark: var(--tc-grey-90-dark);
   --tc-theme-switcher-background-light-theme-pressed-dark: var(--tc-grey-80-dark);
   --tc-theme-switcher-background-light-theme-selected-dark: var(--tc-grey-90-dark);
@@ -5502,12 +5538,12 @@
   --tc-theme-switcher-border-dark-theme-pressed-dark: var(--tc-grey-50-dark);
   --tc-theme-switcher-border-dark-theme-selected-dark: var(--tc-grey-100-dark);
   --tc-theme-switcher-icon-light-theme-dark: var(--tc-grey-00-dark);
-  --tc-theme-switcher-icon-dark-theme-dark: var(--tc-grey-100-dark);
+  --tc-theme-switcher-icon-dark-theme-dark: rgb(255, 255, 255);
   --tc-checkbox-default-dark: rgb(0, 0, 0);
   --tc-checkbox-hover-dark: rgba(235, 237, 239, 0.12);
   --tc-checkbox-pressed-dark: rgba(235, 237, 239, 0.24);
   --tc-checkbox-disabled-dark: rgba(235, 237, 239, 0.24);
-  --tc-checkbox-active-default-dark: var(--tc-grey-100-dark);
+  --tc-checkbox-active-default-dark: rgb(255, 255, 255);
   --tc-checkbox-active-hover-dark: rgba(235, 237, 239, 0.9);
   --tc-checkbox-active-pressed-dark: rgba(235, 237, 239, 0.8);
   --tc-checkbox-active-disabled-dark: rgba(235, 237, 239, 0.3);
@@ -5516,12 +5552,12 @@
   --tc-radio-button-hover-dark: rgba(235, 237, 239, 0.12);
   --tc-radio-button-pressed-dark: rgba(235, 237, 239, 0.24);
   --tc-radio-button-disabled-dark: rgba(235, 237, 239, 0.24);
-  --tc-radio-button-active-default-dark: var(--tc-grey-100-dark);
+  --tc-radio-button-active-default-dark: rgb(255, 255, 255);
   --tc-radio-button-active-hover-dark: rgba(235, 237, 239, 0.9);
   --tc-radio-button-active-pressed-dark: rgba(235, 237, 239, 0.8);
   --tc-radio-button-active-disabled-dark: rgba(235, 237, 239, 0.3);
   --tc-radio-button-active-focus-dark: rgba(35, 40, 46, 0.9);
-  --tc-toggle-button-active-default-dark: var(--tc-grey-100-dark);
+  --tc-toggle-button-active-default-dark: rgb(255, 255, 255);
   --tc-toggle-button-active-hover-dark: rgba(235, 237, 239, 0.9);
   --tc-toggle-button-active-disabled-dark: var(--tc-grey-20-dark);
   --tc-toggle-button-default-dark: var(--tc-grey-30-dark);
@@ -5536,6 +5572,7 @@
   --tc-tooltip-text-inverse-secondary-dark: var(--tc-grey-70-dark);
   --tc-tooltip-layer-primary-dark: var(--tc-grey-90-dark);
   --tc-tooltip-layer-secondary-dark: var(--tc-grey-20-dark);
+  --tc-search-active-focus-dark: rgba(35, 40, 46, 0.9);
   /**
   * Shadows
   */
@@ -5552,7 +5589,9 @@
   --tc-elevation-six-layer1-dark: 0 1px 7px 0 rgba(10, 11, 13, 0.2),
   0 18px 30px 0 rgba(10, 11, 13, 0.36);
   --tc-button-hover-shadow-centre-dark: 0 0 1px 0 rgba(0, 0, 0, 0.2);
-  --tc-button-hover-shadow-raised-dark: 0 0 1px 3px rgba(0, 0, 0, 0.37);
+  --tc-button-hover-shadow-raised-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.37);
+  --tc-toggle-button-hover-shadow-centre-dark: 0 0 0 8px rgba(185, 192, 202, 0.2);
+  --tc-toggle-button-hover-shadow-raised-dark: 0 0 0 8px rgba(255, 255, 255, 0.2);
 }
 
 /**
@@ -5577,7 +5616,7 @@
   --tc-grey-30: rgba(215, 219, 224, 1);
   --tc-grey-20: rgba(235, 237, 239, 1);
   --tc-grey-10: rgba(247, 247, 247, 1);
-  --tc-grey-00: rgb(255, 255, 255);
+  --tc-grey-00: rgba(251, 251, 251, 1);
   --tc-blue-80: rgba(8, 45, 104, 1);
   --tc-blue-70: rgba(12, 58, 131, 1);
   --tc-blue-60: rgba(17, 72, 158, 1);
@@ -5631,7 +5670,8 @@
   --tc-background-secondary: var(--tc-grey-10);
   --tc-background-tertiary: var(--tc-grey-20);
   --tc-background-quaternary: var(--tc-grey-30);
-  --tc-layer-primary: var(--tc-grey-00);
+  --tc-background-white-black: rgb(255, 255, 255);
+  --tc-layer-primary: rgb(255, 255, 255);
   --tc-layer-primary-black: var(--tc-grey-100);
   --tc-layer-secondary: var(--tc-grey-10);
   --tc-layer-tertiary: var(--tc-grey-20);
@@ -5650,12 +5690,47 @@
   --tc-border-inverse-secondary: var(--tc-grey-50);
   --tc-border-inverse-tertiary: var(--tc-grey-60-inverse);
   --tc-border-inverse-quaternary: var(--tc-grey-70);
+  --tc-alert-info: var(--tc-blue-00);
+  --tc-alert-success: var(--tc-green-00);
+  --tc-alert-warning: var(--tc-yellow-00);
+  --tc-alert-error: var(--tc-red-00);
+  --tc-alert-neutral: var(--tc-violet-00);
+  --tc-alert-white: rgb(255, 255, 255);
   --tc-alert-accent-info: rgb(25, 98, 212);
   --tc-alert-accent-success: rgb(22, 197, 95);
   --tc-alert-accent-warning: rgb(255, 182, 26);
   --tc-alert-accent-error: rgb(233, 69, 54);
   --tc-alert-accent-neutral: rgb(149, 116, 231);
   --tc-alert-accent-orange: rgb(255, 88, 36);
+  --tc-alert-colorwave-info: var(--tc-blue-10);
+  --tc-alert-colorwave-success: var(--tc-green-10);
+  --tc-alert-colorwave-warning: var(--tc-yellow-10);
+  --tc-alert-colorwave-error: var(--tc-red-10);
+  --tc-alert-colorwave-neutral: var(--tc-violet-10);
+  --tc-modal-primary: rgb(255, 255, 255);
+  --tc-gradient-green-lin1: rgba(248, 255, 245, 1);
+  --tc-gradient-green-lin2: rgba(221, 242, 230, 1);
+  --tc-gradient-green-accent: var(--tc-green-20);
+  --tc-gradient-mint-lin1: rgba(242, 253, 255, 1);
+  --tc-gradient-mint-lin2: rgba(250, 254, 255, 1);
+  --tc-gradient-mint-lin3: rgba(222, 240, 248, 1);
+  --tc-gradient-mint-accent: rgba(111, 227, 231, 1);
+  --tc-gradient-red-lin1: rgba(255, 240, 235, 1);
+  --tc-gradient-red-lin2: rgba(255, 250, 250, 1);
+  --tc-gradient-red-lin3: rgba(255, 216, 204, 1);
+  --tc-gradient-red-accent: var(--tc-red-20);
+  --tc-gradient-yellow-lin1: rgba(254, 251, 246, 1);
+  --tc-gradient-yellow-lin2: rgba(251, 240, 216, 1);
+  --tc-gradient-yellow-accent: var(--tc-yellow-20);
+  --tc-gradient-blue-lin1: rgba(251, 253, 255, 1);
+  --tc-gradient-blue-lin2: rgba(220, 238, 255, 1);
+  --tc-gradient-blue-accent: var(--tc-blue-20);
+  --tc-gradient-purple-lin1: rgba(252, 251, 255, 1);
+  --tc-gradient-purple-lin2: rgba(229, 229, 255, 1);
+  --tc-gradient-purple-accent: rgba(185, 185, 255, 1);
+  --tc-gradient-grey-lin1: rgba(253, 253, 253, 1);
+  --tc-gradient-grey-lin2: rgba(237, 237, 237, 1);
+  --tc-gradient-grey-accent: var(--tc-grey-40);
   /**
   * Interactions
   */
@@ -5689,7 +5764,7 @@
   --tc-menu-item-hover: rgba(35, 40, 46, 0.06);
   --tc-menu-item-pressed: rgba(35, 40, 46, 0.12);
   --tc-menu-item-active: var(--tc-blue-00);
-  --tc-theme-switcher-background-light-theme-default: var(--tc-grey-00);
+  --tc-theme-switcher-background-light-theme-default: rgb(255, 255, 255);
   --tc-theme-switcher-background-light-theme-hover: var(--tc-grey-10);
   --tc-theme-switcher-background-light-theme-pressed: var(--tc-grey-20);
   --tc-theme-switcher-background-light-theme-selected: var(--tc-grey-10);
@@ -5706,32 +5781,32 @@
   --tc-theme-switcher-border-dark-theme-pressed: var(--tc-grey-50);
   --tc-theme-switcher-border-dark-theme-selected: var(--tc-grey-100);
   --tc-theme-switcher-icon-light-theme: var(--tc-grey-100);
-  --tc-theme-switcher-icon-dark-theme: var(--tc-grey-00);
-  --tc-checkbox-default: var(--tc-grey-00);
+  --tc-theme-switcher-icon-dark-theme: rgb(255, 255, 255);
+  --tc-checkbox-default: rgb(255, 255, 255);
   --tc-checkbox-hover: rgba(35, 40, 46, 0.06);
   --tc-checkbox-pressed: rgba(35, 40, 46, 0.12);
   --tc-checkbox-disabled: rgba(35, 40, 46, 0.12);
-  --tc-checkbox-active-default: var(--tc-grey-100);
+  --tc-checkbox-active-default: rgb(0, 0, 0);
   --tc-checkbox-active-hover: rgba(35, 40, 46, 0.9);
   --tc-checkbox-active-pressed: rgba(35, 40, 46, 0.8);
   --tc-checkbox-active-disabled: rgba(35, 40, 46, 0.16);
   --tc-checkbox-active-focus: rgba(235, 237, 239, 0.9);
-  --tc-radio-button-default: var(--tc-grey-00);
+  --tc-radio-button-default: rgb(255, 255, 255);
   --tc-radio-button-hover: rgba(35, 40, 46, 0.06);
   --tc-radio-button-pressed: rgba(35, 40, 46, 0.12);
   --tc-radio-button-disabled: rgba(35, 40, 46, 0.12);
-  --tc-radio-button-active-default: var(--tc-grey-100);
+  --tc-radio-button-active-default: rgb(0, 0, 0);
   --tc-radio-button-active-hover: rgba(35, 40, 46, 0.9);
   --tc-radio-button-active-pressed: rgba(35, 40, 46, 0.8);
   --tc-radio-button-active-disabled: rgba(35, 40, 46, 0.16);
   --tc-radio-button-active-focus: rgba(235, 237, 239, 0.9);
-  --tc-toggle-button-active-default: var(--tc-grey-100);
+  --tc-toggle-button-active-default: rgb(0, 0, 0);
   --tc-toggle-button-active-hover: rgba(35, 40, 46, 0.9);
   --tc-toggle-button-active-disabled: var(--tc-grey-20);
   --tc-toggle-button-default: var(--tc-grey-30);
   --tc-toggle-button-hover: var(--tc-grey-40);
   --tc-toggle-button-disabled: var(--tc-grey-20);
-  --tc-toggle-button-ellipse-default: var(--tc-grey-00);
+  --tc-toggle-button-ellipse-default: rgb(255, 255, 255);
   --tc-toggle-button-ellipse-disabled: var(--tc-grey-10);
   --tc-text-input-border-active: rgba(235, 237, 239, 0.9);
   --tc-tooltip-text-primary: var(--tc-grey-100);
@@ -5740,6 +5815,7 @@
   --tc-tooltip-text-inverse-secondary: var(--tc-grey-30);
   --tc-tooltip-layer-primary: var(--tc-grey-10);
   --tc-tooltip-layer-secondary: var(--tc-grey-80);
+  --tc-search-active-focus: rgba(235, 237, 239, 0.9);
   /**
   * Shadows
   */
@@ -5755,8 +5831,10 @@
   0 14px 25px 0 rgba(10, 11, 13, 0.14);
   --tc-elevation-six: 0 1px 7px 0 rgba(10, 11, 13, 0.06),
   0 18px 30px 0 rgba(10, 11, 13, 0.15);
-  --tc-button-hover-shadow-centre: 0 0 1px 0 rgba(0, 0, 0, 0.2);
-  --tc-button-hover-shadow-raised: 0 0 1px 3px rgba(10, 11, 13, 0.37);
+  --tc-button-hover-shadow-centre: 0 0 1px 0 rgba(10, 11, 13, 0.08);
+  --tc-button-hover-shadow-raised: 0 1px 3px 0 rgba(10, 11, 13, 0.12);
+  --tc-toggle-button-hover-shadow-centre: 0 0 0 8px rgba(86, 97, 113, 0.16);
+  --tc-toggle-button-hover-shadow-raised: 0 0 0 8px rgba(255, 255, 255, 0.3);
 }
 
 :host {
@@ -5813,6 +5891,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-grey-100-dark);
 }
 
 :host([card-type=regular]) {
@@ -5995,6 +6074,24 @@
   border: 0.125rem solid var(--compare-card-border-color);
   background-repeat: no-repeat;
 }
+.card.dark {
+  --compare-card-background-color: var(--tc-grey-00-dark);
+  --compare-card-best-choice-text-color: var(--tc-grey-00-dark);
+  --compare-card-divider-border-color: rgb(192, 197, 206);
+  --compare-card-title-text-color: var(--tc-grey-100-dark);
+  --compare-card-bullet-point-text-color: var(--tc-grey-100-dark);
+  --compare-card-price-text-color: var(--tc-grey-100-dark);
+  --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-info-icon-color: rgb(67, 75, 86);
+  --compare-card-bullet-point-icon-color: var(--tc-grey-100-dark);
+  --compare-card-price-icon-color: rgb(67, 75, 86);
+  --compare-card-background-netflix-color: var(--tc-grey-00-dark);
+}
+.card a {
+  color: var(--compare-card-price-text-color);
+}
 .card.hide-best-choice-border {
   border-color: transparent;
 }
@@ -6006,6 +6103,14 @@
   border: 0.125rem solid rgb(35, 40, 46);
   outline: unset;
 }
+.card.light.with-border {
+  outline: 0.0625rem solid rgb(35, 40, 46);
+  border: 0.125rem solid transparent;
+}
+.card.light.with-border:hover {
+  border: 0.125rem solid rgb(35, 40, 46);
+  outline: unset;
+}
 .card.full-height {
   height: 100%;
 }
@@ -6118,7 +6223,7 @@
   border: 0.125rem solid var(--compare-card-border-color);
 }
 .card.netflix {
-  --compare-card-background-color: #FFFFFF;
+  background-color: var(--compare-card-background-netflix-color);
   outline: 0.0625rem solid rgb(35, 40, 46);
   border: 0.125rem solid transparent;
 }

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

@@ -186,6 +186,16 @@ export class TetCompareCard {
     componentDidLoad() {
         this.observeResize();
     }
+    // Piemēram, mainīgais helper funkcija:
+    getDropdownTheme() {
+        var _a;
+        const t = (_a = this.options.dropdownTheme) !== null && _a !== void 0 ? _a : this.theme;
+        if (t === 'dark')
+            return 'dark';
+        if (t === 'mint')
+            return 'mint';
+        return 'light';
+    }
     /**
      * Renders the card body.
      * @returns rendered card body.
@@ -220,7 +230,7 @@ export class TetCompareCard {
                 '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), 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: "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.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: {
+            } }, 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" })));
@@ -302,8 +312,8 @@ export class TetCompareCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ServiceAvailabilityServicesCategoryTheme",
-                    "resolved": "\"classic\" | \"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\"",
+                    "original": "'light' | 'dark' | 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\"",
                     "references": {
                         "ServiceAvailabilityServicesCategoryTheme": {
                             "location": "import",

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

@@ -467,6 +467,17 @@
   display: block;
 }
 
+:host([theme=dark]) .card,
+:host([theme=dark]) {
+  --compare-card-background-color: black;
+  --compare-cards-background: var(--tc-background-primary-dark);
+  --compare-cards-card-background: var(--tc-background-secondary-dark);
+  --compare-cards-text-color: var(--tc-text-primary-dark);
+  --compare-cards-border-color: var(--tc-border-secondary-dark);
+  --compare-cards-link-color: var(--tc-text-link-dark);
+  --compare-cards-price-color: var(--tc-text-primary-dark);
+}
+
 .vat {
   color: var(--color-text-secondary);
   font: 400 0.75rem/1rem Inter, Gilroy, Arial, sans-serif;
@@ -506,6 +517,15 @@
   --compare-card-thumbnail-card-radius: var(--compare-cards-thumbnail-card-radius);
   --compare-card-thumbnail-card-width: var(--compare-cards-thumbnail-card-width);
 }
+.cards .tet-compare-card.dark {
+  --compare-card-background-color: black;
+  --compare-cards-background: var(--tc-background-primary-dark);
+  --compare-cards-card-background: var(--tc-background-secondary-dark);
+  --compare-cards-text-color: var(--tc-text-primary-dark);
+  --compare-cards-border-color: var(--tc-border-secondary-dark);
+  --compare-cards-link-color: var(--tc-text-link-dark);
+  --compare-cards-price-color: var(--tc-text-primary-dark);
+}
 .cards .tet-compare-card--thumbnail {
   --compare-cards-card-max-width: var(--compare-card-thumbnail-card-width);
 }

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

@@ -115,7 +115,7 @@ export class TetCompareCards {
         });
     }
     render() {
-        return (h(Host, { key: '88da7853594141123a0ad91cb82acf7cf6b43c34', class: {
+        return (h(Host, { key: 'f0e2d0e248a368d9410e1cd73b67f51e0f673c06', class: {
                 'must-initialize': true,
                 'initialized': this.initializedState
             } }, this.showLoader ? (this.renderLoader()) : (h("div", { class: {
@@ -126,7 +126,7 @@ export class TetCompareCards {
             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 ? el.theme : this.theme, "can-select": el.canSelect, "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, 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: el.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 })));
+                }, index: index, language: el.language, options: el.options, "card-type": el.cardType, theme: el.theme, "can-select": el.canSelect, "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, 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: el.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 })));
         })), 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"; }
@@ -206,8 +206,8 @@ export class TetCompareCards {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ServiceAvailabilityServicesCategoryTheme",
-                    "resolved": "\"classic\" | \"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\"",
+                    "original": "'light' | 'dark' | 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\"",
                     "references": {
                         "ServiceAvailabilityServicesCategoryTheme": {
                             "location": "import",