@everymatrix/player-elevate-level 1.44.0 → 1.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/app-globals-3a1e7e63.js +5 -0
- package/dist/cjs/bonus-elevate-levels_8.cjs.entry.js +644 -674
- package/dist/cjs/index-91eb0bf0.js +1682 -0
- package/dist/cjs/loader.cjs.js +7 -13
- package/dist/cjs/{player-elevate-card-items-9e7a9a23.js → player-elevate-card-items-ae20c19f.js} +171 -285
- package/dist/cjs/player-elevate-card.cjs.entry.js +59 -70
- package/dist/cjs/player-elevate-level.cjs.js +17 -11
- package/dist/cjs/player-elevate-pointcard.cjs.entry.js +61 -77
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/components/player-elevate-level/index.js +1 -0
- package/dist/collection/components/player-elevate-level/player-elevate-level.js +208 -209
- package/dist/esm/app-globals-0f993ce5.js +3 -0
- package/dist/esm/bonus-elevate-levels_8.entry.js +644 -674
- package/dist/esm/index-32ed7fbd.js +1651 -0
- package/dist/esm/loader.js +7 -13
- package/dist/esm/{player-elevate-card-items-08ee8fab.js → player-elevate-card-items-2eccd763.js} +172 -285
- package/dist/esm/player-elevate-card.entry.js +59 -70
- package/dist/esm/player-elevate-level.js +14 -11
- package/dist/esm/player-elevate-pointcard.entry.js +61 -77
- package/dist/player-elevate-level/p-5f93600c.entry.js +1 -0
- package/dist/player-elevate-level/p-6d39391e.js +2 -0
- package/dist/player-elevate-level/p-73e5a291.entry.js +1 -0
- package/dist/player-elevate-level/p-a622755e.js +1 -0
- package/dist/player-elevate-level/p-acd808d7.entry.js +1 -0
- package/dist/player-elevate-level/p-e1255160.js +1 -0
- package/dist/player-elevate-level/player-elevate-level.esm.js +1 -1
- package/dist/stencil.config.dev.js +17 -0
- package/dist/stencil.config.js +14 -22
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/player-elevate-level/.stencil/packages/stencil/player-elevate-level/stencil.config.d.ts +2 -0
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/player-elevate-level/.stencil/packages/stencil/player-elevate-level/stencil.config.dev.d.ts +2 -0
- package/dist/types/components/player-elevate-level/index.d.ts +1 -0
- package/dist/types/components/player-elevate-level/player-elevate-level.d.ts +41 -41
- package/dist/types/stencil-public-runtime.d.ts +142 -33
- package/loader/cdn.js +1 -3
- package/loader/index.cjs.js +1 -3
- package/loader/index.d.ts +13 -1
- package/loader/index.es2017.js +1 -3
- package/loader/index.js +1 -3
- package/loader/package.json +1 -0
- package/package.json +12 -6
- package/dist/cjs/index-c706b0d2.js +0 -1726
- package/dist/components/bonus-elevate-levels.js +0 -6
- package/dist/components/bonus-elevate-levels2.js +0 -138
- package/dist/components/elevate-level-list.js +0 -6
- package/dist/components/elevate-level-list2.js +0 -198
- package/dist/components/elevate-level-presentation.js +0 -6
- package/dist/components/elevate-level-presentation2.js +0 -31
- package/dist/components/elevate-levels-data.js +0 -6
- package/dist/components/elevate-levels-data2.js +0 -102
- package/dist/components/general-styling-wrapper.js +0 -6
- package/dist/components/general-styling-wrapper2.js +0 -103
- package/dist/components/index.d.ts +0 -26
- package/dist/components/index.js +0 -1
- package/dist/components/player-elevate-card-data.js +0 -6
- package/dist/components/player-elevate-card-data2.js +0 -635
- package/dist/components/player-elevate-card-items.js +0 -2250
- package/dist/components/player-elevate-card.js +0 -126
- package/dist/components/player-elevate-level.d.ts +0 -11
- package/dist/components/player-elevate-level.js +0 -107
- package/dist/components/player-elevate-loyaltycard.js +0 -6
- package/dist/components/player-elevate-loyaltycard2.js +0 -129
- package/dist/components/player-elevate-pointcard.js +0 -135
- package/dist/esm/index-104132db.js +0 -1696
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/player-elevate-level/p-04a5ef33.entry.js +0 -1
- package/dist/player-elevate-level/p-46fd6f51.js +0 -1
- package/dist/player-elevate-level/p-6766466f.js +0 -1
- package/dist/player-elevate-level/p-d5d234f8.entry.js +0 -1
- package/dist/player-elevate-level/p-d8ae2452.entry.js +0 -1
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/player-elevate-level/.stencil/packages/player-elevate-level/stencil.config.d.ts +0 -2
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
|
|
2
|
-
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';
|
|
3
|
-
import { T as TRANSLATIONS, d as defineCustomElement$2 } from './player-elevate-card-data2.js';
|
|
4
|
-
import { d as defineCustomElement$3 } from './general-styling-wrapper2.js';
|
|
5
|
-
|
|
6
|
-
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}";
|
|
7
|
-
|
|
8
|
-
const PlayerElevateCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super();
|
|
11
|
-
this.__registerHost();
|
|
12
|
-
this.__attachShadow();
|
|
13
|
-
/**
|
|
14
|
-
* The style that widget shows,available value: Dark, Light
|
|
15
|
-
* Default: Dark
|
|
16
|
-
*/
|
|
17
|
-
this.theme = 'Dark';
|
|
18
|
-
/**
|
|
19
|
-
* Widget Language to show
|
|
20
|
-
*/
|
|
21
|
-
this.language = 'en';
|
|
22
|
-
/**
|
|
23
|
-
* datePattern
|
|
24
|
-
*/
|
|
25
|
-
this.dateFormat = 'yyyy-MM-dd';
|
|
26
|
-
/**
|
|
27
|
-
* Client custom styling via inline styles
|
|
28
|
-
*/
|
|
29
|
-
this.clientStyling = '';
|
|
30
|
-
/**
|
|
31
|
-
* Client custom styling via url
|
|
32
|
-
*/
|
|
33
|
-
this.clientStylingUrl = '';
|
|
34
|
-
/**
|
|
35
|
-
* Translation via url
|
|
36
|
-
*/
|
|
37
|
-
this.translationUrl = '';
|
|
38
|
-
this.playerLevelFlag = 0;
|
|
39
|
-
}
|
|
40
|
-
onSessionOrEndpointChange() {
|
|
41
|
-
this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
|
|
42
|
-
}
|
|
43
|
-
playerElevateLeveLoadedHandler(event) {
|
|
44
|
-
if (!event.detail) {
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
if (event.detail['elevateLevelWalletTotal']) {
|
|
48
|
-
this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
|
|
49
|
-
}
|
|
50
|
-
if (event.detail['elevateLevel']) {
|
|
51
|
-
this.playerElevateLevel = event.detail['elevateLevel'];
|
|
52
|
-
}
|
|
53
|
-
if (event.detail['pointExpireString']) {
|
|
54
|
-
this.pointExpireString = event.detail.xpExpireString;
|
|
55
|
-
}
|
|
56
|
-
if (event.detail.calculatedLevelFlag) {
|
|
57
|
-
this.playerLevelFlag = event.detail.calculatedLevelFlag;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
onRedeemClick() {
|
|
61
|
-
window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
|
|
62
|
-
}
|
|
63
|
-
componentWillLoad() {
|
|
64
|
-
this.paramProxy = {
|
|
65
|
-
endpoint: this.endpoint,
|
|
66
|
-
session: this.session,
|
|
67
|
-
language: this.language,
|
|
68
|
-
calculateLevelFlag: true,
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
render() {
|
|
72
|
-
const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
|
|
73
|
-
const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
|
|
74
|
-
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 })))))))));
|
|
75
|
-
}
|
|
76
|
-
static get assetsDirs() { return ["../static"]; }
|
|
77
|
-
static get watchers() { return {
|
|
78
|
-
"session": ["onSessionOrEndpointChange"],
|
|
79
|
-
"endpoint": ["onSessionOrEndpointChange"],
|
|
80
|
-
"language": ["onSessionOrEndpointChange"]
|
|
81
|
-
}; }
|
|
82
|
-
static get style() { return playerElevateCardCss; }
|
|
83
|
-
}, [1, "player-elevate-card", {
|
|
84
|
-
"endpoint": [513],
|
|
85
|
-
"theme": [513],
|
|
86
|
-
"session": [513],
|
|
87
|
-
"playerAvatarUrl": [513, "player-avatar-url"],
|
|
88
|
-
"language": [513],
|
|
89
|
-
"playerName": [513, "player-name"],
|
|
90
|
-
"dateFormat": [513, "date-format"],
|
|
91
|
-
"clientStyling": [513, "client-styling"],
|
|
92
|
-
"clientStylingUrl": [513, "client-styling-url"],
|
|
93
|
-
"translationUrl": [513, "translation-url"],
|
|
94
|
-
"pointExpireString": [32],
|
|
95
|
-
"playerLevelFlag": [32],
|
|
96
|
-
"playerElevateLevel": [32],
|
|
97
|
-
"elevateWalletTotal": [32]
|
|
98
|
-
}, [[0, "playerElevateLeveLoaded", "playerElevateLeveLoadedHandler"]]]);
|
|
99
|
-
function defineCustomElement$1() {
|
|
100
|
-
if (typeof customElements === "undefined") {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
const components = ["player-elevate-card", "general-styling-wrapper", "player-elevate-card-data"];
|
|
104
|
-
components.forEach(tagName => { switch (tagName) {
|
|
105
|
-
case "player-elevate-card":
|
|
106
|
-
if (!customElements.get(tagName)) {
|
|
107
|
-
customElements.define(tagName, PlayerElevateCard$1);
|
|
108
|
-
}
|
|
109
|
-
break;
|
|
110
|
-
case "general-styling-wrapper":
|
|
111
|
-
if (!customElements.get(tagName)) {
|
|
112
|
-
defineCustomElement$3();
|
|
113
|
-
}
|
|
114
|
-
break;
|
|
115
|
-
case "player-elevate-card-data":
|
|
116
|
-
if (!customElements.get(tagName)) {
|
|
117
|
-
defineCustomElement$2();
|
|
118
|
-
}
|
|
119
|
-
break;
|
|
120
|
-
} });
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
const PlayerElevateCard = PlayerElevateCard$1;
|
|
124
|
-
const defineCustomElement = defineCustomElement$1;
|
|
125
|
-
|
|
126
|
-
export { PlayerElevateCard, defineCustomElement };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface PlayerElevateLevel extends Components.PlayerElevateLevel, HTMLElement {}
|
|
4
|
-
export const PlayerElevateLevel: {
|
|
5
|
-
prototype: PlayerElevateLevel;
|
|
6
|
-
new (): PlayerElevateLevel;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$8 } from './bonus-elevate-levels2.js';
|
|
3
|
-
import { d as defineCustomElement$7 } from './elevate-level-list2.js';
|
|
4
|
-
import { d as defineCustomElement$6 } from './elevate-level-presentation2.js';
|
|
5
|
-
import { d as defineCustomElement$5 } from './elevate-levels-data2.js';
|
|
6
|
-
import { d as defineCustomElement$4 } from './general-styling-wrapper2.js';
|
|
7
|
-
import { d as defineCustomElement$3 } from './player-elevate-card-data2.js';
|
|
8
|
-
import { d as defineCustomElement$2 } from './player-elevate-loyaltycard2.js';
|
|
9
|
-
|
|
10
|
-
const playerElevateLevelCss = ":host{display:block}.PlayerElevateCard{height:160px;width:100%;overflow:hidden}.ElevateLevelsInfo{background-color:var(--emw--color-background, #e6e8ea)}";
|
|
11
|
-
|
|
12
|
-
const PlayerElevateLevel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
13
|
-
constructor() {
|
|
14
|
-
super();
|
|
15
|
-
this.__registerHost();
|
|
16
|
-
this.__attachShadow();
|
|
17
|
-
/**
|
|
18
|
-
* datePattern
|
|
19
|
-
*/
|
|
20
|
-
this.dateFormat = 'yyyy-MM-dd';
|
|
21
|
-
/**
|
|
22
|
-
* Client custom styling via inline styles
|
|
23
|
-
*/
|
|
24
|
-
this.clientStyling = '';
|
|
25
|
-
/**
|
|
26
|
-
* Client custom styling via url
|
|
27
|
-
*/
|
|
28
|
-
this.clientStylingUrl = '';
|
|
29
|
-
/**
|
|
30
|
-
* Translation via url
|
|
31
|
-
*/
|
|
32
|
-
this.translationUrl = '';
|
|
33
|
-
}
|
|
34
|
-
async setPlayerElevateLevelInfo(event) {
|
|
35
|
-
if (event.type == 'playerElevateLeveLoaded' && event.detail['elevateLevel']) {
|
|
36
|
-
this.userLevelId = event.detail['elevateLevel'].id;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
render() {
|
|
40
|
-
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, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, endpoint: this.endpoint })), h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl }));
|
|
41
|
-
}
|
|
42
|
-
static get style() { return playerElevateLevelCss; }
|
|
43
|
-
}, [1, "player-elevate-level", {
|
|
44
|
-
"endpoint": [513],
|
|
45
|
-
"session": [513],
|
|
46
|
-
"playerAvatarUrl": [513, "player-avatar-url"],
|
|
47
|
-
"language": [513],
|
|
48
|
-
"playerName": [513, "player-name"],
|
|
49
|
-
"dateFormat": [513, "date-format"],
|
|
50
|
-
"clientStyling": [513, "client-styling"],
|
|
51
|
-
"clientStylingUrl": [513, "client-styling-url"],
|
|
52
|
-
"translationUrl": [513, "translation-url"],
|
|
53
|
-
"userLevelId": [32]
|
|
54
|
-
}, [[0, "playerElevateLeveLoaded", "setPlayerElevateLevelInfo"]]]);
|
|
55
|
-
function defineCustomElement$1() {
|
|
56
|
-
if (typeof customElements === "undefined") {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
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"];
|
|
60
|
-
components.forEach(tagName => { switch (tagName) {
|
|
61
|
-
case "player-elevate-level":
|
|
62
|
-
if (!customElements.get(tagName)) {
|
|
63
|
-
customElements.define(tagName, PlayerElevateLevel$1);
|
|
64
|
-
}
|
|
65
|
-
break;
|
|
66
|
-
case "bonus-elevate-levels":
|
|
67
|
-
if (!customElements.get(tagName)) {
|
|
68
|
-
defineCustomElement$8();
|
|
69
|
-
}
|
|
70
|
-
break;
|
|
71
|
-
case "elevate-level-list":
|
|
72
|
-
if (!customElements.get(tagName)) {
|
|
73
|
-
defineCustomElement$7();
|
|
74
|
-
}
|
|
75
|
-
break;
|
|
76
|
-
case "elevate-level-presentation":
|
|
77
|
-
if (!customElements.get(tagName)) {
|
|
78
|
-
defineCustomElement$6();
|
|
79
|
-
}
|
|
80
|
-
break;
|
|
81
|
-
case "elevate-levels-data":
|
|
82
|
-
if (!customElements.get(tagName)) {
|
|
83
|
-
defineCustomElement$5();
|
|
84
|
-
}
|
|
85
|
-
break;
|
|
86
|
-
case "general-styling-wrapper":
|
|
87
|
-
if (!customElements.get(tagName)) {
|
|
88
|
-
defineCustomElement$4();
|
|
89
|
-
}
|
|
90
|
-
break;
|
|
91
|
-
case "player-elevate-card-data":
|
|
92
|
-
if (!customElements.get(tagName)) {
|
|
93
|
-
defineCustomElement$3();
|
|
94
|
-
}
|
|
95
|
-
break;
|
|
96
|
-
case "player-elevate-loyaltycard":
|
|
97
|
-
if (!customElements.get(tagName)) {
|
|
98
|
-
defineCustomElement$2();
|
|
99
|
-
}
|
|
100
|
-
break;
|
|
101
|
-
} });
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
const PlayerElevateLevel = PlayerElevateLevel$1;
|
|
105
|
-
const defineCustomElement = defineCustomElement$1;
|
|
106
|
-
|
|
107
|
-
export { PlayerElevateLevel, defineCustomElement };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { P as PlayerElevateLoyaltycard$1, d as defineCustomElement$1 } from './player-elevate-loyaltycard2.js';
|
|
2
|
-
|
|
3
|
-
const PlayerElevateLoyaltycard = PlayerElevateLoyaltycard$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { PlayerElevateLoyaltycard, defineCustomElement };
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
|
|
2
|
-
import { P as PlayerAvatar, a as PlayerPoints, d as PlayerLoyaltyProcess, f as format } from './player-elevate-card-items.js';
|
|
3
|
-
import { b as translateWithParams, T as TRANSLATIONS, a as translate, d as defineCustomElement$1 } from './player-elevate-card-data2.js';
|
|
4
|
-
import { d as defineCustomElement$2 } from './general-styling-wrapper2.js';
|
|
5
|
-
|
|
6
|
-
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 .Row{padding-top:3px;padding-bottom:5px}.LoyaltyCard .ExpireTime{margin-left:5px}.LoyaltyCard .NextLevelTip{text-align:right;font-size:11px;color:var(--emfe-w-color-black, #000);opacity:0.8;font-weight:bold}";
|
|
7
|
-
|
|
8
|
-
const PlayerElevateLoyaltycard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super();
|
|
11
|
-
this.__registerHost();
|
|
12
|
-
this.__attachShadow();
|
|
13
|
-
/**
|
|
14
|
-
* The style that widget shows,available value: Dark, Light
|
|
15
|
-
* Default: Dark
|
|
16
|
-
*/
|
|
17
|
-
this.theme = 'Dark';
|
|
18
|
-
/**
|
|
19
|
-
* Widget Language to show
|
|
20
|
-
*/
|
|
21
|
-
this.language = 'en';
|
|
22
|
-
/**
|
|
23
|
-
* datePattern
|
|
24
|
-
*/
|
|
25
|
-
this.dateFormat = 'yyyy-MM-dd';
|
|
26
|
-
/**
|
|
27
|
-
* Client custom styling via inline styles
|
|
28
|
-
*/
|
|
29
|
-
this.clientStyling = '';
|
|
30
|
-
/**
|
|
31
|
-
* Client custom styling via url
|
|
32
|
-
*/
|
|
33
|
-
this.clientStylingUrl = '';
|
|
34
|
-
/**
|
|
35
|
-
* Translation via url
|
|
36
|
-
*/
|
|
37
|
-
this.translationUrl = '';
|
|
38
|
-
}
|
|
39
|
-
onSessionOrEndpointChange() {
|
|
40
|
-
this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
|
|
41
|
-
}
|
|
42
|
-
playerElevateLeveLoadedHandler(event) {
|
|
43
|
-
if (!event.detail) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
if (event.detail['elevateLevelWalletTotal']) {
|
|
47
|
-
this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
|
|
48
|
-
}
|
|
49
|
-
if (event.detail['elevateLevel']) {
|
|
50
|
-
this.playerElevateLevel = event.detail['elevateLevel'];
|
|
51
|
-
}
|
|
52
|
-
if (event.detail['pointExpireString']) {
|
|
53
|
-
this.pointExpireString = event.detail.xpExpireString;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
onRedeemClick() {
|
|
57
|
-
window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
|
|
58
|
-
}
|
|
59
|
-
componentWillLoad() {
|
|
60
|
-
this.paramProxy = {
|
|
61
|
-
endpoint: this.endpoint,
|
|
62
|
-
session: this.session,
|
|
63
|
-
language: this.language,
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
getNextLevelTips() {
|
|
67
|
-
var _a;
|
|
68
|
-
//need xx to reach Diamond
|
|
69
|
-
let nextLevel = (_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel;
|
|
70
|
-
if (this.playerElevateLevel && nextLevel) {
|
|
71
|
-
const pointsToReach = (nextLevel.entryPoints - this.playerElevateLevel.loyaltyPoints).toFixed(2);
|
|
72
|
-
return translateWithParams('tipsForNextLevel', {
|
|
73
|
-
pointsToReach,
|
|
74
|
-
levelName: nextLevel.name,
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
return '';
|
|
78
|
-
}
|
|
79
|
-
render() {
|
|
80
|
-
const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
|
|
81
|
-
const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
|
|
82
|
-
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("div", { class: 'CardCell ElevateLevel' }, h("span", { class: "LevelName", title: this.playerElevateLevel.name }, this.playerElevateLevel.name)), h(PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), h(PlayerLoyaltyProcess, null), h("div", { class: "Row NextLevelTip" }, this.getNextLevelTips()), this.playerElevateLevel.expireTime && (h("div", { class: "Row CardCell ExpirationDate Txt" }, translate('expireOn', this.language), h("span", { class: "ExpireTime" }, format(new Date(this.playerElevateLevel.expireTime), this.dateFormat || 'yyyy-MM-dd'))))))))))));
|
|
83
|
-
}
|
|
84
|
-
static get watchers() { return {
|
|
85
|
-
"session": ["onSessionOrEndpointChange"],
|
|
86
|
-
"endpoint": ["onSessionOrEndpointChange"],
|
|
87
|
-
"language": ["onSessionOrEndpointChange"]
|
|
88
|
-
}; }
|
|
89
|
-
static get style() { return playerElevateLoyaltycardCss; }
|
|
90
|
-
}, [1, "player-elevate-loyaltycard", {
|
|
91
|
-
"endpoint": [513],
|
|
92
|
-
"theme": [513],
|
|
93
|
-
"session": [513],
|
|
94
|
-
"playerAvatarUrl": [513, "player-avatar-url"],
|
|
95
|
-
"language": [513],
|
|
96
|
-
"playerName": [513, "player-name"],
|
|
97
|
-
"dateFormat": [513, "date-format"],
|
|
98
|
-
"clientStyling": [513, "client-styling"],
|
|
99
|
-
"clientStylingUrl": [513, "client-styling-url"],
|
|
100
|
-
"translationUrl": [513, "translation-url"],
|
|
101
|
-
"pointExpireString": [32],
|
|
102
|
-
"playerElevateLevel": [32],
|
|
103
|
-
"elevateWalletTotal": [32]
|
|
104
|
-
}, [[0, "playerElevateLeveLoaded", "playerElevateLeveLoadedHandler"]]]);
|
|
105
|
-
function defineCustomElement() {
|
|
106
|
-
if (typeof customElements === "undefined") {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
const components = ["player-elevate-loyaltycard", "general-styling-wrapper", "player-elevate-card-data"];
|
|
110
|
-
components.forEach(tagName => { switch (tagName) {
|
|
111
|
-
case "player-elevate-loyaltycard":
|
|
112
|
-
if (!customElements.get(tagName)) {
|
|
113
|
-
customElements.define(tagName, PlayerElevateLoyaltycard);
|
|
114
|
-
}
|
|
115
|
-
break;
|
|
116
|
-
case "general-styling-wrapper":
|
|
117
|
-
if (!customElements.get(tagName)) {
|
|
118
|
-
defineCustomElement$2();
|
|
119
|
-
}
|
|
120
|
-
break;
|
|
121
|
-
case "player-elevate-card-data":
|
|
122
|
-
if (!customElements.get(tagName)) {
|
|
123
|
-
defineCustomElement$1();
|
|
124
|
-
}
|
|
125
|
-
break;
|
|
126
|
-
} });
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
export { PlayerElevateLoyaltycard as P, defineCustomElement as d };
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
|
|
2
|
-
import { T as TRANSLATIONS, a as translate, d as defineCustomElement$2 } from './player-elevate-card-data2.js';
|
|
3
|
-
import { P as PlayerAvatar, a as PlayerPoints } from './player-elevate-card-items.js';
|
|
4
|
-
import { d as defineCustomElement$3 } from './general-styling-wrapper2.js';
|
|
5
|
-
|
|
6
|
-
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}";
|
|
7
|
-
|
|
8
|
-
const PlayerElevatePointcard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super();
|
|
11
|
-
this.__registerHost();
|
|
12
|
-
this.__attachShadow();
|
|
13
|
-
/**
|
|
14
|
-
* The style that widget shows,available value: Dark, Light
|
|
15
|
-
* Default: Dark
|
|
16
|
-
*/
|
|
17
|
-
this.theme = 'Dark';
|
|
18
|
-
/**
|
|
19
|
-
* Widget Language to show
|
|
20
|
-
*/
|
|
21
|
-
this.language = 'en';
|
|
22
|
-
/**
|
|
23
|
-
* Check if the card used in points details widget, default: 'earningRule'
|
|
24
|
-
* value: 'details'/'earningRule'
|
|
25
|
-
* It effected the button in card
|
|
26
|
-
* 'earningRule': button text, 'earning rules', post 'BEEPointRulesClicked' when clicked
|
|
27
|
-
* 'details': button text, 'details', post 'BEEDetailsClicked' when clicked
|
|
28
|
-
*/
|
|
29
|
-
this.buttonType = 'earningRule';
|
|
30
|
-
/**
|
|
31
|
-
* datePattern
|
|
32
|
-
*/
|
|
33
|
-
this.dateFormat = 'yyyy-MM-dd';
|
|
34
|
-
/**
|
|
35
|
-
* Client custom styling via inline styles
|
|
36
|
-
*/
|
|
37
|
-
this.clientStyling = '';
|
|
38
|
-
/**
|
|
39
|
-
* Client custom styling via url
|
|
40
|
-
*/
|
|
41
|
-
this.clientStylingUrl = '';
|
|
42
|
-
/**
|
|
43
|
-
* Translation via url
|
|
44
|
-
*/
|
|
45
|
-
this.translationUrl = '';
|
|
46
|
-
this.isPointDetailCard = this.buttonType === 'earningRule';
|
|
47
|
-
}
|
|
48
|
-
onSessionOrEndpointChange() {
|
|
49
|
-
this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
|
|
50
|
-
}
|
|
51
|
-
playerElevateLeveLoadedHandler(event) {
|
|
52
|
-
if (!event.detail) {
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
if (event.detail['elevateLevelWalletTotal']) {
|
|
56
|
-
this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
|
|
57
|
-
this.elevateSPTotal = event.detail['loyaltyWalletTotal'];
|
|
58
|
-
}
|
|
59
|
-
if (event.detail['elevateLevel']) {
|
|
60
|
-
this.playerElevateLevel = event.detail['elevateLevel'];
|
|
61
|
-
}
|
|
62
|
-
if (event.detail['pointExpireString']) {
|
|
63
|
-
this.pointExpireString = event.detail.pointExpireString;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
onDetailsClick() {
|
|
67
|
-
window.postMessage({ type: this.isPointDetailCard ? 'BEEPointRulesClicked' : 'BEEDetailsClicked',
|
|
68
|
-
path: this.isPointDetailCard ? 'player-elevate-level' : 'player-elevate-point-details' }, window.location.href);
|
|
69
|
-
}
|
|
70
|
-
componentWillLoad() {
|
|
71
|
-
this.paramProxy = {
|
|
72
|
-
endpoint: this.endpoint,
|
|
73
|
-
session: this.session,
|
|
74
|
-
language: this.language,
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
render() {
|
|
78
|
-
const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
|
|
79
|
-
const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
|
|
80
|
-
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: () => {
|
|
81
|
-
this.onDetailsClick();
|
|
82
|
-
} }, translate('termAndConditions', this.language))), this.pointExpireString && (h("div", { class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
|
|
83
|
-
}
|
|
84
|
-
static get watchers() { return {
|
|
85
|
-
"session": ["onSessionOrEndpointChange"],
|
|
86
|
-
"endpoint": ["onSessionOrEndpointChange"],
|
|
87
|
-
"language": ["onSessionOrEndpointChange"]
|
|
88
|
-
}; }
|
|
89
|
-
static get style() { return playerElevatePointcardCss; }
|
|
90
|
-
}, [1, "player-elevate-pointcard", {
|
|
91
|
-
"endpoint": [513],
|
|
92
|
-
"theme": [513],
|
|
93
|
-
"session": [513],
|
|
94
|
-
"playerAvatarUrl": [513, "player-avatar-url"],
|
|
95
|
-
"language": [513],
|
|
96
|
-
"playerName": [513, "player-name"],
|
|
97
|
-
"cardTitle": [513, "card-title"],
|
|
98
|
-
"buttonType": [513, "button-type"],
|
|
99
|
-
"dateFormat": [513, "date-format"],
|
|
100
|
-
"clientStyling": [513, "client-styling"],
|
|
101
|
-
"clientStylingUrl": [513, "client-styling-url"],
|
|
102
|
-
"translationUrl": [513, "translation-url"],
|
|
103
|
-
"pointExpireString": [32],
|
|
104
|
-
"playerElevateLevel": [32],
|
|
105
|
-
"elevateWalletTotal": [32],
|
|
106
|
-
"elevateSPTotal": [32]
|
|
107
|
-
}, [[0, "playerElevateLeveLoaded", "playerElevateLeveLoadedHandler"]]]);
|
|
108
|
-
function defineCustomElement$1() {
|
|
109
|
-
if (typeof customElements === "undefined") {
|
|
110
|
-
return;
|
|
111
|
-
}
|
|
112
|
-
const components = ["player-elevate-pointcard", "general-styling-wrapper", "player-elevate-card-data"];
|
|
113
|
-
components.forEach(tagName => { switch (tagName) {
|
|
114
|
-
case "player-elevate-pointcard":
|
|
115
|
-
if (!customElements.get(tagName)) {
|
|
116
|
-
customElements.define(tagName, PlayerElevatePointcard$1);
|
|
117
|
-
}
|
|
118
|
-
break;
|
|
119
|
-
case "general-styling-wrapper":
|
|
120
|
-
if (!customElements.get(tagName)) {
|
|
121
|
-
defineCustomElement$3();
|
|
122
|
-
}
|
|
123
|
-
break;
|
|
124
|
-
case "player-elevate-card-data":
|
|
125
|
-
if (!customElements.get(tagName)) {
|
|
126
|
-
defineCustomElement$2();
|
|
127
|
-
}
|
|
128
|
-
break;
|
|
129
|
-
} });
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
const PlayerElevatePointcard = PlayerElevatePointcard$1;
|
|
133
|
-
const defineCustomElement = defineCustomElement$1;
|
|
134
|
-
|
|
135
|
-
export { PlayerElevatePointcard, defineCustomElement };
|