@roadtrip/components 2.24.1 → 2.27.0

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

@@ -328,39 +328,39 @@ export class Carousel {
       on: {
         init: () => {
           setTimeout(() => {
-            this.roadSlidesDidLoad.emit();
+            this.roadslidesdidload.emit();
           }, 20);
         },
         // @ts-ignore
-        slideChangeTransitionStart: this.roadSlideWillChange.emit,
+        slideChangeTransitionStart: this.roadslidewillchange.emit,
         // @ts-ignore
-        slideChangeTransitionEnd: this.roadSlideDidChange.emit,
+        slideChangeTransitionEnd: this.roadslidedidchange.emit,
         // @ts-ignore
-        slideNextTransitionStart: this.roadSlideNextStart.emit,
+        slideNextTransitionStart: this.roadslidenextstart.emit,
         // @ts-ignore
-        slidePrevTransitionStart: this.roadSlidePrevStart.emit,
+        slidePrevTransitionStart: this.roadslideprevstart.emit,
         // @ts-ignore
-        slideNextTransitionEnd: this.roadSlideNextEnd.emit,
+        slideNextTransitionEnd: this.roadslidenextend.emit,
         // @ts-ignore
-        slidePrevTransitionEnd: this.roadSlidePrevEnd.emit,
+        slidePrevTransitionEnd: this.roadslideprevend.emit,
         // @ts-ignore
-        transitionStart: this.roadSlideTransitionStart.emit,
+        transitionStart: this.roadslidetransitionstart.emit,
         // @ts-ignore
-        transitionEnd: this.roadSlideTransitionEnd.emit,
+        transitionEnd: this.roadslidetransitionend.emit,
         // @ts-ignore
-        sliderMove: this.roadSlideDrag.emit,
+        sliderMove: this.roadslidedrag.emit,
         // @ts-ignore
-        reachBeginning: this.roadSlideReachStart.emit,
+        reachBeginning: this.roadslidereachstart.emit,
         // @ts-ignore
-        reachEnd: this.roadSlideReachEnd.emit,
+        reachEnd: this.roadslidereachend.emit,
         // @ts-ignore
-        touchStart: this.roadSlideTouchStart.emit,
+        touchStart: this.roadslidetouchstart.emit,
         // @ts-ignore
-        touchEnd: this.roadSlideTouchEnd.emit,
+        touchEnd: this.roadslidetouchend.emit,
         // @ts-ignore
-        tap: this.roadSlideTap.emit,
+        tap: this.roadslidetap.emit,
         // @ts-ignore
-        doubleTap: this.roadSlideDoubleTap.emit,
+        doubleTap: this.roadslidedoubletap.emit,
       },
     };
     const customEvents = (!!this.options && !!this.options.on) ? this.options.on : {};
@@ -444,8 +444,8 @@ export class Carousel {
     }
   }; }
   static get events() { return [{
-      "method": "roadSlidesDidLoad",
-      "name": "roadSlidesDidLoad",
+      "method": "roadslidesdidload",
+      "name": "roadslidesdidload",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -459,8 +459,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideTap",
-      "name": "roadSlideTap",
+      "method": "roadslidetap",
+      "name": "roadslidetap",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -474,8 +474,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideDoubleTap",
-      "name": "roadSlideDoubleTap",
+      "method": "roadslidedoubletap",
+      "name": "roadslidedoubletap",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -489,8 +489,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideWillChange",
-      "name": "roadSlideWillChange",
+      "method": "roadslidewillchange",
+      "name": "roadslidewillchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -504,8 +504,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideDidChange",
-      "name": "roadSlideDidChange",
+      "method": "roadslidedidchange",
+      "name": "roadslidedidchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -519,8 +519,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideNextStart",
-      "name": "roadSlideNextStart",
+      "method": "roadslidenextstart",
+      "name": "roadslidenextstart",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -534,8 +534,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlidePrevStart",
-      "name": "roadSlidePrevStart",
+      "method": "roadslideprevstart",
+      "name": "roadslideprevstart",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -549,8 +549,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideNextEnd",
-      "name": "roadSlideNextEnd",
+      "method": "roadslidenextend",
+      "name": "roadslidenextend",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -564,8 +564,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlidePrevEnd",
-      "name": "roadSlidePrevEnd",
+      "method": "roadslideprevend",
+      "name": "roadslideprevend",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -579,8 +579,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideTransitionStart",
-      "name": "roadSlideTransitionStart",
+      "method": "roadslidetransitionstart",
+      "name": "roadslidetransitionstart",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -594,8 +594,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideTransitionEnd",
-      "name": "roadSlideTransitionEnd",
+      "method": "roadslidetransitionend",
+      "name": "roadslidetransitionend",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -609,8 +609,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideDrag",
-      "name": "roadSlideDrag",
+      "method": "roadslidedrag",
+      "name": "roadslidedrag",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -624,8 +624,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideReachStart",
-      "name": "roadSlideReachStart",
+      "method": "roadslidereachstart",
+      "name": "roadslidereachstart",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -639,8 +639,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideReachEnd",
-      "name": "roadSlideReachEnd",
+      "method": "roadslidereachend",
+      "name": "roadslidereachend",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -654,8 +654,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideTouchStart",
-      "name": "roadSlideTouchStart",
+      "method": "roadslidetouchstart",
+      "name": "roadslidetouchstart",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -669,8 +669,8 @@ export class Carousel {
         "references": {}
       }
     }, {
-      "method": "roadSlideTouchEnd",
-      "name": "roadSlideTouchEnd",
+      "method": "roadslidetouchend",
+      "name": "roadslidetouchend",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,116 +1,360 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
-  title: 'Listing/Carousel/road-carousel',
+  title: 'Listing/Carousel',
   component: 'road-carousel',
+  subcomponents: {
+    'road-carousel-item': 'road-carousel-item',
+  },
   parameters: {
     actions: {
       handles: [
-        'roadSlidesDidLoad',
-        'roadSlideTap',
-        'roadSlideDoubleTap',
-        'roadSlideWillChange',
-        'roadSlideDidChange',
-        'roadSlideNextStart',
-        'roadSlidePrevStart',
-        'roadSlideNextEnd',
-        'roadSlidePrevEnd',
-        'roadSlideTransitionStart',
-        'roadSlideTransitionEnd',
-        'roadSlideDrag',
-        'roadSlideReachStart',
-        'roadSlideReachEnd',
-        'roadSlideTouchStart',
-        'roadSlideTouchEnd',
+        'roadslidesdidload',
+        'roadslidetap',
+        'roadslidedoubletap',
+        'roadslidewillchange',
+        'roadslidedidchange',
+        'roadslidenextstart',
+        'roadslideprevstart',
+        'roadslidenextend',
+        'roadslideprevend',
+        'roadslidetransitionstart',
+        'roadslidetransitionend',
+        'roadslidedrag',
+        'roadslidereachstart',
+        'roadslidereachend',
+        'roadslidetouchstart',
+        'roadslidetouchend'
       ],
     },
+    docs: {
+      description: {
+        component: `The Carousel component is using child components named \`carousel-item\` to create different slides, so the content of each slide need to be in a \`carousel-item\` component.`,
+      },
+    },
   },
-};
-
-export const Playground = ({pager, arrows}) => html`
-  <road-carousel pager="${pager}" arrows="${arrows}">
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg" alt="roof bar diagram"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg" alt="roof bar on car"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg" alt="roof bar diagram mounting first step"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg" alt="roof bar diagram mounting second step"></road-img>
-    </road-carousel-item>
-
-    <road-carousel-item>
-      <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg" alt="roof bar example"></road-img>
-    </road-carousel-item>
-  </road-carousel>
-`;
-Playground.args = {
-  pager: true,
-  arrows: false,
-};
-Playground.argTypes = {
-  pager: {
-    control: 'boolean',
-  },
-  arrows: {
-    control: 'boolean',
+  argTypes: {
+    pager: {
+      control: 'boolean',
+    },
+    arrows: {
+      control: 'boolean',
+    },
+    options: {
+      control: 'object',
+    },
+    ' ': {
+      control: 'text',
+    },
+    getActiveIndex : {
+      description: 'Get the index of the active slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getActiveIndex() => Promise<number>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    getPreviousIndex : {
+      description: 'Get the index of the previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'etPreviousIndex() => Promise<number>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    getSwiper : {
+      description: 'Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://idangero.us/swiper/api/ for all API options.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getSwiper() => Promise<any>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    isBeginning : {
+      description: 'Get whether or not the current slide is the first slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'isBeginning() => Promise<boolean>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    isEnd : {
+      description: 'Get whether or not the current slide is the last slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'isEnd() => Promise<boolean>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    length : {
+      description: 'Get the total number of slides.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'length() => Promise<number>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    lockSwipeToNext : {
+      description: 'Lock or unlock the ability to slide to the next slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'lockSwipeToNext(lock: boolean) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    lockSwipeToPrev : {
+      description: 'Lock or unlock the ability to slide to the previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'lockSwipeToPrev(lock: boolean) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    lockSwipes : {
+      description: 'Lock or unlock the ability to slide to the next or previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'lockSwipes(lock: boolean) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    slideNext : {
+      description: 'Transition to the next slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    slidePrev : {
+      description: 'Transition to the previous slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    slideTo : {
+      description: 'Transition to the specified slide.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    startAutoplay : {
+      description: 'Start auto play.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'startAutoplay() => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    stopAutoplay : {
+      description: 'Stop auto play.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'stopAutoplay() => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    update : {
+      description: 'Update the underlying slider implementation. Call this if you\'ve added or removed\nchild slides.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'update() => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    updateAutoHeight : {
+      description: 'Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to \'speed\' parameter.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'updateAutoHeight(speed?: number | undefined) => Promise<void>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    roadslidesdidload: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidetap: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidedoubletap: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidewillchange: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidedidchange: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidenextstart: {
+      control: {
+        type: null,
+      },
+    },
+    roadslideprevstart: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidenextend: {
+      control: {
+        type: null,
+      },
+    },
+    roadslideprevend: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidetransitionstart: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidetransitionend: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidedrag: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidereachstart: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidereachend: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidetouchstart: {
+      control: {
+        type: null,
+      },
+    },
+    roadslidetouchend: {
+      control: {
+        type: null,
+      },
+    },
   },
-};
-
-export const Default = () => html`
-  <road-carousel>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg"></road-img>
+  args: {
+    pager: undefined,
+    arrows: null,
+    ' ': `<road-carousel-item>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg" alt="roof bar diagram"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg"></road-img>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg" alt="roof bar on car"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg"></road-img>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg" alt="roof bar diagram mounting first step"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg"></road-img>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg" alt="roof bar diagram mounting second step"></road-img>
   </road-carousel-item>
 
   <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg"></road-img>
-  </road-carousel-item>
+    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg" alt="roof bar example"></road-img>
+  </road-carousel-item>`,
+  },
+};
 
+const Template = (args) => html`
+<road-carousel pager="${ifDefined(args.pager)}" arrows="${ifDefined(args.arrows)}" .options="${ifDefined(args.options)}">
+  ${unsafeHTML(args[' '])}
 </road-carousel>
 `;
 
-export const Arrows = () => html`
-  <road-carousel arrows>
+export const Playground = Template.bind({});
 
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-1.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-2.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-4.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-6.jpg"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://anpsn.norauto.fr/catalogue/ALL_BU/Roof_racks/common/carousel/images-barres/barres-8.jpg"></road-img>
-  </road-carousel-item>
-
-</road-carousel>
-`;
+export const Arrows = Template.bind({});
+Arrows.args = {
+  arrows: true,
+};