@everymatrix/gamification-dropdown 1.55.0 → 1.56.2

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 (34) hide show
  1. package/dist/cjs/{gamification-dropdown-0a3a8194.js → gamification-dropdown-b61f6455.js} +87 -30
  2. package/dist/cjs/gamification-dropdown.cjs.js +3 -3
  3. package/dist/cjs/gamification-dropdown_4.cjs.entry.js +5 -4
  4. package/dist/cjs/{index-7b4d999d.js → index-9f57df89.js} +18 -53
  5. package/dist/cjs/index.cjs.js +2 -2
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/cjs/{player-elevate-card-items-087e5a58.js → player-elevate-card-items-a64a5a53.js} +1 -1
  8. package/dist/cjs/player-elevate-card.cjs.entry.js +2 -2
  9. package/dist/cjs/player-elevate-pointcard.cjs.entry.js +2 -2
  10. package/dist/collection/collection-manifest.json +2 -2
  11. package/dist/collection/components/gamification-dropdown/gamification-dropdown.js +50 -29
  12. package/dist/esm/{gamification-dropdown-456bb56a.js → gamification-dropdown-9a68cf16.js} +87 -30
  13. package/dist/esm/gamification-dropdown.js +4 -4
  14. package/dist/esm/gamification-dropdown_4.entry.js +5 -4
  15. package/dist/esm/{index-171550cf.js → index-da41a34a.js} +18 -53
  16. package/dist/esm/index.js +2 -2
  17. package/dist/esm/loader.js +3 -3
  18. package/dist/esm/{player-elevate-card-items-2078bd83.js → player-elevate-card-items-6cc8ac45.js} +1 -1
  19. package/dist/esm/player-elevate-card.entry.js +2 -2
  20. package/dist/esm/player-elevate-pointcard.entry.js +2 -2
  21. package/dist/gamification-dropdown/gamification-dropdown.esm.js +1 -1
  22. package/dist/gamification-dropdown/index.esm.js +1 -1
  23. package/dist/gamification-dropdown/{p-8426f967.entry.js → p-9a95eec2.entry.js} +1 -1
  24. package/dist/gamification-dropdown/{p-881e823a.entry.js → p-a653bfbd.entry.js} +1 -1
  25. package/dist/gamification-dropdown/{p-dda9c7be.js → p-c36d41e2.js} +1 -1
  26. package/dist/gamification-dropdown/{p-a2f51157.entry.js → p-d55c742c.entry.js} +1 -1
  27. package/dist/gamification-dropdown/p-e2b2faba.js +2 -0
  28. package/dist/gamification-dropdown/p-fcccda48.js +1 -0
  29. package/dist/types/components/gamification-dropdown/gamification-dropdown.d.ts +9 -4
  30. package/dist/types/components.d.ts +8 -0
  31. package/dist/types/stencil-public-runtime.d.ts +0 -6
  32. package/package.json +1 -1
  33. package/dist/gamification-dropdown/p-7ecb6fdf.js +0 -2
  34. package/dist/gamification-dropdown/p-cfb00725.js +0 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-7b4d999d.js');
3
+ const index = require('./index-9f57df89.js');
4
4
 
5
5
  const DEFAULT_LANGUAGE = 'en';
6
6
  let TRANSLATIONS = {
@@ -45,30 +45,69 @@ const translate = (key, customLang) => {
45
45
  return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
46
46
  };
47
47
 
48
+ /**
49
+ * @name setClientStyling
50
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
51
+ * @param {HTMLElement} stylingContainer The reference element of the widget
52
+ * @param {string} clientStyling The style content
53
+ */
54
+ function setClientStyling(stylingContainer, clientStyling) {
55
+ if (stylingContainer) {
56
+ const sheet = document.createElement('style');
57
+ sheet.innerHTML = clientStyling;
58
+ stylingContainer.appendChild(sheet);
59
+ }
60
+ }
61
+
62
+ /**
63
+ * @name setClientStylingURL
64
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
65
+ * @param {HTMLElement} stylingContainer The reference element of the widget
66
+ * @param {string} clientStylingUrl The URL of the style content
67
+ */
68
+ function setClientStylingURL(stylingContainer, clientStylingUrl) {
69
+ const url = new URL(clientStylingUrl);
70
+
71
+ fetch(url.href)
72
+ .then((res) => res.text())
73
+ .then((data) => {
74
+ const cssFile = document.createElement('style');
75
+ cssFile.innerHTML = data;
76
+ if (stylingContainer) {
77
+ stylingContainer.appendChild(cssFile);
78
+ }
79
+ })
80
+ .catch((err) => {
81
+ console.error('There was an error while trying to load client styling from URL', err);
82
+ });
83
+ }
84
+
85
+ /**
86
+ * @name setStreamLibrary
87
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
88
+ * @param {HTMLElement} stylingContainer The highest element of the widget
89
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
90
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
91
+ */
92
+ function setStreamStyling(stylingContainer, domain, subscription) {
93
+ if (window.emMessageBus) {
94
+ const sheet = document.createElement('style');
95
+
96
+ window.emMessageBus.subscribe(domain, (data) => {
97
+ sheet.innerHTML = data;
98
+ if (stylingContainer) {
99
+ stylingContainer.appendChild(sheet);
100
+ }
101
+ });
102
+ }
103
+ }
104
+
48
105
  const gamificationDropdownCss = ":host{display:block}.GamificationDropdownContainer{position:relative}.GamificationDropdownContainer .GamificationDropdown{position:absolute;left:0;z-index:200;overflow:hidden;cursor:pointer}.GamificationDropdownButton{cursor:pointer;font-size:14px;height:20px;background-color:unset;color:var(--emw--color-typography, #FFFFFF);padding:0;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;line-height:0}.GamificationDropdownButton:hover{color:var(--emw--color-primary, #52d004)}.GamificationDropdownButton:hover svg{fill:var(--emw--color-primary, #52d004)}.GamificationDropdownButton.IsOpen{color:var(--emw--color-primary, #52d004)}.GamificationDropdownButton.IsOpen svg{fill:var(--emw--color-primary, #52d004)}.GamificationDropdownButton .TriangleActive,.GamificationDropdownButton .TriangleInactive{display:block;transition:all 0.2s}.GamificationDropdownButton .TriangleActive{transform:scale(1.1) rotateX(180deg) translateY(3px);fill:var(--emw--color-primary, #52d004);margin-top:4px}.GamificationDropdownButton svg{fill:var(--emw--color-typography, #FFFFFF);margin-left:8px;width:16px}";
49
106
  const GamificationDropdownStyle0 = gamificationDropdownCss;
50
107
 
51
108
  const GamificationDropdown = class {
52
109
  constructor(hostRef) {
53
110
  index.registerInstance(this, hostRef);
54
- this.setClientStyling = () => {
55
- let sheet = document.createElement('style');
56
- sheet.innerHTML = this.clientStyling;
57
- this.stylingContainer.prepend(sheet);
58
- };
59
- this.setClientStylingURL = () => {
60
- let url = new URL(this.clientStylingUrl);
61
- let cssFile = document.createElement('style');
62
- fetch(url.href)
63
- .then((res) => res.text())
64
- .then((data) => {
65
- cssFile.innerHTML = data;
66
- setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
67
- })
68
- .catch((err) => {
69
- console.log('error ', err);
70
- });
71
- };
72
111
  this.navigateToGamification = () => {
73
112
  window.postMessage({ type: 'NavigateToGamification' }, window.location.href);
74
113
  this.isOpen = false;
@@ -93,12 +132,12 @@ const GamificationDropdown = class {
93
132
  this.endpoint = undefined;
94
133
  this.language = 'en';
95
134
  this.session = '';
135
+ this.mbSource = undefined;
96
136
  this.clientStyling = '';
97
137
  this.clientStylingUrl = '';
98
138
  this.translationUrl = '';
99
139
  this.isOpen = false;
100
140
  this.isLoading = false;
101
- this.stylingAppends = false;
102
141
  this.loyaltyPoints = undefined;
103
142
  }
104
143
  handleNewTranslations() {
@@ -107,6 +146,17 @@ const GamificationDropdown = class {
107
146
  this.isLoading = false;
108
147
  });
109
148
  }
149
+ handleClientStylingChange(newValue, oldValue) {
150
+ if (newValue != oldValue) {
151
+ setClientStyling(this.stylingContainer, this.clientStyling);
152
+ }
153
+ }
154
+ handleClientStylingChangeURL(newValue, oldValue) {
155
+ if (newValue != oldValue) {
156
+ if (this.clientStylingUrl)
157
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
158
+ }
159
+ }
110
160
  async componentWillLoad() {
111
161
  if (this.translationUrl.length > 2) {
112
162
  await getTranslations(this.translationUrl);
@@ -115,16 +165,21 @@ const GamificationDropdown = class {
115
165
  return this.fetchPointsData();
116
166
  }
117
167
  }
118
- componentDidRender() {
119
- // start custom styling area
120
- if (!this.stylingAppends && this.stylingContainer) {
121
- if (this.clientStyling)
122
- this.setClientStyling();
123
- if (this.clientStylingUrl)
124
- this.setClientStylingURL();
125
- this.stylingAppends = true;
168
+ componentDidLoad() {
169
+ if (this.stylingContainer) {
170
+ if (window.emMessageBus != undefined) {
171
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
172
+ }
173
+ else {
174
+ if (this.clientStyling)
175
+ setClientStyling(this.stylingContainer, this.clientStyling);
176
+ if (this.clientStylingUrl)
177
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
178
+ }
126
179
  }
127
- // end custom styling area
180
+ }
181
+ disconnectedCallback() {
182
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
128
183
  }
129
184
  fetchPointsData() {
130
185
  let url = new URL(`${this.endpoint}/v1/elevate/playerInfo`);
@@ -165,7 +220,9 @@ const GamificationDropdown = class {
165
220
  }
166
221
  get el() { return index.getElement(this); }
167
222
  static get watchers() { return {
168
- "translationUrl": ["handleNewTranslations"]
223
+ "translationUrl": ["handleNewTranslations"],
224
+ "clientStyling": ["handleClientStylingChange"],
225
+ "clientStylingUrl": ["handleClientStylingChangeURL"]
169
226
  }; }
170
227
  };
171
228
  GamificationDropdown.style = GamificationDropdownStyle0;
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7b4d999d.js');
5
+ const index = require('./index-9f57df89.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  /*
9
- Stencil Client Patch Browser v4.22.3 | MIT Licensed | https://stenciljs.com
9
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
10
10
  */
11
11
  var patchBrowser = () => {
12
12
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('gamification-dropdown.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["gamification-dropdown_4.cjs",[[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]},null,{"translationUrl":["handleNewTranslations"]}],[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[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"],[8,"redeemGiftButton","redeemGiftButtonHandler"]],{"params":["onParamsChanged"]}]]],["player-elevate-card.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]],["player-elevate-pointcard.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]]], options);
22
+ return index.bootstrapLazy([["gamification-dropdown_4.cjs",[[1,"gamification-dropdown",{"endpoint":[513],"language":[513],"session":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isOpen":[32],"isLoading":[32],"loyaltyPoints":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[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"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[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"],[8,"redeemGiftButton","redeemGiftButtonHandler"]],{"params":["onParamsChanged"]}]]],["player-elevate-card.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]],["player-elevate-pointcard.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const gamificationDropdown = require('./gamification-dropdown-0a3a8194.js');
6
- const index = require('./index-7b4d999d.js');
7
- const playerElevateCardItems = require('./player-elevate-card-items-087e5a58.js');
5
+ const gamificationDropdown = require('./gamification-dropdown-b61f6455.js');
6
+ const index = require('./index-9f57df89.js');
7
+ const playerElevateCardItems = require('./player-elevate-card-items-a64a5a53.js');
8
8
 
9
9
  const mergeTranslations = (url, target) => {
10
10
  return new Promise((resolve) => {
@@ -547,6 +547,7 @@ const PlayerElevateLoyaltycard = class {
547
547
  this.language = 'en';
548
548
  this.playerName = undefined;
549
549
  this.dateFormat = 'yyyy-MM-dd';
550
+ this.mbSource = undefined;
550
551
  this.clientStyling = '';
551
552
  this.clientStylingUrl = '';
552
553
  this.translationUrl = '';
@@ -602,7 +603,7 @@ const PlayerElevateLoyaltycard = class {
602
603
  render() {
603
604
  const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
604
605
  const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
605
- return (index.h("div", { key: '2b0944f8317a94621e1bc65bbbb3726654b8963b', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: 'c6d4dbba143435b4485d7fde91ab0a48a2f6688b', class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: 'e47a4efe925eb35d4449c6ff33a0afef9d284e55', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: 'a560991893305894ddd41756cd7b3c32d0ef9e03', params: this.paramProxy }), index.h("div", { key: 'ceb8b71386f84f54518a3694535aa16c2c3d3951', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { key: '1df9647c3de42e74adee0f8895511442118ae381', class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, { key: '569bcd5fc3c578d2e6cc7442d28444e29688660c' }, index.h("div", { key: 'aa40032bff99c5462b906e4427232ca2d4019017', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: '7a2d535b0c2029c90b9f1c123f9feebafca6bdde', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { key: '90999da8fc2a3102eac235fcbc8afbec2a2bbdf8', class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { key: '67e8bf370b1b77e776fb6d955ae63928fd1338d8', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h("div", { key: '1e0fefc6a23f4aeeef5e19828399fe1229a3fc81', class: 'PointsRange' }, index.h(playerElevateCardItems.PlayerPoints, { key: 'dd176e624cde3b6f517101d7702a15465305174d', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), index.h(playerElevateCardItems.PlayerPoints, { key: '6cddb64c92545803d08fbbc513cc951b2691a42e', loyaltyPoints: this.getNextLevelPoints(), language: this.language })), index.h(playerElevateCardItems.PlayerLoyaltyProcess, { key: '08817ca979ea784aeb735579b0d52e5150eb0852' }), index.h("div", { key: 'be9a1b40a8145d5e6d329d8e9f047296e84dd24b', class: "NextLevelTip" }, this.getNextLevelTips()), this.pointExpireString && (index.h("div", { key: 'f9cbb7d06e34717cb9f74cb8d2e506e49969e775', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " "))))))))));
606
+ return (index.h("div", { key: '39295a651da66747a20554699bba5f96b8ad5c35', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: '78c34fe054fc2459f8af3354116cd21a68ce01be', class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: 'be6efc6da4c3ccf4cc3ece8ecc73561bae75aa20', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: 'b53e4b59d4ee55a2f567efa09afab3d72969e6e4', params: this.paramProxy }), index.h("div", { key: '1f3e504440bab2df3a181058fad7149c85c48c14', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { key: 'a07c6cd95770dc1bfd3da78b1c7cc8e1367321b1', class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, { key: '5c104f5ba1a018219c6ed5f6e50af99b035a0344' }, index.h("div", { key: 'bd94591e6ab9298ab7c769fa48efaf314dc1a63b', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: '928849ce86d8c7a483eba7850efc83f8149bae43', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { key: '37192c9b8502eb3c7d93914369df2d784c17e9f7', class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { key: '2684a177f4bb1053c4587fd4158666fb35ca23f4', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h("div", { key: '173a37c63868f2d900c12af3ffc2d9a4a57550e4', class: 'PointsRange' }, index.h(playerElevateCardItems.PlayerPoints, { key: 'a7111154f7dc547e0b05c70d24508bdd75c5d882', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), index.h(playerElevateCardItems.PlayerPoints, { key: 'ad31574e7db81a7ecb7a06b28b1d4968cbcab93e', loyaltyPoints: this.getNextLevelPoints(), language: this.language })), index.h(playerElevateCardItems.PlayerLoyaltyProcess, { key: '88ddfdb326edfb1de9519da6b3d0e5b514725e27' }), index.h("div", { key: 'b9c79555a8001bd2c754d7573df04016da235c84', class: "NextLevelTip" }, this.getNextLevelTips()), this.pointExpireString && (index.h("div", { key: '02da725060c9db4a8c1c2e8bad3426894d7f8f2c', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " "))))))))));
606
607
  }
607
608
  static get watchers() { return {
608
609
  "session": ["onSessionOrEndpointChange"],
@@ -21,10 +21,10 @@ function _interopNamespace(e) {
21
21
  }
22
22
 
23
23
  const NAMESPACE = 'gamification-dropdown';
24
- const BUILD = /* gamification-dropdown */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
24
+ const BUILD = /* gamification-dropdown */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
25
25
 
26
26
  /*
27
- Stencil Client Platform v4.22.3 | MIT Licensed | https://stenciljs.com
27
+ Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
28
28
  */
29
29
  var __defProp = Object.defineProperty;
30
30
  var __export = (target, all) => {
@@ -438,31 +438,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
438
438
  if (nonce != null) {
439
439
  styleElm.setAttribute("nonce", nonce);
440
440
  }
441
- if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
442
- if (styleContainerNode.nodeName === "HEAD") {
443
- const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
444
- const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
445
- styleContainerNode.insertBefore(styleElm, referenceNode2);
446
- } else if ("host" in styleContainerNode) {
447
- if (supportsConstructableStylesheets) {
448
- const stylesheet = new CSSStyleSheet();
449
- stylesheet.replaceSync(style);
450
- styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
451
- } else {
452
- const existingStyleContainer = styleContainerNode.querySelector("style");
453
- if (existingStyleContainer) {
454
- existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
455
- } else {
456
- styleContainerNode.prepend(styleElm);
457
- }
458
- }
459
- } else {
460
- styleContainerNode.append(styleElm);
461
- }
462
- }
463
- if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
464
- styleContainerNode.insertBefore(styleElm, null);
465
- }
441
+ styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
466
442
  }
467
443
  if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
468
444
  styleElm.innerHTML += SLOT_FB_CSS;
@@ -485,7 +461,7 @@ var attachStyles = (hostRef) => {
485
461
  const scopeId2 = addStyle(
486
462
  elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
487
463
  cmpMeta);
488
- if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
464
+ if (flags & 10 /* needsScopedEncapsulation */) {
489
465
  elm["s-sc"] = scopeId2;
490
466
  elm.classList.add(scopeId2 + "-h");
491
467
  }
@@ -554,11 +530,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
554
530
  if (memberName === "list") {
555
531
  isProp = false;
556
532
  } else if (oldValue == null || elm[memberName] != n) {
557
- if (typeof elm.__lookupSetter__(memberName) === "function") {
558
- elm[memberName] = n;
559
- } else {
560
- elm.setAttribute(memberName, n);
561
- }
533
+ elm[memberName] = n;
562
534
  }
563
535
  } else {
564
536
  elm[memberName] = newValue;
@@ -663,9 +635,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
663
635
  {
664
636
  updateElement(null, newVNode2, isSvgMode);
665
637
  }
666
- const rootNode = elm.getRootNode();
667
- const isElementWithinShadowRoot = !rootNode.querySelector("body");
668
- if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
638
+ if (isDef(scopeId) && elm["s-si"] !== scopeId) {
669
639
  elm.classList.add(elm["s-si"] = scopeId);
670
640
  }
671
641
  if (newVNode2.$children$) {
@@ -856,15 +826,6 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
856
826
  var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
857
827
  if (leftVNode.$tag$ === rightVNode.$tag$) {
858
828
  if (leftVNode.$tag$ === "slot") {
859
- if (
860
- // The component gets hydrated and no VDOM has been initialized.
861
- // Here the comparison can't happen as $name$ property is not set for `leftNode`.
862
- "$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
863
- // hydration comments to be removed
864
- leftVNode.$elm$.nodeType !== 8
865
- ) {
866
- return false;
867
- }
868
829
  return leftVNode.$name$ === rightVNode.$name$;
869
830
  }
870
831
  if (!isInitialRender) {
@@ -901,10 +862,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
901
862
  elm.textContent = "";
902
863
  }
903
864
  addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
904
- } else if (
905
- // don't do this on initial render as it can cause non-hydrated content to be removed
906
- !isInitialRender && BUILD.updatable && oldChildren !== null
907
- ) {
865
+ } else if (oldChildren !== null) {
908
866
  removeVnodes(oldChildren, 0, oldChildren.length - 1);
909
867
  }
910
868
  if (isSvgMode && tag === "svg") {
@@ -1229,6 +1187,9 @@ var postUpdateComponent = (hostRef) => {
1229
1187
  {
1230
1188
  addHydratedFlag(elm);
1231
1189
  }
1190
+ {
1191
+ safeCall(instance, "componentDidLoad");
1192
+ }
1232
1193
  endPostUpdate();
1233
1194
  {
1234
1195
  hostRef.$onReadyResolve$(elm);
@@ -1341,8 +1302,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
1341
1302
  if (this.hasOwnProperty(propName)) {
1342
1303
  newValue = this[propName];
1343
1304
  delete this[propName];
1344
- } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
1345
- this[propName] == newValue) {
1305
+ } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) {
1346
1306
  return;
1347
1307
  } else if (propName == null) {
1348
1308
  const hostRef = getHostRef(this);
@@ -1502,6 +1462,9 @@ var setContentReference = (elm) => {
1502
1462
  insertBefore(elm, contentRefElm, elm.firstChild);
1503
1463
  };
1504
1464
  var disconnectInstance = (instance) => {
1465
+ {
1466
+ safeCall(instance, "disconnectedCallback");
1467
+ }
1505
1468
  };
1506
1469
  var disconnectedCallback = async (elm) => {
1507
1470
  if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
@@ -1512,8 +1475,10 @@ var disconnectedCallback = async (elm) => {
1512
1475
  hostRef.$rmListeners$ = void 0;
1513
1476
  }
1514
1477
  }
1515
- if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
1516
- hostRef.$onReadyPromise$.then(() => disconnectInstance());
1478
+ if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
1479
+ disconnectInstance(hostRef.$lazyInstance$);
1480
+ } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
1481
+ hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
1517
1482
  }
1518
1483
  }
1519
1484
  };
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const gamificationDropdown = require('./gamification-dropdown-0a3a8194.js');
6
- require('./index-7b4d999d.js');
5
+ const gamificationDropdown = require('./gamification-dropdown-b61f6455.js');
6
+ require('./index-9f57df89.js');
7
7
 
8
8
 
9
9
 
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7b4d999d.js');
5
+ const index = require('./index-9f57df89.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["gamification-dropdown_4.cjs",[[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]},null,{"translationUrl":["handleNewTranslations"]}],[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[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"],[8,"redeemGiftButton","redeemGiftButtonHandler"]],{"params":["onParamsChanged"]}]]],["player-elevate-card.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]],["player-elevate-pointcard.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]]], options);
11
+ return index.bootstrapLazy([["gamification-dropdown_4.cjs",[[1,"gamification-dropdown",{"endpoint":[513],"language":[513],"session":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"isOpen":[32],"isLoading":[32],"loyaltyPoints":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[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"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[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"],[8,"redeemGiftButton","redeemGiftButtonHandler"]],{"params":["onParamsChanged"]}]]],["player-elevate-card.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]],["player-elevate-pointcard.cjs",[[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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-7b4d999d.js');
3
+ const index = require('./index-9f57df89.js');
4
4
 
5
5
  function _typeof(o) {
6
6
  "@babel/helpers - typeof";
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7b4d999d.js');
6
- const playerElevateCardItems = require('./player-elevate-card-items-087e5a58.js');
5
+ const index = require('./index-9f57df89.js');
6
+ const playerElevateCardItems = require('./player-elevate-card-items-a64a5a53.js');
7
7
 
8
8
  const playerElevateCardCss = "@container (max-width: 270px) {\n .Card .Inner {\n flex-direction: column;\n }\n .Card .Inner .Content {\n padding: 9px;\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(--emw--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}";
9
9
  const PlayerElevateCardStyle0 = playerElevateCardCss;
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7b4d999d.js');
6
- const playerElevateCardItems = require('./player-elevate-card-items-087e5a58.js');
5
+ const index = require('./index-9f57df89.js');
6
+ const playerElevateCardItems = require('./player-elevate-card-items-a64a5a53.js');
7
7
 
8
8
  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(--emw--color-gray-150, #6D6D6D)}.PointsCard .Inner .DetailButton span{display:inline-block;vertical-align:middle}.PointsCard .Inner .DetailButton:hover span{color:var(--emw--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}";
9
9
  const PlayerElevatePointcardStyle0 = playerElevatePointcardCss;
@@ -4,8 +4,8 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "4.22.3",
8
- "typescriptVersion": "5.5.4"
7
+ "version": "4.19.2",
8
+ "typescriptVersion": "5.4.5"
9
9
  },
10
10
  "collections": [
11
11
  {
@@ -1,26 +1,9 @@
1
1
  import { h } from "@stencil/core";
2
2
  import { getTranslations, translate } from "../../utils/locale.utils";
3
+ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
3
4
  import "../../../../../player-elevate-card/dist/types/index";
4
5
  export class GamificationDropdown {
5
6
  constructor() {
6
- this.setClientStyling = () => {
7
- let sheet = document.createElement('style');
8
- sheet.innerHTML = this.clientStyling;
9
- this.stylingContainer.prepend(sheet);
10
- };
11
- this.setClientStylingURL = () => {
12
- let url = new URL(this.clientStylingUrl);
13
- let cssFile = document.createElement('style');
14
- fetch(url.href)
15
- .then((res) => res.text())
16
- .then((data) => {
17
- cssFile.innerHTML = data;
18
- setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
19
- })
20
- .catch((err) => {
21
- console.log('error ', err);
22
- });
23
- };
24
7
  this.navigateToGamification = () => {
25
8
  window.postMessage({ type: 'NavigateToGamification' }, window.location.href);
26
9
  this.isOpen = false;
@@ -45,12 +28,12 @@ export class GamificationDropdown {
45
28
  this.endpoint = undefined;
46
29
  this.language = 'en';
47
30
  this.session = '';
31
+ this.mbSource = undefined;
48
32
  this.clientStyling = '';
49
33
  this.clientStylingUrl = '';
50
34
  this.translationUrl = '';
51
35
  this.isOpen = false;
52
36
  this.isLoading = false;
53
- this.stylingAppends = false;
54
37
  this.loyaltyPoints = undefined;
55
38
  }
56
39
  handleNewTranslations() {
@@ -59,6 +42,17 @@ export class GamificationDropdown {
59
42
  this.isLoading = false;
60
43
  });
61
44
  }
45
+ handleClientStylingChange(newValue, oldValue) {
46
+ if (newValue != oldValue) {
47
+ setClientStyling(this.stylingContainer, this.clientStyling);
48
+ }
49
+ }
50
+ handleClientStylingChangeURL(newValue, oldValue) {
51
+ if (newValue != oldValue) {
52
+ if (this.clientStylingUrl)
53
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
54
+ }
55
+ }
62
56
  async componentWillLoad() {
63
57
  if (this.translationUrl.length > 2) {
64
58
  await getTranslations(this.translationUrl);
@@ -67,16 +61,21 @@ export class GamificationDropdown {
67
61
  return this.fetchPointsData();
68
62
  }
69
63
  }
70
- componentDidRender() {
71
- // start custom styling area
72
- if (!this.stylingAppends && this.stylingContainer) {
73
- if (this.clientStyling)
74
- this.setClientStyling();
75
- if (this.clientStylingUrl)
76
- this.setClientStylingURL();
77
- this.stylingAppends = true;
64
+ componentDidLoad() {
65
+ if (this.stylingContainer) {
66
+ if (window.emMessageBus != undefined) {
67
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
68
+ }
69
+ else {
70
+ if (this.clientStyling)
71
+ setClientStyling(this.stylingContainer, this.clientStyling);
72
+ if (this.clientStylingUrl)
73
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
74
+ }
78
75
  }
79
- // end custom styling area
76
+ }
77
+ disconnectedCallback() {
78
+ this.stylingSubscription && this.stylingSubscription.unsubscribe();
80
79
  }
81
80
  fetchPointsData() {
82
81
  let url = new URL(`${this.endpoint}/v1/elevate/playerInfo`);
@@ -182,6 +181,23 @@ export class GamificationDropdown {
182
181
  "reflect": true,
183
182
  "defaultValue": "''"
184
183
  },
184
+ "mbSource": {
185
+ "type": "string",
186
+ "mutable": false,
187
+ "complexType": {
188
+ "original": "string",
189
+ "resolved": "string",
190
+ "references": {}
191
+ },
192
+ "required": false,
193
+ "optional": false,
194
+ "docs": {
195
+ "tags": [],
196
+ "text": "Client custom styling via streamStyling"
197
+ },
198
+ "attribute": "mb-source",
199
+ "reflect": true
200
+ },
185
201
  "clientStyling": {
186
202
  "type": "string",
187
203
  "mutable": false,
@@ -242,7 +258,6 @@ export class GamificationDropdown {
242
258
  return {
243
259
  "isOpen": {},
244
260
  "isLoading": {},
245
- "stylingAppends": {},
246
261
  "loyaltyPoints": {}
247
262
  };
248
263
  }
@@ -251,6 +266,12 @@ export class GamificationDropdown {
251
266
  return [{
252
267
  "propName": "translationUrl",
253
268
  "methodName": "handleNewTranslations"
269
+ }, {
270
+ "propName": "clientStyling",
271
+ "methodName": "handleClientStylingChange"
272
+ }, {
273
+ "propName": "clientStylingUrl",
274
+ "methodName": "handleClientStylingChangeURL"
254
275
  }];
255
276
  }
256
277
  }