@roadtrip/components 3.11.2 → 3.12.0

package/hydrate/index.js

@@ -15399,7 +15399,7 @@ class Range {
 }
 let rangeIds = 0;
 
-const ratingCss = "/*!@:host*/.sc-road-rating-h{display:flex;align-items:center}/*!@.rating-stars*/.rating-stars.sc-road-rating{display:inline-flex;flex-shrink:0}/*!@.rating-star*/.rating-star.sc-road-rating{color:var(--road-surface-disabled)}/*!@.rating-stars.rating-stars--small .icon-sm*/.rating-stars.rating-stars--small.sc-road-rating .icon-sm.sc-road-rating{width:1rem;height:1rem}/*!@.rating-number*/.rating-number.sc-road-rating{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}/*!@.rating-number.rating-number--small*/.rating-number.rating-number--small.sc-road-rating{font-size:var(--road-link-small)}";
+const ratingCss = "/*!@:host*/.sc-road-rating-h{display:flex;align-items:center}/*!@.rating-stars*/.rating-stars.sc-road-rating{display:inline-flex;flex-shrink:0}/*!@.rating-star*/.rating-star.sc-road-rating{color:var(--road-surface-disabled)}/*!@.rating-stars.rating-stars--small .icon-sm*/.rating-stars.rating-stars--small.sc-road-rating .icon-sm.sc-road-rating{width:1rem;height:1rem}/*!@.rating-number*/.rating-number.sc-road-rating{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}/*!@.rating-number.rating-number--small*/.rating-number.rating-number--small.sc-road-rating{font-size:var(--road-link-small)}/*!@.rating-number.readonly*/.rating-number.readonly.sc-road-rating{text-decoration:none}";
 
 class Rating {
   constructor(hostRef) {
@@ -15407,15 +15407,18 @@ class Rating {
     this.size = 'medium';
     this.rate = 0;
     this.showreviews = true;
+    this.readonly = false;
     this.reviews = 0;
     this.reviewsText = 'reviews';
+    this.url = '#';
   }
   render() {
     const rate = Math.floor(this.rate);
     const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;
     const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
     const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
-    return (hAsync(Host, null, hAsync("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => hAsync("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => hAsync("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => hAsync("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.showreviews && hAsync("a", { class: `${sizeRatingNumberClass}`, href: "#" }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+    const readOnly = this.readonly == true ? `readonly` : '';
+    return (hAsync(Host, null, hAsync("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => hAsync("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => hAsync("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => hAsync("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && hAsync("a", { class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && hAsync("road-label", { class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
   }
   static get style() { return ratingCss; }
   static get cmpMeta() { return {
@@ -15425,8 +15428,10 @@ class Rating {
       "size": [513],
       "rate": [2],
       "showreviews": [4],
+      "readonly": [4],
       "reviews": [2],
-      "reviewsText": [1, "reviews-text"]
+      "reviewsText": [1, "reviews-text"],
+      "url": [1]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -15460,7 +15465,7 @@ class RoadAreaCode {
       this.roadfocus.emit();
       this.roadFocus.emit();
     };
-    this.selectId = `road-select-${selectIds$1++}`;
+    this.selectId = `road-select-${selectIds$2++}`;
     this.selectedValue = '';
     this.options = [];
     this.autofocus = false;
@@ -15528,7 +15533,7 @@ class RoadAreaCode {
     "$attrsToReflect$": []
   }; }
 }
-let selectIds$1 = 0;
+let selectIds$2 = 0;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -16738,174 +16743,143 @@ 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)}";
+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;-moz-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 1rem;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 1rem center/1.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;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:var(--road-on-surface-disabled);cursor:not-allowed;background-color: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$1 = 0;
 class RoadPhoneNumberInput {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.roadPhoneNumberInput = createEvent(this, "roadPhoneNumberInput", 7);
-    this.roadselected = createEvent(this, "roadselected", 7);
-    this.roadSelected = createEvent(this, "roadSelected", 7);
+    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 = '';
-    }
-    if (this.areaValue) {
-      this.selectedCountry = this.getPhoneCountryCode(this.areaValue);
+    var _a;
+    this.placeErrorMessage();
+    let fromSelect = false;
+    if (this.phoneValue) {
+      this.phoneNumber = this.phoneValue;
     }
-    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();
-  }
-  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
+    const select = event.target;
+    if (select) {
+      this.updateSelectedCountry(select.value);
+      this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry));
+    }
+    this.createAndDispatchPhoneData(true);
+    this.updateCountryOptions();
+  }
+  createAndDispatchPhoneData(fromSelect) {
+    // Init phone util
     const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
     const PNF = libphonenumber.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(libphonenumber.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(libphonenumber.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";
@@ -16930,45 +16904,37 @@ 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 (hAsync(Host, { numberType: this.numberType }, hAsync("road-input-group", null, hAsync("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) }), hAsync("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$1++}`;
+    const labelId = selectId + '-label';
+    const valueId = selectId + '-value';
+    const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';
+    const isErrorClass = this.errorMessage.length ? 'is-error' : '';
+    return (hAsync(Host, null, hAsync("road-input-group", null, hAsync("div", { class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, hAsync("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 => (hAsync("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), hAsync("label", { class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), hAsync("label", { class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), hAsync("road-input", { id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "language": ["languageChanged"]
+    "errorMessage": ["updateMessagePosition"]
   }; }
   static get style() { return phoneNumberInputCss; }
   static get cmpMeta() { return {
     "$flags$": 2,
     "$tagName$": "road-phone-number-input",
     "$members$": {
+      "disabled": [4],
       "countryData": [16],
       "language": [1],
-      "areaLabel": [1, "area-label"],
-      "areaValue": [1025, "area-value"],
-      "inputLabel": [1, "input-label"],
-      "inputValue": [1, "input-value"],
-      "numberType": [1, "number-type"],
+      "codeLabel": [1, "code-label"],
+      "phoneLabel": [1, "phone-label"],
+      "phoneValue": [1, "phone-value"],
+      "countryCode": [1, "country-code"],
+      "errorMessage": [1, "error-message"],
       "required": [4],
       "selectedCountry": [32],
+      "selectedCountryCode": [32],
       "phoneNumber": [32],
-      "inputError": [32],
-      "countryOptions": [32]
+      "countryOptions": [32],
+      "returnObject": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -17088,6 +17054,7 @@ class Select {
       const select = ev.target;
       if (select) {
         this.value = select.value || '';
+        this.value = this.addSelected();
       }
     };
     this.onBlur = () => {
@@ -17117,6 +17084,22 @@ class Select {
     this.roadChange.emit({
       value: this.value,
     });
+    this.value = this.addSelected();
+  }
+  componentWillLoad() {
+    this.value = this.addSelected();
+  }
+  addSelected() {
+    var _a, _b;
+    const selectedOption = this.options.find(option => option.value === this.value);
+    const selectedOption2 = this.options.find(option => option.selected);
+    if (selectedOption) {
+      selectedOption.selected = true;
+    }
+    if (selectedOption2) {
+      selectedOption2.selected = false;
+    }
+    return (_b = (_a = this.options.find(option => option.value === this.value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
   }
   render() {
     const labelId = this.selectId + '-label';
@@ -19076,6 +19059,7 @@ class Stepper {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.color = 'default';
+    this.numberStep = 3;
     this.stateFirstStep = undefined;
     this.stateSecondStep = undefined;
     this.stateThirdStep = undefined;
@@ -19087,11 +19071,11 @@ class Stepper {
     const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';
     const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';
     const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';
-    const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
+    const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
     const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
     const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
     const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
-    return (hAsync(Host, null, hAsync("nav", null, hAsync("ul", { class: `${colorClass}` }, hAsync("li", { class: `${stateClass}` }, hAsync("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, hAsync("span", { class: "progress-indicator-horizontal-icon" }, hAsync("slot", { name: "progress-indicator-horizontal-icon" })), hAsync("span", { class: "progress-indicator-horizontal-title" }, hAsync("slot", { name: "progress-indicator-horizontal-title" })))), hAsync("li", { class: `${stateSecondStepClass}` }, hAsync("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, hAsync("span", { class: "progress-indicator-horizontal-icon" }, hAsync("slot", { name: "progress-indicator-horizontal-icon2" })), hAsync("span", { class: "progress-indicator-horizontal-title" }, hAsync("slot", { name: "progress-indicator-horizontal-title2" })))), hAsync("li", { class: `${stateThirdStepClass}` }, hAsync("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, hAsync("span", { class: "progress-indicator-horizontal-icon" }, hAsync("slot", { name: "progress-indicator-horizontal-icon3" })), hAsync("span", { class: "progress-indicator-horizontal-title" }, hAsync("slot", { name: "progress-indicator-horizontal-title3" }))))))));
+    return (hAsync(Host, null, hAsync("nav", null, hAsync("ul", { class: `${colorClass}` }, hAsync("li", { class: `${stateClass}` }, hAsync("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, hAsync("span", { class: "progress-indicator-horizontal-icon" }, hAsync("slot", { name: "progress-indicator-horizontal-icon" })), hAsync("span", { class: "progress-indicator-horizontal-title" }, hAsync("slot", { name: "progress-indicator-horizontal-title" })))), hAsync("li", { class: `${stateSecondStepClass}` }, hAsync("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, hAsync("span", { class: "progress-indicator-horizontal-icon" }, hAsync("slot", { name: "progress-indicator-horizontal-icon2" })), hAsync("span", { class: "progress-indicator-horizontal-title" }, hAsync("slot", { name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && hAsync("li", { class: `${stateThirdStepClass}` }, hAsync("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, hAsync("span", { class: "progress-indicator-horizontal-icon" }, hAsync("slot", { name: "progress-indicator-horizontal-icon3" })), hAsync("span", { class: "progress-indicator-horizontal-title" }, hAsync("slot", { name: "progress-indicator-horizontal-title3" }))))))));
   }
   static get style() { return progressIndicatorHorizontalCss; }
   static get cmpMeta() { return {
@@ -19099,6 +19083,7 @@ class Stepper {
     "$tagName$": "road-progress-indicator-horizontal",
     "$members$": {
       "color": [513],
+      "numberStep": [2, "number-step"],
       "stateFirstStep": [1, "state-first-step"],
       "stateSecondStep": [1, "state-second-step"],
       "stateThirdStep": [1, "state-third-step"],