@everymatrix/player-elevate-level 1.37.3 → 1.37.5

package/dist/cjs/bonus-elevate-levels_8.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c706b0d2.js');
-const playerElevateCardItems = require('./player-elevate-card-items-31eb5d57.js');
+const playerElevateCardItems = require('./player-elevate-card-items-484c4947.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
@@ -72,6 +72,9 @@ const BonusElevateLevels = class {
       this.currentLevel = Object.assign({}, currentLevel);
     }
   }
+  onSessionOrEndpointChange() {
+    this.elevateLevelParamProxy = Object.assign(Object.assign({}, this.elevateLevelParamProxy), { endpoint: this.endpoint, language: this.language });
+  }
   elevateLevelsDataChangeHandler(event) {
     if (!event.detail) {
       return;
@@ -103,11 +106,13 @@ const BonusElevateLevels = class {
   render() {
     return (index.h("div", { class: "ElevateLevelContent" }, index.h("elevate-levels-data", { scopeParams: this.elevateLevelParamProxy }), index.h("div", { class: "LevelContent" }, this.elevateLevels ?
       index.h("elevate-level-list", { language: this.language, selectedLevelId: this.selectedLevelId, levels: this.elevateLevels }) : translate('noLevelsSet', this.language), this.currentLevel &&
-      index.h("elevate-level-presentation", { elevateLevel: this.currentLevel }), index.h("div", { class: "tc", onClick: this.onTCClick }, translate('termsAndConditions', this.language), ' ')), this.errorMessage && index.h("div", null, this.errorMessage), index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl })));
+      index.h("elevate-level-presentation", { elevateLevel: this.currentLevel })), this.errorMessage && index.h("div", null, this.errorMessage), index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl })));
   }
   static get watchers() { return {
     "selectedLevelId": ["selectedLevelIdChangedHandler"],
-    "elevateLevels": ["selectedLevelIdChangedHandler"]
+    "elevateLevels": ["selectedLevelIdChangedHandler"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
   }; }
 };
 BonusElevateLevels.style = bonusElevateLevelsCss;
@@ -296,7 +301,7 @@ const ElevateLevelsData = class {
     index.registerInstance(this, hostRef);
     this.elevateLevelsDataChange = index.createEvent(this, "elevateLevelsDataChange", 7);
   }
-  async componentWillLoad() {
+  async componentWillRender() {
     //load data
     if (!this.scopeParams.endpoint) {
       return;
@@ -598,9 +603,12 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
 
 function updateProgressSvg(progressElementRef, percent) {
   const svgElement = progressElementRef.querySelector('#total_level');
-  const endLockWidth = 15;
+  const endLockWidth = 17, pointR = 6.5;
+  //Total Widget of the progress
   const barWidth = svgElement.getBBox().width;
-  const widthOnBar = percent * barWidth - endLockWidth < 0 ? 0 : percent * barWidth - endLockWidth;
+  //The filled width according to current progress
+  const levelPercent = percent > 1 ? 1 : percent;
+  const widthOnBar = (levelPercent * barWidth - endLockWidth) < 0 ? 0 : levelPercent * barWidth - endLockWidth;
   //update bar's width, widthOnBar
   const levelBar = progressElementRef.querySelector('#current_level');
   //update filters, x = widthOnBar
@@ -609,8 +617,8 @@ function updateProgressSvg(progressElementRef, percent) {
   const levelCircle = progressElementRef.querySelector('#circle_current_level');
   svgElement.setAttribute('viewbox', `0 0 ${widthOnBar} 28`);
   levelBar.setAttribute('width', `${widthOnBar}`);
-  levelCircle.setAttribute('cx', `${widthOnBar + 3}`);
-  levelFilter.setAttribute('x', `${widthOnBar - 4}`);
+  levelCircle.setAttribute('cx', `${(widthOnBar < pointR ? pointR : widthOnBar)}`);
+  levelFilter.setAttribute('x', `${widthOnBar - 8}`);
   //update lock location
   const endLockElement = progressElementRef.querySelector('#lock');
   // wrapper of endLock, include ball and heatfilter1_d_305_23
@@ -642,9 +650,10 @@ function updateProgressSvg(progressElementRef, percent) {
   filter1.setAttribute('x', `${cxOfEndLockEle - 6 - 2 - 2 - 4}`);
   lockBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
   heartBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
+  svgElement.parentElement.style.opacity = '1';
 }
 
-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}";
+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}";
 
 const PlayerElevateCardData = class {
   constructor(hostRef) {
@@ -654,6 +663,9 @@ const PlayerElevateCardData = class {
   handleWindowResizs() {
     this.initLevelProgressbar();
   }
+  onParamsChanged() {
+    this.loadElevateInfo();
+  }
   onRedeemClick() {
     window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
   }
@@ -754,19 +766,14 @@ const PlayerElevateCardData = class {
         return;
       }
       this.setLoyaltyProgress(!this.playerElevateLevel.nextLevel
-        ? 1
-        : (this.playerElevateLevel.loyaltyPoints -
-          this.playerElevateLevel.entryPoints) /
-          (this.playerElevateLevel.nextLevel.entryPoints -
-            this.playerElevateLevel.entryPoints));
+        ? 1 : (this.playerElevateLevel.loyaltyPoints / this.playerElevateLevel.nextLevel.entryPoints));
       this.params['playerElevateLevel'] = this.playerElevateLevel;
     }, 80);
   }
-  componentWillRender() { }
   componentDidRender() {
     this.initLevelProgressbar();
   }
-  componentWillLoad() {
+  loadElevateInfo() {
     if (!this.params.endpoint || !this.params.session) {
       return;
     }
@@ -796,7 +803,13 @@ const PlayerElevateCardData = class {
       });
     });
   }
+  componentWillLoad() {
+    this.loadElevateInfo();
+  }
   get elevateCardRef() { return index.getElement(this); }
+  static get watchers() { return {
+    "params": ["onParamsChanged"]
+  }; }
 };
 PlayerElevateCardData.style = playerElevateCardDataCss;
 
@@ -864,6 +877,9 @@ const PlayerElevateLoyaltycard = class {
      */
     this.translationUrl = '';
   }
+  onSessionOrEndpointChange() {
+    this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+  }
   playerElevateLeveLoadedHandler(event) {
     if (!event.detail) {
       return;
@@ -882,7 +898,7 @@ const PlayerElevateLoyaltycard = class {
     window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
   }
   componentWillLoad() {
-    this.paramsProxy = {
+    this.paramProxy = {
       endpoint: this.endpoint,
       session: this.session,
       language: this.language,
@@ -904,8 +920,13 @@ const PlayerElevateLoyaltycard = class {
   render() {
     const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
     const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
-    return (index.h("div", { class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { params: this.paramsProxy }), index.h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, null, index.h("div", { class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (index.h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h(playerElevateCardItems.PlayerLoyaltyProcess, null), index.h("div", { class: "NextLevelTip" }, this.getNextLevelTips())))))))));
+    return (index.h("div", { class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { params: this.paramProxy }), index.h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, null, index.h("div", { class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (index.h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h(playerElevateCardItems.PlayerLoyaltyProcess, null), index.h("div", { class: "NextLevelTip" }, this.getNextLevelTips())))))))));
   }
+  static get watchers() { return {
+    "session": ["onSessionOrEndpointChange"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
+  }; }
 };
 PlayerElevateLoyaltycard.style = playerElevateLoyaltycardCss;
 

package/dist/cjs/{player-elevate-card-items-31eb5d57.js → player-elevate-card-items-484c4947.js}

@@ -2320,9 +2320,9 @@ const translateWithParams = (key, params) => {
   return templateString;
 };
 
-const LoyaltyProgress = `<svg width="100%" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect y="12" width="100%" id="total_level" height="5" rx="2.5" fill="white" fill-opacity="0.5"/>
-    <rect y="12" id="current_level" width="64" height="5" rx="2.5" fill="white"/>
+const LoyaltyProgress = `<svg width="100%" height="28" style="opacity: 0" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="12" x="2" width="100%" id="total_level" height="5" rx="2.5" fill="white" fill-opacity="0.5"/>
+    <rect y="12"  x="2" id="current_level" width="64" height="5" rx="2.5" fill="white"/>
     <g filter="url(#filter_current_level)">
         <circle id="circle_current_level" cx="74.5" cy="14.5" r="6.5" fill="white"/>
     </g>

package/dist/cjs/player-elevate-card.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c706b0d2.js');
-const playerElevateCardItems = require('./player-elevate-card-items-31eb5d57.js');
+const playerElevateCardItems = require('./player-elevate-card-items-484c4947.js');
 
 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}";
 
@@ -37,6 +37,9 @@ const PlayerElevateCard = class {
     this.translationUrl = '';
     this.playerLevelFlag = 0;
   }
+  onSessionOrEndpointChange() {
+    this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+  }
   playerElevateLeveLoadedHandler(event) {
     if (!event.detail) {
       return;
@@ -71,6 +74,11 @@ const PlayerElevateCard = class {
     return (index.h("div", { class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { class: "Card Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { params: this.paramProxy }), index.h("div", { class: "OuterCover Inner", style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, this.playerElevateLevel && (index.h(index.Fragment, null, index.h("div", { class: 'Content Row' }, index.h("div", { class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { playerAvatarUrl: this.playerAvatarUrl, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }), index.h(playerElevateCardItems.PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language })), this.pointExpireString && (index.h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h("div", { class: `LevelInfo Level${this.playerLevelFlag} ${this.playerElevateLevel.presentation.displayName}` }, index.h(playerElevateCardItems.PlayerNameDiv, { playerName: this.playerName }), index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerLoyaltyProcess, null), index.h(playerElevateCardItems.PlayerElevateCardRedeem, { onRedeemClick: this.onRedeemClick, language: this.language })))))))));
   }
   static get assetsDirs() { return ["../static"]; }
+  static get watchers() { return {
+    "session": ["onSessionOrEndpointChange"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
+  }; }
 };
 PlayerElevateCard.style = playerElevateCardCss;
 

package/dist/cjs/player-elevate-pointcard.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c706b0d2.js');
-const playerElevateCardItems = require('./player-elevate-card-items-31eb5d57.js');
+const playerElevateCardItems = require('./player-elevate-card-items-484c4947.js');
 
 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}";
 
@@ -45,6 +45,9 @@ const PlayerElevatePointcard = class {
     this.translationUrl = '';
     this.isPointDetailCard = this.buttonType === 'earningRule';
   }
+  onSessionOrEndpointChange() {
+    this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+  }
   playerElevateLeveLoadedHandler(event) {
     if (!event.detail) {
       return;
@@ -78,6 +81,11 @@ const PlayerElevatePointcard = class {
         this.onDetailsClick();
       } }, playerElevateCardItems.translate('termAndConditions', this.language))), this.pointExpireString && (index.h("div", { class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
   }
+  static get watchers() { return {
+    "session": ["onSessionOrEndpointChange"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
+  }; }
 };
 PlayerElevatePointcard.style = playerElevatePointcardCss;
 

package/dist/components/bonus-elevate-levels2.js

@@ -45,6 +45,9 @@ const BonusElevateLevels = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       this.currentLevel = Object.assign({}, currentLevel);
     }
   }
+  onSessionOrEndpointChange() {
+    this.elevateLevelParamProxy = Object.assign(Object.assign({}, this.elevateLevelParamProxy), { endpoint: this.endpoint, language: this.language });
+  }
   elevateLevelsDataChangeHandler(event) {
     if (!event.detail) {
       return;
@@ -76,11 +79,13 @@ const BonusElevateLevels = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   render() {
     return (h("div", { class: "ElevateLevelContent" }, h("elevate-levels-data", { scopeParams: this.elevateLevelParamProxy }), h("div", { class: "LevelContent" }, this.elevateLevels ?
       h("elevate-level-list", { language: this.language, selectedLevelId: this.selectedLevelId, levels: this.elevateLevels }) : translate('noLevelsSet', this.language), this.currentLevel &&
-      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 })));
+      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 })));
   }
   static get watchers() { return {
     "selectedLevelId": ["selectedLevelIdChangedHandler"],
-    "elevateLevels": ["selectedLevelIdChangedHandler"]
+    "elevateLevels": ["selectedLevelIdChangedHandler"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
   }; }
   static get style() { return bonusElevateLevelsCss; }
 }, [1, "bonus-elevate-levels", {

package/dist/components/elevate-levels-data2.js

@@ -49,7 +49,7 @@ const ElevateLevelsData = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.elevateLevelsDataChange = createEvent(this, "elevateLevelsDataChange", 7);
   }
-  async componentWillLoad() {
+  async componentWillRender() {
     //load data
     if (!this.scopeParams.endpoint) {
       return;

package/dist/components/player-elevate-card-data2.js

@@ -401,9 +401,12 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
 
 function updateProgressSvg(progressElementRef, percent) {
   const svgElement = progressElementRef.querySelector('#total_level');
-  const endLockWidth = 15;
+  const endLockWidth = 17, pointR = 6.5;
+  //Total Widget of the progress
   const barWidth = svgElement.getBBox().width;
-  const widthOnBar = percent * barWidth - endLockWidth < 0 ? 0 : percent * barWidth - endLockWidth;
+  //The filled width according to current progress
+  const levelPercent = percent > 1 ? 1 : percent;
+  const widthOnBar = (levelPercent * barWidth - endLockWidth) < 0 ? 0 : levelPercent * barWidth - endLockWidth;
   //update bar's width, widthOnBar
   const levelBar = progressElementRef.querySelector('#current_level');
   //update filters, x = widthOnBar
@@ -412,8 +415,8 @@ function updateProgressSvg(progressElementRef, percent) {
   const levelCircle = progressElementRef.querySelector('#circle_current_level');
   svgElement.setAttribute('viewbox', `0 0 ${widthOnBar} 28`);
   levelBar.setAttribute('width', `${widthOnBar}`);
-  levelCircle.setAttribute('cx', `${widthOnBar + 3}`);
-  levelFilter.setAttribute('x', `${widthOnBar - 4}`);
+  levelCircle.setAttribute('cx', `${(widthOnBar < pointR ? pointR : widthOnBar)}`);
+  levelFilter.setAttribute('x', `${widthOnBar - 8}`);
   //update lock location
   const endLockElement = progressElementRef.querySelector('#lock');
   // wrapper of endLock, include ball and heatfilter1_d_305_23
@@ -445,9 +448,10 @@ function updateProgressSvg(progressElementRef, percent) {
   filter1.setAttribute('x', `${cxOfEndLockEle - 6 - 2 - 2 - 4}`);
   lockBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
   heartBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
+  svgElement.parentElement.style.opacity = '1';
 }
 
-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}";
+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}";
 
 const PlayerElevateCardData = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -458,6 +462,9 @@ const PlayerElevateCardData = /*@__PURE__*/ proxyCustomElement(class extends HTM
   handleWindowResizs() {
     this.initLevelProgressbar();
   }
+  onParamsChanged() {
+    this.loadElevateInfo();
+  }
   onRedeemClick() {
     window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
   }
@@ -558,19 +565,14 @@ const PlayerElevateCardData = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return;
       }
       this.setLoyaltyProgress(!this.playerElevateLevel.nextLevel
-        ? 1
-        : (this.playerElevateLevel.loyaltyPoints -
-          this.playerElevateLevel.entryPoints) /
-          (this.playerElevateLevel.nextLevel.entryPoints -
-            this.playerElevateLevel.entryPoints));
+        ? 1 : (this.playerElevateLevel.loyaltyPoints / this.playerElevateLevel.nextLevel.entryPoints));
       this.params['playerElevateLevel'] = this.playerElevateLevel;
     }, 80);
   }
-  componentWillRender() { }
   componentDidRender() {
     this.initLevelProgressbar();
   }
-  componentWillLoad() {
+  loadElevateInfo() {
     if (!this.params.endpoint || !this.params.session) {
       return;
     }
@@ -600,7 +602,13 @@ const PlayerElevateCardData = /*@__PURE__*/ proxyCustomElement(class extends HTM
       });
     });
   }
+  componentWillLoad() {
+    this.loadElevateInfo();
+  }
   get elevateCardRef() { return this; }
+  static get watchers() { return {
+    "params": ["onParamsChanged"]
+  }; }
   static get style() { return playerElevateCardDataCss; }
 }, [0, "player-elevate-card-data", {
     "params": [8],

package/dist/components/player-elevate-card-items.js

@@ -1,9 +1,9 @@
 import { h, getAssetPath } from '@stencil/core/internal/client';
 import { r as requiredArgs, _ as _typeof, t as toDate, g as getTimezoneOffsetInMilliseconds, a as translate } from './player-elevate-card-data2.js';
 
-const LoyaltyProgress = `<svg width="100%" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect y="12" width="100%" id="total_level" height="5" rx="2.5" fill="white" fill-opacity="0.5"/>
-    <rect y="12" id="current_level" width="64" height="5" rx="2.5" fill="white"/>
+const LoyaltyProgress = `<svg width="100%" height="28" style="opacity: 0" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="12" x="2" width="100%" id="total_level" height="5" rx="2.5" fill="white" fill-opacity="0.5"/>
+    <rect y="12"  x="2" id="current_level" width="64" height="5" rx="2.5" fill="white"/>
     <g filter="url(#filter_current_level)">
         <circle id="circle_current_level" cx="74.5" cy="14.5" r="6.5" fill="white"/>
     </g>

package/dist/components/player-elevate-card.js

@@ -37,6 +37,9 @@ const PlayerElevateCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.translationUrl = '';
     this.playerLevelFlag = 0;
   }
+  onSessionOrEndpointChange() {
+    this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+  }
   playerElevateLeveLoadedHandler(event) {
     if (!event.detail) {
       return;
@@ -71,6 +74,11 @@ const PlayerElevateCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     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 })))))))));
   }
   static get assetsDirs() { return ["../static"]; }
+  static get watchers() { return {
+    "session": ["onSessionOrEndpointChange"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
+  }; }
   static get style() { return playerElevateCardCss; }
 }, [1, "player-elevate-card", {
     "endpoint": [513],

package/dist/components/player-elevate-loyaltycard2.js

@@ -36,6 +36,9 @@ const PlayerElevateLoyaltycard = /*@__PURE__*/ proxyCustomElement(class extends
      */
     this.translationUrl = '';
   }
+  onSessionOrEndpointChange() {
+    this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+  }
   playerElevateLeveLoadedHandler(event) {
     if (!event.detail) {
       return;
@@ -54,7 +57,7 @@ const PlayerElevateLoyaltycard = /*@__PURE__*/ proxyCustomElement(class extends
     window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
   }
   componentWillLoad() {
-    this.paramsProxy = {
+    this.paramProxy = {
       endpoint: this.endpoint,
       session: this.session,
       language: this.language,
@@ -76,8 +79,13 @@ const PlayerElevateLoyaltycard = /*@__PURE__*/ proxyCustomElement(class extends
   render() {
     const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
     const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
-    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, 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())))))))));
+    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, 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())))))))));
   }
+  static get watchers() { return {
+    "session": ["onSessionOrEndpointChange"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
+  }; }
   static get style() { return playerElevateLoyaltycardCss; }
 }, [1, "player-elevate-loyaltycard", {
     "endpoint": [513],

package/dist/components/player-elevate-pointcard.js

@@ -45,6 +45,9 @@ const PlayerElevatePointcard$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.translationUrl = '';
     this.isPointDetailCard = this.buttonType === 'earningRule';
   }
+  onSessionOrEndpointChange() {
+    this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+  }
   playerElevateLeveLoadedHandler(event) {
     if (!event.detail) {
       return;
@@ -78,6 +81,11 @@ const PlayerElevatePointcard$1 = /*@__PURE__*/ proxyCustomElement(class extends
         this.onDetailsClick();
       } }, translate('termAndConditions', this.language))), this.pointExpireString && (h("div", { class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
   }
+  static get watchers() { return {
+    "session": ["onSessionOrEndpointChange"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
+  }; }
   static get style() { return playerElevatePointcardCss; }
 }, [1, "player-elevate-pointcard", {
     "endpoint": [513],