intl-tel-input 25.10.7 → 25.10.8

package/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.10.7
+ * International Telephone Input v25.10.8
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -1647,11 +1647,7 @@ var factoryOutput = (() => {
   var allTranslations = { ...countries_default, ...interface_default };
   var en_default = allTranslations;
 
-  // src/js/intl-tel-input.ts
-  for (const c of data_default) {
-    c.name = en_default[c.iso2];
-  }
-  var id = 0;
+  // src/js/modules/core/options.ts
   var mq = (q) => {
     return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
   };
@@ -1717,6 +1713,181 @@ var factoryOutput = (() => {
     //* The number type to enforce during validation.
     validationNumberTypes: ["MOBILE"]
   };
+  function applyOptionSideEffects(o) {
+    if (o.useFullscreenPopup) {
+      o.fixDropdownWidth = false;
+    }
+    if (o.onlyCountries.length === 1) {
+      o.initialCountry = o.onlyCountries[0];
+    }
+    if (o.separateDialCode) {
+      o.nationalMode = false;
+    }
+    if (o.allowDropdown && !o.showFlags && !o.separateDialCode) {
+      o.nationalMode = false;
+    }
+    if (o.useFullscreenPopup && !o.dropdownContainer) {
+      o.dropdownContainer = document.body;
+    }
+    o.i18n = { ...en_default, ...o.i18n };
+  }
+
+  // src/js/modules/utils/string.ts
+  var getNumeric = (s) => s.replace(/\D/g, "");
+  var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+
+  // src/js/modules/utils/dom.ts
+  var createEl = (tagName, attrs, container) => {
+    const el = document.createElement(tagName);
+    if (attrs) {
+      Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
+    }
+    if (container) {
+      container.appendChild(el);
+    }
+    return el;
+  };
+
+  // src/js/modules/data/country-data.ts
+  function processAllCountries(options) {
+    const { onlyCountries, excludeCountries } = options;
+    if (onlyCountries.length) {
+      const lowerCaseOnlyCountries = onlyCountries.map((country) => country.toLowerCase());
+      return data_default.filter((country) => lowerCaseOnlyCountries.includes(country.iso2));
+    } else if (excludeCountries.length) {
+      const lowerCaseExcludeCountries = excludeCountries.map((country) => country.toLowerCase());
+      return data_default.filter((country) => !lowerCaseExcludeCountries.includes(country.iso2));
+    }
+    return data_default;
+  }
+  function translateCountryNames(countries, options) {
+    for (const c of countries) {
+      const iso2 = c.iso2.toLowerCase();
+      if (options.i18n[iso2]) {
+        c.name = options.i18n[iso2];
+      }
+    }
+  }
+  function processDialCodes(countries, options) {
+    const dialCodes = /* @__PURE__ */ new Set();
+    let dialCodeMaxLen = 0;
+    const dialCodeToIso2Map = {};
+    const _addToDialCodeMap = (iso2, dialCode, priority) => {
+      if (!iso2 || !dialCode) {
+        return;
+      }
+      if (dialCode.length > dialCodeMaxLen) {
+        dialCodeMaxLen = dialCode.length;
+      }
+      if (!dialCodeToIso2Map.hasOwnProperty(dialCode)) {
+        dialCodeToIso2Map[dialCode] = [];
+      }
+      const iso2List = dialCodeToIso2Map[dialCode];
+      if (iso2List.includes(iso2)) {
+        return;
+      }
+      const index = priority !== void 0 ? priority : iso2List.length;
+      iso2List[index] = iso2;
+    };
+    for (const c of countries) {
+      if (!dialCodes.has(c.dialCode)) {
+        dialCodes.add(c.dialCode);
+      }
+      _addToDialCodeMap(c.iso2, c.dialCode, c.priority);
+    }
+    if (options.onlyCountries.length || options.excludeCountries.length) {
+      dialCodes.forEach((dialCode) => {
+        dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
+      });
+    }
+    for (const c of countries) {
+      if (c.areaCodes) {
+        const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
+        for (const areaCode of c.areaCodes) {
+          for (let k = 1; k < areaCode.length; k++) {
+            const partialAreaCode = areaCode.substring(0, k);
+            const partialDialCode = c.dialCode + partialAreaCode;
+            _addToDialCodeMap(rootIso2Code, partialDialCode);
+            _addToDialCodeMap(c.iso2, partialDialCode);
+          }
+          _addToDialCodeMap(c.iso2, c.dialCode + areaCode);
+        }
+      }
+    }
+    return { dialCodes, dialCodeMaxLen, dialCodeToIso2Map };
+  }
+  function sortCountries(countries, options) {
+    if (options.countryOrder) {
+      options.countryOrder = options.countryOrder.map((iso2) => iso2.toLowerCase());
+    }
+    countries.sort((a, b) => {
+      const { countryOrder } = 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;
+        }
+      }
+      return a.name.localeCompare(b.name);
+    });
+  }
+  function cacheSearchTokens(countries) {
+    for (const c of countries) {
+      c.normalisedName = normaliseString(c.name);
+      c.initials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
+      c.dialCodePlus = `+${c.dialCode}`;
+    }
+  }
+
+  // src/js/modules/format/formatting.ts
+  function beforeSetNumber(fullNumber, dialCode, separateDialCode, selectedCountryData) {
+    let number = fullNumber;
+    if (separateDialCode) {
+      if (dialCode) {
+        dialCode = `+${selectedCountryData.dialCode}`;
+        const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
+        number = number.substring(start);
+      }
+    }
+    return number;
+  }
+  function formatNumberAsYouType(fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) {
+    const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
+    const { dialCode } = selectedCountryData;
+    if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
+      const afterDialCode = result.split(`+${dialCode}`)[1] || "";
+      return afterDialCode.trim();
+    }
+    return result;
+  }
+
+  // src/js/modules/format/caret.ts
+  function translateCursorPosition(relevantChars, formattedValue, prevCaretPos, isDeleteForwards) {
+    if (prevCaretPos === 0 && !isDeleteForwards) {
+      return 0;
+    }
+    let relevantCharCount = 0;
+    for (let i = 0; i < formattedValue.length; i++) {
+      if (/[+0-9]/.test(formattedValue[i])) {
+        relevantCharCount++;
+      }
+      if (relevantCharCount === relevantChars && !isDeleteForwards) {
+        return i + 1;
+      }
+      if (isDeleteForwards && relevantCharCount === relevantChars + 1) {
+        return i;
+      }
+    }
+    return formattedValue.length;
+  }
+
+  // src/js/modules/data/nanp-regionless.ts
   var regionlessNanpNumbers = [
     "800",
     "822",
@@ -1736,8 +1907,6 @@ var factoryOutput = (() => {
     "888",
     "889"
   ];
-  var getNumeric = (s) => s.replace(/\D/g, "");
-  var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
   var isRegionlessNanp = (number) => {
     const numeric = getNumeric(number);
     if (numeric.charAt(0) === "1") {
@@ -1746,34 +1915,14 @@ var factoryOutput = (() => {
     }
     return false;
   };
-  var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
-    if (prevCaretPos === 0 && !isDeleteForwards) {
-      return 0;
-    }
-    let count = 0;
-    for (let i = 0; i < formattedValue.length; i++) {
-      if (/[+0-9]/.test(formattedValue[i])) {
-        count++;
-      }
-      if (count === relevantChars && !isDeleteForwards) {
-        return i + 1;
-      }
-      if (isDeleteForwards && count === relevantChars + 1) {
-        return i;
-      }
-    }
-    return formattedValue.length;
-  };
-  var createEl = (tagName, attrs, container) => {
-    const el = document.createElement(tagName);
-    if (attrs) {
-      Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
-    }
-    if (container) {
-      container.appendChild(el);
-    }
-    return el;
-  };
+
+  // src/js/intl-tel-input.ts
+  for (const c of data_default) {
+    c.name = en_default[c.iso2];
+  }
+  var id = 0;
+  var iso2Set = new Set(data_default.map((c) => c.iso2));
+  var isIso2 = (val) => iso2Set.has(val);
   var forEachInstance = (method, ...args) => {
     const { instances } = intlTelInput;
     Object.values(instances).forEach((instance) => instance[method](...args));
@@ -1793,23 +1942,7 @@ var factoryOutput = (() => {
       this.options = Object.assign({}, defaults, customOptions);
       this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
     }
-    //* Can't be private as it's called from intlTelInput convenience wrapper.
-    _init() {
-      if (this.options.useFullscreenPopup) {
-        this.options.fixDropdownWidth = false;
-      }
-      if (this.options.onlyCountries.length === 1) {
-        this.options.initialCountry = this.options.onlyCountries[0];
-      }
-      if (this.options.separateDialCode) {
-        this.options.nationalMode = false;
-      }
-      if (this.options.allowDropdown && !this.options.showFlags && !this.options.separateDialCode) {
-        this.options.nationalMode = false;
-      }
-      if (this.options.useFullscreenPopup && !this.options.dropdownContainer) {
-        this.options.dropdownContainer = document.body;
-      }
+    _detectEnvironmentAndLayout() {
       this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
       this.isRTL = !!this.telInput.closest("[dir=rtl]");
       this.telInput.dir = "ltr";
@@ -1822,7 +1955,8 @@ var factoryOutput = (() => {
           this.originalPaddingLeft = this.telInput.style.paddingLeft;
         }
       }
-      this.options.i18n = { ...en_default, ...this.options.i18n };
+    }
+    _createInitPromises() {
       const autoCountryPromise = new Promise((resolve, reject) => {
         this.resolveAutoCountryPromise = resolve;
         this.rejectAutoCountryPromise = reject;
@@ -1832,6 +1966,12 @@ var factoryOutput = (() => {
         this.rejectUtilsScriptPromise = reject;
       });
       this.promise = Promise.all([autoCountryPromise, utilsScriptPromise]);
+    }
+    //* Can't be private as it's called from intlTelInput convenience wrapper.
+    _init() {
+      applyOptionSideEffects(this.options);
+      this._detectEnvironmentAndLayout();
+      this._createInitPromises();
       this.selectedCountryData = {};
       this._processCountryData();
       this._generateMarkup();
@@ -1844,139 +1984,37 @@ var factoryOutput = (() => {
     //********************
     //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
     _processCountryData() {
-      this._processAllCountries();
-      this._processDialCodes();
-      this._translateCountryNames();
-      this._sortCountries();
+      this.countries = processAllCountries(this.options);
+      const dialRes = processDialCodes(this.countries, this.options);
+      this.dialCodes = dialRes.dialCodes;
+      this.dialCodeMaxLen = dialRes.dialCodeMaxLen;
+      this.dialCodeToIso2Map = dialRes.dialCodeToIso2Map;
+      translateCountryNames(this.countries, this.options);
+      sortCountries(this.countries, this.options);
       this.countryByIso2 = new Map(this.countries.map((c) => [c.iso2, c]));
-      this._cacheSearchTokens();
-    }
-    //* Precompute and cache country search tokens to speed up filtering
-    _cacheSearchTokens() {
-      for (const c of this.countries) {
-        c.normalisedName = normaliseString(c.name);
-        c.initials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
-        c.dialCodePlus = `+${c.dialCode}`;
-      }
-    }
-    //* Sort countries by countryOrder option (if present), then name.
-    _sortCountries() {
-      if (this.options.countryOrder) {
-        this.options.countryOrder = this.options.countryOrder.map((country) => country.toLowerCase());
-      }
-      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;
-          }
-        }
-        return a.name.localeCompare(b.name);
-      });
-    }
-    //* Add a dial code to this.dialCodeToIso2Map.
-    _addToDialCodeMap(iso2, dialCode, priority) {
-      if (!iso2 || !dialCode) {
-        return;
-      }
-      if (dialCode.length > this.dialCodeMaxLen) {
-        this.dialCodeMaxLen = dialCode.length;
-      }
-      if (!this.dialCodeToIso2Map.hasOwnProperty(dialCode)) {
-        this.dialCodeToIso2Map[dialCode] = [];
-      }
-      const iso2List = this.dialCodeToIso2Map[dialCode];
-      if (iso2List.includes(iso2)) {
-        return;
-      }
-      const index = priority !== void 0 ? priority : iso2List.length;
-      iso2List[index] = iso2;
-    }
-    //* Process onlyCountries or excludeCountries array if present.
-    _processAllCountries() {
-      const { onlyCountries, excludeCountries } = this.options;
-      if (onlyCountries.length) {
-        const lowerCaseOnlyCountries = onlyCountries.map(
-          (country) => country.toLowerCase()
-        );
-        this.countries = data_default.filter(
-          (country) => lowerCaseOnlyCountries.includes(country.iso2)
-        );
-      } else if (excludeCountries.length) {
-        const lowerCaseExcludeCountries = excludeCountries.map(
-          (country) => country.toLowerCase()
-        );
-        this.countries = data_default.filter(
-          (country) => !lowerCaseExcludeCountries.includes(country.iso2)
-        );
-      } else {
-        this.countries = data_default;
-      }
-    }
-    //* Translate Countries by object literal provided on config.
-    _translateCountryNames() {
-      for (const c of this.countries) {
-        const iso2 = c.iso2.toLowerCase();
-        if (this.options.i18n.hasOwnProperty(iso2)) {
-          c.name = this.options.i18n[iso2];
-        }
-      }
-    }
-    //* Generate this.dialCodes and this.dialCodeToIso2Map.
-    _processDialCodes() {
-      this.dialCodes = /* @__PURE__ */ new Set();
-      this.dialCodeMaxLen = 0;
-      this.dialCodeToIso2Map = {};
-      for (const c of this.countries) {
-        if (!this.dialCodes.has(c.dialCode)) {
-          this.dialCodes.add(c.dialCode);
-        }
-        this._addToDialCodeMap(c.iso2, c.dialCode, c.priority);
-      }
-      if (this.options.onlyCountries.length || this.options.excludeCountries.length) {
-        this.dialCodes.forEach((dialCode) => {
-          this.dialCodeToIso2Map[dialCode] = this.dialCodeToIso2Map[dialCode].filter(Boolean);
-        });
-      }
-      for (const c of this.countries) {
-        if (c.areaCodes) {
-          const rootIso2Code = this.dialCodeToIso2Map[c.dialCode][0];
-          for (const areaCode of c.areaCodes) {
-            for (let k = 1; k < areaCode.length; k++) {
-              const partialAreaCode = areaCode.substring(0, k);
-              const partialDialCode = c.dialCode + partialAreaCode;
-              this._addToDialCodeMap(rootIso2Code, partialDialCode);
-              this._addToDialCodeMap(c.iso2, partialDialCode);
-            }
-            this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
-          }
-        }
-      }
+      cacheSearchTokens(this.countries);
     }
     //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
     _generateMarkup() {
+      this._prepareTelInput();
+      const wrapper = this._createWrapperAndInsert();
+      this._maybeBuildCountryContainer(wrapper);
+      wrapper.appendChild(this.telInput);
+      this._maybeUpdateInputPaddingAndReveal();
+      this._maybeBuildHiddenInputs(wrapper);
+    }
+    _prepareTelInput() {
       this.telInput.classList.add("iti__tel-input");
       if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
         this.telInput.setAttribute("autocomplete", "off");
       }
+    }
+    _createWrapperAndInsert() {
       const {
         allowDropdown,
-        separateDialCode,
         showFlags,
         containerClass,
-        hiddenInput,
-        dropdownContainer,
-        fixDropdownWidth,
-        useFullscreenPopup,
-        countrySearch,
-        i18n
+        useFullscreenPopup
       } = this.options;
       const parentClasses = _Iti._buildClassNames({
         "iti": true,
@@ -1987,6 +2025,14 @@ var factoryOutput = (() => {
       });
       const wrapper = createEl("div", { class: parentClasses });
       this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
+      return wrapper;
+    }
+    _maybeBuildCountryContainer(wrapper) {
+      const {
+        allowDropdown,
+        separateDialCode,
+        showFlags
+      } = this.options;
       if (allowDropdown || showFlags || separateDialCode) {
         this.countryContainer = createEl(
           "div",
@@ -2047,119 +2093,138 @@ var factoryOutput = (() => {
           );
         }
         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}`,
-            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",
-              {
-                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"
-              },
-              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",
-              id: `iti-${this.id}__country-listbox`,
-              role: "listbox",
-              "aria-label": i18n.countryListAriaLabel
-            },
-            this.dropdownContent
-          );
-          this._appendListItems();
-          if (countrySearch) {
-            this._updateSearchResultsA11yText();
-          }
-          if (dropdownContainer) {
-            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 {
-            this.countryContainer.appendChild(this.dropdownContent);
-          }
+          this._buildDropdownContent();
         }
       }
-      wrapper.appendChild(this.telInput);
+    }
+    _buildDropdownContent() {
+      const {
+        fixDropdownWidth,
+        useFullscreenPopup,
+        countrySearch,
+        i18n,
+        dropdownContainer,
+        containerClass
+      } = this.options;
+      const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
+      this.dropdownContent = createEl("div", {
+        id: `iti-${this.id}__dropdown-content`,
+        class: `iti__dropdown-content iti__hide ${extraClasses}`,
+        role: "dialog",
+        "aria-modal": "true"
+      });
+      if (countrySearch) {
+        this._buildSearchUI();
+      }
+      this.countryList = createEl(
+        "ul",
+        {
+          class: "iti__country-list",
+          id: `iti-${this.id}__country-listbox`,
+          role: "listbox",
+          "aria-label": i18n.countryListAriaLabel
+        },
+        this.dropdownContent
+      );
+      this._appendListItems();
+      if (countrySearch) {
+        this._updateSearchResultsA11yText();
+      }
+      if (dropdownContainer) {
+        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 {
+        this.countryContainer.appendChild(this.dropdownContent);
+      }
+    }
+    _buildSearchUI() {
+      const { i18n } = this.options;
+      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",
+        {
+          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"
+        },
+        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;
+    }
+    _maybeUpdateInputPaddingAndReveal() {
       if (this.countryContainer) {
         this._updateInputPadding();
         this.countryContainer.classList.remove("iti__v-hide");
       }
+    }
+    _maybeBuildHiddenInputs(wrapper) {
+      const { hiddenInput } = this.options;
       if (hiddenInput) {
         const telInputName = this.telInput.getAttribute("name") || "";
         const names = hiddenInput(telInputName);
@@ -2233,14 +2298,13 @@ var factoryOutput = (() => {
         this._updateCountryFromNumber(val);
       } else if (!isAutoCountry || overrideAutoCountry) {
         const lowerInitialCountry = initialCountry ? initialCountry.toLowerCase() : "";
-        const isValidInitialCountry = lowerInitialCountry && this._getCountryData(lowerInitialCountry, true);
-        if (isValidInitialCountry) {
+        if (isIso2(lowerInitialCountry)) {
           this._setCountry(lowerInitialCountry);
         } else {
           if (dialCode && isRegionlessNanpNumber) {
             this._setCountry("us");
           } else {
-            this._setCountry();
+            this._setCountry("");
           }
         }
       }
@@ -2343,8 +2407,7 @@ var factoryOutput = (() => {
           this.options.geoIpLookup(
             (iso2 = "") => {
               const iso2Lower = iso2.toLowerCase();
-              const isValidIso2 = iso2Lower && this._getCountryData(iso2Lower, true);
-              if (isValidIso2) {
+              if (isIso2(iso2Lower)) {
                 intlTelInput.autoCountry = iso2Lower;
                 setTimeout(() => forEachInstance("handleAutoCountry"));
               } else {
@@ -2367,6 +2430,11 @@ var factoryOutput = (() => {
     }
     //* Initialize the tel input listeners.
     _initTelInputListeners() {
+      this._bindInputListener();
+      this._maybeBindKeydownListener();
+      this._maybeBindPasteListener();
+    }
+    _bindInputListener() {
       const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
       let userOverrideFormatting = false;
       if (/\p{L}/u.test(this.telInput.value)) {
@@ -2397,13 +2465,23 @@ var factoryOutput = (() => {
           const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
           const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
           const isDeleteForwards = e?.inputType === "deleteContentForward";
-          const formattedValue = this._formatNumberAsYouType();
+          const fullNumber = this._getFullNumber();
+          const formattedValue = formatNumberAsYouType(
+            fullNumber,
+            this.telInput.value,
+            intlTelInput.utils,
+            this.selectedCountryData,
+            this.options.separateDialCode
+          );
           const newCaretPos = translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
           this.telInput.value = formattedValue;
           this.telInput.setSelectionRange(newCaretPos, newCaretPos);
         }
       };
       this.telInput.addEventListener("input", this._handleInputEvent);
+    }
+    _maybeBindKeydownListener() {
+      const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.options;
       if (strictMode || separateDialCode) {
         this._handleKeydownEvent = (e) => {
           if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
@@ -2432,12 +2510,17 @@ var factoryOutput = (() => {
         };
         this.telInput.addEventListener("keydown", this._handleKeydownEvent);
       }
-      if (strictMode) {
+    }
+    _maybeBindPasteListener() {
+      if (this.options.strictMode) {
         this._handlePasteEvent = (e) => {
           e.preventDefault();
           const input = this.telInput;
           const selStart = input.selectionStart;
           const selEnd = input.selectionEnd;
+          const before = input.value.slice(0, selStart);
+          const after = input.value.slice(selEnd);
+          const iso2 = this.selectedCountryData.iso2;
           const pasted = e.clipboardData.getData("text");
           const initialCharSelected = selStart === 0 && selEnd > 0;
           const allowLeadingPlus = !input.value.startsWith("+") || initialCharSelected;
@@ -2445,8 +2528,15 @@ var factoryOutput = (() => {
           const hasLeadingPlus = allowedChars.startsWith("+");
           const numerics = allowedChars.replace(/\+/g, "");
           const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
-          let newVal = input.value.slice(0, selStart) + sanitised + input.value.slice(selEnd);
-          const coreNumber = intlTelInput.utils.getCoreNumber(newVal, this.selectedCountryData.iso2);
+          let newVal = before + sanitised + after;
+          let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+          while (coreNumber.length === 0 && newVal.length > 0) {
+            newVal = newVal.slice(0, -1);
+            coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
+          }
+          if (!coreNumber) {
+            return;
+          }
           if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
             if (input.selectionEnd === input.value.length) {
               const trimLength = coreNumber.length - this.maxCoreNumberLength;
@@ -2616,43 +2706,14 @@ var factoryOutput = (() => {
     }
     //* Country search enabled: Filter the countries according to the search query.
     _filterCountries(query) {
-      let noCountriesAddedYet = true;
       this.countryList.innerHTML = "";
-      const normalisedQuery = normaliseString(query);
       let matchedCountries;
       if (query === "") {
         matchedCountries = this.countries;
       } else {
-        const iso2Matches = [];
-        const nameStartWith = [];
-        const nameContains = [];
-        const dialCodeMatches = [];
-        const dialCodeContains = [];
-        const initialsMatches = [];
-        for (const c of this.countries) {
-          if (c.iso2 === normalisedQuery) {
-            iso2Matches.push(c);
-          } else if (c.normalisedName.startsWith(normalisedQuery)) {
-            nameStartWith.push(c);
-          } else if (c.normalisedName.includes(normalisedQuery)) {
-            nameContains.push(c);
-          } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
-            dialCodeMatches.push(c);
-          } else if (c.dialCodePlus.includes(normalisedQuery)) {
-            dialCodeContains.push(c);
-          } else if (c.initials.includes(normalisedQuery)) {
-            initialsMatches.push(c);
-          }
-        }
-        matchedCountries = [
-          ...iso2Matches.sort((a, b) => a.priority - b.priority),
-          ...nameStartWith.sort((a, b) => a.priority - b.priority),
-          ...nameContains.sort((a, b) => a.priority - b.priority),
-          ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
-          ...dialCodeContains.sort((a, b) => a.priority - b.priority),
-          ...initialsMatches.sort((a, b) => a.priority - b.priority)
-        ];
+        matchedCountries = this._getMatchedCountries(query);
       }
+      let noCountriesAddedYet = true;
       for (const c of matchedCountries) {
         const listItem = c.nodeById[this.id];
         if (listItem) {
@@ -2674,6 +2735,38 @@ var factoryOutput = (() => {
       this.countryList.scrollTop = 0;
       this._updateSearchResultsA11yText();
     }
+    _getMatchedCountries(query) {
+      const normalisedQuery = normaliseString(query);
+      const iso2Matches = [];
+      const nameStartWith = [];
+      const nameContains = [];
+      const dialCodeMatches = [];
+      const dialCodeContains = [];
+      const initialsMatches = [];
+      for (const c of this.countries) {
+        if (c.iso2 === normalisedQuery) {
+          iso2Matches.push(c);
+        } else if (c.normalisedName.startsWith(normalisedQuery)) {
+          nameStartWith.push(c);
+        } else if (c.normalisedName.includes(normalisedQuery)) {
+          nameContains.push(c);
+        } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
+          dialCodeMatches.push(c);
+        } else if (c.dialCodePlus.includes(normalisedQuery)) {
+          dialCodeContains.push(c);
+        } else if (c.initials.includes(normalisedQuery)) {
+          initialsMatches.push(c);
+        }
+      }
+      return [
+        ...iso2Matches.sort((a, b) => a.priority - b.priority),
+        ...nameStartWith.sort((a, b) => a.priority - b.priority),
+        ...nameContains.sort((a, b) => a.priority - b.priority),
+        ...dialCodeMatches.sort((a, b) => a.priority - b.priority),
+        ...dialCodeContains.sort((a, b) => a.priority - b.priority),
+        ...initialsMatches.sort((a, b) => a.priority - b.priority)
+      ];
+    }
     //* Update search results text (for a11y).
     _updateSearchResultsA11yText() {
       const { i18n } = this.options;
@@ -2804,24 +2897,12 @@ var factoryOutput = (() => {
         this.highlightedItem.focus();
       }
     }
-    //* Find the country data for the given iso2 code
-    //* the allowFail option is only used during init() for the initialCountry option, and for the iso2 returned from geoIpLookup - in these 2 cases we don't want to error out
-    _getCountryData(iso2, allowFail) {
-      const country = this.countryByIso2.get(iso2);
-      if (country) {
-        return country;
-      }
-      if (allowFail) {
-        return null;
-      }
-      throw new Error(`No country data for '${iso2}'`);
-    }
     //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
     //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
     _setCountry(iso2) {
       const { separateDialCode, showFlags, i18n } = this.options;
       const prevIso2 = this.selectedCountryData.iso2 || "";
-      this.selectedCountryData = iso2 ? this._getCountryData(iso2, false) || {} : {};
+      this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
       if (this.selectedCountryData.iso2) {
         this.defaultCountry = this.selectedCountryData.iso2;
       }
@@ -2940,11 +3021,11 @@ var factoryOutput = (() => {
     }
     //* Called when the user selects a list item from the dropdown.
     _selectListItem(listItem) {
-      const countryChanged = this._setCountry(
-        listItem.getAttribute("data-country-code")
-      );
+      const iso2 = listItem.getAttribute("data-country-code");
+      const countryChanged = this._setCountry(iso2);
       this._closeDropdown();
-      this._updateDialCode(listItem.getAttribute("data-dial-code"));
+      const dialCode = listItem.getAttribute("data-dial-code");
+      this._updateDialCode(dialCode);
       if (this.options.formatOnDisplay) {
         this._updateValFromNumber(this.telInput.value);
       }
@@ -3067,32 +3148,19 @@ var factoryOutput = (() => {
     }
     //* 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.separateDialCode) {
-        let dialCode = this._getDialCode(number);
-        if (dialCode) {
-          dialCode = `+${this.selectedCountryData.dialCode}`;
-          const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
-          number = number.substring(start);
-        }
-      }
+      const dialCode = this._getDialCode(fullNumber);
+      const number = beforeSetNumber(
+        fullNumber,
+        dialCode,
+        this.options.separateDialCode,
+        this.selectedCountryData
+      );
       return this._cap(number);
     }
     //* Trigger the 'countrychange' event.
     _triggerCountryChange() {
       this._trigger("countrychange");
     }
-    //* Format the number as the user types.
-    _formatNumberAsYouType() {
-      const val = this._getFullNumber();
-      const result = intlTelInput.utils ? intlTelInput.utils.formatNumberAsYouType(val, this.selectedCountryData.iso2) : val;
-      const { dialCode } = this.selectedCountryData;
-      if (this.options.separateDialCode && this.telInput.value.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
-        const afterDialCode = result.split(`+${dialCode}`)[1] || "";
-        return afterDialCode.trim();
-      }
-      return result;
-    }
     //**************************
     //*  SECRET PUBLIC METHODS
     //**************************
@@ -3244,6 +3312,9 @@ var factoryOutput = (() => {
     //* Update the selected country, and update the input val accordingly.
     setCountry(iso2) {
       const iso2Lower = iso2?.toLowerCase();
+      if (!isIso2(iso2Lower)) {
+        throw new Error(`Invalid country code: '${iso2Lower}'`);
+      }
       const currentCountry = this.selectedCountryData.iso2;
       const isCountryChange = iso2 && iso2Lower !== currentCountry || !iso2 && currentCountry;
       if (isCountryChange) {
@@ -3331,7 +3402,7 @@ var factoryOutput = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "25.10.7"
+      version: "25.10.8"
     }
   );
   var intl_tel_input_default = intlTelInput;