@everymatrix/helper-accordion 1.77.25 → 1.77.26

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf959871.js');
+const index = require('./index-46debeee.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
@@ -35,25 +35,73 @@ const getTranslations = (data) => {
     });
 };
 
-const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:5px;background:var(--emw--color-background, #009993);display:flex;gap:30px;border:1px solid var(--emw--color-typography, #009993);padding:8px 10px;user-select:none;margin-bottom:1px;cursor:pointer}.Header:hover{background:var(--emw--color-background-secondary, #00ABA4)}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));text-transform:capitalize}.Header .Expand{margin-left:auto;color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:var(--emw--color-gray-50, #F1F1F1);display:flex;gap:30px;border:1px solid var(--emw--color-typography, #009993);padding:8px 10px;user-select:none;margin-bottom:5px;cursor:pointer}.HeaderTicketHistory:hover{background:var(--emw--color-secondary, #00ABA4)}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:var(--emw--button-text-color, #000)}.HeaderTicketHistory .Expand{margin-left:auto;color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));border:1px solid var(--emw--button-border-color, #009993);padding:10px 15px;user-select:none;color:var(--emw--button-text-color, #000);margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:var(--emw--button-border-radius, 4px);margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:var(--emw--color-error, #FF3D00);border:1px solid var(--emw--color-error, #FF3D00);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.ActionButton:hover{background:var(--emw--color-secondary, #FF6536);border:1px solid var(--emw--color-error, #FF3D00)}";
+/**
+ * @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 helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:5px;background:var(--emw--color-primary, #009993);display:flex;gap:30px;border:1px solid var(--emw--color-primary, #009993);padding:8px 10px;user-select:none;margin-bottom:1px;cursor:pointer}.Header:hover{background:var(--emw--color-secondary, #00aba4)}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:var(--emw--color-typography-inverse, rgb(255, 255, 255));text-transform:capitalize}.Header .Expand{margin-left:auto;color:var(--emw--color-typography-inverse, rgb(255, 255, 255));width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:var(--emw--color-background, #fff);display:flex;gap:30px;border:1px solid var(--emw--color-primary, #009993);padding:8px 10px;user-select:none;margin-bottom:5px;cursor:pointer}.HeaderTicketHistory:hover{background:var(--emw--color-secondary, #00aba4)}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:var(--emw--color-typography, #000)}.HeaderTicketHistory .Expand{margin-left:auto;color:var(--emw--color-typography-inverse, rgb(255, 255, 255));width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:var(--emw--color-background, #fff);border:1px solid var(--emw--color-primary, #009993);padding:10px 15px;user-select:none;color:var(--emw--color-typography, #000);margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:var(--emw--button-border-radius, 4px);margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:var(--emw--color-error, #ff3d00);border:1px solid var(--emw--color-error, #ff3d00);color:var(--emw--color-background, #fff)}.ActionButton:hover{background:var(--emw--color-secondary, #ff6536);border:1px solid var(--emw--color-error, #ff3d00)}";
 const HelperAccordionStyle0 = helperAccordionCss;
 
 const HelperAccordion = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.accordionEvent = index.createEvent(this, "helperAccordionAction", 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.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
         this.ticketHistoryFlag = false;
         this.headerTitle = '';
         this.headerSubtitle = '';
@@ -64,13 +112,38 @@ const HelperAccordion = class {
         this.eventName = 'helperAccordionAction';
         this.collapsed = true;
         this.language = 'en';
-        this.clientStyling = '';
-        this.clientStylingUrlContent = '';
         this.translationUrl = undefined;
         this.showContent = undefined;
-        this.limitStylingAppends = false;
     }
     // @TODO fix the `any` type :)
+    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);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
     connectedCallback() {
         this.showContent = !this.collapsed;
     }
@@ -79,17 +152,6 @@ const HelperAccordion = class {
             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
-    }
     toggleContent() {
         this.showContent = !this.showContent;
     }
@@ -101,11 +163,13 @@ const HelperAccordion = class {
         this.accordionEvent.emit();
     }
     render() {
-        return (index.h("div", { key: '2db19795aa22479f038d9fc7c936cf7403efa43e', class: "Wrapper", ref: el => this.stylingContainer = el }, index.h("div", { key: '6804e27dbd68e4f4182ab07beb665c53b54069b6', class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header', onClick: () => this.toggleContent() }, index.h("p", { key: 'd1293990d39da1f50d36dff28e1abbe53259356b', class: "Title" }, this.headerTitle), index.h("p", { key: '7632e3ddda5dea8e91d8a3935ff46c0f357c4397', class: "Subtitle" }, this.headerSubtitle), index.h("p", { key: '1ab0dd4cc2625ef20c858738ee290e922e37dd21', class: "Subtitle Description" }, this.description), index.h("span", { key: '3c7e3d3092aa97d24f62383e17a8a91646a78058', class: "Expand" }, this.showContent ? '<' : '>')), this.showContent &&
-            index.h("div", { key: 'ba970b8947e1986aedbdfd37b044e05f2b1c29fc' }, index.h("div", { key: '7cfc0ca2b99d76d7647569f7105c29d1be8cf994', class: "Content" }, index.h("slot", { key: 'a2d866a914d33eac26b3b7e138e611be9f942c65', name: 'accordionContent' }), this.footer && this.showContent &&
-                index.h("div", { key: 'c44d54e98f712c921e7dd16faaaaa7cfb92e17c4' }, this.deleteTab &&
-                    index.h("span", { key: '8c46aa94fcce959f370d07da69bd58509c143373', class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
+        return (index.h("div", { key: '58cd507e7d1dc8de1e3b049936a2d6acb355e83d', class: "Wrapper", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '70c6453ca4c4d40738edb1ae7e91f8954eebd3eb', class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header', onClick: () => this.toggleContent() }, index.h("p", { key: 'cf543e01c0baa833bea27aa4effb19734e234ed1', class: "Title" }, this.headerTitle), index.h("p", { key: '365a05cabda273796e9d9689e514566ecc2aadcc', class: "Subtitle" }, this.headerSubtitle), index.h("p", { key: 'f30680b6c9d2d65fdb607a7293d6ce4b56c6b20f', class: "Subtitle Description" }, this.description), index.h("span", { key: 'a47718e90743d53b31968f67b002a3e427e193bc', class: "Expand" }, this.showContent ? '<' : '>')), this.showContent && (index.h("div", { key: 'bb34d51602f9397c427d79141a38aca7a64bf206' }, index.h("div", { key: '64171a30185b88bbafaa4ea555aeb9e2e33c46d6', class: "Content" }, index.h("slot", { key: '6def0d44f3881196255f3329184053fb3d5a3cfd', name: "accordionContent" }), this.footer && this.showContent && (index.h("div", { key: '08bfb5b017055788ba55b149e3bee23964f11ccf' }, this.deleteTab && (index.h("span", { key: 'b7b03fc6329a37841a2cf2b6a34780349341a0d5', class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language))))))))));
     }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
 };
 HelperAccordion.style = HelperAccordionStyle0;
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf959871.js');
+const index = require('./index-46debeee.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-accordion.cjs",[[1,"helper-accordion",{"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-accordion.cjs",[[1,"helper-accordion",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"translationUrl":[520,"translation-url"],"showContent":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-bf959871.js → index-46debeee.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'helper-accordion';
-const BUILD = /* helper-accordion */ { 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: 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: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, 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-accordion */ { 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: 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: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, 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 {
@@ -1056,12 +1078,17 @@ var connectedCallback = (elm) => {
   }
 };
 var disconnectInstance = (instance) => {
+  {
+    safeCall(instance, "disconnectedCallback");
+  }
 };
 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$);
+    } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+      hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
     }
   }
 };
@@ -1084,6 +1111,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],
@@ -1099,6 +1127,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-bf959871.js');
+const index = require('./index-46debeee.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-accordion.cjs",[[1,"helper-accordion",{"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"translationUrl":[520,"translation-url"],"showContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-accordion.cjs",[[1,"helper-accordion",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"translationUrl":[520,"translation-url"],"showContent":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/helper-accordion/helper-accordion.css

@@ -6,29 +6,29 @@
 
 .Header {
   border-radius: 5px;
-  background: var(--emw--color-background, #009993);
+  background: var(--emw--color-primary, #009993);
   display: flex;
   gap: 30px;
-  border: 1px solid var(--emw--color-typography, #009993);
+  border: 1px solid var(--emw--color-primary, #009993);
   padding: 8px 10px;
   user-select: none;
   margin-bottom: 1px;
   cursor: pointer;
 }
 .Header:hover {
-  background: var(--emw--color-background-secondary, #00ABA4);
+  background: var(--emw--color-secondary, #00aba4);
 }
 .Header .Title,
 .Header .Subtitle,
 .Header .Description {
   margin: 0;
   font-size: 14px;
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  color: var(--emw--color-typography-inverse, rgb(255, 255, 255));
   text-transform: capitalize;
 }
 .Header .Expand {
   margin-left: auto;
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  color: var(--emw--color-typography-inverse, rgb(255, 255, 255));
   width: 17px;
   height: 17px;
   cursor: pointer;
@@ -40,28 +40,28 @@
 
 .HeaderTicketHistory {
   border-radius: 4px;
-  background: var(--emw--color-gray-50, #F1F1F1);
+  background: var(--emw--color-background, #fff);
   display: flex;
   gap: 30px;
-  border: 1px solid var(--emw--color-typography, #009993);
+  border: 1px solid var(--emw--color-primary, #009993);
   padding: 8px 10px;
   user-select: none;
   margin-bottom: 5px;
   cursor: pointer;
 }
 .HeaderTicketHistory:hover {
-  background: var(--emw--color-secondary, #00ABA4);
+  background: var(--emw--color-secondary, #00aba4);
 }
 .HeaderTicketHistory .Title,
 .HeaderTicketHistory .Subtitle,
 .HeaderTicketHistory .Description {
   margin: 0;
   font-size: 14px;
-  color: var(--emw--button-text-color, #000);
+  color: var(--emw--color-typography, #000);
 }
 .HeaderTicketHistory .Expand {
   margin-left: auto;
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  color: var(--emw--color-typography-inverse, rgb(255, 255, 255));
   width: 17px;
   height: 17px;
   cursor: pointer;
@@ -73,11 +73,11 @@
 
 .Content {
   border-radius: 0 0 4px 4px;
-  background: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
-  border: 1px solid var(--emw--button-border-color, #009993);
+  background: var(--emw--color-background, #fff);
+  border: 1px solid var(--emw--color-primary, #009993);
   padding: 10px 15px;
   user-select: none;
-  color: var(--emw--button-text-color, #000);
+  color: var(--emw--color-typography, #000);
   margin-bottom: 10px;
 }
 
@@ -91,11 +91,11 @@
   text-align: center;
   padding: 8px 20px;
   min-width: 80px;
-  background: var(--emw--color-error, #FF3D00);
-  border: 1px solid var(--emw--color-error, #FF3D00);
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  background: var(--emw--color-error, #ff3d00);
+  border: 1px solid var(--emw--color-error, #ff3d00);
+  color: var(--emw--color-background, #fff);
 }
 .ActionButton:hover {
-  background: var(--emw--color-secondary, #FF6536);
-  border: 1px solid var(--emw--color-error, #FF3D00);
+  background: var(--emw--color-secondary, #ff6536);
+  border: 1px solid var(--emw--color-error, #ff3d00);
 }