intl-tel-input 25.0.0 → 25.0.2
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 +9 -9
- package/build/js/data.js +3 -3
- package/build/js/data.min.js +2 -2
- package/build/js/intlTelInput.d.ts +5 -1
- package/build/js/intlTelInput.js +58 -19
- package/build/js/intlTelInput.min.js +2 -2
- package/build/js/intlTelInputWithUtils.js +58 -19
- package/build/js/intlTelInputWithUtils.min.js +2 -2
- package/package.json +1 -1
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +57 -18
- package/react/build/IntlTelInput.d.ts +5 -1
- package/react/build/IntlTelInput.js +57 -18
- package/react/build/IntlTelInputWithUtils.cjs +57 -18
- package/react/build/IntlTelInputWithUtils.js +57 -18
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +327 -314
- package/vue/build/IntlTelInputWithUtils.mjs +450 -437
package/package.json
CHANGED
package/react/README.md
CHANGED
|
@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
|
|
|
28
28
|
|
|
29
29
|
See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
|
|
30
30
|
|
|
31
|
-
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `
|
|
31
|
+
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.0.2/build/js/utils.js"`.
|
|
32
32
|
|
|
33
33
|
## Props
|
|
34
34
|
Here's a list of all of the current props you can pass to the IntlTelInput React component.
|
|
@@ -45,8 +45,7 @@ var rawCountryData = [
|
|
|
45
45
|
"ax",
|
|
46
46
|
// Åland Islands
|
|
47
47
|
"358",
|
|
48
|
-
1
|
|
49
|
-
["18"]
|
|
48
|
+
1
|
|
50
49
|
],
|
|
51
50
|
[
|
|
52
51
|
"al",
|
|
@@ -1352,6 +1351,7 @@ for (let i = 0; i < rawCountryData.length; i++) {
|
|
|
1352
1351
|
dialCode: c[1],
|
|
1353
1352
|
priority: c[2] || 0,
|
|
1354
1353
|
areaCodes: c[3] || null,
|
|
1354
|
+
partialAreaCodes: null,
|
|
1355
1355
|
nodeById: {}
|
|
1356
1356
|
};
|
|
1357
1357
|
}
|
|
@@ -1876,7 +1876,7 @@ var Iti = class {
|
|
|
1876
1876
|
}
|
|
1877
1877
|
}
|
|
1878
1878
|
}
|
|
1879
|
-
//* Generate this.dialCodes and this.dialCodeToIso2Map.
|
|
1879
|
+
//* Generate this.dialCodes and this.dialCodeToIso2Map and country.partialAreaCodes.
|
|
1880
1880
|
_processDialCodes() {
|
|
1881
1881
|
this.dialCodes = {};
|
|
1882
1882
|
this.dialCodeMaxLen = 0;
|
|
@@ -1895,9 +1895,16 @@ var Iti = class {
|
|
|
1895
1895
|
for (let j = 0; j < c.areaCodes.length; j++) {
|
|
1896
1896
|
const areaCode = c.areaCodes[j];
|
|
1897
1897
|
for (let k = 1; k < areaCode.length; k++) {
|
|
1898
|
-
const
|
|
1898
|
+
const partialAreaCode = areaCode.substr(0, k);
|
|
1899
|
+
const partialDialCode = c.dialCode + partialAreaCode;
|
|
1899
1900
|
this._addToDialCodeMap(rootIso2Code, partialDialCode);
|
|
1900
1901
|
this._addToDialCodeMap(c.iso2, partialDialCode);
|
|
1902
|
+
if (!c.partialAreaCodes) {
|
|
1903
|
+
c.partialAreaCodes = [];
|
|
1904
|
+
}
|
|
1905
|
+
if (!c.partialAreaCodes.includes(partialAreaCode)) {
|
|
1906
|
+
c.partialAreaCodes.push(partialAreaCode);
|
|
1907
|
+
}
|
|
1901
1908
|
}
|
|
1902
1909
|
this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
|
|
1903
1910
|
}
|
|
@@ -2055,18 +2062,28 @@ var Iti = class {
|
|
|
2055
2062
|
const telInputName = this.telInput.getAttribute("name") || "";
|
|
2056
2063
|
const names = hiddenInput(telInputName);
|
|
2057
2064
|
if (names.phone) {
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
}
|
|
2062
|
-
|
|
2065
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.phone}"]`);
|
|
2066
|
+
if (existingInput) {
|
|
2067
|
+
this.hiddenInput = existingInput;
|
|
2068
|
+
} else {
|
|
2069
|
+
this.hiddenInput = createEl("input", {
|
|
2070
|
+
type: "hidden",
|
|
2071
|
+
name: names.phone
|
|
2072
|
+
});
|
|
2073
|
+
wrapper.appendChild(this.hiddenInput);
|
|
2074
|
+
}
|
|
2063
2075
|
}
|
|
2064
2076
|
if (names.country) {
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
}
|
|
2069
|
-
|
|
2077
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.country}"]`);
|
|
2078
|
+
if (existingInput) {
|
|
2079
|
+
this.hiddenInputCountry = existingInput;
|
|
2080
|
+
} else {
|
|
2081
|
+
this.hiddenInputCountry = createEl("input", {
|
|
2082
|
+
type: "hidden",
|
|
2083
|
+
name: names.country
|
|
2084
|
+
});
|
|
2085
|
+
wrapper.appendChild(this.hiddenInputCountry);
|
|
2086
|
+
}
|
|
2070
2087
|
}
|
|
2071
2088
|
}
|
|
2072
2089
|
}
|
|
@@ -2545,6 +2562,19 @@ var Iti = class {
|
|
|
2545
2562
|
}
|
|
2546
2563
|
return false;
|
|
2547
2564
|
}
|
|
2565
|
+
//* Check if the given number matches an area code from the selected country.
|
|
2566
|
+
_isAreaCodeMatch(numeric, dialCodeNumerics) {
|
|
2567
|
+
const { areaCodes, partialAreaCodes, dialCode } = this.selectedCountryData;
|
|
2568
|
+
const typedNumber = numeric.substring(dialCode.length);
|
|
2569
|
+
const typedAreaCode = dialCodeNumerics.substring(dialCode.length);
|
|
2570
|
+
if (areaCodes.includes(typedAreaCode)) {
|
|
2571
|
+
return true;
|
|
2572
|
+
}
|
|
2573
|
+
if (partialAreaCodes.includes(typedNumber)) {
|
|
2574
|
+
return true;
|
|
2575
|
+
}
|
|
2576
|
+
return false;
|
|
2577
|
+
}
|
|
2548
2578
|
_getCountryFromNumber(fullNumber) {
|
|
2549
2579
|
const plusIndex = fullNumber.indexOf("+");
|
|
2550
2580
|
let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
|
|
@@ -2562,10 +2592,19 @@ var Iti = class {
|
|
|
2562
2592
|
const dialCode = this._getDialCode(number, true);
|
|
2563
2593
|
const numeric = getNumeric(number);
|
|
2564
2594
|
if (dialCode) {
|
|
2565
|
-
const
|
|
2566
|
-
const
|
|
2595
|
+
const dialCodeNumerics = getNumeric(dialCode);
|
|
2596
|
+
const iso2Codes = this.dialCodeToIso2Map[dialCodeNumerics];
|
|
2597
|
+
const alreadySelected = this.selectedCountryData.iso2 && iso2Codes.includes(this.selectedCountryData.iso2);
|
|
2598
|
+
let areaCodeMatch = false;
|
|
2599
|
+
if (alreadySelected) {
|
|
2600
|
+
if (this.selectedCountryData.areaCodes && numeric.length > selectedDialCode.length) {
|
|
2601
|
+
areaCodeMatch = this._isAreaCodeMatch(numeric, dialCodeNumerics);
|
|
2602
|
+
} else {
|
|
2603
|
+
areaCodeMatch = true;
|
|
2604
|
+
}
|
|
2605
|
+
}
|
|
2567
2606
|
const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
|
|
2568
|
-
if (!isRegionlessNanpNumber && !alreadySelected) {
|
|
2607
|
+
if (!isRegionlessNanpNumber && (!alreadySelected || !areaCodeMatch)) {
|
|
2569
2608
|
for (let j = 0; j < iso2Codes.length; j++) {
|
|
2570
2609
|
if (iso2Codes[j]) {
|
|
2571
2610
|
return iso2Codes[j];
|
|
@@ -3129,7 +3168,7 @@ var intlTelInput = Object.assign(
|
|
|
3129
3168
|
attachUtils,
|
|
3130
3169
|
startedLoadingUtilsScript: false,
|
|
3131
3170
|
startedLoadingAutoCountry: false,
|
|
3132
|
-
version: "25.0.
|
|
3171
|
+
version: "25.0.2"
|
|
3133
3172
|
}
|
|
3134
3173
|
);
|
|
3135
3174
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -5,6 +5,7 @@ declare module "intl-tel-input/data" {
|
|
|
5
5
|
dialCode: string;
|
|
6
6
|
priority: number;
|
|
7
7
|
areaCodes: string[] | null;
|
|
8
|
+
partialAreaCodes: string[] | null;
|
|
8
9
|
nodeById: object;
|
|
9
10
|
};
|
|
10
11
|
const allCountries: Country[];
|
|
@@ -324,10 +325,12 @@ declare module "intl-tel-input" {
|
|
|
324
325
|
numberType: object;
|
|
325
326
|
};
|
|
326
327
|
type NumberType = "FIXED_LINE_OR_MOBILE" | "FIXED_LINE" | "MOBILE" | "PAGER" | "PERSONAL_NUMBER" | "PREMIUM_RATE" | "SHARED_COST" | "TOLL_FREE" | "UAN" | "UNKNOWN" | "VOICEMAIL" | "VOIP";
|
|
327
|
-
type SelectedCountryData =
|
|
328
|
+
type SelectedCountryData = {
|
|
328
329
|
name?: string;
|
|
329
330
|
iso2?: string;
|
|
330
331
|
dialCode?: string;
|
|
332
|
+
areaCodes?: string[];
|
|
333
|
+
partialAreaCodes?: string[];
|
|
331
334
|
};
|
|
332
335
|
interface AllOptions {
|
|
333
336
|
allowDropdown: boolean;
|
|
@@ -438,6 +441,7 @@ declare module "intl-tel-input" {
|
|
|
438
441
|
private _handleEnterKey;
|
|
439
442
|
private _updateValFromNumber;
|
|
440
443
|
private _updateCountryFromNumber;
|
|
444
|
+
private _isAreaCodeMatch;
|
|
441
445
|
private _getCountryFromNumber;
|
|
442
446
|
private _highlightListItem;
|
|
443
447
|
private _getCountryData;
|
|
@@ -9,8 +9,7 @@ var rawCountryData = [
|
|
|
9
9
|
"ax",
|
|
10
10
|
// Åland Islands
|
|
11
11
|
"358",
|
|
12
|
-
1
|
|
13
|
-
["18"]
|
|
12
|
+
1
|
|
14
13
|
],
|
|
15
14
|
[
|
|
16
15
|
"al",
|
|
@@ -1316,6 +1315,7 @@ for (let i = 0; i < rawCountryData.length; i++) {
|
|
|
1316
1315
|
dialCode: c[1],
|
|
1317
1316
|
priority: c[2] || 0,
|
|
1318
1317
|
areaCodes: c[3] || null,
|
|
1318
|
+
partialAreaCodes: null,
|
|
1319
1319
|
nodeById: {}
|
|
1320
1320
|
};
|
|
1321
1321
|
}
|
|
@@ -1840,7 +1840,7 @@ var Iti = class {
|
|
|
1840
1840
|
}
|
|
1841
1841
|
}
|
|
1842
1842
|
}
|
|
1843
|
-
//* Generate this.dialCodes and this.dialCodeToIso2Map.
|
|
1843
|
+
//* Generate this.dialCodes and this.dialCodeToIso2Map and country.partialAreaCodes.
|
|
1844
1844
|
_processDialCodes() {
|
|
1845
1845
|
this.dialCodes = {};
|
|
1846
1846
|
this.dialCodeMaxLen = 0;
|
|
@@ -1859,9 +1859,16 @@ var Iti = class {
|
|
|
1859
1859
|
for (let j = 0; j < c.areaCodes.length; j++) {
|
|
1860
1860
|
const areaCode = c.areaCodes[j];
|
|
1861
1861
|
for (let k = 1; k < areaCode.length; k++) {
|
|
1862
|
-
const
|
|
1862
|
+
const partialAreaCode = areaCode.substr(0, k);
|
|
1863
|
+
const partialDialCode = c.dialCode + partialAreaCode;
|
|
1863
1864
|
this._addToDialCodeMap(rootIso2Code, partialDialCode);
|
|
1864
1865
|
this._addToDialCodeMap(c.iso2, partialDialCode);
|
|
1866
|
+
if (!c.partialAreaCodes) {
|
|
1867
|
+
c.partialAreaCodes = [];
|
|
1868
|
+
}
|
|
1869
|
+
if (!c.partialAreaCodes.includes(partialAreaCode)) {
|
|
1870
|
+
c.partialAreaCodes.push(partialAreaCode);
|
|
1871
|
+
}
|
|
1865
1872
|
}
|
|
1866
1873
|
this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
|
|
1867
1874
|
}
|
|
@@ -2019,18 +2026,28 @@ var Iti = class {
|
|
|
2019
2026
|
const telInputName = this.telInput.getAttribute("name") || "";
|
|
2020
2027
|
const names = hiddenInput(telInputName);
|
|
2021
2028
|
if (names.phone) {
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
}
|
|
2026
|
-
|
|
2029
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.phone}"]`);
|
|
2030
|
+
if (existingInput) {
|
|
2031
|
+
this.hiddenInput = existingInput;
|
|
2032
|
+
} else {
|
|
2033
|
+
this.hiddenInput = createEl("input", {
|
|
2034
|
+
type: "hidden",
|
|
2035
|
+
name: names.phone
|
|
2036
|
+
});
|
|
2037
|
+
wrapper.appendChild(this.hiddenInput);
|
|
2038
|
+
}
|
|
2027
2039
|
}
|
|
2028
2040
|
if (names.country) {
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
}
|
|
2033
|
-
|
|
2041
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.country}"]`);
|
|
2042
|
+
if (existingInput) {
|
|
2043
|
+
this.hiddenInputCountry = existingInput;
|
|
2044
|
+
} else {
|
|
2045
|
+
this.hiddenInputCountry = createEl("input", {
|
|
2046
|
+
type: "hidden",
|
|
2047
|
+
name: names.country
|
|
2048
|
+
});
|
|
2049
|
+
wrapper.appendChild(this.hiddenInputCountry);
|
|
2050
|
+
}
|
|
2034
2051
|
}
|
|
2035
2052
|
}
|
|
2036
2053
|
}
|
|
@@ -2509,6 +2526,19 @@ var Iti = class {
|
|
|
2509
2526
|
}
|
|
2510
2527
|
return false;
|
|
2511
2528
|
}
|
|
2529
|
+
//* Check if the given number matches an area code from the selected country.
|
|
2530
|
+
_isAreaCodeMatch(numeric, dialCodeNumerics) {
|
|
2531
|
+
const { areaCodes, partialAreaCodes, dialCode } = this.selectedCountryData;
|
|
2532
|
+
const typedNumber = numeric.substring(dialCode.length);
|
|
2533
|
+
const typedAreaCode = dialCodeNumerics.substring(dialCode.length);
|
|
2534
|
+
if (areaCodes.includes(typedAreaCode)) {
|
|
2535
|
+
return true;
|
|
2536
|
+
}
|
|
2537
|
+
if (partialAreaCodes.includes(typedNumber)) {
|
|
2538
|
+
return true;
|
|
2539
|
+
}
|
|
2540
|
+
return false;
|
|
2541
|
+
}
|
|
2512
2542
|
_getCountryFromNumber(fullNumber) {
|
|
2513
2543
|
const plusIndex = fullNumber.indexOf("+");
|
|
2514
2544
|
let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
|
|
@@ -2526,10 +2556,19 @@ var Iti = class {
|
|
|
2526
2556
|
const dialCode = this._getDialCode(number, true);
|
|
2527
2557
|
const numeric = getNumeric(number);
|
|
2528
2558
|
if (dialCode) {
|
|
2529
|
-
const
|
|
2530
|
-
const
|
|
2559
|
+
const dialCodeNumerics = getNumeric(dialCode);
|
|
2560
|
+
const iso2Codes = this.dialCodeToIso2Map[dialCodeNumerics];
|
|
2561
|
+
const alreadySelected = this.selectedCountryData.iso2 && iso2Codes.includes(this.selectedCountryData.iso2);
|
|
2562
|
+
let areaCodeMatch = false;
|
|
2563
|
+
if (alreadySelected) {
|
|
2564
|
+
if (this.selectedCountryData.areaCodes && numeric.length > selectedDialCode.length) {
|
|
2565
|
+
areaCodeMatch = this._isAreaCodeMatch(numeric, dialCodeNumerics);
|
|
2566
|
+
} else {
|
|
2567
|
+
areaCodeMatch = true;
|
|
2568
|
+
}
|
|
2569
|
+
}
|
|
2531
2570
|
const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
|
|
2532
|
-
if (!isRegionlessNanpNumber && !alreadySelected) {
|
|
2571
|
+
if (!isRegionlessNanpNumber && (!alreadySelected || !areaCodeMatch)) {
|
|
2533
2572
|
for (let j = 0; j < iso2Codes.length; j++) {
|
|
2534
2573
|
if (iso2Codes[j]) {
|
|
2535
2574
|
return iso2Codes[j];
|
|
@@ -3093,7 +3132,7 @@ var intlTelInput = Object.assign(
|
|
|
3093
3132
|
attachUtils,
|
|
3094
3133
|
startedLoadingUtilsScript: false,
|
|
3095
3134
|
startedLoadingAutoCountry: false,
|
|
3096
|
-
version: "25.0.
|
|
3135
|
+
version: "25.0.2"
|
|
3097
3136
|
}
|
|
3098
3137
|
);
|
|
3099
3138
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -45,8 +45,7 @@ var rawCountryData = [
|
|
|
45
45
|
"ax",
|
|
46
46
|
// Åland Islands
|
|
47
47
|
"358",
|
|
48
|
-
1
|
|
49
|
-
["18"]
|
|
48
|
+
1
|
|
50
49
|
],
|
|
51
50
|
[
|
|
52
51
|
"al",
|
|
@@ -1352,6 +1351,7 @@ for (let i = 0; i < rawCountryData.length; i++) {
|
|
|
1352
1351
|
dialCode: c[1],
|
|
1353
1352
|
priority: c[2] || 0,
|
|
1354
1353
|
areaCodes: c[3] || null,
|
|
1354
|
+
partialAreaCodes: null,
|
|
1355
1355
|
nodeById: {}
|
|
1356
1356
|
};
|
|
1357
1357
|
}
|
|
@@ -1876,7 +1876,7 @@ var Iti = class {
|
|
|
1876
1876
|
}
|
|
1877
1877
|
}
|
|
1878
1878
|
}
|
|
1879
|
-
//* Generate this.dialCodes and this.dialCodeToIso2Map.
|
|
1879
|
+
//* Generate this.dialCodes and this.dialCodeToIso2Map and country.partialAreaCodes.
|
|
1880
1880
|
_processDialCodes() {
|
|
1881
1881
|
this.dialCodes = {};
|
|
1882
1882
|
this.dialCodeMaxLen = 0;
|
|
@@ -1895,9 +1895,16 @@ var Iti = class {
|
|
|
1895
1895
|
for (let j = 0; j < c.areaCodes.length; j++) {
|
|
1896
1896
|
const areaCode = c.areaCodes[j];
|
|
1897
1897
|
for (let k = 1; k < areaCode.length; k++) {
|
|
1898
|
-
const
|
|
1898
|
+
const partialAreaCode = areaCode.substr(0, k);
|
|
1899
|
+
const partialDialCode = c.dialCode + partialAreaCode;
|
|
1899
1900
|
this._addToDialCodeMap(rootIso2Code, partialDialCode);
|
|
1900
1901
|
this._addToDialCodeMap(c.iso2, partialDialCode);
|
|
1902
|
+
if (!c.partialAreaCodes) {
|
|
1903
|
+
c.partialAreaCodes = [];
|
|
1904
|
+
}
|
|
1905
|
+
if (!c.partialAreaCodes.includes(partialAreaCode)) {
|
|
1906
|
+
c.partialAreaCodes.push(partialAreaCode);
|
|
1907
|
+
}
|
|
1901
1908
|
}
|
|
1902
1909
|
this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
|
|
1903
1910
|
}
|
|
@@ -2055,18 +2062,28 @@ var Iti = class {
|
|
|
2055
2062
|
const telInputName = this.telInput.getAttribute("name") || "";
|
|
2056
2063
|
const names = hiddenInput(telInputName);
|
|
2057
2064
|
if (names.phone) {
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
}
|
|
2062
|
-
|
|
2065
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.phone}"]`);
|
|
2066
|
+
if (existingInput) {
|
|
2067
|
+
this.hiddenInput = existingInput;
|
|
2068
|
+
} else {
|
|
2069
|
+
this.hiddenInput = createEl("input", {
|
|
2070
|
+
type: "hidden",
|
|
2071
|
+
name: names.phone
|
|
2072
|
+
});
|
|
2073
|
+
wrapper.appendChild(this.hiddenInput);
|
|
2074
|
+
}
|
|
2063
2075
|
}
|
|
2064
2076
|
if (names.country) {
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
}
|
|
2069
|
-
|
|
2077
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.country}"]`);
|
|
2078
|
+
if (existingInput) {
|
|
2079
|
+
this.hiddenInputCountry = existingInput;
|
|
2080
|
+
} else {
|
|
2081
|
+
this.hiddenInputCountry = createEl("input", {
|
|
2082
|
+
type: "hidden",
|
|
2083
|
+
name: names.country
|
|
2084
|
+
});
|
|
2085
|
+
wrapper.appendChild(this.hiddenInputCountry);
|
|
2086
|
+
}
|
|
2070
2087
|
}
|
|
2071
2088
|
}
|
|
2072
2089
|
}
|
|
@@ -2545,6 +2562,19 @@ var Iti = class {
|
|
|
2545
2562
|
}
|
|
2546
2563
|
return false;
|
|
2547
2564
|
}
|
|
2565
|
+
//* Check if the given number matches an area code from the selected country.
|
|
2566
|
+
_isAreaCodeMatch(numeric, dialCodeNumerics) {
|
|
2567
|
+
const { areaCodes, partialAreaCodes, dialCode } = this.selectedCountryData;
|
|
2568
|
+
const typedNumber = numeric.substring(dialCode.length);
|
|
2569
|
+
const typedAreaCode = dialCodeNumerics.substring(dialCode.length);
|
|
2570
|
+
if (areaCodes.includes(typedAreaCode)) {
|
|
2571
|
+
return true;
|
|
2572
|
+
}
|
|
2573
|
+
if (partialAreaCodes.includes(typedNumber)) {
|
|
2574
|
+
return true;
|
|
2575
|
+
}
|
|
2576
|
+
return false;
|
|
2577
|
+
}
|
|
2548
2578
|
_getCountryFromNumber(fullNumber) {
|
|
2549
2579
|
const plusIndex = fullNumber.indexOf("+");
|
|
2550
2580
|
let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
|
|
@@ -2562,10 +2592,19 @@ var Iti = class {
|
|
|
2562
2592
|
const dialCode = this._getDialCode(number, true);
|
|
2563
2593
|
const numeric = getNumeric(number);
|
|
2564
2594
|
if (dialCode) {
|
|
2565
|
-
const
|
|
2566
|
-
const
|
|
2595
|
+
const dialCodeNumerics = getNumeric(dialCode);
|
|
2596
|
+
const iso2Codes = this.dialCodeToIso2Map[dialCodeNumerics];
|
|
2597
|
+
const alreadySelected = this.selectedCountryData.iso2 && iso2Codes.includes(this.selectedCountryData.iso2);
|
|
2598
|
+
let areaCodeMatch = false;
|
|
2599
|
+
if (alreadySelected) {
|
|
2600
|
+
if (this.selectedCountryData.areaCodes && numeric.length > selectedDialCode.length) {
|
|
2601
|
+
areaCodeMatch = this._isAreaCodeMatch(numeric, dialCodeNumerics);
|
|
2602
|
+
} else {
|
|
2603
|
+
areaCodeMatch = true;
|
|
2604
|
+
}
|
|
2605
|
+
}
|
|
2567
2606
|
const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
|
|
2568
|
-
if (!isRegionlessNanpNumber && !alreadySelected) {
|
|
2607
|
+
if (!isRegionlessNanpNumber && (!alreadySelected || !areaCodeMatch)) {
|
|
2569
2608
|
for (let j = 0; j < iso2Codes.length; j++) {
|
|
2570
2609
|
if (iso2Codes[j]) {
|
|
2571
2610
|
return iso2Codes[j];
|
|
@@ -3129,7 +3168,7 @@ var intlTelInput = Object.assign(
|
|
|
3129
3168
|
attachUtils,
|
|
3130
3169
|
startedLoadingUtilsScript: false,
|
|
3131
3170
|
startedLoadingAutoCountry: false,
|
|
3132
|
-
version: "25.0.
|
|
3171
|
+
version: "25.0.2"
|
|
3133
3172
|
}
|
|
3134
3173
|
);
|
|
3135
3174
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -9,8 +9,7 @@ var rawCountryData = [
|
|
|
9
9
|
"ax",
|
|
10
10
|
// Åland Islands
|
|
11
11
|
"358",
|
|
12
|
-
1
|
|
13
|
-
["18"]
|
|
12
|
+
1
|
|
14
13
|
],
|
|
15
14
|
[
|
|
16
15
|
"al",
|
|
@@ -1316,6 +1315,7 @@ for (let i = 0; i < rawCountryData.length; i++) {
|
|
|
1316
1315
|
dialCode: c[1],
|
|
1317
1316
|
priority: c[2] || 0,
|
|
1318
1317
|
areaCodes: c[3] || null,
|
|
1318
|
+
partialAreaCodes: null,
|
|
1319
1319
|
nodeById: {}
|
|
1320
1320
|
};
|
|
1321
1321
|
}
|
|
@@ -1840,7 +1840,7 @@ var Iti = class {
|
|
|
1840
1840
|
}
|
|
1841
1841
|
}
|
|
1842
1842
|
}
|
|
1843
|
-
//* Generate this.dialCodes and this.dialCodeToIso2Map.
|
|
1843
|
+
//* Generate this.dialCodes and this.dialCodeToIso2Map and country.partialAreaCodes.
|
|
1844
1844
|
_processDialCodes() {
|
|
1845
1845
|
this.dialCodes = {};
|
|
1846
1846
|
this.dialCodeMaxLen = 0;
|
|
@@ -1859,9 +1859,16 @@ var Iti = class {
|
|
|
1859
1859
|
for (let j = 0; j < c.areaCodes.length; j++) {
|
|
1860
1860
|
const areaCode = c.areaCodes[j];
|
|
1861
1861
|
for (let k = 1; k < areaCode.length; k++) {
|
|
1862
|
-
const
|
|
1862
|
+
const partialAreaCode = areaCode.substr(0, k);
|
|
1863
|
+
const partialDialCode = c.dialCode + partialAreaCode;
|
|
1863
1864
|
this._addToDialCodeMap(rootIso2Code, partialDialCode);
|
|
1864
1865
|
this._addToDialCodeMap(c.iso2, partialDialCode);
|
|
1866
|
+
if (!c.partialAreaCodes) {
|
|
1867
|
+
c.partialAreaCodes = [];
|
|
1868
|
+
}
|
|
1869
|
+
if (!c.partialAreaCodes.includes(partialAreaCode)) {
|
|
1870
|
+
c.partialAreaCodes.push(partialAreaCode);
|
|
1871
|
+
}
|
|
1865
1872
|
}
|
|
1866
1873
|
this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
|
|
1867
1874
|
}
|
|
@@ -2019,18 +2026,28 @@ var Iti = class {
|
|
|
2019
2026
|
const telInputName = this.telInput.getAttribute("name") || "";
|
|
2020
2027
|
const names = hiddenInput(telInputName);
|
|
2021
2028
|
if (names.phone) {
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
}
|
|
2026
|
-
|
|
2029
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.phone}"]`);
|
|
2030
|
+
if (existingInput) {
|
|
2031
|
+
this.hiddenInput = existingInput;
|
|
2032
|
+
} else {
|
|
2033
|
+
this.hiddenInput = createEl("input", {
|
|
2034
|
+
type: "hidden",
|
|
2035
|
+
name: names.phone
|
|
2036
|
+
});
|
|
2037
|
+
wrapper.appendChild(this.hiddenInput);
|
|
2038
|
+
}
|
|
2027
2039
|
}
|
|
2028
2040
|
if (names.country) {
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
}
|
|
2033
|
-
|
|
2041
|
+
const existingInput = this.telInput.form?.querySelector(`input[name="${names.country}"]`);
|
|
2042
|
+
if (existingInput) {
|
|
2043
|
+
this.hiddenInputCountry = existingInput;
|
|
2044
|
+
} else {
|
|
2045
|
+
this.hiddenInputCountry = createEl("input", {
|
|
2046
|
+
type: "hidden",
|
|
2047
|
+
name: names.country
|
|
2048
|
+
});
|
|
2049
|
+
wrapper.appendChild(this.hiddenInputCountry);
|
|
2050
|
+
}
|
|
2034
2051
|
}
|
|
2035
2052
|
}
|
|
2036
2053
|
}
|
|
@@ -2509,6 +2526,19 @@ var Iti = class {
|
|
|
2509
2526
|
}
|
|
2510
2527
|
return false;
|
|
2511
2528
|
}
|
|
2529
|
+
//* Check if the given number matches an area code from the selected country.
|
|
2530
|
+
_isAreaCodeMatch(numeric, dialCodeNumerics) {
|
|
2531
|
+
const { areaCodes, partialAreaCodes, dialCode } = this.selectedCountryData;
|
|
2532
|
+
const typedNumber = numeric.substring(dialCode.length);
|
|
2533
|
+
const typedAreaCode = dialCodeNumerics.substring(dialCode.length);
|
|
2534
|
+
if (areaCodes.includes(typedAreaCode)) {
|
|
2535
|
+
return true;
|
|
2536
|
+
}
|
|
2537
|
+
if (partialAreaCodes.includes(typedNumber)) {
|
|
2538
|
+
return true;
|
|
2539
|
+
}
|
|
2540
|
+
return false;
|
|
2541
|
+
}
|
|
2512
2542
|
_getCountryFromNumber(fullNumber) {
|
|
2513
2543
|
const plusIndex = fullNumber.indexOf("+");
|
|
2514
2544
|
let number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
|
|
@@ -2526,10 +2556,19 @@ var Iti = class {
|
|
|
2526
2556
|
const dialCode = this._getDialCode(number, true);
|
|
2527
2557
|
const numeric = getNumeric(number);
|
|
2528
2558
|
if (dialCode) {
|
|
2529
|
-
const
|
|
2530
|
-
const
|
|
2559
|
+
const dialCodeNumerics = getNumeric(dialCode);
|
|
2560
|
+
const iso2Codes = this.dialCodeToIso2Map[dialCodeNumerics];
|
|
2561
|
+
const alreadySelected = this.selectedCountryData.iso2 && iso2Codes.includes(this.selectedCountryData.iso2);
|
|
2562
|
+
let areaCodeMatch = false;
|
|
2563
|
+
if (alreadySelected) {
|
|
2564
|
+
if (this.selectedCountryData.areaCodes && numeric.length > selectedDialCode.length) {
|
|
2565
|
+
areaCodeMatch = this._isAreaCodeMatch(numeric, dialCodeNumerics);
|
|
2566
|
+
} else {
|
|
2567
|
+
areaCodeMatch = true;
|
|
2568
|
+
}
|
|
2569
|
+
}
|
|
2531
2570
|
const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
|
|
2532
|
-
if (!isRegionlessNanpNumber && !alreadySelected) {
|
|
2571
|
+
if (!isRegionlessNanpNumber && (!alreadySelected || !areaCodeMatch)) {
|
|
2533
2572
|
for (let j = 0; j < iso2Codes.length; j++) {
|
|
2534
2573
|
if (iso2Codes[j]) {
|
|
2535
2574
|
return iso2Codes[j];
|
|
@@ -3093,7 +3132,7 @@ var intlTelInput = Object.assign(
|
|
|
3093
3132
|
attachUtils,
|
|
3094
3133
|
startedLoadingUtilsScript: false,
|
|
3095
3134
|
startedLoadingAutoCountry: false,
|
|
3096
|
-
version: "25.0.
|
|
3135
|
+
version: "25.0.2"
|
|
3097
3136
|
}
|
|
3098
3137
|
);
|
|
3099
3138
|
var intl_tel_input_default = intlTelInput;
|
package/vue/README.md
CHANGED
|
@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
|
|
|
34
34
|
"vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `
|
|
37
|
+
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.0.2/build/js/utils.js"`.
|
|
38
38
|
|
|
39
39
|
## Props
|
|
40
40
|
Here's a list of all of the current props you can pass to the IntlTelInput Vue component.
|