@everymatrix/helper-tabs 1.54.12 → 1.56.0

package/dist/cjs/helper-tab_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11d06848.js');
+const index = require('./index-08bd9c7c.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['en'];
@@ -76,6 +76,63 @@ const getTranslations = (data) => {
     });
 };
 
+/**
+ * @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 helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:var(--emw--button-text-color, #000);font-weight:normal}";
 const HelperTabStyle0 = helperTabCss;
 
@@ -93,42 +150,45 @@ const HelperTab = class {
         /**
          * Client custom styling via url content
          */
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
         /**
          * Language of the widget
          */
         this.language = 'en';
         this.tabContent = '';
-        this.limitStylingAppends = false;
-        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);
-        };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     componentWillLoad() {
         if (this.translationUrl) {
             getTranslations(JSON.parse(this.translationUrl));
         }
     }
-    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
-    }
     getHowToPlay() {
         if (this.lowNumber && this.highNumber && this.maxinumAllowed && this.minimumAllowed) {
             return translateWithParams('howToPlay', {
@@ -142,15 +202,19 @@ const HelperTab = class {
         return '';
     }
     render() {
-        this.tabContent = index.h("div", { key: 'fc177f5bed7e46d51e953094b8cce0afa5f46a45', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
+        this.tabContent = index.h("div", { key: '92877a17361066f68fce6299cb8f65901f6abc60', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
         if (this.selectedIndex + 1 == 2) {
-            this.tabContent = index.h("div", { key: '8de7f218079aedb48d3172a84139feaefbfd8a3e', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ol", { key: 'dc8131b1dae16dfd9ac39919ce1f53664a7438df' }, index.h("li", { key: '5c5e4a9213b5c645d5969b4ea7502b5ddfbcfd7e' }, translate('register', this.language)), index.h("li", { key: 'c72cd7fe80fd665a4567808e90352e2c82622a0e' }, translate('butTickets', this.language)), index.h("li", { key: 'b5340c61022856214cd6ff0a56013f2e3851ac10' }, translate('reviewPurchase', this.language))));
+            this.tabContent = index.h("div", { key: '9876b9250371034ef40dab0f5fc3fe1a5631a370', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ol", { key: 'ef2097eb54aeb640f06871277d8cafd2f4455109' }, index.h("li", { key: 'e9a0237e1fdead445abcd9240174276ffef81a67' }, translate('register', this.language)), index.h("li", { key: '2bdfaffdc9f1a7ae021913cb0ba346132140dcfd' }, translate('butTickets', this.language)), index.h("li", { key: 'bff38eaeabeaece83dc8ed1697e5b052802753f6' }, translate('reviewPurchase', this.language))));
         }
         else if (this.selectedIndex + 1 == 3) {
-            this.tabContent = index.h("div", { key: 'f7e86830283d2dea60cdc96ca1ee7f0589658a3c', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ul", { key: 'c8d950bfd1cfc933260cbbf0f3d9ab7de7a564e1' }, index.h("li", { key: '754ddb1278ab4004a6f0fc68dc8bda0750c04a19' }, translate('odds', this.language)), index.h("li", { key: '78e60f1e02bfd2e04b6f9535b74f3a16892a9c49' }, translate('winGame', this.language)), index.h("li", { key: '04a097cf10b0b9b6c16feafd46107e8a3874aa07' }, translate('claimPrize', this.language))));
+            this.tabContent = index.h("div", { key: '49a7fb3435fb50b54572ec38d1e632e2eacf56fb', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ul", { key: '7f642625f35a1ed1eae7655144c0b8b1bfe25f55' }, index.h("li", { key: '037a5913be57dd1e2dcde5a061e9c64e70365e8d' }, translate('odds', this.language)), index.h("li", { key: '8775a1b2e8eda285e2c248b8d7235f06ac593fc6' }, translate('winGame', this.language)), index.h("li", { key: '5297fc5e757c29a1349049f1fe294e926255d518' }, translate('claimPrize', this.language))));
         }
         return (this.tabContent);
     }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"]
+    }; }
 };
 HelperTab.style = HelperTabStyle0;
 
@@ -187,42 +251,49 @@ const HelperTabs = class {
         /**
          * Client custom styling via url content
          */
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
         /**
          * Language
          */
         this.language = 'en';
-        this.limitStylingAppends = false;
-        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);
-        };
     }
     connectedCallback() {
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            this.setClientStyling();
-            if (this.clientStylingUrlContent) {
-                this.setClientStylingURL();
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
             }
-            this.limitStylingAppends = true;
         }
-        // end custom styling area
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     render() {
-        return (index.h("div", { key: '4c75878234d57bf5e9a82ee926252bce3ba90b0f', ref: el => this.stylingContainer = el }, index.h("div", { key: '95faa7cc214b9dd96a1daacf36f1d637a8624e90', class: "Tabs" }, this.tabs.map((tab, index$1) => index.h("button", { class: 'TabButton' + (this.selectedIndex == index$1 ? ' Active' : ''), onClick: () => this.selectedIndex = index$1 }, tab.label))), index.h("div", { key: '787ecacb0c26b0712b9ebef99ff7be68d1eb4231' }, index.h("helper-tab", { key: 'df43a2347875f49446d2b85e63c257e527a6b3ab', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, language: this.language, "translation-url": this.translationUrl, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
+        return (index.h("div", { key: '173c4774748482dc56fcffb4bac4e1666fa9170f', ref: el => this.stylingContainer = el }, index.h("div", { key: '680b65218e4b00f134b354f593c0c20fb5882dca', class: "Tabs" }, this.tabs.map((tab, index$1) => index.h("button", { class: 'TabButton' + (this.selectedIndex == index$1 ? ' Active' : ''), onClick: () => this.selectedIndex = index$1 }, tab.label))), index.h("div", { key: '67aa26c92fb416c5d0934988fb071481f805685b' }, index.h("helper-tab", { key: '63c8dfc253d4fc12b0310a2585a44b90807e1a9f', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, language: this.language, "translation-url": this.translationUrl, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrl, "mb-source": this.mbSource }))));
     }
     get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"]
+    }; }
 };
 HelperTabs.style = HelperTabsStyle0;
 

package/dist/cjs/helper-tabs.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11d06848.js');
+const index = require('./index-08bd9c7c.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"mbSource":[1,"mb-source"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-11d06848.js → index-08bd9c7c.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'helper-tabs';
-const BUILD = /* helper-tabs */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, 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 = /* helper-tabs */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, 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.26.0 | MIT Licensed | https://stenciljs.com
@@ -856,14 +856,14 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender", void 0, elm);
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad", void 0, elm);
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -912,6 +912,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$ ;
@@ -921,6 +922,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);
       }
@@ -932,7 +945,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 */)) {
@@ -1072,6 +1088,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;
       }
@@ -1087,6 +1106,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       fireConnectedCallback(hostRef.$lazyInstance$, elm);
     } else {
@@ -1161,12 +1183,17 @@ var connectedCallback = (elm) => {
   }
 };
 var disconnectInstance = (instance, elm) => {
+  {
+    safeCall(instance, "disconnectedCallback", void 0, elm || instance);
+  }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-      hostRef.$onReadyPromise$.then(() => disconnectInstance());
+    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+      disconnectInstance(hostRef.$lazyInstance$, elm);
+    } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+      hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
     }
   }
   if (rootAppliedStyles.has(elm)) {
@@ -1195,6 +1222,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],
@@ -1210,6 +1238,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-11d06848.js');
+const index = require('./index-08bd9c7c.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([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"mbSource":[1,"mb-source"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/helper-tab/helper-tab.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { translate, translateWithParams, getTranslations } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class HelperTab {
     constructor() {
         /**
@@ -13,42 +14,45 @@ export class HelperTab {
         /**
          * Client custom styling via url content
          */
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
         /**
          * Language of the widget
          */
         this.language = 'en';
         this.tabContent = '';
-        this.limitStylingAppends = false;
-        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);
-        };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     componentWillLoad() {
         if (this.translationUrl) {
             getTranslations(JSON.parse(this.translationUrl));
         }
     }
-    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
-    }
     getHowToPlay() {
         if (this.lowNumber && this.highNumber && this.maxinumAllowed && this.minimumAllowed) {
             return translateWithParams('howToPlay', {
@@ -62,12 +66,12 @@ export class HelperTab {
         return '';
     }
     render() {
-        this.tabContent = h("div", { key: 'fc177f5bed7e46d51e953094b8cce0afa5f46a45', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
+        this.tabContent = h("div", { key: '92877a17361066f68fce6299cb8f65901f6abc60', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
         if (this.selectedIndex + 1 == 2) {
-            this.tabContent = h("div", { key: '8de7f218079aedb48d3172a84139feaefbfd8a3e', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: 'dc8131b1dae16dfd9ac39919ce1f53664a7438df' }, h("li", { key: '5c5e4a9213b5c645d5969b4ea7502b5ddfbcfd7e' }, translate('register', this.language)), h("li", { key: 'c72cd7fe80fd665a4567808e90352e2c82622a0e' }, translate('butTickets', this.language)), h("li", { key: 'b5340c61022856214cd6ff0a56013f2e3851ac10' }, translate('reviewPurchase', this.language))));
+            this.tabContent = h("div", { key: '9876b9250371034ef40dab0f5fc3fe1a5631a370', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: 'ef2097eb54aeb640f06871277d8cafd2f4455109' }, h("li", { key: 'e9a0237e1fdead445abcd9240174276ffef81a67' }, translate('register', this.language)), h("li", { key: '2bdfaffdc9f1a7ae021913cb0ba346132140dcfd' }, translate('butTickets', this.language)), h("li", { key: 'bff38eaeabeaece83dc8ed1697e5b052802753f6' }, translate('reviewPurchase', this.language))));
         }
         else if (this.selectedIndex + 1 == 3) {
-            this.tabContent = h("div", { key: 'f7e86830283d2dea60cdc96ca1ee7f0589658a3c', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: 'c8d950bfd1cfc933260cbbf0f3d9ab7de7a564e1' }, h("li", { key: '754ddb1278ab4004a6f0fc68dc8bda0750c04a19' }, translate('odds', this.language)), h("li", { key: '78e60f1e02bfd2e04b6f9535b74f3a16892a9c49' }, translate('winGame', this.language)), h("li", { key: '04a097cf10b0b9b6c16feafd46107e8a3874aa07' }, translate('claimPrize', this.language))));
+            this.tabContent = h("div", { key: '49a7fb3435fb50b54572ec38d1e632e2eacf56fb', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: '7f642625f35a1ed1eae7655144c0b8b1bfe25f55' }, h("li", { key: '037a5913be57dd1e2dcde5a061e9c64e70365e8d' }, translate('odds', this.language)), h("li", { key: '8775a1b2e8eda285e2c248b8d7235f06ac593fc6' }, translate('winGame', this.language)), h("li", { key: '5297fc5e757c29a1349049f1fe294e926255d518' }, translate('claimPrize', this.language))));
         }
         return (this.tabContent);
     }
@@ -124,6 +128,25 @@ export class HelperTab {
                 "attribute": "cms-endpoint",
                 "reflect": true
             },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via streamStyling"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mb-source",
+                "reflect": false
+            },
             "clientStyling": {
                 "type": "string",
                 "mutable": false,
@@ -144,7 +167,7 @@ export class HelperTab {
                 "reflect": true,
                 "defaultValue": "''"
             },
-            "clientStylingUrlContent": {
+            "clientStylingUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -160,7 +183,7 @@ export class HelperTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "client-styling-url-content",
+                "attribute": "client-styling-url",
                 "reflect": true,
                 "defaultValue": "''"
             },
@@ -283,8 +306,16 @@ export class HelperTab {
     }
     static get states() {
         return {
-            "tabContent": {},
-            "limitStylingAppends": {}
+            "tabContent": {}
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingChangeURL"
+            }];
+    }
 }