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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/{old-utils-fd3038e0.js → old-utils-ff6ab3d4.js} +4 -6
  3. package/dist/cjs/tet-address-offers_4.cjs.entry.js +2 -2
  4. package/dist/cjs/tet-compare-card_4.cjs.entry.js +12 -21
  5. package/dist/cjs/tet-compare-cards-tab.cjs.entry.js +5 -6
  6. package/dist/cjs/tet-compare-cards.cjs.entry.js +4 -15
  7. package/dist/cjs/tet-components.cjs.js +1 -1
  8. package/dist/cjs/tet-text-list.cjs.entry.js +1 -1
  9. package/dist/collection/components/advanced/address/tet-address-offers/tet-address-offers.js +2 -2
  10. package/dist/collection/components/advanced/cards/old-utils.js +2 -3
  11. package/dist/collection/components/advanced/cards/tet-compare-card/test/tet-compare-card.spec.js +0 -2
  12. package/dist/collection/components/advanced/cards/tet-compare-card/tet-compare-card.css +73 -105
  13. package/dist/collection/components/advanced/cards/tet-compare-card/tet-compare-card.js +12 -86
  14. package/dist/collection/components/advanced/cards/tet-compare-cards/tet-compare-cards.js +4 -39
  15. package/dist/collection/components/advanced/cards/tet-compare-cards-tab/test/tet-compare-cards-tab.spec.js +0 -12
  16. package/dist/collection/components/advanced/cards/tet-compare-cards-tab/tet-compare-cards-tab.js +5 -24
  17. package/dist/collection/components/advanced/cards/utils.js +2 -3
  18. package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css +1 -1
  19. package/dist/components/{p-9e5d45a8.js → p-5a5c7097.js} +13 -26
  20. package/dist/components/{p-d0ec7607.js → p-673e7c33.js} +1 -1
  21. package/dist/components/{p-fa25daf7.js → p-cb9c4db0.js} +9 -23
  22. package/dist/components/{p-c4a87e6e.js → p-f5ba1b31.js} +3 -3
  23. package/dist/components/tet-address-offers-view.js +2 -2
  24. package/dist/components/tet-address-offers.js +1 -1
  25. package/dist/components/tet-business-compare-card.js +1 -1
  26. package/dist/components/tet-compare-card.js +1 -1
  27. package/dist/components/tet-compare-cards-tab.js +6 -8
  28. package/dist/components/tet-compare-cards.js +1 -1
  29. package/dist/components/tet-text-list.js +1 -1
  30. package/dist/esm/loader.js +1 -1
  31. package/dist/esm/{old-utils-a5a07afa.js → old-utils-e93e9607.js} +4 -6
  32. package/dist/esm/tet-address-offers_4.entry.js +2 -2
  33. package/dist/esm/tet-compare-card_4.entry.js +12 -21
  34. package/dist/esm/tet-compare-cards-tab.entry.js +5 -6
  35. package/dist/esm/tet-compare-cards.entry.js +4 -15
  36. package/dist/esm/tet-components.js +1 -1
  37. package/dist/esm/tet-text-list.entry.js +1 -1
  38. package/dist/tet-components/p-25f2ecb8.entry.js +1 -0
  39. package/dist/tet-components/p-3053f5a3.entry.js +1 -0
  40. package/dist/tet-components/p-3688fa8d.entry.js +1 -0
  41. package/dist/tet-components/p-87b47774.js +1 -0
  42. package/dist/tet-components/{p-c11d8027.entry.js → p-961686d8.entry.js} +1 -1
  43. package/dist/tet-components/p-cbceb775.entry.js +1 -0
  44. package/dist/tet-components/tet-components.css +1 -1
  45. package/dist/tet-components/tet-components.esm.js +1 -1
  46. package/dist/types/components/advanced/cards/old-utils.d.ts +1 -2
  47. package/dist/types/components/advanced/cards/tet-compare-card/tet-compare-card.d.ts +1 -19
  48. package/dist/types/components/advanced/cards/tet-compare-cards/tet-compare-cards.d.ts +0 -17
  49. package/dist/types/components/advanced/cards/tet-compare-cards-tab/tet-compare-cards-tab.d.ts +0 -7
  50. package/dist/types/components/advanced/cards/utils.d.ts +1 -2
  51. package/dist/types/components.d.ts +0 -36
  52. package/dist/types/services/api/services/catalog/service-availability-services.d.ts +1 -1
  53. package/package.json +1 -1
  54. package/dist/tet-components/p-212fb3d6.entry.js +0 -1
  55. package/dist/tet-components/p-41c25541.js +0 -1
  56. package/dist/tet-components/p-b0161172.entry.js +0 -1
  57. package/dist/tet-components/p-f4465153.entry.js +0 -1
  58. package/dist/tet-components/p-ffe3a10a.entry.js +0 -1
@@ -334,7 +334,7 @@ export class TetAddressOffers {
334
334
  ? t('components-netflix-card-description')
335
335
  : null,
336
336
  };
337
- return (h("tet-compare-card", { class: { 'product': true, 'best-choice': bestChoice }, options: options, canSelect: false, cardType: "wide60-40", minWideWidth: 768, theme: theme, bestChoice: bestChoice,
337
+ return (h("tet-compare-card", { class: { 'product': true, 'best-choice': bestChoice }, options: options, cardType: "wide60-40", minWideWidth: 768, theme: theme, bestChoice: bestChoice,
338
338
  // Resets the best choice card height to 100% and removes negative margin
339
339
  cardList: true, darkMode: this.darkMode }));
340
340
  }
@@ -424,7 +424,7 @@ export class TetAddressOffers {
424
424
  return generateFormUrl(baseUrl, parameters);
425
425
  }
426
426
  render() {
427
- return (h(Host, { key: '9a4d76df398031bd63c92b27aed0e442fba3e79d' }, this.showLoader ? this.renderLoader() : addressOffersStore.catalog && this.renderTopCategories()));
427
+ return (h(Host, { key: '581f2290f683f9bcf77bb2ae8a00b951f06b4606' }, this.showLoader ? this.renderLoader() : addressOffersStore.catalog && this.renderTopCategories()));
428
428
  }
429
429
  static get is() { return "tet-address-offers"; }
430
430
  static get encapsulation() { return "shadow"; }
@@ -6,10 +6,9 @@
6
6
  * @param requestedProductData Requested product data from SAC.
7
7
  * @param theme Optional theme for the compare card, defaults to 'light'.
8
8
  * @param darkMode Optional dark mode setting for the compare card.
9
- * @param darkModeOverride Optional dark mode override for the compare card.
10
9
  * @param isNetflixCard Optional flag to indicate if the card is for Netflix.
11
10
  */
12
- export const fillOldProductData = (compareCard, requestedProduct, requestedProductData, theme, darkMode, darkModeOverride, isNetflixCard = false) => {
11
+ export const fillOldProductData = (compareCard, requestedProduct, requestedProductData, theme, darkMode, isNetflixCard = false) => {
13
12
  var _a, _b, _c;
14
13
  const currentCompareCardOptions = compareCard.options;
15
14
  const bestChoice = (_b = (_a = requestedProductData.attributes) === null || _a === void 0 ? void 0 : _a.find((attributes) => attributes.key === 'isBestChoice')) === null || _b === void 0 ? void 0 : _b.value;
@@ -73,7 +72,7 @@ export const fillOldProductData = (compareCard, requestedProduct, requestedProdu
73
72
  requestedProductData.descriptionTooltip[productLanguage] +
74
73
  '</tet-tooltip>' +
75
74
  '<style>.tet-tooltip { --text-font: var(--font-family-content) }</style>'
76
- : '', link: formUrl, secondaryLink: contractLink, helper: priceDescription, theme: theme, darkMode: darkMode, darkModeOverride: darkModeOverride, isNetflixCard: isNetflixCard });
75
+ : '', link: formUrl, secondaryLink: contractLink, helper: priceDescription, theme: theme, darkMode: darkMode, isNetflixCard: isNetflixCard });
77
76
  delete compareCard.productCode;
78
77
  return compareCard;
79
78
  };
@@ -117,7 +117,6 @@ describe('tet-compare-card', () => {
117
117
  <div class="secondary-link center"><a target="_blank" href="www.tet.lv">Secondary link</a></div>
118
118
  </div>
119
119
  </div>
120
- <tet-icon class="is-selected__icon" name="check"></tet-icon>
121
120
  <div class="data-hidden">
122
121
  <div data-attribute="hero-title">Hero title</div>
123
122
  <div data-attribute="main-title">Title</div>
@@ -246,7 +245,6 @@ describe('tet-compare-card', () => {
246
245
  <div class="secondary-link center"><a target="_blank" href="www.tet.lv">Secondary link</a></div>
247
246
  </div>
248
247
  </div>
249
- <tet-icon class="is-selected__icon" name="check"></tet-icon>
250
248
  <div class="data-hidden">
251
249
  <div data-attribute="hero-title">Hero title</div>
252
250
  <div data-attribute="main-title">Title</div>
@@ -5455,7 +5455,7 @@
5455
5455
  --tc-blue-50: rgba(21, 85, 185, 1);
5456
5456
  --tc-blue-40: rgb(25, 98, 212);
5457
5457
  --tc-blue-30: rgba(78, 135, 222, 1);
5458
- --tc-blue-20: rgba(78, 135, 222, 1);
5458
+ --tc-blue-20: rgba(131,172,232, 1);
5459
5459
  --tc-blue-10: rgba(184, 208, 242, 1);
5460
5460
  --tc-blue-00: rgba(237, 245, 252, 1);
5461
5461
  --tc-green-80: rgba(31, 66, 45, 1);
@@ -5710,20 +5710,20 @@
5710
5710
  */
5711
5711
  display: inline-block;
5712
5712
  flex: 1 0 0;
5713
- --compare-card-background-color: rgb(235, 237, 239);
5713
+ --compare-card-background-color: var(--tc-layer-tertiary);
5714
5714
  --compare-card-border-color: transparent;
5715
- --compare-card-best-choice-text-color: rgb(10, 11, 13);
5716
- --compare-card-divider-border-color: rgb(192, 197, 206);
5717
- --compare-card-title-text-color: rgb(10, 11, 13);
5718
- --compare-card-bullet-point-text-color: rgb(10, 11, 13);
5719
- --compare-card-price-text-color: rgb(10, 11, 13);
5720
- --compare-card-old-price-text-color: rgb(88, 99, 116);
5721
- --compare-card-helper-text-color: rgb(88, 99, 116);
5722
- --compare-card-secondary-link-text-color: rgb(88, 99, 116);
5715
+ --compare-card-best-choice-text-color: var(--tc-text-black-permanent-dark);
5716
+ --compare-card-divider-border-color: var(--tc-border-tertiary);
5717
+ --compare-card-title-text-color: var(--tc-text-primary);
5718
+ --compare-card-bullet-point-text-color: var(--tc-text-primary);
5719
+ --compare-card-price-text-color: var(--tc-text-primary);
5720
+ --compare-card-old-price-text-color: var(--tc-text-tertiary);
5721
+ --compare-card-helper-text-color: var(--tc-text-secondary);
5722
+ --compare-card-secondary-link-text-color: var(--tc-text-tertiary);
5723
5723
  --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);
5724
- --compare-card-info-icon-color: rgb(67, 75, 86);
5725
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5726
- --compare-card-price-icon-color: rgb(67, 75, 86);
5724
+ --compare-card-info-icon-color: var(--tc-grey-70);
5725
+ --compare-card-bullet-point-icon-color: var(--tc-text-primary);
5726
+ --compare-card-price-icon-color: var(--tc-grey-70);
5727
5727
  --compare-card-padding: 2rem;
5728
5728
  --compare-card-border-radius: 1.5rem;
5729
5729
  --compare-card-price-padding: 0;
@@ -5739,7 +5739,7 @@
5739
5739
  --compare-card-thumbnail-display: flex;
5740
5740
  --compare-card-thumbnail-card-radius: 0 var(--compare-card-border-radius) var(--compare-card-border-radius) 0;
5741
5741
  --compare-card-thumbnail-card-width: 44rem;
5742
- --compare-card-background-netflix-color: var(--tc-background-primary);
5742
+ --compare-card-background-netflix-color: var(--tc-layer-primary);
5743
5743
  --compare-card-helper-text: var(--tc-text-secondary);
5744
5744
  --compare-card-focus-outline-color: var(--tc-blue-40);
5745
5745
  }
@@ -5760,17 +5760,25 @@
5760
5760
  display: none;
5761
5761
  }
5762
5762
 
5763
+ .grey {
5764
+ --tet-compare-card-best-choice-border: var(--tc-yellow-40);
5765
+ --compare-card-background-color: transparent;
5766
+ background: radial-gradient(110.2% 141.42% at 0% 0%, #FAFAFA 0%, #ECEDEE 100%);
5767
+ }
5768
+ .grey.dark {
5769
+ background: radial-gradient(110.2% 141.42% at 0% 0%, var(--tc-grey-20-dark, #26292C) 0%, var(--tc-grey-10-dark, #18191B) 100%);
5770
+ }
5771
+ .grey.card.best-choice {
5772
+ --compare-card-border-color: var(--tet-compare-card-best-choice-border);
5773
+ }
5774
+
5763
5775
  .tet-tv {
5764
5776
  --tet-compare-card-best-choice-border: var(--tc-gradient-green-accent);
5765
5777
  --compare-card-background-color: transparent;
5766
5778
  background: radial-gradient(100% 100% at 0% 0%, #f8fff5 0%, #ddf2e6 100%);
5767
5779
  }
5768
- .tet-tv.dark {
5769
- background: radial-gradient(100% 100% at 0% 0%, #203C2E 0%, #13290A 100%);
5770
- --tet-compare-card-best-choice-border: var(--tc-gradient-green-accent2-dark);
5771
- }
5772
5780
  .tet-tv.color-icons {
5773
- --compare-card-bullet-point-icon-color: rgb(66, 215, 128);
5781
+ --compare-card-bullet-point-icon-color: var(--tc-green-30);
5774
5782
  }
5775
5783
  .tet-tv.card.best-choice {
5776
5784
  --compare-card-border-color: var(--tet-compare-card-best-choice-border);
@@ -5780,11 +5788,8 @@
5780
5788
  --compare-card-background-color: transparent;
5781
5789
  background: radial-gradient(100% 100% at 0% 0%, #f2fdff 0%, #fafeff 0.01%, #def0f8 100%);
5782
5790
  }
5783
- .tet-tv-plus.dark {
5784
- background: radial-gradient(100% 100% at 0% 0%, #20333C 0%, #20333C 0.01%, #0A2329 100%);
5785
- }
5786
5791
  .tet-tv-plus.color-icons {
5787
- --compare-card-bullet-point-icon-color: rgb(52, 132, 244);
5792
+ --compare-card-bullet-point-icon-color: rgb(31, 208, 214);
5788
5793
  }
5789
5794
  .tet-tv-plus.card.best-choice {
5790
5795
  --compare-card-border-color: rgb(111, 227, 231);
@@ -5794,28 +5799,22 @@
5794
5799
  --compare-card-background-color: transparent;
5795
5800
  background: radial-gradient(100% 100% at 0% 0%, #fff0eb 0%, #fffafa 0.01%, #ffd8cc 100%);
5796
5801
  }
5797
- .tet-vtv.dark {
5798
- background: radial-gradient(100% 100% at 0% 0%, #3C2720 0%, #3C2720 0.01%, #290A0A 100%);
5799
- }
5800
5802
  .tet-vtv.color-icons {
5801
- --compare-card-bullet-point-icon-color: rgb(239, 119, 108);
5803
+ --compare-card-bullet-point-icon-color: var(--tc-red-30);
5802
5804
  }
5803
5805
  .tet-vtv.card.best-choice {
5804
- --compare-card-border-color: rgb(243, 153, 145);
5806
+ --compare-card-border-color: var(--tc-red-20);
5805
5807
  }
5806
5808
 
5807
5809
  .tet-electricity {
5808
5810
  --compare-card-background-color: transparent;
5809
5811
  background: radial-gradient(100% 100% at 0% 0%, #fefbf6 0%, #fbf0d8 100%);
5810
5812
  }
5811
- .tet-electricity.dark {
5812
- background: radial-gradient(100% 100% at 0% 0%, #3C3320 0%, #291D0A 100%);
5813
- }
5814
5813
  .tet-electricity.color-icons {
5815
- --compare-card-bullet-point-icon-color: rgb(251, 200, 91);
5814
+ --compare-card-bullet-point-icon-color: var(--tc-yellow-40);
5816
5815
  }
5817
5816
  .tet-electricity.card.best-choice {
5818
- --compare-card-border-color: rgb(249, 212, 134);
5817
+ --compare-card-border-color: var(--tc-yellow-30);
5819
5818
  }
5820
5819
 
5821
5820
  .tet-internet {
@@ -5823,12 +5822,8 @@
5823
5822
  --compare-card-background-color: transparent;
5824
5823
  background: radial-gradient(100% 100% at 0% 0%, #fbfdff 0%, #dceeff 100%);
5825
5824
  }
5826
- .tet-internet.dark {
5827
- background: radial-gradient(100% 100% at 0% 0%, #202E3C 0%, #0A1A29 100%);
5828
- --tet-compare-card-best-choice-border: var(--tc-gradient-blue-accent-dark);
5829
- }
5830
5825
  .tet-internet.color-icons {
5831
- --compare-card-bullet-point-icon-color: rgb(52, 132, 244);
5826
+ --compare-card-bullet-point-icon-color: var(--tc-blue-30);
5832
5827
  }
5833
5828
  .tet-internet.card.best-choice {
5834
5829
  --compare-card-border-color: var(--tet-compare-card-best-choice-border);
@@ -5839,110 +5834,102 @@
5839
5834
  --compare-card-background-color: transparent;
5840
5835
  background: radial-gradient(100% 100% at 0% 0%, #fcfbff 0%, #e5e5ff 100%);
5841
5836
  }
5842
- .tet-bundles.dark {
5843
- background: radial-gradient(100% 100% at 0% 0%, #20203C 0%, #130A29 100%);
5844
- --tet-compare-card-best-choice-border: var(--tc-gradient-purple-accent-dark);
5845
- }
5846
5837
  .tet-bundles.color-icons {
5847
- --compare-card-bullet-point-icon-color: rgb(149, 116, 231);
5838
+ --compare-card-bullet-point-icon-color: var(--tc-violet-40);
5848
5839
  }
5849
5840
  .tet-bundles.card.best-choice {
5850
5841
  --compare-card-border-color: var(--tet-compare-card-best-choice-border);
5851
5842
  }
5852
5843
 
5853
- .classic.dark {
5854
- background: radial-gradient(100% 100% at 0% 0%, #2E2E2E 0%, #191919 100%);
5855
- }
5856
-
5857
5844
  .tet-business-purple {
5858
- --compare-card-background-color: rgb(239, 236, 248);
5845
+ --compare-card-background-color: var(--tc-violet-00);
5859
5846
  }
5860
5847
  .tet-business-purple.color-icons {
5861
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5848
+ --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
5862
5849
  }
5863
5850
  .tet-business-purple.card.best-choice {
5864
- --compare-card-border-color: rgb(10, 11, 13);
5851
+ --compare-card-border-color: var(--tc-border-primary);
5865
5852
  }
5866
5853
  .tet-business-purple.card .best-choice-title {
5867
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
5854
+ --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
5868
5855
  }
5869
5856
 
5870
5857
  .tet-business-green {
5871
- --compare-card-background-color: rgb(231, 249, 238);
5858
+ --compare-card-background-color: var(--tc-green-00);
5872
5859
  }
5873
5860
  .tet-business-green.color-icons {
5874
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5861
+ --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
5875
5862
  }
5876
5863
  .tet-business-green.card.best-choice {
5877
- --compare-card-border-color: rgb(10, 11, 13);
5864
+ --compare-card-border-color: var(--tc-border-primary);
5878
5865
  }
5879
5866
  .tet-business-green.card .best-choice-title {
5880
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
5867
+ --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
5881
5868
  }
5882
5869
 
5883
5870
  .tet-business-red {
5884
- --compare-card-background-color: rgb(252, 238, 238);
5871
+ --compare-card-background-color: var(--tc-red-00);
5885
5872
  }
5886
5873
  .tet-business-red.color-icons {
5887
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5874
+ --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
5888
5875
  }
5889
5876
  .tet-business-red.card.best-choice {
5890
- --compare-card-border-color: rgb(10, 11, 13);
5877
+ --compare-card-border-color: var(--tc-border-primary);
5891
5878
  }
5892
5879
  .tet-business-red.card .best-choice-title {
5893
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
5880
+ --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
5894
5881
  }
5895
5882
 
5896
5883
  .tet-business-yellow {
5897
- --compare-card-background-color: rgb(252, 244, 227);
5884
+ --compare-card-background-color: var(--tc-yellow-00);
5898
5885
  }
5899
5886
  .tet-business-yellow.color-icons {
5900
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5887
+ --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
5901
5888
  }
5902
5889
  .tet-business-yellow.card.best-choice {
5903
- --compare-card-border-color: rgb(10, 11, 13);
5890
+ --compare-card-border-color: var(--tc-border-primary);
5904
5891
  }
5905
5892
  .tet-business-yellow.card .best-choice-title {
5906
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
5893
+ --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
5907
5894
  }
5908
5895
 
5909
5896
  .tet-business-mint {
5910
5897
  --compare-card-background-color: rgb(229, 250, 250);
5911
5898
  }
5912
5899
  .tet-business-mint.color-icons {
5913
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5900
+ --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
5914
5901
  }
5915
5902
  .tet-business-mint.card.best-choice {
5916
- --compare-card-border-color: rgb(10, 11, 13);
5903
+ --compare-card-border-color: var(--tc-border-primary);
5917
5904
  }
5918
5905
  .tet-business-mint.card .best-choice-title {
5919
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
5906
+ --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
5920
5907
  }
5921
5908
 
5922
5909
  .tet-business-blue {
5923
- --compare-card-background-color: rgb(237, 245, 252);
5910
+ --compare-card-background-color: var(--tc-blue-00);
5924
5911
  }
5925
5912
  .tet-business-blue.color-icons {
5926
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5913
+ --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
5927
5914
  }
5928
5915
  .tet-business-blue.card.best-choice {
5929
- --compare-card-border-color: rgb(10, 11, 13);
5916
+ --compare-card-border-color: var(--tc-border-primary);
5930
5917
  }
5931
5918
  .tet-business-blue.card .best-choice-title {
5932
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
5919
+ --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
5933
5920
  }
5934
5921
 
5935
5922
  .tet-business-default {
5936
- --compare-card-background-color: rgb(247, 247, 247);
5923
+ --compare-card-background-color: var(--tc-grey-10);
5937
5924
  }
5938
5925
  .tet-business-default.color-icons {
5939
- --compare-card-bullet-point-icon-color: rgb(10, 11, 13);
5926
+ --compare-card-bullet-point-icon-color: var(--tc-icon-primary);
5940
5927
  }
5941
5928
  .tet-business-default.card.best-choice {
5942
- --compare-card-border-color: rgb(10, 11, 13);
5929
+ --compare-card-border-color: var(--tc-border-primary);
5943
5930
  }
5944
5931
  .tet-business-default.card .best-choice-title {
5945
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
5932
+ --compare-card-best-choice-text-color: var(--tc-text-primary-dark);
5946
5933
  }
5947
5934
 
5948
5935
  .card {
@@ -5957,19 +5944,18 @@
5957
5944
  background-repeat: no-repeat;
5958
5945
  }
5959
5946
  .card.dark {
5960
- --compare-card-background-color: var(--tc-background-primary-dark);
5961
- --compare-card-best-choice-text-color: var(--tc-button-text-primary-dark);
5962
- --compare-card-divider-border-color: rgb(192, 197, 206);
5947
+ --compare-card-background-color: var(--tc-layer-primary-dark);
5948
+ --compare-card-divider-border-color: var(--tc-border-tertiary-dark);
5963
5949
  --compare-card-title-text-color: var(--tc-text-primary-dark);
5964
5950
  --compare-card-bullet-point-text-color: var(--tc-text-primary-dark);
5965
5951
  --compare-card-price-text-color: var(--tc-text-primary-dark);
5966
5952
  --compare-card-old-price-text-color: var(--tc-text-tertiary-dark);
5967
5953
  --compare-card-helper-text-color: var(--tc-text-secondary-dark);
5968
5954
  --compare-card-secondary-link-text-color: var(--tc-text-tertiary-dark);
5969
- --compare-card-info-icon-color: var(--tc-tooltip-text-inverse-secondary-dark);
5955
+ --compare-card-info-icon-color: var(--tc-grey-70-dark);
5970
5956
  --compare-card-bullet-point-icon-color: var(--tc-text-primary-dark);
5971
5957
  --compare-card-price-icon-color: var(--tc-tooltip-text-inverse-secondary-dark);
5972
- --compare-card-background-netflix-color: var(--tc-background-primary-dark);
5958
+ --compare-card-background-netflix-color: var(--tc-layer-primary-dark);
5973
5959
  --compare-card-focus-outline-color: var(--tc-blue-40-dark);
5974
5960
  }
5975
5961
  .card:focus-visible {
@@ -6104,11 +6090,11 @@
6104
6090
  }
6105
6091
  }
6106
6092
  .card:hover {
6107
- --compare-card-border-color: rgb(192, 197, 206);
6093
+ --compare-card-border-color: var(--tc-grey-40);
6108
6094
  box-shadow: var(--compare-card-hover-box-shadow);
6109
6095
  }
6110
6096
  .card.hide-best-choice-border:hover {
6111
- --compare-card-border-color: rgb(192, 197, 206);
6097
+ --compare-card-border-color: var(--tc-grey-40);
6112
6098
  border: 0.125rem solid var(--compare-card-border-color);
6113
6099
  }
6114
6100
  .card.netflix {
@@ -6131,43 +6117,25 @@
6131
6117
  border: 0.125rem solid #E50914;
6132
6118
  outline: unset;
6133
6119
  }
6134
- .card.netflix .best-choice-title.left, .card.netflix .best-choice-title.right {
6120
+ .card.netflix .best-choice-title {
6135
6121
  background: rgb(229, 9, 20);
6136
- color: rgb(255, 255, 255);
6137
- }
6138
- .card .is-selected__icon {
6139
- display: none;
6140
- }
6141
- .card.is-selected {
6142
- --compare-card-background-color: rgb(255, 255, 255);
6143
- --compare-card-border-color: rgb(0, 96, 245);
6144
- }
6145
- .card.is-selected .is-selected__icon {
6146
- --icon-color: rgb(0, 96, 245);
6147
- display: block;
6148
- position: absolute;
6149
- top: 0.75rem;
6150
- right: 0.75rem;
6122
+ color: var(--compare-card-best-choice-text-color);
6151
6123
  }
6152
6124
  .card:before {
6153
6125
  content: "";
6154
6126
  position: absolute;
6155
6127
  left: 15%;
6156
6128
  right: 14%;
6157
- fill: rgb(0, 96, 245);
6129
+ fill: var(--tc-blue-40);
6158
6130
  }
6159
6131
  .card.best-choice {
6160
6132
  margin-top: 0;
6161
- --compare-card-border-color: rgb(117, 225, 162);
6133
+ --compare-card-border-color: var(--tc-green-20);
6162
6134
  }
6163
6135
  .card.best-choice.card-list {
6164
6136
  height: 100%;
6165
6137
  margin-top: 0;
6166
6138
  }
6167
- .card.best-choice.is-selected {
6168
- --compare-card-best-choice-text-color: rgb(255, 255, 255);
6169
- --compare-card-border-color: rgb(0, 96, 245);
6170
- }
6171
6139
 
6172
6140
  .best-choice-title {
6173
6141
  position: absolute;
@@ -6175,7 +6143,7 @@
6175
6143
  display: flex;
6176
6144
  visibility: hidden;
6177
6145
  margin: 0 auto;
6178
- color: var(--compare-card-title-text-color);
6146
+ color: var(--compare-card-best-choice-text-color);
6179
6147
  background: var(--compare-card-border-color);
6180
6148
  padding: 0.125rem 1.5rem 0.25rem;
6181
6149
  font-weight: 600;
@@ -6466,7 +6434,7 @@
6466
6434
  border-radius: var(--compare-card-border-radius);
6467
6435
  }
6468
6436
  .card-wrapper:hover {
6469
- --compare-card-border-color: rgb(192, 197, 206);
6437
+ --compare-card-border-color: var(--tc-grey-40);
6470
6438
  box-shadow: var(--compare-card-hover-box-shadow);
6471
6439
  }
6472
6440
  .card-wrapper .card:hover {
@@ -126,7 +126,6 @@ export class TetCompareCard {
126
126
  this.index = undefined;
127
127
  this.cardType = 'regular';
128
128
  this.theme = 'classic';
129
- this.canSelect = false;
130
129
  this.colorIcons = false;
131
130
  this.fullHeight = true;
132
131
  this.bestChoice = false;
@@ -152,21 +151,10 @@ export class TetCompareCard {
152
151
  this.showHelper = true;
153
152
  this.isNetflixCard = false;
154
153
  this.darkMode = false;
155
- this.darkModeOverride = false;
156
- this.isSelected = false;
157
154
  this.currentCardType = this.cardType;
158
155
  }
159
156
  onClick() {
160
157
  this.selectEvent.emit({ index: this.index, target: this });
161
- if (this.canSelect) {
162
- this.setState(true);
163
- }
164
- }
165
- /**
166
- * @param state
167
- */
168
- async setState(state) {
169
- this.isSelected = state;
170
158
  }
171
159
  componentWillLoad() {
172
160
  if (this.cardType === 'wide60-40') {
@@ -177,7 +165,6 @@ export class TetCompareCard {
177
165
  }
178
166
  const parentElement = this.getParentElement();
179
167
  if (parentElement.children.length > 1) {
180
- console.log(parentElement.children);
181
168
  this.resizeObserver = new ResizeObserver(this.emitResize);
182
169
  parentElement.addEventListener('tet-card-resize', this.resizeCard);
183
170
  }
@@ -203,8 +190,14 @@ export class TetCompareCard {
203
190
  getDropdownTheme() {
204
191
  return this.options.dropdownTheme;
205
192
  }
206
- get isDarkMode() {
207
- return this.darkMode && (!this.isNetflixCard || this.darkModeOverride);
193
+ getTheme() {
194
+ if (this.darkMode) {
195
+ if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
196
+ return `dark ${this.theme}`;
197
+ }
198
+ return 'dark grey';
199
+ }
200
+ return this.theme;
208
201
  }
209
202
  /**
210
203
  * Renders the card body.
@@ -215,19 +208,17 @@ export class TetCompareCard {
215
208
  return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
216
209
  'card': true,
217
210
  [`${this.currentCardType}`]: true,
218
- [`${this.theme}`]: true,
211
+ [`${this.getTheme()}`]: true,
219
212
  'best-choice': this.bestChoice,
220
213
  'hide-best-choice-border': this.hideBestChoiceBorder,
221
214
  'with-border': this.withBorder,
222
215
  'full-height': this.fullHeight,
223
216
  'color-icons': this.colorIcons,
224
- 'is-selected': this.isSelected,
225
217
  'card-list': this.cardList,
226
218
  'thumbnail': !!this.thumbnail,
227
219
  'netflix': this.isNetflixCard,
228
220
  'dark-mode': this.darkMode,
229
- 'dark': this.isDarkMode,
230
- }, style: { background: this.cardBackgroundColor } }, h("div", { class: {
221
+ }, style: { backgroundColor: this.cardBackgroundColor } }, h("div", { class: {
231
222
  'best-choice-title': true,
232
223
  'active': this.bestChoice,
233
224
  [`${this.bestChoiceTextPosition}`]: true
@@ -244,7 +235,7 @@ export class TetCompareCard {
244
235
  } }, 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: {
245
236
  'secondary-link': true,
246
237
  [`${this.secondaryLinkPosition}`]: true
247
- } }, 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 ?
238
+ } }, 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 ?
248
239
  h("div", { "data-attribute": "price-prefix" }, this.options.pricePrefix)
249
240
  : '', this.options.priceInfo ?
250
241
  h("div", { "data-attribute": "price-info" }, this.options.priceInfo)
@@ -328,7 +319,7 @@ export class TetCompareCard {
328
319
  "mutable": false,
329
320
  "complexType": {
330
321
  "original": "ServiceAvailabilityServicesCategoryTheme",
331
- "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\"",
322
+ "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\"",
332
323
  "references": {
333
324
  "ServiceAvailabilityServicesCategoryTheme": {
334
325
  "location": "import",
@@ -347,24 +338,6 @@ export class TetCompareCard {
347
338
  "reflect": false,
348
339
  "defaultValue": "'classic'"
349
340
  },
350
- "canSelect": {
351
- "type": "boolean",
352
- "mutable": false,
353
- "complexType": {
354
- "original": "boolean",
355
- "resolved": "boolean",
356
- "references": {}
357
- },
358
- "required": false,
359
- "optional": false,
360
- "docs": {
361
- "tags": [],
362
- "text": "Determines whether the card can be selected."
363
- },
364
- "attribute": "can-select",
365
- "reflect": false,
366
- "defaultValue": "false"
367
- },
368
341
  "colorIcons": {
369
342
  "type": "boolean",
370
343
  "mutable": false,
@@ -816,30 +789,11 @@ export class TetCompareCard {
816
789
  "attribute": "dark-mode",
817
790
  "reflect": false,
818
791
  "defaultValue": "false"
819
- },
820
- "darkModeOverride": {
821
- "type": "boolean",
822
- "mutable": false,
823
- "complexType": {
824
- "original": "boolean",
825
- "resolved": "boolean",
826
- "references": {}
827
- },
828
- "required": false,
829
- "optional": false,
830
- "docs": {
831
- "tags": [],
832
- "text": "This prop allows to use dark theme cards when isNetflixCard=true"
833
- },
834
- "attribute": "dark-mode-override",
835
- "reflect": false,
836
- "defaultValue": "false"
837
792
  }
838
793
  };
839
794
  }
840
795
  static get states() {
841
796
  return {
842
- "isSelected": {},
843
797
  "currentCardType": {}
844
798
  };
845
799
  }
@@ -867,34 +821,6 @@ export class TetCompareCard {
867
821
  }
868
822
  }];
869
823
  }
870
- static get methods() {
871
- return {
872
- "setState": {
873
- "complexType": {
874
- "signature": "(state: boolean) => Promise<void>",
875
- "parameters": [{
876
- "name": "state",
877
- "type": "boolean",
878
- "docs": ""
879
- }],
880
- "references": {
881
- "Promise": {
882
- "location": "global",
883
- "id": "global::Promise"
884
- }
885
- },
886
- "return": "Promise<void>"
887
- },
888
- "docs": {
889
- "text": "",
890
- "tags": [{
891
- "name": "param",
892
- "text": "state"
893
- }]
894
- }
895
- }
896
- };
897
- }
898
824
  static get elementRef() { return "host"; }
899
825
  static get listeners() {
900
826
  return [{