@roadtrip/components 3.32.5 → 3.33.0

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil } from "google-libphonenumber";
+import { forbiddenChars } from "./constants";
 let selectIds = 0;
 export class RoadPhoneNumberInput {
     constructor() {
@@ -26,12 +27,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 +45,17 @@ 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)) {
+        // checks if the forbidden characters's list contains the pressed key
+        if (forbiddenChars.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 +67,7 @@ export class RoadPhoneNumberInput {
         this.updateCountryOptions();
     }
     createAndDispatchPhoneData(fromSelect) {
+        var _a;
         // Init phone util
         const phoneUtil = PhoneNumberUtil.getInstance();
         const PNF = PhoneNumberFormat;
@@ -95,7 +75,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 +97,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 +110,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 +146,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: '9f90460c652db496fc88dd4b8e611bdf348e3f5a' }, h("div", { key: '03fceb8966c9622782a0341a2f0a01511cfe7006', class: 'phone-number-inputs-container' }, h("div", { key: '4a889f1e223cf354a262fd68d948c05dc265a14b', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: 'cc520dea43d2b64645f9cbf67c768efce7790079', 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: '6769d2bda09b72449a566ece542ebf7edc5a0e40', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '513bfd2c0eab6609d74eb7b9ebc14a212be4cc9d', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: 'db609e065a32f7014c6d32dec4aae86b2b607e77', 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), onKeyDown: (event) => this.handleKeyDown(event) }), h("label", { key: 'cac7f2ae8afa700db8871bc4d2b35f49822ca179', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+            && this.errorMessage !== ''
+            && h("p", { key: 'cb521ea80ae33ce0743a64270d47234cc0bdf114', class: "invalid-feedback" }, h("road-icon", { key: '1dcf2587dabc46402d1c16bbf75604aedfc4d54d', 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 +389,5 @@ export class RoadPhoneNumberInput {
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "errorMessage",
-                "methodName": "updateMessagePosition"
-            }];
-    }
 }
 //# sourceMappingURL=phone-number-input.js.map

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            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"]}
+{"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 } from '@stencil/core';\nimport { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil } from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { forbiddenChars } from './constants';\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 | null = '';\n  @State() countryOptions: CountryOption[] = [];\n  @State() returnObject: ReturnObject = {\n    isError: false,\n    phone: this.resetPhoneUtilData(),\n  };\n\n  // On component load\n  componentWillLoad() {\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: Event) {\n    const input = event.target as HTMLInputElement;\n    this.phoneNumber = input.value;\n    this.createAndDispatchPhoneData();\n    }\n\n\n  // On user key down\n  handleKeyDown(event: KeyboardEvent) {\n    // checks if the forbidden characters's list contains the pressed key\n    if (forbiddenChars.includes(event.key)) {\n      event.preventDefault();\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  private hasValue(): boolean {\n    return this.phoneNumber !== '' && this.phoneNumber !== null;\n  }\n\n  render() {\n    const id = selectIds++;\n    const selectId = `road-phone-number-select-${id}`;\n    const inputId = `road-phone-number-input-${id}`;\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    const hasValueClass = this.hasValue() ? 'has-value' : '';\n    const sizes = 'xl';\n\n    return (\n      <Host>\n        <div class='phone-number-inputs-container'>\n          <div class={`road-phone-input-select ${isErrorClass} ${isInvalidClass}`} slot=\"prepend\">\n            <select\n              id={selectId}\n              class={`form-select-area has-value`}\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          <input\n            type='tel'\n            id={inputId}\n            class={`input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`}\n            value={this.phoneValue}\n            required={this.required}\n            tabIndex={0}\n            onInput={(event: InputEvent) => this.handleInput(event)}\n            onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n          />\n          <label\n            class=\"phone-number-input-label\"\n            id={labelId}\n            htmlFor={inputId}\n          >\n            {this.phoneLabel}\n          </label>\n        </div>\n        {\n          this.errorMessage\n          && this.errorMessage !== ''\n          && <p class=\"invalid-feedback\">\n            <road-icon\n              slot=\"start\"\n              color='danger'\n              name=\"alert-error-solid\"\n              aria-hidden=\"true\"\n              size=\"sm\"\n            />\n            {this.errorMessage}\n          </p>\n        }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/plate-number/plate-number.js

@@ -92,10 +92,10 @@ export class PlateNumber {
     render() {
         const value = this.getValue();
         const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-        return (h("road-input-group", { key: '7980cc259f449b537eb2a03fc4e291f1d1969bfb', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '3149ae01f12aadde00cb72903b09c73a45816732', slot: "prepend", class: "input-group-prepend" }, h("div", { key: '21220cb22eccab0efab05f44a1127bcb6cbd204f', class: "plate-number-start" }, h("road-icon", { key: '2b1e4f33543c17399f1d19088f3d71c1d15c0248', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: 'ab3f376b26c1bc8b8dcc0741a8d651bf5ef2ab66', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
+        return (h("road-input-group", { key: 'd99ec720113a121c58794385a2a697459cc4e0eb', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '559c8428a6403ee087bc219b6027b12a48c658d8', slot: "prepend", class: "input-group-prepend" }, h("div", { key: '8483940a622fb54e8bc29dfeaf3ade7aaeeb0e8c', class: "plate-number-start" }, h("road-icon", { key: 'ba60f444919f5b6221fe4d910ced4bec521e4101', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: '095d70b607191a292c5857559566954122c5081c', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
             .filter(item => item.country === this.country)[0].letter))), this.motorbike
             ? (h("textarea", { class: "form-control plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
-            : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), h("label", { key: '247d5b0a7be0f8d5012f5954d569c674e5f294a2', slot: "append", class: "input-group-append" }, h("div", { key: '7ddc6a2c9e8bc5a41677cda5f3b48ae000952d08', class: "plate-number-end" }))));
+            : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), h("label", { key: '28ce8da1e17d33750056cbbb7b62686f492b4f6d', slot: "append", class: "input-group-append" }, h("div", { key: 'a7fd028f9e8457e1b865abbe79539223d64c7087', class: "plate-number-end" }))));
     }
     static get is() { return "road-plate-number"; }
     static get encapsulation() { return "scoped"; }