intl-tel-input 25.13.0 → 25.13.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 +5 -5
- package/angular/README.md +1 -1
- package/angular/build/IntlTelInput.js +34 -25
- package/angular/build/IntlTelInputWithUtils.js +34 -25
- package/angular/build/types/modules/core/ui.d.ts +3 -1
- package/angular/build/types/modules/data/country-data.d.ts +1 -1
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput.d.ts +4 -2
- package/build/js/intlTelInput.js +37 -27
- package/build/js/intlTelInput.min.js +3 -3
- package/build/js/intlTelInputWithUtils.js +37 -27
- package/build/js/intlTelInputWithUtils.min.js +3 -3
- package/package.json +1 -1
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +36 -26
- package/react/build/IntlTelInput.d.ts +4 -2
- package/react/build/IntlTelInput.js +36 -26
- package/react/build/IntlTelInputWithUtils.cjs +36 -26
- package/react/build/IntlTelInputWithUtils.js +36 -26
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +223 -225
- package/vue/build/IntlTelInputWithUtils.mjs +147 -149
package/README.md
CHANGED
|
@@ -81,16 +81,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
|
|
|
81
81
|
## Getting Started (Using a CDN)
|
|
82
82
|
1. Add the CSS
|
|
83
83
|
```html
|
|
84
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.
|
|
84
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.2/build/css/intlTelInput.css">
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
2. Add the plugin script and initialise it on your input element
|
|
88
88
|
```html
|
|
89
|
-
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.
|
|
89
|
+
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.2/build/js/intlTelInput.min.js"></script>
|
|
90
90
|
<script>
|
|
91
91
|
const input = document.querySelector("#phone");
|
|
92
92
|
window.intlTelInput(input, {
|
|
93
|
-
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.
|
|
93
|
+
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.2/build/js/utils.js"),
|
|
94
94
|
});
|
|
95
95
|
</script>
|
|
96
96
|
```
|
|
@@ -328,12 +328,12 @@ Set the initial country selection by specifying its country code, e.g. `"us"` fo
|
|
|
328
328
|
Type: `() => Promise<module>` Default: `null`
|
|
329
329
|
This is one way to lazy load the included utils.js (to enable formatting/validation, etc) - see [Loading The Utilities Script](#loading-the-utilities-script) for more options.
|
|
330
330
|
|
|
331
|
-
The `loadUtils` option takes a function that returns a Promise resolving to the utils module (see example code below). You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.
|
|
331
|
+
The `loadUtils` option takes a function that returns a Promise resolving to the utils module (see example code below). You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.2/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
|
|
332
332
|
|
|
333
333
|
```js
|
|
334
334
|
// (A) import utils module from a CDN
|
|
335
335
|
intlTelInput(htmlInputElement, {
|
|
336
|
-
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.
|
|
336
|
+
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.2/build/js/utils.js"),
|
|
337
337
|
});
|
|
338
338
|
|
|
339
339
|
// (B) import utils module from your own hosted version of utils.js
|
package/angular/README.md
CHANGED
|
@@ -54,7 +54,7 @@ import "intl-tel-input/styles";
|
|
|
54
54
|
|
|
55
55
|
See the [validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) for a more fleshed-out example of how to handle validation, or check out the [form demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/form/form.component.ts) for an alternative approach using `ReactiveFormsModule`.
|
|
56
56
|
|
|
57
|
-
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 { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` 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.13.
|
|
57
|
+
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 { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` 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.13.2/build/js/utils.js"`.
|
|
58
58
|
|
|
59
59
|
## Props
|
|
60
60
|
|
|
@@ -2232,6 +2232,7 @@ var buildClearIcon = (id2) => {
|
|
|
2232
2232
|
var UI = class {
|
|
2233
2233
|
constructor(input, options, id2) {
|
|
2234
2234
|
this.highlightedItem = null;
|
|
2235
|
+
this.selectedItem = null;
|
|
2235
2236
|
input.dataset.intlTelInputId = id2.toString();
|
|
2236
2237
|
this.telInput = input;
|
|
2237
2238
|
this.options = options;
|
|
@@ -2432,8 +2433,7 @@ var UI = class {
|
|
|
2432
2433
|
for (let i = 0; i < this.countries.length; i++) {
|
|
2433
2434
|
const c = this.countries[i];
|
|
2434
2435
|
const liClass = buildClassNames({
|
|
2435
|
-
[CLASSES.COUNTRY_ITEM]: true
|
|
2436
|
-
[CLASSES.HIGHLIGHT]: i === 0
|
|
2436
|
+
[CLASSES.COUNTRY_ITEM]: true
|
|
2437
2437
|
});
|
|
2438
2438
|
const listItem = createEl("li", {
|
|
2439
2439
|
id: `iti-${this.id}__item-${c.iso2}`,
|
|
@@ -2529,17 +2529,15 @@ var UI = class {
|
|
|
2529
2529
|
container.scrollTop = newScrollTop - heightDifference;
|
|
2530
2530
|
}
|
|
2531
2531
|
}
|
|
2532
|
-
//* Remove highlighting from
|
|
2532
|
+
//* Remove highlighting from the previous list item and highlight the new one.
|
|
2533
2533
|
highlightListItem(listItem, shouldFocus) {
|
|
2534
2534
|
const prevItem = this.highlightedItem;
|
|
2535
2535
|
if (prevItem) {
|
|
2536
2536
|
prevItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
2537
|
-
prevItem.setAttribute(ARIA.SELECTED, "false");
|
|
2538
2537
|
}
|
|
2539
2538
|
this.highlightedItem = listItem;
|
|
2540
2539
|
if (this.highlightedItem) {
|
|
2541
2540
|
this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
|
|
2542
|
-
this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
|
|
2543
2541
|
if (this.options.countrySearch) {
|
|
2544
2542
|
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2545
2543
|
this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
|
|
@@ -2549,6 +2547,19 @@ var UI = class {
|
|
|
2549
2547
|
this.highlightedItem.focus();
|
|
2550
2548
|
}
|
|
2551
2549
|
}
|
|
2550
|
+
updateSelectedItem(iso2) {
|
|
2551
|
+
if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
|
|
2552
|
+
this.selectedItem.setAttribute(ARIA.SELECTED, "false");
|
|
2553
|
+
this.selectedItem = null;
|
|
2554
|
+
}
|
|
2555
|
+
if (iso2 && !this.selectedItem) {
|
|
2556
|
+
const newListItem = this.countryList.querySelector(`[data-country-code="${iso2}"]`);
|
|
2557
|
+
if (newListItem) {
|
|
2558
|
+
newListItem.setAttribute(ARIA.SELECTED, "true");
|
|
2559
|
+
this.selectedItem = newListItem;
|
|
2560
|
+
}
|
|
2561
|
+
}
|
|
2562
|
+
}
|
|
2552
2563
|
//* Country search: Filter the country list to the given array of countries.
|
|
2553
2564
|
filterCountries(matchedCountries) {
|
|
2554
2565
|
this.countryList.innerHTML = "";
|
|
@@ -2600,6 +2611,7 @@ var UI = class {
|
|
|
2600
2611
|
this.hiddenInput = null;
|
|
2601
2612
|
this.hiddenInputCountry = null;
|
|
2602
2613
|
this.highlightedItem = null;
|
|
2614
|
+
this.selectedItem = null;
|
|
2603
2615
|
for (const c of this.countries) {
|
|
2604
2616
|
delete c.nodeById[this.id];
|
|
2605
2617
|
}
|
|
@@ -2627,11 +2639,11 @@ var translateCountryNames = (countries, options) => {
|
|
|
2627
2639
|
}
|
|
2628
2640
|
}
|
|
2629
2641
|
};
|
|
2630
|
-
var processDialCodes = (countries
|
|
2642
|
+
var processDialCodes = (countries) => {
|
|
2631
2643
|
const dialCodes = /* @__PURE__ */ new Set();
|
|
2632
2644
|
let dialCodeMaxLen = 0;
|
|
2633
2645
|
const dialCodeToIso2Map = {};
|
|
2634
|
-
const _addToDialCodeMap = (iso2, dialCode
|
|
2646
|
+
const _addToDialCodeMap = (iso2, dialCode) => {
|
|
2635
2647
|
if (!iso2 || !dialCode) {
|
|
2636
2648
|
return;
|
|
2637
2649
|
}
|
|
@@ -2645,10 +2657,10 @@ var processDialCodes = (countries, options) => {
|
|
|
2645
2657
|
if (iso2List.includes(iso2)) {
|
|
2646
2658
|
return;
|
|
2647
2659
|
}
|
|
2648
|
-
|
|
2649
|
-
iso2List[index] = iso2;
|
|
2660
|
+
iso2List.push(iso2);
|
|
2650
2661
|
};
|
|
2651
|
-
|
|
2662
|
+
const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
|
|
2663
|
+
for (const c of countriesSortedByPriority) {
|
|
2652
2664
|
if (!dialCodes.has(c.dialCode)) {
|
|
2653
2665
|
dialCodes.add(c.dialCode);
|
|
2654
2666
|
}
|
|
@@ -2656,14 +2668,7 @@ var processDialCodes = (countries, options) => {
|
|
|
2656
2668
|
const partialDialCode = c.dialCode.substring(0, k);
|
|
2657
2669
|
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2658
2670
|
}
|
|
2659
|
-
_addToDialCodeMap(c.iso2, c.dialCode
|
|
2660
|
-
}
|
|
2661
|
-
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2662
|
-
dialCodes.forEach((dialCode) => {
|
|
2663
|
-
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2664
|
-
});
|
|
2665
|
-
}
|
|
2666
|
-
for (const c of countries) {
|
|
2671
|
+
_addToDialCodeMap(c.iso2, c.dialCode);
|
|
2667
2672
|
if (c.areaCodes) {
|
|
2668
2673
|
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2669
2674
|
for (const areaCode of c.areaCodes) {
|
|
@@ -2795,7 +2800,7 @@ var Iti = class _Iti {
|
|
|
2795
2800
|
this.isAndroid = _Iti._getIsAndroid();
|
|
2796
2801
|
this.promise = this._createInitPromises();
|
|
2797
2802
|
this.countries = processAllCountries(this.options);
|
|
2798
|
-
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(this.countries
|
|
2803
|
+
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(this.countries);
|
|
2799
2804
|
this.dialCodes = dialCodes;
|
|
2800
2805
|
this.dialCodeMaxLen = dialCodeMaxLen;
|
|
2801
2806
|
this.dialCodeToIso2Map = dialCodeToIso2Map;
|
|
@@ -3463,11 +3468,14 @@ var Iti = class _Iti {
|
|
|
3463
3468
|
}
|
|
3464
3469
|
return null;
|
|
3465
3470
|
}
|
|
3466
|
-
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and
|
|
3471
|
+
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
|
|
3467
3472
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
3468
3473
|
_setCountry(iso2) {
|
|
3469
|
-
const { separateDialCode, showFlags, i18n } = this.options;
|
|
3474
|
+
const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
|
|
3470
3475
|
const prevIso2 = this.selectedCountryData.iso2 || "";
|
|
3476
|
+
if (allowDropdown) {
|
|
3477
|
+
this.ui.updateSelectedItem(iso2);
|
|
3478
|
+
}
|
|
3471
3479
|
this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
|
|
3472
3480
|
if (this.selectedCountryData.iso2) {
|
|
3473
3481
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
@@ -3556,11 +3564,12 @@ var Iti = class _Iti {
|
|
|
3556
3564
|
}
|
|
3557
3565
|
this.ui.dropdownContent.classList.add(CLASSES.HIDE);
|
|
3558
3566
|
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
|
|
3559
|
-
if (this.ui.highlightedItem) {
|
|
3560
|
-
this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
|
|
3561
|
-
}
|
|
3562
3567
|
if (this.options.countrySearch) {
|
|
3563
3568
|
this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
|
|
3569
|
+
if (this.ui.highlightedItem) {
|
|
3570
|
+
this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
3571
|
+
this.ui.highlightedItem = null;
|
|
3572
|
+
}
|
|
3564
3573
|
}
|
|
3565
3574
|
this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
|
|
3566
3575
|
this.dropdownAbortController.abort();
|
|
@@ -3866,7 +3875,7 @@ var intlTelInput = Object.assign((input, options) => {
|
|
|
3866
3875
|
attachUtils,
|
|
3867
3876
|
startedLoadingUtilsScript: false,
|
|
3868
3877
|
startedLoadingAutoCountry: false,
|
|
3869
|
-
version: "25.13.
|
|
3878
|
+
version: "25.13.2"
|
|
3870
3879
|
});
|
|
3871
3880
|
var intl_tel_input_default = intlTelInput;
|
|
3872
3881
|
|
|
@@ -2232,6 +2232,7 @@ var buildClearIcon = (id2) => {
|
|
|
2232
2232
|
var UI = class {
|
|
2233
2233
|
constructor(input, options, id2) {
|
|
2234
2234
|
this.highlightedItem = null;
|
|
2235
|
+
this.selectedItem = null;
|
|
2235
2236
|
input.dataset.intlTelInputId = id2.toString();
|
|
2236
2237
|
this.telInput = input;
|
|
2237
2238
|
this.options = options;
|
|
@@ -2432,8 +2433,7 @@ var UI = class {
|
|
|
2432
2433
|
for (let i = 0; i < this.countries.length; i++) {
|
|
2433
2434
|
const c = this.countries[i];
|
|
2434
2435
|
const liClass = buildClassNames({
|
|
2435
|
-
[CLASSES.COUNTRY_ITEM]: true
|
|
2436
|
-
[CLASSES.HIGHLIGHT]: i === 0
|
|
2436
|
+
[CLASSES.COUNTRY_ITEM]: true
|
|
2437
2437
|
});
|
|
2438
2438
|
const listItem = createEl("li", {
|
|
2439
2439
|
id: `iti-${this.id}__item-${c.iso2}`,
|
|
@@ -2529,17 +2529,15 @@ var UI = class {
|
|
|
2529
2529
|
container.scrollTop = newScrollTop - heightDifference;
|
|
2530
2530
|
}
|
|
2531
2531
|
}
|
|
2532
|
-
//* Remove highlighting from
|
|
2532
|
+
//* Remove highlighting from the previous list item and highlight the new one.
|
|
2533
2533
|
highlightListItem(listItem, shouldFocus) {
|
|
2534
2534
|
const prevItem = this.highlightedItem;
|
|
2535
2535
|
if (prevItem) {
|
|
2536
2536
|
prevItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
2537
|
-
prevItem.setAttribute(ARIA.SELECTED, "false");
|
|
2538
2537
|
}
|
|
2539
2538
|
this.highlightedItem = listItem;
|
|
2540
2539
|
if (this.highlightedItem) {
|
|
2541
2540
|
this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
|
|
2542
|
-
this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
|
|
2543
2541
|
if (this.options.countrySearch) {
|
|
2544
2542
|
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2545
2543
|
this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
|
|
@@ -2549,6 +2547,19 @@ var UI = class {
|
|
|
2549
2547
|
this.highlightedItem.focus();
|
|
2550
2548
|
}
|
|
2551
2549
|
}
|
|
2550
|
+
updateSelectedItem(iso2) {
|
|
2551
|
+
if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
|
|
2552
|
+
this.selectedItem.setAttribute(ARIA.SELECTED, "false");
|
|
2553
|
+
this.selectedItem = null;
|
|
2554
|
+
}
|
|
2555
|
+
if (iso2 && !this.selectedItem) {
|
|
2556
|
+
const newListItem = this.countryList.querySelector(`[data-country-code="${iso2}"]`);
|
|
2557
|
+
if (newListItem) {
|
|
2558
|
+
newListItem.setAttribute(ARIA.SELECTED, "true");
|
|
2559
|
+
this.selectedItem = newListItem;
|
|
2560
|
+
}
|
|
2561
|
+
}
|
|
2562
|
+
}
|
|
2552
2563
|
//* Country search: Filter the country list to the given array of countries.
|
|
2553
2564
|
filterCountries(matchedCountries) {
|
|
2554
2565
|
this.countryList.innerHTML = "";
|
|
@@ -2600,6 +2611,7 @@ var UI = class {
|
|
|
2600
2611
|
this.hiddenInput = null;
|
|
2601
2612
|
this.hiddenInputCountry = null;
|
|
2602
2613
|
this.highlightedItem = null;
|
|
2614
|
+
this.selectedItem = null;
|
|
2603
2615
|
for (const c of this.countries) {
|
|
2604
2616
|
delete c.nodeById[this.id];
|
|
2605
2617
|
}
|
|
@@ -2627,11 +2639,11 @@ var translateCountryNames = (countries, options) => {
|
|
|
2627
2639
|
}
|
|
2628
2640
|
}
|
|
2629
2641
|
};
|
|
2630
|
-
var processDialCodes = (countries
|
|
2642
|
+
var processDialCodes = (countries) => {
|
|
2631
2643
|
const dialCodes = /* @__PURE__ */ new Set();
|
|
2632
2644
|
let dialCodeMaxLen = 0;
|
|
2633
2645
|
const dialCodeToIso2Map = {};
|
|
2634
|
-
const _addToDialCodeMap = (iso2, dialCode
|
|
2646
|
+
const _addToDialCodeMap = (iso2, dialCode) => {
|
|
2635
2647
|
if (!iso2 || !dialCode) {
|
|
2636
2648
|
return;
|
|
2637
2649
|
}
|
|
@@ -2645,10 +2657,10 @@ var processDialCodes = (countries, options) => {
|
|
|
2645
2657
|
if (iso2List.includes(iso2)) {
|
|
2646
2658
|
return;
|
|
2647
2659
|
}
|
|
2648
|
-
|
|
2649
|
-
iso2List[index] = iso2;
|
|
2660
|
+
iso2List.push(iso2);
|
|
2650
2661
|
};
|
|
2651
|
-
|
|
2662
|
+
const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
|
|
2663
|
+
for (const c of countriesSortedByPriority) {
|
|
2652
2664
|
if (!dialCodes.has(c.dialCode)) {
|
|
2653
2665
|
dialCodes.add(c.dialCode);
|
|
2654
2666
|
}
|
|
@@ -2656,14 +2668,7 @@ var processDialCodes = (countries, options) => {
|
|
|
2656
2668
|
const partialDialCode = c.dialCode.substring(0, k);
|
|
2657
2669
|
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2658
2670
|
}
|
|
2659
|
-
_addToDialCodeMap(c.iso2, c.dialCode
|
|
2660
|
-
}
|
|
2661
|
-
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2662
|
-
dialCodes.forEach((dialCode) => {
|
|
2663
|
-
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2664
|
-
});
|
|
2665
|
-
}
|
|
2666
|
-
for (const c of countries) {
|
|
2671
|
+
_addToDialCodeMap(c.iso2, c.dialCode);
|
|
2667
2672
|
if (c.areaCodes) {
|
|
2668
2673
|
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2669
2674
|
for (const areaCode of c.areaCodes) {
|
|
@@ -2795,7 +2800,7 @@ var Iti = class _Iti {
|
|
|
2795
2800
|
this.isAndroid = _Iti._getIsAndroid();
|
|
2796
2801
|
this.promise = this._createInitPromises();
|
|
2797
2802
|
this.countries = processAllCountries(this.options);
|
|
2798
|
-
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(this.countries
|
|
2803
|
+
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(this.countries);
|
|
2799
2804
|
this.dialCodes = dialCodes;
|
|
2800
2805
|
this.dialCodeMaxLen = dialCodeMaxLen;
|
|
2801
2806
|
this.dialCodeToIso2Map = dialCodeToIso2Map;
|
|
@@ -3463,11 +3468,14 @@ var Iti = class _Iti {
|
|
|
3463
3468
|
}
|
|
3464
3469
|
return null;
|
|
3465
3470
|
}
|
|
3466
|
-
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and
|
|
3471
|
+
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
|
|
3467
3472
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
3468
3473
|
_setCountry(iso2) {
|
|
3469
|
-
const { separateDialCode, showFlags, i18n } = this.options;
|
|
3474
|
+
const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
|
|
3470
3475
|
const prevIso2 = this.selectedCountryData.iso2 || "";
|
|
3476
|
+
if (allowDropdown) {
|
|
3477
|
+
this.ui.updateSelectedItem(iso2);
|
|
3478
|
+
}
|
|
3471
3479
|
this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
|
|
3472
3480
|
if (this.selectedCountryData.iso2) {
|
|
3473
3481
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
@@ -3556,11 +3564,12 @@ var Iti = class _Iti {
|
|
|
3556
3564
|
}
|
|
3557
3565
|
this.ui.dropdownContent.classList.add(CLASSES.HIDE);
|
|
3558
3566
|
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
|
|
3559
|
-
if (this.ui.highlightedItem) {
|
|
3560
|
-
this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
|
|
3561
|
-
}
|
|
3562
3567
|
if (this.options.countrySearch) {
|
|
3563
3568
|
this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
|
|
3569
|
+
if (this.ui.highlightedItem) {
|
|
3570
|
+
this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
3571
|
+
this.ui.highlightedItem = null;
|
|
3572
|
+
}
|
|
3564
3573
|
}
|
|
3565
3574
|
this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
|
|
3566
3575
|
this.dropdownAbortController.abort();
|
|
@@ -3866,7 +3875,7 @@ var intlTelInput = Object.assign((input, options) => {
|
|
|
3866
3875
|
attachUtils,
|
|
3867
3876
|
startedLoadingUtilsScript: false,
|
|
3868
3877
|
startedLoadingAutoCountry: false,
|
|
3869
|
-
version: "25.13.
|
|
3878
|
+
version: "25.13.2"
|
|
3870
3879
|
});
|
|
3871
3880
|
var intl_tel_input_default = intlTelInput;
|
|
3872
3881
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Country } from "../../intl-tel-input/data";
|
|
1
|
+
import { Country, Iso2 } from "../../intl-tel-input/data";
|
|
2
2
|
import { AllOptions } from "../types/public-api";
|
|
3
3
|
export default class UI {
|
|
4
4
|
private readonly options;
|
|
@@ -23,6 +23,7 @@ export default class UI {
|
|
|
23
23
|
hiddenInput: HTMLInputElement;
|
|
24
24
|
hiddenInputCountry: HTMLInputElement;
|
|
25
25
|
highlightedItem: HTMLElement | null;
|
|
26
|
+
selectedItem: HTMLElement | null;
|
|
26
27
|
readonly hadInitialPlaceholder: boolean;
|
|
27
28
|
constructor(input: HTMLInputElement, options: AllOptions, id: number);
|
|
28
29
|
generateMarkup(countries: Country[]): void;
|
|
@@ -39,6 +40,7 @@ export default class UI {
|
|
|
39
40
|
updateSearchResultsA11yText(): void;
|
|
40
41
|
scrollTo(element: HTMLElement): void;
|
|
41
42
|
highlightListItem(listItem: HTMLElement | null, shouldFocus: boolean): void;
|
|
43
|
+
updateSelectedItem(iso2: Iso2 | ""): void;
|
|
42
44
|
filterCountries(matchedCountries: Country[]): void;
|
|
43
45
|
destroy(): void;
|
|
44
46
|
}
|
|
@@ -7,6 +7,6 @@ export interface DialCodeProcessingResult {
|
|
|
7
7
|
}
|
|
8
8
|
export declare const processAllCountries: (options: AllOptions) => Country[];
|
|
9
9
|
export declare const translateCountryNames: (countries: Country[], options: AllOptions) => void;
|
|
10
|
-
export declare const processDialCodes: (countries: Country[]
|
|
10
|
+
export declare const processDialCodes: (countries: Country[]) => DialCodeProcessingResult;
|
|
11
11
|
export declare const sortCountries: (countries: Country[], options: AllOptions) => void;
|
|
12
12
|
export declare const cacheSearchTokens: (countries: Country[]) => void;
|
package/build/js/data.js
CHANGED
package/build/js/data.min.js
CHANGED
|
@@ -262,7 +262,7 @@ declare module "modules/core/icons" {
|
|
|
262
262
|
export const buildClearIcon: (id: number) => string;
|
|
263
263
|
}
|
|
264
264
|
declare module "modules/core/ui" {
|
|
265
|
-
import { Country } from "intl-tel-input/data";
|
|
265
|
+
import { Country, Iso2 } from "intl-tel-input/data";
|
|
266
266
|
import { AllOptions } from "modules/types/public-api";
|
|
267
267
|
export default class UI {
|
|
268
268
|
private readonly options;
|
|
@@ -287,6 +287,7 @@ declare module "modules/core/ui" {
|
|
|
287
287
|
hiddenInput: HTMLInputElement;
|
|
288
288
|
hiddenInputCountry: HTMLInputElement;
|
|
289
289
|
highlightedItem: HTMLElement | null;
|
|
290
|
+
selectedItem: HTMLElement | null;
|
|
290
291
|
readonly hadInitialPlaceholder: boolean;
|
|
291
292
|
constructor(input: HTMLInputElement, options: AllOptions, id: number);
|
|
292
293
|
generateMarkup(countries: Country[]): void;
|
|
@@ -303,6 +304,7 @@ declare module "modules/core/ui" {
|
|
|
303
304
|
updateSearchResultsA11yText(): void;
|
|
304
305
|
scrollTo(element: HTMLElement): void;
|
|
305
306
|
highlightListItem(listItem: HTMLElement | null, shouldFocus: boolean): void;
|
|
307
|
+
updateSelectedItem(iso2: Iso2 | ""): void;
|
|
306
308
|
filterCountries(matchedCountries: Country[]): void;
|
|
307
309
|
destroy(): void;
|
|
308
310
|
}
|
|
@@ -317,7 +319,7 @@ declare module "modules/data/country-data" {
|
|
|
317
319
|
}
|
|
318
320
|
export const processAllCountries: (options: AllOptions) => Country[];
|
|
319
321
|
export const translateCountryNames: (countries: Country[], options: AllOptions) => void;
|
|
320
|
-
export const processDialCodes: (countries: Country[]
|
|
322
|
+
export const processDialCodes: (countries: Country[]) => DialCodeProcessingResult;
|
|
321
323
|
export const sortCountries: (countries: Country[], options: AllOptions) => void;
|
|
322
324
|
export const cacheSearchTokens: (countries: Country[]) => void;
|
|
323
325
|
}
|
package/build/js/intlTelInput.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* International Telephone Input v25.13.
|
|
2
|
+
* International Telephone Input v25.13.2
|
|
3
3
|
* https://github.com/jackocnr/intl-tel-input.git
|
|
4
4
|
* Licensed under the MIT license
|
|
5
5
|
*/
|
|
@@ -2277,6 +2277,7 @@ var factoryOutput = (() => {
|
|
|
2277
2277
|
var UI = class {
|
|
2278
2278
|
constructor(input, options, id2) {
|
|
2279
2279
|
this.highlightedItem = null;
|
|
2280
|
+
this.selectedItem = null;
|
|
2280
2281
|
input.dataset.intlTelInputId = id2.toString();
|
|
2281
2282
|
this.telInput = input;
|
|
2282
2283
|
this.options = options;
|
|
@@ -2538,8 +2539,7 @@ var factoryOutput = (() => {
|
|
|
2538
2539
|
for (let i = 0; i < this.countries.length; i++) {
|
|
2539
2540
|
const c = this.countries[i];
|
|
2540
2541
|
const liClass = buildClassNames({
|
|
2541
|
-
[CLASSES.COUNTRY_ITEM]: true
|
|
2542
|
-
[CLASSES.HIGHLIGHT]: i === 0
|
|
2542
|
+
[CLASSES.COUNTRY_ITEM]: true
|
|
2543
2543
|
});
|
|
2544
2544
|
const listItem = createEl("li", {
|
|
2545
2545
|
id: `iti-${this.id}__item-${c.iso2}`,
|
|
@@ -2642,17 +2642,15 @@ var factoryOutput = (() => {
|
|
|
2642
2642
|
container.scrollTop = newScrollTop - heightDifference;
|
|
2643
2643
|
}
|
|
2644
2644
|
}
|
|
2645
|
-
//* Remove highlighting from
|
|
2645
|
+
//* Remove highlighting from the previous list item and highlight the new one.
|
|
2646
2646
|
highlightListItem(listItem, shouldFocus) {
|
|
2647
2647
|
const prevItem = this.highlightedItem;
|
|
2648
2648
|
if (prevItem) {
|
|
2649
2649
|
prevItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
2650
|
-
prevItem.setAttribute(ARIA.SELECTED, "false");
|
|
2651
2650
|
}
|
|
2652
2651
|
this.highlightedItem = listItem;
|
|
2653
2652
|
if (this.highlightedItem) {
|
|
2654
2653
|
this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
|
|
2655
|
-
this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
|
|
2656
2654
|
if (this.options.countrySearch) {
|
|
2657
2655
|
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2658
2656
|
this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
|
|
@@ -2662,6 +2660,21 @@ var factoryOutput = (() => {
|
|
|
2662
2660
|
this.highlightedItem.focus();
|
|
2663
2661
|
}
|
|
2664
2662
|
}
|
|
2663
|
+
updateSelectedItem(iso2) {
|
|
2664
|
+
if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
|
|
2665
|
+
this.selectedItem.setAttribute(ARIA.SELECTED, "false");
|
|
2666
|
+
this.selectedItem = null;
|
|
2667
|
+
}
|
|
2668
|
+
if (iso2 && !this.selectedItem) {
|
|
2669
|
+
const newListItem = this.countryList.querySelector(
|
|
2670
|
+
`[data-country-code="${iso2}"]`
|
|
2671
|
+
);
|
|
2672
|
+
if (newListItem) {
|
|
2673
|
+
newListItem.setAttribute(ARIA.SELECTED, "true");
|
|
2674
|
+
this.selectedItem = newListItem;
|
|
2675
|
+
}
|
|
2676
|
+
}
|
|
2677
|
+
}
|
|
2665
2678
|
//* Country search: Filter the country list to the given array of countries.
|
|
2666
2679
|
filterCountries(matchedCountries) {
|
|
2667
2680
|
this.countryList.innerHTML = "";
|
|
@@ -2713,6 +2726,7 @@ var factoryOutput = (() => {
|
|
|
2713
2726
|
this.hiddenInput = null;
|
|
2714
2727
|
this.hiddenInputCountry = null;
|
|
2715
2728
|
this.highlightedItem = null;
|
|
2729
|
+
this.selectedItem = null;
|
|
2716
2730
|
for (const c of this.countries) {
|
|
2717
2731
|
delete c.nodeById[this.id];
|
|
2718
2732
|
}
|
|
@@ -2748,11 +2762,11 @@ var factoryOutput = (() => {
|
|
|
2748
2762
|
}
|
|
2749
2763
|
}
|
|
2750
2764
|
};
|
|
2751
|
-
var processDialCodes = (countries
|
|
2765
|
+
var processDialCodes = (countries) => {
|
|
2752
2766
|
const dialCodes = /* @__PURE__ */ new Set();
|
|
2753
2767
|
let dialCodeMaxLen = 0;
|
|
2754
2768
|
const dialCodeToIso2Map = {};
|
|
2755
|
-
const _addToDialCodeMap = (iso2, dialCode
|
|
2769
|
+
const _addToDialCodeMap = (iso2, dialCode) => {
|
|
2756
2770
|
if (!iso2 || !dialCode) {
|
|
2757
2771
|
return;
|
|
2758
2772
|
}
|
|
@@ -2766,10 +2780,10 @@ var factoryOutput = (() => {
|
|
|
2766
2780
|
if (iso2List.includes(iso2)) {
|
|
2767
2781
|
return;
|
|
2768
2782
|
}
|
|
2769
|
-
|
|
2770
|
-
iso2List[index] = iso2;
|
|
2783
|
+
iso2List.push(iso2);
|
|
2771
2784
|
};
|
|
2772
|
-
|
|
2785
|
+
const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
|
|
2786
|
+
for (const c of countriesSortedByPriority) {
|
|
2773
2787
|
if (!dialCodes.has(c.dialCode)) {
|
|
2774
2788
|
dialCodes.add(c.dialCode);
|
|
2775
2789
|
}
|
|
@@ -2777,14 +2791,7 @@ var factoryOutput = (() => {
|
|
|
2777
2791
|
const partialDialCode = c.dialCode.substring(0, k);
|
|
2778
2792
|
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2779
2793
|
}
|
|
2780
|
-
_addToDialCodeMap(c.iso2, c.dialCode
|
|
2781
|
-
}
|
|
2782
|
-
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2783
|
-
dialCodes.forEach((dialCode) => {
|
|
2784
|
-
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2785
|
-
});
|
|
2786
|
-
}
|
|
2787
|
-
for (const c of countries) {
|
|
2794
|
+
_addToDialCodeMap(c.iso2, c.dialCode);
|
|
2788
2795
|
if (c.areaCodes) {
|
|
2789
2796
|
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2790
2797
|
for (const areaCode of c.areaCodes) {
|
|
@@ -2919,8 +2926,7 @@ var factoryOutput = (() => {
|
|
|
2919
2926
|
this.promise = this._createInitPromises();
|
|
2920
2927
|
this.countries = processAllCountries(this.options);
|
|
2921
2928
|
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(
|
|
2922
|
-
this.countries
|
|
2923
|
-
this.options
|
|
2929
|
+
this.countries
|
|
2924
2930
|
);
|
|
2925
2931
|
this.dialCodes = dialCodes;
|
|
2926
2932
|
this.dialCodeMaxLen = dialCodeMaxLen;
|
|
@@ -3649,11 +3655,14 @@ var factoryOutput = (() => {
|
|
|
3649
3655
|
}
|
|
3650
3656
|
return null;
|
|
3651
3657
|
}
|
|
3652
|
-
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and
|
|
3658
|
+
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
|
|
3653
3659
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
3654
3660
|
_setCountry(iso2) {
|
|
3655
|
-
const { separateDialCode, showFlags, i18n } = this.options;
|
|
3661
|
+
const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
|
|
3656
3662
|
const prevIso2 = this.selectedCountryData.iso2 || "";
|
|
3663
|
+
if (allowDropdown) {
|
|
3664
|
+
this.ui.updateSelectedItem(iso2);
|
|
3665
|
+
}
|
|
3657
3666
|
this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
|
|
3658
3667
|
if (this.selectedCountryData.iso2) {
|
|
3659
3668
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
@@ -3760,11 +3769,12 @@ var factoryOutput = (() => {
|
|
|
3760
3769
|
}
|
|
3761
3770
|
this.ui.dropdownContent.classList.add(CLASSES.HIDE);
|
|
3762
3771
|
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
|
|
3763
|
-
if (this.ui.highlightedItem) {
|
|
3764
|
-
this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
|
|
3765
|
-
}
|
|
3766
3772
|
if (this.options.countrySearch) {
|
|
3767
3773
|
this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
|
|
3774
|
+
if (this.ui.highlightedItem) {
|
|
3775
|
+
this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
3776
|
+
this.ui.highlightedItem = null;
|
|
3777
|
+
}
|
|
3768
3778
|
}
|
|
3769
3779
|
this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
|
|
3770
3780
|
this.dropdownAbortController.abort();
|
|
@@ -4101,7 +4111,7 @@ var factoryOutput = (() => {
|
|
|
4101
4111
|
attachUtils,
|
|
4102
4112
|
startedLoadingUtilsScript: false,
|
|
4103
4113
|
startedLoadingAutoCountry: false,
|
|
4104
|
-
version: "25.13.
|
|
4114
|
+
version: "25.13.2"
|
|
4105
4115
|
}
|
|
4106
4116
|
);
|
|
4107
4117
|
var intl_tel_input_default = intlTelInput;
|