@everymatrix/casino-challenge-details 0.3.16 → 0.3.18

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 (17) hide show
  1. package/dist/casino-challenge-details/casino-challenge-details-55a3a560.js +1 -0
  2. package/dist/casino-challenge-details/casino-challenge-details_4.entry.js +1 -1
  3. package/dist/casino-challenge-details/index.esm.js +1 -1
  4. package/dist/cjs/{casino-challenge-details-7465690c.js → casino-challenge-details-d250a83a.js} +74 -11
  5. package/dist/cjs/casino-challenge-details_4.cjs.entry.js +1 -1
  6. package/dist/cjs/index.cjs.js +1 -1
  7. package/dist/collection/components/casino-challenge-details/casino-challenge-details.css +23 -0
  8. package/dist/collection/components/casino-challenge-details/casino-challenge-details.js +30 -6
  9. package/dist/collection/utils/locale.utils.js +40 -5
  10. package/dist/collection/utils/types.js +6 -0
  11. package/dist/esm/{casino-challenge-details-00cd9c3e.js → casino-challenge-details-55a3a560.js} +74 -11
  12. package/dist/esm/casino-challenge-details_4.entry.js +2 -2
  13. package/dist/esm/index.js +1 -1
  14. package/dist/types/components/casino-challenge-details/casino-challenge-details.d.ts +2 -0
  15. package/dist/types/utils/types.d.ts +7 -0
  16. package/package.json +1 -1
  17. package/dist/casino-challenge-details/casino-challenge-details-00cd9c3e.js +0 -1
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const casinoChallengeDetails = require('./casino-challenge-details-7465690c.js');
5
+ const casinoChallengeDetails = require('./casino-challenge-details-d250a83a.js');
6
6
  require('./index-2a30d71d.js');
7
7
 
8
8
 
package/dist/collection/components/casino-challenge-details/casino-challenge-details.css CHANGED
@@ -395,6 +395,29 @@
395
395
  -webkit-background-clip: text;
396
396
  -webkit-text-fill-color: transparent;
397
397
  }
398
+ .details .rules__tab .contributionType {
399
+ margin: 24px 0;
400
+ }
401
+ .details .rules__tab .contributionRule {
402
+ margin: 0;
403
+ }
404
+ .details .rules__tab .contribution__label {
405
+ font-size: var(--emw--font-size-small, 14px);
406
+ color: var(--emw--color-white, #fff);
407
+ font-weight: var(--emw--font-weight-bold, 700);
408
+ line-height: 18px;
409
+ }
410
+ .details .rules__tab .contribution__type__label {
411
+ margin-right: 4px;
412
+ }
413
+ .details .rules__tab .contribution__value {
414
+ font-size: var(--emw--font-size-small, 14px);
415
+ color: var(--emw--color-gray-150, #c8d6ce);
416
+ font-weight: var(--emw--font-weight-medium, 500);
417
+ }
418
+ .details .rules__tab .contribution__rule__value {
419
+ margin-bottom: 8px;
420
+ }
398
421
  .details__button {
399
422
  display: flex;
400
423
  justify-content: center;
package/dist/collection/components/casino-challenge-details/casino-challenge-details.js CHANGED
@@ -11,7 +11,7 @@ import checkIcon from "../../assets/check.svg";
11
11
  import infoIcon from "../../assets/info-circle.svg";
12
12
  import titleIcon from "../../assets/title-icon.svg";
13
13
  import notificationIcon from "../../assets/notification.svg";
14
- import { ChallengeStatusDictionary, EChallengeLevelTargetType, EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
14
+ import { ChallengeStatusDictionary, EChallengeLevelTargetType, EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeStatus, EWalletTypes } from "../../utils/types";
15
15
  export class CasinoChallengeDetails {
16
16
  constructor() {
17
17
  this.activeEntityRef = null;
@@ -110,6 +110,26 @@ export class CasinoChallengeDetails {
110
110
  this.getBackButtonText = () => {
111
111
  return (h("span", { class: "back-button__text" }, this.isMobile ? translate('all', this.language) : translate('back', this.language)));
112
112
  };
113
+ this.getContributionRule = (isContributeToOne) => {
114
+ if (isContributeToOne) {
115
+ return translate('isContributeToOne', this.language);
116
+ }
117
+ else
118
+ return translate('isNotContributeToOne', this.language);
119
+ };
120
+ this.getContributionType = (contributedBy) => {
121
+ switch (contributedBy) {
122
+ case EWalletTypes.BonusMoney:
123
+ return translate('bonusMoney', this.language);
124
+ case EWalletTypes.RealCash:
125
+ return translate('realMoney', this.language);
126
+ case EWalletTypes.Mixed:
127
+ return translate('mixedMoney', this.language);
128
+ default:
129
+ break;
130
+ }
131
+ return '';
132
+ };
113
133
  this.goBack = () => {
114
134
  window.history.back();
115
135
  };
@@ -253,7 +273,8 @@ export class CasinoChallengeDetails {
253
273
  window.removeEventListener('resize', this.checkIsMobile);
254
274
  }
255
275
  getReward(level) {
256
- return level.Rewards.map((r) => r.RewardDescription).join(' + ') || '-';
276
+ var _a;
277
+ return ((_a = level.Rewards) === null || _a === void 0 ? void 0 : _a.map((r) => r.RewardDescription).join(' + ')) || '-';
257
278
  }
258
279
  getTarget(level) {
259
280
  var _a;
@@ -438,13 +459,16 @@ export class CasinoChallengeDetails {
438
459
  });
439
460
  }
440
461
  get gamesTab() {
441
- return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : (this.games.map((game) => {
462
+ var _a;
463
+ return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : ((_a = this.games) === null || _a === void 0 ? void 0 : _a.map((game) => {
442
464
  return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.Thumbnail, alt: "game-icon", title: "game-icon" }), h("span", { class: "contribution" }, translate('contribution', this.language), " ", game.Contribution, "%")));
443
465
  }))));
444
466
  }
445
467
  get rulesTab() {
446
- var _a, _b, _c, _d, _e, _f, _g, _h;
447
- return (h("div", { class: "rules__tab" }, ((_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Description) && (h("div", { class: "rule" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Description)), ((_f = (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.ChallengePresentation) === null || _f === void 0 ? void 0 : _f.Url) && (h("a", { class: "link", href: (_h = (_g = this.challenge) === null || _g === void 0 ? void 0 : _g.ChallengePresentation) === null || _h === void 0 ? void 0 : _h.Url, target: "_blank" }, translate('terms', this.language)))));
468
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
469
+ const contributionType = this.getContributionType((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedBy);
470
+ const contributionRule = this.getContributionRule((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.IsContributeToOne);
471
+ return (h("div", { class: "rules__tab" }, ((_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Description) && (h("div", { class: "rule" }, (_f = (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.ChallengePresentation) === null || _f === void 0 ? void 0 : _f.Description)), contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule), ((_h = (_g = this.challenge) === null || _g === void 0 ? void 0 : _g.ChallengePresentation) === null || _h === void 0 ? void 0 : _h.Url) && (h("a", { class: "link", href: (_k = (_j = this.challenge) === null || _j === void 0 ? void 0 : _j.ChallengePresentation) === null || _k === void 0 ? void 0 : _k.Url, target: "_blank" }, translate('terms', this.language)))));
448
472
  }
449
473
  get footer() {
450
474
  var _a, _b, _c, _d;
@@ -470,7 +494,7 @@ export class CasinoChallengeDetails {
470
494
  return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 4 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: infoIcon }), h("span", { class: "notification__message" }, translate('expiredNotification', this.language)))));
471
495
  }
472
496
  render() {
473
- return (h("div", { key: 'db59c429bf40a1ad703f3f26763549ece9fe8723', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader, this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backIcon }), this.getBackButtonText()), this.forfeitedNofitication, this.completedNotification, this.expiredNotification, h("div", { class: "details" }, this.cardGeneralInfo, h("div", { class: "details__tabs-container" }, this.challengeTabs, this.activeTabIndex === 0 && this.levelsTab, this.activeTabIndex === 1 && this.gamesTab, this.activeTabIndex === 2 && this.rulesTab), this.footer)))));
497
+ return (h("div", { key: '0ccce42fa6edb63817eb8dc8d5c6300bd53d2a8b', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader, this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backIcon }), this.getBackButtonText()), this.forfeitedNofitication, this.completedNotification, this.expiredNotification, h("div", { class: "details" }, this.cardGeneralInfo, h("div", { class: "details__tabs-container" }, this.challengeTabs, this.activeTabIndex === 0 && this.levelsTab, this.activeTabIndex === 1 && this.gamesTab, this.activeTabIndex === 2 && this.rulesTab), this.footer)))));
474
498
  }
475
499
  static get is() { return "casino-challenge-details"; }
476
500
  static get encapsulation() { return "shadow"; }
package/dist/collection/utils/locale.utils.js CHANGED
@@ -28,7 +28,14 @@ const TRANSLATIONS = {
28
28
  contribution: 'contribution',
29
29
  endDate: 'End Date',
30
30
  back: 'Back',
31
- all: 'All Challenges'
31
+ all: 'All Challenges',
32
+ contributionType: 'Contribution Type',
33
+ contributionRule: 'Contribution Rule',
34
+ isContributeToOne: 'Bets contribute only to the earliest started challenge (if there are multiple started challenges)',
35
+ isNotContributeToOne: 'Bets contribute to all started challenges',
36
+ bonusMoney: 'Bonus Money',
37
+ realMoney: 'Real Money',
38
+ mixedMoney: 'Real and Bonus Money contribution'
32
39
  },
33
40
  ro: {
34
41
  title: 'Provocări',
@@ -56,7 +63,14 @@ const TRANSLATIONS = {
56
63
  contribution: "contribuție",
57
64
  endDate: "Data de încheiere",
58
65
  back: "Înapoi",
59
- all: "Toate Provocările"
66
+ all: "Toate Provocările",
67
+ contributionType: 'Tip de contribuție',
68
+ contributionRule: 'Regulă de contribuție',
69
+ isContributeToOne: 'Pariurile contribuie doar la provocarea începută cel mai devreme (dacă există mai multe provocări începute)',
70
+ isNotContributeToOne: 'Pariurile contribuie la toate provocările începute',
71
+ bonusMoney: 'Bani bonus',
72
+ realMoney: 'Bani reali',
73
+ mixedMoney: 'Contribuție în bani reali și bonus'
60
74
  },
61
75
  fr: {
62
76
  title: 'Défis',
@@ -84,7 +98,14 @@ const TRANSLATIONS = {
84
98
  contribution: "contribution",
85
99
  endDate: "Date de fin",
86
100
  back: "Retour",
87
- all: "Tous les Défis"
101
+ all: "Tous les Défis",
102
+ contributionType: 'Type de contribution',
103
+ contributionRule: 'Règle de contribution',
104
+ isContributeToOne: "Les paris contribuent uniquement au premier défi commencé (s'il y a plusieurs défis commencés)",
105
+ isNotContributeToOne: 'Les paris contribuent à tous les défis commencés',
106
+ bonusMoney: 'Argent bonus',
107
+ realMoney: 'Argent réel',
108
+ mixedMoney: 'Contribution en argent réel et bonus'
88
109
  },
89
110
  ar: {
90
111
  title: 'تحديات',
@@ -112,7 +133,14 @@ const TRANSLATIONS = {
112
133
  contribution: "مساهمة",
113
134
  endDate: "تاريخ الانتهاء",
114
135
  back: "عودة",
115
- all: "جميع التحديات"
136
+ all: "جميع التحديات",
137
+ contributionType: 'نوع المساهمة',
138
+ contributionRule: 'قاعدة المساهمة',
139
+ isContributeToOne: 'تُحتسب الرهانات فقط للتحدي الذي بدأ أولاً (إذا كان هناك عدة تحديات بدأت)',
140
+ isNotContributeToOne: 'تُحتسب الرهانات لجميع التحديات التي بدأت',
141
+ bonusMoney: 'أموال المكافأة',
142
+ realMoney: 'أموال حقيقية',
143
+ mixedMoney: 'مساهمة من الأموال الحقيقية وأموال المكافأة'
116
144
  },
117
145
  hr: {
118
146
  title: 'Izazovi',
@@ -140,7 +168,14 @@ const TRANSLATIONS = {
140
168
  contribution: "doprinos",
141
169
  endDate: "Datum završetka",
142
170
  back: "Nazad",
143
- all: "Svi Izazovi"
171
+ all: "Svi Izazovi",
172
+ contributionType: 'Vrsta doprinosa',
173
+ contributionRule: 'Pravilo doprinosa',
174
+ isContributeToOne: 'Oklade se pridonose samo najranije započetom izazovu (ako postoji više započetih izazova)',
175
+ isNotContributeToOne: 'Oklade se pridonose svim započetim izazovima',
176
+ bonusMoney: 'Bonus novac',
177
+ realMoney: 'Stvarni novac',
178
+ mixedMoney: 'Doprinos stvarnog i bonus novca'
144
179
  }
145
180
  };
146
181
  export const translate = (key, customLang) => {
package/dist/collection/utils/types.js CHANGED
@@ -66,3 +66,9 @@ export var EChallengeValidityType;
66
66
  EChallengeValidityType[EChallengeValidityType["Period"] = 0] = "Period";
67
67
  EChallengeValidityType[EChallengeValidityType["Date"] = 1] = "Date";
68
68
  })(EChallengeValidityType || (EChallengeValidityType = {}));
69
+ export var EWalletTypes;
70
+ (function (EWalletTypes) {
71
+ EWalletTypes[EWalletTypes["RealCash"] = 0] = "RealCash";
72
+ EWalletTypes[EWalletTypes["BonusMoney"] = 1] = "BonusMoney";
73
+ EWalletTypes[EWalletTypes["Mixed"] = 2] = "Mixed";
74
+ })(EWalletTypes || (EWalletTypes = {}));
package/dist/esm/{casino-challenge-details-00cd9c3e.js → casino-challenge-details-55a3a560.js} RENAMED
@@ -87,7 +87,14 @@ const TRANSLATIONS = {
87
87
  contribution: 'contribution',
88
88
  endDate: 'End Date',
89
89
  back: 'Back',
90
- all: 'All Challenges'
90
+ all: 'All Challenges',
91
+ contributionType: 'Contribution Type',
92
+ contributionRule: 'Contribution Rule',
93
+ isContributeToOne: 'Bets contribute only to the earliest started challenge (if there are multiple started challenges)',
94
+ isNotContributeToOne: 'Bets contribute to all started challenges',
95
+ bonusMoney: 'Bonus Money',
96
+ realMoney: 'Real Money',
97
+ mixedMoney: 'Real and Bonus Money contribution'
91
98
  },
92
99
  ro: {
93
100
  title: 'Provocări',
@@ -115,7 +122,14 @@ const TRANSLATIONS = {
115
122
  contribution: "contribuție",
116
123
  endDate: "Data de încheiere",
117
124
  back: "Înapoi",
118
- all: "Toate Provocările"
125
+ all: "Toate Provocările",
126
+ contributionType: 'Tip de contribuție',
127
+ contributionRule: 'Regulă de contribuție',
128
+ isContributeToOne: 'Pariurile contribuie doar la provocarea începută cel mai devreme (dacă există mai multe provocări începute)',
129
+ isNotContributeToOne: 'Pariurile contribuie la toate provocările începute',
130
+ bonusMoney: 'Bani bonus',
131
+ realMoney: 'Bani reali',
132
+ mixedMoney: 'Contribuție în bani reali și bonus'
119
133
  },
120
134
  fr: {
121
135
  title: 'Défis',
@@ -143,7 +157,14 @@ const TRANSLATIONS = {
143
157
  contribution: "contribution",
144
158
  endDate: "Date de fin",
145
159
  back: "Retour",
146
- all: "Tous les Défis"
160
+ all: "Tous les Défis",
161
+ contributionType: 'Type de contribution',
162
+ contributionRule: 'Règle de contribution',
163
+ isContributeToOne: "Les paris contribuent uniquement au premier défi commencé (s'il y a plusieurs défis commencés)",
164
+ isNotContributeToOne: 'Les paris contribuent à tous les défis commencés',
165
+ bonusMoney: 'Argent bonus',
166
+ realMoney: 'Argent réel',
167
+ mixedMoney: 'Contribution en argent réel et bonus'
147
168
  },
148
169
  ar: {
149
170
  title: 'تحديات',
@@ -171,7 +192,14 @@ const TRANSLATIONS = {
171
192
  contribution: "مساهمة",
172
193
  endDate: "تاريخ الانتهاء",
173
194
  back: "عودة",
174
- all: "جميع التحديات"
195
+ all: "جميع التحديات",
196
+ contributionType: 'نوع المساهمة',
197
+ contributionRule: 'قاعدة المساهمة',
198
+ isContributeToOne: 'تُحتسب الرهانات فقط للتحدي الذي بدأ أولاً (إذا كان هناك عدة تحديات بدأت)',
199
+ isNotContributeToOne: 'تُحتسب الرهانات لجميع التحديات التي بدأت',
200
+ bonusMoney: 'أموال المكافأة',
201
+ realMoney: 'أموال حقيقية',
202
+ mixedMoney: 'مساهمة من الأموال الحقيقية وأموال المكافأة'
175
203
  },
176
204
  hr: {
177
205
  title: 'Izazovi',
@@ -199,7 +227,14 @@ const TRANSLATIONS = {
199
227
  contribution: "doprinos",
200
228
  endDate: "Datum završetka",
201
229
  back: "Nazad",
202
- all: "Svi Izazovi"
230
+ all: "Svi Izazovi",
231
+ contributionType: 'Vrsta doprinosa',
232
+ contributionRule: 'Pravilo doprinosa',
233
+ isContributeToOne: 'Oklade se pridonose samo najranije započetom izazovu (ako postoji više započetih izazova)',
234
+ isNotContributeToOne: 'Oklade se pridonose svim započetim izazovima',
235
+ bonusMoney: 'Bonus novac',
236
+ realMoney: 'Stvarni novac',
237
+ mixedMoney: 'Doprinos stvarnog i bonus novca'
203
238
  }
204
239
  };
205
240
  const translate = (key, customLang) => {
@@ -342,8 +377,14 @@ var EChallengeValidityType;
342
377
  EChallengeValidityType[EChallengeValidityType["Period"] = 0] = "Period";
343
378
  EChallengeValidityType[EChallengeValidityType["Date"] = 1] = "Date";
344
379
  })(EChallengeValidityType || (EChallengeValidityType = {}));
380
+ var EWalletTypes;
381
+ (function (EWalletTypes) {
382
+ EWalletTypes[EWalletTypes["RealCash"] = 0] = "RealCash";
383
+ EWalletTypes[EWalletTypes["BonusMoney"] = 1] = "BonusMoney";
384
+ EWalletTypes[EWalletTypes["Mixed"] = 2] = "Mixed";
385
+ })(EWalletTypes || (EWalletTypes = {}));
345
386
 
346
- const casinoChallengeDetailsCss = ".container {\n font-family: var(--emw--font-family-secondary, \"Montserrat\", sans-serif);\n background: var(--emw--color-background, #000);\n min-height: 100vh;\n padding-top: 16px;\n container-type: inline-size;\n container-name: challenges-details;\n min-width: 375px;\n width: 100%;\n margin: 0 auto;\n}\n\n.challenges-header {\n display: none;\n}\n\n.back-button {\n display: flex;\n align-items: center;\n padding: 14px 0 14px 10px;\n outline: none;\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n border: none;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n cursor: pointer;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.back-button__icon {\n margin: 0 4px;\n}\n.back-button__text {\n margin-left: 4px;\n}\n\n.details {\n min-width: 308px;\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 16px;\n min-width: 375px;\n width: 100%;\n}\n.details.grayed {\n opacity: 0.5;\n}\n.details__general-info {\n max-width: 344px;\n padding-bottom: 16px;\n}\n.details__general-info-image-container {\n position: relative;\n margin-bottom: 22px;\n}\n.details__general-info-image {\n display: block;\n width: 344px;\n height: 226px;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details__general-info-image.grayed {\n opacity: 0.5;\n}\n.details__general-info-timer-badge {\n position: absolute;\n background: var(--emw--color-white, #fff);\n top: 6px;\n right: 6px;\n border-radius: var(--emw--border-radius-large, 30px);\n padding: 2px 12px;\n line-height: 22px;\n font-weight: var(--emw--font-weight-medium, 500);\n font-size: var(--emw--font-size-x-small, 12px);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(20px);\n}\n.details__general-info-timer-badge span {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.expired {\n background: var(--emw--background-gray-color, rgba(250, 250, 250, 0.5019607843));\n border: 1px solid var(--emw--border-gray-color, #292c29);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.completed {\n background: var(--emw--background-success-color, #c9f0d7);\n border: 1px solid var(--emw--border-success-color, #00b74f);\n color: var(--emw--color-gray-300, #083b17);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.forfeited {\n background: var(--emw--background-errored-color, #ffe1df);\n border: 1px solid var(--emw--border-errored-color, #d6421e);\n color: var(--emw--errored-color, #850606);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.paused {\n background: var(--emw--background-warning-color, #f8e4ad);\n border: 1px solid var(--emw--border-warning-color, #ea9018);\n color: var(--emw--warning-color, #6d460a);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-title {\n margin: 0 0 4px;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-end-date_label {\n color: var(--emw--color-gray-150, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin: 0;\n}\n.details__general-info-end-date_value {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-action-button,\n.details .footer-action-button {\n width: 100%;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n text-align: center;\n text-transform: uppercase;\n font-weight: var(--emw--font-weight-bold, 700);\n height: 51px;\n padding: 16px 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n gap: 10px;\n}\n.details__general-info-action-button:hover,\n.details .footer-action-button:hover {\n border-color: var(--emw--color-secondary, #083b17);\n cursor: pointer;\n}\n.details__general-info-action-button.filled,\n.details .footer-action-button.filled {\n background-color: var(--emw--button-background-primary-color, #18ce51);\n color: var(--emw--color-white, #fff);\n border-color: var(--emw--color-gray-300, #083b17);\n}\n.details__general-info-action-button.filled:hover,\n.details .footer-action-button.filled:hover {\n border-color: transparent;\n box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.details__general-info-action-button.grayed,\n.details .footer-action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black-150, #000000);\n border-color: var(--emw--button-disabled-border-color, #727672);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details__general-info-action-button.grayed:hover,\n.details .footer-action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.details__general-info-action-button:disabled, .details__general-info-action-button:disabled:hover,\n.details .footer-action-button:disabled,\n.details .footer-action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, #727672);\n opacity: 0.7;\n}\n.details .footer-action-button {\n height: 44px;\n padding: 14px 20px;\n font-size: var(--emw--font-size-sm, 14px);\n}\n.details__general-info-action-button {\n display: none;\n margin-top: 32px;\n}\n.details__tabs-container {\n flex-grow: 1;\n max-width: 100%;\n}\n.details__tabs {\n position: relative;\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid var(--emw--border-warning-color, #ea9018);\n}\n.details__tab {\n padding: 10px 20px;\n cursor: pointer;\n position: relative;\n font-weight: var(--emw--font-weight-medium, 500);\n color: var(--emw--color-gray-300, #555);\n display: flex;\n width: 33.3333333333%;\n padding: 12px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\n.details__tab.active {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n background: var(--emw--active-tab, linear-gradient(180deg, #ea9018 0%, #e0a84e 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__tab {\n color: var(--emw--color-gray-100, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n.details__tab:nth-of-type(1).active ~ .active-tab-indicator {\n left: 0;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(2).active ~ .active-tab-indicator {\n left: 33.3333333333%;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(3).active ~ .active-tab-indicator {\n left: 66.6666666667%;\n width: 33.3333333333%;\n}\n.details .active-tab-indicator {\n position: absolute;\n bottom: -3px;\n height: 2px;\n background: var(--emw--active-tab-indicator, linear-gradient(180deg, rgba(234, 144, 24, 0.7) 0%, rgba(224, 168, 78, 0.7) 100%), #727672);\n transition: left 0.3s ease, width 0.3s ease;\n}\n.details .levels__tab {\n margin-top: 22px;\n display: flex;\n gap: 12px;\n flex-direction: column;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .level {\n display: flex;\n padding: 20px;\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background-color: var(--emw--color-background, rgba(114, 118, 114, 0.2));\n}\n.details .level.grayed {\n background: rgba(114, 118, 114, 0.15);\n}\n.details .level.active {\n background: linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%);\n border: 2px solid var(--Gradient-Blue, #003e5c);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details .level.completed {\n background: linear-gradient(90deg, rgba(0, 62, 92, 0.3) 0.05%, rgba(17, 59, 33, 0.3) 87.69%);\n}\n.details .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .level__title {\n width: 100%;\n display: flex;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n margin-bottom: 10px;\n}\n.details .level__title .completed, .details .level__title .in-progress {\n color: var(--emw--color-valid, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 22px;\n}\n.details .level__title.grayed {\n color: var(--emw--disabled-color, #727672);\n}\n.details .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.details .level__icon {\n display: flex;\n margin: 5px 6px 5px 0;\n opacity: 1;\n}\n.details .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n}\n.details .level__icon img.grayed {\n opacity: 0.5;\n}\n.details .level__bonus, .details .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin-bottom: 4px;\n}\n.details .level__value {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.details .level__value.grayed {\n opacity: 0.5;\n}\n.details .games__tab {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 22px 0;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .games__tab .game {\n position: relative;\n width: 105px;\n height: 85px;\n cursor: pointer;\n}\n.details .games__tab .game img {\n width: 100%;\n height: 100%;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details .games__tab .game .contribution {\n position: absolute;\n top: 4px;\n right: 4px;\n color: var(--emw--color-white, #fff);\n border-radius: var(--emw--border-radius-small, 12px);\n border: 1px solid var(--Gradient-Blue, #003e5c);\n background: rgba(0, 0, 0, 0.5);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(5px);\n padding: 0 8px;\n font-size: var(--emw--font-size-2x-small, 8px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 22px;\n text-align: center;\n}\n.details .rules__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 8px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .rules__tab .rule {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n}\n.details .rules__tab .link {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n padding: 14px 0;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__button {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex: 1 0 0;\n height: 42px;\n padding: 14px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background-color: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n\n.button__container {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: calc(100% - 32px);\n padding: 16px 16px 22px 16px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-top: 1px solid var(--emw--color-blue, #003e5c);\n background: var(--emw--color-background, #000);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n\n.lds-dual-ring {\n display: block;\n width: 80px;\n height: 80px;\n margin: 80px auto 0 auto;\n}\n\n.lds-dual-ring:after {\n content: \" \";\n display: block;\n width: 64px;\n height: 64px;\n margin: 8px;\n border-radius: 50%;\n border: 6px solid var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n border-color: var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e)) transparent var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 16px 22px 16px;\n}\n.notification__icon {\n margin-top: 2px;\n}\n.notification__message, .notification__title {\n color: var(--emw--color-gray-50, #e2e2e2);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.notification__title {\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-details (min-width: 768px) {\n .button__container {\n display: none;\n }\n .details {\n gap: 36px;\n flex-wrap: nowrap;\n }\n .details__general-info-action-button {\n display: flex;\n }\n .details__general-info-image {\n width: 380px;\n min-height: 226px;\n height: auto;\n }\n .details__general-info {\n max-width: 380px;\n }\n .details__tabs__container {\n max-width: calc(100% - 380px);\n }\n .details .levels__tab {\n gap: 20px;\n height: 60vh;\n }\n .details .levels__tab .level__icon {\n width: 14px;\n height: 14px;\n margin: 4px 6px 4px 0px;\n }\n .details .levels__tab .level__icon img {\n width: 100%;\n height: 100%;\n }\n .details .levels__tab .level__title {\n font-size: var(--emw--font-size-medium, 16px);\n }\n .details .levels__tab .level__title .completed, .details .levels__tab .level__title .in-progress {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .levels__tab .level__bonus, .details .levels__tab .level__target, .details .levels__tab .level__value {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .games__tab, .details .rules__tab {\n height: 60vh;\n }\n .details .games__tab {\n gap: 20px;\n min-width: 340px;\n }\n .details .games__tab .game {\n width: 160px;\n height: 110px;\n }\n .details .games__tab .game .contribution {\n top: 8px;\n right: 8px;\n padding: 4px 10px;\n font-size: var(--emw--font-size-2x-small, 10px);\n line-height: 18px;\n }\n .challenges-header {\n margin: 0 0 32px;\n display: flex;\n justify-content: space-between;\n }\n .challenges-title {\n margin: 0;\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: var(--emw--font-size-x-large, 24px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-white, #ffffff);\n }\n .challenges-tabs {\n display: flex;\n gap: 12px;\n border-radius: 48px;\n padding: 6px;\n color: var(--emw--color-gray-150, #c8d6ce);\n background-color: var(--emw--color-background-secondary, #272727);\n }\n .challenges-tab {\n padding: 10px 16px;\n border-radius: 40px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n cursor: pointer;\n text-align: center;\n width: 95px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n }\n .challenges-tab.active {\n color: var(--emw--color-white, #ffffff);\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n }\n .challenges-tab:last-child {\n width: inherit;\n padding: 10px 16px;\n }\n}";
387
+ const casinoChallengeDetailsCss = ".container {\n font-family: var(--emw--font-family-secondary, \"Montserrat\", sans-serif);\n background: var(--emw--color-background, #000);\n min-height: 100vh;\n padding-top: 16px;\n container-type: inline-size;\n container-name: challenges-details;\n min-width: 375px;\n width: 100%;\n margin: 0 auto;\n}\n\n.challenges-header {\n display: none;\n}\n\n.back-button {\n display: flex;\n align-items: center;\n padding: 14px 0 14px 10px;\n outline: none;\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n border: none;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n cursor: pointer;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.back-button__icon {\n margin: 0 4px;\n}\n.back-button__text {\n margin-left: 4px;\n}\n\n.details {\n min-width: 308px;\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 16px;\n min-width: 375px;\n width: 100%;\n}\n.details.grayed {\n opacity: 0.5;\n}\n.details__general-info {\n max-width: 344px;\n padding-bottom: 16px;\n}\n.details__general-info-image-container {\n position: relative;\n margin-bottom: 22px;\n}\n.details__general-info-image {\n display: block;\n width: 344px;\n height: 226px;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details__general-info-image.grayed {\n opacity: 0.5;\n}\n.details__general-info-timer-badge {\n position: absolute;\n background: var(--emw--color-white, #fff);\n top: 6px;\n right: 6px;\n border-radius: var(--emw--border-radius-large, 30px);\n padding: 2px 12px;\n line-height: 22px;\n font-weight: var(--emw--font-weight-medium, 500);\n font-size: var(--emw--font-size-x-small, 12px);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(20px);\n}\n.details__general-info-timer-badge span {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.expired {\n background: var(--emw--background-gray-color, rgba(250, 250, 250, 0.5019607843));\n border: 1px solid var(--emw--border-gray-color, #292c29);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.completed {\n background: var(--emw--background-success-color, #c9f0d7);\n border: 1px solid var(--emw--border-success-color, #00b74f);\n color: var(--emw--color-gray-300, #083b17);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.forfeited {\n background: var(--emw--background-errored-color, #ffe1df);\n border: 1px solid var(--emw--border-errored-color, #d6421e);\n color: var(--emw--errored-color, #850606);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.paused {\n background: var(--emw--background-warning-color, #f8e4ad);\n border: 1px solid var(--emw--border-warning-color, #ea9018);\n color: var(--emw--warning-color, #6d460a);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-title {\n margin: 0 0 4px;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-end-date_label {\n color: var(--emw--color-gray-150, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin: 0;\n}\n.details__general-info-end-date_value {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-action-button,\n.details .footer-action-button {\n width: 100%;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n text-align: center;\n text-transform: uppercase;\n font-weight: var(--emw--font-weight-bold, 700);\n height: 51px;\n padding: 16px 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n gap: 10px;\n}\n.details__general-info-action-button:hover,\n.details .footer-action-button:hover {\n border-color: var(--emw--color-secondary, #083b17);\n cursor: pointer;\n}\n.details__general-info-action-button.filled,\n.details .footer-action-button.filled {\n background-color: var(--emw--button-background-primary-color, #18ce51);\n color: var(--emw--color-white, #fff);\n border-color: var(--emw--color-gray-300, #083b17);\n}\n.details__general-info-action-button.filled:hover,\n.details .footer-action-button.filled:hover {\n border-color: transparent;\n box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.details__general-info-action-button.grayed,\n.details .footer-action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black-150, #000000);\n border-color: var(--emw--button-disabled-border-color, #727672);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details__general-info-action-button.grayed:hover,\n.details .footer-action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.details__general-info-action-button:disabled, .details__general-info-action-button:disabled:hover,\n.details .footer-action-button:disabled,\n.details .footer-action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, #727672);\n opacity: 0.7;\n}\n.details .footer-action-button {\n height: 44px;\n padding: 14px 20px;\n font-size: var(--emw--font-size-sm, 14px);\n}\n.details__general-info-action-button {\n display: none;\n margin-top: 32px;\n}\n.details__tabs-container {\n flex-grow: 1;\n max-width: 100%;\n}\n.details__tabs {\n position: relative;\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid var(--emw--border-warning-color, #ea9018);\n}\n.details__tab {\n padding: 10px 20px;\n cursor: pointer;\n position: relative;\n font-weight: var(--emw--font-weight-medium, 500);\n color: var(--emw--color-gray-300, #555);\n display: flex;\n width: 33.3333333333%;\n padding: 12px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\n.details__tab.active {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n background: var(--emw--active-tab, linear-gradient(180deg, #ea9018 0%, #e0a84e 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__tab {\n color: var(--emw--color-gray-100, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n.details__tab:nth-of-type(1).active ~ .active-tab-indicator {\n left: 0;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(2).active ~ .active-tab-indicator {\n left: 33.3333333333%;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(3).active ~ .active-tab-indicator {\n left: 66.6666666667%;\n width: 33.3333333333%;\n}\n.details .active-tab-indicator {\n position: absolute;\n bottom: -3px;\n height: 2px;\n background: var(--emw--active-tab-indicator, linear-gradient(180deg, rgba(234, 144, 24, 0.7) 0%, rgba(224, 168, 78, 0.7) 100%), #727672);\n transition: left 0.3s ease, width 0.3s ease;\n}\n.details .levels__tab {\n margin-top: 22px;\n display: flex;\n gap: 12px;\n flex-direction: column;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .level {\n display: flex;\n padding: 20px;\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background-color: var(--emw--color-background, rgba(114, 118, 114, 0.2));\n}\n.details .level.grayed {\n background: rgba(114, 118, 114, 0.15);\n}\n.details .level.active {\n background: linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%);\n border: 2px solid var(--Gradient-Blue, #003e5c);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details .level.completed {\n background: linear-gradient(90deg, rgba(0, 62, 92, 0.3) 0.05%, rgba(17, 59, 33, 0.3) 87.69%);\n}\n.details .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .level__title {\n width: 100%;\n display: flex;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n margin-bottom: 10px;\n}\n.details .level__title .completed, .details .level__title .in-progress {\n color: var(--emw--color-valid, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 22px;\n}\n.details .level__title.grayed {\n color: var(--emw--disabled-color, #727672);\n}\n.details .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.details .level__icon {\n display: flex;\n margin: 5px 6px 5px 0;\n opacity: 1;\n}\n.details .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n}\n.details .level__icon img.grayed {\n opacity: 0.5;\n}\n.details .level__bonus, .details .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin-bottom: 4px;\n}\n.details .level__value {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.details .level__value.grayed {\n opacity: 0.5;\n}\n.details .games__tab {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 22px 0;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .games__tab .game {\n position: relative;\n width: 105px;\n height: 85px;\n cursor: pointer;\n}\n.details .games__tab .game img {\n width: 100%;\n height: 100%;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details .games__tab .game .contribution {\n position: absolute;\n top: 4px;\n right: 4px;\n color: var(--emw--color-white, #fff);\n border-radius: var(--emw--border-radius-small, 12px);\n border: 1px solid var(--Gradient-Blue, #003e5c);\n background: rgba(0, 0, 0, 0.5);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(5px);\n padding: 0 8px;\n font-size: var(--emw--font-size-2x-small, 8px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 22px;\n text-align: center;\n}\n.details .rules__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 8px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .rules__tab .rule {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n}\n.details .rules__tab .link {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n padding: 14px 0;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details .rules__tab .contributionType {\n margin: 24px 0;\n}\n.details .rules__tab .contributionRule {\n margin: 0;\n}\n.details .rules__tab .contribution__label {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-white, #fff);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .rules__tab .contribution__type__label {\n margin-right: 4px;\n}\n.details .rules__tab .contribution__value {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-gray-150, #c8d6ce);\n font-weight: var(--emw--font-weight-medium, 500);\n}\n.details .rules__tab .contribution__rule__value {\n margin-bottom: 8px;\n}\n.details__button {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex: 1 0 0;\n height: 42px;\n padding: 14px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background-color: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n\n.button__container {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: calc(100% - 32px);\n padding: 16px 16px 22px 16px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-top: 1px solid var(--emw--color-blue, #003e5c);\n background: var(--emw--color-background, #000);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n\n.lds-dual-ring {\n display: block;\n width: 80px;\n height: 80px;\n margin: 80px auto 0 auto;\n}\n\n.lds-dual-ring:after {\n content: \" \";\n display: block;\n width: 64px;\n height: 64px;\n margin: 8px;\n border-radius: 50%;\n border: 6px solid var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n border-color: var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e)) transparent var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 16px 22px 16px;\n}\n.notification__icon {\n margin-top: 2px;\n}\n.notification__message, .notification__title {\n color: var(--emw--color-gray-50, #e2e2e2);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.notification__title {\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-details (min-width: 768px) {\n .button__container {\n display: none;\n }\n .details {\n gap: 36px;\n flex-wrap: nowrap;\n }\n .details__general-info-action-button {\n display: flex;\n }\n .details__general-info-image {\n width: 380px;\n min-height: 226px;\n height: auto;\n }\n .details__general-info {\n max-width: 380px;\n }\n .details__tabs__container {\n max-width: calc(100% - 380px);\n }\n .details .levels__tab {\n gap: 20px;\n height: 60vh;\n }\n .details .levels__tab .level__icon {\n width: 14px;\n height: 14px;\n margin: 4px 6px 4px 0px;\n }\n .details .levels__tab .level__icon img {\n width: 100%;\n height: 100%;\n }\n .details .levels__tab .level__title {\n font-size: var(--emw--font-size-medium, 16px);\n }\n .details .levels__tab .level__title .completed, .details .levels__tab .level__title .in-progress {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .levels__tab .level__bonus, .details .levels__tab .level__target, .details .levels__tab .level__value {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .games__tab, .details .rules__tab {\n height: 60vh;\n }\n .details .games__tab {\n gap: 20px;\n min-width: 340px;\n }\n .details .games__tab .game {\n width: 160px;\n height: 110px;\n }\n .details .games__tab .game .contribution {\n top: 8px;\n right: 8px;\n padding: 4px 10px;\n font-size: var(--emw--font-size-2x-small, 10px);\n line-height: 18px;\n }\n .challenges-header {\n margin: 0 0 32px;\n display: flex;\n justify-content: space-between;\n }\n .challenges-title {\n margin: 0;\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: var(--emw--font-size-x-large, 24px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-white, #ffffff);\n }\n .challenges-tabs {\n display: flex;\n gap: 12px;\n border-radius: 48px;\n padding: 6px;\n color: var(--emw--color-gray-150, #c8d6ce);\n background-color: var(--emw--color-background-secondary, #272727);\n }\n .challenges-tab {\n padding: 10px 16px;\n border-radius: 40px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n cursor: pointer;\n text-align: center;\n width: 95px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n }\n .challenges-tab.active {\n color: var(--emw--color-white, #ffffff);\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n }\n .challenges-tab:last-child {\n width: inherit;\n padding: 10px 16px;\n }\n}";
347
388
  const CasinoChallengeDetailsStyle0 = casinoChallengeDetailsCss;
348
389
 
349
390
  const CasinoChallengeDetails = class {
@@ -446,6 +487,24 @@ const CasinoChallengeDetails = class {
446
487
  this.getBackButtonText = () => {
447
488
  return (h("span", { class: "back-button__text" }, this.isMobile ? translate('all', this.language) : translate('back', this.language)));
448
489
  };
490
+ this.getContributionRule = (isContributeToOne) => {
491
+ if (isContributeToOne) {
492
+ return translate('isContributeToOne', this.language);
493
+ }
494
+ else
495
+ return translate('isNotContributeToOne', this.language);
496
+ };
497
+ this.getContributionType = (contributedBy) => {
498
+ switch (contributedBy) {
499
+ case EWalletTypes.BonusMoney:
500
+ return translate('bonusMoney', this.language);
501
+ case EWalletTypes.RealCash:
502
+ return translate('realMoney', this.language);
503
+ case EWalletTypes.Mixed:
504
+ return translate('mixedMoney', this.language);
505
+ }
506
+ return '';
507
+ };
449
508
  this.goBack = () => {
450
509
  window.history.back();
451
510
  };
@@ -589,7 +648,8 @@ const CasinoChallengeDetails = class {
589
648
  window.removeEventListener('resize', this.checkIsMobile);
590
649
  }
591
650
  getReward(level) {
592
- return level.Rewards.map((r) => r.RewardDescription).join(' + ') || '-';
651
+ var _a;
652
+ return ((_a = level.Rewards) === null || _a === void 0 ? void 0 : _a.map((r) => r.RewardDescription).join(' + ')) || '-';
593
653
  }
594
654
  getTarget(level) {
595
655
  var _a;
@@ -774,13 +834,16 @@ const CasinoChallengeDetails = class {
774
834
  });
775
835
  }
776
836
  get gamesTab() {
777
- return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : (this.games.map((game) => {
837
+ var _a;
838
+ return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : ((_a = this.games) === null || _a === void 0 ? void 0 : _a.map((game) => {
778
839
  return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.Thumbnail, alt: "game-icon", title: "game-icon" }), h("span", { class: "contribution" }, translate('contribution', this.language), " ", game.Contribution, "%")));
779
840
  }))));
780
841
  }
781
842
  get rulesTab() {
782
- var _a, _b, _c, _d, _e, _f, _g, _h;
783
- return (h("div", { class: "rules__tab" }, ((_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Description) && (h("div", { class: "rule" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Description)), ((_f = (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.ChallengePresentation) === null || _f === void 0 ? void 0 : _f.Url) && (h("a", { class: "link", href: (_h = (_g = this.challenge) === null || _g === void 0 ? void 0 : _g.ChallengePresentation) === null || _h === void 0 ? void 0 : _h.Url, target: "_blank" }, translate('terms', this.language)))));
843
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
844
+ const contributionType = this.getContributionType((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedBy);
845
+ const contributionRule = this.getContributionRule((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.IsContributeToOne);
846
+ return (h("div", { class: "rules__tab" }, ((_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Description) && (h("div", { class: "rule" }, (_f = (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.ChallengePresentation) === null || _f === void 0 ? void 0 : _f.Description)), contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule), ((_h = (_g = this.challenge) === null || _g === void 0 ? void 0 : _g.ChallengePresentation) === null || _h === void 0 ? void 0 : _h.Url) && (h("a", { class: "link", href: (_k = (_j = this.challenge) === null || _j === void 0 ? void 0 : _j.ChallengePresentation) === null || _k === void 0 ? void 0 : _k.Url, target: "_blank" }, translate('terms', this.language)))));
784
847
  }
785
848
  get footer() {
786
849
  var _a, _b, _c, _d;
@@ -806,7 +869,7 @@ const CasinoChallengeDetails = class {
806
869
  return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 4 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: infoCircleSvg }), h("span", { class: "notification__message" }, translate('expiredNotification', this.language)))));
807
870
  }
808
871
  render() {
809
- return (h("div", { key: 'db59c429bf40a1ad703f3f26763549ece9fe8723', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader, this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backArrowSvg }), this.getBackButtonText()), this.forfeitedNofitication, this.completedNotification, this.expiredNotification, h("div", { class: "details" }, this.cardGeneralInfo, h("div", { class: "details__tabs-container" }, this.challengeTabs, this.activeTabIndex === 0 && this.levelsTab, this.activeTabIndex === 1 && this.gamesTab, this.activeTabIndex === 2 && this.rulesTab), this.footer)))));
872
+ return (h("div", { key: '0ccce42fa6edb63817eb8dc8d5c6300bd53d2a8b', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader, this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backArrowSvg }), this.getBackButtonText()), this.forfeitedNofitication, this.completedNotification, this.expiredNotification, h("div", { class: "details" }, this.cardGeneralInfo, h("div", { class: "details__tabs-container" }, this.challengeTabs, this.activeTabIndex === 0 && this.levelsTab, this.activeTabIndex === 1 && this.gamesTab, this.activeTabIndex === 2 && this.rulesTab), this.footer)))));
810
873
  }
811
874
  static get watchers() { return {
812
875
  "clientStyling": ["handleClientStylingChange"],
package/dist/esm/casino-challenge-details_4.entry.js CHANGED
@@ -1,5 +1,5 @@
1
- import { E as EChallengeProgressLevelStatus, a as EChallengeStatus, b as EChallengeProgressStatus, t as translate } from './casino-challenge-details-00cd9c3e.js';
2
- export { C as casino_challenge_details } from './casino-challenge-details-00cd9c3e.js';
1
+ import { E as EChallengeProgressLevelStatus, a as EChallengeStatus, b as EChallengeProgressStatus, t as translate } from './casino-challenge-details-55a3a560.js';
2
+ export { C as casino_challenge_details } from './casino-challenge-details-55a3a560.js';
3
3
  import { r as registerInstance, h, g as getElement, H as Host } from './index-30adf0cb.js';
4
4
 
5
5
  const activeChevronSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40MTA4MjYgMC45MTEwN0MwLjczNjI2MyAwLjU4NTYzMyAxLjI2MzkgMC41ODU2MzMgMS41ODkzNCAwLjkxMTA3TDYuMDAwMDggNS4zMjE4MUwxMC40MTA4IDAuOTExMDdDMTAuNzM2MyAwLjU4NTYzMyAxMS4yNjM5IDAuNTg1NjMzIDExLjU4OTMgMC45MTEwN0MxMS45MTQ4IDEuMjM2NTEgMTEuOTE0OCAxLjc2NDE0IDExLjU4OTMgMi4wODk1OEw2LjU4OTM0IDcuMDg5NThDNi4yNjM5IDcuNDE1MDIgNS43MzYyNiA3LjQxNTAyIDUuNDEwODMgNy4wODk1OEwwLjQxMDgyNiAyLjA4OTU4QzAuMDg1Mzg4OCAxLjc2NDE0IDAuMDg1Mzg4OCAxLjIzNjUxIDAuNDEwODI2IDAuOTExMDdaIiBmaWxsPSIjMDBCNzRGIi8+Cjwvc3ZnPgo=';
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { C as CasinoChallengeDetails } from './casino-challenge-details-00cd9c3e.js';
1
+ export { C as CasinoChallengeDetails } from './casino-challenge-details-55a3a560.js';
2
2
  import './index-30adf0cb.js';
package/dist/types/components/casino-challenge-details/casino-challenge-details.d.ts CHANGED
@@ -104,6 +104,8 @@ export declare class CasinoChallengeDetails {
104
104
  private get levelsTab();
105
105
  handleGameClick(game: IGameDetails): void;
106
106
  private get gamesTab();
107
+ private getContributionRule;
108
+ private getContributionType;
107
109
  private get rulesTab();
108
110
  private get footer();
109
111
  private get forfeitedNofitication();
package/dist/types/utils/types.d.ts CHANGED
@@ -122,6 +122,8 @@ export interface IChallenge {
122
122
  IncludeAllGames: boolean;
123
123
  Games: IGame[];
124
124
  LevelProgresses: ILevelProgress[];
125
+ IsContributeToOne: boolean;
126
+ ContributedBy: EWalletTypes;
125
127
  }
126
128
  export interface IGameDetails {
127
129
  GameId: string;
@@ -134,3 +136,8 @@ export interface IGameDetails {
134
136
  RestrictedCountries: string;
135
137
  Vendor: string;
136
138
  }
139
+ export declare enum EWalletTypes {
140
+ RealCash = 0,
141
+ BonusMoney = 1,
142
+ Mixed = 2
143
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-challenge-details",
3
- "version": "0.3.16",
3
+ "version": "0.3.18",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",