@tet/tet-components 1.3.126-staging → 1.3.127-staging

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 (9) hide show
  1. package/dist/cjs/tet-compare-card-v2.cjs.entry.js +21 -3
  2. package/dist/collection/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.js +21 -3
  3. package/dist/components/tet-compare-card-v2.js +21 -3
  4. package/dist/esm/tet-compare-card-v2.entry.js +21 -3
  5. package/dist/tet-components/p-465740e4.entry.js +1 -0
  6. package/dist/tet-components/tet-components.esm.js +1 -1
  7. package/dist/types/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.d.ts +12 -0
  8. package/package.json +1 -1
  9. package/dist/tet-components/p-969dcee8.entry.js +0 -1
package/dist/cjs/tet-compare-card-v2.cjs.entry.js CHANGED
@@ -14,7 +14,18 @@ const TetCompareCardV2 = class {
14
14
  index.registerInstance(this, hostRef);
15
15
  this.cardLoaded = index.createEvent(this, "cardLoaded", 7);
16
16
  this.productChanged = index.createEvent(this, "productChanged", 7);
17
+ /**
18
+ * Indicates whether the card has already emitted the loaded event.
19
+ */
17
20
  this.cardHasEmitted = false;
21
+ /**
22
+ * Counter for unique bonus IDs.
23
+ */
24
+ this.bonusCounter = 0;
25
+ /**
26
+ * WeakMap to store unique IDs for bonuses.
27
+ */
28
+ this.bonusWeakMap = new WeakMap();
18
29
  /**
19
30
  * Renders the loader.
20
31
  */
@@ -205,6 +216,12 @@ const TetCompareCardV2 = class {
205
216
  allBonuses() {
206
217
  return this.options.flatMap(option => option.bonuses || []);
207
218
  }
219
+ getUniqueBonusId(bonus) {
220
+ if (!this.bonusWeakMap.has(bonus)) {
221
+ this.bonusWeakMap.set(bonus, `bonus-${this.bonusCounter++}`);
222
+ }
223
+ return this.bonusWeakMap.get(bonus);
224
+ }
208
225
  getTheme() {
209
226
  if (this.darkMode) {
210
227
  if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
@@ -246,7 +263,7 @@ const TetCompareCardV2 = class {
246
263
  });
247
264
  const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
248
265
  const currentBonuses = this.currentBonuses();
249
- const currentBonusIds = currentBonuses.map(bonus => bonus.modalId);
266
+ const currentBonusIds = currentBonuses.map(this.getUniqueBonusId.bind(this));
250
267
  const allBonuses = this.allBonuses();
251
268
  const isBestChoice = ((_l = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _l === void 0 ? void 0 : _l.bestChoice) || false;
252
269
  return (index.h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
@@ -265,12 +282,13 @@ const TetCompareCardV2 = class {
265
282
  }, part: "compare-card-title-wrapper" }, index.h("h3", { class: "main-title" }, mainTitle))) : (''), index.h("div", { class: "price js-resize-price" }, price && !isNaN(parseFloat(price)) ? (index.h("div", { class: {
266
283
  'price-wrapper': true
267
284
  } }, index.h("div", { class: "price-container" }, index.h("div", { class: "new-price translation-none" }, parseFloat(price.replace(',', '.')).toFixed(2).replace('.', ',')), index.h("div", { class: "currency" }, index.h("span", null, this.currency))), priceDescription ? (index.h("span", { class: "price-description" }, priceDescription)) : (''))) : ('')), allBonuses.length > 0 && (index.h("div", { class: "bonuses-wrapper" }, allBonuses.map(bonus => {
268
- const isActive = currentBonusIds.includes(bonus.modalId);
285
+ const id = this.getUniqueBonusId(bonus);
286
+ const isActive = currentBonusIds.includes(id);
269
287
  return (index.h("div", { class: {
270
288
  "bonuss": true,
271
289
  "bonuss--active": isActive,
272
290
  "bonuss--inactive": !isActive
273
- }, key: bonus.modalId }, index.h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (index.h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (index.h("span", { class: "bonuss__text" }, bonus.name))));
291
+ }, key: id }, index.h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (index.h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (index.h("span", { class: "bonuss__text" }, bonus.name))));
274
292
  }))), index.h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), index.h("div", { class: "compare-card-half-40" }, index.h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (index.h("div", { class: "benefit-wrapper" }, index.h("span", { class: "benefit-title" }, this.benefitTitle), (_m = this === null || this === void 0 ? void 0 : this.benefits) === null || _m === void 0 ? void 0 :
275
293
  _m.map((benefit) => (this.benefitHandler(benefit, true))), index.h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (index.h("div", { class: "benefit-wrapper" }, index.h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
276
294
  const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
package/dist/collection/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.js CHANGED
@@ -7,7 +7,18 @@ import { productComparison } from "../../../../services/api/index";
7
7
  */
8
8
  export class TetCompareCardV2 {
9
9
  constructor() {
10
+ /**
11
+ * Indicates whether the card has already emitted the loaded event.
12
+ */
10
13
  this.cardHasEmitted = false;
14
+ /**
15
+ * Counter for unique bonus IDs.
16
+ */
17
+ this.bonusCounter = 0;
18
+ /**
19
+ * WeakMap to store unique IDs for bonuses.
20
+ */
21
+ this.bonusWeakMap = new WeakMap();
11
22
  /**
12
23
  * Renders the loader.
13
24
  */
@@ -198,6 +209,12 @@ export class TetCompareCardV2 {
198
209
  allBonuses() {
199
210
  return this.options.flatMap(option => option.bonuses || []);
200
211
  }
212
+ getUniqueBonusId(bonus) {
213
+ if (!this.bonusWeakMap.has(bonus)) {
214
+ this.bonusWeakMap.set(bonus, `bonus-${this.bonusCounter++}`);
215
+ }
216
+ return this.bonusWeakMap.get(bonus);
217
+ }
201
218
  getTheme() {
202
219
  if (this.darkMode) {
203
220
  if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
@@ -239,7 +256,7 @@ export class TetCompareCardV2 {
239
256
  });
240
257
  const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
241
258
  const currentBonuses = this.currentBonuses();
242
- const currentBonusIds = currentBonuses.map(bonus => bonus.modalId);
259
+ const currentBonusIds = currentBonuses.map(this.getUniqueBonusId.bind(this));
243
260
  const allBonuses = this.allBonuses();
244
261
  const isBestChoice = ((_l = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _l === void 0 ? void 0 : _l.bestChoice) || false;
245
262
  return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
@@ -258,12 +275,13 @@ export class TetCompareCardV2 {
258
275
  }, part: "compare-card-title-wrapper" }, h("h3", { class: "main-title" }, mainTitle))) : (''), h("div", { class: "price js-resize-price" }, price && !isNaN(parseFloat(price)) ? (h("div", { class: {
259
276
  'price-wrapper': true
260
277
  } }, h("div", { class: "price-container" }, h("div", { class: "new-price translation-none" }, parseFloat(price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.currency))), priceDescription ? (h("span", { class: "price-description" }, priceDescription)) : (''))) : ('')), allBonuses.length > 0 && (h("div", { class: "bonuses-wrapper" }, allBonuses.map(bonus => {
261
- const isActive = currentBonusIds.includes(bonus.modalId);
278
+ const id = this.getUniqueBonusId(bonus);
279
+ const isActive = currentBonusIds.includes(id);
262
280
  return (h("div", { class: {
263
281
  "bonuss": true,
264
282
  "bonuss--active": isActive,
265
283
  "bonuss--inactive": !isActive
266
- }, key: bonus.modalId }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))));
284
+ }, key: id }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))));
267
285
  }))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_m = this === null || this === void 0 ? void 0 : this.benefits) === null || _m === void 0 ? void 0 :
268
286
  _m.map((benefit) => (this.benefitHandler(benefit, true))), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
269
287
  const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
package/dist/components/tet-compare-card-v2.js CHANGED
@@ -18,7 +18,18 @@ const TetCompareCardV2$1 = /*@__PURE__*/ proxyCustomElement(class TetCompareCard
18
18
  this.__attachShadow();
19
19
  this.cardLoaded = createEvent(this, "cardLoaded", 7);
20
20
  this.productChanged = createEvent(this, "productChanged", 7);
21
+ /**
22
+ * Indicates whether the card has already emitted the loaded event.
23
+ */
21
24
  this.cardHasEmitted = false;
25
+ /**
26
+ * Counter for unique bonus IDs.
27
+ */
28
+ this.bonusCounter = 0;
29
+ /**
30
+ * WeakMap to store unique IDs for bonuses.
31
+ */
32
+ this.bonusWeakMap = new WeakMap();
22
33
  /**
23
34
  * Renders the loader.
24
35
  */
@@ -209,6 +220,12 @@ const TetCompareCardV2$1 = /*@__PURE__*/ proxyCustomElement(class TetCompareCard
209
220
  allBonuses() {
210
221
  return this.options.flatMap(option => option.bonuses || []);
211
222
  }
223
+ getUniqueBonusId(bonus) {
224
+ if (!this.bonusWeakMap.has(bonus)) {
225
+ this.bonusWeakMap.set(bonus, `bonus-${this.bonusCounter++}`);
226
+ }
227
+ return this.bonusWeakMap.get(bonus);
228
+ }
212
229
  getTheme() {
213
230
  if (this.darkMode) {
214
231
  if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
@@ -250,7 +267,7 @@ const TetCompareCardV2$1 = /*@__PURE__*/ proxyCustomElement(class TetCompareCard
250
267
  });
251
268
  const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
252
269
  const currentBonuses = this.currentBonuses();
253
- const currentBonusIds = currentBonuses.map(bonus => bonus.modalId);
270
+ const currentBonusIds = currentBonuses.map(this.getUniqueBonusId.bind(this));
254
271
  const allBonuses = this.allBonuses();
255
272
  const isBestChoice = ((_l = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _l === void 0 ? void 0 : _l.bestChoice) || false;
256
273
  return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
@@ -269,12 +286,13 @@ const TetCompareCardV2$1 = /*@__PURE__*/ proxyCustomElement(class TetCompareCard
269
286
  }, part: "compare-card-title-wrapper" }, h("h3", { class: "main-title" }, mainTitle))) : (''), h("div", { class: "price js-resize-price" }, price && !isNaN(parseFloat(price)) ? (h("div", { class: {
270
287
  'price-wrapper': true
271
288
  } }, h("div", { class: "price-container" }, h("div", { class: "new-price translation-none" }, parseFloat(price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.currency))), priceDescription ? (h("span", { class: "price-description" }, priceDescription)) : (''))) : ('')), allBonuses.length > 0 && (h("div", { class: "bonuses-wrapper" }, allBonuses.map(bonus => {
272
- const isActive = currentBonusIds.includes(bonus.modalId);
289
+ const id = this.getUniqueBonusId(bonus);
290
+ const isActive = currentBonusIds.includes(id);
273
291
  return (h("div", { class: {
274
292
  "bonuss": true,
275
293
  "bonuss--active": isActive,
276
294
  "bonuss--inactive": !isActive
277
- }, key: bonus.modalId }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))));
295
+ }, key: id }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))));
278
296
  }))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_m = this === null || this === void 0 ? void 0 : this.benefits) === null || _m === void 0 ? void 0 :
279
297
  _m.map((benefit) => (this.benefitHandler(benefit, true))), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
280
298
  const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
package/dist/esm/tet-compare-card-v2.entry.js CHANGED
@@ -10,7 +10,18 @@ const TetCompareCardV2 = class {
10
10
  registerInstance(this, hostRef);
11
11
  this.cardLoaded = createEvent(this, "cardLoaded", 7);
12
12
  this.productChanged = createEvent(this, "productChanged", 7);
13
+ /**
14
+ * Indicates whether the card has already emitted the loaded event.
15
+ */
13
16
  this.cardHasEmitted = false;
17
+ /**
18
+ * Counter for unique bonus IDs.
19
+ */
20
+ this.bonusCounter = 0;
21
+ /**
22
+ * WeakMap to store unique IDs for bonuses.
23
+ */
24
+ this.bonusWeakMap = new WeakMap();
14
25
  /**
15
26
  * Renders the loader.
16
27
  */
@@ -201,6 +212,12 @@ const TetCompareCardV2 = class {
201
212
  allBonuses() {
202
213
  return this.options.flatMap(option => option.bonuses || []);
203
214
  }
215
+ getUniqueBonusId(bonus) {
216
+ if (!this.bonusWeakMap.has(bonus)) {
217
+ this.bonusWeakMap.set(bonus, `bonus-${this.bonusCounter++}`);
218
+ }
219
+ return this.bonusWeakMap.get(bonus);
220
+ }
204
221
  getTheme() {
205
222
  if (this.darkMode) {
206
223
  if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
@@ -242,7 +259,7 @@ const TetCompareCardV2 = class {
242
259
  });
243
260
  const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
244
261
  const currentBonuses = this.currentBonuses();
245
- const currentBonusIds = currentBonuses.map(bonus => bonus.modalId);
262
+ const currentBonusIds = currentBonuses.map(this.getUniqueBonusId.bind(this));
246
263
  const allBonuses = this.allBonuses();
247
264
  const isBestChoice = ((_l = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _l === void 0 ? void 0 : _l.bestChoice) || false;
248
265
  return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
@@ -261,12 +278,13 @@ const TetCompareCardV2 = class {
261
278
  }, part: "compare-card-title-wrapper" }, h("h3", { class: "main-title" }, mainTitle))) : (''), h("div", { class: "price js-resize-price" }, price && !isNaN(parseFloat(price)) ? (h("div", { class: {
262
279
  'price-wrapper': true
263
280
  } }, h("div", { class: "price-container" }, h("div", { class: "new-price translation-none" }, parseFloat(price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.currency))), priceDescription ? (h("span", { class: "price-description" }, priceDescription)) : (''))) : ('')), allBonuses.length > 0 && (h("div", { class: "bonuses-wrapper" }, allBonuses.map(bonus => {
264
- const isActive = currentBonusIds.includes(bonus.modalId);
281
+ const id = this.getUniqueBonusId(bonus);
282
+ const isActive = currentBonusIds.includes(id);
265
283
  return (h("div", { class: {
266
284
  "bonuss": true,
267
285
  "bonuss--active": isActive,
268
286
  "bonuss--inactive": !isActive
269
- }, key: bonus.modalId }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))));
287
+ }, key: id }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, tabindex: "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))));
270
288
  }))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_m = this === null || this === void 0 ? void 0 : this.benefits) === null || _m === void 0 ? void 0 :
271
289
  _m.map((benefit) => (this.benefitHandler(benefit, true))), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
272
290
  const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;