intl-tel-input 25.7.0 → 25.8.1

package/react/build/IntlTelInputWithUtils.cjs

@@ -1628,6 +1628,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",
@@ -1756,8 +1757,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));
   }
@@ -1770,7 +1771,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;
@@ -1955,20 +1963,14 @@ var Iti = class {
       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 });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
@@ -1989,9 +1991,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
         );
@@ -2030,15 +2031,38 @@ 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,
@@ -2046,13 +2070,42 @@ var Iti = class {
               "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",
@@ -2066,18 +2119,16 @@ var Iti = class {
         );
         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 {
@@ -2475,6 +2526,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 = () => {
@@ -2487,6 +2543,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());
     }
   }
@@ -2551,12 +2614,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;
@@ -2671,9 +2739,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);
       }
     }
@@ -2837,7 +2904,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");
     }
@@ -2845,9 +2911,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",
@@ -3205,7 +3271,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.7.0"
+    version: "25.8.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/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;
@@ -1919,20 +1927,14 @@ var Iti = class {
       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 });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
@@ -1953,9 +1955,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
         );
@@ -1994,15 +1995,38 @@ 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,
@@ -2010,13 +2034,42 @@ var Iti = class {
               "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",
@@ -2030,18 +2083,16 @@ var Iti = class {
         );
         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 {
@@ -2439,6 +2490,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 = () => {
@@ -2451,6 +2507,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());
     }
   }
@@ -2515,12 +2578,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;
@@ -2635,9 +2703,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);
       }
     }
@@ -2801,7 +2868,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");
     }
@@ -2809,9 +2875,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",
@@ -3169,7 +3235,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.7.0"
+    version: "25.8.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.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/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.8.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.