intl-tel-input 21.2.8 → 22.0.0

package/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v21.2.8
+ * International Telephone Input v22.0.0
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1395,10 +1395,10 @@ var factoryOutput = (() => {
     allowDropdown: true,
     //* Add a placeholder in the input with an example number for the selected country.
     autoPlaceholder: "polite",
-    //* Add a country search input at the top of the dropdown.
-    countrySearch: true,
     //* Modify the parentClass.
     containerClass: "",
+    //* The order of the countries in the dropdown. Defaults to alphabetical.
+    countryOrder: null,
     //* Modify the auto placeholder.
     customPlaceholder: null,
     //* Append menu to specified element.
@@ -1425,12 +1425,10 @@ var factoryOutput = (() => {
     onlyCountries: [],
     //* Number type to use for placeholders.
     placeholderNumberType: "MOBILE",
-    //* The countries at the top of the list.
-    preferredCountries: [],
-    //* Option to hide the flags - must be used with showSelectedDialCode, or allowDropdown=false.
+    //* Show flags - for both the selected country, and in the country dropdown
     showFlags: true,
     //* Display the international dial code next to the selected flag.
-    showSelectedDialCode: false,
+    separateDialCode: false,
     //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
     strictMode: false,
     //* Use full screen popup instead of dropdown for country list.
@@ -1465,13 +1463,6 @@ var factoryOutput = (() => {
   ];
   var getNumeric = (s) => s.replace(/\D/g, "");
   var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
-  var toggleClass = (el, className, shouldHaveClass) => {
-    if (shouldHaveClass && !el.classList.contains(className)) {
-      el.classList.add(className);
-    } else if (!shouldHaveClass && el.classList.contains(className)) {
-      el.classList.remove(className);
-    }
-  };
   var isRegionlessNanp = (number) => {
     const numeric = getNumeric(number);
     if (numeric.charAt(0) === "1") {
@@ -1480,15 +1471,6 @@ var factoryOutput = (() => {
     }
     return false;
   };
-  var countryNameSort = (a, b) => {
-    if (a.name < b.name) {
-      return -1;
-    }
-    if (a.name > b.name) {
-      return 1;
-    }
-    return 0;
-  };
   var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
     if (prevCaretPos === 0 && !isDeleteForwards) {
       return 0;
@@ -1518,7 +1500,7 @@ var factoryOutput = (() => {
     return el;
   };
   var forEachInstance = (method) => {
-    const { instances } = window.intlTelInputGlobals;
+    const { instances } = intlTelInput;
     Object.values(instances).forEach((instance) => instance[method]());
   };
   var Iti = class {
@@ -1528,7 +1510,6 @@ var factoryOutput = (() => {
     promise;
     //* Private
     telInput;
-    activeItem;
     highlightedItem;
     options;
     hadInitialPlaceholder;
@@ -1538,7 +1519,6 @@ var factoryOutput = (() => {
     dialCodeMaxLen;
     dialCodeToIso2Map;
     dialCodes;
-    preferredCountries;
     countryContainer;
     selectedCountry;
     selectedCountryInner;
@@ -1573,7 +1553,6 @@ var factoryOutput = (() => {
     constructor(input, customOptions = {}) {
       this.id = id++;
       this.telInput = input;
-      this.activeItem = null;
       this.highlightedItem = null;
       this.options = Object.assign({}, defaults, customOptions);
       this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
@@ -1583,12 +1562,9 @@ var factoryOutput = (() => {
       if (this.options.useFullscreenPopup) {
         this.options.fixDropdownWidth = false;
       }
-      if (this.options.countrySearch && !this.options.useFullscreenPopup) {
-        this.options.fixDropdownWidth = true;
-      }
-      const forceShowFlags = this.options.allowDropdown && !this.options.showSelectedDialCode;
-      if (!this.options.showFlags && forceShowFlags) {
-        this.options.showFlags = true;
+      if (this.options.separateDialCode) {
+        this.options.allowDropdown = true;
+        this.options.nationalMode = false;
       }
       if (this.options.useFullscreenPopup && !this.options.dropdownContainer) {
         this.options.dropdownContainer = document.body;
@@ -1614,15 +1590,39 @@ var factoryOutput = (() => {
     //********************
     //*  PRIVATE METHODS
     //********************
-    //* Prepare all of the country data, including onlyCountries, excludeCountries and preferredCountries options.
+    //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
     _processCountryData() {
       this._processAllCountries();
       this._processDialCodes();
-      this._processPreferredCountries();
       this._translateCountryNames();
-      if (this.options.onlyCountries.length || this.options.i18n) {
-        this.countries.sort(countryNameSort);
-      }
+      if (this.options.countryOrder) {
+        this.options.countryOrder = this.options.countryOrder.map((country) => country.toLowerCase());
+      }
+      this._sortCountries();
+    }
+    _sortCountries() {
+      this.countries.sort((a, b) => {
+        const { countryOrder } = this.options;
+        if (countryOrder) {
+          const aIndex = countryOrder.indexOf(a.iso2);
+          const bIndex = countryOrder.indexOf(b.iso2);
+          const aIndexExists = aIndex > -1;
+          const bIndexExists = bIndex > -1;
+          if (aIndexExists || bIndexExists) {
+            if (aIndexExists && bIndexExists) {
+              return aIndex - bIndex;
+            }
+            return aIndexExists ? -1 : 1;
+          }
+        }
+        if (a.name < b.name) {
+          return -1;
+        }
+        if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      });
     }
     //* Add a dial code to this.dialCodeToIso2Map.
     _addToDialCodeMap(iso2, dialCode, priority) {
@@ -1698,17 +1698,6 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* Process preferred countries - iterate through the preferences, fetching the country data for each one.
-    _processPreferredCountries() {
-      this.preferredCountries = [];
-      for (let i = 0; i < this.options.preferredCountries.length; i++) {
-        const iso2 = this.options.preferredCountries[i].toLowerCase();
-        const countryData = this._getCountryData(iso2, true);
-        if (countryData) {
-          this.preferredCountries.push(countryData);
-        }
-      }
-    }
     //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
     _generateMarkup() {
       this.telInput.classList.add("iti__tel-input");
@@ -1717,23 +1706,19 @@ var factoryOutput = (() => {
       }
       const {
         allowDropdown,
-        showSelectedDialCode,
+        separateDialCode,
         showFlags,
         containerClass,
         hiddenInput,
         dropdownContainer,
         fixDropdownWidth,
         useFullscreenPopup,
-        countrySearch,
         i18n
       } = this.options;
       let parentClass = "iti";
       if (allowDropdown) {
         parentClass += " iti--allow-dropdown";
       }
-      if (showSelectedDialCode) {
-        parentClass += " iti--show-selected-dial-code";
-      }
       if (showFlags) {
         parentClass += " iti--show-flags";
       }
@@ -1745,7 +1730,7 @@ var factoryOutput = (() => {
       }
       const wrapper = createEl("div", { class: parentClass });
       this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-      if (showFlags || showSelectedDialCode) {
+      if (allowDropdown || showFlags) {
         this.countryContainer = createEl(
           "div",
           { class: "iti__country-container" },
@@ -1759,46 +1744,45 @@ var factoryOutput = (() => {
             ...allowDropdown && {
               "aria-expanded": "false",
               "aria-label": this.options.i18n.selectedCountryAriaLabel,
-              "aria-haspopup": countrySearch ? "true" : "listbox",
-              "aria-controls": countrySearch ? `iti-${this.id}__dropdown-content` : `iti-${this.id}__country-listbox`,
-              ...countrySearch ? { role: "combobox" } : {}
+              "aria-haspopup": "true",
+              "aria-controls": `iti-${this.id}__dropdown-content`,
+              "role": "combobox"
             }
           },
           this.countryContainer
         );
-        this.selectedCountryInner = createEl("div", null, this.selectedCountry);
+        const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
+        this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },
           this.selectedCountryInner
         );
-      }
-      wrapper.appendChild(this.telInput);
-      if (this.selectedCountry && this.telInput.disabled) {
-        this.selectedCountry.setAttribute("aria-disabled", "true");
-      }
-      if (showSelectedDialCode) {
-        this.selectedDialCode = createEl(
-          "div",
-          { class: "iti__selected-dial-code" },
-          this.selectedCountry
-        );
-      }
-      if (allowDropdown) {
-        if (!this.telInput.disabled) {
+        if (this.telInput.disabled) {
+          this.selectedCountry.setAttribute("aria-disabled", "true");
+        } else {
           this.selectedCountry.setAttribute("tabindex", "0");
         }
-        this.dropdownArrow = createEl(
-          "div",
-          { class: "iti__arrow", "aria-hidden": "true" },
-          this.selectedCountry
-        );
-        const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
-        this.dropdownContent = createEl("div", {
-          id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${extraClasses}`
-        });
-        if (countrySearch) {
+        if (allowDropdown) {
+          this.dropdownArrow = createEl(
+            "div",
+            { class: "iti__arrow", "aria-hidden": "true" },
+            selectedCountryPrimary
+          );
+        }
+        if (separateDialCode) {
+          this.selectedDialCode = createEl(
+            "div",
+            { class: "iti__selected-dial-code" },
+            this.selectedCountry
+          );
+        }
+        if (allowDropdown) {
+          const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
+          this.dropdownContent = createEl("div", {
+            id: `iti-${this.id}__dropdown-content`,
+            class: `iti__dropdown-content iti__hide ${extraClasses}`
+          });
           this.searchInput = createEl(
             "input",
             {
@@ -1819,48 +1803,33 @@ var factoryOutput = (() => {
             { class: "iti__a11y-text" },
             this.dropdownContent
           );
-        }
-        this.countryList = createEl(
-          "ul",
-          {
-            class: "iti__country-list",
-            id: `iti-${this.id}__country-listbox`,
-            role: "listbox",
-            "aria-label": i18n.countryListAriaLabel
-          },
-          this.dropdownContent
-        );
-        if (this.preferredCountries.length && !countrySearch) {
-          this._appendListItems(this.preferredCountries, "iti__preferred", true);
-          createEl(
-            "li",
+          this.countryList = createEl(
+            "ul",
             {
-              class: "iti__divider",
-              "aria-hidden": "true"
+              class: "iti__country-list",
+              id: `iti-${this.id}__country-listbox`,
+              role: "listbox",
+              "aria-label": i18n.countryListAriaLabel
             },
-            this.countryList
+            this.dropdownContent
           );
-        }
-        this._appendListItems(this.countries, "iti__standard");
-        if (countrySearch) {
+          this._appendListItems(this.countries, "iti__standard");
           this._updateSearchResultsText();
-        }
-        if (dropdownContainer) {
-          let dropdownClasses = "iti iti--container";
-          if (useFullscreenPopup) {
-            dropdownClasses += " iti--fullscreen-popup";
+          if (dropdownContainer) {
+            let dropdownClasses = "iti iti--container";
+            if (useFullscreenPopup) {
+              dropdownClasses += " iti--fullscreen-popup";
+            } else {
+              dropdownClasses += " iti--inline-dropdown";
+            }
+            this.dropdown = createEl("div", { class: dropdownClasses });
+            this.dropdown.appendChild(this.dropdownContent);
           } else {
-            dropdownClasses += " iti--inline-dropdown";
+            this.countryContainer.appendChild(this.dropdownContent);
           }
-          if (countrySearch) {
-            dropdownClasses += " iti--country-search";
-          }
-          this.dropdown = createEl("div", { class: dropdownClasses });
-          this.dropdown.appendChild(this.dropdownContent);
-        } else {
-          this.countryContainer.appendChild(this.dropdownContent);
         }
       }
+      wrapper.appendChild(this.telInput);
       if (hiddenInput) {
         const telInputName = this.telInput.getAttribute("name") || "";
         const names = hiddenInput(telInputName);
@@ -1881,14 +1850,13 @@ var factoryOutput = (() => {
       }
     }
     //* For each of the passed countries: add a country <li> to the countryList <ul> container.
-    _appendListItems(countries, className, preferred) {
+    _appendListItems(countries, className) {
       for (let i = 0; i < countries.length; i++) {
         const c = countries[i];
-        const idSuffix = preferred ? "-preferred" : "";
         const listItem = createEl(
           "li",
           {
-            id: `iti-${this.id}__item-${c.iso2}${idSuffix}`,
+            id: `iti-${this.id}__item-${c.iso2}`,
             class: `iti__country ${className}`,
             tabindex: "-1",
             role: "option",
@@ -1911,8 +1879,6 @@ var factoryOutput = (() => {
     //* Set the initial state of the input value and the selected country by:
     //* 1. Extracting a dial code from the given number
     //* 2. Using explicit initialCountry
-    //* 3. Picking the first preferred country
-    //* 4. Picking the first country
     _setInitialState(overrideAutoCountry = false) {
       const attributeValue = this.telInput.getAttribute("value");
       const inputValue = this.telInput.value;
@@ -2002,12 +1968,12 @@ var factoryOutput = (() => {
     }
     //* Init many requests: utils script / geo ip lookup.
     _initRequests() {
-      if (this.options.utilsScript && !window.intlTelInputUtils) {
-        if (window.intlTelInputGlobals.documentReady()) {
-          window.intlTelInputGlobals.loadUtils(this.options.utilsScript);
+      if (this.options.utilsScript && !intlTelInput.utils) {
+        if (intlTelInput.documentReady()) {
+          intlTelInput.loadUtils(this.options.utilsScript);
         } else {
           window.addEventListener("load", () => {
-            window.intlTelInputGlobals.loadUtils(this.options.utilsScript);
+            intlTelInput.loadUtils(this.options.utilsScript);
           });
         }
       } else {
@@ -2021,17 +1987,17 @@ var factoryOutput = (() => {
     }
     //* Perform the geo ip lookup.
     _loadAutoCountry() {
-      if (window.intlTelInputGlobals.autoCountry) {
+      if (intlTelInput.autoCountry) {
         this.handleAutoCountry();
-      } else if (!window.intlTelInputGlobals.startedLoadingAutoCountry) {
-        window.intlTelInputGlobals.startedLoadingAutoCountry = true;
+      } else if (!intlTelInput.startedLoadingAutoCountry) {
+        intlTelInput.startedLoadingAutoCountry = true;
         if (typeof this.options.geoIpLookup === "function") {
           this.options.geoIpLookup(
             (iso2 = "") => {
               const iso2Lower = iso2.toLowerCase();
               const isValidIso2 = iso2Lower && this._getCountryData(iso2Lower, true);
               if (isValidIso2) {
-                window.intlTelInputGlobals.autoCountry = iso2Lower;
+                intlTelInput.autoCountry = iso2Lower;
                 setTimeout(() => forEachInstance("handleAutoCountry"));
               } else {
                 this._setInitialState(true);
@@ -2048,7 +2014,7 @@ var factoryOutput = (() => {
     }
     //* Initialize the tel input listeners.
     _initTelInputListeners() {
-      const { strictMode, formatAsYouType } = this.options;
+      const { strictMode, formatAsYouType, separateDialCode } = this.options;
       let userOverrideFormatting = false;
       this._handleInputEvent = (e) => {
         if (this._updateCountryFromNumber(this.telInput.value)) {
@@ -2073,17 +2039,26 @@ var factoryOutput = (() => {
         }
       };
       this.telInput.addEventListener("input", this._handleInputEvent);
-      if (strictMode) {
+      if (strictMode || separateDialCode) {
         this._handleKeydownEvent = (e) => {
           if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-            const isInitialPlus = this.telInput.selectionStart === 0 && e.key === "+";
-            const isNumeric = /^[0-9]$/.test(e.key);
-            const isAllowedChar = isInitialPlus || isNumeric;
-            const fullNumber = this._getFullNumber();
-            const coreNumber = window.intlTelInputUtils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
-            const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
-            if (!isAllowedChar || hasReachedMaxLength) {
+            if (separateDialCode && e.key === "+") {
               e.preventDefault();
+              this._openDropdown();
+              this.searchInput.value = "+";
+              this._filterCountries("", true);
+              return;
+            }
+            if (strictMode) {
+              const isInitialPlus = this.telInput.selectionStart === 0 && e.key === "+";
+              const isNumeric = /^[0-9]$/.test(e.key);
+              const isAllowedChar = isInitialPlus || isNumeric;
+              const fullNumber = this._getFullNumber();
+              const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
+              const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
+              if (!isAllowedChar || hasReachedMaxLength) {
+                e.preventDefault();
+              }
             }
           }
         };
@@ -2105,26 +2080,19 @@ var factoryOutput = (() => {
     }
     //* Open the dropdown.
     _openDropdown() {
-      const { fixDropdownWidth, countrySearch } = this.options;
+      const { fixDropdownWidth } = 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();
-      if (this.activeItem && !countrySearch) {
-        this._highlightListItem(this.activeItem, false);
-        this._scrollTo(this.activeItem, true);
-      } else {
-        const firstCountryItem = this.countryList.firstElementChild;
-        if (firstCountryItem) {
-          this._highlightListItem(firstCountryItem, false);
-          this.countryList.scrollTop = 0;
-        }
-        if (countrySearch) {
-          this.searchInput.focus();
-        }
+      const firstCountryItem = this.countryList.firstElementChild;
+      if (firstCountryItem) {
+        this._highlightListItem(firstCountryItem, false);
+        this.countryList.scrollTop = 0;
       }
+      this.searchInput.focus();
       this._bindDropdownListeners();
       this.dropdownArrow.classList.add("iti__arrow--up");
       this._trigger("open:countrydropdown");
@@ -2136,21 +2104,9 @@ var factoryOutput = (() => {
       }
       if (!this.options.useFullscreenPopup) {
         const inputPosRelativeToVP = this.telInput.getBoundingClientRect();
-        const scrollTop = document.documentElement.scrollTop;
-        const inputTopAbsolute = inputPosRelativeToVP.top + scrollTop;
         const inputHeight = this.telInput.offsetHeight;
-        const dropdownHeight = this.dropdownContent.offsetHeight;
-        const dropdownFitsBelow = inputTopAbsolute + inputHeight + dropdownHeight < scrollTop + window.innerHeight;
-        const dropdownFitsAbove = inputTopAbsolute - dropdownHeight > scrollTop;
-        const positionDropdownAboveInput = !this.options.countrySearch && !dropdownFitsBelow && dropdownFitsAbove;
-        toggleClass(
-          this.dropdownContent,
-          "iti__dropdown-content--dropup",
-          positionDropdownAboveInput
-        );
         if (this.options.dropdownContainer) {
-          const extraTop = positionDropdownAboveInput ? 0 : inputHeight;
-          this.dropdown.style.top = `${inputPosRelativeToVP.top + extraTop}px`;
+          this.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
           this.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
           this._handleWindowScroll = () => this._closeDropdown();
           window.addEventListener("scroll", this._handleWindowScroll);
@@ -2187,8 +2143,6 @@ var factoryOutput = (() => {
         "click",
         this._handleClickOffToClose
       );
-      let query = "";
-      let queryTimer = null;
       this._handleKeydownOnDropdown = (e) => {
         if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
           e.preventDefault();
@@ -2201,41 +2155,28 @@ var factoryOutput = (() => {
             this._closeDropdown();
           }
         }
-        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);
-        }
       };
       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());
-      }
+      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());
     }
     _filterCountries(query, isReset = false) {
       let isFirst = true;
@@ -2276,17 +2217,12 @@ var factoryOutput = (() => {
     //* Highlight the next/prev item in the list (and ensure it is visible).
     _handleUpDownKey(key) {
       let next = key === "ArrowUp" ? this.highlightedItem?.previousElementSibling : this.highlightedItem?.nextElementSibling;
-      if (next) {
-        if (next.classList.contains("iti__divider")) {
-          next = key === "ArrowUp" ? next.previousElementSibling : next.nextElementSibling;
-        }
-      } else if (this.countryList.childElementCount > 1) {
+      if (!next && this.countryList.childElementCount > 1) {
         next = key === "ArrowUp" ? this.countryList.lastElementChild : this.countryList.firstElementChild;
       }
       if (next) {
-        this._scrollTo(next, false);
-        const doFocus = !this.options.countrySearch;
-        this._highlightListItem(next, doFocus);
+        this._scrollTo(next);
+        this._highlightListItem(next, false);
       }
     }
     //* Select the currently highlighted item.
@@ -2295,28 +2231,15 @@ var factoryOutput = (() => {
         this._selectListItem(this.highlightedItem);
       }
     }
-    //* 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, true);
-          break;
-        }
-      }
-    }
     //* Update the input's value to the given val (format first if possible)
     //* NOTE: this is called from _setInitialState, handleUtils and setNumber.
     _updateValFromNumber(fullNumber) {
       let number = fullNumber;
-      if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
-        const useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.showSelectedDialCode;
-        const { NATIONAL, INTERNATIONAL } = window.intlTelInputUtils.numberFormat;
+      if (this.options.formatOnDisplay && intlTelInput.utils && this.selectedCountryData) {
+        const useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
+        const { NATIONAL, INTERNATIONAL } = intlTelInput.utils.numberFormat;
         const format = useNational ? NATIONAL : INTERNATIONAL;
-        number = window.intlTelInputUtils.formatNumber(
+        number = intlTelInput.utils.formatNumber(
           number,
           this.selectedCountryData.iso2,
           format
@@ -2338,7 +2261,7 @@ var factoryOutput = (() => {
         }
         number = `+${number}`;
       }
-      if (this.options.showSelectedDialCode && selectedDialCode && number.charAt(0) !== "+") {
+      if (this.options.separateDialCode && selectedDialCode && number.charAt(0) !== "+") {
         number = `+${selectedDialCode}${number}`;
       }
       const dialCode = this._getDialCode(number, true);
@@ -2380,12 +2303,10 @@ var factoryOutput = (() => {
         "aria-activedescendant",
         listItem.getAttribute("id") || ""
       );
-      if (this.options.countrySearch) {
-        this.searchInput.setAttribute(
-          "aria-activedescendant",
-          listItem.getAttribute("id") || ""
-        );
-      }
+      this.searchInput.setAttribute(
+        "aria-activedescendant",
+        listItem.getAttribute("id") || ""
+      );
       if (shouldFocus) {
         this.highlightedItem.focus();
       }
@@ -2403,10 +2324,10 @@ var factoryOutput = (() => {
       }
       throw new Error(`No country data for '${iso2}'`);
     }
-    //* Update the selected country, dial code (if showSelectedDialCode), placeholder, title, and active list item.
+    //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
     //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
     _setCountry(iso2) {
-      const { allowDropdown, showSelectedDialCode, showFlags, countrySearch, i18n } = this.options;
+      const { separateDialCode, showFlags, i18n } = this.options;
       const prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
       this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
       if (this.selectedCountryData.iso2) {
@@ -2415,11 +2336,9 @@ var factoryOutput = (() => {
       if (this.selectedCountryInner) {
         let flagClass = "";
         let a11yText = "";
-        if (iso2) {
-          if (showFlags) {
-            flagClass = `iti__flag iti__${iso2}`;
-            a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
-          }
+        if (iso2 && showFlags) {
+          flagClass = `iti__flag iti__${iso2}`;
+          a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
         } else {
           flagClass = "iti__flag iti__globe";
           a11yText = i18n.noCountrySelected;
@@ -2427,69 +2346,51 @@ var factoryOutput = (() => {
         this.selectedCountryInner.className = flagClass;
         this.selectedCountryA11yText.textContent = a11yText;
       }
-      this._setSelectedCountryTitleAttribute(iso2, showSelectedDialCode);
-      if (showSelectedDialCode) {
+      this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
+      if (separateDialCode) {
         const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
         this.selectedDialCode.innerHTML = dialCode;
         const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+        const inputPadding = selectedCountryWidth + 8;
         if (this.isRTL) {
-          this.telInput.style.paddingRight = `${selectedCountryWidth + 6}px`;
+          this.telInput.style.paddingRight = `${inputPadding}px`;
         } else {
-          this.telInput.style.paddingLeft = `${selectedCountryWidth + 6}px`;
+          this.telInput.style.paddingLeft = `${inputPadding}px`;
         }
       }
       this._updatePlaceholder();
       this._updateMaxLength();
-      if (allowDropdown && !countrySearch) {
-        const prevItem = this.activeItem;
-        if (prevItem) {
-          prevItem.classList.remove("iti__active");
-          prevItem.setAttribute("aria-selected", "false");
-        }
-        if (iso2) {
-          const nextItem = this.countryList.querySelector(
-            `#iti-${this.id}__item-${iso2}-preferred`
-          ) || this.countryList.querySelector(
-            `#iti-${this.id}__item-${iso2}`
-          );
-          if (nextItem) {
-            nextItem.setAttribute("aria-selected", "true");
-            nextItem.classList.add("iti__active");
-            this.activeItem = nextItem;
-          }
-        }
-      }
       return prevCountry.iso2 !== iso2;
     }
     //* Update the maximum valid number length for the currently selected country.
     _updateMaxLength() {
-      if (this.options.strictMode && window.intlTelInputUtils) {
+      if (this.options.strictMode && intlTelInput.utils) {
         if (this.selectedCountryData.iso2) {
-          const numberType = window.intlTelInputUtils.numberType[this.options.placeholderNumberType];
-          let exampleNumber = window.intlTelInputUtils.getExampleNumber(
+          const numberType = intlTelInput.utils.numberType[this.options.placeholderNumberType];
+          let exampleNumber = intlTelInput.utils.getExampleNumber(
             this.selectedCountryData.iso2,
             false,
             numberType,
             true
           );
           let validNumber = exampleNumber;
-          while (window.intlTelInputUtils.isPossibleNumber(exampleNumber, this.selectedCountryData.iso2)) {
+          while (intlTelInput.utils.isPossibleNumber(exampleNumber, this.selectedCountryData.iso2)) {
             validNumber = exampleNumber;
             exampleNumber += "0";
           }
-          const coreNumber = window.intlTelInputUtils.getCoreNumber(validNumber, this.selectedCountryData.iso2);
+          const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, this.selectedCountryData.iso2);
           this.maxCoreNumberLength = coreNumber.length;
         } else {
           this.maxCoreNumberLength = null;
         }
       }
     }
-    _setSelectedCountryTitleAttribute(iso2 = null, showSelectedDialCode) {
+    _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
       if (!this.selectedCountry) {
         return;
       }
       let title;
-      if (iso2 && !showSelectedDialCode) {
+      if (iso2 && !separateDialCode) {
         title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
       } else if (iso2) {
         title = this.selectedCountryData.name;
@@ -2500,7 +2401,7 @@ var factoryOutput = (() => {
     }
     //* When the input is in a hidden container during initialisation, we must inject some markup
     //* into the end of the DOM to calculate the correct offsetWidth.
-    //* NOTE: this is only used when showSelectedDialCode is enabled, so countryContainer and selectedCountry
+    //* NOTE: this is only used when separateDialCode is enabled, so countryContainer and selectedCountry
     //* will definitely exist.
     _getHiddenSelectedCountryWidth() {
       if (this.telInput.parentNode) {
@@ -2526,9 +2427,9 @@ var factoryOutput = (() => {
         customPlaceholder
       } = this.options;
       const shouldSetPlaceholder = autoPlaceholder === "aggressive" || !this.hadInitialPlaceholder && autoPlaceholder === "polite";
-      if (window.intlTelInputUtils && shouldSetPlaceholder) {
-        const numberType = window.intlTelInputUtils.numberType[placeholderNumberType];
-        let placeholder = this.selectedCountryData.iso2 ? window.intlTelInputUtils.getExampleNumber(
+      if (intlTelInput.utils && shouldSetPlaceholder) {
+        const numberType = intlTelInput.utils.numberType[placeholderNumberType];
+        let placeholder = this.selectedCountryData.iso2 ? intlTelInput.utils.getExampleNumber(
           this.selectedCountryData.iso2,
           nationalMode,
           numberType
@@ -2560,14 +2461,10 @@ var factoryOutput = (() => {
       if (this.highlightedItem) {
         this.highlightedItem.setAttribute("aria-selected", "false");
       }
-      if (this.options.countrySearch) {
-        this.searchInput.removeAttribute("aria-activedescendant");
-      }
+      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.searchInput.removeEventListener("input", this._handleSearchChange);
       document.documentElement.removeEventListener(
         "click",
         this._handleClickOffToClose
@@ -2588,7 +2485,7 @@ var factoryOutput = (() => {
       this._trigger("close:countrydropdown");
     }
     //* Check if an element is visible within it's container, else scroll until it is.
-    _scrollTo(element, middle) {
+    _scrollTo(element) {
       const container = this.countryList;
       const scrollTop = document.documentElement.scrollTop;
       const containerHeight = container.offsetHeight;
@@ -2597,17 +2494,10 @@ var factoryOutput = (() => {
       const elementHeight = element.offsetHeight;
       const elementTop = element.getBoundingClientRect().top + scrollTop;
       const elementBottom = elementTop + elementHeight;
-      let newScrollTop = elementTop - containerTop + container.scrollTop;
-      const middleOffset = containerHeight / 2 - elementHeight / 2;
+      const newScrollTop = elementTop - containerTop + container.scrollTop;
       if (elementTop < containerTop) {
-        if (middle) {
-          newScrollTop -= middleOffset;
-        }
         container.scrollTop = newScrollTop;
       } else if (elementBottom > containerBottom) {
-        if (middle) {
-          newScrollTop += middleOffset;
-        }
         const heightDifference = containerHeight - elementHeight;
         container.scrollTop = newScrollTop - heightDifference;
       }
@@ -2656,23 +2546,23 @@ var factoryOutput = (() => {
       }
       return dialCode;
     }
-    //* Get the input val, adding the dial code if showSelectedDialCode is enabled.
+    //* Get the input val, adding the dial code if separateDialCode is enabled.
     _getFullNumber() {
       const val = this.telInput.value.trim();
       const { dialCode } = this.selectedCountryData;
       let prefix;
       const numericVal = getNumeric(val);
-      if (this.options.showSelectedDialCode && !this.options.nationalMode && val.charAt(0) !== "+" && dialCode && numericVal) {
+      if (this.options.separateDialCode && val.charAt(0) !== "+" && dialCode && numericVal) {
         prefix = `+${dialCode}`;
       } else {
         prefix = "";
       }
       return prefix + val;
     }
-    //* Remove the dial code if showSelectedDialCode is enabled also cap the length if the input has a maxlength attribute
+    //* Remove the dial code if separateDialCode is enabled also cap the length if the input has a maxlength attribute
     _beforeSetNumber(fullNumber) {
       let number = fullNumber;
-      if (this.options.showSelectedDialCode) {
+      if (this.options.separateDialCode) {
         let dialCode = this._getDialCode(number);
         if (dialCode) {
           dialCode = `+${this.selectedCountryData.dialCode}`;
@@ -2689,9 +2579,9 @@ var factoryOutput = (() => {
     //* Format the number as the user types.
     _formatNumberAsYouType() {
       const val = this._getFullNumber();
-      const result = window.intlTelInputUtils ? window.intlTelInputUtils.formatNumberAsYouType(val, this.selectedCountryData.iso2) : val;
+      const result = intlTelInput.utils ? intlTelInput.utils.formatNumberAsYouType(val, this.selectedCountryData.iso2) : val;
       const { dialCode } = this.selectedCountryData;
-      if (this.options.showSelectedDialCode && !this.options.nationalMode && this.telInput.value.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
+      if (this.options.separateDialCode && this.telInput.value.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
         const afterDialCode = result.split(`+${dialCode}`)[1] || "";
         return afterDialCode.trim();
       }
@@ -2702,8 +2592,8 @@ var factoryOutput = (() => {
     //**************************
     //* This is called when the geoip call returns.
     handleAutoCountry() {
-      if (this.options.initialCountry === "auto" && window.intlTelInputGlobals.autoCountry) {
-        this.defaultCountry = window.intlTelInputGlobals.autoCountry;
+      if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
+        this.defaultCountry = intlTelInput.autoCountry;
         if (!this.telInput.value) {
           this.setCountry(this.defaultCountry);
         }
@@ -2712,7 +2602,7 @@ var factoryOutput = (() => {
     }
     //* This is called when the utils request completes.
     handleUtils() {
-      if (window.intlTelInputUtils) {
+      if (intlTelInput.utils) {
         if (this.telInput.value) {
           this._updateValFromNumber(this.telInput.value);
         }
@@ -2755,12 +2645,12 @@ var factoryOutput = (() => {
       const wrapper = this.telInput.parentNode;
       wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
       wrapper?.parentNode?.removeChild(wrapper);
-      delete window.intlTelInputGlobals.instances[this.id];
+      delete intlTelInput.instances[this.id];
     }
     //* Get the extension from the current number.
     getExtension() {
-      if (window.intlTelInputUtils) {
-        return window.intlTelInputUtils.getExtension(
+      if (intlTelInput.utils) {
+        return intlTelInput.utils.getExtension(
           this._getFullNumber(),
           this.selectedCountryData.iso2
         );
@@ -2769,9 +2659,9 @@ var factoryOutput = (() => {
     }
     //* Format the number to the given format.
     getNumber(format) {
-      if (window.intlTelInputUtils) {
+      if (intlTelInput.utils) {
         const { iso2 } = this.selectedCountryData;
-        return window.intlTelInputUtils.formatNumber(
+        return intlTelInput.utils.formatNumber(
           this._getFullNumber(),
           iso2,
           format
@@ -2781,8 +2671,8 @@ var factoryOutput = (() => {
     }
     //* Get the type of the entered number e.g. landline/mobile.
     getNumberType() {
-      if (window.intlTelInputUtils) {
-        return window.intlTelInputUtils.getNumberType(
+      if (intlTelInput.utils) {
+        return intlTelInput.utils.getNumberType(
           this._getFullNumber(),
           this.selectedCountryData.iso2
         );
@@ -2795,27 +2685,27 @@ var factoryOutput = (() => {
     }
     //* Get the validation error.
     getValidationError() {
-      if (window.intlTelInputUtils) {
+      if (intlTelInput.utils) {
         const { iso2 } = this.selectedCountryData;
-        return window.intlTelInputUtils.getValidationError(this._getFullNumber(), iso2);
+        return intlTelInput.utils.getValidationError(this._getFullNumber(), iso2);
       }
       return -99;
     }
-    //* Validate the input val - assumes the global function isPossibleNumber (from utilsScript).
+    //* Validate the input val
     isValidNumber(mobileOnly = true) {
       const val = this._getFullNumber();
       if (/\p{L}/u.test(val)) {
         return false;
       }
-      return window.intlTelInputUtils ? window.intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2, mobileOnly) : null;
+      return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, mobileOnly) : null;
     }
-    //* Validate the input val (precise) - assumes the global function isValidNumber (from utilsScript).
+    //* Validate the input val (precise)
     isValidNumberPrecise() {
       const val = this._getFullNumber();
       if (/\p{L}/u.test(val)) {
         return false;
       }
-      return window.intlTelInputUtils ? window.intlTelInputUtils.isValidNumber(val, this.selectedCountryData.iso2) : null;
+      return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2) : null;
     }
     //* Update the selected country, and update the input val accordingly.
     setCountry(iso2) {
@@ -2840,9 +2730,17 @@ var factoryOutput = (() => {
       this._updatePlaceholder();
     }
   };
-  var injectScript = (path, handleSuccess, handleFailure) => {
+  var injectUtilsScriptTag = (path, handleSuccess, handleFailure) => {
     const script = document.createElement("script");
     script.onload = () => {
+      if (window.intlTelInputUtils) {
+        intlTelInput.utils = window.intlTelInputUtils;
+        delete window.intlTelInputUtils;
+        if (window.intlTelInputUtilsBackup) {
+          window.intlTelInputUtils = window.intlTelInputUtilsBackup;
+          delete window.intlTelInputUtilsBackup;
+        }
+      }
       forEachInstance("handleUtils");
       if (handleSuccess) {
         handleSuccess();
@@ -2860,40 +2758,39 @@ var factoryOutput = (() => {
     document.body.appendChild(script);
   };
   var loadUtils = (path) => {
-    if (!window.intlTelInputUtils && !window.intlTelInputGlobals.startedLoadingUtilsScript) {
-      window.intlTelInputGlobals.startedLoadingUtilsScript = true;
+    if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
+      intlTelInput.startedLoadingUtilsScript = true;
       return new Promise(
-        (resolve, reject) => injectScript(path, resolve, reject)
+        (resolve, reject) => injectUtilsScriptTag(path, resolve, reject)
       );
     }
     return null;
   };
-  if (typeof window === "object" && !window.intlTelInputGlobals) {
-    const intlTelInputGlobals = {
+  var intlTelInput = Object.assign(
+    (input, options) => {
+      const iti = new Iti(input, options);
+      iti._init();
+      input.setAttribute("data-intl-tel-input-id", iti.id.toString());
+      intlTelInput.instances[iti.id] = iti;
+      return iti;
+    },
+    {
       defaults,
-      //* Using a global like this allows us to mock it in the tests.
+      //* Using a static var like this allows us to mock it in the tests.
       documentReady: () => document.readyState === "complete",
       //* Get the country data object.
       getCountryData: () => data_default,
       //* A getter for the plugin instance.
       getInstance: (input) => {
         const id2 = input.getAttribute("data-intl-tel-input-id");
-        return id2 ? intlTelInputGlobals.instances[id2] : null;
+        return id2 ? intlTelInput.instances[id2] : null;
       },
       //* A map from instance ID to instance object.
       instances: {},
       loadUtils,
-      version: "21.2.8"
-    };
-    window.intlTelInputGlobals = intlTelInputGlobals;
-  }
-  var intlTelInput = (input, options) => {
-    const iti = new Iti(input, options);
-    iti._init();
-    input.setAttribute("data-intl-tel-input-id", iti.id.toString());
-    window.intlTelInputGlobals.instances[iti.id] = iti;
-    return iti;
-  };
+      version: "22.0.0"
+    }
+  );
   var intl_tel_input_default = intlTelInput;
   return __toCommonJS(intl_tel_input_exports);
 })();