intl-tel-input 25.10.6 → 25.10.8

package/react/build/IntlTelInput.js

@@ -1606,11 +1606,7 @@ var interface_default = interfaceTranslations;
 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;
 };
@@ -1676,6 +1672,181 @@ var defaults = {
   //* 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",
@@ -1695,8 +1866,6 @@ var regionlessNanpNumbers = [
   "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") {
@@ -1705,34 +1874,14 @@ var isRegionlessNanp = (number) => {
   }
   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));
@@ -1752,23 +1901,7 @@ var Iti = class _Iti {
     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";
@@ -1781,7 +1914,8 @@ var Iti = class _Iti {
         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;
@@ -1791,6 +1925,12 @@ var Iti = class _Iti {
       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();
@@ -1803,139 +1943,37 @@ var Iti = class _Iti {
   //********************
   //* 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,
@@ -1946,6 +1984,14 @@ var Iti = class _Iti {
     });
     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",
@@ -2006,119 +2052,138 @@ var Iti = class _Iti {
         );
       }
       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);
@@ -2192,14 +2257,13 @@ var Iti = class _Iti {
       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("");
         }
       }
     }
@@ -2302,8 +2366,7 @@ var Iti = class _Iti {
         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 {
@@ -2326,6 +2389,11 @@ var Iti = class _Iti {
   }
   //* 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)) {
@@ -2356,13 +2424,23 @@ var Iti = class _Iti {
         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) {
@@ -2392,6 +2470,48 @@ var Iti = class _Iti {
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
   }
+  _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;
+        const allowedChars = pasted.replace(/[^0-9+]/g, "");
+        const hasLeadingPlus = allowedChars.startsWith("+");
+        const numerics = allowedChars.replace(/\+/g, "");
+        const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+        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;
+            newVal = newVal.slice(0, newVal.length - trimLength);
+          } else {
+            return;
+          }
+        }
+        input.value = newVal;
+        const caretPos = selStart + sanitised.length;
+        input.setSelectionRange(caretPos, caretPos);
+        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      };
+      this.telInput.addEventListener("paste", this._handlePasteEvent);
+    }
+  }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
     const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
@@ -2545,43 +2665,14 @@ var Iti = class _Iti {
   }
   //* 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) {
@@ -2603,6 +2694,38 @@ var Iti = class _Iti {
     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;
@@ -2733,24 +2856,12 @@ var Iti = class _Iti {
       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;
     }
@@ -2869,11 +2980,11 @@ var Iti = class _Iti {
   }
   //* 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);
     }
@@ -2996,32 +3107,19 @@ var Iti = class _Iti {
   }
   //* 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
   //**************************
@@ -3079,6 +3177,9 @@ var Iti = class _Iti {
     if (this._handleKeydownEvent) {
       this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
     }
+    if (this._handlePasteEvent) {
+      this.telInput.removeEventListener("paste", this._handlePasteEvent);
+    }
     this.telInput.removeAttribute("data-intl-tel-input-id");
     if (separateDialCode) {
       if (this.isRTL) {
@@ -3170,6 +3271,9 @@ var Iti = class _Iti {
   //* 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) {
@@ -3257,7 +3361,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.10.6"
+    version: "25.10.8"
   }
 );
 var intl_tel_input_default = intlTelInput;