intl-tel-input 25.7.0 → 25.8.0

package/README.md

@@ -77,16 +77,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.7.0/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/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.7.0/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/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.7.0/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/utils.js"),
     });
   </script>
   ```
@@ -322,7 +322,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.7.0/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js
@@ -464,6 +464,12 @@ Change the selected country. It should be rare, if ever, that you need to do thi
 iti.setCountry("gb");
 ```
 
+**setDisabled**  
+Updates the disabled attribute of both the telephone input and the selected country button. Accepts a boolean value. _Note: we recommend using this instead of updating the disabled attribute of the input directly._
+```js
+iti.setDisabled(true);
+```
+
 **setNumber**  
 Insert a number, and update the selected country accordingly. _Note that if `formatOnDisplay` is enabled, this will attempt to format the number to either national or international format according to the `nationalMode` option._  
 ```js
@@ -476,12 +482,6 @@ Change the placeholderNumberType option.
 iti.setPlaceholderNumberType("FIXED_LINE");
 ```
 
-**setDisabled**  
-Updates the disabled attribute of both the telephone input and the selected country button. Accepts a boolean value. _Note: we recommend using this instead of updating the disabled attribute of the input directly._
-```js
-iti.setDisabled(true);
-```
-
 ## Static Methods
 
 **getCountryData**  
@@ -606,7 +606,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.7.0/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.0/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js

package/angular/README.md

@@ -29,7 +29,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.
 
-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/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.7.0/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/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.8.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Angular component.

package/angular/build/IntlTelInput.js

@@ -1592,6 +1592,7 @@ var interfaceTranslations = {
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
+  clearSearchAriaLabel: "Clear search",
   zeroSearchResults: "No results found",
   oneSearchResult: "1 result found",
   multipleSearchResults: "${count} results found",
@@ -1720,8 +1721,8 @@ var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
-var createEl = (name, attrs, container) => {
-  const el = document.createElement(name);
+var createEl = (tagName, attrs, container) => {
+  const el = document.createElement(tagName);
   if (attrs) {
     Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
   }
@@ -1734,7 +1735,14 @@ var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
   Object.values(instances).forEach((instance) => instance[method](...args));
 };
-var Iti = class {
+var Iti = class _Iti {
+  /**
+   * Build a space-delimited class string from an object map of className -> truthy/falsey.
+   * Only keys with truthy values are included.
+   */
+  static _buildClassNames(flags) {
+    return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
+  }
   constructor(input, customOptions = {}) {
     this.id = id++;
     this.telInput = input;
@@ -1901,20 +1909,14 @@ var Iti = class {
       this.telInput.setAttribute("autocomplete", "off");
     }
     const { allowDropdown, separateDialCode, showFlags, containerClass, hiddenInput, dropdownContainer, fixDropdownWidth, useFullscreenPopup, countrySearch, i18n } = this.options;
-    let parentClass = "iti";
-    if (allowDropdown) {
-      parentClass += " iti--allow-dropdown";
-    }
-    if (showFlags) {
-      parentClass += " iti--show-flags";
-    }
-    if (containerClass) {
-      parentClass += ` ${containerClass}`;
-    }
-    if (!useFullscreenPopup) {
-      parentClass += " iti--inline-dropdown";
-    }
-    const wrapper = createEl("div", { class: parentClass });
+    const parentClasses = _Iti._buildClassNames({
+      "iti": true,
+      "iti--allow-dropdown": allowDropdown,
+      "iti--show-flags": showFlags,
+      "iti--inline-dropdown": !useFullscreenPopup,
+      [containerClass]: Boolean(containerClass)
+    });
+    const wrapper = createEl("div", { class: parentClasses });
     (_a = this.telInput.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl("div", { class: "iti__country-container" }, wrapper);
@@ -1929,9 +1931,8 @@ var Iti = class {
           class: "iti__selected-country",
           "aria-expanded": "false",
           "aria-label": this.options.i18n.selectedCountryAriaLabel,
-          "aria-haspopup": "true",
-          "aria-controls": `iti-${this.id}__dropdown-content`,
-          "role": "combobox"
+          "aria-haspopup": "dialog",
+          "aria-controls": `iti-${this.id}__dropdown-content`
         }, this.countryContainer);
         if (this.telInput.disabled) {
           this.selectedCountry.setAttribute("disabled", "true");
@@ -1952,21 +1953,57 @@ var Iti = class {
         const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
         this.dropdownContent = createEl("div", {
           id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${extraClasses}`
+          class: `iti__dropdown-content iti__hide ${extraClasses}`,
+          role: "dialog",
+          "aria-modal": "true"
         });
         if (countrySearch) {
+          const searchWrapper = createEl("div", { class: "iti__search-input-wrapper" }, this.dropdownContent);
+          this.searchIcon = createEl("span", {
+            class: "iti__search-icon",
+            "aria-hidden": "true"
+          }, searchWrapper);
+          this.searchIcon.innerHTML = `
+            <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+              <circle cx="11" cy="11" r="7" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>`;
           this.searchInput = createEl("input", {
-            type: "text",
+            id: `iti-${this.id}__search-input`,
+            // Chrome says inputs need either a name or an id
+            type: "search",
             class: "iti__search-input",
             placeholder: i18n.searchPlaceholder,
+            // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
             role: "combobox",
             "aria-expanded": "true",
             "aria-label": i18n.searchPlaceholder,
             "aria-controls": `iti-${this.id}__country-listbox`,
             "aria-autocomplete": "list",
             "autocomplete": "off"
-          }, this.dropdownContent);
+          }, searchWrapper);
+          this.searchClearButton = createEl("button", {
+            type: "button",
+            class: "iti__search-clear iti__hide",
+            "aria-label": i18n.clearSearchAriaLabel,
+            tabindex: "-1"
+          }, searchWrapper);
+          const maskId = `iti-${this.id}-clear-mask`;
+          this.searchClearButton.innerHTML = `
+            <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+              <mask id="${maskId}" maskUnits="userSpaceOnUse">
+                <rect width="16" height="16" fill="white" />
+                <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
+              </mask>
+              <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
+            </svg>`;
           this.searchResultsA11yText = createEl("span", { class: "iti__a11y-text" }, this.dropdownContent);
+          this.searchNoResults = createEl("div", {
+            class: "iti__no-results iti__hide",
+            "aria-hidden": "true"
+            // all a11y messaging happens in this.searchResultsA11yText
+          }, this.dropdownContent);
+          this.searchNoResults.textContent = i18n.zeroSearchResults;
         }
         this.countryList = createEl("ul", {
           class: "iti__country-list",
@@ -1976,18 +2013,16 @@ var Iti = class {
         }, this.dropdownContent);
         this._appendListItems();
         if (countrySearch) {
-          this._updateSearchResultsText();
+          this._updateSearchResultsA11yText();
         }
         if (dropdownContainer) {
-          let dropdownClasses = "iti iti--container";
-          if (containerClass) {
-            dropdownClasses += ` ${containerClass}`;
-          }
-          if (useFullscreenPopup) {
-            dropdownClasses += " iti--fullscreen-popup";
-          } else {
-            dropdownClasses += " iti--inline-dropdown";
-          }
+          const dropdownClasses = _Iti._buildClassNames({
+            "iti": true,
+            "iti--container": true,
+            "iti--fullscreen-popup": useFullscreenPopup,
+            "iti--inline-dropdown": !useFullscreenPopup,
+            [containerClass]: Boolean(containerClass)
+          });
           this.dropdown = createEl("div", { class: dropdownClasses });
           this.dropdown.appendChild(this.dropdownContent);
         } else {
@@ -2370,6 +2405,11 @@ var Iti = class {
         } else {
           this._filterCountries("", true);
         }
+        if (this.searchInput.value) {
+          this.searchClearButton.classList.remove("iti__hide");
+        } else {
+          this.searchClearButton.classList.add("iti__hide");
+        }
       };
       let keyupTimer = null;
       this._handleSearchChange = () => {
@@ -2382,6 +2422,13 @@ var Iti = class {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
+      this._handleSearchClear = (e) => {
+        e.stopPropagation();
+        this.searchInput.value = "";
+        this.searchInput.focus();
+        doFilter();
+      };
+      this.searchClearButton.addEventListener("click", this._handleSearchClear);
       this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
@@ -2446,12 +2493,17 @@ var Iti = class {
     }
     if (noCountriesAddedYet) {
       this._highlightListItem(null, false);
+      if (this.searchNoResults) {
+        this.searchNoResults.classList.remove("iti__hide");
+      }
+    } else if (this.searchNoResults) {
+      this.searchNoResults.classList.add("iti__hide");
     }
     this.countryList.scrollTop = 0;
-    this._updateSearchResultsText();
+    this._updateSearchResultsA11yText();
   }
   //* Update search results text (for a11y).
-  _updateSearchResultsText() {
+  _updateSearchResultsA11yText() {
     const { i18n } = this.options;
     const count = this.countryList.childElementCount;
     let searchText;
@@ -2563,9 +2615,8 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.classList.add("iti__highlight");
       this.highlightedItem.setAttribute("aria-selected", "true");
-      const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-      this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
       if (this.options.countrySearch) {
+        const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
       }
     }
@@ -2713,7 +2764,6 @@ var Iti = class {
   _closeDropdown() {
     this.dropdownContent.classList.add("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "false");
-    this.selectedCountry.removeAttribute("aria-activedescendant");
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
@@ -2721,9 +2771,9 @@ var Iti = class {
       this.searchInput.removeAttribute("aria-activedescendant");
     }
     this.dropdownArrow.classList.remove("iti__arrow--up");
-    document.removeEventListener("keydown", this._handleKeydownOnDropdown);
     if (this.options.countrySearch) {
       this.searchInput.removeEventListener("input", this._handleSearchChange);
+      this.searchClearButton.removeEventListener("click", this._handleSearchClear);
     }
     document.documentElement.removeEventListener("click", this._handleClickOffToClose);
     this.countryList.removeEventListener("mouseover", this._handleMouseoverCountryList);
@@ -3058,7 +3108,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.7.0"
+  version: "25.8.0"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/IntlTelInputWithUtils.js

@@ -1592,6 +1592,7 @@ var interfaceTranslations = {
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
+  clearSearchAriaLabel: "Clear search",
   zeroSearchResults: "No results found",
   oneSearchResult: "1 result found",
   multipleSearchResults: "${count} results found",
@@ -1720,8 +1721,8 @@ var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
-var createEl = (name, attrs, container) => {
-  const el = document.createElement(name);
+var createEl = (tagName, attrs, container) => {
+  const el = document.createElement(tagName);
   if (attrs) {
     Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
   }
@@ -1734,7 +1735,14 @@ var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
   Object.values(instances).forEach((instance) => instance[method](...args));
 };
-var Iti = class {
+var Iti = class _Iti {
+  /**
+   * Build a space-delimited class string from an object map of className -> truthy/falsey.
+   * Only keys with truthy values are included.
+   */
+  static _buildClassNames(flags) {
+    return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
+  }
   constructor(input, customOptions = {}) {
     this.id = id++;
     this.telInput = input;
@@ -1901,20 +1909,14 @@ var Iti = class {
       this.telInput.setAttribute("autocomplete", "off");
     }
     const { allowDropdown, separateDialCode, showFlags, containerClass, hiddenInput, dropdownContainer, fixDropdownWidth, useFullscreenPopup, countrySearch, i18n } = this.options;
-    let parentClass = "iti";
-    if (allowDropdown) {
-      parentClass += " iti--allow-dropdown";
-    }
-    if (showFlags) {
-      parentClass += " iti--show-flags";
-    }
-    if (containerClass) {
-      parentClass += ` ${containerClass}`;
-    }
-    if (!useFullscreenPopup) {
-      parentClass += " iti--inline-dropdown";
-    }
-    const wrapper = createEl("div", { class: parentClass });
+    const parentClasses = _Iti._buildClassNames({
+      "iti": true,
+      "iti--allow-dropdown": allowDropdown,
+      "iti--show-flags": showFlags,
+      "iti--inline-dropdown": !useFullscreenPopup,
+      [containerClass]: Boolean(containerClass)
+    });
+    const wrapper = createEl("div", { class: parentClasses });
     (_a = this.telInput.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl("div", { class: "iti__country-container" }, wrapper);
@@ -1929,9 +1931,8 @@ var Iti = class {
           class: "iti__selected-country",
           "aria-expanded": "false",
           "aria-label": this.options.i18n.selectedCountryAriaLabel,
-          "aria-haspopup": "true",
-          "aria-controls": `iti-${this.id}__dropdown-content`,
-          "role": "combobox"
+          "aria-haspopup": "dialog",
+          "aria-controls": `iti-${this.id}__dropdown-content`
         }, this.countryContainer);
         if (this.telInput.disabled) {
           this.selectedCountry.setAttribute("disabled", "true");
@@ -1952,21 +1953,57 @@ var Iti = class {
         const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
         this.dropdownContent = createEl("div", {
           id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${extraClasses}`
+          class: `iti__dropdown-content iti__hide ${extraClasses}`,
+          role: "dialog",
+          "aria-modal": "true"
         });
         if (countrySearch) {
+          const searchWrapper = createEl("div", { class: "iti__search-input-wrapper" }, this.dropdownContent);
+          this.searchIcon = createEl("span", {
+            class: "iti__search-icon",
+            "aria-hidden": "true"
+          }, searchWrapper);
+          this.searchIcon.innerHTML = `
+            <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+              <circle cx="11" cy="11" r="7" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>`;
           this.searchInput = createEl("input", {
-            type: "text",
+            id: `iti-${this.id}__search-input`,
+            // Chrome says inputs need either a name or an id
+            type: "search",
             class: "iti__search-input",
             placeholder: i18n.searchPlaceholder,
+            // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
             role: "combobox",
             "aria-expanded": "true",
             "aria-label": i18n.searchPlaceholder,
             "aria-controls": `iti-${this.id}__country-listbox`,
             "aria-autocomplete": "list",
             "autocomplete": "off"
-          }, this.dropdownContent);
+          }, searchWrapper);
+          this.searchClearButton = createEl("button", {
+            type: "button",
+            class: "iti__search-clear iti__hide",
+            "aria-label": i18n.clearSearchAriaLabel,
+            tabindex: "-1"
+          }, searchWrapper);
+          const maskId = `iti-${this.id}-clear-mask`;
+          this.searchClearButton.innerHTML = `
+            <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+              <mask id="${maskId}" maskUnits="userSpaceOnUse">
+                <rect width="16" height="16" fill="white" />
+                <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
+              </mask>
+              <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
+            </svg>`;
           this.searchResultsA11yText = createEl("span", { class: "iti__a11y-text" }, this.dropdownContent);
+          this.searchNoResults = createEl("div", {
+            class: "iti__no-results iti__hide",
+            "aria-hidden": "true"
+            // all a11y messaging happens in this.searchResultsA11yText
+          }, this.dropdownContent);
+          this.searchNoResults.textContent = i18n.zeroSearchResults;
         }
         this.countryList = createEl("ul", {
           class: "iti__country-list",
@@ -1976,18 +2013,16 @@ var Iti = class {
         }, this.dropdownContent);
         this._appendListItems();
         if (countrySearch) {
-          this._updateSearchResultsText();
+          this._updateSearchResultsA11yText();
         }
         if (dropdownContainer) {
-          let dropdownClasses = "iti iti--container";
-          if (containerClass) {
-            dropdownClasses += ` ${containerClass}`;
-          }
-          if (useFullscreenPopup) {
-            dropdownClasses += " iti--fullscreen-popup";
-          } else {
-            dropdownClasses += " iti--inline-dropdown";
-          }
+          const dropdownClasses = _Iti._buildClassNames({
+            "iti": true,
+            "iti--container": true,
+            "iti--fullscreen-popup": useFullscreenPopup,
+            "iti--inline-dropdown": !useFullscreenPopup,
+            [containerClass]: Boolean(containerClass)
+          });
           this.dropdown = createEl("div", { class: dropdownClasses });
           this.dropdown.appendChild(this.dropdownContent);
         } else {
@@ -2370,6 +2405,11 @@ var Iti = class {
         } else {
           this._filterCountries("", true);
         }
+        if (this.searchInput.value) {
+          this.searchClearButton.classList.remove("iti__hide");
+        } else {
+          this.searchClearButton.classList.add("iti__hide");
+        }
       };
       let keyupTimer = null;
       this._handleSearchChange = () => {
@@ -2382,6 +2422,13 @@ var Iti = class {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
+      this._handleSearchClear = (e) => {
+        e.stopPropagation();
+        this.searchInput.value = "";
+        this.searchInput.focus();
+        doFilter();
+      };
+      this.searchClearButton.addEventListener("click", this._handleSearchClear);
       this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
@@ -2446,12 +2493,17 @@ var Iti = class {
     }
     if (noCountriesAddedYet) {
       this._highlightListItem(null, false);
+      if (this.searchNoResults) {
+        this.searchNoResults.classList.remove("iti__hide");
+      }
+    } else if (this.searchNoResults) {
+      this.searchNoResults.classList.add("iti__hide");
     }
     this.countryList.scrollTop = 0;
-    this._updateSearchResultsText();
+    this._updateSearchResultsA11yText();
   }
   //* Update search results text (for a11y).
-  _updateSearchResultsText() {
+  _updateSearchResultsA11yText() {
     const { i18n } = this.options;
     const count = this.countryList.childElementCount;
     let searchText;
@@ -2563,9 +2615,8 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.classList.add("iti__highlight");
       this.highlightedItem.setAttribute("aria-selected", "true");
-      const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-      this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
       if (this.options.countrySearch) {
+        const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
       }
     }
@@ -2713,7 +2764,6 @@ var Iti = class {
   _closeDropdown() {
     this.dropdownContent.classList.add("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "false");
-    this.selectedCountry.removeAttribute("aria-activedescendant");
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
@@ -2721,9 +2771,9 @@ var Iti = class {
       this.searchInput.removeAttribute("aria-activedescendant");
     }
     this.dropdownArrow.classList.remove("iti__arrow--up");
-    document.removeEventListener("keydown", this._handleKeydownOnDropdown);
     if (this.options.countrySearch) {
       this.searchInput.removeEventListener("input", this._handleSearchChange);
+      this.searchClearButton.removeEventListener("click", this._handleSearchClear);
     }
     document.documentElement.removeEventListener("click", this._handleClickOffToClose);
     this.countryList.removeEventListener("mouseover", this._handleMouseoverCountryList);
@@ -3058,7 +3108,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.7.0"
+  version: "25.8.0"
 });
 var intl_tel_input_default = intlTelInput;
 

package/angular/build/types/intl-tel-input/i18n/types.d.ts

@@ -245,6 +245,7 @@ export type I18n = {
     ax?: string;
     selectedCountryAriaLabel?: string;
     searchPlaceholder?: string;
+    clearSearchAriaLabel?: string;
     countryListAriaLabel?: string;
     oneSearchResult?: string;
     multipleSearchResults?: string;

package/angular/build/types/intl-tel-input.d.ts

@@ -104,6 +104,9 @@ export declare class Iti {
     private dropdownArrow;
     private dropdownContent;
     private searchInput;
+    private searchIcon;
+    private searchClearButton;
+    private searchNoResults;
     private searchResultsA11yText;
     private countryList;
     private dropdown;
@@ -125,11 +128,17 @@ export declare class Iti {
     private _handleClickOffToClose;
     private _handleKeydownOnDropdown;
     private _handleSearchChange;
+    private _handleSearchClear;
     private _handlePageLoad;
     private resolveAutoCountryPromise;
     private rejectAutoCountryPromise;
     private resolveUtilsScriptPromise;
     private rejectUtilsScriptPromise;
+    /**
+     * Build a space-delimited class string from an object map of className -> truthy/falsey.
+     * Only keys with truthy values are included.
+     */
+    private static _buildClassNames;
     constructor(input: HTMLInputElement, customOptions?: SomeOptions);
     _init(): void;
     private _processCountryData;
@@ -156,7 +165,7 @@ export declare class Iti {
     private _bindDropdownListeners;
     private _searchForCountry;
     private _filterCountries;
-    private _updateSearchResultsText;
+    private _updateSearchResultsA11yText;
     private _handleUpDownKey;
     private _handleEnterKey;
     private _updateValFromNumber;