@roadtrip/components 3.32.5 → 3.33.1

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

@@ -47,16 +47,24 @@
 
 ::slotted([slot="prepend"]) {
   margin-right: -3px;
-  border-color: var(--road-input-outline);
   border-right-color: transparent;
+  border-color: var(--road-input-outline);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
 }
 
 ::slotted([slot="append"]) {
   margin-left: -0.25rem;
   border-color: var(--road-input-outline);
   border-left-width: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 
 /**
@@ -140,6 +148,7 @@
 .input-group-prepend {
   z-index: 1;
   order: -1;
+  position: relative;
 }
 
 .input-group-prepend ~ .form-label {
@@ -164,8 +173,6 @@
   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);
 }
@@ -215,10 +222,6 @@
   margin-right: calc(-1rem + 1px);
 }
 
-.input-group-append ::slotted(road-button) {
-  background-color: var(--road-surface);
-}
-
 .input-group-append:hover ::slotted(road-button) {
   background-color: var(--road-button-ghost-variant);
 }

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

@@ -13,7 +13,7 @@ export class InputGroup {
     handleDisabledChange(newValue) {
         this.updateDisabledState(newValue);
     }
-    /** Applies or removes the `disabled` attribute to/from children. */
+    /** Applique le `disabled` aux enfants */
     updateDisabledState(isDisabled) {
         const children = this.el.querySelectorAll('road-input, road-button, road-select');
         children.forEach(child => {
@@ -25,9 +25,24 @@ export class InputGroup {
             }
         });
     }
-    componentWillLoad() {
-        // Ensure the initial state of `disabled` is applied before render.
+    /** Vérifie et applique le `text-indent` si `prepend` est présent */
+    updateIndentation() {
+        const hasPrepend = !!this.el.querySelector('[slot="prepend"]');
+        const formControl = this.el.querySelector('.form-control');
+        const formLabel = this.el.querySelector('.form-label');
+        if (formControl) {
+            formControl.style.textIndent = hasPrepend ? '2rem' : '';
+        }
+        if (formLabel) {
+            formLabel.style.textIndent = hasPrepend ? '2.7rem' : '';
+        }
+    }
+    componentDidLoad() {
         this.updateDisabledState(this.disabled);
+        this.updateIndentation(); // Appliquer les styles au montage
+        // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)
+        const observer = new MutationObserver(() => this.updateIndentation());
+        observer.observe(this.el, { childList: true, subtree: true });
     }
     render() {
         const errorClass = this.el.querySelector('road-input[error]') ? 'is-invalid' : '';
@@ -35,7 +50,7 @@ export class InputGroup {
             ? `size-${this.el.querySelector('road-input').sizes}`
             : '';
         const disabledClass = this.disabled ? 'is-disabled' : '';
-        return (h("div", { key: '1dc07a13ad76efc4b8ab8e2ce83b1c90ca283459', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '1c44dad07b031661812715bff42dafcb9eba22a4', class: "input-group-prepend" }, h("slot", { key: 'ecc99ec7f39e7ecd3f3ee229957e0f97ae63467a', name: "prepend" })), h("slot", { key: '2026617a9bdf3c6b31fa4492dd14d56e635fe464' }), h("div", { key: '4e134a2e344f345d021e0ec1d3100da88dd17a88', class: "input-group-append" }, h("slot", { key: '1cec89a371a53e753813fc61f388fee0108ae695', name: "append" }))));
+        return (h("div", { key: 'd820b7eee7e4199722474ddb8a7e6dea5f3c1232', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: 'ca3a4babe8c43a9d105bce56ff4d34bab501d916', class: "input-group-prepend" }, h("slot", { key: '85f0e1dacfa39a5e075edc6af93ad6b8233d55e3', name: "prepend" })), h("slot", { key: 'd1b3bc429d1388db53b32fabf24f9a8d3c24f1cd' }), h("div", { key: '557aff92ba2225803c997de830d60027e635be1a', class: "input-group-append" }, h("slot", { key: 'c4e7a0ba1ff5a766ba3d0683c6cfefd8e31afef9', name: "append" }))));
     }
     static get is() { return "road-input-group"; }
     static get encapsulation() { return "shadow"; }

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,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;GAIG;AAOH,MAAM,OAAO,UAAU;IALvB;QAQE,4EAA4E;QACpE,aAAQ,GAAY,KAAK,CAAC;KA4CnC;IA1CC,6EAA6E;IAE7E,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,oEAAoE;IAC5D,mBAAmB,CAAC,UAAmB;QAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sCAAsC,CAAC,CAAC;QAClF,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACvB,IAAI,UAAU,EAAE,CAAC;gBACf,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,mEAAmE;QACnE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAClF,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;YAC1D,CAAC,CAAC,QAAS,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,EAAE;YAC/E,CAAC,CAAC,EAAE,CAAC;QACP,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzD,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe,UAAU,IAAI,aAAa,IAAI,SAAS,EAAE;YACnE,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB;YACN,8DAAQ;YACR,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACP,CAAC;IACJ,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"]}
+{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"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","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  /** Applique le `disabled` aux enfants */\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  /** Vérifie et applique le `text-indent` si `prepend` est présent */\n  private updateIndentation() {\n    const hasPrepend = !!this.el.querySelector('[slot=\"prepend\"]');\n    const formControl = this.el.querySelector('.form-control') as HTMLElement;\n    const formLabel = this.el.querySelector('.form-label') as HTMLElement;\n    \n    if (formControl) {\n      formControl.style.textIndent = hasPrepend ? '2rem' : '';\n    }\n    if (formLabel) {\n      formLabel.style.textIndent = hasPrepend ? '2.7rem' : '';\n    }\n  }\n\n  componentDidLoad() {\n    this.updateDisabledState(this.disabled);\n    this.updateIndentation(); // Appliquer les styles au montage\n\n    // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)\n    const observer = new MutationObserver(() => this.updateIndentation());\n    observer.observe(this.el, { childList: true, subtree: true });\n  }\n\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/phone-number-input/phone-number-input.css

@@ -1,15 +1,10 @@
-:host() #phone-number .invalid-feedback.sc-road-input{
-  margin-left: -4.5rem;
-}
-
-.is-invalid .form-control.sc-road-input{
+.is-invalid .phone-number-input-field.sc-road-input{
   border-color: var(--road-danger-outline);
 }
 
 .road-phone-input-select {
   position: relative;
   display: block;
-  margin-bottom: 1rem;
   font-family: var(--road-font, sans-serif);
   color: var(--road-on-surface);
   background-color: var(--road-surface);
@@ -53,154 +48,228 @@
   cursor: pointer;
 }
 
-  .form-select-area:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 #000000;
-  }
+.form-select-area:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #000000;
+}
 
-  .form-select-area::-ms-expand { /* IE fix remove native arrow */
-    display: none;
-  }
+.form-select-area::-ms-expand { /* IE fix remove native arrow */
+  display: none;
+}
 
-  /**
-    * Placeholder
-    */
+/**
+  * Placeholder
+  */
 
-  .form-select-area::placeholder {
-    color: var(--road-on-surface-extra-weak);
-  }
+.form-select-area::placeholder {
+  color: var(--road-on-surface-extra-weak);
+}
 
-  /**
-    * Hover state
-    */
+/**
+  * Hover state
+  */
 
-  @media (hover: hover) {
+@media (hover: hover) {
 
-    .form-select-area:not(:disabled):hover {
-      border-color: var(--road-input-outline-variant);
-    }
+  .form-select-area:not(:disabled):hover {
+    border-color: var(--road-input-outline-variant);
   }
+}
 
-  /**
-    * Focus state
-    */
+/**
+  * Focus state
+  */
 
-  .form-select-area:focus ~ .form-select-area-label,
-  .form-select-area[required]:valid ~ .form-select-area-label,
-  .form-select-area.has-value ~ .form-select-area-label {
-    transform: scale(0.625) translateY(-0.625rem);
-  }
+.form-select-area:focus ~ .form-select-area-label,
+.form-select-area[required]:valid ~ .form-select-area-label,
+.form-select-area.has-value ~ .form-select-area-label {
+  transform: scale(0.625) translateY(-0.625rem);
+}
 
-  .form-select-area:not(:disabled):focus {
-    border-color: var(--road-input-outline-variant);
-  }
+.form-select-area:not(:disabled):focus {
+  border-color: var(--road-input-outline-variant);
+}
 
-  /**
-    * Disabled state
-    */
+/**
+  * Disabled state
+  */
 
-  .form-select-area:disabled,
-  .form-select-area[readonly] {
-    color: transparent;
-    cursor: not-allowed;
-    background: var(--road-surface-disabled);
-    opacity: 1;
-  }
+.form-select-area:disabled,
+.form-select-area[readonly] {
+  color: transparent;
+  cursor: not-allowed;
+  background: var(--road-surface-disabled);
+  opacity: 1;
+}
 
-  /* LABEL
-    -------------------- */
-
-  .form-select-area-label {
-    position: absolute;
-    top: 0.9rem;
-    left: 1rem;
-    display: block;
-    font-size: var(--road-font-size-18);
-    line-height: 1.5;
-    color: var(--road-on-surface-extra-weak);
-    pointer-events: none;
-    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-    transform-origin: 0 0;
-  }
+/* LABEL
+  -------------------- */
 
-  .form-select-area:required ~ .form-select-area-label::after{
-    color: var(--road-on-danger-surface);
-    content: " *";
-  }
+.form-select-area-label {
+  position: absolute;
+  top: 0.9rem;
+  left: 1rem;
+  display: block;
+  font-size: var(--road-font-size-18);
+  line-height: 1.5;
+  color: var(--road-on-surface-extra-weak);
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  transform-origin: 0 0;
+}
 
-  /* Value
-    -------------------- */
-
-  .form-select-area-value {
-    position: absolute;
-    top: 1.4rem;
-    left: 1rem;
-    display: block;
-    font-size: var(--road-label-medium);
-    line-height: 1.5;
-    color: var(--road-on-surface);
-    pointer-events: none;
-    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-    transform-origin: 0 0;
-  }
+.form-select-area:required ~ .form-select-area-label::after{
+  color: var(--road-on-danger-surface);
+  content: " *";
+}
 
+/* Value
+  -------------------- */
 
-  /* SIZES
-    -------------------- */
+.form-select-area-value {
+  position: absolute;
+  top: 1.4rem;
+  left: 1rem;
+  display: block;
+  font-size: var(--road-label-medium);
+  line-height: 1.5;
+  color: var(--road-on-surface);
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  transform-origin: 0 0;
+}
 
-  :host(.select-xl) .form-select-area {
-    height: 3.5rem;
-    padding: 0.75rem 0 0 1rem;
-  }
 
-  :host(.select-xl) .form-select-area-label {
-    top: 1rem;
-  }
+/* SIZES
+  -------------------- */
 
-  :host(.select-xl) .form-select-area:focus ~ .form-select-area-label,
-  :host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,
-  :host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,
-  :host(.select-xl) .form-select-area[type="date"] ~ .form-select-area-label,
-  :host(.select-xl) .form-select-area[type="time"] ~ .form-select-area-label {
-    transform: scale(0.75) translateY(-0.625rem);
-  }
+:host(.select-xl) .form-select-area {
+  height: 3.5rem;
+  padding: 0.75rem 0 0 1rem;
+}
 
-  :host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {
-    transform: scale(0.75) translateY(-0.625rem);
-  }
+.input-xl {
+  height: 3.5rem;
+  padding: 0.75rem 0 0 1rem;
+}
 
-  /* ERROR
-    -------------------- */
+:host(.select-xl) .form-select-area-label {
+  top: 1rem;
+}
 
-  .invalid-feedback {
-    display: none;
-    width: 100%;
-    margin-top: 0.5rem;
-    font-size: var(--road-body-small);
-    color: var(--road-on-danger-surface);
-  }
+:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,
+:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,
+:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,
+:host(.select-xl) .form-select-area[type="date"] ~ .form-select-area-label,
+:host(.select-xl) .form-select-area[type="time"] ~ .form-select-area-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
 
-  .form-select-area.is-invalid,
-  .was-validated .form-select-area:invalid {
-    border-color: var(--road-on-danger-surface);
-  }
+:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
 
-  .form-select-area.is-invalid ~ .invalid-feedback,
-  .was-validated .form-select-area:invalid ~ .invalid-feedback {
-    display: block;
-  }
+/* ERROR
+  -------------------- */
 
+.invalid-feedback {
+  gap: .25rem;
+  display: flex;
+  width: 100%;
+  margin: 0.5rem 0;
+  font-size: var(--road-body-small);
+  color: var(--road-on-danger-surface);
+}
 
-  .form-select-area option:checked::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: attr(data-content);
-  }
+.form-select-area.is-invalid,
+.was-validated .form-select-area:invalid {
+  border-color: var(--road-on-danger-surface);
+}
 
-  .form-select-area::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: var(--selected-content, '');
-  }
+.form-select-area.is-invalid ~ .invalid-feedback,
+.was-validated .form-select-area:invalid ~ .invalid-feedback {
+  display: block;
+}
+
+
+.form-select-area option:checked::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: attr(data-content);
+}
+
+.form-select-area::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: var(--selected-content, '');
+}
+
+/* -------------
+INPUT FORM LABEL
+--------------- */
+
+.phone-number-input-label {
+  position: absolute;
+  top: 1rem;
+  left: 6rem;
+  display: block;
+  font-size: var(--road-body-medium);
+  line-height: 1.5;
+  color: var(--road-on-surface-weak);
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  transform-origin: 0 0;
+}
+
+.phone-number-input-field:required ~ .phone-number-input-label::after{
+  color: var(--road-danger-default);
+  content: " *";
+}
+
+/**
+* Focus state
+*/
+
+.phone-number-input-field:focus ~ .phone-number-input-label,
+.phone-number-input-field[required]:valid ~ .phone-number-input-label,
+.phone-number-input-field.has-value ~ .phone-number-input-label {
+  transform: scale(0.625) translateY(-0.625rem);
+}
+
+.phone-number-input-field:placeholder-shown ~ .phone-number-input-label {
+  transform: scale(0.625) translateY(-0.625rem);
+}
+
+/* IE FIX */
+
+.phone-number-input-field:-ms-input-placeholder ~ .phone-number-input-label {
+transform: scale(0.625) translateY(-0.625rem);
+}
+
+.phone-number-inputs-container {
+  position: relative;
+  display: flex;
+}
+
+.road-phone-input-select {
+  margin-bottom: 1rem;
+}
+
+.is-error {
+  margin-bottom: 0;
+}
+
+/* -------------
+FORM INPUT FIELD
+------------- */
+
+.phone-number-input-field {
+  flex-grow: 1;
+  border: 1px solid var(--road-input-outline);
+  border-left: 0;
+  border-radius: 0.25rem;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}

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

@@ -26,12 +26,8 @@ export class RoadPhoneNumberInput {
             phone: this.resetPhoneUtilData(),
         };
     }
-    updateMessagePosition() {
-        this.placeErrorMessage();
-    }
     // On component load
     componentWillLoad() {
-        this.placeErrorMessage();
         let fromSelect = false;
         if (this.phoneValue) {
             this.phoneNumber = this.phoneValue;
@@ -48,35 +44,10 @@ export class RoadPhoneNumberInput {
     }
     // On user input
     handleInput(event) {
-        this.phoneNumber = event.detail.value;
+        const input = event.target;
+        this.phoneNumber = input.value;
         this.createAndDispatchPhoneData();
     }
-    // On user key down
-    handleKeyDown(event) {
-        // Liste des caractères interdits
-        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', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', "'", '"', ',', '.', '<', '>', '/', '?'];
-        // Vérifier si la touche pressée est dans la liste des caractères interdits
-        if (caracteresInterdits.includes(event.key)) {
-            event.preventDefault();
-        }
-    }
-    // On user key up
-    handleKeyUp(event) {
-        // Récupérer la valeur saisie
-        const inputValue = event.target.value || '';
-        // Vérifier si la valeur contient uniquement des chiffres ou le symbole "+"
-        const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);
-        // Si la valeur ne contient pas uniquement des chiffres ou le symbole "+", réinitialiser le champ de saisie à son état précédent
-        if (!containsOnlyNumbersAndPlus) {
-            // Réinitialiser la valeur du champ de saisie à son état précédent
-            event.target.value = this.phoneNumber;
-        }
-        else {
-            // Si la valeur contient uniquement des chiffres ou le symbole "+", mettre à jour la valeur du numéro de téléphone
-            this.phoneNumber = inputValue;
-            this.createAndDispatchPhoneData();
-        }
-    }
     // On user select
     handleSelect(event) {
         const select = event.target;
@@ -88,6 +59,7 @@ export class RoadPhoneNumberInput {
         this.updateCountryOptions();
     }
     createAndDispatchPhoneData(fromSelect) {
+        var _a;
         // Init phone util
         const phoneUtil = PhoneNumberUtil.getInstance();
         const PNF = PhoneNumberFormat;
@@ -95,7 +67,7 @@ export class RoadPhoneNumberInput {
         this.returnObject.phone = this.resetPhoneUtilData();
         const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;
         try {
-            const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);
+            const parsedPhoneNumber = phoneUtil.parse((_a = this.phoneNumber) !== null && _a !== void 0 ? _a : '', tmpCountry);
             this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();
             this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);
             this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);
@@ -117,7 +89,7 @@ export class RoadPhoneNumberInput {
             const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber));
             this.returnObject.phone.numberType = phoneType[0];
         }
-        catch (_a) { }
+        catch (_b) { }
         finally {
             this.roadPhoneNumberInput.emit(this.returnObject);
         }
@@ -130,16 +102,18 @@ export class RoadPhoneNumberInput {
         this.selectedCountry = value;
     }
     resetPhoneUtilData() {
+        var _a, _b;
         return {
             numberType: 'UNKNOWN',
             countryCode: this.selectedCountry,
             code: this.selectedCountryCode,
-            nationalNumber: this.phoneNumber,
-            internationalNumber: this.phoneNumber,
+            nationalNumber: (_a = this.phoneNumber) !== null && _a !== void 0 ? _a : '',
+            internationalNumber: (_b = this.phoneNumber) !== null && _b !== void 0 ? _b : '',
         };
     }
     isEmptyPhoneNumber() {
-        return !this.phoneNumber.length;
+        var _a;
+        return !((_a = this.phoneNumber) === null || _a === void 0 ? void 0 : _a.length);
     }
     getPhoneCodeFromCountryCode(countryCode) {
         var _a;
@@ -164,38 +138,22 @@ export class RoadPhoneNumberInput {
             },
         ];
     }
-    placeErrorMessage() {
-        this.waitForElementToExist('.invalid-feedback').then((messError) => {
-            messError.style.display = "flex";
-            messError.style.marginTop = "-0.5rem";
-            const phoneNumberInput = this.el;
-            phoneNumberInput.appendChild(messError);
-        });
-    }
-    waitForElementToExist(selector) {
-        return new Promise(resolve => {
-            if (document.querySelector(selector)) {
-                return resolve(document.querySelector(selector));
-            }
-            const observer = new MutationObserver(() => {
-                if (document.querySelector(selector)) {
-                    resolve(document.querySelector(selector));
-                    observer.disconnect();
-                }
-            });
-            observer.observe(document.body, {
-                subtree: true,
-                childList: true,
-            });
-        });
+    hasValue() {
+        return this.phoneNumber !== '' && this.phoneNumber !== null;
     }
     render() {
-        const selectId = `road-select-${selectIds++}`;
+        const id = selectIds++;
+        const selectId = `road-phone-number-select-${id}`;
+        const inputId = `road-phone-number-input-${id}`;
         const labelId = selectId + '-label';
         const valueId = selectId + '-value';
         const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';
         const isErrorClass = this.errorMessage.length ? 'is-error' : '';
-        return (h(Host, { key: 'eda1808cf7138f507656e3b3a9fa367fca5d598a' }, h("road-input-group", { key: '2c110dd86bd69aa2619fd54697992dfa54cafe7f' }, h("div", { key: 'cca235435d4edefaf271e75df90236a327805a98', class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, h("select", { key: 'f734b4ac6b7bb88ae209689fdf85ce8d3d631302', 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", { key: '89255560eed68abaf4d2125e62e96695cec49fcf', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '402c5307460ffdbd82281ccce5174687743c01ed', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("road-input", { key: '4d151be9354c9225bafc8cc05b6ebfcfc075e92c', 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 }))));
+        const hasValueClass = this.hasValue() ? 'has-value' : '';
+        const sizes = 'xl';
+        return (h(Host, { key: '7d65a01428b79587c98a5e399bab8403c0849a68' }, h("div", { key: 'b59d36be4bd2ecbe7469b37c194501d542895b29', class: 'phone-number-inputs-container' }, h("div", { key: '4cf3f4e60de5f861e09c8cbde5551fb95f209970', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: '187f3724fcc9bf5c34c6490e61e5adee102ac052', id: selectId, class: `form-select-area has-value`, "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", { key: '8e867ef3d625b2e69246591cb8f84e7794ba1a7c', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '71ae31a4e0da49b93d28e433a41fbb40b74b603d', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: '289ac4032540c87f77784439864983ed5d544439', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), h("label", { key: '60e9f10714d8807449534d1bce2f74f65a1646dc', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+            && this.errorMessage !== ''
+            && h("p", { key: 'b140351db845f88befd99aab39daa115c770732e', class: "invalid-feedback" }, h("road-icon", { key: 'ed89fc9c99493f67973448bbea8d7f0c20e0c455', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
     }
     static get is() { return "road-phone-number-input"; }
     static get encapsulation() { return "scoped"; }
@@ -423,11 +381,5 @@ export class RoadPhoneNumberInput {
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "errorMessage",
-                "methodName": "updateMessagePosition"
-            }];
-    }
 }
 //# sourceMappingURL=phone-number-input.js.map