@everymatrix/player-elevate-card-jojogroup 1.80.4

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

@@ -0,0 +1,297 @@
+import { h, Fragment, getAssetPath } from "@stencil/core";
+import { PlayerAvatar, PlayerElevateCardRedeem, PlayerElevateLoyaltyLevel, PlayerLoyaltyProcess, PlayerNameDiv, PlayerPoints, } from "./player-elevate-card-jojogroup-items";
+import { TRANSLATIONS } from "../../utils/locale.utils";
+export class PlayerElevateCardJojogroup {
+    constructor() {
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.dateFormat = 'yyyy-MM-dd';
+        this.mbSource = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerLevelFlag = 0;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+    }
+    onSessionOrEndpointChange() {
+        this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+    }
+    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", { key: '8c86c146c8f68edbafcd7b24f611dc8078b987a3', class: `ElevateCardWrapper ${this.theme}` }, h("div", { key: '2273ad46cd7d12af9381b49abcef845e4fb2c1ea', class: "Card Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { key: '059a83126b0d72dcbb313cdd403af8f2017b0aa3', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl, mbSource: this.mbSource }), h("player-elevate-card-data", { key: '2ad65d182873df99f9a64d0c749cf0b620e0d502', params: this.paramProxy }), h("div", { key: 'd2e992c3b04e547743efd7a669d7ac8095e85a93', class: "OuterCover Inner", style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, this.playerElevateLevel && (h(Fragment, { key: '52d2392de4e1385a8b859e0707c93a4438aee7f8' }, h("div", { key: '2b30a05a04f62dc533efa3f499af6ad03a594fc1', class: 'Content Row' }, h("div", { key: 'f675cbcfd702d7661b90d243dc82d4ae44b6f1b2', class: "PlayerImg" }, h(PlayerAvatar, { key: 'e2cef080372b41b2fcc5031dcf71a7554c1aad20', playerAvatarUrl: this.playerAvatarUrl, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }), h(PlayerPoints, { key: 'a51f2fa52a39cbbab786e2fa349c2125e8991df0', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language })), this.pointExpireString && (h("div", { key: 'fc5a55e079e36c9397ee3d3e48eca22133e92006', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), h("div", { key: '8afa183b3cb73c7309021f47d35199760b3068c4', class: `LevelInfo Level${this.playerLevelFlag} ${this.playerElevateLevel.presentation.displayName}` }, h(PlayerNameDiv, { key: '4f027b896cbeff8ee27c2d56b79664dac9269529', playerName: this.playerName }), h(PlayerElevateLoyaltyLevel, { key: '61f4c0124fb91c5ab2183cb9c249d01ff5f144df', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), h(PlayerLoyaltyProcess, { key: '96ded134514a3f69f6192ab3e7645a7eef76da45' }), h(PlayerElevateCardRedeem, { key: '5c5df70825273a064533d660dfd35279c9832b42', onRedeemClick: this.onRedeemClick, language: this.language })))))))));
+    }
+    static get is() { return "player-elevate-card-jojogroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-elevate-card-jojogroup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-elevate-card-jojogroup.css"]
+        };
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The NWA endpoint"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The style that widget shows,available value: Dark, Light\nDefault: Dark"
+                },
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'Dark'"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The NWA session for the logged-in user"
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "playerAvatarUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget, player avatar url"
+                },
+                "attribute": "player-avatar-url",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Widget Language to show"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "playerName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Player name"
+                },
+                "attribute": "player-name",
+                "reflect": true
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "datePattern"
+                },
+                "attribute": "date-format",
+                "reflect": true,
+                "defaultValue": "'yyyy-MM-dd'"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via streamStyling"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline styles"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation via url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pointExpireString": {},
+            "playerLevelFlag": {},
+            "playerElevateLevel": {},
+            "elevateWalletTotal": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "session",
+                "methodName": "onSessionOrEndpointChange"
+            }, {
+                "propName": "endpoint",
+                "methodName": "onSessionOrEndpointChange"
+            }, {
+                "propName": "language",
+                "methodName": "onSessionOrEndpointChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "playerElevateLeveLoaded",
+                "method": "playerElevateLeveLoadedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/player-elevate-loyaltycard-jojogroup/player-elevate-loyaltycard-jojogroup.css

@@ -0,0 +1,98 @@
+:host {
+  display: block;
+}
+
+@media screen and (min-width: 501px) {
+  .LoyaltyCard .Inner .LevelInfo .ElevateLevel {
+    flex-wrap: nowrap;
+  }
+  .LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate {
+    padding-top: 6px;
+    margin-left: 0px;
+  }
+}
+@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 {
+  min-height: auto;
+}
+.LoyaltyCard .Inner .LevelProgress {
+  margin-left: 0px;
+}
+.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints {
+  text-align: left;
+  color: var(--emw--color-red-50, red);
+}
+.LoyaltyCard .Inner .PlayerAvatar {
+  padding: 0;
+  flex-basis: auto;
+  margin: 0;
+}
+.LoyaltyCard .Inner .PlayerContainer {
+  display: flex;
+}
+.LoyaltyCard .Inner .PlayerAvatar .Avatar {
+  display: none;
+}
+.LoyaltyCard .Inner .PlayerAvatar .Badge {
+  border-radius: 50%;
+  background-size: contain;
+  width: 40px;
+  height: 40px;
+}
+.LoyaltyCard .Inner .PlayerImg {
+  max-width: none;
+  width: auto;
+  margin: 0;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.LoyaltyCard .Inner .PlayerInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate {
+  position: relative;
+  padding-left: 0px;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime {
+  margin-left: 5px;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName {
+  padding-left: 0;
+  font-size: var(--emw--elevate-fontsize-2xlarge, 21px);
+  position: relative;
+  width: auto;
+  color: var(--emw--elevate-color-levelname, #FFBD2B);
+  font-weight: bold;
+}
+.LoyaltyCard .LevelRange {
+  justify-content: space-between;
+}
+.LoyaltyCard .PointsRange {
+  display: flex;
+  justify-content: flex-end;
+}
+.LoyaltyCard .PointsRange .PointsInfo {
+  width: auto;
+}
+.LoyaltyCard .NextLevelTip {
+  text-align: right;
+  font-size: 11px;
+  color: var(--emw--color-black, #000);
+  opacity: 0.8;
+  font-weight: bold;
+}