@everymatrix/lottery-grid 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.
@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-7c689bd6.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)
@@ -1,5 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-8e36e3ee.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)
@@ -1 +1 @@
1
- import{r as e,c as t,h as i}from"./index-8e36e3ee.js";function s(e,t){if(e){const i=document.createElement("style");i.innerHTML=t,e.appendChild(i)}}function r(e,t){if(!e||!t)return;const i=new URL(t);fetch(i.href).then((e=>e.text())).then((t=>{const i=document.createElement("style");i.innerHTML=t,e&&e.appendChild(i)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}function a(e,t){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{i.innerHTML=t,e&&e.appendChild(i)}))}}const l=class{constructor(i){e(this,i),this.bulletEvent=t(this,"lotteryBulletSelection",7),this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))},this.value="0",this.selectable=!0,this.isSelected=!1,this.isBonus=!1,this.clientStyling="",this.clientStylingUrl="",this.mbSource=void 0}handleClientStylingChange(e,t){e!=t&&s(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(e,t){e!=t&&r(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(e,t){e!=t&&a(this.stylingContainer,`${this.mbSource}.Style`)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&a(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl))}render(){return i("div",{key:"2cfab600728d3aa72f9f87e4e07a968ea030e415",class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":"")+(this.isBonus?" Bonus":""),onClick:()=>this.select(),ref:e=>this.stylingContainer=e},this.value)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};l.style='@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)}';const o=class{constructor(i){e(this,i),this.gridFilledEvent=t(this,"gridFilled",7),this.gridDirtyEvent=t(this,"gridDirty",7),this.gridClearAllEvent=t(this,"gridClearAllEvent",7),this.selectedCounter=0,this.ticketId=void 0,this.totalNumbers=0,this.gameId=void 0,this.maximumAllowed=7,this.minimumAllowed=3,this.numberRange=void 0,this.selectable=!0,this.selectedNumbers="",this.secondaryNumbers="",this.displaySelected=!1,this.language="en",this.gridIndex=void 0,this.gridType="",this.clientStyling="",this.clientStylingUrl="",this.mbSource=void 0,this.highNumber=47,this.lowNumber=1,this.selectionType="mainSelection",this.partialQuickpickAvailable=!1,this.numbers=[],this.bonusNumbers=[]}handleClientStylingChange(e,t){e!=t&&s(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(e,t){e!=t&&r(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(e,t){e!=t&&a(this.stylingContainer,`${this.mbSource}.Style`)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&a(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl))}connectedCallback(){let e=[];this.selectedNumbers.length>0&&(e=this.selectedNumbers.split(","),this.selectedCounter=e.length),this.secondaryNumbers.length>0&&(this.bonusNumbers=this.secondaryNumbers.split(",").map((e=>({number:e,selected:!0,selectable:this.selectable})))),this.displaySelected?e.forEach((e=>{this.numbers.push({number:e,selected:!0,selectable:this.selectable})})):Array.from({length:this.highNumber-this.lowNumber+1},((e,t)=>this.lowNumber+t)).map((e=>e.toString())).forEach((t=>{this.numbers.push({number:t,selected:e.indexOf(t)>=0,selectable:this.selectedCounter!=this.maximumAllowed&&this.selectable})}))}shuffleArray(e){const t=[];for(;e.length>0;){const i=Math.floor(Math.random()*e.length);t.push(e.splice(i,1)[0])}return t}lotteryBulletSelectionHandler(e){this.numbers=this.numbers.map((t=>({number:t.number,selected:t.number==e.detail.value?e.detail.selected:t.selected,selectable:t.selectable}))),e.detail.selected?(this.selectedCounter+=1,this.selectedCounter>=this.minimumAllowed&&this.selectedCounter<=this.maximumAllowed&&(this.numbers=this.numbers.map((e=>this.selectedCounter===this.maximumAllowed?{number:e.number,selected:e.selected,selectable:!!e.selected}:{number:e.number,selected:e.selected,selectable:!0})),JSON.parse(this.numberRange).includes(this.selectedCounter)?this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}):this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}))):(this.selectedCounter-=1,this.numbers=this.numbers.map((e=>({number:e.number,selected:e.selected,selectable:!0}))),0===this.selectedCounter&&this.gridClearAllEvent.emit(this.gridIndex),this.selectedCounter<this.minimumAllowed?this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}):this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}))}async resetSelectionHandler(e){e.detail&&e.detail.ticketId==this.ticketId&&e.detail.index===this.gridIndex&&(this.selectedCounter=0,this.numbers=this.numbers.map((e=>({number:e.number,selected:!1,selectable:this.selectable}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:[]}))}async autoSelectionHandler(e){if(e.detail&&e.detail.ticketId==this.ticketId&&e.detail.index===this.gridIndex){this.resetSelectionHandler(e);let t=Array.from({length:this.highNumber-this.lowNumber+1},((e,t)=>this.lowNumber+t));t=this.shuffleArray(t),t=t.slice(0,this.minimumAllowed),this.numbers=this.numbers.map((e=>({number:e.number,selected:t.indexOf(parseInt(e.number,10))>=0,selectable:!!this.partialQuickpickAvailable&&t.indexOf(parseInt(e.number,10))>=0}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((e=>e.selected)).map((e=>e.number))}),this.selectedCounter=this.minimumAllowed}}render(){return i("div",{key:"f62b5b1e5a6cf7bcaa13ce2c8a281bc93fa439f7",class:"GridContainer",ref:e=>this.stylingContainer=e},i("div",{key:"e381adbfff57e2cc343188c46037eb45ab798cac",class:"ticket"===this.gridType?"Grid TicketGrid":"Grid"},this.numbers.map((e=>i("div",null,i("lottery-bullet",{value:e.number,selectable:e.selectable,"is-selected":e.selected,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"mb-source":this.mbSource})))),this.bonusNumbers.length?this.bonusNumbers.map((e=>i("div",null,i("lottery-bullet",{value:e.number,selectable:e.selectable,"is-selected":e.selected,"is-bonus":!0,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"mb-source":this.mbSource})))):""))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};o.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}';export{l as lottery_bullet,o as lottery_grid}
1
+ import{r as t,c as e,h as i}from"./index-8e36e3ee.js";const s="__WIDGET_GLOBAL_STYLE_CACHE__";function r(t,e){if(t){const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)}}function a(t,e){if(!t||!e)return;const i=new URL(e);fetch(i.href).then((t=>t.text())).then((e=>{const i=document.createElement("style");i.innerHTML=e,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function o(t,e,i,r=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!r)return i=function(t,e){const i=document.createElement("style");return window.emMessageBus.subscribe(e,(e=>{t&&(i.innerHTML=e,t.appendChild(i))}))}(t,e),i;window[s]||(window[s]={}),i=function(t,e){return window.emMessageBus.subscribe(e,(i=>{if(!t)return;const r=t.getRootNode(),a=window[s];let o=a[e]?.sheet;o?a[e].refCount=a[e].refCount+1:(o=new CSSStyleSheet,o.replaceSync(i),a[e]={sheet:o,refCount:1});const l=r.adoptedStyleSheets||[];l.includes(o)||(r.adoptedStyleSheets=[...l,o])}))}(t,e);const a=i.unsubscribe.bind(i);return i.unsubscribe=()=>{if(window[s][e]){const t=window[s][e];t.refCount>1?t.refCount=t.refCount-1:delete window[s][e]}a()},i}const l=class{constructor(i){t(this,i),this.bulletEvent=e(this,"lotteryBulletSelection",7),this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))},this.value="0",this.selectable=!0,this.isSelected=!1,this.isBonus=!1,this.clientStyling="",this.clientStylingUrl="",this.mbSource=void 0}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&a(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&o(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&o(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl))}render(){return i("div",{key:"2cfab600728d3aa72f9f87e4e07a968ea030e415",class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":"")+(this.isBonus?" Bonus":""),onClick:()=>this.select(),ref:t=>this.stylingContainer=t},this.value)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};l.style='@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)}';const n=class{constructor(i){t(this,i),this.gridFilledEvent=e(this,"gridFilled",7),this.gridDirtyEvent=e(this,"gridDirty",7),this.gridClearAllEvent=e(this,"gridClearAllEvent",7),this.selectedCounter=0,this.ticketId=void 0,this.totalNumbers=0,this.gameId=void 0,this.maximumAllowed=7,this.minimumAllowed=3,this.numberRange=void 0,this.selectable=!0,this.selectedNumbers="",this.secondaryNumbers="",this.displaySelected=!1,this.language="en",this.gridIndex=void 0,this.gridType="",this.clientStyling="",this.clientStylingUrl="",this.mbSource=void 0,this.highNumber=47,this.lowNumber=1,this.selectionType="mainSelection",this.partialQuickpickAvailable=!1,this.numbers=[],this.bonusNumbers=[]}handleClientStylingChange(t,e){t!=e&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&a(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&o(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&o(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl))}connectedCallback(){let t=[];this.selectedNumbers.length>0&&(t=this.selectedNumbers.split(","),this.selectedCounter=t.length),this.secondaryNumbers.length>0&&(this.bonusNumbers=this.secondaryNumbers.split(",").map((t=>({number:t,selected:!0,selectable:this.selectable})))),this.displaySelected?t.forEach((t=>{this.numbers.push({number:t,selected:!0,selectable:this.selectable})})):Array.from({length:this.highNumber-this.lowNumber+1},((t,e)=>this.lowNumber+e)).map((t=>t.toString())).forEach((e=>{this.numbers.push({number:e,selected:t.indexOf(e)>=0,selectable:this.selectedCounter!=this.maximumAllowed&&this.selectable})}))}shuffleArray(t){const e=[];for(;t.length>0;){const i=Math.floor(Math.random()*t.length);e.push(t.splice(i,1)[0])}return e}lotteryBulletSelectionHandler(t){this.numbers=this.numbers.map((e=>({number:e.number,selected:e.number==t.detail.value?t.detail.selected:e.selected,selectable:e.selectable}))),t.detail.selected?(this.selectedCounter+=1,this.selectedCounter>=this.minimumAllowed&&this.selectedCounter<=this.maximumAllowed&&(this.numbers=this.numbers.map((t=>this.selectedCounter===this.maximumAllowed?{number:t.number,selected:t.selected,selectable:!!t.selected}:{number:t.number,selected:t.selected,selectable:!0})),JSON.parse(this.numberRange).includes(this.selectedCounter)?this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}):this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))):(this.selectedCounter-=1,this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!0}))),0===this.selectedCounter&&this.gridClearAllEvent.emit(this.gridIndex),this.selectedCounter<this.minimumAllowed?this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}):this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))}async resetSelectionHandler(t){t.detail&&t.detail.ticketId==this.ticketId&&t.detail.index===this.gridIndex&&(this.selectedCounter=0,this.numbers=this.numbers.map((t=>({number:t.number,selected:!1,selectable:this.selectable}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:[]}))}async autoSelectionHandler(t){if(t.detail&&t.detail.ticketId==this.ticketId&&t.detail.index===this.gridIndex){this.resetSelectionHandler(t);let e=Array.from({length:this.highNumber-this.lowNumber+1},((t,e)=>this.lowNumber+e));e=this.shuffleArray(e),e=e.slice(0,this.minimumAllowed),this.numbers=this.numbers.map((t=>({number:t.number,selected:e.indexOf(parseInt(t.number,10))>=0,selectable:!!this.partialQuickpickAvailable&&e.indexOf(parseInt(t.number,10))>=0}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectionType:this.selectionType,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}),this.selectedCounter=this.minimumAllowed}}render(){return i("div",{key:"f62b5b1e5a6cf7bcaa13ce2c8a281bc93fa439f7",class:"GridContainer",ref:t=>this.stylingContainer=t},i("div",{key:"e381adbfff57e2cc343188c46037eb45ab798cac",class:"ticket"===this.gridType?"Grid TicketGrid":"Grid"},this.numbers.map((t=>i("div",null,i("lottery-bullet",{value:t.number,selectable:t.selectable,"is-selected":t.selected,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"mb-source":this.mbSource})))),this.bonusNumbers.length?this.bonusNumbers.map((t=>i("div",null,i("lottery-bullet",{value:t.number,selectable:t.selectable,"is-selected":t.selected,"is-bonus":!0,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"mb-source":this.mbSource})))):""))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};n.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}';export{l as lottery_bullet,n as lottery_grid}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/lottery-grid",
3
- "version": "1.87.26",
3
+ "version": "1.87.27",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",