@everymatrix/player-elevate-card 1.37.4 → 1.37.5

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-loyaltycard.js

@@ -36,6 +36,9 @@ const PlayerElevateLoyaltycard$1 = /*@__PURE__*/ proxyCustomElement(class extend
      */
     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$1 = /*@__PURE__*/ proxyCustomElement(class extend
     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$1 = /*@__PURE__*/ proxyCustomElement(class extend
   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],

package/dist/components/static/level-percent.svg

@@ -1,6 +1,6 @@
-<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"/>
+<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/esm/general-styling-wrapper_5.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement, a as getAssetPath, F as Fragment, c as createEvent } from './index-747197fd.js';
+import { r as registerInstance, h, g as getElement, a as getAssetPath, F as Fragment, c as createEvent } from './index-6beb1563.js';
 
 const mergeTranslations = (url, target) => {
   return new Promise((resolve) => {
@@ -81,9 +81,9 @@ const GeneralStylingWrapper = class {
 };
 GeneralStylingWrapper.style = generalStylingWrapperCss;
 
-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>
@@ -2574,6 +2574,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;
@@ -2608,6 +2611,11 @@ const PlayerElevateCard = class {
     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"]
+  }; }
 };
 PlayerElevateCard.style = playerElevateCardCss;
 
@@ -2797,9 +2805,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
@@ -2808,8 +2819,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
@@ -2841,9 +2852,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) {
@@ -2853,6 +2865,9 @@ const PlayerElevateCardData = class {
   handleWindowResizs() {
     this.initLevelProgressbar();
   }
+  onParamsChanged() {
+    this.loadElevateInfo();
+  }
   onRedeemClick() {
     window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
   }
@@ -2953,19 +2968,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;
     }
@@ -2995,7 +3005,13 @@ const PlayerElevateCardData = class {
       });
     });
   }
+  componentWillLoad() {
+    this.loadElevateInfo();
+  }
   get elevateCardRef() { return getElement(this); }
+  static get watchers() { return {
+    "params": ["onParamsChanged"]
+  }; }
 };
 PlayerElevateCardData.style = playerElevateCardDataCss;
 
@@ -3030,6 +3046,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;
@@ -3048,7 +3067,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,
@@ -3070,8 +3089,13 @@ const PlayerElevateLoyaltycard = class {
   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"]
+  }; }
 };
 PlayerElevateLoyaltycard.style = playerElevateLoyaltycardCss;
 
@@ -3115,6 +3139,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;
@@ -3148,6 +3175,11 @@ const PlayerElevatePointcard = class {
         this.onDetailsClick();
       } }, translate('termAndConditions', this.language))), this.pointExpireString && (h("div", { class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
   }
+  static get watchers() { return {
+    "session": ["onSessionOrEndpointChange"],
+    "endpoint": ["onSessionOrEndpointChange"],
+    "language": ["onSessionOrEndpointChange"]
+  }; }
 };
 PlayerElevatePointcard.style = playerElevatePointcardCss;
 

package/dist/esm/{index-747197fd.js → index-6beb1563.js}

@@ -994,9 +994,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             promise = safeCall(instance, 'componentWillLoad');
         }
     }
-    {
-        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
-    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -1168,6 +1165,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -1180,6 +1178,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
@@ -1192,6 +1206,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 };
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -1299,6 +1316,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
                 Cstr.isProxied = true;
             }
@@ -1322,6 +1345,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
             endNewInstance();
         }
         if (Cstr.style) {
@@ -1459,6 +1485,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$attrsToReflect$ = [];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-747197fd.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6beb1563.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com

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

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-747197fd.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6beb1563.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com

package/dist/player-elevate-card/p-523c2803.js

@@ -0,0 +1 @@
+let e,t,n,l=!1,o=!1,s=!1,r=!1;const c="undefined"!=typeof window?window:{},i=c.document||{head:{}},a={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},f=e=>Promise.resolve(e),u=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),$=(e,t,n)=>{n&&n.map((([n,l,o])=>{const s=y(e,n),r=d(t,o),c=h(n);a.ael(s,l,r,c),(t.o=t.o||[]).push((()=>a.rel(s,l,r,c)))}))},d=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){fe(e)}},y=(e,t)=>8&t?c:e,h=e=>0!=(2&e),m=new WeakMap,p=e=>"sc-"+e.$,b={},w=e=>"object"==(e=typeof e)||"function"===e,v=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1,c=[];const i=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?i(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!w(l))&&(l+=""),s&&r?c[c.length-1].h+=l:c.push(s?S(null,l):l),r=s)};if(i(n),t){t.name&&(o=t.name);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}if("function"==typeof e)return e(null===t?{}:t,c,j);const a=S(e,null);return a.m=t,c.length>0&&(a.p=c),a.v=o,a},S=(e,t)=>({t:0,S:e,h:t,g:null,p:null,m:null,v:null}),g={},j={forEach:(e,t)=>e.map(k).forEach(t),map:(e,t)=>e.map(k).map(t).map(M)},k=e=>({vattrs:e.m,vchildren:e.p,vkey:e.j,vname:e.v,vtag:e.S,vtext:e.h}),M=e=>{if("function"==typeof e.vtag){const t=Object.assign({},e.vattrs);return e.vkey&&(t.key=e.vkey),e.vname&&(t.name=e.vname),v(e.vtag,t,...e.vchildren||[])}const t=S(e.vtag,e.vtext);return t.m=e.vattrs,t.p=e.vchildren,t.j=e.vkey,t.v=e.vname,t},O=(e,t,n,l,o,s)=>{if(n!==l){let r=ae(e,t),i=t.toLowerCase();if("class"===t){const t=e.classList,o=C(n),s=C(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if(r||"o"!==t[0]||"n"!==t[1]){const c=w(l);if((r||c&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{let o=null==l?"":l;"list"===t?r=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!r||4&s||o)&&!c&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):ae(c,i)?i.slice(2):i[2]+t.slice(3),n&&a.rel(e,t,n,!1),l&&a.ael(e,t,l,!1)}},R=/\s/,C=e=>e?e.split(R):[],T=(e,t,n,l)=>{const o=11===t.g.nodeType&&t.g.host?t.g.host:t.g,s=e&&e.m||b,r=t.m||b;for(l in s)l in r||O(o,l,s[l],void 0,n,t.t);for(l in r)O(o,l,s[l],r[l],n,t.t)},x=(o,r,c,a)=>{let f,u,$,d=r.p[c],y=0;if(l||(s=!0,"slot"===d.S&&(e&&a.classList.add(e+"-s"),d.t|=d.p?2:1)),null!==d.h)f=d.g=i.createTextNode(d.h);else if(1&d.t)f=d.g=i.createTextNode("");else if(f=d.g=i.createElement(2&d.t?"slot-fb":d.S),T(null,d,!1),null!=e&&f["s-si"]!==e&&f.classList.add(f["s-si"]=e),d.p)for(y=0;y<d.p.length;++y)u=x(o,d,y,f),u&&f.appendChild(u);return f["s-hn"]=n,3&d.t&&(f["s-sr"]=!0,f["s-cr"]=t,f["s-sn"]=d.v||"",$=o&&o.p&&o.p[c],$&&$.S===d.S&&o.g&&E(o.g,!1)),f},E=(e,t)=>{a.t|=1;const l=e.childNodes;for(let e=l.length-1;e>=0;e--){const o=l[e];o["s-hn"]!==n&&o["s-ol"]&&(W(o).insertBefore(o,U(o)),o["s-ol"].remove(),o["s-ol"]=void 0,s=!0),t&&E(o,t)}a.t&=-2},L=(e,t,l,o,s,r)=>{let c,i=e["s-cr"]&&e["s-cr"].parentNode||e;for(i.shadowRoot&&i.tagName===n&&(i=i.shadowRoot);s<=r;++s)o[s]&&(c=x(null,l,s,e),c&&(o[s].g=c,i.insertBefore(c,U(t))))},N=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(o=!0,(s=l.g)["s-ol"]?s["s-ol"].remove():E(s,!0),s.remove())},P=(e,t)=>e.S===t.S&&("slot"!==e.S||e.v===t.v),U=e=>e&&e["s-ol"]||e,W=e=>(e["s-ol"]?e["s-ol"]:e).parentNode,A=(e,t)=>{const n=t.g=e.g,l=e.p,o=t.p,s=t.h;let r;null===s?("slot"===t.S||T(e,t,!1),null!==l&&null!==o?((e,t,n,l)=>{let o,s=0,r=0,c=t.length-1,i=t[0],a=t[c],f=l.length-1,u=l[0],$=l[f];for(;s<=c&&r<=f;)null==i?i=t[++s]:null==a?a=t[--c]:null==u?u=l[++r]:null==$?$=l[--f]:P(i,u)?(A(i,u),i=t[++s],u=l[++r]):P(a,$)?(A(a,$),a=t[--c],$=l[--f]):P(i,$)?("slot"!==i.S&&"slot"!==$.S||E(i.g.parentNode,!1),A(i,$),e.insertBefore(i.g,a.g.nextSibling),i=t[++s],$=l[--f]):P(a,u)?("slot"!==i.S&&"slot"!==$.S||E(a.g.parentNode,!1),A(a,u),e.insertBefore(a.g,i.g),a=t[--c],u=l[++r]):(o=x(t&&t[r],n,r,e),u=l[++r],o&&W(i.g).insertBefore(o,U(i.g)));s>c?L(e,null==l[f+1]?null:l[f+1].g,n,l,r,f):r>f&&N(t,s,c)})(n,l,t,o):null!==o?(null!==e.h&&(n.textContent=""),L(n,null,t,o,0,o.length-1)):null!==l&&N(l,0,l.length-1)):(r=n["s-cr"])?r.parentNode.textContent=s:e.h!==s&&(n.data=s)},F=e=>{let t,n,l,o,s,r,c=e.childNodes;for(n=0,l=c.length;n<l;n++)if(t=c[n],1===t.nodeType){if(t["s-sr"])for(s=t["s-sn"],t.hidden=!1,o=0;o<l;o++)if(r=c[o].nodeType,c[o]["s-hn"]!==t["s-hn"]||""!==s){if(1===r&&s===c[o].getAttribute("slot")){t.hidden=!0;break}}else if(1===r||3===r&&""!==c[o].textContent.trim()){t.hidden=!0;break}F(t)}},q=[],D=e=>{let t,n,l,s,r,c,i=0,a=e.childNodes,f=a.length;for(;i<f;i++){if(t=a[i],t["s-sr"]&&(n=t["s-cr"])&&n.parentNode)for(l=n.parentNode.childNodes,s=t["s-sn"],c=l.length-1;c>=0;c--)n=l[c],n["s-cn"]||n["s-nr"]||n["s-hn"]===t["s-hn"]||(H(n,s)?(r=q.find((e=>e.k===n)),o=!0,n["s-sn"]=n["s-sn"]||s,r?r.M=t:q.push({M:t,k:n}),n["s-sr"]&&q.map((e=>{H(e.k,n["s-sn"])&&(r=q.find((e=>e.k===n)),r&&!e.M&&(e.M=r.M))}))):q.some((e=>e.k===n))||q.push({k:n}));1===t.nodeType&&D(t)}},H=(e,t)=>1===e.nodeType?null===e.getAttribute("slot")&&""===t||e.getAttribute("slot")===t:e["s-sn"]===t||""===t,V=e=>re(e).O,_=(e,t,n)=>{const l=V(e);return{emit:e=>z(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},z=(e,t,n)=>{const l=a.ce(t,n);return e.dispatchEvent(l),l},B=(e,t)=>{t&&!e.R&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.R=t)))},G=(e,t)=>{if(e.t|=16,!(4&e.t))return B(e,e.C),ve((()=>I(e,t)));e.t|=512},I=(e,t)=>{const n=e.i;let l;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>Y(n,e,t))),e.u=null),l=Y(n,"componentWillLoad")),Z(l,(()=>J(e,n,t)))},J=async(e,t,n)=>{const l=e.O,o=l["s-rc"];n&&(e=>{const t=e.T,n=e.O,l=t.t,o=((e,t)=>{let n=p(t),l=de.get(n);if(e=11===e.nodeType?e:i,l)if("string"==typeof l){let t,o=m.get(e=e.head||e);o||m.set(e,o=new Set),o.has(n)||(t=i.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);K(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>Q(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},K=(r,c)=>{try{c=c.render&&c.render(),r.t&=-17,r.t|=2,((r,c)=>{const f=r.O,u=r.T,$=r.L||S(null,null),d=(e=>e&&e.S===g)(c)?c:v(null,null,c);if(n=f.tagName,u.N&&(d.m=d.m||{},u.N.map((([e,t])=>d.m[t]=f[e]))),d.S=null,d.t|=4,r.L=d,d.g=$.g=f.shadowRoot||f,e=f["s-sc"],t=f["s-cr"],l=0!=(1&u.t),o=!1,A($,d),a.t|=1,s){let e,t,n,l,o,s;D(d.g);let r=0;for(;r<q.length;r++)e=q[r],t=e.k,t["s-ol"]||(n=i.createTextNode(""),n["s-nr"]=t,t.parentNode.insertBefore(t["s-ol"]=n,t));for(r=0;r<q.length;r++)if(e=q[r],t=e.k,e.M){for(l=e.M.parentNode,o=e.M.nextSibling,n=t["s-ol"];n=n.previousSibling;)if(s=n["s-nr"],s&&s["s-sn"]===t["s-sn"]&&l===s.parentNode&&(s=s.nextSibling,!s||!s["s-nr"])){o=s;break}(!o&&l!==t.parentNode||t.nextSibling!==o)&&t!==o&&(!t["s-hn"]&&t["s-ol"]&&(t["s-hn"]=t["s-ol"].parentNode.nodeName),l.insertBefore(t,o))}else 1===t.nodeType&&(t.hidden=!0)}o&&F(d.g),a.t&=-2,q.length=0})(r,c)}catch(e){fe(e,r.O)}return null},Q=e=>{const t=e.O,n=e.C;Y(e.i,"componentDidRender"),64&e.t||(e.t|=64,ee(t),e.P(t),n||X()),e.R&&(e.R(),e.R=void 0),512&e.t&&we((()=>G(e,!1))),e.t&=-517},X=()=>{ee(i.documentElement),we((()=>z(c,"appload",{detail:{namespace:"player-elevate-card"}})))},Y=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){fe(e)}},Z=(e,t)=>e&&e.then?e.then(t):t(),ee=e=>e.classList.add("hydrated"),te=(e,t,n)=>{if(t.U){e.watchers&&(t.W=e.watchers);const l=Object.entries(t.U),o=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(o,e,{get(){return((e,t)=>re(this).A.get(t))(0,e)},set(n){((e,t,n,l)=>{const o=re(e),s=o.O,r=o.A.get(t),c=o.t,i=o.i;if(n=((e,t)=>null==e||w(e)?e:1&t?e+"":e)(n,l.U[t][0]),(!(8&c)||void 0===r)&&n!==r&&(!Number.isNaN(r)||!Number.isNaN(n))&&(o.A.set(t,n),i)){if(l.W&&128&c){const e=l.W[t];e&&e.map((e=>{try{i[e](n,r,t)}catch(e){fe(e,s)}}))}2==(18&c)&&G(o,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;o.attributeChangedCallback=function(e,t,l){a.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(o.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const o=l[1]||e;return n.set(o,e),512&l[0]&&t.N.push([e,o]),o}))}}return e},ne=(e,t={})=>{const n=[],l=t.exclude||[],o=c.customElements,s=i.head,r=s.querySelector("meta[charset]"),f=i.createElement("style"),d=[];let y,h=!0;Object.assign(a,t),a.l=new URL(t.resourcesUrl||"./",i.baseURI).href,e.map((e=>{e[1].map((t=>{const s={t:t[0],$:t[1],U:t[2],F:t[3]};s.U=t[2],s.F=t[3],s.N=[],s.W={};const r=s.$,c=class extends HTMLElement{constructor(e){super(e),ie(e=this,s),1&s.t&&e.attachShadow({mode:"open"})}connectedCallback(){y&&(clearTimeout(y),y=null),h?d.push(this):a.jmp((()=>(e=>{if(0==(1&a.t)){const t=re(e),n=t.T,l=()=>{};if(1&t.t)$(e,t,n.F);else{t.t|=1,12&n.t&&(e=>{const t=e["s-cr"]=i.createComment("");t["s-cn"]=!0,e.insertBefore(t,e.firstChild)})(e);{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){B(t,t.C=n);break}}n.U&&Object.entries(n.U).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,o)=>{if(0==(32&t.t)){{if(t.t|=32,(o=$e(n)).then){const e=()=>{};o=await o,e()}o.isProxied||(n.W=o.watchers,te(o,n,2),o.isProxied=!0);const e=()=>{};t.t|=8;try{new o(t)}catch(e){fe(e)}t.t&=-9,t.t|=128,e()}if(o.style){let e=o.style;const t=p(n);if(!de.has(t)){const l=()=>{};((e,t,n)=>{let l=de.get(e);u&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,de.set(e,l)})(t,e,!!(1&n.t)),l()}}}const s=t.C,r=()=>G(t,!0);s&&s["s-rc"]?s["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){a.jmp((()=>(()=>{if(0==(1&a.t)){const e=re(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return re(this).q}};s.D=e[0],l.includes(r)||o.get(r)||(n.push(r),o.define(r,te(c,s,1)))}))})),f.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",f.setAttribute("data-styles",""),s.insertBefore(f,r?r.nextSibling:s.firstChild),h=!1,d.length?d.map((e=>e.connectedCallback())):a.jmp((()=>y=setTimeout(X,30)))},le=e=>{const t=new URL(e,a.l);return t.origin!==c.location.origin?t.href:t.pathname},oe=(e,t)=>t,se=new WeakMap,re=e=>se.get(e),ce=(e,t)=>se.set(t.i=e,t),ie=(e,t)=>{const n={t:0,O:e,T:t,A:new Map};return n.q=new Promise((e=>n.P=e)),e["s-p"]=[],e["s-rc"]=[],$(e,n,t.F),se.set(e,n)},ae=(e,t)=>t in e,fe=(e,t)=>(0,console.error)(e,t),ue=new Map,$e=e=>{const t=e.$.replace(/-/g,"_"),n=e.D,l=ue.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(ue.set(n,e),e[t])),fe)},de=new Map,ye=[],he=[],me=(e,t)=>n=>{e.push(n),r||(r=!0,t&&4&a.t?we(be):a.raf(be))},pe=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){fe(e)}e.length=0},be=()=>{pe(ye),pe(he),(r=ye.length>0)&&a.raf(be)},we=e=>f().then(e),ve=me(he,!0);export{oe as F,le as a,ne as b,_ as c,V as g,v as h,f as p,ce as r}