@roadtrip/components 3.17.0 → 3.19.0

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

@@ -2,9 +2,6 @@ import { Host, h } from "@stencil/core";
 import { navigationChevron } from "../../../icons";
 import Swiper, { Autoplay, Pagination, Scrollbar, Keyboard, Zoom } from "swiper";
 Swiper.use([Pagination, Scrollbar, Autoplay, Keyboard, Zoom]);
-/**
- * @slot  - content of the carousel, it should be road-carousel-item elements.
- */
 export class Carousel {
   constructor() {
     this.swiperReady = false;
@@ -24,7 +21,6 @@ export class Carousel {
     }
   }
   connectedCallback() {
-    // tslint:disable-next-line: strict-type-predicates
     if (typeof MutationObserver !== 'undefined') {
       const mut = this.mutationO = new MutationObserver(() => {
         if (this.swiperReady) {
@@ -42,19 +38,13 @@ export class Carousel {
       this.didInit = true;
       this.initSwiper();
     }
+    this.setupKeyboardNavigation();
   }
   disconnectedCallback() {
     if (this.mutationO) {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
-    /**
-     * We need to synchronously destroy
-     * swiper otherwise it is possible
-     * that it will be left in a
-     * destroyed state if connectedCallback
-     * is called multiple times
-     */
     const swiper = this.syncSwiper;
     if (swiper !== undefined) {
       swiper.destroy(true, true);
@@ -66,10 +56,6 @@ export class Carousel {
     }
     this.didInit = false;
   }
-  /**
-   * Update the underlying slider implementation. Call this if you've added or removed
-   * child slides.
-   */
   async update() {
     const [swiper] = await Promise.all([
       this.getSwiper(),
@@ -77,150 +63,80 @@ export class Carousel {
     ]);
     swiper.update();
   }
-  /**
-   * Force swiper to update its height (when autoHeight is enabled) for the duration
-   * equal to 'speed' parameter.
-   *
-   * @param speed The transition duration (in ms).
-   */
   async updateAutoHeight(speed) {
     const swiper = await this.getSwiper();
     swiper.updateAutoHeight(speed);
   }
-  /**
-   * Transition to the specified slide.
-   *
-   * @param index The index of the slide to transition to.
-   * @param speed The transition duration (in ms).
-   * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
-   */
   async slideTo(index, speed, runCallbacks) {
     const swiper = await this.getSwiper();
     swiper.slideTo(index, speed, runCallbacks);
   }
-  /**
-   * Transition to the next slide.
-   *
-   * @param speed The transition duration (in ms).
-   * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
-   */
   async slideNext(speed, runCallbacks) {
     const swiper = await this.getSwiper();
     swiper.slideNext(speed, runCallbacks);
   }
-  /**
-   * Transition to the previous slide.
-   *
-   * @param speed The transition duration (in ms).
-   * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events.
-   */
   async slidePrev(speed, runCallbacks) {
     const swiper = await this.getSwiper();
     swiper.slidePrev(speed, runCallbacks);
   }
-  /**
-   * Get the index of the active slide.
-   */
   async getActiveIndex() {
     const swiper = await this.getSwiper();
     return swiper.activeIndex;
   }
-  /**
-   * Get the index of the previous slide.
-   */
   async getPreviousIndex() {
     const swiper = await this.getSwiper();
     return swiper.previousIndex;
   }
-  /**
-   * Get the total number of slides.
-   */
   async length() {
     const swiper = await this.getSwiper();
     return swiper.slides.length;
   }
-  /**
-   * Get whether or not the current slide is the last slide.
-   */
   async isEnd() {
     const swiper = await this.getSwiper();
     return swiper.isEnd;
   }
-  /**
-   * Get whether or not the current slide is the first slide.
-   */
   async isBeginning() {
     const swiper = await this.getSwiper();
     return swiper.isBeginning;
   }
-  /**
-   * Start auto play.
-   */
   async startAutoplay() {
     const swiper = await this.getSwiper();
     if (swiper.autoplay) {
       swiper.autoplay.start();
     }
   }
-  /**
-   * Stop auto play.
-   */
   async stopAutoplay() {
     const swiper = await this.getSwiper();
     if (swiper.autoplay) {
       swiper.autoplay.stop();
     }
   }
-  /**
-   * Lock or unlock the ability to slide to the next slide.
-   *
-   * @param lock If `true`, disable swiping to the next slide.
-   */
   async lockSwipeToNext(lock) {
     const swiper = await this.getSwiper();
     swiper.allowSlideNext = !lock;
   }
-  /**
-   * Lock or unlock the ability to slide to the previous slide.
-   *
-   * @param lock If `true`, disable swiping to the previous slide.
-   */
   async lockSwipeToPrev(lock) {
     const swiper = await this.getSwiper();
     swiper.allowSlidePrev = !lock;
   }
-  /**
-   * Lock or unlock the ability to slide to the next or previous slide.
-   *
-   * @param lock If `true`, disable swiping to the next and previous slide.
-   */
   async lockSwipes(lock) {
     const swiper = await this.getSwiper();
     swiper.allowSlideNext = !lock;
     swiper.allowSlidePrev = !lock;
     swiper.allowTouchMove = !lock;
   }
-  /**
-   * Get the Swiper instance.
-   * Use this to access the full Swiper API.
-   * See https://idangero.us/swiper/api/ for all API options.
-   */
   async getSwiper() {
     return this.swiper;
   }
   async initSwiper() {
     const finalOptions = this.normalizeOptions();
-    // init swiper core
     await waitForSlides(this.el);
-    // @ts-ignore
     const swiper = new Swiper(this.el, finalOptions);
     this.swiperReady = true;
     this.syncSwiper = swiper;
     this.readySwiper(swiper);
   }
   normalizeOptions() {
-    // Base options, can be changed
-    // TODO Add interface SwiperOptions
     const swiperOptions = {
       effect: undefined,
       direction: 'horizontal',
@@ -313,8 +229,6 @@ export class Carousel {
         hideOnClick: false,
       };
     }
-    // Keep the event options separate, we dont want users
-    // overwriting these
     const eventOptions = {
       on: {
         init: () => {
@@ -322,46 +236,41 @@ export class Carousel {
             this.roadslidesdidload.emit();
           }, 20);
         },
-        // @ts-ignore
-        slideChangeTransitionStart: this.roadslidewillchange.emit,
-        // @ts-ignore
-        slideChangeTransitionEnd: this.roadslidedidchange.emit,
-        // @ts-ignore
-        slideNextTransitionStart: this.roadslidenextstart.emit,
-        // @ts-ignore
-        slidePrevTransitionStart: this.roadslideprevstart.emit,
-        // @ts-ignore
-        slideNextTransitionEnd: this.roadslidenextend.emit,
-        // @ts-ignore
-        slidePrevTransitionEnd: this.roadslideprevend.emit,
-        // @ts-ignore
-        transitionStart: this.roadslidetransitionstart.emit,
-        // @ts-ignore
-        transitionEnd: this.roadslidetransitionend.emit,
-        // @ts-ignore
-        sliderMove: this.roadslidedrag.emit,
-        // @ts-ignore
-        reachBeginning: this.roadslidereachstart.emit,
-        // @ts-ignore
-        reachEnd: this.roadslidereachend.emit,
-        // @ts-ignore
-        touchStart: this.roadslidetouchstart.emit,
-        // @ts-ignore
-        touchEnd: this.roadslidetouchend.emit,
-        // @ts-ignore
-        tap: this.roadslidetap.emit,
-        // @ts-ignore
-        doubleTap: this.roadslidedoubletap.emit,
+        slideChangeTransitionStart: () => this.roadslidewillchange.emit(),
+        slideChangeTransitionEnd: () => this.roadslidedidchange.emit(),
+        slideNextTransitionStart: () => this.roadslidenextstart.emit(),
+        slidePrevTransitionStart: () => this.roadslideprevstart.emit(),
+        slideNextTransitionEnd: () => this.roadslidenextend.emit(),
+        slidePrevTransitionEnd: () => this.roadslideprevend.emit(),
+        transitionStart: () => this.roadslidetransitionstart.emit(),
+        transitionEnd: () => this.roadslidetransitionend.emit(),
+        sliderMove: () => this.roadslidedrag.emit(),
+        reachBeginning: () => this.roadslidereachstart.emit(),
+        reachEnd: () => this.roadslidereachend.emit(),
+        touchStart: () => this.roadslidetouchstart.emit(),
+        touchEnd: () => this.roadslidetouchend.emit(),
+        tap: () => this.roadslidetap.emit(),
+        doubleTap: () => this.roadslidedoubletap.emit(),
       },
     };
     const customEvents = (!!this.options && !!this.options.on) ? this.options.on : {};
-    // merge "on" event listeners, while giving our event listeners priority
     const mergedEventOptions = { on: Object.assign(Object.assign({}, customEvents), eventOptions.on) };
-    // Merge the base, user options, and events together then pas to swiper
     return Object.assign(Object.assign(Object.assign({}, swiperOptions), this.options), mergedEventOptions);
   }
+  setupKeyboardNavigation() {
+    this.el.addEventListener('keydown', (event) => {
+      switch (event.key) {
+        case 'ArrowLeft':
+          this.slidePrev();
+          break;
+        case 'ArrowRight':
+          this.slideNext();
+          break;
+      }
+    });
+  }
   render() {
-    return (h(Host, { class: "swiper-container" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), this.pager && h("div", { class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (h("div", { class: "swiper-button-prev", onClick: () => this.el.slidePrev() }, h("road-icon", { icon: navigationChevron, rotate: "180" }))), this.arrows && (h("div", { class: "swiper-button-next", onClick: () => this.el.slideNext() }, h("road-icon", { icon: navigationChevron })))));
+    return (h(Host, { class: "swiper-container", tabindex: "0" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), this.pager && h("div", { class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (h("div", { role: "button", class: "swiper-button-prev", tabindex: "0", "aria-label": "Previous slide", onClick: () => this.slidePrev() }, h("road-icon", { icon: navigationChevron, rotate: "180" }))), this.arrows && (h("div", { role: "button", class: "swiper-button-next", tabindex: "0", "aria-label": "Next slide", onClick: () => this.slideNext() }, h("road-icon", { icon: navigationChevron })))));
   }
   static get is() { return "road-carousel"; }
   static get encapsulation() { return "shadow"; }
@@ -389,7 +298,7 @@ export class Carousel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Options to pass to the swiper instance.\nSee http://idangero.us/swiper/api/ for valid options"
+          "text": ""
         },
         "attribute": "options",
         "reflect": false,
@@ -407,7 +316,7 @@ export class Carousel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, show the pagination."
+          "text": ""
         },
         "attribute": "pager",
         "reflect": false,
@@ -425,7 +334,7 @@ export class Carousel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, show arrows."
+          "text": ""
         },
         "attribute": "arrows",
         "reflect": false,
@@ -442,7 +351,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted after Swiper initialization"
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -457,7 +366,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the user taps/clicks on the slide's container."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -472,7 +381,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the user double taps on the slide's container."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -487,7 +396,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted before the active slide has changed."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -502,7 +411,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted after the active slide has changed."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -517,7 +426,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the next slide has started."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -532,7 +441,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the previous slide has started."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -547,7 +456,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the next slide has ended."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -562,7 +471,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the previous slide has ended."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -577,7 +486,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the slide transition has started."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -592,7 +501,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the slide transition has ended."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -607,7 +516,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the slider is actively being moved."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -622,7 +531,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the slider is at its initial position."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -637,7 +546,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the slider is at the last slide."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -652,7 +561,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the user first touches the slider."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -667,7 +576,7 @@ export class Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the user releases the touch."
+          "text": ""
         },
         "complexType": {
           "original": "void",
@@ -691,7 +600,7 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Update the underlying slider implementation. Call this if you've added or removed\nchild slides.",
+          "text": "",
           "tags": []
         }
       },
@@ -699,11 +608,8 @@ export class Carousel {
         "complexType": {
           "signature": "(speed?: number) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "speed The transition duration (in ms)."
-                }],
-              "text": "The transition duration (in ms)."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -714,34 +620,22 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to 'speed' parameter.",
-          "tags": [{
-              "name": "param",
-              "text": "speed The transition duration (in ms)."
-            }]
+          "text": "",
+          "tags": []
         }
       },
       "slideTo": {
         "complexType": {
           "signature": "(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "index The index of the slide to transition to."
-                }],
-              "text": "The index of the slide to transition to."
+              "tags": [],
+              "text": ""
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "speed The transition duration (in ms)."
-                }],
-              "text": "The transition duration (in ms)."
+              "tags": [],
+              "text": ""
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
-                }],
-              "text": "If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -752,34 +646,19 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Transition to the specified slide.",
-          "tags": [{
-              "name": "param",
-              "text": "index The index of the slide to transition to."
-            }, {
-              "name": "param",
-              "text": "speed The transition duration (in ms)."
-            }, {
-              "name": "param",
-              "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
-            }]
+          "text": "",
+          "tags": []
         }
       },
       "slideNext": {
         "complexType": {
           "signature": "(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "speed The transition duration (in ms)."
-                }],
-              "text": "The transition duration (in ms)."
+              "tags": [],
+              "text": ""
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
-                }],
-              "text": "If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -790,31 +669,19 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Transition to the next slide.",
-          "tags": [{
-              "name": "param",
-              "text": "speed The transition duration (in ms)."
-            }, {
-              "name": "param",
-              "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
-            }]
+          "text": "",
+          "tags": []
         }
       },
       "slidePrev": {
         "complexType": {
           "signature": "(speed?: number, runCallbacks?: boolean) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "speed The transition duration (in ms)."
-                }],
-              "text": "The transition duration (in ms)."
+              "tags": [],
+              "text": ""
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events."
-                }],
-              "text": "If true, the transition will produce the [Transition/SlideChange][Start/End] transition events."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -825,14 +692,8 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Transition to the previous slide.",
-          "tags": [{
-              "name": "param",
-              "text": "speed The transition duration (in ms)."
-            }, {
-              "name": "param",
-              "text": "runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events."
-            }]
+          "text": "",
+          "tags": []
         }
       },
       "getActiveIndex": {
@@ -848,7 +709,7 @@ export class Carousel {
           "return": "Promise<number>"
         },
         "docs": {
-          "text": "Get the index of the active slide.",
+          "text": "",
           "tags": []
         }
       },
@@ -865,7 +726,7 @@ export class Carousel {
           "return": "Promise<number>"
         },
         "docs": {
-          "text": "Get the index of the previous slide.",
+          "text": "",
           "tags": []
         }
       },
@@ -882,7 +743,7 @@ export class Carousel {
           "return": "Promise<number>"
         },
         "docs": {
-          "text": "Get the total number of slides.",
+          "text": "",
           "tags": []
         }
       },
@@ -899,7 +760,7 @@ export class Carousel {
           "return": "Promise<boolean>"
         },
         "docs": {
-          "text": "Get whether or not the current slide is the last slide.",
+          "text": "",
           "tags": []
         }
       },
@@ -916,7 +777,7 @@ export class Carousel {
           "return": "Promise<boolean>"
         },
         "docs": {
-          "text": "Get whether or not the current slide is the first slide.",
+          "text": "",
           "tags": []
         }
       },
@@ -933,7 +794,7 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Start auto play.",
+          "text": "",
           "tags": []
         }
       },
@@ -950,7 +811,7 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Stop auto play.",
+          "text": "",
           "tags": []
         }
       },
@@ -958,11 +819,8 @@ export class Carousel {
         "complexType": {
           "signature": "(lock: boolean) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "lock If `true`, disable swiping to the next slide."
-                }],
-              "text": "If `true`, disable swiping to the next slide."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -973,22 +831,16 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Lock or unlock the ability to slide to the next slide.",
-          "tags": [{
-              "name": "param",
-              "text": "lock If `true`, disable swiping to the next slide."
-            }]
+          "text": "",
+          "tags": []
         }
       },
       "lockSwipeToPrev": {
         "complexType": {
           "signature": "(lock: boolean) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "lock If `true`, disable swiping to the previous slide."
-                }],
-              "text": "If `true`, disable swiping to the previous slide."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -999,22 +851,16 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Lock or unlock the ability to slide to the previous slide.",
-          "tags": [{
-              "name": "param",
-              "text": "lock If `true`, disable swiping to the previous slide."
-            }]
+          "text": "",
+          "tags": []
         }
       },
       "lockSwipes": {
         "complexType": {
           "signature": "(lock: boolean) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "lock If `true`, disable swiping to the next and previous slide."
-                }],
-              "text": "If `true`, disable swiping to the next and previous slide."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -1025,11 +871,8 @@ export class Carousel {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Lock or unlock the ability to slide to the next or previous slide.",
-          "tags": [{
-              "name": "param",
-              "text": "lock If `true`, disable swiping to the next and previous slide."
-            }]
+          "text": "",
+          "tags": []
         }
       },
       "getSwiper": {
@@ -1045,7 +888,7 @@ export class Carousel {
           "return": "Promise<any>"
         },
         "docs": {
-          "text": "Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://idangero.us/swiper/api/ for all API options.",
+          "text": "",
           "tags": []
         }
       }