@roadtrip/components 2.24.1 → 2.27.0

package/dist/collection/components/tab-button/tab-button.js

@@ -33,6 +33,11 @@ export class TabButton {
   }
   selectTab(ev) {
     if (this.tab !== undefined) {
+      this.roadtabbuttonclick.emit({
+        tab: this.tab,
+        href: this.href,
+        selected: this.selected,
+      });
       this.roadTabButtonClick.emit({
         tab: this.tab,
         href: this.href,
@@ -206,6 +211,24 @@ export class TabButton {
     }
   }; }
   static get events() { return [{
+      "method": "roadtabbuttonclick",
+      "name": "roadtabbuttonclick",
+      "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": "roadTabButtonClick",
       "name": "roadTabButtonClick",
       "bubbles": true,
@@ -216,7 +239,7 @@ export class TabButton {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Emitted when the tab bar is clicked"
+        "text": ""
       },
       "complexType": {
         "original": "any",
@@ -231,5 +254,11 @@ export class TabButton {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadTabbarchanged",
+      "method": "onTabBarChanged",
+      "target": "window",
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/table/table.js

@@ -1,11 +1,10 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * @slot  - Content of table, it should be an html table (https://developer.mozilla.org/fr/docs/Web/HTML/Element/table).
  */
 export class Table {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h("slot", null));
   }
   static get is() { return "road-table"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1,13 +1,16 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Layout/Table',
   component: 'road-table',
-};
-
-export const Default = () => html`
-  <road-table>
-  <table class="table">
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+  },
+  args: {
+    ' ': `<table class="table">
     <thead>
       <tr>
         <th scope="col">Title</th>
@@ -37,6 +40,12 @@ export const Default = () => html`
         <td>Cell</td>
       </tr>
     </tbody>
-  </table>
+  </table>`,
+  },
+};
+
+export const Playground = (args) => html`
+  <road-table>
+  ${unsafeHTML(args[' '])}
 </road-table>
 `;

package/dist/collection/components/tabs/tabs.js

@@ -103,14 +103,47 @@ export class Tabs {
     "selectedTab": {}
   }; }
   static get events() { return [{
+      "method": "roadtabswillchange",
+      "name": "roadtabswillchange",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the navigation is about to transition to a new component."
+      },
+      "complexType": {
+        "original": "{tab: string}",
+        "resolved": "{ tab: string; }",
+        "references": {}
+      }
+    }, {
       "method": "roadTabsWillChange",
       "name": "roadTabsWillChange",
       "bubbles": false,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{tab: string}",
+        "resolved": "{ tab: string; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadtabsdidchange",
+      "name": "roadtabsdidchange",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the navigation is about to transition to a new component."
+        "text": "Emitted when the navigation has finished transitioning to a new component."
       },
       "complexType": {
         "original": "{tab: string}",
@@ -124,8 +157,11 @@ export class Tabs {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the navigation has finished transitioning to a new component."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "{tab: string}",

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

@@ -1,27 +1,88 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Navigation/Tabs',
   component: 'road-tabs',
   subcomponents: {
-    RoadTabBar: 'road-tab-bar',
-    RoadTabButton: 'road-tab-button',
-    RoadTab: 'road-tab',
+    'road-tab-bar': 'road-tab-bar',
+    'road-tab-button': 'road-tab-button',
+    'road-tab': 'road-tab',
   },
   parameters: {
     actions: {
-      handles: ['roadTabButtonClick'],
+      handles: ['roadtabbuttonclick'],
     },
     backgrounds: {
       default: 'grey',
     },
-    layout: 'fullscreen',
+  },
+  argTypes: {
+    top: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    roadtabsdidchange: {
+      control: {
+        type: null,
+      },
+    },
+    roadtabswillchange: {
+      control: {
+        type: null,
+      },
+    },
+    getSelected : {
+      description: 'Get the currently selected tab.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getSelected() => Promise<string | undefined>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    getTab : {
+      description: 'Get a specific tab by the value of its `tab` property or an element reference.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getTab(tab: string | HTMLRoadTabElement) => Promise<HTMLRoadTabElement | undefined>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    select : {
+      description: 'Select a tab by the value of its `tab` property or an element reference.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'select(tab: string | HTMLRoadTabElement) => Promise<boolean>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
   },
 };
 
-export const Default = () => html`
+const Template = (args) => html`
 <road-tabs>
-  <road-tab-bar slot="top" selected-tab="tab-description">
+  ${unsafeHTML(args.top)}
+  ${unsafeHTML(args[' '])}
+</road-tabs>
+`;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  top: `<road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
     </road-tab-button>
@@ -29,21 +90,19 @@ export const Default = () => html`
     <road-tab-button tab="tab-services">
       <road-label>Service</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-description">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-description">
     Description
   </road-tab>
 
   <road-tab tab="tab-services">
     Services
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Scrollable = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" selected-tab="tab-description">
+export const Scrollable = Template.bind({});
+Scrollable.args = {
+  top: `<road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
     </road-tab-button>
@@ -59,9 +118,8 @@ export const Scrollable = () => html`
     <road-tab-button tab="tab-reviews">
       <road-label>Reviews</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-description">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-description">
     Description
   </road-tab>
 
@@ -75,13 +133,12 @@ export const Scrollable = () => html`
 
   <road-tab tab="tab-reviews">
     Reviews
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Center = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" center>
+export const Center = Template.bind({});
+Center.args = {
+  top: `<road-tab-bar slot="top" center="true">
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
     </road-tab-button>
@@ -89,21 +146,19 @@ export const Center = () => html`
     <road-tab-button tab="tab-map">
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Expand = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const Expand = Template.bind({});
+Expand.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
     </road-tab-button>
@@ -111,21 +166,19 @@ export const Expand = () => html`
     <road-tab-button tab="tab-map">
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const LeadingIcon = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const LeadingIcon = Template.bind({});
+LeadingIcon.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-list">
       <road-icon name="garage"></road-icon>
       <road-label>List</road-label>
@@ -135,21 +188,19 @@ export const LeadingIcon = () => html`
       <road-icon name="location-pin-all"></road-icon>
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const TopIcon = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const TopIcon = Template.bind({});
+TopIcon.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-shops" layout="icon-top">
       <road-icon name="shop"></road-icon>
       <road-label>Shops</road-label>
@@ -164,9 +215,8 @@ export const TopIcon = () => html`
       <road-icon name="factory"></road-icon>
       <road-label>Factories</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-shops">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-shops">
     Shops
   </road-tab>
 
@@ -176,6 +226,5 @@ export const TopIcon = () => html`
 
   <road-tab tab="tab-factories">
     Factories
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};

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

@@ -5,13 +5,14 @@ export default {
   component: 'road-text',
 };
 
-export const Playground = ({color}) => html`
-  <road-text color="${color}">
-    Text
-  </road-text>
+export const Playground = (args) => html`
+<road-text color="${args.color}">
+  ${args[' ']}
+</road-text>
 `;
 Playground.args = {
   color: 'info',
+  ' ': 'Text',
 };
 Playground.argTypes = {
   color: {
@@ -20,4 +21,7 @@ Playground.argTypes = {
       type: 'radio',
     },
   },
+  ' ': {
+    control: 'text',
+  },
 };

package/dist/collection/components/textarea/textarea.js

@@ -2,7 +2,7 @@ import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
 export class Textarea {
   constructor() {
     /**
-     * The id of input
+     * The id of textarea
      */
     this.textareaId = `road-textarea-${textareaIds++}`;
     /**
@@ -10,11 +10,11 @@ export class Textarea {
      */
     this.autocapitalize = 'none';
     /**
-     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     * This Boolean attribute lets you specify that a form control should have focus when the page loads.
      */
     this.autofocus = false;
     /**
-     * If `true`, the user cannot interact with the input.
+     * If `true`, the user cannot interact with the textarea.
      */
     this.disabled = false;
     /**
@@ -34,7 +34,7 @@ export class Textarea {
      */
     this.spellcheck = false;
     /**
-     * The value of the input.
+     * The value of the textarea.
      */
     this.value = '';
     /**
@@ -46,19 +46,23 @@ export class Textarea {
       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();
     };
   }
   /**
-   * Update the native input element when the value changes
+   * Update the native textarea element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value });
     this.roadChange.emit({ value: this.value });
   }
   getValue() {
@@ -95,7 +99,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The id of input"
+        "text": "The id of textarea"
       },
       "attribute": "textarea-id",
       "reflect": false,
@@ -131,7 +135,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+        "text": "This Boolean attribute lets you specify that a form control should have focus when the page loads."
       },
       "attribute": "autofocus",
       "reflect": false,
@@ -149,7 +153,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If `true`, the user cannot interact with the input."
+        "text": "If `true`, the user cannot interact with the textarea."
       },
       "attribute": "disabled",
       "reflect": false,
@@ -253,7 +257,7 @@ export class Textarea {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Instructional text that shows before the input has a value."
+        "text": "Instructional text that shows before the textarea has a value."
       },
       "attribute": "placeholder",
       "reflect": false
@@ -375,7 +379,7 @@ export class Textarea {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The value of the input."
+        "text": "The value of the textarea."
       },
       "attribute": "value",
       "reflect": false,
@@ -418,8 +422,8 @@ export class Textarea {
     }
   }; }
   static get events() { return [{
-      "method": "roadInput",
-      "name": "roadInput",
+      "method": "roadinput",
+      "name": "roadinput",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -437,8 +441,30 @@ export class Textarea {
         }
       }
     }, {
-      "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,
@@ -451,15 +477,66 @@ export class Textarea {
         "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 textarea 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 textarea has focus."
       },
       "complexType": {
         "original": "void",
@@ -473,8 +550,11 @@ export class Textarea {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the input has focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",