@roadtrip/components 2.25.1 → 2.27.1

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

@@ -11,22 +11,22 @@ export default {
   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: {
@@ -240,82 +240,82 @@ export default {
         summary: null,
       },
     },
-    roadSlidesDidLoad: {
+    roadslidesdidload: {
       control: {
         type: null,
       },
     },
-    roadSlideTap: {
+    roadslidetap: {
       control: {
         type: null,
       },
     },
-    roadSlideDoubleTap: {
+    roadslidedoubletap: {
       control: {
         type: null,
       },
     },
-    roadSlideWillChange: {
+    roadslidewillchange: {
       control: {
         type: null,
       },
     },
-    roadSlideDidChange: {
+    roadslidedidchange: {
       control: {
         type: null,
       },
     },
-    roadSlideNextStart: {
+    roadslidenextstart: {
       control: {
         type: null,
       },
     },
-    roadSlidePrevStart: {
+    roadslideprevstart: {
       control: {
         type: null,
       },
     },
-    roadSlideNextEnd: {
+    roadslidenextend: {
       control: {
         type: null,
       },
     },
-    roadSlidePrevEnd: {
+    roadslideprevend: {
       control: {
         type: null,
       },
     },
-    roadSlideTransitionStart: {
+    roadslidetransitionstart: {
       control: {
         type: null,
       },
     },
-    roadSlideTransitionEnd: {
+    roadslidetransitionend: {
       control: {
         type: null,
       },
     },
-    roadSlideDrag: {
+    roadslidedrag: {
       control: {
         type: null,
       },
     },
-    roadSlideReachStart: {
+    roadslidereachstart: {
       control: {
         type: null,
       },
     },
-    roadSlideReachEnd: {
+    roadslidereachend: {
       control: {
         type: null,
       },
     },
-    roadSlideTouchStart: {
+    roadslidetouchstart: {
       control: {
         type: null,
       },
     },
-    roadSlideTouchEnd: {
+    roadslidetouchend: {
       control: {
         type: null,
       },

package/dist/collection/components/checkbox/checkbox.js

@@ -41,13 +41,19 @@ export class Checkbox {
       this.checked = !this.checked;
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
   }
   checkedChanged(isChecked) {
+    this.roadchange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
     this.roadChange.emit({
       checked: isChecked,
       value: this.value,
@@ -239,8 +245,8 @@ export class Checkbox {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -253,15 +259,66 @@ export class Checkbox {
         "resolved": "{ checked: boolean; value: string | null | undefined; }",
         "references": {}
       }
+    }, {
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    checked: boolean,\n    value: string | undefined | null\n  }",
+        "resolved": "{ checked: boolean; value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the checkbox has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "roadFocus",
       "name": "roadFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadblur",
+      "name": "roadblur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the checkbox has focus."
+        "text": "Emitted when the checkbox loses focus."
       },
       "complexType": {
         "original": "void",
@@ -275,8 +332,11 @@ export class Checkbox {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the checkbox loses focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

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

@@ -6,7 +6,7 @@ export default {
   component: 'road-checkbox',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
   argTypes: {
@@ -42,18 +42,18 @@ export default {
         type: null,
       },
     },
-    roadBlur: {
+    roadblur: {
       control: {
         type: null,
       },
     },
-    roadFocus: {
+    roadfocus: {
       control: {
         type: null,
       },
     },
-    roadChange: {
-      action: 'roadChange',
+    roadchange: {
+      action: 'roadchange',
       control: {
         type: null,
       },
@@ -80,7 +80,7 @@ const Template = (args) => html`
   required="${ifDefined(args.required)}"
   value="${ifDefined(args.value)}"
   checkbox-id="${ifDefined(args['checkbox-id'])}"
-  @roadChange=${event => args.roadChange(event.detail)}
+  @roadchange=${event => args.roadchange(event.detail)}
 ></road-checkbox>
 `;
 

package/dist/collection/components/counter/counter.js

@@ -11,10 +11,12 @@ export class Counter {
     this.value = 1;
     this.increase = () => {
       this.el.querySelector('input').stepUp();
+      this.roadincrease.emit();
       this.roadIncrease.emit();
     };
     this.decrease = () => {
       this.el.querySelector('input').stepDown();
+      this.roaddecrease.emit();
       this.roadDecrease.emit();
     };
   }
@@ -139,14 +141,47 @@ export class Counter {
     }
   }; }
   static get events() { return [{
+      "method": "roadincrease",
+      "name": "roadincrease",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the plus button is clicked"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
       "method": "roadIncrease",
       "name": "roadIncrease",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roaddecrease",
+      "name": "roaddecrease",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the plus button is clicked"
+        "text": "Emitted when the minus button is clicked"
       },
       "complexType": {
         "original": "void",
@@ -160,8 +195,11 @@ export class Counter {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the minus button is clicked"
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

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

@@ -6,7 +6,7 @@ export default {
   component: 'road-counter',
   parameters: {
     actions: {
-      handles: ['roadChange', 'roadInput', 'roadBlur', 'roadFocus', 'roadIncrease', 'roadDecrease'],
+      handles: ['roadchange', 'roadinput', 'roadblur', 'roadfocus', 'roadincrease', 'roaddecrease'],
     },
   },
   argTypes: {
@@ -31,12 +31,12 @@ export default {
     value: {
       control: 'number',
     },
-    roadDecrease: {
+    roaddecrease: {
       control: {
         type: null,
       },
     },
-    roadIncrease: {
+    roadincrease: {
       control: {
         type: null,
       },

package/dist/collection/components/duration/duration.css

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+}
+
+road-drawer {
+  --background: var(--background-second);
+}
+
+.duration-values {
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 2.625rem 0 2.625rem 3rem;
+  scroll-snap-type: x proximity;
+  overflow: scroll;
+}
+
+.duration-values > road-col:first-child {
+  scroll-snap-align: center;
+}
+
+.duration-values > road-col:not(:first-child) {
+  scroll-snap-align: start;
+}
+
+road-card {
+  --margin-bottom: 0;
+}
+
+road-card::part(native) {
+  padding: 1rem;
+}