@roadtrip/components 2.25.1 → 2.27.1

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

@@ -6,68 +6,92 @@ export default {
   component: 'road-plate-number',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
+  argTypes: {
+    country: {
+      options: ['FR', 'BE', 'IT', 'ES', 'PT', 'PL'],
+      control: {
+        type: 'select',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    readonly: {
+      control: 'boolean',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    motorbike: {
+      control: 'boolean',
+    },
+    value: {
+      control: 'text',
+    },
+    roadblur: {
+      control: {
+        type: null,
+      },
+    },
+    roadfocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadchange: {
+      action: 'roadchange',
+      control: {
+        type: null,
+      },
+    },
+    roadinput: {
+      action: 'roadInput',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    country: 'FR',
+    disabled: null,
+    readonly: null,
+  },
 };
 
-export const Playground = (args) => html`
+const Template = (args) => html`
 <road-plate-number
   country="${ifDefined(args.country)}"
   motorbike="${ifDefined(args.motorbike)}"
+  disabled="${ifDefined(args.disabled)}"
   placeholder="${ifDefined(args.placeholder)}"
+  readonly="${ifDefined(args.readonly)}"
   value="${ifDefined(args.value)}"
-  @roadChange=${event => args.roadChange(event.detail.value)}
-  @roadInput=${event => args.roadInput(event.target.value)}
+  @roadchange=${event => args.roadchange(event.detail.value)}
+  @roadinput=${event => args.roadinput(event.target.value)}
 ></road-plate-number>
 `;
-Playground.args = {
-  country: 'FR',
+
+export const Playground = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  value: "AA-123-AA",
 };
-Playground.argTypes = {
-  country: {
-    options: ['FR', 'BE', 'IT', 'ES', 'PT', 'PL'],
-    control: {
-      type: 'select',
-    },
-  },
-  placeholder: {
-    control: 'text',
-  },
-  motorbike: {
-    control: 'boolean',
-  },
-  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 ReadOnly = Template.bind({});
+ReadOnly.args = {
+  readonly: true,
+  value: "AA-123-AA",
 };
 
 export const MotorBike = () => html`
 <road-plate-number
   country="FR"
   motorbike="true"
-  style="width: 180px;"
+  style="width: 190px;"
 ></road-plate-number>
 `;

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

@@ -9,7 +9,7 @@ export default {
   },
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
     docs: {
       description: {
@@ -24,7 +24,7 @@ export const Playground = (args) => html`
   name="${ifDefined(args.name)}"
   label="Label of radio group" 
   error="${ifDefined(args.error)}" 
-  @roadChange=${event => args.roadChange(event.detail.value)}
+  @roadchange=${event => args.roadchange(event.detail.value)}
   asterisk="${ifDefined(args.asterisk)}"
 >
   <road-radio
@@ -78,18 +78,18 @@ Playground.argTypes = {
   'radio-id': {
     control: 'text',
   },
-  roadBlur: {
+  roadblur: {
     control: {
       type: null,
     },
   },
-  roadFocus: {
+  roadfocus: {
     control: {
       type: null,
     },
   },
-  roadChange: {
-    action: 'roadChange',
+  roadchange: {
+    action: 'roadchange',
     control: {
       type: null,
     },

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 [{

package/dist/collection/components/range/range.js

@@ -27,6 +27,7 @@ export class Range {
    * 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() {
@@ -157,8 +158,8 @@ export class Range {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -171,6 +172,24 @@ export class Range {
         "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 [{

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

@@ -23,8 +23,8 @@ export default {
     'range-id': {
       control: 'text',
     },
-    roadChange: {
-      action: 'roadChange',
+    roadchange: {
+      action: 'roadchange',
       control: {
         type: null,
       },
@@ -46,6 +46,6 @@ export const Playground = (args) => html`
     step="${ifDefined(args.step)}" 
     value="${ifDefined(args.value)}"
     show-value="${ifDefined(args['show-value'])}"
-    @roadChange=${event => args.roadChange(event.detail.value)}
+    @roadchange=${event => args.roadchange(event.detail.value)}
   ></road-range>
 `;

package/dist/collection/components/select/select.js

@@ -41,13 +41,18 @@ export class Select {
       }
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   valueChanged() {
+    this.roadchange.emit({
+      value: this.value,
+    });
     this.roadChange.emit({
       value: this.value,
     });
@@ -254,8 +259,8 @@ export class Select {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -268,15 +273,66 @@ export class Select {
         "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": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select 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 select has focus."
+        "text": "Emitted when the select loses focus."
       },
       "complexType": {
         "original": "void",
@@ -290,8 +346,11 @@ export class Select {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the select loses focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

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

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

package/dist/collection/components/select-filter/select-filter.js

@@ -27,6 +27,10 @@ export class SelectFilter {
     this.onClick = (value, label) => {
       this.el.querySelector('road-input').value = label;
       this.isOpen = false;
+      this.roadselected.emit({
+        value: value.toString(),
+        label: label,
+      });
       this.roadSelected.emit({
         value: value.toString(),
         label: label,
@@ -127,8 +131,8 @@ export class SelectFilter {
     "currentValue": {}
   }; }
   static get events() { return [{
-      "method": "roadSelected",
-      "name": "roadSelected",
+      "method": "roadselected",
+      "name": "roadselected",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -141,6 +145,24 @@ export class SelectFilter {
         "resolved": "{ value: string | null | undefined; label: string; }",
         "references": {}
       }
+    }, {
+      "method": "roadSelected",
+      "name": "roadSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+        "resolved": "{ value: string | null | undefined; label: string; }",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
@@ -149,12 +171,24 @@ export class SelectFilter {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadfocus",
+      "method": "handleFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "roadChange",
       "method": "handleChange",
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadchange",
+      "method": "handleChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "click",
       "method": "onClickOutside",

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -7,7 +7,7 @@ export default {
   component: 'road-select-filter',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
   argTypes: {
@@ -20,8 +20,8 @@ export default {
     parameters: {
       control: 'object',
     },
-    roadSelected: {
-      action: 'roadSelected',
+    roadselected: {
+      action: 'roadselected',
       control: {
         type: null,
       },
@@ -52,7 +52,7 @@ export default {
 };
 
 const Template = (args) => html`
-<road-select-filter .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadSelected=${event => args.roadSelected(event.detail)}>
+<road-select-filter .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadselected=${event => args.roadselected(event.detail)}>
   ${unsafeHTML(args[' '])}
 </road-select-filter>
 `;