@roadtrip/components 3.34.0 → 3.36.0

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

@@ -0,0 +1,253 @@
+import { Host, h, } from "@stencil/core";
+import "./../../utils/polyfill";
+export class RadioCard {
+    constructor() {
+        this.disabled = false;
+        this.selected = false;
+        this.inline = true;
+        this.isSelected = false;
+        this.onFocus = () => {
+            this.roadfocus.emit();
+        };
+        this.onBlur = () => {
+            this.roadblur.emit();
+        };
+        this.onClick = () => {
+            var _a;
+            if (this.disabled)
+                return;
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.click();
+            this.roadchange.emit(this.value);
+            window.dispatchEvent(new CustomEvent('road-radio-selected', {
+                detail: {
+                    name: this.name,
+                    value: this.value,
+                },
+            }));
+        };
+        this.onRadioSelected = (event) => {
+            const { name, value } = event.detail;
+            if (name === this.name) {
+                this.isSelected = value === this.value;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.radioId = `road-radio-${RadioCard.idCounter++}`;
+        if (!this.name) {
+            this.name = this.radioId;
+        }
+        if (!this.label) {
+            this.label = `${this.radioId}-label`;
+        }
+    }
+    handleRadioSelected(event) {
+        this.onRadioSelected(event);
+    }
+    render() {
+        const labelId = `${this.radioId}-label`;
+        const inlineClass = this.inline ? 'form-radio-inline' : '';
+        const selectedClass = this.isSelected || this.selected ? 'radio-card-selected' : '';
+        const disabledClass = this.disabled ? 'radio-card-disabled' : '';
+        return (h(Host, { key: '92d10e0e857fa618b651d09d684760345ebcab09', class: `form-radio ${inlineClass}` }, h("div", { key: 'fcdabc5a9f337d8bd1e8a1bf7f3918bd65fa3b61', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: 'cab960932990c7b41e248fd45e11f05f0ba946ad', ref: el => this.inputEl = el, class: "form-radio-input", type: "radio", id: this.radioId, name: this.name, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, checked: this.isSelected || this.selected, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onChange: () => { } }), h("label", { key: '9fbd563bb0d0ceb76374f8fdd961a0ae945cfd3b', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: 'a66f46c0b7d566492eb791a14a1dc5f37fe1d98c', class: "slot-wrapper" }, h("slot", { key: '2571e75dc92853a6f14ddb8c7c829ce4d3537ae5' }))))));
+    }
+    static get is() { return "road-radio-card"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any | null",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inline",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isSelected": {},
+            "radioId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "roadfocus",
+                "name": "roadfocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "roadblur",
+                "name": "roadblur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "roadchange",
+                "name": "roadchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "road-radio-selected",
+                "method": "handleRadioSelected",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+RadioCard.idCounter = 0;
+//# sourceMappingURL=radio-card.js.map

package/dist/collection/components/radio-card/radio-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card.js","sourceRoot":"","sources":["../../../src/components/radio-card/radio-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from '@stencil/core';\nimport './../../utils/polyfill';\n\n\n@Component({\n  tag: 'road-radio-card',\n  styleUrl: 'radio-card.css',\n  scoped: true,\n})\nexport class RadioCard {\n  private inputEl?: HTMLInputElement;\n\n  @Element() el!: HTMLRoadRadioCardElement;\n\n  private static idCounter = 0;\n\n  @Prop() name?: string;\n  @Prop() disabled: boolean = false;\n  @Prop() selected: boolean = false;\n  @Prop() value?: any | null;\n  @Prop() label?: string;\n  @Prop() inline: boolean = true;\n\n  @State() isSelected: boolean = false;\n  @State() radioId!: string;\n\n  @Event() roadfocus!: EventEmitter<void>;\n  \n  @Event() roadblur!: EventEmitter<void>;\n  @Event() roadchange!: EventEmitter<any>;\n\n  componentWillLoad() {\n    this.radioId = `road-radio-${RadioCard.idCounter++}`;\n    if (!this.name) {\n      this.name = this.radioId;\n    }\n    if (!this.label) {\n      this.label = `${this.radioId}-label`;\n    }\n  }\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n  };\n\n  private onClick = () => {\n    if (this.disabled) return;\n\n    this.inputEl?.click();\n    this.roadchange.emit(this.value);\n\n    window.dispatchEvent(new CustomEvent('road-radio-selected', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n    }));\n  };\n\n  private onRadioSelected = (event: CustomEvent) => {\n    const { name, value } = event.detail;\n\n    if (name === this.name) {\n      this.isSelected = value === this.value;\n    }\n  };\n\n  @Listen('road-radio-selected', { target: 'window' })\n  handleRadioSelected(event: CustomEvent) {\n    this.onRadioSelected(event);\n  }\n\n  render() {\n    const labelId = `${this.radioId}-label`;\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n    const selectedClass = this.isSelected || this.selected ? 'radio-card-selected' : '';\n    const disabledClass = this.disabled ? 'radio-card-disabled' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <div class={`radio-card ${selectedClass}  ${disabledClass}`} onClick={this.onClick}>\n          <input\n            ref={el => this.inputEl = el}\n            class=\"form-radio-input\"\n            type=\"radio\"\n            id={this.radioId}\n            name={this.name}\n            disabled={this.disabled}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            checked={this.isSelected || this.selected}\n            aria-labelledby={labelId}\n            value={this.value}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={() => {}}\n          />\n          <label class=\"form-radio-label\" htmlFor={this.radioId} id={labelId}>\n            <div class=\"slot-wrapper\">\n              <slot />\n            </div>\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-card/radio-card.stories.js

@@ -0,0 +1,90 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+export default {
+  title: 'Forms/Radio Card',
+  component: 'road-radio-card',
+  subcomponents: {
+    'road-radio-group': 'road-radio-group',
+  },
+  parameters: {
+    actions: {
+      handles: ['roadblur', 'roadfocus'],
+    },
+    docs: {
+      description: {
+        component: 'A radio is used in a `radio-group`. It allows a user to select at most one radio button from a set.',
+      },
+    },
+  },
+};
+
+export const Playground = (args) => html`
+  <road-radio-group 
+    name=${ifDefined(args.name)}
+    label="Label of radio group"
+    .asterisk=${args.asterisk}
+    @roadchange=${(event) => args.roadchange?.(event.detail.value)}
+  >
+    <road-radio-card
+      .disabled=${args.disabled}
+      .selected=${args.selected}
+      label=${ifDefined(args.label)}
+      value=${ifDefined(args.value)}
+      radio-id=${ifDefined(args['radio-id'])}
+    >
+      ${unsafeHTML(args.slotContent)}
+    </road-radio-card>
+  </road-radio-group>
+`;
+
+Playground.args = {
+  disabled: false,
+  selected: false,
+  label: 'Label',
+  value: 'on',
+  asterisk: false,
+  name: 'radio-group-name',
+  'radio-id': '',
+  slotContent: `<span>Contenu dans la card</span>`,
+};
+
+Playground.argTypes = {
+  disabled: { control: 'boolean' },
+  selected: { control: 'boolean' },
+  asterisk: { control: 'boolean' },
+  label: { control: 'text' },
+  value: { control: 'text' },
+  name: { control: 'text' },
+  'radio-id': { control: 'text' },
+  slotContent: {
+    control: 'text',
+    name: 'Slot Content',
+    description: 'HTML content rendered inside the radio card',
+  },
+  roadblur: {
+    action: 'roadblur',
+    description: "Emitted when the radio button loses focus.",
+    table: {
+      category: 'Events',
+      type: { summary: 'CustomEvent' },
+    },
+  },
+  roadfocus: {
+    action: 'roadfocus',
+    description: "Emitted when the radio button has focus.",
+    table: {
+      category: 'Events',
+      type: { summary: 'CustomEvent' },
+    },
+  },
+  roadchange: {
+    action: 'roadchange',
+    description: "Emitted when the value has changed.",
+    table: {
+      category: 'Events',
+      type: { summary: 'CustomEvent' },
+    },
+  },
+};

package/dist/collection/components/radio-group/radio-group.js

@@ -40,9 +40,16 @@ export class RadioGroup {
         };
     }
     valueChanged(value) {
+        this.updateRadios();
         this.roadchange.emit({ value });
         this.roadChange.emit({ value });
     }
+    updateRadios() {
+        const radios = this.el.querySelectorAll('road-radio-card');
+        radios.forEach(radio => {
+            radio.checked = (radio.getAttribute('value') === this.value);
+        });
+    }
     errorChanged() {
         if (this.error !== undefined && this.error !== '') {
             this.el.querySelectorAll('road-radio').forEach(item => item.error = true);
@@ -59,7 +66,7 @@ export class RadioGroup {
     render() {
         const labelId = `${this.radioGroupId}-label`;
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '4bdcce655bfa14696ea85dc3bebf8cb0211d872b', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: '7882a85ab9d9e4be07b7ae08ec986d1cd3073951', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: 'c5d121db534b7e207aa4b60c8c9534399ed2edf7', class: "asterisk" }, "*")), h("slot", { key: 'e4fb2070693e91af8772c8d2ed556b6c6b09bda7' }), this.error && this.error !== '' && h("p", { key: '361cfc55ad976730645f88e1a3b0d75da7d34a5f', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '2e6c420d699283ef203e264995a06b514ce9da7a', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'c0b1fc909fda6bc68c01adf993b30807f18a0486', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: 'f23d2998fd001549361d2540a9af9fac62e0754e', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '299ccd95c783db7768589f92db60ba14b3c1026e', class: "asterisk" }, "*")), h("slot", { key: '8ab9f52912fab8c99c610b4ffb2f7f316d9c8e21' }), this.error && this.error !== '' && h("p", { key: '9ff0060878567d4b45487f5986e46d57a11c2876', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'd081883688e4279ec03663cf595a555f7e9e8304', class: "helper" }, this.helper)));
     }
     static get is() { return "road-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n/**\n * @slot  - Used to add multiple radio components.\n */\n\n@Component({\n  tag: 'road-radio-group',\n  styleUrl: 'radio-group.css',\n  scoped: true,\n})\nexport class RadioGroup {\n\n  @Element() el!: HTMLRoadRadioGroupElement;\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() radioGroupId: string = `road-radio-group-${radioGroupIds++}`;\n\n  /**\n   * If `true`, the radios can be deselected.\n   */\n  @Prop() allowEmptySelection = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioGroupId;\n\n  /**\n   * the value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string;\n\n  /**\n   * add an asterisk to the label of the field\n   */\n   @Prop() asterisk?: boolean = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop({reflect: true}) ariaLabel: string = `${this.radioGroupId}-label`;\n\n  /**\n   * Error message for the radio group\n   */\n  @Prop({ mutable: true }) error?: string;\n\n  /**\n   * Helper message for the radio group\n   */\n  @Prop() helper?: string;\n\n  @Watch('value')\n  valueChanged(value: any | undefined) {\n    this.roadchange.emit({ value });\n    this.roadChange.emit({ value });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  private onClick = (ev: Event) => {\n    const selectedRadio = ev.target && (ev.target as HTMLElement).closest('road-radio');\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = (selectedRadio as HTMLRoadRadioElement).value;\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else if (this.allowEmptySelection) {\n        this.value = undefined;\n      }\n      this.error = undefined;\n    }\n  };\n\n  @Watch('error')\n  errorChanged() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    } else {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = false);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    }\n  }\n\n  render() {\n    const labelId = `${this.radioGroupId}-label`;\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        class={`form-group ${isInvalidClass}`}\n        aria-label={this.ariaLabel}\n        onClick={this.onClick}\n      >\n        {this.label && <p class=\"text-content\" id={labelId}>{this.label} {this.asterisk && <span class=\"asterisk\">*</span>}</p>}\n        <slot/>\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 radioGroupIds = 0;\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n/**\n * @slot  - Used to add multiple radio components.\n */\n\n@Component({\n  tag: 'road-radio-group',\n  styleUrl: 'radio-group.css',\n  scoped: true,\n})\nexport class RadioGroup {\n\n  @Element() el!: HTMLRoadRadioGroupElement;\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() radioGroupId: string = `road-radio-group-${radioGroupIds++}`;\n\n  /**\n   * If `true`, the radios can be deselected.\n   */\n  @Prop() allowEmptySelection = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioGroupId;\n\n  /**\n   * the value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string;\n\n  /**\n   * add an asterisk to the label of the field\n   */\n   @Prop() asterisk?: boolean = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop({reflect: true}) ariaLabel: string = `${this.radioGroupId}-label`;\n\n  /**\n   * Error message for the radio group\n   */\n  @Prop({ mutable: true }) error?: string;\n\n  /**\n   * Helper message for the radio group\n   */\n  @Prop() helper?: string;\n\n  @Watch('value')\n  valueChanged(value: any | undefined) {\n    this.updateRadios();\n    this.roadchange.emit({ value });\n    this.roadChange.emit({ value });\n  }\n  \n  private updateRadios() {\n    const radios = this.el.querySelectorAll('road-radio-card');\n    radios.forEach(radio => {\n      (radio as any).checked = (radio.getAttribute('value') === this.value);\n    });\n  }\n  \n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  private onClick = (ev: Event) => {\n    const selectedRadio = ev.target && (ev.target as HTMLElement).closest('road-radio');\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = (selectedRadio as HTMLRoadRadioElement).value;\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else if (this.allowEmptySelection) {\n        this.value = undefined;\n      }\n      this.error = undefined;\n    }\n  };\n\n  @Watch('error')\n  errorChanged() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    } else {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = false);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    }\n  }\n\n  render() {\n    const labelId = `${this.radioGroupId}-label`;\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        class={`form-group ${isInvalidClass}`}\n        aria-label={this.ariaLabel}\n        onClick={this.onClick}\n      >\n        {this.label && <p class=\"text-content\" id={labelId}>{this.label} {this.asterisk && <span class=\"asterisk\">*</span>}</p>}\n        <slot/>\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 radioGroupIds = 0;\n"]}

package/dist/collection/components/range/range.js

@@ -95,14 +95,14 @@ export class Range {
     render() {
         const value = this.getValue();
         const datalist = this.showLabels !== undefined ? `tickmarks` : "";
-        return (h(Host, { key: 'b9bf2e10c86f928712def9dd10e123bf6bd62d46', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: '9e6c1bac87a60accb176f416726a63319f1e00a2', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '0c9947463651c065b386fb126a646f39359f32cd', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'f792239e07e2fb7c7a5c8c6b6629e199ce24d560', class: "form-range", style: {
+        return (h(Host, { key: 'f1486d106b3d7013b3e6b1d99d646c70127dbbdd', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: 'fd44d0ce903ba469fc2142a19b049676fddd2005', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '723c5da5321440524ffb5cf69ed2d71196996541', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: '4653394e0dcfa7d452236f57bd2052ac9928007f', class: "form-range", style: {
                 "--min": this.min,
                 "--max": this.max,
                 "--value": value,
                 "--background-color": this.disabled
                     ? "var(--road-surface-disabled)"
                     : "initial",
-            } }, this.showValue && h("output", { key: '7468eb63d48e3dd4add1dbdb72b4a29eaa6644ea' }), this.showLabels && h("slot", { key: '77d9511bc01e48d1cef2f577fdb5d6d2782d756b', name: "datalist" }), h("input", { key: 'dcba864aaaf01686c7205b33f49f0437aff45efc', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: 'a524dd016f0236cfc053e415a118fed7960515ea', class: "form-range-label" }, "Valeur"), h("div", { key: 'ca307d8df415ed2a77b7774791387f5bd6ab5d14', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: 'f2a35383d6cbae76a337b78b53cd9ffa15a7daef', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
+            } }, this.showValue && h("output", { key: '2d3504f149aeba0bca77b7a7d03ac3fb9f3267b1' }), this.showLabels && h("slot", { key: '45c91307a659459919e67f022766bf98189a4511', name: "datalist" }), h("input", { key: '0cc864289e5c44b2dac2521af90b00dfa1d0625c', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: '97c50d5a81be438d34f23223ef1e5acdafcbc1b2', class: "form-range-label" }, "Valeur"), h("div", { key: '92568d77bdbb044f66f0f5557ba81673836bd433', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '2587580ec2c19de6d2cf799e4a39bd02c555d19a', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
     }
     static get is() { return "road-range"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/rating/rating.js

@@ -37,7 +37,7 @@ export class Rating {
         const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
         const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
         const readOnly = this.readonly == true ? `readonly` : '';
-        return (h(Host, { key: '3384a50bdc4f0dc8d992ca8160dbe77a8c6ed891' }, h("div", { key: 'f905f3c7c16744d6bd8c34c31e2bec493169b71f', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: '3f973733bb91d8243a84d4b12708a69921858fff', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '66f1c7954279baba6b9be9e40af220f77c42cd8f', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (h(Host, { key: '85efd8ef2ccfcecd3740e72a5ba7ce4760e0d9d6' }, h("div", { key: 'eab49904c7777e7f760d8ea79d970a76f0e1e32d', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: 'd63c93743802e7fd5cb49c972bc39802eb6ee586', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '57ca56a99dfa88b79b242a6b1ab92c08596bd0a8', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
     }
     static get is() { return "road-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: '4d56e5a10387b76a5b9848b29b66b5d1893c1b39' }, h("slot", { key: 'ba686ef7958ff67384c6ca8d88767f1dd55e9f5a' })));
+        return (h(Host, { key: '6ee0a00bc04c580a827d19c99ec3e818d6def582' }, h("slot", { key: '6ad15bc804554c3e72dec334b40d7d28e277e92f' })));
     }
     static get is() { return "road-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,10 +52,10 @@ export class SegmentedButton {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: 'ea3ccb61b3e95bb8b266e1e47ecbd5a795a78f62', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '6433591d09a54719de64718201a2a51ad79ae28b', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 [`${sizeClass}`]: true,
-            } }, h("span", { key: 'f32414ad539917d0266447d41411eae0cd1f5926', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", { key: '2a6270a073b709201505490b242e9b2425745779' }))));
+            } }, h("span", { key: 'f3e0bf769c686b17171afe0130ac5e4736aa2ff4', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", { key: '496201687fa4e9138d1a817215c4c90255f7232c' }))));
     }
     static get is() { return "road-segmented-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-button-bar/segmented-button-bar.js

@@ -18,7 +18,7 @@ export class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '2427e30d3c49f36fcf017f1312d92b46b92e5f13', role: "tablist" }, h("slot", { key: '7e058b2ec325091ec5e30f0db30d893547e13e49' })));
+        return (h(Host, { key: 'afd642615f117aadf941aa07e1006b87bc7af6ee', role: "tablist" }, h("slot", { key: '331b574bb64568dc247cd9789232d4dffebec937' })));
     }
     static get is() { return "road-segmented-button-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,7 +86,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: 'dc63c94596a53cd134f9327dd7fafcf70b94486b', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'cd32b915b40f0d0ae2a5bd377a68f9ce4e41d363', name: "top" }), h("slot", { key: 'cfb4c62f06a98490ca37f27038737174641c8d4d' })));
+        return (h(Host, { key: '0fe1c4ddf4b2d269ed66c456e411263d8de29c3f', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'da756417993e0157ed3a7a4dda96abcdfc3d6c05', name: "top" }), h("slot", { key: '37678b31b482735d1a1cc5ed2c37f4a8d4d7ee4b' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,7 +92,7 @@ export class Select {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'd4d455ace814f7a19cb9e683fb103f43b6d4783b', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '4432e042ced51b80b81832e8495e1dd060fc7952', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '2244f8e581db9229442d60fff809e07ade736091', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '72d9295f23671d0113b3b12f61aa13448d6f80f0', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'b97bd0875b474013c3824f9fdb87390262e9f144', class: "invalid-feedback" }, this.error)));
+        return (h(Host, { key: 'f587a8414c05e32346f937765d28bce047615a39', class: this.sizes && `select-${this.sizes}` }, h("select", { key: 'e7b292e72914e7dacf0291609a0cb1d65eb0a3fa', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '24d8ce15efedece915747955ae8a0842e5578e54', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '128f0f39050595aac1833f642b2742429a4c96cd', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '94fffc12a2be58bf311b4588ead8fa0331e0c3ca', class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "road-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -107,8 +107,8 @@ export class SelectFilter {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: 'fff9f64f26850281576ed7de2e8104fad18862f9', "is-active": isActive }, h("slot", { key: 'a66b13f411768a00e0d45ed9801a84f3b2684f75' }), this.isOpen &&
-            h("ul", { key: '5230013f47dccc082c73abfb8474a0791a7e992b', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
+        return (h(Host, { key: 'ff1cb375e4108fbfe44f307ad6d00be4fec03430', "is-active": isActive }, h("slot", { key: '987d24b1f5ad17ef8a0e83e3165d1e137bf4d6e5' }), this.isOpen &&
+            h("ul", { key: '41e10aed226c8131e4313ea33da1ea6c79969b80', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
     }
     static get is() { return "road-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Skeleton {
     render() {
-        return (h("span", { key: '03bd8098ff469f17744141c229b9b3ad863b0124' }, "\u00A0"));
+        return (h("span", { key: 'cf58a469e049fce0303bf49ec1c86233b1b4e305' }, "\u00A0"));
     }
     static get is() { return "road-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class Spinner {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (h("svg", { key: '5ad4972d7d49afc0c31aa2771c10361cee7f7a25', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '842b8a3563edc3ada7f2450e0ef9724c9141bfa0', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: '3e1e5094311da649229f7fa9b3bc7b12d5251cda', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '6257e336cdf32cfa80973f4466eb9adcbf7fa239', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
     static get is() { return "road-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js

@@ -70,11 +70,11 @@ export class Switch {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: '54f56dec9c84250081ebfadd296e7d7488a31175', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: 'a94f02e2edb416513ef6285b89c221a8fe1d5884', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (h(Host, { key: 'd4c7bbfdcda90e98bb16805048d9f121fe3bf5dc' }, h("input", { key: '46041634cfc030ef1abefa55946672b744d941ec', class: "form-switch-input", type: "checkbox", id: this.switchId, 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: '280bce0f99cd8c0b16c5dbb45bb6ae4facbac82f', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: 'fa649be434996ef636b323481027f48ea755d16d', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '5f93e9f0cd857f38d2f70152774b2ae0239ed342' }, h("input", { key: '42528718ca88666d428048a7477ac9ba611f12aa', class: "form-switch-input", type: "checkbox", id: this.switchId, 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: '0d5c0ef117c9235387e47b628c9036c3844cb9be', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '0d16ade7abfe28bae3f7d756b89799aa737dd653', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-switch"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,9 +21,9 @@ export class Tab {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: 'be0ce5a323e835e0e17bcfc23c010876518f705f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '4559e255fa71417fe4fcd713b91c2186d55653c0', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'b3e5f1b7811c480cbf5971293c95a244354d37b1' })));
+            } }, h("slot", { key: '3ec299696cf719bf911fe0c27befb34d8de3afcd' })));
     }
     static get is() { return "road-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,11 +36,11 @@ export class TabBar {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: '5b37e3605410e8cbb5a953216957bd49ed348949', role: "tablist", class: {
+        return (h(Host, { key: '793bbb41d74e6e4dd0a7a5ee67b418fd59f61c7c', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '40f8b74647a678eae3e772d67fdef3e285c91250' })));
+            } }, h("slot", { key: '4e2713a1a01ed7fcd8503a8231223d2793e8f808' })));
     }
     static get is() { return "road-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: 'd75aef7fd1d24c4d510b81110769176be7c94b86', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '4766bf5988d063443b6a7958fe1c18ab20b4392d', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -79,7 +79,7 @@ export class TabButton {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, h("a", Object.assign({ key: '0674b22edd491c00bd4b748bd3db998dcb16a550' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '3c8fb23151939c48dd4239240385a995daed93e8', class: "button-inner" }, h("slot", { key: 'df8b3f6c3087b0f7ced5f6cb38733c9ee50db760' })))));
+            } }, h("a", Object.assign({ key: 'f11c00761d9057129770874f321f3afaa18a53e0' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '51c886bf60aa0544124c0e2cb19b20d9e0bb720e', class: "button-inner" }, h("slot", { key: '6f7d6d16789eb4db922fd3b49cbbe2df68fc71a1' })))));
     }
     static get is() { return "road-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Table {
     render() {
-        return (h("slot", { key: 'e732734d32731bf220436443f306c3a57b3da9b4' }));
+        return (h("slot", { key: '82316326496fee8116dbdc08996a51aa46848cfe' }));
     }
     static get is() { return "road-table"; }
     static get encapsulation() { return "scoped"; }