intl-tel-input 24.5.1 → 24.6.0

package/vue/build/IntlTelInput.mjs

@@ -1,5 +1,5 @@
-import { mergeModels as L, useModel as x, ref as v, onMounted as E, watch as M, onUnmounted as F, withDirectives as B, openBlock as O, createElementBlock as V, mergeProps as z, vModelText as R } from "vue";
-const D = [
+import { mergeModels as D, useModel as x, ref as v, onMounted as E, watch as M, onUnmounted as O, withDirectives as F, openBlock as B, createElementBlock as V, mergeProps as z, vModelText as R } from "vue";
+const N = [
   [
     "af",
     // Afghanistan
@@ -1306,8 +1306,8 @@ const D = [
     "263"
   ]
 ], b = [];
-for (let u = 0; u < D.length; u++) {
-  const t = D[u];
+for (let u = 0; u < N.length; u++) {
+  const t = N[u];
   b[u] = {
     name: "",
     // this is now populated in the plugin
@@ -1318,7 +1318,7 @@ for (let u = 0; u < D.length; u++) {
     nodeById: {}
   };
 }
-const $ = {
+const j = {
   ad: "Andorra",
   ae: "United Arab Emirates",
   af: "Afghanistan",
@@ -1561,7 +1561,7 @@ const $ = {
   za: "South Africa",
   zm: "Zambia",
   zw: "Zimbabwe"
-}, j = {
+}, $ = {
   selectedCountryAriaLabel: "Selected country",
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
@@ -1572,11 +1572,11 @@ const $ = {
   // additional countries (not supported by country-list library)
   ac: "Ascension Island",
   xk: "Kosovo"
-}, S = { ...$, ...j };
+}, k = { ...j, ...$ };
 for (let u = 0; u < b.length; u++)
-  b[u].name = S[b[u].iso2];
-let K = 0;
-const k = {
+  b[u].name = k[b[u].iso2];
+let U = 0;
+const T = {
   //* Whether or not to allow the dropdown.
   allowDropdown: !0,
   //* Add a placeholder in the input with an example number for the selected country.
@@ -1607,6 +1607,8 @@ const k = {
   i18n: {},
   //* Initial country.
   initialCountry: "",
+  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  loadUtilsOnInit: "",
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
   nationalMode: !0,
   //* Display only these countries.
@@ -1627,11 +1629,11 @@ const k = {
       navigator.userAgent
     ) || window.innerWidth <= 500
   ) : !1,
-  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  //* Deprecated! Use `loadUtilsOnInit` instead.
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
-}, U = [
+}, K = [
   "800",
   "822",
   "833",
@@ -1649,11 +1651,11 @@ const k = {
   "887",
   "888",
   "889"
-], w = (u) => u.replace(/\D/g, ""), N = (u = "") => u.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), A = (u) => {
-  const t = w(u);
+], I = (u) => u.replace(/\D/g, ""), A = (u = "") => u.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), S = (u) => {
+  const t = I(u);
   if (t.charAt(0) === "1") {
     const e = t.substr(1, 3);
-    return U.indexOf(e) !== -1;
+    return K.indexOf(e) !== -1;
   }
   return !1;
 }, H = (u, t, e, i) => {
@@ -1670,19 +1672,19 @@ const k = {
 }, y = (u, t, e) => {
   const i = document.createElement(u);
   return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
-}, _ = (u) => {
-  const { instances: t } = l;
-  Object.values(t).forEach((e) => e[u]());
+}, _ = (u, ...t) => {
+  const { instances: e } = l;
+  Object.values(e).forEach((i) => i[u](...t));
 };
 class G {
   constructor(t, e = {}) {
-    this.id = K++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, k, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
+    this.id = U++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, T, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
   _init() {
     this.options.useFullscreenPopup && (this.options.fixDropdownWidth = !1), this.options.onlyCountries.length === 1 && (this.options.initialCountry = this.options.onlyCountries[0]), this.options.separateDialCode && (this.options.nationalMode = !1), this.options.allowDropdown && !this.options.showFlags && !this.options.separateDialCode && (this.options.nationalMode = !1), this.options.useFullscreenPopup && !this.options.dropdownContainer && (this.options.dropdownContainer = document.body), this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]");
     const t = this.options.allowDropdown || this.options.separateDialCode;
-    this.showSelectedCountryOnLeft = this.isRTL ? !t : t, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft), this.options.i18n = { ...S, ...this.options.i18n };
+    this.showSelectedCountryOnLeft = this.isRTL ? !t : t, this.options.separateDialCode && (this.isRTL ? this.originalPaddingRight = this.telInput.style.paddingRight : this.originalPaddingLeft = this.telInput.style.paddingLeft), this.options.i18n = { ...k, ...this.options.i18n };
     const e = new Promise((s, n) => {
       this.resolveAutoCountryPromise = s, this.rejectAutoCountryPromise = n;
     }), i = new Promise((s, n) => {
@@ -1896,7 +1898,7 @@ class G {
   //* 1. Extracting a dial code from the given number
   //* 2. Using explicit initialCountry
   _setInitialState(t = !1) {
-    const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i, o = this._getDialCode(n), a = A(n), { initialCountry: r, geoIpLookup: p } = this.options, c = r === "auto" && p;
+    const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i, o = this._getDialCode(n), a = S(n), { initialCountry: r, geoIpLookup: p } = this.options, c = r === "auto" && p;
     if (o && !a)
       this._updateCountryFromNumber(n);
     else if (!c || t) {
@@ -1936,10 +1938,12 @@ class G {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    const { utilsScript: t, initialCountry: e, geoIpLookup: i } = this.options;
-    t && !l.utils ? l.documentReady() ? l.loadUtils(t) : window.addEventListener("load", () => {
-      l.loadUtils(t);
-    }) : this.resolveUtilsScriptPromise(), e === "auto" && i && !this.selectedCountryData.iso2 ? this._loadAutoCountry() : this.resolveAutoCountryPromise();
+    let { loadUtilsOnInit: t, utilsScript: e, initialCountry: i, geoIpLookup: s } = this.options;
+    !t && e && (console.warn("intl-tel-input: The `utilsScript` option is deprecated and will be removed in a future release! Please use the `loadUtilsOnInit` option instead."), t = e), t && !l.utils ? (this._handlePageLoad = () => {
+      var o;
+      window.removeEventListener("load", this._handlePageLoad), (o = l.loadUtils(t)) == null || o.catch(() => {
+      });
+    }, l.documentReady() ? this._handlePageLoad() : window.addEventListener("load", this._handlePageLoad)) : this.resolveUtilsScriptPromise(), i === "auto" && s && !this.selectedCountryData.iso2 ? this._loadAutoCountry() : this.resolveAutoCountryPromise();
   }
   //* Perform the geo ip lookup.
   _loadAutoCountry() {
@@ -1971,8 +1975,8 @@ class G {
       p || c && !t ? a = !0 : /[^+0-9]/.test(this.telInput.value) || (a = !1);
       const d = (r == null ? void 0 : r.detail) && r.detail.isSetNumber && !s;
       if (e && !a && !d) {
-        const C = this.telInput.selectionStart || 0, m = this.telInput.value.substring(0, C).replace(/[^+0-9]/g, "").length, f = (r == null ? void 0 : r.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), I = H(m, g, C, f);
-        this.telInput.value = g, this.telInput.setSelectionRange(I, I);
+        const C = this.telInput.selectionStart || 0, m = this.telInput.value.substring(0, C).replace(/[^+0-9]/g, "").length, f = (r == null ? void 0 : r.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), w = H(m, g, C, f);
+        this.telInput.value = g, this.telInput.setSelectionRange(w, w);
       }
     }, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (r) => {
       if (r.key && r.key.length === 1 && !r.altKey && !r.ctrlKey && !r.metaKey) {
@@ -1981,20 +1985,17 @@ class G {
           return;
         }
         if (t) {
-          const p = this.telInput.value, d = !(p.charAt(0) === "+") && this.telInput.selectionStart === 0 && r.key === "+", C = /^[0-9]$/.test(r.key), h = i ? C : d || C, m = this._getFullNumber(), f = l.utils.getCoreNumber(m, this.selectedCountryData.iso2), g = this.maxCoreNumberLength && f.length >= this.maxCoreNumberLength, I = p.substring(this.telInput.selectionStart, this.telInput.selectionEnd), T = /\d/.test(I), P = d ? !0 : this._isChangingDialCode(r.key);
-          (!h || g && !T && !P) && r.preventDefault();
+          const p = this.telInput.value, c = p.charAt(0) === "+", d = !c && this.telInput.selectionStart === 0 && r.key === "+", C = /^[0-9]$/.test(r.key), h = i ? C : d || C, m = p.slice(0, this.telInput.selectionStart) + r.key + p.slice(this.telInput.selectionEnd), f = this._getFullNumber(m), g = l.utils.getCoreNumber(f, this.selectedCountryData.iso2), w = this.maxCoreNumberLength && g.length > this.maxCoreNumberLength;
+          let L = !1;
+          if (c) {
+            const P = this.selectedCountryData.iso2;
+            L = this._getCountryFromNumber(f) !== P;
+          }
+          (!h || w && !L && !d) && r.preventDefault();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
   }
-  _isChangingDialCode(t) {
-    const e = this.telInput.value;
-    if (e.charAt(0) === "+") {
-      const i = this.selectedCountryData.iso2, s = e.slice(0, this.telInput.selectionStart) + t + e.slice(this.telInput.selectionEnd), n = this._getFullNumber(s);
-      return this._getCountryFromNumber(n) !== i;
-    }
-    return !1;
-  }
   //* Adhere to the input's maxlength attr.
   _cap(t) {
     const e = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
@@ -2079,9 +2080,9 @@ class G {
   _filterCountries(t, e = !1) {
     let i = !0;
     this.countryList.innerHTML = "";
-    const s = N(t);
+    const s = A(t);
     for (let n = 0; n < this.countries.length; n++) {
-      const o = this.countries[n], a = N(o.name), r = o.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((c) => c[0]).join("").toLowerCase(), p = `+${o.dialCode}`;
+      const o = this.countries[n], a = A(o.name), r = o.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((c) => c[0]).join("").toLowerCase(), p = `+${o.dialCode}`;
       if (e || a.includes(s) || p.includes(s) || o.iso2.includes(s) || r.includes(s)) {
         const c = o.nodeById[this.id];
         c && this.countryList.appendChild(c), i && (this._highlightListItem(c, !1), i = !1);
@@ -2130,10 +2131,10 @@ class G {
     let i = e ? t.substring(e) : t;
     const s = this.selectedCountryData.dialCode;
     i && s === "1" && i.charAt(0) !== "+" && (i.charAt(0) !== "1" && (i = `1${i}`), i = `+${i}`), this.options.separateDialCode && s && i.charAt(0) !== "+" && (i = `+${s}${i}`);
-    const o = this._getDialCode(i, !0), a = w(i);
+    const o = this._getDialCode(i, !0), a = I(i);
     if (o) {
-      const r = this.dialCodeToIso2Map[w(o)], p = r.indexOf(this.selectedCountryData.iso2) !== -1 && a.length <= o.length - 1;
-      if (!(s === "1" && A(a)) && !p) {
+      const r = this.dialCodeToIso2Map[I(o)], p = r.indexOf(this.selectedCountryData.iso2) !== -1 && a.length <= o.length - 1;
+      if (!(s === "1" && S(a)) && !p) {
         for (let d = 0; d < r.length; d++)
           if (r[d])
             return r[d];
@@ -2189,20 +2190,20 @@ class G {
   }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
-    const { strictMode: t, placeholderNumberType: e, validationNumberType: i } = this.options;
+    const { strictMode: t, placeholderNumberType: e, validationNumberType: i } = this.options, { iso2: s } = this.selectedCountryData;
     if (t && l.utils)
-      if (this.selectedCountryData.iso2) {
-        const s = l.utils.numberType[e];
-        let n = l.utils.getExampleNumber(
-          this.selectedCountryData.iso2,
-          !1,
+      if (s) {
+        const n = l.utils.numberType[e];
+        let o = l.utils.getExampleNumber(
           s,
+          !1,
+          n,
           !0
-        ), o = n;
-        for (; l.utils.isPossibleNumber(n, this.selectedCountryData.iso2, i); )
-          o = n, n += "0";
-        const a = l.utils.getCoreNumber(o, this.selectedCountryData.iso2);
-        this.maxCoreNumberLength = a.length;
+        ), a = o;
+        for (; l.utils.isPossibleNumber(o, s, i); )
+          a = o, o += "0";
+        const r = l.utils.getCoreNumber(a, s);
+        this.maxCoreNumberLength = r.length, s === "by" && (this.maxCoreNumberLength = r.length + 1);
       } else
         this.maxCoreNumberLength = null;
   }
@@ -2262,7 +2263,7 @@ class G {
     ), this.countryList.removeEventListener(
       "mouseover",
       this._handleMouseoverCountryList
-    ), this.countryList.removeEventListener("click", this._handleClickCountryList), this.options.dropdownContainer && (this.options.useFullscreenPopup || window.removeEventListener("scroll", this._handleWindowScroll), this.dropdown.parentNode && this.dropdown.parentNode.removeChild(this.dropdown)), this._trigger("close:countrydropdown");
+    ), this.countryList.removeEventListener("click", this._handleClickCountryList), this.options.dropdownContainer && (this.options.useFullscreenPopup || window.removeEventListener("scroll", this._handleWindowScroll), this.dropdown.parentNode && this.dropdown.parentNode.removeChild(this.dropdown)), this._handlePageLoad && window.removeEventListener("load", this._handlePageLoad), this._trigger("close:countrydropdown");
   }
   //* Check if an element is visible within it's container, else scroll until it is.
   _scrollTo(t) {
@@ -2310,7 +2311,7 @@ class G {
   _getFullNumber(t) {
     const e = t || this.telInput.value.trim(), { dialCode: i } = this.selectedCountryData;
     let s;
-    const n = w(e);
+    const n = I(e);
     return this.options.separateDialCode && e.charAt(0) !== "+" && i && n ? s = `+${i}` : s = "", s + e;
   }
   //* Remove the dial code if separateDialCode is enabled also cap the length if the input has a maxlength attribute
@@ -2453,23 +2454,41 @@ class G {
     this.telInput.disabled = t, t ? this.selectedCountry.setAttribute("disabled", "true") : this.selectedCountry.removeAttribute("disabled");
   }
 }
-const W = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUtilsScript = !0, new Promise((t, e) => {
-  import(
-    /* webpackIgnore: true */
-    /* @vite-ignore */
-    u
-  ).then(({ default: i }) => {
-    l.utils = i, _("handleUtils"), t(!0);
-  }).catch(() => {
-    _("rejectUtilsScriptPromise"), e();
-  });
-})) : null, l = Object.assign(
+const W = (u) => {
+  if (!l.utils && !l.startedLoadingUtilsScript) {
+    let t;
+    if (typeof u == "string")
+      t = import(
+        /* webpackIgnore: true */
+        /* @vite-ignore */
+        u
+      );
+    else if (typeof u == "function")
+      try {
+        if (t = u(), !(t instanceof Promise))
+          throw new TypeError(`The function passed to loadUtils must return a promise for the utilities module, not ${typeof t}`);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    else
+      return Promise.reject(new TypeError(`The argument passed to loadUtils must be a URL string or a function that returns a promise for the utilities module, not ${typeof u}`));
+    return l.startedLoadingUtilsScript = !0, t.then((e) => {
+      const i = e == null ? void 0 : e.default;
+      if (!i || typeof i != "object")
+        throw typeof u == "string" ? new TypeError(`The module loaded from ${u} did not set utils as its default export.`) : new TypeError("The loader function passed to loadUtils did not resolve to a module object with utils as its default export.");
+      return l.utils = i, _("handleUtils"), !0;
+    }).catch((e) => {
+      throw _("rejectUtilsScriptPromise", e), e;
+    });
+  }
+  return null;
+}, l = Object.assign(
   (u, t) => {
     const e = new G(u, t);
     return e._init(), u.setAttribute("data-intl-tel-input-id", e.id.toString()), l.instances[e.id] = e, e;
   },
   {
-    defaults: k,
+    defaults: T,
     //* Using a static var like this allows us to mock it in the tests.
     documentReady: () => document.readyState === "complete",
     //* Get the country data object.
@@ -2482,11 +2501,13 @@ const W = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils: W,
-    version: "24.5.1"
+    startedLoadingUtilsScript: !1,
+    startedLoadingAutoCountry: !1,
+    version: "24.6.0"
   }
-), Y = {
+), J = {
   __name: "IntlTelInput",
-  props: /* @__PURE__ */ L({
+  props: /* @__PURE__ */ D({
     disabled: {
       type: Boolean,
       default: !1
@@ -2510,7 +2531,7 @@ const W = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ L([
+  emits: /* @__PURE__ */ D([
     "changeNumber",
     "changeCountry",
     "changeValidity",
@@ -2538,10 +2559,10 @@ const W = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
         var m;
         return (m = a.value) == null ? void 0 : m.setDisabled(h);
       }
-    ), F(() => {
+    ), O(() => {
       var h;
       return (h = a.value) == null ? void 0 : h.destroy();
-    }), t({ instance: a, input: o }), (h, m) => B((O(), V("input", z({
+    }), t({ instance: a, input: o }), (h, m) => F((B(), V("input", z({
       ref_key: "input",
       ref: o,
       "onUpdate:modelValue": m[0] || (m[0] = (f) => i.value = f),
@@ -2554,5 +2575,5 @@ const W = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
   }
 };
 export {
-  Y as default
+  J as default
 };