@everymatrix/general-stories 1.87.26 → 1.87.27

package/dist/cjs/{general-stories-2cc50820.js → general-stories-c064d967.js}

@@ -85,6 +85,8 @@ const translate = (key, customLang) => {
     return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
 /**
  * @name setClientStyling
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -130,18 +132,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
  * @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
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
  */
-function setStreamStyling(stylingContainer, domain, subscription) {
-  if (window.emMessageBus) {
-    const sheet = document.createElement('style');
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
 
-    window.emMessageBus.subscribe(domain, (data) => {
-      sheet.innerHTML = data;
-      if (stylingContainer) {
-        stylingContainer.appendChild(sheet);
-      }
-    });
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
   }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain]?.sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
 }
 
 const generalStoriesCss = ".ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px 5px 10px;position:relative;display:inline-block;border-radius:50%;height:35px;width:35px}.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:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailContainer.Viewed::before{content:\"\";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailImage{height:35px;width:35px;border-radius:50%;position:relative;z-index:1;font-size:8px;min-width:35px;min-height:35px;max-width:35px;max-height:35px}.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:var(--emw--border-radius-medium, 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}";
@@ -278,7 +337,7 @@ const GeneralStories = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const generalStories = require('./general-stories-2cc50820.js');
+const generalStories = require('./general-stories-c064d967.js');
 require('./index-5b8c1770.js');
 
 

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const generalStories = require('./general-stories-2cc50820.js');
+const generalStories = require('./general-stories-c064d967.js');
 require('./index-5b8c1770.js');
 
 

package/dist/esm/{general-stories-3e32bd1e.js → general-stories-f97ffa4f.js}

@@ -83,6 +83,8 @@ const translate = (key, customLang) => {
     return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
 /**
  * @name setClientStyling
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -128,18 +130,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
  * @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
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
  */
-function setStreamStyling(stylingContainer, domain, subscription) {
-  if (window.emMessageBus) {
-    const sheet = document.createElement('style');
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
 
-    window.emMessageBus.subscribe(domain, (data) => {
-      sheet.innerHTML = data;
-      if (stylingContainer) {
-        stylingContainer.appendChild(sheet);
-      }
-    });
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
   }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain]?.sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
 }
 
 const generalStoriesCss = ".ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px 5px 10px;position:relative;display:inline-block;border-radius:50%;height:35px;width:35px}.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:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailContainer.Viewed::before{content:\"\";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailImage{height:35px;width:35px;border-radius:50%;position:relative;z-index:1;font-size:8px;min-width:35px;min-height:35px;max-width:35px;max-height:35px}.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:var(--emw--border-radius-medium, 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}";
@@ -276,7 +335,7 @@ const GeneralStories = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

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

@@ -1,2 +1,2 @@
-export { G as general_stories } from './general-stories-3e32bd1e.js';
+export { G as general_stories } from './general-stories-f97ffa4f.js';
 import './index-b4964764.js';

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { G as GeneralStories } from './general-stories-3e32bd1e.js';
+export { G as GeneralStories } from './general-stories-f97ffa4f.js';
 import './index-b4964764.js';

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

@@ -0,0 +1 @@
+import{r as t,h as i}from"./index-b4964764.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],n="__WIDGET_GLOBAL_STYLE_CACHE__";function s(t,i){if(t){const e=document.createElement("style");e.innerHTML=i,t.appendChild(e)}}function a(t,i){if(!t||!i)return;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 h=class{constructor(e){t(this,e),this.hasErrors=!1,this.isLoading=!0,this.isSwipe=!1,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"})),this.cmsEndpoint=void 0,this.language="en",this.cmsEnv="stage",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.progressBarDuration=10,this.stylingContainer=void 0,this.currentStory=void 0,this.currentStoryId=null,this.progress=0,this.touchPosStart=void 0,this.touchPosEnd=void 0}handleClientStylingChange(t,i){t!=i&&s(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(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,e,o=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!o)return function(t,i){const e=document.createElement("style");return window.emMessageBus.subscribe(i,(i=>{t&&(e.innerHTML=i,t.appendChild(e))}))}(t,i);window[n]||(window[n]={});const r=(e=function(t,i){return window.emMessageBus.subscribe(i,(e=>{if(!t)return;const o=t.getRootNode(),r=window[n];let s=r[i]?.sheet;s?r[i].refCount=r[i].refCount+1:(s=new CSSStyleSheet,s.replaceSync(e),r[i]={sheet:s,refCount:1});const a=o.adoptedStyleSheets||[];a.includes(s)||(o.adoptedStyleSheets=[...a,s])}))}(t,i)).unsubscribe.bind(e);e.unsubscribe=()=>{if(window[n][i]){const t=window[n][i];t.refCount>1?t.refCount=t.refCount-1:delete window[n][i]}r()}}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(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",{ref:t=>this.stylingContainer=t},i("div",{class:"GeneralStoriesError"},i("div",{class:"Title"},r("error",this.language)))):this.isLoading?i("div",{ref:t=>this.stylingContainer=t},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"]}}};h.style='.ImageContainer{display:flex;flex-direction:row;background-color:var(--emw--color-background, #0E1511);overflow:auto}.StoryThumbnailContainer{margin:5px 5px 10px;position:relative;display:inline-block;border-radius:50%;height:35px;width:35px}.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:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailContainer.Viewed::before{content:"";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailImage{height:35px;width:35px;border-radius:50%;position:relative;z-index:1;font-size:8px;min-width:35px;min-height:35px;max-width:35px;max-height:35px}.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:var(--emw--border-radius-medium, 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{h as G}

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

@@ -1 +1 @@
-export{G as general_stories}from"./general-stories-3e32bd1e.js";import"./index-b4964764.js";
+export{G as general_stories}from"./general-stories-f97ffa4f.js";import"./index-b4964764.js";

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

@@ -1 +1 @@
-export{G as GeneralStories}from"./general-stories-3e32bd1e.js";import"./index-b4964764.js";
+export{G as GeneralStories}from"./general-stories-f97ffa4f.js";import"./index-b4964764.js";

package/package.json

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

package/dist/general-stories/general-stories-3e32bd1e.js

@@ -1 +0,0 @@
-import{r as t,h as i}from"./index-b4964764.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){if(!t||!i)return;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.hasErrors=!1,this.isLoading=!0,this.isSwipe=!1,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"})),this.cmsEndpoint=void 0,this.language="en",this.cmsEnv="stage",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.progressBarDuration=10,this.stylingContainer=void 0,this.currentStory=void 0,this.currentStoryId=null,this.progress=0,this.touchPosStart=void 0,this.touchPosEnd=void 0}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",{ref:t=>this.stylingContainer=t},i("div",{class:"GeneralStoriesError"},i("div",{class:"Title"},r("error",this.language)))):this.isLoading?i("div",{ref:t=>this.stylingContainer=t},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 5px 10px;position:relative;display:inline-block;border-radius:50%;height:35px;width:35px}.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:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailContainer.Viewed::before{content:"";position:absolute;border-radius:50%;height:50px;width:50px;background:var(--emw--color-grey-150, #828282);top:-2px;left:-2px;width:122%;height:119%}.StoryThumbnailImage{height:35px;width:35px;border-radius:50%;position:relative;z-index:1;font-size:8px;min-width:35px;min-height:35px;max-width:35px;max-height:35px}.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:var(--emw--border-radius-medium, 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}