@everymatrix/general-slider-navigation 1.44.0 → 1.45.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d69ac031.js');
+const index = require('./index-88d9137e.js');
 
 /**
  * @name isMobile
@@ -11,450 +11,423 @@ const index = require('./index-d69ac031.js');
  * @returns {Boolean} true or false
  */
 const isMobile = (userAgent) => {
-  return !!(userAgent.toLowerCase().match(/android/i) ||
-    userAgent.toLowerCase().match(/blackberry|bb/i) ||
-    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
-    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
 };
 const getDevice = () => {
-  let userAgent = window.navigator.userAgent;
-  if (userAgent.toLowerCase().match(/android/i)) {
-    return 'Android';
-  }
-  if (userAgent.toLowerCase().match(/iphone/i)) {
-    return 'iPhone';
-  }
-  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
-    return 'iPad';
-  }
-  return 'PC';
-};
-const getDevicePlatform = () => {
-  const device = getDevice();
-  if (device) {
-    if (device === 'PC') {
-      return 'dk';
+    let userAgent = window.navigator.userAgent;
+    if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
     }
-    else if (device === 'iPad' || device === 'iPhone') {
-      return 'ios';
+    if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
     }
-    else {
-      return 'mtWeb';
+    if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+        return 'iPad';
+    }
+    return 'PC';
+};
+const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'ios';
+        }
+        else {
+            return 'mtWeb';
+        }
     }
-  }
 };
 function checkDeviceType() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const width = screen.availWidth;
-  const height = screen.availHeight;
-  if (userAgent.includes('iphone')) {
-    return 'mobile';
-  }
-  if (userAgent.includes('android')) {
-    if (height > width && width < 800) {
-      return 'mobile';
-    }
-    if (width > height && height < 800) {
-      return 'tablet';
-    }
-  }
-  return 'desktop';
+    const userAgent = navigator.userAgent.toLowerCase();
+    const width = screen.availWidth;
+    const height = screen.availHeight;
+    if (userAgent.includes('iphone')) {
+        return 'mobile';
+    }
+    if (userAgent.includes('android')) {
+        if (height > width && width < 800) {
+            return 'mobile';
+        }
+        if (width > height && height < 800) {
+            return 'tablet';
+        }
+    }
+    return 'desktop';
 }
 
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
-  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'
-  }
+    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'
+    }
 };
 const getTranslations = (url) => {
-  return new Promise((resolve) => {
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => {
-      Object.keys(data).forEach((lang) => {
-        if (!TRANSLATIONS[lang]) {
-          TRANSLATIONS[lang] = {};
-        }
-        for (let key in data[lang]) {
-          TRANSLATIONS[lang][key] = data[lang][key];
-        }
-      });
-      resolve(true);
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((lang) => {
+                if (!TRANSLATIONS[lang]) {
+                    TRANSLATIONS[lang] = {};
+                }
+                for (let key in data[lang]) {
+                    TRANSLATIONS[lang][key] = data[lang][key];
+                }
+            });
+            resolve(true);
+        });
     });
-  });
 };
 const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? 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;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 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}.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}";
+const CarouselComponentStyle0 = carouselComponentCss;
 
 const CarouselComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Client custom styling via inline style
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-    * Show bullet navigation under slides
-    */
-    this.bulletNavigation = true;
-    /**
-    * Language of the widget
-    */
-    this.language = 'en';
-    /**
-     * Translation via url
-     */
-    this.translationUrl = '';
-    this.currIndex = 0;
-    this.device = '';
-    this.stylingAppends = false;
-    this.userAgent = window.navigator.userAgent;
-    this.isMobile = isMobile(this.userAgent);
-    this.touchStartX = 0;
-    this.touchEndX = 0;
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('error ', err);
-      });
-    };
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.moveSliderIndex = (index) => {
-      if (index < 1)
-        index = this.sliderData.length;
-      if (index > this.sliderData.length)
-        index = 1;
-      this.currIndex = index;
-      if (this.sliderElement) {
-        this.sliderElement.style.transform = this.getSliderTransformStyle();
-      }
-    };
-    this.handleTouchStart = (event) => {
-      this.touchStartX = event.changedTouches[0].screenX;
-    };
-    this.handleTouchEnd = (event) => {
-      this.touchEndX = event.changedTouches[0].screenX;
-      this.handleSwipe();
-    };
-    this.navigationTo = (url, target, isExternal) => {
-      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
-    };
-    this.changeSlider = (index) => {
-      if (index > this.currIndex - 1) {
-        this.next();
-      }
-      else if (index < this.currIndex - 1) {
-        this.prev();
-      }
-    };
-    this.setImage = (image) => {
-      let source = '';
-      this.device = checkDeviceType();
-      switch (this.device) {
-        case 'mobile':
-          source = image.srcMobile;
-          break;
-        case 'tablet':
-          source = image.srcTablet;
-          break;
-        case 'desktop':
-          source = image.srcDesktop;
-          break;
-      }
-      return source;
-    };
-  }
-  handleNewTranslations() {
-    getTranslations(this.translationUrl);
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
-    }
-  }
-  componentDidLoad() {
-    this.init();
-    this.calcInnerWidth();
-  }
-  componentDidRender() {
-    if (!this.stylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.stylingAppends = true;
-    }
-  }
-  init() {
-    this.moveSliderIndex(Math.ceil(this.sliderData.length / 2));
-    this.bindEvents();
-    if (this.slideTimer > 0) {
-      this.timer();
-    }
-  }
-  calcInnerWidth() {
-    const parent = this.el.parentElement;
-    // Check if the parent element exists and then get its width
-    if (parent) {
-      this.innerWidth = parent.offsetWidth;
-    }
-    else {
-      this.innerWidth = window.innerWidth;
-    }
-    this.resize();
-  }
-  resize() {
-    if (this.isMobile) {
-      this.width = Math.max(innerWidth * 0.3, this.sliderMobileWidth);
-    }
-    else {
-      this.width = Math.max(this.innerWidth * 0.1, this.sliderDesktopWidth);
-    }
-    this.totalWidth = this.width * this.sliderData.length;
-    //this is where the margin gap between slides is calculated with the animation
-    this.margin = -5;
-    const children = this.sliderElement.children;
-    for (let i = 0; i < children.length; i++) {
-      const item = children[i];
-      item.style.margin = `0 ${this.margin}px`;
-      item.style.width = `${this.width - (this.margin * 2)}px`;
-    }
-    if (this.sliderElement) {
-      this.sliderElement.style.transform = this.getSliderTransformStyle();
-    }
-  }
-  timer() {
-    this.clearTimer();
-    this.interval = setInterval(() => {
-      this.moveSliderIndex(++this.currIndex);
-    }, this.slideTimer * 1000);
-  }
-  disconnectedCallback() {
-    this.clearTimer();
-  }
-  clearTimer() {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-  }
-  prev() {
-    this.moveSliderIndex(--this.currIndex);
-    if (this.slideTimer > 0) {
-      this.timer();
-    }
-  }
-  next() {
-    this.moveSliderIndex(++this.currIndex);
-    if (this.slideTimer > 0) {
-      this.timer();
-    }
-  }
-  bindEvents() {
-    window.onresize = () => this.resize();
-    this.el.addEventListener('touchstart', this.handleTouchStart, false);
-    this.el.addEventListener('touchend', this.handleTouchEnd, false);
-  }
-  handleSwipe() {
-    if (this.touchEndX < this.touchStartX) {
-      this.next();
-    }
-    if (this.touchEndX > this.touchStartX) {
-      this.prev();
-    }
-  }
-  getTransformStyle(index) {
-    const perspective = index === this.currIndex - 1 ? '1200px' : '900px';
-    const rotateY = index < this.currIndex - 1 ? '20deg' : '-20deg';
-    return index === this.currIndex - 1 ? `perspective(${perspective})` : `perspective(${perspective}) rotateY(${rotateY})`;
-  }
-  getSliderTransformStyle() {
-    return `translate3d(${((this.currIndex * -this.width) + (this.width / 2) + this.innerWidth / 2)}px, 0, 0)`;
-  }
-  renderNavigation() {
-    return (index.h("div", { class: "CarouselNavigation" }, this.sliderData.map((_item, index$1) => (index.h("div", { class: {
-        'CarouselNavigationBullet': true,
-        'CarouselNavigationBulletActive': index$1 === this.currIndex - 1,
-      }, onClick: this.moveSliderIndex.bind(this, index$1 + 1) })))));
-  }
-  render() {
-    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' } : {};
-      return (index.h("div", { class: {
-          'CarouselSliderItem': true,
-          'CarouselSliderItemActive': isActive,
-        }, 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);
-          }
-        }, style: buttonStyle, class: "JoinButton" }, index.h("span", null, translate('joinNow', this.language)), index.h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("hr", { class: "Divider" }), index.h("div", { class: "BottomSection" }, index.h("h3", null, item.title.toUpperCase()))))));
-    }))), this.bulletNavigation ? this.renderNavigation() : null)));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "translationUrl": ["handleNewTranslations"]
-  }; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.userAgent = window.navigator.userAgent;
+        this.isMobile = isMobile(this.userAgent);
+        this.touchStartX = 0;
+        this.touchEndX = 0;
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.moveSliderIndex = (index) => {
+            if (index < 1)
+                index = this.sliderData.length;
+            if (index > this.sliderData.length)
+                index = 1;
+            this.currIndex = index;
+            if (this.sliderElement) {
+                this.sliderElement.style.transform = this.getSliderTransformStyle();
+            }
+        };
+        this.handleTouchStart = (event) => {
+            this.touchStartX = event.changedTouches[0].screenX;
+        };
+        this.handleTouchEnd = (event) => {
+            this.touchEndX = event.changedTouches[0].screenX;
+            this.handleSwipe();
+        };
+        this.navigationTo = (url, target, isExternal) => {
+            window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
+        };
+        this.changeSlider = (index) => {
+            if (index > this.currIndex - 1) {
+                this.next();
+            }
+            else if (index < this.currIndex - 1) {
+                this.prev();
+            }
+        };
+        this.setImage = (image) => {
+            let source = '';
+            this.device = checkDeviceType();
+            switch (this.device) {
+                case 'mobile':
+                    source = image.srcMobile;
+                    break;
+                case 'tablet':
+                    source = image.srcTablet;
+                    break;
+                case 'desktop':
+                    source = image.srcDesktop;
+                    break;
+            }
+            return source;
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.sliderData = undefined;
+        this.bulletNavigation = true;
+        this.language = 'en';
+        this.slideTimer = undefined;
+        this.translationUrl = '';
+        this.currIndex = 0;
+        this.width = undefined;
+        this.height = undefined;
+        this.margin = undefined;
+        this.sliderElement = undefined;
+        this.totalWidth = undefined;
+        this.device = '';
+        this.stylingAppends = false;
+        this.innerWidth = undefined;
+    }
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        this.init();
+        this.calcInnerWidth();
+    }
+    componentDidRender() {
+        if (!this.stylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+    }
+    init() {
+        this.moveSliderIndex(Math.floor(this.sliderData.length / 2));
+        this.bindEvents();
+        if (this.slideTimer > 0) {
+            this.timer();
+        }
+    }
+    calcInnerWidth() {
+        const parent = this.el.parentElement;
+        // Check if the parent element exists and then get its width
+        if (parent) {
+            this.innerWidth = parent.offsetWidth;
+        }
+        else {
+            this.innerWidth = window.innerWidth;
+        }
+        this.resize();
+    }
+    resize() {
+        if (this.isMobile) {
+            this.width = Math.max(innerWidth * 0.3, 200);
+            this.height = window.innerHeight * 0.40;
+        }
+        else {
+            this.width = this.innerWidth > 1200 ? Math.max(this.innerWidth * 0.1, 300) : Math.max(this.innerWidth * 0.2, 200);
+            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
+        this.margin = -5;
+        const children = this.sliderElement.children;
+        for (let i = 0; i < children.length; i++) {
+            const item = children[i];
+            item.style.margin = `0 ${this.margin}px`;
+            item.style.width = `${this.width - (this.margin * 2)}px`;
+        }
+        if (this.sliderElement) {
+            this.sliderElement.style.transform = this.getSliderTransformStyle();
+        }
+    }
+    timer() {
+        this.clearTimer();
+        this.interval = setInterval(() => {
+            this.moveSliderIndex(++this.currIndex);
+        }, this.slideTimer * 1000);
+    }
+    disconnectedCallback() {
+        this.clearTimer();
+    }
+    clearTimer() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    prev() {
+        this.moveSliderIndex(--this.currIndex);
+        if (this.slideTimer > 0) {
+            this.timer();
+        }
+    }
+    next() {
+        this.moveSliderIndex(++this.currIndex);
+        if (this.slideTimer > 0) {
+            this.timer();
+        }
+    }
+    bindEvents() {
+        window.onresize = () => this.resize();
+        this.el.addEventListener('touchstart', this.handleTouchStart, false);
+        this.el.addEventListener('touchend', this.handleTouchEnd, false);
+    }
+    handleSwipe() {
+        if (this.touchEndX < this.touchStartX) {
+            this.next();
+        }
+        if (this.touchEndX > this.touchStartX) {
+            this.prev();
+        }
+    }
+    getTransformStyle(index) {
+        const perspective = index === this.currIndex - 1 ? '1200px' : '900px';
+        const rotateY = index < this.currIndex - 1 ? '20deg' : '-20deg';
+        return index === this.currIndex - 1 ? `perspective(${perspective})` : `perspective(${perspective}) rotateY(${rotateY})`;
+    }
+    getSliderTransformStyle() {
+        return `translate3d(${((this.currIndex * -this.width) + (this.width / 2) + this.innerWidth / 2)}px, 0, 0)`;
+    }
+    renderNavigation() {
+        return (index.h("div", { class: "CarouselNavigation" }, this.sliderData.map((_item, index$1) => (index.h("div", { class: {
+                'CarouselNavigationBullet': true,
+                'CarouselNavigationBulletActive': index$1 === this.currIndex - 1,
+            }, onClick: this.moveSliderIndex.bind(this, index$1 + 1) })))));
+    }
+    render() {
+        return (index.h("div", { key: '09a6305f1745c24ac709c50cdb18218c5dd616d1', ref: el => this.stylingContainer = el }, index.h("div", { key: '1b61677ab956428b710c16b7bf71d5919e9aadf5', class: "Carousel" }, index.h("div", { key: '8f0c4f36f45695ee7c15c2435a39ded15abd39bf', class: "CarouselBody" }, index.h("div", { key: '341403c4164c1c24f39f050f37cc42b1cefee512', 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: () => {
+                    if (isActive) {
+                        this.navigationTo(item.url, item.targetType, item.externalLink);
+                    }
+                }, style: buttonStyle, class: "JoinButton" }, index.h("span", null, translate('joinNow', this.language)), index.h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("hr", { class: "Divider" }), index.h("div", { class: "BottomSection" }, index.h("h3", null, item.title.toUpperCase()))))));
+        }))), this.bulletNavigation ? this.renderNavigation() : null)));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"]
+    }; }
 };
-CarouselComponent.style = carouselComponentCss;
+CarouselComponent.style = CarouselComponentStyle0;
 
 const generalSliderNavigationCss = "";
+const GeneralSliderNavigationStyle0 = generalSliderNavigationCss;
 
 const GeneralSliderNavigation = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Client custom styling via inline style
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * CMS Endpoint stage
-     */
-    this.cmsEnv = 'stage';
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * User roles
-     */
-    this.userRoles = 'everyone';
-    /**
-     * 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
-     */
-    this.translationUrl = '';
-    this.isLoading = true;
-    this.hasErrors = false;
-    this.device = '';
-  }
-  handleNewTranslations() {
-    getTranslations(this.translationUrl);
-  }
-  watchEndpoint(newValue, oldValue) {
-    if (newValue && newValue != oldValue && this.cmsEndpoint) {
-      this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
-        this.sliderData = GeneralSliderNavigation;
-      });
-    }
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
-    }
-    if (this.cmsEndpoint && this.language) {
-      return this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
-        this.sliderData = GeneralSliderNavigation;
-      });
-    }
-  }
-  getGeneralSliderNavigation() {
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
-    url.searchParams.append('env', this.cmsEnv);
-    url.searchParams.append('userRoles', this.userRoles);
-    url.searchParams.append('device', getDevicePlatform());
-    return new Promise((resolve, reject) => {
-      this.isLoading = true;
-      fetch(url.href)
-        .then((res) => res.json())
-        .then((menuSliderData) => {
-        resolve(menuSliderData.banners);
-      })
-        .catch((err) => {
-        console.error(err);
-        this.hasErrors = true;
-        reject(err);
-      }).finally(() => {
-        this.isLoading = false;
-      });
-    });
-  }
-  render() {
-    if (this.hasErrors) {
-      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, sliderMobileWidth: this.sliderMobileWidth, sliderDesktopWidth: this.sliderDesktopWidth })));
-    }
-  }
-  static get watchers() { return {
-    "translationUrl": ["handleNewTranslations"],
-    "cmsEndpoint": ["watchEndpoint"],
-    "language": ["watchEndpoint"]
-  }; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.cmsEndpoint = undefined;
+        this.cmsEnv = 'stage';
+        this.language = 'en';
+        this.userRoles = 'everyone';
+        this.bulletNavigation = true;
+        this.slideTimer = undefined;
+        this.sliderMobileWidth = 200;
+        this.sliderDesktopWidth = 300;
+        this.translationUrl = '';
+        this.isLoading = true;
+        this.hasErrors = false;
+        this.device = '';
+    }
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
+    }
+    watchEndpoint(newValue, oldValue) {
+        if (newValue && newValue != oldValue && this.cmsEndpoint) {
+            this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
+                this.sliderData = GeneralSliderNavigation;
+            });
+        }
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+        if (this.cmsEndpoint && this.language) {
+            return this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
+                this.sliderData = GeneralSliderNavigation;
+            });
+        }
+    }
+    getGeneralSliderNavigation() {
+        let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
+        url.searchParams.append('env', this.cmsEnv);
+        url.searchParams.append('userRoles', this.userRoles);
+        url.searchParams.append('device', getDevicePlatform());
+        return new Promise((resolve, reject) => {
+            this.isLoading = true;
+            fetch(url.href)
+                .then((res) => res.json())
+                .then((menuSliderData) => {
+                resolve(menuSliderData.banners);
+            })
+                .catch((err) => {
+                console.error(err);
+                this.hasErrors = true;
+                reject(err);
+            }).finally(() => {
+                this.isLoading = false;
+            });
+        });
+    }
+    render() {
+        if (this.hasErrors) {
+            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", { "slider-data": this.sliderData, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "slider-mobile-width": this.sliderMobileWidth, "slider-desktop-width": this.sliderDesktopWidth })));
+        }
+    }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"],
+        "cmsEndpoint": ["watchEndpoint"],
+        "language": ["watchEndpoint"]
+    }; }
 };
-GeneralSliderNavigation.style = generalSliderNavigationCss;
+GeneralSliderNavigation.style = GeneralSliderNavigationStyle0;
 
 exports.carousel_component = CarouselComponent;
 exports.general_slider_navigation = GeneralSliderNavigation;