intl-tel-input 27.3.0 → 28.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/css/intlTelInput-no-assets.css +2 -2
  2. package/dist/css/intlTelInput.css +3 -3
  3. package/dist/js/data.d.ts +1 -4
  4. package/dist/js/data.js +3 -9
  5. package/dist/js/data.min.js +2 -2
  6. package/dist/js/data.mjs +2 -8
  7. package/dist/js/i18n.d.ts +1 -1592
  8. package/dist/js/intlTelInput.d.ts +62 -49
  9. package/dist/js/intlTelInput.js +221 -182
  10. package/dist/js/intlTelInput.min.js +6 -6
  11. package/dist/js/intlTelInput.mjs +219 -180
  12. package/dist/js/intlTelInputWithUtils.js +622 -568
  13. package/dist/js/intlTelInputWithUtils.min.js +6 -6
  14. package/dist/js/intlTelInputWithUtils.mjs +620 -566
  15. package/dist/js/utils.js +56 -55
  16. package/package.json +14 -181
  17. package/CHANGELOG.md +0 -33
  18. package/angular/README.md +0 -13
  19. package/angular/dist/IntlTelInput.d.ts +0 -110
  20. package/angular/dist/IntlTelInput.js +0 -5096
  21. package/angular/dist/IntlTelInputWithUtils.d.ts +0 -3
  22. package/angular/dist/IntlTelInputWithUtils.js +0 -11435
  23. package/react/README.md +0 -13
  24. package/react/dist/IntlTelInput.d.ts +0 -25
  25. package/react/dist/IntlTelInput.js +0 -4788
  26. package/react/dist/IntlTelInputWithUtils.d.ts +0 -4
  27. package/react/dist/IntlTelInputWithUtils.js +0 -11127
  28. package/svelte/README.md +0 -14
  29. package/svelte/src/IntlTelInput.svelte +0 -233
  30. package/svelte/src/IntlTelInput.svelte.d.ts +0 -36
  31. package/svelte/src/IntlTelInputWithUtils.svelte +0 -24
  32. package/vue/README.md +0 -14
  33. package/vue/dist/IntlTelInput-jw1tkqdD.js +0 -2657
  34. package/vue/dist/IntlTelInput.js +0 -5
  35. package/vue/dist/IntlTelInput.vue.d.ts +0 -43
  36. package/vue/dist/IntlTelInputWithUtils.js +0 -49403
  37. package/vue/dist/index.d.ts +0 -4
  38. package/vue/dist/indexWithUtils.d.ts +0 -3
@@ -1,4788 +0,0 @@
1
- // src/js/data.ts
2
- var rawCountryData = [
3
- [
4
- "af",
5
- // Afghanistan
6
- "93",
7
- 0,
8
- null,
9
- "0"
10
- ],
11
- [
12
- "ax",
13
- // Åland Islands (AKA Aland Islands)
14
- "358",
15
- 1,
16
- ["18", "4"],
17
- // (4 is a mobile range shared with FI)
18
- // NOTE: https://en.wikipedia.org/wiki/Telephone%20numbers%20in%20%C3%85land says some 4XXX ranges (e.g. 4570) are specific to AX, but LPN doesn't respect this (https://libphonenumber.appspot.com/phonenumberparser?number=%2B3584570123456 says region=FI) so we won't either. Also it's too much of a maintenance burden to keep track of. Keep the 4 area code range here so that if the user selects AX and types this kind of number, we wont change the flag to FI. Whereas if they type a FI-only range then we will.
19
- "0"
20
- ],
21
- [
22
- "al",
23
- // Albania
24
- "355",
25
- 0,
26
- null,
27
- "0"
28
- ],
29
- [
30
- "dz",
31
- // Algeria
32
- "213",
33
- 0,
34
- null,
35
- "0"
36
- ],
37
- [
38
- "as",
39
- // American Samoa
40
- "1",
41
- 5,
42
- ["684"],
43
- "1"
44
- ],
45
- [
46
- "ad",
47
- // Andorra
48
- "376"
49
- ],
50
- [
51
- "ao",
52
- // Angola
53
- "244"
54
- ],
55
- [
56
- "ai",
57
- // Anguilla
58
- "1",
59
- 6,
60
- ["264"],
61
- "1"
62
- ],
63
- [
64
- "ag",
65
- // Antigua and Barbuda
66
- "1",
67
- 7,
68
- ["268"],
69
- "1"
70
- ],
71
- [
72
- "ar",
73
- // Argentina
74
- "54",
75
- 0,
76
- null,
77
- "0"
78
- ],
79
- [
80
- "am",
81
- // Armenia
82
- "374",
83
- 0,
84
- null,
85
- "0"
86
- ],
87
- [
88
- "aw",
89
- // Aruba
90
- "297"
91
- ],
92
- [
93
- "ac",
94
- // Ascension Island
95
- "247"
96
- ],
97
- [
98
- "au",
99
- // Australia
100
- "61",
101
- 0,
102
- ["4"],
103
- // (mobile range shared with CX and CC)
104
- "0"
105
- ],
106
- [
107
- "at",
108
- // Austria
109
- "43",
110
- 0,
111
- null,
112
- "0"
113
- ],
114
- [
115
- "az",
116
- // Azerbaijan
117
- "994",
118
- 0,
119
- null,
120
- "0"
121
- ],
122
- [
123
- "bs",
124
- // Bahamas
125
- "1",
126
- 8,
127
- ["242"],
128
- "1"
129
- ],
130
- [
131
- "bh",
132
- // Bahrain
133
- "973"
134
- ],
135
- [
136
- "bd",
137
- // Bangladesh
138
- "880",
139
- 0,
140
- null,
141
- "0"
142
- ],
143
- [
144
- "bb",
145
- // Barbados
146
- "1",
147
- 9,
148
- ["246"],
149
- "1"
150
- ],
151
- [
152
- "by",
153
- // Belarus
154
- "375",
155
- 0,
156
- null,
157
- "8"
158
- ],
159
- [
160
- "be",
161
- // Belgium
162
- "32",
163
- 0,
164
- null,
165
- "0"
166
- ],
167
- [
168
- "bz",
169
- // Belize
170
- "501"
171
- ],
172
- [
173
- "bj",
174
- // Benin
175
- "229"
176
- ],
177
- [
178
- "bm",
179
- // Bermuda
180
- "1",
181
- 10,
182
- ["441"],
183
- "1"
184
- ],
185
- [
186
- "bt",
187
- // Bhutan
188
- "975"
189
- ],
190
- [
191
- "bo",
192
- // Bolivia
193
- "591",
194
- 0,
195
- null,
196
- "0"
197
- ],
198
- [
199
- "ba",
200
- // Bosnia and Herzegovina
201
- "387",
202
- 0,
203
- null,
204
- "0"
205
- ],
206
- [
207
- "bw",
208
- // Botswana
209
- "267"
210
- ],
211
- [
212
- "br",
213
- // Brazil
214
- "55",
215
- 0,
216
- null,
217
- "0"
218
- ],
219
- [
220
- "io",
221
- // British Indian Ocean Territory
222
- "246"
223
- ],
224
- [
225
- "vg",
226
- // British Virgin Islands
227
- "1",
228
- 11,
229
- ["284"],
230
- "1"
231
- ],
232
- [
233
- "bn",
234
- // Brunei
235
- "673"
236
- ],
237
- [
238
- "bg",
239
- // Bulgaria
240
- "359",
241
- 0,
242
- null,
243
- "0"
244
- ],
245
- [
246
- "bf",
247
- // Burkina Faso
248
- "226"
249
- ],
250
- [
251
- "bi",
252
- // Burundi
253
- "257"
254
- ],
255
- [
256
- "kh",
257
- // Cambodia
258
- "855",
259
- 0,
260
- null,
261
- "0"
262
- ],
263
- [
264
- "cm",
265
- // Cameroon
266
- "237"
267
- ],
268
- [
269
- "ca",
270
- // Canada
271
- "1",
272
- 1,
273
- [
274
- "204",
275
- "226",
276
- "236",
277
- "249",
278
- "250",
279
- "257",
280
- "263",
281
- "289",
282
- "306",
283
- "343",
284
- "354",
285
- "365",
286
- "367",
287
- "368",
288
- "382",
289
- "403",
290
- "416",
291
- "418",
292
- "428",
293
- "431",
294
- "437",
295
- "438",
296
- "450",
297
- "468",
298
- "474",
299
- "506",
300
- "514",
301
- "519",
302
- "548",
303
- "579",
304
- "581",
305
- "584",
306
- "587",
307
- "604",
308
- "613",
309
- "639",
310
- "647",
311
- "672",
312
- "683",
313
- "705",
314
- "709",
315
- "742",
316
- "753",
317
- "778",
318
- "780",
319
- "782",
320
- "807",
321
- "819",
322
- "825",
323
- "867",
324
- "873",
325
- "879",
326
- "902",
327
- "905",
328
- "942"
329
- ],
330
- "1"
331
- ],
332
- [
333
- "cv",
334
- // Cape Verde
335
- "238"
336
- ],
337
- [
338
- "bq",
339
- // Caribbean Netherlands
340
- "599",
341
- 1,
342
- ["3", "4", "7"]
343
- ],
344
- [
345
- "ky",
346
- // Cayman Islands
347
- "1",
348
- 12,
349
- ["345"],
350
- "1"
351
- ],
352
- [
353
- "cf",
354
- // Central African Republic
355
- "236"
356
- ],
357
- [
358
- "td",
359
- // Chad
360
- "235"
361
- ],
362
- [
363
- "cl",
364
- // Chile
365
- "56"
366
- ],
367
- [
368
- "cn",
369
- // China
370
- "86",
371
- 0,
372
- null,
373
- "0"
374
- ],
375
- [
376
- "cx",
377
- // Christmas Island
378
- "61",
379
- 2,
380
- ["4", "89164"],
381
- // (4 is a mobile range shared with AU and CC)
382
- "0"
383
- ],
384
- [
385
- "cc",
386
- // Cocos (Keeling) Islands
387
- "61",
388
- 1,
389
- ["4", "89162"],
390
- // (4 is a mobile range shared with AU and CX)
391
- "0"
392
- ],
393
- [
394
- "co",
395
- // Colombia
396
- "57",
397
- 0,
398
- null,
399
- "0"
400
- ],
401
- [
402
- "km",
403
- // Comoros
404
- "269"
405
- ],
406
- [
407
- "cg",
408
- // Congo (Brazzaville)
409
- "242"
410
- ],
411
- [
412
- "cd",
413
- // Congo (Kinshasa)
414
- "243",
415
- 0,
416
- null,
417
- "0"
418
- ],
419
- [
420
- "ck",
421
- // Cook Islands
422
- "682"
423
- ],
424
- [
425
- "cr",
426
- // Costa Rica
427
- "506"
428
- ],
429
- [
430
- "ci",
431
- // Côte d'Ivoire
432
- "225"
433
- ],
434
- [
435
- "hr",
436
- // Croatia
437
- "385",
438
- 0,
439
- null,
440
- "0"
441
- ],
442
- [
443
- "cu",
444
- // Cuba
445
- "53",
446
- 0,
447
- null,
448
- "0"
449
- ],
450
- [
451
- "cw",
452
- // Curaçao
453
- "599",
454
- 0
455
- ],
456
- [
457
- "cy",
458
- // Cyprus
459
- "357"
460
- ],
461
- [
462
- "cz",
463
- // Czech Republic
464
- "420"
465
- ],
466
- [
467
- "dk",
468
- // Denmark
469
- "45"
470
- ],
471
- [
472
- "dj",
473
- // Djibouti
474
- "253"
475
- ],
476
- [
477
- "dm",
478
- // Dominica
479
- "1",
480
- 13,
481
- ["767"],
482
- "1"
483
- ],
484
- [
485
- "do",
486
- // Dominican Republic
487
- "1",
488
- 2,
489
- ["809", "829", "849"],
490
- "1"
491
- ],
492
- [
493
- "ec",
494
- // Ecuador
495
- "593",
496
- 0,
497
- null,
498
- "0"
499
- ],
500
- [
501
- "eg",
502
- // Egypt
503
- "20",
504
- 0,
505
- null,
506
- "0"
507
- ],
508
- [
509
- "sv",
510
- // El Salvador
511
- "503"
512
- ],
513
- [
514
- "gq",
515
- // Equatorial Guinea
516
- "240"
517
- ],
518
- [
519
- "er",
520
- // Eritrea
521
- "291",
522
- 0,
523
- null,
524
- "0"
525
- ],
526
- [
527
- "ee",
528
- // Estonia
529
- "372"
530
- ],
531
- [
532
- "sz",
533
- // Eswatini
534
- "268"
535
- ],
536
- [
537
- "et",
538
- // Ethiopia
539
- "251",
540
- 0,
541
- null,
542
- "0"
543
- ],
544
- [
545
- "fk",
546
- // Falkland Islands (Malvinas)
547
- "500"
548
- ],
549
- [
550
- "fo",
551
- // Faroe Islands
552
- "298"
553
- ],
554
- [
555
- "fj",
556
- // Fiji
557
- "679"
558
- ],
559
- [
560
- "fi",
561
- // Finland
562
- "358",
563
- 0,
564
- ["4"],
565
- // (mobile range shared with AX)
566
- "0"
567
- ],
568
- [
569
- "fr",
570
- // France
571
- "33",
572
- 0,
573
- null,
574
- "0"
575
- ],
576
- [
577
- "gf",
578
- // French Guiana
579
- "594",
580
- 0,
581
- null,
582
- "0"
583
- ],
584
- [
585
- "pf",
586
- // French Polynesia
587
- "689"
588
- ],
589
- [
590
- "ga",
591
- // Gabon
592
- "241"
593
- ],
594
- [
595
- "gm",
596
- // Gambia
597
- "220"
598
- ],
599
- [
600
- "ge",
601
- // Georgia
602
- "995",
603
- 0,
604
- null,
605
- "0"
606
- ],
607
- [
608
- "de",
609
- // Germany
610
- "49",
611
- 0,
612
- null,
613
- "0"
614
- ],
615
- [
616
- "gh",
617
- // Ghana
618
- "233",
619
- 0,
620
- null,
621
- "0"
622
- ],
623
- [
624
- "gi",
625
- // Gibraltar
626
- "350"
627
- ],
628
- [
629
- "gr",
630
- // Greece
631
- "30"
632
- ],
633
- [
634
- "gl",
635
- // Greenland
636
- "299"
637
- ],
638
- [
639
- "gd",
640
- // Grenada
641
- "1",
642
- 14,
643
- ["473"],
644
- "1"
645
- ],
646
- [
647
- "gp",
648
- // Guadeloupe
649
- "590",
650
- 0,
651
- null,
652
- "0"
653
- ],
654
- [
655
- "gu",
656
- // Guam
657
- "1",
658
- 15,
659
- ["671"],
660
- "1"
661
- ],
662
- [
663
- "gt",
664
- // Guatemala
665
- "502"
666
- ],
667
- [
668
- "gg",
669
- // Guernsey
670
- "44",
671
- 1,
672
- ["1481", "7781", "7839", "7911"],
673
- "0"
674
- ],
675
- [
676
- "gn",
677
- // Guinea
678
- "224"
679
- ],
680
- [
681
- "gw",
682
- // Guinea-Bissau
683
- "245"
684
- ],
685
- [
686
- "gy",
687
- // Guyana
688
- "592"
689
- ],
690
- [
691
- "ht",
692
- // Haiti
693
- "509"
694
- ],
695
- [
696
- "hn",
697
- // Honduras
698
- "504"
699
- ],
700
- [
701
- "hk",
702
- // Hong Kong SAR China
703
- "852"
704
- ],
705
- [
706
- "hu",
707
- // Hungary
708
- "36",
709
- 0,
710
- null,
711
- "06"
712
- ],
713
- [
714
- "is",
715
- // Iceland
716
- "354"
717
- ],
718
- [
719
- "in",
720
- // India
721
- "91",
722
- 0,
723
- null,
724
- "0"
725
- ],
726
- [
727
- "id",
728
- // Indonesia
729
- "62",
730
- 0,
731
- null,
732
- "0"
733
- ],
734
- [
735
- "ir",
736
- // Iran
737
- "98",
738
- 0,
739
- null,
740
- "0"
741
- ],
742
- [
743
- "iq",
744
- // Iraq
745
- "964",
746
- 0,
747
- null,
748
- "0"
749
- ],
750
- [
751
- "ie",
752
- // Ireland
753
- "353",
754
- 0,
755
- null,
756
- "0"
757
- ],
758
- [
759
- "im",
760
- // Isle of Man
761
- "44",
762
- 2,
763
- ["1624", "74576", "7524", "7624", "7924"],
764
- "0"
765
- ],
766
- [
767
- "il",
768
- // Israel
769
- "972",
770
- 0,
771
- null,
772
- "0"
773
- ],
774
- [
775
- "it",
776
- // Italy
777
- "39",
778
- 0,
779
- ["3"]
780
- // (mobile range shared with VA)
781
- ],
782
- [
783
- "jm",
784
- // Jamaica
785
- "1",
786
- 4,
787
- ["658", "876"],
788
- "1"
789
- ],
790
- [
791
- "jp",
792
- // Japan
793
- "81",
794
- 0,
795
- null,
796
- "0"
797
- ],
798
- [
799
- "je",
800
- // Jersey
801
- "44",
802
- 3,
803
- ["1534", "7509", "7700", "7797", "7829", "7937"],
804
- "0"
805
- ],
806
- [
807
- "jo",
808
- // Jordan
809
- "962",
810
- 0,
811
- null,
812
- "0"
813
- ],
814
- [
815
- "kz",
816
- // Kazakhstan
817
- "7",
818
- 1,
819
- ["33", "7"],
820
- // (33 is shared with RU)
821
- "8"
822
- ],
823
- [
824
- "ke",
825
- // Kenya
826
- "254",
827
- 0,
828
- null,
829
- "0"
830
- ],
831
- [
832
- "ki",
833
- // Kiribati
834
- "686",
835
- 0,
836
- null,
837
- "0"
838
- ],
839
- [
840
- "xk",
841
- // Kosovo
842
- "383",
843
- 0,
844
- null,
845
- "0"
846
- ],
847
- [
848
- "kw",
849
- // Kuwait
850
- "965"
851
- ],
852
- [
853
- "kg",
854
- // Kyrgyzstan
855
- "996",
856
- 0,
857
- null,
858
- "0"
859
- ],
860
- [
861
- "la",
862
- // Laos
863
- "856",
864
- 0,
865
- null,
866
- "0"
867
- ],
868
- [
869
- "lv",
870
- // Latvia
871
- "371"
872
- ],
873
- [
874
- "lb",
875
- // Lebanon
876
- "961",
877
- 0,
878
- null,
879
- "0"
880
- ],
881
- [
882
- "ls",
883
- // Lesotho
884
- "266"
885
- ],
886
- [
887
- "lr",
888
- // Liberia
889
- "231",
890
- 0,
891
- null,
892
- "0"
893
- ],
894
- [
895
- "ly",
896
- // Libya
897
- "218",
898
- 0,
899
- null,
900
- "0"
901
- ],
902
- [
903
- "li",
904
- // Liechtenstein
905
- "423",
906
- 0,
907
- null,
908
- "0"
909
- ],
910
- [
911
- "lt",
912
- // Lithuania
913
- "370",
914
- 0,
915
- null,
916
- "0"
917
- ],
918
- [
919
- "lu",
920
- // Luxembourg
921
- "352"
922
- ],
923
- [
924
- "mo",
925
- // Macao SAR China
926
- "853"
927
- ],
928
- [
929
- "mg",
930
- // Madagascar
931
- "261",
932
- 0,
933
- null,
934
- "0"
935
- ],
936
- [
937
- "mw",
938
- // Malawi
939
- "265",
940
- 0,
941
- null,
942
- "0"
943
- ],
944
- [
945
- "my",
946
- // Malaysia
947
- "60",
948
- 0,
949
- null,
950
- "0"
951
- ],
952
- [
953
- "mv",
954
- // Maldives
955
- "960"
956
- ],
957
- [
958
- "ml",
959
- // Mali
960
- "223"
961
- ],
962
- [
963
- "mt",
964
- // Malta
965
- "356"
966
- ],
967
- [
968
- "mh",
969
- // Marshall Islands
970
- "692",
971
- 0,
972
- null,
973
- "1"
974
- ],
975
- [
976
- "mq",
977
- // Martinique
978
- "596",
979
- 0,
980
- null,
981
- "0"
982
- ],
983
- [
984
- "mr",
985
- // Mauritania
986
- "222"
987
- ],
988
- [
989
- "mu",
990
- // Mauritius
991
- "230"
992
- ],
993
- [
994
- "yt",
995
- // Mayotte
996
- "262",
997
- 1,
998
- ["269", "639"],
999
- "0"
1000
- ],
1001
- [
1002
- "mx",
1003
- // Mexico
1004
- "52"
1005
- ],
1006
- [
1007
- "fm",
1008
- // Micronesia
1009
- "691"
1010
- ],
1011
- [
1012
- "md",
1013
- // Moldova
1014
- "373",
1015
- 0,
1016
- null,
1017
- "0"
1018
- ],
1019
- [
1020
- "mc",
1021
- // Monaco
1022
- "377",
1023
- 0,
1024
- null,
1025
- "0"
1026
- ],
1027
- [
1028
- "mn",
1029
- // Mongolia
1030
- "976",
1031
- 0,
1032
- null,
1033
- "0"
1034
- ],
1035
- [
1036
- "me",
1037
- // Montenegro
1038
- "382",
1039
- 0,
1040
- null,
1041
- "0"
1042
- ],
1043
- [
1044
- "ms",
1045
- // Montserrat
1046
- "1",
1047
- 16,
1048
- ["664"],
1049
- "1"
1050
- ],
1051
- [
1052
- "ma",
1053
- // Morocco
1054
- "212",
1055
- 0,
1056
- ["6", "7"],
1057
- // (mobile ranges shared with EH)
1058
- "0"
1059
- ],
1060
- [
1061
- "mz",
1062
- // Mozambique
1063
- "258"
1064
- ],
1065
- [
1066
- "mm",
1067
- // Myanmar (Burma)
1068
- "95",
1069
- 0,
1070
- null,
1071
- "0"
1072
- ],
1073
- [
1074
- "na",
1075
- // Namibia
1076
- "264",
1077
- 0,
1078
- null,
1079
- "0"
1080
- ],
1081
- [
1082
- "nr",
1083
- // Nauru
1084
- "674"
1085
- ],
1086
- [
1087
- "np",
1088
- // Nepal
1089
- "977",
1090
- 0,
1091
- null,
1092
- "0"
1093
- ],
1094
- [
1095
- "nl",
1096
- // Netherlands
1097
- "31",
1098
- 0,
1099
- null,
1100
- "0"
1101
- ],
1102
- [
1103
- "nc",
1104
- // New Caledonia
1105
- "687"
1106
- ],
1107
- [
1108
- "nz",
1109
- // New Zealand
1110
- "64",
1111
- 0,
1112
- null,
1113
- "0"
1114
- ],
1115
- [
1116
- "ni",
1117
- // Nicaragua
1118
- "505"
1119
- ],
1120
- [
1121
- "ne",
1122
- // Niger
1123
- "227"
1124
- ],
1125
- [
1126
- "ng",
1127
- // Nigeria
1128
- "234",
1129
- 0,
1130
- null,
1131
- "0"
1132
- ],
1133
- [
1134
- "nu",
1135
- // Niue
1136
- "683"
1137
- ],
1138
- [
1139
- "nf",
1140
- // Norfolk Island
1141
- "672"
1142
- ],
1143
- [
1144
- "kp",
1145
- // North Korea
1146
- "850",
1147
- 0,
1148
- null,
1149
- "0"
1150
- ],
1151
- [
1152
- "mk",
1153
- // North Macedonia
1154
- "389",
1155
- 0,
1156
- null,
1157
- "0"
1158
- ],
1159
- [
1160
- "mp",
1161
- // Northern Mariana Islands
1162
- "1",
1163
- 17,
1164
- ["670"],
1165
- "1"
1166
- ],
1167
- [
1168
- "no",
1169
- // Norway
1170
- "47",
1171
- 0,
1172
- ["4", "9"]
1173
- // (mobile ranges shared with SJ)
1174
- ],
1175
- [
1176
- "om",
1177
- // Oman
1178
- "968"
1179
- ],
1180
- [
1181
- "pk",
1182
- // Pakistan
1183
- "92",
1184
- 0,
1185
- null,
1186
- "0"
1187
- ],
1188
- [
1189
- "pw",
1190
- // Palau
1191
- "680"
1192
- ],
1193
- [
1194
- "ps",
1195
- // Palestinian Territories
1196
- "970",
1197
- 0,
1198
- null,
1199
- "0"
1200
- ],
1201
- [
1202
- "pa",
1203
- // Panama
1204
- "507"
1205
- ],
1206
- [
1207
- "pg",
1208
- // Papua New Guinea
1209
- "675"
1210
- ],
1211
- [
1212
- "py",
1213
- // Paraguay
1214
- "595",
1215
- 0,
1216
- null,
1217
- "0"
1218
- ],
1219
- [
1220
- "pe",
1221
- // Peru
1222
- "51",
1223
- 0,
1224
- null,
1225
- "0"
1226
- ],
1227
- [
1228
- "ph",
1229
- // Philippines
1230
- "63",
1231
- 0,
1232
- null,
1233
- "0"
1234
- ],
1235
- [
1236
- "pl",
1237
- // Poland
1238
- "48"
1239
- ],
1240
- [
1241
- "pt",
1242
- // Portugal
1243
- "351"
1244
- ],
1245
- [
1246
- "pr",
1247
- // Puerto Rico
1248
- "1",
1249
- 3,
1250
- ["787", "939"],
1251
- "1"
1252
- ],
1253
- [
1254
- "qa",
1255
- // Qatar
1256
- "974"
1257
- ],
1258
- [
1259
- "re",
1260
- // Réunion
1261
- "262",
1262
- 0,
1263
- null,
1264
- "0"
1265
- ],
1266
- [
1267
- "ro",
1268
- // Romania
1269
- "40",
1270
- 0,
1271
- null,
1272
- "0"
1273
- ],
1274
- [
1275
- "ru",
1276
- // Russia
1277
- "7",
1278
- 0,
1279
- ["33"],
1280
- // (shared with KZ)
1281
- "8"
1282
- ],
1283
- [
1284
- "rw",
1285
- // Rwanda
1286
- "250",
1287
- 0,
1288
- null,
1289
- "0"
1290
- ],
1291
- [
1292
- "ws",
1293
- // Samoa
1294
- "685"
1295
- ],
1296
- [
1297
- "sm",
1298
- // San Marino
1299
- "378"
1300
- ],
1301
- [
1302
- "st",
1303
- // São Tomé & Príncipe
1304
- "239"
1305
- ],
1306
- [
1307
- "sa",
1308
- // Saudi Arabia
1309
- "966",
1310
- 0,
1311
- null,
1312
- "0"
1313
- ],
1314
- [
1315
- "sn",
1316
- // Senegal
1317
- "221"
1318
- ],
1319
- [
1320
- "rs",
1321
- // Serbia
1322
- "381",
1323
- 0,
1324
- null,
1325
- "0"
1326
- ],
1327
- [
1328
- "sc",
1329
- // Seychelles
1330
- "248"
1331
- ],
1332
- [
1333
- "sl",
1334
- // Sierra Leone
1335
- "232",
1336
- 0,
1337
- null,
1338
- "0"
1339
- ],
1340
- [
1341
- "sg",
1342
- // Singapore
1343
- "65"
1344
- ],
1345
- [
1346
- "sx",
1347
- // Sint Maarten
1348
- "1",
1349
- 21,
1350
- ["721"],
1351
- "1"
1352
- ],
1353
- [
1354
- "sk",
1355
- // Slovakia
1356
- "421",
1357
- 0,
1358
- null,
1359
- "0"
1360
- ],
1361
- [
1362
- "si",
1363
- // Slovenia
1364
- "386",
1365
- 0,
1366
- null,
1367
- "0"
1368
- ],
1369
- [
1370
- "sb",
1371
- // Solomon Islands
1372
- "677"
1373
- ],
1374
- [
1375
- "so",
1376
- // Somalia
1377
- "252",
1378
- 0,
1379
- null,
1380
- "0"
1381
- ],
1382
- [
1383
- "za",
1384
- // South Africa
1385
- "27",
1386
- 0,
1387
- null,
1388
- "0"
1389
- ],
1390
- [
1391
- "kr",
1392
- // South Korea
1393
- "82",
1394
- 0,
1395
- null,
1396
- "0"
1397
- ],
1398
- [
1399
- "ss",
1400
- // South Sudan
1401
- "211",
1402
- 0,
1403
- null,
1404
- "0"
1405
- ],
1406
- [
1407
- "es",
1408
- // Spain
1409
- "34"
1410
- ],
1411
- [
1412
- "lk",
1413
- // Sri Lanka
1414
- "94",
1415
- 0,
1416
- null,
1417
- "0"
1418
- ],
1419
- [
1420
- "bl",
1421
- // St. Barthélemy
1422
- "590",
1423
- 1,
1424
- null,
1425
- "0"
1426
- ],
1427
- [
1428
- "sh",
1429
- // St. Helena
1430
- "290"
1431
- ],
1432
- [
1433
- "kn",
1434
- // St. Kitts & Nevis
1435
- "1",
1436
- 18,
1437
- ["869"],
1438
- "1"
1439
- ],
1440
- [
1441
- "lc",
1442
- // St. Lucia
1443
- "1",
1444
- 19,
1445
- ["758"],
1446
- "1"
1447
- ],
1448
- [
1449
- "mf",
1450
- // St. Martin
1451
- "590",
1452
- 2,
1453
- null,
1454
- "0"
1455
- ],
1456
- [
1457
- "pm",
1458
- // St. Pierre & Miquelon
1459
- "508",
1460
- 0,
1461
- null,
1462
- "0"
1463
- ],
1464
- [
1465
- "vc",
1466
- // St. Vincent & Grenadines
1467
- "1",
1468
- 20,
1469
- ["784"],
1470
- "1"
1471
- ],
1472
- [
1473
- "sd",
1474
- // Sudan
1475
- "249",
1476
- 0,
1477
- null,
1478
- "0"
1479
- ],
1480
- [
1481
- "sr",
1482
- // Suriname
1483
- "597"
1484
- ],
1485
- [
1486
- "sj",
1487
- // Svalbard & Jan Mayen
1488
- "47",
1489
- 1,
1490
- ["4", "79", "9"]
1491
- // (4 and 9 are mobile ranges shared with NO)
1492
- ],
1493
- [
1494
- "se",
1495
- // Sweden
1496
- "46",
1497
- 0,
1498
- null,
1499
- "0"
1500
- ],
1501
- [
1502
- "ch",
1503
- // Switzerland
1504
- "41",
1505
- 0,
1506
- null,
1507
- "0"
1508
- ],
1509
- [
1510
- "sy",
1511
- // Syria
1512
- "963",
1513
- 0,
1514
- null,
1515
- "0"
1516
- ],
1517
- [
1518
- "tw",
1519
- // Taiwan
1520
- "886",
1521
- 0,
1522
- null,
1523
- "0"
1524
- ],
1525
- [
1526
- "tj",
1527
- // Tajikistan
1528
- "992"
1529
- ],
1530
- [
1531
- "tz",
1532
- // Tanzania
1533
- "255",
1534
- 0,
1535
- null,
1536
- "0"
1537
- ],
1538
- [
1539
- "th",
1540
- // Thailand
1541
- "66",
1542
- 0,
1543
- null,
1544
- "0"
1545
- ],
1546
- [
1547
- "tl",
1548
- // Timor-Leste
1549
- "670"
1550
- ],
1551
- [
1552
- "tg",
1553
- // Togo
1554
- "228"
1555
- ],
1556
- [
1557
- "tk",
1558
- // Tokelau
1559
- "690"
1560
- ],
1561
- [
1562
- "to",
1563
- // Tonga
1564
- "676"
1565
- ],
1566
- [
1567
- "tt",
1568
- // Trinidad & Tobago
1569
- "1",
1570
- 22,
1571
- ["868"],
1572
- "1"
1573
- ],
1574
- [
1575
- "tn",
1576
- // Tunisia
1577
- "216"
1578
- ],
1579
- [
1580
- "tr",
1581
- // Turkey
1582
- "90",
1583
- 0,
1584
- null,
1585
- "0"
1586
- ],
1587
- [
1588
- "tm",
1589
- // Turkmenistan
1590
- "993",
1591
- 0,
1592
- null,
1593
- "8"
1594
- ],
1595
- [
1596
- "tc",
1597
- // Turks & Caicos Islands
1598
- "1",
1599
- 23,
1600
- ["649"],
1601
- "1"
1602
- ],
1603
- [
1604
- "tv",
1605
- // Tuvalu
1606
- "688"
1607
- ],
1608
- [
1609
- "vi",
1610
- // U.S. Virgin Islands
1611
- "1",
1612
- 24,
1613
- ["340"],
1614
- "1"
1615
- ],
1616
- [
1617
- "ug",
1618
- // Uganda
1619
- "256",
1620
- 0,
1621
- null,
1622
- "0"
1623
- ],
1624
- [
1625
- "ua",
1626
- // Ukraine
1627
- "380",
1628
- 0,
1629
- null,
1630
- "0"
1631
- ],
1632
- [
1633
- "ae",
1634
- // United Arab Emirates
1635
- "971",
1636
- 0,
1637
- null,
1638
- "0"
1639
- ],
1640
- [
1641
- "gb",
1642
- // United Kingdom
1643
- "44",
1644
- 0,
1645
- null,
1646
- "0"
1647
- ],
1648
- [
1649
- "us",
1650
- // United States
1651
- "1",
1652
- 0,
1653
- null,
1654
- "1"
1655
- ],
1656
- [
1657
- "uy",
1658
- // Uruguay
1659
- "598",
1660
- 0,
1661
- null,
1662
- "0"
1663
- ],
1664
- [
1665
- "uz",
1666
- // Uzbekistan
1667
- "998"
1668
- ],
1669
- [
1670
- "vu",
1671
- // Vanuatu
1672
- "678"
1673
- ],
1674
- [
1675
- "va",
1676
- // Vatican City
1677
- "39",
1678
- 1,
1679
- ["06698", "3"]
1680
- // (3 is a mobile range shared with IT)
1681
- ],
1682
- [
1683
- "ve",
1684
- // Venezuela
1685
- "58",
1686
- 0,
1687
- null,
1688
- "0"
1689
- ],
1690
- [
1691
- "vn",
1692
- // Vietnam
1693
- "84",
1694
- 0,
1695
- null,
1696
- "0"
1697
- ],
1698
- [
1699
- "wf",
1700
- // Wallis & Futuna
1701
- "681"
1702
- ],
1703
- [
1704
- "eh",
1705
- // Western Sahara
1706
- "212",
1707
- 1,
1708
- ["5288", "5289", "6", "7"],
1709
- // (6 and 7 are mobile ranges shared with MA)
1710
- "0"
1711
- ],
1712
- [
1713
- "ye",
1714
- // Yemen
1715
- "967",
1716
- 0,
1717
- null,
1718
- "0"
1719
- ],
1720
- [
1721
- "zm",
1722
- // Zambia
1723
- "260",
1724
- 0,
1725
- null,
1726
- "0"
1727
- ],
1728
- [
1729
- "zw",
1730
- // Zimbabwe
1731
- "263",
1732
- 0,
1733
- null,
1734
- "0"
1735
- ]
1736
- ];
1737
- var allCountries = [];
1738
- for (const c of rawCountryData) {
1739
- allCountries.push({
1740
- name: "",
1741
- // populated in the plugin
1742
- iso2: c[0],
1743
- dialCode: c[1],
1744
- priority: c[2] || 0,
1745
- areaCodes: c[3] || null,
1746
- nationalPrefix: c[4] || null,
1747
- normalisedName: "",
1748
- // populated in the plugin
1749
- initials: "",
1750
- // populated in the plugin
1751
- dialCodePlus: ""
1752
- // populated in the plugin
1753
- });
1754
- }
1755
- var iso2Set = new Set(allCountries.map((c) => c.iso2));
1756
- var isIso2 = (val) => iso2Set.has(val);
1757
- var data_default = allCountries;
1758
-
1759
- // src/js/constants.ts
1760
- var EVENTS = {
1761
- OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
1762
- CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
1763
- COUNTRY_CHANGE: "countrychange",
1764
- INPUT: "input",
1765
- // used for synthetic input trigger
1766
- STRICT_REJECT: "strict:reject"
1767
- };
1768
- var CLASSES = {
1769
- HIDE: "iti__hide",
1770
- V_HIDE: "iti__v-hide",
1771
- ARROW_UP: "iti__arrow--up",
1772
- GLOBE: "iti__globe",
1773
- FLAG: "iti__flag",
1774
- LOADING: "iti__loading",
1775
- COUNTRY_ITEM: "iti__country",
1776
- HIGHLIGHT: "iti__highlight"
1777
- };
1778
- var KEYS = {
1779
- ARROW_UP: "ArrowUp",
1780
- ARROW_DOWN: "ArrowDown",
1781
- SPACE: " ",
1782
- ENTER: "Enter",
1783
- ESC: "Escape",
1784
- TAB: "Tab"
1785
- };
1786
- var INPUT_TYPES = {
1787
- PASTE: "insertFromPaste",
1788
- DELETE_FORWARD: "deleteContentForward"
1789
- };
1790
- var REGEX = {
1791
- ALPHA_UNICODE: /\p{L}/u,
1792
- // any kind of letter from any language
1793
- NON_PLUS_NUMERIC: /[^+0-9]/,
1794
- // chars that are NOT + or digit
1795
- NON_PLUS_NUMERIC_GLOBAL: /[^+0-9]/g,
1796
- // chars that are NOT + or digit (global)
1797
- HIDDEN_SEARCH_CHAR: /^[a-zA-ZÀ-ÿа-яА-Я ]$/
1798
- // single acceptable hidden-search char
1799
- };
1800
- var TIMINGS = {
1801
- SEARCH_DEBOUNCE_MS: 100,
1802
- HIDDEN_SEARCH_RESET_MS: 1e3,
1803
- NEXT_TICK: 0
1804
- };
1805
- var SENTINELS = {
1806
- UNKNOWN_NUMBER_TYPE: -99,
1807
- UNKNOWN_VALIDATION_ERROR: -99
1808
- };
1809
- var LAYOUT = {
1810
- NARROW_VIEWPORT_WIDTH: 500,
1811
- // keep in sync with .iti__country-list CSS media query
1812
- FALLBACK_SELECTED_WITH_DIAL_WIDTH: 78,
1813
- // px width fallback when separateDialCode enabled
1814
- FALLBACK_SELECTED_NO_DIAL_WIDTH: 42,
1815
- // px width fallback when no separate dial code
1816
- INPUT_PADDING_EXTRA_LEFT: 6,
1817
- // px gap between selected country container and input text
1818
- DROPDOWN_MARGIN: 3,
1819
- // px margin between dropdown and tel input
1820
- FALLBACK_DROPDOWN_HEIGHT: 200
1821
- // px height fallback for dropdown
1822
- };
1823
- var DIAL_CODE = {
1824
- PLUS: "+",
1825
- NANP: "1"
1826
- // North American Numbering Plan
1827
- };
1828
- var UK = {
1829
- ISO2: "gb",
1830
- DIAL_CODE: "44",
1831
- // +44 United Kingdom
1832
- MOBILE_PREFIX: "7",
1833
- // UK mobile numbers start with 7 after national trunk (0) or core section
1834
- MOBILE_CORE_LENGTH: 10
1835
- // core number length (excluding dial code / national prefix) for mobiles
1836
- };
1837
- var US = {
1838
- ISO2: "us",
1839
- DIAL_CODE: "1"
1840
- // +1 United States
1841
- };
1842
- var PLACEHOLDER_MODES = {
1843
- AGGRESSIVE: "aggressive",
1844
- POLITE: "polite",
1845
- OFF: "off"
1846
- };
1847
- var INITIAL_COUNTRY = {
1848
- AUTO: "auto"
1849
- };
1850
- var NUMBER_TYPES = [
1851
- "FIXED_LINE",
1852
- "MOBILE",
1853
- "FIXED_LINE_OR_MOBILE",
1854
- "TOLL_FREE",
1855
- "PREMIUM_RATE",
1856
- "SHARED_COST",
1857
- "VOIP",
1858
- "PERSONAL_NUMBER",
1859
- "PAGER",
1860
- "UAN",
1861
- "VOICEMAIL",
1862
- "UNKNOWN"
1863
- ];
1864
- var NUMBER_TYPE_SET = new Set(NUMBER_TYPES);
1865
- var DATA_KEYS = {
1866
- // e.g. <li data-country-code="us"> for country items in dropdown
1867
- // in the future, the value should be changed to "iso2", but this is a breaking change for another day
1868
- ISO2: "countryCode",
1869
- DIAL_CODE: "dialCode",
1870
- // e.g. <input data-intl-tel-input-id="0"> on the input element
1871
- INSTANCE_ID: "intlTelInputId"
1872
- };
1873
- var ARIA = {
1874
- EXPANDED: "aria-expanded",
1875
- LABEL: "aria-label",
1876
- SELECTED: "aria-selected",
1877
- ACTIVE_DESCENDANT: "aria-activedescendant",
1878
- HASPOPUP: "aria-haspopup",
1879
- CONTROLS: "aria-controls",
1880
- HIDDEN: "aria-hidden",
1881
- AUTOCOMPLETE: "aria-autocomplete",
1882
- MODAL: "aria-modal"
1883
- };
1884
-
1885
- // src/js/i18n/en.ts
1886
- var interfaceTranslations = {
1887
- selectedCountryAriaLabel: "Change country for phone number, currently selected ${countryName} (${dialCode})",
1888
- noCountrySelected: "Select country for phone number",
1889
- countryListAriaLabel: "List of countries",
1890
- searchPlaceholder: "Search",
1891
- clearSearchAriaLabel: "Clear search",
1892
- searchEmptyState: "No results found",
1893
- searchSummaryAria(count) {
1894
- if (count === 0) {
1895
- return "No results found";
1896
- }
1897
- if (count === 1) {
1898
- return "1 result found";
1899
- }
1900
- return `${count} results found`;
1901
- }
1902
- };
1903
- var en_default = interfaceTranslations;
1904
-
1905
- // src/js/core/options.ts
1906
- var mediaQuery = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
1907
- var isNarrowViewport = () => mediaQuery(`(max-width: ${LAYOUT.NARROW_VIEWPORT_WIDTH}px)`);
1908
- var computeDefaultUseFullscreenPopup = () => {
1909
- if (typeof navigator !== "undefined" && typeof window !== "undefined") {
1910
- const isShortViewport = mediaQuery("(max-height: 600px)");
1911
- const isCoarsePointer = mediaQuery("(pointer: coarse)");
1912
- return isNarrowViewport() || isCoarsePointer && isShortViewport;
1913
- }
1914
- return false;
1915
- };
1916
- var defaults = {
1917
- //* Whether or not to allow the dropdown.
1918
- allowDropdown: true,
1919
- //* The number type to enforce during validation.
1920
- allowedNumberTypes: ["MOBILE", "FIXED_LINE"],
1921
- //* Whether or not to allow extensions after the main number.
1922
- allowNumberExtensions: false,
1923
- // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
1924
- allowPhonewords: false,
1925
- //* Add a placeholder in the input with an example number for the selected country.
1926
- autoPlaceholder: PLACEHOLDER_MODES.POLITE,
1927
- //* Add a custom class to the (injected) container element.
1928
- containerClass: "",
1929
- //* Locale for localising country names via Intl.DisplayNames.
1930
- countryNameLocale: "en",
1931
- //* The order of the countries in the dropdown. Defaults to alphabetical.
1932
- countryOrder: null,
1933
- //* Add a country search input at the top of the dropdown.
1934
- countrySearch: true,
1935
- //* Modify the auto placeholder.
1936
- customPlaceholder: null,
1937
- //* Always show the dropdown
1938
- dropdownAlwaysOpen: false,
1939
- //* Append menu to specified element.
1940
- dropdownContainer: null,
1941
- //* Don't display these countries.
1942
- excludeCountries: null,
1943
- //* Fix the dropdown width to the input width (rather than being as wide as the longest country name).
1944
- fixDropdownWidth: true,
1945
- //* Format the number as the user types
1946
- formatAsYouType: true,
1947
- //* Format the input value during initialisation and on setNumber.
1948
- formatOnDisplay: true,
1949
- //* geoIp lookup function.
1950
- geoIpLookup: null,
1951
- //* Inject a hidden input with the name returned from this function, and on submit, populate it with the result of getNumber.
1952
- hiddenInput: null,
1953
- //* Internationalise the plugin text e.g. search input placeholder, country names.
1954
- i18n: {},
1955
- //* Initial country.
1956
- initialCountry: "",
1957
- //* A function to load the utils script.
1958
- loadUtils: null,
1959
- //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
1960
- nationalMode: true,
1961
- //* Display only these countries.
1962
- onlyCountries: null,
1963
- //* Number type to use for placeholders.
1964
- placeholderNumberType: "MOBILE",
1965
- //* Add custom classes to the search input element.
1966
- searchInputClass: "",
1967
- //* Display the international dial code next to the selected flag.
1968
- separateDialCode: false,
1969
- //* When strictMode rejects a key (etc), play a short feedback animation
1970
- strictRejectAnimation: false,
1971
- //* Show flags - for both the selected country, and in the country dropdown
1972
- showFlags: true,
1973
- //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
1974
- strictMode: false,
1975
- //* Use full screen popup instead of dropdown for country list.
1976
- useFullscreenPopup: computeDefaultUseFullscreenPopup()
1977
- };
1978
- var toString = (val) => JSON.stringify(val);
1979
- var isPlainObject = (val) => Boolean(val) && typeof val === "object" && !Array.isArray(val);
1980
- var isFunction = (val) => typeof val === "function";
1981
- var isElLike = (val) => {
1982
- if (!val || typeof val !== "object") {
1983
- return false;
1984
- }
1985
- const v = val;
1986
- return v.nodeType === 1 && typeof v.tagName === "string" && typeof v.appendChild === "function";
1987
- };
1988
- var placeholderModeSet = new Set(Object.values(PLACEHOLDER_MODES));
1989
- var warn = (message) => {
1990
- console.warn(`[intl-tel-input] ${message}`);
1991
- };
1992
- var warnOption = (optionName, expectedType, actualValue) => {
1993
- warn(
1994
- `Option '${optionName}' must be ${expectedType}; got ${toString(actualValue)}. Ignoring.`
1995
- );
1996
- };
1997
- var validateIso2Array = (key, value) => {
1998
- const expectedType = "an array of iso2 country code strings";
1999
- if (!Array.isArray(value)) {
2000
- warnOption(key, expectedType, value);
2001
- return false;
2002
- }
2003
- const valid = [];
2004
- for (const v of value) {
2005
- if (typeof v !== "string") {
2006
- warnOption(key, expectedType, value);
2007
- return false;
2008
- }
2009
- const lower = v.toLowerCase();
2010
- if (!isIso2(lower)) {
2011
- warn(`Invalid iso2 code in '${key}': '${v}'. Skipping.`);
2012
- } else {
2013
- valid.push(v);
2014
- }
2015
- }
2016
- return valid;
2017
- };
2018
- var validateOptions = (customOptions) => {
2019
- if (customOptions === void 0) {
2020
- return {};
2021
- }
2022
- if (!isPlainObject(customOptions)) {
2023
- const error = `The second argument must be an options object; got ${toString(customOptions)}. Using defaults.`;
2024
- warn(error);
2025
- return {};
2026
- }
2027
- const validatedOptions = {};
2028
- for (const [key, value] of Object.entries(customOptions)) {
2029
- if (!Object.hasOwn(defaults, key)) {
2030
- warn(`Unknown option '${key}'. Ignoring.`);
2031
- continue;
2032
- }
2033
- switch (key) {
2034
- case "allowDropdown":
2035
- case "allowNumberExtensions":
2036
- case "allowPhonewords":
2037
- case "countrySearch":
2038
- case "dropdownAlwaysOpen":
2039
- case "fixDropdownWidth":
2040
- case "formatAsYouType":
2041
- case "formatOnDisplay":
2042
- case "nationalMode":
2043
- case "showFlags":
2044
- case "separateDialCode":
2045
- case "strictMode":
2046
- case "strictRejectAnimation":
2047
- case "useFullscreenPopup":
2048
- if (typeof value !== "boolean") {
2049
- warnOption(key, "a boolean", value);
2050
- break;
2051
- }
2052
- validatedOptions[key] = value;
2053
- break;
2054
- case "autoPlaceholder":
2055
- if (typeof value !== "string" || !placeholderModeSet.has(value)) {
2056
- const validModes = Array.from(placeholderModeSet).join(", ");
2057
- warnOption("autoPlaceholder", `one of ${validModes}`, value);
2058
- break;
2059
- }
2060
- validatedOptions[key] = value;
2061
- break;
2062
- case "containerClass":
2063
- case "searchInputClass":
2064
- case "countryNameLocale":
2065
- if (typeof value !== "string") {
2066
- warnOption(key, "a string", value);
2067
- break;
2068
- }
2069
- validatedOptions[key] = value;
2070
- break;
2071
- case "countryOrder": {
2072
- if (value === null) {
2073
- validatedOptions[key] = value;
2074
- } else {
2075
- const filtered = validateIso2Array(key, value);
2076
- if (filtered !== false) {
2077
- validatedOptions[key] = filtered;
2078
- }
2079
- }
2080
- break;
2081
- }
2082
- case "customPlaceholder":
2083
- case "geoIpLookup":
2084
- case "hiddenInput":
2085
- case "loadUtils":
2086
- if (value !== null && !isFunction(value)) {
2087
- warnOption(key, "a function or null", value);
2088
- break;
2089
- }
2090
- validatedOptions[key] = value;
2091
- break;
2092
- case "dropdownContainer":
2093
- if (value !== null && !isElLike(value)) {
2094
- warnOption("dropdownContainer", "an HTMLElement or null", value);
2095
- break;
2096
- }
2097
- validatedOptions[key] = value;
2098
- break;
2099
- case "excludeCountries":
2100
- case "onlyCountries": {
2101
- if (value === null) {
2102
- validatedOptions[key] = value;
2103
- } else {
2104
- const filtered = validateIso2Array(key, value);
2105
- if (filtered !== false) {
2106
- validatedOptions[key] = filtered;
2107
- }
2108
- }
2109
- break;
2110
- }
2111
- case "i18n":
2112
- if (value && !isPlainObject(value)) {
2113
- warnOption("i18n", "an object", value);
2114
- break;
2115
- }
2116
- validatedOptions[key] = value;
2117
- break;
2118
- case "initialCountry": {
2119
- if (typeof value !== "string") {
2120
- warnOption("initialCountry", "a string", value);
2121
- break;
2122
- }
2123
- const lower = value.toLowerCase();
2124
- if (lower && lower !== INITIAL_COUNTRY.AUTO && !isIso2(lower)) {
2125
- warnOption(
2126
- "initialCountry",
2127
- "a valid iso2 country code or 'auto'",
2128
- value
2129
- );
2130
- break;
2131
- }
2132
- validatedOptions[key] = value;
2133
- break;
2134
- }
2135
- case "placeholderNumberType":
2136
- if (typeof value !== "string" || !NUMBER_TYPE_SET.has(value)) {
2137
- const validTypes = Array.from(NUMBER_TYPE_SET).join(", ");
2138
- warnOption("placeholderNumberType", `one of ${validTypes}`, value);
2139
- break;
2140
- }
2141
- validatedOptions[key] = value;
2142
- break;
2143
- case "allowedNumberTypes":
2144
- if (value !== null) {
2145
- if (!Array.isArray(value)) {
2146
- warnOption(
2147
- "allowedNumberTypes",
2148
- "an array of number types or null",
2149
- value
2150
- );
2151
- break;
2152
- }
2153
- let allValid = true;
2154
- for (const v of value) {
2155
- if (typeof v !== "string" || !NUMBER_TYPE_SET.has(v)) {
2156
- const validTypes = Array.from(NUMBER_TYPE_SET).join(", ");
2157
- warnOption(
2158
- "allowedNumberTypes",
2159
- `an array of valid number types (${validTypes})`,
2160
- v
2161
- );
2162
- allValid = false;
2163
- break;
2164
- }
2165
- }
2166
- if (allValid) {
2167
- validatedOptions[key] = value;
2168
- }
2169
- } else {
2170
- validatedOptions[key] = null;
2171
- }
2172
- break;
2173
- }
2174
- }
2175
- return validatedOptions;
2176
- };
2177
- var normaliseOptions = (o) => {
2178
- if (o.initialCountry) {
2179
- o.initialCountry = o.initialCountry.toLowerCase();
2180
- }
2181
- if (o.onlyCountries?.length) {
2182
- o.onlyCountries = o.onlyCountries.map((c) => c.toLowerCase());
2183
- }
2184
- if (o.excludeCountries?.length) {
2185
- o.excludeCountries = o.excludeCountries.map((c) => c.toLowerCase());
2186
- }
2187
- if (o.countryOrder) {
2188
- o.countryOrder = o.countryOrder.map((c) => c.toLowerCase());
2189
- }
2190
- };
2191
- var applyOptionSideEffects = (o) => {
2192
- if (o.dropdownAlwaysOpen) {
2193
- o.useFullscreenPopup = false;
2194
- o.allowDropdown = true;
2195
- }
2196
- if (o.useFullscreenPopup) {
2197
- o.fixDropdownWidth = false;
2198
- } else {
2199
- if (isNarrowViewport()) {
2200
- o.fixDropdownWidth = true;
2201
- }
2202
- }
2203
- if (o.onlyCountries?.length === 1) {
2204
- o.initialCountry = o.onlyCountries[0];
2205
- }
2206
- if (o.separateDialCode) {
2207
- o.nationalMode = false;
2208
- }
2209
- if (o.allowDropdown && !o.showFlags && !o.separateDialCode) {
2210
- o.nationalMode = false;
2211
- }
2212
- if (o.useFullscreenPopup && !o.dropdownContainer) {
2213
- o.dropdownContainer = document.body;
2214
- }
2215
- o.i18n = { ...en_default, ...o.i18n };
2216
- };
2217
-
2218
- // src/js/helpers/string.ts
2219
- var getNumeric = (s) => s.replace(/\D/g, "");
2220
- var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
2221
-
2222
- // src/js/helpers/dom.ts
2223
- var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
2224
- var createEl = (tagName, attrs, container) => {
2225
- const el = document.createElement(tagName);
2226
- if (attrs) {
2227
- Object.entries(attrs).forEach(
2228
- ([key, value]) => el.setAttribute(key, value)
2229
- );
2230
- }
2231
- if (container) {
2232
- container.appendChild(el);
2233
- }
2234
- return el;
2235
- };
2236
-
2237
- // src/js/core/icons.ts
2238
- var buildSearchIcon = () => `
2239
- <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
2240
- <circle cx="11" cy="11" r="7" />
2241
- <line x1="21" y1="21" x2="16.65" y2="16.65" />
2242
- </svg>`;
2243
- var buildClearIcon = (id) => {
2244
- const maskId = `iti-${id}-clear-mask`;
2245
- return `
2246
- <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" ${ARIA.HIDDEN}="true" focusable="false">
2247
- <mask id="${maskId}" maskUnits="userSpaceOnUse">
2248
- <rect width="16" height="16" fill="white" />
2249
- <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
2250
- </mask>
2251
- <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
2252
- </svg>`;
2253
- };
2254
- var buildCheckIcon = () => `
2255
- <svg class="iti__country-check-svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" focusable="false" ${ARIA.HIDDEN}="true">
2256
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
2257
- </svg>`;
2258
- var buildGlobeIcon = () => `
2259
- <svg width="256" height="256" viewBox="0 0 512 512" class="iti__globe-svg">
2260
- <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
2261
- <path d="m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40"/>
2262
- </svg>`;
2263
-
2264
- // src/js/core/countrySearch.ts
2265
- var getMatchedCountries = (countries, query) => {
2266
- const normalisedQuery = normaliseString(query);
2267
- const iso2Matches = [];
2268
- const nameStartsWith = [];
2269
- const nameContains = [];
2270
- const dialCodeMatches = [];
2271
- const dialCodeContains = [];
2272
- const initialsMatches = [];
2273
- for (const c of countries) {
2274
- if (c.iso2 === normalisedQuery) {
2275
- iso2Matches.push(c);
2276
- } else if (c.normalisedName.startsWith(normalisedQuery)) {
2277
- nameStartsWith.push(c);
2278
- } else if (c.normalisedName.includes(normalisedQuery)) {
2279
- nameContains.push(c);
2280
- } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
2281
- dialCodeMatches.push(c);
2282
- } else if (c.dialCodePlus.includes(normalisedQuery)) {
2283
- dialCodeContains.push(c);
2284
- } else if (c.initials.includes(normalisedQuery)) {
2285
- initialsMatches.push(c);
2286
- }
2287
- }
2288
- const sortByPriority = (a, b) => a.priority - b.priority;
2289
- return [
2290
- ...iso2Matches,
2291
- ...nameStartsWith,
2292
- ...nameContains,
2293
- // priority sort is only relevant when showing multiple countries with the same dial code (that's what the priority field is used to distinguish between)
2294
- ...dialCodeMatches.sort(sortByPriority),
2295
- ...dialCodeContains.sort(sortByPriority),
2296
- ...initialsMatches
2297
- ];
2298
- };
2299
- var findFirstCountryStartingWith = (countries, query) => {
2300
- const normalisedQuery = normaliseString(query);
2301
- for (const c of countries) {
2302
- if (c.normalisedName.startsWith(normalisedQuery)) {
2303
- return c;
2304
- }
2305
- }
2306
- return null;
2307
- };
2308
-
2309
- // src/js/core/ui.ts
2310
- var UI = class _UI {
2311
- // private
2312
- #options;
2313
- #id;
2314
- #isRTL;
2315
- #originalPaddingLeft = "";
2316
- #countries;
2317
- #searchDebounceTimer = null;
2318
- #inlineDropdownHeight;
2319
- #countryContainerEl;
2320
- #selectedCountryEl;
2321
- #selectedFlagEl;
2322
- #selectedDialCodeEl;
2323
- #dropdownArrowEl;
2324
- #dropdownContentEl;
2325
- #searchIconEl;
2326
- #searchInputEl;
2327
- #searchClearButtonEl;
2328
- #countryListEl;
2329
- #hiddenInputPhoneEl;
2330
- #hiddenInputCountryEl;
2331
- #noResultsMessageEl;
2332
- #searchResultsLiveRegionEl;
2333
- #detachedDropdownEl;
2334
- #selectedListItemEl = null;
2335
- #highlightedListItemEl = null;
2336
- #listItemByIso2 = /* @__PURE__ */ new Map();
2337
- #dropdownAbortController = null;
2338
- // public
2339
- telInputEl;
2340
- hadInitialPlaceholder;
2341
- constructor(input, options, id) {
2342
- input.dataset[DATA_KEYS.INSTANCE_ID] = id.toString();
2343
- this.telInputEl = input;
2344
- this.#options = options;
2345
- this.#id = id;
2346
- this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
2347
- this.#isRTL = !!this.telInputEl.closest("[dir=rtl]");
2348
- this.#originalPaddingLeft = this.telInputEl.style.paddingLeft;
2349
- }
2350
- // Validate that the provided element is an HTMLInputElement.
2351
- static validateInput(input) {
2352
- const tagName = input?.tagName;
2353
- const isInputEl = Boolean(input) && typeof input === "object" && tagName === "INPUT" && typeof input.setAttribute === "function";
2354
- if (!isInputEl) {
2355
- const type = Object.prototype.toString.call(input);
2356
- throw new TypeError(
2357
- `The first argument must be an HTMLInputElement, not ${type}`
2358
- );
2359
- }
2360
- }
2361
- //* Generate all of the markup for the plugin: the selected country overlay, and the dropdown.
2362
- buildMarkup(countries) {
2363
- this.#countries = countries;
2364
- this.telInputEl.classList.add("iti__tel-input");
2365
- if (!this.telInputEl.hasAttribute("type")) {
2366
- this.telInputEl.setAttribute("type", "tel");
2367
- }
2368
- if (!this.telInputEl.hasAttribute("autocomplete")) {
2369
- this.telInputEl.setAttribute("autocomplete", "tel");
2370
- }
2371
- if (!this.telInputEl.hasAttribute("inputmode")) {
2372
- this.telInputEl.setAttribute("inputmode", "tel");
2373
- }
2374
- const wrapper = this.#createWrapperAndInsert();
2375
- this.#buildCountryContainer(wrapper);
2376
- wrapper.appendChild(this.telInputEl);
2377
- this.#updateInputPaddingAndReveal();
2378
- this.#buildHiddenInputs(wrapper);
2379
- this.ensureDropdownWidthSet();
2380
- }
2381
- #createWrapperAndInsert() {
2382
- const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.#options;
2383
- const parentClasses = buildClassNames({
2384
- iti: true,
2385
- "iti--allow-dropdown": allowDropdown,
2386
- "iti--show-flags": showFlags,
2387
- "iti--inline-dropdown": !useFullscreenPopup,
2388
- [containerClass]: Boolean(containerClass)
2389
- });
2390
- const wrapper = createEl("div", { class: parentClasses });
2391
- if (this.#isRTL) {
2392
- wrapper.setAttribute("dir", "ltr");
2393
- }
2394
- this.telInputEl.before(wrapper);
2395
- return wrapper;
2396
- }
2397
- #buildCountryContainer(wrapper) {
2398
- const { allowDropdown, separateDialCode, showFlags } = this.#options;
2399
- if (!allowDropdown && !showFlags && !separateDialCode) {
2400
- return;
2401
- }
2402
- this.#countryContainerEl = createEl(
2403
- "div",
2404
- // visibly hidden until we measure its width to set the input padding correctly
2405
- { class: `iti__country-container ${CLASSES.V_HIDE}` },
2406
- wrapper
2407
- );
2408
- if (allowDropdown) {
2409
- this.#selectedCountryEl = createEl(
2410
- "button",
2411
- {
2412
- type: "button",
2413
- class: "iti__selected-country",
2414
- [ARIA.EXPANDED]: "false",
2415
- [ARIA.LABEL]: this.#options.i18n.noCountrySelected,
2416
- [ARIA.HASPOPUP]: "dialog",
2417
- [ARIA.CONTROLS]: `iti-${this.#id}__dropdown-content`
2418
- },
2419
- this.#countryContainerEl
2420
- );
2421
- if (this.telInputEl.disabled) {
2422
- this.#selectedCountryEl.setAttribute("disabled", "true");
2423
- }
2424
- } else {
2425
- this.#selectedCountryEl = createEl(
2426
- "div",
2427
- { class: "iti__selected-country" },
2428
- this.#countryContainerEl
2429
- );
2430
- }
2431
- const selectedCountryPrimary = createEl(
2432
- "div",
2433
- { class: "iti__selected-country-primary" },
2434
- this.#selectedCountryEl
2435
- );
2436
- this.#selectedFlagEl = createEl(
2437
- "div",
2438
- { class: CLASSES.FLAG },
2439
- selectedCountryPrimary
2440
- );
2441
- if (allowDropdown) {
2442
- this.#dropdownArrowEl = createEl(
2443
- "div",
2444
- { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
2445
- selectedCountryPrimary
2446
- );
2447
- }
2448
- if (separateDialCode) {
2449
- this.#selectedDialCodeEl = createEl(
2450
- "div",
2451
- { class: "iti__selected-dial-code" },
2452
- this.#selectedCountryEl
2453
- );
2454
- }
2455
- if (allowDropdown) {
2456
- this.#buildDropdownContent();
2457
- }
2458
- }
2459
- ensureDropdownWidthSet() {
2460
- const { fixDropdownWidth, allowDropdown } = this.#options;
2461
- if (!allowDropdown || !fixDropdownWidth || this.#dropdownContentEl.style.width) {
2462
- return;
2463
- }
2464
- const inputWidth = this.telInputEl.offsetWidth;
2465
- if (inputWidth > 0) {
2466
- this.#dropdownContentEl.style.width = `${inputWidth}px`;
2467
- }
2468
- }
2469
- #buildDropdownContent() {
2470
- const {
2471
- fixDropdownWidth,
2472
- useFullscreenPopup,
2473
- countrySearch,
2474
- i18n,
2475
- dropdownContainer,
2476
- containerClass
2477
- } = this.#options;
2478
- const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
2479
- this.#dropdownContentEl = createEl("div", {
2480
- id: `iti-${this.#id}__dropdown-content`,
2481
- class: `iti__dropdown-content ${CLASSES.HIDE} ${extraClasses}`,
2482
- role: "dialog",
2483
- [ARIA.MODAL]: "true"
2484
- });
2485
- if (this.#isRTL) {
2486
- this.#dropdownContentEl.setAttribute("dir", "rtl");
2487
- }
2488
- if (countrySearch) {
2489
- this.#buildSearchUI();
2490
- }
2491
- this.#countryListEl = createEl(
2492
- "ul",
2493
- {
2494
- class: "iti__country-list",
2495
- id: `iti-${this.#id}__country-listbox`,
2496
- role: "listbox",
2497
- [ARIA.LABEL]: i18n.countryListAriaLabel
2498
- },
2499
- this.#dropdownContentEl
2500
- );
2501
- this.#appendListItems();
2502
- if (countrySearch) {
2503
- this.#updateSearchResultsA11yText();
2504
- }
2505
- if (!useFullscreenPopup) {
2506
- this.#inlineDropdownHeight = this.#getHiddenInlineDropdownHeight();
2507
- if (countrySearch) {
2508
- this.#dropdownContentEl.style.height = `${this.#inlineDropdownHeight}px`;
2509
- }
2510
- }
2511
- if (dropdownContainer) {
2512
- const dropdownClasses = buildClassNames({
2513
- iti: true,
2514
- "iti--container": true,
2515
- "iti--fullscreen-popup": useFullscreenPopup,
2516
- "iti--inline-dropdown": !useFullscreenPopup,
2517
- [containerClass]: Boolean(containerClass)
2518
- });
2519
- this.#detachedDropdownEl = createEl("div", { class: dropdownClasses });
2520
- this.#detachedDropdownEl.appendChild(this.#dropdownContentEl);
2521
- } else {
2522
- this.#countryContainerEl.appendChild(this.#dropdownContentEl);
2523
- }
2524
- }
2525
- #buildSearchUI() {
2526
- const { i18n, searchInputClass } = this.#options;
2527
- const searchWrapper = createEl(
2528
- "div",
2529
- { class: "iti__search-input-wrapper" },
2530
- this.#dropdownContentEl
2531
- );
2532
- this.#searchIconEl = createEl(
2533
- "span",
2534
- {
2535
- class: "iti__search-icon",
2536
- [ARIA.HIDDEN]: "true"
2537
- },
2538
- searchWrapper
2539
- );
2540
- this.#searchIconEl.innerHTML = buildSearchIcon();
2541
- this.#searchInputEl = createEl(
2542
- "input",
2543
- {
2544
- id: `iti-${this.#id}__search-input`,
2545
- // Chrome says inputs need either a name or an id
2546
- type: "search",
2547
- class: `iti__search-input ${searchInputClass}`,
2548
- placeholder: i18n.searchPlaceholder,
2549
- // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
2550
- role: "combobox",
2551
- [ARIA.EXPANDED]: "true",
2552
- [ARIA.LABEL]: i18n.searchPlaceholder,
2553
- [ARIA.CONTROLS]: `iti-${this.#id}__country-listbox`,
2554
- [ARIA.AUTOCOMPLETE]: "list",
2555
- autocomplete: "off"
2556
- },
2557
- searchWrapper
2558
- );
2559
- this.#searchClearButtonEl = createEl(
2560
- "button",
2561
- {
2562
- type: "button",
2563
- class: `iti__search-clear ${CLASSES.HIDE}`,
2564
- [ARIA.LABEL]: i18n.clearSearchAriaLabel,
2565
- tabindex: "-1"
2566
- },
2567
- searchWrapper
2568
- );
2569
- this.#searchClearButtonEl.innerHTML = buildClearIcon(this.#id);
2570
- this.#searchResultsLiveRegionEl = createEl(
2571
- "span",
2572
- { class: "iti__a11y-text" },
2573
- this.#dropdownContentEl
2574
- );
2575
- this.#noResultsMessageEl = createEl(
2576
- "div",
2577
- {
2578
- class: `iti__no-results ${CLASSES.HIDE}`,
2579
- [ARIA.HIDDEN]: "true"
2580
- // all a11y messaging happens in this.#searchResultsLiveRegionEl
2581
- },
2582
- this.#dropdownContentEl
2583
- );
2584
- this.#noResultsMessageEl.textContent = i18n.searchEmptyState ?? null;
2585
- }
2586
- #updateInputPaddingAndReveal() {
2587
- if (!this.#countryContainerEl) {
2588
- return;
2589
- }
2590
- this.#updateInputPadding();
2591
- this.#countryContainerEl.classList.remove(CLASSES.V_HIDE);
2592
- }
2593
- #buildHiddenInputs(wrapper) {
2594
- const { hiddenInput } = this.#options;
2595
- if (!hiddenInput) {
2596
- return;
2597
- }
2598
- const telInputName = this.telInputEl.getAttribute("name") || "";
2599
- const names = hiddenInput(telInputName);
2600
- if (names.phone) {
2601
- const existingInput = this.telInputEl.form?.querySelector(
2602
- `input[name="${names.phone}"]`
2603
- );
2604
- if (existingInput) {
2605
- this.#hiddenInputPhoneEl = existingInput;
2606
- } else {
2607
- this.#hiddenInputPhoneEl = createEl("input", {
2608
- type: "hidden",
2609
- name: names.phone
2610
- });
2611
- wrapper.appendChild(this.#hiddenInputPhoneEl);
2612
- }
2613
- }
2614
- if (names.country) {
2615
- const existingInput = this.telInputEl.form?.querySelector(
2616
- `input[name="${names.country}"]`
2617
- );
2618
- if (existingInput) {
2619
- this.#hiddenInputCountryEl = existingInput;
2620
- } else {
2621
- this.#hiddenInputCountryEl = createEl("input", {
2622
- type: "hidden",
2623
- name: names.country
2624
- });
2625
- wrapper.appendChild(this.#hiddenInputCountryEl);
2626
- }
2627
- }
2628
- }
2629
- //* For each country: add a country list item <li> to the countryList <ul> container.
2630
- #appendListItems() {
2631
- const frag = document.createDocumentFragment();
2632
- for (let i = 0; i < this.#countries.length; i++) {
2633
- const c = this.#countries[i];
2634
- const liClass = buildClassNames({
2635
- [CLASSES.COUNTRY_ITEM]: true
2636
- });
2637
- const listItem = createEl("li", {
2638
- id: `iti-${this.#id}__item-${c.iso2}`,
2639
- class: liClass,
2640
- tabindex: "-1",
2641
- role: "option",
2642
- [ARIA.SELECTED]: "false"
2643
- });
2644
- listItem.dataset[DATA_KEYS.DIAL_CODE] = c.dialCode;
2645
- listItem.dataset[DATA_KEYS.ISO2] = c.iso2;
2646
- this.#listItemByIso2.set(c.iso2, listItem);
2647
- if (this.#options.showFlags) {
2648
- createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
2649
- }
2650
- const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
2651
- nameEl.textContent = `${c.name} `;
2652
- const dialEl = createEl("span", { class: "iti__dial-code" }, nameEl);
2653
- if (this.#isRTL) {
2654
- dialEl.setAttribute("dir", "ltr");
2655
- }
2656
- dialEl.textContent = `(+${c.dialCode})`;
2657
- frag.appendChild(listItem);
2658
- }
2659
- this.#countryListEl.appendChild(frag);
2660
- }
2661
- //* Update the input padding to make space for (1) the selected country/globe, (2) the arrow, and (3) the separate dial code, all of which are optional, hence handling this in the JS rather than CSS.
2662
- #updateInputPadding() {
2663
- if (this.#selectedCountryEl) {
2664
- const fallbackWidth = this.#options.separateDialCode ? LAYOUT.FALLBACK_SELECTED_WITH_DIAL_WIDTH : LAYOUT.FALLBACK_SELECTED_NO_DIAL_WIDTH;
2665
- const selectedCountryWidth = this.#selectedCountryEl.offsetWidth || this.#getHiddenSelectedCountryWidth() || fallbackWidth;
2666
- const inputPadding = selectedCountryWidth + LAYOUT.INPUT_PADDING_EXTRA_LEFT;
2667
- this.telInputEl.style.paddingLeft = `${inputPadding}px`;
2668
- }
2669
- }
2670
- static #getBody() {
2671
- let body;
2672
- try {
2673
- body = window.top.document.body;
2674
- } catch (e) {
2675
- body = document.body;
2676
- }
2677
- return body;
2678
- }
2679
- //* When input is in a hidden container during init, we cannot calculate the selected country width.
2680
- //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
2681
- //* To get the right styling to apply, all we need is a shallow clone of the container,
2682
- //* and then to inject a deep clone of the selectedCountryEl element.
2683
- #getHiddenSelectedCountryWidth() {
2684
- if (!this.telInputEl.parentNode) {
2685
- return 0;
2686
- }
2687
- const body = _UI.#getBody();
2688
- const containerClone = this.telInputEl.parentNode.cloneNode(
2689
- false
2690
- );
2691
- containerClone.style.visibility = "hidden";
2692
- body.appendChild(containerClone);
2693
- const countryContainerClone = this.#countryContainerEl.cloneNode();
2694
- containerClone.appendChild(countryContainerClone);
2695
- const selectedCountryClone = this.#selectedCountryEl.cloneNode(
2696
- true
2697
- );
2698
- countryContainerClone.appendChild(selectedCountryClone);
2699
- const width = selectedCountryClone.offsetWidth;
2700
- body.removeChild(containerClone);
2701
- return width;
2702
- }
2703
- // Get the dropdown height (before it is added to the DOM)
2704
- #getHiddenInlineDropdownHeight() {
2705
- const body = _UI.#getBody();
2706
- this.#dropdownContentEl.classList.remove(CLASSES.HIDE);
2707
- const tempContainer = createEl("div", {
2708
- class: "iti iti--inline-dropdown"
2709
- });
2710
- tempContainer.appendChild(this.#dropdownContentEl);
2711
- tempContainer.style.visibility = "hidden";
2712
- body.appendChild(tempContainer);
2713
- const height = this.#dropdownContentEl.offsetHeight;
2714
- body.removeChild(tempContainer);
2715
- tempContainer.style.visibility = "";
2716
- this.#dropdownContentEl.classList.add(CLASSES.HIDE);
2717
- return height > 0 ? height : LAYOUT.FALLBACK_DROPDOWN_HEIGHT;
2718
- }
2719
- //* Update search results text (for a11y).
2720
- #updateSearchResultsA11yText() {
2721
- const { i18n } = this.#options;
2722
- const count = this.#countryListEl.childElementCount;
2723
- this.#searchResultsLiveRegionEl.textContent = i18n.searchSummaryAria(count);
2724
- }
2725
- //* Country search: Filter the countries according to the search query.
2726
- #filterCountriesByQuery(query) {
2727
- let matchedCountries;
2728
- if (query === "") {
2729
- matchedCountries = this.#countries;
2730
- } else {
2731
- matchedCountries = getMatchedCountries(this.#countries, query);
2732
- }
2733
- this.#showFilteredCountries(matchedCountries);
2734
- }
2735
- //* Pre-fill the search input with "+" and show all countries
2736
- //* (used when user types "+" in the phone input to open the dropdown).
2737
- //* Explicitly focus the search input (openDropdown skips this when
2738
- //* dropdownAlwaysOpen, but here we need focus to redirect subsequent keystrokes).
2739
- prefillSearchWithPlus() {
2740
- this.#searchInputEl.value = "+";
2741
- this.#searchInputEl.focus();
2742
- this.#filterCountriesByQuery("");
2743
- }
2744
- // Search input handlers
2745
- #applySearchFilter() {
2746
- const inputQuery = this.#searchInputEl.value.trim();
2747
- this.#filterCountriesByQuery(inputQuery);
2748
- if (this.#searchInputEl.value) {
2749
- this.#searchClearButtonEl.classList.remove(CLASSES.HIDE);
2750
- } else {
2751
- this.#searchClearButtonEl.classList.add(CLASSES.HIDE);
2752
- }
2753
- }
2754
- #handleSearchChange() {
2755
- if (this.#searchDebounceTimer) {
2756
- clearTimeout(this.#searchDebounceTimer);
2757
- }
2758
- this.#searchDebounceTimer = setTimeout(() => {
2759
- this.#applySearchFilter();
2760
- this.#searchDebounceTimer = null;
2761
- }, TIMINGS.SEARCH_DEBOUNCE_MS);
2762
- }
2763
- #handleSearchClear() {
2764
- this.#searchInputEl.value = "";
2765
- this.#searchInputEl.focus();
2766
- this.#applySearchFilter();
2767
- }
2768
- //* Check if a country list item element is visible within it's container (the country list), else scroll until it is.
2769
- #scrollCountryListToItem(element) {
2770
- const container = this.#countryListEl;
2771
- const containerRect = container.getBoundingClientRect();
2772
- const elementRect = element.getBoundingClientRect();
2773
- const offsetTop = elementRect.top - containerRect.top + container.scrollTop;
2774
- if (elementRect.top < containerRect.top) {
2775
- container.scrollTop = offsetTop;
2776
- } else if (elementRect.bottom > containerRect.bottom) {
2777
- container.scrollTop = offsetTop - containerRect.height + elementRect.height;
2778
- }
2779
- }
2780
- //* Remove highlighting from the previous list item and highlight the new one.
2781
- #highlightListItem(listItem, doScroll = true) {
2782
- this.#highlightedListItemEl?.classList.remove(CLASSES.HIGHLIGHT);
2783
- if (listItem) {
2784
- listItem.classList.add(CLASSES.HIGHLIGHT);
2785
- if (this.#options.countrySearch) {
2786
- const activeDescendant = listItem.getAttribute("id") || "";
2787
- this.#searchInputEl.setAttribute(
2788
- ARIA.ACTIVE_DESCENDANT,
2789
- activeDescendant
2790
- );
2791
- }
2792
- if (doScroll) {
2793
- this.#scrollCountryListToItem(listItem);
2794
- }
2795
- this.#highlightedListItemEl = listItem;
2796
- } else {
2797
- this.#highlightedListItemEl = null;
2798
- }
2799
- }
2800
- //* Bind a form-submit listener that syncs the hidden inputs with the current phone number
2801
- //* and country iso2. No-op if there are no hidden inputs or the input is not in a form.
2802
- bindHiddenInputSubmitListener(signal, getPhone, getCountryIso2) {
2803
- const form = this.telInputEl.form;
2804
- if (!form || !this.#hiddenInputPhoneEl && !this.#hiddenInputCountryEl) {
2805
- return;
2806
- }
2807
- form.addEventListener(
2808
- "submit",
2809
- () => {
2810
- if (this.#hiddenInputPhoneEl) {
2811
- this.#hiddenInputPhoneEl.value = getPhone();
2812
- }
2813
- if (this.#hiddenInputCountryEl) {
2814
- this.#hiddenInputCountryEl.value = getCountryIso2();
2815
- }
2816
- },
2817
- { signal }
2818
- );
2819
- }
2820
- //* Wire up triggers that open/close the dropdown: label click (focus input or swallow repeat click),
2821
- //* selected-country click (open), and keydown on countryContainer (open on arrow/space/enter, close on tab).
2822
- bindAllInitialDropdownListeners(signal, onOpen, onClose) {
2823
- const label = this.telInputEl.closest("label");
2824
- if (label) {
2825
- label.addEventListener(
2826
- "click",
2827
- (e) => {
2828
- if (!this.isDropdownOpen()) {
2829
- this.telInputEl.focus();
2830
- } else {
2831
- e.preventDefault();
2832
- }
2833
- },
2834
- { signal }
2835
- );
2836
- }
2837
- this.#selectedCountryEl.addEventListener(
2838
- "click",
2839
- () => {
2840
- if (!this.isDropdownOpen() && !this.telInputEl.disabled && !this.telInputEl.readOnly) {
2841
- onOpen();
2842
- }
2843
- },
2844
- { signal }
2845
- );
2846
- this.#countryContainerEl.addEventListener(
2847
- "keydown",
2848
- (e) => {
2849
- const openKeys = [
2850
- KEYS.ARROW_UP,
2851
- KEYS.ARROW_DOWN,
2852
- KEYS.SPACE,
2853
- KEYS.ENTER
2854
- ];
2855
- if (!this.isDropdownOpen() && openKeys.includes(e.key)) {
2856
- e.preventDefault();
2857
- e.stopPropagation();
2858
- onOpen();
2859
- }
2860
- if (e.key === KEYS.TAB) {
2861
- onClose();
2862
- }
2863
- },
2864
- { signal }
2865
- );
2866
- }
2867
- //* Open the dropdown: create a fresh AbortController, do the DOM work, and wire up all
2868
- //* dropdown-open listeners (which invoke the caller's onSelect / onClose callbacks).
2869
- openDropdown(onSelect, onClose) {
2870
- const { countrySearch, dropdownAlwaysOpen, dropdownContainer } = this.#options;
2871
- this.#dropdownAbortController = new AbortController();
2872
- this.ensureDropdownWidthSet();
2873
- if (dropdownContainer) {
2874
- this.#injectAndPositionDetachedDropdown();
2875
- } else {
2876
- const positionBelow = this.#shouldPositionInlineDropdownBelowInput();
2877
- const distance = this.telInputEl.offsetHeight + LAYOUT.DROPDOWN_MARGIN;
2878
- if (positionBelow) {
2879
- this.#dropdownContentEl.style.top = `${distance}px`;
2880
- } else {
2881
- this.#dropdownContentEl.style.bottom = `${distance}px`;
2882
- }
2883
- }
2884
- this.#dropdownContentEl.classList.remove(CLASSES.HIDE);
2885
- this.#selectedCountryEl.setAttribute(ARIA.EXPANDED, "true");
2886
- const itemToHighlight = this.#selectedListItemEl ?? this.#countryListEl.firstElementChild;
2887
- if (itemToHighlight) {
2888
- this.#highlightListItem(itemToHighlight);
2889
- }
2890
- if (countrySearch && !dropdownAlwaysOpen) {
2891
- this.#searchInputEl.focus();
2892
- }
2893
- if (this.#options.useFullscreenPopup && this.#detachedDropdownEl && window.visualViewport) {
2894
- window.visualViewport.addEventListener(
2895
- "resize",
2896
- () => {
2897
- this.#adjustFullscreenPopupToViewport();
2898
- if (this.#highlightedListItemEl) {
2899
- this.#scrollCountryListToItem(this.#highlightedListItemEl);
2900
- }
2901
- },
2902
- { signal: this.#dropdownAbortController.signal }
2903
- );
2904
- }
2905
- this.#dropdownArrowEl.classList.add(CLASSES.ARROW_UP);
2906
- this.#bindDropdownOpenListeners(onSelect, onClose);
2907
- }
2908
- //* Wire up all listeners needed while the dropdown is open: list-item hover (highlight),
2909
- //* list-item click & enter key (select), click-off & escape (close), search input (filter),
2910
- //* (when countrySearch disabled) typed-char hidden search, and (when dropdown is in an external
2911
- //* container) close on window scroll.
2912
- #bindDropdownOpenListeners(onSelect, onClose) {
2913
- const signal = this.#dropdownAbortController.signal;
2914
- this.#bindListItemHover(signal);
2915
- this.#bindListItemClick(signal, onSelect);
2916
- if (!this.#options.dropdownAlwaysOpen) {
2917
- this.#bindOutsideClickToClose(signal, onClose);
2918
- }
2919
- this.#bindDropdownKeydownListener(signal, onSelect, onClose);
2920
- if (this.#options.countrySearch) {
2921
- this.#bindSearchInputListener(signal);
2922
- }
2923
- if (!this.#options.useFullscreenPopup && this.#options.dropdownContainer) {
2924
- window.addEventListener("scroll", onClose, { signal });
2925
- }
2926
- }
2927
- //* When mouse over a list item, just highlight that one (so if they hit "enter" we know which to select).
2928
- #bindListItemHover(signal) {
2929
- this.#countryListEl.addEventListener(
2930
- "mouseover",
2931
- (e) => {
2932
- const listItem = e.target?.closest(
2933
- `.${CLASSES.COUNTRY_ITEM}`
2934
- );
2935
- if (listItem) {
2936
- this.#highlightListItem(listItem, false);
2937
- }
2938
- },
2939
- { signal }
2940
- );
2941
- }
2942
- //* Delegate clicks on the country list to the caller's onSelect callback, passing the clicked list item.
2943
- #bindListItemClick(signal, onSelect) {
2944
- this.#countryListEl.addEventListener(
2945
- "click",
2946
- (e) => {
2947
- const listItem = e.target?.closest(
2948
- `.${CLASSES.COUNTRY_ITEM}`
2949
- );
2950
- if (listItem) {
2951
- onSelect(listItem);
2952
- }
2953
- },
2954
- { signal }
2955
- );
2956
- }
2957
- //* Invoke onClickOff when the user clicks anywhere outside the dropdown.
2958
- #bindOutsideClickToClose(signal, onClickOff) {
2959
- setTimeout(() => {
2960
- document.documentElement.addEventListener(
2961
- "click",
2962
- (e) => {
2963
- if (!this.#dropdownContentEl.contains(e.target)) {
2964
- onClickOff();
2965
- }
2966
- },
2967
- { signal }
2968
- );
2969
- }, 0);
2970
- }
2971
- //* Keyboard navigation while the dropdown is open: arrow keys navigate, hidden-search keys filter,
2972
- //* and enter/escape invoke the caller's callbacks (which handle country selection / dropdown close).
2973
- //* Listens on document because key events go there when no input has focus.
2974
- //* Uses keydown rather than keypress so non-char keys (arrow, esc) fire and so holding a key repeats.
2975
- #bindDropdownKeydownListener(signal, onEnter, onEscape) {
2976
- let query = "";
2977
- let queryTimer = null;
2978
- const handleKeydown = (e) => {
2979
- const allowedKeys = [
2980
- KEYS.ARROW_UP,
2981
- KEYS.ARROW_DOWN,
2982
- KEYS.ENTER,
2983
- KEYS.ESC
2984
- ];
2985
- if (allowedKeys.includes(e.key)) {
2986
- e.preventDefault();
2987
- e.stopPropagation();
2988
- if (e.key === KEYS.ARROW_UP || e.key === KEYS.ARROW_DOWN) {
2989
- this.#handleUpDownKey(e.key);
2990
- } else if (e.key === KEYS.ENTER && !e.isComposing) {
2991
- onEnter(this.#highlightedListItemEl);
2992
- } else if (e.key === KEYS.ESC) {
2993
- onEscape();
2994
- this.#selectedCountryEl.focus();
2995
- }
2996
- }
2997
- if (!this.#options.countrySearch && e.target !== this.telInputEl && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
2998
- e.stopPropagation();
2999
- if (queryTimer) {
3000
- clearTimeout(queryTimer);
3001
- }
3002
- query += e.key.toLowerCase();
3003
- this.#searchForCountry(query);
3004
- queryTimer = setTimeout(() => {
3005
- query = "";
3006
- }, TIMINGS.HIDDEN_SEARCH_RESET_MS);
3007
- }
3008
- };
3009
- document.addEventListener("keydown", handleKeydown, { signal });
3010
- }
3011
- //* Wire up country search input listener: typing filters the list, the clear button resets it.
3012
- #bindSearchInputListener(signal) {
3013
- this.#searchInputEl.addEventListener(
3014
- "input",
3015
- () => this.#handleSearchChange(),
3016
- { signal }
3017
- );
3018
- this.#searchClearButtonEl.addEventListener(
3019
- "click",
3020
- () => this.#handleSearchClear(),
3021
- { signal }
3022
- );
3023
- }
3024
- //* Hidden search (countrySearch disabled): jump to the first list item whose name starts with the query.
3025
- #searchForCountry(query) {
3026
- const match = findFirstCountryStartingWith(this.#countries, query);
3027
- if (match) {
3028
- const listItem = this.#listItemByIso2.get(match.iso2);
3029
- this.#highlightListItem(listItem);
3030
- }
3031
- }
3032
- //* Highlight the next/prev item in the list (and ensure it is visible).
3033
- #handleUpDownKey(key) {
3034
- let next = key === KEYS.ARROW_UP ? this.#highlightedListItemEl?.previousElementSibling : this.#highlightedListItemEl?.nextElementSibling;
3035
- if (!next && this.#countryListEl.childElementCount > 1) {
3036
- next = key === KEYS.ARROW_UP ? this.#countryListEl.lastElementChild : this.#countryListEl.firstElementChild;
3037
- }
3038
- if (next) {
3039
- this.#highlightListItem(next);
3040
- }
3041
- }
3042
- // Update the selected list item in the dropdown
3043
- #updateSelectedListItem(iso2) {
3044
- if (this.#selectedListItemEl && this.#selectedListItemEl.dataset[DATA_KEYS.ISO2] !== iso2) {
3045
- this.#selectedListItemEl.setAttribute(ARIA.SELECTED, "false");
3046
- this.#selectedListItemEl.querySelector(".iti__country-check")?.remove();
3047
- this.#selectedListItemEl = null;
3048
- }
3049
- if (iso2 && !this.#selectedListItemEl) {
3050
- const newListItem = this.#countryListEl.querySelector(
3051
- `[data-country-code="${iso2}"]`
3052
- );
3053
- if (newListItem) {
3054
- newListItem.setAttribute(ARIA.SELECTED, "true");
3055
- const checkIcon = createEl(
3056
- "span",
3057
- { class: "iti__country-check", [ARIA.HIDDEN]: "true" },
3058
- newListItem
3059
- );
3060
- checkIcon.innerHTML = buildCheckIcon();
3061
- this.#selectedListItemEl = newListItem;
3062
- if (this.#options.dropdownAlwaysOpen) {
3063
- this.#highlightListItem(newListItem);
3064
- }
3065
- }
3066
- }
3067
- }
3068
- //* Country search: Filter the country list to the given array of countries.
3069
- #showFilteredCountries(matchedCountries) {
3070
- this.#countryListEl.replaceChildren();
3071
- let noCountriesAddedYet = true;
3072
- for (const c of matchedCountries) {
3073
- const listItem = this.#listItemByIso2.get(c.iso2);
3074
- if (listItem) {
3075
- this.#countryListEl.appendChild(listItem);
3076
- if (noCountriesAddedYet) {
3077
- this.#highlightListItem(listItem, false);
3078
- noCountriesAddedYet = false;
3079
- }
3080
- }
3081
- }
3082
- if (noCountriesAddedYet) {
3083
- this.#highlightListItem(null);
3084
- if (this.#noResultsMessageEl) {
3085
- this.#noResultsMessageEl.classList.remove(CLASSES.HIDE);
3086
- }
3087
- } else if (this.#noResultsMessageEl) {
3088
- this.#noResultsMessageEl.classList.add(CLASSES.HIDE);
3089
- }
3090
- this.#countryListEl.scrollTop = 0;
3091
- this.#updateSearchResultsA11yText();
3092
- }
3093
- // UI: Close the dropdown (DOM + abort dropdown-scoped listeners).
3094
- closeDropdown() {
3095
- const { countrySearch, dropdownContainer } = this.#options;
3096
- this.#dropdownAbortController.abort();
3097
- this.#dropdownAbortController = null;
3098
- this.#dropdownContentEl.classList.add(CLASSES.HIDE);
3099
- this.#selectedCountryEl.setAttribute(ARIA.EXPANDED, "false");
3100
- if (countrySearch) {
3101
- this.#searchInputEl.removeAttribute(ARIA.ACTIVE_DESCENDANT);
3102
- this.#searchInputEl.value = "";
3103
- this.#applySearchFilter();
3104
- if (this.#highlightedListItemEl) {
3105
- this.#highlightedListItemEl.classList.remove(CLASSES.HIGHLIGHT);
3106
- this.#highlightedListItemEl = null;
3107
- }
3108
- }
3109
- this.#dropdownArrowEl.classList.remove(CLASSES.ARROW_UP);
3110
- if (dropdownContainer) {
3111
- this.#detachedDropdownEl.remove();
3112
- this.#detachedDropdownEl.style.top = "";
3113
- this.#detachedDropdownEl.style.bottom = "";
3114
- this.#detachedDropdownEl.style.paddingLeft = "";
3115
- this.#detachedDropdownEl.style.paddingRight = "";
3116
- } else {
3117
- this.#dropdownContentEl.style.top = "";
3118
- this.#dropdownContentEl.style.bottom = "";
3119
- }
3120
- }
3121
- #shouldPositionInlineDropdownBelowInput() {
3122
- if (this.#options.dropdownAlwaysOpen) {
3123
- return true;
3124
- }
3125
- const inputPos = this.telInputEl.getBoundingClientRect();
3126
- const spaceAbove = inputPos.top;
3127
- const spaceBelow = window.innerHeight - inputPos.bottom;
3128
- return spaceBelow >= this.#inlineDropdownHeight || spaceBelow >= spaceAbove;
3129
- }
3130
- // inject dropdown into container and apply positioning styles
3131
- #injectAndPositionDetachedDropdown() {
3132
- const { dropdownContainer, useFullscreenPopup } = this.#options;
3133
- if (useFullscreenPopup) {
3134
- if (window.innerWidth >= LAYOUT.NARROW_VIEWPORT_WIDTH) {
3135
- const inputPos = this.telInputEl.getBoundingClientRect();
3136
- this.#detachedDropdownEl.style.paddingLeft = `${inputPos.left}px`;
3137
- this.#detachedDropdownEl.style.paddingRight = `${window.innerWidth - inputPos.right}px`;
3138
- }
3139
- } else {
3140
- const inputPos = this.telInputEl.getBoundingClientRect();
3141
- this.#detachedDropdownEl.style.left = `${inputPos.left}px`;
3142
- const positionBelow = this.#shouldPositionInlineDropdownBelowInput();
3143
- if (positionBelow) {
3144
- this.#detachedDropdownEl.style.top = `${inputPos.bottom + LAYOUT.DROPDOWN_MARGIN}px`;
3145
- } else {
3146
- this.#detachedDropdownEl.style.top = "unset";
3147
- this.#detachedDropdownEl.style.bottom = `${window.innerHeight - inputPos.top + LAYOUT.DROPDOWN_MARGIN}px`;
3148
- }
3149
- }
3150
- dropdownContainer.appendChild(this.#detachedDropdownEl);
3151
- }
3152
- // Adjust the fullscreen popup dimensions to match the visual viewport,
3153
- // so it stays above the virtual keyboard on mobile devices.
3154
- #adjustFullscreenPopupToViewport() {
3155
- const vv = window.visualViewport;
3156
- if (!vv || !this.#detachedDropdownEl) {
3157
- return;
3158
- }
3159
- const virtualKeyboardHeight = window.innerHeight - vv.height;
3160
- this.#detachedDropdownEl.style.bottom = `${virtualKeyboardHeight}px`;
3161
- }
3162
- // UI: Whether the dropdown is currently open (visible).
3163
- isDropdownOpen() {
3164
- return !this.#dropdownContentEl.classList.contains(CLASSES.HIDE);
3165
- }
3166
- // Toggle the loading spinner on the selected flag (used during auto-country geoIP lookup).
3167
- setLoading(isLoading) {
3168
- this.#selectedFlagEl.classList.toggle(CLASSES.LOADING, isLoading);
3169
- }
3170
- isLoading() {
3171
- return this.#selectedFlagEl.classList.contains(CLASSES.LOADING);
3172
- }
3173
- // Set the disabled state of the input and dropdown.
3174
- setDisabled(disabled) {
3175
- this.telInputEl.disabled = disabled;
3176
- if (this.#selectedCountryEl) {
3177
- if (disabled) {
3178
- this.#selectedCountryEl.setAttribute("disabled", "true");
3179
- } else {
3180
- this.#selectedCountryEl.removeAttribute("disabled");
3181
- }
3182
- }
3183
- }
3184
- // Set the readonly state of the input and dropdown.
3185
- setReadonly(readonly) {
3186
- this.telInputEl.readOnly = readonly;
3187
- if (this.#selectedCountryEl) {
3188
- if (readonly) {
3189
- this.#selectedCountryEl.setAttribute("disabled", "true");
3190
- } else {
3191
- this.#selectedCountryEl.removeAttribute("disabled");
3192
- }
3193
- }
3194
- }
3195
- setCountry(selectedCountryData) {
3196
- const { allowDropdown, showFlags, separateDialCode, i18n } = this.#options;
3197
- const name = selectedCountryData?.name;
3198
- const dialCode = selectedCountryData?.dialCode;
3199
- const iso2 = selectedCountryData?.iso2 ?? "";
3200
- if (allowDropdown) {
3201
- this.#updateSelectedListItem(iso2);
3202
- }
3203
- if (this.#selectedCountryEl) {
3204
- const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
3205
- let ariaLabel, title, flagInnerHtml;
3206
- if (iso2) {
3207
- title = name;
3208
- ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
3209
- flagInnerHtml = showFlags ? "" : buildGlobeIcon();
3210
- } else {
3211
- title = i18n.noCountrySelected;
3212
- ariaLabel = i18n.noCountrySelected;
3213
- flagInnerHtml = buildGlobeIcon();
3214
- }
3215
- this.#selectedFlagEl.className = flagClass;
3216
- this.#selectedCountryEl.setAttribute("title", title);
3217
- this.#selectedCountryEl.setAttribute(ARIA.LABEL, ariaLabel);
3218
- this.#selectedFlagEl.innerHTML = flagInnerHtml;
3219
- }
3220
- if (separateDialCode) {
3221
- const fullDialCode = dialCode ? `+${dialCode}` : "";
3222
- this.#selectedDialCodeEl.textContent = fullDialCode;
3223
- this.#updateInputPadding();
3224
- }
3225
- }
3226
- destroy() {
3227
- this.telInputEl.iti = void 0;
3228
- delete this.telInputEl.dataset[DATA_KEYS.INSTANCE_ID];
3229
- this.telInputEl.style.paddingLeft = this.#originalPaddingLeft;
3230
- const wrapper = this.telInputEl.parentNode;
3231
- if (wrapper) {
3232
- wrapper.before(this.telInputEl);
3233
- wrapper.remove();
3234
- }
3235
- this.#listItemByIso2.clear();
3236
- }
3237
- };
3238
-
3239
- // src/js/data/country-data.ts
3240
- var processAllCountries = (options) => {
3241
- const { onlyCountries, excludeCountries } = options;
3242
- if (onlyCountries?.length) {
3243
- return data_default.filter(
3244
- (country) => onlyCountries.includes(country.iso2)
3245
- );
3246
- } else if (excludeCountries?.length) {
3247
- return data_default.filter(
3248
- (country) => !excludeCountries.includes(country.iso2)
3249
- );
3250
- }
3251
- return [...data_default];
3252
- };
3253
- var generateCountryNames = (countries, options) => {
3254
- const { countryNameLocale, i18n } = options;
3255
- let displayNames;
3256
- try {
3257
- const hasDisplayNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function";
3258
- if (hasDisplayNames) {
3259
- displayNames = new Intl.DisplayNames(countryNameLocale, {
3260
- type: "region"
3261
- });
3262
- } else {
3263
- displayNames = null;
3264
- }
3265
- } catch (e) {
3266
- console.error(e);
3267
- displayNames = null;
3268
- }
3269
- for (const c of countries) {
3270
- c.name = i18n[c.iso2] || displayNames?.of(c.iso2.toUpperCase()) || "";
3271
- }
3272
- };
3273
- var processDialCodes = (countries) => {
3274
- const dialCodes = /* @__PURE__ */ new Set();
3275
- let dialCodeMaxLength = 0;
3276
- const dialCodeToIso2Map = {};
3277
- const addToDialCodeMap = (iso2, dialCode) => {
3278
- if (!iso2 || !dialCode) {
3279
- return;
3280
- }
3281
- if (dialCode.length > dialCodeMaxLength) {
3282
- dialCodeMaxLength = dialCode.length;
3283
- }
3284
- if (!Object.hasOwn(dialCodeToIso2Map, dialCode)) {
3285
- dialCodeToIso2Map[dialCode] = [];
3286
- }
3287
- const iso2List = dialCodeToIso2Map[dialCode];
3288
- if (iso2List.includes(iso2)) {
3289
- return;
3290
- }
3291
- iso2List.push(iso2);
3292
- };
3293
- const countriesSortedByPriority = [...countries].sort(
3294
- (a, b) => a.priority - b.priority
3295
- );
3296
- for (const c of countriesSortedByPriority) {
3297
- if (!dialCodes.has(c.dialCode)) {
3298
- dialCodes.add(c.dialCode);
3299
- }
3300
- for (let k = 1; k < c.dialCode.length; k++) {
3301
- const partialDialCode = c.dialCode.substring(0, k);
3302
- addToDialCodeMap(c.iso2, partialDialCode);
3303
- }
3304
- addToDialCodeMap(c.iso2, c.dialCode);
3305
- if (c.areaCodes) {
3306
- const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
3307
- for (const areaCode of c.areaCodes) {
3308
- for (let k = 1; k < areaCode.length; k++) {
3309
- const partialAreaCode = areaCode.substring(0, k);
3310
- const partialDialCode = c.dialCode + partialAreaCode;
3311
- addToDialCodeMap(rootIso2Code, partialDialCode);
3312
- addToDialCodeMap(c.iso2, partialDialCode);
3313
- }
3314
- addToDialCodeMap(c.iso2, c.dialCode + areaCode);
3315
- }
3316
- }
3317
- }
3318
- return { dialCodes, dialCodeMaxLength, dialCodeToIso2Map };
3319
- };
3320
- var sortCountries = (countries, options) => {
3321
- const { countryOrder } = options;
3322
- countries.sort((a, b) => {
3323
- if (countryOrder) {
3324
- const aIndex = countryOrder.indexOf(a.iso2);
3325
- const bIndex = countryOrder.indexOf(b.iso2);
3326
- const aIndexExists = aIndex > -1;
3327
- const bIndexExists = bIndex > -1;
3328
- if (aIndexExists || bIndexExists) {
3329
- if (aIndexExists && bIndexExists) {
3330
- return aIndex - bIndex;
3331
- }
3332
- return aIndexExists ? -1 : 1;
3333
- }
3334
- }
3335
- return a.name.localeCompare(b.name);
3336
- });
3337
- };
3338
- var cacheSearchTokens = (countries) => {
3339
- for (const c of countries) {
3340
- c.normalisedName = normaliseString(c.name);
3341
- c.initials = c.normalisedName.split(/[^a-z]/).map((word) => word[0]).join("");
3342
- c.dialCodePlus = `+${c.dialCode}`;
3343
- }
3344
- };
3345
-
3346
- // src/js/data/intl-regionless.ts
3347
- var regionlessDialCodes = /* @__PURE__ */ new Set([
3348
- "800",
3349
- "808",
3350
- "870",
3351
- "881",
3352
- "882",
3353
- "883",
3354
- "888",
3355
- "979"
3356
- ]);
3357
- var hasRegionlessDialCode = (number) => {
3358
- const dialCode = getNumeric(number).slice(0, 3);
3359
- return number.startsWith("+") && regionlessDialCodes.has(dialCode);
3360
- };
3361
-
3362
- // src/js/format/formatting.ts
3363
- var stripSeparateDialCode = (fullNumber, hasValidDialCode, separateDialCode, selectedCountryData) => {
3364
- if (!separateDialCode || !hasValidDialCode) {
3365
- return fullNumber;
3366
- }
3367
- const dialCode = `+${selectedCountryData.dialCode}`;
3368
- const start = fullNumber[dialCode.length] === " " || fullNumber[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
3369
- return fullNumber.substring(start);
3370
- };
3371
- var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) => {
3372
- const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData?.iso2) : fullNumber;
3373
- const dialCode = selectedCountryData?.dialCode;
3374
- if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
3375
- const afterDialCode = result.split(`+${dialCode}`)[1] || "";
3376
- return afterDialCode.trim();
3377
- }
3378
- return result;
3379
- };
3380
-
3381
- // src/js/format/caret.ts
3382
- var computeNewCaretPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
3383
- if (prevCaretPos === 0 && !isDeleteForwards) {
3384
- return 0;
3385
- }
3386
- let relevantCharCount = 0;
3387
- for (let i = 0; i < formattedValue.length; i++) {
3388
- if (/[+0-9]/.test(formattedValue[i])) {
3389
- relevantCharCount++;
3390
- }
3391
- if (relevantCharCount === relevantChars && !isDeleteForwards) {
3392
- return i + 1;
3393
- }
3394
- if (isDeleteForwards && relevantCharCount === relevantChars + 1) {
3395
- return i;
3396
- }
3397
- }
3398
- return formattedValue.length;
3399
- };
3400
-
3401
- // src/js/data/nanp-regionless.ts
3402
- var regionlessNanpAreaCodes = /* @__PURE__ */ new Set([
3403
- "800",
3404
- "822",
3405
- "833",
3406
- "844",
3407
- "855",
3408
- "866",
3409
- "877",
3410
- "880",
3411
- "881",
3412
- "882",
3413
- "883",
3414
- "884",
3415
- "885",
3416
- "886",
3417
- "887",
3418
- "888",
3419
- "889"
3420
- ]);
3421
- var isRegionlessNanp = (number) => {
3422
- const numeric = getNumeric(number);
3423
- if (numeric.startsWith(DIAL_CODE.NANP) && numeric.length >= 4) {
3424
- const areaCode = numeric.substring(1, 4);
3425
- return regionlessNanpAreaCodes.has(areaCode);
3426
- }
3427
- return false;
3428
- };
3429
-
3430
- // src/js/core/numerals.ts
3431
- var Numerals = class {
3432
- #userNumeralSet;
3433
- constructor(initialValue) {
3434
- if (initialValue) {
3435
- this.#updateNumeralSet(initialValue);
3436
- }
3437
- }
3438
- // If any Arabic-Indic digits, then label it as that set. Same for Persian. Otherwise assume ASCII.
3439
- #updateNumeralSet(str) {
3440
- if (/[\u0660-\u0669]/.test(str)) {
3441
- this.#userNumeralSet = "arabic-indic";
3442
- } else if (/[\u06F0-\u06F9]/.test(str)) {
3443
- this.#userNumeralSet = "persian";
3444
- } else {
3445
- this.#userNumeralSet = "ascii";
3446
- }
3447
- }
3448
- // Denormalise ASCII 0-9 to the user's numeral set. If not yet known, return as-is.
3449
- // NOTE: normalise is always called before this, so it should be impossible for the numeral set to be unknown at this point.
3450
- denormalise(str) {
3451
- if (!this.#userNumeralSet || this.#userNumeralSet === "ascii") {
3452
- return str;
3453
- }
3454
- const base = this.#userNumeralSet === "arabic-indic" ? 1632 : 1776;
3455
- return str.replace(/[0-9]/g, (d) => String.fromCharCode(base + Number(d)));
3456
- }
3457
- // Normalize Eastern Arabic (U+0660-0669) and Persian/Extended Arabic-Indic (U+06F0-06F9) numerals to ASCII 0-9
3458
- normalise(str) {
3459
- if (!str) {
3460
- return "";
3461
- }
3462
- this.#updateNumeralSet(str);
3463
- if (this.#userNumeralSet === "ascii") {
3464
- return str;
3465
- }
3466
- const base = this.#userNumeralSet === "arabic-indic" ? 1632 : 1776;
3467
- const regex = this.#userNumeralSet === "arabic-indic" ? /[\u0660-\u0669]/g : /[\u06F0-\u06F9]/g;
3468
- return str.replace(
3469
- regex,
3470
- (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base))
3471
- );
3472
- }
3473
- isAscii() {
3474
- return !this.#userNumeralSet || this.#userNumeralSet === "ascii";
3475
- }
3476
- };
3477
-
3478
- // src/js/intlTelInput.ts
3479
- var nextId = 0;
3480
- var ensureUtils = (methodName) => {
3481
- if (!intlTelInput.utils) {
3482
- throw new Error(
3483
- `intlTelInput.utils is required for ${methodName}(). See: https://intl-tel-input.com/docs/utils`
3484
- );
3485
- }
3486
- };
3487
- var createDeferred = () => {
3488
- let resolve;
3489
- let reject;
3490
- const promise = new Promise((res, rej) => {
3491
- resolve = res;
3492
- reject = rej;
3493
- });
3494
- return { promise, resolve, reject };
3495
- };
3496
- var Iti = class _Iti {
3497
- //* PUBLIC FIELDS - READONLY
3498
- //* Can't be private as it's called from intlTelInput convenience wrapper.
3499
- id;
3500
- // accessed externally via iti.promise.then(...)
3501
- promise;
3502
- //* PRIVATE FIELDS
3503
- #ui;
3504
- #options;
3505
- #isAndroid;
3506
- // country data
3507
- #countries;
3508
- #dialCodeMaxLength;
3509
- #dialCodeToIso2Map;
3510
- #dialCodes;
3511
- #countryByIso2;
3512
- #selectedCountry = null;
3513
- #maxCoreNumberLength = null;
3514
- #fallbackCountryIso2;
3515
- // is this instance still active (not destroyed)
3516
- #isActive = true;
3517
- #abortController;
3518
- #numerals;
3519
- //* Tracks whether the user has typed/pasted their own formatting chars, so AYT-formatting should back off.
3520
- #userOverrideFormatting = false;
3521
- #autoCountryDeferred;
3522
- #utilsDeferred;
3523
- constructor(input, customOptions = {}) {
3524
- this.id = nextId++;
3525
- UI.validateInput(input);
3526
- const validatedOptions = validateOptions(customOptions);
3527
- this.#options = { ...defaults, ...validatedOptions };
3528
- normaliseOptions(this.#options);
3529
- applyOptionSideEffects(this.#options);
3530
- this.#ui = new UI(input, this.#options, this.id);
3531
- this.#isAndroid = typeof navigator !== "undefined" && /Android/i.test(navigator.userAgent);
3532
- this.#numerals = new Numerals(input.value);
3533
- this.promise = this.#createInitPromise(this.#options);
3534
- this.#countries = processAllCountries(this.#options);
3535
- const { dialCodes, dialCodeMaxLength, dialCodeToIso2Map } = processDialCodes(this.#countries);
3536
- this.#dialCodes = dialCodes;
3537
- this.#dialCodeMaxLength = dialCodeMaxLength;
3538
- this.#dialCodeToIso2Map = dialCodeToIso2Map;
3539
- this.#countryByIso2 = new Map(this.#countries.map((c) => [c.iso2, c]));
3540
- this.#init();
3541
- }
3542
- #getTelInputValue() {
3543
- const inputValue = this.#ui.telInputEl.value.trim();
3544
- return this.#numerals.normalise(inputValue);
3545
- }
3546
- #setTelInputValue(asciiValue) {
3547
- this.#ui.telInputEl.value = this.#numerals.denormalise(asciiValue);
3548
- }
3549
- #createInitPromise(options) {
3550
- const { initialCountry, geoIpLookup, loadUtils } = options;
3551
- const needsAutoCountryDeferred = initialCountry === INITIAL_COUNTRY.AUTO && Boolean(geoIpLookup);
3552
- const needsUtilsDeferred = Boolean(loadUtils) && !intlTelInput.utils;
3553
- if (needsAutoCountryDeferred) {
3554
- this.#autoCountryDeferred = createDeferred();
3555
- }
3556
- if (needsUtilsDeferred) {
3557
- this.#utilsDeferred = createDeferred();
3558
- }
3559
- return Promise.all([
3560
- this.#autoCountryDeferred?.promise,
3561
- this.#utilsDeferred?.promise
3562
- ]).then(() => {
3563
- });
3564
- }
3565
- #init() {
3566
- this.#abortController = new AbortController();
3567
- this.#processCountryData();
3568
- this.#ui.buildMarkup(this.#countries);
3569
- this.#setInitialState();
3570
- this.#initListeners();
3571
- this.#startAsyncLoads();
3572
- if (this.#options.dropdownAlwaysOpen) {
3573
- this.#openDropdown();
3574
- }
3575
- }
3576
- //********************
3577
- //* PRIVATE METHODS
3578
- //********************
3579
- //* Prepare all of the country data, including onlyCountries, excludeCountries, countryOrder options.
3580
- #processCountryData() {
3581
- generateCountryNames(this.#countries, this.#options);
3582
- sortCountries(this.#countries, this.#options);
3583
- cacheSearchTokens(this.#countries);
3584
- }
3585
- //* Set the initial state of the input value and the selected country by:
3586
- //* 1. Extracting a dial code from the given number
3587
- //* 2. Using explicit initialCountry
3588
- #setInitialState(overrideAutoCountry = false) {
3589
- const attributeValueRaw = this.#ui.telInputEl.getAttribute("value");
3590
- const attributeValue = this.#numerals.normalise(attributeValueRaw ?? "");
3591
- const inputValue = this.#getTelInputValue();
3592
- const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
3593
- const value = useAttribute ? attributeValue : inputValue;
3594
- const dialCode = this.#getDialCode(value);
3595
- const isRegionlessNanpNumber = isRegionlessNanp(value);
3596
- const { initialCountry, geoIpLookup } = this.#options;
3597
- const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
3598
- const resolvedInitialCountry = isAutoCountry && intlTelInput.autoCountry ? intlTelInput.autoCountry : initialCountry;
3599
- const doingAutoCountryLookup = isAutoCountry && !overrideAutoCountry && !intlTelInput.autoCountry;
3600
- const isValidInitialCountry = isIso2(resolvedInitialCountry);
3601
- if (dialCode) {
3602
- if (isRegionlessNanpNumber) {
3603
- if (isValidInitialCountry) {
3604
- this.#updateSelectedCountry(resolvedInitialCountry);
3605
- } else if (!doingAutoCountryLookup) {
3606
- this.#updateSelectedCountry(US.ISO2);
3607
- }
3608
- } else {
3609
- if (isValidInitialCountry) {
3610
- this.#updateSelectedCountry(resolvedInitialCountry);
3611
- }
3612
- this.#updateCountryFromNumber(value);
3613
- }
3614
- } else if (isValidInitialCountry) {
3615
- this.#updateSelectedCountry(resolvedInitialCountry);
3616
- } else if (!doingAutoCountryLookup) {
3617
- this.#updateSelectedCountry("");
3618
- }
3619
- if (value) {
3620
- this.#updateValueFromNumber(value);
3621
- }
3622
- }
3623
- //* Initialise the main event listeners: input keyup, and click selected country.
3624
- #initListeners() {
3625
- this.#bindAllTelInputListeners();
3626
- if (this.#options.allowDropdown) {
3627
- this.#ui.bindAllInitialDropdownListeners(
3628
- this.#abortController.signal,
3629
- () => this.#openDropdown(),
3630
- () => this.#closeDropdown()
3631
- );
3632
- }
3633
- this.#ui.bindHiddenInputSubmitListener(
3634
- this.#abortController.signal,
3635
- () => this.getNumber(),
3636
- () => this.#selectedCountry?.iso2 || ""
3637
- );
3638
- }
3639
- //* Init requests: utils script / geo ip lookup.
3640
- #startAsyncLoads() {
3641
- if (this.#utilsDeferred) {
3642
- const { loadUtils } = this.#options;
3643
- const doAttachUtils = () => {
3644
- intlTelInput.attachUtils(loadUtils)?.catch(() => {
3645
- });
3646
- };
3647
- if (intlTelInput.documentReady()) {
3648
- doAttachUtils();
3649
- } else {
3650
- window.addEventListener("load", doAttachUtils, {
3651
- signal: this.#abortController.signal
3652
- });
3653
- }
3654
- }
3655
- if (this.#autoCountryDeferred) {
3656
- if (this.#selectedCountry) {
3657
- this.#autoCountryDeferred.resolve();
3658
- } else {
3659
- this.#loadAutoCountry();
3660
- }
3661
- }
3662
- }
3663
- //* Perform the geo ip lookup.
3664
- #loadAutoCountry() {
3665
- if (intlTelInput.autoCountry) {
3666
- this.#handleAutoCountryLoaded();
3667
- return;
3668
- }
3669
- this.#ui.setLoading(true);
3670
- if (intlTelInput.startedLoadingAutoCountry) {
3671
- return;
3672
- }
3673
- intlTelInput.startedLoadingAutoCountry = true;
3674
- if (typeof this.#options.geoIpLookup === "function") {
3675
- const successCallback = (iso2 = "") => {
3676
- const iso2Lower = iso2.toLowerCase();
3677
- if (isIso2(iso2Lower)) {
3678
- intlTelInput.autoCountry = iso2Lower;
3679
- setTimeout(() => _Iti.forEachInstance("handleAutoCountryLoaded"));
3680
- } else {
3681
- _Iti.forEachInstance("handleAutoCountryFailure");
3682
- }
3683
- };
3684
- const failureCallback = () => {
3685
- _Iti.forEachInstance("handleAutoCountryFailure");
3686
- };
3687
- this.#options.geoIpLookup(successCallback, failureCallback);
3688
- }
3689
- }
3690
- #openDropdownWithPlus() {
3691
- this.#openDropdown();
3692
- this.#ui.prefillSearchWithPlus();
3693
- }
3694
- //* Delete the character just typed (the one immediately before the caret). Used by Android workarounds where we can't preventDefault on keydown.
3695
- #removeJustTypedChar(inputValue) {
3696
- const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
3697
- const valueBeforeCaret = inputValue.substring(0, currentCaretPos - 1);
3698
- const valueAfterCaret = inputValue.substring(currentCaretPos);
3699
- this.#setTelInputValue(valueBeforeCaret + valueAfterCaret);
3700
- return currentCaretPos - 1;
3701
- }
3702
- //* Initialize the tel input listeners.
3703
- #bindAllTelInputListeners() {
3704
- this.#bindInputListener();
3705
- this.#bindKeydownListener();
3706
- this.#bindPasteListener();
3707
- }
3708
- //* Android workaround for handling plus when separateDialCode enabled (as impossible to handle with keydown/keyup, for which e.key always returns "Unidentified", see https://stackoverflow.com/q/59584061/217866)
3709
- #handleAndroidPlusKey(inputValue) {
3710
- this.#removeJustTypedChar(inputValue);
3711
- this.#openDropdownWithPlus();
3712
- }
3713
- //* Android strictMode workaround: the keydown-based filter can't block these because e.key is "Unidentified" on Android virtual keyboards, so strip them here on input.
3714
- #handleAndroidStrictReject(inputValue, rejectedInput) {
3715
- const newCaretPos = this.#removeJustTypedChar(inputValue);
3716
- this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
3717
- this.#playStrictRejectAnimation();
3718
- this.#dispatchEvent(EVENTS.STRICT_REJECT, {
3719
- source: "key",
3720
- rejectedInput,
3721
- reason: "invalid"
3722
- });
3723
- }
3724
- //* Format the input value using libphonenumber's AYT formatter, preserving caret position (called after an input event).
3725
- #formatAsYouType(inputValue, isDeleteForwards) {
3726
- const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
3727
- const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
3728
- const relevantCharsBeforeCaret = valueBeforeCaret.replace(
3729
- REGEX.NON_PLUS_NUMERIC_GLOBAL,
3730
- ""
3731
- ).length;
3732
- const fullNumber = this.#getFullNumber();
3733
- const formattedValue = formatNumberAsYouType(
3734
- fullNumber,
3735
- inputValue,
3736
- intlTelInput.utils,
3737
- this.#selectedCountry,
3738
- this.#options.separateDialCode
3739
- );
3740
- const newCaretPos = computeNewCaretPosition(
3741
- relevantCharsBeforeCaret,
3742
- formattedValue,
3743
- currentCaretPos,
3744
- isDeleteForwards
3745
- );
3746
- this.#setTelInputValue(formattedValue);
3747
- this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
3748
- }
3749
- //* If separateDialCode AND typed dial code (e.g. from paste or autofill, or from typing a dial code when countrySearch disabled), then remove the typed dial code.
3750
- //* Only strip when a full dial code is actually present — otherwise a lone typed "+" (or partial prefix) would get erased.
3751
- #stripTypedDialCode(inputValue) {
3752
- if (inputValue.startsWith("+") && this.#selectedCountry && this.#getDialCode(inputValue)) {
3753
- const cleanNumber = stripSeparateDialCode(
3754
- inputValue,
3755
- true,
3756
- true,
3757
- this.#selectedCountry
3758
- );
3759
- this.#setTelInputValue(cleanNumber);
3760
- }
3761
- }
3762
- #bindInputListener() {
3763
- this.#userOverrideFormatting = REGEX.ALPHA_UNICODE.test(
3764
- this.#getTelInputValue()
3765
- );
3766
- this.#ui.telInputEl.addEventListener(
3767
- "input",
3768
- this.#handleInputEvent,
3769
- {
3770
- signal: this.#abortController.signal
3771
- }
3772
- );
3773
- }
3774
- //* On input event: (1) Update selected country, (2) Format-as-you-type.
3775
- //* Note that this fires AFTER the input is updated.
3776
- #handleInputEvent = (e) => {
3777
- const {
3778
- strictMode,
3779
- formatAsYouType,
3780
- separateDialCode,
3781
- allowDropdown,
3782
- countrySearch
3783
- } = this.#options;
3784
- const detail = e?.detail;
3785
- if (detail?.["isCountryChange"]) {
3786
- return;
3787
- }
3788
- const inputValue = this.#getTelInputValue();
3789
- if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
3790
- this.#handleAndroidPlusKey(inputValue);
3791
- return;
3792
- }
3793
- if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
3794
- this.#handleAndroidStrictReject(inputValue, e.data);
3795
- return;
3796
- }
3797
- if (this.#updateCountryFromNumber(inputValue)) {
3798
- this.#dispatchCountryChangeEvent();
3799
- }
3800
- const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
3801
- const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
3802
- if (isFormattingChar || isPaste && !strictMode) {
3803
- this.#userOverrideFormatting = true;
3804
- } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
3805
- this.#userOverrideFormatting = false;
3806
- }
3807
- if (formatAsYouType && !this.#userOverrideFormatting && !detail?.["isSetNumber"] && this.#numerals.isAscii()) {
3808
- this.#formatAsYouType(
3809
- inputValue,
3810
- e?.inputType === INPUT_TYPES.DELETE_FORWARD
3811
- );
3812
- }
3813
- if (separateDialCode) {
3814
- this.#stripTypedDialCode(inputValue);
3815
- }
3816
- };
3817
- #bindKeydownListener() {
3818
- const { strictMode, separateDialCode } = this.#options;
3819
- if (!strictMode && !separateDialCode) {
3820
- return;
3821
- }
3822
- this.#ui.telInputEl.addEventListener("keydown", this.#handleKeydownEvent, {
3823
- signal: this.#abortController.signal
3824
- });
3825
- }
3826
- //* On keydown event: (1) if strictMode then prevent invalid characters, (2) if separateDialCode then handle plus key
3827
- //* Note that this fires BEFORE the input is updated.
3828
- #handleKeydownEvent = (e) => {
3829
- const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
3830
- if (!e.key || e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) {
3831
- return;
3832
- }
3833
- if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
3834
- e.preventDefault();
3835
- this.#openDropdownWithPlus();
3836
- return;
3837
- }
3838
- if (!strictMode) {
3839
- return;
3840
- }
3841
- const inputValue = this.#getTelInputValue();
3842
- const alreadyHasPlus = inputValue.startsWith("+");
3843
- const isInitialPlus = !alreadyHasPlus && this.#ui.telInputEl.selectionStart === 0 && e.key === "+";
3844
- const normalisedKey = this.#numerals.normalise(e.key);
3845
- const isNumeric = /^[0-9]$/.test(normalisedKey);
3846
- const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
3847
- const input = this.#ui.telInputEl;
3848
- const selStart = input.selectionStart;
3849
- const selEnd = input.selectionEnd;
3850
- const before = inputValue.slice(0, selStart ?? void 0);
3851
- const after = inputValue.slice(selEnd ?? void 0);
3852
- const newValue = before + normalisedKey + after;
3853
- const newFullNumber = this.#buildFullNumber(newValue);
3854
- let hasExceededMaxLength = false;
3855
- if (intlTelInput.utils && this.#maxCoreNumberLength) {
3856
- const coreNumber = intlTelInput.utils.getCoreNumber(
3857
- newFullNumber,
3858
- this.#selectedCountry?.iso2
3859
- );
3860
- hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
3861
- }
3862
- const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
3863
- const isChangingDialCode = newCountry !== null;
3864
- if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
3865
- this.#playStrictRejectAnimation();
3866
- this.#dispatchEvent(EVENTS.STRICT_REJECT, {
3867
- source: "key",
3868
- rejectedInput: e.key,
3869
- reason: !isAllowedChar ? "invalid" : "max-length"
3870
- });
3871
- e.preventDefault();
3872
- }
3873
- };
3874
- #bindPasteListener() {
3875
- if (!this.#options.strictMode) {
3876
- return;
3877
- }
3878
- this.#ui.telInputEl.addEventListener("paste", this.#handlePasteEvent, {
3879
- signal: this.#abortController.signal
3880
- });
3881
- }
3882
- #handlePasteEvent = (e) => {
3883
- e.preventDefault();
3884
- const input = this.#ui.telInputEl;
3885
- const selStart = input.selectionStart;
3886
- const selEnd = input.selectionEnd;
3887
- const inputValue = this.#getTelInputValue();
3888
- const before = inputValue.slice(0, selStart ?? void 0);
3889
- const after = inputValue.slice(selEnd ?? void 0);
3890
- const iso2 = this.#selectedCountry?.iso2;
3891
- const pastedRaw = e.clipboardData.getData("text");
3892
- const pasted = this.#numerals.normalise(pastedRaw);
3893
- const initialCharSelected = selStart === 0 && selEnd > 0;
3894
- const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
3895
- const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
3896
- const hasLeadingPlus = allowedChars.startsWith("+");
3897
- const numerics = allowedChars.replace(/\+/g, "");
3898
- const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
3899
- let newValue = before + sanitised + after;
3900
- let rejectReason = sanitised !== pasted ? "invalid" : null;
3901
- if (newValue.length > 5 && intlTelInput.utils) {
3902
- let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
3903
- while (coreNumber.length === 0 && newValue.length > 0) {
3904
- newValue = newValue.slice(0, -1);
3905
- coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
3906
- }
3907
- if (!coreNumber) {
3908
- this.#playStrictRejectAnimation();
3909
- this.#dispatchEvent(EVENTS.STRICT_REJECT, {
3910
- source: "paste",
3911
- rejectedInput: pastedRaw,
3912
- reason: "max-length"
3913
- });
3914
- return;
3915
- }
3916
- if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
3917
- if (input.selectionEnd === inputValue.length) {
3918
- const trimLength = coreNumber.length - this.#maxCoreNumberLength;
3919
- newValue = newValue.slice(0, newValue.length - trimLength);
3920
- rejectReason = "max-length";
3921
- } else {
3922
- this.#playStrictRejectAnimation();
3923
- this.#dispatchEvent(EVENTS.STRICT_REJECT, {
3924
- source: "paste",
3925
- rejectedInput: pastedRaw,
3926
- reason: "max-length"
3927
- });
3928
- return;
3929
- }
3930
- }
3931
- }
3932
- this.#setTelInputValue(newValue);
3933
- const caretPos = selStart + sanitised.length;
3934
- input.setSelectionRange(caretPos, caretPos);
3935
- input.dispatchEvent(new InputEvent("input", { bubbles: true }));
3936
- if (rejectReason) {
3937
- if (pasted.length > 0 && sanitised.length === 0) {
3938
- this.#playStrictRejectAnimation();
3939
- }
3940
- this.#dispatchEvent(EVENTS.STRICT_REJECT, {
3941
- source: "paste",
3942
- rejectedInput: pastedRaw,
3943
- reason: rejectReason
3944
- });
3945
- }
3946
- };
3947
- //* Adhere to the input's maxlength attr.
3948
- #truncateToMaxLength(number) {
3949
- const max = Number(this.#ui.telInputEl.getAttribute("maxlength"));
3950
- return max && number.length > max ? number.substring(0, max) : number;
3951
- }
3952
- //* Play the strict-reject animation (shake, or background-colour flash under prefers-reduced-motion) on the wrapper.
3953
- //* Called when strictMode rejects the whole input (keystroke, or whole paste).
3954
- //* Uses the wrapper (not the input) so any separateDialCode / country button move together with the input.
3955
- #playStrictRejectAnimation() {
3956
- if (!this.#options.strictRejectAnimation) {
3957
- return;
3958
- }
3959
- const wrapperEl = this.#ui.telInputEl.parentElement;
3960
- if (!wrapperEl) {
3961
- return;
3962
- }
3963
- wrapperEl.classList.remove("iti__strict-reject-animation");
3964
- void wrapperEl.offsetWidth;
3965
- wrapperEl.classList.add("iti__strict-reject-animation");
3966
- }
3967
- //* Trigger a custom event on the input (typed via ItiEventMap).
3968
- #dispatchEvent(name, detailProps = {}) {
3969
- const e = new CustomEvent(name, {
3970
- bubbles: true,
3971
- cancelable: true,
3972
- detail: detailProps
3973
- });
3974
- this.#ui.telInputEl.dispatchEvent(e);
3975
- }
3976
- //* Open the dropdown.
3977
- #openDropdown() {
3978
- this.#ui.openDropdown(
3979
- (li) => this.#selectListItem(li),
3980
- () => this.#closeDropdown()
3981
- );
3982
- this.#dispatchEvent(EVENTS.OPEN_COUNTRY_DROPDOWN);
3983
- }
3984
- //* Update the input's value to the given number (format first if possible)
3985
- //* NOTE: this is called from setInitialState, handleUtilsLoaded and setNumber.
3986
- #updateValueFromNumber(fullNumber) {
3987
- const { formatOnDisplay, nationalMode, separateDialCode } = this.#options;
3988
- let number = fullNumber;
3989
- if (formatOnDisplay && intlTelInput.utils && this.#selectedCountry) {
3990
- const isRegionless = hasRegionlessDialCode(fullNumber);
3991
- const useNational = nationalMode && !isRegionless || !number.startsWith("+") && !separateDialCode;
3992
- const { NATIONAL, INTERNATIONAL } = intlTelInput.utils.numberFormat;
3993
- const format = useNational ? NATIONAL : INTERNATIONAL;
3994
- number = intlTelInput.utils.formatNumber(
3995
- number,
3996
- this.#selectedCountry?.iso2,
3997
- format
3998
- );
3999
- }
4000
- number = this.#prepareNumberForInput(number);
4001
- this.#setTelInputValue(number);
4002
- }
4003
- //* Check if need to select a new country based on the given number
4004
- //* Note: called from setInitialState, keyup handler, setNumber.
4005
- #updateCountryFromNumber(fullNumber) {
4006
- const iso2 = this.#resolveCountryChangeFromNumber(fullNumber);
4007
- if (iso2 !== null) {
4008
- return this.#updateSelectedCountry(iso2);
4009
- }
4010
- return false;
4011
- }
4012
- // if there is a selected country, and the number doesn't start with a dial code, then add it
4013
- #withDialCodePrefix(number) {
4014
- const dialCode = this.#selectedCountry?.dialCode;
4015
- const nationalPrefix = this.#selectedCountry?.nationalPrefix;
4016
- const alreadyHasPlus = number.startsWith("+");
4017
- if (alreadyHasPlus || !dialCode) {
4018
- return number;
4019
- }
4020
- const hasPrefix = nationalPrefix && number.startsWith(nationalPrefix) && !this.#options.separateDialCode;
4021
- const cleanNumber = hasPrefix ? number.substring(1) : number;
4022
- return `+${dialCode}${cleanNumber}`;
4023
- }
4024
- //* Get the new country iso2 (or "" for empty/globe state) based on the input number, or return null if no change.
4025
- #resolveCountryChangeFromNumber(fullNumber) {
4026
- const plusIndex = fullNumber.indexOf("+");
4027
- let number = plusIndex > 0 ? fullNumber.substring(plusIndex) : fullNumber;
4028
- const selectedIso2 = this.#selectedCountry?.iso2;
4029
- number = this.#withDialCodePrefix(number);
4030
- const dialCodeMatch = this.#getDialCode(number, true);
4031
- const numeric = getNumeric(number);
4032
- if (dialCodeMatch) {
4033
- const dialCodeMatchNumeric = getNumeric(dialCodeMatch);
4034
- const iso2Codes = this.#dialCodeToIso2Map[dialCodeMatchNumeric];
4035
- if (iso2Codes.length === 1) {
4036
- if (iso2Codes[0] === selectedIso2) {
4037
- return null;
4038
- }
4039
- return iso2Codes[0];
4040
- }
4041
- return this.#resolveCountryChangeFromMultiMatch(
4042
- iso2Codes,
4043
- dialCodeMatchNumeric,
4044
- numeric
4045
- );
4046
- } else if (number.startsWith("+") && numeric.length) {
4047
- const currentDial = this.#selectedCountry?.dialCode || "";
4048
- if (currentDial && currentDial.startsWith(numeric)) {
4049
- return null;
4050
- }
4051
- return "";
4052
- } else if ((!number || number === "+") && !selectedIso2 && this.#fallbackCountryIso2) {
4053
- return this.#fallbackCountryIso2;
4054
- }
4055
- return null;
4056
- }
4057
- //* Resolve the country when multiple countries share the matched dial code.
4058
- #resolveCountryChangeFromMultiMatch(iso2Codes, dialCodeMatchNumeric, numeric) {
4059
- const selectedIso2 = this.#selectedCountry?.iso2;
4060
- const selectedDialCode = this.#selectedCountry?.dialCode;
4061
- if (!selectedIso2 && this.#fallbackCountryIso2 && iso2Codes.includes(this.#fallbackCountryIso2)) {
4062
- return this.#fallbackCountryIso2;
4063
- }
4064
- const isRegionlessNanpNumber = selectedDialCode === DIAL_CODE.NANP && isRegionlessNanp(numeric);
4065
- if (isRegionlessNanpNumber) {
4066
- return null;
4067
- }
4068
- const areaCodes = this.#selectedCountry?.areaCodes;
4069
- const priority = this.#selectedCountry?.priority;
4070
- if (areaCodes) {
4071
- const dialCodeAreaCodes = areaCodes.map(
4072
- (areaCode) => `${selectedDialCode}${areaCode}`
4073
- );
4074
- for (const dialCodeAreaCode of dialCodeAreaCodes) {
4075
- if (numeric.startsWith(dialCodeAreaCode)) {
4076
- return null;
4077
- }
4078
- }
4079
- }
4080
- const isMainCountry = priority === 0;
4081
- const hasAreaCodesButNoneMatched = areaCodes && !isMainCountry && numeric.length > dialCodeMatchNumeric.length;
4082
- const isValidSelection = selectedIso2 && iso2Codes.includes(selectedIso2) && !hasAreaCodesButNoneMatched;
4083
- const alreadySelected = selectedIso2 === iso2Codes[0];
4084
- if (!isValidSelection && !alreadySelected) {
4085
- return iso2Codes[0];
4086
- }
4087
- return null;
4088
- }
4089
- //* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
4090
- //* Note: called from setInitialState, updateCountryFromNumber, selectListItem, setCountry.
4091
- #updateSelectedCountry(iso2) {
4092
- const prevIso2 = this.#selectedCountry?.iso2 || "";
4093
- this.#selectedCountry = iso2 ? this.#countryByIso2.get(iso2) : null;
4094
- if (this.#selectedCountry) {
4095
- this.#fallbackCountryIso2 = this.#selectedCountry.iso2;
4096
- }
4097
- this.#ui.setCountry(this.#selectedCountry);
4098
- this.#updatePlaceholder();
4099
- this.#updateMaxCoreNumberLength();
4100
- return prevIso2 !== iso2;
4101
- }
4102
- //* Update the maximum valid number length for the currently selected country.
4103
- #updateMaxCoreNumberLength() {
4104
- const { strictMode, placeholderNumberType, allowedNumberTypes } = this.#options;
4105
- if (!strictMode || !intlTelInput.utils) {
4106
- return;
4107
- }
4108
- const iso2 = this.#selectedCountry?.iso2;
4109
- if (!iso2) {
4110
- this.#maxCoreNumberLength = null;
4111
- return;
4112
- }
4113
- const numberType = intlTelInput.utils.numberType[placeholderNumberType];
4114
- let exampleNumber = intlTelInput.utils.getExampleNumber(
4115
- iso2,
4116
- false,
4117
- numberType,
4118
- true
4119
- );
4120
- let validNumber = exampleNumber;
4121
- while (intlTelInput.utils.isPossibleNumber(
4122
- exampleNumber,
4123
- iso2,
4124
- allowedNumberTypes
4125
- )) {
4126
- validNumber = exampleNumber;
4127
- exampleNumber += "0";
4128
- }
4129
- const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
4130
- this.#maxCoreNumberLength = coreNumber.length;
4131
- if (iso2 === "by") {
4132
- this.#maxCoreNumberLength = coreNumber.length + 1;
4133
- }
4134
- }
4135
- //* Update the input placeholder to an example number from the currently selected country.
4136
- #updatePlaceholder() {
4137
- const {
4138
- autoPlaceholder,
4139
- placeholderNumberType,
4140
- nationalMode,
4141
- customPlaceholder
4142
- } = this.#options;
4143
- const shouldSetPlaceholder = autoPlaceholder === PLACEHOLDER_MODES.AGGRESSIVE || !this.#ui.hadInitialPlaceholder && autoPlaceholder === PLACEHOLDER_MODES.POLITE;
4144
- if (!intlTelInput.utils || !shouldSetPlaceholder) {
4145
- return;
4146
- }
4147
- const numberType = intlTelInput.utils.numberType[placeholderNumberType];
4148
- let placeholder = this.#selectedCountry ? intlTelInput.utils.getExampleNumber(
4149
- this.#selectedCountry.iso2,
4150
- nationalMode,
4151
- numberType
4152
- ) : "";
4153
- placeholder = this.#prepareNumberForInput(placeholder);
4154
- if (typeof customPlaceholder === "function") {
4155
- placeholder = customPlaceholder(placeholder, this.#selectedCountry);
4156
- }
4157
- this.#ui.telInputEl.setAttribute("placeholder", placeholder);
4158
- }
4159
- //* Called when the user selects a list item from the dropdown (no-op if listItem is null).
4160
- #selectListItem(listItem) {
4161
- if (!listItem) {
4162
- return;
4163
- }
4164
- const iso2 = listItem.dataset[DATA_KEYS.ISO2];
4165
- const countryChanged = this.#updateSelectedCountry(iso2);
4166
- this.#closeDropdown();
4167
- const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
4168
- this.#updateDialCode(dialCode);
4169
- if (this.#options.formatOnDisplay) {
4170
- const inputValue = this.#getTelInputValue();
4171
- this.#updateValueFromNumber(inputValue);
4172
- }
4173
- this.#ui.telInputEl.focus();
4174
- if (countryChanged) {
4175
- this.#dispatchCountryChangeEvent();
4176
- this.#dispatchEvent(EVENTS.INPUT, { isCountryChange: true });
4177
- }
4178
- }
4179
- //* Close the dropdown and unbind any listeners.
4180
- #closeDropdown(isDestroy) {
4181
- if (!this.#ui.isDropdownOpen() || this.#options.dropdownAlwaysOpen && !isDestroy) {
4182
- return;
4183
- }
4184
- this.#ui.closeDropdown();
4185
- this.#dispatchEvent(EVENTS.CLOSE_COUNTRY_DROPDOWN);
4186
- }
4187
- //* Replace any existing dial code with the new one
4188
- //* Note: called from selectListItem and setCountry
4189
- #updateDialCode(newDialCodeDigits) {
4190
- const inputValue = this.#getTelInputValue();
4191
- if (!inputValue.startsWith("+")) {
4192
- return;
4193
- }
4194
- const newDialCode = `+${newDialCodeDigits}`;
4195
- const prevDialCode = this.#getDialCode(inputValue);
4196
- let newNumber;
4197
- if (prevDialCode) {
4198
- newNumber = inputValue.replace(prevDialCode, newDialCode);
4199
- } else {
4200
- newNumber = newDialCode;
4201
- }
4202
- this.#setTelInputValue(newNumber);
4203
- }
4204
- //* Try and extract a valid international dial code from a full telephone number.
4205
- //* Note: returns the raw string inc plus character and any whitespace/dots etc.
4206
- #getDialCode(number, includeAreaCode) {
4207
- if (!number.startsWith("+")) {
4208
- return "";
4209
- }
4210
- let dialCode = "";
4211
- let numericChars = "";
4212
- let foundBaseDialCode = false;
4213
- for (let i = 0; i < number.length; i++) {
4214
- const c = number.charAt(i);
4215
- if (!/[0-9]/.test(c)) {
4216
- continue;
4217
- }
4218
- numericChars += c;
4219
- const hasMapEntry = Boolean(this.#dialCodeToIso2Map[numericChars]);
4220
- if (!hasMapEntry) {
4221
- break;
4222
- }
4223
- if (this.#dialCodes.has(numericChars)) {
4224
- dialCode = number.substring(0, i + 1);
4225
- foundBaseDialCode = true;
4226
- if (!includeAreaCode) {
4227
- break;
4228
- }
4229
- } else if (includeAreaCode && foundBaseDialCode) {
4230
- dialCode = number.substring(0, i + 1);
4231
- }
4232
- if (numericChars.length === this.#dialCodeMaxLength) {
4233
- break;
4234
- }
4235
- }
4236
- return dialCode;
4237
- }
4238
- //* Build a full number from an already-normalised value, adding the dial code if separateDialCode is enabled.
4239
- #buildFullNumber(value) {
4240
- const dialCode = this.#selectedCountry?.dialCode;
4241
- const numericValue = getNumeric(value);
4242
- const usePrefix = this.#options.separateDialCode && !value.startsWith("+") && dialCode && numericValue;
4243
- return (usePrefix ? `+${dialCode}` : "") + value;
4244
- }
4245
- //* Get the input value as a full number, adding the dial code if separateDialCode is enabled.
4246
- #getFullNumber() {
4247
- const value = this.#getTelInputValue();
4248
- return this.#buildFullNumber(value);
4249
- }
4250
- //* Remove the dial code if separateDialCode is enabled also cap the length if the input has a maxlength attribute
4251
- #prepareNumberForInput(fullNumber) {
4252
- const hasValidDialCode = Boolean(this.#getDialCode(fullNumber));
4253
- const number = stripSeparateDialCode(
4254
- fullNumber,
4255
- hasValidDialCode,
4256
- this.#options.separateDialCode,
4257
- this.#selectedCountry
4258
- );
4259
- return this.#truncateToMaxLength(number);
4260
- }
4261
- //* Return only the public-facing subset of the selected country data.
4262
- #getPublicCountryData() {
4263
- const d = this.#selectedCountry;
4264
- if (!d) {
4265
- return null;
4266
- }
4267
- const { iso2, dialCode, name } = d;
4268
- return { iso2, dialCode, name };
4269
- }
4270
- //* Dispatch the 'countrychange' event.
4271
- #dispatchCountryChangeEvent() {
4272
- const countryData = this.#getPublicCountryData();
4273
- this.#dispatchEvent(EVENTS.COUNTRY_CHANGE, countryData);
4274
- }
4275
- //**************************
4276
- //* INTERNAL METHODS
4277
- //**************************
4278
- //* Called when the geoip call returns.
4279
- #handleAutoCountryLoaded() {
4280
- if (!this.#autoCountryDeferred || !intlTelInput.autoCountry) {
4281
- return;
4282
- }
4283
- if (!this.#isActive) {
4284
- this.#autoCountryDeferred.resolve();
4285
- return;
4286
- }
4287
- if (this.#ui.isLoading()) {
4288
- this.setCountry(intlTelInput.autoCountry);
4289
- } else {
4290
- this.#fallbackCountryIso2 = intlTelInput.autoCountry;
4291
- }
4292
- this.#ui.setLoading(false);
4293
- this.#autoCountryDeferred.resolve();
4294
- }
4295
- //* Called when the geoip call fails or times out.
4296
- #handleAutoCountryFailure() {
4297
- if (!this.#isActive) {
4298
- this.#autoCountryDeferred?.reject();
4299
- return;
4300
- }
4301
- this.#setInitialState(true);
4302
- this.#ui.setLoading(false);
4303
- this.#autoCountryDeferred?.reject();
4304
- }
4305
- //* Called when the utils request completes.
4306
- #handleUtilsLoaded() {
4307
- if (!this.#isActive) {
4308
- this.#utilsDeferred?.resolve();
4309
- return;
4310
- }
4311
- if (!intlTelInput.utils) {
4312
- this.#utilsDeferred?.resolve();
4313
- return;
4314
- }
4315
- const inputValue = this.#getTelInputValue();
4316
- if (inputValue) {
4317
- this.#updateValueFromNumber(inputValue);
4318
- }
4319
- if (this.#selectedCountry) {
4320
- this.#updatePlaceholder();
4321
- this.#updateMaxCoreNumberLength();
4322
- }
4323
- this.#utilsDeferred?.resolve();
4324
- }
4325
- //* Called when the utils request fails or times out.
4326
- #handleUtilsFailure(error) {
4327
- if (!this.#isActive) {
4328
- this.#utilsDeferred?.reject(error);
4329
- return;
4330
- }
4331
- this.#utilsDeferred?.reject(error);
4332
- }
4333
- //********************
4334
- //* PUBLIC METHODS
4335
- //********************
4336
- //* Remove plugin.
4337
- destroy() {
4338
- if (!this.#isActive) {
4339
- return;
4340
- }
4341
- this.#isActive = false;
4342
- if (this.#options.allowDropdown) {
4343
- this.#closeDropdown(true);
4344
- }
4345
- this.#abortController.abort();
4346
- this.#ui.destroy();
4347
- intlTelInput.instances.delete(String(this.id));
4348
- }
4349
- // check if the instance is still valid (not destroyed)
4350
- isActive() {
4351
- return this.#isActive;
4352
- }
4353
- //* Get the extension from the current number.
4354
- getExtension() {
4355
- if (!this.#isActive) {
4356
- return "";
4357
- }
4358
- ensureUtils("getExtension");
4359
- return intlTelInput.utils.getExtension(
4360
- this.#getFullNumber(),
4361
- this.#selectedCountry?.iso2
4362
- );
4363
- }
4364
- //* Format the number to the given format.
4365
- getNumber(format) {
4366
- if (!this.#isActive) {
4367
- return "";
4368
- }
4369
- ensureUtils("getNumber");
4370
- const iso2 = this.#selectedCountry?.iso2;
4371
- const fullNumber = this.#getFullNumber();
4372
- const formattedNumber = intlTelInput.utils.formatNumber(
4373
- fullNumber,
4374
- iso2,
4375
- format
4376
- );
4377
- return this.#numerals.denormalise(formattedNumber);
4378
- }
4379
- //* Get the type of the entered number e.g. landline/mobile.
4380
- getNumberType() {
4381
- if (!this.#isActive) {
4382
- return SENTINELS.UNKNOWN_NUMBER_TYPE;
4383
- }
4384
- ensureUtils("getNumberType");
4385
- return intlTelInput.utils.getNumberType(
4386
- this.#getFullNumber(),
4387
- this.#selectedCountry?.iso2
4388
- );
4389
- }
4390
- //* Get the country data for the currently selected country.
4391
- getSelectedCountryData() {
4392
- return this.#getPublicCountryData();
4393
- }
4394
- //* Get the validation error.
4395
- getValidationError() {
4396
- if (!this.#isActive) {
4397
- return SENTINELS.UNKNOWN_VALIDATION_ERROR;
4398
- }
4399
- ensureUtils("getValidationError");
4400
- const iso2 = this.#selectedCountry?.iso2;
4401
- return intlTelInput.utils.getValidationError(this.#getFullNumber(), iso2);
4402
- }
4403
- //* Validate the input value using number length only
4404
- isValidNumber() {
4405
- if (!this.#isActive) {
4406
- return null;
4407
- }
4408
- ensureUtils("isValidNumber");
4409
- const dialCode = this.#selectedCountry?.dialCode;
4410
- const iso2 = this.#selectedCountry?.iso2;
4411
- const number = this.#getFullNumber();
4412
- const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
4413
- if (coreNumber) {
4414
- if (dialCode === UK.DIAL_CODE) {
4415
- if (coreNumber[0] === UK.MOBILE_PREFIX && coreNumber.length !== UK.MOBILE_CORE_LENGTH) {
4416
- return false;
4417
- }
4418
- }
4419
- const hasAlphaChar = REGEX.ALPHA_UNICODE.test(number);
4420
- if (!hasAlphaChar && dialCode) {
4421
- const nationalPortion = number.startsWith("+") ? number.slice(1 + dialCode.length) : number;
4422
- const nationalDigitCount = getNumeric(nationalPortion).length;
4423
- if (coreNumber.length > nationalDigitCount) {
4424
- return false;
4425
- }
4426
- }
4427
- }
4428
- return this.#validateNumber("possible");
4429
- }
4430
- //* Validate the input value with precise validation
4431
- isValidNumberPrecise() {
4432
- if (!this.#isActive) {
4433
- return null;
4434
- }
4435
- ensureUtils("isValidNumberPrecise");
4436
- return this.#validateNumber("precise");
4437
- }
4438
- //* Shared internal validation logic to handle alpha character extension rules.
4439
- #validateNumber(mode) {
4440
- const { allowNumberExtensions, allowPhonewords, allowedNumberTypes } = this.#options;
4441
- const iso2 = this.#selectedCountry?.iso2;
4442
- const value = this.#getFullNumber();
4443
- if (!this.#selectedCountry && !hasRegionlessDialCode(value)) {
4444
- return false;
4445
- }
4446
- const check = mode === "precise" ? intlTelInput.utils.isValidNumber : intlTelInput.utils.isPossibleNumber;
4447
- if (!check(value, iso2, allowedNumberTypes)) {
4448
- return false;
4449
- }
4450
- if (REGEX.ALPHA_UNICODE.test(value)) {
4451
- const hasExtension = Boolean(
4452
- intlTelInput.utils.getExtension(value, iso2)
4453
- );
4454
- return hasExtension ? allowNumberExtensions : allowPhonewords;
4455
- }
4456
- return true;
4457
- }
4458
- //* Update the selected country, and update the input value accordingly.
4459
- setCountry(iso2) {
4460
- if (!this.#isActive) {
4461
- return;
4462
- }
4463
- const iso2Lower = iso2?.toLowerCase();
4464
- if (!isIso2(iso2Lower)) {
4465
- throw new Error(`Invalid iso2 code: '${iso2Lower}'`);
4466
- }
4467
- const currentCountry = this.#selectedCountry?.iso2;
4468
- const isCountryChange = iso2 && iso2Lower !== currentCountry || !iso2 && currentCountry;
4469
- if (!isCountryChange) {
4470
- return;
4471
- }
4472
- this.#updateSelectedCountry(iso2Lower);
4473
- this.#updateDialCode(this.#selectedCountry?.dialCode || "");
4474
- if (this.#options.formatOnDisplay) {
4475
- const inputValue = this.#getTelInputValue();
4476
- this.#updateValueFromNumber(inputValue);
4477
- }
4478
- this.#dispatchCountryChangeEvent();
4479
- this.#dispatchEvent(EVENTS.INPUT, { isCountryChange: true });
4480
- }
4481
- //* Set the input value and update the country.
4482
- setNumber(number) {
4483
- if (!this.#isActive) {
4484
- return;
4485
- }
4486
- const normalisedNumber = this.#numerals.normalise(number);
4487
- const countryChanged = this.#updateCountryFromNumber(normalisedNumber);
4488
- this.#updateValueFromNumber(normalisedNumber);
4489
- if (countryChanged) {
4490
- this.#dispatchCountryChangeEvent();
4491
- }
4492
- this.#dispatchEvent(EVENTS.INPUT, { isSetNumber: true });
4493
- }
4494
- //* Set the placeholder number type
4495
- setPlaceholderNumberType(type) {
4496
- if (!this.#isActive) {
4497
- return;
4498
- }
4499
- this.#options.placeholderNumberType = type;
4500
- this.#updatePlaceholder();
4501
- }
4502
- // Set the disabled state of the input and dropdown.
4503
- setDisabled(disabled) {
4504
- if (!this.#isActive) {
4505
- return;
4506
- }
4507
- this.#ui.setDisabled(disabled);
4508
- }
4509
- // Set the readonly state of the input and dropdown.
4510
- setReadonly(readonly) {
4511
- if (!this.#isActive) {
4512
- return;
4513
- }
4514
- this.#ui.setReadonly(readonly);
4515
- }
4516
- //********************
4517
- //* STATIC METHODS
4518
- //********************
4519
- // Internal instance notification used by utils/geoip loaders.
4520
- // Kept public so module-level helpers (e.g. attachUtils) can call it, while still allowing
4521
- // access to private instance methods.
4522
- static forEachInstance(method, ...args) {
4523
- const values = [...intlTelInput.instances.values()];
4524
- const arg = args[0];
4525
- values.forEach((instance) => {
4526
- if (!(instance instanceof _Iti)) {
4527
- return;
4528
- }
4529
- switch (method) {
4530
- case "handleUtilsLoaded":
4531
- instance.#handleUtilsLoaded();
4532
- break;
4533
- case "handleUtilsFailure":
4534
- instance.#handleUtilsFailure(arg);
4535
- break;
4536
- case "handleAutoCountryLoaded":
4537
- instance.#handleAutoCountryLoaded();
4538
- break;
4539
- case "handleAutoCountryFailure":
4540
- instance.#handleAutoCountryFailure();
4541
- break;
4542
- }
4543
- });
4544
- }
4545
- };
4546
- var attachUtils = (source) => {
4547
- if (!intlTelInput.utils && !intlTelInput.startedLoadingUtils) {
4548
- let loadCall;
4549
- if (typeof source === "function") {
4550
- try {
4551
- loadCall = Promise.resolve(source());
4552
- } catch (error) {
4553
- return Promise.reject(error);
4554
- }
4555
- } else {
4556
- return Promise.reject(
4557
- new TypeError(
4558
- `The argument passed to attachUtils must be a function that returns a promise for the utils module, not ${typeof source}`
4559
- )
4560
- );
4561
- }
4562
- intlTelInput.startedLoadingUtils = true;
4563
- return loadCall.then((module) => {
4564
- const utils = module?.default;
4565
- if (!utils || typeof utils !== "object") {
4566
- throw new TypeError(
4567
- "The loader function passed to attachUtils did not resolve to a module object with utils as its default export."
4568
- );
4569
- }
4570
- intlTelInput.utils = utils;
4571
- Iti.forEachInstance("handleUtilsLoaded");
4572
- return true;
4573
- }).catch((error) => {
4574
- Iti.forEachInstance("handleUtilsFailure", error);
4575
- throw error;
4576
- });
4577
- }
4578
- return null;
4579
- };
4580
- var intlTelInput = Object.assign(
4581
- (input, options) => {
4582
- const iti = new Iti(input, options);
4583
- intlTelInput.instances.set(String(iti.id), iti);
4584
- input.iti = iti;
4585
- return iti;
4586
- },
4587
- {
4588
- defaults,
4589
- //* Using a static var like this allows us to mock it in the tests.
4590
- documentReady: () => document.readyState === "complete",
4591
- //* Get the country data object.
4592
- getCountryData: () => data_default,
4593
- //* A getter for the plugin instance.
4594
- getInstance: (input) => {
4595
- const id = input.dataset[DATA_KEYS.INSTANCE_ID];
4596
- return id ? intlTelInput.instances.get(id) ?? null : null;
4597
- },
4598
- //* A map from instance ID to instance object.
4599
- instances: /* @__PURE__ */ new Map(),
4600
- attachUtils,
4601
- startedLoadingUtils: false,
4602
- startedLoadingAutoCountry: false,
4603
- version: "27.3.0"
4604
- }
4605
- );
4606
- var intlTelInput_default = intlTelInput;
4607
-
4608
- // react/src/IntlTelInput.tsx
4609
- import React, {
4610
- useRef,
4611
- useEffect,
4612
- forwardRef,
4613
- useImperativeHandle,
4614
- useCallback
4615
- } from "react";
4616
- var warnInputProp = (prop) => {
4617
- console.warn(`intl-tel-input: ignoring inputProps.${prop} - see docs for more info.`);
4618
- };
4619
- var noop = () => {
4620
- };
4621
- var IntlTelInput = forwardRef(function IntlTelInput2({
4622
- onChangeNumber = noop,
4623
- onChangeCountry = noop,
4624
- onChangeValidity = noop,
4625
- onChangeErrorCode = noop,
4626
- onOpenCountryDropdown,
4627
- onCloseCountryDropdown,
4628
- onStrictReject,
4629
- usePreciseValidation = false,
4630
- inputProps = {},
4631
- disabled = void 0,
4632
- readOnly = void 0,
4633
- value = void 0,
4634
- ...initOptions
4635
- }, ref) {
4636
- const inputRef = useRef(null);
4637
- const itiRef = useRef(null);
4638
- const pluginInputClassesRef = useRef("");
4639
- const lastEmittedNumberRef = useRef(void 0);
4640
- const lastEmittedCountryRef = useRef(void 0);
4641
- const lastEmittedValidityRef = useRef(void 0);
4642
- const lastEmittedErrorCodeRef = useRef(void 0);
4643
- const pendingUpdateRef = useRef(false);
4644
- const onOpenCountryDropdownRef = useRef(onOpenCountryDropdown);
4645
- const onCloseCountryDropdownRef = useRef(onCloseCountryDropdown);
4646
- const onStrictRejectRef = useRef(onStrictReject);
4647
- onOpenCountryDropdownRef.current = onOpenCountryDropdown;
4648
- onCloseCountryDropdownRef.current = onCloseCountryDropdown;
4649
- onStrictRejectRef.current = onStrictReject;
4650
- useImperativeHandle(ref, () => ({
4651
- getInstance: () => itiRef.current,
4652
- getInput: () => inputRef.current
4653
- }));
4654
- const seedInitialState = useCallback(() => {
4655
- if (!itiRef.current?.isActive()) {
4656
- return;
4657
- }
4658
- lastEmittedNumberRef.current = itiRef.current.getNumber() ?? "";
4659
- lastEmittedCountryRef.current = itiRef.current.getSelectedCountryData()?.iso2 ?? "";
4660
- const isValid = (usePreciseValidation ? itiRef.current.isValidNumberPrecise() : itiRef.current.isValidNumber()) ?? false;
4661
- lastEmittedValidityRef.current = isValid;
4662
- lastEmittedErrorCodeRef.current = isValid ? null : itiRef.current.getValidationError();
4663
- }, [usePreciseValidation]);
4664
- const update = useCallback(() => {
4665
- if (!itiRef.current?.isActive()) {
4666
- return;
4667
- }
4668
- if (!intlTelInput_default.utils) {
4669
- pendingUpdateRef.current = true;
4670
- return;
4671
- }
4672
- const num = itiRef.current.getNumber() ?? "";
4673
- const countryIso = itiRef.current.getSelectedCountryData()?.iso2 ?? "";
4674
- if (num !== lastEmittedNumberRef.current) {
4675
- lastEmittedNumberRef.current = num;
4676
- onChangeNumber(num);
4677
- }
4678
- if (countryIso !== lastEmittedCountryRef.current) {
4679
- lastEmittedCountryRef.current = countryIso;
4680
- onChangeCountry(countryIso);
4681
- }
4682
- const isValid = (usePreciseValidation ? itiRef.current.isValidNumberPrecise() : itiRef.current.isValidNumber()) ?? false;
4683
- const errorCode = isValid ? null : itiRef.current.getValidationError();
4684
- if (isValid !== lastEmittedValidityRef.current) {
4685
- lastEmittedValidityRef.current = isValid;
4686
- onChangeValidity(isValid);
4687
- }
4688
- if (errorCode !== lastEmittedErrorCodeRef.current) {
4689
- lastEmittedErrorCodeRef.current = errorCode;
4690
- onChangeErrorCode(errorCode);
4691
- }
4692
- }, [
4693
- onChangeCountry,
4694
- onChangeErrorCode,
4695
- onChangeNumber,
4696
- onChangeValidity,
4697
- usePreciseValidation
4698
- ]);
4699
- useEffect(() => {
4700
- const inputEl = inputRef.current;
4701
- if (!inputEl) {
4702
- return void 0;
4703
- }
4704
- itiRef.current = intlTelInput_default(inputEl, initOptions);
4705
- pluginInputClassesRef.current = inputEl.className;
4706
- const handleOpen = () => onOpenCountryDropdownRef.current?.();
4707
- const handleClose = () => onCloseCountryDropdownRef.current?.();
4708
- const handleStrictReject = (e) => {
4709
- const { source, rejectedInput, reason } = e.detail;
4710
- onStrictRejectRef.current?.(source, rejectedInput, reason);
4711
- };
4712
- inputEl.addEventListener("open:countrydropdown", handleOpen);
4713
- inputEl.addEventListener("close:countrydropdown", handleClose);
4714
- inputEl.addEventListener("strict:reject", handleStrictReject);
4715
- return () => {
4716
- inputEl.removeEventListener("open:countrydropdown", handleOpen);
4717
- inputEl.removeEventListener("close:countrydropdown", handleClose);
4718
- inputEl.removeEventListener("strict:reject", handleStrictReject);
4719
- itiRef.current?.destroy();
4720
- };
4721
- }, []);
4722
- useEffect(() => {
4723
- itiRef.current?.promise.then(() => {
4724
- if (!itiRef.current?.isActive()) {
4725
- return;
4726
- }
4727
- if (pendingUpdateRef.current) {
4728
- pendingUpdateRef.current = false;
4729
- update();
4730
- } else {
4731
- seedInitialState();
4732
- }
4733
- });
4734
- }, [seedInitialState, update]);
4735
- useEffect(() => {
4736
- if (itiRef.current && disabled !== void 0) {
4737
- itiRef.current.setDisabled(disabled);
4738
- }
4739
- }, [disabled]);
4740
- useEffect(() => {
4741
- if (itiRef.current && readOnly !== void 0) {
4742
- itiRef.current.setReadonly(readOnly);
4743
- }
4744
- }, [readOnly]);
4745
- useEffect(() => {
4746
- if (!itiRef.current || value === void 0) {
4747
- return;
4748
- }
4749
- itiRef.current.promise.then(() => {
4750
- if (!itiRef.current?.isActive()) {
4751
- return;
4752
- }
4753
- const next = value ?? "";
4754
- const currentCanonical = itiRef.current.getNumber() ?? "";
4755
- const isFocused = document.activeElement === inputRef.current;
4756
- if (isFocused || currentCanonical === next) {
4757
- return;
4758
- }
4759
- itiRef.current.setNumber(next);
4760
- update();
4761
- });
4762
- }, [value, update]);
4763
- const ignoredInputProps = /* @__PURE__ */ new Set(["type", "ref", "value", "disabled", "readOnly", "onInput"]);
4764
- const sanitizedInputProps = {};
4765
- for (const [key, val] of Object.entries(inputProps)) {
4766
- if (ignoredInputProps.has(key)) {
4767
- warnInputProp(key);
4768
- } else if (key === "className") {
4769
- sanitizedInputProps[key] = `${pluginInputClassesRef.current} ${val}`;
4770
- } else {
4771
- sanitizedInputProps[key] = val;
4772
- }
4773
- }
4774
- return /* @__PURE__ */ React.createElement("span", { style: { display: "contents" } }, /* @__PURE__ */ React.createElement(
4775
- "input",
4776
- {
4777
- ...sanitizedInputProps,
4778
- type: "tel",
4779
- ref: inputRef,
4780
- onInput: update
4781
- }
4782
- ));
4783
- });
4784
- var IntlTelInput_default = IntlTelInput;
4785
- export {
4786
- IntlTelInput_default as default,
4787
- intlTelInput_default as intlTelInput
4788
- };