intl-tel-input 25.13.1 → 25.13.2

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.2/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.2/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.2/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.2/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.2/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.2/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.2"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/IntlTelInputWithUtils.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.2"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/types/modules/core/ui.d.ts

@@ -1,4 +1,4 @@
-import { Country } from "../../intl-tel-input/data";
+import { Country, Iso2 } from "../../intl-tel-input/data";
 import { AllOptions } from "../types/public-api";
 export default class UI {
     private readonly options;
@@ -23,6 +23,7 @@ export default class UI {
     hiddenInput: HTMLInputElement;
     hiddenInputCountry: HTMLInputElement;
     highlightedItem: HTMLElement | null;
+    selectedItem: HTMLElement | null;
     readonly hadInitialPlaceholder: boolean;
     constructor(input: HTMLInputElement, options: AllOptions, id: number);
     generateMarkup(countries: Country[]): void;
@@ -39,6 +40,7 @@ export default class UI {
     updateSearchResultsA11yText(): void;
     scrollTo(element: HTMLElement): void;
     highlightListItem(listItem: HTMLElement | null, shouldFocus: boolean): void;
+    updateSelectedItem(iso2: Iso2 | ""): void;
     filterCountries(matchedCountries: Country[]): void;
     destroy(): void;
 }

package/build/js/data.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.13.1
+ * International Telephone Input v25.13.2
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/data.min.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.13.1
+ * International Telephone Input v25.13.2
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/intlTelInput.d.ts

@@ -262,7 +262,7 @@ declare module "modules/core/icons" {
     export const buildClearIcon: (id: number) => string;
 }
 declare module "modules/core/ui" {
-    import { Country } from "intl-tel-input/data";
+    import { Country, Iso2 } from "intl-tel-input/data";
     import { AllOptions } from "modules/types/public-api";
     export default class UI {
         private readonly options;
@@ -287,6 +287,7 @@ declare module "modules/core/ui" {
         hiddenInput: HTMLInputElement;
         hiddenInputCountry: HTMLInputElement;
         highlightedItem: HTMLElement | null;
+        selectedItem: HTMLElement | null;
         readonly hadInitialPlaceholder: boolean;
         constructor(input: HTMLInputElement, options: AllOptions, id: number);
         generateMarkup(countries: Country[]): void;
@@ -303,6 +304,7 @@ declare module "modules/core/ui" {
         updateSearchResultsA11yText(): void;
         scrollTo(element: HTMLElement): void;
         highlightListItem(listItem: HTMLElement | null, shouldFocus: boolean): void;
+        updateSelectedItem(iso2: Iso2 | ""): void;
         filterCountries(matchedCountries: Country[]): void;
         destroy(): void;
     }

package/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.13.1
+ * International Telephone Input v25.13.2
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -2277,6 +2277,7 @@ var factoryOutput = (() => {
   var UI = class {
     constructor(input, options, id2) {
       this.highlightedItem = null;
+      this.selectedItem = null;
       input.dataset.intlTelInputId = id2.toString();
       this.telInput = input;
       this.options = options;
@@ -2538,8 +2539,7 @@ var factoryOutput = (() => {
       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}`,
@@ -2642,17 +2642,15 @@ var factoryOutput = (() => {
         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);
@@ -2662,6 +2660,21 @@ var factoryOutput = (() => {
         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 = "";
@@ -2713,6 +2726,7 @@ var factoryOutput = (() => {
       this.hiddenInput = null;
       this.hiddenInputCountry = null;
       this.highlightedItem = null;
+      this.selectedItem = null;
       for (const c of this.countries) {
         delete c.nodeById[this.id];
       }
@@ -3641,11 +3655,14 @@ var factoryOutput = (() => {
       }
       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;
@@ -3752,11 +3769,12 @@ var factoryOutput = (() => {
       }
       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();
@@ -4093,7 +4111,7 @@ var factoryOutput = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "25.13.1"
+      version: "25.13.2"
     }
   );
   var intl_tel_input_default = intlTelInput;