@roadtrip/components 3.32.3 → 3.32.5

package/dist/collection/components/segmented-buttons/segmented-buttons.stories.js

@@ -20,9 +20,11 @@ export default {
   },
   argTypes: {
     top: {
+      description: "Content is placed at the top of the screen.",
       control: 'text',
     },
     ' ': {
+      description: "Content is placed between the named slots if provided without a slot.",
       control: 'text',
     },
     roadtabsdidchange: {

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

@@ -11,49 +11,62 @@ export default {
   },
   argTypes: {
     disabled: {
+      description: "If `true`, the user cannot interact with the select.",
       control: 'boolean',
     },
     required: {
+      description: "If `true`, the user must fill in a value before submitting a form.",
       control: 'boolean',
     },
     autofocus: {
+      description: "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
       control: 'boolean',
     },
     error: {
+      description: "Error message for the field",
       control: 'text',
     },
     label: {
+      description: "Label for the field",
       control: 'text',
     },
     name: {
+      description: "The name of the control, which is submitted with the form data.",
       control: 'text',
     },
     size: {
+      description: "The sizes of the input.",
       control: 'number',
     },
     sizes: {
+      description: "If the control is presented as a scrolling list box (e.g. when multiple is specified),\nthis attribute represents the number of rows in the list that should be visible at one time.",
       options: ['md', 'lg', 'xl'],
       control: {
         type: 'select',
       },
     },
     'select-id': {
+      description: "The id of select",
       control: 'text',
     },
     value: {
+      description: "the value of the select.",
       control: 'text',
     },
     roadblur: {
+      description: "Emitted when the select loses focus.",
       control: {
         type: null,
       },
     },
     roadfocus: {
+      description: "Emitted when the select has focus.",
       control: {
         type: null,
       },
     },
     roadchange: {
+      description: "Emitted when the value has changed.",
       action: 'roadchange',
       control: {
         type: null,

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

@@ -12,15 +12,19 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "Input element for the widget, it should be a road-input element.",
       control: 'text',
     },
     'only-select': {
+      description: "If `false`, the user can submit custom value",
       control: 'boolean',
     },
     'is-active': {
+      description: "If `true`, add class Active",
       control: 'boolean',
     },
     parameters: {
+      description: "Options to pass to the fuse.js instance.\nSee https://fusejs.io/api/options.html for valid options",
       control: 'object',
     },
     roadselected: {
@@ -30,6 +34,7 @@ export default {
       },
     },
     '--margin-top': {
+      description: "margin top of the select-filter (should equal the height of the field)",
       table: {
         defaultValue: { summary: '3rem' },
       },

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

@@ -5,6 +5,7 @@ export default {
   component: 'road-skeleton',
   argTypes: {
     '--background-light': {
+      description: "base light grey color",
       table: {
         defaultValue: { summary: 'var(--road-disabled)' },
       },
@@ -13,6 +14,7 @@ export default {
       },
     },
     '--background-dark': {
+      description: "second grey color to see the animation",
       table: {
         defaultValue: { summary: 'rgb(137, 143, 160, 0.4)' },
       },

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

@@ -7,12 +7,14 @@ export default {
   component: 'road-spinner',
   argTypes: {
     size: {
+      description: "The button size.",
       options: ['small', 'medium', 'large', 'xl'],
       control: {
         type: 'select',
       },
     },
     color: {
+      description: "The color spinner.",
       options: ['default', 'light', 'dark'],
       control: {
         type: 'select',

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

@@ -6,6 +6,7 @@ export default {
   component: 'road-table',
   argTypes: {
     ' ': {
+      description: "Content of table, it should be an html table (https://developer.mozilla.org/fr/docs/Web/HTML/Element/table).",
       control: 'text',
     },
   },

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

@@ -19,9 +19,11 @@ export default {
   },
   argTypes: {
     top: {
+      description: "Content is placed at the top of the screen.",
       control: 'text',
     },
     ' ': {
+      description: "Content is placed between the named slots if provided without a slot.",
       control: 'text',
     },
     roadtabsdidchange: {

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

@@ -12,15 +12,18 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "Content of the tag.",
       control: 'text',
     },
     color: {
+      description: "The color to use from your application's color palette.",
       options: ['grey', 'yellow', 'red', 'violet', 'blue', 'green'],
       control: {
         type: 'select',
       },
     },
     contrast: {
+      description: "Set to `true` for a contrast tag, for example on a gryy surface",
       control: 'boolean',
     },
   },

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

@@ -16,12 +16,14 @@ Playground.args = {
 };
 Playground.argTypes = {
   color: {
+    description: "Color of the text.",
     options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger', 'default', 'default-second', 'disabled', 'white'],
     control: {
       type: 'radio',
     },
   },
   ' ': {
+    description: "Content of the text.",
     control: 'text',
   },
 };

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

@@ -11,109 +11,135 @@ export default {
   },
   argTypes: {
     disabled: {
+      description: "If `true`, the user cannot interact with the textarea.",
       control: 'boolean',
     },
     readonly: {
+      description: "If `true`, the user cannot modify the value.",
       control: 'boolean',
     },
     required: {
+      description: "If `true`, the user must fill in a value before submitting a form.",
       control: 'boolean',
     },
     autofocus: {
+      description: "This Boolean attribute lets you specify that a form control should have focus when the page loads.",
       control: 'boolean',
     },
     spellcheck: {
+      description: "If `true`, the element will have its spelling and grammar checked.",
       control: 'boolean',
     },
     resize: {
+      description: "If `false`, to disabled resize.",
       control: 'boolean',
     },
     error: {
+      description: "Error message for the field",
       control: 'text',
     },
     helper: {
+      description: "Helper message for the field",
       control: 'text',
     },
     label: {
+      description: "Label for the field",
       control: 'text',
     },
     name: {
+      description: "The name of the control, which is submitted with the form data.",
       control: 'text',
     },
     placeholder: {
+      description: "Instructional text that shows before the textarea has a value.",
       control: 'text',
     },
     minlength: {
+      description: "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
       control: 'number',
     },
     maxlength: {
+      description: "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
       control: 'number',
     },
     value: {
+      description: "The value of the textarea.",
       control: 'text',
     },
     sizes: {
+      description: "The sizes of the input.",
       options: ['lg', 'xl'],
       control: {
         type: 'select',
       },
     },
     autocapitalize: {
+      description: "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.",
       options: ['on', 'off'],
       control: {
         type: 'select',
       },
     },
     enterkeyhint: {
+      description: "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
       options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
       control: {
         type: 'select',
       },
     },
     inputmode: {
+      description: "A hint to the browser for which keyboard to display.\nThis attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.",
       options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
       control: {
         type: 'select',
       },
     },
     rows: {
+      description: "The number of rows of the control.",
       control: {
         type: 'number',
         min: 0,
       },
     },
     cols: {
+      description: "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.",
       control: {
         type: 'number',
         min: 0,
       },
     },
     'textarea-id' : {
+      description: "The id of textarea",
       control: 'text',
     },
     wrap: {
+      description: "Indicates how the control wraps text.",
       options: ['hard', 'off', 'soft'],
       control: {
         type: 'select',
       },
     },
     roadblur: {
+      description: "Emitted when the textarea loses focus.",
       control: {
         type: null,
       },
     },
     roadfocus: {
+      description: "Emitted when the textarea has focus.",
       control: {
         type: null,
       },
     },
     roadchange: {
+      description: "Emitted when the value has changed.",
       action: 'roadchange',
       control: {
         type: null,
       },
     },
     roadinput: {
+      description: "Emitted when a keyboard input occurred.",
       action: 'roadinput',
       control: {
         type: null,

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

@@ -16,27 +16,33 @@ export default {
   },
   argTypes: {
     'is-open': {
+      description: "Set `open` propertie to `true` to open the toast",
       control: 'boolean',
     },
     color: {
+      description: "Set the color of the toast. e.g. info, success, warning, danger",
       options: ['info', 'success', 'warning', 'danger'],
       control: {
         type: 'radio',
       },
     },
     label: {
+      description: "Text display in the toast",
       control: 'text',
     },
     timeout: {
+      description: "How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\nuntil `close()` is called.",
       control: 'number',
       min: 0,
     },
     close: {
+      description: "Indicate when closing the toast",
       control: {
         type: null,
       },
     },
     progress: {
+      description: "the progress bar in the toast.\ncolor=\"info\" for Info\ncolor=\"success\" for success\ncolor=\"warning\" for warning\ncolor=\"danger\" for danger",
       control: 'text',
     },
   },

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

@@ -11,52 +11,66 @@ export default {
   },
   argTypes: {
     checked: {
+      description: "If `true`, the toggle is checked.",
       control: 'boolean',
     },
     disabled: {
+      description: "If `true`, the user cannot interact with the toggle.",
       control: 'boolean',
     },
     label: {
+      description: "Label for the field",
       control: 'text',
     },
     name: {
+      description: "The name of the control, which is submitted with the form data.",
       control: 'text',
     },
     'toggle-id': {
+      description: "The id of toggle",
       control: 'text',
     },
     value: {
+      description: "Value the form will get",
       control: 'text',
     },
     off: {
+      description: "Text display for \"`off`\" state in the toggle lever",
       control: 'text',
     },
     on: {
+      description: "Text display for \"`on`\" state in the toggle lever",
       control: 'text',
     },
     'has-left-label': {
+      description: "If `true`, the label is at left of the toggle",
       control: 'boolean',
     },
     'is-spaced': {
+      description: "Add space between label and toggle element",
       control: 'boolean',
     },
     roadblur: {
+      description: "Emitted when the toggle loses focus.",
       control: {
         type: null,
       },
     },
     roadfocus: {
+      description: "Emitted when the toggle has focus.",
       control: {
         type: null,
       },
     },
     roadchange: {
+      description: "Emitted when the checked property has changed.",
       action: 'roadchange',
       control: {
         type: null,
       },
     },
     '--toggle-lever-width': {
+      description: "width of the lever",
       table: {
         defaultValue: { summary: '4.5rem' },
       },

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

@@ -16,24 +16,30 @@ export default {
   },
   argTypes: {
     color: {
+      description: "Background color of the toolbar",
       options: ['primary', 'secondary'],
       control: {
         type: 'radio',
       },
     },
     start: {
+      description: "Content is placed to the left of the toolbar text and left to primery slot if provided.",
       control: 'text',
     },
     primary: {
+      description: "Content is placed to the left of the toolbar text.",
       control: 'text',
     },
     ' ': {
+      description: "Content is placed between the named slots if provided without a slot.",
       control: 'text',
     },
     secondary: {
+      description: "Content is placed to the right of the toolbar text.",
       control: 'text',
     },
     end: {
+      description: "Content is placed to the right of the toolbar text and right to secondary slot if provided.",
       control: 'text',
     },
   },

package/dist/collection/components/toolbar-v2/toolbar-v2.stories.js

@@ -16,18 +16,23 @@ export default {
   },
   argTypes: {
     start: {
+      description: "Content is placed to the left of the toolbar text and left to primery slot if provided.",
       control: 'text',
     },
     primary: {
+      description: "Content is placed to the left of the toolbar text.",
       control: 'text',
     },
     ' ': {
+      description: "Content is placed between the named slots if provided without a slot.",
       control: 'text',
     },
     secondary: {
+      description: "Content is placed to the right of the toolbar text.",
       control: 'text',
     },
     end: {
+      description: "Content is placed to the right of the toolbar text and right to secondary slot if provided.",
       control: 'text',
     },
   },

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

@@ -28,33 +28,40 @@ Playground.args = {
 };
 Playground.argTypes = {
   'is-open': {
+    description: "Indicates whether or not the tooltip is open. You can use this or the open/close methods.",
     control: 'boolean',
   },
   position: {
+    description: "The position of the tooltip.",
     options: ['top', 'left', 'bottom', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
     control: {
       type: 'radio',
     },
   },
   contentAlign: {
+    description: "The content align of the tooltip.",
     options: ['center', 'left'],
     control: {
       type: 'radio',
     },
   },
   content: {
+    description: "The tooltip's content.",
     control: 'text',
   },
   trigger: {
+    description: "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
     options: ['hover', 'click', 'focus'],
     control: {
       type: 'select',
     },
   },
   'tooltip-id': {
+    description: "The id of tooltip",
     control: 'text',
   },
   'tooltip-content': {
+    description: "content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.",
     control: 'text',
   },
   open : {
@@ -82,6 +89,7 @@ Playground.argTypes = {
     },
   },
   '--max-width': {
+    description: "The maximum width of the tooltip.",
     table: {
       defaultValue: { summary: 'auto' },
     },
@@ -90,6 +98,7 @@ Playground.argTypes = {
     },
   },
   '--z-index': {
+    description: "The z-index of the tooltip.",
     table: {
       defaultValue: { summary: '1' },
     },
@@ -98,6 +107,7 @@ Playground.argTypes = {
     },
   },
   '--width': {
+    description: "width of the tooltip.",
     table: {
       defaultValue: { summary: 'auto' },
     },
@@ -106,6 +116,7 @@ Playground.argTypes = {
     },
   },
   'tooltip': {
+    description: "tooltip container",
     control: {
       type: null,
     },

package/dist/esm/road-badge_14.entry.js

@@ -398,21 +398,18 @@ const Drawer = class {
             item.addEventListener('click', () => this.close());
         });
     }
-    hasFooterContent() {
-        const footerSlot = this.el.querySelector('[slot="footer"]');
-        return footerSlot !== null && footerSlot.childElementCount > 0;
-    }
     render() {
+        var _a, _b, _c;
         const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
-        const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';
-        const ariaLabelBack = this.ariaLabelBack !== undefined ? this.ariaLabelBack : 'Back';
-        const ariaLabelClose = this.ariaLabelClose !== undefined ? this.ariaLabelClose : 'Close';
-        const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
-        const backIconElement = this.hasBackIcon ? h("button", { type: "button", class: "drawer-action", "aria-label": `${ariaLabelBack}`, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText) : '';
-        const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": `${ariaLabelClose}` }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
-        const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
-        return (h(Host, { key: '61d6f770f9f56ddb21b19f1f8577f5e518325790', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": `${ariaLabel}` }, h("div", { key: 'e04193694e300e84f773d731619db83e1513a4db', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '5b19f360e5db980562ccd3991823a31161f5349b', class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, h("div", { key: '09320757e8c8fdda7770160241f3d185ac933d14', class: "drawer-content" }, h("header", { key: '1b37b3c4e8ec75391f5c068585ecbe22c4c39ddd', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }, h("slot", { name: "title" })), closeIconElement), h("div", { key: '84ee063113d185a40f869ecee89db960d530a59f', class: "drawer-body" }, h("slot", { key: 'dd1b3ed184198ffe6ccd83f4c5698577933a55e7' })), this.hasFooterContent() && (h("footer", { key: '7e0c367c1a8309464e2ffaefaf759cd5162172c7', class: "drawer-footer" }, h("slot", { key: '1fb2d6fc4e20b8853b0a1d95a9a7169defc4a5ae', name: "footer" })))))));
+        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : 'drawer';
+        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : 'Back';
+        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : 'Close';
+        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';
+        const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
+        const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
+        const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
+        return (h(Host, { key: 'fd9a5a869879812bd6abeba3ae3da032bf188e1e', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'fcf28c064fc710f7c5a38bb98d56799d2f367cfd', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'a8e366d98d6d686cde4fbeb1c99080ca4f3cb317', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: '9a67f4e0e4080d2933b6fce68cc0ea38a9bc301e', class: "drawer-content" }, h("header", { key: '9c04a1b883cb9437212aeb07de19725d5fb98266', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: 'f182bf146ffd3153bfb5b0faaa51fe8ac7b8627e', class: "drawer-body" }, h("slot", { key: 'da7ef62fdb134dad252ba7cbcc831584ac98552b' })), h("footer", { key: 'cf8ee470742208e0523eecb97dd74b9ec4303127', class: "drawer-footer" }, h("slot", { key: '50c4ed9e0e0f7dd98124a273a7af85aa8f89f319', name: "footer" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {