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/package.json
CHANGED
package/react/README.md
CHANGED
|
@@ -30,7 +30,7 @@ import "intl-tel-input/styles";
|
|
|
30
30
|
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.
|
|
31
31
|
|
|
32
32
|
## Utils Script
|
|
33
|
-
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 just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.
|
|
33
|
+
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 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"`.
|
|
34
34
|
|
|
35
35
|
## Props
|
|
36
36
|
Here's a list of all of the current props you can pass to the IntlTelInput React component.
|
|
@@ -2272,6 +2272,7 @@ var buildClearIcon = (id2) => {
|
|
|
2272
2272
|
var UI = class {
|
|
2273
2273
|
constructor(input, options, id2) {
|
|
2274
2274
|
this.highlightedItem = null;
|
|
2275
|
+
this.selectedItem = null;
|
|
2275
2276
|
input.dataset.intlTelInputId = id2.toString();
|
|
2276
2277
|
this.telInput = input;
|
|
2277
2278
|
this.options = options;
|
|
@@ -2533,8 +2534,7 @@ var UI = class {
|
|
|
2533
2534
|
for (let i = 0; i < this.countries.length; i++) {
|
|
2534
2535
|
const c = this.countries[i];
|
|
2535
2536
|
const liClass = buildClassNames({
|
|
2536
|
-
[CLASSES.COUNTRY_ITEM]: true
|
|
2537
|
-
[CLASSES.HIGHLIGHT]: i === 0
|
|
2537
|
+
[CLASSES.COUNTRY_ITEM]: true
|
|
2538
2538
|
});
|
|
2539
2539
|
const listItem = createEl("li", {
|
|
2540
2540
|
id: `iti-${this.id}__item-${c.iso2}`,
|
|
@@ -2637,17 +2637,15 @@ var UI = class {
|
|
|
2637
2637
|
container.scrollTop = newScrollTop - heightDifference;
|
|
2638
2638
|
}
|
|
2639
2639
|
}
|
|
2640
|
-
//* Remove highlighting from
|
|
2640
|
+
//* Remove highlighting from the previous list item and highlight the new one.
|
|
2641
2641
|
highlightListItem(listItem, shouldFocus) {
|
|
2642
2642
|
const prevItem = this.highlightedItem;
|
|
2643
2643
|
if (prevItem) {
|
|
2644
2644
|
prevItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
2645
|
-
prevItem.setAttribute(ARIA.SELECTED, "false");
|
|
2646
2645
|
}
|
|
2647
2646
|
this.highlightedItem = listItem;
|
|
2648
2647
|
if (this.highlightedItem) {
|
|
2649
2648
|
this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
|
|
2650
|
-
this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
|
|
2651
2649
|
if (this.options.countrySearch) {
|
|
2652
2650
|
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2653
2651
|
this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
|
|
@@ -2657,6 +2655,21 @@ var UI = class {
|
|
|
2657
2655
|
this.highlightedItem.focus();
|
|
2658
2656
|
}
|
|
2659
2657
|
}
|
|
2658
|
+
updateSelectedItem(iso2) {
|
|
2659
|
+
if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
|
|
2660
|
+
this.selectedItem.setAttribute(ARIA.SELECTED, "false");
|
|
2661
|
+
this.selectedItem = null;
|
|
2662
|
+
}
|
|
2663
|
+
if (iso2 && !this.selectedItem) {
|
|
2664
|
+
const newListItem = this.countryList.querySelector(
|
|
2665
|
+
`[data-country-code="${iso2}"]`
|
|
2666
|
+
);
|
|
2667
|
+
if (newListItem) {
|
|
2668
|
+
newListItem.setAttribute(ARIA.SELECTED, "true");
|
|
2669
|
+
this.selectedItem = newListItem;
|
|
2670
|
+
}
|
|
2671
|
+
}
|
|
2672
|
+
}
|
|
2660
2673
|
//* Country search: Filter the country list to the given array of countries.
|
|
2661
2674
|
filterCountries(matchedCountries) {
|
|
2662
2675
|
this.countryList.innerHTML = "";
|
|
@@ -2708,6 +2721,7 @@ var UI = class {
|
|
|
2708
2721
|
this.hiddenInput = null;
|
|
2709
2722
|
this.hiddenInputCountry = null;
|
|
2710
2723
|
this.highlightedItem = null;
|
|
2724
|
+
this.selectedItem = null;
|
|
2711
2725
|
for (const c of this.countries) {
|
|
2712
2726
|
delete c.nodeById[this.id];
|
|
2713
2727
|
}
|
|
@@ -2743,11 +2757,11 @@ var translateCountryNames = (countries, options) => {
|
|
|
2743
2757
|
}
|
|
2744
2758
|
}
|
|
2745
2759
|
};
|
|
2746
|
-
var processDialCodes = (countries
|
|
2760
|
+
var processDialCodes = (countries) => {
|
|
2747
2761
|
const dialCodes = /* @__PURE__ */ new Set();
|
|
2748
2762
|
let dialCodeMaxLen = 0;
|
|
2749
2763
|
const dialCodeToIso2Map = {};
|
|
2750
|
-
const _addToDialCodeMap = (iso2, dialCode
|
|
2764
|
+
const _addToDialCodeMap = (iso2, dialCode) => {
|
|
2751
2765
|
if (!iso2 || !dialCode) {
|
|
2752
2766
|
return;
|
|
2753
2767
|
}
|
|
@@ -2761,10 +2775,10 @@ var processDialCodes = (countries, options) => {
|
|
|
2761
2775
|
if (iso2List.includes(iso2)) {
|
|
2762
2776
|
return;
|
|
2763
2777
|
}
|
|
2764
|
-
|
|
2765
|
-
iso2List[index] = iso2;
|
|
2778
|
+
iso2List.push(iso2);
|
|
2766
2779
|
};
|
|
2767
|
-
|
|
2780
|
+
const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
|
|
2781
|
+
for (const c of countriesSortedByPriority) {
|
|
2768
2782
|
if (!dialCodes.has(c.dialCode)) {
|
|
2769
2783
|
dialCodes.add(c.dialCode);
|
|
2770
2784
|
}
|
|
@@ -2772,14 +2786,7 @@ var processDialCodes = (countries, options) => {
|
|
|
2772
2786
|
const partialDialCode = c.dialCode.substring(0, k);
|
|
2773
2787
|
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2774
2788
|
}
|
|
2775
|
-
_addToDialCodeMap(c.iso2, c.dialCode
|
|
2776
|
-
}
|
|
2777
|
-
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2778
|
-
dialCodes.forEach((dialCode) => {
|
|
2779
|
-
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2780
|
-
});
|
|
2781
|
-
}
|
|
2782
|
-
for (const c of countries) {
|
|
2789
|
+
_addToDialCodeMap(c.iso2, c.dialCode);
|
|
2783
2790
|
if (c.areaCodes) {
|
|
2784
2791
|
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2785
2792
|
for (const areaCode of c.areaCodes) {
|
|
@@ -2914,8 +2921,7 @@ var Iti = class _Iti {
|
|
|
2914
2921
|
this.promise = this._createInitPromises();
|
|
2915
2922
|
this.countries = processAllCountries(this.options);
|
|
2916
2923
|
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(
|
|
2917
|
-
this.countries
|
|
2918
|
-
this.options
|
|
2924
|
+
this.countries
|
|
2919
2925
|
);
|
|
2920
2926
|
this.dialCodes = dialCodes;
|
|
2921
2927
|
this.dialCodeMaxLen = dialCodeMaxLen;
|
|
@@ -3644,11 +3650,14 @@ var Iti = class _Iti {
|
|
|
3644
3650
|
}
|
|
3645
3651
|
return null;
|
|
3646
3652
|
}
|
|
3647
|
-
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and
|
|
3653
|
+
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
|
|
3648
3654
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
3649
3655
|
_setCountry(iso2) {
|
|
3650
|
-
const { separateDialCode, showFlags, i18n } = this.options;
|
|
3656
|
+
const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
|
|
3651
3657
|
const prevIso2 = this.selectedCountryData.iso2 || "";
|
|
3658
|
+
if (allowDropdown) {
|
|
3659
|
+
this.ui.updateSelectedItem(iso2);
|
|
3660
|
+
}
|
|
3652
3661
|
this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
|
|
3653
3662
|
if (this.selectedCountryData.iso2) {
|
|
3654
3663
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
@@ -3755,11 +3764,12 @@ var Iti = class _Iti {
|
|
|
3755
3764
|
}
|
|
3756
3765
|
this.ui.dropdownContent.classList.add(CLASSES.HIDE);
|
|
3757
3766
|
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
|
|
3758
|
-
if (this.ui.highlightedItem) {
|
|
3759
|
-
this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
|
|
3760
|
-
}
|
|
3761
3767
|
if (this.options.countrySearch) {
|
|
3762
3768
|
this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
|
|
3769
|
+
if (this.ui.highlightedItem) {
|
|
3770
|
+
this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
3771
|
+
this.ui.highlightedItem = null;
|
|
3772
|
+
}
|
|
3763
3773
|
}
|
|
3764
3774
|
this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
|
|
3765
3775
|
this.dropdownAbortController.abort();
|
|
@@ -4096,7 +4106,7 @@ var intlTelInput = Object.assign(
|
|
|
4096
4106
|
attachUtils,
|
|
4097
4107
|
startedLoadingUtilsScript: false,
|
|
4098
4108
|
startedLoadingAutoCountry: false,
|
|
4099
|
-
version: "25.13.
|
|
4109
|
+
version: "25.13.2"
|
|
4100
4110
|
}
|
|
4101
4111
|
);
|
|
4102
4112
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -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
|
}
|
|
@@ -2236,6 +2236,7 @@ var buildClearIcon = (id2) => {
|
|
|
2236
2236
|
var UI = class {
|
|
2237
2237
|
constructor(input, options, id2) {
|
|
2238
2238
|
this.highlightedItem = null;
|
|
2239
|
+
this.selectedItem = null;
|
|
2239
2240
|
input.dataset.intlTelInputId = id2.toString();
|
|
2240
2241
|
this.telInput = input;
|
|
2241
2242
|
this.options = options;
|
|
@@ -2497,8 +2498,7 @@ var UI = class {
|
|
|
2497
2498
|
for (let i = 0; i < this.countries.length; i++) {
|
|
2498
2499
|
const c = this.countries[i];
|
|
2499
2500
|
const liClass = buildClassNames({
|
|
2500
|
-
[CLASSES.COUNTRY_ITEM]: true
|
|
2501
|
-
[CLASSES.HIGHLIGHT]: i === 0
|
|
2501
|
+
[CLASSES.COUNTRY_ITEM]: true
|
|
2502
2502
|
});
|
|
2503
2503
|
const listItem = createEl("li", {
|
|
2504
2504
|
id: `iti-${this.id}__item-${c.iso2}`,
|
|
@@ -2601,17 +2601,15 @@ var UI = class {
|
|
|
2601
2601
|
container.scrollTop = newScrollTop - heightDifference;
|
|
2602
2602
|
}
|
|
2603
2603
|
}
|
|
2604
|
-
//* Remove highlighting from
|
|
2604
|
+
//* Remove highlighting from the previous list item and highlight the new one.
|
|
2605
2605
|
highlightListItem(listItem, shouldFocus) {
|
|
2606
2606
|
const prevItem = this.highlightedItem;
|
|
2607
2607
|
if (prevItem) {
|
|
2608
2608
|
prevItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
2609
|
-
prevItem.setAttribute(ARIA.SELECTED, "false");
|
|
2610
2609
|
}
|
|
2611
2610
|
this.highlightedItem = listItem;
|
|
2612
2611
|
if (this.highlightedItem) {
|
|
2613
2612
|
this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
|
|
2614
|
-
this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
|
|
2615
2613
|
if (this.options.countrySearch) {
|
|
2616
2614
|
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2617
2615
|
this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
|
|
@@ -2621,6 +2619,21 @@ var UI = class {
|
|
|
2621
2619
|
this.highlightedItem.focus();
|
|
2622
2620
|
}
|
|
2623
2621
|
}
|
|
2622
|
+
updateSelectedItem(iso2) {
|
|
2623
|
+
if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
|
|
2624
|
+
this.selectedItem.setAttribute(ARIA.SELECTED, "false");
|
|
2625
|
+
this.selectedItem = null;
|
|
2626
|
+
}
|
|
2627
|
+
if (iso2 && !this.selectedItem) {
|
|
2628
|
+
const newListItem = this.countryList.querySelector(
|
|
2629
|
+
`[data-country-code="${iso2}"]`
|
|
2630
|
+
);
|
|
2631
|
+
if (newListItem) {
|
|
2632
|
+
newListItem.setAttribute(ARIA.SELECTED, "true");
|
|
2633
|
+
this.selectedItem = newListItem;
|
|
2634
|
+
}
|
|
2635
|
+
}
|
|
2636
|
+
}
|
|
2624
2637
|
//* Country search: Filter the country list to the given array of countries.
|
|
2625
2638
|
filterCountries(matchedCountries) {
|
|
2626
2639
|
this.countryList.innerHTML = "";
|
|
@@ -2672,6 +2685,7 @@ var UI = class {
|
|
|
2672
2685
|
this.hiddenInput = null;
|
|
2673
2686
|
this.hiddenInputCountry = null;
|
|
2674
2687
|
this.highlightedItem = null;
|
|
2688
|
+
this.selectedItem = null;
|
|
2675
2689
|
for (const c of this.countries) {
|
|
2676
2690
|
delete c.nodeById[this.id];
|
|
2677
2691
|
}
|
|
@@ -2707,11 +2721,11 @@ var translateCountryNames = (countries, options) => {
|
|
|
2707
2721
|
}
|
|
2708
2722
|
}
|
|
2709
2723
|
};
|
|
2710
|
-
var processDialCodes = (countries
|
|
2724
|
+
var processDialCodes = (countries) => {
|
|
2711
2725
|
const dialCodes = /* @__PURE__ */ new Set();
|
|
2712
2726
|
let dialCodeMaxLen = 0;
|
|
2713
2727
|
const dialCodeToIso2Map = {};
|
|
2714
|
-
const _addToDialCodeMap = (iso2, dialCode
|
|
2728
|
+
const _addToDialCodeMap = (iso2, dialCode) => {
|
|
2715
2729
|
if (!iso2 || !dialCode) {
|
|
2716
2730
|
return;
|
|
2717
2731
|
}
|
|
@@ -2725,10 +2739,10 @@ var processDialCodes = (countries, options) => {
|
|
|
2725
2739
|
if (iso2List.includes(iso2)) {
|
|
2726
2740
|
return;
|
|
2727
2741
|
}
|
|
2728
|
-
|
|
2729
|
-
iso2List[index] = iso2;
|
|
2742
|
+
iso2List.push(iso2);
|
|
2730
2743
|
};
|
|
2731
|
-
|
|
2744
|
+
const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
|
|
2745
|
+
for (const c of countriesSortedByPriority) {
|
|
2732
2746
|
if (!dialCodes.has(c.dialCode)) {
|
|
2733
2747
|
dialCodes.add(c.dialCode);
|
|
2734
2748
|
}
|
|
@@ -2736,14 +2750,7 @@ var processDialCodes = (countries, options) => {
|
|
|
2736
2750
|
const partialDialCode = c.dialCode.substring(0, k);
|
|
2737
2751
|
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2738
2752
|
}
|
|
2739
|
-
_addToDialCodeMap(c.iso2, c.dialCode
|
|
2740
|
-
}
|
|
2741
|
-
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2742
|
-
dialCodes.forEach((dialCode) => {
|
|
2743
|
-
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2744
|
-
});
|
|
2745
|
-
}
|
|
2746
|
-
for (const c of countries) {
|
|
2753
|
+
_addToDialCodeMap(c.iso2, c.dialCode);
|
|
2747
2754
|
if (c.areaCodes) {
|
|
2748
2755
|
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2749
2756
|
for (const areaCode of c.areaCodes) {
|
|
@@ -2878,8 +2885,7 @@ var Iti = class _Iti {
|
|
|
2878
2885
|
this.promise = this._createInitPromises();
|
|
2879
2886
|
this.countries = processAllCountries(this.options);
|
|
2880
2887
|
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(
|
|
2881
|
-
this.countries
|
|
2882
|
-
this.options
|
|
2888
|
+
this.countries
|
|
2883
2889
|
);
|
|
2884
2890
|
this.dialCodes = dialCodes;
|
|
2885
2891
|
this.dialCodeMaxLen = dialCodeMaxLen;
|
|
@@ -3608,11 +3614,14 @@ var Iti = class _Iti {
|
|
|
3608
3614
|
}
|
|
3609
3615
|
return null;
|
|
3610
3616
|
}
|
|
3611
|
-
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and
|
|
3617
|
+
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
|
|
3612
3618
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
3613
3619
|
_setCountry(iso2) {
|
|
3614
|
-
const { separateDialCode, showFlags, i18n } = this.options;
|
|
3620
|
+
const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
|
|
3615
3621
|
const prevIso2 = this.selectedCountryData.iso2 || "";
|
|
3622
|
+
if (allowDropdown) {
|
|
3623
|
+
this.ui.updateSelectedItem(iso2);
|
|
3624
|
+
}
|
|
3616
3625
|
this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
|
|
3617
3626
|
if (this.selectedCountryData.iso2) {
|
|
3618
3627
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
@@ -3719,11 +3728,12 @@ var Iti = class _Iti {
|
|
|
3719
3728
|
}
|
|
3720
3729
|
this.ui.dropdownContent.classList.add(CLASSES.HIDE);
|
|
3721
3730
|
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
|
|
3722
|
-
if (this.ui.highlightedItem) {
|
|
3723
|
-
this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
|
|
3724
|
-
}
|
|
3725
3731
|
if (this.options.countrySearch) {
|
|
3726
3732
|
this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
|
|
3733
|
+
if (this.ui.highlightedItem) {
|
|
3734
|
+
this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
3735
|
+
this.ui.highlightedItem = null;
|
|
3736
|
+
}
|
|
3727
3737
|
}
|
|
3728
3738
|
this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
|
|
3729
3739
|
this.dropdownAbortController.abort();
|
|
@@ -4060,7 +4070,7 @@ var intlTelInput = Object.assign(
|
|
|
4060
4070
|
attachUtils,
|
|
4061
4071
|
startedLoadingUtilsScript: false,
|
|
4062
4072
|
startedLoadingAutoCountry: false,
|
|
4063
|
-
version: "25.13.
|
|
4073
|
+
version: "25.13.2"
|
|
4064
4074
|
}
|
|
4065
4075
|
);
|
|
4066
4076
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -2272,6 +2272,7 @@ var buildClearIcon = (id2) => {
|
|
|
2272
2272
|
var UI = class {
|
|
2273
2273
|
constructor(input, options, id2) {
|
|
2274
2274
|
this.highlightedItem = null;
|
|
2275
|
+
this.selectedItem = null;
|
|
2275
2276
|
input.dataset.intlTelInputId = id2.toString();
|
|
2276
2277
|
this.telInput = input;
|
|
2277
2278
|
this.options = options;
|
|
@@ -2533,8 +2534,7 @@ var UI = class {
|
|
|
2533
2534
|
for (let i = 0; i < this.countries.length; i++) {
|
|
2534
2535
|
const c = this.countries[i];
|
|
2535
2536
|
const liClass = buildClassNames({
|
|
2536
|
-
[CLASSES.COUNTRY_ITEM]: true
|
|
2537
|
-
[CLASSES.HIGHLIGHT]: i === 0
|
|
2537
|
+
[CLASSES.COUNTRY_ITEM]: true
|
|
2538
2538
|
});
|
|
2539
2539
|
const listItem = createEl("li", {
|
|
2540
2540
|
id: `iti-${this.id}__item-${c.iso2}`,
|
|
@@ -2637,17 +2637,15 @@ var UI = class {
|
|
|
2637
2637
|
container.scrollTop = newScrollTop - heightDifference;
|
|
2638
2638
|
}
|
|
2639
2639
|
}
|
|
2640
|
-
//* Remove highlighting from
|
|
2640
|
+
//* Remove highlighting from the previous list item and highlight the new one.
|
|
2641
2641
|
highlightListItem(listItem, shouldFocus) {
|
|
2642
2642
|
const prevItem = this.highlightedItem;
|
|
2643
2643
|
if (prevItem) {
|
|
2644
2644
|
prevItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
2645
|
-
prevItem.setAttribute(ARIA.SELECTED, "false");
|
|
2646
2645
|
}
|
|
2647
2646
|
this.highlightedItem = listItem;
|
|
2648
2647
|
if (this.highlightedItem) {
|
|
2649
2648
|
this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
|
|
2650
|
-
this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
|
|
2651
2649
|
if (this.options.countrySearch) {
|
|
2652
2650
|
const activeDescendant = this.highlightedItem.getAttribute("id") || "";
|
|
2653
2651
|
this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
|
|
@@ -2657,6 +2655,21 @@ var UI = class {
|
|
|
2657
2655
|
this.highlightedItem.focus();
|
|
2658
2656
|
}
|
|
2659
2657
|
}
|
|
2658
|
+
updateSelectedItem(iso2) {
|
|
2659
|
+
if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
|
|
2660
|
+
this.selectedItem.setAttribute(ARIA.SELECTED, "false");
|
|
2661
|
+
this.selectedItem = null;
|
|
2662
|
+
}
|
|
2663
|
+
if (iso2 && !this.selectedItem) {
|
|
2664
|
+
const newListItem = this.countryList.querySelector(
|
|
2665
|
+
`[data-country-code="${iso2}"]`
|
|
2666
|
+
);
|
|
2667
|
+
if (newListItem) {
|
|
2668
|
+
newListItem.setAttribute(ARIA.SELECTED, "true");
|
|
2669
|
+
this.selectedItem = newListItem;
|
|
2670
|
+
}
|
|
2671
|
+
}
|
|
2672
|
+
}
|
|
2660
2673
|
//* Country search: Filter the country list to the given array of countries.
|
|
2661
2674
|
filterCountries(matchedCountries) {
|
|
2662
2675
|
this.countryList.innerHTML = "";
|
|
@@ -2708,6 +2721,7 @@ var UI = class {
|
|
|
2708
2721
|
this.hiddenInput = null;
|
|
2709
2722
|
this.hiddenInputCountry = null;
|
|
2710
2723
|
this.highlightedItem = null;
|
|
2724
|
+
this.selectedItem = null;
|
|
2711
2725
|
for (const c of this.countries) {
|
|
2712
2726
|
delete c.nodeById[this.id];
|
|
2713
2727
|
}
|
|
@@ -2743,11 +2757,11 @@ var translateCountryNames = (countries, options) => {
|
|
|
2743
2757
|
}
|
|
2744
2758
|
}
|
|
2745
2759
|
};
|
|
2746
|
-
var processDialCodes = (countries
|
|
2760
|
+
var processDialCodes = (countries) => {
|
|
2747
2761
|
const dialCodes = /* @__PURE__ */ new Set();
|
|
2748
2762
|
let dialCodeMaxLen = 0;
|
|
2749
2763
|
const dialCodeToIso2Map = {};
|
|
2750
|
-
const _addToDialCodeMap = (iso2, dialCode
|
|
2764
|
+
const _addToDialCodeMap = (iso2, dialCode) => {
|
|
2751
2765
|
if (!iso2 || !dialCode) {
|
|
2752
2766
|
return;
|
|
2753
2767
|
}
|
|
@@ -2761,10 +2775,10 @@ var processDialCodes = (countries, options) => {
|
|
|
2761
2775
|
if (iso2List.includes(iso2)) {
|
|
2762
2776
|
return;
|
|
2763
2777
|
}
|
|
2764
|
-
|
|
2765
|
-
iso2List[index] = iso2;
|
|
2778
|
+
iso2List.push(iso2);
|
|
2766
2779
|
};
|
|
2767
|
-
|
|
2780
|
+
const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
|
|
2781
|
+
for (const c of countriesSortedByPriority) {
|
|
2768
2782
|
if (!dialCodes.has(c.dialCode)) {
|
|
2769
2783
|
dialCodes.add(c.dialCode);
|
|
2770
2784
|
}
|
|
@@ -2772,14 +2786,7 @@ var processDialCodes = (countries, options) => {
|
|
|
2772
2786
|
const partialDialCode = c.dialCode.substring(0, k);
|
|
2773
2787
|
_addToDialCodeMap(c.iso2, partialDialCode);
|
|
2774
2788
|
}
|
|
2775
|
-
_addToDialCodeMap(c.iso2, c.dialCode
|
|
2776
|
-
}
|
|
2777
|
-
if (options.onlyCountries.length || options.excludeCountries.length) {
|
|
2778
|
-
dialCodes.forEach((dialCode) => {
|
|
2779
|
-
dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
|
|
2780
|
-
});
|
|
2781
|
-
}
|
|
2782
|
-
for (const c of countries) {
|
|
2789
|
+
_addToDialCodeMap(c.iso2, c.dialCode);
|
|
2783
2790
|
if (c.areaCodes) {
|
|
2784
2791
|
const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
|
|
2785
2792
|
for (const areaCode of c.areaCodes) {
|
|
@@ -2914,8 +2921,7 @@ var Iti = class _Iti {
|
|
|
2914
2921
|
this.promise = this._createInitPromises();
|
|
2915
2922
|
this.countries = processAllCountries(this.options);
|
|
2916
2923
|
const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(
|
|
2917
|
-
this.countries
|
|
2918
|
-
this.options
|
|
2924
|
+
this.countries
|
|
2919
2925
|
);
|
|
2920
2926
|
this.dialCodes = dialCodes;
|
|
2921
2927
|
this.dialCodeMaxLen = dialCodeMaxLen;
|
|
@@ -3644,11 +3650,14 @@ var Iti = class _Iti {
|
|
|
3644
3650
|
}
|
|
3645
3651
|
return null;
|
|
3646
3652
|
}
|
|
3647
|
-
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and
|
|
3653
|
+
//* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
|
|
3648
3654
|
//* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
|
|
3649
3655
|
_setCountry(iso2) {
|
|
3650
|
-
const { separateDialCode, showFlags, i18n } = this.options;
|
|
3656
|
+
const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
|
|
3651
3657
|
const prevIso2 = this.selectedCountryData.iso2 || "";
|
|
3658
|
+
if (allowDropdown) {
|
|
3659
|
+
this.ui.updateSelectedItem(iso2);
|
|
3660
|
+
}
|
|
3652
3661
|
this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
|
|
3653
3662
|
if (this.selectedCountryData.iso2) {
|
|
3654
3663
|
this.defaultCountry = this.selectedCountryData.iso2;
|
|
@@ -3755,11 +3764,12 @@ var Iti = class _Iti {
|
|
|
3755
3764
|
}
|
|
3756
3765
|
this.ui.dropdownContent.classList.add(CLASSES.HIDE);
|
|
3757
3766
|
this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
|
|
3758
|
-
if (this.ui.highlightedItem) {
|
|
3759
|
-
this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
|
|
3760
|
-
}
|
|
3761
3767
|
if (this.options.countrySearch) {
|
|
3762
3768
|
this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
|
|
3769
|
+
if (this.ui.highlightedItem) {
|
|
3770
|
+
this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
|
|
3771
|
+
this.ui.highlightedItem = null;
|
|
3772
|
+
}
|
|
3763
3773
|
}
|
|
3764
3774
|
this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
|
|
3765
3775
|
this.dropdownAbortController.abort();
|
|
@@ -4096,7 +4106,7 @@ var intlTelInput = Object.assign(
|
|
|
4096
4106
|
attachUtils,
|
|
4097
4107
|
startedLoadingUtilsScript: false,
|
|
4098
4108
|
startedLoadingAutoCountry: false,
|
|
4099
|
-
version: "25.13.
|
|
4109
|
+
version: "25.13.2"
|
|
4100
4110
|
}
|
|
4101
4111
|
);
|
|
4102
4112
|
var intl_tel_input_default = intlTelInput;
|