@everymatrix/general-slider-navigation 1.41.0 → 1.43.0

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

@@ -124,7 +124,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const carouselComponentCss = ":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;max-height:500px}.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)}.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(--emfe-w-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}.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;max-height:570px}";
+const carouselComponentCss = ":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;height:400px}.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)}.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(--emfe-w-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}.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;height:470px}";
 
 const CarouselComponent = class {
   constructor(hostRef) {
@@ -149,14 +149,6 @@ const CarouselComponent = class {
      * Translation via url
      */
     this.translationUrl = '';
-    /**
-     * Mobile width for sliders
-     */
-    this.sliderMobileWidth = 200;
-    /**
-     * Desktop width for sliders
-     */
-    this.sliderDesktopWidth = 300;
     this.currIndex = 0;
     this.device = '';
     this.stylingAppends = false;
@@ -269,11 +261,9 @@ const CarouselComponent = class {
   resize() {
     if (this.isMobile) {
       this.width = Math.max(innerWidth * 0.3, this.sliderMobileWidth);
-      this.height = window.innerHeight * 0.40;
     }
     else {
       this.width = Math.max(this.innerWidth * 0.1, this.sliderDesktopWidth);
-      this.height = window.innerHeight * 0.55;
     }
     this.totalWidth = this.width * this.sliderData.length;
     //this is where the margin gap between slides is calculated with the animation
@@ -345,11 +335,10 @@ const CarouselComponent = class {
     return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "Carousel" }, index.h("div", { class: "CarouselBody" }, index.h("div", { class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.sliderData.map((item, index$1) => {
       const isActive = index$1 === this.currIndex - 1;
       const buttonStyle = !isActive ? { cursor: 'unset' } : {};
-      const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
       return (index.h("div", { class: {
           'CarouselSliderItem': true,
           'CarouselSliderItemActive': isActive,
-        }, onClick: this.changeSlider.bind(this, index$1), style: activeItemHeight }, index.h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index$1) } }, index.h("div", { class: "ItemSection" }, index.h("div", { class: "TopSection" }, index.h("button", { onClick: () => {
+        }, onClick: this.changeSlider.bind(this, index$1) }, index.h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index$1) } }, index.h("div", { class: "ItemSection" }, index.h("div", { class: "TopSection" }, index.h("button", { onClick: () => {
           if (isActive) {
             this.navigationTo(item.url, item.targetType, item.externalLink);
           }
@@ -392,6 +381,14 @@ const GeneralSliderNavigation = class {
      * Show bullet navigation under slides
      */
     this.bulletNavigation = true;
+    /**
+     * Mobile width for sliders
+     */
+    this.sliderMobileWidth = 200;
+    /**
+    * Desktop width for sliders
+    */
+    this.sliderDesktopWidth = 300;
     /**
      * Translation via url
      */
@@ -446,7 +443,7 @@ const GeneralSliderNavigation = class {
       return (index.h("div", { class: "PageError" }, index.h("div", { class: "TitleError" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (index.h("div", null, index.h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl })));
+      return (index.h("div", null, index.h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl, sliderMobileWidth: this.sliderMobileWidth, sliderDesktopWidth: this.sliderDesktopWidth })));
     }
   }
   static get watchers() { return {

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["carousel-component_2.cjs",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
+  return index.bootstrapLazy([["carousel-component_2.cjs",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["carousel-component_2.cjs",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
+  return index.bootstrapLazy([["carousel-component_2.cjs",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
   });
 };
 

package/dist/collection/components/carousel-component/carousel-component.css

@@ -60,7 +60,7 @@ html, body {
   display: block;
   float: left;
   box-sizing: border-box;
-  max-height: 500px;
+  height: 400px;
 }
 
 .Item3dFrame {
@@ -165,5 +165,5 @@ html, body {
 
 .CarouselSliderItemActive {
   opacity: 1;
-  max-height: 570px;
+  height: 470px;
 }

package/dist/collection/components/carousel-component/carousel-component.js

@@ -23,14 +23,6 @@ export class CarouselComponent {
      * Translation via url
      */
     this.translationUrl = '';
-    /**
-     * Mobile width for sliders
-     */
-    this.sliderMobileWidth = 200;
-    /**
-     * Desktop width for sliders
-     */
-    this.sliderDesktopWidth = 300;
     this.currIndex = 0;
     this.device = '';
     this.stylingAppends = false;
@@ -143,11 +135,9 @@ export class CarouselComponent {
   resize() {
     if (this.isMobile) {
       this.width = Math.max(innerWidth * 0.3, this.sliderMobileWidth);
-      this.height = window.innerHeight * 0.40;
     }
     else {
       this.width = Math.max(this.innerWidth * 0.1, this.sliderDesktopWidth);
-      this.height = window.innerHeight * 0.55;
     }
     this.totalWidth = this.width * this.sliderData.length;
     //this is where the margin gap between slides is calculated with the animation
@@ -222,11 +212,10 @@ export class CarouselComponent {
           h("div", { class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.sliderData.map((item, index) => {
             const isActive = index === this.currIndex - 1;
             const buttonStyle = !isActive ? { cursor: 'unset' } : {};
-            const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
             return (h("div", { class: {
                 'CarouselSliderItem': true,
                 'CarouselSliderItemActive': isActive,
-              }, onClick: this.changeSlider.bind(this, index), style: activeItemHeight },
+              }, onClick: this.changeSlider.bind(this, index) },
               h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index) } },
                 h("div", { class: "ItemSection" },
                   h("div", { class: "TopSection" },
@@ -394,8 +383,7 @@ export class CarouselComponent {
         "text": "Mobile width for sliders"
       },
       "attribute": "slider-mobile-width",
-      "reflect": true,
-      "defaultValue": "200"
+      "reflect": true
     },
     "sliderDesktopWidth": {
       "type": "number",
@@ -412,14 +400,12 @@ export class CarouselComponent {
         "text": "Desktop width for sliders"
       },
       "attribute": "slider-desktop-width",
-      "reflect": true,
-      "defaultValue": "300"
+      "reflect": true
     }
   }; }
   static get states() { return {
     "currIndex": {},
     "width": {},
-    "height": {},
     "margin": {},
     "sliderElement": {},
     "totalWidth": {},

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

@@ -27,6 +27,14 @@ export class GeneralSliderNavigation {
      * Show bullet navigation under slides
      */
     this.bulletNavigation = true;
+    /**
+     * Mobile width for sliders
+     */
+    this.sliderMobileWidth = 200;
+    /**
+    * Desktop width for sliders
+    */
+    this.sliderDesktopWidth = 300;
     /**
      * Translation via url
      */
@@ -83,7 +91,7 @@ export class GeneralSliderNavigation {
     }
     if (!this.isLoading) {
       return (h("div", null,
-        h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl })));
+        h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl, sliderMobileWidth: this.sliderMobileWidth, sliderDesktopWidth: this.sliderDesktopWidth })));
     }
   }
   static get is() { return "general-slider-navigation"; }
@@ -237,6 +245,42 @@ export class GeneralSliderNavigation {
       "attribute": "slide-timer",
       "reflect": true
     },
+    "sliderMobileWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Mobile width for sliders"
+      },
+      "attribute": "slider-mobile-width",
+      "reflect": true,
+      "defaultValue": "200"
+    },
+    "sliderDesktopWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Desktop width for sliders"
+      },
+      "attribute": "slider-desktop-width",
+      "reflect": true,
+      "defaultValue": "300"
+    },
     "translationUrl": {
       "type": "string",
       "mutable": false,

package/dist/components/carousel-component2.js

@@ -120,7 +120,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const carouselComponentCss = ":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;max-height:500px}.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)}.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(--emfe-w-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}.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;max-height:570px}";
+const carouselComponentCss = ":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;height:400px}.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)}.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(--emfe-w-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}.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;height:470px}";
 
 const CarouselComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -147,14 +147,6 @@ const CarouselComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Translation via url
      */
     this.translationUrl = '';
-    /**
-     * Mobile width for sliders
-     */
-    this.sliderMobileWidth = 200;
-    /**
-     * Desktop width for sliders
-     */
-    this.sliderDesktopWidth = 300;
     this.currIndex = 0;
     this.device = '';
     this.stylingAppends = false;
@@ -267,11 +259,9 @@ const CarouselComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   resize() {
     if (this.isMobile) {
       this.width = Math.max(innerWidth * 0.3, this.sliderMobileWidth);
-      this.height = window.innerHeight * 0.40;
     }
     else {
       this.width = Math.max(this.innerWidth * 0.1, this.sliderDesktopWidth);
-      this.height = window.innerHeight * 0.55;
     }
     this.totalWidth = this.width * this.sliderData.length;
     //this is where the margin gap between slides is calculated with the animation
@@ -343,11 +333,10 @@ const CarouselComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "Carousel" }, h("div", { class: "CarouselBody" }, h("div", { class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.sliderData.map((item, index) => {
       const isActive = index === this.currIndex - 1;
       const buttonStyle = !isActive ? { cursor: 'unset' } : {};
-      const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
       return (h("div", { class: {
           'CarouselSliderItem': true,
           'CarouselSliderItemActive': isActive,
-        }, onClick: this.changeSlider.bind(this, index), style: activeItemHeight }, h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index) } }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
+        }, onClick: this.changeSlider.bind(this, index) }, h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index) } }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
           if (isActive) {
             this.navigationTo(item.url, item.targetType, item.externalLink);
           }
@@ -371,7 +360,6 @@ const CarouselComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "sliderDesktopWidth": [514, "slider-desktop-width"],
     "currIndex": [32],
     "width": [32],
-    "height": [32],
     "margin": [32],
     "sliderElement": [32],
     "totalWidth": [32],

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

@@ -32,6 +32,14 @@ const GeneralSliderNavigation$1 = /*@__PURE__*/ proxyCustomElement(class extends
      * Show bullet navigation under slides
      */
     this.bulletNavigation = true;
+    /**
+     * Mobile width for sliders
+     */
+    this.sliderMobileWidth = 200;
+    /**
+    * Desktop width for sliders
+    */
+    this.sliderDesktopWidth = 300;
     /**
      * Translation via url
      */
@@ -86,7 +94,7 @@ const GeneralSliderNavigation$1 = /*@__PURE__*/ proxyCustomElement(class extends
       return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (h("div", null, h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl })));
+      return (h("div", null, h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl, sliderMobileWidth: this.sliderMobileWidth, sliderDesktopWidth: this.sliderDesktopWidth })));
     }
   }
   static get watchers() { return {
@@ -104,6 +112,8 @@ const GeneralSliderNavigation$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "userRoles": [513, "user-roles"],
     "bulletNavigation": [516, "bullet-navigation"],
     "slideTimer": [514, "slide-timer"],
+    "sliderMobileWidth": [514, "slider-mobile-width"],
+    "sliderDesktopWidth": [514, "slider-desktop-width"],
     "translationUrl": [513, "translation-url"],
     "isLoading": [32],
     "hasErrors": [32],

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

@@ -120,7 +120,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const carouselComponentCss = ":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;max-height:500px}.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)}.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(--emfe-w-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}.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;max-height:570px}";
+const carouselComponentCss = ":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;height:400px}.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)}.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(--emfe-w-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}.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;height:470px}";
 
 const CarouselComponent = class {
   constructor(hostRef) {
@@ -145,14 +145,6 @@ const CarouselComponent = class {
      * Translation via url
      */
     this.translationUrl = '';
-    /**
-     * Mobile width for sliders
-     */
-    this.sliderMobileWidth = 200;
-    /**
-     * Desktop width for sliders
-     */
-    this.sliderDesktopWidth = 300;
     this.currIndex = 0;
     this.device = '';
     this.stylingAppends = false;
@@ -265,11 +257,9 @@ const CarouselComponent = class {
   resize() {
     if (this.isMobile) {
       this.width = Math.max(innerWidth * 0.3, this.sliderMobileWidth);
-      this.height = window.innerHeight * 0.40;
     }
     else {
       this.width = Math.max(this.innerWidth * 0.1, this.sliderDesktopWidth);
-      this.height = window.innerHeight * 0.55;
     }
     this.totalWidth = this.width * this.sliderData.length;
     //this is where the margin gap between slides is calculated with the animation
@@ -341,11 +331,10 @@ const CarouselComponent = class {
     return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "Carousel" }, h("div", { class: "CarouselBody" }, h("div", { class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.sliderData.map((item, index) => {
       const isActive = index === this.currIndex - 1;
       const buttonStyle = !isActive ? { cursor: 'unset' } : {};
-      const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
       return (h("div", { class: {
           'CarouselSliderItem': true,
           'CarouselSliderItemActive': isActive,
-        }, onClick: this.changeSlider.bind(this, index), style: activeItemHeight }, h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index) } }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
+        }, onClick: this.changeSlider.bind(this, index) }, h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index) } }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
           if (isActive) {
             this.navigationTo(item.url, item.targetType, item.externalLink);
           }
@@ -388,6 +377,14 @@ const GeneralSliderNavigation = class {
      * Show bullet navigation under slides
      */
     this.bulletNavigation = true;
+    /**
+     * Mobile width for sliders
+     */
+    this.sliderMobileWidth = 200;
+    /**
+    * Desktop width for sliders
+    */
+    this.sliderDesktopWidth = 300;
     /**
      * Translation via url
      */
@@ -442,7 +439,7 @@ const GeneralSliderNavigation = class {
       return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (h("div", null, h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl })));
+      return (h("div", null, h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl, sliderMobileWidth: this.sliderMobileWidth, sliderDesktopWidth: this.sliderDesktopWidth })));
     }
   }
   static get watchers() { return {

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

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["carousel-component_2",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
+  return bootstrapLazy([["carousel-component_2",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["carousel-component_2",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
+  return bootstrapLazy([["carousel-component_2",[[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"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"translationUrl":[513,"translation-url"],"isLoading":[32],"hasErrors":[32],"device":[32]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"sliderMobileWidth":[514,"slider-mobile-width"],"sliderDesktopWidth":[514,"slider-desktop-width"],"currIndex":[32],"width":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]}]]]], options);
   });
 };
 

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

@@ -1 +1 @@
-import{p as i,b as l}from"./p-734ecc50.js";(()=>{const l=import.meta.url,t={};return""!==l&&(t.resourcesUrl=new URL(".",l).href),i(t)})().then((i=>l([["p-f0f7733c",[[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"],bulletNavigation:[516,"bullet-navigation"],slideTimer:[514,"slide-timer"],translationUrl:[513,"translation-url"],isLoading:[32],hasErrors:[32],device:[32]}],[1,"carousel-component",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],sliderData:[16],bulletNavigation:[516,"bullet-navigation"],language:[513],slideTimer:[514,"slide-timer"],translationUrl:[513,"translation-url"],sliderMobileWidth:[514,"slider-mobile-width"],sliderDesktopWidth:[514,"slider-desktop-width"],currIndex:[32],width:[32],height:[32],margin:[32],sliderElement:[32],totalWidth:[32],device:[32],stylingAppends:[32],innerWidth:[32]}]]]],i)));
+import{p as i,b as e}from"./p-734ecc50.js";(()=>{const e=import.meta.url,l={};return""!==e&&(l.resourcesUrl=new URL(".",e).href),i(l)})().then((i=>e([["p-8e04d5d7",[[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"],bulletNavigation:[516,"bullet-navigation"],slideTimer:[514,"slide-timer"],sliderMobileWidth:[514,"slider-mobile-width"],sliderDesktopWidth:[514,"slider-desktop-width"],translationUrl:[513,"translation-url"],isLoading:[32],hasErrors:[32],device:[32]}],[1,"carousel-component",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],sliderData:[16],bulletNavigation:[516,"bullet-navigation"],language:[513],slideTimer:[514,"slide-timer"],translationUrl:[513,"translation-url"],sliderMobileWidth:[514,"slider-mobile-width"],sliderDesktopWidth:[514,"slider-desktop-width"],currIndex:[32],width:[32],margin:[32],sliderElement:[32],totalWidth:[32],device:[32],stylingAppends:[32],innerWidth:[32]}]]]],i)));

package/dist/general-slider-navigation/p-8e04d5d7.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,g as e}from"./p-734ecc50.js";const s=["ro","en","fr","ar","hu","hr"],o={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"}},r=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{for(let e in t[i])o[i][e]=t[i][e]})),i(!0)}))})),n=(t,i)=>{const e=i;return o[void 0!==e&&s.includes(e)?e:"en"][t]},a=class{constructor(i){var e;t(this,i),this.clientStyling="",this.clientStylingUrl="",this.bulletNavigation=!0,this.language="en",this.translationUrl="",this.currIndex=0,this.device="",this.stylingAppends=!1,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.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.moveSliderIndex=t=>{t<1&&(t=this.sliderData.length),t>this.sliderData.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}}handleNewTranslations(){r(this.translationUrl)}async componentWillLoad(){this.translationUrl.length>2&&await r(this.translationUrl)}componentDidLoad(){this.init(),this.calcInnerWidth()}componentDidRender(){!this.stylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}init(){this.moveSliderIndex(Math.ceil(this.sliderData.length/2)),this.bindEvents(),this.slideTimer>0&&this.timer()}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth,this.resize()}resize(){this.width=this.isMobile?Math.max(.3*innerWidth,this.sliderMobileWidth):Math.max(.1*this.innerWidth,this.sliderDesktopWidth),this.totalWidth=this.width*this.sliderData.length,this.margin=-5;const t=this.sliderElement.children;for(let i=0;i<t.length;i++){const e=t[i];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(){this.clearTimer()}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=()=>this.resize(),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.sliderData.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}render(){return i("div",{ref:t=>this.stylingContainer=t},i("div",{class:"Carousel"},i("div",{class:"CarouselBody"},i("div",{class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.sliderData.map(((t,e)=>{const s=e===this.currIndex-1,o=s?{}:{cursor:"unset"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:s},onClick:this.changeSlider.bind(this,e)},i("div",{class:"Item3dFrame",style:{backgroundSize:"cover",backgroundPosition:"center",backgroundImage:`url(${this.setImage(t.image)})`,transform:this.getTransformStyle(e)}},i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:o,class:"JoinButton"},i("span",null,n("joinNow",this.language)),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,t.title.toUpperCase())))))})))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};a.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;height:400px}.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)}.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(--emfe-w-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}.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;height:470px}';const h=class{constructor(i){t(this,i),this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.sliderMobileWidth=200,this.sliderDesktopWidth=300,this.translationUrl="",this.isLoading=!0,this.hasErrors=!1,this.device=""}handleNewTranslations(){r(this.translationUrl)}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await r(this.translationUrl),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}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"})()),new Promise(((i,e)=>{this.isLoading=!0,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"},n("error",this.language))):this.isLoading?void 0:i("div",null,i("carousel-component",{sliderData:this.sliderData,language:this.language,clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,bulletNavigation:this.bulletNavigation,slideTimer:this.slideTimer,translationUrl:this.translationUrl,sliderMobileWidth:this.sliderMobileWidth,sliderDesktopWidth:this.sliderDesktopWidth}))}static get watchers(){return{translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};h.style="";export{a as carousel_component,h as general_slider_navigation}

package/dist/types/components/carousel-component/carousel-component.d.ts

@@ -37,7 +37,6 @@ export declare class CarouselComponent {
   sliderDesktopWidth: number;
   currIndex: number;
   width: number;
-  height: number;
   margin: number;
   sliderElement: HTMLElement;
   totalWidth: number;

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

@@ -31,6 +31,14 @@ export declare class GeneralSliderNavigation {
    * Timer for auto sliding
    */
   slideTimer: number;
+  /**
+   * Mobile width for sliders
+   */
+  sliderMobileWidth: number;
+  /**
+  * Desktop width for sliders
+  */
+  sliderDesktopWidth: number;
   /**
    * Translation via url
    */

package/dist/types/components.d.ts

@@ -73,6 +73,14 @@ export namespace Components {
           * Timer for auto sliding
          */
         "slideTimer": number;
+        /**
+          * Desktop width for sliders
+         */
+        "sliderDesktopWidth": number;
+        /**
+          * Mobile width for sliders
+         */
+        "sliderMobileWidth": number;
         /**
           * Translation via url
          */
@@ -169,6 +177,14 @@ declare namespace LocalJSX {
           * Timer for auto sliding
          */
         "slideTimer"?: number;
+        /**
+          * Desktop width for sliders
+         */
+        "sliderDesktopWidth"?: number;
+        /**
+          * Mobile width for sliders
+         */
+        "sliderMobileWidth"?: number;
         /**
           * Translation via url
          */

package/package.json

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

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

@@ -1 +0,0 @@
-import{r as t,h as i,g as e}from"./p-734ecc50.js";const s=["ro","en","fr","ar","hu","hr"],o={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"}},r=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{for(let e in t[i])o[i][e]=t[i][e]})),i(!0)}))})),n=(t,i)=>{const e=i;return o[void 0!==e&&s.includes(e)?e:"en"][t]},a=class{constructor(i){var e;t(this,i),this.clientStyling="",this.clientStylingUrl="",this.bulletNavigation=!0,this.language="en",this.translationUrl="",this.sliderMobileWidth=200,this.sliderDesktopWidth=300,this.currIndex=0,this.device="",this.stylingAppends=!1,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.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.moveSliderIndex=t=>{t<1&&(t=this.sliderData.length),t>this.sliderData.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}}handleNewTranslations(){r(this.translationUrl)}async componentWillLoad(){this.translationUrl.length>2&&await r(this.translationUrl)}componentDidLoad(){this.init(),this.calcInnerWidth()}componentDidRender(){!this.stylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}init(){this.moveSliderIndex(Math.ceil(this.sliderData.length/2)),this.bindEvents(),this.slideTimer>0&&this.timer()}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth,this.resize()}resize(){this.isMobile?(this.width=Math.max(.3*innerWidth,this.sliderMobileWidth),this.height=.4*window.innerHeight):(this.width=Math.max(.1*this.innerWidth,this.sliderDesktopWidth),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.sliderData.length,this.margin=-5;const t=this.sliderElement.children;for(let i=0;i<t.length;i++){const e=t[i];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(){this.clearTimer()}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=()=>this.resize(),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.sliderData.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}render(){return i("div",{ref:t=>this.stylingContainer=t},i("div",{class:"Carousel"},i("div",{class:"CarouselBody"},i("div",{class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.sliderData.map(((t,e)=>{const s=e===this.currIndex-1,o=s?{}:{cursor:"unset"},r=s?{height:`${this.height}px`}:{height:this.height-70+"px"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:s},onClick:this.changeSlider.bind(this,e),style:r},i("div",{class:"Item3dFrame",style:{backgroundSize:"cover",backgroundPosition:"center",backgroundImage:`url(${this.setImage(t.image)})`,transform:this.getTransformStyle(e)}},i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:o,class:"JoinButton"},i("span",null,n("joinNow",this.language)),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,t.title.toUpperCase())))))})))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};a.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;max-height:500px}.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)}.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(--emfe-w-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}.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;max-height:570px}';const h=class{constructor(i){t(this,i),this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.translationUrl="",this.isLoading=!0,this.hasErrors=!1,this.device=""}handleNewTranslations(){r(this.translationUrl)}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await r(this.translationUrl),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}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"})()),new Promise(((i,e)=>{this.isLoading=!0,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"},n("error",this.language))):this.isLoading?void 0:i("div",null,i("carousel-component",{sliderData:this.sliderData,language:this.language,clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,bulletNavigation:this.bulletNavigation,slideTimer:this.slideTimer,translationUrl:this.translationUrl}))}static get watchers(){return{translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};h.style="";export{a as carousel_component,h as general_slider_navigation}