intl-tel-input 25.4.8 → 25.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.4.8",
+  "version": "25.5.1",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -147,11 +147,11 @@
     },
     "./angular": {
       "types": "./angular/build/types/intl-tel-input/angular.d.ts",
-      "default": "./angular/build/intl-tel-input/angular.js"
+      "default": "./angular/build/IntlTelInput.js"
     },
     "./angularWithUtils": {
       "types": "./angular/build/types/intl-tel-input/angularWithUtils.d.ts",
-      "default": "./angular/build/intl-tel-input/angularWithUtils.js"
+      "default": "./angular/build/IntlTelInputWithUtils.js"
     },
     "./i18n": {
       "types": "./build/js/intlTelInput.d.ts",
@@ -173,7 +173,7 @@
         "react/build/IntlTelInput.d.ts"
       ],
       "angular": [
-        "angular/build/IntlTelInput.d.ts"
+        "angular/build/types/intl-tel-input/angular.d.ts"
       ]
     }
   }

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.4.8/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -2008,7 +2008,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true" },
           this.selectedCountry
         );
       }
@@ -2494,16 +2494,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -3173,7 +3202,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.8"
+    version: "25.5.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -1972,7 +1972,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true" },
           this.selectedCountry
         );
       }
@@ -2458,16 +2458,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -3137,7 +3166,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.8"
+    version: "25.5.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2008,7 +2008,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true" },
           this.selectedCountry
         );
       }
@@ -2494,16 +2494,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -3173,7 +3202,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.8"
+    version: "25.5.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1972,7 +1972,7 @@ var Iti = class {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code" },
+          { class: "iti__selected-dial-code", "aria-hidden": "true" },
           this.selectedCountry
         );
       }
@@ -2458,16 +2458,45 @@ var Iti = class {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
     const normalisedQuery = normaliseString(query);
+    const queryLength = normalisedQuery.length;
+    const iso2Matches = [];
+    const nameStartWith = [];
+    const nameContains = [];
+    const dialCodeMatches = [];
+    const dialCodeContains = [];
+    const initialsMatches = [];
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const normalisedCountryName = normaliseString(c.name);
       const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-      const fullDialCode = `+${c.dialCode}`;
-      if (isReset || normalisedCountryName.includes(normalisedQuery) || fullDialCode.includes(normalisedQuery) || c.iso2.includes(normalisedQuery) || countryInitials.includes(normalisedQuery)) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-        }
+      if (isReset || queryLength === 0) {
+        nameContains.push(c);
+      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+        iso2Matches.push(c);
+      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+        nameStartWith.push(c);
+      } else if (normalisedCountryName.includes(normalisedQuery)) {
+        nameContains.push(c);
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+        dialCodeMatches.push(c);
+      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+        dialCodeContains.push(c);
+      } else if (countryInitials.includes(normalisedQuery)) {
+        initialsMatches.push(c);
+      }
+    }
+    const matchedCountries = [
+      ...iso2Matches.sort((a, b) => a.priority - b.priority),
+      ...nameStartWith.sort((a, b) => a.priority - b.priority),
+      ...nameContains.sort((a, b) => a.priority - b.priority),
+      ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+      ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+      ...initialsMatches.sort((a, b) => a.priority - b.priority)
+    ];
+    for (const c of matchedCountries) {
+      const listItem = c.nodeById[this.id];
+      if (listItem) {
+        this.countryList.appendChild(listItem);
         if (noCountriesAddedYet) {
           this._highlightListItem(listItem, false);
           noCountriesAddedYet = false;
@@ -3137,7 +3166,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.4.8"
+    version: "25.5.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/README.md

@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
 "vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
 ```
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.4.8/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.