@everymatrix/player-elevate-level 1.32.4 → 1.33.0

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

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
+import { P as PlayerAvatar, a as PlayerPoints, b as PlayerNameDiv, c as PlayerElevateLoyaltyLevel, d as PlayerLoyaltyProcess, e as PlayerElevateCardRedeem } from './player-elevate-card-items.js';
+import { T as TRANSLATIONS, d as defineCustomElement$2 } from './player-elevate-card-data2.js';
+import { d as defineCustomElement$3 } from './general-styling-wrapper2.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}";
+
+const PlayerElevateCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The style that widget shows,available value: Dark, Light
+     * Default: Dark
+     */
+    this.theme = 'Dark';
+    /**
+     * Widget Language to show
+     */
+    this.language = 'en';
+    /**
+     * datePattern
+     */
+    this.dateFormat = 'yyyy-MM-dd';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    this.playerLevelFlag = 0;
+  }
+  playerElevateLeveLoadedHandler(event) {
+    if (!event.detail) {
+      return;
+    }
+    if (event.detail['elevateLevelWalletTotal']) {
+      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+    }
+    if (event.detail['elevateLevel']) {
+      this.playerElevateLevel = event.detail['elevateLevel'];
+    }
+    if (event.detail['pointExpireString']) {
+      this.pointExpireString = event.detail.xpExpireString;
+    }
+    if (event.detail.calculatedLevelFlag) {
+      this.playerLevelFlag = event.detail.calculatedLevelFlag;
+    }
+  }
+  onRedeemClick() {
+    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+  }
+  componentWillLoad() {
+    this.paramProxy = {
+      endpoint: this.endpoint,
+      session: this.session,
+      language: this.language,
+      calculateLevelFlag: true,
+    };
+  }
+  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: "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 style() { return playerElevateCardCss; }
+}, [1, "player-elevate-card", {
+    "endpoint": [513],
+    "theme": [513],
+    "session": [513],
+    "playerAvatarUrl": [513, "player-avatar-url"],
+    "language": [513],
+    "playerName": [513, "player-name"],
+    "dateFormat": [513, "date-format"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "translationUrl": [513, "translation-url"],
+    "pointExpireString": [32],
+    "playerLevelFlag": [32],
+    "playerElevateLevel": [32],
+    "elevateWalletTotal": [32]
+  }, [[0, "playerElevateLeveLoaded", "playerElevateLeveLoadedHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["player-elevate-card", "general-styling-wrapper", "player-elevate-card-data"];
+  components.forEach(tagName => { switch (tagName) {
+    case "player-elevate-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PlayerElevateCard$1);
+      }
+      break;
+    case "general-styling-wrapper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "player-elevate-card-data":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PlayerElevateCard = PlayerElevateCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayerElevateCard, defineCustomElement };

package/dist/components/player-elevate-level.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PlayerElevateLevel extends Components.PlayerElevateLevel, HTMLElement {}
+export const PlayerElevateLevel: {
+  prototype: PlayerElevateLevel;
+  new (): PlayerElevateLevel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,107 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './bonus-elevate-levels2.js';
+import { d as defineCustomElement$7 } from './elevate-level-list2.js';
+import { d as defineCustomElement$6 } from './elevate-level-presentation2.js';
+import { d as defineCustomElement$5 } from './elevate-levels-data2.js';
+import { d as defineCustomElement$4 } from './general-styling-wrapper2.js';
+import { d as defineCustomElement$3 } from './player-elevate-card-data2.js';
+import { d as defineCustomElement$2 } from './player-elevate-loyaltycard2.js';
+
+const playerElevateLevelCss = ":host{display:block}.PlayerElevateCard{height:160px;width:100%;overflow:hidden}.ElevateLevelsInfo{background-color:var(--emw--color-background, #e6e8ea)}";
+
+const PlayerElevateLevel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * datePattern
+     */
+    this.dateFormat = 'yyyy-MM-dd';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+  }
+  async setPlayerElevateLevelInfo(event) {
+    if (event.type == 'playerElevateLeveLoaded' && event.detail['elevateLevel']) {
+      this.userLevelId = event.detail['elevateLevel'].id;
+    }
+  }
+  render() {
+    return h(Host, null, h("div", { class: 'PlayerElevateCard' }, h("player-elevate-loyaltycard", { playerName: this.playerName, dateFormat: this.dateFormat, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, clientStyling: `${this.clientStyling} .Outer{height: 185px}`, endpoint: this.endpoint, language: this.language, session: this.session })), h("div", { class: 'ElevateLevelsInfo' }, h("bonus-elevate-levels", { selectedLevelId: this.userLevelId, clientStyling: this.clientStyling, translationUrl: this.translationUrl, language: this.language, endpoint: this.endpoint })));
+  }
+  static get style() { return playerElevateLevelCss; }
+}, [1, "player-elevate-level", {
+    "endpoint": [513],
+    "session": [513],
+    "playerAvatarUrl": [513, "player-avatar-url"],
+    "language": [513],
+    "playerName": [513, "player-name"],
+    "dateFormat": [513, "date-format"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "translationUrl": [513, "translation-url"],
+    "userLevelId": [32]
+  }, [[0, "playerElevateLeveLoaded", "setPlayerElevateLevelInfo"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["player-elevate-level", "bonus-elevate-levels", "elevate-level-list", "elevate-level-presentation", "elevate-levels-data", "general-styling-wrapper", "player-elevate-card-data", "player-elevate-loyaltycard"];
+  components.forEach(tagName => { switch (tagName) {
+    case "player-elevate-level":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PlayerElevateLevel$1);
+      }
+      break;
+    case "bonus-elevate-levels":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "elevate-level-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "elevate-level-presentation":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "elevate-levels-data":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "general-styling-wrapper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "player-elevate-card-data":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "player-elevate-loyaltycard":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PlayerElevateLevel = PlayerElevateLevel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayerElevateLevel, defineCustomElement };

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

@@ -0,0 +1,6 @@
+import { P as PlayerElevateLoyaltycard$1, d as defineCustomElement$1 } from './player-elevate-loyaltycard2.js';
+
+const PlayerElevateLoyaltycard = PlayerElevateLoyaltycard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayerElevateLoyaltycard, defineCustomElement };

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

@@ -0,0 +1,121 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
+import { P as PlayerAvatar, c as PlayerElevateLoyaltyLevel, a as PlayerPoints, d as PlayerLoyaltyProcess } from './player-elevate-card-items.js';
+import { b as translateWithParams, T as TRANSLATIONS, d as defineCustomElement$1 } from './player-elevate-card-data2.js';
+import { d as defineCustomElement$2 } from './general-styling-wrapper2.js';
+
+const playerElevateLoyaltycardCss = ":host{display:block}@media screen and (min-width: 501px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:nowrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:11px;margin-left:5px}}@media screen and (max-width: 500px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:wrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:0px;margin-left:0px}}.LoyaltyCard .Inner .LevelProgress{margin-left:0px}.LoyaltyCard .Inner .Row .PointsInfo{width:100%}.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints{text-align:left;color:var(--emfe-w-color-red-50, red)}.LoyaltyCard .Inner .PlayerAvatar .Avatar{display:none}.LoyaltyCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%}.LoyaltyCard .Inner .LevelInfo .ElevateLevel{display:flex;flex:1;align-items:center}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{position:relative;padding-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime{margin-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName{padding-left:0;font-size:var(--emfe-w-elevate-fontsize-2xlarge, 21px);position:relative;width:auto;color:var(--emfe-w-elevate-color-levelname, #FFBD2B);font-weight:bold}.LoyaltyCard .NextLevelTip{text-align:right;font-size:11px;color:var(--emfe-w-color-black, #000);opacity:0.8;font-weight:bold}";
+
+const PlayerElevateLoyaltycard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The style that widget shows,available value: Dark, Light
+     * Default: Dark
+     */
+    this.theme = 'Dark';
+    /**
+     * Widget Language to show
+     */
+    this.language = 'en';
+    /**
+     * datePattern
+     */
+    this.dateFormat = 'yyyy-MM-dd';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+  }
+  playerElevateLeveLoadedHandler(event) {
+    if (!event.detail) {
+      return;
+    }
+    if (event.detail['elevateLevelWalletTotal']) {
+      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+    }
+    if (event.detail['elevateLevel']) {
+      this.playerElevateLevel = event.detail['elevateLevel'];
+    }
+    if (event.detail['pointExpireString']) {
+      this.pointExpireString = event.detail.xpExpireString;
+    }
+  }
+  onRedeemClick() {
+    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+  }
+  componentWillLoad() {
+    this.paramsProxy = {
+      endpoint: this.endpoint,
+      session: this.session,
+      language: this.language,
+    };
+  }
+  getNextLevelTips() {
+    var _a;
+    //need xx to reach Diamond
+    let nextLevel = (_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel;
+    if (this.playerElevateLevel && nextLevel) {
+      const pointsToReach = (nextLevel.entryPoints - this.playerElevateLevel.loyaltyPoints).toFixed(2);
+      return translateWithParams('tipsForNextLevel', {
+        pointsToReach,
+        levelName: nextLevel.name,
+      });
+    }
+    return '';
+  }
+  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())))))))));
+  }
+  static get style() { return playerElevateLoyaltycardCss; }
+}, [1, "player-elevate-loyaltycard", {
+    "endpoint": [513],
+    "theme": [513],
+    "session": [513],
+    "playerAvatarUrl": [513, "player-avatar-url"],
+    "language": [513],
+    "playerName": [513, "player-name"],
+    "dateFormat": [513, "date-format"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "translationUrl": [513, "translation-url"],
+    "pointExpireString": [32],
+    "playerElevateLevel": [32],
+    "elevateWalletTotal": [32]
+  }, [[0, "playerElevateLeveLoaded", "playerElevateLeveLoadedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["player-elevate-loyaltycard", "general-styling-wrapper", "player-elevate-card-data"];
+  components.forEach(tagName => { switch (tagName) {
+    case "player-elevate-loyaltycard":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PlayerElevateLoyaltycard);
+      }
+      break;
+    case "general-styling-wrapper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "player-elevate-card-data":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PlayerElevateLoyaltycard as P, defineCustomElement as d };

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

@@ -0,0 +1,127 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
+import { T as TRANSLATIONS, a as translate, d as defineCustomElement$2 } from './player-elevate-card-data2.js';
+import { P as PlayerAvatar, a as PlayerPoints } from './player-elevate-card-items.js';
+import { d as defineCustomElement$3 } from './general-styling-wrapper2.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}";
+
+const PlayerElevatePointcard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The style that widget shows,available value: Dark, Light
+     * Default: Dark
+     */
+    this.theme = 'Dark';
+    /**
+     * Widget Language to show
+     */
+    this.language = 'en';
+    /**
+     * Check if the card used in points details widget, default: 'earningRule'
+     * value: 'details'/'earningRule'
+     * It effected the button in card
+     * 'earningRule':  button text, 'earning rules', post 'BEEPointRulesClicked' when clicked
+     * 'details': button text, 'details', post 'BEEDetailsClicked' when clicked
+     */
+    this.buttonType = 'earningRule';
+    /**
+     * datePattern
+     */
+    this.dateFormat = 'yyyy-MM-dd';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    this.isPointDetailCard = this.buttonType === 'earningRule';
+  }
+  playerElevateLeveLoadedHandler(event) {
+    if (!event.detail) {
+      return;
+    }
+    if (event.detail['elevateLevelWalletTotal']) {
+      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+      this.elevateSPTotal = event.detail['loyaltyWalletTotal'];
+    }
+    if (event.detail['elevateLevel']) {
+      this.playerElevateLevel = event.detail['elevateLevel'];
+    }
+    if (event.detail['pointExpireString']) {
+      this.pointExpireString = event.detail.pointExpireString;
+    }
+  }
+  onDetailsClick() {
+    window.postMessage({ type: this.isPointDetailCard ? 'BEEPointRulesClicked' : 'BEEDetailsClicked',
+      path: this.isPointDetailCard ? 'player-elevate-level' : 'player-elevate-point-details' }, window.location.href);
+  }
+  componentWillLoad() {
+    this.paramProxy = {
+      endpoint: this.endpoint,
+      session: this.session,
+      language: this.language,
+    };
+  }
+  render() {
+    const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
+    const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
+    return (h("div", { class: `ElevateCardWrapper ${this.theme}` }, h("div", { class: "PointsCard 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("div", { class: "PointsTxt Label" }, this.cardTitle ? this.cardTitle : translate('spendablePoints')), h("div", { class: 'PointsTxt SPPoints' }, h(PlayerPoints, { spendablePoints: this.playerElevateLevel.spendablePoints, language: this.language }), h("a", { class: "TC", onClick: () => {
+        this.onDetailsClick();
+      } }, translate('termAndConditions', this.language))), this.pointExpireString && (h("div", { class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
+  }
+  static get style() { return playerElevatePointcardCss; }
+}, [1, "player-elevate-pointcard", {
+    "endpoint": [513],
+    "theme": [513],
+    "session": [513],
+    "playerAvatarUrl": [513, "player-avatar-url"],
+    "language": [513],
+    "playerName": [513, "player-name"],
+    "cardTitle": [513, "card-title"],
+    "buttonType": [513, "button-type"],
+    "dateFormat": [513, "date-format"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "translationUrl": [513, "translation-url"],
+    "pointExpireString": [32],
+    "playerElevateLevel": [32],
+    "elevateWalletTotal": [32],
+    "elevateSPTotal": [32]
+  }, [[0, "playerElevateLeveLoaded", "playerElevateLeveLoadedHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["player-elevate-pointcard", "general-styling-wrapper", "player-elevate-card-data"];
+  components.forEach(tagName => { switch (tagName) {
+    case "player-elevate-pointcard":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PlayerElevatePointcard$1);
+      }
+      break;
+    case "general-styling-wrapper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "player-elevate-card-data":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PlayerElevatePointcard = PlayerElevatePointcard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayerElevatePointcard, defineCustomElement };