@everymatrix/general-slider-navigation 1.44.0 → 1.45.2

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

@@ -1,421 +1,381 @@
-import { Component, h, State, Element, Prop, Watch } from '@stencil/core';
-import { checkDeviceType, isMobile } from '../../utils/utils';
-import { getTranslations, translate } from '../../utils/locale.utils';
+import { h } from "@stencil/core";
+import { checkDeviceType, isMobile } from "../../utils/utils";
+import { getTranslations, translate } from "../../utils/locale.utils";
 export class CarouselComponent {
-  constructor() {
-    /**
-     * 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);
+    constructor() {
+        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;
     }
-  }
-  componentDidLoad() {
-    this.init();
-    this.calcInnerWidth();
-  }
-  componentDidRender() {
-    if (!this.stylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.stylingAppends = true;
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
     }
-  }
-  init() {
-    this.moveSliderIndex(Math.ceil(this.sliderData.length / 2));
-    this.bindEvents();
-    if (this.slideTimer > 0) {
-      this.timer();
+    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;
+    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();
+        }
     }
-    else {
-      this.innerWidth = window.innerWidth;
+    timer() {
+        this.clearTimer();
+        this.interval = setInterval(() => {
+            this.moveSliderIndex(++this.currIndex);
+        }, this.slideTimer * 1000);
     }
-    this.resize();
-  }
-  resize() {
-    if (this.isMobile) {
-      this.width = Math.max(innerWidth * 0.3, this.sliderMobileWidth);
+    disconnectedCallback() {
+        this.clearTimer();
     }
-    else {
-      this.width = Math.max(this.innerWidth * 0.1, this.sliderDesktopWidth);
+    clearTimer() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
     }
-    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`;
+    prev() {
+        this.moveSliderIndex(--this.currIndex);
+        if (this.slideTimer > 0) {
+            this.timer();
+        }
     }
-    if (this.sliderElement) {
-      this.sliderElement.style.transform = this.getSliderTransformStyle();
+    next() {
+        this.moveSliderIndex(++this.currIndex);
+        if (this.slideTimer > 0) {
+            this.timer();
+        }
     }
-  }
-  timer() {
-    this.clearTimer();
-    this.interval = setInterval(() => {
-      this.moveSliderIndex(++this.currIndex);
-    }, this.slideTimer * 1000);
-  }
-  disconnectedCallback() {
-    this.clearTimer();
-  }
-  clearTimer() {
-    if (this.interval) {
-      clearInterval(this.interval);
+    bindEvents() {
+        window.onresize = () => this.resize();
+        this.el.addEventListener('touchstart', this.handleTouchStart, false);
+        this.el.addEventListener('touchend', this.handleTouchEnd, false);
     }
-  }
-  prev() {
-    this.moveSliderIndex(--this.currIndex);
-    if (this.slideTimer > 0) {
-      this.timer();
+    handleSwipe() {
+        if (this.touchEndX < this.touchStartX) {
+            this.next();
+        }
+        if (this.touchEndX > this.touchStartX) {
+            this.prev();
+        }
     }
-  }
-  next() {
-    this.moveSliderIndex(++this.currIndex);
-    if (this.slideTimer > 0) {
-      this.timer();
+    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})`;
     }
-  }
-  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();
+    getSliderTransformStyle() {
+        return `translate3d(${((this.currIndex * -this.width) + (this.width / 2) + this.innerWidth / 2)}px, 0, 0)`;
     }
-    if (this.touchEndX > this.touchStartX) {
-      this.prev();
+    renderNavigation() {
+        return (h("div", { class: "CarouselNavigation" }, this.sliderData.map((_item, index) => (h("div", { class: {
+                'CarouselNavigationBullet': true,
+                'CarouselNavigationBulletActive': index === this.currIndex - 1,
+            }, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
     }
-  }
-  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 (h("div", { class: "CarouselNavigation" }, this.sliderData.map((_item, index) => (h("div", { class: {
-        'CarouselNavigationBullet': true,
-        'CarouselNavigationBulletActive': index === this.currIndex - 1,
-      }, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
-  }
-  render() {
-    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) => {
+    render() {
+        return (h("div", { key: '09a6305f1745c24ac709c50cdb18218c5dd616d1', ref: el => this.stylingContainer = el }, h("div", { key: '1b61677ab956428b710c16b7bf71d5919e9aadf5', class: "Carousel" }, h("div", { key: '8f0c4f36f45695ee7c15c2435a39ded15abd39bf', class: "CarouselBody" }, h("div", { key: '341403c4164c1c24f39f050f37cc42b1cefee512', 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) },
-              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);
+                    '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: () => {
+                    if (isActive) {
+                        this.navigationTo(item.url, item.targetType, item.externalLink);
+                    }
+                }, style: buttonStyle, class: "JoinButton" }, h("span", null, translate('joinNow', this.language)), h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("hr", { class: "Divider" }), h("div", { class: "BottomSection" }, h("h3", null, item.title.toUpperCase()))))));
+        }))), this.bulletNavigation ? this.renderNavigation() : null)));
+    }
+    static get is() { return "carousel-component"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel-component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel-component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline style"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "sliderData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<any>",
+                    "resolved": "any[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
                         }
-                      }, style: buttonStyle, class: "JoinButton" },
-                      h("span", null, translate('joinNow', this.language)),
-                      h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                        h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))),
-                  h("hr", { class: "Divider" }),
-                  h("div", { class: "BottomSection" },
-                    h("h3", null, item.title.toUpperCase()))))));
-          }))),
-        this.bulletNavigation ? this.renderNavigation() : null)));
-  }
-  static get is() { return "carousel-component"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["carousel-component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["carousel-component.css"]
-  }; }
-  static get properties() { return {
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via inline style"
-      },
-      "attribute": "client-styling",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clientStylingUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via url"
-      },
-      "attribute": "client-styling-url",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "sliderData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<any>",
-        "resolved": "any[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Endpoint URL for the source of data"
-      }
-    },
-    "bulletNavigation": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show bullet navigation under slides"
-      },
-      "attribute": "bullet-navigation",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Language of the widget"
-      },
-      "attribute": "language",
-      "reflect": true,
-      "defaultValue": "'en'"
-    },
-    "slideTimer": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Timer for auto sliding"
-      },
-      "attribute": "slide-timer",
-      "reflect": true
-    },
-    "translationUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Translation via url"
-      },
-      "attribute": "translation-url",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "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
-    },
-    "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
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                }
+            },
+            "bulletNavigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show bullet navigation under slides"
+                },
+                "attribute": "bullet-navigation",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "slideTimer": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Timer for auto sliding"
+                },
+                "attribute": "slide-timer",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation via url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currIndex": {},
+            "width": {},
+            "height": {},
+            "margin": {},
+            "sliderElement": {},
+            "totalWidth": {},
+            "device": {},
+            "stylingAppends": {},
+            "innerWidth": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
     }
-  }; }
-  static get states() { return {
-    "currIndex": {},
-    "width": {},
-    "margin": {},
-    "sliderElement": {},
-    "totalWidth": {},
-    "device": {},
-    "stylingAppends": {},
-    "innerWidth": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "translationUrl",
-      "methodName": "handleNewTranslations"
-    }]; }
 }