@roadtrip/components 2.24.1 → 2.27.0

package/dist/collection/components/navbar-item/navbar-item.js

@@ -29,6 +29,11 @@ export class NavbarItem {
   selectTab(ev) {
     if (this.tab !== undefined) {
       if (!this.disabled) {
+        this.roadnavbaritemclick.emit({
+          tab: this.tab,
+          href: this.href,
+          selected: this.selected,
+        });
         this.roadNavbarItemClick.emit({
           tab: this.tab,
           href: this.href,
@@ -188,6 +193,24 @@ export class NavbarItem {
     }
   }; }
   static get events() { return [{
+      "method": "roadnavbaritemclick",
+      "name": "roadnavbaritemclick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "Emitted when the tab bar is clicked"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "roadNavbarItemClick",
       "name": "roadNavbarItemClick",
       "bubbles": true,
@@ -198,7 +221,7 @@ export class NavbarItem {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Emitted when the tab bar is clicked"
+        "text": ""
       },
       "complexType": {
         "original": "any",
@@ -213,5 +236,11 @@ export class NavbarItem {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadnavbarchanged",
+      "method": "onNavbarChanged",
+      "target": "window",
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/plate-number/plate-number.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Event, Watch } from '@stencil/core';
+import { Component, h, Prop, Event, Watch } from '@stencil/core';
 import { licensePlateStarEu } from '../../../icons';
 export class PlateNumber {
   constructor() {
@@ -47,12 +47,15 @@ export class PlateNumber {
       if (input) {
         this.value = input.value.toUpperCase() || '';
       }
+      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
@@ -60,6 +63,7 @@ export class PlateNumber {
    * Update the native input element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
   }
   getValue() {
@@ -70,18 +74,17 @@ export class PlateNumber {
   render() {
     const value = this.getValue();
     const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-    return (h(Host, null,
-      h("road-input-group", { class: `plate-number ${motorbikeClass}` },
-        h("label", { slot: "prepend", class: "input-group-prepend" },
-          h("div", { class: "plate-number-start" },
-            h("road-icon", { class: "plate-number-icon", icon: licensePlateStarEu }),
-            h("div", { class: "plate-number-location" }, this.countries
-              .filter(item => item.country === this.country)[0].letter))),
-        this.motorbike
-          ? (h("textarea", { class: "form-control plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
-          : (h("input", { class: "plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })),
-        h("label", { slot: "append", class: "input-group-append" },
-          h("div", { class: "plate-number-end" })))));
+    return (h("road-input-group", { class: `plate-number ${motorbikeClass}` },
+      h("label", { slot: "prepend", class: "input-group-prepend" },
+        h("div", { class: "plate-number-start" },
+          h("road-icon", { class: "plate-number-icon", icon: licensePlateStarEu }),
+          h("div", { class: "plate-number-location" }, this.countries
+            .filter(item => item.country === this.country)[0].letter))),
+      this.motorbike
+        ? (h("textarea", { class: "form-control plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
+        : (h("input", { class: "plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })),
+      h("label", { slot: "append", class: "input-group-append" },
+        h("div", { class: "plate-number-end" }))));
   }
   static get is() { return "road-plate-number"; }
   static get encapsulation() { return "scoped"; }
@@ -165,8 +168,8 @@ export class PlateNumber {
     }
   }; }
   static get events() { return [{
-      "method": "roadInput",
-      "name": "roadInput",
+      "method": "roadinput",
+      "name": "roadinput",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -184,8 +187,30 @@ export class PlateNumber {
         }
       }
     }, {
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadInput",
+      "name": "roadInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "KeyboardEvent",
+        "resolved": "KeyboardEvent",
+        "references": {
+          "KeyboardEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -198,15 +223,66 @@ export class PlateNumber {
         "resolved": "{ 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    value: string | undefined | null;\n  }",
+        "resolved": "{ value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadblur",
+      "name": "roadblur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "roadBlur",
       "name": "roadBlur",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the input loses focus."
+        "text": "Emitted when the input has focus."
       },
       "complexType": {
         "original": "void",
@@ -220,8 +296,11 @@ export class PlateNumber {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the input has focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/plate-number/plate-number.stories.js

@@ -1,24 +1,25 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/PlateNumber',
   component: 'road-plate-number',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
 };
 
 export const Playground = (args) => html`
-  <road-plate-number
-    country="${args.country}"
-    .motorbike=${args.motorbike}
-    .placeholder=${args.placeholder}
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    @roadInput=${event => args.roadInput(event.target.value)}
-  >
-  </road-plate-number>
+<road-plate-number
+  country="${ifDefined(args.country)}"
+  motorbike="${ifDefined(args.motorbike)}"
+  placeholder="${ifDefined(args.placeholder)}"
+  value="${ifDefined(args.value)}"
+  @roadchange=${event => args.roadchange(event.detail.value)}
+  @roadinput=${event => args.roadinput(event.target.value)}
+></road-plate-number>
 `;
 Playground.args = {
   country: 'FR',
@@ -36,19 +37,37 @@ Playground.argTypes = {
   motorbike: {
     control: 'boolean',
   },
-  roadChange: {
-    action: 'roadChange',
+  value: {
+    control: 'text',
+  },
+  roadblur: {
+    control: {
+      type: null,
+    },
+  },
+  roadfocus: {
+    control: {
+      type: null,
+    },
+  },
+  roadchange: {
+    action: 'roadchange',
+    control: {
+      type: null,
+    },
   },
   roadInput: {
     action: 'roadInput',
+    control: {
+      type: null,
+    },
   },
 };
 
 export const MotorBike = () => html`
-  <road-plate-number
-    country="FR"
-    motorbike
-    style="width: 180px;"
-  >
-  </road-plate-number>
+<road-plate-number
+  country="FR"
+  motorbike="true"
+  style="width: 180px;"
+></road-plate-number>
 `;

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

@@ -9,7 +9,7 @@ export const Playground = ({ value, color }) => html`
   <road-progress value="${value}" color="${color}"></road-progress>
 `;
 Playground.args = {
-  value: '25',
+  value: 25,
   color: 'info',
 };
 Playground.argTypes = {
@@ -29,7 +29,7 @@ Playground.argTypes = {
 };
 
 export const Value = () => html`
-  <road-progress value="0"></road-progress>
+<road-progress value="0"></road-progress>
 
 <br>
 
@@ -49,7 +49,7 @@ export const Value = () => html`
 `;
 
 export const color = () => html`
-  <road-progress value="80" color="info"></road-progress>
+<road-progress value="80" color="info"></road-progress>
 
 <br>
 

package/dist/collection/components/radio/radio.js

@@ -41,9 +41,11 @@ export class Radio {
       }
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
   }
@@ -248,14 +250,47 @@ export class Radio {
     "checked": {}
   }; }
   static get events() { return [{
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the radio button 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 radio button has focus."
+        "text": "Emitted when the radio button loses focus."
       },
       "complexType": {
         "original": "void",
@@ -269,8 +304,11 @@ export class Radio {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the radio button loses focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",
@@ -285,6 +323,12 @@ export class Radio {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadchange",
+      "method": "onRoadChangedChanged",
+      "target": "window",
+      "capture": false,
+      "passive": false
     }]; }
 }
 let radioIds = 0;

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

@@ -5,46 +5,47 @@ export default {
   title: 'Forms/Radio',
   component: 'road-radio',
   subcomponents: {
-    RoadRadioGroup: 'road-radio-group'
+    'road-radio-group': 'road-radio-group',
   },
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
     docs: {
       description: {
-        component: 'A radio is used in a `radio-group`. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.'
-      }
-    }
+        component: 'A radio is used in a `radio-group`. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.',
+      },
+    },
   },
 };
 
 export const Playground = (args) => html`
-  <road-radio-group 
-    name="${ifDefined(args.name)}"
-    label="Label of radio group" 
-    error="${ifDefined(args.error)}" 
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    asterisk="${args.asterisk}"
-  >
-    <road-radio
-      disabled="${args.disabled}"
-      required="${args.required}"
-      label="${args.label}"
-      inverse="${args.inverse}"
-      inline="${args.inline}"
-      value="${args.value}"
-    ></road-radio>
-  </road-radio-group>
+<road-radio-group 
+  name="${ifDefined(args.name)}"
+  label="Label of radio group" 
+  error="${ifDefined(args.error)}" 
+  @roadchange=${event => args.roadchange(event.detail.value)}
+  asterisk="${ifDefined(args.asterisk)}"
+>
+  <road-radio
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    label="${ifDefined(args.label)}"
+    inverse="${ifDefined(args.inverse)}"
+    inline="${ifDefined(args.inline)}"
+    value="${ifDefined(args.value)}"
+    radio-id="${ifDefined(args['radio-id'])}"
+  ></road-radio>
+</road-radio-group>
 `;
 Playground.args = {
-  disabled: false,
-  required: false,
-  inverse: false,
-  inline: false,
+  disabled: null,
+  required: null,
+  inverse: null,
+  inline: undefined,
   label: 'Label',
   value: 'on',
-  asterisk: false
+  asterisk: null,
 };
 Playground.argTypes = {
   disabled: {
@@ -74,13 +75,29 @@ Playground.argTypes = {
   value: {
     control: 'text',
   },
-  roadChange: {
-    action: 'roadChange',
+  'radio-id': {
+    control: 'text',
+  },
+  roadblur: {
+    control: {
+      type: null,
+    },
+  },
+  roadfocus: {
+    control: {
+      type: null,
+    },
+  },
+  roadchange: {
+    action: 'roadchange',
+    control: {
+      type: null,
+    },
   },
 };
 
 export const Inline = () => html`
-  <road-radio-group name="NameOfTheField" value="1">
+<road-radio-group name="NameOfTheField" value="1">
   <road-radio label="Label1" value="1"></road-radio>
   <road-radio label="Label2" value="2"></road-radio>
   <road-radio label="Label3" value="3"></road-radio>
@@ -88,7 +105,7 @@ export const Inline = () => html`
 `;
 
 export const Stacked = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio label="Label1" value="1" inline="false"></road-radio>
   <road-radio label="Label2" value="2" inline="false"></road-radio>
   <road-radio label="Label3" value="3" inline="false"></road-radio>
@@ -96,7 +113,7 @@ export const Stacked = () => html`
 `;
 
 export const Inverse = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio inverse label="Label1" value="1" inline="false"></road-radio>
   <road-radio inverse label="Label2" value="2" inline="false"></road-radio>
   <road-radio inverse label="Label3" value="3" inline="false"></road-radio>
@@ -104,7 +121,7 @@ export const Inverse = () => html`
 `;
 
 export const Disabled = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio label="Label1" value="1" disabled></road-radio>
   <road-radio label="Label2" value="2" disabled></road-radio>
   <road-radio label="Label3" value="3" disabled></road-radio>
@@ -112,7 +129,7 @@ export const Disabled = () => html`
 `;
 
 export const Error = () => html`
-  <road-radio-group name="NameOfTheField" error="Check the radio to continue">
+<road-radio-group name="NameOfTheField" error="Check the radio to continue">
   <road-radio label="Label1" value="1"></road-radio>
   <road-radio label="Label2" value="2"></road-radio>
   <road-radio label="Label3" value="3"></road-radio>

package/dist/collection/components/radio-group/radio-group.js

@@ -40,6 +40,7 @@ export class RadioGroup {
     };
   }
   valueChanged(value) {
+    this.roadchange.emit({ value });
     this.roadChange.emit({ value });
   }
   errorChanged() {
@@ -218,8 +219,8 @@ export class RadioGroup {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -232,6 +233,24 @@ export class RadioGroup {
         "resolved": "{ 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    value: string | undefined | null\n  }",
+        "resolved": "{ value: string | null | undefined; }",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{