@everymatrix/general-stories 1.54.12 → 1.56.0

package/dist/cjs/{general-stories-a5262e54.js → general-stories-f3bf4099.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-5e8dba8b.js');
+const index = require('./index-4176da89.js');
 
 const getDevice = () => {
     let userAgent = window.navigator.userAgent;
@@ -85,6 +85,63 @@ const translate = (key, customLang) => {
     return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
+/**
+ * @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 generalStoriesCss = ".ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px;position:relative;display:inline-block;border-radius:50%}.StoryThumbnailContainer.Highlighted::before{content:\"\";position:absolute;border-radius:50%;background:linear-gradient(to bottom, var(--emw--color-primary, #22B04E), var(--emw--color-secondary, #E1A749));top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailContainer.Viewed::before{content:\"\";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailImage{height:50px;width:50px;border-radius:50%;position:relative;z-index:1}.StoryThumbnailImage.Highlighted,.StoryThumbnailImage.Viewed{border:2px solid var(--emw--color-white, #ffffff)}.FullScreenHeader{position:fixed;top:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));top:0px;width:100%;display:flex;flex-direction:column;padding:10px 0;z-index:5;height:30px}.FullScreenHeader .CloseStoryButton{position:absolute;right:0;width:20px;margin-right:20px;margin-top:8px;z-index:50}.FullScreenHeader .ProgressBarContainer{width:90%;height:2px;position:relative;top:0;background-color:var(--emw--color-grey-150, #828282);border-radius:10px;overflow:hidden;margin:0 auto}.FullScreenHeader .ProgressBarContainer .ProgressBar{height:100%;background:var(--emw--color-white, #ffffff);width:0%;transition:width 0.1s linear}.FullScreenStory{position:fixed;top:0;width:100%;height:100%;background-color:var(--emw--color-grey-400, #24211f);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:300}.FullScreenStory video{height:100vh;width:100vw}.FullScreenStory img{width:100%;height:100%;object-fit:contain}.FullScreenStory .LoadMoreButtonBackground{width:100%;height:15%;background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));position:absolute;bottom:0;display:flex;justify-content:center}.FullScreenStory .LoadMoreButtonBackground .LoadMoreButton{width:auto;font-size:var(--emw--font-size-small, 14px);font-family:inherit;background-color:var(--emw--color-grey-50, #F9F8F8);box-shadow:0px 0px 7px 1px var(--emw--color-grey-400, #24211f);color:var(--emw--color-black, #000000);border-radius:50px;position:absolute;bottom:15px;padding:10px 20px}";
 const GeneralStoriesStyle0 = generalStoriesCss;
 
@@ -144,24 +201,6 @@ const GeneralStories = class {
                 });
             });
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
         this.navigateToExternalStoryLink = () => {
             window.postMessage({ type: 'OpenStoryLink', url: this.currentStory.storyUrl }, window.location.href);
         };
@@ -216,11 +255,16 @@ const GeneralStories = class {
             return (index.h("div", { class: `StoryThumbnailContainer ${props.viewed ? 'Viewed' : 'Highlighted'}`, onTouchStart: open }, index.h("img", { class: `StoryThumbnailImage ${props.viewed ? 'Viewed' : 'Highlighted'}`, src: props.icon, alt: "story-icon" })));
         };
     }
-    handleStylingUpdate() {
-        if (this.clientStyling)
-            this.setClientStyling();
-        if (this.clientStylingUrl)
-            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);
+        }
     }
     handleNewTranslations() {
         this.isLoading = true;
@@ -241,6 +285,22 @@ const GeneralStories = class {
             await getTranslations(this.translationUrl);
         }
     }
+    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();
+    }
     onTouchStart(e) {
         this.touchPosStart = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
     }
@@ -293,8 +353,8 @@ const GeneralStories = class {
         }
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingUpdate"],
-        "clientStylingUrl": ["handleStylingUpdate"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"],
         "translationUrl": ["handleNewTranslations"],
         "progress": ["handleTimeEnds"]
     }; }

package/dist/cjs/general-stories.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const generalStories = require('./general-stories-a5262e54.js');
-require('./index-5e8dba8b.js');
+const generalStories = require('./general-stories-f3bf4099.js');
+require('./index-4176da89.js');
 
 
 

package/dist/cjs/general-stories.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5e8dba8b.js');
+const index = require('./index-4176da89.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["general-stories.cjs",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleStylingUpdate"],"clientStylingUrl":["handleStylingUpdate"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
+  return index.bootstrapLazy([["general-stories.cjs",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-5e8dba8b.js → index-4176da89.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'general-stories';
-const BUILD = /* general-stories */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, 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: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, 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: false, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-stories */ { 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: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, 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: false, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -921,12 +921,16 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
+  const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad", void 0, elm);
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -1241,6 +1245,9 @@ var connectedCallback = (elm) => {
   }
 };
 var disconnectInstance = (instance, elm) => {
+  {
+    safeCall(instance, "disconnectedCallback", void 0, elm || instance);
+  }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
@@ -1251,8 +1258,10 @@ var disconnectedCallback = async (elm) => {
         hostRef.$rmListeners$ = void 0;
       }
     }
-    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)) {

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const generalStories = require('./general-stories-a5262e54.js');
-require('./index-5e8dba8b.js');
+const generalStories = require('./general-stories-f3bf4099.js');
+require('./index-4176da89.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5e8dba8b.js');
+const index = require('./index-4176da89.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([["general-stories.cjs",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleStylingUpdate"],"clientStylingUrl":["handleStylingUpdate"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
+  return index.bootstrapLazy([["general-stories.cjs",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/general-stories/general-stories.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { getDevicePlatform } from "../../utils/utils";
 import { translate, getTranslations } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class GeneralStories {
     constructor() {
         /**
@@ -56,24 +57,6 @@ export class GeneralStories {
                 });
             });
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
         this.navigateToExternalStoryLink = () => {
             window.postMessage({ type: 'OpenStoryLink', url: this.currentStory.storyUrl }, window.location.href);
         };
@@ -128,11 +111,16 @@ export class GeneralStories {
             return (h("div", { class: `StoryThumbnailContainer ${props.viewed ? 'Viewed' : 'Highlighted'}`, onTouchStart: open }, h("img", { class: `StoryThumbnailImage ${props.viewed ? 'Viewed' : 'Highlighted'}`, src: props.icon, alt: "story-icon" })));
         };
     }
-    handleStylingUpdate() {
-        if (this.clientStyling)
-            this.setClientStyling();
-        if (this.clientStylingUrl)
-            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);
+        }
     }
     handleNewTranslations() {
         this.isLoading = true;
@@ -153,6 +141,22 @@ export class GeneralStories {
             await getTranslations(this.translationUrl);
         }
     }
+    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();
+    }
     onTouchStart(e) {
         this.touchPosStart = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
     }
@@ -277,6 +281,25 @@ export class GeneralStories {
                 "reflect": true,
                 "defaultValue": "'stage'"
             },
+            "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,
@@ -371,10 +394,10 @@ export class GeneralStories {
     static get watchers() {
         return [{
                 "propName": "clientStyling",
-                "methodName": "handleStylingUpdate"
+                "methodName": "handleClientStylingChange"
             }, {
                 "propName": "clientStylingUrl",
-                "methodName": "handleStylingUpdate"
+                "methodName": "handleClientStylingChangeURL"
             }, {
                 "propName": "translationUrl",
                 "methodName": "handleNewTranslations"

package/dist/esm/{general-stories-9cdd7600.js → general-stories-8ada9aa4.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-3d519791.js';
+import { r as registerInstance, h } from './index-95b2d607.js';
 
 const getDevice = () => {
     let userAgent = window.navigator.userAgent;
@@ -83,6 +83,63 @@ const translate = (key, customLang) => {
     return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
+/**
+ * @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 generalStoriesCss = ".ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px;position:relative;display:inline-block;border-radius:50%}.StoryThumbnailContainer.Highlighted::before{content:\"\";position:absolute;border-radius:50%;background:linear-gradient(to bottom, var(--emw--color-primary, #22B04E), var(--emw--color-secondary, #E1A749));top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailContainer.Viewed::before{content:\"\";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailImage{height:50px;width:50px;border-radius:50%;position:relative;z-index:1}.StoryThumbnailImage.Highlighted,.StoryThumbnailImage.Viewed{border:2px solid var(--emw--color-white, #ffffff)}.FullScreenHeader{position:fixed;top:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));top:0px;width:100%;display:flex;flex-direction:column;padding:10px 0;z-index:5;height:30px}.FullScreenHeader .CloseStoryButton{position:absolute;right:0;width:20px;margin-right:20px;margin-top:8px;z-index:50}.FullScreenHeader .ProgressBarContainer{width:90%;height:2px;position:relative;top:0;background-color:var(--emw--color-grey-150, #828282);border-radius:10px;overflow:hidden;margin:0 auto}.FullScreenHeader .ProgressBarContainer .ProgressBar{height:100%;background:var(--emw--color-white, #ffffff);width:0%;transition:width 0.1s linear}.FullScreenStory{position:fixed;top:0;width:100%;height:100%;background-color:var(--emw--color-grey-400, #24211f);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:300}.FullScreenStory video{height:100vh;width:100vw}.FullScreenStory img{width:100%;height:100%;object-fit:contain}.FullScreenStory .LoadMoreButtonBackground{width:100%;height:15%;background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));position:absolute;bottom:0;display:flex;justify-content:center}.FullScreenStory .LoadMoreButtonBackground .LoadMoreButton{width:auto;font-size:var(--emw--font-size-small, 14px);font-family:inherit;background-color:var(--emw--color-grey-50, #F9F8F8);box-shadow:0px 0px 7px 1px var(--emw--color-grey-400, #24211f);color:var(--emw--color-black, #000000);border-radius:50px;position:absolute;bottom:15px;padding:10px 20px}";
 const GeneralStoriesStyle0 = generalStoriesCss;
 
@@ -142,24 +199,6 @@ const GeneralStories = class {
                 });
             });
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
         this.navigateToExternalStoryLink = () => {
             window.postMessage({ type: 'OpenStoryLink', url: this.currentStory.storyUrl }, window.location.href);
         };
@@ -214,11 +253,16 @@ const GeneralStories = class {
             return (h("div", { class: `StoryThumbnailContainer ${props.viewed ? 'Viewed' : 'Highlighted'}`, onTouchStart: open }, h("img", { class: `StoryThumbnailImage ${props.viewed ? 'Viewed' : 'Highlighted'}`, src: props.icon, alt: "story-icon" })));
         };
     }
-    handleStylingUpdate() {
-        if (this.clientStyling)
-            this.setClientStyling();
-        if (this.clientStylingUrl)
-            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);
+        }
     }
     handleNewTranslations() {
         this.isLoading = true;
@@ -239,6 +283,22 @@ const GeneralStories = class {
             await getTranslations(this.translationUrl);
         }
     }
+    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();
+    }
     onTouchStart(e) {
         this.touchPosStart = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
     }
@@ -291,8 +351,8 @@ const GeneralStories = class {
         }
     }
     static get watchers() { return {
-        "clientStyling": ["handleStylingUpdate"],
-        "clientStylingUrl": ["handleStylingUpdate"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"],
         "translationUrl": ["handleNewTranslations"],
         "progress": ["handleTimeEnds"]
     }; }

package/dist/esm/general-stories.entry.js

@@ -1,2 +1,2 @@
-export { G as general_stories } from './general-stories-9cdd7600.js';
-import './index-3d519791.js';
+export { G as general_stories } from './general-stories-8ada9aa4.js';
+import './index-95b2d607.js';

package/dist/esm/general-stories.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3d519791.js';
-export { s as setNonce } from './index-3d519791.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-95b2d607.js';
+export { s as setNonce } from './index-95b2d607.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["general-stories",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleStylingUpdate"],"clientStylingUrl":["handleStylingUpdate"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
+  return bootstrapLazy([["general-stories",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
 });

package/dist/esm/{index-3d519791.js → index-95b2d607.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'general-stories';
-const BUILD = /* general-stories */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, 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: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, 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: false, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-stories */ { 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: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, 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: false, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -899,12 +899,16 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
+  const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad", void 0, elm);
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -1219,6 +1223,9 @@ var connectedCallback = (elm) => {
   }
 };
 var disconnectInstance = (instance, elm) => {
+  {
+    safeCall(instance, "disconnectedCallback", void 0, elm || instance);
+  }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
@@ -1229,8 +1236,10 @@ var disconnectedCallback = async (elm) => {
         hostRef.$rmListeners$ = void 0;
       }
     }
-    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)) {

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { G as GeneralStories } from './general-stories-9cdd7600.js';
-import './index-3d519791.js';
+export { G as GeneralStories } from './general-stories-8ada9aa4.js';
+import './index-95b2d607.js';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-3d519791.js';
-export { s as setNonce } from './index-3d519791.js';
+import { b as bootstrapLazy } from './index-95b2d607.js';
+export { s as setNonce } from './index-95b2d607.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([["general-stories",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleStylingUpdate"],"clientStylingUrl":["handleStylingUpdate"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
+  return bootstrapLazy([["general-stories",[[1,"general-stories",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"progressBarDuration":[514,"progress-bar-duration"],"currentStory":[32],"currentStoryId":[32],"progress":[32],"touchPosStart":[32],"touchPosEnd":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"progress":["handleTimeEnds"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/general-stories/general-stories.esm.js

@@ -1 +1 @@
-import{p as t,b as n}from"./p-9be4d8b5.js";export{s as setNonce}from"./p-9be4d8b5.js";import{g as r}from"./p-e1255160.js";(()=>{const n=import.meta.url,r={};return""!==n&&(r.resourcesUrl=new URL(".",n).href),t(r)})().then((async t=>(await r(),n([["p-4cdc6e50",[[1,"general-stories",{cmsEndpoint:[513,"cms-endpoint"],language:[513],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],progressBarDuration:[514,"progress-bar-duration"],currentStory:[32],currentStoryId:[32],progress:[32],touchPosStart:[32],touchPosEnd:[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{clientStyling:["handleStylingUpdate"],clientStylingUrl:["handleStylingUpdate"],translationUrl:["handleNewTranslations"],progress:["handleTimeEnds"]}]]]],t))));
+import{p as n,b as t}from"./p-56d326ea.js";export{s as setNonce}from"./p-56d326ea.js";import{g as e}from"./p-e1255160.js";(()=>{const t=import.meta.url,e={};return""!==t&&(e.resourcesUrl=new URL(".",t).href),n(e)})().then((async n=>(await e(),t([["p-3e7fe480",[[1,"general-stories",{cmsEndpoint:[513,"cms-endpoint"],language:[513],cmsEnv:[513,"cms-env"],mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],progressBarDuration:[514,"progress-bar-duration"],currentStory:[32],currentStoryId:[32],progress:[32],touchPosStart:[32],touchPosEnd:[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]],{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],progress:["handleTimeEnds"]}]]]],n))));

package/dist/general-stories/index.esm.js

@@ -1 +1 @@
-export{G as GeneralStories}from"./p-e1e1a6fa.js";import"./p-9be4d8b5.js";
+export{G as GeneralStories}from"./p-004038c9.js";import"./p-56d326ea.js";

package/dist/general-stories/p-004038c9.js

@@ -0,0 +1 @@
+import{r as t,h as i}from"./p-56d326ea.js";const e={en:{error:"Error",generalStoriesLoading:"Loading, please wait ...",loadMore:"Load More"},hu:{error:"Hiba",generalStoriesLoading:"Betöltés, kérjük várjon ...",loadMore:"Továbbiak betöltése"},ro:{error:"Eroare",generalStoriesLoading:"Se încarcă, vă rugăm așteptați ...",loadMore:"Încarcă mai multe"},fr:{error:"Erreur",generalStoriesLoading:"Chargement, veuillez patienter ...",loadMore:"Charger plus"},ar:{error:"خطأ",generalStoriesLoading:"جار التحميل، يرجى الانتظار ...",loadMore:"تحميل المزيد"},hr:{error:"Greška",generalStoriesLoading:"Učitavanje, molimo pričekajte ...",loadMore:"Učitaj više"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{e[i]||(e[i]={});for(let o in t[i])e[i][o]=t[i][o]})),i(!0)}))})),r=(t,i)=>e[void 0!==i&&i in e?i:"en"][t];function s(t,i){if(t){const e=document.createElement("style");e.innerHTML=i,t.appendChild(e)}}function n(t,i){const e=new URL(i);fetch(e.href).then((t=>t.text())).then((i=>{const e=document.createElement("style");e.innerHTML=i,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const a=class{constructor(e){t(this,e),this.language="en",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.progressBarDuration=10,this.hasErrors=!1,this.isLoading=!0,this.isSwipe=!1,this.currentStoryId=null,this.progress=0,this.getStories=()=>{let t=new URL(`${this.cmsEndpoint}/${this.language}/stories`);return t.searchParams.append("env",this.cmsEnv),t.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"mtWeb"})()),t.searchParams.append("language",this.language),new Promise(((i,e)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{this.stories=t,this.stories.forEach((t=>{t.viewed=!1})),this.isLoading=!1,i(!0)})).catch((t=>{console.log(t),this.isLoading=!1,this.hasErrors=!0,e(t)}))}))},this.navigateToExternalStoryLink=()=>{window.postMessage({type:"OpenStoryLink",url:this.currentStory.storyUrl},window.location.href)},this.openFullScreenStory=t=>{this.currentStoryId=t,this.currentStory=this.stories.find((i=>i.id===t)),this.markStoryAsViewed(t),this.startProgress()},this.closeFullScreenView=()=>{this.markStoryAsViewed(this.currentStoryId.toString()),this.currentStoryId=null,this.progress=0,clearInterval(this.intervalId)},this.markStoryAsViewed=t=>{const i=this.stories.findIndex((i=>i.id===t));if(i>-1){const[t]=this.stories.splice(i,1);t.viewed=!0,this.stories=[...this.stories,t]}},this.changeStory=(t,i)=>{const e="next"===i?Number(t.index)+1:Number(t.index)-1;if(e>this.stories.length-1||e<0)this.markStoryAsViewed(t.index),this.closeFullScreenView();else{const t=this.stories.find((t=>t.index===e));this.currentStory=t,this.currentStoryId=t.id,this.progress=0,this.markStoryAsViewed(t.id)}},this.startProgress=()=>{const t=100/(1e3*this.progressBarDuration)*100;this.intervalId=setInterval((()=>{this.progress>=100?clearInterval(this.intervalId):this.progress+=t}),100)},this.Thumbnail=({props:t})=>i("div",{class:"StoryThumbnailContainer "+(t.viewed?"Viewed":"Highlighted"),onTouchStart:()=>this.openFullScreenStory(t.id)},i("img",{class:"StoryThumbnailImage "+(t.viewed?"Viewed":"Highlighted"),src:t.icon,alt:"story-icon"}))}handleClientStylingChange(t,i){t!=i&&s(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){this.isLoading=!0,o(this.translationUrl).then((()=>{this.isLoading=!1}))}handleTimeEnds(t){t>=100&&this.changeStory(this.currentStory,"next")}async componentWillLoad(){this.cmsEndpoint&&this.language&&await this.getStories(),this.translationUrl.length>2&&await o(this.translationUrl)}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?function(t,i){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{e.innerHTML=i,t&&t.appendChild(e)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}onTouchStart(t){this.touchPosStart={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY}}onTouchMove(t){this.touchPosEnd={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},Math.abs(this.touchPosEnd.clientX-this.touchPosStart.clientX)>50&&(this.isSwipe=!0)}onTouchEnd(t){if(this.isSwipe)this.touchPosEnd={clientX:t.changedTouches[0].clientX,clientY:t.changedTouches[0].clientY},this.changeStory(this.currentStory,this.touchPosEnd.clientX-this.touchPosStart.clientX>0?"previous":"next");else{const i=window.innerWidth;this.changeStory(this.currentStory,t.changedTouches[0].clientX>i/2?"next":"previous")}}render(){return this.hasErrors?i("div",{class:"GeneralStoriesError"},i("div",{class:"Title"},r("error",this.language))):this.isLoading?i("div",{class:"GeneralStoriesLoading"},i("div",{class:"Title"},r("generalStoriesLoading",this.language))):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},this.currentStoryId?i("div",{class:"FullScreenStory"},i("div",{class:"FullScreenHeader"},i("div",{class:"ProgressBarContainer"},i("div",{class:"ProgressBar",style:{width:`${this.progress}%`}})),i("div",{id:"close",class:"CloseStoryButton",onTouchStart:this.closeFullScreenView},i("svg",{fill:"none",stroke:"#ffffff",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})))),"video"===this.currentStory.type?i("video",{autoPlay:!0},i("source",{src:this.currentStory.url,type:"video/mp4"})):i("img",{src:this.currentStory.url,alt:"story-image"}),this.currentStory.storyUrl&&i("div",{class:"LoadMoreButtonBackground"},i("button",{onTouchStart:this.navigateToExternalStoryLink,class:"LoadMoreButton"},r("loadMore",this.language)))):i("div",{class:"ImageContainer"},this.stories.map((t=>i(this.Thumbnail,{props:t})))))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],progress:["handleTimeEnds"]}}};a.style='.ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px;position:relative;display:inline-block;border-radius:50%}.StoryThumbnailContainer.Highlighted::before{content:"";position:absolute;border-radius:50%;background:linear-gradient(to bottom, var(--emw--color-primary, #22B04E), var(--emw--color-secondary, #E1A749));top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailContainer.Viewed::before{content:"";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailImage{height:50px;width:50px;border-radius:50%;position:relative;z-index:1}.StoryThumbnailImage.Highlighted,.StoryThumbnailImage.Viewed{border:2px solid var(--emw--color-white, #ffffff)}.FullScreenHeader{position:fixed;top:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));top:0px;width:100%;display:flex;flex-direction:column;padding:10px 0;z-index:5;height:30px}.FullScreenHeader .CloseStoryButton{position:absolute;right:0;width:20px;margin-right:20px;margin-top:8px;z-index:50}.FullScreenHeader .ProgressBarContainer{width:90%;height:2px;position:relative;top:0;background-color:var(--emw--color-grey-150, #828282);border-radius:10px;overflow:hidden;margin:0 auto}.FullScreenHeader .ProgressBarContainer .ProgressBar{height:100%;background:var(--emw--color-white, #ffffff);width:0%;transition:width 0.1s linear}.FullScreenStory{position:fixed;top:0;width:100%;height:100%;background-color:var(--emw--color-grey-400, #24211f);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:300}.FullScreenStory video{height:100vh;width:100vw}.FullScreenStory img{width:100%;height:100%;object-fit:contain}.FullScreenStory .LoadMoreButtonBackground{width:100%;height:15%;background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));position:absolute;bottom:0;display:flex;justify-content:center}.FullScreenStory .LoadMoreButtonBackground .LoadMoreButton{width:auto;font-size:var(--emw--font-size-small, 14px);font-family:inherit;background-color:var(--emw--color-grey-50, #F9F8F8);box-shadow:0px 0px 7px 1px var(--emw--color-grey-400, #24211f);color:var(--emw--color-black, #000000);border-radius:50px;position:absolute;bottom:15px;padding:10px 20px}';export{a as G}

package/dist/general-stories/p-3e7fe480.entry.js

@@ -0,0 +1 @@
+export{G as general_stories}from"./p-004038c9.js";import"./p-56d326ea.js";

package/dist/general-stories/p-56d326ea.js

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

package/dist/types/components/general-stories/general-stories.d.ts

@@ -12,6 +12,10 @@ export declare class GeneralStories {
     * CMS Endpoint stage
     */
     cmsEnv: string;
+    /**
+     * Client custom styling via streamStyling
+     */
+    mbSource: string;
     /**
     * Client custom styling via string
     */
@@ -29,6 +33,7 @@ export declare class GeneralStories {
      */
     progressBarDuration: number;
     private stylingContainer;
+    private stylingSubscription;
     private stories;
     intervalId: ReturnType<typeof setInterval>;
     hasErrors: boolean;
@@ -45,13 +50,14 @@ export declare class GeneralStories {
         clientX: number;
         clientY: number;
     };
-    handleStylingUpdate(): void;
+    handleClientStylingChange(newValue: any, oldValue: any): void;
+    handleClientStylingChangeURL(newValue: any, oldValue: any): void;
     handleNewTranslations(): void;
     handleTimeEnds(newValue: number): void;
     componentWillLoad(): Promise<void>;
     getStories: () => Promise<any>;
-    setClientStyling: () => void;
-    setClientStylingURL: () => void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     navigateToExternalStoryLink: () => void;
     openFullScreenStory: (id: any) => void;
     closeFullScreenView: () => void;

package/dist/types/components.d.ts

@@ -27,6 +27,10 @@ export namespace Components {
           * Language of the widget
          */
         "language": string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource": string;
         /**
           * Duration of progress bar
          */
@@ -70,6 +74,10 @@ declare namespace LocalJSX {
           * Language of the widget
          */
         "language"?: string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource"?: string;
         /**
           * Duration of progress bar
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-stories",
-  "version": "1.54.12",
+  "version": "1.56.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/general-stories/p-4cdc6e50.entry.js

@@ -1 +0,0 @@
-export{G as general_stories}from"./p-e1e1a6fa.js";import"./p-9be4d8b5.js";

package/dist/general-stories/p-9be4d8b5.js

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

package/dist/general-stories/p-e1e1a6fa.js

@@ -1 +0,0 @@
-import{r as t,h as i}from"./p-9be4d8b5.js";const e={en:{error:"Error",generalStoriesLoading:"Loading, please wait ...",loadMore:"Load More"},hu:{error:"Hiba",generalStoriesLoading:"Betöltés, kérjük várjon ...",loadMore:"Továbbiak betöltése"},ro:{error:"Eroare",generalStoriesLoading:"Se încarcă, vă rugăm așteptați ...",loadMore:"Încarcă mai multe"},fr:{error:"Erreur",generalStoriesLoading:"Chargement, veuillez patienter ...",loadMore:"Charger plus"},ar:{error:"خطأ",generalStoriesLoading:"جار التحميل، يرجى الانتظار ...",loadMore:"تحميل المزيد"},hr:{error:"Greška",generalStoriesLoading:"Učitavanje, molimo pričekajte ...",loadMore:"Učitaj više"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{e[i]||(e[i]={});for(let o in t[i])e[i][o]=t[i][o]})),i(!0)}))})),r=(t,i)=>e[void 0!==i&&i in e?i:"en"][t],s=class{constructor(e){t(this,e),this.language="en",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.progressBarDuration=10,this.hasErrors=!1,this.isLoading=!0,this.isSwipe=!1,this.currentStoryId=null,this.progress=0,this.getStories=()=>{let t=new URL(`${this.cmsEndpoint}/${this.language}/stories`);return t.searchParams.append("env",this.cmsEnv),t.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"mtWeb"})()),t.searchParams.append("language",this.language),new Promise(((i,e)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{this.stories=t,this.stories.forEach((t=>{t.viewed=!1})),this.isLoading=!1,i(!0)})).catch((t=>{console.log(t),this.isLoading=!1,this.hasErrors=!0,e(t)}))}))},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},this.navigateToExternalStoryLink=()=>{window.postMessage({type:"OpenStoryLink",url:this.currentStory.storyUrl},window.location.href)},this.openFullScreenStory=t=>{this.currentStoryId=t,this.currentStory=this.stories.find((i=>i.id===t)),this.markStoryAsViewed(t),this.startProgress()},this.closeFullScreenView=()=>{this.markStoryAsViewed(this.currentStoryId.toString()),this.currentStoryId=null,this.progress=0,clearInterval(this.intervalId)},this.markStoryAsViewed=t=>{const i=this.stories.findIndex((i=>i.id===t));if(i>-1){const[t]=this.stories.splice(i,1);t.viewed=!0,this.stories=[...this.stories,t]}},this.changeStory=(t,i)=>{const e="next"===i?Number(t.index)+1:Number(t.index)-1;if(e>this.stories.length-1||e<0)this.markStoryAsViewed(t.index),this.closeFullScreenView();else{const t=this.stories.find((t=>t.index===e));this.currentStory=t,this.currentStoryId=t.id,this.progress=0,this.markStoryAsViewed(t.id)}},this.startProgress=()=>{const t=100/(1e3*this.progressBarDuration)*100;this.intervalId=setInterval((()=>{this.progress>=100?clearInterval(this.intervalId):this.progress+=t}),100)},this.Thumbnail=({props:t})=>i("div",{class:"StoryThumbnailContainer "+(t.viewed?"Viewed":"Highlighted"),onTouchStart:()=>this.openFullScreenStory(t.id)},i("img",{class:"StoryThumbnailImage "+(t.viewed?"Viewed":"Highlighted"),src:t.icon,alt:"story-icon"}))}handleStylingUpdate(){this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL()}handleNewTranslations(){this.isLoading=!0,o(this.translationUrl).then((()=>{this.isLoading=!1}))}handleTimeEnds(t){t>=100&&this.changeStory(this.currentStory,"next")}async componentWillLoad(){this.cmsEndpoint&&this.language&&await this.getStories(),this.translationUrl.length>2&&await o(this.translationUrl)}onTouchStart(t){this.touchPosStart={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY}}onTouchMove(t){this.touchPosEnd={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},Math.abs(this.touchPosEnd.clientX-this.touchPosStart.clientX)>50&&(this.isSwipe=!0)}onTouchEnd(t){if(this.isSwipe)this.touchPosEnd={clientX:t.changedTouches[0].clientX,clientY:t.changedTouches[0].clientY},this.changeStory(this.currentStory,this.touchPosEnd.clientX-this.touchPosStart.clientX>0?"previous":"next");else{const i=window.innerWidth;this.changeStory(this.currentStory,t.changedTouches[0].clientX>i/2?"next":"previous")}}render(){return this.hasErrors?i("div",{class:"GeneralStoriesError"},i("div",{class:"Title"},r("error",this.language))):this.isLoading?i("div",{class:"GeneralStoriesLoading"},i("div",{class:"Title"},r("generalStoriesLoading",this.language))):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},this.currentStoryId?i("div",{class:"FullScreenStory"},i("div",{class:"FullScreenHeader"},i("div",{class:"ProgressBarContainer"},i("div",{class:"ProgressBar",style:{width:`${this.progress}%`}})),i("div",{id:"close",class:"CloseStoryButton",onTouchStart:this.closeFullScreenView},i("svg",{fill:"none",stroke:"#ffffff",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})))),"video"===this.currentStory.type?i("video",{autoPlay:!0},i("source",{src:this.currentStory.url,type:"video/mp4"})):i("img",{src:this.currentStory.url,alt:"story-image"}),this.currentStory.storyUrl&&i("div",{class:"LoadMoreButtonBackground"},i("button",{onTouchStart:this.navigateToExternalStoryLink,class:"LoadMoreButton"},r("loadMore",this.language)))):i("div",{class:"ImageContainer"},this.stories.map((t=>i(this.Thumbnail,{props:t})))))}static get watchers(){return{clientStyling:["handleStylingUpdate"],clientStylingUrl:["handleStylingUpdate"],translationUrl:["handleNewTranslations"],progress:["handleTimeEnds"]}}};s.style='.ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px;position:relative;display:inline-block;border-radius:50%}.StoryThumbnailContainer.Highlighted::before{content:"";position:absolute;border-radius:50%;background:linear-gradient(to bottom, var(--emw--color-primary, #22B04E), var(--emw--color-secondary, #E1A749));top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailContainer.Viewed::before{content:"";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-3px;left:-3px;width:111%;height:103%}.StoryThumbnailImage{height:50px;width:50px;border-radius:50%;position:relative;z-index:1}.StoryThumbnailImage.Highlighted,.StoryThumbnailImage.Viewed{border:2px solid var(--emw--color-white, #ffffff)}.FullScreenHeader{position:fixed;top:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));top:0px;width:100%;display:flex;flex-direction:column;padding:10px 0;z-index:5;height:30px}.FullScreenHeader .CloseStoryButton{position:absolute;right:0;width:20px;margin-right:20px;margin-top:8px;z-index:50}.FullScreenHeader .ProgressBarContainer{width:90%;height:2px;position:relative;top:0;background-color:var(--emw--color-grey-150, #828282);border-radius:10px;overflow:hidden;margin:0 auto}.FullScreenHeader .ProgressBarContainer .ProgressBar{height:100%;background:var(--emw--color-white, #ffffff);width:0%;transition:width 0.1s linear}.FullScreenStory{position:fixed;top:0;width:100%;height:100%;background-color:var(--emw--color-grey-400, #24211f);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:300}.FullScreenStory video{height:100vh;width:100vw}.FullScreenStory img{width:100%;height:100%;object-fit:contain}.FullScreenStory .LoadMoreButtonBackground{width:100%;height:15%;background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));position:absolute;bottom:0;display:flex;justify-content:center}.FullScreenStory .LoadMoreButtonBackground .LoadMoreButton{width:auto;font-size:var(--emw--font-size-small, 14px);font-family:inherit;background-color:var(--emw--color-grey-50, #F9F8F8);box-shadow:0px 0px 7px 1px var(--emw--color-grey-400, #24211f);color:var(--emw--color-black, #000000);border-radius:50px;position:absolute;bottom:15px;padding:10px 20px}';export{s as G}