intl-tel-input 25.13.1 → 25.13.3

package/README.md

@@ -81,16 +81,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
 ## Getting Started (Using a CDN)
 1. Add the CSS
   ```html
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.1/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.3/build/css/intlTelInput.css">
   ```
 
 2. Add the plugin script and initialise it on your input element
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.1/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.3/build/js/intlTelInput.min.js"></script>
   <script>
     const input = document.querySelector("#phone");
     window.intlTelInput(input, {
-      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.1/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.3/build/js/utils.js"),
     });
   </script>
   ```
@@ -328,12 +328,12 @@ Set the initial country selection by specifying its country code, e.g. `"us"` fo
 Type: `() => Promise<module>` Default: `null`  
 This is one way to lazy load the included utils.js (to enable formatting/validation, etc) - see [Loading The Utilities Script](#loading-the-utilities-script) for more options.
 
-The `loadUtils` option takes a function that returns a Promise resolving to the utils module (see example code below). You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.1/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
+The `loadUtils` option takes a function that returns a Promise resolving to the utils module (see example code below). You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.3/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
 
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.1/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.3/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js

package/angular/README.md

@@ -54,7 +54,7 @@ import "intl-tel-input/styles";
 
 See the [validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) for a more fleshed-out example of how to handle validation, or check out the [form demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/form/form.component.ts) for an alternative approach using `ReactiveFormsModule`.
 
-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 { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` 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.13.1/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 { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` 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.13.3/build/js/utils.js"`.
 
 ## Props
 

package/angular/build/IntlTelInput.js

@@ -2232,6 +2232,7 @@ var buildClearIcon = (id2) => {
 var UI = class {
   constructor(input, options, id2) {
     this.highlightedItem = null;
+    this.selectedItem = null;
     input.dataset.intlTelInputId = id2.toString();
     this.telInput = input;
     this.options = options;
@@ -2432,8 +2433,7 @@ var UI = class {
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const liClass = buildClassNames({
-        [CLASSES.COUNTRY_ITEM]: true,
-        [CLASSES.HIGHLIGHT]: i === 0
+        [CLASSES.COUNTRY_ITEM]: true
       });
       const listItem = createEl("li", {
         id: `iti-${this.id}__item-${c.iso2}`,
@@ -2529,17 +2529,15 @@ var UI = class {
       container.scrollTop = newScrollTop - heightDifference;
     }
   }
-  //* Remove highlighting from other list items and highlight the given item.
+  //* Remove highlighting from the previous list item and highlight the new one.
   highlightListItem(listItem, shouldFocus) {
     const prevItem = this.highlightedItem;
     if (prevItem) {
       prevItem.classList.remove(CLASSES.HIGHLIGHT);
-      prevItem.setAttribute(ARIA.SELECTED, "false");
     }
     this.highlightedItem = listItem;
     if (this.highlightedItem) {
       this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
-      this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
       if (this.options.countrySearch) {
         const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
@@ -2549,6 +2547,19 @@ var UI = class {
       this.highlightedItem.focus();
     }
   }
+  updateSelectedItem(iso2) {
+    if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
+      this.selectedItem.setAttribute(ARIA.SELECTED, "false");
+      this.selectedItem = null;
+    }
+    if (iso2 && !this.selectedItem) {
+      const newListItem = this.countryList.querySelector(`[data-country-code="${iso2}"]`);
+      if (newListItem) {
+        newListItem.setAttribute(ARIA.SELECTED, "true");
+        this.selectedItem = newListItem;
+      }
+    }
+  }
   //* Country search: Filter the country list to the given array of countries.
   filterCountries(matchedCountries) {
     this.countryList.innerHTML = "";
@@ -2600,6 +2611,7 @@ var UI = class {
     this.hiddenInput = null;
     this.hiddenInputCountry = null;
     this.highlightedItem = null;
+    this.selectedItem = null;
     for (const c of this.countries) {
       delete c.nodeById[this.id];
     }
@@ -3456,11 +3468,14 @@ var Iti = class _Iti {
     }
     return null;
   }
-  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
+  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
-    const { separateDialCode, showFlags, i18n } = this.options;
+    const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
     const prevIso2 = this.selectedCountryData.iso2 || "";
+    if (allowDropdown) {
+      this.ui.updateSelectedItem(iso2);
+    }
     this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -3549,11 +3564,12 @@ var Iti = class _Iti {
     }
     this.ui.dropdownContent.classList.add(CLASSES.HIDE);
     this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
-    if (this.ui.highlightedItem) {
-      this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
-    }
     if (this.options.countrySearch) {
       this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
+      if (this.ui.highlightedItem) {
+        this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
+        this.ui.highlightedItem = null;
+      }
     }
     this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
     this.dropdownAbortController.abort();
@@ -3859,7 +3875,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.13.1"
+  version: "25.13.3"
 });
 var intl_tel_input_default = intlTelInput;