@salla.sa/twilight-components 2.14.525 → 2.14.527

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -51,11 +51,17 @@ export class SallaTelInput {
             this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
         });
     }
+    // Init is async and v26 loads the validation utils lazily; both must settle.
+    async whenReady() {
+        await this.initPromise;
+        await this.utilsReady;
+    }
     /**
      * Get current values
      * @return {{mobile:number,countryCode:'SA'|string}}
      */
     async getValues() {
+        await this.initPromise;
         return {
             [this.name]: this.phone = this.phoneInput.value,
             countryCode: this.countryCode = this.countryCodeInput.value,
@@ -67,6 +73,7 @@ export class SallaTelInput {
      * @return {boolean}
      */
     async isValid() {
+        await this.whenReady();
         this.reset();
         if (this.iti.isValidNumber())
             return true;
@@ -77,7 +84,7 @@ export class SallaTelInput {
         }
         this.phoneInput.classList.add("s-has-error");
         let errorCode = this.iti.getValidationError();
-        this.errorMsg.innerText = this.errorMap[errorCode] || '';
+        this.errorMsg.innerText = this.errorMap[errorCode] || this.invalidNumber || '';
         salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + errorCode);
         return false;
     }
@@ -87,14 +94,22 @@ export class SallaTelInput {
         salla.helpers.inputDigitsOnly(this.phoneInput);
         this.iti = this.TelInput(this.phoneInput, {
             initialCountry: this.countryCode?.toLowerCase() || 'sa',
-            preferredCountries: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],
+            countryOrder: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],
             excludeCountries: ['sy', 'ir', 'cu', 'kp'],
             formatOnDisplay: false,
             separateDialCode: true,
             autoPlaceholder: 'aggressive',
-            utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/21.2.7/js/utils.min.js',
+            // v26 adds a country-search box to the dropdown by default. Keep it off to
+            // preserve the previous (v18) dropdown UX and avoid shipping an unstyled input.
+            countrySearch: false,
+            // v26 dropped the `utilsScript` URL option in favour of `loadUtils`. We load the
+            // utils bundled with the installed package as a lazy chunk (no CDN, version-locked),
+            // which carries the up-to-date libphonenumber metadata (e.g. Oman 7[3-5] mobiles).
+            loadUtils: () => import('intl-tel-input/utils'),
             dropdownContainer: this.host
         });
+        // Rejects if the lazy utils chunk fails; swallow so validation still runs.
+        this.utilsReady = this.iti.promise.catch(() => { });
         this.autofocus && this.phoneInput.focus();
         this.phoneInput.addEventListener("countrychange", () => {
             let data = this.iti.getSelectedCountryData();
@@ -123,10 +138,11 @@ export class SallaTelInput {
         }
     }
     render() {
-        return (h(Host, { key: '727fa47d71bd8fd98f76c66b3bafb2348a586303', class: "s-tel-input" }, h("input", { key: '19f5d3e2ff8902733e21f39038f716b18ae065ae', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: 'ad6b735fa4d5574b8717f460171c13a56a031451', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '07c8732dc276613fc5ed2928a2d47af51c49d942', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '1b928e13a8d7784cba93a8a9295d5e2da59380ec', class: "s-tel-input" }, h("input", { key: '351a4e2ba8865b613a7c52127ef312f834116a59', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: 'cac78f5eede19008d46a126c8c96cd963947de1f', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '7aedcb3f86d491f4789226f12812c7023d749eba', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
-        this.initTelInput();
+        this.initPromise = this.initTelInput();
+        this.initPromise.catch(() => { });
     }
     static get is() { return "salla-tel-input"; }
     static get originalStyleUrls() {