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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intl-tel-input",
3
- "version": "25.0.0",
3
+ "version": "25.0.2",
4
4
  "description": "A JavaScript plugin for entering and validating international telephone numbers",
5
5
  "keywords": [
6
6
  "international",
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 `utilsScript` 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 `utilsScript` 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.0/build/js/utils.js"`.
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 partialDialCode = c.dialCode + areaCode.substr(0, k);
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
- this.hiddenInput = createEl("input", {
2059
- type: "hidden",
2060
- name: names.phone
2061
- });
2062
- wrapper.appendChild(this.hiddenInput);
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
- this.hiddenInputCountry = createEl("input", {
2066
- type: "hidden",
2067
- name: names.country
2068
- });
2069
- wrapper.appendChild(this.hiddenInputCountry);
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 iso2Codes = this.dialCodeToIso2Map[getNumeric(dialCode)];
2566
- const alreadySelected = iso2Codes.indexOf(this.selectedCountryData.iso2) !== -1 && numeric.length <= dialCode.length - 1;
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.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 = Country | {
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 partialDialCode = c.dialCode + areaCode.substr(0, k);
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
- this.hiddenInput = createEl("input", {
2023
- type: "hidden",
2024
- name: names.phone
2025
- });
2026
- wrapper.appendChild(this.hiddenInput);
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
- this.hiddenInputCountry = createEl("input", {
2030
- type: "hidden",
2031
- name: names.country
2032
- });
2033
- wrapper.appendChild(this.hiddenInputCountry);
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 iso2Codes = this.dialCodeToIso2Map[getNumeric(dialCode)];
2530
- const alreadySelected = iso2Codes.indexOf(this.selectedCountryData.iso2) !== -1 && numeric.length <= dialCode.length - 1;
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.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 partialDialCode = c.dialCode + areaCode.substr(0, k);
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
- this.hiddenInput = createEl("input", {
2059
- type: "hidden",
2060
- name: names.phone
2061
- });
2062
- wrapper.appendChild(this.hiddenInput);
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
- this.hiddenInputCountry = createEl("input", {
2066
- type: "hidden",
2067
- name: names.country
2068
- });
2069
- wrapper.appendChild(this.hiddenInputCountry);
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 iso2Codes = this.dialCodeToIso2Map[getNumeric(dialCode)];
2566
- const alreadySelected = iso2Codes.indexOf(this.selectedCountryData.iso2) !== -1 && numeric.length <= dialCode.length - 1;
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.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 partialDialCode = c.dialCode + areaCode.substr(0, k);
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
- this.hiddenInput = createEl("input", {
2023
- type: "hidden",
2024
- name: names.phone
2025
- });
2026
- wrapper.appendChild(this.hiddenInput);
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
- this.hiddenInputCountry = createEl("input", {
2030
- type: "hidden",
2031
- name: names.country
2032
- });
2033
- wrapper.appendChild(this.hiddenInputCountry);
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 iso2Codes = this.dialCodeToIso2Map[getNumeric(dialCode)];
2530
- const alreadySelected = iso2Codes.indexOf(this.selectedCountryData.iso2) !== -1 && numeric.length <= dialCode.length - 1;
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.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 `utilsScript` 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 `utilsScript` 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.0/build/js/utils.js"`.
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.