@everymatrix/general-tutorial-slider 1.87.26 → 1.87.28

package/dist/cjs/general-tutorial-slider.cjs.entry.js

@@ -44,6 +44,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
@@ -89,18 +91,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];
+    }
+  });
 }
 
 /**
@@ -213,7 +272,7 @@ const GeneralTutorialSlider = class {
         window.addEventListener('resize', this.resizeHandler);
         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-tutorial-slider.entry.js

@@ -40,6 +40,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
@@ -85,18 +87,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];
+    }
+  });
 }
 
 /**
@@ -209,7 +268,7 @@ const GeneralTutorialSlider = class {
         window.addEventListener('resize', this.resizeHandler);
         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/general-tutorial-slider/general-tutorial-slider.entry.js

@@ -1 +1 @@
-import{r as t,h as n,g as i}from"./index-37276b41.js";const e={en:{error:"Error",noResults:"Loading, please wait ..."},hu:{error:"Error",noResults:"Loading, please wait ..."},ro:{error:"Eroare",noResults:"Loading, please wait ..."},fr:{error:"Error",noResults:"Loading, please wait ..."},ar:{error:"خطأ",noResults:"Loading, please wait ..."},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ..."},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…"}};function o(t,n){if(t){const i=document.createElement("style");i.innerHTML=n,t.appendChild(i)}}function s(t,n){if(!t||!n)return;const i=new URL(n);fetch(i.href).then((t=>t.text())).then((n=>{const i=document.createElement("style");i.innerHTML=n,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const r=class{constructor(n){var i;t(this,n),this.userAgent=window.navigator.userAgent,this.isMobile=!!((i=this.userAgent).toLowerCase().match(/android/i)||i.toLowerCase().match(/blackberry|bb/i)||i.toLowerCase().match(/iphone|ipad|ipod/i)||i.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.allElementsWidth=0,this.xDown=null,this.yDown=null,this.resizeHandler=()=>{this.recalculateItemsPerPage()},this.orientationChangeHandler=()=>{setTimeout((()=>{this.recalculateItemsPerPage()}),10)},this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.language="en",this.cmsEndpoint=void 0,this.userRoles="everyone",this.cmsEnv="stage",this.showSliderDots=!0,this.showSliderArrows=!0,this.showSliderArrowsMobile=!1,this.enableAutoScroll=!1,this.intervalPeriod=5e3,this.scrollItems=1,this.itemsPerPage=1,this.hasErrors=!1,this.isLoading=!0,this.activeIndex=0,this.tutorialElementWidth=0}watchEndpoint(t,n){t&&t!=n&&this.cmsEndpoint&&this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}handleClientStylingChange(t,n){t!=n&&o(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,n){t!=n&&this.clientStylingUrl&&s(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}componentDidLoad(){window.addEventListener("resize",this.resizeHandler),this.stylingContainer&&(null!=window.emMessageBus?function(t,n){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(n,(n=>{i.innerHTML=n,t&&t.appendChild(i)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&s(this.stylingContainer,this.clientStylingUrl)))}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage()}componentDidUpdate(){this.recalculateItemsPerPage()}disconnectedCallback(){this.el.removeEventListener("touchstart",this.handleTouchStart),this.el.removeEventListener("touchmove",this.handleTouchMove),window.screen.orientation.removeEventListener("change",this.orientationChangeHandler),window.removeEventListener("resize",this.resizeHandler),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralTutorialSlider(){let t=new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);return t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),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":"iPad"===t||"iPhone"===t?"ios":"mtWeb"})()),new Promise(((n,i)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{n(t)})).catch((t=>{console.error(t),this.hasErrors=!0,i(t)})).finally((()=>{this.isLoading=!1}))}))}move(t){this.setActive(this.activeIndex+t)}recalculateItemsPerPage(){this.tutorialsElement&&(this.tutorialElementWidth=this.tutorialsElement.clientWidth,this.allElementsWidth=(this.tutorialData.length-1)*this.tutorialElementWidth)}goTo(t){let n=this.activeIndex-t;if(n>0)for(let t=0;t<n;t++)this.move(-1);else for(let t=0;t>n;t--)this.move(1)}handleTouchStart(t){const n=this.getTouches(t)[0];this.xDown=n.clientX,this.yDown=n.clientY}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let n=this.xDown-t.touches[0].clientX,i=this.yDown-t.touches[0].clientY;Math.abs(n)>Math.abs(i)&&this.move(n>0?1:-1),this.xDown=null,this.yDown=null}setActive(t){const n=this.tutorialData.length;this.activeIndex=t>=0?t>=n-1?n-1:t:0}renderDots(){const t=[];for(let i=0;i<this.tutorialData.length/this.itemsPerPage;i++)t.push(n("li",{class:i==this.activeIndex?"active":"default",onClick:()=>{this.goTo(i),this.setActive(i)}}));return t}render(){const t={transform:`translate(${this.allElementsWidth/(this.tutorialData.length-1)*this.activeIndex*-1}px, 0px)`},i={width:this.tutorialElementWidth/this.itemsPerPage+"px"};return this.hasErrors?n("div",{class:"GeneralTutorialSliderError"},n("div",{class:"TitleError"},e[void 0!==(o=this.language)&&o in e?o:"en"].error)):this.isLoading?void 0:n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"TutorialWrapper"},n("div",{class:"TutorialContent",ref:t=>this.slider=t},(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:0===this.activeIndex?"SliderNavButton DisabledArrow":"SliderNavButton",onClick:()=>this.move(-1)},n("svg",{fill:"none",stroke:"var(--emw--color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),n("main",null,n("div",{style:t,ref:t=>this.tutorialsElement=t,class:"TutorialItems"},this.tutorialData.map((t=>{var e,o,s,r,l,a,d,h,c,u,p,v,m,w,g,f,x,y;return n("div",{class:"TutorialItem",style:i},n("div",{class:"ItemTitle",innerHTML:null==t?void 0:t.title}),(null===(e=null==t?void 0:t.media)||void 0===e?void 0:e.images)?n("div",{class:"ItemImage"},n("img",this.isMobile?{src:null===(l=null===(r=null===(s=null===(o=null==t?void 0:t.media)||void 0===o?void 0:o.images[0])||void 0===s?void 0:s.sources)||void 0===r?void 0:r.find((t=>"mobile"===t.media)))||void 0===l?void 0:l.src,alt:null==t?void 0:t.slug}:{src:null===(c=null===(h=null===(d=null===(a=null==t?void 0:t.media)||void 0===a?void 0:a.images[0])||void 0===d?void 0:d.sources)||void 0===h?void 0:h.find((t=>"desktop"===t.media)))||void 0===c?void 0:c.src,alt:null==t?void 0:t.slug})):(null===(u=null==t?void 0:t.media)||void 0===u?void 0:u.video)?n("div",{class:"ItemImage"},n("video",{controls:!0,loop:!0,autoplay:!0},n("source",this.isMobile?{src:null===(w=null===(m=null===(v=null===(p=null==t?void 0:t.media)||void 0===p?void 0:p.video[0])||void 0===v?void 0:v.sources)||void 0===m?void 0:m.find((t=>"mobile"===t.media)))||void 0===w?void 0:w.src,type:"video/mp4"}:{src:null===(y=null===(x=null===(f=null===(g=null==t?void 0:t.media)||void 0===g?void 0:g.video[0])||void 0===f?void 0:f.sources)||void 0===x?void 0:x.find((t=>"desktop"===t.media)))||void 0===y?void 0:y.src,type:"video/mp4"}))):null,n("div",{class:"ItemDescription",innerHTML:null==t?void 0:t.content}))})))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:this.activeIndex===this.tutorialData.length-1?" SliderNavButton DisabledArrow disabled":"SliderNavButton",onClick:()=>this.move(1)},n("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}))),n("div",null)),this.showSliderDots&&n("div",{class:"DotsWrapper"},n("ul",{class:"Dots"},this.renderDots()))));var o}get el(){return i(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};r.style=":host {\n  display: block;\n}\n\n.GeneralTutorialSliderError {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n  color: red;\n}\n\nmain {\n  width: 100%;\n  overflow: hidden;\n}\n\n.TutorialWrapper {\n  width: 100%;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.TutorialContent {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n}\n\n.TutorialItems {\n  display: flex;\n  transition: transform 0.4s ease-in-out;\n  transform: translateX(0px);\n}\n\n.TutorialItem {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  color: #000;\n  background-color: #f5f5f5;\n  border-radius: 5px;\n  user-select: none;\n}\n.TutorialItem .ItemTitle {\n  padding: 25px 15px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n  overflow: hidden;\n}\n.TutorialItem .ItemImage video {\n  height: auto;\n  width: 450px;\n}\n.TutorialItem .ItemDescription {\n  font-size: 14px;\n  padding: 25px 15px;\n  font-weight: 400;\n  color: #000;\n}\n\n.SliderNavButton {\n  border: 0px;\n  width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.SliderNavButton svg {\n  width: 20px;\n  stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n  opacity: 0.2;\n  stroke: var(--emw--color-secondary, #FD2839);\n  pointer-events: none;\n}\n\n.DotsWrapper {\n  width: 100%;\n  margin: 0 auto;\n  margin-top: 20px;\n  height: 30px;\n}\n.DotsWrapper ul.Dots {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n}\n.DotsWrapper ul.Dots li {\n  height: 10px;\n  width: 10px;\n  background: #ccc;\n  border-radius: 50%;\n  margin-left: 3px;\n  margin-right: 3px;\n  list-style: none;\n  cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n  background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n  border: solid 1px var(--emw--color-secondary, #FD2839);\n  background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n  border: solid 1px var(--emw--color-secondary, #FD2839);\n  background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n  @media screen and (orientation: landscape) {\n    .TutorialItem {\n      width: 100%;\n    }\n  }\n  main {\n    height: 90cqh;\n  }\n  .TutorialItems {\n    height: inherit;\n  }\n  .TutorialItem {\n    min-width: 100%;\n    max-height: 800px;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    color: #000;\n    background-color: #f5f5f5;\n    border-radius: 5px;\n    user-select: none;\n  }\n  .TutorialItem .ItemTitle {\n    padding: 25px 15px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--emw--color-secondary, #FD2839);\n  }\n  .TutorialItem .ItemImage {\n    min-height: 200px;\n  }\n  .TutorialItem .ItemImage video {\n    height: auto;\n    width: 100%;\n  }\n  .TutorialItem .ItemDescription {\n    font-size: 14px;\n    padding: 25px 15px;\n    font-weight: 400;\n    color: #000;\n  }\n}";export{r as general_tutorial_slider}
+import{r as t,h as n,g as i}from"./index-37276b41.js";const e={en:{error:"Error",noResults:"Loading, please wait ..."},hu:{error:"Error",noResults:"Loading, please wait ..."},ro:{error:"Eroare",noResults:"Loading, please wait ..."},fr:{error:"Error",noResults:"Loading, please wait ..."},ar:{error:"خطأ",noResults:"Loading, please wait ..."},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ..."},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…"}},o="__WIDGET_GLOBAL_STYLE_CACHE__";function s(t,n){if(t){const i=document.createElement("style");i.innerHTML=n,t.appendChild(i)}}function r(t,n){if(!t||!n)return;const i=new URL(n);fetch(i.href).then((t=>t.text())).then((n=>{const i=document.createElement("style");i.innerHTML=n,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const l=class{constructor(n){var i;t(this,n),this.userAgent=window.navigator.userAgent,this.isMobile=!!((i=this.userAgent).toLowerCase().match(/android/i)||i.toLowerCase().match(/blackberry|bb/i)||i.toLowerCase().match(/iphone|ipad|ipod/i)||i.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.allElementsWidth=0,this.xDown=null,this.yDown=null,this.resizeHandler=()=>{this.recalculateItemsPerPage()},this.orientationChangeHandler=()=>{setTimeout((()=>{this.recalculateItemsPerPage()}),10)},this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.language="en",this.cmsEndpoint=void 0,this.userRoles="everyone",this.cmsEnv="stage",this.showSliderDots=!0,this.showSliderArrows=!0,this.showSliderArrowsMobile=!1,this.enableAutoScroll=!1,this.intervalPeriod=5e3,this.scrollItems=1,this.itemsPerPage=1,this.hasErrors=!1,this.isLoading=!0,this.activeIndex=0,this.tutorialElementWidth=0}watchEndpoint(t,n){t&&t!=n&&this.cmsEndpoint&&this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}handleClientStylingChange(t,n){t!=n&&s(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,n){t!=n&&this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}componentDidLoad(){window.addEventListener("resize",this.resizeHandler),this.stylingContainer&&(null!=window.emMessageBus?function(t,n,i,e=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!e)return function(t,n){const i=document.createElement("style");return window.emMessageBus.subscribe(n,(n=>{t&&(i.innerHTML=n,t.appendChild(i))}))}(t,n);window[o]||(window[o]={});const s=(i=function(t,n){return window.emMessageBus.subscribe(n,(i=>{if(!t)return;const e=t.getRootNode(),s=window[o];let r=s[n]?.sheet;r?s[n].refCount=s[n].refCount+1:(r=new CSSStyleSheet,r.replaceSync(i),s[n]={sheet:r,refCount:1});const l=e.adoptedStyleSheets||[];l.includes(r)||(e.adoptedStyleSheets=[...l,r])}))}(t,n)).unsubscribe.bind(i);i.unsubscribe=()=>{if(window[o][n]){const t=window[o][n];t.refCount>1?t.refCount=t.refCount-1:delete window[o][n]}s()}}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl)))}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage()}componentDidUpdate(){this.recalculateItemsPerPage()}disconnectedCallback(){this.el.removeEventListener("touchstart",this.handleTouchStart),this.el.removeEventListener("touchmove",this.handleTouchMove),window.screen.orientation.removeEventListener("change",this.orientationChangeHandler),window.removeEventListener("resize",this.resizeHandler),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralTutorialSlider(){let t=new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);return t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),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":"iPad"===t||"iPhone"===t?"ios":"mtWeb"})()),new Promise(((n,i)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{n(t)})).catch((t=>{console.error(t),this.hasErrors=!0,i(t)})).finally((()=>{this.isLoading=!1}))}))}move(t){this.setActive(this.activeIndex+t)}recalculateItemsPerPage(){this.tutorialsElement&&(this.tutorialElementWidth=this.tutorialsElement.clientWidth,this.allElementsWidth=(this.tutorialData.length-1)*this.tutorialElementWidth)}goTo(t){let n=this.activeIndex-t;if(n>0)for(let t=0;t<n;t++)this.move(-1);else for(let t=0;t>n;t--)this.move(1)}handleTouchStart(t){const n=this.getTouches(t)[0];this.xDown=n.clientX,this.yDown=n.clientY}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let n=this.xDown-t.touches[0].clientX,i=this.yDown-t.touches[0].clientY;Math.abs(n)>Math.abs(i)&&this.move(n>0?1:-1),this.xDown=null,this.yDown=null}setActive(t){const n=this.tutorialData.length;this.activeIndex=t>=0?t>=n-1?n-1:t:0}renderDots(){const t=[];for(let i=0;i<this.tutorialData.length/this.itemsPerPage;i++)t.push(n("li",{class:i==this.activeIndex?"active":"default",onClick:()=>{this.goTo(i),this.setActive(i)}}));return t}render(){const t={transform:`translate(${this.allElementsWidth/(this.tutorialData.length-1)*this.activeIndex*-1}px, 0px)`},i={width:this.tutorialElementWidth/this.itemsPerPage+"px"};return this.hasErrors?n("div",{class:"GeneralTutorialSliderError"},n("div",{class:"TitleError"},e[void 0!==(o=this.language)&&o in e?o:"en"].error)):this.isLoading?void 0:n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"TutorialWrapper"},n("div",{class:"TutorialContent",ref:t=>this.slider=t},(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:0===this.activeIndex?"SliderNavButton DisabledArrow":"SliderNavButton",onClick:()=>this.move(-1)},n("svg",{fill:"none",stroke:"var(--emw--color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),n("main",null,n("div",{style:t,ref:t=>this.tutorialsElement=t,class:"TutorialItems"},this.tutorialData.map((t=>{var e,o,s,r,l,a,d,h,c,u,p,v,w,m,f,g,x,y;return n("div",{class:"TutorialItem",style:i},n("div",{class:"ItemTitle",innerHTML:null==t?void 0:t.title}),(null===(e=null==t?void 0:t.media)||void 0===e?void 0:e.images)?n("div",{class:"ItemImage"},n("img",this.isMobile?{src:null===(l=null===(r=null===(s=null===(o=null==t?void 0:t.media)||void 0===o?void 0:o.images[0])||void 0===s?void 0:s.sources)||void 0===r?void 0:r.find((t=>"mobile"===t.media)))||void 0===l?void 0:l.src,alt:null==t?void 0:t.slug}:{src:null===(c=null===(h=null===(d=null===(a=null==t?void 0:t.media)||void 0===a?void 0:a.images[0])||void 0===d?void 0:d.sources)||void 0===h?void 0:h.find((t=>"desktop"===t.media)))||void 0===c?void 0:c.src,alt:null==t?void 0:t.slug})):(null===(u=null==t?void 0:t.media)||void 0===u?void 0:u.video)?n("div",{class:"ItemImage"},n("video",{controls:!0,loop:!0,autoplay:!0},n("source",this.isMobile?{src:null===(m=null===(w=null===(v=null===(p=null==t?void 0:t.media)||void 0===p?void 0:p.video[0])||void 0===v?void 0:v.sources)||void 0===w?void 0:w.find((t=>"mobile"===t.media)))||void 0===m?void 0:m.src,type:"video/mp4"}:{src:null===(y=null===(x=null===(g=null===(f=null==t?void 0:t.media)||void 0===f?void 0:f.video[0])||void 0===g?void 0:g.sources)||void 0===x?void 0:x.find((t=>"desktop"===t.media)))||void 0===y?void 0:y.src,type:"video/mp4"}))):null,n("div",{class:"ItemDescription",innerHTML:null==t?void 0:t.content}))})))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:this.activeIndex===this.tutorialData.length-1?" SliderNavButton DisabledArrow disabled":"SliderNavButton",onClick:()=>this.move(1)},n("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}))),n("div",null)),this.showSliderDots&&n("div",{class:"DotsWrapper"},n("ul",{class:"Dots"},this.renderDots()))));var o}get el(){return i(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};l.style=":host {\n  display: block;\n}\n\n.GeneralTutorialSliderError {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n  color: red;\n}\n\nmain {\n  width: 100%;\n  overflow: hidden;\n}\n\n.TutorialWrapper {\n  width: 100%;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.TutorialContent {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n}\n\n.TutorialItems {\n  display: flex;\n  transition: transform 0.4s ease-in-out;\n  transform: translateX(0px);\n}\n\n.TutorialItem {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  color: #000;\n  background-color: #f5f5f5;\n  border-radius: 5px;\n  user-select: none;\n}\n.TutorialItem .ItemTitle {\n  padding: 25px 15px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n  overflow: hidden;\n}\n.TutorialItem .ItemImage video {\n  height: auto;\n  width: 450px;\n}\n.TutorialItem .ItemDescription {\n  font-size: 14px;\n  padding: 25px 15px;\n  font-weight: 400;\n  color: #000;\n}\n\n.SliderNavButton {\n  border: 0px;\n  width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.SliderNavButton svg {\n  width: 20px;\n  stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n  opacity: 0.2;\n  stroke: var(--emw--color-secondary, #FD2839);\n  pointer-events: none;\n}\n\n.DotsWrapper {\n  width: 100%;\n  margin: 0 auto;\n  margin-top: 20px;\n  height: 30px;\n}\n.DotsWrapper ul.Dots {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n}\n.DotsWrapper ul.Dots li {\n  height: 10px;\n  width: 10px;\n  background: #ccc;\n  border-radius: 50%;\n  margin-left: 3px;\n  margin-right: 3px;\n  list-style: none;\n  cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n  background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n  border: solid 1px var(--emw--color-secondary, #FD2839);\n  background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n  border: solid 1px var(--emw--color-secondary, #FD2839);\n  background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n  @media screen and (orientation: landscape) {\n    .TutorialItem {\n      width: 100%;\n    }\n  }\n  main {\n    height: 90cqh;\n  }\n  .TutorialItems {\n    height: inherit;\n  }\n  .TutorialItem {\n    min-width: 100%;\n    max-height: 800px;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    color: #000;\n    background-color: #f5f5f5;\n    border-radius: 5px;\n    user-select: none;\n  }\n  .TutorialItem .ItemTitle {\n    padding: 25px 15px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--emw--color-secondary, #FD2839);\n  }\n  .TutorialItem .ItemImage {\n    min-height: 200px;\n  }\n  .TutorialItem .ItemImage video {\n    height: auto;\n    width: 100%;\n  }\n  .TutorialItem .ItemDescription {\n    font-size: 14px;\n    padding: 25px 15px;\n    font-weight: 400;\n    color: #000;\n  }\n}";export{l as general_tutorial_slider}

package/package.json

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