@roadtrip/components 3.45.2 → 3.47.0

package/dist/collection/components/carousel-item/carousel-item.js

@@ -4,10 +4,10 @@ import { Host, h } from "@stencil/core";
  */
 export class CarouselItem {
     render() {
-        return (h(Host, { key: '9505d58be5a5b79ca69b82808b1ffd06ba6bf5ae', class: {
+        return (h(Host, { key: '66cf75481e1bb831c17a7a7ca01341dfd1f28cae', class: {
                 'swiper-slide': true,
                 'swiper-zoom-container': true,
-            } }, h("slot", { key: 'e5c79e5ae3ca8cb8d69cd37a5b55496e04b26652' })));
+            } }, h("slot", { key: 'ace4b6235ef59848e24915b3c8f17a54f78f18a7' })));
     }
     static get is() { return "road-carousel-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkbox/checkbox.css

@@ -193,3 +193,19 @@
   font-size: var(--road-font-size-14);
   color: var(--road-on-surface-weak);
 }
+
+/**
+ * Size
+ */
+ 
+ .form-check-label-sm {
+   font-size: var(--road-body-small);
+ }
+
+.form-check-label-md {
+  font-size: var(--road-body-medium);
+}
+
+.form-check-label-lg {
+  font-size: var(--road-body-large);
+}

package/dist/collection/components/checkbox/checkbox.js

@@ -42,6 +42,10 @@ export class Checkbox {
          * If `true`, the label and the checkbox are inverse and spaced
          */
         this.inverse = false;
+        /**
+          * The checkbox label size.
+          */
+        this.size = 'md';
         this.onClick = () => {
             this.checked = !this.checked;
             this.indeterminate = false;
@@ -68,8 +72,9 @@ export class Checkbox {
     render() {
         const labelId = this.checkboxId + '-label';
         const inverseClass = this.inverse && 'form-checkbox-inverse';
+        const sizeClass = this.size !== undefined ? `form-check-label-${this.size}` : '';
         const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '6c65aa807587f38c0d6fcba34c1606431dfa1997' }, h("input", { key: '6a3aa3c88b3fd4bdc23bc3881c7b72e8d7591964', class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, 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: '3614ccc3ffbeacfd1e1b237da2b9c78ce7b8eecc', class: `form-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, h("div", { key: '5c3b311e9a816bd504780c2ba4009f5ab69d4b8e' }, this.label, " ", h("span", { key: 'cc588cbde6b8fbdea9ee0d861e265b994c8c5fa6', class: "form-check-label-span" }, this.secondaryLabel), h("slot", { key: 'd92e1174f5d8bc282938dde2532a065b4511f5e2' })), this.checked && !this.indeterminate && h("road-icon", { key: 'f4d26476c8686fc1d210378c581a5dedb6fb9ca3', class: "form-check-icon", icon: checkWide }), this.indeterminate && h("road-icon", { key: '2701bbb698f4558edb21e024d9f803d4227f1eec', class: "form-check-icon", icon: navigationAddLess })), this.error && this.error !== '' && h("p", { key: 'c39dc46b6aa89becc12a0277fddea6afe8c2f447', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'bbd1c57d3d9bc9c13664a829927cb26c560bf075', class: "helper" }, this.helper)));
+        return (h(Host, { key: '61a1420c717c25c8b09f6ecb52fa281bc7c0a4ff' }, h("input", { key: 'b894bdab786b416ab46280c80a344fb1ea97fb82', class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, 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: 'bc0b308f508cfbd15876c97f4dd381cf4f1cabe8', class: `form-check-label ${inverseClass} ${sizeClass}`, id: labelId, htmlFor: this.checkboxId }, h("div", { key: 'd78bb31d01f3ad0cbcb51e61f79d00b611599ee9' }, this.label, " ", h("span", { key: '5154464b3ff2840408f57891f92b344e1fb0ecbc', class: "form-check-label-span" }, this.secondaryLabel), h("slot", { key: '6ed42d75b5bf687a17e30f163a7d5c28a8d6d2e1' })), this.checked && !this.indeterminate && h("road-icon", { key: '5dfdae2ea90921103427d2f8fca7b14625a80fc6', class: "form-check-icon", icon: checkWide }), this.indeterminate && h("road-icon", { key: '9e4e76b62f504d24b114d8801cb4fe0c0319365b', class: "form-check-icon", icon: navigationAddLess })), this.error && this.error !== '' && h("p", { key: 'eed17cd5b5aac44c93a02fbfa1eddc68252b6369', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '89e6e4739b2ddc39a1e850d1a4a55a9a723e6972', class: "helper" }, this.helper)));
     }
     static get is() { return "road-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -321,6 +326,26 @@ export class Checkbox {
                 "setter": false,
                 "attribute": "helper",
                 "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The checkbox label size."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n  tag: 'road-checkbox',\n  styleUrl: 'checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.checkboxId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   */\n   @Prop() indeterminate: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.checkboxId}-label`;\n\n    /**\n   * Secondary Label for the field\n   */\n    @Prop() secondaryLabel?: string;\n\n  /**\n   * If `true`, the label and the checkbox are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the checkbox has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const labelId = this.checkboxId + '-label';\n    const inverseClass = this.inverse && 'form-checkbox-inverse';\n    const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host>\n        <input\n          class={`form-check-input ${isInvalidClass}`}\n          type=\"checkbox\"\n          id={this.checkboxId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-check-label ${inverseClass}`} id={labelId} htmlFor={this.checkboxId}>\n          <div>\n            {this.label} <span class=\"form-check-label-span\">{this.secondaryLabel}</span><slot/>\n          </div>\n          {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n          {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n        </label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n  tag: 'road-checkbox',\n  styleUrl: 'checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.checkboxId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   */\n   @Prop() indeterminate: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.checkboxId}-label`;\n\n    /**\n   * Secondary Label for the field\n   */\n    @Prop() secondaryLabel?: string;\n\n  /**\n   * If `true`, the label and the checkbox are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n    * The checkbox label size.\n    */\n  @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the checkbox has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const labelId = this.checkboxId + '-label';\n    const inverseClass = this.inverse && 'form-checkbox-inverse';\n    const sizeClass = this.size !== undefined ? `form-check-label-${this.size}` : '';\n    const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host>\n        <input\n          class={`form-check-input ${isInvalidClass}`}\n          type=\"checkbox\"\n          id={this.checkboxId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-check-label ${inverseClass} ${sizeClass}`} id={labelId} htmlFor={this.checkboxId}>\n          <div>\n            {this.label} <span class=\"form-check-label-span\">{this.secondaryLabel}</span><slot/>\n          </div>\n          {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n          {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n        </label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"]}

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

@@ -48,6 +48,14 @@ export default {
         defaultValue: { summary: 'Label' },
       },
     },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: 'md' },
+      },
+      description: 'Defines the size of the label in the checkbox.',
+    },
     'secondary-label': {
       control: 'text',
       description: 'Sets a secondary label, usually displayed next to the main label.',
@@ -96,6 +104,7 @@ export default {
     inverse: false,
     required: false,
     label: 'Label',
+    size: 'md',
     'secondary-label': '',
     value: 'on',
   },
@@ -108,6 +117,7 @@ const Template = (args) => html`
     ?disabled="${args.disabled}"
     ?inverse="${args.inverse}"
     ?required="${args.required}"
+    size="${ifDefined(args.size)}"
     value="${ifDefined(args.value)}"
     label="${ifDefined(args.label)}"
     secondary-label="${ifDefined(args['secondary-label'])}"

package/dist/collection/components/chip/chip.js

@@ -25,7 +25,7 @@ export class Chip {
     }
     render() {
         const outlineClass = this.outline ? 'chip-outline' : '';
-        return (h(Host, { key: 'a3d6d90495d0d68b83b3ddbaed51378dedf4d63a', class: `${outlineClass} chip-${this.color} chip-${this.size}`, tabindex: "0" }, h("div", { key: 'a59a6d3451042a9d04cda50c82615fc59465fdf7', class: "chip-description" }, h("slot", { key: '4219f60dc0bd8fda2be79f0ecd2b21075054c046' })), this.hasCloseIcon && h("road-icon", { key: 'c9426711dcf68f15413a3cd1a4f0c65cd09aa548', class: "chip-close", icon: navigationClose })));
+        return (h(Host, { key: 'ded3c67d6a534dfd46c54ecf503767f8283d2822', class: `${outlineClass} chip-${this.color} chip-${this.size}`, tabindex: "0" }, h("div", { key: '2ba980cea6242d94be97da8da18d00c88980acc6', class: "chip-description" }, h("slot", { key: '1360a26a52fa7f94c76f321f400258a37af29285' })), this.hasCloseIcon && h("road-icon", { key: 'f4049de03437098c2e85cf8b7975cfcc408cdbcb', class: "chip-close", icon: navigationClose })));
     }
     static get is() { return "road-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Col {
     render() {
-        return (h("slot", { key: 'a2621927906372b10b73caae4ddb4eca67ca3077' }));
+        return (h("slot", { key: '4cca7757a5a8749eef49d826de2e3b3bd03aa6d0' }));
     }
     static get is() { return "road-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapse/collapse.js

@@ -32,7 +32,7 @@ export class Collapse {
         const isOpenClass = this.isOpen ? 'collapse-open' : '';
         const buttonText = this.isOpen ? this.showLess : this.showMore;
         const centerClass = this.centered ? 'collapse-btn-centered' : '';
-        return (h(Host, { key: 'dc4faac44b6213b807e1c1b935474e61ecffc229' }, h("slot", { key: '007dc5698f07c530416b96319c087c70cc2e0928' }), h("div", { key: '88f368b345b0d27a467bf120f4c461f409f43187', class: `collapsed-content ${isOpenClass}` }, h("slot", { key: '253c48a56447a867c6b9f99ec485d3f444166f5a', name: "collapsed-content" })), h("div", { key: 'ce988a1da4251516b4e6a751cd214931e608a586', class: `collapse-btn-wrapper ${centerClass}` }, h("road-button", { key: 'd52107ea32b0cf25f490e7b1d38425df9fdd7d58', onClick: this.onClick, class: "collapse-btn btn-link" }, buttonText))));
+        return (h(Host, { key: '6c1f78aea13744aab6d9e39f5c415e38a070026e' }, h("slot", { key: '3d369bc22707614e18b0b87b2ac880a696876a10' }), h("div", { key: 'a2e58a860c41422159ac8a605431cb747934f1c4', class: `collapsed-content ${isOpenClass}` }, h("slot", { key: 'db854e26de30f90268f3c0a209ed946a38fde7b4', name: "collapsed-content" })), h("div", { key: '37ab581d3d384433e69ac37993adb116cdf3d787', class: `collapse-btn-wrapper ${centerClass}` }, h("road-button", { key: '97d8bb625e6cac6108e0b4dc6263481b20da6f1c', onClick: this.onClick, class: "collapse-btn btn-link" }, buttonText))));
     }
     static get is() { return "road-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content-card/content-card.js

@@ -14,7 +14,7 @@ export class ContentCard {
     }
     render() {
         const insetImageClass = this.insetImage ? '' : 'content-card-image';
-        return (h(Host, { key: '0929d51b0a1629b1d983f114f1a0a5109db72d5b' }, h("road-img", { key: '289c2d4def77b4bae2f0ab1ce5e3569367b8bfcf', src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), h("div", { key: 'a22a7377c03e7b9f715b723ac454375785ee4765', class: "content-card-description" }, h("road-label", { key: 'e43c2c05a422a9aff793cf67ce7d3810689470b5', class: "content-card-description-title" }, h("slot", { key: '474ee1adb66d34157ad37b3a06546b8000d49a7a', name: "label" })), h("p", { key: 'd8cb29dba572569025b961e4fc08e51cc19fdeea', class: "content-card-description-text" }, h("slot", { key: '2751c5b213c615a8b4e70808da4ee5cdc3e7f26c', name: "description" })), h("div", { key: 'cce3d9833cda5f79b06c5f909af9fae197544204', class: "content-card-description-buttons" }, h("slot", { key: '2f75207ca66a7346c19f521c35ca8772ed3202c9' })))));
+        return (h(Host, { key: '8e0b36b7d5e3906508a99ccd55b5ce38b0d8328d' }, h("road-img", { key: '57d11f40a4678f141fdf7952c3663a4c3803bc42', src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), h("div", { key: '2050e2fa7a84d84e0737308a1e977fca746eaf4c', class: "content-card-description" }, h("road-label", { key: '3fe09993b8bf8c3a82cf8a7ec8efc6eed87fd78b', class: "content-card-description-title" }, h("slot", { key: '3a37c63b30c874314aa764210b4b268a83f71645', name: "label" })), h("p", { key: 'fb09e79bb1b73656e2bfa9b03a5b822640ec0638', class: "content-card-description-text" }, h("slot", { key: '7c8c4ced139302c08dcf4b67436e92780a29ce67', name: "description" })), h("div", { key: '209e1873e8f6e4e340109c46a9b11d3587e5a43b', class: "content-card-description-buttons" }, h("slot", { key: '2feb58a1893aa6607cd1f89fc28ffb53729f1c6a' })))));
     }
     static get is() { return "road-content-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/counter/counter.js

@@ -40,12 +40,12 @@ export class Counter {
             }
         };
         this.increase = () => {
-            this.inputElement.querySelector('input').stepUp();
-            let valueInput = parseInt(this.inputElement.querySelector('input').value);
-            if (!valueInput) {
+            const input = this.inputElement.querySelector('input');
+            input.stepUp();
+            let valueInput = parseInt(input.value);
+            if (isNaN(valueInput)) {
                 valueInput = this.min;
             }
-            ;
             this.onValueChange(valueInput);
             this.roadIncrease.emit({ value: valueInput });
         };
@@ -54,12 +54,12 @@ export class Counter {
                 this.roadDustbinClick.emit();
                 return;
             }
-            this.inputElement.querySelector('input').stepDown();
-            let valueInput = parseInt(this.inputElement.querySelector('input').value);
-            if (!valueInput) {
+            const input = this.inputElement.querySelector('input');
+            input.stepDown();
+            let valueInput = parseInt(input.value);
+            if (isNaN(valueInput)) {
                 valueInput = this.min;
             }
-            ;
             this.onValueChange(valueInput);
             this.roadDecrease.emit({ value: valueInput });
         };
@@ -102,8 +102,8 @@ export class Counter {
     }
     setIconsClasses(valueInput) {
         valueInput = valueInput !== null && valueInput !== void 0 ? valueInput : parseInt(this.inputElement.querySelector('input').value);
-        this.leftIconClasses = valueInput <= this.min && !this.dustbin ? "disabled" : "";
-        this.rightIconClasses = this.max && valueInput >= this.max ? "disabled" : "";
+        this.leftIconClasses = this.readonly || valueInput <= this.min && !this.dustbin ? "disabled" : "";
+        this.rightIconClasses = this.readonly || this.max && valueInput >= this.max ? "disabled" : "";
     }
     componentWillLoad() {
         this.onValueChange(this.value);
@@ -154,7 +154,7 @@ export class Counter {
     }
     render() {
         const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-        return (h("road-input-group", { key: '820b0cc9986dcb4e4c234f6c7046c14b3a3df095', class: this.size && `counter-${this.size}` }, h("road-button", { key: 'fab3f2d7e20855197f186f0e281d064befb95bbd', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { key: '03c83781abc87777441b607b9722bf8d4ea30e03', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: 'dd8911ac1c4b2c08ad876629962cd6b8b9531a61', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: '79bb668b3831df7ce76d1d3691f2c9ef6a3e56a8', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { key: '035e4cacd9c843fd6b08a15ea40953bee8fcaa17', name: "navigation-add-more", size: this.size, role: "button" }))));
+        return (h("road-input-group", { key: '841d49424a25f1f9a14c928b24ea9edd629651a0', class: this.size && `counter-${this.size}` }, h("road-button", { key: '902ba9dce53b2b2b050e35a885b92fb16a42c47a', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, disabled: this.readonly, "data-cy": "road-decrease" }, h("road-icon", { key: 'ee45dbae5079038698d0eb8509d55138988ffe8b', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: '14e20d6aacc8562a6a3673cd381a539cfd3334ff', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: 'fb82377f50ab44d6a6f32669af93e8af30908c67', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, disabled: this.readonly, "data-cy": "road-increase" }, h("road-icon", { key: 'ea4d77b9167b9b703037d82c51e2f82fc48e5f69', name: "navigation-add-more", size: this.size, role: "button" }))));
     }
     static get is() { return "road-counter"; }
     static get encapsulation() { return "scoped"; }
@@ -405,6 +405,9 @@ export class Counter {
         return [{
                 "propName": "value",
                 "methodName": "onValueChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "onValueChange"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'road-counter',\n  styleUrl: 'counter.css',\n  scoped: true,\n})\nexport class Counter {\n\n  @Element() el!: HTMLRoadCounterElement;\n\n  iconCounterLess!: HTMLRoadIconElement;\n  inputElement!: HTMLRoadInputElement;\n\n  @State() leftIconClasses: string = \"\";\n  @State() rightIconClasses: string = \"\";\n  @State() isDustbinVisible: boolean = false;\n\n  /**\n   * The id of counter\n   */\n  @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: number;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * The value of the counter.\n   */\n  @Prop() value: number = 1;\n\n  /**\n   * The size of the counter.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' = \"lg\";\n\n  /**\n  * Set to `true` to add the dustbin icon if the value is equal to the min.\n  */\n  @Prop() dustbin: boolean = false;\n\n    /**\n  * Set to `true` to not modify the input field\n  */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Emitted when the plus button is clicked\n   */\n  @Event() roadIncrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadDecrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadChange!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the dustbin is clicked\n  */\n  @Event() roadDustbinClick!: EventEmitter<void>;\n\n  @Watch('value')\n  private onValueChange(valueInput: number) {\n    this.setIsDustbinVisible(valueInput);\n    this.setIconsClasses(valueInput);\n  }\n\n  private setIconsClasses(valueInput?: number) {\n    valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n    this.leftIconClasses = valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n    this.rightIconClasses = this.max && valueInput >= this.max ? \"disabled\" : \"\";\n  }\n\n  private setIsDustbinVisible = (valueInput: number) => {\n    if (valueInput > this.min) {\n      this.isDustbinVisible = false;\n    } else if (this.dustbin) {\n      this.isDustbinVisible = true;\n    }\n    else {\n      this.isDustbinVisible = false;\n    }\n  }\n\n  private increase = () => {\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepUp();\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n    this.roadIncrease.emit({ value: valueInput });\n  };\n\n  private decrease = () => {\n    if(this.isDustbinVisible){\n      this.roadDustbinClick.emit();\n      return;\n    }\n\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepDown();\n\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n\n    this.roadDecrease.emit({ value: valueInput });\n  };\n\n  private checkValue = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n\n    if (value == null || value === \"\") return;\n\n    if (value < this.min) {\n      input.value = this.min.toString()\n    }\n    else if (this.max && value > this.max) {\n      input.value = this.max.toString()\n    }\n\n    this.onValueChange(parseInt(input.value));\n  }\n\n  private onRoadChange = (ev: Event) => {\n    ev.stopPropagation();\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n    if (value !== null && value !== \"\") {\n      if (value < this.min) {\n        this.roadChange.emit({ value: this.min });\n      }\n      else if (this.max && value > this.max) {\n        this.roadChange.emit({ value: this.max });\n      }\n      else {\n        this.roadChange.emit({ value: parseInt(input.value) });\n      }\n    }\n    else {\n      this.roadChange.emit({ value: null });\n    }\n  };\n\n  componentWillLoad() {\n    this.onValueChange(this.value);\n  }\n\n    /** Vérifie et applique le `text-indent` si `prepend` est présent */\n    private updateIndentation() {\n      const hasPrepend = !!this.el.querySelector('[slot=\"prepend\"]');\n      const formControl = this.el.querySelector('.form-control') as HTMLElement;\n      const formLabel = this.el.querySelector('.form-label') as HTMLElement;\n      \n      if (formControl) {\n        formControl.style.textIndent = hasPrepend ? '' : '';\n      }\n      if (formLabel) {\n        formLabel.style.textIndent = hasPrepend ? '' : '';\n      }\n    }\n\n  componentDidLoad() {\n    const buttons = this.el.querySelectorAll('road-button') as NodeListOf<HTMLRoadButtonElement>;\n    this.updateIndentation(); // Appliquer les styles au montage\n    // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)\n    const observer = new MutationObserver(() => this.updateIndentation());\n    observer.observe(this.el, { childList: true, subtree: true });\n\n    // Ajouter les événements pour chaque road-button\n    buttons.forEach((btn) => {\n      btn.addEventListener('touchstart', () => {\n        btn.style.backgroundColor = 'var(--road-button-tertiary-variant)'; // Appliquer le style hover\n      });\n  \n      btn.addEventListener('touchend', () => {\n        btn.style.backgroundColor = 'var(--road-surface)'; // Supprimer le style hover après touchend\n      });\n    });\n\n    // Accessibilité : Cacher le label\n    const label = this.el.querySelector('.form-label') as HTMLElement;\n    const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n    if (label) {\n      label.style.clip = 'rect(0 0 0 0)';\n      label.style.border = '0';\n      label.style.height = '1px';\n      label.style.left = '0';\n      label.style.margin = '-1px';\n      label.style.overflow = 'hidden';\n      label.style.padding = '0';\n      label.style.position = 'absolute';\n      label.style.top = '0';\n      label.style.width = '1px';\n\n      input.style.padding = '0 1rem 0';\n      \n    }\n  }\n\n  render() {\n\n    const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n    return (\n      <road-input-group\n        class={this.size && `counter-${this.size}`}\n      >\n        <road-button\n          slot=\"prepend\"\n          size={this.size}\n          onClick={this.decrease}\n          class={this.leftIconClasses}\n          data-cy=\"road-decrease\"\n        >\n          <road-icon\n            name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n            ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n            size={this.size}\n            data-cy={dataCi}\n            role=\"button\"\n          />\n        </road-button>\n        <road-input\n          ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n          type=\"number\"\n          min={this.min.toString()}\n          max={(this.max && this.max.toString()) as string}\n          step={this.step}\n          value={this.value}\n          onRoadChange={this.onRoadChange}\n          onKeyUp={this.checkValue}\n          data-cy=\"road-input-counter\"\n          readonly={this.readonly}\n          label=\"Quantité\"\n        />\n        <road-button\n          slot=\"append\"\n          size={this.size}\n          onClick={this.increase}\n          class={this.rightIconClasses}\n          data-cy=\"road-increase\"\n        >\n          <road-icon\n            name=\"navigation-add-more\"\n            size={this.size}\n            role=\"button\"\n          />\n        </road-button>\n      </road-input-group>\n    );\n  }\n}\n\nlet counterIds = 0;\n"]}
+{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'road-counter',\n  styleUrl: 'counter.css',\n  scoped: true,\n})\nexport class Counter {\n\n  @Element() el!: HTMLRoadCounterElement;\n\n  iconCounterLess!: HTMLRoadIconElement;\n  inputElement!: HTMLRoadInputElement;\n\n  @State() leftIconClasses: string = \"\";\n  @State() rightIconClasses: string = \"\";\n  @State() isDustbinVisible: boolean = false;\n\n  /**\n   * The id of counter\n   */\n  @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: number;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * The value of the counter.\n   */\n  @Prop() value: number = 1;\n\n  /**\n   * The size of the counter.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' = \"lg\";\n\n  /**\n  * Set to `true` to add the dustbin icon if the value is equal to the min.\n  */\n  @Prop() dustbin: boolean = false;\n\n    /**\n  * Set to `true` to not modify the input field\n  */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Emitted when the plus button is clicked\n   */\n  @Event() roadIncrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadDecrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadChange!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the dustbin is clicked\n  */\n  @Event() roadDustbinClick!: EventEmitter<void>;\n\n  @Watch('value')\n  @Watch('readonly')\n  private onValueChange(valueInput: number) {\n    this.setIsDustbinVisible(valueInput);\n    this.setIconsClasses(valueInput);\n  }\n\n  private setIconsClasses(valueInput?: number) {\n    valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n    this.leftIconClasses = this.readonly || valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n    this.rightIconClasses = this.readonly || this.max && valueInput >= this.max ? \"disabled\" : \"\";\n  }\n\n  private setIsDustbinVisible = (valueInput: number) => {\n    if (valueInput > this.min) {\n      this.isDustbinVisible = false;\n    } else if (this.dustbin) {\n      this.isDustbinVisible = true;\n    }\n    else {\n      this.isDustbinVisible = false;\n    }\n  }\n\n  private increase = () => {\n  const input = this.inputElement.querySelector('input') as HTMLInputElement;\n\n  input.stepUp();\n\n  let valueInput = parseInt(input.value);\n\n  if (isNaN(valueInput)) {\n    valueInput = this.min;\n  }\n\n  this.onValueChange(valueInput);\n  this.roadIncrease.emit({ value: valueInput });\n};\n\nprivate decrease = () => {\n  if (this.isDustbinVisible) {\n    this.roadDustbinClick.emit();\n    return;\n  }\n\n  const input = this.inputElement.querySelector('input') as HTMLInputElement;\n\n  input.stepDown();\n\n  let valueInput = parseInt(input.value);\n\n  if (isNaN(valueInput)) {\n    valueInput = this.min;\n  }\n\n  this.onValueChange(valueInput);\n  this.roadDecrease.emit({ value: valueInput });\n};\n\n  private checkValue = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n\n    if (value == null || value === \"\") return;\n\n    if (value < this.min) {\n      input.value = this.min.toString()\n    }\n    else if (this.max && value > this.max) {\n      input.value = this.max.toString()\n    }\n\n    this.onValueChange(parseInt(input.value));\n  }\n\n  private onRoadChange = (ev: Event) => {\n    ev.stopPropagation();\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n    if (value !== null && value !== \"\") {\n      if (value < this.min) {\n        this.roadChange.emit({ value: this.min });\n      }\n      else if (this.max && value > this.max) {\n        this.roadChange.emit({ value: this.max });\n      }\n      else {\n        this.roadChange.emit({ value: parseInt(input.value) });\n      }\n    }\n    else {\n      this.roadChange.emit({ value: null });\n    }\n  };\n\n  componentWillLoad() {\n    this.onValueChange(this.value);\n  }\n\n    /** Vérifie et applique le `text-indent` si `prepend` est présent */\n    private updateIndentation() {\n      const hasPrepend = !!this.el.querySelector('[slot=\"prepend\"]');\n      const formControl = this.el.querySelector('.form-control') as HTMLElement;\n      const formLabel = this.el.querySelector('.form-label') as HTMLElement;\n      \n      if (formControl) {\n        formControl.style.textIndent = hasPrepend ? '' : '';\n      }\n      if (formLabel) {\n        formLabel.style.textIndent = hasPrepend ? '' : '';\n      }\n    }\n\n  componentDidLoad() {\n    const buttons = this.el.querySelectorAll('road-button') as NodeListOf<HTMLRoadButtonElement>;\n    this.updateIndentation(); // Appliquer les styles au montage\n    // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)\n    const observer = new MutationObserver(() => this.updateIndentation());\n    observer.observe(this.el, { childList: true, subtree: true });\n\n    // Ajouter les événements pour chaque road-button\n    buttons.forEach((btn) => {\n      btn.addEventListener('touchstart', () => {\n        btn.style.backgroundColor = 'var(--road-button-tertiary-variant)'; // Appliquer le style hover\n      });\n  \n      btn.addEventListener('touchend', () => {\n        btn.style.backgroundColor = 'var(--road-surface)'; // Supprimer le style hover après touchend\n      });\n    });\n\n    // Accessibilité : Cacher le label\n    const label = this.el.querySelector('.form-label') as HTMLElement;\n    const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n    if (label) {\n      label.style.clip = 'rect(0 0 0 0)';\n      label.style.border = '0';\n      label.style.height = '1px';\n      label.style.left = '0';\n      label.style.margin = '-1px';\n      label.style.overflow = 'hidden';\n      label.style.padding = '0';\n      label.style.position = 'absolute';\n      label.style.top = '0';\n      label.style.width = '1px';\n\n      input.style.padding = '0 1rem 0';\n      \n    }\n  }\n\n  render() {\n\n    const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n    return (\n      <road-input-group\n        class={this.size && `counter-${this.size}`}\n      >\n        <road-button\n          slot=\"prepend\"\n          size={this.size}\n          onClick={this.decrease}\n          class={this.leftIconClasses}\n          disabled={this.readonly}\n          data-cy=\"road-decrease\"\n        >\n          <road-icon\n            name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n            ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n            size={this.size}\n            data-cy={dataCi}\n            role=\"button\"\n          />\n        </road-button>\n        <road-input\n          ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n          type=\"number\"\n          min={this.min.toString()}\n          max={(this.max && this.max.toString()) as string}\n          step={this.step}\n          value={this.value}\n          onRoadChange={this.onRoadChange}\n          onKeyUp={this.checkValue}\n          data-cy=\"road-input-counter\"\n          readonly={this.readonly}\n          label=\"Quantité\"\n        />\n        <road-button\n          slot=\"append\"\n          size={this.size}\n          onClick={this.increase}\n          class={this.rightIconClasses}\n          disabled={this.readonly}\n          data-cy=\"road-increase\"\n        >\n          <road-icon\n            name=\"navigation-add-more\"\n            size={this.size}\n            role=\"button\"\n          />\n        </road-button>\n      </road-input-group>\n    );\n  }\n}\n\nlet counterIds = 0;\n"]}

package/dist/collection/components/dialog/dialog.js

@@ -85,11 +85,11 @@ export class Dialog {
                     break;
             }
         }
-        return (h(Host, { key: 'e2ee13cb0fd6330b23224504c717efe8c68df097', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, h("div", { key: 'c5f3ecaae31debea9afe6a712308520cd092fc23', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), h("div", { key: 'b28e1225a56208c8ff7891856a49b171bf09f88b', class: "dialog-modal", role: "document", tabindex: "0" }, h("div", { key: 'd799e1b00205d54e96e52f2e95b63e4c4327db2f', class: "dialog-content" }, h("header", { key: 'a3d16ae59ee42a9a61f4849c779dbf2f2a8066c9', class: "dialog-header" }, this.hasCloseIcon
+        return (h(Host, { key: '81a8f90ed4049e3485a6ab736accc9fec67d7594', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, h("div", { key: 'b3225223c0bca4133cf60a748903c1b3011b8760', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), h("div", { key: '1488377ca21798d95a54384268a0d365ba54b8ff', class: "dialog-modal", role: "document", tabindex: "0" }, h("div", { key: '3ed4499f0462bedb809118f5ba134930cdd3f0fe', class: "dialog-content" }, h("header", { key: '9179af253c0babbbd378200dc0b6e53a54421fbd', class: "dialog-header" }, this.hasCloseIcon
             ? h("button", { type: "button", class: "dialog-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))
-            : ''), h("div", { key: 'fadeb8d0776e92809c1f4fdda9d24fe325640103', class: "dialog-body" }, this.color !== undefined
+            : ''), h("div", { key: '5c1f4459f65cf0864a4bf257bef0f6682a9ae2c4', class: "dialog-body" }, this.color !== undefined
             ? h("road-icon", { class: "dialog-icon", part: "dialog-icon", color: this.color, icon: icon, "aria-hidden": "true" })
-            : '', h("h2", { key: '06cbf8264b6336cb98b19e7bda1a80fb7d7a9271', class: "dialog-title" }, this.label), h("p", { key: 'f82e151b413764289e3d430b76d987a8eaa1d7b3', class: "dialog-description", id: "dialogDesc" }, this.description)), h("footer", { key: 'cbc9e71ad7aed7eab7bca5d9818dcbceb3cbcce2', class: "dialog-footer" }, h("slot", { key: '41d4e4dd47ecf92e96396316e27ff8218ced5f2c' }))))));
+            : '', h("h2", { key: 'ff143f65b583d0aeed73ea249c5091b8c9e5d64c', class: "dialog-title" }, this.label), h("p", { key: 'f404363a6ba5af84300d506b391d986dcd87080a', class: "dialog-description", id: "dialogDesc" }, this.description)), h("footer", { key: '50947ca23bb9e9bd5a71c9c48a793f79e3096c89', class: "dialog-footer" }, h("slot", { key: '87bcb8232aaba76e3ea703777d67abe220980ed1' }))))));
     }
     static get is() { return "road-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.js

@@ -159,6 +159,9 @@ export class Drawer {
                 getShadowRoot: true,
             },
         });
+        if (this.isOpen) {
+            this.handleOpen(true);
+        }
     }
     render() {
         var _a, _b, _c, _d;
@@ -174,7 +177,7 @@ export class Drawer {
         const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
         const footerSlotElement = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('slot[name="footer"]');
         const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;
-        return (h(Host, { key: '7af3b4a88f0a363c855326f7d16dd3ad61e33f77', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '8e53b924d59c397e1e00ab08fa4db306d5922add', class: "road-drawer-wrapper" }, h("div", { key: '860bc071a169c65f2e0b3887126c6107b77e37d1', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'c3fbf6f148733f1f52fcae529b1080c1dbd28840', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '0edcecc7ab673fe11a1378860396c6c6c5ee7612', class: "drawer-content" }, h("header", { key: '39b86a4cb7bfbe7ec148ca2a54b8ca2f238a8a03', 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: '323e24993c0c3a136e38bf4878f1b0813cfa7c25', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'd99631b6d2635dbc5e73f30c2ff1617ee198fd23' })), h("footer", { key: 'c900c6d0f86425c86e8c877e9312f294228c98e2', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '5a582bb9cb0035f35f7040d664305735f8ae933f', name: "footer" })))))));
+        return (h(Host, { key: 'f204c79488e3496f2b5de75bdbaf8af4a7912306', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'c75f6462bd7f7451d17784b72fb94ec343fe88f9', class: "road-drawer-wrapper" }, h("div", { key: '2e5df3a95fa7344dfbe103e05714c74646f68c3c', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'dfc325bb20bebcc1cb41902d5acbd28b2b662d01', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: 'efdf2daad76553c2b4d0df35353865abd29a170c', class: "drawer-content" }, h("header", { key: '96cefa87d0a69594d2add43cbffa6cbbd6a491d9', 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: 'd5d13d447d46cd6e1df289a217aa8422e100afa7', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '5d9aefc4ccbff803e332fd55998fb20b141b272d' })), h("footer", { key: '767203a6ffdf081888a7d43f0e840598513832b6', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '7d67cff86df04ba7c0c694e88d982abc2e08da5b', name: "footer" })))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set removePadding property to true to remove padding for drawer body\n   */\n  @Prop({ mutable: true }) removePadding: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n   /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabel?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n    @Prop() ariaLabelBack?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabelClose?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Override focus trap\n   */\n  @Prop() enabledFocusTrap: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Focus trap state\n   */\n  @State() focusTrap?: FocusTrap;\n\n  /**\n   * Footer Content state\n   */\n  @State() hasFooterContent = false;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  /**\n   * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n   */\n  @Watch('enabledFocusTrap')\n  handleFocusTrapProp(value: boolean) {\n    if (value) {\n      this.focusTrap?.unpause();\n    } else {\n      this.focusTrap?.pause();\n    }\n  }\n\n  // @Watch('isOpen')\n  // handleOpen(openValue: boolean) {\n  //   if(openValue === true) {\n  //     this.onOpen.emit();\n  //   } else {\n  //     this.el.addEventListener('transitionend', () => {\n  //       this.onClose.emit();\n  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n  //     }, { once: true});\n  //   }\n  // }\n\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n      // Focus the first button element after the drawer is opened then focus trap\n      setTimeout(() => {\n        this.focusFirstElement();\n        this.focusTrap?.activate();\n      }, 50); // Add a slight delay to ensure the element is rendered\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.focusTrap?.deactivate();\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true });\n    }\n  }\n\n  /**\n   * Find and focus the first element in the drawer\n   */\n  private focusFirstElement() {\n    const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n\n    if (firstElement) {\n      firstElement.focus();\n    }\n  }\n\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n\n    const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n    this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n      onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n      onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n      tabbableOptions: {\n        getShadowRoot: true,\n      },\n    });\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel ?? 'drawer';\n    const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n    const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n    const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? (\n      <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n        <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n        {this.backText}\n      </button>\n    ) : null;\n    const closeIconElement = this.hasCloseIcon ? (\n      <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n        <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n      </button>\n    ) : null;\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n\n    const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n    const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n\n    return (\n      <Host class={`${drawerIsOpenClass}  drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n        <div class=\"road-drawer-wrapper\">\n          <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n          <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\">\n            <div class=\"drawer-content\">\n              <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n                {backIconElement}\n                {this.drawerTitle ? (\n                  <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n                ) : (\n                  <div class=\"drawer-title\">\n                    <slot name=\"title\" />\n                  </div>\n                )}\n                {closeIconElement}\n              </header>\n              <div class={`drawer-body ${removePaddingClass}`}>\n                <slot />\n              </div>\n              <footer class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n                <slot name=\"footer\" />\n              </footer>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set removePadding property to true to remove padding for drawer body\n   */\n  @Prop({ mutable: true }) removePadding: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n  /**\n  * Aria label of the drawer\n  */\n  @Prop() ariaLabel?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n  @Prop() ariaLabelBack?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n  @Prop() ariaLabelClose?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Override focus trap\n   */\n  @Prop() enabledFocusTrap: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Focus trap state\n   */\n  @State() focusTrap?: FocusTrap;\n\n  /**\n   * Footer Content state\n   */\n  @State() hasFooterContent = false;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  /**\n   * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n   */\n  @Watch('enabledFocusTrap')\n  handleFocusTrapProp(value: boolean) {\n    if (value) {\n      this.focusTrap?.unpause();\n    } else {\n      this.focusTrap?.pause();\n    }\n  }\n\n  // @Watch('isOpen')\n  // handleOpen(openValue: boolean) {\n  //   if(openValue === true) {\n  //     this.onOpen.emit();\n  //   } else {\n  //     this.el.addEventListener('transitionend', () => {\n  //       this.onClose.emit();\n  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n  //     }, { once: true});\n  //   }\n  // }\n\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if (openValue === true) {\n      this.onOpen.emit();\n      // Focus the first button element after the drawer is opened then focus trap\n      setTimeout(() => {\n        this.focusFirstElement();\n        this.focusTrap?.activate();\n      }, 50); // Add a slight delay to ensure the element is rendered\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.focusTrap?.deactivate();\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true });\n    }\n  }\n\n  /**\n   * Find and focus the first element in the drawer\n   */\n  private focusFirstElement() {\n    const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n\n    if (firstElement) {\n      firstElement.focus();\n    }\n  }\n\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n\n    const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n    this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n      onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n      onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n      tabbableOptions: {\n        getShadowRoot: true,\n      },\n    });\n    if (this.isOpen) {\n      this.handleOpen(true);\n    }\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel ?? 'drawer';\n    const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n    const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n    const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? (\n      <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n        <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n        {this.backText}\n      </button>\n    ) : null;\n    const closeIconElement = this.hasCloseIcon ? (\n      <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n        <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n      </button>\n    ) : null;\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n\n    const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n    const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n\n    return (\n      <Host class={`${drawerIsOpenClass}  drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n        <div class=\"road-drawer-wrapper\">\n          <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n          <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\">\n            <div class=\"drawer-content\">\n              <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n                {backIconElement}\n                {this.drawerTitle ? (\n                  <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n                ) : (\n                  <div class=\"drawer-title\">\n                    <slot name=\"title\" />\n                  </div>\n                )}\n                {closeIconElement}\n              </header>\n              <div class={`drawer-body ${removePaddingClass}`}>\n                <slot />\n              </div>\n              <footer class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n                <slot name=\"footer\" />\n              </footer>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/dropdown/dropdown.js

@@ -23,7 +23,7 @@ export class Dropdown {
         const positionClass = this.position ? `position-${this.position}` : '';
         const dropdownClass = this.position ? `dropdown-${this.position}` : '';
         const directionClass = this.direction ? `direction-${this.direction}` : '';
-        return (h("details", { key: '369ce1cfb90f00ccdf3a513b074871f74587ea60', class: "dropdown", open: this.isOpen }, h("summary", { key: '7892d1f9a8dd3167d3894b3c8cd2f2ee3feda8f4', "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, h("div", { key: 'a24ca536cf7f3e6cf44c46f6dae355d527224570', class: `d-flex ${positionClass}` }, h("div", { key: '1e7ba5b51a68a4b0c79cd7bf256853dfa4b8ab3a', class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { key: '64256d8c446025fa7199fbb7cda0777cf02c46c9', name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), h("div", { key: 'b2020719de2304d5c4f606ed3f306aaf4f8a382a', class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { key: 'ee017bc6678acc0f8770a5c52921d8f886f35aa6', name: "list" }))));
+        return (h("details", { key: '96f98a43d15a43bc4e48354d0ad9734ca502455a', class: "dropdown", open: this.isOpen }, h("summary", { key: 'af1ff26056eaf4b6b3ff57cd9308b0f630f42ed1', "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, h("div", { key: '9e2149f6901a9b9f6b0b946336c8f037f35b1a12', class: `d-flex ${positionClass}` }, h("div", { key: 'cc34ac31554224da891175c86ddc4fb0e824a509', class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { key: '25fb15d3fd97ce75d77da1a3cce8f968d76b7ecf', name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), h("div", { key: '5d2e08dbd8e1d58eb6f94b2e6f4ae438d48b0ec5', class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { key: '441c9b8f8177a90ca9d9b26ea2e0f6eab8eda176', name: "list" }))));
     }
     static get is() { return "road-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/duration/duration.js

@@ -42,7 +42,7 @@ export class Duration {
         this.isOpen = false;
     }
     render() {
-        return (h("road-drawer", { key: '17db42f462da76b54a24eb6dd52a0ce637be4c86', "is-open": this.isOpen, position: "bottom", "drawer-title": this.header }, h("road-grid", { key: '51fb1715dc70ffe94e82e171db3759c308c562e4' }, h("road-row", { key: 'a4b5d1e6489f39bb6bc698c7beadf5135d46e3e9', class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => h("road-col", { class: "col-3 col-md-2" }, h("road-card", { button: true, value: item }, h("road-label", null, Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }), ":", (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
+        return (h("road-drawer", { key: '535f8253ed4077add28d3ef7089c41e292ef7d78', "is-open": this.isOpen, position: "bottom", "drawer-title": this.header }, h("road-grid", { key: '0b82c91ceb9d64ff3e0ff1462d1197f7607de643' }, h("road-row", { key: '0913921ee3b390f33a84b5a008665381e2d8bcea', class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => h("road-col", { class: "col-3 col-md-2" }, h("road-card", { button: true, value: item }, h("road-label", null, Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }), ":", (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
     }
     static get is() { return "road-duration"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/flap/flap.js

@@ -19,7 +19,7 @@ export class Flap {
     }
     render() {
         const colorClass = this.filled ? `flap-${this.color}-filled` : `flap-${this.color}`;
-        return (h(Host, { key: '17654f70a4f17fb19164ebb3f29ca576768cda54', class: `${colorClass} flap-${this.size}` }, h("slot", { key: '06d531af72c1d328976fcc23f9877da54e39b667' })));
+        return (h(Host, { key: 'd20f1aff196fce6d4b5a0abc93c412a8eb25a074', class: `${colorClass} flap-${this.size}` }, h("slot", { key: '0be62bb6925782d1109981adbb67de911bcb29f3' })));
     }
     static get is() { return "road-flap"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/global-navigation/global-navigation.js

@@ -21,7 +21,7 @@ export class GlobalNavigation {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '3153f9036b6fcbf625b4b6c2fb22dc270b20ac58', role: "application" }, h("slot", { key: '5bc133bc9abe1abcae66c1247215c1884ead0a3c' })));
+        return (h(Host, { key: '72901e74098db281d77f4200a744a63968f2e28c', role: "application" }, h("slot", { key: '6b70d101f1d30a6888dd4176ac87bdc37bb9dd06' })));
     }
     static get is() { return "road-global-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/global-navigation-v2/global-navigation-v2.js

@@ -122,7 +122,7 @@ export class GlobalNavigationV2 {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '71284cfbbb2297134bfed397d45af88fc035d95f', role: "application" }, h("slot", { key: '04c47f8f5c69d72ef7c74e405037deeba4aa6019' })));
+        return (h(Host, { key: 'f4fb2c22034b13b4937635c6427ce6a1db6da363', role: "application" }, h("slot", { key: 'efc105887ec5a4f4ae417d075c30d6b9816b4850' })));
     }
     static get is() { return "road-global-navigation-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Grid {
     render() {
-        return (h("slot", { key: 'c40d139aa872024144528faafb114db1d2d8af13' }));
+        return (h("slot", { key: '481ff02c6cce323a2546465805705e98c6ad0e98' }));
     }
     static get is() { return "road-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/img/img.js

@@ -58,7 +58,7 @@ export class Img {
     }
     render() {
         const placeholder = this.loadSrc !== undefined ? '' : 'placeholder';
-        return (h(Host, { key: 'f059a8a30c536d517219ac57c2fb085a669cfcef', class: placeholder }, h("img", { key: 'c624708aaa39e50e26bfe1725225b6038949ad5b', class: "native-img", decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
+        return (h(Host, { key: 'b62aaf9dd6afc9ce4727cd12375f1c4b760f41f2', class: placeholder }, h("img", { key: 'e0fca9d6cf0b015e9d6be7d24b37eb7812814897', class: "native-img", decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
     }
     static get is() { return "road-img"; }
     static get encapsulation() { return "shadow"; }

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

@@ -213,11 +213,11 @@ export class Input {
         const lessLabelClass = this.label !== '' ? '' : 'less-label';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
         const isValidClass = this.success == true ? 'is-valid' : '';
-        return (h(Host, { key: 'bd525f68b22069ef4874cef77a96a1f724b0129c', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '9bae71920e835479725c6e37f0af8bc1ab93b7f5', class: `form-control ${hasValueClass} ${isInvalidClass} ${isValidClass} ${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, list: this.list, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: '6637aff56cf6623099279d43dbd780fa1004da2f', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
+        return (h(Host, { key: 'be099a0ea8338c8c4ed1ad3e73b0036156410d9e', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '6bdc1d4f3648314134cd7790804430ca4292c5cd', class: `form-control ${hasValueClass} ${isInvalidClass} ${isValidClass} ${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, list: this.list, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: '38884ef3e266eece5f45a3746ab366fd5aa2810c', 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: '4add98d493556fddf6502dfc16516a5aa4df9a4b', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: 'd519756096faac3491e26829408089e7ba94cca8', name: "checklistPassword" })));
+                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: 'eda924baf7920edab4432565e020d8f21a5f70f1', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: '52dbaeb8362e4949c48297ba32ae331143044f78', name: "checklistPassword" })));
     }
     static get is() { return "road-input"; }
     static get encapsulation() { return "scoped"; }