intl-tel-input 25.10.12 → 25.11.0
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 +62 -59
- package/angular/README.md +1 -1
- package/angular/build/IntlTelInput.js +619 -569
- package/angular/build/IntlTelInputWithUtils.js +623 -573
- package/angular/build/types/intl-tel-input.d.ts +17 -69
- package/angular/build/types/modules/core/ui.d.ts +44 -0
- package/angular/build/types/modules/format/formatting.d.ts +3 -3
- package/angular/build/types/modules/types/events.d.ts +8 -0
- package/angular/build/types/modules/types/public-api.d.ts +3 -0
- package/angular/build/types/modules/utils/dom.d.ts +5 -0
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput.d.ts +83 -72
- package/build/js/intlTelInput.js +738 -645
- package/build/js/intlTelInput.min.js +4 -4
- package/build/js/intlTelInputWithUtils.js +742 -649
- package/build/js/intlTelInputWithUtils.min.js +4 -4
- package/build/js/utils.js +4 -4
- package/package.json +2 -1
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +737 -644
- package/react/build/IntlTelInput.d.ts +83 -72
- package/react/build/IntlTelInput.js +737 -644
- package/react/build/IntlTelInputWithUtils.cjs +741 -648
- package/react/build/IntlTelInputWithUtils.js +741 -648
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +818 -714
- package/vue/build/IntlTelInputWithUtils.mjs +1021 -917
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { mergeModels as
|
|
2
|
-
const
|
|
1
|
+
import { mergeModels as P, useModel as B, ref as L, onMounted as F, watch as R, onUnmounted as z, withDirectives as V, createElementBlock as $, openBlock as U, mergeProps as j, vModelText as W } from "vue";
|
|
2
|
+
const O = [
|
|
3
3
|
[
|
|
4
4
|
"af",
|
|
5
5
|
// Afghanistan
|
|
@@ -1676,20 +1676,20 @@ const j = [
|
|
|
1676
1676
|
null,
|
|
1677
1677
|
"0"
|
|
1678
1678
|
]
|
|
1679
|
-
],
|
|
1680
|
-
for (const
|
|
1681
|
-
|
|
1679
|
+
], w = [];
|
|
1680
|
+
for (const l of O)
|
|
1681
|
+
w.push({
|
|
1682
1682
|
name: "",
|
|
1683
1683
|
// populated in the plugin
|
|
1684
|
-
iso2:
|
|
1685
|
-
dialCode:
|
|
1686
|
-
priority:
|
|
1687
|
-
areaCodes:
|
|
1684
|
+
iso2: l[0],
|
|
1685
|
+
dialCode: l[1],
|
|
1686
|
+
priority: l[2] || 0,
|
|
1687
|
+
areaCodes: l[3] || null,
|
|
1688
1688
|
nodeById: {},
|
|
1689
1689
|
// populated by the plugin
|
|
1690
|
-
nationalPrefix:
|
|
1690
|
+
nationalPrefix: l[4] || null
|
|
1691
1691
|
});
|
|
1692
|
-
const
|
|
1692
|
+
const x = {
|
|
1693
1693
|
ad: "Andorra",
|
|
1694
1694
|
ae: "United Arab Emirates",
|
|
1695
1695
|
af: "Afghanistan",
|
|
@@ -1944,13 +1944,13 @@ const O = {
|
|
|
1944
1944
|
// additional countries (not supported by country-list library)
|
|
1945
1945
|
ac: "Ascension Island",
|
|
1946
1946
|
xk: "Kosovo"
|
|
1947
|
-
},
|
|
1947
|
+
}, K = { ...x, ...H }, N = (l) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(l).matches, G = () => {
|
|
1948
1948
|
if (typeof navigator < "u" && typeof window < "u") {
|
|
1949
|
-
const
|
|
1950
|
-
return
|
|
1949
|
+
const l = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), t = N("(max-width: 500px)"), e = N("(max-height: 600px)"), i = N("(pointer: coarse)");
|
|
1950
|
+
return l || t || i && e;
|
|
1951
1951
|
}
|
|
1952
1952
|
return !1;
|
|
1953
|
-
},
|
|
1953
|
+
}, T = {
|
|
1954
1954
|
// Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
|
|
1955
1955
|
allowPhonewords: !1,
|
|
1956
1956
|
//* Whether or not to allow the dropdown.
|
|
@@ -1998,217 +1998,55 @@ const O = {
|
|
|
1998
1998
|
//* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
|
|
1999
1999
|
strictMode: !1,
|
|
2000
2000
|
//* Use full screen popup instead of dropdown for country list.
|
|
2001
|
-
useFullscreenPopup:
|
|
2001
|
+
useFullscreenPopup: G(),
|
|
2002
2002
|
//* The number type to enforce during validation.
|
|
2003
2003
|
validationNumberTypes: ["MOBILE"]
|
|
2004
2004
|
};
|
|
2005
|
-
function
|
|
2006
|
-
|
|
2005
|
+
function q(l) {
|
|
2006
|
+
l.useFullscreenPopup && (l.fixDropdownWidth = !1), l.onlyCountries.length === 1 && (l.initialCountry = l.onlyCountries[0]), l.separateDialCode && (l.nationalMode = !1), l.allowDropdown && !l.showFlags && !l.separateDialCode && (l.nationalMode = !1), l.useFullscreenPopup && !l.dropdownContainer && (l.dropdownContainer = document.body), l.i18n = { ...K, ...l.i18n };
|
|
2007
2007
|
}
|
|
2008
|
-
const
|
|
2009
|
-
const i = document.createElement(
|
|
2010
|
-
return
|
|
2008
|
+
const v = (l) => l.replace(/\D/g, ""), M = (l = "") => l.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(), D = (l) => Object.keys(l).filter((t) => !!l[t]).join(" "), p = (l, t, e) => {
|
|
2009
|
+
const i = document.createElement(l);
|
|
2010
|
+
return t && Object.entries(t).forEach(([s, o]) => i.setAttribute(s, o)), e && e.appendChild(i), i;
|
|
2011
2011
|
};
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
const i = e.map((n) => n.toLowerCase());
|
|
2016
|
-
return _.filter((n) => i.includes(n.iso2));
|
|
2017
|
-
} else if (t.length) {
|
|
2018
|
-
const i = t.map((n) => n.toLowerCase());
|
|
2019
|
-
return _.filter((n) => !i.includes(n.iso2));
|
|
2020
|
-
}
|
|
2021
|
-
return _;
|
|
2022
|
-
}
|
|
2023
|
-
function q(r, e) {
|
|
2024
|
-
for (const t of r) {
|
|
2025
|
-
const i = t.iso2.toLowerCase();
|
|
2026
|
-
e.i18n[i] && (t.name = e.i18n[i]);
|
|
2027
|
-
}
|
|
2028
|
-
}
|
|
2029
|
-
function Y(r, e) {
|
|
2030
|
-
const t = /* @__PURE__ */ new Set();
|
|
2031
|
-
let i = 0;
|
|
2032
|
-
const n = {}, s = (o, a, d) => {
|
|
2033
|
-
if (!o || !a)
|
|
2034
|
-
return;
|
|
2035
|
-
a.length > i && (i = a.length), n.hasOwnProperty(a) || (n[a] = []);
|
|
2036
|
-
const l = n[a];
|
|
2037
|
-
if (l.includes(o))
|
|
2038
|
-
return;
|
|
2039
|
-
const h = d !== void 0 ? d : l.length;
|
|
2040
|
-
l[h] = o;
|
|
2041
|
-
};
|
|
2042
|
-
for (const o of r) {
|
|
2043
|
-
t.has(o.dialCode) || t.add(o.dialCode);
|
|
2044
|
-
for (let a = 1; a < o.dialCode.length; a++) {
|
|
2045
|
-
const d = o.dialCode.substring(0, a);
|
|
2046
|
-
s(o.iso2, d);
|
|
2047
|
-
}
|
|
2048
|
-
s(o.iso2, o.dialCode, o.priority);
|
|
2049
|
-
}
|
|
2050
|
-
(e.onlyCountries.length || e.excludeCountries.length) && t.forEach((o) => {
|
|
2051
|
-
n[o] = n[o].filter(Boolean);
|
|
2052
|
-
});
|
|
2053
|
-
for (const o of r)
|
|
2054
|
-
if (o.areaCodes) {
|
|
2055
|
-
const a = n[o.dialCode][0];
|
|
2056
|
-
for (const d of o.areaCodes) {
|
|
2057
|
-
for (let l = 1; l < d.length; l++) {
|
|
2058
|
-
const h = d.substring(0, l), p = o.dialCode + h;
|
|
2059
|
-
s(a, p), s(o.iso2, p);
|
|
2060
|
-
}
|
|
2061
|
-
s(o.iso2, o.dialCode + d);
|
|
2062
|
-
}
|
|
2063
|
-
}
|
|
2064
|
-
return { dialCodes: t, dialCodeMaxLen: i, dialCodeToIso2Map: n };
|
|
2065
|
-
}
|
|
2066
|
-
function J(r, e) {
|
|
2067
|
-
e.countryOrder && (e.countryOrder = e.countryOrder.map((t) => t.toLowerCase())), r.sort((t, i) => {
|
|
2068
|
-
const { countryOrder: n } = e;
|
|
2069
|
-
if (n) {
|
|
2070
|
-
const s = n.indexOf(t.iso2), o = n.indexOf(i.iso2), a = s > -1, d = o > -1;
|
|
2071
|
-
if (a || d)
|
|
2072
|
-
return a && d ? s - o : a ? -1 : 1;
|
|
2073
|
-
}
|
|
2074
|
-
return t.name.localeCompare(i.name);
|
|
2075
|
-
});
|
|
2076
|
-
}
|
|
2077
|
-
function Z(r) {
|
|
2078
|
-
for (const e of r)
|
|
2079
|
-
e.normalisedName = E(e.name), e.initials = e.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((t) => t[0]).join("").toLowerCase(), e.dialCodePlus = `+${e.dialCode}`;
|
|
2080
|
-
}
|
|
2081
|
-
function Q(r, e, t, i) {
|
|
2082
|
-
let n = r;
|
|
2083
|
-
if (t && e) {
|
|
2084
|
-
e = `+${i.dialCode}`;
|
|
2085
|
-
const s = n[e.length] === " " || n[e.length] === "-" ? e.length + 1 : e.length;
|
|
2086
|
-
n = n.substring(s);
|
|
2087
|
-
}
|
|
2088
|
-
return n;
|
|
2089
|
-
}
|
|
2090
|
-
function X(r, e, t, i, n) {
|
|
2091
|
-
const s = t ? t.formatNumberAsYouType(r, i.iso2) : r, { dialCode: o } = i;
|
|
2092
|
-
return n && e.charAt(0) !== "+" && s.includes(`+${o}`) ? (s.split(`+${o}`)[1] || "").trim() : s;
|
|
2093
|
-
}
|
|
2094
|
-
function tt(r, e, t, i) {
|
|
2095
|
-
if (t === 0 && !i)
|
|
2096
|
-
return 0;
|
|
2097
|
-
let n = 0;
|
|
2098
|
-
for (let s = 0; s < e.length; s++) {
|
|
2099
|
-
if (/[+0-9]/.test(e[s]) && n++, n === r && !i)
|
|
2100
|
-
return s + 1;
|
|
2101
|
-
if (i && n === r + 1)
|
|
2102
|
-
return s;
|
|
2103
|
-
}
|
|
2104
|
-
return e.length;
|
|
2105
|
-
}
|
|
2106
|
-
const et = [
|
|
2107
|
-
"800",
|
|
2108
|
-
"822",
|
|
2109
|
-
"833",
|
|
2110
|
-
"844",
|
|
2111
|
-
"855",
|
|
2112
|
-
"866",
|
|
2113
|
-
"877",
|
|
2114
|
-
"880",
|
|
2115
|
-
"881",
|
|
2116
|
-
"882",
|
|
2117
|
-
"883",
|
|
2118
|
-
"884",
|
|
2119
|
-
"885",
|
|
2120
|
-
"886",
|
|
2121
|
-
"887",
|
|
2122
|
-
"888",
|
|
2123
|
-
"889"
|
|
2124
|
-
], k = (r) => {
|
|
2125
|
-
const e = I(r);
|
|
2126
|
-
if (e.charAt(0) === "1") {
|
|
2127
|
-
const t = e.substring(1, 4);
|
|
2128
|
-
return et.includes(t);
|
|
2129
|
-
}
|
|
2130
|
-
return !1;
|
|
2131
|
-
};
|
|
2132
|
-
for (const r of _)
|
|
2133
|
-
r.name = P[r.iso2];
|
|
2134
|
-
let it = 0;
|
|
2135
|
-
const nt = new Set(_.map((r) => r.iso2)), S = (r) => nt.has(r), v = (r, ...e) => {
|
|
2136
|
-
const { instances: t } = u;
|
|
2137
|
-
Object.values(t).forEach((i) => i[r](...e));
|
|
2138
|
-
};
|
|
2139
|
-
class L {
|
|
2140
|
-
/**
|
|
2141
|
-
* Build a space-delimited class string from an object map of className -> truthy/falsey.
|
|
2142
|
-
* Only keys with truthy values are included.
|
|
2143
|
-
*/
|
|
2144
|
-
static _buildClassNames(e) {
|
|
2145
|
-
return Object.keys(e).filter((t) => !!e[t]).join(" ");
|
|
2146
|
-
}
|
|
2147
|
-
constructor(e, t = {}) {
|
|
2148
|
-
this.id = it++, this.telInput = e, this.highlightedItem = null, this.options = Object.assign({}, x, t), this.hadInitialPlaceholder = !!e.getAttribute("placeholder");
|
|
2149
|
-
}
|
|
2150
|
-
_detectEnvironmentAndLayout() {
|
|
2151
|
-
this.isAndroid = typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1, this.isRTL = !!this.telInput.closest("[dir=rtl]"), this.options.separateDialCode && (this.originalPaddingLeft = this.telInput.style.paddingLeft);
|
|
2152
|
-
}
|
|
2153
|
-
_createInitPromises() {
|
|
2154
|
-
const e = new Promise((i, n) => {
|
|
2155
|
-
this.resolveAutoCountryPromise = i, this.rejectAutoCountryPromise = n;
|
|
2156
|
-
}), t = new Promise((i, n) => {
|
|
2157
|
-
this.resolveUtilsScriptPromise = i, this.rejectUtilsScriptPromise = n;
|
|
2158
|
-
});
|
|
2159
|
-
this.promise = Promise.all([e, t]);
|
|
2160
|
-
}
|
|
2161
|
-
//* Can't be private as it's called from intlTelInput convenience wrapper.
|
|
2162
|
-
_init() {
|
|
2163
|
-
W(this.options), this._detectEnvironmentAndLayout(), this._createInitPromises(), this.selectedCountryData = {}, this._processCountryData(), this._generateMarkup(), this._setInitialState(), this._initListeners(), this._initRequests();
|
|
2164
|
-
}
|
|
2165
|
-
//********************
|
|
2166
|
-
//* PRIVATE METHODS
|
|
2167
|
-
//********************
|
|
2168
|
-
//* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
|
|
2169
|
-
_processCountryData() {
|
|
2170
|
-
this.countries = G(this.options);
|
|
2171
|
-
const e = Y(this.countries, this.options);
|
|
2172
|
-
this.dialCodes = e.dialCodes, this.dialCodeMaxLen = e.dialCodeMaxLen, this.dialCodeToIso2Map = e.dialCodeToIso2Map, q(this.countries, this.options), J(this.countries, this.options), this.countryByIso2 = new Map(this.countries.map((t) => [t.iso2, t])), Z(this.countries);
|
|
2012
|
+
class Q {
|
|
2013
|
+
constructor(t, e, i) {
|
|
2014
|
+
this.highlightedItem = null, t.dataset.intlTelInputId = i.toString(), this.telInput = t, this.options = e, this.id = i, this.hadInitialPlaceholder = !!t.getAttribute("placeholder"), this.isRTL = !!this.telInput.closest("[dir=rtl]"), this.options.separateDialCode && (this.originalPaddingLeft = this.telInput.style.paddingLeft);
|
|
2173
2015
|
}
|
|
2174
2016
|
//* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
|
|
2175
|
-
|
|
2176
|
-
this._prepareTelInput();
|
|
2017
|
+
generateMarkup(t) {
|
|
2018
|
+
this.countries = t, this._prepareTelInput();
|
|
2177
2019
|
const e = this._createWrapperAndInsert();
|
|
2178
2020
|
this._maybeBuildCountryContainer(e), e.appendChild(this.telInput), this._maybeUpdateInputPaddingAndReveal(), this._maybeBuildHiddenInputs(e);
|
|
2179
2021
|
}
|
|
2180
2022
|
_prepareTelInput() {
|
|
2181
|
-
|
|
2023
|
+
var t;
|
|
2024
|
+
this.telInput.classList.add("iti__tel-input"), !this.telInput.hasAttribute("autocomplete") && !((t = this.telInput.form) != null && t.hasAttribute("autocomplete")) && this.telInput.setAttribute("autocomplete", "off");
|
|
2182
2025
|
}
|
|
2183
2026
|
_createWrapperAndInsert() {
|
|
2184
|
-
var a;
|
|
2185
2027
|
const {
|
|
2186
|
-
allowDropdown:
|
|
2187
|
-
showFlags:
|
|
2028
|
+
allowDropdown: t,
|
|
2029
|
+
showFlags: e,
|
|
2188
2030
|
containerClass: i,
|
|
2189
|
-
useFullscreenPopup:
|
|
2190
|
-
} = this.options,
|
|
2031
|
+
useFullscreenPopup: s
|
|
2032
|
+
} = this.options, o = D({
|
|
2191
2033
|
iti: !0,
|
|
2192
|
-
"iti--allow-dropdown":
|
|
2193
|
-
"iti--show-flags":
|
|
2194
|
-
"iti--inline-dropdown": !
|
|
2034
|
+
"iti--allow-dropdown": t,
|
|
2035
|
+
"iti--show-flags": e,
|
|
2036
|
+
"iti--inline-dropdown": !s,
|
|
2195
2037
|
[i]: !!i
|
|
2196
|
-
}),
|
|
2197
|
-
return this.isRTL &&
|
|
2038
|
+
}), n = p("div", { class: o });
|
|
2039
|
+
return this.isRTL && n.setAttribute("dir", "ltr"), this.telInput.before(n), n;
|
|
2198
2040
|
}
|
|
2199
|
-
_maybeBuildCountryContainer(
|
|
2200
|
-
const {
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
showFlags: n
|
|
2204
|
-
} = this.options;
|
|
2205
|
-
if (t || n || i) {
|
|
2206
|
-
this.countryContainer = m(
|
|
2041
|
+
_maybeBuildCountryContainer(t) {
|
|
2042
|
+
const { allowDropdown: e, separateDialCode: i, showFlags: s } = this.options;
|
|
2043
|
+
if (e || s || i) {
|
|
2044
|
+
this.countryContainer = p(
|
|
2207
2045
|
"div",
|
|
2208
2046
|
// visibly hidden until we measure it's width to set the input padding correctly
|
|
2209
2047
|
{ class: "iti__country-container iti__v-hide" },
|
|
2210
|
-
|
|
2211
|
-
),
|
|
2048
|
+
t
|
|
2049
|
+
), e ? (this.selectedCountry = p(
|
|
2212
2050
|
"button",
|
|
2213
2051
|
{
|
|
2214
2052
|
type: "button",
|
|
@@ -2219,109 +2057,109 @@ class L {
|
|
|
2219
2057
|
"aria-controls": `iti-${this.id}__dropdown-content`
|
|
2220
2058
|
},
|
|
2221
2059
|
this.countryContainer
|
|
2222
|
-
), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry =
|
|
2060
|
+
), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = p(
|
|
2223
2061
|
"div",
|
|
2224
2062
|
{ class: "iti__selected-country" },
|
|
2225
2063
|
this.countryContainer
|
|
2226
2064
|
);
|
|
2227
|
-
const
|
|
2065
|
+
const o = p(
|
|
2228
2066
|
"div",
|
|
2229
2067
|
{ class: "iti__selected-country-primary" },
|
|
2230
2068
|
this.selectedCountry
|
|
2231
2069
|
);
|
|
2232
|
-
this.selectedCountryInner =
|
|
2070
|
+
this.selectedCountryInner = p(
|
|
2233
2071
|
"div",
|
|
2234
2072
|
{ class: "iti__flag" },
|
|
2235
|
-
|
|
2236
|
-
),
|
|
2073
|
+
o
|
|
2074
|
+
), e && (this.dropdownArrow = p(
|
|
2237
2075
|
"div",
|
|
2238
2076
|
{ class: "iti__arrow", "aria-hidden": "true" },
|
|
2239
|
-
|
|
2240
|
-
)), i && (this.selectedDialCode =
|
|
2077
|
+
o
|
|
2078
|
+
)), i && (this.selectedDialCode = p(
|
|
2241
2079
|
"div",
|
|
2242
2080
|
{ class: "iti__selected-dial-code" },
|
|
2243
2081
|
this.selectedCountry
|
|
2244
|
-
)),
|
|
2082
|
+
)), e && this._buildDropdownContent();
|
|
2245
2083
|
}
|
|
2246
2084
|
}
|
|
2247
2085
|
_buildDropdownContent() {
|
|
2248
2086
|
const {
|
|
2249
|
-
fixDropdownWidth:
|
|
2250
|
-
useFullscreenPopup:
|
|
2087
|
+
fixDropdownWidth: t,
|
|
2088
|
+
useFullscreenPopup: e,
|
|
2251
2089
|
countrySearch: i,
|
|
2252
|
-
i18n:
|
|
2253
|
-
dropdownContainer:
|
|
2254
|
-
containerClass:
|
|
2255
|
-
} = this.options, a =
|
|
2256
|
-
if (this.dropdownContent =
|
|
2090
|
+
i18n: s,
|
|
2091
|
+
dropdownContainer: o,
|
|
2092
|
+
containerClass: n
|
|
2093
|
+
} = this.options, a = t ? "" : "iti--flexible-dropdown-width";
|
|
2094
|
+
if (this.dropdownContent = p("div", {
|
|
2257
2095
|
id: `iti-${this.id}__dropdown-content`,
|
|
2258
2096
|
class: `iti__dropdown-content iti__hide ${a}`,
|
|
2259
2097
|
role: "dialog",
|
|
2260
2098
|
"aria-modal": "true"
|
|
2261
|
-
}), this.isRTL && this.dropdownContent.setAttribute("dir", "rtl"), i && this._buildSearchUI(), this.countryList =
|
|
2099
|
+
}), this.isRTL && this.dropdownContent.setAttribute("dir", "rtl"), i && this._buildSearchUI(), this.countryList = p(
|
|
2262
2100
|
"ul",
|
|
2263
2101
|
{
|
|
2264
2102
|
class: "iti__country-list",
|
|
2265
2103
|
id: `iti-${this.id}__country-listbox`,
|
|
2266
2104
|
role: "listbox",
|
|
2267
|
-
"aria-label":
|
|
2105
|
+
"aria-label": s.countryListAriaLabel
|
|
2268
2106
|
},
|
|
2269
2107
|
this.dropdownContent
|
|
2270
|
-
), this._appendListItems(),
|
|
2271
|
-
const
|
|
2108
|
+
), this._appendListItems(), this.options.countrySearch && this.updateSearchResultsA11yText(), o) {
|
|
2109
|
+
const r = D({
|
|
2272
2110
|
iti: !0,
|
|
2273
2111
|
"iti--container": !0,
|
|
2274
|
-
"iti--fullscreen-popup":
|
|
2275
|
-
"iti--inline-dropdown": !
|
|
2276
|
-
[
|
|
2112
|
+
"iti--fullscreen-popup": e,
|
|
2113
|
+
"iti--inline-dropdown": !e,
|
|
2114
|
+
[n]: !!n
|
|
2277
2115
|
});
|
|
2278
|
-
this.dropdown =
|
|
2116
|
+
this.dropdown = p("div", { class: r }), this.dropdown.appendChild(this.dropdownContent);
|
|
2279
2117
|
} else
|
|
2280
2118
|
this.countryContainer.appendChild(this.dropdownContent);
|
|
2281
2119
|
}
|
|
2282
2120
|
_buildSearchUI() {
|
|
2283
|
-
const { i18n:
|
|
2121
|
+
const { i18n: t } = this.options, e = p(
|
|
2284
2122
|
"div",
|
|
2285
2123
|
{ class: "iti__search-input-wrapper" },
|
|
2286
2124
|
this.dropdownContent
|
|
2287
2125
|
);
|
|
2288
|
-
this.searchIcon =
|
|
2126
|
+
this.searchIcon = p(
|
|
2289
2127
|
"span",
|
|
2290
2128
|
{
|
|
2291
2129
|
class: "iti__search-icon",
|
|
2292
2130
|
"aria-hidden": "true"
|
|
2293
2131
|
},
|
|
2294
|
-
|
|
2132
|
+
e
|
|
2295
2133
|
), this.searchIcon.innerHTML = `
|
|
2296
2134
|
<svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
|
|
2297
2135
|
<circle cx="11" cy="11" r="7" />
|
|
2298
2136
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
2299
|
-
</svg>`, this.searchInput =
|
|
2137
|
+
</svg>`, this.searchInput = p(
|
|
2300
2138
|
"input",
|
|
2301
2139
|
{
|
|
2302
2140
|
id: `iti-${this.id}__search-input`,
|
|
2303
2141
|
// Chrome says inputs need either a name or an id
|
|
2304
2142
|
type: "search",
|
|
2305
2143
|
class: "iti__search-input",
|
|
2306
|
-
placeholder:
|
|
2144
|
+
placeholder: t.searchPlaceholder,
|
|
2307
2145
|
// 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
|
|
2308
2146
|
role: "combobox",
|
|
2309
2147
|
"aria-expanded": "true",
|
|
2310
|
-
"aria-label":
|
|
2148
|
+
"aria-label": t.searchPlaceholder,
|
|
2311
2149
|
"aria-controls": `iti-${this.id}__country-listbox`,
|
|
2312
2150
|
"aria-autocomplete": "list",
|
|
2313
2151
|
autocomplete: "off"
|
|
2314
2152
|
},
|
|
2315
|
-
|
|
2316
|
-
), this.searchClearButton =
|
|
2153
|
+
e
|
|
2154
|
+
), this.searchClearButton = p(
|
|
2317
2155
|
"button",
|
|
2318
2156
|
{
|
|
2319
2157
|
type: "button",
|
|
2320
2158
|
class: "iti__search-clear iti__hide",
|
|
2321
|
-
"aria-label":
|
|
2159
|
+
"aria-label": t.clearSearchAriaLabel,
|
|
2322
2160
|
tabindex: "-1"
|
|
2323
2161
|
},
|
|
2324
|
-
|
|
2162
|
+
e
|
|
2325
2163
|
);
|
|
2326
2164
|
const i = `iti-${this.id}-clear-mask`;
|
|
2327
2165
|
this.searchClearButton.innerHTML = `
|
|
@@ -2331,11 +2169,11 @@ class L {
|
|
|
2331
2169
|
<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" />
|
|
2332
2170
|
</mask>
|
|
2333
2171
|
<circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${i})" />
|
|
2334
|
-
</svg>`, this.searchResultsA11yText =
|
|
2172
|
+
</svg>`, this.searchResultsA11yText = p(
|
|
2335
2173
|
"span",
|
|
2336
2174
|
{ class: "iti__a11y-text" },
|
|
2337
2175
|
this.dropdownContent
|
|
2338
|
-
), this.searchNoResults =
|
|
2176
|
+
), this.searchNoResults = p(
|
|
2339
2177
|
"div",
|
|
2340
2178
|
{
|
|
2341
2179
|
class: "iti__no-results iti__hide",
|
|
@@ -2343,520 +2181,784 @@ class L {
|
|
|
2343
2181
|
// all a11y messaging happens in this.searchResultsA11yText
|
|
2344
2182
|
},
|
|
2345
2183
|
this.dropdownContent
|
|
2346
|
-
), this.searchNoResults.textContent =
|
|
2184
|
+
), this.searchNoResults.textContent = t.zeroSearchResults;
|
|
2347
2185
|
}
|
|
2348
2186
|
_maybeUpdateInputPaddingAndReveal() {
|
|
2349
|
-
this.countryContainer && (this.
|
|
2350
|
-
}
|
|
2351
|
-
_maybeBuildHiddenInputs(
|
|
2352
|
-
var i,
|
|
2353
|
-
const { hiddenInput:
|
|
2354
|
-
if (
|
|
2355
|
-
const
|
|
2356
|
-
if (
|
|
2357
|
-
const a = (i = this.telInput.form) == null ? void 0 : i.querySelector(
|
|
2358
|
-
|
|
2187
|
+
this.countryContainer && (this.updateInputPadding(), this.countryContainer.classList.remove("iti__v-hide"));
|
|
2188
|
+
}
|
|
2189
|
+
_maybeBuildHiddenInputs(t) {
|
|
2190
|
+
var i, s;
|
|
2191
|
+
const { hiddenInput: e } = this.options;
|
|
2192
|
+
if (e) {
|
|
2193
|
+
const o = this.telInput.getAttribute("name") || "", n = e(o);
|
|
2194
|
+
if (n.phone) {
|
|
2195
|
+
const a = (i = this.telInput.form) == null ? void 0 : i.querySelector(
|
|
2196
|
+
`input[name="${n.phone}"]`
|
|
2197
|
+
);
|
|
2198
|
+
a ? this.hiddenInput = a : (this.hiddenInput = p("input", {
|
|
2359
2199
|
type: "hidden",
|
|
2360
|
-
name:
|
|
2361
|
-
}),
|
|
2200
|
+
name: n.phone
|
|
2201
|
+
}), t.appendChild(this.hiddenInput));
|
|
2362
2202
|
}
|
|
2363
|
-
if (
|
|
2364
|
-
const a = (
|
|
2365
|
-
|
|
2203
|
+
if (n.country) {
|
|
2204
|
+
const a = (s = this.telInput.form) == null ? void 0 : s.querySelector(
|
|
2205
|
+
`input[name="${n.country}"]`
|
|
2206
|
+
);
|
|
2207
|
+
a ? this.hiddenInputCountry = a : (this.hiddenInputCountry = p("input", {
|
|
2366
2208
|
type: "hidden",
|
|
2367
|
-
name:
|
|
2368
|
-
}),
|
|
2209
|
+
name: n.country
|
|
2210
|
+
}), t.appendChild(this.hiddenInputCountry));
|
|
2369
2211
|
}
|
|
2370
2212
|
}
|
|
2371
2213
|
}
|
|
2372
2214
|
//* For each country: add a country list item <li> to the countryList <ul> container.
|
|
2373
2215
|
_appendListItems() {
|
|
2216
|
+
const t = document.createDocumentFragment();
|
|
2374
2217
|
for (let e = 0; e < this.countries.length; e++) {
|
|
2375
|
-
const
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2218
|
+
const i = this.countries[e], s = D({
|
|
2219
|
+
iti__country: !0,
|
|
2220
|
+
iti__highlight: e === 0
|
|
2221
|
+
}), o = p("li", {
|
|
2222
|
+
id: `iti-${this.id}__item-${i.iso2}`,
|
|
2223
|
+
class: s,
|
|
2224
|
+
tabindex: "-1",
|
|
2225
|
+
role: "option",
|
|
2226
|
+
"aria-selected": "false"
|
|
2227
|
+
});
|
|
2228
|
+
o.dataset.dialCode = i.dialCode, o.dataset.countryCode = i.iso2, i.nodeById[this.id] = o, this.options.showFlags && p("div", { class: `iti__flag iti__${i.iso2}` }, o);
|
|
2229
|
+
const n = p("span", { class: "iti__country-name" }, o);
|
|
2230
|
+
n.textContent = i.name;
|
|
2231
|
+
const a = p("span", { class: "iti__dial-code" }, o);
|
|
2232
|
+
this.isRTL && a.setAttribute("dir", "ltr"), a.textContent = `+${i.dialCode}`, t.appendChild(o);
|
|
2233
|
+
}
|
|
2234
|
+
this.countryList.appendChild(t);
|
|
2235
|
+
}
|
|
2236
|
+
//* Update the input padding to make space for the selected country/dial code.
|
|
2237
|
+
updateInputPadding() {
|
|
2238
|
+
if (this.selectedCountry) {
|
|
2239
|
+
const t = this.options.separateDialCode ? 78 : 42, i = (this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || t) + 6;
|
|
2240
|
+
this.telInput.style.paddingLeft = `${i}px`;
|
|
2241
|
+
}
|
|
2242
|
+
}
|
|
2243
|
+
//* When input is in a hidden container during init, we cannot calculate the selected country width.
|
|
2244
|
+
//* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
|
|
2245
|
+
//* To get the right styling to apply, all we need is a shallow clone of the container,
|
|
2246
|
+
//* and then to inject a deep clone of the selectedCountry element.
|
|
2247
|
+
_getHiddenSelectedCountryWidth() {
|
|
2248
|
+
if (this.telInput.parentNode) {
|
|
2249
|
+
let t;
|
|
2250
|
+
try {
|
|
2251
|
+
t = window.top.document.body;
|
|
2252
|
+
} catch {
|
|
2253
|
+
t = document.body;
|
|
2254
|
+
}
|
|
2255
|
+
const e = this.telInput.parentNode.cloneNode(
|
|
2256
|
+
!1
|
|
2387
2257
|
);
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2258
|
+
e.style.visibility = "hidden", t.appendChild(e);
|
|
2259
|
+
const i = this.countryContainer.cloneNode();
|
|
2260
|
+
e.appendChild(i);
|
|
2261
|
+
const s = this.selectedCountry.cloneNode(
|
|
2262
|
+
!0
|
|
2263
|
+
);
|
|
2264
|
+
i.appendChild(s);
|
|
2265
|
+
const o = s.offsetWidth;
|
|
2266
|
+
return t.removeChild(e), o;
|
|
2391
2267
|
}
|
|
2268
|
+
return 0;
|
|
2269
|
+
}
|
|
2270
|
+
//* Update search results text (for a11y).
|
|
2271
|
+
updateSearchResultsA11yText() {
|
|
2272
|
+
const { i18n: t } = this.options, e = this.countryList.childElementCount;
|
|
2273
|
+
let i;
|
|
2274
|
+
e === 0 ? i = t.zeroSearchResults : t.searchResultsText ? i = t.searchResultsText(e) : e === 1 ? i = t.oneSearchResult : i = t.multipleSearchResults.replace(
|
|
2275
|
+
"${count}",
|
|
2276
|
+
e.toString()
|
|
2277
|
+
), this.searchResultsA11yText.textContent = i;
|
|
2278
|
+
}
|
|
2279
|
+
//* Check if an element is visible within it's container, else scroll until it is.
|
|
2280
|
+
scrollTo(t) {
|
|
2281
|
+
const e = this.countryList, i = document.documentElement.scrollTop, s = e.offsetHeight, o = e.getBoundingClientRect().top + i, n = o + s, a = t.offsetHeight, r = t.getBoundingClientRect().top + i, u = r + a, c = r - o + e.scrollTop;
|
|
2282
|
+
if (r < o)
|
|
2283
|
+
e.scrollTop = c;
|
|
2284
|
+
else if (u > n) {
|
|
2285
|
+
const C = s - a;
|
|
2286
|
+
e.scrollTop = c - C;
|
|
2287
|
+
}
|
|
2288
|
+
}
|
|
2289
|
+
//* Remove highlighting from other list items and highlight the given item.
|
|
2290
|
+
highlightListItem(t, e) {
|
|
2291
|
+
const i = this.highlightedItem;
|
|
2292
|
+
if (i && (i.classList.remove("iti__highlight"), i.setAttribute("aria-selected", "false")), this.highlightedItem = t, this.highlightedItem && (this.highlightedItem.classList.add("iti__highlight"), this.highlightedItem.setAttribute("aria-selected", "true"), this.options.countrySearch)) {
|
|
2293
|
+
const s = this.highlightedItem.getAttribute("id") || "";
|
|
2294
|
+
this.searchInput.setAttribute(
|
|
2295
|
+
"aria-activedescendant",
|
|
2296
|
+
s
|
|
2297
|
+
);
|
|
2298
|
+
}
|
|
2299
|
+
e && this.highlightedItem.focus();
|
|
2300
|
+
}
|
|
2301
|
+
//* Country search: Filter the country list to the given array of countries.
|
|
2302
|
+
filterCountries(t) {
|
|
2303
|
+
this.countryList.innerHTML = "";
|
|
2304
|
+
let e = !0;
|
|
2305
|
+
for (const i of t) {
|
|
2306
|
+
const s = i.nodeById[this.id];
|
|
2307
|
+
s && (this.countryList.appendChild(s), e && (this.highlightListItem(s, !1), e = !1));
|
|
2308
|
+
}
|
|
2309
|
+
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();
|
|
2310
|
+
}
|
|
2311
|
+
destroy() {
|
|
2312
|
+
this.telInput.iti = void 0, delete this.telInput.dataset.intlTelInputId, this.options.separateDialCode && (this.telInput.style.paddingLeft = this.originalPaddingLeft);
|
|
2313
|
+
const t = this.telInput.parentNode;
|
|
2314
|
+
t.before(this.telInput), t.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;
|
|
2315
|
+
for (const e of this.countries)
|
|
2316
|
+
delete e.nodeById[this.id];
|
|
2317
|
+
this.countries = null;
|
|
2318
|
+
}
|
|
2319
|
+
}
|
|
2320
|
+
function Y(l) {
|
|
2321
|
+
const { onlyCountries: t, excludeCountries: e } = l;
|
|
2322
|
+
if (t.length) {
|
|
2323
|
+
const i = t.map((s) => s.toLowerCase());
|
|
2324
|
+
return w.filter((s) => i.includes(s.iso2));
|
|
2325
|
+
} else if (e.length) {
|
|
2326
|
+
const i = e.map((s) => s.toLowerCase());
|
|
2327
|
+
return w.filter((s) => !i.includes(s.iso2));
|
|
2328
|
+
}
|
|
2329
|
+
return w;
|
|
2330
|
+
}
|
|
2331
|
+
function J(l, t) {
|
|
2332
|
+
for (const e of l) {
|
|
2333
|
+
const i = e.iso2.toLowerCase();
|
|
2334
|
+
t.i18n[i] && (e.name = t.i18n[i]);
|
|
2335
|
+
}
|
|
2336
|
+
}
|
|
2337
|
+
function Z(l, t) {
|
|
2338
|
+
const e = /* @__PURE__ */ new Set();
|
|
2339
|
+
let i = 0;
|
|
2340
|
+
const s = {}, o = (n, a, r) => {
|
|
2341
|
+
if (!n || !a)
|
|
2342
|
+
return;
|
|
2343
|
+
a.length > i && (i = a.length), s.hasOwnProperty(a) || (s[a] = []);
|
|
2344
|
+
const u = s[a];
|
|
2345
|
+
if (u.includes(n))
|
|
2346
|
+
return;
|
|
2347
|
+
const c = r !== void 0 ? r : u.length;
|
|
2348
|
+
u[c] = n;
|
|
2349
|
+
};
|
|
2350
|
+
for (const n of l) {
|
|
2351
|
+
e.has(n.dialCode) || e.add(n.dialCode);
|
|
2352
|
+
for (let a = 1; a < n.dialCode.length; a++) {
|
|
2353
|
+
const r = n.dialCode.substring(0, a);
|
|
2354
|
+
o(n.iso2, r);
|
|
2355
|
+
}
|
|
2356
|
+
o(n.iso2, n.dialCode, n.priority);
|
|
2357
|
+
}
|
|
2358
|
+
(t.onlyCountries.length || t.excludeCountries.length) && e.forEach((n) => {
|
|
2359
|
+
s[n] = s[n].filter(Boolean);
|
|
2360
|
+
});
|
|
2361
|
+
for (const n of l)
|
|
2362
|
+
if (n.areaCodes) {
|
|
2363
|
+
const a = s[n.dialCode][0];
|
|
2364
|
+
for (const r of n.areaCodes) {
|
|
2365
|
+
for (let u = 1; u < r.length; u++) {
|
|
2366
|
+
const c = r.substring(0, u), C = n.dialCode + c;
|
|
2367
|
+
o(a, C), o(n.iso2, C);
|
|
2368
|
+
}
|
|
2369
|
+
o(n.iso2, n.dialCode + r);
|
|
2370
|
+
}
|
|
2371
|
+
}
|
|
2372
|
+
return { dialCodes: e, dialCodeMaxLen: i, dialCodeToIso2Map: s };
|
|
2373
|
+
}
|
|
2374
|
+
function X(l, t) {
|
|
2375
|
+
t.countryOrder && (t.countryOrder = t.countryOrder.map((e) => e.toLowerCase())), l.sort((e, i) => {
|
|
2376
|
+
const { countryOrder: s } = t;
|
|
2377
|
+
if (s) {
|
|
2378
|
+
const o = s.indexOf(e.iso2), n = s.indexOf(i.iso2), a = o > -1, r = n > -1;
|
|
2379
|
+
if (a || r)
|
|
2380
|
+
return a && r ? o - n : a ? -1 : 1;
|
|
2381
|
+
}
|
|
2382
|
+
return e.name.localeCompare(i.name);
|
|
2383
|
+
});
|
|
2384
|
+
}
|
|
2385
|
+
function tt(l) {
|
|
2386
|
+
for (const t of l)
|
|
2387
|
+
t.normalisedName = M(t.name), t.initials = t.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((e) => e[0]).join("").toLowerCase(), t.dialCodePlus = `+${t.dialCode}`;
|
|
2388
|
+
}
|
|
2389
|
+
function et(l, t, e, i) {
|
|
2390
|
+
let s = l;
|
|
2391
|
+
if (e && t) {
|
|
2392
|
+
t = `+${i.dialCode}`;
|
|
2393
|
+
const o = s[t.length] === " " || s[t.length] === "-" ? t.length + 1 : t.length;
|
|
2394
|
+
s = s.substring(o);
|
|
2395
|
+
}
|
|
2396
|
+
return s;
|
|
2397
|
+
}
|
|
2398
|
+
function it(l, t, e, i, s) {
|
|
2399
|
+
const o = e ? e.formatNumberAsYouType(l, i.iso2) : l, { dialCode: n } = i;
|
|
2400
|
+
return s && t.charAt(0) !== "+" && o.includes(`+${n}`) ? (o.split(`+${n}`)[1] || "").trim() : o;
|
|
2401
|
+
}
|
|
2402
|
+
function st(l, t, e, i) {
|
|
2403
|
+
if (e === 0 && !i)
|
|
2404
|
+
return 0;
|
|
2405
|
+
let s = 0;
|
|
2406
|
+
for (let o = 0; o < t.length; o++) {
|
|
2407
|
+
if (/[+0-9]/.test(t[o]) && s++, s === l && !i)
|
|
2408
|
+
return o + 1;
|
|
2409
|
+
if (i && s === l + 1)
|
|
2410
|
+
return o;
|
|
2411
|
+
}
|
|
2412
|
+
return t.length;
|
|
2413
|
+
}
|
|
2414
|
+
const nt = [
|
|
2415
|
+
"800",
|
|
2416
|
+
"822",
|
|
2417
|
+
"833",
|
|
2418
|
+
"844",
|
|
2419
|
+
"855",
|
|
2420
|
+
"866",
|
|
2421
|
+
"877",
|
|
2422
|
+
"880",
|
|
2423
|
+
"881",
|
|
2424
|
+
"882",
|
|
2425
|
+
"883",
|
|
2426
|
+
"884",
|
|
2427
|
+
"885",
|
|
2428
|
+
"886",
|
|
2429
|
+
"887",
|
|
2430
|
+
"888",
|
|
2431
|
+
"889"
|
|
2432
|
+
], k = (l) => {
|
|
2433
|
+
const t = v(l);
|
|
2434
|
+
if (t.charAt(0) === "1") {
|
|
2435
|
+
const e = t.substring(1, 4);
|
|
2436
|
+
return nt.includes(e);
|
|
2437
|
+
}
|
|
2438
|
+
return !1;
|
|
2439
|
+
};
|
|
2440
|
+
for (const l of w)
|
|
2441
|
+
l.name = x[l.iso2];
|
|
2442
|
+
let ot = 0;
|
|
2443
|
+
const rt = new Set(w.map((l) => l.iso2)), A = (l) => rt.has(l);
|
|
2444
|
+
class S {
|
|
2445
|
+
constructor(t, e = {}) {
|
|
2446
|
+
this.id = ot++, this.options = { ...T, ...e }, q(this.options), this.ui = new Q(t, this.options, this.id), this.isAndroid = S._getIsAndroid(), this.promise = this._createInitPromises(), this.countries = Y(this.options);
|
|
2447
|
+
const { dialCodes: i, dialCodeMaxLen: s, dialCodeToIso2Map: o } = Z(
|
|
2448
|
+
this.countries,
|
|
2449
|
+
this.options
|
|
2450
|
+
);
|
|
2451
|
+
this.dialCodes = i, this.dialCodeMaxLen = s, this.dialCodeToIso2Map = o, this.countryByIso2 = new Map(this.countries.map((n) => [n.iso2, n])), this._init();
|
|
2452
|
+
}
|
|
2453
|
+
static _getIsAndroid() {
|
|
2454
|
+
return typeof navigator < "u" ? /Android/i.test(navigator.userAgent) : !1;
|
|
2455
|
+
}
|
|
2456
|
+
_createInitPromises() {
|
|
2457
|
+
const t = new Promise((i, s) => {
|
|
2458
|
+
this.resolveAutoCountryPromise = i, this.rejectAutoCountryPromise = s;
|
|
2459
|
+
}), e = new Promise((i, s) => {
|
|
2460
|
+
this.resolveUtilsScriptPromise = i, this.rejectUtilsScriptPromise = s;
|
|
2461
|
+
});
|
|
2462
|
+
return Promise.all([t, e]);
|
|
2463
|
+
}
|
|
2464
|
+
//* Can't be private as it's called from intlTelInput convenience wrapper.
|
|
2465
|
+
_init() {
|
|
2466
|
+
this.selectedCountryData = {}, this.abortController = new AbortController(), this._processCountryData(), this.ui.generateMarkup(this.countries), this._setInitialState(), this._initListeners(), this._initRequests();
|
|
2467
|
+
}
|
|
2468
|
+
//********************
|
|
2469
|
+
//* PRIVATE METHODS
|
|
2470
|
+
//********************
|
|
2471
|
+
//* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
|
|
2472
|
+
_processCountryData() {
|
|
2473
|
+
J(this.countries, this.options), X(this.countries, this.options), tt(this.countries);
|
|
2392
2474
|
}
|
|
2393
2475
|
//* Set the initial state of the input value and the selected country by:
|
|
2394
2476
|
//* 1. Extracting a dial code from the given number
|
|
2395
2477
|
//* 2. Using explicit initialCountry
|
|
2396
|
-
_setInitialState(
|
|
2397
|
-
const
|
|
2398
|
-
if (
|
|
2399
|
-
this._updateCountryFromNumber(
|
|
2400
|
-
else if (!
|
|
2401
|
-
const
|
|
2402
|
-
|
|
2478
|
+
_setInitialState(t = !1) {
|
|
2479
|
+
const e = this.ui.telInput.getAttribute("value"), i = this.ui.telInput.value, o = e && e.startsWith("+") && (!i || !i.startsWith("+")) ? e : i, n = this._getDialCode(o), a = k(o), { initialCountry: r, geoIpLookup: u } = this.options, c = r === "auto" && u;
|
|
2480
|
+
if (n && !a)
|
|
2481
|
+
this._updateCountryFromNumber(o);
|
|
2482
|
+
else if (!c || t) {
|
|
2483
|
+
const C = r ? r.toLowerCase() : "";
|
|
2484
|
+
A(C) ? this._setCountry(C) : n && a ? this._setCountry("us") : this._setCountry("");
|
|
2403
2485
|
}
|
|
2404
|
-
|
|
2486
|
+
o && this._updateValFromNumber(o);
|
|
2405
2487
|
}
|
|
2406
2488
|
//* Initialise the main event listeners: input keyup, and click selected country.
|
|
2407
2489
|
_initListeners() {
|
|
2408
|
-
this._initTelInputListeners(), this.options.allowDropdown && this._initDropdownListeners(), (this.hiddenInput || this.hiddenInputCountry) && this.telInput.form && this._initHiddenInputListener();
|
|
2490
|
+
this._initTelInputListeners(), this.options.allowDropdown && this._initDropdownListeners(), (this.ui.hiddenInput || this.ui.hiddenInputCountry) && this.ui.telInput.form && this._initHiddenInputListener();
|
|
2409
2491
|
}
|
|
2410
2492
|
//* Update hidden input on form submit.
|
|
2411
2493
|
_initHiddenInputListener() {
|
|
2412
2494
|
var e;
|
|
2413
|
-
|
|
2414
|
-
this.hiddenInput && (this.hiddenInput.value = this.getNumber()), this.hiddenInputCountry && (this.hiddenInputCountry.value = this.
|
|
2415
|
-
}
|
|
2416
|
-
|
|
2417
|
-
this.
|
|
2418
|
-
);
|
|
2495
|
+
const t = () => {
|
|
2496
|
+
this.ui.hiddenInput && (this.ui.hiddenInput.value = this.getNumber()), this.ui.hiddenInputCountry && (this.ui.hiddenInputCountry.value = this.selectedCountryData.iso2 || "");
|
|
2497
|
+
};
|
|
2498
|
+
(e = this.ui.telInput.form) == null || e.addEventListener("submit", t, {
|
|
2499
|
+
signal: this.abortController.signal
|
|
2500
|
+
});
|
|
2419
2501
|
}
|
|
2420
2502
|
//* initialise the dropdown listeners.
|
|
2421
2503
|
_initDropdownListeners() {
|
|
2422
|
-
this.
|
|
2423
|
-
this.dropdownContent.classList.contains("iti__hide") ? this.telInput.focus() :
|
|
2504
|
+
const t = this.abortController.signal, e = (n) => {
|
|
2505
|
+
this.ui.dropdownContent.classList.contains("iti__hide") ? this.ui.telInput.focus() : n.preventDefault();
|
|
2506
|
+
}, i = this.ui.telInput.closest("label");
|
|
2507
|
+
i && i.addEventListener("click", e, { signal: t });
|
|
2508
|
+
const s = () => {
|
|
2509
|
+
this.ui.dropdownContent.classList.contains("iti__hide") && !this.ui.telInput.disabled && !this.ui.telInput.readOnly && this._openDropdown();
|
|
2510
|
+
};
|
|
2511
|
+
this.ui.selectedCountry.addEventListener("click", s, {
|
|
2512
|
+
signal: t
|
|
2513
|
+
});
|
|
2514
|
+
const o = (n) => {
|
|
2515
|
+
this.ui.dropdownContent.classList.contains("iti__hide") && ["ArrowUp", "ArrowDown", " ", "Enter"].includes(n.key) && (n.preventDefault(), n.stopPropagation(), this._openDropdown()), n.key === "Tab" && this._closeDropdown();
|
|
2424
2516
|
};
|
|
2425
|
-
|
|
2426
|
-
e && e.addEventListener("click", this._handleLabelClick), this._handleClickSelectedCountry = () => {
|
|
2427
|
-
this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly && this._openDropdown();
|
|
2428
|
-
}, this.selectedCountry.addEventListener("click", this._handleClickSelectedCountry), this._handleCountryContainerKeydown = (t) => {
|
|
2429
|
-
this.dropdownContent.classList.contains("iti__hide") && ["ArrowUp", "ArrowDown", " ", "Enter"].includes(t.key) && (t.preventDefault(), t.stopPropagation(), this._openDropdown()), t.key === "Tab" && this._closeDropdown();
|
|
2430
|
-
}, this.countryContainer.addEventListener(
|
|
2517
|
+
this.ui.countryContainer.addEventListener(
|
|
2431
2518
|
"keydown",
|
|
2432
|
-
|
|
2519
|
+
o,
|
|
2520
|
+
{ signal: t }
|
|
2433
2521
|
);
|
|
2434
2522
|
}
|
|
2435
2523
|
//* Init many requests: utils script / geo ip lookup.
|
|
2436
2524
|
_initRequests() {
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2525
|
+
const { loadUtils: t, initialCountry: e, geoIpLookup: i } = this.options;
|
|
2526
|
+
if (t && !d.utils) {
|
|
2527
|
+
const o = () => {
|
|
2528
|
+
var n;
|
|
2529
|
+
(n = d.attachUtils(t)) == null || n.catch(() => {
|
|
2530
|
+
});
|
|
2531
|
+
};
|
|
2532
|
+
if (d.documentReady())
|
|
2533
|
+
o();
|
|
2534
|
+
else {
|
|
2535
|
+
const n = () => {
|
|
2536
|
+
o();
|
|
2537
|
+
};
|
|
2538
|
+
window.addEventListener("load", n, {
|
|
2539
|
+
signal: this.abortController.signal
|
|
2540
|
+
});
|
|
2541
|
+
}
|
|
2542
|
+
} else
|
|
2543
|
+
this.resolveUtilsScriptPromise();
|
|
2544
|
+
e === "auto" && i && !this.selectedCountryData.iso2 ? this._loadAutoCountry() : this.resolveAutoCountryPromise();
|
|
2445
2545
|
}
|
|
2446
2546
|
//* Perform the geo ip lookup.
|
|
2447
2547
|
_loadAutoCountry() {
|
|
2448
|
-
|
|
2449
|
-
(
|
|
2450
|
-
const
|
|
2451
|
-
|
|
2548
|
+
d.autoCountry ? this.handleAutoCountry() : d.startedLoadingAutoCountry || (d.startedLoadingAutoCountry = !0, typeof this.options.geoIpLookup == "function" && this.options.geoIpLookup(
|
|
2549
|
+
(t = "") => {
|
|
2550
|
+
const e = t.toLowerCase();
|
|
2551
|
+
A(e) ? (d.autoCountry = e, setTimeout(() => I("handleAutoCountry"))) : (this._setInitialState(!0), I("rejectAutoCountryPromise"));
|
|
2452
2552
|
},
|
|
2453
2553
|
() => {
|
|
2454
|
-
this._setInitialState(!0),
|
|
2554
|
+
this._setInitialState(!0), I("rejectAutoCountryPromise");
|
|
2455
2555
|
}
|
|
2456
2556
|
));
|
|
2457
2557
|
}
|
|
2458
2558
|
_openDropdownWithPlus() {
|
|
2459
|
-
this._openDropdown(), this.searchInput.value = "+", this.
|
|
2559
|
+
this._openDropdown(), this.ui.searchInput.value = "+", this._filterCountriesByQuery("");
|
|
2460
2560
|
}
|
|
2461
2561
|
//* Initialize the tel input listeners.
|
|
2462
2562
|
_initTelInputListeners() {
|
|
2463
2563
|
this._bindInputListener(), this._maybeBindKeydownListener(), this._maybeBindPasteListener();
|
|
2464
2564
|
}
|
|
2465
2565
|
_bindInputListener() {
|
|
2466
|
-
const {
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2566
|
+
const {
|
|
2567
|
+
strictMode: t,
|
|
2568
|
+
formatAsYouType: e,
|
|
2569
|
+
separateDialCode: i,
|
|
2570
|
+
allowDropdown: s,
|
|
2571
|
+
countrySearch: o
|
|
2572
|
+
} = this.options;
|
|
2573
|
+
let n = !1;
|
|
2574
|
+
new RegExp("\\p{L}", "u").test(this.ui.telInput.value) && (n = !0);
|
|
2575
|
+
const a = (r) => {
|
|
2576
|
+
if (this.isAndroid && (r == null ? void 0 : r.data) === "+" && i && s && o) {
|
|
2577
|
+
const m = this.ui.telInput.selectionStart || 0, h = this.ui.telInput.value.substring(
|
|
2578
|
+
0,
|
|
2579
|
+
m - 1
|
|
2580
|
+
), f = this.ui.telInput.value.substring(m);
|
|
2581
|
+
this.ui.telInput.value = h + f, this._openDropdownWithPlus();
|
|
2472
2582
|
return;
|
|
2473
2583
|
}
|
|
2474
|
-
this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
|
|
2475
|
-
const
|
|
2476
|
-
|
|
2477
|
-
const
|
|
2478
|
-
if (
|
|
2479
|
-
const
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2584
|
+
this._updateCountryFromNumber(this.ui.telInput.value) && this._triggerCountryChange();
|
|
2585
|
+
const u = (r == null ? void 0 : r.data) && /[^+0-9]/.test(r.data), c = (r == null ? void 0 : r.inputType) === "insertFromPaste" && this.ui.telInput.value;
|
|
2586
|
+
u || c && !t ? n = !0 : /[^+0-9]/.test(this.ui.telInput.value) || (n = !1);
|
|
2587
|
+
const C = (r == null ? void 0 : r.detail) && r.detail.isSetNumber;
|
|
2588
|
+
if (e && !n && !C) {
|
|
2589
|
+
const m = this.ui.telInput.selectionStart || 0, f = this.ui.telInput.value.substring(
|
|
2590
|
+
0,
|
|
2591
|
+
m
|
|
2592
|
+
).replace(
|
|
2593
|
+
/[^+0-9]/g,
|
|
2594
|
+
""
|
|
2595
|
+
).length, b = (r == null ? void 0 : r.inputType) === "deleteContentForward", y = this._getFullNumber(), g = it(
|
|
2596
|
+
y,
|
|
2597
|
+
this.ui.telInput.value,
|
|
2598
|
+
d.utils,
|
|
2483
2599
|
this.selectedCountryData,
|
|
2484
2600
|
this.options.separateDialCode
|
|
2485
|
-
),
|
|
2486
|
-
|
|
2601
|
+
), _ = st(
|
|
2602
|
+
f,
|
|
2603
|
+
g,
|
|
2604
|
+
m,
|
|
2605
|
+
b
|
|
2606
|
+
);
|
|
2607
|
+
this.ui.telInput.value = g, this.ui.telInput.setSelectionRange(_, _);
|
|
2487
2608
|
}
|
|
2488
|
-
}
|
|
2609
|
+
};
|
|
2610
|
+
this.ui.telInput.addEventListener("input", a, {
|
|
2611
|
+
signal: this.abortController.signal
|
|
2612
|
+
});
|
|
2489
2613
|
}
|
|
2490
2614
|
_maybeBindKeydownListener() {
|
|
2491
|
-
const { strictMode:
|
|
2492
|
-
(
|
|
2493
|
-
|
|
2494
|
-
if (
|
|
2495
|
-
s.
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2615
|
+
const { strictMode: t, separateDialCode: e, allowDropdown: i, countrySearch: s } = this.options;
|
|
2616
|
+
if (t || e) {
|
|
2617
|
+
const o = (n) => {
|
|
2618
|
+
if (n.key && n.key.length === 1 && !n.altKey && !n.ctrlKey && !n.metaKey) {
|
|
2619
|
+
if (e && i && s && n.key === "+") {
|
|
2620
|
+
n.preventDefault(), this._openDropdownWithPlus();
|
|
2621
|
+
return;
|
|
2622
|
+
}
|
|
2623
|
+
if (t) {
|
|
2624
|
+
const a = this.ui.telInput.value, u = !a.startsWith("+") && this.ui.telInput.selectionStart === 0 && n.key === "+", c = /^[0-9]$/.test(n.key), C = e ? c : u || c, m = a.slice(0, this.ui.telInput.selectionStart) + n.key + a.slice(this.ui.telInput.selectionEnd), h = this._getFullNumber(m), f = d.utils.getCoreNumber(
|
|
2625
|
+
h,
|
|
2626
|
+
this.selectedCountryData.iso2
|
|
2627
|
+
), b = this.maxCoreNumberLength && f.length > this.maxCoreNumberLength, g = this._getNewCountryFromNumber(h) !== null;
|
|
2628
|
+
(!C || b && !g && !u) && n.preventDefault();
|
|
2629
|
+
}
|
|
2501
2630
|
}
|
|
2502
|
-
}
|
|
2503
|
-
|
|
2631
|
+
};
|
|
2632
|
+
this.ui.telInput.addEventListener("keydown", o, {
|
|
2633
|
+
signal: this.abortController.signal
|
|
2634
|
+
});
|
|
2635
|
+
}
|
|
2504
2636
|
}
|
|
2505
2637
|
_maybeBindPasteListener() {
|
|
2506
|
-
this.options.strictMode
|
|
2507
|
-
e
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
if (this.maxCoreNumberLength && y.length > this.maxCoreNumberLength)
|
|
2515
|
-
if (t.selectionEnd === t.value.length) {
|
|
2516
|
-
const w = y.length - this.maxCoreNumberLength;
|
|
2517
|
-
C = C.slice(0, C.length - w);
|
|
2518
|
-
} else
|
|
2638
|
+
if (this.options.strictMode) {
|
|
2639
|
+
const t = (e) => {
|
|
2640
|
+
e.preventDefault();
|
|
2641
|
+
const i = this.ui.telInput, s = i.selectionStart, o = i.selectionEnd, n = i.value.slice(0, s), a = i.value.slice(o), r = this.selectedCountryData.iso2, u = e.clipboardData.getData("text"), c = s === 0 && o > 0, C = !i.value.startsWith("+") || c, m = u.replace(/[^0-9+]/g, ""), h = m.startsWith("+"), f = m.replace(/\+/g, ""), b = h && C ? `+${f}` : f;
|
|
2642
|
+
let y = n + b + a, g = d.utils.getCoreNumber(y, r);
|
|
2643
|
+
for (; g.length === 0 && y.length > 0; )
|
|
2644
|
+
y = y.slice(0, -1), g = d.utils.getCoreNumber(y, r);
|
|
2645
|
+
if (!g)
|
|
2519
2646
|
return;
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2647
|
+
if (this.maxCoreNumberLength && g.length > this.maxCoreNumberLength)
|
|
2648
|
+
if (i.selectionEnd === i.value.length) {
|
|
2649
|
+
const E = g.length - this.maxCoreNumberLength;
|
|
2650
|
+
y = y.slice(0, y.length - E);
|
|
2651
|
+
} else
|
|
2652
|
+
return;
|
|
2653
|
+
i.value = y;
|
|
2654
|
+
const _ = s + b.length;
|
|
2655
|
+
i.setSelectionRange(_, _), i.dispatchEvent(new InputEvent("input", { bubbles: !0 }));
|
|
2656
|
+
};
|
|
2657
|
+
this.ui.telInput.addEventListener("paste", t, {
|
|
2658
|
+
signal: this.abortController.signal
|
|
2659
|
+
});
|
|
2660
|
+
}
|
|
2524
2661
|
}
|
|
2525
2662
|
//* Adhere to the input's maxlength attr.
|
|
2526
|
-
_cap(
|
|
2527
|
-
const
|
|
2528
|
-
return
|
|
2663
|
+
_cap(t) {
|
|
2664
|
+
const e = Number(this.ui.telInput.getAttribute("maxlength"));
|
|
2665
|
+
return e && t.length > e ? t.substring(0, e) : t;
|
|
2529
2666
|
}
|
|
2530
|
-
//* Trigger a custom event on the input.
|
|
2531
|
-
_trigger(
|
|
2532
|
-
const i = new CustomEvent(
|
|
2667
|
+
//* Trigger a custom event on the input (typed via ItiEventMap).
|
|
2668
|
+
_trigger(t, e = {}) {
|
|
2669
|
+
const i = new CustomEvent(t, {
|
|
2533
2670
|
bubbles: !0,
|
|
2534
2671
|
cancelable: !0,
|
|
2535
|
-
detail:
|
|
2672
|
+
detail: e
|
|
2536
2673
|
});
|
|
2537
|
-
this.telInput.dispatchEvent(i);
|
|
2674
|
+
this.ui.telInput.dispatchEvent(i);
|
|
2538
2675
|
}
|
|
2539
2676
|
//* Open the dropdown.
|
|
2540
2677
|
_openDropdown() {
|
|
2541
|
-
const { fixDropdownWidth:
|
|
2542
|
-
if (
|
|
2543
|
-
const i = this.countryList.firstElementChild;
|
|
2544
|
-
i && (this.
|
|
2678
|
+
const { fixDropdownWidth: t, countrySearch: e } = this.options;
|
|
2679
|
+
if (this.dropdownAbortController = new AbortController(), t && (this.ui.dropdownContent.style.width = `${this.ui.telInput.offsetWidth}px`), this.ui.dropdownContent.classList.remove("iti__hide"), this.ui.selectedCountry.setAttribute("aria-expanded", "true"), this._setDropdownPosition(), e) {
|
|
2680
|
+
const i = this.ui.countryList.firstElementChild;
|
|
2681
|
+
i && (this.ui.highlightListItem(i, !1), this.ui.countryList.scrollTop = 0), this.ui.searchInput.focus();
|
|
2545
2682
|
}
|
|
2546
|
-
this._bindDropdownListeners(), this.dropdownArrow.classList.add("iti__arrow--up"), this._trigger("open:countrydropdown");
|
|
2683
|
+
this._bindDropdownListeners(), this.ui.dropdownArrow.classList.add("iti__arrow--up"), this._trigger("open:countrydropdown");
|
|
2547
2684
|
}
|
|
2548
2685
|
//* Set the dropdown position
|
|
2549
2686
|
_setDropdownPosition() {
|
|
2550
|
-
if (this.options.dropdownContainer && this.options.dropdownContainer.appendChild(this.dropdown), !this.options.useFullscreenPopup) {
|
|
2551
|
-
const
|
|
2552
|
-
this.options.dropdownContainer
|
|
2687
|
+
if (this.options.dropdownContainer && this.options.dropdownContainer.appendChild(this.ui.dropdown), !this.options.useFullscreenPopup) {
|
|
2688
|
+
const t = this.ui.telInput.getBoundingClientRect(), e = this.ui.telInput.offsetHeight;
|
|
2689
|
+
if (this.options.dropdownContainer) {
|
|
2690
|
+
this.ui.dropdown.style.top = `${t.top + e}px`, this.ui.dropdown.style.left = `${t.left}px`;
|
|
2691
|
+
const i = () => this._closeDropdown();
|
|
2692
|
+
window.addEventListener("scroll", i, {
|
|
2693
|
+
signal: this.dropdownAbortController.signal
|
|
2694
|
+
});
|
|
2695
|
+
}
|
|
2553
2696
|
}
|
|
2554
2697
|
}
|
|
2555
2698
|
//* We only bind dropdown listeners when the dropdown is open.
|
|
2556
2699
|
_bindDropdownListeners() {
|
|
2557
|
-
this.
|
|
2558
|
-
var
|
|
2559
|
-
const
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2700
|
+
const t = this.dropdownAbortController.signal, e = (r) => {
|
|
2701
|
+
var c;
|
|
2702
|
+
const u = (c = r.target) == null ? void 0 : c.closest(
|
|
2703
|
+
".iti__country"
|
|
2704
|
+
);
|
|
2705
|
+
u && this.ui.highlightListItem(u, !1);
|
|
2706
|
+
};
|
|
2707
|
+
this.ui.countryList.addEventListener("mouseover", e, {
|
|
2708
|
+
signal: t
|
|
2709
|
+
});
|
|
2710
|
+
const i = (r) => {
|
|
2711
|
+
var c;
|
|
2712
|
+
const u = (c = r.target) == null ? void 0 : c.closest(
|
|
2713
|
+
".iti__country"
|
|
2714
|
+
);
|
|
2715
|
+
u && this._selectListItem(u);
|
|
2716
|
+
};
|
|
2717
|
+
this.ui.countryList.addEventListener("click", i, {
|
|
2718
|
+
signal: t
|
|
2719
|
+
});
|
|
2720
|
+
const s = (r) => {
|
|
2721
|
+
!!r.target.closest(
|
|
2722
|
+
`#iti-${this.id}__dropdown-content`
|
|
2723
|
+
) || this._closeDropdown();
|
|
2724
|
+
};
|
|
2725
|
+
setTimeout(() => {
|
|
2571
2726
|
document.documentElement.addEventListener(
|
|
2572
2727
|
"click",
|
|
2573
|
-
|
|
2728
|
+
s,
|
|
2729
|
+
{ signal: t }
|
|
2574
2730
|
);
|
|
2575
2731
|
}, 0);
|
|
2576
|
-
let
|
|
2577
|
-
|
|
2578
|
-
["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(
|
|
2579
|
-
|
|
2732
|
+
let o = "", n = null;
|
|
2733
|
+
const a = (r) => {
|
|
2734
|
+
["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(r.key) && (r.preventDefault(), r.stopPropagation(), r.key === "ArrowUp" || r.key === "ArrowDown" ? this._handleUpDownKey(r.key) : r.key === "Enter" ? this._handleEnterKey() : r.key === "Escape" && this._closeDropdown()), !this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(r.key) && (r.stopPropagation(), n && clearTimeout(n), o += r.key.toLowerCase(), this._searchForCountry(o), n = setTimeout(() => {
|
|
2735
|
+
o = "";
|
|
2580
2736
|
}, 1e3));
|
|
2581
|
-
}
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2737
|
+
};
|
|
2738
|
+
if (document.addEventListener("keydown", a, { signal: t }), this.options.countrySearch) {
|
|
2739
|
+
const r = () => {
|
|
2740
|
+
const m = this.ui.searchInput.value.trim();
|
|
2741
|
+
this._filterCountriesByQuery(m), this.ui.searchInput.value ? this.ui.searchClearButton.classList.remove("iti__hide") : this.ui.searchClearButton.classList.add("iti__hide");
|
|
2585
2742
|
};
|
|
2586
|
-
let
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2743
|
+
let u = null;
|
|
2744
|
+
const c = () => {
|
|
2745
|
+
u && clearTimeout(u), u = setTimeout(() => {
|
|
2746
|
+
r(), u = null;
|
|
2590
2747
|
}, 100);
|
|
2591
|
-
}
|
|
2592
|
-
|
|
2593
|
-
|
|
2748
|
+
};
|
|
2749
|
+
this.ui.searchInput.addEventListener("input", c, {
|
|
2750
|
+
signal: t
|
|
2751
|
+
});
|
|
2752
|
+
const C = () => {
|
|
2753
|
+
this.ui.searchInput.value = "", this.ui.searchInput.focus(), r();
|
|
2754
|
+
};
|
|
2755
|
+
this.ui.searchClearButton.addEventListener("click", C, {
|
|
2756
|
+
signal: t
|
|
2757
|
+
});
|
|
2594
2758
|
}
|
|
2595
2759
|
}
|
|
2596
2760
|
//* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
|
|
2597
|
-
_searchForCountry(
|
|
2598
|
-
for (const
|
|
2599
|
-
if (
|
|
2600
|
-
const
|
|
2601
|
-
this.
|
|
2761
|
+
_searchForCountry(t) {
|
|
2762
|
+
for (const e of this.countries)
|
|
2763
|
+
if (e.name.substring(0, t.length).toLowerCase() === t) {
|
|
2764
|
+
const s = e.nodeById[this.id];
|
|
2765
|
+
this.ui.highlightListItem(s, !1), this.ui.scrollTo(s);
|
|
2602
2766
|
break;
|
|
2603
2767
|
}
|
|
2604
2768
|
}
|
|
2605
|
-
//* Country search
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
e === "" ? t = this.countries : t = this._getMatchedCountries(e);
|
|
2610
|
-
let i = !0;
|
|
2611
|
-
for (const n of t) {
|
|
2612
|
-
const s = n.nodeById[this.id];
|
|
2613
|
-
s && (this.countryList.appendChild(s), i && (this._highlightListItem(s, !1), i = !1));
|
|
2614
|
-
}
|
|
2615
|
-
i ? (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();
|
|
2769
|
+
//* Country search: Filter the countries according to the search query.
|
|
2770
|
+
_filterCountriesByQuery(t) {
|
|
2771
|
+
let e;
|
|
2772
|
+
t === "" ? e = this.countries : e = this._getMatchedCountries(t), this.ui.filterCountries(e);
|
|
2616
2773
|
}
|
|
2617
|
-
_getMatchedCountries(
|
|
2618
|
-
const
|
|
2619
|
-
for (const
|
|
2620
|
-
|
|
2774
|
+
_getMatchedCountries(t) {
|
|
2775
|
+
const e = M(t), i = [], s = [], o = [], n = [], a = [], r = [];
|
|
2776
|
+
for (const u of this.countries)
|
|
2777
|
+
u.iso2 === e ? i.push(u) : u.normalisedName.startsWith(e) ? s.push(u) : u.normalisedName.includes(e) ? o.push(u) : e === u.dialCode || e === u.dialCodePlus ? n.push(u) : u.dialCodePlus.includes(e) ? a.push(u) : u.initials.includes(e) && r.push(u);
|
|
2621
2778
|
return [
|
|
2622
|
-
...i.sort((
|
|
2623
|
-
...
|
|
2624
|
-
...
|
|
2625
|
-
...
|
|
2626
|
-
...a.sort((
|
|
2627
|
-
...
|
|
2779
|
+
...i.sort((u, c) => u.priority - c.priority),
|
|
2780
|
+
...s.sort((u, c) => u.priority - c.priority),
|
|
2781
|
+
...o.sort((u, c) => u.priority - c.priority),
|
|
2782
|
+
...n.sort((u, c) => u.priority - c.priority),
|
|
2783
|
+
...a.sort((u, c) => u.priority - c.priority),
|
|
2784
|
+
...r.sort((u, c) => u.priority - c.priority)
|
|
2628
2785
|
];
|
|
2629
2786
|
}
|
|
2630
|
-
//* Update search results text (for a11y).
|
|
2631
|
-
_updateSearchResultsA11yText() {
|
|
2632
|
-
const { i18n: e } = this.options, t = this.countryList.childElementCount;
|
|
2633
|
-
let i;
|
|
2634
|
-
t === 0 ? i = e.zeroSearchResults : e.searchResultsText ? i = e.searchResultsText(t) : t === 1 ? i = e.oneSearchResult : i = e.multipleSearchResults.replace("${count}", t.toString()), this.searchResultsA11yText.textContent = i;
|
|
2635
|
-
}
|
|
2636
2787
|
//* Highlight the next/prev item in the list (and ensure it is visible).
|
|
2637
|
-
_handleUpDownKey(
|
|
2638
|
-
var i,
|
|
2639
|
-
let
|
|
2640
|
-
!
|
|
2788
|
+
_handleUpDownKey(t) {
|
|
2789
|
+
var i, s;
|
|
2790
|
+
let e = t === "ArrowUp" ? (i = this.ui.highlightedItem) == null ? void 0 : i.previousElementSibling : (s = this.ui.highlightedItem) == null ? void 0 : s.nextElementSibling;
|
|
2791
|
+
!e && this.ui.countryList.childElementCount > 1 && (e = t === "ArrowUp" ? this.ui.countryList.lastElementChild : this.ui.countryList.firstElementChild), e && (this.ui.scrollTo(e), this.ui.highlightListItem(e, !1));
|
|
2641
2792
|
}
|
|
2642
2793
|
//* Select the currently highlighted item.
|
|
2643
2794
|
_handleEnterKey() {
|
|
2644
|
-
this.highlightedItem && this._selectListItem(this.highlightedItem);
|
|
2795
|
+
this.ui.highlightedItem && this._selectListItem(this.ui.highlightedItem);
|
|
2645
2796
|
}
|
|
2646
2797
|
//* Update the input's value to the given val (format first if possible)
|
|
2647
2798
|
//* NOTE: this is called from _setInitialState, handleUtils and setNumber.
|
|
2648
|
-
_updateValFromNumber(
|
|
2649
|
-
let
|
|
2650
|
-
if (this.options.formatOnDisplay &&
|
|
2651
|
-
const i = this.options.nationalMode ||
|
|
2652
|
-
|
|
2653
|
-
|
|
2799
|
+
_updateValFromNumber(t) {
|
|
2800
|
+
let e = t;
|
|
2801
|
+
if (this.options.formatOnDisplay && d.utils && this.selectedCountryData) {
|
|
2802
|
+
const i = this.options.nationalMode || !e.startsWith("+") && !this.options.separateDialCode, { NATIONAL: s, INTERNATIONAL: o } = d.utils.numberFormat, n = i ? s : o;
|
|
2803
|
+
e = d.utils.formatNumber(
|
|
2804
|
+
e,
|
|
2654
2805
|
this.selectedCountryData.iso2,
|
|
2655
|
-
|
|
2806
|
+
n
|
|
2656
2807
|
);
|
|
2657
2808
|
}
|
|
2658
|
-
|
|
2809
|
+
e = this._beforeSetNumber(e), this.ui.telInput.value = e;
|
|
2659
2810
|
}
|
|
2660
2811
|
//* Check if need to select a new country based on the given number
|
|
2661
2812
|
//* Note: called from _setInitialState, keyup handler, setNumber.
|
|
2662
|
-
_updateCountryFromNumber(
|
|
2663
|
-
const
|
|
2664
|
-
return
|
|
2813
|
+
_updateCountryFromNumber(t) {
|
|
2814
|
+
const e = this._getNewCountryFromNumber(t);
|
|
2815
|
+
return e !== null ? this._setCountry(e) : !1;
|
|
2665
2816
|
}
|
|
2666
2817
|
// if there is a selected country, and the number doesn't start with a dial code, then add it
|
|
2667
|
-
_ensureHasDialCode(
|
|
2668
|
-
const { dialCode:
|
|
2669
|
-
if (
|
|
2670
|
-
return
|
|
2671
|
-
const
|
|
2672
|
-
return `+${
|
|
2818
|
+
_ensureHasDialCode(t) {
|
|
2819
|
+
const { dialCode: e, nationalPrefix: i } = this.selectedCountryData;
|
|
2820
|
+
if (t.startsWith("+") || !e)
|
|
2821
|
+
return t;
|
|
2822
|
+
const n = i && t.startsWith(i) && !this.options.separateDialCode ? t.substring(1) : t;
|
|
2823
|
+
return `+${e}${n}`;
|
|
2673
2824
|
}
|
|
2674
2825
|
// Get the country ISO2 code from the given number
|
|
2675
2826
|
// BUT ONLY IF ITS CHANGED FROM THE CURRENTLY SELECTED COUNTRY
|
|
2676
2827
|
// NOTE: consider refactoring this to be more clear
|
|
2677
|
-
_getNewCountryFromNumber(
|
|
2678
|
-
const
|
|
2679
|
-
let i =
|
|
2680
|
-
const
|
|
2828
|
+
_getNewCountryFromNumber(t) {
|
|
2829
|
+
const e = t.indexOf("+");
|
|
2830
|
+
let i = e ? t.substring(e) : t;
|
|
2831
|
+
const s = this.selectedCountryData.iso2, o = this.selectedCountryData.dialCode;
|
|
2681
2832
|
i = this._ensureHasDialCode(i);
|
|
2682
|
-
const
|
|
2683
|
-
if (
|
|
2684
|
-
const
|
|
2685
|
-
if (
|
|
2686
|
-
return
|
|
2687
|
-
if (!
|
|
2833
|
+
const n = this._getDialCode(i, !0), a = v(i);
|
|
2834
|
+
if (n) {
|
|
2835
|
+
const r = v(n), u = this.dialCodeToIso2Map[r];
|
|
2836
|
+
if (u.length === 1)
|
|
2837
|
+
return u[0] === s ? null : u[0];
|
|
2838
|
+
if (!s && this.defaultCountry && u.includes(this.defaultCountry))
|
|
2688
2839
|
return this.defaultCountry;
|
|
2689
|
-
if (
|
|
2840
|
+
if (o === "1" && k(a))
|
|
2690
2841
|
return null;
|
|
2691
|
-
const { areaCodes:
|
|
2692
|
-
if (
|
|
2693
|
-
const
|
|
2694
|
-
|
|
2695
|
-
|
|
2842
|
+
const { areaCodes: C, priority: m } = this.selectedCountryData;
|
|
2843
|
+
if (C) {
|
|
2844
|
+
const g = C.map(
|
|
2845
|
+
(_) => `${o}${_}`
|
|
2846
|
+
);
|
|
2847
|
+
for (const _ of g)
|
|
2848
|
+
if (a.startsWith(_))
|
|
2696
2849
|
return null;
|
|
2697
2850
|
}
|
|
2698
|
-
const f =
|
|
2699
|
-
if (!
|
|
2700
|
-
return
|
|
2851
|
+
const f = C && !(m === 0) && a.length > r.length, b = s && u.includes(s) && !f, y = s === u[0];
|
|
2852
|
+
if (!b && !y)
|
|
2853
|
+
return u[0];
|
|
2701
2854
|
} else {
|
|
2702
|
-
if (i.
|
|
2855
|
+
if (i.startsWith("+") && a.length)
|
|
2703
2856
|
return "";
|
|
2704
|
-
if ((!i || i === "+") && !
|
|
2857
|
+
if ((!i || i === "+") && !s)
|
|
2705
2858
|
return this.defaultCountry;
|
|
2706
2859
|
}
|
|
2707
2860
|
return null;
|
|
2708
2861
|
}
|
|
2709
|
-
//* Remove highlighting from other list items and highlight the given item.
|
|
2710
|
-
_highlightListItem(e, t) {
|
|
2711
|
-
const i = this.highlightedItem;
|
|
2712
|
-
if (i && (i.classList.remove("iti__highlight"), i.setAttribute("aria-selected", "false")), this.highlightedItem = e, this.highlightedItem && (this.highlightedItem.classList.add("iti__highlight"), this.highlightedItem.setAttribute("aria-selected", "true"), this.options.countrySearch)) {
|
|
2713
|
-
const n = this.highlightedItem.getAttribute("id") || "";
|
|
2714
|
-
this.searchInput.setAttribute("aria-activedescendant", n);
|
|
2715
|
-
}
|
|
2716
|
-
t && this.highlightedItem.focus();
|
|
2717
|
-
}
|
|
2718
2862
|
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
|
|
2719
2863
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
2720
|
-
_setCountry(
|
|
2721
|
-
const { separateDialCode:
|
|
2722
|
-
if (this.selectedCountryData =
|
|
2723
|
-
const
|
|
2724
|
-
let a,
|
|
2725
|
-
if (
|
|
2726
|
-
const { name:
|
|
2727
|
-
|
|
2864
|
+
_setCountry(t) {
|
|
2865
|
+
const { separateDialCode: e, showFlags: i, i18n: s } = this.options, o = this.selectedCountryData.iso2 || "";
|
|
2866
|
+
if (this.selectedCountryData = t ? this.countryByIso2.get(t) : {}, this.selectedCountryData.iso2 && (this.defaultCountry = this.selectedCountryData.iso2), this.ui.selectedCountry) {
|
|
2867
|
+
const n = t && i ? `iti__flag iti__${t}` : "iti__flag iti__globe";
|
|
2868
|
+
let a, r;
|
|
2869
|
+
if (t) {
|
|
2870
|
+
const { name: u, dialCode: c } = this.selectedCountryData;
|
|
2871
|
+
r = u, a = s.selectedCountryAriaLabel.replace("${countryName}", u).replace("${dialCode}", `+${c}`);
|
|
2728
2872
|
} else
|
|
2729
|
-
|
|
2730
|
-
this.selectedCountryInner.className =
|
|
2731
|
-
}
|
|
2732
|
-
if (t) {
|
|
2733
|
-
const o = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
|
|
2734
|
-
this.selectedDialCode.innerHTML = o, this._updateInputPadding();
|
|
2873
|
+
r = s.noCountrySelected, a = s.noCountrySelected;
|
|
2874
|
+
this.ui.selectedCountryInner.className = n, this.ui.selectedCountry.setAttribute("title", r), this.ui.selectedCountry.setAttribute("aria-label", a);
|
|
2735
2875
|
}
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
_updateInputPadding() {
|
|
2740
|
-
if (this.selectedCountry) {
|
|
2741
|
-
const e = this.options.separateDialCode ? 78 : 42, i = (this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || e) + 6;
|
|
2742
|
-
this.telInput.style.paddingLeft = `${i}px`;
|
|
2876
|
+
if (e) {
|
|
2877
|
+
const n = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
|
|
2878
|
+
this.ui.selectedDialCode.textContent = n, this.ui.updateInputPadding();
|
|
2743
2879
|
}
|
|
2880
|
+
return this._updatePlaceholder(), this._updateMaxLength(), o !== t;
|
|
2744
2881
|
}
|
|
2745
2882
|
//* Update the maximum valid number length for the currently selected country.
|
|
2746
2883
|
_updateMaxLength() {
|
|
2747
|
-
const { strictMode:
|
|
2748
|
-
if (
|
|
2749
|
-
if (
|
|
2750
|
-
const
|
|
2751
|
-
let
|
|
2752
|
-
n,
|
|
2753
|
-
!1,
|
|
2884
|
+
const { strictMode: t, placeholderNumberType: e, validationNumberTypes: i } = this.options, { iso2: s } = this.selectedCountryData;
|
|
2885
|
+
if (t && d.utils)
|
|
2886
|
+
if (s) {
|
|
2887
|
+
const o = d.utils.numberType[e];
|
|
2888
|
+
let n = d.utils.getExampleNumber(
|
|
2754
2889
|
s,
|
|
2890
|
+
!1,
|
|
2891
|
+
o,
|
|
2755
2892
|
!0
|
|
2756
|
-
), a =
|
|
2757
|
-
for (;
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2893
|
+
), a = n;
|
|
2894
|
+
for (; d.utils.isPossibleNumber(
|
|
2895
|
+
n,
|
|
2896
|
+
s,
|
|
2897
|
+
i
|
|
2898
|
+
); )
|
|
2899
|
+
a = n, n += "0";
|
|
2900
|
+
const r = d.utils.getCoreNumber(a, s);
|
|
2901
|
+
this.maxCoreNumberLength = r.length, s === "by" && (this.maxCoreNumberLength = r.length + 1);
|
|
2761
2902
|
} else
|
|
2762
2903
|
this.maxCoreNumberLength = null;
|
|
2763
2904
|
}
|
|
2764
|
-
//* When input is in a hidden container during init, we cannot calculate the selected country width.
|
|
2765
|
-
//* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
|
|
2766
|
-
//* To get the right styling to apply, all we need is a shallow clone of the container,
|
|
2767
|
-
//* and then to inject a deep clone of the selectedCountry element.
|
|
2768
|
-
_getHiddenSelectedCountryWidth() {
|
|
2769
|
-
if (this.telInput.parentNode) {
|
|
2770
|
-
let e;
|
|
2771
|
-
try {
|
|
2772
|
-
e = window.top.document.body;
|
|
2773
|
-
} catch {
|
|
2774
|
-
e = document.body;
|
|
2775
|
-
}
|
|
2776
|
-
const t = this.telInput.parentNode.cloneNode(!1);
|
|
2777
|
-
t.style.visibility = "hidden", e.appendChild(t);
|
|
2778
|
-
const i = this.countryContainer.cloneNode();
|
|
2779
|
-
t.appendChild(i);
|
|
2780
|
-
const n = this.selectedCountry.cloneNode(!0);
|
|
2781
|
-
i.appendChild(n);
|
|
2782
|
-
const s = n.offsetWidth;
|
|
2783
|
-
return e.removeChild(t), s;
|
|
2784
|
-
}
|
|
2785
|
-
return 0;
|
|
2786
|
-
}
|
|
2787
2905
|
//* Update the input placeholder to an example number from the currently selected country.
|
|
2788
2906
|
_updatePlaceholder() {
|
|
2789
2907
|
const {
|
|
2790
|
-
autoPlaceholder:
|
|
2791
|
-
placeholderNumberType:
|
|
2908
|
+
autoPlaceholder: t,
|
|
2909
|
+
placeholderNumberType: e,
|
|
2792
2910
|
nationalMode: i,
|
|
2793
|
-
customPlaceholder:
|
|
2794
|
-
} = this.options,
|
|
2795
|
-
if (
|
|
2796
|
-
const
|
|
2797
|
-
let a = this.selectedCountryData.iso2 ?
|
|
2911
|
+
customPlaceholder: s
|
|
2912
|
+
} = this.options, o = t === "aggressive" || !this.ui.hadInitialPlaceholder && t === "polite";
|
|
2913
|
+
if (d.utils && o) {
|
|
2914
|
+
const n = d.utils.numberType[e];
|
|
2915
|
+
let a = this.selectedCountryData.iso2 ? d.utils.getExampleNumber(
|
|
2798
2916
|
this.selectedCountryData.iso2,
|
|
2799
2917
|
i,
|
|
2800
|
-
|
|
2918
|
+
n
|
|
2801
2919
|
) : "";
|
|
2802
|
-
a = this._beforeSetNumber(a), typeof
|
|
2920
|
+
a = this._beforeSetNumber(a), typeof s == "function" && (a = s(a, this.selectedCountryData)), this.ui.telInput.setAttribute("placeholder", a);
|
|
2803
2921
|
}
|
|
2804
2922
|
}
|
|
2805
2923
|
//* Called when the user selects a list item from the dropdown.
|
|
2806
|
-
_selectListItem(
|
|
2807
|
-
const
|
|
2924
|
+
_selectListItem(t) {
|
|
2925
|
+
const e = t.dataset.countryCode, i = this._setCountry(e);
|
|
2808
2926
|
this._closeDropdown();
|
|
2809
|
-
const
|
|
2810
|
-
this._updateDialCode(
|
|
2927
|
+
const s = t.dataset.dialCode;
|
|
2928
|
+
this._updateDialCode(s), this.options.formatOnDisplay && this._updateValFromNumber(this.ui.telInput.value), this.ui.telInput.focus(), i && this._triggerCountryChange();
|
|
2811
2929
|
}
|
|
2812
2930
|
//* Close the dropdown and unbind any listeners.
|
|
2813
2931
|
_closeDropdown() {
|
|
2814
|
-
this.dropdownContent.classList.add("iti__hide"), this.selectedCountry.setAttribute("aria-expanded", "false"), this.highlightedItem && this.highlightedItem.setAttribute("aria-selected", "false"), this.options.countrySearch && this.searchInput.removeAttribute("aria-activedescendant"), this.dropdownArrow.classList.remove("iti__arrow--up"), this.
|
|
2815
|
-
"click",
|
|
2816
|
-
this._handleClickOffToClose
|
|
2817
|
-
), this.countryList.removeEventListener(
|
|
2818
|
-
"mouseover",
|
|
2819
|
-
this._handleMouseoverCountryList
|
|
2820
|
-
), 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");
|
|
2821
|
-
}
|
|
2822
|
-
//* Check if an element is visible within it's container, else scroll until it is.
|
|
2823
|
-
_scrollTo(e) {
|
|
2824
|
-
const t = this.countryList, i = document.documentElement.scrollTop, n = t.offsetHeight, s = t.getBoundingClientRect().top + i, o = s + n, a = e.offsetHeight, d = e.getBoundingClientRect().top + i, l = d + a, h = d - s + t.scrollTop;
|
|
2825
|
-
if (d < s)
|
|
2826
|
-
t.scrollTop = h;
|
|
2827
|
-
else if (l > o) {
|
|
2828
|
-
const p = n - a;
|
|
2829
|
-
t.scrollTop = h - p;
|
|
2830
|
-
}
|
|
2932
|
+
this.ui.dropdownContent.classList.contains("iti__hide") || (this.ui.dropdownContent.classList.add("iti__hide"), this.ui.selectedCountry.setAttribute("aria-expanded", "false"), this.ui.highlightedItem && this.ui.highlightedItem.setAttribute("aria-selected", "false"), this.options.countrySearch && this.ui.searchInput.removeAttribute("aria-activedescendant"), this.ui.dropdownArrow.classList.remove("iti__arrow--up"), this.dropdownAbortController.abort(), this.dropdownAbortController = null, this.options.dropdownContainer && this.ui.dropdown.remove(), this._trigger("close:countrydropdown"));
|
|
2831
2933
|
}
|
|
2832
2934
|
//* Replace any existing dial code with the new one
|
|
2833
2935
|
//* Note: called from _selectListItem and setCountry
|
|
2834
|
-
_updateDialCode(
|
|
2835
|
-
const
|
|
2836
|
-
let
|
|
2837
|
-
if (
|
|
2838
|
-
const
|
|
2839
|
-
|
|
2936
|
+
_updateDialCode(t) {
|
|
2937
|
+
const e = this.ui.telInput.value, i = `+${t}`;
|
|
2938
|
+
let s;
|
|
2939
|
+
if (e.startsWith("+")) {
|
|
2940
|
+
const o = this._getDialCode(e);
|
|
2941
|
+
o ? s = e.replace(o, i) : s = i, this.ui.telInput.value = s;
|
|
2840
2942
|
}
|
|
2841
2943
|
}
|
|
2842
2944
|
//* Try and extract a valid international dial code from a full telephone number.
|
|
2843
2945
|
//* Note: returns the raw string inc plus character and any whitespace/dots etc.
|
|
2844
|
-
_getDialCode(
|
|
2946
|
+
_getDialCode(t, e) {
|
|
2845
2947
|
let i = "";
|
|
2846
|
-
if (
|
|
2847
|
-
let
|
|
2848
|
-
for (let
|
|
2849
|
-
const
|
|
2850
|
-
if (/[0-9]/.test(
|
|
2851
|
-
if (
|
|
2948
|
+
if (t.startsWith("+")) {
|
|
2949
|
+
let s = "";
|
|
2950
|
+
for (let o = 0; o < t.length; o++) {
|
|
2951
|
+
const n = t.charAt(o);
|
|
2952
|
+
if (/[0-9]/.test(n)) {
|
|
2953
|
+
if (s += n, !!!this.dialCodeToIso2Map[s])
|
|
2852
2954
|
break;
|
|
2853
|
-
if (
|
|
2854
|
-
i =
|
|
2855
|
-
else if (this.dialCodes.has(
|
|
2856
|
-
i =
|
|
2955
|
+
if (e)
|
|
2956
|
+
i = t.substring(0, o + 1);
|
|
2957
|
+
else if (this.dialCodes.has(s)) {
|
|
2958
|
+
i = t.substring(0, o + 1);
|
|
2857
2959
|
break;
|
|
2858
2960
|
}
|
|
2859
|
-
if (
|
|
2961
|
+
if (s.length === this.dialCodeMaxLen)
|
|
2860
2962
|
break;
|
|
2861
2963
|
}
|
|
2862
2964
|
}
|
|
@@ -2864,17 +2966,17 @@ class L {
|
|
|
2864
2966
|
return i;
|
|
2865
2967
|
}
|
|
2866
2968
|
//* Get the input val, adding the dial code if separateDialCode is enabled.
|
|
2867
|
-
_getFullNumber(
|
|
2868
|
-
const
|
|
2869
|
-
let
|
|
2870
|
-
const
|
|
2871
|
-
return this.options.separateDialCode &&
|
|
2969
|
+
_getFullNumber(t) {
|
|
2970
|
+
const e = t || this.ui.telInput.value.trim(), { dialCode: i } = this.selectedCountryData;
|
|
2971
|
+
let s;
|
|
2972
|
+
const o = v(e);
|
|
2973
|
+
return this.options.separateDialCode && !e.startsWith("+") && i && o ? s = `+${i}` : s = "", s + e;
|
|
2872
2974
|
}
|
|
2873
2975
|
//* Remove the dial code if separateDialCode is enabled also cap the length if the input has a maxlength attribute
|
|
2874
|
-
_beforeSetNumber(
|
|
2875
|
-
const
|
|
2876
|
-
e,
|
|
2976
|
+
_beforeSetNumber(t) {
|
|
2977
|
+
const e = this._getDialCode(t), i = et(
|
|
2877
2978
|
t,
|
|
2979
|
+
e,
|
|
2878
2980
|
this.options.separateDialCode,
|
|
2879
2981
|
this.selectedCountryData
|
|
2880
2982
|
);
|
|
@@ -2889,58 +2991,41 @@ class L {
|
|
|
2889
2991
|
//**************************
|
|
2890
2992
|
//* This is called when the geoip call returns.
|
|
2891
2993
|
handleAutoCountry() {
|
|
2892
|
-
this.options.initialCountry === "auto" &&
|
|
2994
|
+
this.options.initialCountry === "auto" && d.autoCountry && (this.defaultCountry = d.autoCountry, this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains("iti__globe") || this.setCountry(this.defaultCountry), this.resolveAutoCountryPromise());
|
|
2893
2995
|
}
|
|
2894
2996
|
//* This is called when the utils request completes.
|
|
2895
2997
|
handleUtils() {
|
|
2896
|
-
|
|
2998
|
+
d.utils && (this.ui.telInput.value && this._updateValFromNumber(this.ui.telInput.value), this.selectedCountryData.iso2 && (this._updatePlaceholder(), this._updateMaxLength())), this.resolveUtilsScriptPromise();
|
|
2897
2999
|
}
|
|
2898
3000
|
//********************
|
|
2899
3001
|
//* PUBLIC METHODS
|
|
2900
3002
|
//********************
|
|
2901
3003
|
//* Remove plugin.
|
|
2902
3004
|
destroy() {
|
|
2903
|
-
|
|
2904
|
-
this.telInput.iti = void 0;
|
|
2905
|
-
const { allowDropdown: e, separateDialCode: t } = this.options;
|
|
2906
|
-
if (e) {
|
|
2907
|
-
this._closeDropdown(), this.selectedCountry.removeEventListener(
|
|
2908
|
-
"click",
|
|
2909
|
-
this._handleClickSelectedCountry
|
|
2910
|
-
), this.countryContainer.removeEventListener(
|
|
2911
|
-
"keydown",
|
|
2912
|
-
this._handleCountryContainerKeydown
|
|
2913
|
-
);
|
|
2914
|
-
const a = this.telInput.closest("label");
|
|
2915
|
-
a && a.removeEventListener("click", this._handleLabelClick);
|
|
2916
|
-
}
|
|
2917
|
-
const { form: i } = this.telInput;
|
|
2918
|
-
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._handlePageLoad && window.removeEventListener("load", this._handlePageLoad), this.telInput.removeAttribute("data-intl-tel-input-id"), t && (this.telInput.style.paddingLeft = this.originalPaddingLeft);
|
|
2919
|
-
const n = this.telInput.parentNode;
|
|
2920
|
-
(s = n == null ? void 0 : n.parentNode) == null || s.insertBefore(this.telInput, n), (o = n == null ? void 0 : n.parentNode) == null || o.removeChild(n), delete u.instances[this.id];
|
|
3005
|
+
this.ui.telInput && (this.options.allowDropdown && this._closeDropdown(), this.abortController.abort(), this.abortController = null, this.ui.destroy(), d.instances instanceof Map ? d.instances.delete(this.id) : delete d.instances[this.id]);
|
|
2921
3006
|
}
|
|
2922
3007
|
//* Get the extension from the current number.
|
|
2923
3008
|
getExtension() {
|
|
2924
|
-
return
|
|
3009
|
+
return d.utils ? d.utils.getExtension(
|
|
2925
3010
|
this._getFullNumber(),
|
|
2926
3011
|
this.selectedCountryData.iso2
|
|
2927
3012
|
) : "";
|
|
2928
3013
|
}
|
|
2929
3014
|
//* Format the number to the given format.
|
|
2930
|
-
getNumber(
|
|
2931
|
-
if (
|
|
2932
|
-
const { iso2:
|
|
2933
|
-
return
|
|
3015
|
+
getNumber(t) {
|
|
3016
|
+
if (d.utils) {
|
|
3017
|
+
const { iso2: e } = this.selectedCountryData;
|
|
3018
|
+
return d.utils.formatNumber(
|
|
2934
3019
|
this._getFullNumber(),
|
|
2935
|
-
|
|
2936
|
-
|
|
3020
|
+
e,
|
|
3021
|
+
t
|
|
2937
3022
|
);
|
|
2938
3023
|
}
|
|
2939
3024
|
return "";
|
|
2940
3025
|
}
|
|
2941
3026
|
//* Get the type of the entered number e.g. landline/mobile.
|
|
2942
3027
|
getNumberType() {
|
|
2943
|
-
return
|
|
3028
|
+
return d.utils ? d.utils.getNumberType(
|
|
2944
3029
|
this._getFullNumber(),
|
|
2945
3030
|
this.selectedCountryData.iso2
|
|
2946
3031
|
) : -99;
|
|
@@ -2951,18 +3036,18 @@ class L {
|
|
|
2951
3036
|
}
|
|
2952
3037
|
//* Get the validation error.
|
|
2953
3038
|
getValidationError() {
|
|
2954
|
-
if (
|
|
2955
|
-
const { iso2:
|
|
2956
|
-
return
|
|
3039
|
+
if (d.utils) {
|
|
3040
|
+
const { iso2: t } = this.selectedCountryData;
|
|
3041
|
+
return d.utils.getValidationError(this._getFullNumber(), t);
|
|
2957
3042
|
}
|
|
2958
3043
|
return -99;
|
|
2959
3044
|
}
|
|
2960
3045
|
//* Validate the input val using number length only
|
|
2961
3046
|
isValidNumber() {
|
|
2962
|
-
const { dialCode:
|
|
2963
|
-
if (
|
|
2964
|
-
const i = this._getFullNumber(),
|
|
2965
|
-
if (
|
|
3047
|
+
const { dialCode: t, iso2: e } = this.selectedCountryData;
|
|
3048
|
+
if (t === "44" && d.utils) {
|
|
3049
|
+
const i = this._getFullNumber(), s = d.utils.getCoreNumber(i, e);
|
|
3050
|
+
if (s[0] === "7" && s.length !== 10)
|
|
2966
3051
|
return !1;
|
|
2967
3052
|
}
|
|
2968
3053
|
return this._validateNumber(!1);
|
|
@@ -2971,93 +3056,112 @@ class L {
|
|
|
2971
3056
|
isValidNumberPrecise() {
|
|
2972
3057
|
return this._validateNumber(!0);
|
|
2973
3058
|
}
|
|
2974
|
-
_utilsIsPossibleNumber(
|
|
2975
|
-
return
|
|
3059
|
+
_utilsIsPossibleNumber(t) {
|
|
3060
|
+
return d.utils ? d.utils.isPossibleNumber(
|
|
3061
|
+
t,
|
|
3062
|
+
this.selectedCountryData.iso2,
|
|
3063
|
+
this.options.validationNumberTypes
|
|
3064
|
+
) : null;
|
|
2976
3065
|
}
|
|
2977
3066
|
//* Shared internal validation logic to handle alpha character extension rules.
|
|
2978
|
-
_validateNumber(
|
|
2979
|
-
if (!
|
|
3067
|
+
_validateNumber(t) {
|
|
3068
|
+
if (!d.utils)
|
|
2980
3069
|
return null;
|
|
2981
3070
|
if (!this.selectedCountryData.iso2)
|
|
2982
3071
|
return !1;
|
|
2983
|
-
const
|
|
2984
|
-
if (
|
|
2985
|
-
const
|
|
2986
|
-
return a &&
|
|
3072
|
+
const e = (n) => t ? this._utilsIsValidNumber(n) : this._utilsIsPossibleNumber(n), i = this._getFullNumber(), s = i.search(new RegExp("\\p{L}", "u"));
|
|
3073
|
+
if (s > -1 && !this.options.allowPhonewords) {
|
|
3074
|
+
const n = i.substring(0, s), a = e(n), r = e(i);
|
|
3075
|
+
return a && r;
|
|
2987
3076
|
}
|
|
2988
|
-
return
|
|
3077
|
+
return e(i);
|
|
2989
3078
|
}
|
|
2990
|
-
_utilsIsValidNumber(
|
|
2991
|
-
return
|
|
3079
|
+
_utilsIsValidNumber(t) {
|
|
3080
|
+
return d.utils ? d.utils.isValidNumber(
|
|
3081
|
+
t,
|
|
3082
|
+
this.selectedCountryData.iso2,
|
|
3083
|
+
this.options.validationNumberTypes
|
|
3084
|
+
) : null;
|
|
2992
3085
|
}
|
|
2993
3086
|
//* Update the selected country, and update the input val accordingly.
|
|
2994
|
-
setCountry(
|
|
2995
|
-
const
|
|
2996
|
-
if (!
|
|
2997
|
-
throw new Error(`Invalid country code: '${
|
|
3087
|
+
setCountry(t) {
|
|
3088
|
+
const e = t == null ? void 0 : t.toLowerCase();
|
|
3089
|
+
if (!A(e))
|
|
3090
|
+
throw new Error(`Invalid country code: '${e}'`);
|
|
2998
3091
|
const i = this.selectedCountryData.iso2;
|
|
2999
|
-
(
|
|
3092
|
+
(t && e !== i || !t && i) && (this._setCountry(e), this._updateDialCode(this.selectedCountryData.dialCode), this.options.formatOnDisplay && this._updateValFromNumber(this.ui.telInput.value), this._triggerCountryChange());
|
|
3000
3093
|
}
|
|
3001
3094
|
//* Set the input value and update the country.
|
|
3002
|
-
setNumber(
|
|
3003
|
-
const
|
|
3004
|
-
this._updateValFromNumber(
|
|
3095
|
+
setNumber(t) {
|
|
3096
|
+
const e = this._updateCountryFromNumber(t);
|
|
3097
|
+
this._updateValFromNumber(t), e && this._triggerCountryChange(), this._trigger("input", { isSetNumber: !0 });
|
|
3005
3098
|
}
|
|
3006
3099
|
//* Set the placeholder number typ
|
|
3007
|
-
setPlaceholderNumberType(
|
|
3008
|
-
this.options.placeholderNumberType =
|
|
3100
|
+
setPlaceholderNumberType(t) {
|
|
3101
|
+
this.options.placeholderNumberType = t, this._updatePlaceholder();
|
|
3009
3102
|
}
|
|
3010
|
-
setDisabled(
|
|
3011
|
-
this.telInput.disabled =
|
|
3103
|
+
setDisabled(t) {
|
|
3104
|
+
this.ui.telInput.disabled = t, t ? this.ui.selectedCountry.setAttribute("disabled", "true") : this.ui.selectedCountry.removeAttribute("disabled");
|
|
3012
3105
|
}
|
|
3013
3106
|
}
|
|
3014
|
-
const
|
|
3015
|
-
if (!
|
|
3016
|
-
let
|
|
3017
|
-
if (typeof
|
|
3107
|
+
const at = (l) => {
|
|
3108
|
+
if (!d.utils && !d.startedLoadingUtilsScript) {
|
|
3109
|
+
let t;
|
|
3110
|
+
if (typeof l == "function")
|
|
3018
3111
|
try {
|
|
3019
|
-
|
|
3020
|
-
} catch (
|
|
3021
|
-
return Promise.reject(
|
|
3112
|
+
t = Promise.resolve(l());
|
|
3113
|
+
} catch (e) {
|
|
3114
|
+
return Promise.reject(e);
|
|
3022
3115
|
}
|
|
3023
3116
|
else
|
|
3024
|
-
return Promise.reject(
|
|
3025
|
-
|
|
3026
|
-
|
|
3117
|
+
return Promise.reject(
|
|
3118
|
+
new TypeError(
|
|
3119
|
+
`The argument passed to attachUtils must be a function that returns a promise for the utilities module, not ${typeof l}`
|
|
3120
|
+
)
|
|
3121
|
+
);
|
|
3122
|
+
return d.startedLoadingUtilsScript = !0, t.then((e) => {
|
|
3123
|
+
const i = e == null ? void 0 : e.default;
|
|
3027
3124
|
if (!i || typeof i != "object")
|
|
3028
|
-
throw new TypeError(
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3125
|
+
throw new TypeError(
|
|
3126
|
+
"The loader function passed to attachUtils did not resolve to a module object with utils as its default export."
|
|
3127
|
+
);
|
|
3128
|
+
return d.utils = i, I("handleUtils"), !0;
|
|
3129
|
+
}).catch((e) => {
|
|
3130
|
+
throw I("rejectUtilsScriptPromise", e), e;
|
|
3032
3131
|
});
|
|
3033
3132
|
}
|
|
3034
3133
|
return null;
|
|
3035
|
-
},
|
|
3036
|
-
(
|
|
3037
|
-
const
|
|
3038
|
-
|
|
3134
|
+
}, I = (l, ...t) => {
|
|
3135
|
+
Object.values(d.instances).forEach((e) => {
|
|
3136
|
+
const i = e[l];
|
|
3137
|
+
typeof i == "function" && i.apply(e, t);
|
|
3138
|
+
});
|
|
3139
|
+
}, d = Object.assign(
|
|
3140
|
+
(l, t) => {
|
|
3141
|
+
const e = new S(l, t);
|
|
3142
|
+
return d.instances[e.id] = e, l.iti = e, e;
|
|
3039
3143
|
},
|
|
3040
3144
|
{
|
|
3041
|
-
defaults:
|
|
3145
|
+
defaults: T,
|
|
3042
3146
|
//* Using a static var like this allows us to mock it in the tests.
|
|
3043
3147
|
documentReady: () => document.readyState === "complete",
|
|
3044
3148
|
//* Get the country data object.
|
|
3045
|
-
getCountryData: () =>
|
|
3149
|
+
getCountryData: () => w,
|
|
3046
3150
|
//* A getter for the plugin instance.
|
|
3047
|
-
getInstance: (
|
|
3048
|
-
const
|
|
3049
|
-
return
|
|
3151
|
+
getInstance: (l) => {
|
|
3152
|
+
const t = l.dataset.intlTelInputId;
|
|
3153
|
+
return t ? d.instances[t] : null;
|
|
3050
3154
|
},
|
|
3051
3155
|
//* A map from instance ID to instance object.
|
|
3052
3156
|
instances: {},
|
|
3053
|
-
attachUtils:
|
|
3157
|
+
attachUtils: at,
|
|
3054
3158
|
startedLoadingUtilsScript: !1,
|
|
3055
3159
|
startedLoadingAutoCountry: !1,
|
|
3056
|
-
version: "25.
|
|
3160
|
+
version: "25.11.0"
|
|
3057
3161
|
}
|
|
3058
|
-
),
|
|
3162
|
+
), ut = {
|
|
3059
3163
|
__name: "IntlTelInput",
|
|
3060
|
-
props: /* @__PURE__ */
|
|
3164
|
+
props: /* @__PURE__ */ P({
|
|
3061
3165
|
disabled: {
|
|
3062
3166
|
type: Boolean,
|
|
3063
3167
|
default: !1
|
|
@@ -3081,47 +3185,47 @@ const st = (r) => {
|
|
|
3081
3185
|
},
|
|
3082
3186
|
modelModifiers: {}
|
|
3083
3187
|
}),
|
|
3084
|
-
emits: /* @__PURE__ */
|
|
3188
|
+
emits: /* @__PURE__ */ P([
|
|
3085
3189
|
"changeNumber",
|
|
3086
3190
|
"changeCountry",
|
|
3087
3191
|
"changeValidity",
|
|
3088
3192
|
"changeErrorCode"
|
|
3089
3193
|
], ["update:modelValue"]),
|
|
3090
|
-
setup(
|
|
3091
|
-
const i =
|
|
3092
|
-
let
|
|
3093
|
-
|
|
3194
|
+
setup(l, { expose: t, emit: e }) {
|
|
3195
|
+
const i = B(l, "modelValue"), s = l, o = e, n = L(), a = L(), r = L(!1), u = () => a.value ? s.options.strictMode ? a.value.isValidNumberPrecise() : a.value.isValidNumber() : null, c = () => {
|
|
3196
|
+
let h = u();
|
|
3197
|
+
r.value !== h && (r.value = h, o("changeValidity", !!h), o(
|
|
3094
3198
|
"changeErrorCode",
|
|
3095
|
-
|
|
3199
|
+
h ? null : a.value.getValidationError()
|
|
3096
3200
|
));
|
|
3097
|
-
},
|
|
3098
|
-
var
|
|
3099
|
-
|
|
3100
|
-
},
|
|
3101
|
-
var
|
|
3102
|
-
|
|
3201
|
+
}, C = () => {
|
|
3202
|
+
var h;
|
|
3203
|
+
o("changeNumber", ((h = a.value) == null ? void 0 : h.getNumber()) ?? ""), c();
|
|
3204
|
+
}, m = () => {
|
|
3205
|
+
var h;
|
|
3206
|
+
o("changeCountry", ((h = a.value) == null ? void 0 : h.getSelectedCountryData().iso2) ?? ""), C(), c();
|
|
3103
3207
|
};
|
|
3104
|
-
return
|
|
3105
|
-
|
|
3106
|
-
}),
|
|
3107
|
-
() =>
|
|
3108
|
-
(
|
|
3208
|
+
return F(() => {
|
|
3209
|
+
n.value && (a.value = d(n.value, s.options), s.value && a.value.setNumber(s.value), s.disabled && a.value.setDisabled(s.disabled), r.value = u());
|
|
3210
|
+
}), R(
|
|
3211
|
+
() => s.disabled,
|
|
3212
|
+
(h) => {
|
|
3109
3213
|
var f;
|
|
3110
|
-
return (f = a.value) == null ? void 0 : f.setDisabled(
|
|
3214
|
+
return (f = a.value) == null ? void 0 : f.setDisabled(h);
|
|
3111
3215
|
}
|
|
3112
|
-
),
|
|
3113
|
-
var
|
|
3114
|
-
return (
|
|
3115
|
-
}),
|
|
3216
|
+
), z(() => {
|
|
3217
|
+
var h;
|
|
3218
|
+
return (h = a.value) == null ? void 0 : h.destroy();
|
|
3219
|
+
}), t({ instance: a, input: n }), (h, f) => V((U(), $("input", j({
|
|
3116
3220
|
ref_key: "input",
|
|
3117
|
-
ref:
|
|
3118
|
-
"onUpdate:modelValue": f[0] || (f[0] = (
|
|
3221
|
+
ref: n,
|
|
3222
|
+
"onUpdate:modelValue": f[0] || (f[0] = (b) => i.value = b),
|
|
3119
3223
|
type: "tel",
|
|
3120
|
-
onCountrychange:
|
|
3121
|
-
onInput:
|
|
3122
|
-
},
|
|
3224
|
+
onCountrychange: m,
|
|
3225
|
+
onInput: C
|
|
3226
|
+
}, l.inputProps), null, 16)), [
|
|
3123
3227
|
[
|
|
3124
|
-
|
|
3228
|
+
W,
|
|
3125
3229
|
i.value,
|
|
3126
3230
|
void 0,
|
|
3127
3231
|
{ lazy: !0 }
|
|
@@ -3130,5 +3234,5 @@ const st = (r) => {
|
|
|
3130
3234
|
}
|
|
3131
3235
|
};
|
|
3132
3236
|
export {
|
|
3133
|
-
|
|
3237
|
+
ut as default
|
|
3134
3238
|
};
|