intl-tel-input 25.10.5 → 25.10.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/angular/README.md +1 -1
- package/angular/build/IntlTelInput.js +97 -53
- package/angular/build/IntlTelInputWithUtils.js +97 -53
- package/angular/build/types/intl-tel-input.d.ts +1 -0
- package/build/js/data.js +8 -8
- package/build/js/data.min.js +2 -2
- package/build/js/intlTelInput.d.ts +1 -0
- package/build/js/intlTelInput.js +98 -54
- package/build/js/intlTelInput.min.js +4 -4
- package/build/js/intlTelInputWithUtils.js +98 -54
- package/build/js/intlTelInputWithUtils.min.js +6 -6
- package/package.json +11 -6
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +97 -53
- package/react/build/IntlTelInput.d.ts +1 -0
- package/react/build/IntlTelInput.js +97 -53
- package/react/build/IntlTelInputWithUtils.cjs +97 -53
- package/react/build/IntlTelInputWithUtils.js +97 -53
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +286 -260
- package/vue/build/IntlTelInputWithUtils.mjs +539 -513
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { mergeModels as
|
|
2
|
-
const
|
|
1
|
+
import { mergeModels as k, useModel as B, ref as D, onMounted as R, watch as F, onUnmounted as V, withDirectives as z, createElementBlock as $, openBlock as O, mergeProps as j, vModelText as U } from "vue";
|
|
2
|
+
const H = [
|
|
3
3
|
[
|
|
4
4
|
"af",
|
|
5
5
|
// Afghanistan
|
|
@@ -1226,6 +1226,13 @@ const j = [
|
|
|
1226
1226
|
// Tuvalu
|
|
1227
1227
|
"688"
|
|
1228
1228
|
],
|
|
1229
|
+
[
|
|
1230
|
+
"vi",
|
|
1231
|
+
// U.S. Virgin Islands
|
|
1232
|
+
"1",
|
|
1233
|
+
24,
|
|
1234
|
+
["340"]
|
|
1235
|
+
],
|
|
1229
1236
|
[
|
|
1230
1237
|
"ug",
|
|
1231
1238
|
// Uganda
|
|
@@ -1260,13 +1267,6 @@ const j = [
|
|
|
1260
1267
|
// Uruguay
|
|
1261
1268
|
"598"
|
|
1262
1269
|
],
|
|
1263
|
-
[
|
|
1264
|
-
"vi",
|
|
1265
|
-
// U.S. Virgin Islands
|
|
1266
|
-
"1",
|
|
1267
|
-
24,
|
|
1268
|
-
["340"]
|
|
1269
|
-
],
|
|
1270
1270
|
[
|
|
1271
1271
|
"uz",
|
|
1272
1272
|
// Uzbekistan
|
|
@@ -1323,19 +1323,19 @@ const j = [
|
|
|
1323
1323
|
"263"
|
|
1324
1324
|
]
|
|
1325
1325
|
], w = [];
|
|
1326
|
-
for (const
|
|
1326
|
+
for (const d of H)
|
|
1327
1327
|
w.push({
|
|
1328
1328
|
name: "",
|
|
1329
1329
|
// populated in the plugin
|
|
1330
|
-
iso2:
|
|
1331
|
-
dialCode:
|
|
1332
|
-
priority:
|
|
1333
|
-
areaCodes:
|
|
1330
|
+
iso2: d[0],
|
|
1331
|
+
dialCode: d[1],
|
|
1332
|
+
priority: d[2] || 0,
|
|
1333
|
+
areaCodes: d[3] || null,
|
|
1334
1334
|
nodeById: {},
|
|
1335
1335
|
// populated by the plugin
|
|
1336
|
-
nationalPrefix:
|
|
1336
|
+
nationalPrefix: d[4] || null
|
|
1337
1337
|
});
|
|
1338
|
-
const
|
|
1338
|
+
const K = {
|
|
1339
1339
|
ad: "Andorra",
|
|
1340
1340
|
ae: "United Arab Emirates",
|
|
1341
1341
|
af: "Afghanistan",
|
|
@@ -1578,7 +1578,7 @@ const U = {
|
|
|
1578
1578
|
za: "South Africa",
|
|
1579
1579
|
zm: "Zambia",
|
|
1580
1580
|
zw: "Zimbabwe"
|
|
1581
|
-
},
|
|
1581
|
+
}, W = {
|
|
1582
1582
|
selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
|
|
1583
1583
|
noCountrySelected: "Select country",
|
|
1584
1584
|
countryListAriaLabel: "List of countries",
|
|
@@ -1590,17 +1590,17 @@ const U = {
|
|
|
1590
1590
|
// additional countries (not supported by country-list library)
|
|
1591
1591
|
ac: "Ascension Island",
|
|
1592
1592
|
xk: "Kosovo"
|
|
1593
|
-
},
|
|
1594
|
-
for (const
|
|
1595
|
-
|
|
1596
|
-
let
|
|
1597
|
-
const
|
|
1593
|
+
}, x = { ...K, ...W };
|
|
1594
|
+
for (const d of w)
|
|
1595
|
+
d.name = x[d.iso2];
|
|
1596
|
+
let G = 0;
|
|
1597
|
+
const S = (d) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(d).matches, q = () => {
|
|
1598
1598
|
if (typeof navigator < "u" && typeof window < "u") {
|
|
1599
|
-
const
|
|
1600
|
-
return
|
|
1599
|
+
const d = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = S("(max-width: 500px)"), e = S("(max-height: 600px)"), i = S("(pointer: coarse)");
|
|
1600
|
+
return d || t || i && e;
|
|
1601
1601
|
}
|
|
1602
1602
|
return !1;
|
|
1603
|
-
},
|
|
1603
|
+
}, E = {
|
|
1604
1604
|
// Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
|
|
1605
1605
|
allowPhonewords: !1,
|
|
1606
1606
|
//* Whether or not to allow the dropdown.
|
|
@@ -1648,10 +1648,10 @@ const N = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
|
|
|
1648
1648
|
//* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
|
|
1649
1649
|
strictMode: !1,
|
|
1650
1650
|
//* Use full screen popup instead of dropdown for country list.
|
|
1651
|
-
useFullscreenPopup:
|
|
1651
|
+
useFullscreenPopup: q(),
|
|
1652
1652
|
//* The number type to enforce during validation.
|
|
1653
1653
|
validationNumberTypes: ["MOBILE"]
|
|
1654
|
-
},
|
|
1654
|
+
}, Y = [
|
|
1655
1655
|
"800",
|
|
1656
1656
|
"822",
|
|
1657
1657
|
"833",
|
|
@@ -1669,32 +1669,32 @@ const N = (u) => typeof window < "u" && typeof window.matchMedia == "function" &
|
|
|
1669
1669
|
"887",
|
|
1670
1670
|
"888",
|
|
1671
1671
|
"889"
|
|
1672
|
-
],
|
|
1673
|
-
const t =
|
|
1672
|
+
], L = (d) => d.replace(/\D/g, ""), P = (d = "") => d.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), T = (d) => {
|
|
1673
|
+
const t = L(d);
|
|
1674
1674
|
if (t.charAt(0) === "1") {
|
|
1675
1675
|
const e = t.substring(1, 4);
|
|
1676
|
-
return
|
|
1676
|
+
return Y.includes(e);
|
|
1677
1677
|
}
|
|
1678
1678
|
return !1;
|
|
1679
|
-
},
|
|
1679
|
+
}, J = (d, t, e, i) => {
|
|
1680
1680
|
if (e === 0 && !i)
|
|
1681
1681
|
return 0;
|
|
1682
1682
|
let s = 0;
|
|
1683
1683
|
for (let n = 0; n < t.length; n++) {
|
|
1684
|
-
if (/[+0-9]/.test(t[n]) && s++, s ===
|
|
1684
|
+
if (/[+0-9]/.test(t[n]) && s++, s === d && !i)
|
|
1685
1685
|
return n + 1;
|
|
1686
|
-
if (i && s ===
|
|
1686
|
+
if (i && s === d + 1)
|
|
1687
1687
|
return n;
|
|
1688
1688
|
}
|
|
1689
1689
|
return t.length;
|
|
1690
|
-
},
|
|
1691
|
-
const i = document.createElement(
|
|
1690
|
+
}, m = (d, t, e) => {
|
|
1691
|
+
const i = document.createElement(d);
|
|
1692
1692
|
return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
|
|
1693
|
-
}, I = (
|
|
1694
|
-
const { instances: e } =
|
|
1695
|
-
Object.values(e).forEach((i) => i[
|
|
1693
|
+
}, I = (d, ...t) => {
|
|
1694
|
+
const { instances: e } = u;
|
|
1695
|
+
Object.values(e).forEach((i) => i[d](...t));
|
|
1696
1696
|
};
|
|
1697
|
-
class
|
|
1697
|
+
class N {
|
|
1698
1698
|
/**
|
|
1699
1699
|
* Build a space-delimited class string from an object map of className -> truthy/falsey.
|
|
1700
1700
|
* Only keys with truthy values are included.
|
|
@@ -1703,13 +1703,13 @@ class L {
|
|
|
1703
1703
|
return Object.keys(t).filter((e) => !!t[e]).join(" ");
|
|
1704
1704
|
}
|
|
1705
1705
|
constructor(t, e = {}) {
|
|
1706
|
-
this.id =
|
|
1706
|
+
this.id = G++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, E, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
|
|
1707
1707
|
}
|
|
1708
1708
|
//* Can't be private as it's called from intlTelInput convenience wrapper.
|
|
1709
1709
|
_init() {
|
|
1710
1710
|
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]"), this.telInput.dir = "ltr";
|
|
1711
1711
|
const t = this.options.allowDropdown || this.options.separateDialCode;
|
|
1712
|
-
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 = { ...
|
|
1712
|
+
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 = { ...x, ...this.options.i18n };
|
|
1713
1713
|
const e = new Promise((s, n) => {
|
|
1714
1714
|
this.resolveAutoCountryPromise = s, this.rejectAutoCountryPromise = n;
|
|
1715
1715
|
}), i = new Promise((s, n) => {
|
|
@@ -1727,22 +1727,24 @@ class L {
|
|
|
1727
1727
|
//* Precompute and cache country search tokens to speed up filtering
|
|
1728
1728
|
_cacheSearchTokens() {
|
|
1729
1729
|
for (const t of this.countries)
|
|
1730
|
-
t.normalisedName =
|
|
1730
|
+
t.normalisedName = P(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`;
|
|
1731
1731
|
}
|
|
1732
1732
|
//* Sort countries by countryOrder option (if present), then name.
|
|
1733
1733
|
_sortCountries() {
|
|
1734
1734
|
this.options.countryOrder && (this.options.countryOrder = this.options.countryOrder.map((t) => t.toLowerCase())), this.countries.sort((t, e) => {
|
|
1735
1735
|
const { countryOrder: i } = this.options;
|
|
1736
1736
|
if (i) {
|
|
1737
|
-
const s = i.indexOf(t.iso2), n = i.indexOf(e.iso2),
|
|
1738
|
-
if (
|
|
1739
|
-
return
|
|
1737
|
+
const s = i.indexOf(t.iso2), n = i.indexOf(e.iso2), a = s > -1, o = n > -1;
|
|
1738
|
+
if (a || o)
|
|
1739
|
+
return a && o ? s - n : a ? -1 : 1;
|
|
1740
1740
|
}
|
|
1741
1741
|
return t.name.localeCompare(e.name);
|
|
1742
1742
|
});
|
|
1743
1743
|
}
|
|
1744
1744
|
//* Add a dial code to this.dialCodeToIso2Map.
|
|
1745
1745
|
_addToDialCodeMap(t, e, i) {
|
|
1746
|
+
if (!t || !e)
|
|
1747
|
+
return;
|
|
1746
1748
|
e.length > this.dialCodeMaxLen && (this.dialCodeMaxLen = e.length), this.dialCodeToIso2Map.hasOwnProperty(e) || (this.dialCodeToIso2Map[e] = []);
|
|
1747
1749
|
const s = this.dialCodeToIso2Map[e];
|
|
1748
1750
|
if (s.includes(t))
|
|
@@ -1782,13 +1784,16 @@ class L {
|
|
|
1782
1784
|
this.dialCodes = /* @__PURE__ */ new Set(), this.dialCodeMaxLen = 0, this.dialCodeToIso2Map = {};
|
|
1783
1785
|
for (const t of this.countries)
|
|
1784
1786
|
this.dialCodes.has(t.dialCode) || this.dialCodes.add(t.dialCode), this._addToDialCodeMap(t.iso2, t.dialCode, t.priority);
|
|
1787
|
+
(this.options.onlyCountries.length || this.options.excludeCountries.length) && this.dialCodes.forEach((t) => {
|
|
1788
|
+
this.dialCodeToIso2Map[t] = this.dialCodeToIso2Map[t].filter(Boolean);
|
|
1789
|
+
});
|
|
1785
1790
|
for (const t of this.countries)
|
|
1786
1791
|
if (t.areaCodes) {
|
|
1787
1792
|
const e = this.dialCodeToIso2Map[t.dialCode][0];
|
|
1788
1793
|
for (const i of t.areaCodes) {
|
|
1789
1794
|
for (let s = 1; s < i.length; s++) {
|
|
1790
|
-
const n = i.substring(0, s),
|
|
1791
|
-
this._addToDialCodeMap(e,
|
|
1795
|
+
const n = i.substring(0, s), a = t.dialCode + n;
|
|
1796
|
+
this._addToDialCodeMap(e, a), this._addToDialCodeMap(t.iso2, a);
|
|
1792
1797
|
}
|
|
1793
1798
|
this._addToDialCodeMap(t.iso2, t.dialCode + i);
|
|
1794
1799
|
}
|
|
@@ -1796,7 +1801,7 @@ class L {
|
|
|
1796
1801
|
}
|
|
1797
1802
|
//* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
|
|
1798
1803
|
_generateMarkup() {
|
|
1799
|
-
var
|
|
1804
|
+
var C, f, b;
|
|
1800
1805
|
this.telInput.classList.add("iti__tel-input"), !this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete")) && this.telInput.setAttribute("autocomplete", "off");
|
|
1801
1806
|
const {
|
|
1802
1807
|
allowDropdown: t,
|
|
@@ -1804,25 +1809,25 @@ class L {
|
|
|
1804
1809
|
showFlags: i,
|
|
1805
1810
|
containerClass: s,
|
|
1806
1811
|
hiddenInput: n,
|
|
1807
|
-
dropdownContainer:
|
|
1812
|
+
dropdownContainer: a,
|
|
1808
1813
|
fixDropdownWidth: o,
|
|
1809
|
-
useFullscreenPopup:
|
|
1810
|
-
countrySearch:
|
|
1811
|
-
i18n:
|
|
1812
|
-
} = this.options,
|
|
1814
|
+
useFullscreenPopup: l,
|
|
1815
|
+
countrySearch: h,
|
|
1816
|
+
i18n: p
|
|
1817
|
+
} = this.options, r = N._buildClassNames({
|
|
1813
1818
|
iti: !0,
|
|
1814
1819
|
"iti--allow-dropdown": t,
|
|
1815
1820
|
"iti--show-flags": i,
|
|
1816
|
-
"iti--inline-dropdown": !
|
|
1821
|
+
"iti--inline-dropdown": !l,
|
|
1817
1822
|
[s]: !!s
|
|
1818
|
-
}),
|
|
1819
|
-
if ((
|
|
1820
|
-
this.countryContainer =
|
|
1823
|
+
}), c = m("div", { class: r });
|
|
1824
|
+
if ((C = this.telInput.parentNode) == null || C.insertBefore(c, this.telInput), t || i || e) {
|
|
1825
|
+
this.countryContainer = m(
|
|
1821
1826
|
"div",
|
|
1822
1827
|
// visibly hidden until we measure it's width to set the input padding correctly
|
|
1823
1828
|
{ class: "iti__country-container iti__v-hide" },
|
|
1824
|
-
|
|
1825
|
-
), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry =
|
|
1829
|
+
c
|
|
1830
|
+
), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = m(
|
|
1826
1831
|
"button",
|
|
1827
1832
|
{
|
|
1828
1833
|
type: "button",
|
|
@@ -1833,92 +1838,92 @@ class L {
|
|
|
1833
1838
|
"aria-controls": `iti-${this.id}__dropdown-content`
|
|
1834
1839
|
},
|
|
1835
1840
|
this.countryContainer
|
|
1836
|
-
), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry =
|
|
1841
|
+
), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m(
|
|
1837
1842
|
"div",
|
|
1838
1843
|
{ class: "iti__selected-country" },
|
|
1839
1844
|
this.countryContainer
|
|
1840
1845
|
);
|
|
1841
|
-
const
|
|
1846
|
+
const g = m(
|
|
1842
1847
|
"div",
|
|
1843
1848
|
{ class: "iti__selected-country-primary" },
|
|
1844
1849
|
this.selectedCountry
|
|
1845
1850
|
);
|
|
1846
|
-
if (this.selectedCountryInner =
|
|
1851
|
+
if (this.selectedCountryInner = m(
|
|
1847
1852
|
"div",
|
|
1848
1853
|
{ class: "iti__flag" },
|
|
1849
|
-
|
|
1850
|
-
), t && (this.dropdownArrow =
|
|
1854
|
+
g
|
|
1855
|
+
), t && (this.dropdownArrow = m(
|
|
1851
1856
|
"div",
|
|
1852
1857
|
{ class: "iti__arrow", "aria-hidden": "true" },
|
|
1853
|
-
|
|
1854
|
-
)), e && (this.selectedDialCode =
|
|
1858
|
+
g
|
|
1859
|
+
)), e && (this.selectedDialCode = m(
|
|
1855
1860
|
"div",
|
|
1856
1861
|
{ class: "iti__selected-dial-code", dir: "ltr" },
|
|
1857
1862
|
this.selectedCountry
|
|
1858
1863
|
)), t) {
|
|
1859
|
-
const
|
|
1860
|
-
if (this.dropdownContent =
|
|
1864
|
+
const _ = o ? "" : "iti--flexible-dropdown-width";
|
|
1865
|
+
if (this.dropdownContent = m("div", {
|
|
1861
1866
|
id: `iti-${this.id}__dropdown-content`,
|
|
1862
|
-
class: `iti__dropdown-content iti__hide ${
|
|
1867
|
+
class: `iti__dropdown-content iti__hide ${_}`,
|
|
1863
1868
|
role: "dialog",
|
|
1864
1869
|
"aria-modal": "true"
|
|
1865
|
-
}),
|
|
1866
|
-
const
|
|
1870
|
+
}), h) {
|
|
1871
|
+
const y = m(
|
|
1867
1872
|
"div",
|
|
1868
1873
|
{ class: "iti__search-input-wrapper" },
|
|
1869
1874
|
this.dropdownContent
|
|
1870
1875
|
);
|
|
1871
|
-
this.searchIcon =
|
|
1876
|
+
this.searchIcon = m(
|
|
1872
1877
|
"span",
|
|
1873
1878
|
{
|
|
1874
1879
|
class: "iti__search-icon",
|
|
1875
1880
|
"aria-hidden": "true"
|
|
1876
1881
|
},
|
|
1877
|
-
|
|
1882
|
+
y
|
|
1878
1883
|
), this.searchIcon.innerHTML = `
|
|
1879
1884
|
<svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
|
|
1880
1885
|
<circle cx="11" cy="11" r="7" />
|
|
1881
1886
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
1882
|
-
</svg>`, this.searchInput =
|
|
1887
|
+
</svg>`, this.searchInput = m(
|
|
1883
1888
|
"input",
|
|
1884
1889
|
{
|
|
1885
1890
|
id: `iti-${this.id}__search-input`,
|
|
1886
1891
|
// Chrome says inputs need either a name or an id
|
|
1887
1892
|
type: "search",
|
|
1888
1893
|
class: "iti__search-input",
|
|
1889
|
-
placeholder:
|
|
1894
|
+
placeholder: p.searchPlaceholder,
|
|
1890
1895
|
// role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
|
|
1891
1896
|
role: "combobox",
|
|
1892
1897
|
"aria-expanded": "true",
|
|
1893
|
-
"aria-label":
|
|
1898
|
+
"aria-label": p.searchPlaceholder,
|
|
1894
1899
|
"aria-controls": `iti-${this.id}__country-listbox`,
|
|
1895
1900
|
"aria-autocomplete": "list",
|
|
1896
1901
|
autocomplete: "off"
|
|
1897
1902
|
},
|
|
1898
|
-
|
|
1899
|
-
), this.searchClearButton =
|
|
1903
|
+
y
|
|
1904
|
+
), this.searchClearButton = m(
|
|
1900
1905
|
"button",
|
|
1901
1906
|
{
|
|
1902
1907
|
type: "button",
|
|
1903
1908
|
class: "iti__search-clear iti__hide",
|
|
1904
|
-
"aria-label":
|
|
1909
|
+
"aria-label": p.clearSearchAriaLabel,
|
|
1905
1910
|
tabindex: "-1"
|
|
1906
1911
|
},
|
|
1907
|
-
|
|
1912
|
+
y
|
|
1908
1913
|
);
|
|
1909
|
-
const
|
|
1914
|
+
const v = `iti-${this.id}-clear-mask`;
|
|
1910
1915
|
this.searchClearButton.innerHTML = `
|
|
1911
1916
|
<svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
|
1912
|
-
<mask id="${
|
|
1917
|
+
<mask id="${v}" maskUnits="userSpaceOnUse">
|
|
1913
1918
|
<rect width="16" height="16" fill="white" />
|
|
1914
1919
|
<path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
|
|
1915
1920
|
</mask>
|
|
1916
|
-
<circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${
|
|
1917
|
-
</svg>`, this.searchResultsA11yText =
|
|
1921
|
+
<circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${v})" />
|
|
1922
|
+
</svg>`, this.searchResultsA11yText = m(
|
|
1918
1923
|
"span",
|
|
1919
1924
|
{ class: "iti__a11y-text" },
|
|
1920
1925
|
this.dropdownContent
|
|
1921
|
-
), this.searchNoResults =
|
|
1926
|
+
), this.searchNoResults = m(
|
|
1922
1927
|
"div",
|
|
1923
1928
|
{
|
|
1924
1929
|
class: "iti__no-results iti__hide",
|
|
@@ -1926,52 +1931,52 @@ class L {
|
|
|
1926
1931
|
// all a11y messaging happens in this.searchResultsA11yText
|
|
1927
1932
|
},
|
|
1928
1933
|
this.dropdownContent
|
|
1929
|
-
), this.searchNoResults.textContent =
|
|
1934
|
+
), this.searchNoResults.textContent = p.zeroSearchResults;
|
|
1930
1935
|
}
|
|
1931
|
-
if (this.countryList =
|
|
1936
|
+
if (this.countryList = m(
|
|
1932
1937
|
"ul",
|
|
1933
1938
|
{
|
|
1934
1939
|
class: "iti__country-list",
|
|
1935
1940
|
id: `iti-${this.id}__country-listbox`,
|
|
1936
1941
|
role: "listbox",
|
|
1937
|
-
"aria-label":
|
|
1942
|
+
"aria-label": p.countryListAriaLabel
|
|
1938
1943
|
},
|
|
1939
1944
|
this.dropdownContent
|
|
1940
|
-
), this._appendListItems(),
|
|
1941
|
-
const
|
|
1945
|
+
), this._appendListItems(), h && this._updateSearchResultsA11yText(), a) {
|
|
1946
|
+
const y = N._buildClassNames({
|
|
1942
1947
|
iti: !0,
|
|
1943
1948
|
"iti--container": !0,
|
|
1944
|
-
"iti--fullscreen-popup":
|
|
1945
|
-
"iti--inline-dropdown": !
|
|
1949
|
+
"iti--fullscreen-popup": l,
|
|
1950
|
+
"iti--inline-dropdown": !l,
|
|
1946
1951
|
[s]: !!s
|
|
1947
1952
|
});
|
|
1948
|
-
this.dropdown =
|
|
1953
|
+
this.dropdown = m("div", { class: y }), this.dropdown.appendChild(this.dropdownContent);
|
|
1949
1954
|
} else
|
|
1950
1955
|
this.countryContainer.appendChild(this.dropdownContent);
|
|
1951
1956
|
}
|
|
1952
1957
|
}
|
|
1953
|
-
if (
|
|
1954
|
-
const
|
|
1955
|
-
if (
|
|
1956
|
-
const
|
|
1957
|
-
|
|
1958
|
+
if (c.appendChild(this.telInput), this.countryContainer && (this._updateInputPadding(), this.countryContainer.classList.remove("iti__v-hide")), n) {
|
|
1959
|
+
const g = this.telInput.getAttribute("name") || "", _ = n(g);
|
|
1960
|
+
if (_.phone) {
|
|
1961
|
+
const y = (f = this.telInput.form) == null ? void 0 : f.querySelector(`input[name="${_.phone}"]`);
|
|
1962
|
+
y ? this.hiddenInput = y : (this.hiddenInput = m("input", {
|
|
1958
1963
|
type: "hidden",
|
|
1959
|
-
name:
|
|
1960
|
-
}),
|
|
1964
|
+
name: _.phone
|
|
1965
|
+
}), c.appendChild(this.hiddenInput));
|
|
1961
1966
|
}
|
|
1962
|
-
if (
|
|
1963
|
-
const
|
|
1964
|
-
|
|
1967
|
+
if (_.country) {
|
|
1968
|
+
const y = (b = this.telInput.form) == null ? void 0 : b.querySelector(`input[name="${_.country}"]`);
|
|
1969
|
+
y ? this.hiddenInputCountry = y : (this.hiddenInputCountry = m("input", {
|
|
1965
1970
|
type: "hidden",
|
|
1966
|
-
name:
|
|
1967
|
-
}),
|
|
1971
|
+
name: _.country
|
|
1972
|
+
}), c.appendChild(this.hiddenInputCountry));
|
|
1968
1973
|
}
|
|
1969
1974
|
}
|
|
1970
1975
|
}
|
|
1971
1976
|
//* For each country: add a country list item <li> to the countryList <ul> container.
|
|
1972
1977
|
_appendListItems() {
|
|
1973
1978
|
for (let t = 0; t < this.countries.length; t++) {
|
|
1974
|
-
const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s =
|
|
1979
|
+
const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m(
|
|
1975
1980
|
"li",
|
|
1976
1981
|
{
|
|
1977
1982
|
id: `iti-${this.id}__item-${e.iso2}`,
|
|
@@ -1993,12 +1998,12 @@ class L {
|
|
|
1993
1998
|
//* 1. Extracting a dial code from the given number
|
|
1994
1999
|
//* 2. Using explicit initialCountry
|
|
1995
2000
|
_setInitialState(t = !1) {
|
|
1996
|
-
const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i,
|
|
1997
|
-
if (
|
|
2001
|
+
const e = this.telInput.getAttribute("value"), i = this.telInput.value, n = e && e.charAt(0) === "+" && (!i || i.charAt(0) !== "+") ? e : i, a = this._getDialCode(n), o = T(n), { initialCountry: l, geoIpLookup: h } = this.options, p = l === "auto" && h;
|
|
2002
|
+
if (a && !o)
|
|
1998
2003
|
this._updateCountryFromNumber(n);
|
|
1999
|
-
else if (!
|
|
2000
|
-
const
|
|
2001
|
-
|
|
2004
|
+
else if (!p || t) {
|
|
2005
|
+
const r = l ? l.toLowerCase() : "";
|
|
2006
|
+
r && this._getCountryData(r, !0) ? this._setCountry(r) : a && o ? this._setCountry("us") : this._setCountry();
|
|
2002
2007
|
}
|
|
2003
2008
|
n && this._updateValFromNumber(n);
|
|
2004
2009
|
}
|
|
@@ -2034,18 +2039,18 @@ class L {
|
|
|
2034
2039
|
//* Init many requests: utils script / geo ip lookup.
|
|
2035
2040
|
_initRequests() {
|
|
2036
2041
|
let { loadUtils: t, initialCountry: e, geoIpLookup: i } = this.options;
|
|
2037
|
-
t && !
|
|
2042
|
+
t && !u.utils ? (this._handlePageLoad = () => {
|
|
2038
2043
|
var n;
|
|
2039
|
-
window.removeEventListener("load", this._handlePageLoad), (n =
|
|
2044
|
+
window.removeEventListener("load", this._handlePageLoad), (n = u.attachUtils(t)) == null || n.catch(() => {
|
|
2040
2045
|
});
|
|
2041
|
-
},
|
|
2046
|
+
}, u.documentReady() ? this._handlePageLoad() : window.addEventListener("load", this._handlePageLoad)) : this.resolveUtilsScriptPromise(), e === "auto" && i && !this.selectedCountryData.iso2 ? this._loadAutoCountry() : this.resolveAutoCountryPromise();
|
|
2042
2047
|
}
|
|
2043
2048
|
//* Perform the geo ip lookup.
|
|
2044
2049
|
_loadAutoCountry() {
|
|
2045
|
-
|
|
2050
|
+
u.autoCountry ? this.handleAutoCountry() : u.startedLoadingAutoCountry || (u.startedLoadingAutoCountry = !0, typeof this.options.geoIpLookup == "function" && this.options.geoIpLookup(
|
|
2046
2051
|
(t = "") => {
|
|
2047
2052
|
const e = t.toLowerCase();
|
|
2048
|
-
e && this._getCountryData(e, !0) ? (
|
|
2053
|
+
e && this._getCountryData(e, !0) ? (u.autoCountry = e, setTimeout(() => I("handleAutoCountry"))) : (this._setInitialState(!0), I("rejectAutoCountryPromise"));
|
|
2049
2054
|
},
|
|
2050
2055
|
() => {
|
|
2051
2056
|
this._setInitialState(!0), I("rejectAutoCountryPromise");
|
|
@@ -2053,25 +2058,25 @@ class L {
|
|
|
2053
2058
|
));
|
|
2054
2059
|
}
|
|
2055
2060
|
_openDropdownWithPlus() {
|
|
2056
|
-
this._openDropdown(), this.searchInput.value = "+", this._filterCountries(""
|
|
2061
|
+
this._openDropdown(), this.searchInput.value = "+", this._filterCountries("");
|
|
2057
2062
|
}
|
|
2058
2063
|
//* Initialize the tel input listeners.
|
|
2059
2064
|
_initTelInputListeners() {
|
|
2060
2065
|
const { strictMode: t, formatAsYouType: e, separateDialCode: i, allowDropdown: s, countrySearch: n } = this.options;
|
|
2061
|
-
let
|
|
2062
|
-
new RegExp("\\p{L}", "u").test(this.telInput.value) && (
|
|
2066
|
+
let a = !1;
|
|
2067
|
+
new RegExp("\\p{L}", "u").test(this.telInput.value) && (a = !0), this._handleInputEvent = (o) => {
|
|
2063
2068
|
if (this.isAndroid && (o == null ? void 0 : o.data) === "+" && i && s && n) {
|
|
2064
|
-
const
|
|
2065
|
-
this.telInput.value =
|
|
2069
|
+
const r = this.telInput.selectionStart || 0, c = this.telInput.value.substring(0, r - 1), C = this.telInput.value.substring(r);
|
|
2070
|
+
this.telInput.value = c + C, this._openDropdownWithPlus();
|
|
2066
2071
|
return;
|
|
2067
2072
|
}
|
|
2068
2073
|
this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
|
|
2069
|
-
const
|
|
2070
|
-
|
|
2071
|
-
const
|
|
2072
|
-
if (e && !
|
|
2073
|
-
const
|
|
2074
|
-
this.telInput.value =
|
|
2074
|
+
const l = (o == null ? void 0 : o.data) && /[^+0-9]/.test(o.data), h = (o == null ? void 0 : o.inputType) === "insertFromPaste" && this.telInput.value;
|
|
2075
|
+
l || h && !t ? a = !0 : /[^+0-9]/.test(this.telInput.value) || (a = !1);
|
|
2076
|
+
const p = (o == null ? void 0 : o.detail) && o.detail.isSetNumber;
|
|
2077
|
+
if (e && !a && !p) {
|
|
2078
|
+
const r = this.telInput.selectionStart || 0, C = this.telInput.value.substring(0, r).replace(/[^+0-9]/g, "").length, f = (o == null ? void 0 : o.inputType) === "deleteContentForward", b = this._formatNumberAsYouType(), g = J(C, b, r, f);
|
|
2079
|
+
this.telInput.value = b, this.telInput.setSelectionRange(g, g);
|
|
2075
2080
|
}
|
|
2076
2081
|
}, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (o) => {
|
|
2077
2082
|
if (o.key && o.key.length === 1 && !o.altKey && !o.ctrlKey && !o.metaKey) {
|
|
@@ -2080,11 +2085,25 @@ class L {
|
|
|
2080
2085
|
return;
|
|
2081
2086
|
}
|
|
2082
2087
|
if (t) {
|
|
2083
|
-
const
|
|
2084
|
-
(!
|
|
2088
|
+
const l = this.telInput.value, p = !(l.charAt(0) === "+") && this.telInput.selectionStart === 0 && o.key === "+", r = /^[0-9]$/.test(o.key), c = i ? r : p || r, C = l.slice(0, this.telInput.selectionStart) + o.key + l.slice(this.telInput.selectionEnd), f = this._getFullNumber(C), b = u.utils.getCoreNumber(f, this.selectedCountryData.iso2), g = this.maxCoreNumberLength && b.length > this.maxCoreNumberLength, y = this._getNewCountryFromNumber(f) !== null;
|
|
2089
|
+
(!c || g && !y && !p) && o.preventDefault();
|
|
2085
2090
|
}
|
|
2086
2091
|
}
|
|
2087
|
-
}, this.telInput.addEventListener("keydown", this._handleKeydownEvent))
|
|
2092
|
+
}, this.telInput.addEventListener("keydown", this._handleKeydownEvent)), t && (this._handlePasteEvent = (o) => {
|
|
2093
|
+
o.preventDefault();
|
|
2094
|
+
const l = this.telInput, h = l.selectionStart, p = l.selectionEnd, r = o.clipboardData.getData("text"), c = h === 0 && p > 0, C = !l.value.startsWith("+") || c, f = r.replace(/[^0-9+]/g, ""), b = f.startsWith("+"), g = f.replace(/\+/g, ""), _ = b && C ? `+${g}` : g;
|
|
2095
|
+
let y = l.value.slice(0, h) + _ + l.value.slice(p);
|
|
2096
|
+
const v = u.utils.getCoreNumber(y, this.selectedCountryData.iso2);
|
|
2097
|
+
if (this.maxCoreNumberLength && v.length > this.maxCoreNumberLength)
|
|
2098
|
+
if (l.selectionEnd === l.value.length) {
|
|
2099
|
+
const M = v.length - this.maxCoreNumberLength;
|
|
2100
|
+
y = y.slice(0, y.length - M);
|
|
2101
|
+
} else
|
|
2102
|
+
return;
|
|
2103
|
+
l.value = y;
|
|
2104
|
+
const A = h + _.length;
|
|
2105
|
+
l.setSelectionRange(A, A), l.dispatchEvent(new InputEvent("input", { bubbles: !0 }));
|
|
2106
|
+
}, this.telInput.addEventListener("paste", this._handlePasteEvent));
|
|
2088
2107
|
}
|
|
2089
2108
|
//* Adhere to the input's maxlength attr.
|
|
2090
2109
|
_cap(t) {
|
|
@@ -2145,7 +2164,7 @@ class L {
|
|
|
2145
2164
|
}, document.addEventListener("keydown", this._handleKeydownOnDropdown), this.options.countrySearch) {
|
|
2146
2165
|
const i = () => {
|
|
2147
2166
|
const n = this.searchInput.value.trim();
|
|
2148
|
-
|
|
2167
|
+
this._filterCountries(n), this.searchInput.value ? this.searchClearButton.classList.remove("iti__hide") : this.searchClearButton.classList.add("iti__hide");
|
|
2149
2168
|
};
|
|
2150
2169
|
let s = null;
|
|
2151
2170
|
this._handleSearchChange = () => {
|
|
@@ -2167,25 +2186,31 @@ class L {
|
|
|
2167
2186
|
}
|
|
2168
2187
|
}
|
|
2169
2188
|
//* Country search enabled: Filter the countries according to the search query.
|
|
2170
|
-
_filterCountries(t
|
|
2171
|
-
let
|
|
2189
|
+
_filterCountries(t) {
|
|
2190
|
+
let e = !0;
|
|
2172
2191
|
this.countryList.innerHTML = "";
|
|
2173
|
-
const
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2192
|
+
const i = P(t);
|
|
2193
|
+
let s;
|
|
2194
|
+
if (t === "")
|
|
2195
|
+
s = this.countries;
|
|
2196
|
+
else {
|
|
2197
|
+
const n = [], a = [], o = [], l = [], h = [], p = [];
|
|
2198
|
+
for (const r of this.countries)
|
|
2199
|
+
r.iso2 === i ? n.push(r) : r.normalisedName.startsWith(i) ? a.push(r) : r.normalisedName.includes(i) ? o.push(r) : i === r.dialCode || i === r.dialCodePlus ? l.push(r) : r.dialCodePlus.includes(i) ? h.push(r) : r.initials.includes(i) && p.push(r);
|
|
2200
|
+
s = [
|
|
2201
|
+
...n.sort((r, c) => r.priority - c.priority),
|
|
2202
|
+
...a.sort((r, c) => r.priority - c.priority),
|
|
2203
|
+
...o.sort((r, c) => r.priority - c.priority),
|
|
2204
|
+
...l.sort((r, c) => r.priority - c.priority),
|
|
2205
|
+
...h.sort((r, c) => r.priority - c.priority),
|
|
2206
|
+
...p.sort((r, c) => r.priority - c.priority)
|
|
2207
|
+
];
|
|
2187
2208
|
}
|
|
2188
|
-
|
|
2209
|
+
for (const n of s) {
|
|
2210
|
+
const a = n.nodeById[this.id];
|
|
2211
|
+
a && (this.countryList.appendChild(a), e && (this._highlightListItem(a, !1), e = !1));
|
|
2212
|
+
}
|
|
2213
|
+
e ? (this._highlightListItem(null, !1), this.searchNoResults && this.searchNoResults.classList.remove("iti__hide")) : this.searchNoResults && this.searchNoResults.classList.add("iti__hide"), this.countryList.scrollTop = 0, this._updateSearchResultsA11yText();
|
|
2189
2214
|
}
|
|
2190
2215
|
//* Update search results text (for a11y).
|
|
2191
2216
|
_updateSearchResultsA11yText() {
|
|
@@ -2207,12 +2232,12 @@ class L {
|
|
|
2207
2232
|
//* NOTE: this is called from _setInitialState, handleUtils and setNumber.
|
|
2208
2233
|
_updateValFromNumber(t) {
|
|
2209
2234
|
let e = t;
|
|
2210
|
-
if (this.options.formatOnDisplay &&
|
|
2211
|
-
const i = this.options.nationalMode || e.charAt(0) !== "+" && !this.options.separateDialCode, { NATIONAL: s, INTERNATIONAL: n } =
|
|
2212
|
-
e =
|
|
2235
|
+
if (this.options.formatOnDisplay && u.utils && this.selectedCountryData) {
|
|
2236
|
+
const i = this.options.nationalMode || e.charAt(0) !== "+" && !this.options.separateDialCode, { NATIONAL: s, INTERNATIONAL: n } = u.utils.numberFormat, a = i ? s : n;
|
|
2237
|
+
e = u.utils.formatNumber(
|
|
2213
2238
|
e,
|
|
2214
2239
|
this.selectedCountryData.iso2,
|
|
2215
|
-
|
|
2240
|
+
a
|
|
2216
2241
|
);
|
|
2217
2242
|
}
|
|
2218
2243
|
e = this._beforeSetNumber(e), this.telInput.value = e;
|
|
@@ -2227,8 +2252,8 @@ class L {
|
|
|
2227
2252
|
const { dialCode: e, nationalPrefix: i } = this.selectedCountryData;
|
|
2228
2253
|
if (t.charAt(0) === "+" || !e)
|
|
2229
2254
|
return t;
|
|
2230
|
-
const
|
|
2231
|
-
return `+${e}${
|
|
2255
|
+
const a = i && t.charAt(0) === i && !this.options.separateDialCode ? t.substring(1) : t;
|
|
2256
|
+
return `+${e}${a}`;
|
|
2232
2257
|
}
|
|
2233
2258
|
// Get the country ISO2 code from the given number
|
|
2234
2259
|
// BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
|
|
@@ -2238,21 +2263,22 @@ class L {
|
|
|
2238
2263
|
let i = e ? t.substring(e) : t;
|
|
2239
2264
|
const s = this.selectedCountryData.iso2, n = this.selectedCountryData.dialCode;
|
|
2240
2265
|
i = this._ensureHasDialCode(i);
|
|
2241
|
-
const
|
|
2242
|
-
if (
|
|
2243
|
-
const
|
|
2244
|
-
if (
|
|
2266
|
+
const a = this._getDialCode(i, !0), o = L(i);
|
|
2267
|
+
if (a) {
|
|
2268
|
+
const l = L(a), h = this.dialCodeToIso2Map[l];
|
|
2269
|
+
if (h.length === 1)
|
|
2270
|
+
return h[0] === s ? null : h[0];
|
|
2271
|
+
if (!s && this.defaultCountry && h.includes(this.defaultCountry))
|
|
2245
2272
|
return this.defaultCountry;
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
}
|
|
2273
|
+
if (n === "1" && T(o))
|
|
2274
|
+
return null;
|
|
2275
|
+
const r = this.selectedCountryData.areaCodes && o.length > l.length;
|
|
2276
|
+
if (!(s && h.includes(s) && !r))
|
|
2277
|
+
return h[0];
|
|
2252
2278
|
} else {
|
|
2253
2279
|
if (i.charAt(0) === "+" && o.length)
|
|
2254
2280
|
return "";
|
|
2255
|
-
if ((!i || i === "+") && !
|
|
2281
|
+
if ((!i || i === "+") && !s)
|
|
2256
2282
|
return this.defaultCountry;
|
|
2257
2283
|
}
|
|
2258
2284
|
return null;
|
|
@@ -2281,18 +2307,18 @@ class L {
|
|
|
2281
2307
|
_setCountry(t) {
|
|
2282
2308
|
const { separateDialCode: e, showFlags: i, i18n: s } = this.options, n = this.selectedCountryData.iso2 || "";
|
|
2283
2309
|
if (this.selectedCountryData = t ? this._getCountryData(t, !1) || {} : {}, this.selectedCountryData.iso2 && (this.defaultCountry = this.selectedCountryData.iso2), this.selectedCountry) {
|
|
2284
|
-
const
|
|
2285
|
-
let o,
|
|
2310
|
+
const a = t && i ? `iti__flag iti__${t}` : "iti__flag iti__globe";
|
|
2311
|
+
let o, l;
|
|
2286
2312
|
if (t) {
|
|
2287
|
-
const { name:
|
|
2288
|
-
|
|
2313
|
+
const { name: h, dialCode: p } = this.selectedCountryData;
|
|
2314
|
+
l = h, o = s.selectedCountryAriaLabel.replace("${countryName}", h).replace("${dialCode}", `+${p}`);
|
|
2289
2315
|
} else
|
|
2290
|
-
|
|
2291
|
-
this.selectedCountryInner.className =
|
|
2316
|
+
l = s.noCountrySelected, o = s.noCountrySelected;
|
|
2317
|
+
this.selectedCountryInner.className = a, this.selectedCountry.setAttribute("title", l), this.selectedCountry.setAttribute("aria-label", o);
|
|
2292
2318
|
}
|
|
2293
2319
|
if (e) {
|
|
2294
|
-
const
|
|
2295
|
-
this.selectedDialCode.innerHTML =
|
|
2320
|
+
const a = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
|
|
2321
|
+
this.selectedDialCode.innerHTML = a, this._updateInputPadding();
|
|
2296
2322
|
}
|
|
2297
2323
|
return this._updatePlaceholder(), this._updateMaxLength(), n !== t;
|
|
2298
2324
|
}
|
|
@@ -2306,19 +2332,19 @@ class L {
|
|
|
2306
2332
|
//* Update the maximum valid number length for the currently selected country.
|
|
2307
2333
|
_updateMaxLength() {
|
|
2308
2334
|
const { strictMode: t, placeholderNumberType: e, validationNumberTypes: i } = this.options, { iso2: s } = this.selectedCountryData;
|
|
2309
|
-
if (t &&
|
|
2335
|
+
if (t && u.utils)
|
|
2310
2336
|
if (s) {
|
|
2311
|
-
const n =
|
|
2312
|
-
let
|
|
2337
|
+
const n = u.utils.numberType[e];
|
|
2338
|
+
let a = u.utils.getExampleNumber(
|
|
2313
2339
|
s,
|
|
2314
2340
|
!1,
|
|
2315
2341
|
n,
|
|
2316
2342
|
!0
|
|
2317
|
-
), o =
|
|
2318
|
-
for (;
|
|
2319
|
-
o =
|
|
2320
|
-
const
|
|
2321
|
-
this.maxCoreNumberLength =
|
|
2343
|
+
), o = a;
|
|
2344
|
+
for (; u.utils.isPossibleNumber(a, s, i); )
|
|
2345
|
+
o = a, a += "0";
|
|
2346
|
+
const l = u.utils.getCoreNumber(o, s);
|
|
2347
|
+
this.maxCoreNumberLength = l.length, s === "by" && (this.maxCoreNumberLength = l.length + 1);
|
|
2322
2348
|
} else
|
|
2323
2349
|
this.maxCoreNumberLength = null;
|
|
2324
2350
|
}
|
|
@@ -2353,12 +2379,12 @@ class L {
|
|
|
2353
2379
|
nationalMode: i,
|
|
2354
2380
|
customPlaceholder: s
|
|
2355
2381
|
} = this.options, n = t === "aggressive" || !this.hadInitialPlaceholder && t === "polite";
|
|
2356
|
-
if (
|
|
2357
|
-
const
|
|
2358
|
-
let o = this.selectedCountryData.iso2 ?
|
|
2382
|
+
if (u.utils && n) {
|
|
2383
|
+
const a = u.utils.numberType[e];
|
|
2384
|
+
let o = this.selectedCountryData.iso2 ? u.utils.getExampleNumber(
|
|
2359
2385
|
this.selectedCountryData.iso2,
|
|
2360
2386
|
i,
|
|
2361
|
-
|
|
2387
|
+
a
|
|
2362
2388
|
) : "";
|
|
2363
2389
|
o = this._beforeSetNumber(o), typeof s == "function" && (o = s(o, this.selectedCountryData)), this.telInput.setAttribute("placeholder", o);
|
|
2364
2390
|
}
|
|
@@ -2382,12 +2408,12 @@ class L {
|
|
|
2382
2408
|
}
|
|
2383
2409
|
//* Check if an element is visible within it's container, else scroll until it is.
|
|
2384
2410
|
_scrollTo(t) {
|
|
2385
|
-
const e = this.countryList, i = document.documentElement.scrollTop, s = e.offsetHeight, n = e.getBoundingClientRect().top + i,
|
|
2386
|
-
if (
|
|
2387
|
-
e.scrollTop =
|
|
2388
|
-
else if (
|
|
2389
|
-
const
|
|
2390
|
-
e.scrollTop =
|
|
2411
|
+
const e = this.countryList, i = document.documentElement.scrollTop, s = e.offsetHeight, n = e.getBoundingClientRect().top + i, a = n + s, o = t.offsetHeight, l = t.getBoundingClientRect().top + i, h = l + o, p = l - n + e.scrollTop;
|
|
2412
|
+
if (l < n)
|
|
2413
|
+
e.scrollTop = p;
|
|
2414
|
+
else if (h > a) {
|
|
2415
|
+
const r = s - o;
|
|
2416
|
+
e.scrollTop = p - r;
|
|
2391
2417
|
}
|
|
2392
2418
|
}
|
|
2393
2419
|
//* Replace any existing dial code with the new one
|
|
@@ -2407,9 +2433,9 @@ class L {
|
|
|
2407
2433
|
if (t.charAt(0) === "+") {
|
|
2408
2434
|
let s = "";
|
|
2409
2435
|
for (let n = 0; n < t.length; n++) {
|
|
2410
|
-
const
|
|
2411
|
-
if (!isNaN(parseInt(
|
|
2412
|
-
if (s +=
|
|
2436
|
+
const a = t.charAt(n);
|
|
2437
|
+
if (!isNaN(parseInt(a, 10))) {
|
|
2438
|
+
if (s += a, e)
|
|
2413
2439
|
this.dialCodeToIso2Map[s] && (i = t.substring(0, n + 1));
|
|
2414
2440
|
else if (this.dialCodes.has(s)) {
|
|
2415
2441
|
i = t.substring(0, n + 1);
|
|
@@ -2426,7 +2452,7 @@ class L {
|
|
|
2426
2452
|
_getFullNumber(t) {
|
|
2427
2453
|
const e = t || this.telInput.value.trim(), { dialCode: i } = this.selectedCountryData;
|
|
2428
2454
|
let s;
|
|
2429
|
-
const n =
|
|
2455
|
+
const n = L(e);
|
|
2430
2456
|
return this.options.separateDialCode && e.charAt(0) !== "+" && i && n ? s = `+${i}` : s = "", s + e;
|
|
2431
2457
|
}
|
|
2432
2458
|
//* Remove the dial code if separateDialCode is enabled also cap the length if the input has a maxlength attribute
|
|
@@ -2448,7 +2474,7 @@ class L {
|
|
|
2448
2474
|
}
|
|
2449
2475
|
//* Format the number as the user types.
|
|
2450
2476
|
_formatNumberAsYouType() {
|
|
2451
|
-
const t = this._getFullNumber(), e =
|
|
2477
|
+
const t = this._getFullNumber(), e = u.utils ? u.utils.formatNumberAsYouType(t, this.selectedCountryData.iso2) : t, { dialCode: i } = this.selectedCountryData;
|
|
2452
2478
|
return this.options.separateDialCode && this.telInput.value.charAt(0) !== "+" && e.includes(`+${i}`) ? (e.split(`+${i}`)[1] || "").trim() : e;
|
|
2453
2479
|
}
|
|
2454
2480
|
//**************************
|
|
@@ -2456,18 +2482,18 @@ class L {
|
|
|
2456
2482
|
//**************************
|
|
2457
2483
|
//* This is called when the geoip call returns.
|
|
2458
2484
|
handleAutoCountry() {
|
|
2459
|
-
this.options.initialCountry === "auto" &&
|
|
2485
|
+
this.options.initialCountry === "auto" && u.autoCountry && (this.defaultCountry = u.autoCountry, this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe") || this.setCountry(this.defaultCountry), this.resolveAutoCountryPromise());
|
|
2460
2486
|
}
|
|
2461
2487
|
//* This is called when the utils request completes.
|
|
2462
2488
|
handleUtils() {
|
|
2463
|
-
|
|
2489
|
+
u.utils && (this.telInput.value && this._updateValFromNumber(this.telInput.value), this.selectedCountryData.iso2 && (this._updatePlaceholder(), this._updateMaxLength())), this.resolveUtilsScriptPromise();
|
|
2464
2490
|
}
|
|
2465
2491
|
//********************
|
|
2466
2492
|
//* PUBLIC METHODS
|
|
2467
2493
|
//********************
|
|
2468
2494
|
//* Remove plugin.
|
|
2469
2495
|
destroy() {
|
|
2470
|
-
var n,
|
|
2496
|
+
var n, a;
|
|
2471
2497
|
this.telInput.iti = void 0;
|
|
2472
2498
|
const { allowDropdown: t, separateDialCode: e } = this.options;
|
|
2473
2499
|
if (t) {
|
|
@@ -2482,22 +2508,22 @@ class L {
|
|
|
2482
2508
|
o && o.removeEventListener("click", this._handleLabelClick);
|
|
2483
2509
|
}
|
|
2484
2510
|
const { form: i } = this.telInput;
|
|
2485
|
-
this._handleHiddenInputSubmit && i && i.removeEventListener("submit", this._handleHiddenInputSubmit), this.telInput.removeEventListener("input", this._handleInputEvent), this._handleKeydownEvent && this.telInput.removeEventListener("keydown", this._handleKeydownEvent), this.telInput.removeAttribute("data-intl-tel-input-id"), e && (this.isRTL ? this.telInput.style.paddingRight = this.originalPaddingRight : this.telInput.style.paddingLeft = this.originalPaddingLeft);
|
|
2511
|
+
this._handleHiddenInputSubmit && i && i.removeEventListener("submit", this._handleHiddenInputSubmit), this.telInput.removeEventListener("input", this._handleInputEvent), this._handleKeydownEvent && this.telInput.removeEventListener("keydown", this._handleKeydownEvent), this._handlePasteEvent && this.telInput.removeEventListener("paste", this._handlePasteEvent), this.telInput.removeAttribute("data-intl-tel-input-id"), e && (this.isRTL ? this.telInput.style.paddingRight = this.originalPaddingRight : this.telInput.style.paddingLeft = this.originalPaddingLeft);
|
|
2486
2512
|
const s = this.telInput.parentNode;
|
|
2487
|
-
(n = s == null ? void 0 : s.parentNode) == null || n.insertBefore(this.telInput, s), (
|
|
2513
|
+
(n = s == null ? void 0 : s.parentNode) == null || n.insertBefore(this.telInput, s), (a = s == null ? void 0 : s.parentNode) == null || a.removeChild(s), delete u.instances[this.id];
|
|
2488
2514
|
}
|
|
2489
2515
|
//* Get the extension from the current number.
|
|
2490
2516
|
getExtension() {
|
|
2491
|
-
return
|
|
2517
|
+
return u.utils ? u.utils.getExtension(
|
|
2492
2518
|
this._getFullNumber(),
|
|
2493
2519
|
this.selectedCountryData.iso2
|
|
2494
2520
|
) : "";
|
|
2495
2521
|
}
|
|
2496
2522
|
//* Format the number to the given format.
|
|
2497
2523
|
getNumber(t) {
|
|
2498
|
-
if (
|
|
2524
|
+
if (u.utils) {
|
|
2499
2525
|
const { iso2: e } = this.selectedCountryData;
|
|
2500
|
-
return
|
|
2526
|
+
return u.utils.formatNumber(
|
|
2501
2527
|
this._getFullNumber(),
|
|
2502
2528
|
e,
|
|
2503
2529
|
t
|
|
@@ -2507,7 +2533,7 @@ class L {
|
|
|
2507
2533
|
}
|
|
2508
2534
|
//* Get the type of the entered number e.g. landline/mobile.
|
|
2509
2535
|
getNumberType() {
|
|
2510
|
-
return
|
|
2536
|
+
return u.utils ? u.utils.getNumberType(
|
|
2511
2537
|
this._getFullNumber(),
|
|
2512
2538
|
this.selectedCountryData.iso2
|
|
2513
2539
|
) : -99;
|
|
@@ -2518,9 +2544,9 @@ class L {
|
|
|
2518
2544
|
}
|
|
2519
2545
|
//* Get the validation error.
|
|
2520
2546
|
getValidationError() {
|
|
2521
|
-
if (
|
|
2547
|
+
if (u.utils) {
|
|
2522
2548
|
const { iso2: t } = this.selectedCountryData;
|
|
2523
|
-
return
|
|
2549
|
+
return u.utils.getValidationError(this._getFullNumber(), t);
|
|
2524
2550
|
}
|
|
2525
2551
|
return -99;
|
|
2526
2552
|
}
|
|
@@ -2533,21 +2559,21 @@ class L {
|
|
|
2533
2559
|
return this._validateNumber(!0);
|
|
2534
2560
|
}
|
|
2535
2561
|
_utilsIsPossibleNumber(t) {
|
|
2536
|
-
return
|
|
2562
|
+
return u.utils ? u.utils.isPossibleNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
|
|
2537
2563
|
}
|
|
2538
2564
|
//* Shared internal validation logic to handle alpha character extension rules.
|
|
2539
2565
|
_validateNumber(t) {
|
|
2540
2566
|
if (!this.selectedCountryData.iso2)
|
|
2541
2567
|
return !1;
|
|
2542
|
-
const e = (
|
|
2568
|
+
const e = (a) => t ? this._utilsIsValidNumber(a) : this._utilsIsPossibleNumber(a), i = this._getFullNumber(), s = i.search(new RegExp("\\p{L}", "u"));
|
|
2543
2569
|
if (s > -1 && !this.options.allowPhonewords) {
|
|
2544
|
-
const
|
|
2545
|
-
return o &&
|
|
2570
|
+
const a = i.substring(0, s), o = e(a), l = e(i);
|
|
2571
|
+
return o && l;
|
|
2546
2572
|
}
|
|
2547
2573
|
return e(i);
|
|
2548
2574
|
}
|
|
2549
2575
|
_utilsIsValidNumber(t) {
|
|
2550
|
-
return
|
|
2576
|
+
return u.utils ? u.utils.isValidNumber(t, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
|
|
2551
2577
|
}
|
|
2552
2578
|
//* Update the selected country, and update the input val accordingly.
|
|
2553
2579
|
setCountry(t) {
|
|
@@ -2567,53 +2593,53 @@ class L {
|
|
|
2567
2593
|
this.telInput.disabled = t, t ? this.selectedCountry.setAttribute("disabled", "true") : this.selectedCountry.removeAttribute("disabled");
|
|
2568
2594
|
}
|
|
2569
2595
|
}
|
|
2570
|
-
const
|
|
2571
|
-
if (!
|
|
2596
|
+
const Z = (d) => {
|
|
2597
|
+
if (!u.utils && !u.startedLoadingUtilsScript) {
|
|
2572
2598
|
let t;
|
|
2573
|
-
if (typeof
|
|
2599
|
+
if (typeof d == "function")
|
|
2574
2600
|
try {
|
|
2575
|
-
t = Promise.resolve(
|
|
2601
|
+
t = Promise.resolve(d());
|
|
2576
2602
|
} catch (e) {
|
|
2577
2603
|
return Promise.reject(e);
|
|
2578
2604
|
}
|
|
2579
2605
|
else
|
|
2580
|
-
return Promise.reject(new TypeError(`The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof
|
|
2581
|
-
return
|
|
2606
|
+
return Promise.reject(new TypeError(`The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof d}`));
|
|
2607
|
+
return u.startedLoadingUtilsScript = !0, t.then((e) => {
|
|
2582
2608
|
const i = e == null ? void 0 : e.default;
|
|
2583
2609
|
if (!i || typeof i != "object")
|
|
2584
2610
|
throw new TypeError("The loader function passed to attachUtils did not resolve to a module object with utils as its default export.");
|
|
2585
|
-
return
|
|
2611
|
+
return u.utils = i, I("handleUtils"), !0;
|
|
2586
2612
|
}).catch((e) => {
|
|
2587
2613
|
throw I("rejectUtilsScriptPromise", e), e;
|
|
2588
2614
|
});
|
|
2589
2615
|
}
|
|
2590
2616
|
return null;
|
|
2591
|
-
},
|
|
2592
|
-
(
|
|
2593
|
-
const e = new
|
|
2594
|
-
return e._init(),
|
|
2617
|
+
}, u = Object.assign(
|
|
2618
|
+
(d, t) => {
|
|
2619
|
+
const e = new N(d, t);
|
|
2620
|
+
return e._init(), d.setAttribute("data-intl-tel-input-id", e.id.toString()), u.instances[e.id] = e, d.iti = e, e;
|
|
2595
2621
|
},
|
|
2596
2622
|
{
|
|
2597
|
-
defaults:
|
|
2623
|
+
defaults: E,
|
|
2598
2624
|
//* Using a static var like this allows us to mock it in the tests.
|
|
2599
2625
|
documentReady: () => document.readyState === "complete",
|
|
2600
2626
|
//* Get the country data object.
|
|
2601
2627
|
getCountryData: () => w,
|
|
2602
2628
|
//* A getter for the plugin instance.
|
|
2603
|
-
getInstance: (
|
|
2604
|
-
const t =
|
|
2605
|
-
return t ?
|
|
2629
|
+
getInstance: (d) => {
|
|
2630
|
+
const t = d.getAttribute("data-intl-tel-input-id");
|
|
2631
|
+
return t ? u.instances[t] : null;
|
|
2606
2632
|
},
|
|
2607
2633
|
//* A map from instance ID to instance object.
|
|
2608
2634
|
instances: {},
|
|
2609
|
-
attachUtils:
|
|
2635
|
+
attachUtils: Z,
|
|
2610
2636
|
startedLoadingUtilsScript: !1,
|
|
2611
2637
|
startedLoadingAutoCountry: !1,
|
|
2612
|
-
version: "25.10.
|
|
2638
|
+
version: "25.10.7"
|
|
2613
2639
|
}
|
|
2614
|
-
),
|
|
2640
|
+
), X = {
|
|
2615
2641
|
__name: "IntlTelInput",
|
|
2616
|
-
props: /* @__PURE__ */
|
|
2642
|
+
props: /* @__PURE__ */ k({
|
|
2617
2643
|
disabled: {
|
|
2618
2644
|
type: Boolean,
|
|
2619
2645
|
default: !1
|
|
@@ -2637,47 +2663,47 @@ const Y = (u) => {
|
|
|
2637
2663
|
},
|
|
2638
2664
|
modelModifiers: {}
|
|
2639
2665
|
}),
|
|
2640
|
-
emits: /* @__PURE__ */
|
|
2666
|
+
emits: /* @__PURE__ */ k([
|
|
2641
2667
|
"changeNumber",
|
|
2642
2668
|
"changeCountry",
|
|
2643
2669
|
"changeValidity",
|
|
2644
2670
|
"changeErrorCode"
|
|
2645
2671
|
], ["update:modelValue"]),
|
|
2646
|
-
setup(
|
|
2647
|
-
const i =
|
|
2648
|
-
let
|
|
2649
|
-
|
|
2672
|
+
setup(d, { expose: t, emit: e }) {
|
|
2673
|
+
const i = B(d, "modelValue"), s = d, n = e, a = D(), o = D(), l = D(!1), h = () => o.value ? s.options.strictMode ? o.value.isValidNumberPrecise() : o.value.isValidNumber() : null, p = () => {
|
|
2674
|
+
let C = h();
|
|
2675
|
+
l.value !== C && (l.value = C, n("changeValidity", !!C), n(
|
|
2650
2676
|
"changeErrorCode",
|
|
2651
|
-
|
|
2677
|
+
C ? null : o.value.getValidationError()
|
|
2652
2678
|
));
|
|
2653
|
-
},
|
|
2654
|
-
var
|
|
2655
|
-
n("changeNumber", ((
|
|
2656
|
-
},
|
|
2657
|
-
var
|
|
2658
|
-
n("changeCountry", ((
|
|
2679
|
+
}, r = () => {
|
|
2680
|
+
var C;
|
|
2681
|
+
n("changeNumber", ((C = o.value) == null ? void 0 : C.getNumber()) ?? ""), p();
|
|
2682
|
+
}, c = () => {
|
|
2683
|
+
var C;
|
|
2684
|
+
n("changeCountry", ((C = o.value) == null ? void 0 : C.getSelectedCountryData().iso2) ?? ""), r(), p();
|
|
2659
2685
|
};
|
|
2660
|
-
return
|
|
2661
|
-
|
|
2662
|
-
}),
|
|
2686
|
+
return R(() => {
|
|
2687
|
+
a.value && (o.value = u(a.value, s.options), s.value && o.value.setNumber(s.value), s.disabled && o.value.setDisabled(s.disabled), l.value = h());
|
|
2688
|
+
}), F(
|
|
2663
2689
|
() => s.disabled,
|
|
2664
|
-
(
|
|
2665
|
-
var
|
|
2666
|
-
return (
|
|
2690
|
+
(C) => {
|
|
2691
|
+
var f;
|
|
2692
|
+
return (f = o.value) == null ? void 0 : f.setDisabled(C);
|
|
2667
2693
|
}
|
|
2668
|
-
),
|
|
2669
|
-
var
|
|
2670
|
-
return (
|
|
2671
|
-
}), t({ instance: o, input:
|
|
2694
|
+
), V(() => {
|
|
2695
|
+
var C;
|
|
2696
|
+
return (C = o.value) == null ? void 0 : C.destroy();
|
|
2697
|
+
}), t({ instance: o, input: a }), (C, f) => z((O(), $("input", j({
|
|
2672
2698
|
ref_key: "input",
|
|
2673
|
-
ref:
|
|
2674
|
-
"onUpdate:modelValue":
|
|
2699
|
+
ref: a,
|
|
2700
|
+
"onUpdate:modelValue": f[0] || (f[0] = (b) => i.value = b),
|
|
2675
2701
|
type: "tel",
|
|
2676
|
-
onCountrychange:
|
|
2677
|
-
onInput:
|
|
2678
|
-
},
|
|
2702
|
+
onCountrychange: c,
|
|
2703
|
+
onInput: r
|
|
2704
|
+
}, d.inputProps), null, 16)), [
|
|
2679
2705
|
[
|
|
2680
|
-
|
|
2706
|
+
U,
|
|
2681
2707
|
i.value,
|
|
2682
2708
|
void 0,
|
|
2683
2709
|
{ lazy: !0 }
|
|
@@ -2686,5 +2712,5 @@ const Y = (u) => {
|
|
|
2686
2712
|
}
|
|
2687
2713
|
};
|
|
2688
2714
|
export {
|
|
2689
|
-
|
|
2715
|
+
X as default
|
|
2690
2716
|
};
|