@roadtrip/components 3.27.0 → 3.29.0

package/dist/collection/components/input-group/input-group.css

@@ -83,22 +83,36 @@
 /**
  * Focus state
  */
+/* Pour les éléments slottés [slot="prepend"] */
 
-.input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--road-input-outline-variant);
-  border-right-color: transparent;
-}
-
+.input-group:focus-within ::slotted([slot="prepend"]),
 :host(.phone-number-group) .input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--road-input-outline-variant);
+  border-color: var(--road-grey-0);
+  border-width: 2px;
   border-right-color: transparent;
+  outline: none; /* Affiche l'outline par défaut au focus */
 }
 
+/* Pour les éléments slottés [slot="append"] */
+
 .input-group:focus-within ::slotted([slot="append"]) {
-  border-color: var(--road-input-outline-variant);
+  border-color: var(--road-grey-0);
+  border-width: 2px;
   border-left-color: transparent;
+  outline: none; /* Affiche l'outline par défaut au focus */
+}
+
+/* Pour le champ principal dans road-input */
+
+.input-group:focus-within ::slotted(road-input):focus-visible {
+  border-color: var(--road-grey-0);
+  border-width: 2px;
+  outline: none; /* Active le contour d'accessibilité par défaut */
 }
 
+
+
+
 /* PREPEND - APPEND
  -------------------- */
 
@@ -119,6 +133,10 @@
   font-size: var(--road-font-size-14);
 }
 
+::slotted(road-button):hover {
+  background-color: var(--road-button-ghost-variant);
+}
+
 .input-group-prepend {
   z-index: 1;
   order: -1;
@@ -152,6 +170,21 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+::slotted(road-label) {
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  margin-bottom: 0;
+  color: var(--road-on-surface);
+  text-align: center;
+  white-space: nowrap;
+  cursor: text;
+  background: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
+  border-radius: 0.25rem;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
 /* ROUND CORNERS
  -------------------- */
 
@@ -186,6 +219,11 @@
   background-color: var(--road-surface);
 }
 
+.input-group-append:hover ::slotted(road-button) {
+  background-color: var(--road-button-ghost-variant);
+}
+
+
 /* SIZES
  -------------------- */
 
@@ -211,14 +249,31 @@
 }
 
 /* DISABLED
- -------------------- */
+-------------------- */
 
-.input-group.is-disabled ::slotted([slot="append"]),
-.input-group.is-disabled ::slotted([slot="prepend"]) {
+:host([disabled]) {
+  cursor: not-allowed;
+}
+
+:host([disabled]) .input-group {
+  pointer-events: none; /* Désactive les interactions avec l'ensemble du groupe */
+}
+
+:host([disabled]) ::slotted([slot="append"]),
+:host([disabled]) ::slotted([slot="prepend"]) {
+  color: var(--road-on-surface-disabled);
   cursor: not-allowed;
   background: #e4e5e9;
 }
 
-.is-disabled ::slotted(road-button) {
-  opacity: 1;
+:host([disabled]) ::slotted([slot="append"] road-icon),
+:host([disabled]) ::slotted([slot="prepend"] road-icon) {
+  color: var(--road-on-surface-disabled);
 }
+
+:host([disabled]) road-icon {
+  color: var(--road-on-surface-disabled);
+}
+
+
+

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

@@ -5,16 +5,35 @@ import { h } from "@stencil/core";
  * @slot append - Add icon or button after the field.
  */
 export class InputGroup {
-  componentDidLoad() {
-    var _a;
-    if (this.el.querySelector("road-input[disabled]")) {
-      (_a = this.el.querySelector("road-button")) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', "");
-    }
+  constructor() {
+    this.disabled = false;
+  }
+  /** Watches for changes in the `disabled` prop and updates child elements. */
+  handleDisabledChange(newValue) {
+    this.updateDisabledState(newValue);
+  }
+  /** Applies or removes the `disabled` attribute to/from children. */
+  updateDisabledState(isDisabled) {
+    const children = this.el.querySelectorAll('road-input, road-button, road-select');
+    children.forEach(child => {
+      if (isDisabled) {
+        child.setAttribute('disabled', '');
+      }
+      else {
+        child.removeAttribute('disabled');
+      }
+    });
+  }
+  componentWillLoad() {
+    // Ensure the initial state of `disabled` is applied before render.
+    this.updateDisabledState(this.disabled);
   }
   render() {
-    const errorClass = this.el.querySelector("road-input[error]") ? 'is-invalid' : '';
-    const disabledClass = this.el.querySelector("road-input[disabled]") ? 'is-disabled' : '';
-    const sizeClass = this.el.querySelector("road-input[sizes]") ? `size-${this.el.querySelector("road-input").sizes}` : '';
+    const errorClass = this.el.querySelector('road-input[error]') ? 'is-invalid' : '';
+    const sizeClass = this.el.querySelector('road-input[sizes]')
+      ? `size-${this.el.querySelector('road-input').sizes}`
+      : '';
+    const disabledClass = this.disabled ? 'is-disabled' : '';
     return (h("div", { class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { class: "input-group-prepend" }, h("slot", { name: "prepend" })), h("slot", null), h("div", { class: "input-group-append" }, h("slot", { name: "append" }))));
   }
   static get is() { return "road-input-group"; }
@@ -29,6 +48,34 @@ export class InputGroup {
       "$": ["input-group.css"]
     };
   }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the entire input group and propagates the state to children."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
+      }];
+  }
 }
 //# sourceMappingURL=input-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;GAIG;AAOH,MAAM,OAAO,UAAU;EAIrB,gBAAgB;;IACd,IAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE;MAChD,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,0CAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;KACpE;EACH,CAAC;EAGD,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACzF,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,QAAS,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElJ,OAAO,CACL,WAAK,KAAK,EAAE,eAAe,UAAU,IAAI,aAAa,IAAI,SAAS,EAAE;MACnE,WAAK,KAAK,EAAC,qBAAqB;QAC9B,YAAM,IAAI,EAAC,SAAS,GAAE,CAClB;MACN,eAAO;MACP,WAAK,KAAK,EAAC,oBAAoB;QAC7B,YAAM,IAAI,EAAC,QAAQ,GAAE,CACjB,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h } from '@stencil/core';\n\n/**\n * @slot prepend - Add icon or button before the field.\n * @slot  - Add the road-input or road-select here.\n * @slot append - Add icon or button after the field.\n */\n\n@Component({\n  tag: 'road-input-group',\n  styleUrl: 'input-group.css',\n  shadow: true,\n})\nexport class InputGroup {\n\n  @Element() el!: HTMLRoadInputGroupElement;\n\n  componentDidLoad() {\n    if(this.el.querySelector(\"road-input[disabled]\")) {\n      this.el.querySelector(\"road-button\")?.setAttribute('disabled', \"\");\n    }\n  }\n\n\n  render() {\n    const errorClass = this.el.querySelector(\"road-input[error]\") ? 'is-invalid' : '';\n    const disabledClass = this.el.querySelector(\"road-input[disabled]\") ? 'is-disabled' : '';\n    const sizeClass = this.el.querySelector(\"road-input[sizes]\") ? `size-${(this.el.querySelector(\"road-input\") as HTMLRoadInputElement).sizes}` : '';\n\n    return (\n      <div class={`input-group ${errorClass} ${disabledClass} ${sizeClass}`}>\n        <div class=\"input-group-prepend\">\n          <slot name=\"prepend\"/>\n        </div>\n        <slot/>\n        <div class=\"input-group-append\">\n          <slot name=\"append\"/>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;GAIG;AAOH,MAAM,OAAO,UAAU;;oBAIO,KAAK;;EAEjC,6EAA6E;EAE7E,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;EACrC,CAAC;EAED,oEAAoE;EAC5D,mBAAmB,CAAC,UAAmB;IAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sCAAsC,CAAC,CAAC;IAClF,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACvB,IAAI,UAAU,EAAE;QACd,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;OACpC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;OACnC;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,mEAAmE;IACnE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;MAC1D,CAAC,CAAC,QAAS,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,EAAE;MAC/E,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,OAAO,CACL,WAAK,KAAK,EAAE,eAAe,UAAU,IAAI,aAAa,IAAI,SAAS,EAAE;MACnE,WAAK,KAAK,EAAC,qBAAqB;QAC9B,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB;MACN,eAAQ;MACR,WAAK,KAAK,EAAC,oBAAoB;QAC7B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @slot prepend - Add icon or button before the field.\n * @slot  - Add the road-input or road-select here.\n * @slot append - Add icon or button after the field.\n */\n\n@Component({\n  tag: 'road-input-group',\n  styleUrl: 'input-group.css',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() el!: HTMLRoadInputGroupElement;\n\n  /** Disables the entire input group and propagates the state to children. */\n  @Prop() disabled: boolean = false;\n\n  /** Watches for changes in the `disabled` prop and updates child elements. */\n  @Watch('disabled')\n  handleDisabledChange(newValue: boolean) {\n    this.updateDisabledState(newValue);\n  }\n\n  /** Applies or removes the `disabled` attribute to/from children. */\n  private updateDisabledState(isDisabled: boolean) {\n    const children = this.el.querySelectorAll('road-input, road-button, road-select');\n    children.forEach(child => {\n      if (isDisabled) {\n        child.setAttribute('disabled', '');\n      } else {\n        child.removeAttribute('disabled');\n      }\n    });\n  }\n\n  componentWillLoad() {\n    // Ensure the initial state of `disabled` is applied before render.\n    this.updateDisabledState(this.disabled);\n  }\n\n  render() {\n    const errorClass = this.el.querySelector('road-input[error]') ? 'is-invalid' : '';\n    const sizeClass = this.el.querySelector('road-input[sizes]') \n      ? `size-${(this.el.querySelector('road-input') as HTMLRoadInputElement).sizes}` \n      : '';\n    const disabledClass = this.disabled ? 'is-disabled' : '';\n\n    return (\n      <div class={`input-group ${errorClass} ${disabledClass} ${sizeClass}`}>\n        <div class=\"input-group-prepend\">\n          <slot name=\"prepend\" />\n        </div>\n        <slot />\n        <div class=\"input-group-append\">\n          <slot name=\"append\" />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-group/input-group.stories.js

@@ -14,14 +14,20 @@ export default {
     append: {
       control: 'text',
     },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    disabled: false, // Défaut : non désactivé
   },
 };
 
 const Template = (args) => html`
-<road-input-group>
-  ${unsafeHTML(args[' '])}
-  ${unsafeHTML(args.prepend)}
-  ${unsafeHTML(args.append)}
+<road-input-group ?disabled=${args.disabled}>
+  ${unsafeHTML(args.prepend || '')}
+  ${unsafeHTML(args[' '] || '')}
+  ${unsafeHTML(args.append || '')}
 </road-input-group>
 `;
 
@@ -36,31 +42,35 @@ Playground.args = {
 export const Button = Template.bind({});
 Button.args = {
   ' ': `<road-input input-id="newsletter" sizes="xl" label="Newsletter"></road-input>`,
-  append: `<road-button slot="append" outline="true">
-  OK
-</road-button>`,
+  append: `<road-button slot="append" color="ghost">
+    OK
+  </road-button>`,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  ' ': `<road-input input-id="inputGroupDisabled" sizes="xl" label="Label" disabled="true"></road-input>`,
-  append: `<road-button slot="append" outline="true">
-  <road-icon color="secondary" name="alert-info-outline"></road-icon>
-</road-button>`,
+  disabled: true, // Désactive tout le groupe
+  ' ': `<road-input input-id="inputGroupDisabled" sizes="xl" label="Label" disabled></road-input>`,
+  prepend: `<road-button slot="prepend" outline="true" disabled>
+    <road-icon color="secondary" name="alert-info-outline"></road-icon>
+  </road-button>`,
+  append: `<road-button slot="append" outline="true" disabled>
+    <road-icon color="secondary" name="alert-info-outline"></road-icon>
+  </road-button>`,
 };
 
 export const Error = Template.bind({});
 Error.args = {
   ' ': `<road-input input-id="inputGroupError" sizes="xl" label="Label" error="error message here"></road-input>`,
   append: `<label slot="append">
-  <road-icon name="payment-card" role="img"></road-icon>
-</label>`,
+    <road-icon name="payment-card" role="img"></road-icon>
+  </label>`,
 };
 
 export const Password = Template.bind({});
 Password.args = {
   ' ': `<road-input input-id="password" sizes="xl" label="password" type="password"></road-input>`,
   append: `<road-button slot="append" outline="true">
-  <road-icon name="visibility-off-outline" role="button"></road-icon>
-</road-button>`,
+    <road-icon name="visibility-off-outline" role="button"></road-icon>
+  </road-button>`,
 };

package/dist/collection/components/phone-number-input/phone-number-input.js

@@ -190,7 +190,7 @@ export class RoadPhoneNumberInput {
     const valueId = selectId + '-value';
     const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';
     const isErrorClass = this.errorMessage.length ? 'is-error' : '';
-    return (h(Host, null, h("road-input-group", null, h("div", { class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, h("select", { id: 'phone-number-input', class: `form-select-area has-value ${isInvalidClass}`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("road-input", { id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage, onKeyDown: (event) => this.handleKeyDown(event), tabIndex: 0 }))));
+    return (h(Host, null, h("road-input-group", null, h("div", { class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, h("select", { id: 'phone-number-input', class: `form-select-area has-value ${isInvalidClass}`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("road-input", { type: "tel", id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage, onKeyDown: (event) => this.handleKeyDown(event), tabIndex: 0 }))));
   }
   static get is() { return "road-phone-number-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/phone-number-input/phone-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil } from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n  tag: 'road-phone-number-input',\n  styleUrl: 'phone-number-input.css',\n  scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n  /** Computed phone data */\n  @Event() roadPhoneNumberInput!: EventEmitter<{\n    isError: boolean;\n    phone: {\n      numberType: string;\n      countryCode: string;\n      nationalNumber: string;\n      code: string;\n      internationalNumber: string;\n    };\n  }>;\n\n  @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n  /** Disable both fields */\n  @Prop() disabled: boolean = false;\n\n  /** List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) */\n  @Prop() countryData: CountryType[] = [];\n\n  /** Used to display countries with the right language */\n  @Prop() language: string = 'fr';\n\n  /** Country selection placeHolder */\n  @Prop() codeLabel: string = '';\n\n  /** Phone input placeHolder */\n  @Prop() phoneLabel: string = '';\n\n  /** Value displayed in the phone input */\n  @Prop() phoneValue?: string;\n\n  /** Selected country code */\n  @Prop() countryCode?: string;\n\n  /** Error message (displayed only if ther is a message) */\n  @Prop() errorMessage: string = '';\n\n  /** Add a star in the phone input */\n  @Prop() required = false;\n\n  @State() selectedCountry: string = this.countryData[0].countryCode;\n  @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n  @State() phoneNumber: string = '';\n  @State() countryOptions: CountryOption[] = [];\n  @State() returnObject: ReturnObject = {\n    isError: false,\n    phone: this.resetPhoneUtilData(),\n  };\n\n  @Watch('errorMessage')\n  updateMessagePosition() {\n    this.placeErrorMessage();\n  }\n\n  // On component load\n  componentWillLoad() {\n    this.placeErrorMessage();\n    let fromSelect = false;\n\n    if (this.phoneValue) {\n      this.phoneNumber = this.phoneValue;\n    }\n\n    if (this.countryCode) {\n      this.selectedCountry = this.countryCode;\n      if (this.getPhoneCodeFromCountryCode(this.countryCode)) {\n        this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode)!);\n        fromSelect = true;\n      }\n    }\n\n    this.updateCountryOptions();\n    this.createAndDispatchPhoneData(fromSelect);\n  }\n\n  // On user input\n  handleInput(event: RoadInputCustomEvent<{\n    value: string | null | undefined;\n  }>) {\n    this.phoneNumber = event.detail.value!;\n    this.createAndDispatchPhoneData();\n    }\n  \n\n  // On user key down\n  handleKeyDown(event: KeyboardEvent) {\n    // Liste des caractères interdits\n    const caracteresInterdits = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', \"'\", '\"', ',', '.', '<', '>', '/', '?'];\n    \n    // Vérifier si la touche pressée est dans la liste des caractères interdits\n    if (caracteresInterdits.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  // On user key up\n  handleKeyUp(event: KeyboardEvent) {\n    // Récupérer la valeur saisie\n    const inputValue = (event.target as HTMLInputElement).value || '';\n\n    // Vérifier si la valeur contient uniquement des chiffres ou le symbole \"+\"\n    const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);\n\n    // Si la valeur ne contient pas uniquement des chiffres ou le symbole \"+\", réinitialiser le champ de saisie à son état précédent\n    if (!containsOnlyNumbersAndPlus) {\n      // Réinitialiser la valeur du champ de saisie à son état précédent\n      (event.target as HTMLInputElement).value = this.phoneNumber;\n    } else {\n      // Si la valeur contient uniquement des chiffres ou le symbole \"+\", mettre à jour la valeur du numéro de téléphone\n      this.phoneNumber = inputValue;\n      this.createAndDispatchPhoneData();\n    }\n  }\n\n  // On user select\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.updateSelectedCountry(select.value);\n      this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n    }\n    this.createAndDispatchPhoneData(true);\n    this.updateCountryOptions();\n  }\n\n  createAndDispatchPhoneData(fromSelect?: boolean) {\n    // Init phone util\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const PNF = PhoneNumberFormat;\n\n    // Reset the return object data\n    this.returnObject.phone = this.resetPhoneUtilData();\n\n    const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n    try {\n      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n      this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n      this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n      this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n      // Set the country code values depending on the event origin\n      if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n        if (fromSelect) {\n          this.returnObject.isError = !(\n            phoneUtil.isValidNumber(parsedPhoneNumber) &&\n            phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n            !this.isEmptyPhoneNumber()\n          );\n        } else {\n          this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n          this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n          this.returnObject.phone.countryCode = this.selectedCountry;\n          this.returnObject.phone.code = this.selectedCountryCode;\n        }\n        this.updateCountryOptions();\n      }\n\n      const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n      this.returnObject.phone.numberType = phoneType[0];\n    } catch {} finally {\n      this.roadPhoneNumberInput.emit(this.returnObject);\n    }\n  }\n\n  // utils\n\n  updateSelectedCountryCode(countryCode: string) {\n    this.selectedCountryCode = countryCode;\n  }\n\n  updateSelectedCountry(value: string) {\n    this.selectedCountry = value;\n  }\n\n  resetPhoneUtilData(): PhoneReturnType {\n    return {\n      numberType: 'UNKNOWN',\n      countryCode: this.selectedCountry,\n      code: this.selectedCountryCode,\n      nationalNumber: this.phoneNumber,\n      internationalNumber: this.phoneNumber,\n    };\n  }\n\n  isEmptyPhoneNumber(): boolean {\n    return !this.phoneNumber.length;\n  }\n\n  getPhoneCodeFromCountryCode(countryCode: string): string | undefined {\n    return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n  }\n\n  updateCountryOptions() {\n    const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n    this.countryOptions = [\n      ...this.countryData\n        .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n        .map(country => ({\n          value: country.countryCode,\n          label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n          selected: country.countryCode === this.selectedCountry,\n          disabled: false,\n        })\n      ),\n      {\n        value: '',\n        label: '--',\n        selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n        disabled: true,\n      },\n  ];\n  }\n\n  placeErrorMessage() {\n    this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n      messError.style.display = \"flex\";\n      messError.style.marginTop = \"-0.5rem\";\n      const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n      phoneNumberInput.appendChild(messError);\n    });\n  }\n\n  waitForElementToExist(selector: string): Promise<HTMLElement> {\n    return new Promise(resolve => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector) as HTMLElement);\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector) as HTMLElement);\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        subtree: true,\n        childList: true,\n      });\n    });\n  }\n\n  render() {\n    const selectId = `road-select-${selectIds++}`;\n    const labelId = selectId + '-label';\n    const valueId = selectId + '-value';\n    const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n    const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n    return (\n      <Host>\n        <road-input-group>\n          <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n          <select\n              id='phone-number-input'\n              class={`form-select-area has-value ${isInvalidClass}`}\n              aria-disabled={this.disabled ? 'true' : null}\n              disabled={this.disabled}\n              onChange={(event) => this.handleSelect(event)}\n              aria-label={this.codeLabel}\n              tabIndex={this.disabled ? -1 : 0}\n            >\n              {this.countryOptions && this.countryOptions.map(option => (\n                <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n              ))}\n            </select>\n            <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n            <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n          </div>\n          <road-input\n            id=\"phone-number\"\n            sizes=\"xl\"\n            label={this.phoneLabel}\n            value={this.phoneValue}\n            onRoadChange={(event) => this.handleInput(event)}\n            required={this.required}\n            error={this.errorMessage}\n            onKeyDown={(event) => this.handleKeyDown(event)} // Lier la fonction handleKeyDown à l'événement onKeyDown\n            tabIndex={0}\n          >\n          </road-input>\n        </road-input-group>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil } from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n  tag: 'road-phone-number-input',\n  styleUrl: 'phone-number-input.css',\n  scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n  /** Computed phone data */\n  @Event() roadPhoneNumberInput!: EventEmitter<{\n    isError: boolean;\n    phone: {\n      numberType: string;\n      countryCode: string;\n      nationalNumber: string;\n      code: string;\n      internationalNumber: string;\n    };\n  }>;\n\n  @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n  /** Disable both fields */\n  @Prop() disabled: boolean = false;\n\n  /** List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) */\n  @Prop() countryData: CountryType[] = [];\n\n  /** Used to display countries with the right language */\n  @Prop() language: string = 'fr';\n\n  /** Country selection placeHolder */\n  @Prop() codeLabel: string = '';\n\n  /** Phone input placeHolder */\n  @Prop() phoneLabel: string = '';\n\n  /** Value displayed in the phone input */\n  @Prop() phoneValue?: string;\n\n  /** Selected country code */\n  @Prop() countryCode?: string;\n\n  /** Error message (displayed only if ther is a message) */\n  @Prop() errorMessage: string = '';\n\n  /** Add a star in the phone input */\n  @Prop() required = false;\n\n  @State() selectedCountry: string = this.countryData[0].countryCode;\n  @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n  @State() phoneNumber: string = '';\n  @State() countryOptions: CountryOption[] = [];\n  @State() returnObject: ReturnObject = {\n    isError: false,\n    phone: this.resetPhoneUtilData(),\n  };\n\n  @Watch('errorMessage')\n  updateMessagePosition() {\n    this.placeErrorMessage();\n  }\n\n  // On component load\n  componentWillLoad() {\n    this.placeErrorMessage();\n    let fromSelect = false;\n\n    if (this.phoneValue) {\n      this.phoneNumber = this.phoneValue;\n    }\n\n    if (this.countryCode) {\n      this.selectedCountry = this.countryCode;\n      if (this.getPhoneCodeFromCountryCode(this.countryCode)) {\n        this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode)!);\n        fromSelect = true;\n      }\n    }\n\n    this.updateCountryOptions();\n    this.createAndDispatchPhoneData(fromSelect);\n  }\n\n  // On user input\n  handleInput(event: RoadInputCustomEvent<{\n    value: string | null | undefined;\n  }>) {\n    this.phoneNumber = event.detail.value!;\n    this.createAndDispatchPhoneData();\n    }\n  \n\n  // On user key down\n  handleKeyDown(event: KeyboardEvent) {\n    // Liste des caractères interdits\n    const caracteresInterdits = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', \"'\", '\"', ',', '.', '<', '>', '/', '?'];\n    \n    // Vérifier si la touche pressée est dans la liste des caractères interdits\n    if (caracteresInterdits.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  // On user key up\n  handleKeyUp(event: KeyboardEvent) {\n    // Récupérer la valeur saisie\n    const inputValue = (event.target as HTMLInputElement).value || '';\n\n    // Vérifier si la valeur contient uniquement des chiffres ou le symbole \"+\"\n    const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);\n\n    // Si la valeur ne contient pas uniquement des chiffres ou le symbole \"+\", réinitialiser le champ de saisie à son état précédent\n    if (!containsOnlyNumbersAndPlus) {\n      // Réinitialiser la valeur du champ de saisie à son état précédent\n      (event.target as HTMLInputElement).value = this.phoneNumber;\n    } else {\n      // Si la valeur contient uniquement des chiffres ou le symbole \"+\", mettre à jour la valeur du numéro de téléphone\n      this.phoneNumber = inputValue;\n      this.createAndDispatchPhoneData();\n    }\n  }\n\n  // On user select\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.updateSelectedCountry(select.value);\n      this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n    }\n    this.createAndDispatchPhoneData(true);\n    this.updateCountryOptions();\n  }\n\n  createAndDispatchPhoneData(fromSelect?: boolean) {\n    // Init phone util\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const PNF = PhoneNumberFormat;\n\n    // Reset the return object data\n    this.returnObject.phone = this.resetPhoneUtilData();\n\n    const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n    try {\n      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n      this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n      this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n      this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n      // Set the country code values depending on the event origin\n      if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n        if (fromSelect) {\n          this.returnObject.isError = !(\n            phoneUtil.isValidNumber(parsedPhoneNumber) &&\n            phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n            !this.isEmptyPhoneNumber()\n          );\n        } else {\n          this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n          this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n          this.returnObject.phone.countryCode = this.selectedCountry;\n          this.returnObject.phone.code = this.selectedCountryCode;\n        }\n        this.updateCountryOptions();\n      }\n\n      const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n      this.returnObject.phone.numberType = phoneType[0];\n    } catch {} finally {\n      this.roadPhoneNumberInput.emit(this.returnObject);\n    }\n  }\n\n  // utils\n\n  updateSelectedCountryCode(countryCode: string) {\n    this.selectedCountryCode = countryCode;\n  }\n\n  updateSelectedCountry(value: string) {\n    this.selectedCountry = value;\n  }\n\n  resetPhoneUtilData(): PhoneReturnType {\n    return {\n      numberType: 'UNKNOWN',\n      countryCode: this.selectedCountry,\n      code: this.selectedCountryCode,\n      nationalNumber: this.phoneNumber,\n      internationalNumber: this.phoneNumber,\n    };\n  }\n\n  isEmptyPhoneNumber(): boolean {\n    return !this.phoneNumber.length;\n  }\n\n  getPhoneCodeFromCountryCode(countryCode: string): string | undefined {\n    return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n  }\n\n  updateCountryOptions() {\n    const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n    this.countryOptions = [\n      ...this.countryData\n        .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n        .map(country => ({\n          value: country.countryCode,\n          label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n          selected: country.countryCode === this.selectedCountry,\n          disabled: false,\n        })\n      ),\n      {\n        value: '',\n        label: '--',\n        selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n        disabled: true,\n      },\n  ];\n  }\n\n  placeErrorMessage() {\n    this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n      messError.style.display = \"flex\";\n      messError.style.marginTop = \"-0.5rem\";\n      const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n      phoneNumberInput.appendChild(messError);\n    });\n  }\n\n  waitForElementToExist(selector: string): Promise<HTMLElement> {\n    return new Promise(resolve => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector) as HTMLElement);\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector) as HTMLElement);\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        subtree: true,\n        childList: true,\n      });\n    });\n  }\n\n  render() {\n    const selectId = `road-select-${selectIds++}`;\n    const labelId = selectId + '-label';\n    const valueId = selectId + '-value';\n    const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n    const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n    return (\n      <Host>\n        <road-input-group>\n          <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n          <select\n              id='phone-number-input'\n              class={`form-select-area has-value ${isInvalidClass}`}\n              aria-disabled={this.disabled ? 'true' : null}\n              disabled={this.disabled}\n              onChange={(event) => this.handleSelect(event)}\n              aria-label={this.codeLabel}\n              tabIndex={this.disabled ? -1 : 0}\n            >\n              {this.countryOptions && this.countryOptions.map(option => (\n                <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n              ))}\n            </select>\n            <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n            <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n          </div>\n          <road-input\n            type=\"tel\"\n            id=\"phone-number\"\n            sizes=\"xl\"\n            label={this.phoneLabel}\n            value={this.phoneValue}\n            onRoadChange={(event) => this.handleInput(event)}\n            required={this.required}\n            error={this.errorMessage}\n            onKeyDown={(event) => this.handleKeyDown(event)} // Lier la fonction handleKeyDown à l'événement onKeyDown\n            tabIndex={0}\n          >\n          </road-input>\n        </road-input-group>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -72,6 +72,22 @@
   outline: auto;
 }
 
+/**
+ * Disabled
+ */
+
+:host(.tab-disabled) {
+  background: var(--road-surface-disabled);
+}
+
+:host(.tab-disabled) .button-native{
+  cursor: not-allowed;
+}
+
+:host(.tab-disabled) ::slotted(road-label) {
+  color: var(--road-on-surface-disabled);
+}
+
 
 /* NATIVE
  -------------------- */
@@ -124,9 +140,10 @@
   width: 100%;
   height: 2px;
   content: "";
-  opacity: 0;
+  background-color: var(--road-input-outline);
+  opacity: 1;
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: scaleX(0);
+  transform: none;
   transform-origin: center;
 }
 

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

@@ -19,6 +19,7 @@ export class TabButton {
     this.rel = undefined;
     this.layout = 'icon-start';
     this.selected = false;
+    this.disabled = false;
     this.tab = undefined;
     this.target = undefined;
   }
@@ -58,20 +59,21 @@ export class TabButton {
     return 0;
   }
   render() {
-    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;
+    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;
     const attrs = {
       download: this.download,
-      href,
+      href: !disabled ? href : undefined,
       rel,
       target,
     };
-    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : 'false', id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+    return (h(Host, { 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,
         'tab-has-label-only': hasLabel && !hasIcon,
         '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({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { class: "button-inner" }, h("slot", null)))));
   }
   static get is() { return "road-tab-button"; }
@@ -175,6 +177,24 @@ export class TabButton {
         "reflect": false,
         "defaultValue": "false"
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The disabled tab"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "tab": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../../../src/components/tab-button/tab-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : 'false'}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../../../src/components/tab-button/tab-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n    /**\n   * The disabled tab \n   */\n    @Prop({ mutable: true }) disabled = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href: !disabled ? href : undefined, // Ne pas inclure le lien si désactivé\n      rel,\n      target,\n    };\n  \n    return (\n      <Host\n        onClick={(ev: Event) => !disabled && this.onClick(ev)} // Bloquer les clics si désactivé\n        onKeyup={(ev: KeyboardEvent) => !disabled && this.onKeyUp(ev)} // Bloquer les interactions clavier si désactivé\n        role=\"tab\"\n        tabindex={disabled ? -1 : tabIndex} // Désactiver le focus si désactivé\n        aria-selected={selected ? 'true' : 'false'}\n        aria-disabled={disabled ? 'true' : null} // Ajout pour l'accessibilité\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n          'tab-disabled': disabled, // Classe CSS pour les styles désactivés\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toggle/toggle.css

@@ -51,6 +51,10 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+.form-toggle-label.disabled{
+  cursor: not-allowed;
+}
+
 /* LEVER
  -------------------- */
 

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

@@ -39,7 +39,8 @@ export class toggle {
     const textLabel = h("label", { class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
     const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
     const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
-    return (h(Host, null, h("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-toggle-label ${isSpacedClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+    const disabledClass = this.disabled ? 'disabled' : '';
+    return (h(Host, null, h("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
   }
   static get is() { return "road-toggle"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,sBAAsB,CAAC;AAO9B,MAAM,OAAO,MAAM;;IA2FT,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;oBAlGyB,eAAe,SAAS,EAAE,EAAE;gBAKhC,IAAI,CAAC,QAAQ;mBAKD,KAAK;oBAKrB,KAAK;iBAKA,GAAG,IAAI,CAAC,QAAQ,QAAQ;wBAKhB,KAAK;oBAKT,KAAK;iBAKT,IAAI;cAKP,KAAK;eAKJ,IAAI;;EA8B1B,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;EACL,CAAC;EAgBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAG,aAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAC;IAC7G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC;IAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtE,OAAO,CACL,EAAC,IAAI;MACH,aACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB;MACF,aAAO,KAAK,EAAE,qBAAqB,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ;QACvE,IAAI,CAAC,YAAY,IAAI,SAAS;QAC/B,WAAK,KAAK,EAAE,qBAAqB,gBAAgB,EAAE,cAAY,IAAI,CAAC,GAAG,aAAW,IAAI,CAAC,EAAE,GAAQ;QAChG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAC7B,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,SAAS,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n  tag: 'road-toggle',\n  styleUrl: 'toggle.css',\n  scoped: true,\n})\nexport class toggle {\n\n  /**\n   * The id of toggle\n   */\n  @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.toggleId;\n\n  /**\n   * If `true`, the toggle is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the user cannot interact with the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.toggleId}-label`;\n\n  /**\n   * If `true`, the label is at left of the toggle\n   */\n  @Prop() hasLeftLabel: boolean = false;\n\n  /**\n   * Add space between label and toggle element\n   */\n  @Prop() isSpaced: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Text display for \"`on`\" state in the toggle lever\n   */\n  @Prop() on: string = \"yes\";\n\n  /**\n   * Text display for \"`off`\" state in the toggle lever\n   */\n  @Prop() off: string = \"no\";\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 toggle has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle 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  };\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.toggleId + '-label';\n    const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n    const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n    const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n\n    return (\n      <Host>\n        <input\n          class=\"form-toggle-input\"\n          type=\"checkbox\"\n          id={this.toggleId}\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\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-toggle-label ${isSpacedClass}`} htmlFor={this.toggleId}>\n          {this.hasLeftLabel && textLabel}\n          <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n          {this.hasLeftLabel ? '' : textLabel}\n        </label>\n      </Host>\n    );\n  }\n}\n\nlet toggleIds = 0;\n"]}
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n  tag: 'road-toggle',\n  styleUrl: 'toggle.css',\n  scoped: true,\n})\nexport class toggle {\n\n  /**\n   * The id of toggle\n   */\n  @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.toggleId;\n\n  /**\n   * If `true`, the toggle is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the user cannot interact with the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.toggleId}-label`;\n\n  /**\n   * If `true`, the label is at left of the toggle\n   */\n  @Prop() hasLeftLabel: boolean = false;\n\n  /**\n   * Add space between label and toggle element\n   */\n  @Prop() isSpaced: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Text display for \"`on`\" state in the toggle lever\n   */\n  @Prop() on: string = \"yes\";\n\n  /**\n   * Text display for \"`off`\" state in the toggle lever\n   */\n  @Prop() off: string = \"no\";\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 toggle has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle 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  };\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.toggleId + '-label';\n    const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n    const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n    const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n    const disabledClass = this.disabled ? 'disabled' : '';\n\n    return (\n      <Host>\n        <input\n          class=\"form-toggle-input\"\n          type=\"checkbox\"\n          id={this.toggleId}\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\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-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n          {this.hasLeftLabel && textLabel}\n          <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n          {this.hasLeftLabel ? '' : textLabel}\n        </label>\n      </Host>\n    );\n  }\n}\n\nlet toggleIds = 0;\n"]}