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
|
@@ -2050,6 +2050,7 @@ var getNumeric = (s) => s.replace(/\D/g, "");
|
|
|
2050
2050
|
var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
|
|
2051
2051
|
|
|
2052
2052
|
// angular/build/temp/modules/utils/dom.js
|
|
2053
|
+
var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
|
|
2053
2054
|
var createEl = (tagName, attrs, container) => {
|
|
2054
2055
|
const el = document.createElement(tagName);
|
|
2055
2056
|
if (attrs) {
|
|
@@ -2061,251 +2062,23 @@ var createEl = (tagName, attrs, container) => {
|
|
|
2061
2062
|
return el;
|
|
2062
2063
|
};
|
|
2063
2064
|
|
|
2064
|
-
// angular/build/temp/modules/
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
if (onlyCountries.length) {
|
|
2068
|
-
const lowerCaseOnlyCountries = onlyCountries.map((country) => country.toLowerCase());
|
|
2069
|
-
return data_default.filter((country) => lowerCaseOnlyCountries.includes(country.iso2));
|
|
2070
|
-
} else if (excludeCountries.length) {
|
|
2071
|
-
const lowerCaseExcludeCountries = excludeCountries.map((country) => country.toLowerCase());
|
|
2072
|
-
return data_default.filter((country) => !lowerCaseExcludeCountries.includes(country.iso2));
|
|
2073
|
-
}
|
|
2074
|
-
return data_default;
|
|
2075
|
-
}
|
|
2076
|
-
function translateCountryNames(countries, options) {
|
|
2077
|
-
for (const c of countries) {
|
|
2078
|
-
const iso2 = c.iso2.toLowerCase();
|
|
2079
|
-
if (options.i18n[iso2]) {
|
|
2080
|
-
c.name = options.i18n[iso2];
|
|
2081
|
-
}
|
|
2082
|
-
}
|
|
2083
|
-
}
|
|
2084
|
-
function processDialCodes(countries, options) {
|
|
2085
|
-
const dialCodes = /* @__PURE__ */ new Set();
|
|
2086
|
-
let dialCodeMaxLen = 0;
|
|
2087
|
-
const dialCodeToIso2Map = {};
|
|
2088
|
-
const _addToDialCodeMap = (iso2, dialCode, priority) => {
|
|
2089
|
-
if (!iso2 || !dialCode) {
|
|
2090
|
-
return;
|
|
2091
|
-
}
|
|
2092
|
-
if (dialCode.length > dialCodeMaxLen) {
|
|
2093
|
-
dialCodeMaxLen = dialCode.length;
|
|
2094
|
-
}
|
|
2095
|
-
if (!dialCodeToIso2Map.hasOwnProperty(dialCode)) {
|
|
2096
|
-
dialCodeToIso2Map[dialCode] = [];
|
|
2097
|
-
}
|
|
2098
|
-
const iso2List = dialCodeToIso2Map[dialCode];
|
|
2099
|
-
if (iso2List.includes(iso2)) {
|
|
2100
|
-
return;
|
|
2101
|
-
}
|
|
2102
|
-
const index = priority !== void 0 ? priority : iso2List.length;
|
|
2103
|
-
iso2List[index] = iso2;
|
|
2104
|
-
};
|
|
2105
|
-
for (const c of countries) {
|
|
2106
|
-
if (!dialCodes.has(c.dialCode)) {
|
|
2107
|
-
dialCodes.add(c.dialCode);
|
|
2108
|
-
}
|
|
2109
|
-
for (let k = 1; k < c.dialCode.length; k++) {
|
|
2110
|
-
const partialDialCode = c.dialCode.substring(0, k);
|
|
2111
|
-
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2112
|
-
}
|
|
2113
|
-
_addToDialCodeMap(c.iso2, c.dialCode, c.priority);
|
|
2114
|
-
}
|
|
2115
|
-
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2116
|
-
dialCodes.forEach((dialCode) => {
|
|
2117
|
-
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2118
|
-
});
|
|
2119
|
-
}
|
|
2120
|
-
for (const c of countries) {
|
|
2121
|
-
if (c.areaCodes) {
|
|
2122
|
-
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2123
|
-
for (const areaCode of c.areaCodes) {
|
|
2124
|
-
for (let k = 1; k < areaCode.length; k++) {
|
|
2125
|
-
const partialAreaCode = areaCode.substring(0, k);
|
|
2126
|
-
const partialDialCode = c.dialCode + partialAreaCode;
|
|
2127
|
-
_addToDialCodeMap(rootIso2Code, partialDialCode);
|
|
2128
|
-
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2129
|
-
}
|
|
2130
|
-
_addToDialCodeMap(c.iso2, c.dialCode + areaCode);
|
|
2131
|
-
}
|
|
2132
|
-
}
|
|
2133
|
-
}
|
|
2134
|
-
return { dialCodes, dialCodeMaxLen, dialCodeToIso2Map };
|
|
2135
|
-
}
|
|
2136
|
-
function sortCountries(countries, options) {
|
|
2137
|
-
if (options.countryOrder) {
|
|
2138
|
-
options.countryOrder = options.countryOrder.map((iso2) => iso2.toLowerCase());
|
|
2139
|
-
}
|
|
2140
|
-
countries.sort((a, b) => {
|
|
2141
|
-
const { countryOrder } = options;
|
|
2142
|
-
if (countryOrder) {
|
|
2143
|
-
const aIndex = countryOrder.indexOf(a.iso2);
|
|
2144
|
-
const bIndex = countryOrder.indexOf(b.iso2);
|
|
2145
|
-
const aIndexExists = aIndex > -1;
|
|
2146
|
-
const bIndexExists = bIndex > -1;
|
|
2147
|
-
if (aIndexExists || bIndexExists) {
|
|
2148
|
-
if (aIndexExists && bIndexExists) {
|
|
2149
|
-
return aIndex - bIndex;
|
|
2150
|
-
}
|
|
2151
|
-
return aIndexExists ? -1 : 1;
|
|
2152
|
-
}
|
|
2153
|
-
}
|
|
2154
|
-
return a.name.localeCompare(b.name);
|
|
2155
|
-
});
|
|
2156
|
-
}
|
|
2157
|
-
function cacheSearchTokens(countries) {
|
|
2158
|
-
for (const c of countries) {
|
|
2159
|
-
c.normalisedName = normaliseString(c.name);
|
|
2160
|
-
c.initials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
|
|
2161
|
-
c.dialCodePlus = `+${c.dialCode}`;
|
|
2162
|
-
}
|
|
2163
|
-
}
|
|
2164
|
-
|
|
2165
|
-
// angular/build/temp/modules/format/formatting.js
|
|
2166
|
-
function beforeSetNumber(fullNumber, dialCode, separateDialCode, selectedCountryData) {
|
|
2167
|
-
let number = fullNumber;
|
|
2168
|
-
if (separateDialCode) {
|
|
2169
|
-
if (dialCode) {
|
|
2170
|
-
dialCode = `+${selectedCountryData.dialCode}`;
|
|
2171
|
-
const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
|
|
2172
|
-
number = number.substring(start);
|
|
2173
|
-
}
|
|
2174
|
-
}
|
|
2175
|
-
return number;
|
|
2176
|
-
}
|
|
2177
|
-
function formatNumberAsYouType(fullNumber, telInputValue, utils2, selectedCountryData, separateDialCode) {
|
|
2178
|
-
const result = utils2 ? utils2.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
|
|
2179
|
-
const { dialCode } = selectedCountryData;
|
|
2180
|
-
if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
|
|
2181
|
-
const afterDialCode = result.split(`+${dialCode}`)[1] || "";
|
|
2182
|
-
return afterDialCode.trim();
|
|
2183
|
-
}
|
|
2184
|
-
return result;
|
|
2185
|
-
}
|
|
2186
|
-
|
|
2187
|
-
// angular/build/temp/modules/format/caret.js
|
|
2188
|
-
function translateCursorPosition(relevantChars, formattedValue, prevCaretPos, isDeleteForwards) {
|
|
2189
|
-
if (prevCaretPos === 0 && !isDeleteForwards) {
|
|
2190
|
-
return 0;
|
|
2191
|
-
}
|
|
2192
|
-
let relevantCharCount = 0;
|
|
2193
|
-
for (let i = 0; i < formattedValue.length; i++) {
|
|
2194
|
-
if (/[+0-9]/.test(formattedValue[i])) {
|
|
2195
|
-
relevantCharCount++;
|
|
2196
|
-
}
|
|
2197
|
-
if (relevantCharCount === relevantChars && !isDeleteForwards) {
|
|
2198
|
-
return i + 1;
|
|
2199
|
-
}
|
|
2200
|
-
if (isDeleteForwards && relevantCharCount === relevantChars + 1) {
|
|
2201
|
-
return i;
|
|
2202
|
-
}
|
|
2203
|
-
}
|
|
2204
|
-
return formattedValue.length;
|
|
2205
|
-
}
|
|
2206
|
-
|
|
2207
|
-
// angular/build/temp/modules/data/nanp-regionless.js
|
|
2208
|
-
var regionlessNanpNumbers = [
|
|
2209
|
-
"800",
|
|
2210
|
-
"822",
|
|
2211
|
-
"833",
|
|
2212
|
-
"844",
|
|
2213
|
-
"855",
|
|
2214
|
-
"866",
|
|
2215
|
-
"877",
|
|
2216
|
-
"880",
|
|
2217
|
-
"881",
|
|
2218
|
-
"882",
|
|
2219
|
-
"883",
|
|
2220
|
-
"884",
|
|
2221
|
-
"885",
|
|
2222
|
-
"886",
|
|
2223
|
-
"887",
|
|
2224
|
-
"888",
|
|
2225
|
-
"889"
|
|
2226
|
-
];
|
|
2227
|
-
var isRegionlessNanp = (number) => {
|
|
2228
|
-
const numeric = getNumeric(number);
|
|
2229
|
-
if (numeric.charAt(0) === "1") {
|
|
2230
|
-
const areaCode = numeric.substring(1, 4);
|
|
2231
|
-
return regionlessNanpNumbers.includes(areaCode);
|
|
2232
|
-
}
|
|
2233
|
-
return false;
|
|
2234
|
-
};
|
|
2235
|
-
|
|
2236
|
-
// angular/build/temp/intl-tel-input.js
|
|
2237
|
-
for (const c of data_default) {
|
|
2238
|
-
c.name = en_default[c.iso2];
|
|
2239
|
-
}
|
|
2240
|
-
var id = 0;
|
|
2241
|
-
var iso2Set = new Set(data_default.map((c) => c.iso2));
|
|
2242
|
-
var isIso2 = (val) => iso2Set.has(val);
|
|
2243
|
-
var forEachInstance = (method, ...args) => {
|
|
2244
|
-
const { instances } = intlTelInput;
|
|
2245
|
-
Object.values(instances).forEach((instance) => instance[method](...args));
|
|
2246
|
-
};
|
|
2247
|
-
var Iti = class _Iti {
|
|
2248
|
-
/**
|
|
2249
|
-
* Build a space-delimited class string from an object map of className -> truthy/falsey.
|
|
2250
|
-
* Only keys with truthy values are included.
|
|
2251
|
-
*/
|
|
2252
|
-
static _buildClassNames(flags) {
|
|
2253
|
-
return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
|
|
2254
|
-
}
|
|
2255
|
-
constructor(input, customOptions = {}) {
|
|
2256
|
-
this.id = id++;
|
|
2257
|
-
this.telInput = input;
|
|
2065
|
+
// angular/build/temp/modules/core/ui.js
|
|
2066
|
+
var UI = class {
|
|
2067
|
+
constructor(input, options, id2) {
|
|
2258
2068
|
this.highlightedItem = null;
|
|
2259
|
-
|
|
2069
|
+
input.dataset.intlTelInputId = id2.toString();
|
|
2070
|
+
this.telInput = input;
|
|
2071
|
+
this.options = options;
|
|
2072
|
+
this.id = id2;
|
|
2260
2073
|
this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
|
|
2261
|
-
}
|
|
2262
|
-
_detectEnvironmentAndLayout() {
|
|
2263
|
-
this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
2264
2074
|
this.isRTL = !!this.telInput.closest("[dir=rtl]");
|
|
2265
2075
|
if (this.options.separateDialCode) {
|
|
2266
2076
|
this.originalPaddingLeft = this.telInput.style.paddingLeft;
|
|
2267
2077
|
}
|
|
2268
2078
|
}
|
|
2269
|
-
_createInitPromises() {
|
|
2270
|
-
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
2271
|
-
this.resolveAutoCountryPromise = resolve;
|
|
2272
|
-
this.rejectAutoCountryPromise = reject;
|
|
2273
|
-
});
|
|
2274
|
-
const utilsScriptPromise = new Promise((resolve, reject) => {
|
|
2275
|
-
this.resolveUtilsScriptPromise = resolve;
|
|
2276
|
-
this.rejectUtilsScriptPromise = reject;
|
|
2277
|
-
});
|
|
2278
|
-
this.promise = Promise.all([autoCountryPromise, utilsScriptPromise]);
|
|
2279
|
-
}
|
|
2280
|
-
//* Can't be private as it's called from intlTelInput convenience wrapper.
|
|
2281
|
-
_init() {
|
|
2282
|
-
applyOptionSideEffects(this.options);
|
|
2283
|
-
this._detectEnvironmentAndLayout();
|
|
2284
|
-
this._createInitPromises();
|
|
2285
|
-
this.selectedCountryData = {};
|
|
2286
|
-
this._processCountryData();
|
|
2287
|
-
this._generateMarkup();
|
|
2288
|
-
this._setInitialState();
|
|
2289
|
-
this._initListeners();
|
|
2290
|
-
this._initRequests();
|
|
2291
|
-
}
|
|
2292
|
-
//********************
|
|
2293
|
-
//* PRIVATE METHODS
|
|
2294
|
-
//********************
|
|
2295
|
-
//* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
|
|
2296
|
-
_processCountryData() {
|
|
2297
|
-
this.countries = processAllCountries(this.options);
|
|
2298
|
-
const dialRes = processDialCodes(this.countries, this.options);
|
|
2299
|
-
this.dialCodes = dialRes.dialCodes;
|
|
2300
|
-
this.dialCodeMaxLen = dialRes.dialCodeMaxLen;
|
|
2301
|
-
this.dialCodeToIso2Map = dialRes.dialCodeToIso2Map;
|
|
2302
|
-
translateCountryNames(this.countries, this.options);
|
|
2303
|
-
sortCountries(this.countries, this.options);
|
|
2304
|
-
this.countryByIso2 = new Map(this.countries.map((c) => [c.iso2, c]));
|
|
2305
|
-
cacheSearchTokens(this.countries);
|
|
2306
|
-
}
|
|
2307
2079
|
//* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
|
|
2308
|
-
|
|
2080
|
+
generateMarkup(countries) {
|
|
2081
|
+
this.countries = countries;
|
|
2309
2082
|
this._prepareTelInput();
|
|
2310
2083
|
const wrapper = this._createWrapperAndInsert();
|
|
2311
2084
|
this._maybeBuildCountryContainer(wrapper);
|
|
@@ -2314,16 +2087,16 @@ var Iti = class _Iti {
|
|
|
2314
2087
|
this._maybeBuildHiddenInputs(wrapper);
|
|
2315
2088
|
}
|
|
2316
2089
|
_prepareTelInput() {
|
|
2090
|
+
var _a;
|
|
2317
2091
|
this.telInput.classList.add("iti__tel-input");
|
|
2318
|
-
if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form
|
|
2092
|
+
if (!this.telInput.hasAttribute("autocomplete") && !((_a = this.telInput.form) === null || _a === void 0 ? void 0 : _a.hasAttribute("autocomplete"))) {
|
|
2319
2093
|
this.telInput.setAttribute("autocomplete", "off");
|
|
2320
2094
|
}
|
|
2321
2095
|
}
|
|
2322
2096
|
_createWrapperAndInsert() {
|
|
2323
|
-
var _a;
|
|
2324
2097
|
const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.options;
|
|
2325
|
-
const parentClasses =
|
|
2326
|
-
|
|
2098
|
+
const parentClasses = buildClassNames({
|
|
2099
|
+
iti: true,
|
|
2327
2100
|
"iti--allow-dropdown": allowDropdown,
|
|
2328
2101
|
"iti--show-flags": showFlags,
|
|
2329
2102
|
"iti--inline-dropdown": !useFullscreenPopup,
|
|
@@ -2333,7 +2106,7 @@ var Iti = class _Iti {
|
|
|
2333
2106
|
if (this.isRTL) {
|
|
2334
2107
|
wrapper.setAttribute("dir", "ltr");
|
|
2335
2108
|
}
|
|
2336
|
-
|
|
2109
|
+
this.telInput.before(wrapper);
|
|
2337
2110
|
return wrapper;
|
|
2338
2111
|
}
|
|
2339
2112
|
_maybeBuildCountryContainer(wrapper) {
|
|
@@ -2395,12 +2168,12 @@ var Iti = class _Iti {
|
|
|
2395
2168
|
"aria-label": i18n.countryListAriaLabel
|
|
2396
2169
|
}, this.dropdownContent);
|
|
2397
2170
|
this._appendListItems();
|
|
2398
|
-
if (countrySearch) {
|
|
2399
|
-
this.
|
|
2171
|
+
if (this.options.countrySearch) {
|
|
2172
|
+
this.updateSearchResultsA11yText();
|
|
2400
2173
|
}
|
|
2401
2174
|
if (dropdownContainer) {
|
|
2402
|
-
const dropdownClasses =
|
|
2403
|
-
|
|
2175
|
+
const dropdownClasses = buildClassNames({
|
|
2176
|
+
iti: true,
|
|
2404
2177
|
"iti--container": true,
|
|
2405
2178
|
"iti--fullscreen-popup": useFullscreenPopup,
|
|
2406
2179
|
"iti--inline-dropdown": !useFullscreenPopup,
|
|
@@ -2436,7 +2209,7 @@ var Iti = class _Iti {
|
|
|
2436
2209
|
"aria-label": i18n.searchPlaceholder,
|
|
2437
2210
|
"aria-controls": `iti-${this.id}__country-listbox`,
|
|
2438
2211
|
"aria-autocomplete": "list",
|
|
2439
|
-
|
|
2212
|
+
autocomplete: "off"
|
|
2440
2213
|
}, searchWrapper);
|
|
2441
2214
|
this.searchClearButton = createEl("button", {
|
|
2442
2215
|
type: "button",
|
|
@@ -2463,7 +2236,7 @@ var Iti = class _Iti {
|
|
|
2463
2236
|
}
|
|
2464
2237
|
_maybeUpdateInputPaddingAndReveal() {
|
|
2465
2238
|
if (this.countryContainer) {
|
|
2466
|
-
this.
|
|
2239
|
+
this.updateInputPadding();
|
|
2467
2240
|
this.countryContainer.classList.remove("iti__v-hide");
|
|
2468
2241
|
}
|
|
2469
2242
|
}
|
|
@@ -2499,37 +2272,422 @@ var Iti = class _Iti {
|
|
|
2499
2272
|
}
|
|
2500
2273
|
}
|
|
2501
2274
|
}
|
|
2502
|
-
//* For each country: add a country list item <li> to the countryList <ul> container.
|
|
2503
|
-
_appendListItems() {
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
const
|
|
2507
|
-
const
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2275
|
+
//* For each country: add a country list item <li> to the countryList <ul> container.
|
|
2276
|
+
_appendListItems() {
|
|
2277
|
+
const frag = document.createDocumentFragment();
|
|
2278
|
+
for (let i = 0; i < this.countries.length; i++) {
|
|
2279
|
+
const c = this.countries[i];
|
|
2280
|
+
const liClass = buildClassNames({
|
|
2281
|
+
iti__country: true,
|
|
2282
|
+
iti__highlight: i === 0
|
|
2283
|
+
});
|
|
2284
|
+
const listItem = createEl("li", {
|
|
2285
|
+
id: `iti-${this.id}__item-${c.iso2}`,
|
|
2286
|
+
class: liClass,
|
|
2287
|
+
tabindex: "-1",
|
|
2288
|
+
role: "option",
|
|
2289
|
+
"aria-selected": "false"
|
|
2290
|
+
});
|
|
2291
|
+
listItem.dataset.dialCode = c.dialCode;
|
|
2292
|
+
listItem.dataset.countryCode = c.iso2;
|
|
2293
|
+
c.nodeById[this.id] = listItem;
|
|
2294
|
+
if (this.options.showFlags) {
|
|
2295
|
+
createEl("div", { class: `iti__flag iti__${c.iso2}` }, listItem);
|
|
2296
|
+
}
|
|
2297
|
+
const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
|
|
2298
|
+
nameEl.textContent = c.name;
|
|
2299
|
+
const dialEl = createEl("span", { class: "iti__dial-code" }, listItem);
|
|
2300
|
+
if (this.isRTL) {
|
|
2301
|
+
dialEl.setAttribute("dir", "ltr");
|
|
2302
|
+
}
|
|
2303
|
+
dialEl.textContent = `+${c.dialCode}`;
|
|
2304
|
+
frag.appendChild(listItem);
|
|
2305
|
+
}
|
|
2306
|
+
this.countryList.appendChild(frag);
|
|
2307
|
+
}
|
|
2308
|
+
//* Update the input padding to make space for the selected country/dial code.
|
|
2309
|
+
updateInputPadding() {
|
|
2310
|
+
if (this.selectedCountry) {
|
|
2311
|
+
const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
|
|
2312
|
+
const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
|
|
2313
|
+
const inputPadding = selectedCountryWidth + 6;
|
|
2314
|
+
this.telInput.style.paddingLeft = `${inputPadding}px`;
|
|
2315
|
+
}
|
|
2316
|
+
}
|
|
2317
|
+
//* When input is in a hidden container during init, we cannot calculate the selected country width.
|
|
2318
|
+
//* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
|
|
2319
|
+
//* To get the right styling to apply, all we need is a shallow clone of the container,
|
|
2320
|
+
//* and then to inject a deep clone of the selectedCountry element.
|
|
2321
|
+
_getHiddenSelectedCountryWidth() {
|
|
2322
|
+
if (this.telInput.parentNode) {
|
|
2323
|
+
let body;
|
|
2324
|
+
try {
|
|
2325
|
+
body = window.top.document.body;
|
|
2326
|
+
} catch (e) {
|
|
2327
|
+
body = document.body;
|
|
2328
|
+
}
|
|
2329
|
+
const containerClone = this.telInput.parentNode.cloneNode(false);
|
|
2330
|
+
containerClone.style.visibility = "hidden";
|
|
2331
|
+
body.appendChild(containerClone);
|
|
2332
|
+
const countryContainerClone = this.countryContainer.cloneNode();
|
|
2333
|
+
containerClone.appendChild(countryContainerClone);
|
|
2334
|
+
const selectedCountryClone = this.selectedCountry.cloneNode(true);
|
|
2335
|
+
countryContainerClone.appendChild(selectedCountryClone);
|
|
2336
|
+
const width = selectedCountryClone.offsetWidth;
|
|
2337
|
+
body.removeChild(containerClone);
|
|
2338
|
+
return width;
|
|
2339
|
+
}
|
|
2340
|
+
return 0;
|
|
2341
|
+
}
|
|
2342
|
+
//* Update search results text (for a11y).
|
|
2343
|
+
updateSearchResultsA11yText() {
|
|
2344
|
+
const { i18n } = this.options;
|
|
2345
|
+
const count = this.countryList.childElementCount;
|
|
2346
|
+
let searchText;
|
|
2347
|
+
if (count === 0) {
|
|
2348
|
+
searchText = i18n.zeroSearchResults;
|
|
2349
|
+
} else {
|
|
2350
|
+
if (i18n.searchResultsText) {
|
|
2351
|
+
searchText = i18n.searchResultsText(count);
|
|
2352
|
+
} else if (count === 1) {
|
|
2353
|
+
searchText = i18n.oneSearchResult;
|
|
2354
|
+
} else {
|
|
2355
|
+
searchText = i18n.multipleSearchResults.replace("${count}", count.toString());
|
|
2356
|
+
}
|
|
2357
|
+
}
|
|
2358
|
+
this.searchResultsA11yText.textContent = searchText;
|
|
2359
|
+
}
|
|
2360
|
+
//* Check if an element is visible within it's container, else scroll until it is.
|
|
2361
|
+
scrollTo(element) {
|
|
2362
|
+
const container = this.countryList;
|
|
2363
|
+
const scrollTop = document.documentElement.scrollTop;
|
|
2364
|
+
const containerHeight = container.offsetHeight;
|
|
2365
|
+
const containerTop = container.getBoundingClientRect().top + scrollTop;
|
|
2366
|
+
const containerBottom = containerTop + containerHeight;
|
|
2367
|
+
const elementHeight = element.offsetHeight;
|
|
2368
|
+
const elementTop = element.getBoundingClientRect().top + scrollTop;
|
|
2369
|
+
const elementBottom = elementTop + elementHeight;
|
|
2370
|
+
const newScrollTop = elementTop - containerTop + container.scrollTop;
|
|
2371
|
+
if (elementTop < containerTop) {
|
|
2372
|
+
container.scrollTop = newScrollTop;
|
|
2373
|
+
} else if (elementBottom > containerBottom) {
|
|
2374
|
+
const heightDifference = containerHeight - elementHeight;
|
|
2375
|
+
container.scrollTop = newScrollTop - heightDifference;
|
|
2376
|
+
}
|
|
2377
|
+
}
|
|
2378
|
+
//* Remove highlighting from other list items and highlight the given item.
|
|
2379
|
+
highlightListItem(listItem, shouldFocus) {
|
|
2380
|
+
const prevItem = this.highlightedItem;
|
|
2381
|
+
if (prevItem) {
|
|
2382
|
+
prevItem.classList.remove("iti__highlight");
|
|
2383
|
+
prevItem.setAttribute("aria-selected", "false");
|
|
2384
|
+
}
|
|
2385
|
+
this.highlightedItem = listItem;
|
|
2386
|
+
if (this.highlightedItem) {
|
|
2387
|
+
this.highlightedItem.classList.add("iti__highlight");
|
|
2388
|
+
this.highlightedItem.setAttribute("aria-selected", "true");
|
|
2389
|
+
if (this.options.countrySearch) {
|
|
2390
|
+
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2391
|
+
this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
|
|
2392
|
+
}
|
|
2393
|
+
}
|
|
2394
|
+
if (shouldFocus) {
|
|
2395
|
+
this.highlightedItem.focus();
|
|
2396
|
+
}
|
|
2397
|
+
}
|
|
2398
|
+
//* Country search: Filter the country list to the given array of countries.
|
|
2399
|
+
filterCountries(matchedCountries) {
|
|
2400
|
+
this.countryList.innerHTML = "";
|
|
2401
|
+
let noCountriesAddedYet = true;
|
|
2402
|
+
for (const c of matchedCountries) {
|
|
2403
|
+
const listItem = c.nodeById[this.id];
|
|
2404
|
+
if (listItem) {
|
|
2405
|
+
this.countryList.appendChild(listItem);
|
|
2406
|
+
if (noCountriesAddedYet) {
|
|
2407
|
+
this.highlightListItem(listItem, false);
|
|
2408
|
+
noCountriesAddedYet = false;
|
|
2409
|
+
}
|
|
2410
|
+
}
|
|
2411
|
+
}
|
|
2412
|
+
if (noCountriesAddedYet) {
|
|
2413
|
+
this.highlightListItem(null, false);
|
|
2414
|
+
if (this.searchNoResults) {
|
|
2415
|
+
this.searchNoResults.classList.remove("iti__hide");
|
|
2416
|
+
}
|
|
2417
|
+
} else if (this.searchNoResults) {
|
|
2418
|
+
this.searchNoResults.classList.add("iti__hide");
|
|
2419
|
+
}
|
|
2420
|
+
this.countryList.scrollTop = 0;
|
|
2421
|
+
this.updateSearchResultsA11yText();
|
|
2422
|
+
}
|
|
2423
|
+
destroy() {
|
|
2424
|
+
this.telInput.iti = void 0;
|
|
2425
|
+
delete this.telInput.dataset.intlTelInputId;
|
|
2426
|
+
if (this.options.separateDialCode) {
|
|
2427
|
+
this.telInput.style.paddingLeft = this.originalPaddingLeft;
|
|
2428
|
+
}
|
|
2429
|
+
const wrapper = this.telInput.parentNode;
|
|
2430
|
+
wrapper.before(this.telInput);
|
|
2431
|
+
wrapper.remove();
|
|
2432
|
+
this.telInput = null;
|
|
2433
|
+
this.countryContainer = null;
|
|
2434
|
+
this.selectedCountry = null;
|
|
2435
|
+
this.selectedCountryInner = null;
|
|
2436
|
+
this.selectedDialCode = null;
|
|
2437
|
+
this.dropdownArrow = null;
|
|
2438
|
+
this.dropdownContent = null;
|
|
2439
|
+
this.searchInput = null;
|
|
2440
|
+
this.searchIcon = null;
|
|
2441
|
+
this.searchClearButton = null;
|
|
2442
|
+
this.searchNoResults = null;
|
|
2443
|
+
this.searchResultsA11yText = null;
|
|
2444
|
+
this.countryList = null;
|
|
2445
|
+
this.dropdown = null;
|
|
2446
|
+
this.hiddenInput = null;
|
|
2447
|
+
this.hiddenInputCountry = null;
|
|
2448
|
+
this.highlightedItem = null;
|
|
2449
|
+
for (const c of this.countries) {
|
|
2450
|
+
delete c.nodeById[this.id];
|
|
2451
|
+
}
|
|
2452
|
+
this.countries = null;
|
|
2453
|
+
}
|
|
2454
|
+
};
|
|
2455
|
+
|
|
2456
|
+
// angular/build/temp/modules/data/country-data.js
|
|
2457
|
+
function processAllCountries(options) {
|
|
2458
|
+
const { onlyCountries, excludeCountries } = options;
|
|
2459
|
+
if (onlyCountries.length) {
|
|
2460
|
+
const lowerCaseOnlyCountries = onlyCountries.map((country) => country.toLowerCase());
|
|
2461
|
+
return data_default.filter((country) => lowerCaseOnlyCountries.includes(country.iso2));
|
|
2462
|
+
} else if (excludeCountries.length) {
|
|
2463
|
+
const lowerCaseExcludeCountries = excludeCountries.map((country) => country.toLowerCase());
|
|
2464
|
+
return data_default.filter((country) => !lowerCaseExcludeCountries.includes(country.iso2));
|
|
2465
|
+
}
|
|
2466
|
+
return data_default;
|
|
2467
|
+
}
|
|
2468
|
+
function translateCountryNames(countries, options) {
|
|
2469
|
+
for (const c of countries) {
|
|
2470
|
+
const iso2 = c.iso2.toLowerCase();
|
|
2471
|
+
if (options.i18n[iso2]) {
|
|
2472
|
+
c.name = options.i18n[iso2];
|
|
2473
|
+
}
|
|
2474
|
+
}
|
|
2475
|
+
}
|
|
2476
|
+
function processDialCodes(countries, options) {
|
|
2477
|
+
const dialCodes = /* @__PURE__ */ new Set();
|
|
2478
|
+
let dialCodeMaxLen = 0;
|
|
2479
|
+
const dialCodeToIso2Map = {};
|
|
2480
|
+
const _addToDialCodeMap = (iso2, dialCode, priority) => {
|
|
2481
|
+
if (!iso2 || !dialCode) {
|
|
2482
|
+
return;
|
|
2483
|
+
}
|
|
2484
|
+
if (dialCode.length > dialCodeMaxLen) {
|
|
2485
|
+
dialCodeMaxLen = dialCode.length;
|
|
2486
|
+
}
|
|
2487
|
+
if (!dialCodeToIso2Map.hasOwnProperty(dialCode)) {
|
|
2488
|
+
dialCodeToIso2Map[dialCode] = [];
|
|
2489
|
+
}
|
|
2490
|
+
const iso2List = dialCodeToIso2Map[dialCode];
|
|
2491
|
+
if (iso2List.includes(iso2)) {
|
|
2492
|
+
return;
|
|
2493
|
+
}
|
|
2494
|
+
const index = priority !== void 0 ? priority : iso2List.length;
|
|
2495
|
+
iso2List[index] = iso2;
|
|
2496
|
+
};
|
|
2497
|
+
for (const c of countries) {
|
|
2498
|
+
if (!dialCodes.has(c.dialCode)) {
|
|
2499
|
+
dialCodes.add(c.dialCode);
|
|
2500
|
+
}
|
|
2501
|
+
for (let k = 1; k < c.dialCode.length; k++) {
|
|
2502
|
+
const partialDialCode = c.dialCode.substring(0, k);
|
|
2503
|
+
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2504
|
+
}
|
|
2505
|
+
_addToDialCodeMap(c.iso2, c.dialCode, c.priority);
|
|
2506
|
+
}
|
|
2507
|
+
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2508
|
+
dialCodes.forEach((dialCode) => {
|
|
2509
|
+
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2510
|
+
});
|
|
2511
|
+
}
|
|
2512
|
+
for (const c of countries) {
|
|
2513
|
+
if (c.areaCodes) {
|
|
2514
|
+
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2515
|
+
for (const areaCode of c.areaCodes) {
|
|
2516
|
+
for (let k = 1; k < areaCode.length; k++) {
|
|
2517
|
+
const partialAreaCode = areaCode.substring(0, k);
|
|
2518
|
+
const partialDialCode = c.dialCode + partialAreaCode;
|
|
2519
|
+
_addToDialCodeMap(rootIso2Code, partialDialCode);
|
|
2520
|
+
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2521
|
+
}
|
|
2522
|
+
_addToDialCodeMap(c.iso2, c.dialCode + areaCode);
|
|
2523
|
+
}
|
|
2524
|
+
}
|
|
2525
|
+
}
|
|
2526
|
+
return { dialCodes, dialCodeMaxLen, dialCodeToIso2Map };
|
|
2527
|
+
}
|
|
2528
|
+
function sortCountries(countries, options) {
|
|
2529
|
+
if (options.countryOrder) {
|
|
2530
|
+
options.countryOrder = options.countryOrder.map((iso2) => iso2.toLowerCase());
|
|
2531
|
+
}
|
|
2532
|
+
countries.sort((a, b) => {
|
|
2533
|
+
const { countryOrder } = options;
|
|
2534
|
+
if (countryOrder) {
|
|
2535
|
+
const aIndex = countryOrder.indexOf(a.iso2);
|
|
2536
|
+
const bIndex = countryOrder.indexOf(b.iso2);
|
|
2537
|
+
const aIndexExists = aIndex > -1;
|
|
2538
|
+
const bIndexExists = bIndex > -1;
|
|
2539
|
+
if (aIndexExists || bIndexExists) {
|
|
2540
|
+
if (aIndexExists && bIndexExists) {
|
|
2541
|
+
return aIndex - bIndex;
|
|
2542
|
+
}
|
|
2543
|
+
return aIndexExists ? -1 : 1;
|
|
2544
|
+
}
|
|
2545
|
+
}
|
|
2546
|
+
return a.name.localeCompare(b.name);
|
|
2547
|
+
});
|
|
2548
|
+
}
|
|
2549
|
+
function cacheSearchTokens(countries) {
|
|
2550
|
+
for (const c of countries) {
|
|
2551
|
+
c.normalisedName = normaliseString(c.name);
|
|
2552
|
+
c.initials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
|
|
2553
|
+
c.dialCodePlus = `+${c.dialCode}`;
|
|
2554
|
+
}
|
|
2555
|
+
}
|
|
2556
|
+
|
|
2557
|
+
// angular/build/temp/modules/format/formatting.js
|
|
2558
|
+
function beforeSetNumber(fullNumber, dialCode, separateDialCode, selectedCountryData) {
|
|
2559
|
+
let number = fullNumber;
|
|
2560
|
+
if (separateDialCode) {
|
|
2561
|
+
if (dialCode) {
|
|
2562
|
+
dialCode = `+${selectedCountryData.dialCode}`;
|
|
2563
|
+
const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
|
|
2564
|
+
number = number.substring(start);
|
|
2565
|
+
}
|
|
2566
|
+
}
|
|
2567
|
+
return number;
|
|
2568
|
+
}
|
|
2569
|
+
function formatNumberAsYouType(fullNumber, telInputValue, utils2, selectedCountryData, separateDialCode) {
|
|
2570
|
+
const result = utils2 ? utils2.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
|
|
2571
|
+
const { dialCode } = selectedCountryData;
|
|
2572
|
+
if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
|
|
2573
|
+
const afterDialCode = result.split(`+${dialCode}`)[1] || "";
|
|
2574
|
+
return afterDialCode.trim();
|
|
2575
|
+
}
|
|
2576
|
+
return result;
|
|
2577
|
+
}
|
|
2578
|
+
|
|
2579
|
+
// angular/build/temp/modules/format/caret.js
|
|
2580
|
+
function translateCursorPosition(relevantChars, formattedValue, prevCaretPos, isDeleteForwards) {
|
|
2581
|
+
if (prevCaretPos === 0 && !isDeleteForwards) {
|
|
2582
|
+
return 0;
|
|
2583
|
+
}
|
|
2584
|
+
let relevantCharCount = 0;
|
|
2585
|
+
for (let i = 0; i < formattedValue.length; i++) {
|
|
2586
|
+
if (/[+0-9]/.test(formattedValue[i])) {
|
|
2587
|
+
relevantCharCount++;
|
|
2588
|
+
}
|
|
2589
|
+
if (relevantCharCount === relevantChars && !isDeleteForwards) {
|
|
2590
|
+
return i + 1;
|
|
2591
|
+
}
|
|
2592
|
+
if (isDeleteForwards && relevantCharCount === relevantChars + 1) {
|
|
2593
|
+
return i;
|
|
2524
2594
|
}
|
|
2525
2595
|
}
|
|
2596
|
+
return formattedValue.length;
|
|
2597
|
+
}
|
|
2598
|
+
|
|
2599
|
+
// angular/build/temp/modules/data/nanp-regionless.js
|
|
2600
|
+
var regionlessNanpNumbers = [
|
|
2601
|
+
"800",
|
|
2602
|
+
"822",
|
|
2603
|
+
"833",
|
|
2604
|
+
"844",
|
|
2605
|
+
"855",
|
|
2606
|
+
"866",
|
|
2607
|
+
"877",
|
|
2608
|
+
"880",
|
|
2609
|
+
"881",
|
|
2610
|
+
"882",
|
|
2611
|
+
"883",
|
|
2612
|
+
"884",
|
|
2613
|
+
"885",
|
|
2614
|
+
"886",
|
|
2615
|
+
"887",
|
|
2616
|
+
"888",
|
|
2617
|
+
"889"
|
|
2618
|
+
];
|
|
2619
|
+
var isRegionlessNanp = (number) => {
|
|
2620
|
+
const numeric = getNumeric(number);
|
|
2621
|
+
if (numeric.charAt(0) === "1") {
|
|
2622
|
+
const areaCode = numeric.substring(1, 4);
|
|
2623
|
+
return regionlessNanpNumbers.includes(areaCode);
|
|
2624
|
+
}
|
|
2625
|
+
return false;
|
|
2626
|
+
};
|
|
2627
|
+
|
|
2628
|
+
// angular/build/temp/intl-tel-input.js
|
|
2629
|
+
for (const c of data_default) {
|
|
2630
|
+
c.name = countries_default[c.iso2];
|
|
2631
|
+
}
|
|
2632
|
+
var id = 0;
|
|
2633
|
+
var iso2Set = new Set(data_default.map((c) => c.iso2));
|
|
2634
|
+
var isIso2 = (val) => iso2Set.has(val);
|
|
2635
|
+
var Iti = class _Iti {
|
|
2636
|
+
constructor(input, customOptions = {}) {
|
|
2637
|
+
this.id = id++;
|
|
2638
|
+
this.options = Object.assign(Object.assign({}, defaults), customOptions);
|
|
2639
|
+
applyOptionSideEffects(this.options);
|
|
2640
|
+
this.ui = new UI(input, this.options, this.id);
|
|
2641
|
+
this.isAndroid = _Iti._getIsAndroid();
|
|
2642
|
+
this.promise = this._createInitPromises();
|
|
2643
|
+
this.countries = processAllCountries(this.options);
|
|
2644
|
+
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(this.countries, this.options);
|
|
2645
|
+
this.dialCodes = dialCodes;
|
|
2646
|
+
this.dialCodeMaxLen = dialCodeMaxLen;
|
|
2647
|
+
this.dialCodeToIso2Map = dialCodeToIso2Map;
|
|
2648
|
+
this.countryByIso2 = new Map(this.countries.map((c) => [c.iso2, c]));
|
|
2649
|
+
this._init();
|
|
2650
|
+
}
|
|
2651
|
+
static _getIsAndroid() {
|
|
2652
|
+
return typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
2653
|
+
}
|
|
2654
|
+
_createInitPromises() {
|
|
2655
|
+
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
2656
|
+
this.resolveAutoCountryPromise = resolve;
|
|
2657
|
+
this.rejectAutoCountryPromise = reject;
|
|
2658
|
+
});
|
|
2659
|
+
const utilsScriptPromise = new Promise((resolve, reject) => {
|
|
2660
|
+
this.resolveUtilsScriptPromise = resolve;
|
|
2661
|
+
this.rejectUtilsScriptPromise = reject;
|
|
2662
|
+
});
|
|
2663
|
+
return Promise.all([autoCountryPromise, utilsScriptPromise]);
|
|
2664
|
+
}
|
|
2665
|
+
//* Can't be private as it's called from intlTelInput convenience wrapper.
|
|
2666
|
+
_init() {
|
|
2667
|
+
this.selectedCountryData = {};
|
|
2668
|
+
this.abortController = new AbortController();
|
|
2669
|
+
this._processCountryData();
|
|
2670
|
+
this.ui.generateMarkup(this.countries);
|
|
2671
|
+
this._setInitialState();
|
|
2672
|
+
this._initListeners();
|
|
2673
|
+
this._initRequests();
|
|
2674
|
+
}
|
|
2675
|
+
//********************
|
|
2676
|
+
//* PRIVATE METHODS
|
|
2677
|
+
//********************
|
|
2678
|
+
//* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
|
|
2679
|
+
_processCountryData() {
|
|
2680
|
+
translateCountryNames(this.countries, this.options);
|
|
2681
|
+
sortCountries(this.countries, this.options);
|
|
2682
|
+
cacheSearchTokens(this.countries);
|
|
2683
|
+
}
|
|
2526
2684
|
//* Set the initial state of the input value and the selected country by:
|
|
2527
2685
|
//* 1. Extracting a dial code from the given number
|
|
2528
2686
|
//* 2. Using explicit initialCountry
|
|
2529
2687
|
_setInitialState(overrideAutoCountry = false) {
|
|
2530
|
-
const attributeValue = this.telInput.getAttribute("value");
|
|
2531
|
-
const inputValue = this.telInput.value;
|
|
2532
|
-
const useAttribute = attributeValue && attributeValue.
|
|
2688
|
+
const attributeValue = this.ui.telInput.getAttribute("value");
|
|
2689
|
+
const inputValue = this.ui.telInput.value;
|
|
2690
|
+
const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
|
|
2533
2691
|
const val = useAttribute ? attributeValue : inputValue;
|
|
2534
2692
|
const dialCode = this._getDialCode(val);
|
|
2535
2693
|
const isRegionlessNanpNumber = isRegionlessNanp(val);
|
|
@@ -2559,45 +2717,50 @@ var Iti = class _Iti {
|
|
|
2559
2717
|
if (this.options.allowDropdown) {
|
|
2560
2718
|
this._initDropdownListeners();
|
|
2561
2719
|
}
|
|
2562
|
-
if ((this.hiddenInput || this.hiddenInputCountry) && this.telInput.form) {
|
|
2720
|
+
if ((this.ui.hiddenInput || this.ui.hiddenInputCountry) && this.ui.telInput.form) {
|
|
2563
2721
|
this._initHiddenInputListener();
|
|
2564
2722
|
}
|
|
2565
2723
|
}
|
|
2566
2724
|
//* Update hidden input on form submit.
|
|
2567
2725
|
_initHiddenInputListener() {
|
|
2568
2726
|
var _a;
|
|
2569
|
-
|
|
2570
|
-
if (this.hiddenInput) {
|
|
2571
|
-
this.hiddenInput.value = this.getNumber();
|
|
2727
|
+
const handleHiddenInputSubmit = () => {
|
|
2728
|
+
if (this.ui.hiddenInput) {
|
|
2729
|
+
this.ui.hiddenInput.value = this.getNumber();
|
|
2572
2730
|
}
|
|
2573
|
-
if (this.hiddenInputCountry) {
|
|
2574
|
-
this.hiddenInputCountry.value = this.
|
|
2731
|
+
if (this.ui.hiddenInputCountry) {
|
|
2732
|
+
this.ui.hiddenInputCountry.value = this.selectedCountryData.iso2 || "";
|
|
2575
2733
|
}
|
|
2576
2734
|
};
|
|
2577
|
-
(_a = this.telInput.form) === null || _a === void 0 ? void 0 : _a.addEventListener("submit",
|
|
2735
|
+
(_a = this.ui.telInput.form) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", handleHiddenInputSubmit, {
|
|
2736
|
+
signal: this.abortController.signal
|
|
2737
|
+
});
|
|
2578
2738
|
}
|
|
2579
2739
|
//* initialise the dropdown listeners.
|
|
2580
2740
|
_initDropdownListeners() {
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2741
|
+
const signal = this.abortController.signal;
|
|
2742
|
+
const handleLabelClick = (e) => {
|
|
2743
|
+
if (this.ui.dropdownContent.classList.contains("iti__hide")) {
|
|
2744
|
+
this.ui.telInput.focus();
|
|
2584
2745
|
} else {
|
|
2585
2746
|
e.preventDefault();
|
|
2586
2747
|
}
|
|
2587
2748
|
};
|
|
2588
|
-
const label = this.telInput.closest("label");
|
|
2749
|
+
const label = this.ui.telInput.closest("label");
|
|
2589
2750
|
if (label) {
|
|
2590
|
-
label.addEventListener("click",
|
|
2751
|
+
label.addEventListener("click", handleLabelClick, { signal });
|
|
2591
2752
|
}
|
|
2592
|
-
|
|
2593
|
-
const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
|
|
2594
|
-
if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
|
|
2753
|
+
const handleClickSelectedCountry = () => {
|
|
2754
|
+
const dropdownClosed = this.ui.dropdownContent.classList.contains("iti__hide");
|
|
2755
|
+
if (dropdownClosed && !this.ui.telInput.disabled && !this.ui.telInput.readOnly) {
|
|
2595
2756
|
this._openDropdown();
|
|
2596
2757
|
}
|
|
2597
2758
|
};
|
|
2598
|
-
this.selectedCountry.addEventListener("click",
|
|
2599
|
-
|
|
2600
|
-
|
|
2759
|
+
this.ui.selectedCountry.addEventListener("click", handleClickSelectedCountry, {
|
|
2760
|
+
signal
|
|
2761
|
+
});
|
|
2762
|
+
const handleCountryContainerKeydown = (e) => {
|
|
2763
|
+
const isDropdownHidden = this.ui.dropdownContent.classList.contains("iti__hide");
|
|
2601
2764
|
if (isDropdownHidden && ["ArrowUp", "ArrowDown", " ", "Enter"].includes(e.key)) {
|
|
2602
2765
|
e.preventDefault();
|
|
2603
2766
|
e.stopPropagation();
|
|
@@ -2607,24 +2770,26 @@ var Iti = class _Iti {
|
|
|
2607
2770
|
this._closeDropdown();
|
|
2608
2771
|
}
|
|
2609
2772
|
};
|
|
2610
|
-
this.countryContainer.addEventListener("keydown",
|
|
2773
|
+
this.ui.countryContainer.addEventListener("keydown", handleCountryContainerKeydown, { signal });
|
|
2611
2774
|
}
|
|
2612
2775
|
//* Init many requests: utils script / geo ip lookup.
|
|
2613
2776
|
_initRequests() {
|
|
2614
|
-
|
|
2777
|
+
const { loadUtils, initialCountry, geoIpLookup } = this.options;
|
|
2615
2778
|
if (loadUtils && !intlTelInput.utils) {
|
|
2616
|
-
|
|
2779
|
+
const doAttachUtils = () => {
|
|
2617
2780
|
var _a;
|
|
2618
2781
|
(_a = intlTelInput.attachUtils(loadUtils)) === null || _a === void 0 ? void 0 : _a.catch(() => {
|
|
2619
2782
|
});
|
|
2620
2783
|
};
|
|
2621
2784
|
if (intlTelInput.documentReady()) {
|
|
2622
|
-
|
|
2785
|
+
doAttachUtils();
|
|
2623
2786
|
} else {
|
|
2624
|
-
|
|
2625
|
-
|
|
2787
|
+
const handlePageLoad = () => {
|
|
2788
|
+
doAttachUtils();
|
|
2626
2789
|
};
|
|
2627
|
-
window.addEventListener("load",
|
|
2790
|
+
window.addEventListener("load", handlePageLoad, {
|
|
2791
|
+
signal: this.abortController.signal
|
|
2792
|
+
});
|
|
2628
2793
|
}
|
|
2629
2794
|
} else {
|
|
2630
2795
|
this.resolveUtilsScriptPromise();
|
|
@@ -2661,8 +2826,8 @@ var Iti = class _Iti {
|
|
|
2661
2826
|
}
|
|
2662
2827
|
_openDropdownWithPlus() {
|
|
2663
2828
|
this._openDropdown();
|
|
2664
|
-
this.searchInput.value = "+";
|
|
2665
|
-
this.
|
|
2829
|
+
this.ui.searchInput.value = "+";
|
|
2830
|
+
this._filterCountriesByQuery("");
|
|
2666
2831
|
}
|
|
2667
2832
|
//* Initialize the tel input listeners.
|
|
2668
2833
|
_initTelInputListeners() {
|
|
@@ -2673,47 +2838,49 @@ var Iti = class _Iti {
|
|
|
2673
2838
|
_bindInputListener() {
|
|
2674
2839
|
const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.options;
|
|
2675
2840
|
let userOverrideFormatting = false;
|
|
2676
|
-
if (/\p{L}/u.test(this.telInput.value)) {
|
|
2841
|
+
if (/\p{L}/u.test(this.ui.telInput.value)) {
|
|
2677
2842
|
userOverrideFormatting = true;
|
|
2678
2843
|
}
|
|
2679
|
-
|
|
2844
|
+
const handleInputEvent = (e) => {
|
|
2680
2845
|
if (this.isAndroid && (e === null || e === void 0 ? void 0 : e.data) === "+" && separateDialCode && allowDropdown && countrySearch) {
|
|
2681
|
-
const currentCaretPos = this.telInput.selectionStart || 0;
|
|
2682
|
-
const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos - 1);
|
|
2683
|
-
const valueAfterCaret = this.telInput.value.substring(currentCaretPos);
|
|
2684
|
-
this.telInput.value = valueBeforeCaret + valueAfterCaret;
|
|
2846
|
+
const currentCaretPos = this.ui.telInput.selectionStart || 0;
|
|
2847
|
+
const valueBeforeCaret = this.ui.telInput.value.substring(0, currentCaretPos - 1);
|
|
2848
|
+
const valueAfterCaret = this.ui.telInput.value.substring(currentCaretPos);
|
|
2849
|
+
this.ui.telInput.value = valueBeforeCaret + valueAfterCaret;
|
|
2685
2850
|
this._openDropdownWithPlus();
|
|
2686
2851
|
return;
|
|
2687
2852
|
}
|
|
2688
|
-
if (this._updateCountryFromNumber(this.telInput.value)) {
|
|
2853
|
+
if (this._updateCountryFromNumber(this.ui.telInput.value)) {
|
|
2689
2854
|
this._triggerCountryChange();
|
|
2690
2855
|
}
|
|
2691
2856
|
const isFormattingChar = (e === null || e === void 0 ? void 0 : e.data) && /[^+0-9]/.test(e.data);
|
|
2692
|
-
const isPaste = (e === null || e === void 0 ? void 0 : e.inputType) === "insertFromPaste" && this.telInput.value;
|
|
2857
|
+
const isPaste = (e === null || e === void 0 ? void 0 : e.inputType) === "insertFromPaste" && this.ui.telInput.value;
|
|
2693
2858
|
if (isFormattingChar || isPaste && !strictMode) {
|
|
2694
2859
|
userOverrideFormatting = true;
|
|
2695
|
-
} else if (!/[^+0-9]/.test(this.telInput.value)) {
|
|
2860
|
+
} else if (!/[^+0-9]/.test(this.ui.telInput.value)) {
|
|
2696
2861
|
userOverrideFormatting = false;
|
|
2697
2862
|
}
|
|
2698
2863
|
const isSetNumber = (e === null || e === void 0 ? void 0 : e.detail) && e.detail["isSetNumber"];
|
|
2699
2864
|
if (formatAsYouType && !userOverrideFormatting && !isSetNumber) {
|
|
2700
|
-
const currentCaretPos = this.telInput.selectionStart || 0;
|
|
2701
|
-
const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
|
|
2865
|
+
const currentCaretPos = this.ui.telInput.selectionStart || 0;
|
|
2866
|
+
const valueBeforeCaret = this.ui.telInput.value.substring(0, currentCaretPos);
|
|
2702
2867
|
const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
|
|
2703
2868
|
const isDeleteForwards = (e === null || e === void 0 ? void 0 : e.inputType) === "deleteContentForward";
|
|
2704
2869
|
const fullNumber = this._getFullNumber();
|
|
2705
|
-
const formattedValue = formatNumberAsYouType(fullNumber, this.telInput.value, intlTelInput.utils, this.selectedCountryData, this.options.separateDialCode);
|
|
2870
|
+
const formattedValue = formatNumberAsYouType(fullNumber, this.ui.telInput.value, intlTelInput.utils, this.selectedCountryData, this.options.separateDialCode);
|
|
2706
2871
|
const newCaretPos = translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
|
|
2707
|
-
this.telInput.value = formattedValue;
|
|
2708
|
-
this.telInput.setSelectionRange(newCaretPos, newCaretPos);
|
|
2872
|
+
this.ui.telInput.value = formattedValue;
|
|
2873
|
+
this.ui.telInput.setSelectionRange(newCaretPos, newCaretPos);
|
|
2709
2874
|
}
|
|
2710
2875
|
};
|
|
2711
|
-
this.telInput.addEventListener("input",
|
|
2876
|
+
this.ui.telInput.addEventListener("input", handleInputEvent, {
|
|
2877
|
+
signal: this.abortController.signal
|
|
2878
|
+
});
|
|
2712
2879
|
}
|
|
2713
2880
|
_maybeBindKeydownListener() {
|
|
2714
2881
|
const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.options;
|
|
2715
2882
|
if (strictMode || separateDialCode) {
|
|
2716
|
-
|
|
2883
|
+
const handleKeydownEvent = (e) => {
|
|
2717
2884
|
if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
|
|
2718
2885
|
if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
|
|
2719
2886
|
e.preventDefault();
|
|
@@ -2721,12 +2888,12 @@ var Iti = class _Iti {
|
|
|
2721
2888
|
return;
|
|
2722
2889
|
}
|
|
2723
2890
|
if (strictMode) {
|
|
2724
|
-
const value = this.telInput.value;
|
|
2725
|
-
const alreadyHasPlus = value.
|
|
2726
|
-
const isInitialPlus = !alreadyHasPlus && this.telInput.selectionStart === 0 && e.key === "+";
|
|
2891
|
+
const value = this.ui.telInput.value;
|
|
2892
|
+
const alreadyHasPlus = value.startsWith("+");
|
|
2893
|
+
const isInitialPlus = !alreadyHasPlus && this.ui.telInput.selectionStart === 0 && e.key === "+";
|
|
2727
2894
|
const isNumeric = /^[0-9]$/.test(e.key);
|
|
2728
2895
|
const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
|
|
2729
|
-
const newValue = value.slice(0, this.telInput.selectionStart) + e.key + value.slice(this.telInput.selectionEnd);
|
|
2896
|
+
const newValue = value.slice(0, this.ui.telInput.selectionStart) + e.key + value.slice(this.ui.telInput.selectionEnd);
|
|
2730
2897
|
const newFullNumber = this._getFullNumber(newValue);
|
|
2731
2898
|
const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
|
|
2732
2899
|
const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
|
|
@@ -2738,14 +2905,16 @@ var Iti = class _Iti {
|
|
|
2738
2905
|
}
|
|
2739
2906
|
}
|
|
2740
2907
|
};
|
|
2741
|
-
this.telInput.addEventListener("keydown",
|
|
2908
|
+
this.ui.telInput.addEventListener("keydown", handleKeydownEvent, {
|
|
2909
|
+
signal: this.abortController.signal
|
|
2910
|
+
});
|
|
2742
2911
|
}
|
|
2743
2912
|
}
|
|
2744
2913
|
_maybeBindPasteListener() {
|
|
2745
2914
|
if (this.options.strictMode) {
|
|
2746
|
-
|
|
2915
|
+
const handlePasteEvent = (e) => {
|
|
2747
2916
|
e.preventDefault();
|
|
2748
|
-
const input = this.telInput;
|
|
2917
|
+
const input = this.ui.telInput;
|
|
2749
2918
|
const selStart = input.selectionStart;
|
|
2750
2919
|
const selEnd = input.selectionEnd;
|
|
2751
2920
|
const before = input.value.slice(0, selStart);
|
|
@@ -2780,79 +2949,89 @@ var Iti = class _Iti {
|
|
|
2780
2949
|
input.setSelectionRange(caretPos, caretPos);
|
|
2781
2950
|
input.dispatchEvent(new InputEvent("input", { bubbles: true }));
|
|
2782
2951
|
};
|
|
2783
|
-
this.telInput.addEventListener("paste",
|
|
2952
|
+
this.ui.telInput.addEventListener("paste", handlePasteEvent, {
|
|
2953
|
+
signal: this.abortController.signal
|
|
2954
|
+
});
|
|
2784
2955
|
}
|
|
2785
2956
|
}
|
|
2786
2957
|
//* Adhere to the input's maxlength attr.
|
|
2787
2958
|
_cap(number) {
|
|
2788
|
-
const max =
|
|
2959
|
+
const max = Number(this.ui.telInput.getAttribute("maxlength"));
|
|
2789
2960
|
return max && number.length > max ? number.substring(0, max) : number;
|
|
2790
2961
|
}
|
|
2791
|
-
//* Trigger a custom event on the input.
|
|
2962
|
+
//* Trigger a custom event on the input (typed via ItiEventMap).
|
|
2792
2963
|
_trigger(name, detailProps = {}) {
|
|
2793
2964
|
const e = new CustomEvent(name, {
|
|
2794
2965
|
bubbles: true,
|
|
2795
2966
|
cancelable: true,
|
|
2796
2967
|
detail: detailProps
|
|
2797
2968
|
});
|
|
2798
|
-
this.telInput.dispatchEvent(e);
|
|
2969
|
+
this.ui.telInput.dispatchEvent(e);
|
|
2799
2970
|
}
|
|
2800
2971
|
//* Open the dropdown.
|
|
2801
2972
|
_openDropdown() {
|
|
2802
2973
|
const { fixDropdownWidth, countrySearch } = this.options;
|
|
2974
|
+
this.dropdownAbortController = new AbortController();
|
|
2803
2975
|
if (fixDropdownWidth) {
|
|
2804
|
-
this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
|
|
2976
|
+
this.ui.dropdownContent.style.width = `${this.ui.telInput.offsetWidth}px`;
|
|
2805
2977
|
}
|
|
2806
|
-
this.dropdownContent.classList.remove("iti__hide");
|
|
2807
|
-
this.selectedCountry.setAttribute("aria-expanded", "true");
|
|
2978
|
+
this.ui.dropdownContent.classList.remove("iti__hide");
|
|
2979
|
+
this.ui.selectedCountry.setAttribute("aria-expanded", "true");
|
|
2808
2980
|
this._setDropdownPosition();
|
|
2809
2981
|
if (countrySearch) {
|
|
2810
|
-
const firstCountryItem = this.countryList.firstElementChild;
|
|
2982
|
+
const firstCountryItem = this.ui.countryList.firstElementChild;
|
|
2811
2983
|
if (firstCountryItem) {
|
|
2812
|
-
this.
|
|
2813
|
-
this.countryList.scrollTop = 0;
|
|
2984
|
+
this.ui.highlightListItem(firstCountryItem, false);
|
|
2985
|
+
this.ui.countryList.scrollTop = 0;
|
|
2814
2986
|
}
|
|
2815
|
-
this.searchInput.focus();
|
|
2987
|
+
this.ui.searchInput.focus();
|
|
2816
2988
|
}
|
|
2817
2989
|
this._bindDropdownListeners();
|
|
2818
|
-
this.dropdownArrow.classList.add("iti__arrow--up");
|
|
2990
|
+
this.ui.dropdownArrow.classList.add("iti__arrow--up");
|
|
2819
2991
|
this._trigger("open:countrydropdown");
|
|
2820
2992
|
}
|
|
2821
2993
|
//* Set the dropdown position
|
|
2822
2994
|
_setDropdownPosition() {
|
|
2823
2995
|
if (this.options.dropdownContainer) {
|
|
2824
|
-
this.options.dropdownContainer.appendChild(this.dropdown);
|
|
2996
|
+
this.options.dropdownContainer.appendChild(this.ui.dropdown);
|
|
2825
2997
|
}
|
|
2826
2998
|
if (!this.options.useFullscreenPopup) {
|
|
2827
|
-
const inputPosRelativeToVP = this.telInput.getBoundingClientRect();
|
|
2828
|
-
const inputHeight = this.telInput.offsetHeight;
|
|
2999
|
+
const inputPosRelativeToVP = this.ui.telInput.getBoundingClientRect();
|
|
3000
|
+
const inputHeight = this.ui.telInput.offsetHeight;
|
|
2829
3001
|
if (this.options.dropdownContainer) {
|
|
2830
|
-
this.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
|
|
2831
|
-
this.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
|
|
2832
|
-
|
|
2833
|
-
window.addEventListener("scroll",
|
|
3002
|
+
this.ui.dropdown.style.top = `${inputPosRelativeToVP.top + inputHeight}px`;
|
|
3003
|
+
this.ui.dropdown.style.left = `${inputPosRelativeToVP.left}px`;
|
|
3004
|
+
const handleWindowScroll = () => this._closeDropdown();
|
|
3005
|
+
window.addEventListener("scroll", handleWindowScroll, {
|
|
3006
|
+
signal: this.dropdownAbortController.signal
|
|
3007
|
+
});
|
|
2834
3008
|
}
|
|
2835
3009
|
}
|
|
2836
3010
|
}
|
|
2837
3011
|
//* We only bind dropdown listeners when the dropdown is open.
|
|
2838
3012
|
_bindDropdownListeners() {
|
|
2839
|
-
|
|
3013
|
+
const signal = this.dropdownAbortController.signal;
|
|
3014
|
+
const handleMouseoverCountryList = (e) => {
|
|
2840
3015
|
var _a;
|
|
2841
3016
|
const listItem = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(".iti__country");
|
|
2842
3017
|
if (listItem) {
|
|
2843
|
-
this.
|
|
3018
|
+
this.ui.highlightListItem(listItem, false);
|
|
2844
3019
|
}
|
|
2845
3020
|
};
|
|
2846
|
-
this.countryList.addEventListener("mouseover",
|
|
2847
|
-
|
|
3021
|
+
this.ui.countryList.addEventListener("mouseover", handleMouseoverCountryList, {
|
|
3022
|
+
signal
|
|
3023
|
+
});
|
|
3024
|
+
const handleClickCountryList = (e) => {
|
|
2848
3025
|
var _a;
|
|
2849
3026
|
const listItem = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(".iti__country");
|
|
2850
3027
|
if (listItem) {
|
|
2851
3028
|
this._selectListItem(listItem);
|
|
2852
3029
|
}
|
|
2853
3030
|
};
|
|
2854
|
-
this.countryList.addEventListener("click",
|
|
2855
|
-
|
|
3031
|
+
this.ui.countryList.addEventListener("click", handleClickCountryList, {
|
|
3032
|
+
signal
|
|
3033
|
+
});
|
|
3034
|
+
const handleClickOffToClose = (e) => {
|
|
2856
3035
|
const target = e.target;
|
|
2857
3036
|
const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
|
|
2858
3037
|
if (!clickedInsideDropdown) {
|
|
@@ -2860,11 +3039,11 @@ var Iti = class _Iti {
|
|
|
2860
3039
|
}
|
|
2861
3040
|
};
|
|
2862
3041
|
setTimeout(() => {
|
|
2863
|
-
document.documentElement.addEventListener("click",
|
|
3042
|
+
document.documentElement.addEventListener("click", handleClickOffToClose, { signal });
|
|
2864
3043
|
}, 0);
|
|
2865
3044
|
let query = "";
|
|
2866
3045
|
let queryTimer = null;
|
|
2867
|
-
|
|
3046
|
+
const handleKeydownOnDropdown = (e) => {
|
|
2868
3047
|
if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
|
|
2869
3048
|
e.preventDefault();
|
|
2870
3049
|
e.stopPropagation();
|
|
@@ -2888,19 +3067,19 @@ var Iti = class _Iti {
|
|
|
2888
3067
|
}, 1e3);
|
|
2889
3068
|
}
|
|
2890
3069
|
};
|
|
2891
|
-
document.addEventListener("keydown",
|
|
3070
|
+
document.addEventListener("keydown", handleKeydownOnDropdown, { signal });
|
|
2892
3071
|
if (this.options.countrySearch) {
|
|
2893
3072
|
const doFilter = () => {
|
|
2894
|
-
const inputQuery = this.searchInput.value.trim();
|
|
2895
|
-
this.
|
|
2896
|
-
if (this.searchInput.value) {
|
|
2897
|
-
this.searchClearButton.classList.remove("iti__hide");
|
|
3073
|
+
const inputQuery = this.ui.searchInput.value.trim();
|
|
3074
|
+
this._filterCountriesByQuery(inputQuery);
|
|
3075
|
+
if (this.ui.searchInput.value) {
|
|
3076
|
+
this.ui.searchClearButton.classList.remove("iti__hide");
|
|
2898
3077
|
} else {
|
|
2899
|
-
this.searchClearButton.classList.add("iti__hide");
|
|
3078
|
+
this.ui.searchClearButton.classList.add("iti__hide");
|
|
2900
3079
|
}
|
|
2901
3080
|
};
|
|
2902
3081
|
let keyupTimer = null;
|
|
2903
|
-
|
|
3082
|
+
const handleSearchChange = () => {
|
|
2904
3083
|
if (keyupTimer) {
|
|
2905
3084
|
clearTimeout(keyupTimer);
|
|
2906
3085
|
}
|
|
@@ -2909,13 +3088,17 @@ var Iti = class _Iti {
|
|
|
2909
3088
|
keyupTimer = null;
|
|
2910
3089
|
}, 100);
|
|
2911
3090
|
};
|
|
2912
|
-
this.searchInput.addEventListener("input",
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
3091
|
+
this.ui.searchInput.addEventListener("input", handleSearchChange, {
|
|
3092
|
+
signal
|
|
3093
|
+
});
|
|
3094
|
+
const handleSearchClear = () => {
|
|
3095
|
+
this.ui.searchInput.value = "";
|
|
3096
|
+
this.ui.searchInput.focus();
|
|
2916
3097
|
doFilter();
|
|
2917
3098
|
};
|
|
2918
|
-
this.searchClearButton.addEventListener("click",
|
|
3099
|
+
this.ui.searchClearButton.addEventListener("click", handleSearchClear, {
|
|
3100
|
+
signal
|
|
3101
|
+
});
|
|
2919
3102
|
}
|
|
2920
3103
|
}
|
|
2921
3104
|
//* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
|
|
@@ -2924,42 +3107,21 @@ var Iti = class _Iti {
|
|
|
2924
3107
|
const startsWith = c.name.substring(0, query.length).toLowerCase() === query;
|
|
2925
3108
|
if (startsWith) {
|
|
2926
3109
|
const listItem = c.nodeById[this.id];
|
|
2927
|
-
this.
|
|
2928
|
-
this.
|
|
3110
|
+
this.ui.highlightListItem(listItem, false);
|
|
3111
|
+
this.ui.scrollTo(listItem);
|
|
2929
3112
|
break;
|
|
2930
3113
|
}
|
|
2931
3114
|
}
|
|
2932
3115
|
}
|
|
2933
|
-
//* Country search
|
|
2934
|
-
|
|
2935
|
-
this.countryList.innerHTML = "";
|
|
3116
|
+
//* Country search: Filter the countries according to the search query.
|
|
3117
|
+
_filterCountriesByQuery(query) {
|
|
2936
3118
|
let matchedCountries;
|
|
2937
3119
|
if (query === "") {
|
|
2938
3120
|
matchedCountries = this.countries;
|
|
2939
3121
|
} else {
|
|
2940
3122
|
matchedCountries = this._getMatchedCountries(query);
|
|
2941
3123
|
}
|
|
2942
|
-
|
|
2943
|
-
for (const c of matchedCountries) {
|
|
2944
|
-
const listItem = c.nodeById[this.id];
|
|
2945
|
-
if (listItem) {
|
|
2946
|
-
this.countryList.appendChild(listItem);
|
|
2947
|
-
if (noCountriesAddedYet) {
|
|
2948
|
-
this._highlightListItem(listItem, false);
|
|
2949
|
-
noCountriesAddedYet = false;
|
|
2950
|
-
}
|
|
2951
|
-
}
|
|
2952
|
-
}
|
|
2953
|
-
if (noCountriesAddedYet) {
|
|
2954
|
-
this._highlightListItem(null, false);
|
|
2955
|
-
if (this.searchNoResults) {
|
|
2956
|
-
this.searchNoResults.classList.remove("iti__hide");
|
|
2957
|
-
}
|
|
2958
|
-
} else if (this.searchNoResults) {
|
|
2959
|
-
this.searchNoResults.classList.add("iti__hide");
|
|
2960
|
-
}
|
|
2961
|
-
this.countryList.scrollTop = 0;
|
|
2962
|
-
this._updateSearchResultsA11yText();
|
|
3124
|
+
this.ui.filterCountries(matchedCountries);
|
|
2963
3125
|
}
|
|
2964
3126
|
_getMatchedCountries(query) {
|
|
2965
3127
|
const normalisedQuery = normaliseString(query);
|
|
@@ -2993,40 +3155,22 @@ var Iti = class _Iti {
|
|
|
2993
3155
|
...initialsMatches.sort((a, b) => a.priority - b.priority)
|
|
2994
3156
|
];
|
|
2995
3157
|
}
|
|
2996
|
-
//* Update search results text (for a11y).
|
|
2997
|
-
_updateSearchResultsA11yText() {
|
|
2998
|
-
const { i18n } = this.options;
|
|
2999
|
-
const count = this.countryList.childElementCount;
|
|
3000
|
-
let searchText;
|
|
3001
|
-
if (count === 0) {
|
|
3002
|
-
searchText = i18n.zeroSearchResults;
|
|
3003
|
-
} else {
|
|
3004
|
-
if (i18n.searchResultsText) {
|
|
3005
|
-
searchText = i18n.searchResultsText(count);
|
|
3006
|
-
} else if (count === 1) {
|
|
3007
|
-
searchText = i18n.oneSearchResult;
|
|
3008
|
-
} else {
|
|
3009
|
-
searchText = i18n.multipleSearchResults.replace("${count}", count.toString());
|
|
3010
|
-
}
|
|
3011
|
-
}
|
|
3012
|
-
this.searchResultsA11yText.textContent = searchText;
|
|
3013
|
-
}
|
|
3014
3158
|
//* Highlight the next/prev item in the list (and ensure it is visible).
|
|
3015
3159
|
_handleUpDownKey(key) {
|
|
3016
3160
|
var _a, _b;
|
|
3017
|
-
let next = key === "ArrowUp" ? (_a = this.highlightedItem) === null || _a === void 0 ? void 0 : _a.previousElementSibling : (_b = this.highlightedItem) === null || _b === void 0 ? void 0 : _b.nextElementSibling;
|
|
3018
|
-
if (!next && this.countryList.childElementCount > 1) {
|
|
3019
|
-
next = key === "ArrowUp" ? this.countryList.lastElementChild : this.countryList.firstElementChild;
|
|
3161
|
+
let next = key === "ArrowUp" ? (_a = this.ui.highlightedItem) === null || _a === void 0 ? void 0 : _a.previousElementSibling : (_b = this.ui.highlightedItem) === null || _b === void 0 ? void 0 : _b.nextElementSibling;
|
|
3162
|
+
if (!next && this.ui.countryList.childElementCount > 1) {
|
|
3163
|
+
next = key === "ArrowUp" ? this.ui.countryList.lastElementChild : this.ui.countryList.firstElementChild;
|
|
3020
3164
|
}
|
|
3021
3165
|
if (next) {
|
|
3022
|
-
this.
|
|
3023
|
-
this.
|
|
3166
|
+
this.ui.scrollTo(next);
|
|
3167
|
+
this.ui.highlightListItem(next, false);
|
|
3024
3168
|
}
|
|
3025
3169
|
}
|
|
3026
3170
|
//* Select the currently highlighted item.
|
|
3027
3171
|
_handleEnterKey() {
|
|
3028
|
-
if (this.highlightedItem) {
|
|
3029
|
-
this._selectListItem(this.highlightedItem);
|
|
3172
|
+
if (this.ui.highlightedItem) {
|
|
3173
|
+
this._selectListItem(this.ui.highlightedItem);
|
|
3030
3174
|
}
|
|
3031
3175
|
}
|
|
3032
3176
|
//* Update the input's value to the given val (format first if possible)
|
|
@@ -3034,13 +3178,13 @@ var Iti = class _Iti {
|
|
|
3034
3178
|
_updateValFromNumber(fullNumber) {
|
|
3035
3179
|
let number = fullNumber;
|
|
3036
3180
|
if (this.options.formatOnDisplay && intlTelInput.utils && this.selectedCountryData) {
|
|
3037
|
-
const useNational = this.options.nationalMode || number.
|
|
3181
|
+
const useNational = this.options.nationalMode || !number.startsWith("+") && !this.options.separateDialCode;
|
|
3038
3182
|
const { NATIONAL, INTERNATIONAL } = intlTelInput.utils.numberFormat;
|
|
3039
3183
|
const format = useNational ? NATIONAL : INTERNATIONAL;
|
|
3040
3184
|
number = intlTelInput.utils.formatNumber(number, this.selectedCountryData.iso2, format);
|
|
3041
3185
|
}
|
|
3042
3186
|
number = this._beforeSetNumber(number);
|
|
3043
|
-
this.telInput.value = number;
|
|
3187
|
+
this.ui.telInput.value = number;
|
|
3044
3188
|
}
|
|
3045
3189
|
//* Check if need to select a new country based on the given number
|
|
3046
3190
|
//* Note: called from _setInitialState, keyup handler, setNumber.
|
|
@@ -3054,11 +3198,11 @@ var Iti = class _Iti {
|
|
|
3054
3198
|
// if there is a selected country, and the number doesn't start with a dial code, then add it
|
|
3055
3199
|
_ensureHasDialCode(number) {
|
|
3056
3200
|
const { dialCode, nationalPrefix } = this.selectedCountryData;
|
|
3057
|
-
const alreadyHasPlus = number.
|
|
3201
|
+
const alreadyHasPlus = number.startsWith("+");
|
|
3058
3202
|
if (alreadyHasPlus || !dialCode) {
|
|
3059
3203
|
return number;
|
|
3060
3204
|
}
|
|
3061
|
-
const hasPrefix = nationalPrefix && number.
|
|
3205
|
+
const hasPrefix = nationalPrefix && number.startsWith(nationalPrefix) && !this.options.separateDialCode;
|
|
3062
3206
|
const cleanNumber = hasPrefix ? number.substring(1) : number;
|
|
3063
3207
|
return `+${dialCode}${cleanNumber}`;
|
|
3064
3208
|
}
|
|
@@ -3105,33 +3249,13 @@ var Iti = class _Iti {
|
|
|
3105
3249
|
if (!isValidSelection && !alreadySelected) {
|
|
3106
3250
|
return iso2Codes[0];
|
|
3107
3251
|
}
|
|
3108
|
-
} else if (number.
|
|
3252
|
+
} else if (number.startsWith("+") && numeric.length) {
|
|
3109
3253
|
return "";
|
|
3110
3254
|
} else if ((!number || number === "+") && !selectedIso2) {
|
|
3111
3255
|
return this.defaultCountry;
|
|
3112
3256
|
}
|
|
3113
3257
|
return null;
|
|
3114
3258
|
}
|
|
3115
|
-
//* Remove highlighting from other list items and highlight the given item.
|
|
3116
|
-
_highlightListItem(listItem, shouldFocus) {
|
|
3117
|
-
const prevItem = this.highlightedItem;
|
|
3118
|
-
if (prevItem) {
|
|
3119
|
-
prevItem.classList.remove("iti__highlight");
|
|
3120
|
-
prevItem.setAttribute("aria-selected", "false");
|
|
3121
|
-
}
|
|
3122
|
-
this.highlightedItem = listItem;
|
|
3123
|
-
if (this.highlightedItem) {
|
|
3124
|
-
this.highlightedItem.classList.add("iti__highlight");
|
|
3125
|
-
this.highlightedItem.setAttribute("aria-selected", "true");
|
|
3126
|
-
if (this.options.countrySearch) {
|
|
3127
|
-
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
3128
|
-
this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
|
|
3129
|
-
}
|
|
3130
|
-
}
|
|
3131
|
-
if (shouldFocus) {
|
|
3132
|
-
this.highlightedItem.focus();
|
|
3133
|
-
}
|
|
3134
|
-
}
|
|
3135
3259
|
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
|
|
3136
3260
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
3137
3261
|
_setCountry(iso2) {
|
|
@@ -3141,7 +3265,7 @@ var Iti = class _Iti {
|
|
|
3141
3265
|
if (this.selectedCountryData.iso2) {
|
|
3142
3266
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
3143
3267
|
}
|
|
3144
|
-
if (this.selectedCountry) {
|
|
3268
|
+
if (this.ui.selectedCountry) {
|
|
3145
3269
|
const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
|
|
3146
3270
|
let ariaLabel, title;
|
|
3147
3271
|
if (iso2) {
|
|
@@ -3152,28 +3276,19 @@ var Iti = class _Iti {
|
|
|
3152
3276
|
title = i18n.noCountrySelected;
|
|
3153
3277
|
ariaLabel = i18n.noCountrySelected;
|
|
3154
3278
|
}
|
|
3155
|
-
this.selectedCountryInner.className = flagClass;
|
|
3156
|
-
this.selectedCountry.setAttribute("title", title);
|
|
3157
|
-
this.selectedCountry.setAttribute("aria-label", ariaLabel);
|
|
3279
|
+
this.ui.selectedCountryInner.className = flagClass;
|
|
3280
|
+
this.ui.selectedCountry.setAttribute("title", title);
|
|
3281
|
+
this.ui.selectedCountry.setAttribute("aria-label", ariaLabel);
|
|
3158
3282
|
}
|
|
3159
3283
|
if (separateDialCode) {
|
|
3160
3284
|
const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
|
|
3161
|
-
this.selectedDialCode.
|
|
3162
|
-
this.
|
|
3285
|
+
this.ui.selectedDialCode.textContent = dialCode;
|
|
3286
|
+
this.ui.updateInputPadding();
|
|
3163
3287
|
}
|
|
3164
3288
|
this._updatePlaceholder();
|
|
3165
3289
|
this._updateMaxLength();
|
|
3166
3290
|
return prevIso2 !== iso2;
|
|
3167
3291
|
}
|
|
3168
|
-
//* Update the input padding to make space for the selected country/dial code.
|
|
3169
|
-
_updateInputPadding() {
|
|
3170
|
-
if (this.selectedCountry) {
|
|
3171
|
-
const saneDefaultWidth = this.options.separateDialCode ? 78 : 42;
|
|
3172
|
-
const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth() || saneDefaultWidth;
|
|
3173
|
-
const inputPadding = selectedCountryWidth + 6;
|
|
3174
|
-
this.telInput.style.paddingLeft = `${inputPadding}px`;
|
|
3175
|
-
}
|
|
3176
|
-
}
|
|
3177
3292
|
//* Update the maximum valid number length for the currently selected country.
|
|
3178
3293
|
_updateMaxLength() {
|
|
3179
3294
|
const { strictMode, placeholderNumberType, validationNumberTypes } = this.options;
|
|
@@ -3197,35 +3312,10 @@ var Iti = class _Iti {
|
|
|
3197
3312
|
}
|
|
3198
3313
|
}
|
|
3199
3314
|
}
|
|
3200
|
-
//* When input is in a hidden container during init, we cannot calculate the selected country width.
|
|
3201
|
-
//* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
|
|
3202
|
-
//* To get the right styling to apply, all we need is a shallow clone of the container,
|
|
3203
|
-
//* and then to inject a deep clone of the selectedCountry element.
|
|
3204
|
-
_getHiddenSelectedCountryWidth() {
|
|
3205
|
-
if (this.telInput.parentNode) {
|
|
3206
|
-
let body;
|
|
3207
|
-
try {
|
|
3208
|
-
body = window.top.document.body;
|
|
3209
|
-
} catch (e) {
|
|
3210
|
-
body = document.body;
|
|
3211
|
-
}
|
|
3212
|
-
const containerClone = this.telInput.parentNode.cloneNode(false);
|
|
3213
|
-
containerClone.style.visibility = "hidden";
|
|
3214
|
-
body.appendChild(containerClone);
|
|
3215
|
-
const countryContainerClone = this.countryContainer.cloneNode();
|
|
3216
|
-
containerClone.appendChild(countryContainerClone);
|
|
3217
|
-
const selectedCountryClone = this.selectedCountry.cloneNode(true);
|
|
3218
|
-
countryContainerClone.appendChild(selectedCountryClone);
|
|
3219
|
-
const width = selectedCountryClone.offsetWidth;
|
|
3220
|
-
body.removeChild(containerClone);
|
|
3221
|
-
return width;
|
|
3222
|
-
}
|
|
3223
|
-
return 0;
|
|
3224
|
-
}
|
|
3225
3315
|
//* Update the input placeholder to an example number from the currently selected country.
|
|
3226
3316
|
_updatePlaceholder() {
|
|
3227
3317
|
const { autoPlaceholder, placeholderNumberType, nationalMode, customPlaceholder } = this.options;
|
|
3228
|
-
const shouldSetPlaceholder = autoPlaceholder === "aggressive" || !this.hadInitialPlaceholder && autoPlaceholder === "polite";
|
|
3318
|
+
const shouldSetPlaceholder = autoPlaceholder === "aggressive" || !this.ui.hadInitialPlaceholder && autoPlaceholder === "polite";
|
|
3229
3319
|
if (intlTelInput.utils && shouldSetPlaceholder) {
|
|
3230
3320
|
const numberType = intlTelInput.utils.numberType[placeholderNumberType];
|
|
3231
3321
|
let placeholder = this.selectedCountryData.iso2 ? intlTelInput.utils.getExampleNumber(this.selectedCountryData.iso2, nationalMode, numberType) : "";
|
|
@@ -3233,92 +3323,66 @@ var Iti = class _Iti {
|
|
|
3233
3323
|
if (typeof customPlaceholder === "function") {
|
|
3234
3324
|
placeholder = customPlaceholder(placeholder, this.selectedCountryData);
|
|
3235
3325
|
}
|
|
3236
|
-
this.telInput.setAttribute("placeholder", placeholder);
|
|
3326
|
+
this.ui.telInput.setAttribute("placeholder", placeholder);
|
|
3237
3327
|
}
|
|
3238
3328
|
}
|
|
3239
3329
|
//* Called when the user selects a list item from the dropdown.
|
|
3240
3330
|
_selectListItem(listItem) {
|
|
3241
|
-
const iso2 = listItem.
|
|
3331
|
+
const iso2 = listItem.dataset.countryCode;
|
|
3242
3332
|
const countryChanged = this._setCountry(iso2);
|
|
3243
3333
|
this._closeDropdown();
|
|
3244
|
-
const dialCode = listItem.
|
|
3334
|
+
const dialCode = listItem.dataset.dialCode;
|
|
3245
3335
|
this._updateDialCode(dialCode);
|
|
3246
3336
|
if (this.options.formatOnDisplay) {
|
|
3247
|
-
this._updateValFromNumber(this.telInput.value);
|
|
3337
|
+
this._updateValFromNumber(this.ui.telInput.value);
|
|
3248
3338
|
}
|
|
3249
|
-
this.telInput.focus();
|
|
3339
|
+
this.ui.telInput.focus();
|
|
3250
3340
|
if (countryChanged) {
|
|
3251
3341
|
this._triggerCountryChange();
|
|
3252
3342
|
}
|
|
3253
3343
|
}
|
|
3254
3344
|
//* Close the dropdown and unbind any listeners.
|
|
3255
3345
|
_closeDropdown() {
|
|
3256
|
-
this.dropdownContent.classList.
|
|
3257
|
-
|
|
3258
|
-
if (this.highlightedItem) {
|
|
3259
|
-
this.highlightedItem.setAttribute("aria-selected", "false");
|
|
3346
|
+
if (this.ui.dropdownContent.classList.contains("iti__hide")) {
|
|
3347
|
+
return;
|
|
3260
3348
|
}
|
|
3261
|
-
|
|
3262
|
-
|
|
3349
|
+
this.ui.dropdownContent.classList.add("iti__hide");
|
|
3350
|
+
this.ui.selectedCountry.setAttribute("aria-expanded", "false");
|
|
3351
|
+
if (this.ui.highlightedItem) {
|
|
3352
|
+
this.ui.highlightedItem.setAttribute("aria-selected", "false");
|
|
3263
3353
|
}
|
|
3264
|
-
this.dropdownArrow.classList.remove("iti__arrow--up");
|
|
3265
3354
|
if (this.options.countrySearch) {
|
|
3266
|
-
this.searchInput.
|
|
3267
|
-
this.searchClearButton.removeEventListener("click", this._handleSearchClear);
|
|
3355
|
+
this.ui.searchInput.removeAttribute("aria-activedescendant");
|
|
3268
3356
|
}
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
this.
|
|
3272
|
-
this.countryList.removeEventListener("click", this._handleClickCountryList);
|
|
3357
|
+
this.ui.dropdownArrow.classList.remove("iti__arrow--up");
|
|
3358
|
+
this.dropdownAbortController.abort();
|
|
3359
|
+
this.dropdownAbortController = null;
|
|
3273
3360
|
if (this.options.dropdownContainer) {
|
|
3274
|
-
|
|
3275
|
-
window.removeEventListener("scroll", this._handleWindowScroll);
|
|
3276
|
-
}
|
|
3277
|
-
if (this.dropdown.parentNode) {
|
|
3278
|
-
this.dropdown.parentNode.removeChild(this.dropdown);
|
|
3279
|
-
}
|
|
3361
|
+
this.ui.dropdown.remove();
|
|
3280
3362
|
}
|
|
3281
3363
|
this._trigger("close:countrydropdown");
|
|
3282
3364
|
}
|
|
3283
|
-
//* Check if an element is visible within it's container, else scroll until it is.
|
|
3284
|
-
_scrollTo(element) {
|
|
3285
|
-
const container = this.countryList;
|
|
3286
|
-
const scrollTop = document.documentElement.scrollTop;
|
|
3287
|
-
const containerHeight = container.offsetHeight;
|
|
3288
|
-
const containerTop = container.getBoundingClientRect().top + scrollTop;
|
|
3289
|
-
const containerBottom = containerTop + containerHeight;
|
|
3290
|
-
const elementHeight = element.offsetHeight;
|
|
3291
|
-
const elementTop = element.getBoundingClientRect().top + scrollTop;
|
|
3292
|
-
const elementBottom = elementTop + elementHeight;
|
|
3293
|
-
const newScrollTop = elementTop - containerTop + container.scrollTop;
|
|
3294
|
-
if (elementTop < containerTop) {
|
|
3295
|
-
container.scrollTop = newScrollTop;
|
|
3296
|
-
} else if (elementBottom > containerBottom) {
|
|
3297
|
-
const heightDifference = containerHeight - elementHeight;
|
|
3298
|
-
container.scrollTop = newScrollTop - heightDifference;
|
|
3299
|
-
}
|
|
3300
|
-
}
|
|
3301
3365
|
//* Replace any existing dial code with the new one
|
|
3302
3366
|
//* Note: called from _selectListItem and setCountry
|
|
3303
3367
|
_updateDialCode(newDialCodeBare) {
|
|
3304
|
-
const inputVal = this.telInput.value;
|
|
3368
|
+
const inputVal = this.ui.telInput.value;
|
|
3305
3369
|
const newDialCode = `+${newDialCodeBare}`;
|
|
3306
3370
|
let newNumber;
|
|
3307
|
-
if (inputVal.
|
|
3371
|
+
if (inputVal.startsWith("+")) {
|
|
3308
3372
|
const prevDialCode = this._getDialCode(inputVal);
|
|
3309
3373
|
if (prevDialCode) {
|
|
3310
3374
|
newNumber = inputVal.replace(prevDialCode, newDialCode);
|
|
3311
3375
|
} else {
|
|
3312
3376
|
newNumber = newDialCode;
|
|
3313
3377
|
}
|
|
3314
|
-
this.telInput.value = newNumber;
|
|
3378
|
+
this.ui.telInput.value = newNumber;
|
|
3315
3379
|
}
|
|
3316
3380
|
}
|
|
3317
3381
|
//* Try and extract a valid international dial code from a full telephone number.
|
|
3318
3382
|
//* Note: returns the raw string inc plus character and any whitespace/dots etc.
|
|
3319
3383
|
_getDialCode(number, includeAreaCode) {
|
|
3320
3384
|
let dialCode = "";
|
|
3321
|
-
if (number.
|
|
3385
|
+
if (number.startsWith("+")) {
|
|
3322
3386
|
let numericChars = "";
|
|
3323
3387
|
for (let i = 0; i < number.length; i++) {
|
|
3324
3388
|
const c = number.charAt(i);
|
|
@@ -3344,11 +3408,11 @@ var Iti = class _Iti {
|
|
|
3344
3408
|
}
|
|
3345
3409
|
//* Get the input val, adding the dial code if separateDialCode is enabled.
|
|
3346
3410
|
_getFullNumber(overrideVal) {
|
|
3347
|
-
const val = overrideVal || this.telInput.value.trim();
|
|
3411
|
+
const val = overrideVal || this.ui.telInput.value.trim();
|
|
3348
3412
|
const { dialCode } = this.selectedCountryData;
|
|
3349
3413
|
let prefix;
|
|
3350
3414
|
const numericVal = getNumeric(val);
|
|
3351
|
-
if (this.options.separateDialCode && val.
|
|
3415
|
+
if (this.options.separateDialCode && !val.startsWith("+") && dialCode && numericVal) {
|
|
3352
3416
|
prefix = `+${dialCode}`;
|
|
3353
3417
|
} else {
|
|
3354
3418
|
prefix = "";
|
|
@@ -3372,7 +3436,7 @@ var Iti = class _Iti {
|
|
|
3372
3436
|
handleAutoCountry() {
|
|
3373
3437
|
if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
|
|
3374
3438
|
this.defaultCountry = intlTelInput.autoCountry;
|
|
3375
|
-
const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe");
|
|
3439
|
+
const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.ui.selectedCountryInner.classList.contains("iti__globe");
|
|
3376
3440
|
if (!hasSelectedCountryOrGlobe) {
|
|
3377
3441
|
this.setCountry(this.defaultCountry);
|
|
3378
3442
|
}
|
|
@@ -3382,8 +3446,8 @@ var Iti = class _Iti {
|
|
|
3382
3446
|
//* This is called when the utils request completes.
|
|
3383
3447
|
handleUtils() {
|
|
3384
3448
|
if (intlTelInput.utils) {
|
|
3385
|
-
if (this.telInput.value) {
|
|
3386
|
-
this._updateValFromNumber(this.telInput.value);
|
|
3449
|
+
if (this.ui.telInput.value) {
|
|
3450
|
+
this._updateValFromNumber(this.ui.telInput.value);
|
|
3387
3451
|
}
|
|
3388
3452
|
if (this.selectedCountryData.iso2) {
|
|
3389
3453
|
this._updatePlaceholder();
|
|
@@ -3397,40 +3461,20 @@ var Iti = class _Iti {
|
|
|
3397
3461
|
//********************
|
|
3398
3462
|
//* Remove plugin.
|
|
3399
3463
|
destroy() {
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
const { allowDropdown, separateDialCode } = this.options;
|
|
3403
|
-
if (allowDropdown) {
|
|
3404
|
-
this._closeDropdown();
|
|
3405
|
-
this.selectedCountry.removeEventListener("click", this._handleClickSelectedCountry);
|
|
3406
|
-
this.countryContainer.removeEventListener("keydown", this._handleCountryContainerKeydown);
|
|
3407
|
-
const label = this.telInput.closest("label");
|
|
3408
|
-
if (label) {
|
|
3409
|
-
label.removeEventListener("click", this._handleLabelClick);
|
|
3410
|
-
}
|
|
3411
|
-
}
|
|
3412
|
-
const { form } = this.telInput;
|
|
3413
|
-
if (this._handleHiddenInputSubmit && form) {
|
|
3414
|
-
form.removeEventListener("submit", this._handleHiddenInputSubmit);
|
|
3415
|
-
}
|
|
3416
|
-
this.telInput.removeEventListener("input", this._handleInputEvent);
|
|
3417
|
-
if (this._handleKeydownEvent) {
|
|
3418
|
-
this.telInput.removeEventListener("keydown", this._handleKeydownEvent);
|
|
3419
|
-
}
|
|
3420
|
-
if (this._handlePasteEvent) {
|
|
3421
|
-
this.telInput.removeEventListener("paste", this._handlePasteEvent);
|
|
3464
|
+
if (!this.ui.telInput) {
|
|
3465
|
+
return;
|
|
3422
3466
|
}
|
|
3423
|
-
if (this.
|
|
3424
|
-
|
|
3467
|
+
if (this.options.allowDropdown) {
|
|
3468
|
+
this._closeDropdown();
|
|
3425
3469
|
}
|
|
3426
|
-
this.
|
|
3427
|
-
|
|
3428
|
-
|
|
3470
|
+
this.abortController.abort();
|
|
3471
|
+
this.abortController = null;
|
|
3472
|
+
this.ui.destroy();
|
|
3473
|
+
if (intlTelInput.instances instanceof Map) {
|
|
3474
|
+
intlTelInput.instances.delete(this.id);
|
|
3475
|
+
} else {
|
|
3476
|
+
delete intlTelInput.instances[this.id];
|
|
3429
3477
|
}
|
|
3430
|
-
const wrapper = this.telInput.parentNode;
|
|
3431
|
-
(_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.telInput, wrapper);
|
|
3432
|
-
(_b = wrapper === null || wrapper === void 0 ? void 0 : wrapper.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(wrapper);
|
|
3433
|
-
delete intlTelInput.instances[this.id];
|
|
3434
3478
|
}
|
|
3435
3479
|
//* Get the extension from the current number.
|
|
3436
3480
|
getExtension() {
|
|
@@ -3520,7 +3564,7 @@ var Iti = class _Iti {
|
|
|
3520
3564
|
this._setCountry(iso2Lower);
|
|
3521
3565
|
this._updateDialCode(this.selectedCountryData.dialCode);
|
|
3522
3566
|
if (this.options.formatOnDisplay) {
|
|
3523
|
-
this._updateValFromNumber(this.telInput.value);
|
|
3567
|
+
this._updateValFromNumber(this.ui.telInput.value);
|
|
3524
3568
|
}
|
|
3525
3569
|
this._triggerCountryChange();
|
|
3526
3570
|
}
|
|
@@ -3540,11 +3584,11 @@ var Iti = class _Iti {
|
|
|
3540
3584
|
this._updatePlaceholder();
|
|
3541
3585
|
}
|
|
3542
3586
|
setDisabled(disabled) {
|
|
3543
|
-
this.telInput.disabled = disabled;
|
|
3587
|
+
this.ui.telInput.disabled = disabled;
|
|
3544
3588
|
if (disabled) {
|
|
3545
|
-
this.selectedCountry.setAttribute("disabled", "true");
|
|
3589
|
+
this.ui.selectedCountry.setAttribute("disabled", "true");
|
|
3546
3590
|
} else {
|
|
3547
|
-
this.selectedCountry.removeAttribute("disabled");
|
|
3591
|
+
this.ui.selectedCountry.removeAttribute("disabled");
|
|
3548
3592
|
}
|
|
3549
3593
|
}
|
|
3550
3594
|
};
|
|
@@ -3576,10 +3620,16 @@ var attachUtils = (source) => {
|
|
|
3576
3620
|
}
|
|
3577
3621
|
return null;
|
|
3578
3622
|
};
|
|
3623
|
+
var forEachInstance = (method, ...args) => {
|
|
3624
|
+
Object.values(intlTelInput.instances).forEach((instance) => {
|
|
3625
|
+
const fn = instance[method];
|
|
3626
|
+
if (typeof fn === "function") {
|
|
3627
|
+
fn.apply(instance, args);
|
|
3628
|
+
}
|
|
3629
|
+
});
|
|
3630
|
+
};
|
|
3579
3631
|
var intlTelInput = Object.assign((input, options) => {
|
|
3580
3632
|
const iti = new Iti(input, options);
|
|
3581
|
-
iti._init();
|
|
3582
|
-
input.setAttribute("data-intl-tel-input-id", iti.id.toString());
|
|
3583
3633
|
intlTelInput.instances[iti.id] = iti;
|
|
3584
3634
|
input.iti = iti;
|
|
3585
3635
|
return iti;
|
|
@@ -3591,7 +3641,7 @@ var intlTelInput = Object.assign((input, options) => {
|
|
|
3591
3641
|
getCountryData: () => data_default,
|
|
3592
3642
|
//* A getter for the plugin instance.
|
|
3593
3643
|
getInstance: (input) => {
|
|
3594
|
-
const id2 = input.
|
|
3644
|
+
const id2 = input.dataset.intlTelInputId;
|
|
3595
3645
|
return id2 ? intlTelInput.instances[id2] : null;
|
|
3596
3646
|
},
|
|
3597
3647
|
//* A map from instance ID to instance object.
|
|
@@ -3599,7 +3649,7 @@ var intlTelInput = Object.assign((input, options) => {
|
|
|
3599
3649
|
attachUtils,
|
|
3600
3650
|
startedLoadingUtilsScript: false,
|
|
3601
3651
|
startedLoadingAutoCountry: false,
|
|
3602
|
-
version: "25.
|
|
3652
|
+
version: "25.11.0"
|
|
3603
3653
|
});
|
|
3604
3654
|
var intl_tel_input_default = intlTelInput;
|
|
3605
3655
|
|
|
@@ -6735,7 +6785,7 @@ var intl_tel_input_default = intlTelInput;
|
|
|
6735
6785
|
,
|
|
6736
6786
|
,
|
|
6737
6787
|
[7, 8, 9]
|
|
6738
|
-
], [, , "(?:1(?:0[0-8]|1
|
|
6788
|
+
], [, , "(?:1(?:0[0-8]|1\\d|2[014]|[34]0)|7\\d\\d)\\d{6}", , , , "712123456", , , [9]], [, , "800[02-8]\\d{5,6}", , , , "800223456", , , [9, 10]], [, , "900[02-9]\\d{5}", , , , "900223456", , , [9]], [, , , , , , , , , [-1]], [, , , , , , , , , [-1]], [, , , , , , , , , [-1]], "KE", 254, "000", "0", , , "0", , , , [[, "(\\d{2})(\\d{5,7})", "$1 $2", ["[24-6]"], "0$1"], [, "(\\d{3})(\\d{6})", "$1 $2", ["[17]"], "0$1"], [, "(\\d{3})(\\d{3})(\\d{3,4})", "$1 $2 $3", ["[89]"], "0$1"]], , [, , , , , , , , , [-1]], , , [, , , , , , , , , [-1]], [, , , , , , , , , [-1]], , , [, , , , , , , , , [-1]]],
|
|
6739
6789
|
KG: [, [
|
|
6740
6790
|
,
|
|
6741
6791
|
,
|
|
@@ -8791,7 +8841,7 @@ var intl_tel_input_default = intlTelInput;
|
|
|
8791
8841
|
,
|
|
8792
8842
|
,
|
|
8793
8843
|
[5, 6, 7]
|
|
8794
|
-
], [, , "72[48]0\\d{5}|7(?:[014-8]\\d|2[067]|36|9[
|
|
8844
|
+
], [, , "72[48]0\\d{5}|7(?:[014-8]\\d|2[067]|36|9[0-289])\\d{6}", , , , "712345678"], [, , "800[1-3]\\d{5}", , , , "800123456"], [, , "90[1-3]\\d{6}", , , , "901123456"], [, , , , , , , , , [-1]], [, , , , , , , , , [-1]], [, , , , , , , , , [-1]], "UG", 256, "00[057]", "0", , , "0", , , , [[, "(\\d{4})(\\d{5})", "$1 $2", ["202", "2024"], "0$1"], [, "(\\d{3})(\\d{6})", "$1 $2", ["[27-9]|4(?:6[45]|[7-9])"], "0$1"], [, "(\\d{2})(\\d{7})", "$1 $2", ["[34]"], "0$1"]], , [, , , , , , , , , [-1]], , , [, , , , , , , , , [-1]], [, , , , , , , , , [-1]], , , [, , , , , , , , , [-1]]],
|
|
8795
8845
|
US: [, [
|
|
8796
8846
|
,
|
|
8797
8847
|
,
|
|
@@ -8807,7 +8857,7 @@ var intl_tel_input_default = intlTelInput;
|
|
|
8807
8857
|
], [
|
|
8808
8858
|
,
|
|
8809
8859
|
,
|
|
8810
|
-
"
|
|
8860
|
+
"3052(?:0[0-8]|[1-9]\\d)\\d{4}|(?:2742|305[3-9])\\d{6}|(?:472|983)[2-47-9]\\d{6}|(?:2(?:0[1-35-9]|1[02-9]|2[03-57-9]|3[1459]|4[08]|5[1-46]|6[0279]|7[0269]|8[13])|3(?:0[1-47-9]|1[02-9]|2[0135-79]|3[0-24679]|4[167]|5[0-2]|6[01349]|8[056])|4(?:0[124-9]|1[02-579]|2[3-5]|3[0245]|4[023578]|58|6[349]|7[0589]|8[04])|5(?:0[1-57-9]|1[0235-8]|20|3[0149]|4[01]|5[179]|6[1-47]|7[0-5]|8[0256])|6(?:0[1-35-9]|1[024-9]|2[03689]|3[016]|4[0156]|5[01679]|6[0-279]|78|8[0-269])|7(?:0[1-46-8]|1[2-9]|2[04-8]|3[0-247]|4[0378]|5[47]|6[02359]|7[0-59]|8[156])|8(?:0[1-68]|1[02-8]|2[0168]|3[0-2589]|4[03578]|5[046-9]|6[02-5]|7[028])|9(?:0[1346-9]|1[02-9]|2[0589]|3[0146-8]|4[01357-9]|5[12469]|7[0-3589]|8[04-69]))[2-9]\\d{6}",
|
|
8811
8861
|
,
|
|
8812
8862
|
,
|
|
8813
8863
|
,
|
|
@@ -8819,7 +8869,7 @@ var intl_tel_input_default = intlTelInput;
|
|
|
8819
8869
|
], [
|
|
8820
8870
|
,
|
|
8821
8871
|
,
|
|
8822
|
-
"
|
|
8872
|
+
"3052(?:0[0-8]|[1-9]\\d)\\d{4}|(?:2742|305[3-9])\\d{6}|(?:472|983)[2-47-9]\\d{6}|(?:2(?:0[1-35-9]|1[02-9]|2[03-57-9]|3[1459]|4[08]|5[1-46]|6[0279]|7[0269]|8[13])|3(?:0[1-47-9]|1[02-9]|2[0135-79]|3[0-24679]|4[167]|5[0-2]|6[01349]|8[056])|4(?:0[124-9]|1[02-579]|2[3-5]|3[0245]|4[023578]|58|6[349]|7[0589]|8[04])|5(?:0[1-57-9]|1[0235-8]|20|3[0149]|4[01]|5[179]|6[1-47]|7[0-5]|8[0256])|6(?:0[1-35-9]|1[024-9]|2[03689]|3[016]|4[0156]|5[01679]|6[0-279]|78|8[0-269])|7(?:0[1-46-8]|1[2-9]|2[04-8]|3[0-247]|4[0378]|5[47]|6[02359]|7[0-59]|8[156])|8(?:0[1-68]|1[02-8]|2[0168]|3[0-2589]|4[03578]|5[046-9]|6[02-5]|7[028])|9(?:0[1346-9]|1[02-9]|2[0589]|3[0146-8]|4[01357-9]|5[12469]|7[0-3589]|8[04-69]))[2-9]\\d{6}",
|
|
8823
8873
|
,
|
|
8824
8874
|
,
|
|
8825
8875
|
,
|