@everymatrix/lottery-subscription 0.12.0 → 0.12.1

package/dist/cjs/{index-a7f3c31f.js → index-ff6dc9b8.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'lottery-subscription';
-const BUILD = /* lottery-subscription */ { 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: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, 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, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: 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: true, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* lottery-subscription */ { 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: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, 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, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: 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: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -823,14 +823,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);
@@ -882,6 +882,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$ ;
@@ -891,6 +892,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);
       }
@@ -902,7 +915,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 */)) {
@@ -984,6 +1000,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;
       }
@@ -999,6 +1018,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
     } else {
       Cstr = elm.constructor;
@@ -1095,6 +1117,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],
@@ -1110,6 +1133,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/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lotterySubscription = require('./lottery-subscription-caef58b0.js');
-require('./index-a7f3c31f.js');
+const lotterySubscription = require('./lottery-subscription-602f10ec.js');
+require('./index-ff6dc9b8.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7f3c31f.js');
+const index = require('./index-ff6dc9b8.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-subscription.cjs",[[1,"lottery-subscription",{"translationUrl":[520,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"endpointSubscription":[513,"endpoint-subscription"],"language":[513],"gameName":[513,"game-name"],"isSubscribed":[32],"frequenceList":[32],"frequenceState":[32],"filterData":[32],"subscriptionCode":[32],"conditionId":[32],"paramId":[32],"conditionRule":[32],"paramRule":[32],"peroidRule":[32],"startDateRule":[32],"endDateRule":[32],"gameNameRule":[32],"ruleType":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-subscription.cjs",[[1,"lottery-subscription",{"translationUrl":[520,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"endpointSubscription":[513,"endpoint-subscription"],"language":[513],"gameName":[513,"game-name"],"isSubscribed":[32],"frequenceList":[32],"frequenceState":[32],"filterData":[32],"subscriptionCode":[32],"conditionId":[32],"paramId":[32],"conditionRule":[32],"paramRule":[32],"peroidRule":[32],"startDateRule":[32],"endDateRule":[32],"gameNameRule":[32],"ruleType":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{lottery-subscription-caef58b0.js → lottery-subscription-602f10ec.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a7f3c31f.js');
+const index = require('./index-ff6dc9b8.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
@@ -67,6 +67,63 @@ function fetchRequest(url, method = 'GET', body = null, headers = {}) {
     });
 }
 
+/**
+ * @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);
+      }
+    });
+  }
+}
+
 var jr=Object.defineProperty,qr=Object.defineProperties;var Yr=Object.getOwnPropertyDescriptors;var lo=Object.getOwnPropertySymbols;var Kr=Object.prototype.hasOwnProperty,Gr=Object.prototype.propertyIsEnumerable;var Mt=(s,t,e)=>t in s?jr(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e,we=(s,t)=>{for(var e in t||(t={}))Kr.call(t,e)&&Mt(s,e,t[e]);if(lo)for(var e of lo(t))Gr.call(t,e)&&Mt(s,e,t[e]);return s},Nt=(s,t)=>qr(s,Yr(t));var k=(s,t,e)=>(Mt(s,typeof t!="symbol"?t+"":t,e),e);var Ce=(s,t,e)=>new Promise((i,o)=>{var r=l=>{try{a(e.next(l));}catch(d){o(d);}},n=l=>{try{a(e.throw(l));}catch(d){o(d);}},a=l=>l.done?i(l.value):Promise.resolve(l.value).then(r,n);a((e=e.apply(s,t)).next());});/**
  * @license
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
@@ -8930,18 +8987,6 @@ const LotterySubscription = class {
         index.registerInstance(this, hostRef);
         this.subscriptionCompleted = index.createEvent(this, "subscriptionCompleted", 7);
         this.subscriptionCheckChange = index.createEvent(this, "subscriptionCheckChange", 7);
-        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.changeDateParam = () => {
             if (this.filterData.from && !this.filterData.to) {
                 let from = this.filterData.from;
@@ -9034,7 +9079,8 @@ const LotterySubscription = class {
         };
         this.translationUrl = undefined;
         this.clientStyling = '';
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
         this.endpoint = undefined;
         this.endpointTicket = undefined;
         this.endpointSubscription = undefined;
@@ -9054,7 +9100,6 @@ const LotterySubscription = class {
         this.endDateRule = undefined;
         this.gameNameRule = undefined;
         this.ruleType = '';
-        this.limitStylingAppends = false;
     }
     componentWillLoad() {
         if (this.translationUrl) {
@@ -9062,13 +9107,29 @@ const LotterySubscription = class {
         }
         this.getSubscriptionData();
     }
-    componentDidRender() {
-        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);
         }
     }
     transDate(from, to) {
@@ -9168,10 +9229,15 @@ const LotterySubscription = class {
         }
     }
     render() {
-        return (index.h("div", { key: '1bf289722935c5d2b574ba18f322830c81335585', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, index.h("vaadin-checkbox", { key: '5f62fb61bccecd3632525ab0b28a41e45487c7ec', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
-            index.h("div", { key: 'd8e56e346ca8f275866738ab9c6d8eb14437d84a', class: "secondConditon" }, index.h("span", { key: '13c61d7582b1e0716395bd06c410a621b8af97d8', style: { 'margin-right': '8px' } }, "Occurrence: "), index.h("vaadin-select", { key: 'cf8d9c4176f66d2095798cae79b82b748e7ffb0b', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
-                index.h("div", { key: 'c1496adac7e295830074da0b096bf4bbc0af8247', class: "thirdCondition" }, index.h("div", { key: '2aa4f92c84ab37edee56640ae0657f59e92c3719', class: "filterCalenderWrap" }, index.h("div", { key: '6665e3f2bd28650794eb174db6081ab4a9f514f0', class: "filterText" }, "Subscription Start Date*"), index.h("div", { key: '50a05e684bf068ab00d6d4298e65a6b94c44b79a', class: "filter" }, index.h("vaadin-date-picker", { value: this.filterData.from, key: "filterFromCalendar", max: this.filterData.to === undefined ? undefined : this.changeFormate(this.filterData.to), onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" }))), index.h("div", { key: '85c4bf037ad7bc9797f809aa7e71fcbfbc80c298', class: "filterCalenderWrap" }, index.h("div", { key: '87b446788202ae55ad698c8455c9a6d09a9d22d6', class: "filterText" }, "Subscription End Date"), index.h("div", { key: '5700c92b2f0c57959f84b5f7ac7a3488d1d0d096', class: "filter" }, index.h("vaadin-date-picker", { value: this.filterData.to, key: "filterToCalendar", min: this.filterData.from === undefined ? undefined : this.changeFormate(this.filterData.from), onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" })))))));
-    }
+        return (index.h("div", { key: 'f301b99245d1950605dbdfac1f4bc06c60ea0c50', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, index.h("vaadin-checkbox", { key: 'e9005320778ae1d66975e7825b5259fa2bca36d2', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
+            index.h("div", { key: '9dc052565ef92bb4c00559766b933e4bf567c1a7', class: "secondConditon" }, index.h("span", { key: '4251cf447cb9c00b12109c1d930720f6465983be', style: { 'margin-right': '8px' } }, "Occurrence: "), index.h("vaadin-select", { key: '0eabde390ba1fcab6ec654bf567c38b1afd376c7', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
+                index.h("div", { key: '61ab68b026444a2c2f63f200b7eeeb84d615c00e', class: "thirdCondition" }, index.h("div", { key: '6b03192f386a3b864012c8c5374a454f367a95e3', class: "filterCalenderWrap" }, index.h("div", { key: 'ec7e479eaba4b50dcd41cb953b90dd97fe879dae', class: "filterText" }, "Subscription Start Date*"), index.h("div", { key: '796c81340a082f033a9461d7ef2e0116b962d1e6', class: "filter" }, index.h("vaadin-date-picker", { value: this.filterData.from, key: "filterFromCalendar", max: this.filterData.to === undefined ? undefined : this.changeFormate(this.filterData.to), onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" }))), index.h("div", { key: '7a8a64b82154802b65a848f73226e65904e6fe57', class: "filterCalenderWrap" }, index.h("div", { key: '396e291a86a3121f7a3fd7d1316271b8c36f6915', class: "filterText" }, "Subscription End Date"), index.h("div", { key: 'ecf9e2f2564c8bf336fcaef61d9ed46635f1bda0', class: "filter" }, index.h("vaadin-date-picker", { value: this.filterData.to, key: "filterToCalendar", min: this.filterData.from === undefined ? undefined : this.changeFormate(this.filterData.from), onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" })))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
 };
 LotterySubscription.style = LotterySubscriptionStyle0;
 

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lotterySubscription = require('./lottery-subscription-caef58b0.js');
-require('./index-a7f3c31f.js');
+const lotterySubscription = require('./lottery-subscription-602f10ec.js');
+require('./index-ff6dc9b8.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7f3c31f.js');
+const index = require('./index-ff6dc9b8.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-subscription.cjs",[[1,"lottery-subscription",{"translationUrl":[520,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"endpointSubscription":[513,"endpoint-subscription"],"language":[513],"gameName":[513,"game-name"],"isSubscribed":[32],"frequenceList":[32],"frequenceState":[32],"filterData":[32],"subscriptionCode":[32],"conditionId":[32],"paramId":[32],"conditionRule":[32],"paramRule":[32],"peroidRule":[32],"startDateRule":[32],"endDateRule":[32],"gameNameRule":[32],"ruleType":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-subscription.cjs",[[1,"lottery-subscription",{"translationUrl":[520,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"endpointSubscription":[513,"endpoint-subscription"],"language":[513],"gameName":[513,"game-name"],"isSubscribed":[32],"frequenceList":[32],"frequenceState":[32],"filterData":[32],"subscriptionCode":[32],"conditionId":[32],"paramId":[32],"conditionRule":[32],"paramRule":[32],"peroidRule":[32],"startDateRule":[32],"endDateRule":[32],"gameNameRule":[32],"ruleType":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,22 +1,11 @@
 import { h } from "@stencil/core";
 import { translate, getTranslations } from "../../utils/locale.utils";
 import { fetchRequest } from "../../utils/utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import "../../../../../../../libs/vaadin-facade/index";
 import { format } from "date-fns";
 export class LotterySubscription {
     constructor() {
-        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.changeDateParam = () => {
             if (this.filterData.from && !this.filterData.to) {
                 let from = this.filterData.from;
@@ -109,7 +98,8 @@ export class LotterySubscription {
         };
         this.translationUrl = undefined;
         this.clientStyling = '';
-        this.clientStylingUrlContent = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
         this.endpoint = undefined;
         this.endpointTicket = undefined;
         this.endpointSubscription = undefined;
@@ -129,7 +119,6 @@ export class LotterySubscription {
         this.endDateRule = undefined;
         this.gameNameRule = undefined;
         this.ruleType = '';
-        this.limitStylingAppends = false;
     }
     componentWillLoad() {
         if (this.translationUrl) {
@@ -137,13 +126,29 @@ export class LotterySubscription {
         }
         this.getSubscriptionData();
     }
-    componentDidRender() {
-        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`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             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);
         }
     }
     transDate(from, to) {
@@ -243,9 +248,9 @@ export class LotterySubscription {
         }
     }
     render() {
-        return (h("div", { key: '1bf289722935c5d2b574ba18f322830c81335585', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, h("vaadin-checkbox", { key: '5f62fb61bccecd3632525ab0b28a41e45487c7ec', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
-            h("div", { key: 'd8e56e346ca8f275866738ab9c6d8eb14437d84a', class: "secondConditon" }, h("span", { key: '13c61d7582b1e0716395bd06c410a621b8af97d8', style: { 'margin-right': '8px' } }, "Occurrence: "), h("vaadin-select", { key: 'cf8d9c4176f66d2095798cae79b82b748e7ffb0b', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
-                h("div", { key: 'c1496adac7e295830074da0b096bf4bbc0af8247', class: "thirdCondition" }, h("div", { key: '2aa4f92c84ab37edee56640ae0657f59e92c3719', class: "filterCalenderWrap" }, h("div", { key: '6665e3f2bd28650794eb174db6081ab4a9f514f0', class: "filterText" }, "Subscription Start Date*"), h("div", { key: '50a05e684bf068ab00d6d4298e65a6b94c44b79a', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.from, key: "filterFromCalendar", max: this.filterData.to === undefined ? undefined : this.changeFormate(this.filterData.to), onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" }))), h("div", { key: '85c4bf037ad7bc9797f809aa7e71fcbfbc80c298', class: "filterCalenderWrap" }, h("div", { key: '87b446788202ae55ad698c8455c9a6d09a9d22d6', class: "filterText" }, "Subscription End Date"), h("div", { key: '5700c92b2f0c57959f84b5f7ac7a3488d1d0d096', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.to, key: "filterToCalendar", min: this.filterData.from === undefined ? undefined : this.changeFormate(this.filterData.from), onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" })))))));
+        return (h("div", { key: 'f301b99245d1950605dbdfac1f4bc06c60ea0c50', class: "subscripitonContainer", ref: el => this.stylingContainer = el }, h("vaadin-checkbox", { key: 'e9005320778ae1d66975e7825b5259fa2bca36d2', label: "Subscription", checked: this.isSubscribed, onChange: this.handleCheckboxchange.bind(this) }), this.isSubscribed &&
+            h("div", { key: '9dc052565ef92bb4c00559766b933e4bf567c1a7', class: "secondConditon" }, h("span", { key: '4251cf447cb9c00b12109c1d930720f6465983be', style: { 'margin-right': '8px' } }, "Occurrence: "), h("vaadin-select", { key: '0eabde390ba1fcab6ec654bf567c38b1afd376c7', items: this.frequenceList, value: this.frequenceState, "on-value-changed": this.handleSelectionChange.bind(this) }), this.frequenceState === 'Custom' &&
+                h("div", { key: '61ab68b026444a2c2f63f200b7eeeb84d615c00e', class: "thirdCondition" }, h("div", { key: '6b03192f386a3b864012c8c5374a454f367a95e3', class: "filterCalenderWrap" }, h("div", { key: 'ec7e479eaba4b50dcd41cb953b90dd97fe879dae', class: "filterText" }, "Subscription Start Date*"), h("div", { key: '796c81340a082f033a9461d7ef2e0116b962d1e6', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.from, key: "filterFromCalendar", max: this.filterData.to === undefined ? undefined : this.changeFormate(this.filterData.to), onChange: this.handleFilterFrom, placeholder: translate('filterFromCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" }))), h("div", { key: '7a8a64b82154802b65a848f73226e65904e6fe57', class: "filterCalenderWrap" }, h("div", { key: '396e291a86a3121f7a3fd7d1316271b8c36f6915', class: "filterText" }, "Subscription End Date"), h("div", { key: 'ecf9e2f2564c8bf336fcaef61d9ed46635f1bda0', class: "filter" }, h("vaadin-date-picker", { value: this.filterData.to, key: "filterToCalendar", min: this.filterData.from === undefined ? undefined : this.changeFormate(this.filterData.from), onChange: this.handleFilterTo, placeholder: translate('filterToCalendar', this.language), ref: el => this.setDateFormate(el), class: "VaadinDatePicker" })))))));
     }
     static get is() { return "lottery-subscription"; }
     static get encapsulation() { return "shadow"; }
@@ -296,7 +301,7 @@ export class LotterySubscription {
                 "reflect": true,
                 "defaultValue": "''"
             },
-            "clientStylingUrlContent": {
+            "clientStylingUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -310,10 +315,27 @@ export class LotterySubscription {
                     "tags": [],
                     "text": "Client custom styling via url"
                 },
-                "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
+            },
             "endpoint": {
                 "type": "string",
                 "mutable": false,
@@ -417,8 +439,7 @@ export class LotterySubscription {
             "startDateRule": {},
             "endDateRule": {},
             "gameNameRule": {},
-            "ruleType": {},
-            "limitStylingAppends": {}
+            "ruleType": {}
         };
     }
     static get events() {
@@ -454,4 +475,16 @@ export class LotterySubscription {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
 }

package/dist/esm/{index-0cefb8d0.js → index-f4067a90.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'lottery-subscription';
-const BUILD = /* lottery-subscription */ { 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: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, 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, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: 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: true, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* lottery-subscription */ { 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: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, 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, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: 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: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -801,14 +801,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);
@@ -860,6 +860,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$ ;
@@ -869,6 +870,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);
       }
@@ -880,7 +893,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 */)) {
@@ -962,6 +978,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;
       }
@@ -977,6 +996,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
     } else {
       Cstr = elm.constructor;
@@ -1073,6 +1095,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],
@@ -1088,6 +1111,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/index.js

@@ -1,2 +1,2 @@
-export { L as LotterySubscription } from './lottery-subscription-a9ef0899.js';
-import './index-0cefb8d0.js';
+export { L as LotterySubscription } from './lottery-subscription-0df24c8b.js';
+import './index-f4067a90.js';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-0cefb8d0.js';
-export { s as setNonce } from './index-0cefb8d0.js';
+import { b as bootstrapLazy } from './index-f4067a90.js';
+export { s as setNonce } from './index-f4067a90.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-subscription",[[1,"lottery-subscription",{"translationUrl":[520,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"endpointSubscription":[513,"endpoint-subscription"],"language":[513],"gameName":[513,"game-name"],"isSubscribed":[32],"frequenceList":[32],"frequenceState":[32],"filterData":[32],"subscriptionCode":[32],"conditionId":[32],"paramId":[32],"conditionRule":[32],"paramRule":[32],"peroidRule":[32],"startDateRule":[32],"endDateRule":[32],"gameNameRule":[32],"ruleType":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["lottery-subscription",[[1,"lottery-subscription",{"translationUrl":[520,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"mbSource":[513,"mb-source"],"endpoint":[513],"endpointTicket":[513,"endpoint-ticket"],"endpointSubscription":[513,"endpoint-subscription"],"language":[513],"gameName":[513,"game-name"],"isSubscribed":[32],"frequenceList":[32],"frequenceState":[32],"filterData":[32],"subscriptionCode":[32],"conditionId":[32],"paramId":[32],"conditionRule":[32],"paramRule":[32],"peroidRule":[32],"startDateRule":[32],"endDateRule":[32],"gameNameRule":[32],"ruleType":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 export { defineCustomElements };