intl-tel-input 23.3.2 → 23.4.1

package/build/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v23.3.2
+ * International Telephone Input v23.4.1
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1401,6 +1401,8 @@ var factoryOutput = (() => {
     containerClass: "",
     //* The order of the countries in the dropdown. Defaults to alphabetical.
     countryOrder: null,
+    //* Add a country search input at the top of the dropdown.
+    countrySearch: true,
     //* Modify the auto placeholder.
     customPlaceholder: null,
     //* Append menu to specified element.
@@ -1523,6 +1525,7 @@ var factoryOutput = (() => {
       if (this.options.separateDialCode) {
         this.options.allowDropdown = true;
         this.options.nationalMode = false;
+        this.options.countrySearch = true;
       }
       if (!this.options.showFlags && !this.options.separateDialCode) {
         this.options.nationalMode = false;
@@ -1532,6 +1535,13 @@ var factoryOutput = (() => {
       }
       this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
       this.isRTL = !!this.telInput.closest("[dir=rtl]");
+      if (this.options.separateDialCode) {
+        if (this.isRTL) {
+          this.originalPaddingRight = this.telInput.style.paddingRight;
+        } else {
+          this.originalPaddingLeft = this.telInput.style.paddingLeft;
+        }
+      }
       this.options.i18n = { ...en_default, ...this.options.i18n };
       const autoCountryPromise = new Promise((resolve, reject) => {
         this.resolveAutoCountryPromise = resolve;
@@ -1675,6 +1685,7 @@ var factoryOutput = (() => {
         dropdownContainer,
         fixDropdownWidth,
         useFullscreenPopup,
+        countrySearch,
         i18n
       } = this.options;
       let parentClass = "iti";
@@ -1751,26 +1762,28 @@ var factoryOutput = (() => {
             id: `iti-${this.id}__dropdown-content`,
             class: `iti__dropdown-content iti__hide ${extraClasses}`
           });
-          this.searchInput = createEl(
-            "input",
-            {
-              type: "text",
-              class: "iti__search-input",
-              placeholder: i18n.searchPlaceholder,
-              role: "combobox",
-              "aria-expanded": "true",
-              "aria-label": i18n.searchPlaceholder,
-              "aria-controls": `iti-${this.id}__country-listbox`,
-              "aria-autocomplete": "list",
-              "autocomplete": "off"
-            },
-            this.dropdownContent
-          );
-          this.searchResultsA11yText = createEl(
-            "span",
-            { class: "iti__a11y-text" },
-            this.dropdownContent
-          );
+          if (countrySearch) {
+            this.searchInput = createEl(
+              "input",
+              {
+                type: "text",
+                class: "iti__search-input",
+                placeholder: i18n.searchPlaceholder,
+                role: "combobox",
+                "aria-expanded": "true",
+                "aria-label": i18n.searchPlaceholder,
+                "aria-controls": `iti-${this.id}__country-listbox`,
+                "aria-autocomplete": "list",
+                "autocomplete": "off"
+              },
+              this.dropdownContent
+            );
+            this.searchResultsA11yText = createEl(
+              "span",
+              { class: "iti__a11y-text" },
+              this.dropdownContent
+            );
+          }
           this.countryList = createEl(
             "ul",
             {
@@ -1781,8 +1794,10 @@ var factoryOutput = (() => {
             },
             this.dropdownContent
           );
-          this._appendListItems(this.countries, "iti__standard");
-          this._updateSearchResultsText();
+          this._appendListItems();
+          if (countrySearch) {
+            this._updateSearchResultsText();
+          }
           if (dropdownContainer) {
             let dropdownClasses = "iti iti--container";
             if (useFullscreenPopup) {
@@ -1817,15 +1832,16 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* For each of the passed countries: add a country <li> to the countryList <ul> container.
-    _appendListItems(countries, className) {
-      for (let i = 0; i < countries.length; i++) {
-        const c = countries[i];
+    //* For each country: add a country list item <li> to the countryList <ul> container.
+    _appendListItems() {
+      for (let i = 0; i < this.countries.length; i++) {
+        const c = this.countries[i];
+        const extraClass = i === 0 ? "iti__highlight" : "";
         const listItem = createEl(
           "li",
           {
             id: `iti-${this.id}__item-${c.iso2}`,
-            class: `iti__country ${className}`,
+            class: `iti__country ${extraClass}`,
             tabindex: "-1",
             role: "option",
             "data-dial-code": c.dialCode,
@@ -2066,24 +2082,26 @@ var factoryOutput = (() => {
     }
     //* Open the dropdown.
     _openDropdown() {
-      const { fixDropdownWidth } = this.options;
+      const { fixDropdownWidth, countrySearch } = this.options;
       if (fixDropdownWidth) {
         this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
       }
       this.dropdownContent.classList.remove("iti__hide");
       this.selectedCountry.setAttribute("aria-expanded", "true");
       this._setDropdownPosition();
-      const firstCountryItem = this.countryList.firstElementChild;
-      if (firstCountryItem) {
-        this._highlightListItem(firstCountryItem, false);
-        this.countryList.scrollTop = 0;
+      if (countrySearch) {
+        const firstCountryItem = this.countryList.firstElementChild;
+        if (firstCountryItem) {
+          this._highlightListItem(firstCountryItem, false);
+          this.countryList.scrollTop = 0;
+        }
+        this.searchInput.focus();
       }
-      this.searchInput.focus();
       this._bindDropdownListeners();
       this.dropdownArrow.classList.add("iti__arrow--up");
       this._trigger("open:countrydropdown");
     }
-    //* Decide if should position dropdown above or below input (depends on position within viewport, and scroll).
+    //* Set the dropdown position
     _setDropdownPosition() {
       if (this.options.dropdownContainer) {
         this.options.dropdownContainer.appendChild(this.dropdown);
@@ -2129,6 +2147,8 @@ var factoryOutput = (() => {
         "click",
         this._handleClickOffToClose
       );
+      let query = "";
+      let queryTimer = null;
       this._handleKeydownOnDropdown = (e) => {
         if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
           e.preventDefault();
@@ -2141,29 +2161,56 @@ var factoryOutput = (() => {
             this._closeDropdown();
           }
         }
-      };
-      document.addEventListener("keydown", this._handleKeydownOnDropdown);
-      const doFilter = () => {
-        const inputQuery = this.searchInput.value.trim();
-        if (inputQuery) {
-          this._filterCountries(inputQuery);
-        } else {
-          this._filterCountries("", true);
+        if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+          e.stopPropagation();
+          if (queryTimer) {
+            clearTimeout(queryTimer);
+          }
+          query += e.key.toLowerCase();
+          this._searchForCountry(query);
+          queryTimer = setTimeout(() => {
+            query = "";
+          }, 1e3);
         }
       };
-      let keyupTimer = null;
-      this._handleSearchChange = () => {
-        if (keyupTimer) {
-          clearTimeout(keyupTimer);
+      document.addEventListener("keydown", this._handleKeydownOnDropdown);
+      if (this.options.countrySearch) {
+        const doFilter = () => {
+          const inputQuery = this.searchInput.value.trim();
+          if (inputQuery) {
+            this._filterCountries(inputQuery);
+          } else {
+            this._filterCountries("", true);
+          }
+        };
+        let keyupTimer = null;
+        this._handleSearchChange = () => {
+          if (keyupTimer) {
+            clearTimeout(keyupTimer);
+          }
+          keyupTimer = setTimeout(() => {
+            doFilter();
+            keyupTimer = null;
+          }, 100);
+        };
+        this.searchInput.addEventListener("input", this._handleSearchChange);
+        this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+      }
+    }
+    //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
+    _searchForCountry(query) {
+      for (let i = 0; i < this.countries.length; i++) {
+        const c = this.countries[i];
+        const startsWith = c.name.substr(0, query.length).toLowerCase() === query;
+        if (startsWith) {
+          const listItem = c.nodeById[this.id];
+          this._highlightListItem(listItem, false);
+          this._scrollTo(listItem);
+          break;
         }
-        keyupTimer = setTimeout(() => {
-          doFilter();
-          keyupTimer = null;
-        }, 100);
-      };
-      this.searchInput.addEventListener("input", this._handleSearchChange);
-      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+      }
     }
+    //* Country search enabled: Filter the countries according to the search query.
     _filterCountries(query, isReset = false) {
       let noCountriesAddedYet = true;
       this.countryList.innerHTML = "";
@@ -2291,7 +2338,9 @@ var factoryOutput = (() => {
         this.highlightedItem.setAttribute("aria-selected", "true");
         const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
-        this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+        if (this.options.countrySearch) {
+          this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+        }
       }
       if (shouldFocus) {
         this.highlightedItem.focus();
@@ -2448,10 +2497,14 @@ var factoryOutput = (() => {
       if (this.highlightedItem) {
         this.highlightedItem.setAttribute("aria-selected", "false");
       }
-      this.searchInput.removeAttribute("aria-activedescendant");
+      if (this.options.countrySearch) {
+        this.searchInput.removeAttribute("aria-activedescendant");
+      }
       this.dropdownArrow.classList.remove("iti__arrow--up");
       document.removeEventListener("keydown", this._handleKeydownOnDropdown);
-      this.searchInput.removeEventListener("input", this._handleSearchChange);
+      if (this.options.countrySearch) {
+        this.searchInput.removeEventListener("input", this._handleSearchChange);
+      }
       document.documentElement.removeEventListener(
         "click",
         this._handleClickOffToClose
@@ -2606,7 +2659,8 @@ var factoryOutput = (() => {
     //********************
     //* Remove plugin.
     destroy() {
-      if (this.options.allowDropdown) {
+      const { allowDropdown, separateDialCode } = this.options;
+      if (allowDropdown) {
         this._closeDropdown();
         this.selectedCountry.removeEventListener(
           "click",
@@ -2630,6 +2684,13 @@ var factoryOutput = (() => {
         this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
       }
       this.telInput.removeAttribute("data-intl-tel-input-id");
+      if (separateDialCode) {
+        if (this.isRTL) {
+          this.telInput.style.paddingRight = this.originalPaddingRight;
+        } else {
+          this.telInput.style.paddingLeft = this.originalPaddingLeft;
+        }
+      }
       const wrapper = this.telInput.parentNode;
       wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
       wrapper?.parentNode?.removeChild(wrapper);
@@ -2762,7 +2823,7 @@ var factoryOutput = (() => {
       //* A map from instance ID to instance object.
       instances: {},
       loadUtils,
-      version: "23.3.2"
+      version: "23.4.1"
     }
   );
   var intl_tel_input_default = intlTelInput;