@everymatrix/lottery-ticket 1.87.26 → 1.87.27

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 (4) hide show
  1. package/dist/cjs/lottery-bullet_3.cjs.entry.js +74 -15
  2. package/dist/esm/lottery-bullet_3.entry.js +74 -15
  3. package/dist/lottery-ticket/lottery-bullet_3.entry.js +241 -241
  4. package/package.json +1 -1
package/dist/cjs/lottery-bullet_3.cjs.entry.js CHANGED
@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-9501923d.js');
6
6
 
7
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
8
+
7
9
  /**
8
10
  * @name setClientStyling
9
11
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -49,18 +51,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
49
51
  * @param {HTMLElement} stylingContainer The highest element of the widget
50
52
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
51
53
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
54
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
52
55
  */
53
- function setStreamStyling(stylingContainer, domain, subscription) {
54
- if (window.emMessageBus) {
55
- const sheet = document.createElement('style');
56
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
57
+ if (!window.emMessageBus) return;
56
58
 
57
- window.emMessageBus.subscribe(domain, (data) => {
58
- sheet.innerHTML = data;
59
- if (stylingContainer) {
60
- stylingContainer.appendChild(sheet);
61
- }
62
- });
59
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
60
+
61
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
62
+ subscription = getStyleTagSubscription(stylingContainer, domain);
63
+
64
+ return subscription;
65
+ }
66
+
67
+ if (!window[StyleCacheKey]) {
68
+ window[StyleCacheKey] = {};
63
69
  }
70
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
71
+
72
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
73
+ const wrappedUnsubscribe = () => {
74
+ if (window[StyleCacheKey][domain]) {
75
+ const cachedObject = window[StyleCacheKey][domain];
76
+ cachedObject.refCount > 1
77
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
78
+ : delete window[StyleCacheKey][domain];
79
+ }
80
+
81
+ originalUnsubscribe();
82
+ };
83
+ subscription.unsubscribe = wrappedUnsubscribe;
84
+
85
+ return subscription;
86
+ }
87
+
88
+ function getStyleTagSubscription(stylingContainer, domain) {
89
+ const sheet = document.createElement('style');
90
+
91
+ return window.emMessageBus.subscribe(domain, (data) => {
92
+ if (stylingContainer) {
93
+ sheet.innerHTML = data;
94
+ stylingContainer.appendChild(sheet);
95
+ }
96
+ });
97
+ }
98
+
99
+ function getAdoptStyleSubscription(stylingContainer, domain) {
100
+ return window.emMessageBus.subscribe(domain, (data) => {
101
+ if (!stylingContainer) return;
102
+
103
+ const shadowRoot = stylingContainer.getRootNode();
104
+ const cacheStyleObject = window[StyleCacheKey];
105
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
106
+
107
+ if (!cachedStyle) {
108
+ cachedStyle = new CSSStyleSheet();
109
+ cachedStyle.replaceSync(data);
110
+ cacheStyleObject[domain] = {
111
+ sheet: cachedStyle,
112
+ refCount: 1
113
+ };
114
+ } else {
115
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
116
+ }
117
+
118
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
119
+ if (!currentSheets.includes(cachedStyle)) {
120
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
121
+ }
122
+ });
64
123
  }
65
124
 
66
125
  const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:var(--emw--color-typography, #000);display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px var(--emw--color-background, #fff);background:radial-gradient(circle at top, var(--emw--color-background, #fff) 0%, var(--emw--color-background, #fff) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 var(--emw--color-gray-300, #333);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, var(--emw--color-background, #fff) 0%, var(--emw--color-background-secondary, #f5f5f5) 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:var(--emw--color-background, #fff);background:-webkit-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:-moz-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:radial-gradient(circle at top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));border:solid 2px var(--emw--color-primary, #009993)}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:var(--emw--color-gray-50, #f5f5f5);background:var(--emw--color-gray-250, #ccc);border:solid 2px var(--emw--color-gray-100, #e6e6e6);cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:var(--emw--color-gray-50, #f5f5f5);background:-webkit-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:-moz-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:radial-gradient(circle at top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));border:solid 2px var(--emw--color-gray-100, #e6e6e6);cursor:default}.Circle.Bonus{background:var(--emw--color-tertiary, #ff6536)}";
@@ -99,13 +158,13 @@ const LotteryBullet = class {
99
158
  }
100
159
  handleMbSourceChange(newValue, oldValue) {
101
160
  if (newValue != oldValue) {
102
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
161
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
103
162
  }
104
163
  }
105
164
  componentDidLoad() {
106
165
  if (this.stylingContainer) {
107
166
  if (this.mbSource)
108
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
167
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
109
168
  if (this.clientStyling)
110
169
  setClientStyling(this.stylingContainer, this.clientStyling);
111
170
  if (this.clientStylingUrl)
@@ -168,13 +227,13 @@ const LotteryGrid = class {
168
227
  }
169
228
  handleMbSourceChange(newValue, oldValue) {
170
229
  if (newValue != oldValue) {
171
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
230
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
172
231
  }
173
232
  }
174
233
  componentDidLoad() {
175
234
  if (this.stylingContainer) {
176
235
  if (this.mbSource)
177
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
236
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
178
237
  if (this.clientStyling)
179
238
  setClientStyling(this.stylingContainer, this.clientStyling);
180
239
  if (this.clientStylingUrl)
@@ -7188,7 +7247,7 @@ const LotteryTicket = class {
7188
7247
  }
7189
7248
  handleMbSourceChange(newValue, oldValue) {
7190
7249
  if (newValue != oldValue) {
7191
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
7250
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
7192
7251
  }
7193
7252
  }
7194
7253
  checkForClickOutside(ev) {
@@ -7275,7 +7334,7 @@ const LotteryTicket = class {
7275
7334
  componentDidLoad() {
7276
7335
  if (this.stylingContainer) {
7277
7336
  if (this.mbSource)
7278
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
7337
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
7279
7338
  if (this.clientStyling)
7280
7339
  setClientStyling(this.stylingContainer, this.clientStyling);
7281
7340
  if (this.clientStylingUrl)
package/dist/esm/lottery-bullet_3.entry.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-51501594.js';
2
2
 
3
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
4
+
3
5
  /**
4
6
  * @name setClientStyling
5
7
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -45,18 +47,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
45
47
  * @param {HTMLElement} stylingContainer The highest element of the widget
46
48
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
47
49
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
50
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
48
51
  */
49
- function setStreamStyling(stylingContainer, domain, subscription) {
50
- if (window.emMessageBus) {
51
- const sheet = document.createElement('style');
52
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
53
+ if (!window.emMessageBus) return;
52
54
 
53
- window.emMessageBus.subscribe(domain, (data) => {
54
- sheet.innerHTML = data;
55
- if (stylingContainer) {
56
- stylingContainer.appendChild(sheet);
57
- }
58
- });
55
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
56
+
57
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
58
+ subscription = getStyleTagSubscription(stylingContainer, domain);
59
+
60
+ return subscription;
61
+ }
62
+
63
+ if (!window[StyleCacheKey]) {
64
+ window[StyleCacheKey] = {};
59
65
  }
66
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
67
+
68
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
69
+ const wrappedUnsubscribe = () => {
70
+ if (window[StyleCacheKey][domain]) {
71
+ const cachedObject = window[StyleCacheKey][domain];
72
+ cachedObject.refCount > 1
73
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
74
+ : delete window[StyleCacheKey][domain];
75
+ }
76
+
77
+ originalUnsubscribe();
78
+ };
79
+ subscription.unsubscribe = wrappedUnsubscribe;
80
+
81
+ return subscription;
82
+ }
83
+
84
+ function getStyleTagSubscription(stylingContainer, domain) {
85
+ const sheet = document.createElement('style');
86
+
87
+ return window.emMessageBus.subscribe(domain, (data) => {
88
+ if (stylingContainer) {
89
+ sheet.innerHTML = data;
90
+ stylingContainer.appendChild(sheet);
91
+ }
92
+ });
93
+ }
94
+
95
+ function getAdoptStyleSubscription(stylingContainer, domain) {
96
+ return window.emMessageBus.subscribe(domain, (data) => {
97
+ if (!stylingContainer) return;
98
+
99
+ const shadowRoot = stylingContainer.getRootNode();
100
+ const cacheStyleObject = window[StyleCacheKey];
101
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
102
+
103
+ if (!cachedStyle) {
104
+ cachedStyle = new CSSStyleSheet();
105
+ cachedStyle.replaceSync(data);
106
+ cacheStyleObject[domain] = {
107
+ sheet: cachedStyle,
108
+ refCount: 1
109
+ };
110
+ } else {
111
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
112
+ }
113
+
114
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
115
+ if (!currentSheets.includes(cachedStyle)) {
116
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
117
+ }
118
+ });
60
119
  }
61
120
 
62
121
  const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:var(--emw--color-typography, #000);display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px var(--emw--color-background, #fff);background:radial-gradient(circle at top, var(--emw--color-background, #fff) 0%, var(--emw--color-background, #fff) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 var(--emw--color-gray-300, #333);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, var(--emw--color-background, #fff) 0%, var(--emw--color-background-secondary, #f5f5f5) 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:var(--emw--color-background, #fff);background:-webkit-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:-moz-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:radial-gradient(circle at top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));border:solid 2px var(--emw--color-primary, #009993)}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:var(--emw--color-gray-50, #f5f5f5);background:var(--emw--color-gray-250, #ccc);border:solid 2px var(--emw--color-gray-100, #e6e6e6);cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:var(--emw--color-gray-50, #f5f5f5);background:-webkit-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:-moz-radial-gradient(top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));background:radial-gradient(circle at top, var(--emw--color-primary, #009993), var(--emw--color-primary-variant, #004d4a));border:solid 2px var(--emw--color-gray-100, #e6e6e6);cursor:default}.Circle.Bonus{background:var(--emw--color-tertiary, #ff6536)}";
@@ -95,13 +154,13 @@ const LotteryBullet = class {
95
154
  }
96
155
  handleMbSourceChange(newValue, oldValue) {
97
156
  if (newValue != oldValue) {
98
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
157
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
99
158
  }
100
159
  }
101
160
  componentDidLoad() {
102
161
  if (this.stylingContainer) {
103
162
  if (this.mbSource)
104
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
163
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
105
164
  if (this.clientStyling)
106
165
  setClientStyling(this.stylingContainer, this.clientStyling);
107
166
  if (this.clientStylingUrl)
@@ -164,13 +223,13 @@ const LotteryGrid = class {
164
223
  }
165
224
  handleMbSourceChange(newValue, oldValue) {
166
225
  if (newValue != oldValue) {
167
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
226
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
168
227
  }
169
228
  }
170
229
  componentDidLoad() {
171
230
  if (this.stylingContainer) {
172
231
  if (this.mbSource)
173
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
232
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
174
233
  if (this.clientStyling)
175
234
  setClientStyling(this.stylingContainer, this.clientStyling);
176
235
  if (this.clientStylingUrl)
@@ -7184,7 +7243,7 @@ const LotteryTicket = class {
7184
7243
  }
7185
7244
  handleMbSourceChange(newValue, oldValue) {
7186
7245
  if (newValue != oldValue) {
7187
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
7246
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
7188
7247
  }
7189
7248
  }
7190
7249
  checkForClickOutside(ev) {
@@ -7271,7 +7330,7 @@ const LotteryTicket = class {
7271
7330
  componentDidLoad() {
7272
7331
  if (this.stylingContainer) {
7273
7332
  if (this.mbSource)
7274
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
7333
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
7275
7334
  if (this.clientStyling)
7276
7335
  setClientStyling(this.stylingContainer, this.clientStyling);
7277
7336
  if (this.clientStylingUrl)