@roadtrip/components 3.17.0 → 3.18.0

package/dist/esm/road-phone-number-input.entry.js

@@ -1193,7 +1193,7 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
 });
 });
 
-const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 2rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right -5px center/2.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:95%;z-index:1;border:0;-webkit-appearance:none;appearance:none;opacity:1;cursor:pointer}.form-select-area.sc-road-phone-number-input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-phone-number-input::-ms-expand{display:none}.form-select-area.sc-road-phone-number-input::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-phone-number-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-phone-number-input:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-phone-number-input:disabled,.form-select-area[readonly].sc-road-phone-number-input{color:transparent;cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-phone-number-input{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}.form-select-area.sc-road-phone-number-input:required~.form-select-area-label.sc-road-phone-number-input::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-phone-number-input{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}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-phone-number-input-h .form-select-area-label.sc-road-phone-number-input{top:1rem}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"date\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"time\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:placeholder-shown~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-phone-number-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input~.invalid-feedback.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid~.invalid-feedback.sc-road-phone-number-input{display:block}.form-select-area.sc-road-phone-number-input option.sc-road-phone-number-input:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-phone-number-input::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
+const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 2rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right -5px center/2.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:95%;z-index:1;border:0;-webkit-appearance:none;appearance:none;opacity:1;cursor:pointer}.form-select-area.sc-road-phone-number-input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-phone-number-input::-ms-expand{display:none}.form-select-area.sc-road-phone-number-input::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-phone-number-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-phone-number-input:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-select-area.sc-road-phone-number-input:disabled,.form-select-area[readonly].sc-road-phone-number-input{color:transparent;cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-phone-number-input{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}.form-select-area.sc-road-phone-number-input:required~.form-select-area-label.sc-road-phone-number-input::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-phone-number-input{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}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-phone-number-input-h .form-select-area-label.sc-road-phone-number-input{top:1rem}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"date\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"time\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:placeholder-shown~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-phone-number-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input~.invalid-feedback.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid~.invalid-feedback.sc-road-phone-number-input{display:block}.form-select-area.sc-road-phone-number-input option.sc-road-phone-number-input:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-phone-number-input::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
 
 let selectIds = 0;
 const RoadPhoneNumberInput = class {
@@ -1240,8 +1240,44 @@ const RoadPhoneNumberInput = class {
   }
   // On user input
   handleInput(event) {
-    this.phoneNumber = event.detail.value;
-    this.createAndDispatchPhoneData();
+    // Récupérer la valeur saisie
+    const inputValue = event.detail.value || '';
+    // Vérifier si la valeur contient uniquement des chiffres ou le symbole "+"
+    const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);
+    // Vérifier si la valeur contient des lettres
+    const containsLetters = /[a-zA-Z]/.test(inputValue);
+    // Vérifier si la valeur commence par un chiffre
+    const startsWithNumber = /^[0-9]/.test(inputValue);
+    // Si la valeur contient des lettres, ne pas la mettre à jour
+    if (containsLetters) {
+      // Réinitialiser la valeur du champ de saisie à son état précédent
+      const inputElement = this.el.querySelector('#phone-number');
+      if (inputElement) {
+        inputElement.value = this.phoneNumber;
+      }
+    }
+    else if (containsOnlyNumbersAndPlus && !startsWithNumber) {
+      // Si la valeur contient des chiffres ou le symbole "+" mais ne commence pas par un chiffre, mettre à jour la valeur
+      this.phoneNumber = inputValue;
+      this.createAndDispatchPhoneData();
+    }
+  }
+  // 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) {
@@ -1332,7 +1368,7 @@ const RoadPhoneNumberInput = class {
   }
   placeErrorMessage() {
     this.waitForElementToExist('.invalid-feedback').then((messError) => {
-      messError.style.display = "block";
+      messError.style.display = "flex";
       messError.style.marginTop = "-0.5rem";
       const phoneNumberInput = this.el;
       phoneNumberInput.appendChild(messError);
@@ -1361,7 +1397,7 @@ const RoadPhoneNumberInput = class {
     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) }, 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 }))));
+    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, onKeyUp: (event) => this.handleKeyUp(event), tabIndex: 0 }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {