@everymatrix/general-tutorial-slider 1.44.0 → 1.45.2

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

@@ -1,526 +1,482 @@
-import { Component, State, Prop, Element, Watch, h } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
-import { isMobile, getDevicePlatform } from '../../utils/utils';
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import { isMobile, getDevicePlatform } from "../../utils/utils";
 export class GeneralTutorialSlider {
-  constructor() {
-    /**
-     * Client custom styling via inline style
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * User roles
-     */
-    this.userRoles = 'everyone';
-    /**
-     * CMS Endpoint stage
-     */
-    this.cmsEnv = 'stage';
-    /**
-     * Show slider dots
-     */
-    this.showSliderDots = true;
-    /**
-     * Show slider navigate arrows
-     */
-    this.showSliderArrows = true;
-    /**
-     * Show slider navigate arrows on mobile
-     */
-    this.showSliderArrowsMobile = false;
-    /**
-     * Auto-scroll will only function if it is set to true, and otherwise it will be ignored.
-     */
-    this.enableAutoScroll = false;
-    /**
-     * Set interval period for slider
-     */
-    this.intervalPeriod = 5000;
-    /**
-     * Set the number of slides you wish to display.
-     */
-    this.scrollItems = 1;
-    /**
-     * Set the number of slides you wish to display.
-     */
-    this.itemsPerPage = 1;
-    this.hasErrors = false;
-    this.limitStylingAppends = false;
-    this.isLoading = true;
-    this.activeIndex = 0;
-    this.tutorialElementWidth = 0;
-    this.userAgent = window.navigator.userAgent;
-    this.isMobile = isMobile(this.userAgent);
-    this.allElementsWidth = 0;
-    this.xDown = null;
-    this.yDown = null;
-    this.resizeHandler = () => {
-      this.recalculateItemsPerPage();
-    };
-    this.orientationChangeHandler = () => {
-      setTimeout(() => {
+    constructor() {
+        this.userAgent = window.navigator.userAgent;
+        this.isMobile = isMobile(this.userAgent);
+        this.allElementsWidth = 0;
+        this.xDown = null;
+        this.yDown = null;
+        this.resizeHandler = () => {
+            this.recalculateItemsPerPage();
+        };
+        this.orientationChangeHandler = () => {
+            setTimeout(() => {
+                this.recalculateItemsPerPage();
+            }, 10);
+        };
+        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);
+            });
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.language = 'en';
+        this.cmsEndpoint = undefined;
+        this.userRoles = 'everyone';
+        this.cmsEnv = 'stage';
+        this.showSliderDots = true;
+        this.showSliderArrows = true;
+        this.showSliderArrowsMobile = false;
+        this.enableAutoScroll = false;
+        this.intervalPeriod = 5000;
+        this.scrollItems = 1;
+        this.itemsPerPage = 1;
+        this.hasErrors = false;
+        this.limitStylingAppends = false;
+        this.isLoading = true;
+        this.activeIndex = 0;
+        this.tutorialElementWidth = 0;
+    }
+    watchEndpoint(newValue, oldValue) {
+        if (newValue && newValue != oldValue && this.cmsEndpoint) {
+            this.getGeneralTutorialSlider().then((tutorialContent) => {
+                this.tutorialData = tutorialContent;
+            });
+        }
+    }
+    connectedCallback() {
+        window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+    }
+    componentWillLoad() {
+        if (this.cmsEndpoint && this.language) {
+            return this.getGeneralTutorialSlider().then((tutorialContent) => {
+                this.tutorialData = tutorialContent;
+            });
+        }
+    }
+    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 });
+        this.recalculateItemsPerPage();
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    componentDidUpdate() {
         this.recalculateItemsPerPage();
-      }, 10);
-    };
-    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.getGeneralTutorialSlider().then((tutorialContent) => {
-        this.tutorialData = tutorialContent;
-      });
     }
-  }
-  connectedCallback() {
-    window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
-  }
-  componentWillLoad() {
-    if (this.cmsEndpoint && this.language) {
-      return this.getGeneralTutorialSlider().then((tutorialContent) => {
-        this.tutorialData = tutorialContent;
-      });
+    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);
+    }
+    getGeneralTutorialSlider() {
+        let url = new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);
+        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((tutorialContent) => {
+                resolve(tutorialContent);
+            }).catch((err) => {
+                console.error(err);
+                this.hasErrors = true;
+                reject(err);
+            }).finally(() => {
+                this.isLoading = false;
+            });
+        });
     }
-  }
-  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 });
-    this.recalculateItemsPerPage();
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    move(direction) {
+        this.setActive(this.activeIndex + direction);
     }
-    // end custom styling area
-  }
-  componentDidUpdate() {
-    this.recalculateItemsPerPage();
-  }
-  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);
-  }
-  getGeneralTutorialSlider() {
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);
-    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((tutorialContent) => {
-        resolve(tutorialContent);
-      }).catch((err) => {
-        console.error(err);
-        this.hasErrors = true;
-        reject(err);
-      }).finally(() => {
-        this.isLoading = false;
-      });
-    });
-  }
-  move(direction) {
-    this.setActive(this.activeIndex + direction);
-  }
-  ;
-  //calculate itemsperpage by tutorials length to avoid empty in the tutorials end
-  recalculateItemsPerPage() {
-    if (!this.tutorialsElement)
-      return;
-    this.tutorialElementWidth = this.tutorialsElement.clientWidth;
-    this.allElementsWidth = (this.tutorialData.length - 1) * this.tutorialElementWidth;
-  }
-  ;
-  goTo(index) {
-    let diff = this.activeIndex - index;
-    if (diff > 0) {
-      for (let i = 0; i < diff; i++) {
-        this.move(-1);
-      }
+    ;
+    //calculate itemsperpage by tutorials length to avoid empty in the tutorials end
+    recalculateItemsPerPage() {
+        if (!this.tutorialsElement)
+            return;
+        this.tutorialElementWidth = this.tutorialsElement.clientWidth;
+        this.allElementsWidth = (this.tutorialData.length - 1) * this.tutorialElementWidth;
     }
-    else {
-      for (let i = 0; i > diff; i--) {
-        this.move(1);
-      }
+    ;
+    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);
+            }
+        }
     }
-  }
-  handleTouchStart(evt) {
-    const firstTouch = this.getTouches(evt)[0];
-    this.xDown = firstTouch.clientX;
-    this.yDown = firstTouch.clientY;
-  }
-  getTouches(evt) {
-    return evt.touches || evt.originalEvent.touches;
-  }
-  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);
-      }
+    handleTouchStart(evt) {
+        const firstTouch = this.getTouches(evt)[0];
+        this.xDown = firstTouch.clientX;
+        this.yDown = firstTouch.clientY;
     }
-    this.xDown = null;
-    this.yDown = null;
-  }
-  ;
-  setActive(index) {
-    const maxLength = this.tutorialData.length;
-    if (index >= 0) {
-      if (index >= maxLength - 1) {
-        this.activeIndex = maxLength - 1;
-      }
-      else {
-        this.activeIndex = index;
-      }
+    getTouches(evt) {
+        return evt.touches || evt.originalEvent.touches;
     }
-    else {
-      this.activeIndex = 0;
+    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;
     }
-  }
-  renderDots() {
-    const dots = [];
-    for (let index = 0; index < this.tutorialData.length / this.itemsPerPage; index++) {
-      dots.push(h("li", { class: index == this.activeIndex ? 'active' : 'default', onClick: () => { this.goTo(index); this.setActive(index); } }));
+    ;
+    setActive(index) {
+        const maxLength = this.tutorialData.length;
+        if (index >= 0) {
+            if (index >= maxLength - 1) {
+                this.activeIndex = maxLength - 1;
+            }
+            else {
+                this.activeIndex = index;
+            }
+        }
+        else {
+            this.activeIndex = 0;
+        }
     }
-    return dots;
-  }
-  render() {
-    const styles = {
-      transform: `translate(${(this.allElementsWidth / (this.tutorialData.length - 1) * this.activeIndex) * -1}px, 0px)`
-    };
-    const itemStyle = {
-      width: `${this.tutorialElementWidth / this.itemsPerPage}px`
-    };
-    if (this.hasErrors) {
-      return (h("div", { class: "GeneralTutorialSliderError" },
-        h("div", { class: "TitleError" }, translate('error', this.language))));
+    renderDots() {
+        const dots = [];
+        for (let index = 0; index < this.tutorialData.length / this.itemsPerPage; index++) {
+            dots.push(h("li", { class: index == this.activeIndex ? 'active' : 'default', onClick: () => { this.goTo(index); this.setActive(index); } }));
+        }
+        return dots;
     }
-    if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el },
-        h("div", { class: "TutorialWrapper" },
-          h("div", { class: "TutorialContent", ref: (el) => this.slider = el },
-            ((this.showSliderArrows && !this.isMobile) ||
-              (this.showSliderArrowsMobile && this.isMobile)) &&
-              h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) },
-                h("svg", { fill: "none", stroke: "var(--emfe-w-color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-                  h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))),
-            h("main", null,
-              h("div", { style: styles, ref: (el) => this.tutorialsElement = el, class: "TutorialItems" }, this.tutorialData.map((data) => {
+    render() {
+        const styles = {
+            transform: `translate(${(this.allElementsWidth / (this.tutorialData.length - 1) * this.activeIndex) * -1}px, 0px)`
+        };
+        const itemStyle = {
+            width: `${this.tutorialElementWidth / this.itemsPerPage}px`
+        };
+        if (this.hasErrors) {
+            return (h("div", { class: "GeneralTutorialSliderError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
+        }
+        if (!this.isLoading) {
+            return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TutorialWrapper" }, h("div", { class: "TutorialContent", ref: (el) => this.slider = el }, ((this.showSliderArrows && !this.isMobile) ||
+                (this.showSliderArrowsMobile && this.isMobile)) &&
+                h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--emfe-w-color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), h("main", null, h("div", { style: styles, ref: (el) => this.tutorialsElement = el, class: "TutorialItems" }, this.tutorialData.map((data) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-                return h("div", { class: "TutorialItem", style: itemStyle },
-                  h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }),
-                  ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("img", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (h("img", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("video", { controls: true, loop: true, autoplay: true },
-                    h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (h("video", { controls: true, loop: true, autoplay: true },
-                    h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null,
-                  h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
-              }))),
-            ((this.showSliderArrows && !this.isMobile) ||
-              (this.showSliderArrowsMobile && this.isMobile)) &&
-              h("div", { class: this.activeIndex === this.tutorialData.length - 1 ? ' SliderNavButton DisabledArrow disabled' : 'SliderNavButton', onClick: () => this.move(1) },
-                h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-                  h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))),
-            h("div", null)),
-          this.showSliderDots &&
-            h("div", { class: "DotsWrapper" },
-              h("ul", { class: "Dots" }, this.renderDots())))));
+                return h("div", { class: "TutorialItem", style: itemStyle }, h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("img", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (h("img", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
+            }))), ((this.showSliderArrows && !this.isMobile) ||
+                (this.showSliderArrowsMobile && this.isMobile)) &&
+                h("div", { class: this.activeIndex === this.tutorialData.length - 1 ? ' SliderNavButton DisabledArrow disabled' : 'SliderNavButton', onClick: () => this.move(1) }, h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("div", null)), this.showSliderDots &&
+                h("div", { class: "DotsWrapper" }, h("ul", { class: "Dots" }, this.renderDots())))));
+        }
+    }
+    static get is() { return "general-tutorial-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["general-tutorial-slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["general-tutorial-slider.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": "''"
+            },
+            "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'"
+            },
+            "cmsEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "attribute": "cms-endpoint",
+                "reflect": true
+            },
+            "userRoles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User roles"
+                },
+                "attribute": "user-roles",
+                "reflect": true,
+                "defaultValue": "'everyone'"
+            },
+            "cmsEnv": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CMS Endpoint stage"
+                },
+                "attribute": "cms-env",
+                "reflect": true,
+                "defaultValue": "'stage'"
+            },
+            "showSliderDots": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show slider dots"
+                },
+                "attribute": "show-slider-dots",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "showSliderArrows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show slider navigate arrows"
+                },
+                "attribute": "show-slider-arrows",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "showSliderArrowsMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show slider navigate arrows on mobile"
+                },
+                "attribute": "show-slider-arrows-mobile",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "enableAutoScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-scroll will only function if it is set to true, and otherwise it will be ignored."
+                },
+                "attribute": "enable-auto-scroll",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "intervalPeriod": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set interval period for slider"
+                },
+                "attribute": "interval-period",
+                "reflect": true,
+                "defaultValue": "5000"
+            },
+            "scrollItems": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the number of slides you wish to display."
+                },
+                "attribute": "scroll-items",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "itemsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the number of slides you wish to display."
+                },
+                "attribute": "items-per-page",
+                "reflect": true,
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasErrors": {},
+            "limitStylingAppends": {},
+            "isLoading": {},
+            "activeIndex": {},
+            "tutorialElementWidth": {}
+        };
     }
-  }
-  static get is() { return "general-tutorial-slider"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["general-tutorial-slider.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["general-tutorial-slider.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": "''"
-    },
-    "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'"
-    },
-    "cmsEndpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Endpoint URL for the source of data"
-      },
-      "attribute": "cms-endpoint",
-      "reflect": true
-    },
-    "userRoles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "User roles"
-      },
-      "attribute": "user-roles",
-      "reflect": true,
-      "defaultValue": "'everyone'"
-    },
-    "cmsEnv": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "CMS Endpoint stage"
-      },
-      "attribute": "cms-env",
-      "reflect": true,
-      "defaultValue": "'stage'"
-    },
-    "showSliderDots": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show slider dots"
-      },
-      "attribute": "show-slider-dots",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "showSliderArrows": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show slider navigate arrows"
-      },
-      "attribute": "show-slider-arrows",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "showSliderArrowsMobile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show slider navigate arrows on mobile"
-      },
-      "attribute": "show-slider-arrows-mobile",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "enableAutoScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Auto-scroll will only function if it is set to true, and otherwise it will be ignored."
-      },
-      "attribute": "enable-auto-scroll",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "intervalPeriod": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set interval period for slider"
-      },
-      "attribute": "interval-period",
-      "reflect": true,
-      "defaultValue": "5000"
-    },
-    "scrollItems": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the number of slides you wish to display."
-      },
-      "attribute": "scroll-items",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "itemsPerPage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the number of slides you wish to display."
-      },
-      "attribute": "items-per-page",
-      "reflect": true,
-      "defaultValue": "1"
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "cmsEndpoint",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "language",
+                "methodName": "watchEndpoint"
+            }];
     }
-  }; }
-  static get states() { return {
-    "hasErrors": {},
-    "limitStylingAppends": {},
-    "isLoading": {},
-    "activeIndex": {},
-    "tutorialElementWidth": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "cmsEndpoint",
-      "methodName": "watchEndpoint"
-    }, {
-      "propName": "language",
-      "methodName": "watchEndpoint"
-    }]; }
 }