@roadtrip/components 3.33.6 → 3.34.0

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

@@ -37,9 +37,11 @@ export default {
     },
     close: {
       description: "Indicate when closing the toast",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
+      control: { type: null }, // Désactive l'affichage du contrôle dans Storybook
     },
     progress: {
       description: "the progress bar in the toast.\ncolor=\"info\" for Info\ncolor=\"success\" for success\ncolor=\"warning\" for warning\ncolor=\"danger\" for danger",

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

@@ -66,11 +66,11 @@ export class toggle {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = h("label", { key: 'd8f6f793ae322fc4f3c78d627858836a8ace0b1e', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = h("label", { key: 'fc640d3b84b175679ffbd7be8b6e56ae0298b07c', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
         const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
         const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
         const disabledClass = this.disabled ? 'disabled' : '';
-        return (h(Host, { key: '5b975533cbd7705fb47773942d43ca00f9c67777' }, h("input", { key: '2f02aaaf3815db82b246eccc65b95ff80028fef3', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '922fd52175937ca1749eac085776411c2f6b2517', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: '0b7e003b92aaa2bb7f02ac19bba110d959349d84', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: 'b70c71787640105ee246d1ce65dc1eed67ef2541' }, h("input", { key: 'd2921d1eb0a92347acae978122d647e390d4519a', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: 'da00339aaf756ab5c888d1bc467ef43c9f1c7f86', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: '82a8d49761061494d3c5d8868c3f1ed6145d7c0b', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -51,22 +51,27 @@ export default {
       control: 'boolean',
     },
     roadblur: {
+      action: 'roadblur',
       description: "Emitted when the toggle loses focus.",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadfocus: {
+      action: 'roadfocus',
       description: "Emitted when the toggle has focus.",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadchange: {
-      description: "Emitted when the checked property has changed.",
       action: 'roadchange',
-      control: {
-        type: null,
+      description: "Emitted when the checked property has changed.",
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     '--toggle-lever-width': {

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

@@ -10,7 +10,7 @@ import { Host, h } from "@stencil/core";
 export class Toolbar {
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (h(Host, { key: '3babdf893a7a89e310b620737ef852ee133ccebb', class: colorClass }, h("div", { key: 'de9400a86c87d427d22b496cd6ceb31cb93ccf54', class: "toolbar-container" }, h("slot", { key: '50559e69631b7581ad67338aea96acd42926b9ab', name: "start" }), h("slot", { key: '40bcbd63fb2f83d7c8294154734c58c0650ee182', name: "primary" }), h("div", { key: '4eec60ca600f33e3e0c6d9056c9913d8df7e62bd', class: "toolbar-content" }, h("slot", { key: 'f1105dc9a8ac7ff4cfc7e8e166d8a0e13c1bee73' })), h("slot", { key: 'ca6e18fc20fb0a636d54573ffb99074940e41bcc', name: "secondary" }), h("slot", { key: 'c73721561d9d3d38c38a9dc453757b185bbd81a5', name: "end" }))));
+        return (h(Host, { key: '1666aad03b553002af15625a73060f5dbf4601b8', class: colorClass }, h("div", { key: 'e627795b3897fe397d86a9c879ea2df29ca40a30', class: "toolbar-container" }, h("slot", { key: '123ce565840045140bf2271fada84db838c1b0d6', name: "start" }), h("slot", { key: '115bb3ee9c656a81b61a601a319ec6923657894a', name: "primary" }), h("div", { key: '123ec182ca9d3dfd6bb2437c5689cce4c6e63069', class: "toolbar-content" }, h("slot", { key: '9c7a630301f524c0adef6bbc6ca6e89cabcba81a' })), h("slot", { key: 'a37d49d76f8df43da0e2969e17497f06e0eae184', name: "secondary" }), h("slot", { key: '62e6e5cbd5d9b1fdc2dead440ef9e60425796f75', name: "end" }))));
     }
     static get is() { return "road-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar-title/toolbar-title.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarTitle {
     render() {
-        return (h("div", { key: '79254e204a533572207f3779ee0d20d814bbbecd', class: "toolbar-title" }, h("slot", { key: '29cce3ccf19f113e99e1b2b4c84322efc0b94f94' })));
+        return (h("div", { key: '0e4f5a9a555499bdafd072e142da81808f878091', class: "toolbar-title" }, h("slot", { key: '180b36b7360f47a0ebb168100e2fb711c8c18b78' })));
     }
     static get is() { return "road-toolbar-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar-title-page/toolbar-title-page.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarAppName {
     render() {
-        return (h("div", { key: 'dc61258415913c4112dd06bcc23a94db38fab00e', class: "toolbar-title-page" }, h("slot", { key: 'f39c19ff690566100558556751e8380bb448eb72' })));
+        return (h("div", { key: 'e2702e4bac40d997c95962c2197b80a3f2716da2', class: "toolbar-title-page" }, h("slot", { key: 'a5af4e9645e566f3177506394b3e7d34d738e7e5' })));
     }
     static get is() { return "road-toolbar-title-page"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ToolbarV2 {
     render() {
-        return (h(Host, { key: 'a020bd723a459c6bb443645007df7b1f215ea851', class: "toolbar" }, h("div", { key: '2d2cc4b896593cf69c7046ee877b5c9b7ba53eb5', class: "toolbar-container" }, h("div", { key: '55c6f4b55cc7c5ddae5965a156bcfb6cafec1d49', class: "toolbar-container-content-left" }, h("slot", { key: '6b249b32d73240846717ac50a8d1544511a2fe6d', name: "start" }), h("slot", { key: '9187ad0c4fc712d3ad16af1f72db9bd7382d8e6e', name: "primary" })), h("div", { key: 'f5936eb58c38d6cd5758d213f40e6bc09df3f7e8', class: "toolbar-content" }, h("slot", { key: 'c61051186fb1f726fcc104d9f3a827e091b46ff3' })), h("div", { key: '7ee04f220d5377315bc8c320461963def7a7d05f', class: "toolbar-container-content-right" }, h("slot", { key: '196976ade22edf382dee91352082d31b5fce015f', name: "secondary" }), h("slot", { key: 'ea25da8140c7525ce6ed3e712c64ccb105fcbb71', name: "end" })))));
+        return (h(Host, { key: 'aa969f064908bea9d7b1291fdc5165dc7e4ec74b', class: "toolbar" }, h("div", { key: '6e1372064ad1c1a636a151856b267ed27d683f50', class: "toolbar-container" }, h("div", { key: '950306ea6570ad3ce8347d464dd02ed242a6856d', class: "toolbar-container-content-left" }, h("slot", { key: 'ec37c637dd7d95b86971e18a638273453443bfe9', name: "start" }), h("slot", { key: '358f719af8508135698e6fdad3cebe456c53e08b', name: "primary" })), h("div", { key: '7580a7c99a3cf2cd34ac56db6eaa40ee983ed4ee', class: "toolbar-content" }, h("slot", { key: '08f8b181ccc7b913a5957f9ce444c5a87f4be090' })), h("div", { key: '8587600a63e0994d0712f85ab09e07cca4021b1f', class: "toolbar-container-content-right" }, h("slot", { key: 'e053ccd0b7650c2da116ca033ebfa0c8ab14e110', name: "secondary" }), h("slot", { key: '4d3d4436c3a07d0620e38bf3d6ae7c12c0eb7125', name: "end" })))));
     }
     static get is() { return "road-toolbar-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.css

@@ -115,6 +115,20 @@
   transform: translateY(-100%);
 }
 
+/**
+ * Top end
+ */
+
+ :host([data-tooltip-position="top-end"]) .tooltip {
+  left: auto;
+  right: 0%;
+  transform: translateY(-70%);
+}
+
+:host([data-tooltip-position="top-end"]) .tooltip-open {
+  transform: translateY(-100%);
+}
+
 /**
  * Left
  */
@@ -175,6 +189,23 @@
   transform: translateY(-6%);
 }
 
+
+/**
+ * Bottom end
+ */
+
+ :host([data-tooltip-position="bottom-end"]) .tooltip {
+  margin-top: 0.5rem;
+  left: auto;
+  top: 100%;
+  right: 0;
+  transform: translateY(-40%);
+}
+
+:host([data-tooltip-position="bottom-end"]) .tooltip-open {
+  transform: translateY(-6%);
+}
+
 /**
  * Right
  */

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

@@ -95,12 +95,12 @@ export class Tooltip {
         return triggers.includes(triggerType);
     }
     render() {
-        return (h(Host, { key: 'a41350a6114e63e0d73759b29c0afa19d467ac4b', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+        return (h(Host, { key: '172216930c32f4de48df7264149b90c95cdf299f', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
             ,
-            "data-tooltip-position": this.position }, h("slot", { key: 'e2985be0f2af606eb675875a1ef0e53190c54b50', "aria-describedby": this.tooltipId }), h("div", { key: '45f8da72265c812ebbc781cafd7356f02294c2ae', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, h("slot", { key: 'e87dd66f22d8586f1916b4fdd9839bec64d3aea4', "aria-describedby": this.tooltipId }), h("div", { key: 'b61044b9938cf4859676d05a76a6fc4e8f8fb77a', part: "tooltip", id: this.tooltipId, class: {
                 tooltip: true,
                 'tooltip-open': this.isOpen,
-            }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, h("slot", { key: 'a3d80cc2d48e26c0a5c2f45e38854601c1f3ea83', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, h("slot", { key: 'a7a84bbde98a3ee34b8ab8c1d397446dbd314f2e', name: "tooltip-content" }))));
     }
     static get is() { return "road-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -160,8 +160,8 @@ export class Tooltip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left'",
-                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "original": "| 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-left\" | \"bottom-right\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-left\" | \"top-right\" | \"top-start\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n  @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n  document.removeEventListener('keydown', this.handleKeyDown);\n  document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n  this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n  this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n  if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n    this.open();\n  }\n};\n\n\n  private onBlur = () => {\n    if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        tabindex=\"0\"  // Makes the element focusable\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n  @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n  document.removeEventListener('keydown', this.handleKeyDown);\n  document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n  this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n  this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n  if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n    this.open();\n  }\n};\n\n\n  private onBlur = () => {\n    if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        tabindex=\"0\"  // Makes the element focusable\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"]}

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

@@ -33,7 +33,7 @@ Playground.argTypes = {
   },
   position: {
     description: "The position of the tooltip.",
-    options: ['top', 'left', 'bottom', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+    options: ['top', 'left', 'bottom', 'right', 'top-left', 'top-right', 'top-start', 'top-end', 'bottom-left', 'bottom-right', 'bottom-end'],
     control: {
       type: 'radio',
     },

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

@@ -17958,6 +17958,9 @@ const Input = class {
                 this.roadBlur.emit(value);
                 this.roadChange.emit({ value });
             }
+            else {
+                this.roadBlur.emit(value);
+            }
             // Appeler enforceMinMaxValue lors de la perte de focus
             this.enforceMinMaxValue();
         };
@@ -18022,7 +18025,11 @@ const Input = class {
         const hasValueClass = this.value !== '' && this.value !== null ? 'has-value' : '';
         const lessLabelClass = this.label !== '' ? '' : 'less-label';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'e8296b902967681ad3483560e720236c98dc4f9f', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '8ad175738f8fca4ca345aff156e3124db00afbdf', class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input' }), h("label", { key: 'f9e63512f533d2cf89a8bbfd6fffd8824a721211', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { key: 'ec34468bc61c42943ee5b275081e02be859e45e2', class: "invalid-feedback" }, h("road-icon", { key: '83204d0fecc77eb3d8e8bc9697cd9bfc7ddb3be5', slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && h("p", { key: 'b639735e1508e1aac0ba5800edf9649fb1847155', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: 'c33c73bc53ae22f3b3bd97021a5c4f320cff89f9', name: "checklistPassword" })));
+        return (h(Host, { key: '1dc5be8cca2464709ea4661a875c35feaec6d7b3', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '57575b6d01b4bf45703e76e0ac4b7e75aa7177ae', class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input' }), h("label", { key: '90ab2cc491c203f18e37654e361a03bf31f6e908', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
+            ? // Si error est un tableau, on itère et génère un <p> pour chaque élément
+                this.error.map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))
+            : // Si error est une chaîne, on la divise avec split et génère un <p> pour chaque élément
+                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: 'ac10569a3eacf0e85142238d18139bb4b95c24e3', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: '17e2a2ea624850955a29167e0475cff88960cc49', name: "checklistPassword" })));
     }
     static get watchers() { return {
         "debounce": ["debounceChanged"],
@@ -18032,7 +18039,7 @@ const Input = class {
 let inputIds = 0;
 Input.style = RoadInputStyle0;
 
-const inputGroupCss = ":host{display:block}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}::slotted(road-input),::slotted(input),::slotted(textarea),::slotted(road-select){position:relative;flex:1 1 auto;width:1%;margin-bottom:0}::slotted([slot=\"prepend\"]){margin-right:-3px;border-right-color:transparent;border-color:var(--road-input-outline);border-top-right-radius:0;border-bottom-right-radius:0;position:absolute;left:0;top:0;bottom:0}::slotted([slot=\"append\"]){margin-left:-0.25rem;border-color:var(--road-input-outline);border-left-width:0;position:absolute;right:0;top:0;bottom:0}@media (hover: hover){.input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-input-outline-variant);border-right-color:transparent}.input-group:not(.is-disabled):hover ::slotted([slot=\"append\"]){border-color:var(--road-input-outline-variant);border-left-color:transparent}:host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-input-outline-variant)}}.input-group:focus-within ::slotted([slot=\"prepend\"]),:host(.phone-number-group) .input-group:focus-within ::slotted([slot=\"prepend\"]){border-color:var(--road-grey-0);border-width:2px;border-right-color:transparent;outline:none;}.input-group:focus-within ::slotted([slot=\"append\"]){border-color:var(--road-grey-0);border-width:2px;border-left-color:transparent;outline:none;}.input-group:focus-within ::slotted(road-input):focus-visible{border-color:var(--road-grey-0);border-width:2px;outline:none;}.input-group-prepend,.input-group-append{display:flex;height:3rem}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;position:relative;z-index:2;min-width:3rem;margin:0;font-size:var(--road-font-size-14)}::slotted(road-button):hover{background-color:var(--road-button-ghost-variant)}.input-group-prepend{z-index:1;order:-1;position:relative}.input-group-prepend~.form-label{left:calc(3rem + 1px)}.input-group-append{position:relative;z-index:1;border-radius:0 0.25rem 0.25rem 0}::slotted(label){display:flex;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-on-surface);text-align:center;white-space:nowrap;cursor:text;border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}::slotted(road-label){display:flex;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-on-surface);text-align:center;white-space:nowrap;cursor:text;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}::slotted(road-input:not(:first-child)),::slotted(road-select:not(:first-child)){border-radius:0}.input-group-append ::slotted([slot=\"append\"]){border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.input-group-prepend ::slotted([slot=\"prepend\"]){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}:host(.phone-number-group) .input-group-prepend ::slotted([slot=\"prepend\"]){border-right:1px solid var(--road-input-outline);border-top-right-radius:0;border-bottom-right-radius:0}.input-group-prepend ::slotted(label){margin-right:calc(-1rem + 1px)}.input-group-append:hover ::slotted(road-button){background-color:var(--road-button-ghost-variant)}.size-xl .input-group-prepend,.size-xl .input-group-append{height:3.5rem}.size-xl ::slotted(road-button){height:3.5rem}.input-group.is-invalid ::slotted([slot=\"append\"]),.input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-outline)}:host(.phone-number-group) .input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-outline)}:host([disabled]){cursor:not-allowed}:host([disabled]) .input-group{pointer-events:none;}:host([disabled]) ::slotted([slot=\"append\"]),:host([disabled]) ::slotted([slot=\"prepend\"]){color:var(--road-on-surface-disabled);cursor:not-allowed;background:#e4e5e9}:host([disabled]) ::slotted([slot=\"append\"] road-icon),:host([disabled]) ::slotted([slot=\"prepend\"] road-icon){color:var(--road-on-surface-disabled)}:host([disabled]) road-icon{color:var(--road-on-surface-disabled)}";
+const inputGroupCss = ":host{display:block}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}::slotted(road-input),::slotted(input),::slotted(textarea),::slotted(road-select){position:relative;flex:1 1 auto;width:1%;margin-bottom:0}::slotted([slot=\"prepend\"]){margin-right:-3px;border-right-color:transparent;border-color:var(--road-input-outline);border-top-right-radius:0;border-bottom-right-radius:0;position:absolute;left:0;top:0;bottom:0}::slotted([slot=\"append\"]){margin-left:-0.25rem;border-color:var(--road-input-outline);border-left-width:0;position:absolute;right:0;top:0;bottom:0}@media (hover: hover){.input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-right-color:transparent}.input-group:not(.is-disabled):hover ::slotted([slot=\"append\"]){border-left-color:transparent}:host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-input-outline-variant)}}.input-group:focus-within ::slotted([slot=\"prepend\"]),:host(.phone-number-group) .input-group:focus-within ::slotted([slot=\"prepend\"]){border-color:var(--road-grey-0);border-width:2px;border-right-color:transparent;outline:none;}.input-group:focus-within ::slotted([slot=\"append\"]){border-color:var(--road-grey-0);border-width:2px;border-left-color:transparent;outline:none;}.input-group:focus-within ::slotted(road-input):focus-visible{border-color:var(--road-grey-0);border-width:2px;outline:none;}.input-group-prepend,.input-group-append{display:flex;height:3rem}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;position:relative;z-index:2;min-width:3rem;margin:0;font-size:var(--road-font-size-14)}::slotted(road-button):hover{background-color:var(--road-button-ghost-variant)}.input-group-prepend{z-index:1;order:-1;position:relative}.input-group-prepend~.form-label{left:calc(3rem + 1px)}.input-group-append{position:relative;z-index:1;border-radius:0 0.25rem 0.25rem 0}::slotted(label){display:flex;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-on-surface);text-align:center;white-space:nowrap;cursor:text;border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}::slotted(road-label){display:flex;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-on-surface);text-align:center;white-space:nowrap;cursor:text;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}::slotted(road-input:not(:first-child)),::slotted(road-select:not(:first-child)){border-radius:0}.input-group-append ::slotted([slot=\"append\"]){border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.input-group-prepend ::slotted([slot=\"prepend\"]){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}:host(.phone-number-group) .input-group-prepend ::slotted([slot=\"prepend\"]){border-right:1px solid var(--road-input-outline);border-top-right-radius:0;border-bottom-right-radius:0}.input-group-prepend ::slotted(label){margin-right:calc(-1rem + 1px)}.input-group-append:hover ::slotted(road-button){background-color:var(--road-button-ghost-variant)}.size-xl .input-group-prepend,.size-xl .input-group-append{height:3.5rem}.size-xl ::slotted(road-button){height:3.5rem}.input-group.is-invalid ::slotted([slot=\"append\"]),.input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-outline)}:host(.phone-number-group) .input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-outline)}:host([disabled]){cursor:not-allowed}:host([disabled]) .input-group{pointer-events:none;}:host([disabled]) ::slotted([slot=\"append\"]),:host([disabled]) ::slotted([slot=\"prepend\"]){color:var(--road-on-surface-disabled);cursor:not-allowed;background:#e4e5e9}:host([disabled]) ::slotted([slot=\"append\"] road-icon),:host([disabled]) ::slotted([slot=\"prepend\"] road-icon){color:var(--road-on-surface-disabled)}:host([disabled]) road-icon{color:var(--road-on-surface-disabled)}";
 const RoadInputGroupStyle0 = inputGroupCss;
 
 const InputGroup = class {
@@ -18065,16 +18072,16 @@ const InputGroup = class {
         const formSelect = this.el.querySelector('.form-select');
         const formSelectLabel = this.el.querySelector('.form-select-label');
         if (formControl) {
-            formControl.style.textIndent = hasPrepend ? '2rem' : '';
+            formControl.style.textIndent = hasPrepend ? '2.1rem' : '';
         }
         if (formSelect) {
-            formSelect.style.textIndent = hasPrepend ? '2rem' : '';
+            formSelect.style.textIndent = hasPrepend ? '2.1rem' : '';
         }
         if (formLabel) {
-            formLabel.style.textIndent = hasPrepend ? '2.7rem' : '';
+            formLabel.style.textIndent = hasPrepend ? '2.8rem' : '';
         }
         if (formSelectLabel) {
-            formSelectLabel.style.textIndent = hasPrepend ? '2.7rem' : '';
+            formSelectLabel.style.textIndent = hasPrepend ? '2.8rem' : '';
         }
     }
     componentDidLoad() {
@@ -18090,7 +18097,7 @@ const InputGroup = class {
             ? `size-${this.el.querySelector('road-input').sizes}`
             : '';
         const disabledClass = this.disabled ? 'is-disabled' : '';
-        return (h("div", { key: '99a512f367c7dfb57297073d05d3e341df818ab3', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '9e89c27036e321223513c99d3f399694008a4b99', class: "input-group-prepend" }, h("slot", { key: 'f448db90587308448b33aeeff57e26f9943c836c', name: "prepend" })), h("slot", { key: '67214bd2d0fed61ae080aa10306b98bb376f8f7d' }), h("div", { key: '152a4f643d38c0b443a39d3cc8fa781c9b99f87b', class: "input-group-append" }, h("slot", { key: '549c3c8f388cf6f26c1080da788a9aadf53ac61b', name: "append" }))));
+        return (h("div", { key: '54938b0939fc88368a47099bd3263a4eaaa273fc', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '3039896e2e22c633d4b298899488b16dc2d34018', class: "input-group-prepend" }, h("slot", { key: 'ad675a53558b83d6dd5b0ae044db538245da0316', name: "prepend" })), h("slot", { key: '1283ee327bbe9755e107a80cf700293c685429bf' }), h("div", { key: '677da10746507b1171498461da76d7e8e7d6056a', class: "input-group-append" }, h("slot", { key: '2bbf8d38a2343e362ee20bc8c3d54f88fd992eed', name: "append" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18153,13 +18160,13 @@ const Item = class {
                 target,
             };
         const showDetail = detail !== undefined && detail;
-        return (h(Host, { key: '9fb4b35e594ec2393232ad0a9403e279e2e2889c', "aria-disabled": disabled ? 'true' : null, class: {
+        return (h(Host, { key: '9b71788b470f7fc686c9953868c59515607d5b01', "aria-disabled": disabled ? 'true' : null, class: {
                 [`item-lines-${lines}`]: lines !== undefined,
-            } }, h(TagType, Object.assign({ key: '9fba47364f496d51e09e3b2a5a92dd00ef71ff87' }, attrs, { class: {
+            } }, h(TagType, Object.assign({ key: 'd05ff0c98f1a0713e935954b995e0f6476069414' }, attrs, { class: {
                 'item-native': true,
                 'item-active': this.active,
                 [`layout-${layout}`]: layout !== undefined,
-            }, part: "native", disabled: disabled }), h("slot", { key: 'fe656d0fa4a1f518f6ab7a43524e244d6eb37d30', name: "start" }), h("div", { key: 'd1c19e1d0a10b578799970249bf4e40cdddd9dc3', class: "item-inner" }, h("div", { key: '3523d2bd743dc2f16cc1dc2de844a3ab3be93ff2', class: "input-wrapper" }, h("slot", { key: 'a7da0e4dcf42fc54130eaafa1a08d16315b52d54' }), h("div", { key: 'd63ad621b6f43da35bec1a270ceacd40876b4d3e', class: "input-wrapper-info" }, h("road-label", { key: '14763d79d648cfbbb21136998287411ab3231cbc', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '5048f0bab07eb191b4ba3d8655a7890a45926541', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: 'ef5cef7e326421ea28f0420a81a1773b74adc8bf', name: "end" }), showDetail && h("road-icon", { key: 'ecb61fe5b2cd5e3ba3ba8b30427337cbde78fd78', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+            }, part: "native", disabled: disabled }), h("slot", { key: '4287ffe1ac1fc6471bef8cc1c060637bd6889ef4', name: "start" }), h("div", { key: '70dff3ab1b88fc4e51e83280504c85cfdbef6e75', class: "item-inner" }, h("div", { key: '872a6387bceac2c8ef76d8ebd5ecc47cb6f93aa7', class: "input-wrapper" }, h("slot", { key: 'c0e117161a86fb92ed121ab1fdc71de76a9d1aae' }), h("div", { key: '23f4c082e69b0584cecadaf62c3cda21073068d6', class: "input-wrapper-info" }, h("road-label", { key: '7af0a0698d00c0681181038163b8f5c15ef82e9a', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '87653ef8324a8e8b82270d697e657e242e9494be', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: '4d58e9d7d5f808b3a7f6bc2dee4912015070a495', name: "end" }), showDetail && h("road-icon", { key: '6422e581f75db848cc4e788d7fd9f48709bd7588', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
     }
     get el() { return getElement(this); }
 };
@@ -18173,7 +18180,7 @@ const Label = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: '3ba99679bcd840c743cbc724843909bd267d0ab2' }));
+        return (h("slot", { key: 'e6b8246e6673eeaa1d33517a58de2df43091c4dc' }));
     }
 };
 Label.style = RoadLabelStyle0;
@@ -18187,9 +18194,9 @@ const List = class {
     }
     render() {
         const { lines } = this;
-        return (h(Host, { key: 'ddd543051e3de681b5672d7ab87ebe742858da9c', class: {
+        return (h(Host, { key: 'a830b17499a394ad9bccaaed0aa2056ae538929b', class: {
                 [`list-lines-${lines}`]: lines !== undefined,
-            } }, h("slot", { key: '56e04b9869dc48d1011e422c57ec2578e61301c6' })));
+            } }, h("slot", { key: '1010f8f4a4376db24412ea8e5f407f3951ac8333' })));
     }
 };
 List.style = RoadListStyle0;
@@ -18202,7 +18209,7 @@ const Row = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '891c70924e7955aa953e3e233cd57dd6aff4068a' }, h("slot", { key: 'acb726260f4492a126b9aa1f51d89b329bf6a09c' })));
+        return (h(Host, { key: '4d56e5a10387b76a5b9848b29b66b5d1893c1b39' }, h("slot", { key: 'ba686ef7958ff67384c6ca8d88767f1dd55e9f5a' })));
     }
 };
 Row.style = RoadRowStyle0;
@@ -18216,7 +18223,7 @@ const Toolbar = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (h(Host, { key: '3babdf893a7a89e310b620737ef852ee133ccebb', class: colorClass }, h("div", { key: 'de9400a86c87d427d22b496cd6ceb31cb93ccf54', class: "toolbar-container" }, h("slot", { key: '50559e69631b7581ad67338aea96acd42926b9ab', name: "start" }), h("slot", { key: '40bcbd63fb2f83d7c8294154734c58c0650ee182', name: "primary" }), h("div", { key: '4eec60ca600f33e3e0c6d9056c9913d8df7e62bd', class: "toolbar-content" }, h("slot", { key: 'f1105dc9a8ac7ff4cfc7e8e166d8a0e13c1bee73' })), h("slot", { key: 'ca6e18fc20fb0a636d54573ffb99074940e41bcc', name: "secondary" }), h("slot", { key: 'c73721561d9d3d38c38a9dc453757b185bbd81a5', name: "end" }))));
+        return (h(Host, { key: '1666aad03b553002af15625a73060f5dbf4601b8', class: colorClass }, h("div", { key: 'e627795b3897fe397d86a9c879ea2df29ca40a30', class: "toolbar-container" }, h("slot", { key: '123ce565840045140bf2271fada84db838c1b0d6', name: "start" }), h("slot", { key: '115bb3ee9c656a81b61a601a319ec6923657894a', name: "primary" }), h("div", { key: '123ec182ca9d3dfd6bb2437c5689cce4c6e63069', class: "toolbar-content" }, h("slot", { key: '9c7a630301f524c0adef6bbc6ca6e89cabcba81a' })), h("slot", { key: 'a37d49d76f8df43da0e2969e17497f06e0eae184', name: "secondary" }), h("slot", { key: '62e6e5cbd5d9b1fdc2dead440ef9e60425796f75', name: "end" }))));
     }
 };
 Toolbar.style = RoadToolbarStyle0;