@everymatrix/general-slider-navigation 1.17.0 → 1.18.0

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

@@ -162,13 +162,8 @@ const GeneralSliderNavigation = class {
         this.calculateSliderWidth();
       }, 10);
     };
-    this.navigationTo = (url, type, isExternal) => {
-      if (isExternal) { // if link is external, inform FE
-        window.postMessage({ type: 'ExternalLinkNavigation', externalUrl: url, target: isExternal, linkType: type }, window.location.href);
-      }
-      else { // if link is internal, inform FE
-        window.postMessage({ type: 'LinkNavigation', navUrl: url, target: isExternal }, window.location.href);
-      }
+    this.navigationTo = (url, target, isExternal) => {
+      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
     };
     this.setImage = (image) => {
       let source = '';

package/dist/collection/components/general-slider-navigation/general-slider-navigation.js

@@ -70,13 +70,8 @@ export class GeneralSliderNavigation {
         this.calculateSliderWidth();
       }, 10);
     };
-    this.navigationTo = (url, type, isExternal) => {
-      if (isExternal) { // if link is external, inform FE
-        window.postMessage({ type: 'ExternalLinkNavigation', externalUrl: url, target: isExternal, linkType: type }, window.location.href);
-      }
-      else { // if link is internal, inform FE
-        window.postMessage({ type: 'LinkNavigation', navUrl: url, target: isExternal }, window.location.href);
-      }
+    this.navigationTo = (url, target, isExternal) => {
+      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
     };
     this.setImage = (image) => {
       let source = '';

package/dist/components/general-slider-navigation.js

@@ -160,13 +160,8 @@ const GeneralSliderNavigation$1 = /*@__PURE__*/ proxyCustomElement(class extends
         this.calculateSliderWidth();
       }, 10);
     };
-    this.navigationTo = (url, type, isExternal) => {
-      if (isExternal) { // if link is external, inform FE
-        window.postMessage({ type: 'ExternalLinkNavigation', externalUrl: url, target: isExternal, linkType: type }, window.location.href);
-      }
-      else { // if link is internal, inform FE
-        window.postMessage({ type: 'LinkNavigation', navUrl: url, target: isExternal }, window.location.href);
-      }
+    this.navigationTo = (url, target, isExternal) => {
+      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
     };
     this.setImage = (image) => {
       let source = '';

package/dist/esm/general-slider-navigation.entry.js

@@ -158,13 +158,8 @@ const GeneralSliderNavigation = class {
         this.calculateSliderWidth();
       }, 10);
     };
-    this.navigationTo = (url, type, isExternal) => {
-      if (isExternal) { // if link is external, inform FE
-        window.postMessage({ type: 'ExternalLinkNavigation', externalUrl: url, target: isExternal, linkType: type }, window.location.href);
-      }
-      else { // if link is internal, inform FE
-        window.postMessage({ type: 'LinkNavigation', navUrl: url, target: isExternal }, window.location.href);
-      }
+    this.navigationTo = (url, target, isExternal) => {
+      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
     };
     this.setImage = (image) => {
       let source = '';

package/dist/general-slider-navigation/general-slider-navigation.esm.js

@@ -1 +1 @@
-import{p as e,b as i}from"./p-b72fe935.js";(()=>{const i=import.meta.url,s={};return""!==i&&(s.resourcesUrl=new URL(".",i).href),e(s)})().then((e=>i([["p-c80bf480",[[1,"general-slider-navigation",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],cmsEndpoint:[513,"cms-endpoint"],cmsEnv:[513,"cms-env"],language:[513],userRoles:[513,"user-roles"],showSliderArrows:[516,"show-slider-arrows"],showSliderArrowsMobile:[516,"show-slider-arrows-mobile"],showMobileGrid:[516,"show-mobile-grid"],showNavigationSliderMobile:[516,"show-navigation-slider-mobile"],showNavigationSliderDesktop:[516,"show-navigation-slider-desktop"],itemsPerPageDesktop:[514,"items-per-page-desktop"],itemsPerPageMobile:[514,"items-per-page-mobile"],externalLinkActive:[1540,"external-link-active"],internalLinkActive:[1540,"internal-link-active"],isLoading:[32],limitStylingAppends:[32],hasErrors:[32],device:[32],activeIndex:[32],sliderMenuElementWidth:[32]}]]]],e)));
+import{p as e,b as i}from"./p-b72fe935.js";(()=>{const i=import.meta.url,s={};return""!==i&&(s.resourcesUrl=new URL(".",i).href),e(s)})().then((e=>i([["p-0e49375c",[[1,"general-slider-navigation",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],cmsEndpoint:[513,"cms-endpoint"],cmsEnv:[513,"cms-env"],language:[513],userRoles:[513,"user-roles"],showSliderArrows:[516,"show-slider-arrows"],showSliderArrowsMobile:[516,"show-slider-arrows-mobile"],showMobileGrid:[516,"show-mobile-grid"],showNavigationSliderMobile:[516,"show-navigation-slider-mobile"],showNavigationSliderDesktop:[516,"show-navigation-slider-desktop"],itemsPerPageDesktop:[514,"items-per-page-desktop"],itemsPerPageMobile:[514,"items-per-page-mobile"],externalLinkActive:[1540,"external-link-active"],internalLinkActive:[1540,"internal-link-active"],isLoading:[32],limitStylingAppends:[32],hasErrors:[32],device:[32],activeIndex:[32],sliderMenuElementWidth:[32]}]]]],e)));

package/dist/general-slider-navigation/p-0e49375c.entry.js

@@ -0,0 +1 @@
+import{r as n,h as i,g as e}from"./p-b72fe935.js";const t=["ro","en","fr","ar","hu"],r={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 ..."}},s=class{constructor(i){var e;n(this,i),this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.showSliderArrows=!0,this.showSliderArrowsMobile=!0,this.showMobileGrid=!1,this.showNavigationSliderMobile=!0,this.showNavigationSliderDesktop=!0,this.itemsPerPageDesktop=3,this.itemsPerPageMobile=2,this.isLoading=!0,this.limitStylingAppends=!1,this.hasErrors=!1,this.device="",this.activeIndex=0,this.sliderMenuElementWidth=0,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.allElementsWidth=0,this.xDown=null,this.yDown=null,this.resizeHandler=()=>{this.calculateSliderWidth()},this.orientationChangeHandler=()=>{setTimeout((()=>{this.calculateSliderWidth()}),10)},this.navigationTo=(n,i,e)=>{window.postMessage({type:"NavigateTo",path:n,target:i||null,externalLink:e||!1},window.location.href)},this.setImage=n=>{let i="";switch(this.device=function(){const n=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(n.includes("iphone"))return"mobile";if(n.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=n.srcMobile;break;case"tablet":i=n.srcTablet;break;case"desktop":i=n.srcDesktop}return i},this.setClientStyling=()=>{let n=document.createElement("style");n.innerHTML=this.clientStyling,this.stylingContainer.prepend(n)},this.setClientStylingURL=()=>{let n=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(n.href).then((n=>n.text())).then((n=>{i.innerHTML=n,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((n=>{console.log("error ",n)}))}}watchEndpoint(n,i){n&&n!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((n=>{this.sliderData=n}))}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((n=>{this.sliderData=n}))}componentDidLoad(){window.addEventListener("resize",this.resizeHandler)}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidUpdate(){this.calculateSliderWidth()}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)}getGeneralSliderNavigation(){let n=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);return n.searchParams.append("env",this.cmsEnv),n.searchParams.append("userRoles",this.userRoles),n.searchParams.append("device",(()=>{const n=(()=>{let n=window.navigator.userAgent;return n.toLowerCase().match(/android/i)?"Android":n.toLowerCase().match(/iphone/i)?"iPhone":n.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(n)return"PC"===n?"dk":"iPad"===n||"iPhone"===n?"ios":"mtWeb"})()),new Promise(((i,e)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{i(n.banners)})).catch((n=>{console.error(n),this.hasErrors=!0,e(n)})).finally((()=>{this.isLoading=!1}))}))}handleTouchStart(n){const i=this.getTouches(n)[0];this.xDown=i.clientX,this.yDown=i.clientY}handleTouchMove(n){if(!this.xDown||!this.yDown)return;let i=this.xDown-n.touches[0].clientX,e=this.yDown-n.touches[0].clientY;Math.abs(i)>Math.abs(e)&&this.move(i>0?1:-1),this.xDown=null,this.yDown=null}calculateSliderWidth(){this.sliderMenuElement&&(this.sliderMenuElementWidth=this.sliderMenuElement.clientWidth)}getTouches(n){return n.touches||n.originalEvent.touches}setActive(n){const i=Math.ceil(this.sliderData.length/(this.isMobile?this.itemsPerPageMobile:this.itemsPerPageDesktop));this.activeIndex=n>=0?n>=i-1?i-1:n:0}move(n){this.setActive(this.activeIndex+n)}goTo(n){let i=this.activeIndex-n;if(i>0)for(let n=0;n<i;n++)this.move(-1);else for(let n=0;n>i;n--)this.move(1)}render(){const n={transform:`translate(${+this.sliderMenuElementWidth*this.activeIndex*-1}px, 0px)`},e={width:this.sliderMenuElementWidth/Math.ceil(this.itemsPerPageDesktop)+"px"},s={width:this.sliderMenuElementWidth/this.itemsPerPageMobile+"px"};return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},(()=>{const n=this.language;return r[void 0!==n&&t.includes(n)?n:"en"].error})())):this.isLoading?void 0:i("div",{ref:n=>this.stylingContainer=n},i("div",{class:"SliderWrapper"},i("div",{class:"SliderWrapperContent",ref:n=>this.slider=n},(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:0===this.activeIndex?"SliderNavButton DisabledArrow":"SliderNavButton",onClick:()=>this.move(-1)},i("svg",{fill:"none",stroke:"var(--emfe-w-color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),this.showNavigationSliderMobile&&this.isMobile?i("main",null,i("div",{style:n,ref:n=>this.sliderMenuElement=n,class:"SliderItems"},this.sliderData.map((n=>i("div",{class:"SliderItem",style:s},i("div",{class:"GridContainer",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title)))))))):this.showNavigationSliderDesktop&&!this.isMobile&&i("main",null,i("div",{class:"SliderItems",style:n,ref:n=>this.sliderMenuElement=n},i("div",{class:"SliderItemsWrapper"},this.sliderData.map((n=>i("div",{class:"SliderItem",style:e},i("div",{class:"GridContainer",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title))))))))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:this.activeIndex===Math.ceil(this.sliderData.length/(this.isMobile?this.itemsPerPageMobile:this.itemsPerPageDesktop))-1?" SliderNavButton DisabledArrow disabled":"SliderNavButton",onClick:()=>this.move(1)},i("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}))))),this.showMobileGrid&&this.isMobile&&i("main",{class:"GridItems GridMobile"},this.sliderData.map((n=>i("div",{class:"GridContainerMobile",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title)))))))}get el(){return e(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};s.style=":host {\n  display: block;\n}\n\n.PageError {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.PageError.TitleError {\n  color: red;\n}\n\nmain {\n  width: 100%;\n  overflow: hidden;\n}\n\n.SliderItemsWrapper {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.SliderWrapperContent {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  width: 100%;\n}\n\n.SliderItems {\n  display: flex;\n  transition: transform 0.4s ease-in-out;\n  transform: translateX(0px);\n}\n\n.SliderItem {\n  flex: 0 0 auto;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 5px;\n  user-select: none;\n}\n\n.GridContainer {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0px 0px;\n  margin: auto;\n  width: 220px;\n  height: 320px;\n  border-radius: 5px;\n  margin-bottom: 20px;\n  background: var(--emfe-w-color-secondary, #FD2839);\n  cursor: pointer;\n}\n.GridContainer .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainer .SliderImage img {\n  object-fit: cover;\n  height: 320px;\n  width: 220px;\n  border-radius: 5px;\n}\n.GridContainer .SliderContent {\n  grid-area: 1/1/3/2;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: baseline;\n  gap: 5px;\n  margin-left: 20px;\n  margin-bottom: 20px;\n}\n.GridContainer .SliderContent .DividerElement {\n  background: var(--emfe-w-color-secondary, #FD2839);\n  height: 3px;\n  width: 60px;\n}\n.GridContainer .SliderContent .Title {\n  font-size: 22px;\n  font-weight: 400;\n  text-transform: uppercase;\n  color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridItems {\n  display: grid;\n  grid-template-columns: 49vw 49vw;\n  grid-template-rows: auto auto;\n  place-content: unset;\n  gap: 2vw;\n  margin: 0;\n  width: 100vw;\n}\n\n.GridContainerMobile {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0px 0px;\n  margin: auto;\n  width: 49vw;\n  height: 240px;\n  border-radius: 15px;\n  background: var(--emfe-w-color-secondary, #FD2839);\n  cursor: pointer;\n}\n.GridContainerMobile .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainerMobile .SliderImage img {\n  width: 49vw;\n  object-fit: cover;\n  height: 240px;\n  border-radius: 5px;\n}\n.GridContainerMobile .SliderContent {\n  grid-area: 1/1/3/2;\n  display: flex;\n  flex-flow: column;\n  justify-content: flex-end;\n  align-items: baseline;\n  gap: 5px;\n  margin-left: 20px;\n  margin-bottom: 20px;\n}\n.GridContainerMobile .SliderContent .DividerElement {\n  background: var(--emfe-w-color-secondary, #FD2839);\n  height: 3px;\n  width: 60px;\n}\n.GridContainerMobile .SliderContent .Title {\n  font-size: 22px;\n  font-weight: 400;\n  text-transform: uppercase;\n  color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridContainerMobile:nth-last-child(1):nth-child(odd) {\n  display: grid;\n  gap: 0px 0px;\n  margin: auto;\n  width: 100vw;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage img {\n  width: 100vw;\n  object-fit: cover;\n  height: 240px;\n  border-radius: 5px;\n}\n\n.SliderNavButton {\n  border: 0px;\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.SliderNavButton svg {\n  width: 40px;\n  stroke: var(--emfe-w-color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n  opacity: 0.2;\n  stroke: var(--emfe-w-color-secondary, #FD2839);\n  pointer-events: none;\n}\n\n@container (max-width: 475px) {\n  .SliderItem {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n    color: var(--emfe-w-color-secondary, #FD2839);\n    border-radius: 5px;\n    user-select: none;\n  }\n\n  .GridContainer {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n    gap: 10px;\n    margin: auto;\n    width: 90%;\n    height: 220px;\n    border-radius: 5px;\n    background: var(--emfe-w-color-secondary, #FD2839);\n    cursor: pointer;\n  }\n  .GridContainer .SliderImage {\n    grid-area: 1/1/2/2;\n  }\n  .GridContainer .SliderImage img {\n    object-fit: cover;\n    height: 220px;\n    width: 100%;\n    border-radius: 5px;\n  }\n  .GridContainer .SliderContent {\n    grid-area: 1/1/3/2;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: baseline;\n    gap: 5px;\n    margin-left: 20px;\n    margin-bottom: 40px;\n  }\n  .GridContainer .SliderContent .DividerElement {\n    background: var(--emfe-w-color-secondary, #FD2839);\n    height: 3px;\n    width: 60px;\n  }\n  .GridContainer .SliderContent .Title {\n    font-size: 16px;\n    font-weight: 400;\n    text-transform: uppercase;\n    color: var(--emfe-w-color-white, #FFFFFF);\n  }\n\n  .GridItems {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto auto auto;\n    gap: 2cqw;\n    width: 100cqw;\n    justify-items: stretch;\n  }\n\n  .GridContainerMobile {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: 1fr 1fr;\n    gap: 0px 0px;\n    margin: auto;\n    height: 200px;\n    border-radius: 15px;\n    background: white;\n    cursor: pointer;\n  }\n  .GridContainerMobile .SliderImage {\n    grid-area: 1/1/2/2;\n  }\n  .GridContainerMobile .SliderImage img {\n    object-fit: cover;\n    height: 200px;\n    border-radius: 5px;\n  }\n  .GridContainerMobile .SliderContent {\n    grid-area: 1/1/3/2;\n    display: flex;\n    flex-flow: column;\n    justify-content: flex-end;\n    align-items: baseline;\n    gap: 5px;\n    margin-left: 20px;\n    margin-bottom: 20px;\n  }\n  .GridContainerMobile .SliderContent .DividerElement {\n    background: var(--emfe-w-color-secondary, #FD2839);\n    height: 3px;\n    width: 60px;\n  }\n  .GridContainerMobile .SliderContent .Title {\n    font-size: 22px;\n    font-weight: 400;\n    text-transform: uppercase;\n    color: var(--emfe-w-color-white, #FFFFFF);\n  }\n}";export{s as general_slider_navigation}

package/dist/types/components/general-slider-navigation/general-slider-navigation.d.ts

@@ -87,7 +87,7 @@ export declare class GeneralSliderNavigation {
   resizeHandler: () => void;
   orientationChangeHandler: () => void;
   handleTouchMove(evt: any): void;
-  navigationTo: (url: string, type: string, isExternal: boolean) => void;
+  navigationTo: (url: string, target: string, isExternal: boolean) => void;
   calculateSliderWidth(): void;
   getTouches(evt: any): void;
   setActive(index: number): void;

package/package.json

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

package/dist/general-slider-navigation/p-c80bf480.entry.js

@@ -1 +0,0 @@
-import{r as n,h as i,g as e}from"./p-b72fe935.js";const t=["ro","en","fr","ar","hu"],r={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 ..."}},o=class{constructor(i){var e;n(this,i),this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.showSliderArrows=!0,this.showSliderArrowsMobile=!0,this.showMobileGrid=!1,this.showNavigationSliderMobile=!0,this.showNavigationSliderDesktop=!0,this.itemsPerPageDesktop=3,this.itemsPerPageMobile=2,this.isLoading=!0,this.limitStylingAppends=!1,this.hasErrors=!1,this.device="",this.activeIndex=0,this.sliderMenuElementWidth=0,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.allElementsWidth=0,this.xDown=null,this.yDown=null,this.resizeHandler=()=>{this.calculateSliderWidth()},this.orientationChangeHandler=()=>{setTimeout((()=>{this.calculateSliderWidth()}),10)},this.navigationTo=(n,i,e)=>{e?window.postMessage({type:"ExternalLinkNavigation",externalUrl:n,target:e,linkType:i},window.location.href):window.postMessage({type:"LinkNavigation",navUrl:n,target:e},window.location.href)},this.setImage=n=>{let i="";switch(this.device=function(){const n=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(n.includes("iphone"))return"mobile";if(n.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=n.srcMobile;break;case"tablet":i=n.srcTablet;break;case"desktop":i=n.srcDesktop}return i},this.setClientStyling=()=>{let n=document.createElement("style");n.innerHTML=this.clientStyling,this.stylingContainer.prepend(n)},this.setClientStylingURL=()=>{let n=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(n.href).then((n=>n.text())).then((n=>{i.innerHTML=n,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((n=>{console.log("error ",n)}))}}watchEndpoint(n,i){n&&n!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((n=>{this.sliderData=n}))}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((n=>{this.sliderData=n}))}componentDidLoad(){window.addEventListener("resize",this.resizeHandler)}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidUpdate(){this.calculateSliderWidth()}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)}getGeneralSliderNavigation(){let n=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);return n.searchParams.append("env",this.cmsEnv),n.searchParams.append("userRoles",this.userRoles),n.searchParams.append("device",(()=>{const n=(()=>{let n=window.navigator.userAgent;return n.toLowerCase().match(/android/i)?"Android":n.toLowerCase().match(/iphone/i)?"iPhone":n.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(n)return"PC"===n?"dk":"iPad"===n||"iPhone"===n?"ios":"mtWeb"})()),new Promise(((i,e)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{i(n.banners)})).catch((n=>{console.error(n),this.hasErrors=!0,e(n)})).finally((()=>{this.isLoading=!1}))}))}handleTouchStart(n){const i=this.getTouches(n)[0];this.xDown=i.clientX,this.yDown=i.clientY}handleTouchMove(n){if(!this.xDown||!this.yDown)return;let i=this.xDown-n.touches[0].clientX,e=this.yDown-n.touches[0].clientY;Math.abs(i)>Math.abs(e)&&this.move(i>0?1:-1),this.xDown=null,this.yDown=null}calculateSliderWidth(){this.sliderMenuElement&&(this.sliderMenuElementWidth=this.sliderMenuElement.clientWidth)}getTouches(n){return n.touches||n.originalEvent.touches}setActive(n){const i=Math.ceil(this.sliderData.length/(this.isMobile?this.itemsPerPageMobile:this.itemsPerPageDesktop));this.activeIndex=n>=0?n>=i-1?i-1:n:0}move(n){this.setActive(this.activeIndex+n)}goTo(n){let i=this.activeIndex-n;if(i>0)for(let n=0;n<i;n++)this.move(-1);else for(let n=0;n>i;n--)this.move(1)}render(){const n={transform:`translate(${+this.sliderMenuElementWidth*this.activeIndex*-1}px, 0px)`},e={width:this.sliderMenuElementWidth/Math.ceil(this.itemsPerPageDesktop)+"px"},o={width:this.sliderMenuElementWidth/this.itemsPerPageMobile+"px"};return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},(()=>{const n=this.language;return r[void 0!==n&&t.includes(n)?n:"en"].error})())):this.isLoading?void 0:i("div",{ref:n=>this.stylingContainer=n},i("div",{class:"SliderWrapper"},i("div",{class:"SliderWrapperContent",ref:n=>this.slider=n},(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:0===this.activeIndex?"SliderNavButton DisabledArrow":"SliderNavButton",onClick:()=>this.move(-1)},i("svg",{fill:"none",stroke:"var(--emfe-w-color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),this.showNavigationSliderMobile&&this.isMobile?i("main",null,i("div",{style:n,ref:n=>this.sliderMenuElement=n,class:"SliderItems"},this.sliderData.map((n=>i("div",{class:"SliderItem",style:o},i("div",{class:"GridContainer",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title)))))))):this.showNavigationSliderDesktop&&!this.isMobile&&i("main",null,i("div",{class:"SliderItems",style:n,ref:n=>this.sliderMenuElement=n},i("div",{class:"SliderItemsWrapper"},this.sliderData.map((n=>i("div",{class:"SliderItem",style:e},i("div",{class:"GridContainer",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title))))))))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:this.activeIndex===Math.ceil(this.sliderData.length/(this.isMobile?this.itemsPerPageMobile:this.itemsPerPageDesktop))-1?" SliderNavButton DisabledArrow disabled":"SliderNavButton",onClick:()=>this.move(1)},i("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}))))),this.showMobileGrid&&this.isMobile&&i("main",{class:"GridItems GridMobile"},this.sliderData.map((n=>i("div",{class:"GridContainerMobile",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title)))))))}get el(){return e(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};o.style=":host {\n  display: block;\n}\n\n.PageError {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.PageError.TitleError {\n  color: red;\n}\n\nmain {\n  width: 100%;\n  overflow: hidden;\n}\n\n.SliderItemsWrapper {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.SliderWrapperContent {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  width: 100%;\n}\n\n.SliderItems {\n  display: flex;\n  transition: transform 0.4s ease-in-out;\n  transform: translateX(0px);\n}\n\n.SliderItem {\n  flex: 0 0 auto;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 5px;\n  user-select: none;\n}\n\n.GridContainer {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0px 0px;\n  margin: auto;\n  width: 220px;\n  height: 320px;\n  border-radius: 5px;\n  margin-bottom: 20px;\n  background: var(--emfe-w-color-secondary, #FD2839);\n  cursor: pointer;\n}\n.GridContainer .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainer .SliderImage img {\n  object-fit: cover;\n  height: 320px;\n  width: 220px;\n  border-radius: 5px;\n}\n.GridContainer .SliderContent {\n  grid-area: 1/1/3/2;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: baseline;\n  gap: 5px;\n  margin-left: 20px;\n  margin-bottom: 20px;\n}\n.GridContainer .SliderContent .DividerElement {\n  background: var(--emfe-w-color-secondary, #FD2839);\n  height: 3px;\n  width: 60px;\n}\n.GridContainer .SliderContent .Title {\n  font-size: 22px;\n  font-weight: 400;\n  text-transform: uppercase;\n  color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridItems {\n  display: grid;\n  grid-template-columns: 49vw 49vw;\n  grid-template-rows: auto auto;\n  place-content: unset;\n  gap: 2vw;\n  margin: 0;\n  width: 100vw;\n}\n\n.GridContainerMobile {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0px 0px;\n  margin: auto;\n  width: 49vw;\n  height: 240px;\n  border-radius: 15px;\n  background: var(--emfe-w-color-secondary, #FD2839);\n  cursor: pointer;\n}\n.GridContainerMobile .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainerMobile .SliderImage img {\n  width: 49vw;\n  object-fit: cover;\n  height: 240px;\n  border-radius: 5px;\n}\n.GridContainerMobile .SliderContent {\n  grid-area: 1/1/3/2;\n  display: flex;\n  flex-flow: column;\n  justify-content: flex-end;\n  align-items: baseline;\n  gap: 5px;\n  margin-left: 20px;\n  margin-bottom: 20px;\n}\n.GridContainerMobile .SliderContent .DividerElement {\n  background: var(--emfe-w-color-secondary, #FD2839);\n  height: 3px;\n  width: 60px;\n}\n.GridContainerMobile .SliderContent .Title {\n  font-size: 22px;\n  font-weight: 400;\n  text-transform: uppercase;\n  color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridContainerMobile:nth-last-child(1):nth-child(odd) {\n  display: grid;\n  gap: 0px 0px;\n  margin: auto;\n  width: 100vw;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage img {\n  width: 100vw;\n  object-fit: cover;\n  height: 240px;\n  border-radius: 5px;\n}\n\n.SliderNavButton {\n  border: 0px;\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.SliderNavButton svg {\n  width: 40px;\n  stroke: var(--emfe-w-color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n  opacity: 0.2;\n  stroke: var(--emfe-w-color-secondary, #FD2839);\n  pointer-events: none;\n}\n\n@container (max-width: 475px) {\n  .SliderItem {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n    color: var(--emfe-w-color-secondary, #FD2839);\n    border-radius: 5px;\n    user-select: none;\n  }\n\n  .GridContainer {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n    gap: 10px;\n    margin: auto;\n    width: 90%;\n    height: 220px;\n    border-radius: 5px;\n    background: var(--emfe-w-color-secondary, #FD2839);\n    cursor: pointer;\n  }\n  .GridContainer .SliderImage {\n    grid-area: 1/1/2/2;\n  }\n  .GridContainer .SliderImage img {\n    object-fit: cover;\n    height: 220px;\n    width: 100%;\n    border-radius: 5px;\n  }\n  .GridContainer .SliderContent {\n    grid-area: 1/1/3/2;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: baseline;\n    gap: 5px;\n    margin-left: 20px;\n    margin-bottom: 40px;\n  }\n  .GridContainer .SliderContent .DividerElement {\n    background: var(--emfe-w-color-secondary, #FD2839);\n    height: 3px;\n    width: 60px;\n  }\n  .GridContainer .SliderContent .Title {\n    font-size: 16px;\n    font-weight: 400;\n    text-transform: uppercase;\n    color: var(--emfe-w-color-white, #FFFFFF);\n  }\n\n  .GridItems {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto auto auto;\n    gap: 2cqw;\n    width: 100cqw;\n    justify-items: stretch;\n  }\n\n  .GridContainerMobile {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: 1fr 1fr;\n    gap: 0px 0px;\n    margin: auto;\n    height: 200px;\n    border-radius: 15px;\n    background: white;\n    cursor: pointer;\n  }\n  .GridContainerMobile .SliderImage {\n    grid-area: 1/1/2/2;\n  }\n  .GridContainerMobile .SliderImage img {\n    object-fit: cover;\n    height: 200px;\n    border-radius: 5px;\n  }\n  .GridContainerMobile .SliderContent {\n    grid-area: 1/1/3/2;\n    display: flex;\n    flex-flow: column;\n    justify-content: flex-end;\n    align-items: baseline;\n    gap: 5px;\n    margin-left: 20px;\n    margin-bottom: 20px;\n  }\n  .GridContainerMobile .SliderContent .DividerElement {\n    background: var(--emfe-w-color-secondary, #FD2839);\n    height: 3px;\n    width: 60px;\n  }\n  .GridContainerMobile .SliderContent .Title {\n    font-size: 22px;\n    font-weight: 400;\n    text-transform: uppercase;\n    color: var(--emfe-w-color-white, #FFFFFF);\n  }\n}";export{o as general_slider_navigation}