@salla.sa/twilight-components 2.9.48 → 2.10.0

package/dist/collection/components/salla-slider/salla-slider.js

@@ -1,8 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, State, Prop, h, Event, Host, Method } from '@stencil/core';
-import Swiper, { Navigation, Pagination, Lazy, Controller, Thumbs, Parallax, Autoplay } from 'swiper';
+import { Component, State, Prop, h, Event, Host, Method, Element } from '@stencil/core';
 import ArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
 import ArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
 /**
@@ -11,14 +10,46 @@ import ArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
  */
 export class SallaSwiper {
   constructor() {
+    /**
+     * Show/hide slider block title
+     */
+    this.blockTitle = '';
+    /**
+     * Show/hide slider block sub title
+     */
+    this.blockSubtitle = '';
+    /**
+     * Show/hide display all button beside arrows
+     */
+    this.displayAllUrl = '';
     /**
      * Show/hide arrows
      */
     this.showControls = true;
+    /**
+     * Show/hide arrows
+     */
+    this.controlsOuter = false;
     /**
      * Show/hide thumbs slider arrows
      */
     this.showThumbsControls = true;
+    /**
+     * Enable autoplay  - working with `type="carousel" only`
+     */
+    this.autoPlay = false;
+    /**
+     * Enable pagination
+     */
+    this.pagination = false;
+    /**
+     * Enable center mode  - working with `type="carousel" only`
+     */
+    this.centered = false;
+    /**
+     * Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue
+     */
+    this.loop = false;
     /**
      * Set the type of the slider
      * Default: ''
@@ -37,22 +68,57 @@ export class SallaSwiper {
      */
     this.sliderConfig = {};
     /**
-    * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
-    * @example
-    * let slider = document.querySelector('salla-slider');
-    *  slider.thumbsConfig = {
-    *  slidesPerView: 1,
-    *  spaceBetween : 30,
-    *  lazy: true,
-    * }
-    *
-    */
+     * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
+     * @example
+     * let slider = document.querySelector('salla-slider');
+     *  slider.thumbsConfig = {
+     *  slidesPerView: 1,
+     *  spaceBetween : 30,
+     *  lazy: true,
+     * }
+     *
+     */
     this.thumbsConfig = {};
     // States
     this.currentIndex = undefined;
     this.isEnd = false;
     this.isBeginning = true;
     this.isRTL = document.documentElement.dir === 'rtl';
+    this.pre_defined_config = {
+      carousel: {
+        speed: 300,
+        slidesPerView: 'auto',
+        spaceBetween: 0,
+      },
+      fullscreen: {
+        speed: 750,
+        parallax: true,
+        autoplay: {
+          delay: 5000,
+        },
+      },
+      testimonials: {
+        draggable: true,
+        centeredSlides: true,
+        slidesPerView: 1,
+        breakpoints: { 1024: { slidesPerView: 2 } }
+      },
+      blog: {
+        slidesPerView: 1,
+        centeredSlides: true,
+        spaceBetween: 30,
+        effect: "fade",
+        breakpoints: {
+          320: { spaceBetween: 10 },
+          768: { spaceBetween: 15 },
+          980: { paceBetween: 30 },
+        }
+      },
+      thumbs: {
+        slidesPerView: 1,
+        spaceBetween: 30
+      }
+    };
   }
   // Methods
   /**
@@ -63,7 +129,7 @@ export class SallaSwiper {
    * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
    * **/
   async slideTo(index, speed, runCallbacks) {
-    this.slider.slideTo(index, speed, runCallbacks);
+    return this.slider.slideTo(index, speed, runCallbacks);
   }
   /**
    * Run transition to the next slide.
@@ -72,7 +138,8 @@ export class SallaSwiper {
    * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
    * **/
   async slideNext(speed, runCallbacks) {
-    this.slider.slideNext(speed, runCallbacks);
+    var _a;
+    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.slideNext(speed, runCallbacks);
   }
   /**
    * Run transition to the previous slide.
@@ -81,7 +148,8 @@ export class SallaSwiper {
    * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
    * **/
   async slidePrev(speed, runCallbacks) {
-    this.slider.slidePrev(speed, runCallbacks);
+    var _a;
+    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.slidePrev(speed, runCallbacks);
   }
   /**
    * Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index
@@ -128,7 +196,7 @@ export class SallaSwiper {
     this.slider.slideToClosest(speed, runCallbacks);
   }
   /**
-   * 	You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
+   *  You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
    * **/
   async update() {
     this.slider.update();
@@ -158,118 +226,180 @@ export class SallaSwiper {
   async updateSlidesClasses() {
     this.slider.updateSlidesClasses();
   }
-  componentDidLoad() {
-    let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
-    !!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
-    if (this.type == 'thumbs') {
-      let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
-      !!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : null;
-    }
-    this.initSlider();
+  /**
+   * Get slider slides
+   * **/
+  async getSlides() {
+    var _a;
+    return await ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.slides);
   }
-  initSlider() {
-    Swiper.use([Controller, Navigation, Pagination, Lazy, Thumbs, Parallax, Autoplay]);
-    for (const slide of this.sliderWrapper.children) {
-      //todo:: use `s-slider-slide`
-      slide.classList.add('swiper-slide');
-    }
-    if (this.type == 'carousel') {
-      this.slider = new Swiper(this.sliderContainer, {
-        loop: false,
-        speed: 300,
-        slidesPerView: 'auto',
-        spaceBetween: 10,
-      });
-    }
-    else if (this.type == 'thumbs') {
-      this.thumbsSlider = new Swiper(this.thumbsSliderContainer, Object.assign({}, this.thumbsConfig));
+  componentWillLoad() {
+    salla.lang.onLoaded(() => {
+      this.displayAllTitle = salla.lang.get('blocks.home.display_all');
+    });
+    return new Promise((resolve, reject) => {
+      // @ts-ignore
+      if (typeof Swiper !== 'undefined') {
+        return resolve(true);
+      }
+      if (document.getElementById('swiper-script')) {
+        let interval = setInterval(() => {
+          // @ts-ignore
+          if (typeof Swiper !== 'undefined') {
+            clearInterval(interval);
+            resolve(true);
+          }
+        }, 5);
+      }
+      else {
+        // ? There is an issue with stencil bundling it breaks the swiper import, so we need to import it manually by swiperjs rerendered file
+        // ! IT'S NOT A GOOD SOLUTION, BUT IT WORKS, WE NEED TO FIND A BETTER SOLUTION
+        this.swiperScript = document.createElement('script');
+        this.swiperScript.onload = () => {
+          resolve(true);
+          salla.event.emit('swiper::loaded');
+        };
+        this.swiperScript.onerror = (error) => {
+          salla.logger.warn('failed load swiper bundle', error);
+          reject(true);
+        };
+        this.swiperScript.src = 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js';
+        this.swiperScript.setAttribute('id', 'swiper-script');
+        document.body.appendChild(this.swiperScript);
+      }
+    });
+  }
+  getSwiperConfig() {
+    let pre_defined_config = {
+      loop: this.loop,
+      autoplay: this.autoPlay,
+      centeredSlides: this.centered,
+      lazy: true,
+      on: {
+        // todo:: find better way for this workaround to show lazyLoad for duplicated slides, for some reason they are loaded but class not added.
+        afterInit: (slider) => this.loop && slider.slides.map(slide => {
+          var _a;
+          (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
+          if (!slide.classList.contains('swiper-slide-duplicate')) {
+            return;
+          }
+          slide.querySelectorAll('img.lazy:not(.loaded)').forEach(img => img.classList.add('loaded'));
+        }),
+      },
+      pagination: this.pagination ? {
+        el: this.host.id ? `#${this.host.id} .swiper-pagination` : '',
+        clickable: true,
+      } : false,
+      navigation: this.showControls ? {
+        nextEl: this.host.id ? `#${this.host.id} .s-slider-next` : '',
+        prevEl: this.host.id ? `#${this.host.id} .s-slider-prev` : ''
+      } : false,
+    };
+    pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), (this.pre_defined_config[this.type] || {}));
+    if (this.type == 'thumbs') {
       for (const slide of this.thumbsSliderWrapper.children) {
         //todo:: use `s-slider-slide`
         slide.classList.add('swiper-slide');
       }
-      this.slider = new Swiper(this.sliderContainer, {
-        slidesPerView: 1,
-        spaceBetween: 30,
-        lazy: true,
-        thumbs: {
-          swiper: this.thumbsSlider,
-        },
+      // @ts-ignore
+      this.thumbsSlider = new Swiper(this.thumbsSliderContainer, {
+        freeMode: false,
+        watchSlidesProgress: true,
+        slidesPerView: 'auto',
       });
+      // @ts-ignore
+      pre_defined_config.thumbs = {
+        swiper: this.thumbsSlider,
+      };
     }
-    else {
-      this.slider = new Swiper(this.sliderContainer, Object.assign({}, this.sliderConfig));
+    pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), this.sliderConfig);
+    return pre_defined_config;
+  }
+  initSlider() {
+    for (const slide of this.sliderWrapper.children) {
+      //todo:: use `s-slider-slide`
+      slide.classList.add('swiper-slide');
     }
+    // @ts-ignore
+    this.slider = new Swiper(this.sliderContainer, this.getSwiperConfig());
     // Expose slider events
     this.slider.on('slideChange', (slider) => {
+      //todo:: it doesn't change when loop is active, always will be false
       this.isBeginning = slider.isBeginning;
       this.isEnd = slider.isEnd;
       this.slideChange.emit(slider);
     });
-    this.slider.on('reachBeginning', (slider) => {
-      // this.isBeginning = true;
-      this.reachBeginning.emit(slider);
-    });
-    this.slider.on('reachEnd', (slider) => {
-      // this.isEnd = true;
-      this.reachEnd.emit(slider);
-    });
-    this.slider.on('slideChangeTransitionEnd', (slider) => {
-      this.slideChangeTransitionEnd.emit(slider);
-    });
-    this.slider.on('slideChangeTransitionStart', (slider) => {
-      this.slideChangeTransitionStart.emit(slider);
-    });
-    this.slider.on('slideNextTransitionEnd', (slider) => {
-      this.slideNextTransitionEnd.emit(slider);
-    });
-    this.slider.on('slideNextTransitionStart', (slider) => {
-      this.slideNextTransitionStart.emit(slider);
-    });
-    this.slider.on('slidePrevTransitionEnd', (slider) => {
-      this.slidePrevTransitionEnd.emit(slider);
-    });
-    this.slider.on('slidePrevTransitionStart', (slider) => {
-      this.slidePrevTransitionStart.emit(slider);
-    });
-    this.slider.on('sliderMove', (slider) => {
-      this.sliderMove.emit(slider);
-    });
-    this.slider.on('touchEnd', (slider) => {
-      this.touchSliderEnd.emit(slider);
-    });
-    this.slider.on('touchMove', (slider) => {
-      this.touchSliderMove.emit(slider);
-    });
-    this.slider.on('touchStart', (slider) => {
-      this.touchSliderStart.emit(slider);
-    });
-    this.slider.on('transitionEnd', (slider) => {
-      this.sliderTransitionEnd.emit(slider);
-    });
-    this.slider.on('transitionStart', (slider) => {
-      this.sliderTransitionStart.emit(slider);
-    });
+    this.slider.on('reachBeginning', (slider) => this.reachBeginning.emit(slider));
+    this.slider.on('reachEnd', (slider) => this.reachEnd.emit(slider));
+    this.slider.on('slideChangeTransitionEnd', (slider) => this.slideChangeTransitionEnd.emit(slider));
+    this.slider.on('slideChangeTransitionStart', (slider) => this.slideChangeTransitionStart.emit(slider));
+    this.slider.on('slideNextTransitionEnd', (slider) => this.slideNextTransitionEnd.emit(slider));
+    this.slider.on('slideNextTransitionStart', (slider) => this.slideNextTransitionStart.emit(slider));
+    this.slider.on('slidePrevTransitionEnd', (slider) => this.slidePrevTransitionEnd.emit(slider));
+    this.slider.on('slidePrevTransitionStart', (slider) => this.slidePrevTransitionStart.emit(slider));
+    this.slider.on('sliderMove', (slider) => this.sliderMove.emit(slider));
+    this.slider.on('touchEnd', (slider) => this.touchSliderEnd.emit(slider));
+    this.slider.on('touchMove', (slider) => this.touchSliderMove.emit(slider));
+    this.slider.on('touchStart', (slider) => this.touchSliderStart.emit(slider));
+    this.slider.on('transitionEnd', (slider) => this.sliderTransitionEnd.emit(slider));
+    this.slider.on('transitionStart', (slider) => this.sliderTransitionStart.emit(slider));
   }
   render() {
     var _a, _b, _c, _d;
-    return (h(Host, { class: "s-slider-wrapper" },
+    let classes = this.type ? this.type + '-slider ' : '';
+    classes += this.controlsOuter ? ' s-slider-controls-outer ' : '';
+    classes += this.blockTitle == '' ? ' s-slider-has-notitle ' : '';
+    classes += this.blockTitle == '' || this.type == 'testimonials' ? ' s-slider-v-centered ' : '';
+    return (h(Host, { class: 's-slider-wrapper ' + classes },
+      this.blockTitle || this.showControls ?
+        h("div", { class: "s-slider-block__title" },
+          this.blockTitle ?
+            h("div", { class: "s-slider-block__title-right" },
+              h("h2", null, this.blockTitle),
+              this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
+            : '',
+          h("div", { class: "s-slider-block__title-left" },
+            this.displayAllUrl ?
+              h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle)
+              : '',
+            this.showControls ?
+              h("div", { class: "s-slider-block__title-nav", dir: "rtl" },
+                h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" },
+                  h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowRightIcon : ArrowLeftIcon })),
+                h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" },
+                  h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowLeftIcon : ArrowRightIcon })))
+              : ''))
+        : '',
       h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el },
-        h("div", { class: "swiper-wrapper", ref: el => this.sliderWrapper = el },
+        h("slot", null),
+        h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el },
           h("slot", { name: 'items' })),
-        this.showControls ? [h("div", { class: "s-slider-button-prev" },
-            h("salla-button", { shape: "icon", disabled: this.isRTL ? this.isEnd : this.isBeginning, color: "light", onClick: () => this.isRTL ? this.slideNext() : this.slidePrev() },
-              h("span", { class: "s-slider-button-icon", innerHTML: ArrowLeftIcon }))), h("div", { class: "s-slider-button-next" },
-            h("salla-button", { disabled: this.isRTL ? this.isBeginning : this.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.slidePrev() : this.slideNext() },
-              h("span", { class: "s-slider-button-icon", innerHTML: ArrowRightIcon })))] : ''),
+        this.pagination ? h("div", { class: "swiper-pagination" }) : ''),
       this.type == 'thumbs' ? h("div", { class: "s-slider-thumbs" },
         h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el },
-          h("div", { class: "swiper-wrapper", ref: el => this.thumbsSliderWrapper = el },
+          h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el },
             h("slot", { name: "thumbs" })),
-          this.showThumbsControls ? [h("div", { class: "s-slider-button-prev" },
+          this.showThumbsControls ? [h("div", { class: "s-slider-button s-slider-button-prev" },
               h("salla-button", { disabled: this.isRTL ? (_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.isEnd : (_b = this.thumbsSlider) === null || _b === void 0 ? void 0 : _b.isBeginning, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slideNext() : this.thumbsSlider.slidePrev() },
-                h("span", { class: "s-slider-button-icon", innerHTML: ArrowLeftIcon }))), h("div", { class: "s-slider-button-next" },
+                h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowLeftIcon : ArrowRightIcon }))), h("div", { class: "s-slider-button s-slider-button-next" },
               h("salla-button", { disabled: this.isRTL ? (_c = this.thumbsSlider) === null || _c === void 0 ? void 0 : _c.isBeginning : (_d = this.thumbsSlider) === null || _d === void 0 ? void 0 : _d.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slidePrev() : this.thumbsSlider.slideNext() },
-                h("span", { class: "s-slider-button-icon", innerHTML: ArrowRightIcon })))] : '')) : ''));
+                h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowRightIcon : ArrowLeftIcon })))] : '')) : ''));
+  }
+  componentDidLoad() {
+    let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
+    !!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
+    if (this.type == 'thumbs') {
+      let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
+      !!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : null;
+    }
+    // if swiper is not loaded, lets relay on event
+    // @ts-ignore
+    if (typeof Swiper === 'undefined') {
+      salla.event.once('swiper::loaded', () => this.initSlider());
+    }
+    else { // if swiper is loaded lets init our slider
+      this.initSlider();
+    }
   }
   static get is() { return "salla-slider"; }
   static get originalStyleUrls() { return {
@@ -279,6 +409,60 @@ export class SallaSwiper {
     "$": ["salla-slider.css"]
   }; }
   static get properties() { return {
+    "blockTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show/hide slider block title"
+      },
+      "attribute": "block-title",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "blockSubtitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show/hide slider block sub title"
+      },
+      "attribute": "block-subtitle",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "displayAllUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show/hide display all button beside arrows"
+      },
+      "attribute": "display-all-url",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "showControls": {
       "type": "boolean",
       "mutable": false,
@@ -297,6 +481,24 @@ export class SallaSwiper {
       "reflect": true,
       "defaultValue": "true"
     },
+    "controlsOuter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show/hide arrows"
+      },
+      "attribute": "controls-outer",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "showThumbsControls": {
       "type": "boolean",
       "mutable": false,
@@ -315,19 +517,91 @@ export class SallaSwiper {
       "reflect": false,
       "defaultValue": "true"
     },
+    "autoPlay": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable autoplay  - working with `type=\"carousel\" only`"
+      },
+      "attribute": "auto-play",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "pagination": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable pagination"
+      },
+      "attribute": "pagination",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "centered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable center mode  - working with `type=\"carousel\" only`"
+      },
+      "attribute": "centered",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loop": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue"
+      },
+      "attribute": "loop",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "type": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'carousel' | 'thumbs' | ''",
-        "resolved": "\"\" | \"carousel\" | \"thumbs\"",
+        "original": "'carousel' | 'thumbs' | 'default' | 'hero' | 'testimonials' | 'blog' | ''",
+        "resolved": "\"\" | \"blog\" | \"carousel\" | \"default\" | \"hero\" | \"testimonials\" | \"thumbs\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the type of the slider \nDefault: ''"
+        "text": "Set the type of the slider\nDefault: ''"
       },
       "attribute": "type",
       "reflect": false,
@@ -380,7 +654,9 @@ export class SallaSwiper {
     "currentIndex": {},
     "isEnd": {},
     "isBeginning": {},
-    "isRTL": {}
+    "isRTL": {},
+    "swiperScript": {},
+    "displayAllTitle": {}
   }; }
   static get events() { return [{
       "method": "slideChange",
@@ -611,7 +887,7 @@ export class SallaSwiper {
   static get methods() { return {
     "slideTo": {
       "complexType": {
-        "signature": "(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
+        "signature": "(index: number, speed?: number, runCallbacks?: boolean) => Promise<any>",
         "parameters": [{
             "tags": [{
                 "name": "param",
@@ -636,7 +912,7 @@ export class SallaSwiper {
             "location": "global"
           }
         },
-        "return": "Promise<void>"
+        "return": "Promise<any>"
       },
       "docs": {
         "text": "Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.",
@@ -981,6 +1257,23 @@ export class SallaSwiper {
         "text": "update active/prev/next classes on slides and bullets\n*",
         "tags": []
       }
+    },
+    "getSlides": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Get slider slides\n*",
+        "tags": []
+      }
     }
   }; }
+  static get elementRef() { return "host"; }
 }