@everymatrix/gamification-dropdown 1.40.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.
Files changed (80) hide show
  1. package/dist/cjs/gamification-dropdown.cjs.js +19 -0
  2. package/dist/cjs/gamification-dropdown_4.cjs.entry.js +751 -0
  3. package/dist/cjs/index-afa95f63.js +1704 -0
  4. package/dist/cjs/index.cjs.js +2 -0
  5. package/dist/cjs/loader.cjs.js +21 -0
  6. package/dist/cjs/player-elevate-card-items-37501652.js +2376 -0
  7. package/dist/cjs/player-elevate-card.cjs.entry.js +85 -0
  8. package/dist/cjs/player-elevate-pointcard.cjs.entry.js +92 -0
  9. package/dist/collection/collection-manifest.json +28 -0
  10. package/dist/collection/components/gamification-dropdown/gamification-dropdown.css +47 -0
  11. package/dist/collection/components/gamification-dropdown/gamification-dropdown.js +259 -0
  12. package/dist/collection/index.js +1 -0
  13. package/dist/collection/utils/locale.utils.js +48 -0
  14. package/dist/collection/utils/utils.js +3 -0
  15. package/dist/components/gamification-dropdown.d.ts +11 -0
  16. package/dist/components/gamification-dropdown.js +229 -0
  17. package/dist/components/general-styling-wrapper.js +6 -0
  18. package/dist/components/general-styling-wrapper2.js +103 -0
  19. package/dist/components/index.d.ts +26 -0
  20. package/dist/components/index.js +1 -0
  21. package/dist/components/player-elevate-card-data.js +6 -0
  22. package/dist/components/player-elevate-card-data2.js +632 -0
  23. package/dist/components/player-elevate-card-items.js +2149 -0
  24. package/dist/components/player-elevate-card.js +126 -0
  25. package/dist/components/player-elevate-loyaltycard.js +6 -0
  26. package/dist/components/player-elevate-loyaltycard2.js +129 -0
  27. package/dist/components/player-elevate-pointcard.js +135 -0
  28. package/dist/esm/gamification-dropdown.js +17 -0
  29. package/dist/esm/gamification-dropdown_4.entry.js +744 -0
  30. package/dist/esm/index-76ec399c.js +1675 -0
  31. package/dist/esm/index.js +1 -0
  32. package/dist/esm/loader.js +17 -0
  33. package/dist/esm/player-elevate-card-items-5d6e44ca.js +2363 -0
  34. package/dist/esm/player-elevate-card.entry.js +81 -0
  35. package/dist/esm/player-elevate-pointcard.entry.js +88 -0
  36. package/dist/esm/polyfills/core-js.js +11 -0
  37. package/dist/esm/polyfills/css-shim.js +1 -0
  38. package/dist/esm/polyfills/dom.js +79 -0
  39. package/dist/esm/polyfills/es5-html-element.js +1 -0
  40. package/dist/esm/polyfills/index.js +34 -0
  41. package/dist/esm/polyfills/system.js +6 -0
  42. package/dist/gamification-dropdown/gamification-dropdown.esm.js +1 -0
  43. package/dist/gamification-dropdown/index.esm.js +0 -0
  44. package/dist/gamification-dropdown/p-2d5bddc0.js +1 -0
  45. package/dist/gamification-dropdown/p-4eba8e43.entry.js +1 -0
  46. package/dist/gamification-dropdown/p-5e3064ce.js +1 -0
  47. package/dist/gamification-dropdown/p-62327671.entry.js +1 -0
  48. package/dist/gamification-dropdown/p-bbd6d5a3.entry.js +1 -0
  49. package/dist/index.cjs.js +1 -0
  50. package/dist/index.js +1 -0
  51. package/dist/static/button-default.svg +42 -0
  52. package/dist/static/button-disabled.svg +4 -0
  53. package/dist/static/button-hover.svg +4 -0
  54. package/dist/static/button-level.svg +27 -0
  55. package/dist/static/button-pressed.svg +18 -0
  56. package/dist/static/button-redeem.svg +36 -0
  57. package/dist/static/card-ground-over.png +0 -0
  58. package/dist/static/card-ground-over.svg +903 -0
  59. package/dist/static/card-ground.png +0 -0
  60. package/dist/static/card-ground.svg +34 -0
  61. package/dist/static/info.svg +4 -0
  62. package/dist/static/level-badge.png +0 -0
  63. package/dist/static/level-percent.svg +80 -0
  64. package/dist/static/tips-info.svg +21 -0
  65. package/dist/static/user.svg +3 -0
  66. package/dist/stencil.config.js +22 -0
  67. package/dist/types/Users/sebastian.strulea/Documents/work/widgets-stencil/packages/gamification-dropdown/.stencil/packages/gamification-dropdown/stencil.config.d.ts +2 -0
  68. package/dist/types/components/gamification-dropdown/gamification-dropdown.d.ts +41 -0
  69. package/dist/types/components.d.ts +85 -0
  70. package/dist/types/index.d.ts +1 -0
  71. package/dist/types/stencil-public-runtime.d.ts +1565 -0
  72. package/dist/types/utils/locale.utils.d.ts +2 -0
  73. package/dist/types/utils/utils.d.ts +1 -0
  74. package/loader/cdn.js +3 -0
  75. package/loader/index.cjs.js +3 -0
  76. package/loader/index.d.ts +12 -0
  77. package/loader/index.es2017.js +3 -0
  78. package/loader/index.js +4 -0
  79. package/loader/package.json +10 -0
  80. package/package.json +22 -0
@@ -0,0 +1,126 @@
1
+ import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
2
+ import { P as PlayerAvatar, b as PlayerPoints, d as PlayerNameDiv, a as PlayerElevateLoyaltyLevel, c 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 };
@@ -0,0 +1,6 @@
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 };
@@ -0,0 +1,129 @@
1
+ import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
2
+ import { P as PlayerAvatar, a as PlayerElevateLoyaltyLevel, b as PlayerPoints, c as PlayerLoyaltyProcess } from './player-elevate-card-items.js';
3
+ import { t as translateWithParams, T as TRANSLATIONS, 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 .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(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())))))))));
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 };
@@ -0,0 +1,135 @@
1
+ import { proxyCustomElement, HTMLElement, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
2
+ import { T as TRANSLATIONS, b as translate, d as defineCustomElement$2 } from './player-elevate-card-data2.js';
3
+ import { P as PlayerAvatar, b 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 };
@@ -0,0 +1,17 @@
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-76ec399c.js';
2
+
3
+ /*
4
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
5
+ */
6
+ const patchBrowser = () => {
7
+ const importMeta = import.meta.url;
8
+ const opts = {};
9
+ if (importMeta !== '') {
10
+ opts.resourcesUrl = new URL('.', importMeta).href;
11
+ }
12
+ return promiseResolve(opts);
13
+ };
14
+
15
+ patchBrowser().then(options => {
16
+ return bootstrapLazy([["gamification-dropdown_4",[[1,"gamification-dropdown",{"endpoint":[513],"language":[513],"session":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isOpen":[32],"isLoading":[32],"stylingAppends":[32],"loyaltyPoints":[32]}],[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"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]]]],["player-elevate-card",[[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"]]]]],["player-elevate-pointcard",[[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"]]]]]], options);
17
+ });