@roadtrip/components 3.33.7 → 3.35.0

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

@@ -0,0 +1,234 @@
+/*
+ * Radio Card
+ *
+ * For accessibility, we provide a style for focus only on Tab,
+ * for that add the javascript polyfill for focus-visible
+ * (https://github.com/WICG/focus-visible).
+ *
+ * Index
+ * - Radio
+ * - Label
+ * - Error
+ * - Position
+ */
+
+ .radio-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--road-outline);
+  border-radius: 0.5rem;
+  transition: border-color 0.3s, background-color 0.3s;
+  cursor: pointer;
+}
+
+.radio-card-selected {
+  outline: 2px solid var(--road-outline-variant);
+  outline-offset: -2px;
+}
+
+.radio-card-disabled {
+  outline: none;
+  cursor: not-allowed;
+  background-color: var(--road-surface-disabled);
+  border: 1px solid var(--road-outline);
+}
+
+.radio-card:hover {
+  border-color: var(--road-outline-variant);
+}
+
+.radio-card-disabled.radio-card:hover {
+  border: 1px solid var(--road-outline);
+}
+
+
+
+.form-radio-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.radio-card-label {
+  font-weight: bold;
+}
+
+
+/* RADIO
+ -------------------- */
+
+:host {
+  position: relative;
+  display: block;
+  margin-bottom: 1.5rem;
+  font-family: var(--road-font, sans-serif);
+  font-size: var(--road-body-medium);
+  line-height: 1.5;
+  color: var(--road-on-surface);
+}
+
+/**
+ * Inline radio
+ */
+
+:host(.form-radio-inline) {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-right: 1.5rem;
+  margin-bottom: 0;
+}
+
+/**
+ * Hide input
+ */
+
+.form-radio-input {
+  position: absolute;
+  z-index: -1;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+}
+
+.form-radio-input:disabled {
+  z-index: 1;
+  width: 100%;
+  cursor: not-allowed;
+}
+
+/* LABEL
+ -------------------- */
+
+.form-radio-label {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  margin: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.form-radio-label::before {
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0.1rem 0.75rem 0 0;
+  content: "";
+  background: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
+  border-radius: 50%;
+  transition: border-color 0.2s ease-in-out;
+}
+
+.form-radio-label-span {
+  margin-left: var(--road-spacing-02);
+  color: var(--road-on-surface-weak);
+}
+
+.form-radio-label::after {
+  position: absolute;
+  top: 0.285rem;
+  left: 0.1875rem;
+  box-sizing: border-box;
+  display: block;
+  width: 0.875rem;
+  height: 0.875rem;
+  content: "";
+  background: var(--road-on-surface-disabled);
+  border: none;
+  border-radius: 50%;
+  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
+  transform: scale(0);
+  transform-origin: 50% 50%;
+}
+
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .form-radio-input ~ .form-radio-label:hover::before {
+    border-color: var(--road-input-surface);
+  }
+
+  .form-radio-input:checked ~ .form-radio-label:hover::after {
+    background: var(--road-input-surface-variant);
+  }
+
+  .form-radio-input:checked:disabled~ .form-radio-label:hover::after {
+    background: var(--road-on-surface-disabled);
+  }
+}
+
+/**
+ * Checked state
+ */
+
+.form-radio-input:checked ~ .form-radio-label::after {
+  background: var(--road-input-surface);
+  opacity: 1;
+  transform: scale(1);
+}
+
+/**
+ * Focus on Tab
+ */
+
+.form-radio-input.focus-visible ~ .form-radio-label::before {
+  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);
+}
+
+.form-radio-input.focus-visible:checked ~ .form-radio-label::after {
+  background: var(--road-primary-700);
+}
+
+/**
+ * Disabled state
+ */
+
+.form-radio-input:disabled ~ .form-radio-label,
+.form-radio-input[readonly] ~ .form-radio-label {
+  cursor: not-allowed;
+}
+
+.form-radio-input:disabled ~ .form-radio-label::before,
+.form-radio-input[readonly] ~ .form-radio-label::before {
+  background: var(--road-on-surface-disabled);
+  border: none;
+}
+
+.form-radio-input:disabled ~ .form-radio-label::after,
+.form-radio-input[readonly] ~ .form-radio-label::after {
+  background: var(--road-on-surface-disabled);
+}
+
+/* ERROR
+ -------------------- */
+
+.form-radio-input.is-invalid ~ .form-radio-label::before {
+  border-color: var(--road-danger-outline);
+}
+
+/* POSITION
+ -------------------- */
+
+.form-radio-inverse {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+.form-radio-inverse::before {
+  margin: 0 0 0 1rem;
+}
+
+.form-radio-inverse::after {
+  right: 0.1875rem;
+  left: auto;
+}

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: '6c3948ad9428d3ae8aeb411a776419784831c714', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: '943199c6a4eda68c82245660e81ba04032a62209', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '772ae18837d54d6aa313e3a8791bc715f66c183d', class: "asterisk" }, "*")), h("slot", { key: '7f4a8c9ec3a201f695a6731467c138abf587e52f' }), this.error && this.error !== '' && h("p", { key: '9149bc1981323584219a13a392e77c8313f7fd58', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'a662d0e810e27d6392750d778e13573ed365e358', 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: 'b2c9aa060ae841e99ba5751c128e8df1fa257277', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: 'b7696f36afd6083f61b0498ff80b911743f6713e', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '9c09977ad8ea7b60380cd0b245b2b78df75a851e', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'dbcf378a5ce259394cc0ed12f6437100292aa015', 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: '11fbbec081e1ae2b86a5ad5d387b91f26104d6e8' }), this.showLabels && h("slot", { key: '1dd932c4e17968e794370c5468e13fed1b84df25', name: "datalist" }), h("input", { key: 'afe1c2ef6f8006e2c0dcbd3cbe14103393a57a4a', 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: '6f2bca3f10bdc5dcadf6756bfe953afffe4bf2c7', class: "form-range-label" }, "Valeur"), h("div", { key: '065f974aa51980322402a0c3d0c168a96c076ecf', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '283d46c77a585064840ee91a861fbd2c0bdaa5aa', 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"; }