@roadtrip/components 2.25.1 → 2.27.1

package/dist/collection/components/input/input.js

@@ -76,22 +76,27 @@ export class Input {
       if (input) {
         this.value = input.value || '';
       }
+      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   debounceChanged() {
+    this.roadchange = debounceEvent(this.roadchange, this.debounce);
     this.roadChange = debounceEvent(this.roadChange, this.debounce);
   }
   /**
    * 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() {
@@ -570,8 +575,8 @@ export class Input {
     }
   }; }
   static get events() { return [{
-      "method": "roadInput",
-      "name": "roadInput",
+      "method": "roadinput",
+      "name": "roadinput",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -589,8 +594,30 @@ export class Input {
         }
       }
     }, {
-      "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,
@@ -603,15 +630,66 @@ export class Input {
         "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",
@@ -625,8 +703,11 @@ export class Input {
       "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/input/input.stories.js

@@ -6,7 +6,7 @@ export default {
   component: 'road-input',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
   argTypes: {
@@ -103,24 +103,24 @@ export default {
     'input-id': {
       control: 'text',
     },
-    roadBlur: {
+    roadblur: {
       control: {
         type: null,
       },
     },
-    roadFocus: {
+    roadfocus: {
       control: {
         type: null,
       },
     },
-    roadChange: {
-      action: 'roadChange',
+    roadchange: {
+      action: 'roadchange',
       control: {
         type: null,
       },
     },
-    roadInput: {
-      action: 'roadInput',
+    roadinput: {
+      action: 'roadinput',
       control: {
         type: null,
       },
@@ -194,8 +194,8 @@ const Template = (args) => html`
     inputmode="${ifDefined(args.inputmode)}"
     readonly="${ifDefined(args.readonly)}"
     debounce="${ifDefined(args.debounce)}"
-    @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-input>
 `;
 

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

@@ -6,6 +6,9 @@ import './../../utils/polyfill';
 export class Navbar {
   selectedTabChanged() {
     if (this.selectedTab !== undefined) {
+      this.roadnavbarchanged.emit({
+        tab: this.selectedTab,
+      });
       this.roadNavbarChanged.emit({
         tab: this.selectedTab,
       });
@@ -49,6 +52,24 @@ export class Navbar {
     }
   }; }
   static get events() { return [{
+      "method": "roadnavbarchanged",
+      "name": "roadnavbarchanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "roadNavbarChanged",
       "name": "roadNavbarChanged",
       "bubbles": true,
@@ -77,5 +98,11 @@ export class Navbar {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadnavbaritemclick",
+      "method": "onNavbarChanged",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -10,7 +10,7 @@ export default {
   },
   parameters: {
     actions: {
-      handles: ['roadNavbarItemClick'],
+      handles: ['roadnavbaritemclick'],
     },
     backgrounds: {
       default: 'grey',

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.css

@@ -67,13 +67,15 @@
   display: block;
   height: 3rem;
   margin: 0;
-  font-family: Oswald, sans-serif;
-  font-size: 2rem;
+  font-family: var(--font, sans-serif);
+  font-size: 1.75rem;
+  font-weight: 700;
   color: var(--text);
   text-align: center;
   background: var(--white);
   border: 1px solid var(--border-form);
   border-radius: 0;
+  outline: 0;
   box-shadow: none;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -85,7 +87,24 @@
   opacity: 1;
 }
 
-.plate-number-input:focus {
+/**
+ * Disabled state
+ */
+
+.plate-number-input:disabled,
+.plate-number-input[readonly] {
+  color: var(--text);
+  cursor: not-allowed;
+  background: var(--background);
+  border-color: var(--background);
+  opacity: 1;
+}
+
+/**
+ * Focus state
+ */
+
+.plate-number-input:not([readonly]):focus {
   border-color: var(--secondary);
   outline: 0;
 }

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

@@ -38,6 +38,14 @@ export class PlateNumber {
      * country of the plate
      */
     this.country = 'FR';
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.readonly = false;
     /**
      * The value of the input.
      */
@@ -47,12 +55,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 +71,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() {
@@ -77,8 +89,8 @@ export class PlateNumber {
           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("textarea", { class: "form-control plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
+        : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, 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" }))));
   }
@@ -110,6 +122,24 @@ export class PlateNumber {
       "reflect": false,
       "defaultValue": "'FR'"
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot interact with the input."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,
@@ -127,6 +157,24 @@ export class PlateNumber {
       "attribute": "placeholder",
       "reflect": false
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot modify the value."
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "value": {
       "type": "any",
       "mutable": true,
@@ -164,8 +212,8 @@ export class PlateNumber {
     }
   }; }
   static get events() { return [{
-      "method": "roadInput",
-      "name": "roadInput",
+      "method": "roadinput",
+      "name": "roadinput",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -183,8 +231,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,
@@ -197,15 +267,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",
@@ -219,8 +340,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",