@roadtrip/components 3.11.2 → 3.12.0

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

@@ -1,167 +1,138 @@
 import { Host, h } from "@stencil/core";
 import { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil, } from "google-libphonenumber";
+let selectIds = 0;
 export class RoadPhoneNumberInput {
   constructor() {
+    this.disabled = false;
     this.countryData = [];
     this.language = 'fr';
-    this.areaLabel = 'Country';
-    this.areaValue = '';
-    this.inputLabel = 'Number';
-    this.inputValue = '';
-    this.numberType = undefined;
+    this.codeLabel = '';
+    this.phoneLabel = '';
+    this.phoneValue = undefined;
+    this.countryCode = undefined;
+    this.errorMessage = '';
     this.required = false;
-    this.selectedCountry = '';
+    this.selectedCountry = this.countryData[0].countryCode;
+    this.selectedCountryCode = this.countryData[0].phoneCode;
     this.phoneNumber = '';
-    this.inputError = '';
     this.countryOptions = [];
+    this.returnObject = {
+      isError: false,
+      phone: this.resetPhoneUtilData(),
+    };
   }
-  languageChanged() {
-    this.updateCountryOptions();
-  }
-  updateCountryOptions() {
-    const validLanguage = this.language && this.countryData[0].translations[this.language] ? this.language : 'fr';
-    this.countryOptions = this.countryData.map(country => {
-      return {
-        value: country.phoneCode,
-        label: `${country.translations[validLanguage]} (+${country.phoneCode})`,
-        selected: country.countryCode === this.selectedCountry, // Ici, nous marquons l'option par défaut comme sélectionnée
-      };
-    });
+  updateMessagePosition() {
+    this.placeErrorMessage();
   }
+  // On component load
   componentWillLoad() {
-    if (this.numberType && this.numberType !== 'FIXED_LINE' && this.numberType !== 'MOBILE') {
-      this.numberType = '';
+    var _a;
+    this.placeErrorMessage();
+    let fromSelect = false;
+    if (this.phoneValue) {
+      this.phoneNumber = this.phoneValue;
     }
-    if (this.areaValue) {
-      this.selectedCountry = this.getPhoneCountryCode(this.areaValue);
-    }
-    else {
-      if (this.countryData && this.countryData.length > 0) {
-        this.selectedCountry = this.countryData[0].countryCode;
-      }
-    }
-    if (this.inputValue) {
-      //   this.phoneNumber = this.inputValue;
-      //   function recupererCaracteres(s: string ) {
-      //     if (s.substring(0, 2) === "00") {
-      //       return s.substring(2, 4);
-      //     } else {
-      //       return null;
-      //     }
-      //   }
-      //   const chaine = this.inputValue;
-      //   const resultat = recupererCaracteres(chaine);
-      //   this.areaValue = resultat as string;
-      //   this.selectedCountry = this.getPhoneCountryCode(this.areaValue);
-      this.handleInput({
-        detail: {
-          value: this.inputValue,
-        },
-      });
+    if (this.countryCode) {
+      this.selectedCountry = this.countryCode;
+      this.updateSelectedCountryCode((_a = this.getPhoneCodeFromCountryCode(this.countryCode)) !== null && _a !== void 0 ? _a : '');
+      fromSelect = true;
     }
     this.updateCountryOptions();
+    this.createAndDispatchPhoneData(fromSelect);
   }
-  getPhoneCountryCode(phoneCode) {
-    var _a, _b;
-    return (_b = (_a = this.countryData.find((country) => country.phoneCode === phoneCode)) === null || _a === void 0 ? void 0 : _a.countryCode) !== null && _b !== void 0 ? _b : '';
+  // On user input
+  handleInput(event) {
+    this.phoneNumber = event.detail.value;
+    this.createAndDispatchPhoneData();
   }
+  // On user select
   handleSelect(event) {
-    const receivedPhoneCode = event.detail.value.replace('+', '');
-    const phoneCountryCode = this.getPhoneCountryCode(receivedPhoneCode);
-    this.selectedCountry = phoneCountryCode;
-    this.createReturnObject();
+    const select = event.target;
+    if (select) {
+      this.updateSelectedCountry(select.value);
+      this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry));
+    }
+    this.createAndDispatchPhoneData(true);
+    this.updateCountryOptions();
   }
-  createReturnObject() {
-    var _a, _b, _c, _d;
-    const returnObject = {
-      isError: true,
-      phone: {
-        phoneNumberType: 'UNKNOWN',
-        countryCode: this.selectedCountry,
-        nationalNumber: this.phoneNumber,
-        phoneCode: (_b = (_a = this.countryData.find((country) => country.countryCode === this.selectedCountry)) === null || _a === void 0 ? void 0 : _a.phoneCode) !== null && _b !== void 0 ? _b : '',
-        internationalNumber: this.phoneNumber,
-      },
-    };
-    // create instance
+  createAndDispatchPhoneData(fromSelect) {
+    // Init phone util
     const phoneUtil = PhoneNumberUtil.getInstance();
     const PNF = PhoneNumberFormat;
-    // Parse and verify the phone number
+    // Reset the return object data
+    this.returnObject.phone = this.resetPhoneUtilData();
+    const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;
     try {
-      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, this.selectedCountry);
-      const phoneCode = parsedPhoneNumber.getCountryCode();
-      // get the phone's country code and updates the areaValue 
+      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, 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);
+      // Set the country code values depending on the event origin
       if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {
-        this.selectedCountry = phoneUtil.getRegionCodeForNumber(parsedPhoneNumber);
-        const computedPhoneCode = (_d = (_c = this.countryData.find(country => country.countryCode == this.selectedCountry)) === null || _c === void 0 ? void 0 : _c.phoneCode) !== null && _d !== void 0 ? _d : '';
-        this.areaValue = computedPhoneCode;
-      }
-      const errorTranslation = {
-        fixed: {
-          fr: 'N° de fixe attendu',
-          en: 'Expected landline number',
-          es: 'Número de teléfono fijo esperado',
-          pt: 'Número de telefone fixo esperado',
-          nl: 'Verwacht vast nummer',
-          de: 'Erwartete Festnetznummer',
-          it: 'Numero di rete fissa previsto',
-        },
-        mobile: {
-          fr: 'N° de mobile attendu',
-          en: 'Expected mobile number',
-          es: 'Número de móvil esperado',
-          pt: 'Número de celular esperado',
-          nl: 'Verwacht mobiel nummer',
-          de: 'Erwartete Handynummer',
-          it: 'Numero di cellulare previsto',
-        },
-        default: {
-          fr: 'Numéro de téléphone non valide',
-          en: 'Invalid phone number',
-          es: 'Numero de telefono invalido',
-          pt: 'Número de telefone inválido',
-          nl: 'Ongeldig telefoonnummer',
-          de: 'Ungültige Telefonnummer',
-          it: 'Numero di telefono invalido',
-        },
-      };
-      if (parsedPhoneNumber && phoneUtil.isValidNumber(parsedPhoneNumber)) {
-        this.setAndPlaceErrorMessage('');
-        const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber));
-        returnObject.isError = false;
-        returnObject.phone = {
-          phoneNumberType: phoneType[0],
-          countryCode: phoneUtil.getRegionCodeForNumber(parsedPhoneNumber),
-          phoneCode,
-          nationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL),
-          internationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.E164),
-        };
-        if (phoneType[0] !== this.numberType) {
-          switch (this.numberType) {
-            case 'FIXED_LINE':
-              this.setAndPlaceErrorMessage(errorTranslation.fixed[this.language]);
-              break;
-            case 'MOBILE':
-              this.setAndPlaceErrorMessage(errorTranslation.mobile[this.language]);
-              break;
-            default:
-              this.setAndPlaceErrorMessage('');
-          }
+        if (fromSelect) {
+          this.returnObject.isError = !(phoneUtil.isValidNumber(parsedPhoneNumber) &&
+            phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&
+            !this.isEmptyPhoneNumber());
         }
+        else {
+          this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode().toString());
+          this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber));
+          this.returnObject.phone.countryCode = this.selectedCountry;
+          this.returnObject.phone.code = this.selectedCountryCode;
+        }
+        this.updateCountryOptions();
       }
-      else {
-        this.setAndPlaceErrorMessage(errorTranslation.default[this.language]);
-      }
+      const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber));
+      this.returnObject.phone.numberType = phoneType[0];
     }
-    catch (_e) { }
+    catch (_a) { }
     finally {
-      this.roadPhoneNumberInput.emit(returnObject);
-      // console.log(returnObject.phone.phoneCode);
-      // returnObject.phone.phoneCode = '';
+      this.roadPhoneNumberInput.emit(this.returnObject);
     }
   }
-  setAndPlaceErrorMessage(message) {
-    this.inputError = message;
+  // utils
+  updateSelectedCountryCode(countryCode) {
+    this.selectedCountryCode = countryCode;
+  }
+  updateSelectedCountry(value) {
+    this.selectedCountry = value;
+  }
+  resetPhoneUtilData() {
+    return {
+      numberType: 'UNKNOWN',
+      countryCode: this.selectedCountry,
+      code: this.selectedCountryCode,
+      nationalNumber: this.phoneNumber,
+      internationalNumber: this.phoneNumber,
+    };
+  }
+  isEmptyPhoneNumber() {
+    return !this.phoneNumber.length;
+  }
+  getPhoneCodeFromCountryCode(countryCode) {
+    var _a;
+    return (_a = this.countryData.find(country => country.countryCode === countryCode)) === null || _a === void 0 ? void 0 : _a.phoneCode;
+  }
+  updateCountryOptions() {
+    const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';
+    this.countryOptions = [
+      ...this.countryData
+        .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))
+        .map(country => ({
+        value: country.countryCode,
+        label: `${country.translations[validLanguage]} (+${country.phoneCode})`,
+        selected: country.countryCode === this.selectedCountry,
+        disabled: false,
+      })),
+      {
+        value: '',
+        label: '--',
+        selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),
+        disabled: true,
+      },
+    ];
+  }
+  placeErrorMessage() {
     this.waitForElementToExist('.invalid-feedback').then((messError) => {
       messError.style.display = "block";
       messError.style.marginTop = "-0.5rem";
@@ -186,23 +157,13 @@ export class RoadPhoneNumberInput {
       });
     });
   }
-  handleInput(event) {
-    this.updateCountryOptions();
-    this.phoneNumber = event.detail.value;
-    this.createReturnObject();
-  }
-  extractCallingCode(countryString) {
-    const regex = /\(([^)]+)\)/;
-    const found = countryString.match(regex);
-    return found ? found[1] : '';
-  }
-  selectCountry(event) {
-    const countryString = event.detail.value; // Get the value from the custom event
-    this.selectedCountry = this.extractCallingCode(countryString);
-    this.el.querySelector('.form-select-area-value').innerHTML = countryString;
-  }
   render() {
-    return (h(Host, { numberType: this.numberType }, h("road-input-group", null, h("road-area-code", { slot: "prepend", class: `form-select has-value`, label: this.areaLabel, value: this.areaValue, sizes: "xl", options: this.countryOptions, onRoadchange: (event) => this.handleSelect(event) }), h("road-input", { id: "phone-number", sizes: "xl", label: this.inputLabel, value: this.inputValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.inputError }))));
+    const selectId = `road-select-${selectIds++}`;
+    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, 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 }))));
   }
   static get is() { return "road-phone-number-input"; }
   static get encapsulation() { return "scoped"; }
@@ -218,6 +179,24 @@ export class RoadPhoneNumberInput {
   }
   static get properties() {
     return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable both fields"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "countryData": {
         "type": "unknown",
         "mutable": false,
@@ -226,8 +205,9 @@ export class RoadPhoneNumberInput {
           "resolved": "CountryType[]",
           "references": {
             "CountryType": {
-              "location": "global",
-              "id": "global::CountryType"
+              "location": "import",
+              "path": "./interfaces",
+              "id": "src/components/phone-number-input/interfaces/index.ts::CountryType"
             }
           }
         },
@@ -235,7 +215,7 @@ export class RoadPhoneNumberInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The country data"
+          "text": "List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example)"
         },
         "defaultValue": "[]"
       },
@@ -251,13 +231,13 @@ export class RoadPhoneNumberInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The translation language of the countries"
+          "text": "Used to display countries with the right language"
         },
         "attribute": "language",
         "reflect": false,
         "defaultValue": "'fr'"
       },
-      "areaLabel": {
+      "codeLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -269,15 +249,15 @@ export class RoadPhoneNumberInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label display in the select area"
+          "text": "Country selection placeHolder"
         },
-        "attribute": "area-label",
+        "attribute": "code-label",
         "reflect": false,
-        "defaultValue": "'Country'"
+        "defaultValue": "''"
       },
-      "areaValue": {
+      "phoneLabel": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -287,64 +267,63 @@ export class RoadPhoneNumberInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The indicatif display in the select area"
+          "text": "Phone input placeHolder"
         },
-        "attribute": "area-value",
+        "attribute": "phone-label",
         "reflect": false,
         "defaultValue": "''"
       },
-      "inputLabel": {
+      "phoneValue": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The label display in the input"
+          "text": "Value displayed in the phone input"
         },
-        "attribute": "input-label",
-        "reflect": false,
-        "defaultValue": "'Number'"
+        "attribute": "phone-value",
+        "reflect": false
       },
-      "inputValue": {
+      "countryCode": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The value of the input"
+          "text": "Selected country code"
         },
-        "attribute": "input-value",
-        "reflect": false,
-        "defaultValue": "''"
+        "attribute": "country-code",
+        "reflect": false
       },
-      "numberType": {
+      "errorMessage": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string | undefined",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Type of the phone number : FIXED_LINE, MOBILE"
+          "text": "Error message (displayed only if ther is a message)"
         },
-        "attribute": "number-type",
-        "reflect": false
+        "attribute": "error-message",
+        "reflect": false,
+        "defaultValue": "''"
       },
       "required": {
         "type": "boolean",
@@ -358,7 +337,7 @@ export class RoadPhoneNumberInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the user must fill in a value before submitting a form."
+          "text": "Add a star in the phone input"
         },
         "attribute": "required",
         "reflect": false,
@@ -369,9 +348,10 @@ export class RoadPhoneNumberInput {
   static get states() {
     return {
       "selectedCountry": {},
+      "selectedCountryCode": {},
       "phoneNumber": {},
-      "inputError": {},
-      "countryOptions": {}
+      "countryOptions": {},
+      "returnObject": {}
     };
   }
   static get events() {
@@ -383,49 +363,11 @@ export class RoadPhoneNumberInput {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitt object data."
-        },
-        "complexType": {
-          "original": "{\n    isError: boolean;\n    phone: PhoneReturnType;\n  }",
-          "resolved": "{ isError: boolean; phone: PhoneReturnType; }",
-          "references": {
-            "PhoneReturnType": {
-              "location": "global",
-              "id": "global::PhoneReturnType"
-            }
-          }
-        }
-      }, {
-        "method": "roadselected",
-        "name": "roadselected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted the value and label of the option selected."
-        },
-        "complexType": {
-          "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
-          "resolved": "{ value: string | null | undefined; label: string; }",
-          "references": {}
-        }
-      }, {
-        "method": "roadSelected",
-        "name": "roadSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
+          "text": "Computed phone data"
         },
         "complexType": {
-          "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
-          "resolved": "{ value: string | null | undefined; label: string; }",
+          "original": "{\n    isError: boolean;\n    phone: {\n      numberType: string;\n      countryCode: string;\n      nationalNumber: string;\n      code: string;\n      internationalNumber: string;\n    };\n  }",
+          "resolved": "{ isError: boolean; phone: { numberType: string; countryCode: string; nationalNumber: string; code: string; internationalNumber: string; }; }",
           "references": {}
         }
       }];
@@ -433,8 +375,8 @@ export class RoadPhoneNumberInput {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "language",
-        "methodName": "languageChanged"
+        "propName": "errorMessage",
+        "methodName": "updateMessagePosition"
       }];
   }
 }

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, Watch, Event, EventEmitter } from '@stencil/core';\nimport {\n  PhoneNumberFormat,\n  PhoneNumberType,\n  PhoneNumberUtil,\n} from 'google-libphonenumber';\n\ntype CountryType = {\n  translations: { [key: string]: string },\n  countryCode: string,\n  phoneCode: string\n};\n\ninterface PhoneReturnType {\n  phoneNumberType: string;\n  countryCode: string;\n  nationalNumber: string;\n  phoneCode: string;\n  internationalNumber: string;\n}\n\ninterface Translations {\n  fixed: TranslationLanguages;\n  mobile: TranslationLanguages;\n  default: TranslationLanguages;\n}\n\ninterface TranslationLanguages {\n  fr: string;\n  en: string;\n  es: string;\n  pt: string;\n  nl: string;\n  de: string;\n  it: string;\n  [key: string]: string;\n}\n\n@Component({\n  tag: 'road-phone-number-input',\n  styleUrl: 'phone-number-input.css',\n  scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n  /**\n * Emitt object data.\n */\n  @Event() roadPhoneNumberInput!: EventEmitter<{\n    isError: boolean;\n    phone: PhoneReturnType;\n  }>;\n\n  @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n  /**\n   * The country data \n   */\n  @Prop() countryData: CountryType[] = [];\n\n  /**\n   * The translation language of the countries\n   */\n  @Prop() language: string = 'fr';\n\n  /**\n   * The label display in the select area\n   */\n  @Prop() areaLabel: string = 'Country';\n\n  /**\n   * The indicatif display in the select area\n   */\n  @Prop({ mutable: true }) areaValue: string = '';\n\n  /**\n   * The label display in the input\n   */\n  @Prop() inputLabel: string = 'Number';\n\n  /**\n   * The value of the input\n   */\n  @Prop() inputValue: string = '';\n\n  /**\n   * Type of the phone number : FIXED_LINE, MOBILE\n   */\n  @Prop() numberType?: string;\n\n  /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n  @Prop() required = false;\n\n  @State() selectedCountry: string = '';\n  @State() phoneNumber: string = '';\n\n  @State() inputError: string = '';\n\n  @State() countryOptions: { value: string; label: string; selected: boolean }[] = [];\n\n  @Watch('language')\n  languageChanged() {\n    this.updateCountryOptions();\n  }\n\n  updateCountryOptions() {\n    const validLanguage = this.language && this.countryData[0].translations[this.language] ? this.language : 'fr';\n    this.countryOptions = this.countryData.map(country => {\n      return {\n        value: country.phoneCode,\n        label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n        selected: country.countryCode === this.selectedCountry,  // Ici, nous marquons l'option par défaut comme sélectionnée\n      };\n    });\n  }\n\n  componentWillLoad() {\n    if (this.numberType && this.numberType !== 'FIXED_LINE' && this.numberType !== 'MOBILE') {\n      this.numberType = '';\n    }\n\n    if (this.areaValue) {\n      this.selectedCountry = this.getPhoneCountryCode(this.areaValue);\n    } else {\n      if (this.countryData && this.countryData.length > 0) {\n        this.selectedCountry = this.countryData[0].countryCode;\n      }\n    }\n\n    if (this.inputValue) {\n    //   this.phoneNumber = this.inputValue;\n\n    //   function recupererCaracteres(s: string ) {\n    //     if (s.substring(0, 2) === \"00\") {\n    //       return s.substring(2, 4);\n    //     } else {\n    //       return null;\n    //     }\n    //   }\n      \n    //   const chaine = this.inputValue;\n    //   const resultat = recupererCaracteres(chaine);\n      \n    //   this.areaValue = resultat as string;\n    //   this.selectedCountry = this.getPhoneCountryCode(this.areaValue);\n\n      this.handleInput({\n        detail: {\n          value: this.inputValue,\n        },\n      });\n    }\n\n    this.updateCountryOptions();\n  }\n\n  getPhoneCountryCode(phoneCode: string): string {\n    return this.countryData.find((country) => country.phoneCode === phoneCode)?.countryCode ?? '';\n  }\n\n  handleSelect(event: any) {\n    const receivedPhoneCode = event.detail.value.replace('+', '');\n    const phoneCountryCode = this.getPhoneCountryCode(receivedPhoneCode);\n\n    this.selectedCountry = phoneCountryCode;\n\n    this.createReturnObject();\n  }\n\n  createReturnObject() {\n    const returnObject = {\n      isError: true,\n      phone: {\n        phoneNumberType: 'UNKNOWN',\n        countryCode: this.selectedCountry,\n        nationalNumber: this.phoneNumber,\n        phoneCode: this.countryData.find((country) => country.countryCode === this.selectedCountry)?.phoneCode ?? '',\n        internationalNumber: this.phoneNumber,\n      },\n    };\n\n    // create instance\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const PNF = PhoneNumberFormat;\n\n    // Parse and verify the phone number\n    try {\n      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, this.selectedCountry as any);\n\n      const phoneCode = parsedPhoneNumber.getCountryCode() as any;\n      // get the phone's country code and updates the areaValue \n      if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n        this.selectedCountry = phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!;\n\n        const computedPhoneCode = this.countryData.find(country => country.countryCode == this.selectedCountry)?.phoneCode ?? '';\n\n        this.areaValue = computedPhoneCode;\n      }\n\n      const errorTranslation: Translations = {\n        fixed: {\n          fr: 'N° de fixe attendu',\n          en: 'Expected landline number',\n          es: 'Número de teléfono fijo esperado',\n          pt: 'Número de telefone fixo esperado',\n          nl: 'Verwacht vast nummer',\n          de: 'Erwartete Festnetznummer',\n          it: 'Numero di rete fissa previsto',\n        },\n        mobile: {\n          fr: 'N° de mobile attendu',\n          en: 'Expected mobile number',\n          es: 'Número de móvil esperado',\n          pt: 'Número de celular esperado',\n          nl: 'Verwacht mobiel nummer',\n          de: 'Erwartete Handynummer',\n          it: 'Numero di cellulare previsto',\n        },\n        default: {\n          fr: 'Numéro de téléphone non valide',\n          en: 'Invalid phone number',\n          es: 'Numero de telefono invalido',\n          pt: 'Número de telefone inválido',\n          nl: 'Ongeldig telefoonnummer',\n          de: 'Ungültige Telefonnummer',\n          it: 'Numero di telefono invalido',\n        },\n      };\n\n      if (parsedPhoneNumber && phoneUtil.isValidNumber(parsedPhoneNumber)) {\n        this.setAndPlaceErrorMessage('');\n\n        const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n        \n        returnObject.isError = false;\n        returnObject.phone = {\n          phoneNumberType: phoneType[0],\n          countryCode: phoneUtil.getRegionCodeForNumber(parsedPhoneNumber) as any,\n          phoneCode,\n          nationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL),\n          internationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.E164),\n        };\n        \n        if (phoneType[0] !== this.numberType) {\n          switch(this.numberType) {\n            case 'FIXED_LINE':\n              this.setAndPlaceErrorMessage(errorTranslation.fixed[this.language]);\n              break;\n            case 'MOBILE':\n              this.setAndPlaceErrorMessage(errorTranslation.mobile[this.language]);\n              break;\n            default:\n              this.setAndPlaceErrorMessage('');\n          }\n        }\n      }\n       else {\n        this.setAndPlaceErrorMessage(errorTranslation.default[this.language]);\n      }\n    }\n    catch {}\n    finally {\n      this.roadPhoneNumberInput.emit(returnObject);\n      // console.log(returnObject.phone.phoneCode);\n      // returnObject.phone.phoneCode = '';\n      \n    }\n  }\n\n  setAndPlaceErrorMessage(message: string) {\n    this.inputError = message;\n\n    this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n      messError.style.display = \"block\";\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  handleInput(event: any) {\n    this.updateCountryOptions();\n\n    this.phoneNumber = event.detail.value;\n    this.createReturnObject();\n  }\n\n  /**\n   * Emitted the value and label of the option selected.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n  /** @internal */\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  extractCallingCode(countryString: string) {\n    const regex = /\\(([^)]+)\\)/;\n    const found = countryString.match(regex);\n    return found ? found[1] : '';\n  }\n\n  selectCountry(event: CustomEvent) {\n    const countryString = event.detail.value;  // Get the value from the custom event\n    this.selectedCountry = this.extractCallingCode(countryString);\n    (this.el.querySelector('.form-select-area-value') as HTMLElement).innerHTML = countryString;\n  }\n\n  render() {\n    return (\n      <Host\n      numberType={this.numberType}>\n        <road-input-group>\n          <road-area-code\n            slot=\"prepend\"\n            class={`form-select has-value`}\n            label={this.areaLabel}\n            value={this.areaValue}\n            sizes=\"xl\"\n            options={this.countryOptions}\n            onRoadchange={(event) => this.handleSelect(event)}\n          ></road-area-code>\n          <road-input\n            id=\"phone-number\"\n            sizes=\"xl\"\n            label={this.inputLabel}\n            value={this.inputValue}\n            onRoadChange={(event) => this.handleInput(event)}\n            required={this.required}\n            error={this.inputError}\n          >\n          </road-input>\n        </road-input-group>\n      </Host>\n    );\n  }\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 {\n  PhoneNumberFormat,\n  PhoneNumberType,\n  PhoneNumberUtil,\n} 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      this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode) ?? '');\n      fromSelect = true;\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  // 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 = \"block\";\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            >\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          >\n          </road-input>\n        </road-input-group>\n      </Host>\n    );\n  }\n}\n\n\n"]}