@everymatrix/general-slider-navigation 1.87.26 → 1.87.28

package/dist/cjs/carousel-component_2.cjs.entry.js

@@ -126,6 +126,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
@@ -171,18 +173,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 debounce = (func, delay) => {
@@ -315,7 +374,7 @@ const CarouselComponent = class {
         this.init();
         if (this.stylingContainer) {
             if (this.mbSource) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)
@@ -561,7 +620,7 @@ const GeneralSliderNavigation = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

package/dist/esm/carousel-component_2.entry.js

@@ -122,6 +122,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
@@ -167,18 +169,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 debounce = (func, delay) => {
@@ -311,7 +370,7 @@ const CarouselComponent = class {
         this.init();
         if (this.stylingContainer) {
             if (this.mbSource) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)
@@ -557,7 +616,7 @@ const GeneralSliderNavigation = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

package/dist/general-slider-navigation/carousel-component_2.entry.js

@@ -1 +1 @@
-import{r as t,h as i,g as e}from"./index-62fe8c92.js";const s={en:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},hu:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ro:{error:"Eroare",noResults:"Loading, please wait ...",joinNow:"Join now"},fr:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ar:{error:"خطأ",noResults:"Loading, please wait ...",joinNow:"Join now"},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ...",joinNow:"Join now"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…",joinNow:"Join now"},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…",joinNow:"Join now"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{s[i]||(s[i]={});for(let e in t[i])s[i][e]=t[i][e]})),i(!0)}))})),r=(t,i)=>s[void 0!==i&&i in s?i:"en"][t];function n(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)}))}function h(t,i){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{e.innerHTML=i,t&&t.appendChild(e)}))}}const l=(t,i)=>function(...e){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{t.apply(this,e)}),i)},d=class{constructor(i){var e;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((e=this.userAgent).toLowerCase().match(/android/i)||e.toLowerCase().match(/blackberry|bb/i)||e.toLowerCase().match(/iphone|ipad|ipod/i)||e.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.touchStartX=0,this.touchEndX=0,this.bannersSkeleton=Array.from({length:5},((t,i)=>({id:i}))),this.moveSliderIndex=t=>{t<1&&(t=this.content.length),t>this.content.length&&(t=1),this.currIndex=t,this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())},this.handleTouchStart=t=>{this.touchStartX=t.changedTouches[0].screenX},this.handleTouchEnd=t=>{this.touchEndX=t.changedTouches[0].screenX,this.handleSwipe()},this.navigationTo=(t,i,e)=>{window.postMessage({type:"NavigateTo",path:t,target:i||null,externalLink:e||!1},window.location.href)},this.changeSlider=t=>{t>this.currIndex-1?this.next():t<this.currIndex-1&&this.prev()},this.setImage=t=>{let i="";switch(this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=t.srcMobile;break;case"tablet":i=t.srcTablet;break;case"desktop":i=t.srcDesktop}return i},this.locales={},this.isLoading=!1,this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.content=void 0,this.bulletNavigation=!0,this.language="en",this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.currIndex=0,this.width=void 0,this.height=void 0,this.margin=void 0,this.sliderElement=void 0,this.totalWidth=void 0,this.device="",this.innerWidth=void 0}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){this.isLocalesEmpty()&&o(this.translationUrl)}handleContentChange(){Array.isArray(this.content)&&this.content.length&&(this.applyStartIndex(),this.resize())}isLocalesEmpty(){return!this.locales||0===Object.keys(this.locales).length}async componentWillLoad(){if(this.translationUrl.length>2&&this.isLocalesEmpty()&&await o(this.translationUrl),this.content.length>1){const t=this.content[1].image.srcMobile,i=document.createElement("link");i.rel="preload",i.as="image",i.href=t,i.setAttribute("fetchpriority","high"),document.head.appendChild(i),this.preloadLink=i}}componentDidLoad(){this.init(),this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}init(){this.applyStartIndex(),this.bindEvents(),this.slideTimer>0&&this.timer(),this.calcInnerWidth(),this.resize()}applyStartIndex(){if(!this.content||!this.content.length)return;let t=1;switch(this.startFrom){case"start":t=1;break;case"end":t=this.content.length;break;default:t=Math.ceil(this.content.length/2)}this.moveSliderIndex(t)}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth}resize(){var t;this.calcInnerWidth(),this.isMobile?(this.width=Math.max(.3*innerWidth,200),this.height=.4*window.innerHeight):(this.width=this.innerWidth>1200?Math.max(.1*this.innerWidth,300):Math.max(.2*this.innerWidth,200),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.content.length,this.margin=-5;const i=(null===(t=this.sliderElement)||void 0===t?void 0:t.children)||[];for(let t=0;t<i.length;t++){const e=i[t];e.style.margin=`0 ${this.margin}px`,e.style.width=this.width-2*this.margin+"px"}this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())}timer(){this.clearTimer(),this.interval=setInterval((()=>{this.moveSliderIndex(++this.currIndex)}),1e3*this.slideTimer)}disconnectedCallback(){try{window.onresize&&(window.onresize=null),window.removeEventListener("resize",this.resize),this.el&&(this.el.removeEventListener("touchstart",this.handleTouchStart,!1),this.el.removeEventListener("touchend",this.handleTouchEnd,!1)),this.clearTimer(),this.preloadLink&&document.head.contains(this.preloadLink)&&document.head.removeChild(this.preloadLink)}catch(t){console.warn("Error while cleaning up events:",t)}}clearTimer(){this.interval&&clearInterval(this.interval)}prev(){this.moveSliderIndex(--this.currIndex),this.slideTimer>0&&this.timer()}next(){this.moveSliderIndex(++this.currIndex),this.slideTimer>0&&this.timer()}bindEvents(){window.onresize=l(this.resize,150).bind(this),this.el.addEventListener("touchstart",this.handleTouchStart,!1),this.el.addEventListener("touchend",this.handleTouchEnd,!1)}handleSwipe(){this.touchEndX<this.touchStartX&&this.next(),this.touchEndX>this.touchStartX&&this.prev()}getTransformStyle(t){const i=t===this.currIndex-1?"1200px":"900px";return t===this.currIndex-1?`perspective(${i})`:`perspective(${i}) rotateY(${t<this.currIndex-1?"20deg":"-20deg"})`}getSliderTransformStyle(){return`translate3d(${this.currIndex*-this.width+this.width/2+this.innerWidth/2}px, 0, 0)`}renderNavigation(){return i("div",{class:"CarouselNavigation"},this.content.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}renderContent(t,e,s){const o=e===this.currIndex-1,n=o?{}:{cursor:"unset"},a=o?{height:`${this.height}px`}:{height:this.height-70+"px"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:o},onClick:s?void 0:this.changeSlider.bind(this,e),style:a},i("div",{class:"Item3dFrame",style:{transform:this.getTransformStyle(e)}},s&&i("div",{class:"Item3dFrameImgSkeleton",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",backgroundColor:"#eee",animation:"pulse 1.5s infinite"}}),!s&&i("img",Object.assign({alt:`${e}-${t.title}`,src:t.image.srcMobile,srcSet:`${t.image.srcMobile} 480w, ${t.image.srcTablet} 768w, ${t.image.srcDesktop} 1200w`,sizes:"(max-width: 480px) 480px, (max-width: 768px) 768px, 1200px",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",objectFit:"cover"},class:"Item3dFrameImg"},{fetchpriority:1===e?"high":"auto"})),i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{o&&!s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:n,class:"JoinButton"},i("span",null,this.isLocalesEmpty()?r("joinNow",this.language):this.locales.joinNow),i("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L10 8L5 13",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("hr",{class:"Divider"}),i("div",{class:"BottomSection"},i("h3",null,s?"":t.title.toUpperCase())))))}render(){return i("div",{key:"5119cf5e1d9fde4d1b6aef4a6e572bc4e1dbe5e9",ref:t=>this.stylingContainer=t},i("div",{key:"53f609720ecf42594639e59a11deabe8460f83c0",class:"Carousel"},i("div",{key:"e8445aeca84740406476b6e278bf3d80ff2c3408",class:"CarouselBody"},i("div",{key:"9abcd7d53a0c5c967e658c5c9413e4da7bd96d98",class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.isLoading?this.bannersSkeleton.map(((t,i)=>this.renderContent(null,i,!0))):this.content.map(((t,i)=>this.renderContent(t,i,!1))))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],content:["handleContentChange"]}}};d.style=':host{display:block;font-family:"Roboto", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #ffffff);cursor:pointer}.carousel__prev:hover,.carousel__next:hover{transform:scale(1.25)}.carousel__prev{left:40%}.carousel__next{right:40%}.CarouselBody{width:100%;padding:80px 0px;overflow:hidden}.CarouselSlider{position:relative;transition:transform 1s ease-in-out;background:transparent;display:flex;align-items:center}.CarouselSliderItem{opacity:0.7;position:relative;display:block;float:left;box-sizing:border-box}.Item3dFrame{position:relative;width:100%;height:100%;transition:transform 1s ease-in-out, box-shadow 0.5s ease-in-out;transform-style:preserve-3d;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--emw--button-border-radius, 20px)}.Item3dFrameImg{border-radius:var(--emw--button-border-radius, 20px)}.CarouselSliderItemActive .Item3dFrame{animation:glow 4s linear infinite}@keyframes glow{0%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}50%{box-shadow:0 0 50px 5px var(--emw--color-secondary, #f2711c)}100%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}}.TopSection{display:flex;justify-content:flex-start;align-items:center}.JoinButton{background-image:linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, black 20%), var(--emw--color-primary, #22b04e), color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, var(--emw--color-white, #ffffff) 30%));color:var(--emw--color-typography, #ffffff);height:42px;width:110px;border-radius:var(--emw--button-border-radius, 20px);cursor:pointer;font-size:var(--emw--size-small, 14px);border:2px solid var(--emw--button-border-color, #0e5924);display:flex;align-items:center;justify-content:center;gap:2px}.ItemSection{padding:12px 20px;display:flex;flex-direction:column;gap:2px;z-index:1}.Item3dFrameImgSkeleton{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--emw--button-border-radius, 20px);animation:skeleton-loading 1s linear infinite alternate}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-slider-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-slider-secondary-color, #f0f0f0)}}.Divider{border:none;border-top:2px solid var(--emw--color-white, #ffffff);width:100%;opacity:0.3}.BottomSection{display:flex;justify-content:flex-start;align-items:flex-start;width:50%;height:60px}.BottomSection h3{font-size:var(--emw--size-large, 24px);margin:0;color:var(--emw--color-typography, #ffffff)}.CarouselNavigation{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.CarouselNavigationBullet{width:12px;height:12px;background-color:var(--emw--color-grey-100, rgba(255, 255, 255, 0.5));border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color 0.3s}.CarouselNavigationBulletActive{background-color:var(--emw--color-primary, #22b04e)}.CarouselSliderItemActive{opacity:1}';const c=class{constructor(i){t(this,i),this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEndpoint=void 0,this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.hasErrors=!1,this.device="",this.isLoading=!1,this.locales={}}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl),this.setLocales()}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await o(this.translationUrl),this.setLocales(),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}componentDidLoad(){this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}setLocales(){this.locales.joinNow=r("joinNow",this.language)}getGeneralSliderNavigation(){let t=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);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"})()),this.isLoading=!0,new Promise(((i,e)=>{fetch(t.href).then((t=>t.json())).then((t=>{i(t.banners)})).catch((t=>{console.error(t),this.hasErrors=!0,e(t)})).finally((()=>{this.isLoading=!1}))}))}render(){return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},r("error",this.language))):i("div",{ref:t=>this.stylingContainer=t},i("carousel-component",{locales:this.locales,"is-loading":this.isLoading,content:this.sliderData,language:this.language,"mb-source":this.mbSource,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"bullet-navigation":this.bulletNavigation,"slide-timer":this.slideTimer,"translation-url":this.translationUrl,"start-from":this.startFrom}))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};c.style="";export{d as carousel_component,c as general_slider_navigation}
+import{r as t,h as i,g as e}from"./index-62fe8c92.js";const s={en:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},hu:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ro:{error:"Eroare",noResults:"Loading, please wait ...",joinNow:"Join now"},fr:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ar:{error:"خطأ",noResults:"Loading, please wait ...",joinNow:"Join now"},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ...",joinNow:"Join now"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…",joinNow:"Join now"},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…",joinNow:"Join now"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{s[i]||(s[i]={});for(let e in t[i])s[i][e]=t[i][e]})),i(!0)}))})),r=(t,i)=>s[void 0!==i&&i in s?i:"en"][t],n="__WIDGET_GLOBAL_STYLE_CACHE__";function a(t,i){if(t){const e=document.createElement("style");e.innerHTML=i,t.appendChild(e)}}function h(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)}))}function l(t,i,e,s=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!s)return e=function(t,i){const e=document.createElement("style");return window.emMessageBus.subscribe(i,(i=>{t&&(e.innerHTML=i,t.appendChild(e))}))}(t,i),e;window[n]||(window[n]={}),e=function(t,i){return window.emMessageBus.subscribe(i,(e=>{if(!t)return;const s=t.getRootNode(),o=window[n];let r=o[i]?.sheet;r?o[i].refCount=o[i].refCount+1:(r=new CSSStyleSheet,r.replaceSync(e),o[i]={sheet:r,refCount:1});const a=s.adoptedStyleSheets||[];a.includes(r)||(s.adoptedStyleSheets=[...a,r])}))}(t,i);const o=e.unsubscribe.bind(e);return e.unsubscribe=()=>{if(window[n][i]){const t=window[n][i];t.refCount>1?t.refCount=t.refCount-1:delete window[n][i]}o()},e}const d=(t,i)=>function(...e){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{t.apply(this,e)}),i)},c=class{constructor(i){var e;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((e=this.userAgent).toLowerCase().match(/android/i)||e.toLowerCase().match(/blackberry|bb/i)||e.toLowerCase().match(/iphone|ipad|ipod/i)||e.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.touchStartX=0,this.touchEndX=0,this.bannersSkeleton=Array.from({length:5},((t,i)=>({id:i}))),this.moveSliderIndex=t=>{t<1&&(t=this.content.length),t>this.content.length&&(t=1),this.currIndex=t,this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())},this.handleTouchStart=t=>{this.touchStartX=t.changedTouches[0].screenX},this.handleTouchEnd=t=>{this.touchEndX=t.changedTouches[0].screenX,this.handleSwipe()},this.navigationTo=(t,i,e)=>{window.postMessage({type:"NavigateTo",path:t,target:i||null,externalLink:e||!1},window.location.href)},this.changeSlider=t=>{t>this.currIndex-1?this.next():t<this.currIndex-1&&this.prev()},this.setImage=t=>{let i="";switch(this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=t.srcMobile;break;case"tablet":i=t.srcTablet;break;case"desktop":i=t.srcDesktop}return i},this.locales={},this.isLoading=!1,this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.content=void 0,this.bulletNavigation=!0,this.language="en",this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.currIndex=0,this.width=void 0,this.height=void 0,this.margin=void 0,this.sliderElement=void 0,this.totalWidth=void 0,this.device="",this.innerWidth=void 0}handleClientStylingChange(t,i){t!=i&&a(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){this.isLocalesEmpty()&&o(this.translationUrl)}handleContentChange(){Array.isArray(this.content)&&this.content.length&&(this.applyStartIndex(),this.resize())}isLocalesEmpty(){return!this.locales||0===Object.keys(this.locales).length}async componentWillLoad(){if(this.translationUrl.length>2&&this.isLocalesEmpty()&&await o(this.translationUrl),this.content.length>1){const t=this.content[1].image.srcMobile,i=document.createElement("link");i.rel="preload",i.as="image",i.href=t,i.setAttribute("fetchpriority","high"),document.head.appendChild(i),this.preloadLink=i}}componentDidLoad(){this.init(),this.stylingContainer&&(this.mbSource?l(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)))}init(){this.applyStartIndex(),this.bindEvents(),this.slideTimer>0&&this.timer(),this.calcInnerWidth(),this.resize()}applyStartIndex(){if(!this.content||!this.content.length)return;let t=1;switch(this.startFrom){case"start":t=1;break;case"end":t=this.content.length;break;default:t=Math.ceil(this.content.length/2)}this.moveSliderIndex(t)}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth}resize(){var t;this.calcInnerWidth(),this.isMobile?(this.width=Math.max(.3*innerWidth,200),this.height=.4*window.innerHeight):(this.width=this.innerWidth>1200?Math.max(.1*this.innerWidth,300):Math.max(.2*this.innerWidth,200),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.content.length,this.margin=-5;const i=(null===(t=this.sliderElement)||void 0===t?void 0:t.children)||[];for(let t=0;t<i.length;t++){const e=i[t];e.style.margin=`0 ${this.margin}px`,e.style.width=this.width-2*this.margin+"px"}this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())}timer(){this.clearTimer(),this.interval=setInterval((()=>{this.moveSliderIndex(++this.currIndex)}),1e3*this.slideTimer)}disconnectedCallback(){try{window.onresize&&(window.onresize=null),window.removeEventListener("resize",this.resize),this.el&&(this.el.removeEventListener("touchstart",this.handleTouchStart,!1),this.el.removeEventListener("touchend",this.handleTouchEnd,!1)),this.clearTimer(),this.preloadLink&&document.head.contains(this.preloadLink)&&document.head.removeChild(this.preloadLink)}catch(t){console.warn("Error while cleaning up events:",t)}}clearTimer(){this.interval&&clearInterval(this.interval)}prev(){this.moveSliderIndex(--this.currIndex),this.slideTimer>0&&this.timer()}next(){this.moveSliderIndex(++this.currIndex),this.slideTimer>0&&this.timer()}bindEvents(){window.onresize=d(this.resize,150).bind(this),this.el.addEventListener("touchstart",this.handleTouchStart,!1),this.el.addEventListener("touchend",this.handleTouchEnd,!1)}handleSwipe(){this.touchEndX<this.touchStartX&&this.next(),this.touchEndX>this.touchStartX&&this.prev()}getTransformStyle(t){const i=t===this.currIndex-1?"1200px":"900px";return t===this.currIndex-1?`perspective(${i})`:`perspective(${i}) rotateY(${t<this.currIndex-1?"20deg":"-20deg"})`}getSliderTransformStyle(){return`translate3d(${this.currIndex*-this.width+this.width/2+this.innerWidth/2}px, 0, 0)`}renderNavigation(){return i("div",{class:"CarouselNavigation"},this.content.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}renderContent(t,e,s){const o=e===this.currIndex-1,n=o?{}:{cursor:"unset"},a=o?{height:`${this.height}px`}:{height:this.height-70+"px"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:o},onClick:s?void 0:this.changeSlider.bind(this,e),style:a},i("div",{class:"Item3dFrame",style:{transform:this.getTransformStyle(e)}},s&&i("div",{class:"Item3dFrameImgSkeleton",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",backgroundColor:"#eee",animation:"pulse 1.5s infinite"}}),!s&&i("img",Object.assign({alt:`${e}-${t.title}`,src:t.image.srcMobile,srcSet:`${t.image.srcMobile} 480w, ${t.image.srcTablet} 768w, ${t.image.srcDesktop} 1200w`,sizes:"(max-width: 480px) 480px, (max-width: 768px) 768px, 1200px",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",objectFit:"cover"},class:"Item3dFrameImg"},{fetchpriority:1===e?"high":"auto"})),i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{o&&!s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:n,class:"JoinButton"},i("span",null,this.isLocalesEmpty()?r("joinNow",this.language):this.locales.joinNow),i("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L10 8L5 13",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("hr",{class:"Divider"}),i("div",{class:"BottomSection"},i("h3",null,s?"":t.title.toUpperCase())))))}render(){return i("div",{key:"5119cf5e1d9fde4d1b6aef4a6e572bc4e1dbe5e9",ref:t=>this.stylingContainer=t},i("div",{key:"53f609720ecf42594639e59a11deabe8460f83c0",class:"Carousel"},i("div",{key:"e8445aeca84740406476b6e278bf3d80ff2c3408",class:"CarouselBody"},i("div",{key:"9abcd7d53a0c5c967e658c5c9413e4da7bd96d98",class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.isLoading?this.bannersSkeleton.map(((t,i)=>this.renderContent(null,i,!0))):this.content.map(((t,i)=>this.renderContent(t,i,!1))))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],content:["handleContentChange"]}}};c.style=':host{display:block;font-family:"Roboto", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #ffffff);cursor:pointer}.carousel__prev:hover,.carousel__next:hover{transform:scale(1.25)}.carousel__prev{left:40%}.carousel__next{right:40%}.CarouselBody{width:100%;padding:80px 0px;overflow:hidden}.CarouselSlider{position:relative;transition:transform 1s ease-in-out;background:transparent;display:flex;align-items:center}.CarouselSliderItem{opacity:0.7;position:relative;display:block;float:left;box-sizing:border-box}.Item3dFrame{position:relative;width:100%;height:100%;transition:transform 1s ease-in-out, box-shadow 0.5s ease-in-out;transform-style:preserve-3d;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--emw--button-border-radius, 20px)}.Item3dFrameImg{border-radius:var(--emw--button-border-radius, 20px)}.CarouselSliderItemActive .Item3dFrame{animation:glow 4s linear infinite}@keyframes glow{0%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}50%{box-shadow:0 0 50px 5px var(--emw--color-secondary, #f2711c)}100%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}}.TopSection{display:flex;justify-content:flex-start;align-items:center}.JoinButton{background-image:linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, black 20%), var(--emw--color-primary, #22b04e), color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, var(--emw--color-white, #ffffff) 30%));color:var(--emw--color-typography, #ffffff);height:42px;width:110px;border-radius:var(--emw--button-border-radius, 20px);cursor:pointer;font-size:var(--emw--size-small, 14px);border:2px solid var(--emw--button-border-color, #0e5924);display:flex;align-items:center;justify-content:center;gap:2px}.ItemSection{padding:12px 20px;display:flex;flex-direction:column;gap:2px;z-index:1}.Item3dFrameImgSkeleton{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--emw--button-border-radius, 20px);animation:skeleton-loading 1s linear infinite alternate}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-slider-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-slider-secondary-color, #f0f0f0)}}.Divider{border:none;border-top:2px solid var(--emw--color-white, #ffffff);width:100%;opacity:0.3}.BottomSection{display:flex;justify-content:flex-start;align-items:flex-start;width:50%;height:60px}.BottomSection h3{font-size:var(--emw--size-large, 24px);margin:0;color:var(--emw--color-typography, #ffffff)}.CarouselNavigation{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.CarouselNavigationBullet{width:12px;height:12px;background-color:var(--emw--color-grey-100, rgba(255, 255, 255, 0.5));border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color 0.3s}.CarouselNavigationBulletActive{background-color:var(--emw--color-primary, #22b04e)}.CarouselSliderItemActive{opacity:1}';const u=class{constructor(i){t(this,i),this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEndpoint=void 0,this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.hasErrors=!1,this.device="",this.isLoading=!1,this.locales={}}handleClientStylingChange(t,i){t!=i&&a(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl),this.setLocales()}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await o(this.translationUrl),this.setLocales(),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}componentDidLoad(){this.stylingContainer&&(this.mbSource?l(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}setLocales(){this.locales.joinNow=r("joinNow",this.language)}getGeneralSliderNavigation(){let t=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);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"})()),this.isLoading=!0,new Promise(((i,e)=>{fetch(t.href).then((t=>t.json())).then((t=>{i(t.banners)})).catch((t=>{console.error(t),this.hasErrors=!0,e(t)})).finally((()=>{this.isLoading=!1}))}))}render(){return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},r("error",this.language))):i("div",{ref:t=>this.stylingContainer=t},i("carousel-component",{locales:this.locales,"is-loading":this.isLoading,content:this.sliderData,language:this.language,"mb-source":this.mbSource,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"bullet-navigation":this.bulletNavigation,"slide-timer":this.slideTimer,"translation-url":this.translationUrl,"start-from":this.startFrom}))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};u.style="";export{c as carousel_component,u as general_slider_navigation}

package/package.json

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