@everymatrix/player-elevate-level 1.37.4 → 1.37.6

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 (27) hide show
  1. package/dist/cjs/bonus-elevate-levels_8.cjs.entry.js +62 -20
  2. package/dist/cjs/{player-elevate-card-items-31eb5d57.js → player-elevate-card-items-484c4947.js} +3 -3
  3. package/dist/cjs/player-elevate-card.cjs.entry.js +9 -1
  4. package/dist/cjs/player-elevate-pointcard.cjs.entry.js +9 -1
  5. package/dist/components/bonus-elevate-levels2.js +7 -2
  6. package/dist/components/elevate-level-list2.js +23 -2
  7. package/dist/components/elevate-levels-data2.js +1 -1
  8. package/dist/components/player-elevate-card-data2.js +20 -12
  9. package/dist/components/player-elevate-card-items.js +3 -3
  10. package/dist/components/player-elevate-card.js +8 -0
  11. package/dist/components/player-elevate-loyaltycard2.js +10 -2
  12. package/dist/components/player-elevate-pointcard.js +8 -0
  13. package/dist/esm/bonus-elevate-levels_8.entry.js +62 -20
  14. package/dist/esm/{player-elevate-card-items-289d91dc.js → player-elevate-card-items-d9ec468f.js} +3 -3
  15. package/dist/esm/player-elevate-card.entry.js +9 -1
  16. package/dist/esm/player-elevate-pointcard.entry.js +9 -1
  17. package/dist/player-elevate-level/p-01e66aea.entry.js +1 -0
  18. package/dist/player-elevate-level/p-7fe1badd.entry.js +1 -0
  19. package/dist/player-elevate-level/{p-f43f6ed2.js → p-9235a771.js} +1 -1
  20. package/dist/player-elevate-level/p-f2d7e1fd.entry.js +1 -0
  21. package/dist/player-elevate-level/player-elevate-level.esm.js +1 -1
  22. package/dist/static/level-percent.svg +3 -3
  23. package/package.json +1 -1
  24. package/dist/player-elevate-level/p-64f8cc9e.entry.js +0 -1
  25. package/dist/player-elevate-level/p-b67b6b93.entry.js +0 -1
  26. package/dist/player-elevate-level/p-c73cc225.entry.js +0 -1
  27. /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-stencil/packages/player-elevate-level/.stencil/packages/player-elevate-level/stencil.config.d.ts +0 -0
package/dist/esm/bonus-elevate-levels_8.entry.js CHANGED
@@ -1,20 +1,24 @@
1
1
  import { r as registerInstance, h, c as createEvent, H as Host, g as getElement, a as getAssetPath, F as Fragment } from './index-104132db.js';
2
- import { r as requiredArgs, t as toDate, g as getTimezoneOffsetInMilliseconds, a as translateWithParams, T as TRANSLATIONS$1, P as PlayerAvatar, b as PlayerElevateLoyaltyLevel, c as PlayerPoints, d as PlayerLoyaltyProcess } from './player-elevate-card-items-289d91dc.js';
2
+ import { r as requiredArgs, t as toDate, g as getTimezoneOffsetInMilliseconds, a as translateWithParams, T as TRANSLATIONS$1, P as PlayerAvatar, b as PlayerElevateLoyaltyLevel, c as PlayerPoints, d as PlayerLoyaltyProcess } from './player-elevate-card-items-d9ec468f.js';
3
3
 
4
4
  const DEFAULT_LANGUAGE = 'en';
5
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
5
+ const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'hr', 'tr'];
6
6
  const TRANSLATIONS = {
7
7
  en: {
8
+ level: 'level',
8
9
  seeAll: 'See All',
9
10
  termsAndConditions: 'Terms & Conditions',
10
11
  loadElevateLevelErrorMessage: 'Error when load elevate levels',
11
12
  noLevelsSet: 'There is no level set',
13
+ points: 'Points',
12
14
  },
13
15
  fr: {
16
+ level: 'level',
14
17
  seeAll: 'See All',
15
18
  termsAndConditions: 'Terms & Conditions',
16
19
  loadElevateLevelErrorMessage: 'Error when load elevate levels',
17
20
  noLevelsSet: 'There is no level set',
21
+ points: 'Points',
18
22
  },
19
23
  hr: {
20
24
  level: 'Razina',
@@ -22,11 +26,28 @@ const TRANSLATIONS = {
22
26
  privilegesFor: 'Privilegije za',
23
27
  termsAndConditions: 'Uvjeti i odredbe',
24
28
  noLevelsSet: 'There is no level set',
29
+ points: 'Points',
30
+ },
31
+ ro: {
32
+ level: 'level',
33
+ seeAll: 'See All',
34
+ termsAndConditions: 'Terms & Conditions',
35
+ loadElevateLevelErrorMessage: 'Error when load elevate levels',
36
+ noLevelsSet: 'There is no level set',
37
+ points: 'Points',
38
+ },
39
+ tr: {
40
+ level: 'level',
41
+ seeAll: 'See All',
42
+ termsAndConditions: 'Terms & Conditions',
43
+ loadElevateLevelErrorMessage: 'Error when load elevate levels',
44
+ noLevelsSet: 'There is no level set',
45
+ points: 'Points',
25
46
  }
26
47
  };
27
48
  const translate = (key, customLang) => {
28
49
  const lang = customLang;
29
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
50
+ return TRANSLATIONS[lang !== undefined && (SUPPORTED_LANGUAGES.includes(lang) || TRANSLATIONS[lang]) ? lang : DEFAULT_LANGUAGE][key];
30
51
  };
31
52
 
32
53
  const bonusElevateLevelsCss = ":host{display:block}.ElevateLevelContent{padding:20px;position:relative}.ElevateLevelContent .Privileges{padding-bottom:30px}.ElevateLevelContent .tc{position:absolute;right:10px;bottom:10px;text-align:right;display:none}";
@@ -68,6 +89,9 @@ const BonusElevateLevels = class {
68
89
  this.currentLevel = Object.assign({}, currentLevel);
69
90
  }
70
91
  }
92
+ onSessionOrEndpointChange() {
93
+ this.elevateLevelParamProxy = Object.assign(Object.assign({}, this.elevateLevelParamProxy), { endpoint: this.endpoint, language: this.language });
94
+ }
71
95
  elevateLevelsDataChangeHandler(event) {
72
96
  if (!event.detail) {
73
97
  return;
@@ -99,11 +123,13 @@ const BonusElevateLevels = class {
99
123
  render() {
100
124
  return (h("div", { class: "ElevateLevelContent" }, h("elevate-levels-data", { scopeParams: this.elevateLevelParamProxy }), h("div", { class: "LevelContent" }, this.elevateLevels ?
101
125
  h("elevate-level-list", { language: this.language, selectedLevelId: this.selectedLevelId, levels: this.elevateLevels }) : translate('noLevelsSet', this.language), this.currentLevel &&
102
- h("elevate-level-presentation", { elevateLevel: this.currentLevel }), h("div", { class: "tc", onClick: this.onTCClick }, translate('termsAndConditions', this.language), ' ')), this.errorMessage && h("div", null, this.errorMessage), h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl })));
126
+ h("elevate-level-presentation", { elevateLevel: this.currentLevel })), this.errorMessage && h("div", null, this.errorMessage), h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl })));
103
127
  }
104
128
  static get watchers() { return {
105
129
  "selectedLevelId": ["selectedLevelIdChangedHandler"],
106
- "elevateLevels": ["selectedLevelIdChangedHandler"]
130
+ "elevateLevels": ["selectedLevelIdChangedHandler"],
131
+ "endpoint": ["onSessionOrEndpointChange"],
132
+ "language": ["onSessionOrEndpointChange"]
107
133
  }; }
108
134
  };
109
135
  BonusElevateLevels.style = bonusElevateLevelsCss;
@@ -292,7 +318,7 @@ const ElevateLevelsData = class {
292
318
  registerInstance(this, hostRef);
293
319
  this.elevateLevelsDataChange = createEvent(this, "elevateLevelsDataChange", 7);
294
320
  }
295
- async componentWillLoad() {
321
+ async componentWillRender() {
296
322
  //load data
297
323
  if (!this.scopeParams.endpoint) {
298
324
  return;
@@ -594,9 +620,12 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
594
620
 
595
621
  function updateProgressSvg(progressElementRef, percent) {
596
622
  const svgElement = progressElementRef.querySelector('#total_level');
597
- const endLockWidth = 15;
623
+ const endLockWidth = 17, pointR = 6.5;
624
+ //Total Widget of the progress
598
625
  const barWidth = svgElement.getBBox().width;
599
- const widthOnBar = percent * barWidth - endLockWidth < 0 ? 0 : percent * barWidth - endLockWidth;
626
+ //The filled width according to current progress
627
+ const levelPercent = percent > 1 ? 1 : percent;
628
+ const widthOnBar = (levelPercent * barWidth - endLockWidth) < 0 ? 0 : levelPercent * barWidth - endLockWidth;
600
629
  //update bar's width, widthOnBar
601
630
  const levelBar = progressElementRef.querySelector('#current_level');
602
631
  //update filters, x = widthOnBar
@@ -605,8 +634,8 @@ function updateProgressSvg(progressElementRef, percent) {
605
634
  const levelCircle = progressElementRef.querySelector('#circle_current_level');
606
635
  svgElement.setAttribute('viewbox', `0 0 ${widthOnBar} 28`);
607
636
  levelBar.setAttribute('width', `${widthOnBar}`);
608
- levelCircle.setAttribute('cx', `${widthOnBar + 3}`);
609
- levelFilter.setAttribute('x', `${widthOnBar - 4}`);
637
+ levelCircle.setAttribute('cx', `${(widthOnBar < pointR ? pointR : widthOnBar)}`);
638
+ levelFilter.setAttribute('x', `${widthOnBar - 8}`);
610
639
  //update lock location
611
640
  const endLockElement = progressElementRef.querySelector('#lock');
612
641
  // wrapper of endLock, include ball and heatfilter1_d_305_23
@@ -638,9 +667,10 @@ function updateProgressSvg(progressElementRef, percent) {
638
667
  filter1.setAttribute('x', `${cxOfEndLockEle - 6 - 2 - 2 - 4}`);
639
668
  lockBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
640
669
  heartBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
670
+ svgElement.parentElement.style.opacity = '1';
641
671
  }
642
672
 
643
- const playerElevateCardDataCss = ":host {\n display: block;\n width: 360px;\n height: 230px;\n}\n\n.ElevateCardWrapper {\n contain: layout inline-size;\n width: 100%;\n height: fit-content;\n min-height: 218px;\n}\n\n.Outer {\n container-type: inline-size;\n font-size: 12px;\n background-size: cover;\n background-repeat: no-repeat;\n line-height: initial;\n width: 100%;\n height: 100%;\n}\n\n.Dark {\n color: var(--emfe-w-color-gray150, #efefef);\n}\n\n.Light {\n color: var(--emfe-w-color-black, #0e0e0e);\n}\n\n@container (min-width: 381px) {\n .Outer {\n background-size: cover;\n }\n .Outer .OuterCover {\n min-height: 190px;\n }\n}\n@container (min-width: 260px) {\n .Outer {\n background-size: contain;\n }\n}\n.OuterCover {\n width: 100%;\n height: 100%;\n content: \"\";\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: 15px;\n}\n\n.Inner {\n display: flex;\n flex-direction: column;\n min-height: 158px;\n}\n.Inner .Content {\n padding: 15px;\n flex-wrap: wrap;\n gap: 8px;\n}\n.Inner .Row {\n display: flex;\n flex-direction: row;\n}\n.Inner .CardCell {\n display: flex;\n}\n.Inner .LevelInfo {\n display: flex;\n flex-direction: column;\n}\n.Inner .LevelInfo .ElevateLevel .LevelName {\n height: 28px;\n border-radius: 5px;\n line-height: 28px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level0-bg0, #E2792C) 0%, var(--emfe-w-elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);\n}\n.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level1-bg0, #BEBFED) 0%, var(--emfe-w-elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);\n}\n.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level2-bg0, #FCC410) 0%, var(--emfe-w-elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);\n}\n.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level3-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level4-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo .ElevateLevel {\n display: flex;\n}\n.Inner .LevelInfo {\n flex: 1;\n flex-grow: 1;\n min-width: 150px;\n}\n.Inner .PlayerImg {\n width: 29%;\n margin: auto;\n max-width: 100px;\n min-width: 30px;\n order: 0;\n}\n.Inner .PlayerAvatar {\n max-width: 100px;\n flex-basis: 100px;\n height: auto;\n margin: auto;\n padding-top: 10px;\n}\n.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {\n width: 100%;\n height: 100%;\n}\n.Inner .PlayerAvatar .Avatar {\n border-radius: 50%;\n background-size: contain;\n background-repeat: no-repeat;\n}\n.Inner .ElevateLevel .ExpirationDate {\n max-width: 138px;\n min-width: 118px;\n}\n.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {\n text-transform: capitalize;\n width: 100%;\n}\n.Inner .PlayerName {\n font-size: 16px;\n}\n.Inner .Row .PointsInfo {\n display: table;\n font-weight: 600;\n}\n.Inner .Row .Redeem {\n justify-content: flex-end;\n margin-left: auto;\n}\n.Inner .Row .Redeem:hover {\n color: var(--emfe-w-elevate-color-redeem-hover, #00ABA4);\n cursor: pointer;\n}\n.Inner .Row .RedeemButton:hover span {\n color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);\n font-weight: bold;\n}\n.Inner .Row .RedeemButton {\n width: 95px;\n height: 35px;\n display: flex;\n align-items: center;\n border-radius: 10px;\n background: var(--emfe-w-elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);\n box-shadow: 0px 4px 4px 0px #00000040;\n}\n.Inner .Row .RedeemButton span {\n color: var(--emfe-w-color-white, #fff);\n line-height: 18px;\n font-size: 15px;\n text-align: center;\n width: 100%;\n}\n.Inner .Row .Points {\n font-size: large;\n vertical-align: middle;\n}\n.Inner .Row .Points .XP {\n font-size: x-small;\n}\n.Inner .Row .ExpirationPoints {\n font-size: small;\n text-align: right;\n font-weight: bold;\n color: var(--emfe-w-color-red, #9e595f);\n}";
673
+ const playerElevateCardDataCss = ":host {\n display: block;\n width: 360px;\n height: 230px;\n}\n\n.ElevateCardWrapper {\n contain: layout inline-size;\n width: 100%;\n height: fit-content;\n min-height: 218px;\n}\n\n.Outer {\n container-type: inline-size;\n font-size: 12px;\n background-size: cover;\n background-repeat: no-repeat;\n line-height: initial;\n width: 100%;\n height: 100%;\n}\n\n.Dark {\n color: var(--emfe-w-color-gray150, #efefef);\n}\n\n.Light {\n color: var(--emfe-w-color-black, #0e0e0e);\n}\n\n@container (min-width: 381px) {\n .Outer {\n background-size: cover;\n }\n .Outer .OuterCover {\n min-height: 190px;\n }\n}\n@container (min-width: 260px) {\n .Outer {\n background-size: contain;\n }\n}\n.OuterCover {\n width: 100%;\n height: 100%;\n content: \"\";\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: 15px;\n}\n\n.Inner {\n display: flex;\n flex-direction: column;\n min-height: 158px;\n}\n.Inner .Content {\n padding: 15px;\n flex-wrap: wrap;\n gap: 8px;\n}\n.Inner .Row {\n display: flex;\n flex-direction: row;\n}\n.Inner .CardCell {\n display: flex;\n}\n.Inner .LevelProgress svg {\n transition: opacity 0.4s;\n}\n.Inner .LevelInfo {\n display: flex;\n flex-direction: column;\n}\n.Inner .LevelInfo .ElevateLevel .LevelName {\n height: 28px;\n border-radius: 5px;\n line-height: 28px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level0-bg0, #E2792C) 0%, var(--emfe-w-elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);\n}\n.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level1-bg0, #BEBFED) 0%, var(--emfe-w-elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);\n}\n.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level2-bg0, #FCC410) 0%, var(--emfe-w-elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);\n}\n.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level3-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level4-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo .ElevateLevel {\n display: flex;\n}\n.Inner .LevelInfo {\n flex: 1;\n flex-grow: 1;\n min-width: 150px;\n}\n.Inner .PlayerImg {\n width: 29%;\n margin: auto;\n max-width: 100px;\n min-width: 30px;\n order: 0;\n}\n.Inner .PlayerAvatar {\n max-width: 100px;\n flex-basis: 100px;\n height: auto;\n margin: auto;\n padding-top: 10px;\n}\n.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {\n width: 100%;\n height: 100%;\n}\n.Inner .PlayerAvatar .Avatar {\n border-radius: 50%;\n background-size: contain;\n background-repeat: no-repeat;\n}\n.Inner .ElevateLevel .ExpirationDate {\n max-width: 138px;\n min-width: 118px;\n}\n.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {\n text-transform: capitalize;\n width: 100%;\n}\n.Inner .PlayerName {\n font-size: 16px;\n}\n.Inner .Row .PointsInfo {\n display: table;\n font-weight: 600;\n}\n.Inner .Row .Redeem {\n justify-content: flex-end;\n margin-left: auto;\n}\n.Inner .Row .Redeem:hover {\n color: var(--emfe-w-elevate-color-redeem-hover, #00ABA4);\n cursor: pointer;\n}\n.Inner .Row .RedeemButton:hover span {\n color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);\n font-weight: bold;\n}\n.Inner .Row .RedeemButton {\n width: 95px;\n height: 35px;\n display: flex;\n align-items: center;\n border-radius: 10px;\n background: var(--emfe-w-elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);\n box-shadow: 0px 4px 4px 0px #00000040;\n}\n.Inner .Row .RedeemButton span {\n color: var(--emfe-w-color-white, #fff);\n line-height: 18px;\n font-size: 15px;\n text-align: center;\n width: 100%;\n}\n.Inner .Row .Points {\n font-size: large;\n vertical-align: middle;\n}\n.Inner .Row .Points .XP {\n font-size: x-small;\n}\n.Inner .Row .ExpirationPoints {\n font-size: small;\n text-align: right;\n font-weight: bold;\n color: var(--emfe-w-color-red, #9e595f);\n}";
644
674
 
645
675
  const PlayerElevateCardData = class {
646
676
  constructor(hostRef) {
@@ -650,6 +680,9 @@ const PlayerElevateCardData = class {
650
680
  handleWindowResizs() {
651
681
  this.initLevelProgressbar();
652
682
  }
683
+ onParamsChanged() {
684
+ this.loadElevateInfo();
685
+ }
653
686
  onRedeemClick() {
654
687
  window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
655
688
  }
@@ -750,19 +783,14 @@ const PlayerElevateCardData = class {
750
783
  return;
751
784
  }
752
785
  this.setLoyaltyProgress(!this.playerElevateLevel.nextLevel
753
- ? 1
754
- : (this.playerElevateLevel.loyaltyPoints -
755
- this.playerElevateLevel.entryPoints) /
756
- (this.playerElevateLevel.nextLevel.entryPoints -
757
- this.playerElevateLevel.entryPoints));
786
+ ? 1 : (this.playerElevateLevel.loyaltyPoints / this.playerElevateLevel.nextLevel.entryPoints));
758
787
  this.params['playerElevateLevel'] = this.playerElevateLevel;
759
788
  }, 80);
760
789
  }
761
- componentWillRender() { }
762
790
  componentDidRender() {
763
791
  this.initLevelProgressbar();
764
792
  }
765
- componentWillLoad() {
793
+ loadElevateInfo() {
766
794
  if (!this.params.endpoint || !this.params.session) {
767
795
  return;
768
796
  }
@@ -792,7 +820,13 @@ const PlayerElevateCardData = class {
792
820
  });
793
821
  });
794
822
  }
823
+ componentWillLoad() {
824
+ this.loadElevateInfo();
825
+ }
795
826
  get elevateCardRef() { return getElement(this); }
827
+ static get watchers() { return {
828
+ "params": ["onParamsChanged"]
829
+ }; }
796
830
  };
797
831
  PlayerElevateCardData.style = playerElevateCardDataCss;
798
832
 
@@ -860,6 +894,9 @@ const PlayerElevateLoyaltycard = class {
860
894
  */
861
895
  this.translationUrl = '';
862
896
  }
897
+ onSessionOrEndpointChange() {
898
+ this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
899
+ }
863
900
  playerElevateLeveLoadedHandler(event) {
864
901
  if (!event.detail) {
865
902
  return;
@@ -878,7 +915,7 @@ const PlayerElevateLoyaltycard = class {
878
915
  window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
879
916
  }
880
917
  componentWillLoad() {
881
- this.paramsProxy = {
918
+ this.paramProxy = {
882
919
  endpoint: this.endpoint,
883
920
  session: this.session,
884
921
  language: this.language,
@@ -900,8 +937,13 @@ const PlayerElevateLoyaltycard = class {
900
937
  render() {
901
938
  const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
902
939
  const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
903
- return (h("div", { class: `ElevateCardWrapper ${this.theme}` }, h("div", { class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS$1, translationUrl: this.translationUrl }), h("player-elevate-card-data", { params: this.paramsProxy }), h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, h("div", { class: 'Content Row' }, this.playerElevateLevel && (h(Fragment, null, h("div", { class: "PlayerImg" }, h(PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` }, h(PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), h(PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), h(PlayerLoyaltyProcess, null), h("div", { class: "NextLevelTip" }, this.getNextLevelTips())))))))));
940
+ return (h("div", { class: `ElevateCardWrapper ${this.theme}` }, h("div", { class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS$1, translationUrl: this.translationUrl }), h("player-elevate-card-data", { params: this.paramProxy }), h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, h("div", { class: 'Content Row' }, this.playerElevateLevel && (h(Fragment, null, h("div", { class: "PlayerImg" }, h(PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` }, h(PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), h(PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), h(PlayerLoyaltyProcess, null), h("div", { class: "NextLevelTip" }, this.getNextLevelTips())))))))));
904
941
  }
942
+ static get watchers() { return {
943
+ "session": ["onSessionOrEndpointChange"],
944
+ "endpoint": ["onSessionOrEndpointChange"],
945
+ "language": ["onSessionOrEndpointChange"]
946
+ }; }
905
947
  };
906
948
  PlayerElevateLoyaltycard.style = playerElevateLoyaltycardCss;
907
949
 
package/dist/esm/{player-elevate-card-items-289d91dc.js → player-elevate-card-items-d9ec468f.js} RENAMED
@@ -2318,9 +2318,9 @@ const translateWithParams = (key, params) => {
2318
2318
  return templateString;
2319
2319
  };
2320
2320
 
2321
- const LoyaltyProgress = `<svg width="100%" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
2322
- <rect y="12" width="100%" id="total_level" height="5" rx="2.5" fill="white" fill-opacity="0.5"/>
2323
- <rect y="12" id="current_level" width="64" height="5" rx="2.5" fill="white"/>
2321
+ const LoyaltyProgress = `<svg width="100%" height="28" style="opacity: 0" fill="none" xmlns="http://www.w3.org/2000/svg">
2322
+ <rect y="12" x="2" width="100%" id="total_level" height="5" rx="2.5" fill="white" fill-opacity="0.5"/>
2323
+ <rect y="12" x="2" id="current_level" width="64" height="5" rx="2.5" fill="white"/>
2324
2324
  <g filter="url(#filter_current_level)">
2325
2325
  <circle id="circle_current_level" cx="74.5" cy="14.5" r="6.5" fill="white"/>
2326
2326
  </g>
package/dist/esm/player-elevate-card.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, a as getAssetPath, h, F as Fragment } from './index-104132db.js';
2
- import { T as TRANSLATIONS, P as PlayerAvatar, c as PlayerPoints, e as PlayerNameDiv, b as PlayerElevateLoyaltyLevel, d as PlayerLoyaltyProcess, f as PlayerElevateCardRedeem } from './player-elevate-card-items-289d91dc.js';
2
+ import { T as TRANSLATIONS, P as PlayerAvatar, c as PlayerPoints, e as PlayerNameDiv, b as PlayerElevateLoyaltyLevel, d as PlayerLoyaltyProcess, f as PlayerElevateCardRedeem } from './player-elevate-card-items-d9ec468f.js';
3
3
 
4
4
  const playerElevateCardCss = "@container (max-width: 270px) {\n .Card .Inner {\n flex-direction: column;\n }\n .Card .Inner .Content {\n padding: 9px;\n }\n\n .Inner .Row .ExpirationPoints {\n order: 1;\n }\n}\n.Card .PlayerImg {\n order: 0;\n}\n.Card .ExpirationPoints {\n order: 3;\n}\n.Card .LevelInfo {\n order: 2;\n}\n.Card .Inner .Row .PlayerImg {\n flex-direction: column;\n}\n.Card .Inner .Row .PointsInfo {\n width: 100%;\n text-align: center;\n display: flex;\n flex-direction: column;\n max-height: 50%;\n}\n.Card .Inner .PlayerAvatar .Badge {\n background-size: contain;\n background-repeat: no-repeat;\n position: absolute;\n right: 5px;\n bottom: -5px;\n width: 40%;\n height: 40%;\n overflow: visible;\n}\n.Card .Inner .Row .ExpirationPoints {\n text-align: left;\n color: var(--emfe-w-color-red, red);\n}\n.Card .Inner .Row .Points {\n text-wrap: nowrap;\n}\n.Card .Inner .LevelInfo .ElevateLevel {\n flex-direction: column;\n}\n.Card .Inner .LevelInfo .ElevateLevel .LevelName {\n width: calc(100% - 20px);\n text-align: left;\n font-size: 13px;\n padding-left: 20px;\n margin: 10px 0;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpirationDate {\n text-align: center;\n font-size: smaller;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpireTime {\n margin-left: 5px;\n}";
5
5
 
@@ -33,6 +33,9 @@ const PlayerElevateCard = class {
33
33
  this.translationUrl = '';
34
34
  this.playerLevelFlag = 0;
35
35
  }
36
+ onSessionOrEndpointChange() {
37
+ this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
38
+ }
36
39
  playerElevateLeveLoadedHandler(event) {
37
40
  if (!event.detail) {
38
41
  return;
@@ -67,6 +70,11 @@ const PlayerElevateCard = class {
67
70
  return (h("div", { class: `ElevateCardWrapper ${this.theme}` }, h("div", { class: "Card Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("player-elevate-card-data", { params: this.paramProxy }), h("div", { class: "OuterCover Inner", style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, this.playerElevateLevel && (h(Fragment, null, h("div", { class: 'Content Row' }, h("div", { class: "PlayerImg" }, h(PlayerAvatar, { playerAvatarUrl: this.playerAvatarUrl, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }), h(PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language })), this.pointExpireString && (h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), h("div", { class: `LevelInfo Level${this.playerLevelFlag} ${this.playerElevateLevel.presentation.displayName}` }, h(PlayerNameDiv, { playerName: this.playerName }), h(PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), h(PlayerLoyaltyProcess, null), h(PlayerElevateCardRedeem, { onRedeemClick: this.onRedeemClick, language: this.language })))))))));
68
71
  }
69
72
  static get assetsDirs() { return ["../static"]; }
73
+ static get watchers() { return {
74
+ "session": ["onSessionOrEndpointChange"],
75
+ "endpoint": ["onSessionOrEndpointChange"],
76
+ "language": ["onSessionOrEndpointChange"]
77
+ }; }
70
78
  };
71
79
  PlayerElevateCard.style = playerElevateCardCss;
72
80
 
package/dist/esm/player-elevate-pointcard.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, a as getAssetPath, h, F as Fragment } from './index-104132db.js';
2
- import { T as TRANSLATIONS, P as PlayerAvatar, h as translate, c as PlayerPoints } from './player-elevate-card-items-289d91dc.js';
2
+ import { T as TRANSLATIONS, P as PlayerAvatar, h as translate, c as PlayerPoints } from './player-elevate-card-items-d9ec468f.js';
3
3
 
4
4
  const playerElevatePointcardCss = ":host{display:block}.PointsCard .Inner .Row .ExpirationPoints{text-align:left}.PointsCard .Inner .PlayerAvatar .Avatar{display:none}.PointsCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%;position:inherit}.PointsCard .Inner .PointsTxt{display:flex;flex-direction:row;justify-content:space-between}.PointsCard .Inner .DetailButton{background:linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%), linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));border-radius:5px;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:2px solid;font-size:11px;width:108px;padding:4px;cursor:pointer;margin-top:5px;height:16px;min-width:45px;text-align:center}.PointsCard .Inner .DetailButton span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .DetailButton span{display:inline-block;vertical-align:middle}.PointsCard .Inner .DetailButton:hover span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .LevelInfo{gap:15px;width:70%}.PointsCard .Inner .LevelInfo .PointsTxt{font-size:15px}.PointsCard .Inner .LevelInfo .PointsTxt.Label{display:none}.PointsCard .Inner .LevelInfo .PointsTxt.SPPoints{padding-top:15px}.PointsCard .Inner .LevelInfo .PointsTxt .TC{font-size:x-small;color:var(--emw--color-gray-300, #58586B);display:flex;align-content:center;height:100%;flex-wrap:wrap;text-decoration:underline;cursor:pointer;display:none}";
5
5
 
@@ -41,6 +41,9 @@ const PlayerElevatePointcard = class {
41
41
  this.translationUrl = '';
42
42
  this.isPointDetailCard = this.buttonType === 'earningRule';
43
43
  }
44
+ onSessionOrEndpointChange() {
45
+ this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
46
+ }
44
47
  playerElevateLeveLoadedHandler(event) {
45
48
  if (!event.detail) {
46
49
  return;
@@ -74,6 +77,11 @@ const PlayerElevatePointcard = class {
74
77
  this.onDetailsClick();
75
78
  } }, translate('termAndConditions', this.language))), this.pointExpireString && (h("div", { class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
76
79
  }
80
+ static get watchers() { return {
81
+ "session": ["onSessionOrEndpointChange"],
82
+ "endpoint": ["onSessionOrEndpointChange"],
83
+ "language": ["onSessionOrEndpointChange"]
84
+ }; }
77
85
  };
78
86
  PlayerElevatePointcard.style = playerElevatePointcardCss;
79
87
 
package/dist/player-elevate-level/p-01e66aea.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as e,h as t,c as n,H as i,g as l,a as s,F as r}from"./p-46fd6f51.js";import{r as o,t as a,g as h,a as d,T as v,P as c,b as p,c as g,d as f}from"./p-9235a771.js";const u=["ro","en","fr","hr","tr"],x={en:{level:"level",seeAll:"See All",termsAndConditions:"Terms & Conditions",loadElevateLevelErrorMessage:"Error when load elevate levels",noLevelsSet:"There is no level set",points:"Points"},fr:{level:"level",seeAll:"See All",termsAndConditions:"Terms & Conditions",loadElevateLevelErrorMessage:"Error when load elevate levels",noLevelsSet:"There is no level set",points:"Points"},hr:{level:"Razina",seeAll:"Vidi sve",privilegesFor:"Privilegije za",termsAndConditions:"Uvjeti i odredbe",noLevelsSet:"There is no level set",points:"Points"},ro:{level:"level",seeAll:"See All",termsAndConditions:"Terms & Conditions",loadElevateLevelErrorMessage:"Error when load elevate levels",noLevelsSet:"There is no level set",points:"Points"},tr:{level:"level",seeAll:"See All",termsAndConditions:"Terms & Conditions",loadElevateLevelErrorMessage:"Error when load elevate levels",noLevelsSet:"There is no level set",points:"Points"}},w=(e,t)=>{const n=t;return x[void 0!==n&&(u.includes(n)||x[n])?n:"en"][e]},m=class{constructor(t){e(this,t),this.clientStyling="",this.clientStylingUrl="",this.language="en",this.translationUrl="",this.elevateLevels=[]}selectedLevelChangedHandler(e){e.detail&&(this.currentLevel=Object.assign({},e.detail.level))}selectedLevelIdChangedHandler(){if(this.selectedLevelId&&this.elevateLevels){const e=this.elevateLevels.filter((e=>e.id==this.selectedLevelId))[0];this.currentLevel=Object.assign({},e)}}onSessionOrEndpointChange(){this.elevateLevelParamProxy=Object.assign(Object.assign({},this.elevateLevelParamProxy),{endpoint:this.endpoint,language:this.language})}elevateLevelsDataChangeHandler(e){e.detail&&(e.detail.currentLevel&&(this.currentLevel=Object.assign({},e.detail.currentLevel)),e.detail.elevateLevels&&(this.elevateLevels=[...e.detail.elevateLevels]),e.detail.clearError&&(this.errorMessage=null),e.detail.errorMessage&&e.detail.errorMessage.errorWhenLoadElevateLevels&&(this.errorMessage=w("loadElevateLevelErrorMessage",this.language)))}onTCClick(){window.postMessage({type:"termAndConditionClicked"},window.location.href)}componentWillLoad(){this.elevateLevelParamProxy={endpoint:this.endpoint,language:this.language,selectedLevelId:this.selectedLevelId,showDefault:this.showDefault}}render(){return t("div",{class:"ElevateLevelContent"},t("elevate-levels-data",{scopeParams:this.elevateLevelParamProxy}),t("div",{class:"LevelContent"},this.elevateLevels?t("elevate-level-list",{language:this.language,selectedLevelId:this.selectedLevelId,levels:this.elevateLevels}):w("noLevelsSet",this.language),this.currentLevel&&t("elevate-level-presentation",{elevateLevel:this.currentLevel})),this.errorMessage&&t("div",null,this.errorMessage),t("general-styling-wrapper",{clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,targetTranslations:x,translationUrl:this.translationUrl}))}static get watchers(){return{selectedLevelId:["selectedLevelIdChangedHandler"],elevateLevels:["selectedLevelIdChangedHandler"],endpoint:["onSessionOrEndpointChange"],language:["onSessionOrEndpointChange"]}}};var L;m.style=":host{display:block}.ElevateLevelContent{padding:20px;position:relative}.ElevateLevelContent .Privileges{padding-bottom:30px}.ElevateLevelContent .tc{position:absolute;right:10px;bottom:10px;text-align:right;display:none}",function(e){e[e.slideToRight=1]="slideToRight",e[e.slideToLeft=-1]="slideToLeft"}(L||(L={}));const y=class{constructor(t){var i;e(this,t),this.selectedLevelChanged=n(this,"selectedLevelChanged",7),this.isShowSliderButton=!1,this.offset=0,this.minOffset=0,this.isMobile=!!((i=window.navigator.userAgent).toLowerCase().match(/android/i)||i.toLowerCase().match(/blackberry|bb/i)||i.toLowerCase().match(/iphone|ipad|ipod/i)||i.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i))}onLevelClicked(e){this.selectedLevelChanged.emit({level:e}),this.selectedLevelId=e.id}levelsChangedHandler(){this.initOffsetOfLevelItems()}initOffsetOfLevelItems(){if(!this.levels||0==this.levels.length||!this.selectedLevelId)return;const e=this.levels.findIndex((e=>this.selectedLevelId==e.id));if(this.onLevelClicked(this.levels[-1==e?0:e]),this.levels.length<=this.moveCountForOneTouch)return;let t=Math.floor((-1==e?1:e+1)/this.moveCountForOneTouch)*this.moveCountForOneTouch*this.childElementWidth*-1;this.offset=t<=this.minOffset?this.minOffset:t>=0?0:t}onTouchStart(e){this.touchPosStart={clientX:e.touches[0].clientX,clientY:e.touches[0].clientY}}onTouchMove(e){this.touchPosEnd={clientX:e.touches[0].clientX,clientY:e.touches[0].clientY};const t=this.touchPosEnd.clientX-this.touchPosStart.clientX,n=this.touchPosEnd.clientY-this.touchPosStart.clientY;Math.abs(t)>Math.abs(n)&&this.slideTo(t>0?L.slideToRight:L.slideToLeft)}slideTo(e){let t=this.levelsElement.offsetLeft+this.childElementWidth*this.moveCountForOneTouch*e;if(t%this.childElementWidth!=0){const n=Math.floor(t/this.childElementWidth)*this.childElementWidth,i=Math.ceil(t/this.childElementWidth)*this.childElementWidth;t=e==L.slideToRight?n:i}this.offset=t<this.minOffset?this.minOffset:t>=0?0:t}initLevelSlider(){var e;if(!(null===(e=this.levelsElement)||void 0===e?void 0:e.firstElementChild))return void console.log("Widget[elevate-level-list] DOM is not ready.");this.isShowSliderButton=!this.isMobile&&this.levelsElement.clientWidth>this.levelsElement.parentElement.clientWidth,this.minOffset=this.levelsElement.parentElement.clientWidth-this.levelsElement.clientWidth,this.childElementWidth=this.levelsElement.firstElementChild.clientWidth,this.moveCountForOneTouch=Math.ceil(this.levelsElement.parentElement.clientWidth/this.childElementWidth)-1;const t=this.levelsElement.childElementCount;this.childElementWidth+=(this.levelsElement.clientWidth-this.childElementWidth*t)/(t-1)}debounce(e,t){{let n;return()=>{clearTimeout(n),n=setTimeout((()=>{e()}),t)}}}handleResize(){this.debounce(this.initLevelSlider.bind(this),200)()}componentDidRender(){this.host.componentOnReady().then((()=>{this.initLevelSlider()}))}render(){return t(i,null,this.levels&&[t("div",{class:`SliderButton LeftButton ${0==this.offset?"Disabled":""} ${this.isShowSliderButton?"":"Hidden"}`,onClick:()=>this.slideTo(L.slideToRight)},t("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},t("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),t("div",{class:"LevelItemsWrapper"},t("div",{style:{left:`${this.offset}px`},class:"LevelItems "+(this.isMobile?"Mobile":""),id:"levelItems",ref:e=>{this.levelsElement=e}},this.levels.map(((e,n)=>t("div",{class:"Item "+(this.selectedLevelId==e.id?"Active":""),onClick:this.onLevelClicked.bind(this,e)},t("img",{alt:`Presentation Icon for ${e.presentation.displayName}`,class:"LevelImg",src:e.presentation.asset}),t("span",{class:"LevelName",title:e.presentation.displayName},e.presentation.displayName),t("span",{class:"LevelPoints"},0==n?"":">",e.firstEntryPoints," ",w("points",this.language))))))),t("div",{class:`SliderButton RightButton ${this.offset<=this.minOffset?"Disabled":""} ${this.isShowSliderButton?"":"Hidden"}`,onClick:()=>this.slideTo(L.slideToLeft)},t("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},t("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})))])}get host(){return l(this)}static get watchers(){return{selectedLevelId:["levelsChangedHandler"]}}};y.style="elevate-level-list{display:flex;flex-direction:row}.LevelItemsWrapper{display:flex;flex:1;margin-top:10px;min-height:30px;transition-property:all;position:relative;height:138px;overflow-x:hidden}.Mobile.LevelItems{overflow-x:hidden}.LevelItems{overflow-x:auto;display:flex;flex-direction:row;gap:10px;left:0;position:absolute;transition:left 0.5s ease-in-out}.LevelItems .Item:hover,.LevelItems .Item.Active{background-color:var(--emfe-w-color-gray-50, #f4f4f4);box-shadow:0px 4px 13px 0px rgba(0, 0, 0, 0.25)}.LevelItems .Item{width:86px;height:125px;border-radius:15px;text-align:center;display:flex;flex-direction:column;cursor:pointer}.LevelItems .Item .LevelName{font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.LevelItems .Item .LevelPoints{color:var(--emfe-w-color-gray-100, #767171);font-size:10px}.LevelItems .Item .LevelImg{width:65px;height:68px;margin:11px auto}.SliderButton{display:flex;width:29px;align-items:center;cursor:pointer}.SliderButton.Disabled svg{stroke:var(--emfe-w-color-gray-50, #cbc5c5)}.SliderButton.Hidden{display:none}";const b=class{constructor(t){e(this,t)}render(){return t(i,null,t("div",{class:"Row Desc"},t("h3",null,this.elevateLevel.presentation.displayName),t("p",null,t("span",{class:"TxtDesc",innerHTML:this.elevateLevel.presentation.description}))))}};b.style=":host{display:block}.PriviliegeList{padding-inline-start:5px}.PriviliegeList li{display:flex}.PriviliegeList li .Img{width:80px}.PriviliegeList li .Img img{width:60px;margin:10px}.PriviliegeList li .Content h4{text-transform:capitalize;margin-block-start:10px}";var I,C=(function(e,t){var n=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==n)return n;throw new Error("unable to locate global object")}();e.exports=t=n.fetch,n.fetch&&(t.default=n.fetch.bind(n)),t.Headers=n.Headers,t.Request=n.Request,t.Response=n.Response}(I={path:undefined,exports:{},require:function(){return function(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}()}},I.exports),I.exports);const E=class{constructor(t){e(this,t),this.elevateLevelsDataChange=n(this,"elevateLevelsDataChange",7)}async componentWillRender(){if(!this.scopeParams.endpoint)return;let e=new URL(`${this.scopeParams.endpoint}/v1/elevate/levels?language=${this.scopeParams.language}`);await C(e.href).then((e=>e.json())).then((e=>{const t=e.data.sort(((e,t)=>e.firstEntryPoints<t.firstEntryPoints?-1:1));let n=this.scopeParams.selectedLevelId;if(!n&&this.scopeParams.showDefault&&t.length>0&&(n=t[0].id),n){const e=t.filter((e=>e.id==n))[0];this.elevateLevelsDataChange.emit({currentLevel:e})}this.elevateLevelsDataChange.emit({clearError:!0}),this.elevateLevelsDataChange.emit({elevateLevels:t})})).catch((e=>{this.elevateLevelsDataChange.emit({errorMessage:{type:"errorWhenLoadElevateLevels",err:e}}),console.error(e)}))}};E.style=":host{display:block}";const k=class{constructor(t){e(this,t),this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.stylingAppends=!1,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.el.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{t.innerHTML=e,setTimeout((()=>{this.el.prepend(t)}),1)})).catch((e=>{console.log("error ",e)}))}}componentDidRender(){this.stylingAppends||(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}async componentWillLoad(){const e=[];if(this.translationUrl){const i=(t=this.translationUrl,n=this.targetTranslations,new Promise((e=>{fetch(t).then((e=>e.json())).then((t=>{Object.keys(t).forEach((e=>{n[e]=n[e]?n[e]:{};for(let i in t[e])n[e][i]=t[e][i]})),e(!0)}))})));e.push(i)}var t,n;return await Promise.all(e)}render(){return t("div",{class:"StyleShell"},t("slot",{name:"mainContent"}))}get el(){return l(this)}};function P(e){o(1,arguments);var t=a(e);return t.setHours(0,0,0,0),t}function T(e,t){return o(2,arguments),a(e).getTime()-a(t).getTime()}k.style=":host{display:block}";var R={ceil:Math.ceil,round:Math.round,floor:Math.floor,trunc:function(e){return e<0?Math.ceil(e):Math.floor(e)}};function S(e){return e?R[e]:R.trunc}const _=class{constructor(t){e(this,t),this.playerElevateLeveLoaded=n(this,"playerElevateLeveLoaded",7)}handleWindowResizs(){this.initLevelProgressbar()}onParamsChanged(){this.loadElevateInfo()}onRedeemClick(){window.postMessage({type:"BEERedeemClicked"},window.location.href)}loadLevels(){let e=new URL(`${this.params.endpoint}/v1/elevate/levels?language=${this.params.language}`);return new Promise(((t,n)=>fetch(e.href,{method:"GET"}).then((e=>e.json())).then((e=>{this.levels=e.data,t(!0)})).catch((e=>{n(e)}))))}calcuatePointsToBeExpired(e){let t="";if(!e||!e.aboutToExpire||0==e.aboutToExpire.length||e.aboutToExpire[0].points<=0)return t;e.aboutToExpire.sort(((e,t)=>function(e,t){o(2,arguments);var n=a(e),i=a(t);return n.getTime()<i.getTime()}(new Date(e.expireTime),new Date(t.expireTime))?-1:1));const n=e.aboutToExpire[0],i=function(e,t){o(2,arguments);var n=P(e),i=P(t),l=n.getTime()-h(n),s=i.getTime()-h(i);return Math.round((l-s)/864e5)}(new Date(n.expireTime),new Date);let l=0,s=0===i?"pointsToBeExpiredDay":"pointsToBeExpired";return 0==i&&(l=function(e,t,n){o(2,arguments);var i=T(e,t)/36e5;return S(null==n?void 0:n.roundingMethod)(i)}(new Date(n.expireTime),new Date),s=l>1?"pointsToBeExpiredHours":"pointsToBeExpiredHour"),t=d(s,{expirationPoints:n.points,expireDay:i}),t}loadPlayerLevelInfo(){let e=new URL(`${this.params.endpoint}/v1/elevate/playerInfo?language=${this.params.language}`);return new Promise(((t,n)=>fetch(e.href,{method:"GET",headers:{"X-Sessionid":this.params.session,"Content-Type":"application/json"}}).then((e=>e.json())).then((e=>{var i,l,s;if(!e.success)return console.error("Exception when fetch user elevateinfo, ",e.errorCode,e.errorMessage),void n(!0);let r=e.data;this.playerElevateLevel=r.level,this.playerElevateLevel.name=this.playerElevateLevel.presentation.displayName||this.playerElevateLevel.name,this.playerElevateLevel.spendablePoints=(null===(i=r.spendableWallet)||void 0===i?void 0:i.total.points)||0,this.playerElevateLeveLoaded.emit({elevateLevel:this.playerElevateLevel});const o=null===(l=e.data.spendableWallet)||void 0===l?void 0:l.total,a=null===(s=e.data.loyaltyWallet)||void 0===s?void 0:s.total;this.playerElevateLeveLoaded.emit({elevateLevelWalletTotal:o,loyaltyWalletTotal:a});let h=this.calcuatePointsToBeExpired(o),d=this.calcuatePointsToBeExpired(a);(h||d)&&this.playerElevateLeveLoaded.emit({pointExpireString:h,xpExpireString:d}),t(this.playerElevateLevel)})).catch((e=>{console.log("error ",e),n(!0)}))))}setLoyaltyProgress(e){!function(e,t){const n=e.querySelector("#total_level"),i=n.getBBox().width,l=t>1?1:t,s=l*i-17<0?0:l*i-17,r=e.querySelector("#current_level"),o=e.querySelector("#filter_current_level"),a=e.querySelector("#circle_current_level");n.setAttribute("viewbox",`0 0 ${s} 28`),r.setAttribute("width",`${s}`),a.setAttribute("cx",`${s<6.5?6.5:s}`),o.setAttribute("x",""+(s-8));const h=e.querySelector("#lock"),d=e.querySelector("#filter_heart_ball"),v=e.querySelector("#filter_ball"),c=e.querySelector("#filter_heart"),p=e.querySelector("#filter_lock"),g=e.querySelector("#paint0_linear_ball"),f=e.querySelector("#paint1_linear_lock"),u=e.querySelector("#lock_box"),x=e.querySelector("#heart_box"),w=i-10;h.setAttribute("cx",`${w}`),f.setAttribute("x1",`${w}`),f.setAttribute("x2",`${w}`),g.setAttribute("x1",""+(w-6)),g.setAttribute("x2",""+(w-6+11.2)),p.setAttribute("x",""+(w-6)),c.setAttribute("x",""+(w-6-2)),v.setAttribute("x",""+(w-6-2-2)),d.setAttribute("x",""+(w-6-2-2-4)),u.setAttribute("x",""+(w-6)),x.setAttribute("x",""+(w-6)),n.parentElement.style.opacity="1"}(this.loyaltyProgressEle,e)}initLevelProgressbar(){setTimeout((()=>{this.loyaltyProgressEle=this.elevateCardRef.parentElement.querySelector("#LevelProgress"),this.loyaltyProgressEle&&(this.setLoyaltyProgress(this.playerElevateLevel.nextLevel?this.playerElevateLevel.loyaltyPoints/this.playerElevateLevel.nextLevel.entryPoints:1),this.params.playerElevateLevel=this.playerElevateLevel)}),80)}componentDidRender(){this.initLevelProgressbar()}loadElevateInfo(){if(!this.params.endpoint||!this.params.session)return;const e=[];e.push(this.loadPlayerLevelInfo()),this.params.calculateLevelFlag&&e.push(this.loadLevels()),Promise.all(e).then((e=>{if(console.log("elevate-init",e),this.initLevelProgressbar(),!this.levels)return;this.levels.sort(((e,t)=>e.firstEntryPoints>t.firstEntryPoints?1:-1));const t=this.playerElevateLevel.loyaltyPoints;let n=0;this.levels.forEach(((e,i)=>{t>e.firstEntryPoints&&(n=i)})),this.playerElevateLeveLoaded.emit({calculatedLevelFlag:n})}))}componentWillLoad(){this.loadElevateInfo()}get elevateCardRef(){return l(this)}static get watchers(){return{params:["onParamsChanged"]}}};_.style=':host {\n display: block;\n width: 360px;\n height: 230px;\n}\n\n.ElevateCardWrapper {\n contain: layout inline-size;\n width: 100%;\n height: fit-content;\n min-height: 218px;\n}\n\n.Outer {\n container-type: inline-size;\n font-size: 12px;\n background-size: cover;\n background-repeat: no-repeat;\n line-height: initial;\n width: 100%;\n height: 100%;\n}\n\n.Dark {\n color: var(--emfe-w-color-gray150, #efefef);\n}\n\n.Light {\n color: var(--emfe-w-color-black, #0e0e0e);\n}\n\n@container (min-width: 381px) {\n .Outer {\n background-size: cover;\n }\n .Outer .OuterCover {\n min-height: 190px;\n }\n}\n@container (min-width: 260px) {\n .Outer {\n background-size: contain;\n }\n}\n.OuterCover {\n width: 100%;\n height: 100%;\n content: "";\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: 15px;\n}\n\n.Inner {\n display: flex;\n flex-direction: column;\n min-height: 158px;\n}\n.Inner .Content {\n padding: 15px;\n flex-wrap: wrap;\n gap: 8px;\n}\n.Inner .Row {\n display: flex;\n flex-direction: row;\n}\n.Inner .CardCell {\n display: flex;\n}\n.Inner .LevelProgress svg {\n transition: opacity 0.4s;\n}\n.Inner .LevelInfo {\n display: flex;\n flex-direction: column;\n}\n.Inner .LevelInfo .ElevateLevel .LevelName {\n height: 28px;\n border-radius: 5px;\n line-height: 28px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level0-bg0, #E2792C) 0%, var(--emfe-w-elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);\n}\n.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level1-bg0, #BEBFED) 0%, var(--emfe-w-elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);\n}\n.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level2-bg0, #FCC410) 0%, var(--emfe-w-elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);\n}\n.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level3-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {\n box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));\n background: linear-gradient(180deg, var(--emfe-w-elevate-color-level4-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo .ElevateLevel {\n display: flex;\n}\n.Inner .LevelInfo {\n flex: 1;\n flex-grow: 1;\n min-width: 150px;\n}\n.Inner .PlayerImg {\n width: 29%;\n margin: auto;\n max-width: 100px;\n min-width: 30px;\n order: 0;\n}\n.Inner .PlayerAvatar {\n max-width: 100px;\n flex-basis: 100px;\n height: auto;\n margin: auto;\n padding-top: 10px;\n}\n.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {\n width: 100%;\n height: 100%;\n}\n.Inner .PlayerAvatar .Avatar {\n border-radius: 50%;\n background-size: contain;\n background-repeat: no-repeat;\n}\n.Inner .ElevateLevel .ExpirationDate {\n max-width: 138px;\n min-width: 118px;\n}\n.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {\n text-transform: capitalize;\n width: 100%;\n}\n.Inner .PlayerName {\n font-size: 16px;\n}\n.Inner .Row .PointsInfo {\n display: table;\n font-weight: 600;\n}\n.Inner .Row .Redeem {\n justify-content: flex-end;\n margin-left: auto;\n}\n.Inner .Row .Redeem:hover {\n color: var(--emfe-w-elevate-color-redeem-hover, #00ABA4);\n cursor: pointer;\n}\n.Inner .Row .RedeemButton:hover span {\n color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);\n font-weight: bold;\n}\n.Inner .Row .RedeemButton {\n width: 95px;\n height: 35px;\n display: flex;\n align-items: center;\n border-radius: 10px;\n background: var(--emfe-w-elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);\n box-shadow: 0px 4px 4px 0px #00000040;\n}\n.Inner .Row .RedeemButton span {\n color: var(--emfe-w-color-white, #fff);\n line-height: 18px;\n font-size: 15px;\n text-align: center;\n width: 100%;\n}\n.Inner .Row .Points {\n font-size: large;\n vertical-align: middle;\n}\n.Inner .Row .Points .XP {\n font-size: x-small;\n}\n.Inner .Row .ExpirationPoints {\n font-size: small;\n text-align: right;\n font-weight: bold;\n color: var(--emfe-w-color-red, #9e595f);\n}';const B=class{constructor(t){e(this,t),this.dateFormat="yyyy-MM-dd",this.clientStyling="",this.clientStylingUrl="",this.translationUrl=""}async setPlayerElevateLevelInfo(e){"playerElevateLeveLoaded"==e.type&&e.detail.elevateLevel&&(this.userLevelId=e.detail.elevateLevel.id)}render(){return t(i,null,t("div",{class:"PlayerElevateCard"},t("player-elevate-loyaltycard",{playerName:this.playerName,dateFormat:this.dateFormat,clientStylingUrl:this.clientStylingUrl,translationUrl:this.translationUrl,clientStyling:`${this.clientStyling} .Outer{height: 185px}`,endpoint:this.endpoint,language:this.language,session:this.session})),t("div",{class:"ElevateLevelsInfo"},t("bonus-elevate-levels",{selectedLevelId:this.userLevelId,clientStyling:this.clientStyling,translationUrl:this.translationUrl,language:this.language,endpoint:this.endpoint})))}};B.style=":host{display:block}.PlayerElevateCard{height:160px;width:100%;overflow:hidden}.ElevateLevelsInfo{background-color:var(--emw--color-background, #e6e8ea)}";const D=class{constructor(t){e(this,t),this.theme="Dark",this.language="en",this.dateFormat="yyyy-MM-dd",this.clientStyling="",this.clientStylingUrl="",this.translationUrl=""}onSessionOrEndpointChange(){this.paramProxy=Object.assign(Object.assign({},this.paramProxy),{session:this.session,endpoint:this.endpoint,language:this.language})}playerElevateLeveLoadedHandler(e){e.detail&&(e.detail.elevateLevelWalletTotal&&(this.elevateWalletTotal=e.detail.elevateLevelWalletTotal),e.detail.elevateLevel&&(this.playerElevateLevel=e.detail.elevateLevel),e.detail.pointExpireString&&(this.pointExpireString=e.detail.xpExpireString))}onRedeemClick(){window.postMessage({type:"BEERedeemClicked"},window.location.href)}componentWillLoad(){this.paramProxy={endpoint:this.endpoint,session:this.session,language:this.language}}getNextLevelTips(){var e;let t=null===(e=this.playerElevateLevel)||void 0===e?void 0:e.nextLevel;if(this.playerElevateLevel&&t){const e=(t.entryPoints-this.playerElevateLevel.loyaltyPoints).toFixed(2);return d("tipsForNextLevel",{pointsToReach:e,levelName:t.name})}return""}render(){const e=s("../static/card-ground.svg"),n=s("../static/card-ground-over.svg");return t("div",{class:`ElevateCardWrapper ${this.theme}`},t("div",{class:"LoyaltyCard Outer",style:{backgroundImage:`url(${e}`}},t("general-styling-wrapper",{clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,targetTranslations:v,translationUrl:this.translationUrl}),t("player-elevate-card-data",{params:this.paramProxy}),t("div",{class:"OuterCover Inner",style:{backgroundImage:`url(${n}`}},t("div",{class:"Content Row"},this.playerElevateLevel&&t(r,null,t("div",{class:"PlayerImg"},t(c,{onlyBadge:!0,loyaltyIconUrl:this.playerElevateLevel.presentation.asset})),t("div",{class:`LevelInfo ${this.playerElevateLevel.name}`},t(p,{hideInfo:!0,level:this.playerElevateLevel.name,expireTime:this.playerElevateLevel.expireTime,dateFormat:this.dateFormat}),t(g,{loyaltyPoints:this.playerElevateLevel.loyaltyPoints,language:this.language}),this.pointExpireString&&t("div",{class:"PointsInfo ExpirationPoints"},this.pointExpireString," "),t(f,null),t("div",{class:"NextLevelTip"},this.getNextLevelTips())))))))}static get watchers(){return{session:["onSessionOrEndpointChange"],endpoint:["onSessionOrEndpointChange"],language:["onSessionOrEndpointChange"]}}};D.style=":host{display:block}@media screen and (min-width: 501px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:nowrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:11px;margin-left:5px}}@media screen and (max-width: 500px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:wrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:0px;margin-left:0px}}.LoyaltyCard .Inner .LevelProgress{margin-left:0px}.LoyaltyCard .Inner .Row .PointsInfo{width:100%}.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints{text-align:left;color:var(--emfe-w-color-red-50, red)}.LoyaltyCard .Inner .PlayerAvatar .Avatar{display:none}.LoyaltyCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%}.LoyaltyCard .Inner .LevelInfo .ElevateLevel{display:flex;flex:1;align-items:center}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{position:relative;padding-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime{margin-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName{padding-left:0;font-size:var(--emfe-w-elevate-fontsize-2xlarge, 21px);position:relative;width:auto;color:var(--emfe-w-elevate-color-levelname, #FFBD2B);font-weight:bold}.LoyaltyCard .NextLevelTip{text-align:right;font-size:11px;color:var(--emfe-w-color-black, #000);opacity:0.8;font-weight:bold}";export{m as bonus_elevate_levels,y as elevate_level_list,b as elevate_level_presentation,E as elevate_levels_data,k as general_styling_wrapper,_ as player_elevate_card_data,B as player_elevate_level,D as player_elevate_loyaltycard}
package/dist/player-elevate-level/p-7fe1badd.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as n,a as t,h as e,F as i}from"./p-46fd6f51.js";import{T as a,P as s,h as r,c as o}from"./p-9235a771.js";const l=class{constructor(t){n(this,t),this.theme="Dark",this.language="en",this.buttonType="earningRule",this.dateFormat="yyyy-MM-dd",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.isPointDetailCard="earningRule"===this.buttonType}onSessionOrEndpointChange(){this.paramProxy=Object.assign(Object.assign({},this.paramProxy),{session:this.session,endpoint:this.endpoint,language:this.language})}playerElevateLeveLoadedHandler(n){n.detail&&(n.detail.elevateLevelWalletTotal&&(this.elevateWalletTotal=n.detail.elevateLevelWalletTotal,this.elevateSPTotal=n.detail.loyaltyWalletTotal),n.detail.elevateLevel&&(this.playerElevateLevel=n.detail.elevateLevel),n.detail.pointExpireString&&(this.pointExpireString=n.detail.pointExpireString))}onDetailsClick(){window.postMessage({type:this.isPointDetailCard?"BEEPointRulesClicked":"BEEDetailsClicked",path:this.isPointDetailCard?"player-elevate-level":"player-elevate-point-details"},window.location.href)}componentWillLoad(){this.paramProxy={endpoint:this.endpoint,session:this.session,language:this.language}}render(){const n=t("../static/card-ground.svg"),l=t("../static/card-ground-over.svg");return e("div",{class:`ElevateCardWrapper ${this.theme}`},e("div",{class:"PointsCard Outer ",style:{backgroundImage:`url(${n}`}},e("general-styling-wrapper",{clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,targetTranslations:a,translationUrl:this.translationUrl}),e("player-elevate-card-data",{params:this.paramProxy}),e("div",{class:"OuterCover Inner",style:{backgroundImage:`url(${l}`}},e("div",{class:"Content Row"},this.playerElevateLevel&&e(i,null,e("div",{class:"PlayerImg"},e(s,{onlyBadge:!0,loyaltyIconUrl:this.playerElevateLevel.presentation.asset})),e("div",{class:`LevelInfo ${this.playerElevateLevel.name}`},e("div",{class:"PointsTxt Label"},this.cardTitle?this.cardTitle:r("spendablePoints")),e("div",{class:"PointsTxt SPPoints"},e(o,{spendablePoints:this.playerElevateLevel.spendablePoints,language:this.language}),e("a",{class:"TC",onClick:()=>{this.onDetailsClick()}},r("termAndConditions",this.language))),this.pointExpireString&&e("div",{class:"ExpirationPoints"},this.pointExpireString," ")))))))}static get watchers(){return{session:["onSessionOrEndpointChange"],endpoint:["onSessionOrEndpointChange"],language:["onSessionOrEndpointChange"]}}};l.style=":host{display:block}.PointsCard .Inner .Row .ExpirationPoints{text-align:left}.PointsCard .Inner .PlayerAvatar .Avatar{display:none}.PointsCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%;position:inherit}.PointsCard .Inner .PointsTxt{display:flex;flex-direction:row;justify-content:space-between}.PointsCard .Inner .DetailButton{background:linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%), linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));border-radius:5px;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:2px solid;font-size:11px;width:108px;padding:4px;cursor:pointer;margin-top:5px;height:16px;min-width:45px;text-align:center}.PointsCard .Inner .DetailButton span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .DetailButton span{display:inline-block;vertical-align:middle}.PointsCard .Inner .DetailButton:hover span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .LevelInfo{gap:15px;width:70%}.PointsCard .Inner .LevelInfo .PointsTxt{font-size:15px}.PointsCard .Inner .LevelInfo .PointsTxt.Label{display:none}.PointsCard .Inner .LevelInfo .PointsTxt.SPPoints{padding-top:15px}.PointsCard .Inner .LevelInfo .PointsTxt .TC{font-size:x-small;color:var(--emw--color-gray-300, #58586B);display:flex;align-content:center;height:100%;flex-wrap:wrap;text-decoration:underline;cursor:pointer;display:none}";export{l as player_elevate_pointcard}