@everymatrix/lottery-grid 1.76.12 → 1.76.13

package/dist/cjs/{index-066eab2b.js → index-7c689bd6.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'lottery-grid';
-const BUILD = /* lottery-grid */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, 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: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, 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: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* lottery-grid */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, 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: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, 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: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -828,14 +828,14 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender");
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad");
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -887,6 +887,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -896,6 +897,18 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
     if (instance) {
+      if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+        const watchMethods = cmpMeta.$watchers$[propName];
+        if (watchMethods) {
+          watchMethods.map((watchMethodName) => {
+            try {
+              instance[watchMethodName](newVal, oldVal, propName);
+            } catch (e) {
+              consoleError(e, elm);
+            }
+          });
+        }
+      }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
         scheduleUpdate(hostRef, false);
       }
@@ -907,7 +920,10 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || BUILD.watchCallback ) {
+  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (Cstr.watchers && !cmpMeta.$watchers$) {
+      cmpMeta.$watchers$ = Cstr.watchers;
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -989,6 +1005,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
+        {
+          cmpMeta.$watchers$ = Cstr.watchers;
+        }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
@@ -1004,6 +1023,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
@@ -1113,6 +1135,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1131,6 +1154,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$attrsToReflect$ = [];
       }
+      {
+        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+      }
       const tagName = cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-066eab2b.js');
+const index = require('./index-7c689bd6.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/lottery-bullet_2.cjs.entry.js

@@ -2,7 +2,64 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-066eab2b.js');
+const index = require('./index-7c689bd6.js');
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @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
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
 
 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--button-text-color, #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-gray-transparency-100, rgb(255, 255, 255));background:radial-gradient(circle at top, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);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-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-50, #F1F1F1) 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-gray-transparency-100, rgb(255, 255, 255));background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--button-border-color, #00958f)}.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, #F1F1F1);background:var(--emw--color-gray-100, #D4D4D4);border:solid 2px var(--emw--color-gray-100, #D4D4D4);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, #F1F1F1);background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--color-gray-100, #D4D4D4);cursor:default}.Circle.Bonus{background:var(--emw--color-error, #FF3D00)}";
 const LotteryBulletStyle0 = lotteryBulletCss;
@@ -20,40 +77,47 @@ const LotteryBullet = class {
                 });
             }
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let cssFile = document.createElement('style');
-            setTimeout(() => {
-                cssFile.innerHTML = this.clientStylingUrlContent;
-                this.stylingContainer.prepend(cssFile);
-            }, 1);
-        };
         this.value = '0';
         this.selectable = true;
         this.isSelected = false;
         this.isBonus = false;
         this.clientStyling = '';
-        this.clientStylingUrlContent = '';
-        this.limitStylingAppends = false;
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
             if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrlContent)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
-        // end custom styling area
     }
     render() {
-        return (index.h("div", { key: 'a21cbee8f556bfbbe9f97be5f44bfc08b6f24dd6', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
+        return (index.h("div", { key: '2cfab600728d3aa72f9f87e4e07a968ea030e415', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
     }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
 };
 LotteryBullet.style = LotteryBulletStyle0;
 
@@ -67,18 +131,6 @@ const LotteryGrid = class {
         this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
         this.gridClearAllEvent = index.createEvent(this, "gridClearAllEvent", 7);
         this.selectedCounter = 0;
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let cssFile = document.createElement('style');
-            setTimeout(() => {
-                cssFile.innerHTML = this.clientStylingUrlContent;
-                this.stylingContainer.prepend(cssFile);
-            }, 1);
-        };
         this.ticketId = undefined;
         this.totalNumbers = 0;
         this.gameId = undefined;
@@ -93,14 +145,39 @@ const LotteryGrid = class {
         this.gridIndex = undefined;
         this.gridType = '';
         this.clientStyling = '';
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
         this.highNumber = 47;
         this.lowNumber = 1;
         this.selectionType = 'mainSelection';
         this.partialQuickpickAvailable = false;
         this.numbers = [];
         this.bonusNumbers = [];
-        this.limitStylingAppends = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
     }
     connectedCallback() {
         let selected = [];
@@ -137,17 +214,6 @@ const LotteryGrid = class {
             });
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrlContent)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
-        }
-        // end custom styling area
-    }
     // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
     shuffleArray(array) {
         const result = [];
@@ -273,8 +339,13 @@ const LotteryGrid = class {
         }
     }
     render() {
-        return (index.h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
+        return (index.h("div", { key: 'f62b5b1e5a6cf7bcaa13ce2c8a281bc93fa439f7', class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { key: 'e381adbfff57e2cc343188c46037eb45ab798cac', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))) : '')));
     }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
 };
 LotteryGrid.style = LotteryGridStyle0;
 

package/dist/cjs/lottery-grid.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-066eab2b.js');
+const index = require('./index-7c689bd6.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/lottery-grid/lottery-grid.js

@@ -1,20 +1,9 @@
 import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import "../../../../../lottery-bullet/dist/types/index";
 export class LotteryGrid {
     constructor() {
         this.selectedCounter = 0;
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let cssFile = document.createElement('style');
-            setTimeout(() => {
-                cssFile.innerHTML = this.clientStylingUrlContent;
-                this.stylingContainer.prepend(cssFile);
-            }, 1);
-        };
         this.ticketId = undefined;
         this.totalNumbers = 0;
         this.gameId = undefined;
@@ -29,14 +18,39 @@ export class LotteryGrid {
         this.gridIndex = undefined;
         this.gridType = '';
         this.clientStyling = '';
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
         this.highNumber = 47;
         this.lowNumber = 1;
         this.selectionType = 'mainSelection';
         this.partialQuickpickAvailable = false;
         this.numbers = [];
         this.bonusNumbers = [];
-        this.limitStylingAppends = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
     }
     connectedCallback() {
         let selected = [];
@@ -73,17 +87,6 @@ export class LotteryGrid {
             });
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrlContent)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
-        }
-        // end custom styling area
-    }
     // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
     shuffleArray(array) {
         const result = [];
@@ -209,7 +212,7 @@ export class LotteryGrid {
         }
     }
     render() {
-        return (h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
+        return (h("div", { key: 'f62b5b1e5a6cf7bcaa13ce2c8a281bc93fa439f7', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: 'e381adbfff57e2cc343188c46037eb45ab798cac', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))) : '')));
     }
     static get is() { return "lottery-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -473,7 +476,7 @@ export class LotteryGrid {
                 "reflect": true,
                 "defaultValue": "''"
             },
-            "clientStylingUrlContent": {
+            "clientStylingUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -487,10 +490,27 @@ export class LotteryGrid {
                     "tags": [],
                     "text": "Client custom styling via url content"
                 },
-                "attribute": "client-styling-url-content",
+                "attribute": "client-styling-url",
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
             "highNumber": {
                 "type": "number",
                 "mutable": false,
@@ -568,8 +588,7 @@ export class LotteryGrid {
     static get states() {
         return {
             "numbers": {},
-            "bonusNumbers": {},
-            "limitStylingAppends": {}
+            "bonusNumbers": {}
         };
     }
     static get events() {
@@ -632,6 +651,18 @@ export class LotteryGrid {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "lotteryBulletSelection",

package/dist/esm/{index-14a3a545.js → index-8e36e3ee.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'lottery-grid';
-const BUILD = /* lottery-grid */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, 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: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, 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: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* lottery-grid */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, 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: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, 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: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -806,14 +806,14 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender");
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad");
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -865,6 +865,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -874,6 +875,18 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
     if (instance) {
+      if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+        const watchMethods = cmpMeta.$watchers$[propName];
+        if (watchMethods) {
+          watchMethods.map((watchMethodName) => {
+            try {
+              instance[watchMethodName](newVal, oldVal, propName);
+            } catch (e) {
+              consoleError(e, elm);
+            }
+          });
+        }
+      }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
         scheduleUpdate(hostRef, false);
       }
@@ -885,7 +898,10 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || BUILD.watchCallback ) {
+  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (Cstr.watchers && !cmpMeta.$watchers$) {
+      cmpMeta.$watchers$ = Cstr.watchers;
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -967,6 +983,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
+        {
+          cmpMeta.$watchers$ = Cstr.watchers;
+        }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
@@ -982,6 +1001,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
@@ -1091,6 +1113,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1109,6 +1132,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$attrsToReflect$ = [];
       }
+      {
+        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+      }
       const tagName = cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-14a3a545.js';
-export { s as setNonce } from './index-14a3a545.js';
+import { b as bootstrapLazy } from './index-8e36e3ee.js';
+export { s as setNonce } from './index-8e36e3ee.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/lottery-bullet_2.entry.js

@@ -1,4 +1,61 @@
-import { r as registerInstance, c as createEvent, h } from './index-14a3a545.js';
+import { r as registerInstance, c as createEvent, h } from './index-8e36e3ee.js';
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @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
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
 
 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--button-text-color, #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-gray-transparency-100, rgb(255, 255, 255));background:radial-gradient(circle at top, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);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-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-50, #F1F1F1) 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-gray-transparency-100, rgb(255, 255, 255));background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--button-border-color, #00958f)}.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, #F1F1F1);background:var(--emw--color-gray-100, #D4D4D4);border:solid 2px var(--emw--color-gray-100, #D4D4D4);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, #F1F1F1);background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--color-gray-100, #D4D4D4);cursor:default}.Circle.Bonus{background:var(--emw--color-error, #FF3D00)}";
 const LotteryBulletStyle0 = lotteryBulletCss;
@@ -16,40 +73,47 @@ const LotteryBullet = class {
                 });
             }
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let cssFile = document.createElement('style');
-            setTimeout(() => {
-                cssFile.innerHTML = this.clientStylingUrlContent;
-                this.stylingContainer.prepend(cssFile);
-            }, 1);
-        };
         this.value = '0';
         this.selectable = true;
         this.isSelected = false;
         this.isBonus = false;
         this.clientStyling = '';
-        this.clientStylingUrlContent = '';
-        this.limitStylingAppends = false;
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
             if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrlContent)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
-        // end custom styling area
     }
     render() {
-        return (h("div", { key: 'a21cbee8f556bfbbe9f97be5f44bfc08b6f24dd6', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
+        return (h("div", { key: '2cfab600728d3aa72f9f87e4e07a968ea030e415', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : '') + (this.isBonus ? ' Bonus' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
     }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
 };
 LotteryBullet.style = LotteryBulletStyle0;
 
@@ -63,18 +127,6 @@ const LotteryGrid = class {
         this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
         this.gridClearAllEvent = createEvent(this, "gridClearAllEvent", 7);
         this.selectedCounter = 0;
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let cssFile = document.createElement('style');
-            setTimeout(() => {
-                cssFile.innerHTML = this.clientStylingUrlContent;
-                this.stylingContainer.prepend(cssFile);
-            }, 1);
-        };
         this.ticketId = undefined;
         this.totalNumbers = 0;
         this.gameId = undefined;
@@ -89,14 +141,39 @@ const LotteryGrid = class {
         this.gridIndex = undefined;
         this.gridType = '';
         this.clientStyling = '';
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
         this.highNumber = 47;
         this.lowNumber = 1;
         this.selectionType = 'mainSelection';
         this.partialQuickpickAvailable = false;
         this.numbers = [];
         this.bonusNumbers = [];
-        this.limitStylingAppends = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
     }
     connectedCallback() {
         let selected = [];
@@ -133,17 +210,6 @@ const LotteryGrid = class {
             });
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrlContent)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
-        }
-        // end custom styling area
-    }
     // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
     shuffleArray(array) {
         const result = [];
@@ -269,8 +335,13 @@ const LotteryGrid = class {
         }
     }
     render() {
-        return (h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
+        return (h("div", { key: 'f62b5b1e5a6cf7bcaa13ce2c8a281bc93fa439f7', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: 'e381adbfff57e2cc343188c46037eb45ab798cac', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))) : '')));
     }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
 };
 LotteryGrid.style = LotteryGridStyle0;
 

package/dist/esm/lottery-grid.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-14a3a545.js';
-export { s as setNonce } from './index-14a3a545.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-8e36e3ee.js';
+export { s as setNonce } from './index-8e36e3ee.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"numberRange":[513,"number-range"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"secondaryNumbers":[513,"secondary-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"highNumber":[514,"high-number"],"lowNumber":[514,"low-number"],"selectionType":[513,"selection-type"],"partialQuickpickAvailable":[516,"partial-quickpick-available"],"numbers":[32],"bonusNumbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"isBonus":[516,"is-bonus"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 });

package/dist/lottery-grid/{index-14a3a545.js → index-8e36e3ee.js}

@@ -1,2 +1,2 @@
-var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),p=!1,m=[],y=[],$=(e,t)=>n=>{e.push(n),p||(p=!0,t&&4&f.l?w(b):f.raf(b))},v=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},b=()=>{v(m),v(y),(p=m.length>0)&&f.raf(b)},w=e=>h().then(e),g=$(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>R});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},R=e=>{if(e.isErr)return e.value;throw e.value},T=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?A(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=A(e,null);return u.u=t,i.length>0&&(u.h=i),u.p=o,u},A=(e,t)=>({l:0,m:e,i:t,$:null,h:null,u:null,p:null}),F={},N=(e,t,l)=>{const o=(e=>n(e).$hostElement$)(e);return{emit:e=>U(o,t,{bubbles:!!(4&l),composed:!!(2&l),cancelable:!!(1&l),detail:e})}},U=(e,t,n)=>{const l=f.ce(t,n);return e.dispatchEvent(l),l},D=new WeakMap,H=e=>"sc-"+e.v,L=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=q(n),s=q(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(G);t=t.replace(V,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},W=/\s/,q=e=>e?e.split(W):[],G="Capture",V=RegExp(G+"$"),_=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of z(Object.keys(o)))e in s||L(l,e,o[e],void 0,n,t.l);for(const e of z(Object.keys(s)))L(l,e,o[e],s[e],n,t.l)};function z(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var B=!1,I=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=a.createTextNode(l.i);else if(o=l.$=a.createElement(l.m),_(null,l,B),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=I(e,l,r),s&&o.appendChild(s);return o["s-hn"]=x,o},J=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=I(null,n,o),r&&(l[o].$=r,Z(i,r,t)))},K=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;Y(t),e&&e.remove()}}},Q=(e,t,n=!1)=>e.m===t.m&&(!!n||e.p===t.p),X=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(_(e,t,B),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],d=t[f],p=l.length-1,m=l[0],y=l[p];for(;i<=f&&c<=p;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==m)m=l[++c];else if(null==y)y=l[--p];else if(Q(h,m,o))X(h,m,o),h=t[++i],m=l[++c];else if(Q(d,y,o))X(d,y,o),d=t[--f],y=l[--p];else if(Q(h,y,o))X(h,y,o),Z(e,h.$,d.$.nextSibling),h=t[++i],y=l[--p];else if(Q(d,m,o))X(d,m,o),Z(e,d.$,h.$),d=t[--f],m=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].p&&t[a].p===m.p){u=a;break}u>=0?(r=t[u],r.m!==m.m?s=I(t&&t[c],n,u):(X(r,m,o),t[u]=void 0,s=r.$),m=l[++c]):(s=I(t&&t[c],n,c),m=l[++c]),s&&Z(h.$.parentNode,s,h.$)}i>f?J(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&K(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),J(l,null,t,s,0,s.length-1)):null!==o&&K(o,0,o.length-1)):e.i!==r&&(l.data=r)},Y=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(Y)},Z=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),ee=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},te=(e,t)=>{if(e.l|=16,!(4&e.l))return ee(e,e.j),g((()=>ne(e,t)));e.l|=512},ne=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);return t&&(e.l|=256,e.k&&(e.k.map((([e,t])=>ue(n,e,t))),e.k=void 0)),le(void 0,(()=>se(e,n,t)))},le=(e,t)=>oe(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),oe=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,se=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.O,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=H(t),o=i.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,r=D.get(e=e.head||e);if(r||D.set(e,r=new Set),!r.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.C)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);re(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>ie(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},re=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.O,s=e.M||A(null,null),r=(e=>e&&e.m===F)(t)?t:T(null,null,t);if(x=l.tagName,o.P&&(r.u=r.u||{},o.P.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.m=null,r.l|=4,e.M=r,r.$=s.$=l.shadowRoot||l,M=l["s-sc"],X(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},ie=e=>{const t=e.$hostElement$,n=e.j;ue(e.t,"componentDidRender"),64&e.l||(e.l|=64,ae(t),e.R(t),n||ce()),e.S&&(e.S(),e.S=void 0),512&e.l&&w((()=>te(e,!1))),e.l&=-517},ce=()=>{ae(a.documentElement),w((()=>U(u,"appload",{detail:{namespace:"lottery-grid"}})))},ue=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ae=e=>e.classList.add("hydrated"),fe=(e,t,l)=>{var o,s;const r=e.prototype;if(t.T){const i=Object.entries(null!=(o=t.T)?o:{});if(i.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(r,e,{get(){return((e,t)=>n(this).A.get(t))(0,e)},set(l){((e,t,l,o)=>{const s=n(e);if(!s)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const r=s.A.get(t),i=s.l,c=s.t;l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.T[t][0]),8&i&&void 0!==r||l===r||Number.isNaN(r)&&Number.isNaN(l)||(s.A.set(t,l),c&&2==(18&i)&&te(s,!1))})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;r.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var i;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(r.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),r=null==l?void 0:l.l;if(r&&!(8&r)&&128&r&&s!==o){const n=l.t,r=null==(i=t.F)?void 0:i[e];null==r||r.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=t.F)?s:{}),...i.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.P)||o.push([e,s])),s}))]))}}return e},he=e=>{ue(e,"connectedCallback")},de=(e,l={})=>{var o;const h=[],p=l.exclude||[],m=u.customElements,y=a.head,$=y.querySelector("meta[charset]"),v=a.createElement("style"),b=[];let w,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{const o={l:l[0],v:l[1],T:l[2],N:l[3]};4&o.l&&(S=!0),o.T=l[2],o.N=l[3],o.P=[];const c=o.v,u=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,O:n,A:new Map};l.U=new Promise((e=>l.R=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,o),1&o.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${o.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){const e=n(this);this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0,pe(this,e,o.N)),w&&(clearTimeout(w),w=null),g?b.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.O,o=()=>{};if(1&t.l)pe(e,t,l.N),(null==t?void 0:t.t)?he(t.t):(null==t?void 0:t.U)&&t.U.then((()=>he(t.t)));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){ee(t,t.j=n);break}}l.T&&Object.entries(l.T).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.D){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.D;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.H}" was not found`);l.isProxied||(fe(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,o(),he(t.t)}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=H(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);d&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>te(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);e.L&&(e.L.map((e=>e())),e.L=void 0),(null==e?void 0:e.t)||(null==e?void 0:e.U)&&e.U.then((()=>{}))}})()))}componentOnReady(){return n(this).U}};o.D=e[0],p.includes(c)||m.get(c)||(h.push(c),m.define(c,fe(u,o,1)))}))})),h.length>0&&(S&&(v.textContent+=c),v.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(o=f.C)?o:k(a);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,$?$.nextSibling:y.firstChild)}g=!1,b.length?b.map((e=>e.connectedCallback())):f.jmp((()=>w=setTimeout(ce,30)))},pe=(e,t,n)=>{n&&n.map((([n,l,o])=>{const s=ye(e,n),r=me(t,o),i=$e(n);f.ael(s,l,r,i),(t.L=t.L||[]).push((()=>f.rel(s,l,r,i)))}))},me=(e,t)=>n=>{var l;try{256&e.l?null==(l=e.t)||l[t](n):(e.k=e.k||[]).push([t,n])}catch(e){s(e)}},ye=(e,t)=>4&t?a:e,$e=e=>({passive:!!(1&e),capture:!!(2&e)}),ve=e=>f.C=e;export{de as b,N as c,T as h,h as p,l as r,ve as s}
+var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),p=!1,m=[],y=[],$=(e,t)=>n=>{e.push(n),p||(p=!0,t&&4&f.l?w(b):f.raf(b))},v=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},b=()=>{v(m),v(y),(p=m.length>0)&&f.raf(b)},w=e=>h().then(e),g=$(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>R});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},R=e=>{if(e.isErr)return e.value;throw e.value},T=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?A(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=A(e,null);return u.u=t,i.length>0&&(u.h=i),u.p=o,u},A=(e,t)=>({l:0,m:e,i:t,$:null,h:null,u:null,p:null}),F={},L=(e,t,l)=>{const o=(e=>n(e).$hostElement$)(e);return{emit:e=>N(o,t,{bubbles:!!(4&l),composed:!!(2&l),cancelable:!!(1&l),detail:e})}},N=(e,t,n)=>{const l=f.ce(t,n);return e.dispatchEvent(l),l},U=new WeakMap,D=e=>"sc-"+e.v,H=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=q(n),s=q(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(G);t=t.replace(V,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},W=/\s/,q=e=>e?e.split(W):[],G="Capture",V=RegExp(G+"$"),_=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of z(Object.keys(o)))e in s||H(l,e,o[e],void 0,n,t.l);for(const e of z(Object.keys(s)))H(l,e,o[e],s[e],n,t.l)};function z(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var B=!1,I=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=a.createTextNode(l.i);else if(o=l.$=a.createElement(l.m),_(null,l,B),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=I(e,l,r),s&&o.appendChild(s);return o["s-hn"]=x,o},J=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=I(null,n,o),r&&(l[o].$=r,Z(i,r,t)))},K=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;Y(t),e&&e.remove()}}},Q=(e,t,n=!1)=>e.m===t.m&&(!!n||e.p===t.p),X=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(_(e,t,B),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],d=t[f],p=l.length-1,m=l[0],y=l[p];for(;i<=f&&c<=p;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==m)m=l[++c];else if(null==y)y=l[--p];else if(Q(h,m,o))X(h,m,o),h=t[++i],m=l[++c];else if(Q(d,y,o))X(d,y,o),d=t[--f],y=l[--p];else if(Q(h,y,o))X(h,y,o),Z(e,h.$,d.$.nextSibling),h=t[++i],y=l[--p];else if(Q(d,m,o))X(d,m,o),Z(e,d.$,h.$),d=t[--f],m=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].p&&t[a].p===m.p){u=a;break}u>=0?(r=t[u],r.m!==m.m?s=I(t&&t[c],n,u):(X(r,m,o),t[u]=void 0,s=r.$),m=l[++c]):(s=I(t&&t[c],n,c),m=l[++c]),s&&Z(h.$.parentNode,s,h.$)}i>f?J(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&K(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),J(l,null,t,s,0,s.length-1)):null!==o&&K(o,0,o.length-1)):e.i!==r&&(l.data=r)},Y=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(Y)},Z=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),ee=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},te=(e,t)=>{if(e.l|=16,!(4&e.l))return ee(e,e.j),g((()=>ne(e,t)));e.l|=512},ne=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);return t&&(e.l|=256,e.k&&(e.k.map((([e,t])=>ue(n,e,t))),e.k=void 0)),le(void 0,(()=>se(e,n,t)))},le=(e,t)=>oe(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),oe=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,se=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.O,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=D(t),o=i.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,r=U.get(e=e.head||e);if(r||U.set(e,r=new Set),!r.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.C)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);re(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>ie(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},re=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.O,s=e.M||A(null,null),r=(e=>e&&e.m===F)(t)?t:T(null,null,t);if(x=l.tagName,o.P&&(r.u=r.u||{},o.P.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.m=null,r.l|=4,e.M=r,r.$=s.$=l.shadowRoot||l,M=l["s-sc"],X(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},ie=e=>{const t=e.$hostElement$,n=e.t,l=e.j;64&e.l||(e.l|=64,ae(t),ue(n,"componentDidLoad"),e.R(t),l||ce()),e.S&&(e.S(),e.S=void 0),512&e.l&&w((()=>te(e,!1))),e.l&=-517},ce=()=>{ae(a.documentElement),w((()=>N(u,"appload",{detail:{namespace:"lottery-grid"}})))},ue=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ae=e=>e.classList.add("hydrated"),fe=(e,t,l)=>{var o,r;const i=e.prototype;if(t.T||t.A||e.watchers){e.watchers&&!t.A&&(t.A=e.watchers);const c=Object.entries(null!=(o=t.T)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).F.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.F.get(t),u=r.l,a=r.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.T[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.F.set(t,l),a)){if(o.A&&128&u){const e=o.A[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&u)&&te(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.A)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.A)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.P)||o.push([e,s])),s}))]))}}return e},he=e=>{ue(e,"connectedCallback")},de=(e,l={})=>{var o;const h=[],p=l.exclude||[],m=u.customElements,y=a.head,$=y.querySelector("meta[charset]"),v=a.createElement("style"),b=[];let w,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],T:l[2],L:l[3]};4&c.l&&(S=!0),c.T=l[2],c.L=l[3],c.P=[],c.A=null!=(o=l[4])?o:{};const u=c.v,a=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,O:n,F:new Map};l.N=new Promise((e=>l.R=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){const e=n(this);this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0,pe(this,e,c.L)),w&&(clearTimeout(w),w=null),g?b.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.O,o=()=>{};if(1&t.l)pe(e,t,l.L),(null==t?void 0:t.t)?he(t.t):(null==t?void 0:t.N)&&t.N.then((()=>he(t.t)));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){ee(t,t.j=n);break}}l.T&&Object.entries(l.T).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.U){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.U;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.D}" was not found`);l.isProxied||(n.A=l.watchers,fe(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o(),he(t.t)}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=D(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);d&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>te(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);e.H&&(e.H.map((e=>e())),e.H=void 0),(null==e?void 0:e.t)||(null==e?void 0:e.N)&&e.N.then((()=>{}))}})()))}componentOnReady(){return n(this).N}};c.U=e[0],p.includes(u)||m.get(u)||(h.push(u),m.define(u,fe(a,c,1)))}))})),h.length>0&&(S&&(v.textContent+=c),v.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(o=f.C)?o:k(a);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,$?$.nextSibling:y.firstChild)}g=!1,b.length?b.map((e=>e.connectedCallback())):f.jmp((()=>w=setTimeout(ce,30)))},pe=(e,t,n)=>{n&&n.map((([n,l,o])=>{const s=ye(e,n),r=me(t,o),i=$e(n);f.ael(s,l,r,i),(t.H=t.H||[]).push((()=>f.rel(s,l,r,i)))}))},me=(e,t)=>n=>{var l;try{256&e.l?null==(l=e.t)||l[t](n):(e.k=e.k||[]).push([t,n])}catch(e){s(e)}},ye=(e,t)=>4&t?a:e,$e=e=>({passive:!!(1&e),capture:!!(2&e)}),ve=e=>f.C=e;export{de as b,L as c,T as h,h as p,l as r,ve as s}

package/dist/lottery-grid/lottery-bullet_2.entry.js

@@ -1 +1 @@
-import{r as t,c as e,h as i}from"./index-14a3a545.js";const s=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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)},this.value="0",this.selectable=!0,this.isSelected=!1,this.isBonus=!1,this.clientStyling="",this.clientStylingUrlContent="",this.limitStylingAppends=!1}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return i("div",{key:"a21cbee8f556bfbbe9f97be5f44bfc08b6f24dd6",class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":"")+(this.isBonus?" Bonus":""),onClick:()=>this.select(),ref:t=>this.stylingContainer=t},this.value)}};s.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--button-text-color, #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-gray-transparency-100, rgb(255, 255, 255));background:radial-gradient(circle at top, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);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-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-50, #F1F1F1) 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-gray-transparency-100, rgb(255, 255, 255));background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--button-border-color, #00958f)}.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, #F1F1F1);background:var(--emw--color-gray-100, #D4D4D4);border:solid 2px var(--emw--color-gray-100, #D4D4D4);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, #F1F1F1);background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--color-gray-100, #D4D4D4);cursor:default}.Circle.Bonus{background:var(--emw--color-error, #FF3D00)}';const r=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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)},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.clientStylingUrlContent="",this.highNumber=47,this.lowNumber=1,this.selectionType="mainSelection",this.partialQuickpickAvailable=!1,this.numbers=[],this.bonusNumbers=[],this.limitStylingAppends=!1}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})}))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}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:"8ad436904a126e6bee036c7372cf45c075022e5f",class:"GridContainer",ref:t=>this.stylingContainer=t},i("div",{key:"5a8818209485f0808a99978910f6f26473dd6f59",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-content":this.clientStylingUrlContent})))),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-content":this.clientStylingUrlContent})))):""))}};r.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{s as lottery_bullet,r as lottery_grid}
+import{r as t,c as e,h as i}from"./index-8e36e3ee.js";function s(t,e){if(t){const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)}}function r(t,e){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 a(t,e){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{i.innerHTML=e,t&&t.appendChild(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&&s(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&r(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&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: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--button-text-color, #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-gray-transparency-100, rgb(255, 255, 255));background:radial-gradient(circle at top, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-transparency-100, rgb(255, 255, 255)) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);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-gray-transparency-100, rgb(255, 255, 255)) 0%, var(--emw--color-gray-50, #F1F1F1) 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-gray-transparency-100, rgb(255, 255, 255));background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--button-border-color, #00958f)}.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, #F1F1F1);background:var(--emw--color-gray-100, #D4D4D4);border:solid 2px var(--emw--color-gray-100, #D4D4D4);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, #F1F1F1);background:var(--emw--color-primary, #9EC258);background:-webkit-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:-moz-radial-gradient(top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));background:radial-gradient(circle at top, var(--emw--button-background-color, #00958f), var(--emw--color-primary-variant, #004D4A));border:solid 2px var(--emw--color-gray-100, #D4D4D4);cursor:default}.Circle.Bonus{background:var(--emw--color-error, #FF3D00)}';const o=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&&s(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&r(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&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 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"]}}};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}

package/dist/lottery-grid/lottery-grid.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./index-14a3a545.js";export{s as setNonce}from"./index-14a3a545.js";import{g as l}from"./app-globals-0f993ce5.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((async e=>(await l(),t([["lottery-bullet_2",[[1,"lottery-grid",{ticketId:[514,"ticket-id"],totalNumbers:[514,"total-numbers"],gameId:[513,"game-id"],maximumAllowed:[514,"maximum-allowed"],minimumAllowed:[514,"minimum-allowed"],numberRange:[513,"number-range"],selectable:[516],selectedNumbers:[513,"selected-numbers"],secondaryNumbers:[513,"secondary-numbers"],displaySelected:[516,"display-selected"],language:[513],gridIndex:[514,"grid-index"],gridType:[513,"grid-type"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],highNumber:[514,"high-number"],lowNumber:[514,"low-number"],selectionType:[513,"selection-type"],partialQuickpickAvailable:[516,"partial-quickpick-available"],numbers:[32],bonusNumbers:[32],limitStylingAppends:[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{value:[513],selectable:[516],isSelected:[516,"is-selected"],isBonus:[516,"is-bonus"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],limitStylingAppends:[32]}]]]],e))));
+import{p as e,b as l}from"./index-8e36e3ee.js";export{s as setNonce}from"./index-8e36e3ee.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const l=import.meta.url,t={};return""!==l&&(t.resourcesUrl=new URL(".",l).href),e(t)})().then((async e=>(await t(),l([["lottery-bullet_2",[[1,"lottery-grid",{ticketId:[514,"ticket-id"],totalNumbers:[514,"total-numbers"],gameId:[513,"game-id"],maximumAllowed:[514,"maximum-allowed"],minimumAllowed:[514,"minimum-allowed"],numberRange:[513,"number-range"],selectable:[516],selectedNumbers:[513,"selected-numbers"],secondaryNumbers:[513,"secondary-numbers"],displaySelected:[516,"display-selected"],language:[513],gridIndex:[514,"grid-index"],gridType:[513,"grid-type"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],mbSource:[513,"mb-source"],highNumber:[514,"high-number"],lowNumber:[514,"low-number"],selectionType:[513,"selection-type"],partialQuickpickAvailable:[516,"partial-quickpick-available"],numbers:[32],bonusNumbers:[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]],{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}],[1,"lottery-bullet",{value:[513],selectable:[516],isSelected:[516,"is-selected"],isBonus:[516,"is-bonus"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],mbSource:[513,"mb-source"]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}]]]],e))));

package/dist/types/components/lottery-grid/lottery-grid.d.ts

@@ -61,7 +61,11 @@ export declare class LotteryGrid {
     /**
      * Client custom styling via url content
      */
-    clientStylingUrlContent: string;
+    clientStylingUrl: string;
+    /**
+     * Client custom styling via message bus
+     */
+    mbSource: string;
     /**
      * Maximum number of the grid
      */
@@ -86,9 +90,9 @@ export declare class LotteryGrid {
      * Bonus selection numbers
      */
     bonusNumbers: Array<GridNumbers>;
-    private limitStylingAppends;
     private selectedCounter;
     private stylingContainer;
+    private stylingSubscription;
     /**
      * When the grid is completed, it emits this event with selected numbers
      */
@@ -101,11 +105,12 @@ export declare class LotteryGrid {
      * When all the selection of each bullet are cleared, it emits this event
      */
     gridClearAllEvent: EventEmitter<number>;
+    handleClientStylingChange(newValue: any, oldValue: any): void;
+    handleClientStylingUrlChange(newValue: any, oldValue: any): void;
+    handleMbSourceChange(newValue: any, oldValue: any): void;
+    componentDidLoad(): void;
     connectedCallback(): void;
-    componentDidRender(): void;
     shuffleArray(array: Array<any>): Array<any>;
-    setClientStyling: () => void;
-    setClientStylingURL: () => void;
     lotteryBulletSelectionHandler(event: CustomEvent<BulletEvent>): void;
     resetSelectionHandler(event: any): Promise<void>;
     autoSelectionHandler(event: any): Promise<void>;

package/dist/types/components.d.ts

@@ -16,7 +16,7 @@ export namespace Components {
         /**
           * Client custom styling via url content
          */
-        "clientStylingUrlContent": string;
+        "clientStylingUrl": string;
         /**
           * Show only selected numbers
          */
@@ -49,6 +49,10 @@ export namespace Components {
           * Number of maximum bullets that can be selected
          */
         "maximumAllowed": number;
+        /**
+          * Client custom styling via message bus
+         */
+        "mbSource": string;
         /**
           * Minimum allowed of bullets
          */
@@ -124,7 +128,7 @@ declare namespace LocalJSX {
         /**
           * Client custom styling via url content
          */
-        "clientStylingUrlContent"?: string;
+        "clientStylingUrl"?: string;
         /**
           * Show only selected numbers
          */
@@ -157,6 +161,10 @@ declare namespace LocalJSX {
           * Number of maximum bullets that can be selected
          */
         "maximumAllowed"?: number;
+        /**
+          * Client custom styling via message bus
+         */
+        "mbSource"?: string;
         /**
           * Minimum allowed of bullets
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-grid",
-  "version": "1.76.12",
+  "version": "1.76.13",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",