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.
- package/dist/css/intlTelInput-no-assets.css +2 -2
- package/dist/css/intlTelInput.css +3 -3
- package/dist/js/data.d.ts +1 -4
- package/dist/js/data.js +3 -9
- package/dist/js/data.min.js +2 -2
- package/dist/js/data.mjs +2 -8
- package/dist/js/i18n.d.ts +1 -1592
- package/dist/js/intlTelInput.d.ts +62 -49
- package/dist/js/intlTelInput.js +221 -182
- package/dist/js/intlTelInput.min.js +6 -6
- package/dist/js/intlTelInput.mjs +219 -180
- package/dist/js/intlTelInputWithUtils.js +622 -568
- package/dist/js/intlTelInputWithUtils.min.js +6 -6
- package/dist/js/intlTelInputWithUtils.mjs +620 -566
- package/dist/js/utils.js +56 -55
- package/package.json +14 -181
- package/CHANGELOG.md +0 -33
- package/angular/README.md +0 -13
- package/angular/dist/IntlTelInput.d.ts +0 -110
- package/angular/dist/IntlTelInput.js +0 -5096
- package/angular/dist/IntlTelInputWithUtils.d.ts +0 -3
- package/angular/dist/IntlTelInputWithUtils.js +0 -11435
- package/react/README.md +0 -13
- package/react/dist/IntlTelInput.d.ts +0 -25
- package/react/dist/IntlTelInput.js +0 -4788
- package/react/dist/IntlTelInputWithUtils.d.ts +0 -4
- package/react/dist/IntlTelInputWithUtils.js +0 -11127
- package/svelte/README.md +0 -14
- package/svelte/src/IntlTelInput.svelte +0 -233
- package/svelte/src/IntlTelInput.svelte.d.ts +0 -36
- package/svelte/src/IntlTelInputWithUtils.svelte +0 -24
- package/vue/README.md +0 -14
- package/vue/dist/IntlTelInput-jw1tkqdD.js +0 -2657
- package/vue/dist/IntlTelInput.js +0 -5
- package/vue/dist/IntlTelInput.vue.d.ts +0 -43
- package/vue/dist/IntlTelInputWithUtils.js +0 -49403
- package/vue/dist/index.d.ts +0 -4
- 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
|
-
};
|