intl-tel-input 25.10.11 → 25.11.0

package/build/js/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v25.10.11
+ * International Telephone Input v25.11.0
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -2091,6 +2091,7 @@ var factoryOutput = (() => {
   var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
 
   // src/js/modules/utils/dom.ts
+  var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
   var createEl = (tagName, attrs, container) => {
     const el = document.createElement(tagName);
     if (attrs) {
@@ -2102,258 +2103,23 @@ var factoryOutput = (() => {
     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);
-      }
-      for (let k = 1; k < c.dialCode.length; k++) {
-        const partialDialCode = c.dialCode.substring(0, k);
-        _addToDialCodeMap(c.iso2, partialDialCode);
-      }
-      _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",
-    "833",
-    "844",
-    "855",
-    "866",
-    "877",
-    "880",
-    "881",
-    "882",
-    "883",
-    "884",
-    "885",
-    "886",
-    "887",
-    "888",
-    "889"
-  ];
-  var isRegionlessNanp = (number) => {
-    const numeric = getNumeric(number);
-    if (numeric.charAt(0) === "1") {
-      const areaCode = numeric.substring(1, 4);
-      return regionlessNanpNumbers.includes(areaCode);
-    }
-    return false;
-  };
-
-  // 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));
-  };
-  var Iti = class _Iti {
-    /**
-     * Build a space-delimited class string from an object map of className -> truthy/falsey.
-     * Only keys with truthy values are included.
-     */
-    static _buildClassNames(flags) {
-      return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
-    }
-    constructor(input, customOptions = {}) {
-      this.id = id++;
-      this.telInput = input;
+  // src/js/modules/core/ui.ts
+  var UI = class {
+    constructor(input, options, id2) {
       this.highlightedItem = null;
-      this.options = Object.assign({}, defaults, customOptions);
+      input.dataset.intlTelInputId = id2.toString();
+      this.telInput = input;
+      this.options = options;
+      this.id = id2;
       this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
-    }
-    _detectEnvironmentAndLayout() {
-      this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
       this.isRTL = !!this.telInput.closest("[dir=rtl]");
-      this.telInput.dir = "ltr";
-      const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
-      this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
       if (this.options.separateDialCode) {
-        if (this.isRTL) {
-          this.originalPaddingRight = this.telInput.style.paddingRight;
-        } else {
-          this.originalPaddingLeft = this.telInput.style.paddingLeft;
-        }
+        this.originalPaddingLeft = this.telInput.style.paddingLeft;
       }
     }
-    _createInitPromises() {
-      const autoCountryPromise = new Promise((resolve, reject) => {
-        this.resolveAutoCountryPromise = resolve;
-        this.rejectAutoCountryPromise = reject;
-      });
-      const utilsScriptPromise = new Promise((resolve, reject) => {
-        this.resolveUtilsScriptPromise = resolve;
-        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();
-      this._setInitialState();
-      this._initListeners();
-      this._initRequests();
-    }
-    //********************
-    //*  PRIVATE METHODS
-    //********************
-    //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
-    _processCountryData() {
-      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]));
-      cacheSearchTokens(this.countries);
-    }
     //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
-    _generateMarkup() {
+    generateMarkup(countries) {
+      this.countries = countries;
       this._prepareTelInput();
       const wrapper = this._createWrapperAndInsert();
       this._maybeBuildCountryContainer(wrapper);
@@ -2363,7 +2129,7 @@ var factoryOutput = (() => {
     }
     _prepareTelInput() {
       this.telInput.classList.add("iti__tel-input");
-      if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
+      if (!this.telInput.hasAttribute("autocomplete") && !this.telInput.form?.hasAttribute("autocomplete")) {
         this.telInput.setAttribute("autocomplete", "off");
       }
     }
@@ -2374,23 +2140,22 @@ var factoryOutput = (() => {
         containerClass,
         useFullscreenPopup
       } = this.options;
-      const parentClasses = _Iti._buildClassNames({
-        "iti": true,
+      const parentClasses = buildClassNames({
+        iti: true,
         "iti--allow-dropdown": allowDropdown,
         "iti--show-flags": showFlags,
         "iti--inline-dropdown": !useFullscreenPopup,
         [containerClass]: Boolean(containerClass)
       });
       const wrapper = createEl("div", { class: parentClasses });
-      this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
+      if (this.isRTL) {
+        wrapper.setAttribute("dir", "ltr");
+      }
+      this.telInput.before(wrapper);
       return wrapper;
     }
     _maybeBuildCountryContainer(wrapper) {
-      const {
-        allowDropdown,
-        separateDialCode,
-        showFlags
-      } = this.options;
+      const { allowDropdown, separateDialCode, showFlags } = this.options;
       if (allowDropdown || showFlags || separateDialCode) {
         this.countryContainer = createEl(
           "div",
@@ -2398,11 +2163,6 @@ var factoryOutput = (() => {
           { class: "iti__country-container iti__v-hide" },
           wrapper
         );
-        if (this.showSelectedCountryOnLeft) {
-          this.countryContainer.style.left = "0px";
-        } else {
-          this.countryContainer.style.right = "0px";
-        }
         if (allowDropdown) {
           this.selectedCountry = createEl(
             "button",
@@ -2446,7 +2206,7 @@ var factoryOutput = (() => {
         if (separateDialCode) {
           this.selectedDialCode = createEl(
             "div",
-            { class: "iti__selected-dial-code", dir: "ltr" },
+            { class: "iti__selected-dial-code" },
             this.selectedCountry
           );
         }
@@ -2471,6 +2231,9 @@ var factoryOutput = (() => {
         role: "dialog",
         "aria-modal": "true"
       });
+      if (this.isRTL) {
+        this.dropdownContent.setAttribute("dir", "rtl");
+      }
       if (countrySearch) {
         this._buildSearchUI();
       }
@@ -2485,12 +2248,12 @@ var factoryOutput = (() => {
         this.dropdownContent
       );
       this._appendListItems();
-      if (countrySearch) {
-        this._updateSearchResultsA11yText();
+      if (this.options.countrySearch) {
+        this.updateSearchResultsA11yText();
       }
       if (dropdownContainer) {
-        const dropdownClasses = _Iti._buildClassNames({
-          "iti": true,
+        const dropdownClasses = buildClassNames({
+          iti: true,
           "iti--container": true,
           "iti--fullscreen-popup": useFullscreenPopup,
           "iti--inline-dropdown": !useFullscreenPopup,
@@ -2536,7 +2299,7 @@ var factoryOutput = (() => {
           "aria-label": i18n.searchPlaceholder,
           "aria-controls": `iti-${this.id}__country-listbox`,
           "aria-autocomplete": "list",
-          "autocomplete": "off"
+          autocomplete: "off"
         },
         searchWrapper
       );
@@ -2573,80 +2336,478 @@ var factoryOutput = (() => {
         },
         this.dropdownContent
       );
-      this.searchNoResults.textContent = i18n.zeroSearchResults;
+      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);
+        if (names.phone) {
+          const existingInput = this.telInput.form?.querySelector(
+            `input[name="${names.phone}"]`
+          );
+          if (existingInput) {
+            this.hiddenInput = existingInput;
+          } else {
+            this.hiddenInput = createEl("input", {
+              type: "hidden",
+              name: names.phone
+            });
+            wrapper.appendChild(this.hiddenInput);
+          }
+        }
+        if (names.country) {
+          const existingInput = this.telInput.form?.querySelector(
+            `input[name="${names.country}"]`
+          );
+          if (existingInput) {
+            this.hiddenInputCountry = existingInput;
+          } else {
+            this.hiddenInputCountry = createEl("input", {
+              type: "hidden",
+              name: names.country
+            });
+            wrapper.appendChild(this.hiddenInputCountry);
+          }
+        }
+      }
+    }
+    //* For each country: add a country list item <li> to the countryList <ul> container.
+    _appendListItems() {
+      const frag = document.createDocumentFragment();
+      for (let i = 0; i < this.countries.length; i++) {
+        const c = this.countries[i];
+        const liClass = buildClassNames({
+          iti__country: true,
+          iti__highlight: i === 0
+        });
+        const listItem = createEl("li", {
+          id: `iti-${this.id}__item-${c.iso2}`,
+          class: liClass,
+          tabindex: "-1",
+          role: "option",
+          "aria-selected": "false"
+        });
+        listItem.dataset.dialCode = c.dialCode;
+        listItem.dataset.countryCode = c.iso2;
+        c.nodeById[this.id] = listItem;
+        if (this.options.showFlags) {
+          createEl("div", { class: `iti__flag iti__${c.iso2}` }, listItem);
+        }
+        const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
+        nameEl.textContent = c.name;
+        const dialEl = createEl("span", { class: "iti__dial-code" }, listItem);
+        if (this.isRTL) {
+          dialEl.setAttribute("dir", "ltr");
+        }
+        dialEl.textContent = `+${c.dialCode}`;
+        frag.appendChild(listItem);
+      }
+      this.countryList.appendChild(frag);
+    }
+    //* Update the input padding to make space for the selected country/dial code.
+    updateInputPadding() {
+      if (this.selectedCountry) {
+        const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
+        const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
+        const inputPadding = selectedCountryWidth + 6;
+        this.telInput.style.paddingLeft = `${inputPadding}px`;
+      }
+    }
+    //* When input is in a hidden container during init, we cannot calculate the selected country width.
+    //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
+    //* To get the right styling to apply, all we need is a shallow clone of the container,
+    //* and then to inject a deep clone of the selectedCountry element.
+    _getHiddenSelectedCountryWidth() {
+      if (this.telInput.parentNode) {
+        let body;
+        try {
+          body = window.top.document.body;
+        } catch (e) {
+          body = document.body;
+        }
+        const containerClone = this.telInput.parentNode.cloneNode(
+          false
+        );
+        containerClone.style.visibility = "hidden";
+        body.appendChild(containerClone);
+        const countryContainerClone = this.countryContainer.cloneNode();
+        containerClone.appendChild(countryContainerClone);
+        const selectedCountryClone = this.selectedCountry.cloneNode(
+          true
+        );
+        countryContainerClone.appendChild(selectedCountryClone);
+        const width = selectedCountryClone.offsetWidth;
+        body.removeChild(containerClone);
+        return width;
+      }
+      return 0;
+    }
+    //* Update search results text (for a11y).
+    updateSearchResultsA11yText() {
+      const { i18n } = this.options;
+      const count = this.countryList.childElementCount;
+      let searchText;
+      if (count === 0) {
+        searchText = i18n.zeroSearchResults;
+      } else {
+        if (i18n.searchResultsText) {
+          searchText = i18n.searchResultsText(count);
+        } else if (count === 1) {
+          searchText = i18n.oneSearchResult;
+        } else {
+          searchText = i18n.multipleSearchResults.replace(
+            "${count}",
+            count.toString()
+          );
+        }
+      }
+      this.searchResultsA11yText.textContent = searchText;
+    }
+    //* Check if an element is visible within it's container, else scroll until it is.
+    scrollTo(element) {
+      const container = this.countryList;
+      const scrollTop = document.documentElement.scrollTop;
+      const containerHeight = container.offsetHeight;
+      const containerTop = container.getBoundingClientRect().top + scrollTop;
+      const containerBottom = containerTop + containerHeight;
+      const elementHeight = element.offsetHeight;
+      const elementTop = element.getBoundingClientRect().top + scrollTop;
+      const elementBottom = elementTop + elementHeight;
+      const newScrollTop = elementTop - containerTop + container.scrollTop;
+      if (elementTop < containerTop) {
+        container.scrollTop = newScrollTop;
+      } else if (elementBottom > containerBottom) {
+        const heightDifference = containerHeight - elementHeight;
+        container.scrollTop = newScrollTop - heightDifference;
+      }
+    }
+    //* Remove highlighting from other list items and highlight the given item.
+    highlightListItem(listItem, shouldFocus) {
+      const prevItem = this.highlightedItem;
+      if (prevItem) {
+        prevItem.classList.remove("iti__highlight");
+        prevItem.setAttribute("aria-selected", "false");
+      }
+      this.highlightedItem = listItem;
+      if (this.highlightedItem) {
+        this.highlightedItem.classList.add("iti__highlight");
+        this.highlightedItem.setAttribute("aria-selected", "true");
+        if (this.options.countrySearch) {
+          const activeDescendant = this.highlightedItem.getAttribute("id") || "";
+          this.searchInput.setAttribute(
+            "aria-activedescendant",
+            activeDescendant
+          );
+        }
+      }
+      if (shouldFocus) {
+        this.highlightedItem.focus();
+      }
+    }
+    //* Country search: Filter the country list to the given array of countries.
+    filterCountries(matchedCountries) {
+      this.countryList.innerHTML = "";
+      let noCountriesAddedYet = true;
+      for (const c of matchedCountries) {
+        const listItem = c.nodeById[this.id];
+        if (listItem) {
+          this.countryList.appendChild(listItem);
+          if (noCountriesAddedYet) {
+            this.highlightListItem(listItem, false);
+            noCountriesAddedYet = false;
+          }
+        }
+      }
+      if (noCountriesAddedYet) {
+        this.highlightListItem(null, false);
+        if (this.searchNoResults) {
+          this.searchNoResults.classList.remove("iti__hide");
+        }
+      } else if (this.searchNoResults) {
+        this.searchNoResults.classList.add("iti__hide");
+      }
+      this.countryList.scrollTop = 0;
+      this.updateSearchResultsA11yText();
+    }
+    destroy() {
+      this.telInput.iti = void 0;
+      delete this.telInput.dataset.intlTelInputId;
+      if (this.options.separateDialCode) {
+        this.telInput.style.paddingLeft = this.originalPaddingLeft;
+      }
+      const wrapper = this.telInput.parentNode;
+      wrapper.before(this.telInput);
+      wrapper.remove();
+      this.telInput = null;
+      this.countryContainer = null;
+      this.selectedCountry = null;
+      this.selectedCountryInner = null;
+      this.selectedDialCode = null;
+      this.dropdownArrow = null;
+      this.dropdownContent = null;
+      this.searchInput = null;
+      this.searchIcon = null;
+      this.searchClearButton = null;
+      this.searchNoResults = null;
+      this.searchResultsA11yText = null;
+      this.countryList = null;
+      this.dropdown = null;
+      this.hiddenInput = null;
+      this.hiddenInputCountry = null;
+      this.highlightedItem = null;
+      for (const c of this.countries) {
+        delete c.nodeById[this.id];
+      }
+      this.countries = null;
+    }
+  };
+
+  // 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);
+      }
+      for (let k = 1; k < c.dialCode.length; k++) {
+        const partialDialCode = c.dialCode.substring(0, k);
+        _addToDialCodeMap(c.iso2, partialDialCode);
+      }
+      _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",
+    "833",
+    "844",
+    "855",
+    "866",
+    "877",
+    "880",
+    "881",
+    "882",
+    "883",
+    "884",
+    "885",
+    "886",
+    "887",
+    "888",
+    "889"
+  ];
+  var isRegionlessNanp = (number) => {
+    const numeric = getNumeric(number);
+    if (numeric.charAt(0) === "1") {
+      const areaCode = numeric.substring(1, 4);
+      return regionlessNanpNumbers.includes(areaCode);
+    }
+    return false;
+  };
+
+  // src/js/intl-tel-input.ts
+  for (const c of data_default) {
+    c.name = countries_default[c.iso2];
+  }
+  var id = 0;
+  var iso2Set = new Set(data_default.map((c) => c.iso2));
+  var isIso2 = (val) => iso2Set.has(val);
+  var Iti = class _Iti {
+    constructor(input, customOptions = {}) {
+      this.id = id++;
+      this.options = { ...defaults, ...customOptions };
+      applyOptionSideEffects(this.options);
+      this.ui = new UI(input, this.options, this.id);
+      this.isAndroid = _Iti._getIsAndroid();
+      this.promise = this._createInitPromises();
+      this.countries = processAllCountries(this.options);
+      const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(
+        this.countries,
+        this.options
+      );
+      this.dialCodes = dialCodes;
+      this.dialCodeMaxLen = dialCodeMaxLen;
+      this.dialCodeToIso2Map = dialCodeToIso2Map;
+      this.countryByIso2 = new Map(this.countries.map((c) => [c.iso2, c]));
+      this._init();
     }
-    _maybeUpdateInputPaddingAndReveal() {
-      if (this.countryContainer) {
-        this._updateInputPadding();
-        this.countryContainer.classList.remove("iti__v-hide");
-      }
+    static _getIsAndroid() {
+      return typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     }
-    _maybeBuildHiddenInputs(wrapper) {
-      const { hiddenInput } = this.options;
-      if (hiddenInput) {
-        const telInputName = this.telInput.getAttribute("name") || "";
-        const names = hiddenInput(telInputName);
-        if (names.phone) {
-          const existingInput = this.telInput.form?.querySelector(`input[name="${names.phone}"]`);
-          if (existingInput) {
-            this.hiddenInput = existingInput;
-          } else {
-            this.hiddenInput = createEl("input", {
-              type: "hidden",
-              name: names.phone
-            });
-            wrapper.appendChild(this.hiddenInput);
-          }
-        }
-        if (names.country) {
-          const existingInput = this.telInput.form?.querySelector(`input[name="${names.country}"]`);
-          if (existingInput) {
-            this.hiddenInputCountry = existingInput;
-          } else {
-            this.hiddenInputCountry = createEl("input", {
-              type: "hidden",
-              name: names.country
-            });
-            wrapper.appendChild(this.hiddenInputCountry);
-          }
-        }
-      }
+    _createInitPromises() {
+      const autoCountryPromise = new Promise((resolve, reject) => {
+        this.resolveAutoCountryPromise = resolve;
+        this.rejectAutoCountryPromise = reject;
+      });
+      const utilsScriptPromise = new Promise((resolve, reject) => {
+        this.resolveUtilsScriptPromise = resolve;
+        this.rejectUtilsScriptPromise = reject;
+      });
+      return Promise.all([autoCountryPromise, utilsScriptPromise]);
     }
-    //* For each country: add a country list item <li> to the countryList <ul> container.
-    _appendListItems() {
-      for (let i = 0; i < this.countries.length; i++) {
-        const c = this.countries[i];
-        const extraClass = i === 0 ? "iti__highlight" : "";
-        const listItem = createEl(
-          "li",
-          {
-            id: `iti-${this.id}__item-${c.iso2}`,
-            class: `iti__country ${extraClass}`,
-            tabindex: "-1",
-            role: "option",
-            "data-dial-code": c.dialCode,
-            "data-country-code": c.iso2,
-            "aria-selected": "false"
-          },
-          this.countryList
-        );
-        c.nodeById[this.id] = listItem;
-        let content = "";
-        if (this.options.showFlags) {
-          content += `<div class='iti__flag iti__${c.iso2}'></div>`;
-        }
-        content += `<span class='iti__country-name'>${c.name}</span>`;
-        content += `<span class='iti__dial-code' dir='ltr'>+${c.dialCode}</span>`;
-        listItem.insertAdjacentHTML("beforeend", content);
-      }
+    //* Can't be private as it's called from intlTelInput convenience wrapper.
+    _init() {
+      this.selectedCountryData = {};
+      this.abortController = new AbortController();
+      this._processCountryData();
+      this.ui.generateMarkup(this.countries);
+      this._setInitialState();
+      this._initListeners();
+      this._initRequests();
+    }
+    //********************
+    //*  PRIVATE METHODS
+    //********************
+    //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
+    _processCountryData() {
+      translateCountryNames(this.countries, this.options);
+      sortCountries(this.countries, this.options);
+      cacheSearchTokens(this.countries);
     }
     //* 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
     _setInitialState(overrideAutoCountry = false) {
-      const attributeValue = this.telInput.getAttribute("value");
-      const inputValue = this.telInput.value;
-      const useAttribute = attributeValue && attributeValue.charAt(0) === "+" && (!inputValue || inputValue.charAt(0) !== "+");
+      const attributeValue = this.ui.telInput.getAttribute("value");
+      const inputValue = this.ui.telInput.value;
+      const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
       const val = useAttribute ? attributeValue : inputValue;
       const dialCode = this._getDialCode(val);
       const isRegionlessNanpNumber = isRegionlessNanp(val);
@@ -2676,47 +2837,49 @@ var factoryOutput = (() => {
       if (this.options.allowDropdown) {
         this._initDropdownListeners();
       }
-      if ((this.hiddenInput || this.hiddenInputCountry) && this.telInput.form) {
+      if ((this.ui.hiddenInput || this.ui.hiddenInputCountry) && this.ui.telInput.form) {
         this._initHiddenInputListener();
       }
     }
     //* Update hidden input on form submit.
     _initHiddenInputListener() {
-      this._handleHiddenInputSubmit = () => {
-        if (this.hiddenInput) {
-          this.hiddenInput.value = this.getNumber();
+      const handleHiddenInputSubmit = () => {
+        if (this.ui.hiddenInput) {
+          this.ui.hiddenInput.value = this.getNumber();
         }
-        if (this.hiddenInputCountry) {
-          this.hiddenInputCountry.value = this.getSelectedCountryData().iso2 || "";
+        if (this.ui.hiddenInputCountry) {
+          this.ui.hiddenInputCountry.value = this.selectedCountryData.iso2 || "";
         }
       };
-      this.telInput.form?.addEventListener(
-        "submit",
-        this._handleHiddenInputSubmit
-      );
+      this.ui.telInput.form?.addEventListener("submit", handleHiddenInputSubmit, {
+        signal: this.abortController.signal
+      });
     }
     //* initialise the dropdown listeners.
     _initDropdownListeners() {
-      this._handleLabelClick = (e) => {
-        if (this.dropdownContent.classList.contains("iti__hide")) {
-          this.telInput.focus();
+      const signal = this.abortController.signal;
+      const handleLabelClick = (e) => {
+        if (this.ui.dropdownContent.classList.contains("iti__hide")) {
+          this.ui.telInput.focus();
         } else {
           e.preventDefault();
         }
       };
-      const label = this.telInput.closest("label");
+      const label = this.ui.telInput.closest("label");
       if (label) {
-        label.addEventListener("click", this._handleLabelClick);
+        label.addEventListener("click", handleLabelClick, { signal });
       }
-      this._handleClickSelectedCountry = () => {
-        const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
-        if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
+      const handleClickSelectedCountry = () => {
+        const dropdownClosed = this.ui.dropdownContent.classList.contains("iti__hide");
+        if (dropdownClosed && !this.ui.telInput.disabled && !this.ui.telInput.readOnly) {
           this._openDropdown();
         }
       };
-      this.selectedCountry.addEventListener("click", this._handleClickSelectedCountry);
-      this._handleCountryContainerKeydown = (e) => {
-        const isDropdownHidden = this.dropdownContent.classList.contains("iti__hide");
+      this.ui.selectedCountry.addEventListener("click", handleClickSelectedCountry, {
+        signal
+      });
+      const handleCountryContainerKeydown = (e) => {
+        const isDropdownHidden = this.ui.dropdownContent.classList.contains("iti__hide");
         if (isDropdownHidden && ["ArrowUp", "ArrowDown", " ", "Enter"].includes(e.key)) {
           e.preventDefault();
           e.stopPropagation();
@@ -2726,26 +2889,29 @@ var factoryOutput = (() => {
           this._closeDropdown();
         }
       };
-      this.countryContainer.addEventListener(
+      this.ui.countryContainer.addEventListener(
         "keydown",
-        this._handleCountryContainerKeydown
+        handleCountryContainerKeydown,
+        { signal }
       );
     }
     //* Init many requests: utils script / geo ip lookup.
     _initRequests() {
-      let { loadUtils, initialCountry, geoIpLookup } = this.options;
+      const { loadUtils, initialCountry, geoIpLookup } = this.options;
       if (loadUtils && !intlTelInput.utils) {
-        this._doAttachUtils = () => {
+        const doAttachUtils = () => {
           intlTelInput.attachUtils(loadUtils)?.catch(() => {
           });
         };
         if (intlTelInput.documentReady()) {
-          this._doAttachUtils();
+          doAttachUtils();
         } else {
-          this._handlePageLoad = () => {
-            this._doAttachUtils();
+          const handlePageLoad = () => {
+            doAttachUtils();
           };
-          window.addEventListener("load", this._handlePageLoad);
+          window.addEventListener("load", handlePageLoad, {
+            signal: this.abortController.signal
+          });
         }
       } else {
         this.resolveUtilsScriptPromise();
@@ -2785,8 +2951,8 @@ var factoryOutput = (() => {
     }
     _openDropdownWithPlus() {
       this._openDropdown();
-      this.searchInput.value = "+";
-      this._filterCountries("");
+      this.ui.searchInput.value = "+";
+      this._filterCountriesByQuery("");
     }
     //* Initialize the tel input listeners.
     _initTelInputListeners() {
@@ -2795,55 +2961,77 @@ var factoryOutput = (() => {
       this._maybeBindPasteListener();
     }
     _bindInputListener() {
-      const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
+      const {
+        strictMode,
+        formatAsYouType,
+        separateDialCode,
+        allowDropdown,
+        countrySearch
+      } = this.options;
       let userOverrideFormatting = false;
-      if (/\p{L}/u.test(this.telInput.value)) {
+      if (/\p{L}/u.test(this.ui.telInput.value)) {
         userOverrideFormatting = true;
       }
-      this._handleInputEvent = (e) => {
+      const handleInputEvent = (e) => {
         if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
-          const currentCaretPos = this.telInput.selectionStart || 0;
-          const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos - 1);
-          const valueAfterCaret = this.telInput.value.substring(currentCaretPos);
-          this.telInput.value = valueBeforeCaret + valueAfterCaret;
+          const currentCaretPos = this.ui.telInput.selectionStart || 0;
+          const valueBeforeCaret = this.ui.telInput.value.substring(
+            0,
+            currentCaretPos - 1
+          );
+          const valueAfterCaret = this.ui.telInput.value.substring(currentCaretPos);
+          this.ui.telInput.value = valueBeforeCaret + valueAfterCaret;
           this._openDropdownWithPlus();
           return;
         }
-        if (this._updateCountryFromNumber(this.telInput.value)) {
+        if (this._updateCountryFromNumber(this.ui.telInput.value)) {
           this._triggerCountryChange();
         }
         const isFormattingChar = e?.data && /[^+0-9]/.test(e.data);
-        const isPaste = e?.inputType === "insertFromPaste" && this.telInput.value;
+        const isPaste = e?.inputType === "insertFromPaste" && this.ui.telInput.value;
         if (isFormattingChar || isPaste && !strictMode) {
           userOverrideFormatting = true;
-        } else if (!/[^+0-9]/.test(this.telInput.value)) {
+        } else if (!/[^+0-9]/.test(this.ui.telInput.value)) {
           userOverrideFormatting = false;
         }
         const isSetNumber = e?.detail && e.detail["isSetNumber"];
         if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
-          const currentCaretPos = this.telInput.selectionStart || 0;
-          const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
-          const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
+          const currentCaretPos = this.ui.telInput.selectionStart || 0;
+          const valueBeforeCaret = this.ui.telInput.value.substring(
+            0,
+            currentCaretPos
+          );
+          const relevantCharsBeforeCaret = valueBeforeCaret.replace(
+            /[^+0-9]/g,
+            ""
+          ).length;
           const isDeleteForwards = e?.inputType === "deleteContentForward";
           const fullNumber = this._getFullNumber();
           const formattedValue = formatNumberAsYouType(
             fullNumber,
-            this.telInput.value,
+            this.ui.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);
+          const newCaretPos = translateCursorPosition(
+            relevantCharsBeforeCaret,
+            formattedValue,
+            currentCaretPos,
+            isDeleteForwards
+          );
+          this.ui.telInput.value = formattedValue;
+          this.ui.telInput.setSelectionRange(newCaretPos, newCaretPos);
         }
       };
-      this.telInput.addEventListener("input", this._handleInputEvent);
+      this.ui.telInput.addEventListener("input", handleInputEvent, {
+        signal: this.abortController.signal
+      });
     }
     _maybeBindKeydownListener() {
       const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.options;
       if (strictMode || separateDialCode) {
-        this._handleKeydownEvent = (e) => {
+        const handleKeydownEvent = (e) => {
           if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
             if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
               e.preventDefault();
@@ -2851,14 +3039,17 @@ var factoryOutput = (() => {
               return;
             }
             if (strictMode) {
-              const value = this.telInput.value;
-              const alreadyHasPlus = value.charAt(0) === "+";
-              const isInitialPlus = !alreadyHasPlus && this.telInput.selectionStart === 0 && e.key === "+";
+              const value = this.ui.telInput.value;
+              const alreadyHasPlus = value.startsWith("+");
+              const isInitialPlus = !alreadyHasPlus && this.ui.telInput.selectionStart === 0 && e.key === "+";
               const isNumeric = /^[0-9]$/.test(e.key);
               const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-              const newValue = value.slice(0, this.telInput.selectionStart) + e.key + value.slice(this.telInput.selectionEnd);
+              const newValue = value.slice(0, this.ui.telInput.selectionStart) + e.key + value.slice(this.ui.telInput.selectionEnd);
               const newFullNumber = this._getFullNumber(newValue);
-              const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
+              const coreNumber = intlTelInput.utils.getCoreNumber(
+                newFullNumber,
+                this.selectedCountryData.iso2
+              );
               const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
               const newCountry = this._getNewCountryFromNumber(newFullNumber);
               const isChangingDialCode = newCountry !== null;
@@ -2868,14 +3059,16 @@ var factoryOutput = (() => {
             }
           }
         };
-        this.telInput.addEventListener("keydown", this._handleKeydownEvent);
+        this.ui.telInput.addEventListener("keydown", handleKeydownEvent, {
+          signal: this.abortController.signal
+        });
       }
     }
     _maybeBindPasteListener() {
       if (this.options.strictMode) {
-        this._handlePasteEvent = (e) => {
+        const handlePasteEvent = (e) => {
           e.preventDefault();
-          const input = this.telInput;
+          const input = this.ui.telInput;
           const selStart = input.selectionStart;
           const selEnd = input.selectionEnd;
           const before = input.value.slice(0, selStart);
@@ -2910,82 +3103,95 @@ var factoryOutput = (() => {
           input.setSelectionRange(caretPos, caretPos);
           input.dispatchEvent(new InputEvent("input", { bubbles: true }));
         };
-        this.telInput.addEventListener("paste", this._handlePasteEvent);
+        this.ui.telInput.addEventListener("paste", handlePasteEvent, {
+          signal: this.abortController.signal
+        });
       }
     }
     //* Adhere to the input's maxlength attr.
     _cap(number) {
-      const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
+      const max = Number(this.ui.telInput.getAttribute("maxlength"));
       return max && number.length > max ? number.substring(0, max) : number;
     }
-    //* Trigger a custom event on the input.
+    //* Trigger a custom event on the input (typed via ItiEventMap).
     _trigger(name, detailProps = {}) {
       const e = new CustomEvent(name, {
         bubbles: true,
         cancelable: true,
         detail: detailProps
       });
-      this.telInput.dispatchEvent(e);
+      this.ui.telInput.dispatchEvent(e);
     }
     //* Open the dropdown.
     _openDropdown() {
       const { fixDropdownWidth, countrySearch } = this.options;
+      this.dropdownAbortController = new AbortController();
       if (fixDropdownWidth) {
-        this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
+        this.ui.dropdownContent.style.width = `${this.ui.telInput.offsetWidth}px`;
       }
-      this.dropdownContent.classList.remove("iti__hide");
-      this.selectedCountry.setAttribute("aria-expanded", "true");
+      this.ui.dropdownContent.classList.remove("iti__hide");
+      this.ui.selectedCountry.setAttribute("aria-expanded", "true");
       this._setDropdownPosition();
       if (countrySearch) {
-        const firstCountryItem = this.countryList.firstElementChild;
+        const firstCountryItem = this.ui.countryList.firstElementChild;
         if (firstCountryItem) {
-          this._highlightListItem(firstCountryItem, false);
-          this.countryList.scrollTop = 0;
+          this.ui.highlightListItem(firstCountryItem, false);
+          this.ui.countryList.scrollTop = 0;
         }
-        this.searchInput.focus();
+        this.ui.searchInput.focus();
       }
       this._bindDropdownListeners();
-      this.dropdownArrow.classList.add("iti__arrow--up");
+      this.ui.dropdownArrow.classList.add("iti__arrow--up");
       this._trigger("open:countrydropdown");
     }
     //* Set the dropdown position
     _setDropdownPosition() {
       if (this.options.dropdownContainer) {
-        this.options.dropdownContainer.appendChild(this.dropdown);
+        this.options.dropdownContainer.appendChild(this.ui.dropdown);
       }
       if (!this.options.useFullscreenPopup) {
-        const inputPosRelativeToVP = this.telInput.getBoundingClientRect();
-        const inputHeight = this.telInput.offsetHeight;
+        const inputPosRelativeToVP = this.ui.telInput.getBoundingClientRect();
+        const inputHeight = this.ui.telInput.offsetHeight;
         if (this.options.dropdownContainer) {
-          this.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
-          this.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
-          this._handleWindowScroll = () => this._closeDropdown();
-          window.addEventListener("scroll", this._handleWindowScroll);
+          this.ui.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
+          this.ui.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
+          const handleWindowScroll = () => this._closeDropdown();
+          window.addEventListener("scroll", handleWindowScroll, {
+            signal: this.dropdownAbortController.signal
+          });
         }
       }
     }
     //* We only bind dropdown listeners when the dropdown is open.
     _bindDropdownListeners() {
-      this._handleMouseoverCountryList = (e) => {
-        const listItem = e.target?.closest(".iti__country");
+      const signal = this.dropdownAbortController.signal;
+      const handleMouseoverCountryList = (e) => {
+        const listItem = e.target?.closest(
+          ".iti__country"
+        );
         if (listItem) {
-          this._highlightListItem(listItem, false);
+          this.ui.highlightListItem(listItem, false);
         }
       };
-      this.countryList.addEventListener(
-        "mouseover",
-        this._handleMouseoverCountryList
-      );
-      this._handleClickCountryList = (e) => {
-        const listItem = e.target?.closest(".iti__country");
+      this.ui.countryList.addEventListener("mouseover", handleMouseoverCountryList, {
+        signal
+      });
+      const handleClickCountryList = (e) => {
+        const listItem = e.target?.closest(
+          ".iti__country"
+        );
         if (listItem) {
           this._selectListItem(listItem);
         }
       };
-      this.countryList.addEventListener("click", this._handleClickCountryList);
-      this._handleClickOffToClose = (e) => {
+      this.ui.countryList.addEventListener("click", handleClickCountryList, {
+        signal
+      });
+      const handleClickOffToClose = (e) => {
         const target = e.target;
-        const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
+        const clickedInsideDropdown = !!target.closest(
+          `#iti-${this.id}__dropdown-content`
+        );
         if (!clickedInsideDropdown) {
           this._closeDropdown();
         }
@@ -2993,12 +3199,13 @@ var factoryOutput = (() => {
       setTimeout(() => {
         document.documentElement.addEventListener(
           "click",
-          this._handleClickOffToClose
+          handleClickOffToClose,
+          { signal }
         );
       }, 0);
       let query = "";
       let queryTimer = null;
-      this._handleKeydownOnDropdown = (e) => {
+      const handleKeydownOnDropdown = (e) => {
         if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
           e.preventDefault();
           e.stopPropagation();
@@ -3022,19 +3229,19 @@ var factoryOutput = (() => {
           }, 1e3);
         }
       };
-      document.addEventListener("keydown", this._handleKeydownOnDropdown);
+      document.addEventListener("keydown", handleKeydownOnDropdown, { signal });
       if (this.options.countrySearch) {
         const doFilter = () => {
-          const inputQuery = this.searchInput.value.trim();
-          this._filterCountries(inputQuery);
-          if (this.searchInput.value) {
-            this.searchClearButton.classList.remove("iti__hide");
+          const inputQuery = this.ui.searchInput.value.trim();
+          this._filterCountriesByQuery(inputQuery);
+          if (this.ui.searchInput.value) {
+            this.ui.searchClearButton.classList.remove("iti__hide");
           } else {
-            this.searchClearButton.classList.add("iti__hide");
+            this.ui.searchClearButton.classList.add("iti__hide");
           }
         };
         let keyupTimer = null;
-        this._handleSearchChange = () => {
+        const handleSearchChange = () => {
           if (keyupTimer) {
             clearTimeout(keyupTimer);
           }
@@ -3043,13 +3250,17 @@ var factoryOutput = (() => {
             keyupTimer = null;
           }, 100);
         };
-        this.searchInput.addEventListener("input", this._handleSearchChange);
-        this._handleSearchClear = () => {
-          this.searchInput.value = "";
-          this.searchInput.focus();
+        this.ui.searchInput.addEventListener("input", handleSearchChange, {
+          signal
+        });
+        const handleSearchClear = () => {
+          this.ui.searchInput.value = "";
+          this.ui.searchInput.focus();
           doFilter();
         };
-        this.searchClearButton.addEventListener("click", this._handleSearchClear);
+        this.ui.searchClearButton.addEventListener("click", handleSearchClear, {
+          signal
+        });
       }
     }
     //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -3058,42 +3269,21 @@ var factoryOutput = (() => {
         const startsWith = c.name.substring(0, query.length).toLowerCase() === query;
         if (startsWith) {
           const listItem = c.nodeById[this.id];
-          this._highlightListItem(listItem, false);
-          this._scrollTo(listItem);
+          this.ui.highlightListItem(listItem, false);
+          this.ui.scrollTo(listItem);
           break;
         }
       }
     }
-    //* Country search enabled: Filter the countries according to the search query.
-    _filterCountries(query) {
-      this.countryList.innerHTML = "";
+    //* Country search: Filter the countries according to the search query.
+    _filterCountriesByQuery(query) {
       let matchedCountries;
       if (query === "") {
         matchedCountries = this.countries;
       } else {
         matchedCountries = this._getMatchedCountries(query);
       }
-      let noCountriesAddedYet = true;
-      for (const c of matchedCountries) {
-        const listItem = c.nodeById[this.id];
-        if (listItem) {
-          this.countryList.appendChild(listItem);
-          if (noCountriesAddedYet) {
-            this._highlightListItem(listItem, false);
-            noCountriesAddedYet = false;
-          }
-        }
-      }
-      if (noCountriesAddedYet) {
-        this._highlightListItem(null, false);
-        if (this.searchNoResults) {
-          this.searchNoResults.classList.remove("iti__hide");
-        }
-      } else if (this.searchNoResults) {
-        this.searchNoResults.classList.add("iti__hide");
-      }
-      this.countryList.scrollTop = 0;
-      this._updateSearchResultsA11yText();
+      this.ui.filterCountries(matchedCountries);
     }
     _getMatchedCountries(query) {
       const normalisedQuery = normaliseString(query);
@@ -3127,39 +3317,21 @@ var factoryOutput = (() => {
         ...initialsMatches.sort((a, b) => a.priority - b.priority)
       ];
     }
-    //* Update search results text (for a11y).
-    _updateSearchResultsA11yText() {
-      const { i18n } = this.options;
-      const count = this.countryList.childElementCount;
-      let searchText;
-      if (count === 0) {
-        searchText = i18n.zeroSearchResults;
-      } else {
-        if (i18n.searchResultsText) {
-          searchText = i18n.searchResultsText(count);
-        } else if (count === 1) {
-          searchText = i18n.oneSearchResult;
-        } else {
-          searchText = i18n.multipleSearchResults.replace("${count}", count.toString());
-        }
-      }
-      this.searchResultsA11yText.textContent = searchText;
-    }
     //* 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 && this.countryList.childElementCount > 1) {
-        next = key === "ArrowUp" ? this.countryList.lastElementChild : this.countryList.firstElementChild;
+      let next = key === "ArrowUp" ? this.ui.highlightedItem?.previousElementSibling : this.ui.highlightedItem?.nextElementSibling;
+      if (!next && this.ui.countryList.childElementCount > 1) {
+        next = key === "ArrowUp" ? this.ui.countryList.lastElementChild : this.ui.countryList.firstElementChild;
       }
       if (next) {
-        this._scrollTo(next);
-        this._highlightListItem(next, false);
+        this.ui.scrollTo(next);
+        this.ui.highlightListItem(next, false);
       }
     }
     //* Select the currently highlighted item.
     _handleEnterKey() {
-      if (this.highlightedItem) {
-        this._selectListItem(this.highlightedItem);
+      if (this.ui.highlightedItem) {
+        this._selectListItem(this.ui.highlightedItem);
       }
     }
     //* Update the input's value to the given val (format first if possible)
@@ -3167,7 +3339,7 @@ var factoryOutput = (() => {
     _updateValFromNumber(fullNumber) {
       let number = fullNumber;
       if (this.options.formatOnDisplay && intlTelInput.utils && this.selectedCountryData) {
-        const useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
+        const useNational = this.options.nationalMode || !number.startsWith("+") && !this.options.separateDialCode;
         const { NATIONAL, INTERNATIONAL } = intlTelInput.utils.numberFormat;
         const format = useNational ? NATIONAL : INTERNATIONAL;
         number = intlTelInput.utils.formatNumber(
@@ -3177,7 +3349,7 @@ var factoryOutput = (() => {
         );
       }
       number = this._beforeSetNumber(number);
-      this.telInput.value = number;
+      this.ui.telInput.value = number;
     }
     //* Check if need to select a new country based on the given number
     //* Note: called from _setInitialState, keyup handler, setNumber.
@@ -3191,11 +3363,11 @@ var factoryOutput = (() => {
     // if there is a selected country, and the number doesn't start with a dial code, then add it
     _ensureHasDialCode(number) {
       const { dialCode, nationalPrefix } = this.selectedCountryData;
-      const alreadyHasPlus = number.charAt(0) === "+";
+      const alreadyHasPlus = number.startsWith("+");
       if (alreadyHasPlus || !dialCode) {
         return number;
       }
-      const hasPrefix = nationalPrefix && number.charAt(0) === nationalPrefix && !this.options.separateDialCode;
+      const hasPrefix = nationalPrefix && number.startsWith(nationalPrefix) && !this.options.separateDialCode;
       const cleanNumber = hasPrefix ? number.substring(1) : number;
       return `+${dialCode}${cleanNumber}`;
     }
@@ -3228,7 +3400,9 @@ var factoryOutput = (() => {
         }
         const { areaCodes, priority } = this.selectedCountryData;
         if (areaCodes) {
-          const dialCodeAreaCodes = areaCodes.map((areaCode) => `${selectedDialCode}${areaCode}`);
+          const dialCodeAreaCodes = areaCodes.map(
+            (areaCode) => `${selectedDialCode}${areaCode}`
+          );
           for (const dialCodeAreaCode of dialCodeAreaCodes) {
             if (numeric.startsWith(dialCodeAreaCode)) {
               return null;
@@ -3242,33 +3416,13 @@ var factoryOutput = (() => {
         if (!isValidSelection && !alreadySelected) {
           return iso2Codes[0];
         }
-      } else if (number.charAt(0) === "+" && numeric.length) {
+      } else if (number.startsWith("+") && numeric.length) {
         return "";
       } else if ((!number || number === "+") && !selectedIso2) {
         return this.defaultCountry;
       }
       return null;
     }
-    //* Remove highlighting from other list items and highlight the given item.
-    _highlightListItem(listItem, shouldFocus) {
-      const prevItem = this.highlightedItem;
-      if (prevItem) {
-        prevItem.classList.remove("iti__highlight");
-        prevItem.setAttribute("aria-selected", "false");
-      }
-      this.highlightedItem = listItem;
-      if (this.highlightedItem) {
-        this.highlightedItem.classList.add("iti__highlight");
-        this.highlightedItem.setAttribute("aria-selected", "true");
-        if (this.options.countrySearch) {
-          const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-          this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
-        }
-      }
-      if (shouldFocus) {
-        this.highlightedItem.focus();
-      }
-    }
     //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
     //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
     _setCountry(iso2) {
@@ -3278,7 +3432,7 @@ var factoryOutput = (() => {
       if (this.selectedCountryData.iso2) {
         this.defaultCountry = this.selectedCountryData.iso2;
       }
-      if (this.selectedCountry) {
+      if (this.ui.selectedCountry) {
         const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
         let ariaLabel, title;
         if (iso2) {
@@ -3289,32 +3443,19 @@ var factoryOutput = (() => {
           title = i18n.noCountrySelected;
           ariaLabel = i18n.noCountrySelected;
         }
-        this.selectedCountryInner.className = flagClass;
-        this.selectedCountry.setAttribute("title", title);
-        this.selectedCountry.setAttribute("aria-label", ariaLabel);
+        this.ui.selectedCountryInner.className = flagClass;
+        this.ui.selectedCountry.setAttribute("title", title);
+        this.ui.selectedCountry.setAttribute("aria-label", ariaLabel);
       }
       if (separateDialCode) {
         const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
-        this.selectedDialCode.innerHTML = dialCode;
-        this._updateInputPadding();
+        this.ui.selectedDialCode.textContent = dialCode;
+        this.ui.updateInputPadding();
       }
       this._updatePlaceholder();
       this._updateMaxLength();
       return prevIso2 !== iso2;
     }
-    //* Update the input padding to make space for the selected country/dial code.
-    _updateInputPadding() {
-      if (this.selectedCountry) {
-        const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
-        const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
-        const inputPadding = selectedCountryWidth + 6;
-        if (this.showSelectedCountryOnLeft) {
-          this.telInput.style.paddingLeft = `${inputPadding}px`;
-        } else {
-          this.telInput.style.paddingRight = `${inputPadding}px`;
-        }
-      }
-    }
     //* Update the maximum valid number length for the currently selected country.
     _updateMaxLength() {
       const { strictMode, placeholderNumberType, validationNumberTypes } = this.options;
@@ -3329,7 +3470,11 @@ var factoryOutput = (() => {
             true
           );
           let validNumber = exampleNumber;
-          while (intlTelInput.utils.isPossibleNumber(exampleNumber, iso2, validationNumberTypes)) {
+          while (intlTelInput.utils.isPossibleNumber(
+            exampleNumber,
+            iso2,
+            validationNumberTypes
+          )) {
             validNumber = exampleNumber;
             exampleNumber += "0";
           }
@@ -3343,31 +3488,6 @@ var factoryOutput = (() => {
         }
       }
     }
-    //* When input is in a hidden container during init, we cannot calculate the selected country width.
-    //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
-    //* To get the right styling to apply, all we need is a shallow clone of the container,
-    //* and then to inject a deep clone of the selectedCountry element.
-    _getHiddenSelectedCountryWidth() {
-      if (this.telInput.parentNode) {
-        let body;
-        try {
-          body = window.top.document.body;
-        } catch (e) {
-          body = document.body;
-        }
-        const containerClone = this.telInput.parentNode.cloneNode(false);
-        containerClone.style.visibility = "hidden";
-        body.appendChild(containerClone);
-        const countryContainerClone = this.countryContainer.cloneNode();
-        containerClone.appendChild(countryContainerClone);
-        const selectedCountryClone = this.selectedCountry.cloneNode(true);
-        countryContainerClone.appendChild(selectedCountryClone);
-        const width = selectedCountryClone.offsetWidth;
-        body.removeChild(containerClone);
-        return width;
-      }
-      return 0;
-    }
     //* Update the input placeholder to an example number from the currently selected country.
     _updatePlaceholder() {
       const {
@@ -3376,7 +3496,7 @@ var factoryOutput = (() => {
         nationalMode,
         customPlaceholder
       } = this.options;
-      const shouldSetPlaceholder = autoPlaceholder === "aggressive" || !this.hadInitialPlaceholder && autoPlaceholder === "polite";
+      const shouldSetPlaceholder = autoPlaceholder === "aggressive" || !this.ui.hadInitialPlaceholder && autoPlaceholder === "polite";
       if (intlTelInput.utils && shouldSetPlaceholder) {
         const numberType = intlTelInput.utils.numberType[placeholderNumberType];
         let placeholder = this.selectedCountryData.iso2 ? intlTelInput.utils.getExampleNumber(
@@ -3388,98 +3508,66 @@ var factoryOutput = (() => {
         if (typeof customPlaceholder === "function") {
           placeholder = customPlaceholder(placeholder, this.selectedCountryData);
         }
-        this.telInput.setAttribute("placeholder", placeholder);
+        this.ui.telInput.setAttribute("placeholder", placeholder);
       }
     }
     //* Called when the user selects a list item from the dropdown.
     _selectListItem(listItem) {
-      const iso2 = listItem.getAttribute("data-country-code");
+      const iso2 = listItem.dataset.countryCode;
       const countryChanged = this._setCountry(iso2);
       this._closeDropdown();
-      const dialCode = listItem.getAttribute("data-dial-code");
+      const dialCode = listItem.dataset.dialCode;
       this._updateDialCode(dialCode);
       if (this.options.formatOnDisplay) {
-        this._updateValFromNumber(this.telInput.value);
+        this._updateValFromNumber(this.ui.telInput.value);
       }
-      this.telInput.focus();
+      this.ui.telInput.focus();
       if (countryChanged) {
         this._triggerCountryChange();
       }
     }
     //* Close the dropdown and unbind any listeners.
     _closeDropdown() {
-      this.dropdownContent.classList.add("iti__hide");
-      this.selectedCountry.setAttribute("aria-expanded", "false");
-      if (this.highlightedItem) {
-        this.highlightedItem.setAttribute("aria-selected", "false");
+      if (this.ui.dropdownContent.classList.contains("iti__hide")) {
+        return;
       }
-      if (this.options.countrySearch) {
-        this.searchInput.removeAttribute("aria-activedescendant");
+      this.ui.dropdownContent.classList.add("iti__hide");
+      this.ui.selectedCountry.setAttribute("aria-expanded", "false");
+      if (this.ui.highlightedItem) {
+        this.ui.highlightedItem.setAttribute("aria-selected", "false");
       }
-      this.dropdownArrow.classList.remove("iti__arrow--up");
       if (this.options.countrySearch) {
-        this.searchInput.removeEventListener("input", this._handleSearchChange);
-        this.searchClearButton.removeEventListener("click", this._handleSearchClear);
+        this.ui.searchInput.removeAttribute("aria-activedescendant");
       }
-      document.removeEventListener("keydown", this._handleKeydownOnDropdown);
-      document.documentElement.removeEventListener(
-        "click",
-        this._handleClickOffToClose
-      );
-      this.countryList.removeEventListener(
-        "mouseover",
-        this._handleMouseoverCountryList
-      );
-      this.countryList.removeEventListener("click", this._handleClickCountryList);
+      this.ui.dropdownArrow.classList.remove("iti__arrow--up");
+      this.dropdownAbortController.abort();
+      this.dropdownAbortController = null;
       if (this.options.dropdownContainer) {
-        if (!this.options.useFullscreenPopup) {
-          window.removeEventListener("scroll", this._handleWindowScroll);
-        }
-        if (this.dropdown.parentNode) {
-          this.dropdown.parentNode.removeChild(this.dropdown);
-        }
+        this.ui.dropdown.remove();
       }
       this._trigger("close:countrydropdown");
     }
-    //* Check if an element is visible within it's container, else scroll until it is.
-    _scrollTo(element) {
-      const container = this.countryList;
-      const scrollTop = document.documentElement.scrollTop;
-      const containerHeight = container.offsetHeight;
-      const containerTop = container.getBoundingClientRect().top + scrollTop;
-      const containerBottom = containerTop + containerHeight;
-      const elementHeight = element.offsetHeight;
-      const elementTop = element.getBoundingClientRect().top + scrollTop;
-      const elementBottom = elementTop + elementHeight;
-      const newScrollTop = elementTop - containerTop + container.scrollTop;
-      if (elementTop < containerTop) {
-        container.scrollTop = newScrollTop;
-      } else if (elementBottom > containerBottom) {
-        const heightDifference = containerHeight - elementHeight;
-        container.scrollTop = newScrollTop - heightDifference;
-      }
-    }
     //* Replace any existing dial code with the new one
     //* Note: called from _selectListItem and setCountry
     _updateDialCode(newDialCodeBare) {
-      const inputVal = this.telInput.value;
+      const inputVal = this.ui.telInput.value;
       const newDialCode = `+${newDialCodeBare}`;
       let newNumber;
-      if (inputVal.charAt(0) === "+") {
+      if (inputVal.startsWith("+")) {
         const prevDialCode = this._getDialCode(inputVal);
         if (prevDialCode) {
           newNumber = inputVal.replace(prevDialCode, newDialCode);
         } else {
           newNumber = newDialCode;
         }
-        this.telInput.value = newNumber;
+        this.ui.telInput.value = newNumber;
       }
     }
     //* Try and extract a valid international dial code from a full telephone number.
     //* Note: returns the raw string inc plus character and any whitespace/dots etc.
     _getDialCode(number, includeAreaCode) {
       let dialCode = "";
-      if (number.charAt(0) === "+") {
+      if (number.startsWith("+")) {
         let numericChars = "";
         for (let i = 0; i < number.length; i++) {
           const c = number.charAt(i);
@@ -3505,11 +3593,11 @@ var factoryOutput = (() => {
     }
     //* Get the input val, adding the dial code if separateDialCode is enabled.
     _getFullNumber(overrideVal) {
-      const val = overrideVal || this.telInput.value.trim();
+      const val = overrideVal || this.ui.telInput.value.trim();
       const { dialCode } = this.selectedCountryData;
       let prefix;
       const numericVal = getNumeric(val);
-      if (this.options.separateDialCode && val.charAt(0) !== "+" && dialCode && numericVal) {
+      if (this.options.separateDialCode && !val.startsWith("+") && dialCode && numericVal) {
         prefix = `+${dialCode}`;
       } else {
         prefix = "";
@@ -3538,7 +3626,7 @@ var factoryOutput = (() => {
     handleAutoCountry() {
       if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
         this.defaultCountry = intlTelInput.autoCountry;
-        const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe");
+        const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains("iti__globe");
         if (!hasSelectedCountryOrGlobe) {
           this.setCountry(this.defaultCountry);
         }
@@ -3548,8 +3636,8 @@ var factoryOutput = (() => {
     //* This is called when the utils request completes.
     handleUtils() {
       if (intlTelInput.utils) {
-        if (this.telInput.value) {
-          this._updateValFromNumber(this.telInput.value);
+        if (this.ui.telInput.value) {
+          this._updateValFromNumber(this.ui.telInput.value);
         }
         if (this.selectedCountryData.iso2) {
           this._updatePlaceholder();
@@ -3563,49 +3651,20 @@ var factoryOutput = (() => {
     //********************
     //* Remove plugin.
     destroy() {
-      this.telInput.iti = void 0;
-      const { allowDropdown, separateDialCode } = this.options;
-      if (allowDropdown) {
-        this._closeDropdown();
-        this.selectedCountry.removeEventListener(
-          "click",
-          this._handleClickSelectedCountry
-        );
-        this.countryContainer.removeEventListener(
-          "keydown",
-          this._handleCountryContainerKeydown
-        );
-        const label = this.telInput.closest("label");
-        if (label) {
-          label.removeEventListener("click", this._handleLabelClick);
-        }
-      }
-      const { form } = this.telInput;
-      if (this._handleHiddenInputSubmit && form) {
-        form.removeEventListener("submit", this._handleHiddenInputSubmit);
-      }
-      this.telInput.removeEventListener("input", this._handleInputEvent);
-      if (this._handleKeydownEvent) {
-        this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
-      }
-      if (this._handlePasteEvent) {
-        this.telInput.removeEventListener("paste", this._handlePasteEvent);
+      if (!this.ui.telInput) {
+        return;
       }
-      if (this._handlePageLoad) {
-        window.removeEventListener("load", this._handlePageLoad);
+      if (this.options.allowDropdown) {
+        this._closeDropdown();
       }
-      this.telInput.removeAttribute("data-intl-tel-input-id");
-      if (separateDialCode) {
-        if (this.isRTL) {
-          this.telInput.style.paddingRight = this.originalPaddingRight;
-        } else {
-          this.telInput.style.paddingLeft = this.originalPaddingLeft;
-        }
+      this.abortController.abort();
+      this.abortController = null;
+      this.ui.destroy();
+      if (intlTelInput.instances instanceof Map) {
+        intlTelInput.instances.delete(this.id);
+      } else {
+        delete intlTelInput.instances[this.id];
       }
-      const wrapper = this.telInput.parentNode;
-      wrapper?.parentNode?.insertBefore(this.telInput, wrapper);
-      wrapper?.parentNode?.removeChild(wrapper);
-      delete intlTelInput.instances[this.id];
     }
     //* Get the extension from the current number.
     getExtension() {
@@ -3651,19 +3710,34 @@ var factoryOutput = (() => {
       }
       return -99;
     }
-    //* Validate the input val (with precise=false)
+    //* Validate the input val using number length only
     isValidNumber() {
+      const { dialCode, iso2 } = this.selectedCountryData;
+      if (dialCode === "44" && intlTelInput.utils) {
+        const number = this._getFullNumber();
+        const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
+        if (coreNumber[0] === "7" && coreNumber.length !== 10) {
+          return false;
+        }
+      }
       return this._validateNumber(false);
     }
-    //* Validate the input val (with precise=true)
+    //* Validate the input val with precise validation
     isValidNumberPrecise() {
       return this._validateNumber(true);
     }
     _utilsIsPossibleNumber(val) {
-      return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
+      return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(
+        val,
+        this.selectedCountryData.iso2,
+        this.options.validationNumberTypes
+      ) : null;
     }
     //* Shared internal validation logic to handle alpha character extension rules.
     _validateNumber(precise) {
+      if (!intlTelInput.utils) {
+        return null;
+      }
       if (!this.selectedCountryData.iso2) {
         return false;
       }
@@ -3680,7 +3754,11 @@ var factoryOutput = (() => {
       return testValidity(val);
     }
     _utilsIsValidNumber(val) {
-      return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
+      return intlTelInput.utils ? intlTelInput.utils.isValidNumber(
+        val,
+        this.selectedCountryData.iso2,
+        this.options.validationNumberTypes
+      ) : null;
     }
     //* Update the selected country, and update the input val accordingly.
     setCountry(iso2) {
@@ -3694,7 +3772,7 @@ var factoryOutput = (() => {
         this._setCountry(iso2Lower);
         this._updateDialCode(this.selectedCountryData.dialCode);
         if (this.options.formatOnDisplay) {
-          this._updateValFromNumber(this.telInput.value);
+          this._updateValFromNumber(this.ui.telInput.value);
         }
         this._triggerCountryChange();
       }
@@ -3714,11 +3792,11 @@ var factoryOutput = (() => {
       this._updatePlaceholder();
     }
     setDisabled(disabled) {
-      this.telInput.disabled = disabled;
+      this.ui.telInput.disabled = disabled;
       if (disabled) {
-        this.selectedCountry.setAttribute("disabled", "true");
+        this.ui.selectedCountry.setAttribute("disabled", "true");
       } else {
-        this.selectedCountry.removeAttribute("disabled");
+        this.ui.selectedCountry.removeAttribute("disabled");
       }
     }
   };
@@ -3732,13 +3810,19 @@ var factoryOutput = (() => {
           return Promise.reject(error);
         }
       } else {
-        return Promise.reject(new TypeError(`The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof source}`));
+        return Promise.reject(
+          new TypeError(
+            `The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof source}`
+          )
+        );
       }
       intlTelInput.startedLoadingUtilsScript = true;
       return loadCall.then((module) => {
         const utils = module?.default;
         if (!utils || typeof utils !== "object") {
-          throw new TypeError("The loader function passed to attachUtils did not resolve to a module object with utils as its default export.");
+          throw new TypeError(
+            "The loader function passed to attachUtils did not resolve to a module object with utils as its default export."
+          );
         }
         intlTelInput.utils = utils;
         forEachInstance("handleUtils");
@@ -3750,11 +3834,17 @@ var factoryOutput = (() => {
     }
     return null;
   };
+  var forEachInstance = (method, ...args) => {
+    Object.values(intlTelInput.instances).forEach((instance) => {
+      const fn = instance[method];
+      if (typeof fn === "function") {
+        fn.apply(instance, args);
+      }
+    });
+  };
   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;
       input.iti = iti;
       return iti;
@@ -3767,7 +3857,7 @@ var factoryOutput = (() => {
       getCountryData: () => data_default,
       //* A getter for the plugin instance.
       getInstance: (input) => {
-        const id2 = input.getAttribute("data-intl-tel-input-id");
+        const id2 = input.dataset.intlTelInputId;
         return id2 ? intlTelInput.instances[id2] : null;
       },
       //* A map from instance ID to instance object.
@@ -3775,7 +3865,7 @@ var factoryOutput = (() => {
       attachUtils,
       startedLoadingUtilsScript: false,
       startedLoadingAutoCountry: false,
-      version: "25.10.11"
+      version: "25.11.0"
     }
   );
   var intl_tel_input_default = intlTelInput;