@everymatrix/general-slider-navigation 1.36.0 → 1.37.0

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

@@ -24,69 +24,25 @@ export declare class GeneralSliderNavigation {
    */
   userRoles: string;
   /**
-   * Show slider navigate arrows
+   * Show bullet navigation under slides
    */
-  showSliderArrows: boolean;
+  bulletNavigation: boolean;
   /**
-   * Show slider navigate arrows on mobile
+   * Timer for auto sliding
    */
-  showSliderArrowsMobile: boolean;
+  slideTimer: number;
   /**
-  * You will see a fixed grid without a slider when using a mobile device.
-  */
-  showMobileGrid: boolean;
-  /**
-  * Set if you want to have a slider on mobile device.
-  */
-  showNavigationSliderMobile: boolean;
-  /**
-  * Set if you want to have a slider on desktop.
-  */
-  showNavigationSliderDesktop: boolean;
-  /**
-   * Specify the number of items you would like to be displayed on desktop.
-   */
-  itemsPerPageDesktop: number;
-  /**
-   * Specify the number of items you would like to be displayed on mobile devices.
+   * Translation via url
    */
-  itemsPerPageMobile: number;
-  el: HTMLElement;
+  translationUrl: string;
   private isLoading;
-  private limitStylingAppends;
   hasErrors: boolean;
   device: string;
-  activeIndex: number;
-  sliderMenuElementWidth: number;
-  private userAgent;
   private sliderData;
-  private stylingContainer;
-  isMobile: boolean;
-  allElementsWidth: number;
-  sliderMenuElement: HTMLElement;
   slider: HTMLElement;
-  xDown: number;
-  yDown: number;
+  handleNewTranslations(): void;
   watchEndpoint(newValue: string, oldValue: string): void;
-  connectedCallback(): void;
   componentWillLoad(): Promise<void>;
-  componentDidLoad(): void;
-  componentDidRender(): void;
-  componentDidUpdate(): void;
-  disconnectedCallback(): void;
   getGeneralSliderNavigation(): Promise<any>;
-  handleTouchStart(evt: any): void;
-  resizeHandler: () => void;
-  orientationChangeHandler: () => void;
-  handleTouchMove(evt: any): void;
-  navigationTo: (url: string, target: string, isExternal: boolean) => void;
-  calculateSliderWidth(): void;
-  getTouches(evt: any): void;
-  setActive(index: number): void;
-  move(direction: any): void;
-  goTo(index: number): void;
-  setImage: (image: any) => string;
-  setClientStyling: () => void;
-  setClientStylingURL: () => void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -6,7 +6,11 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
-    interface GeneralSliderNavigation {
+    interface CarouselComponent {
+        /**
+          * Show bullet navigation under slides
+         */
+        "bulletNavigation": boolean;
         /**
           * Client custom styling via inline style
          */
@@ -15,46 +19,56 @@ export namespace Components {
           * Client custom styling via url
          */
         "clientStylingUrl": string;
+        /**
+          * Language of the widget
+         */
+        "language": string;
+        /**
+          * Timer for auto sliding
+         */
+        "slideTimer": number;
         /**
           * Endpoint URL for the source of data
          */
-        "cmsEndpoint": string;
+        "sliderData": Array<any>;
         /**
-          * CMS Endpoint stage
+          * Translation via url
          */
-        "cmsEnv": string;
+        "translationUrl": string;
+    }
+    interface GeneralSliderNavigation {
         /**
-          * Specify the number of items you would like to be displayed on desktop.
+          * Show bullet navigation under slides
          */
-        "itemsPerPageDesktop": number;
+        "bulletNavigation": boolean;
         /**
-          * Specify the number of items you would like to be displayed on mobile devices.
+          * Client custom styling via inline style
          */
-        "itemsPerPageMobile": number;
+        "clientStyling": string;
         /**
-          * Language of the widget
+          * Client custom styling via url
          */
-        "language": string;
+        "clientStylingUrl": string;
         /**
-          * You will see a fixed grid without a slider when using a mobile device.
+          * Endpoint URL for the source of data
          */
-        "showMobileGrid": boolean;
+        "cmsEndpoint": string;
         /**
-          * Set if you want to have a slider on desktop.
+          * CMS Endpoint stage
          */
-        "showNavigationSliderDesktop": boolean;
+        "cmsEnv": string;
         /**
-          * Set if you want to have a slider on mobile device.
+          * Language of the widget
          */
-        "showNavigationSliderMobile": boolean;
+        "language": string;
         /**
-          * Show slider navigate arrows
+          * Timer for auto sliding
          */
-        "showSliderArrows": boolean;
+        "slideTimer": number;
         /**
-          * Show slider navigate arrows on mobile
+          * Translation via url
          */
-        "showSliderArrowsMobile": boolean;
+        "translationUrl": string;
         /**
           * User roles
          */
@@ -62,6 +76,12 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLCarouselComponentElement extends Components.CarouselComponent, HTMLStencilElement {
+    }
+    var HTMLCarouselComponentElement: {
+        prototype: HTMLCarouselComponentElement;
+        new (): HTMLCarouselComponentElement;
+    };
     interface HTMLGeneralSliderNavigationElement extends Components.GeneralSliderNavigation, HTMLStencilElement {
     }
     var HTMLGeneralSliderNavigationElement: {
@@ -69,11 +89,16 @@ declare global {
         new (): HTMLGeneralSliderNavigationElement;
     };
     interface HTMLElementTagNameMap {
+        "carousel-component": HTMLCarouselComponentElement;
         "general-slider-navigation": HTMLGeneralSliderNavigationElement;
     }
 }
 declare namespace LocalJSX {
-    interface GeneralSliderNavigation {
+    interface CarouselComponent {
+        /**
+          * Show bullet navigation under slides
+         */
+        "bulletNavigation"?: boolean;
         /**
           * Client custom styling via inline style
          */
@@ -82,52 +107,63 @@ declare namespace LocalJSX {
           * Client custom styling via url
          */
         "clientStylingUrl"?: string;
+        /**
+          * Language of the widget
+         */
+        "language"?: string;
+        /**
+          * Timer for auto sliding
+         */
+        "slideTimer"?: number;
         /**
           * Endpoint URL for the source of data
          */
-        "cmsEndpoint": string;
+        "sliderData"?: Array<any>;
         /**
-          * CMS Endpoint stage
+          * Translation via url
          */
-        "cmsEnv"?: string;
+        "translationUrl"?: string;
+    }
+    interface GeneralSliderNavigation {
         /**
-          * Specify the number of items you would like to be displayed on desktop.
+          * Show bullet navigation under slides
          */
-        "itemsPerPageDesktop"?: number;
+        "bulletNavigation"?: boolean;
         /**
-          * Specify the number of items you would like to be displayed on mobile devices.
+          * Client custom styling via inline style
          */
-        "itemsPerPageMobile"?: number;
+        "clientStyling"?: string;
         /**
-          * Language of the widget
+          * Client custom styling via url
          */
-        "language"?: string;
+        "clientStylingUrl"?: string;
         /**
-          * You will see a fixed grid without a slider when using a mobile device.
+          * Endpoint URL for the source of data
          */
-        "showMobileGrid"?: boolean;
+        "cmsEndpoint": string;
         /**
-          * Set if you want to have a slider on desktop.
+          * CMS Endpoint stage
          */
-        "showNavigationSliderDesktop"?: boolean;
+        "cmsEnv"?: string;
         /**
-          * Set if you want to have a slider on mobile device.
+          * Language of the widget
          */
-        "showNavigationSliderMobile"?: boolean;
+        "language"?: string;
         /**
-          * Show slider navigate arrows
+          * Timer for auto sliding
          */
-        "showSliderArrows"?: boolean;
+        "slideTimer"?: number;
         /**
-          * Show slider navigate arrows on mobile
+          * Translation via url
          */
-        "showSliderArrowsMobile"?: boolean;
+        "translationUrl"?: string;
         /**
           * User roles
          */
         "userRoles"?: string;
     }
     interface IntrinsicElements {
+        "carousel-component": CarouselComponent;
         "general-slider-navigation": GeneralSliderNavigation;
     }
 }
@@ -135,6 +171,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "carousel-component": LocalJSX.CarouselComponent & JSXBase.HTMLAttributes<HTMLCarouselComponentElement>;
             "general-slider-navigation": LocalJSX.GeneralSliderNavigation & JSXBase.HTMLAttributes<HTMLGeneralSliderNavigationElement>;
         }
     }

package/dist/types/utils/locale.utils.d.ts

@@ -1 +1,2 @@
+export declare const getTranslations: (url: string) => Promise<unknown>;
 export declare const translate: (key: string, customLang?: any) => string;

package/package.json

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

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

@@ -1,369 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3420513e.js');
-
-const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
-const TRANSLATIONS = {
-  en: {
-    error: 'Error',
-    noResults: 'Loading, please wait ...',
-  },
-  hu: {
-    error: 'Error',
-    noResults: 'Loading, please wait ...',
-  },
-  ro: {
-    error: 'Eroare',
-    noResults: 'Loading, please wait ...',
-  },
-  fr: {
-    error: 'Error',
-    noResults: 'Loading, please wait ...',
-  },
-  ar: {
-    error: 'خطأ',
-    noResults: 'Loading, please wait ...',
-  },
-  hr: {
-    error: 'Greška',
-    noResults: 'Učitavanje, molimo pričekajte ...',
-  },
-  'pt-br': {
-    'error': 'Erro',
-    'noResults': 'Carregando, espere por favor…'
-  },
-  'es-mx': {
-    'error': 'Error',
-    'noResults': 'Cargando, espere por favor…'
-  }
-};
-const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
-};
-
-/**
- * @name isMobile
- * @description A method that returns if the browser used to access the app is from a mobile device or not
- * @param {String} userAgent window.navigator.userAgent
- * @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));
-};
-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';
-    }
-    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 generalSliderNavigationCss = ":host {\n  display: block;\n}\n\n.PageError {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.PageError.TitleError {\n  color: red;\n}\n\nmain {\n  width: 100%;\n  overflow: hidden;\n}\n\n.SliderItemsWrapper {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.SliderWrapperContent {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  width: 100%;\n}\n\n.SliderItems {\n  display: flex;\n  transition: transform 0.4s ease-in-out;\n  transform: translateX(0px);\n}\n\n.SliderItem {\n  flex: 0 0 auto;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 5px;\n  user-select: none;\n}\n\n.GridContainer {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0px 0px;\n  margin: auto;\n  width: 220px;\n  height: 320px;\n  border-radius: 5px;\n  margin-bottom: 20px;\n  background: var(--emfe-w-color-secondary, #FD2839);\n  cursor: pointer;\n}\n.GridContainer .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainer .SliderImage img {\n  object-fit: cover;\n  height: 320px;\n  width: 220px;\n  border-radius: 5px;\n}\n.GridContainer .SliderContent {\n  grid-area: 1/1/3/2;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: baseline;\n  gap: 5px;\n  margin-left: 20px;\n  margin-bottom: 20px;\n}\n.GridContainer .SliderContent .DividerElement {\n  background: var(--emfe-w-color-secondary, #FD2839);\n  height: 3px;\n  width: 60px;\n}\n.GridContainer .SliderContent .Title {\n  font-size: 22px;\n  font-weight: 400;\n  text-transform: uppercase;\n  color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridItems {\n  display: grid;\n  grid-template-columns: 49vw 49vw;\n  grid-template-rows: auto auto;\n  place-content: unset;\n  gap: 2vw;\n  margin: 0;\n  width: 100vw;\n}\n\n.GridContainerMobile {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 0px 0px;\n  margin: auto;\n  width: 49vw;\n  height: 240px;\n  border-radius: 15px;\n  background: var(--emfe-w-color-secondary, #FD2839);\n  cursor: pointer;\n}\n.GridContainerMobile .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainerMobile .SliderImage img {\n  width: 49vw;\n  object-fit: cover;\n  height: 240px;\n  border-radius: 5px;\n}\n.GridContainerMobile .SliderContent {\n  grid-area: 1/1/3/2;\n  display: flex;\n  flex-flow: column;\n  justify-content: flex-end;\n  align-items: baseline;\n  gap: 5px;\n  margin-left: 20px;\n  margin-bottom: 20px;\n}\n.GridContainerMobile .SliderContent .DividerElement {\n  background: var(--emfe-w-color-secondary, #FD2839);\n  height: 3px;\n  width: 60px;\n}\n.GridContainerMobile .SliderContent .Title {\n  font-size: 22px;\n  font-weight: 400;\n  text-transform: uppercase;\n  color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridContainerMobile:nth-last-child(1):nth-child(odd) {\n  display: grid;\n  gap: 0px 0px;\n  margin: auto;\n  width: 100vw;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage {\n  grid-area: 1/1/2/2;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage img {\n  width: 100vw;\n  object-fit: cover;\n  height: 240px;\n  border-radius: 5px;\n}\n\n.SliderNavButton {\n  border: 0px;\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.SliderNavButton svg {\n  width: 40px;\n  stroke: var(--emfe-w-color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n  opacity: 0.2;\n  stroke: var(--emfe-w-color-secondary, #FD2839);\n  pointer-events: none;\n}\n\n@container (max-width: 475px) {\n  .SliderItem {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n    color: var(--emfe-w-color-secondary, #FD2839);\n    border-radius: 5px;\n    user-select: none;\n  }\n\n  .GridContainer {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n    gap: 10px;\n    margin: auto;\n    width: 90%;\n    height: 220px;\n    border-radius: 5px;\n    background: var(--emfe-w-color-secondary, #FD2839);\n    cursor: pointer;\n  }\n  .GridContainer .SliderImage {\n    grid-area: 1/1/2/2;\n  }\n  .GridContainer .SliderImage img {\n    object-fit: cover;\n    height: 220px;\n    width: 100%;\n    border-radius: 5px;\n  }\n  .GridContainer .SliderContent {\n    grid-area: 1/1/3/2;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: baseline;\n    gap: 5px;\n    margin-left: 20px;\n    margin-bottom: 40px;\n  }\n  .GridContainer .SliderContent .DividerElement {\n    background: var(--emfe-w-color-secondary, #FD2839);\n    height: 3px;\n    width: 60px;\n  }\n  .GridContainer .SliderContent .Title {\n    font-size: 16px;\n    font-weight: 400;\n    text-transform: uppercase;\n    color: var(--emfe-w-color-white, #FFFFFF);\n  }\n\n  .GridItems {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto auto auto;\n    gap: 2cqw;\n    width: 100cqw;\n    justify-items: stretch;\n  }\n\n  .GridContainerMobile {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: 1fr 1fr;\n    gap: 0px 0px;\n    margin: auto;\n    height: 200px;\n    border-radius: 15px;\n    background: white;\n    cursor: pointer;\n  }\n  .GridContainerMobile .SliderImage {\n    grid-area: 1/1/2/2;\n  }\n  .GridContainerMobile .SliderImage img {\n    object-fit: cover;\n    height: 200px;\n    border-radius: 5px;\n  }\n  .GridContainerMobile .SliderContent {\n    grid-area: 1/1/3/2;\n    display: flex;\n    flex-flow: column;\n    justify-content: flex-end;\n    align-items: baseline;\n    gap: 5px;\n    margin-left: 20px;\n    margin-bottom: 20px;\n  }\n  .GridContainerMobile .SliderContent .DividerElement {\n    background: var(--emfe-w-color-secondary, #FD2839);\n    height: 3px;\n    width: 60px;\n  }\n  .GridContainerMobile .SliderContent .Title {\n    font-size: 22px;\n    font-weight: 400;\n    text-transform: uppercase;\n    color: var(--emfe-w-color-white, #FFFFFF);\n  }\n}";
-
-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 slider navigate arrows
-     */
-    this.showSliderArrows = true;
-    /**
-     * Show slider navigate arrows on mobile
-     */
-    this.showSliderArrowsMobile = true;
-    /**
-    * You will see a fixed grid without a slider when using a mobile device.
-    */
-    this.showMobileGrid = false;
-    /**
-    * Set if you want to have a slider on mobile device.
-    */
-    this.showNavigationSliderMobile = true;
-    /**
-    * Set if you want to have a slider on desktop.
-    */
-    this.showNavigationSliderDesktop = true;
-    /**
-     * Specify the number of items you would like to be displayed on desktop.
-     */
-    this.itemsPerPageDesktop = 3;
-    /**
-     * Specify the number of items you would like to be displayed on mobile devices.
-     */
-    this.itemsPerPageMobile = 2;
-    this.isLoading = true;
-    this.limitStylingAppends = false;
-    this.hasErrors = false;
-    this.device = '';
-    this.activeIndex = 0;
-    this.sliderMenuElementWidth = 0;
-    this.userAgent = window.navigator.userAgent;
-    this.isMobile = isMobile(this.userAgent);
-    this.allElementsWidth = 0;
-    this.xDown = null;
-    this.yDown = null;
-    this.resizeHandler = () => {
-      this.calculateSliderWidth();
-    };
-    this.orientationChangeHandler = () => {
-      setTimeout(() => {
-        this.calculateSliderWidth();
-      }, 10);
-    };
-    this.navigationTo = (url, target, isExternal) => {
-      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
-    };
-    this.setImage = (image) => {
-      let source = '';
-      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.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    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);
-      });
-    };
-  }
-  watchEndpoint(newValue, oldValue) {
-    if (newValue && newValue != oldValue && this.cmsEndpoint) {
-      this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
-        this.sliderData = GeneralSliderNavigation;
-      });
-    }
-  }
-  connectedCallback() {
-    window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
-  }
-  componentWillLoad() {
-    if (this.cmsEndpoint && this.language) {
-      return this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
-        this.sliderData = GeneralSliderNavigation;
-      });
-    }
-  }
-  componentDidLoad() {
-    window.addEventListener('resize', this.resizeHandler);
-  }
-  componentDidRender() {
-    this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
-    this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  componentDidUpdate() {
-    this.calculateSliderWidth();
-  }
-  disconnectedCallback() {
-    this.el.removeEventListener('touchstart', this.handleTouchStart);
-    this.el.removeEventListener('touchmove', this.handleTouchMove);
-    window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
-    window.removeEventListener('resize', this.resizeHandler);
-  }
-  getGeneralSliderNavigation() {
-    let 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;
-      });
-    });
-  }
-  handleTouchStart(evt) {
-    const firstTouch = this.getTouches(evt)[0];
-    this.xDown = firstTouch.clientX;
-    this.yDown = firstTouch.clientY;
-  }
-  handleTouchMove(evt) {
-    if (!this.xDown || !this.yDown)
-      return;
-    let xUp = evt.touches[0].clientX;
-    let yUp = evt.touches[0].clientY;
-    let xDiff = this.xDown - xUp;
-    let yDiff = this.yDown - yUp;
-    if (Math.abs(xDiff) > Math.abs(yDiff)) {
-      if (xDiff > 0) {
-        this.move(1);
-      }
-      else {
-        this.move(-1);
-      }
-    }
-    this.xDown = null;
-    this.yDown = null;
-  }
-  ;
-  calculateSliderWidth() {
-    if (!this.sliderMenuElement)
-      return;
-    this.sliderMenuElementWidth = this.sliderMenuElement.clientWidth;
-  }
-  ;
-  getTouches(evt) {
-    return evt.touches || evt.originalEvent.touches;
-  }
-  setActive(index) {
-    const maxLength = Math.ceil(this.sliderData.length / (!this.isMobile ? this.itemsPerPageDesktop : this.itemsPerPageMobile));
-    if (index >= 0) {
-      if (index >= maxLength - 1) {
-        this.activeIndex = maxLength - 1;
-      }
-      else {
-        this.activeIndex = index;
-      }
-    }
-    else {
-      this.activeIndex = 0;
-    }
-  }
-  move(direction) {
-    this.setActive(this.activeIndex + direction);
-  }
-  ;
-  goTo(index) {
-    let diff = this.activeIndex - index;
-    if (diff > 0) {
-      for (let i = 0; i < diff; i++) {
-        this.move(-1);
-      }
-    }
-    else {
-      for (let i = 0; i > diff; i--) {
-        this.move(1);
-      }
-    }
-  }
-  render() {
-    const styles = {
-      transform: `translate(${(+this.sliderMenuElementWidth * this.activeIndex) * -1}px, 0px)`
-    };
-    const itemStyleDesktop = {
-      width: `${this.sliderMenuElementWidth / Math.ceil(this.itemsPerPageDesktop)}px`
-    };
-    const itemStyleMobile = {
-      width: `${this.sliderMenuElementWidth / this.itemsPerPageMobile}px`
-    };
-    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", { ref: el => this.stylingContainer = el }, index.h("div", { class: "SliderWrapper" }, index.h("div", { class: "SliderWrapperContent", ref: (el) => this.slider = el }, ((this.showSliderArrows && !this.isMobile) || (this.showSliderArrowsMobile && this.isMobile)) &&
-        index.h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, index.h("svg", { fill: "none", stroke: "var(--emfe-w-color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), this.showNavigationSliderMobile && this.isMobile ? (index.h("main", null, index.h("div", { style: styles, ref: (el) => this.sliderMenuElement = el, class: "SliderItems" }, this.sliderData.map((data) => index.h("div", { class: "SliderItem", style: itemStyleMobile }, index.h("div", { class: "GridContainer", onClick: () => data.externalLink ? this.navigationTo(data.url, data.targetType, data.externalLink) : this.navigationTo(data.url, data.targetType, false) }, index.h("div", { class: "SliderImage" }, index.h("img", { src: this.setImage(data.image), alt: data.title })), index.h("div", { class: "SliderContent" }, index.h("div", { class: "DividerElement" }), index.h("div", { class: "Title" }, data.title)))))))) : (this.showNavigationSliderDesktop && !this.isMobile &&
-        index.h("main", null, index.h("div", { class: "SliderItems", style: styles, ref: (el) => this.sliderMenuElement = el }, index.h("div", { class: "SliderItemsWrapper" }, this.sliderData.map((data) => index.h("div", { class: "SliderItem", style: itemStyleDesktop }, index.h("div", { class: "GridContainer", onClick: () => data.externalLink ? this.navigationTo(data.url, data.targetType, data.externalLink) : this.navigationTo(data.url, data.targetType, false) }, index.h("div", { class: "SliderImage" }, index.h("img", { src: this.setImage(data.image), alt: data.title })), index.h("div", { class: "SliderContent" }, index.h("div", { class: "DividerElement" }), index.h("div", { class: "Title" }, data.title))))))))), ((this.showSliderArrows && !this.isMobile) || (this.showSliderArrowsMobile && this.isMobile)) &&
-        index.h("div", { class: this.activeIndex === Math.ceil(this.sliderData.length / (!this.isMobile ? this.itemsPerPageDesktop : this.itemsPerPageMobile)) - 1 ? ' SliderNavButton DisabledArrow disabled' : 'SliderNavButton', onClick: () => this.move(1) }, index.h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))))), (this.showMobileGrid && this.isMobile) &&
-        index.h("main", { class: "GridItems GridMobile" }, this.sliderData.map((dataMobile) => index.h("div", { class: "GridContainerMobile", onClick: () => dataMobile.externalLink ? this.navigationTo(dataMobile.url, dataMobile.targetType, dataMobile.externalLink) : this.navigationTo(dataMobile.url, dataMobile.targetType, false) }, index.h("div", { class: "SliderImage" }, index.h("img", { src: this.setImage(dataMobile.image), alt: dataMobile.title })), index.h("div", { class: "SliderContent" }, index.h("div", { class: "DividerElement" }), index.h("div", { class: "Title" }, dataMobile.title)))))));
-    }
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "cmsEndpoint": ["watchEndpoint"],
-    "language": ["watchEndpoint"]
-  }; }
-};
-GeneralSliderNavigation.style = generalSliderNavigationCss;
-
-exports.general_slider_navigation = GeneralSliderNavigation;