ngx-dial-input 2.1.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1673 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, forwardRef, Component, Input, Output, HostListener, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/forms';
4
- import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
5
- import { trigger, state, style, transition, animate } from '@angular/animations';
6
- import * as i1 from '@angular/common';
7
- import { CommonModule } from '@angular/common';
8
-
9
- const countries = [
10
- {
11
- name: 'Panama',
12
- native: 'Panamá',
13
- iso2: 'pa',
14
- dialCode: '+507',
15
- format: '+507 ##-###-####',
16
- flag: 'https://flagcdn.com/w40/pa.png',
17
- phoneLength: 8 // Mobile: 8 digits (e.g., +507 6123 4567)
18
- },
19
- {
20
- name: 'Pakistan',
21
- native: 'پاکستان',
22
- iso2: 'pk',
23
- dialCode: '+92',
24
- format: '+92 ### #######',
25
- flag: 'https://flagcdn.com/w40/pk.png',
26
- phoneLength: 10
27
- },
28
- {
29
- name: 'South Korea',
30
- native: '대한민국',
31
- iso2: 'kr',
32
- dialCode: '+82',
33
- format: '+82 ## #### ####',
34
- flag: 'https://flagcdn.com/w40/kr.png',
35
- phoneLength: 10
36
- },
37
- {
38
- name: 'United States',
39
- native: 'United States',
40
- iso2: 'us',
41
- dialCode: '+1',
42
- format: '+1 (###) ###-####',
43
- flag: 'https://flagcdn.com/w40/us.png',
44
- phoneLength: 10
45
- },
46
- {
47
- name: 'United Kingdom',
48
- native: 'United Kingdom',
49
- iso2: 'gb',
50
- dialCode: '+44',
51
- format: '+44 #### ### ###',
52
- flag: 'https://flagcdn.com/w40/gb.png',
53
- phoneLength: 10
54
- },
55
- {
56
- name: 'India',
57
- native: 'भारत',
58
- iso2: 'in',
59
- dialCode: '+91',
60
- format: '+91 #### ######',
61
- flag: 'https://flagcdn.com/w40/in.png',
62
- phoneLength: 10
63
- },
64
- {
65
- name: 'China',
66
- native: '中国',
67
- iso2: 'cn',
68
- dialCode: '+86',
69
- format: '+86 #### #### ####',
70
- flag: 'https://flagcdn.com/w40/cn.png',
71
- phoneLength: 11
72
- },
73
- {
74
- name: 'Japan',
75
- native: '日本',
76
- iso2: 'jp',
77
- dialCode: '+81',
78
- format: '+81 ##-####-####',
79
- flag: 'https://flagcdn.com/w40/jp.png',
80
- phoneLength: 10
81
- },
82
- {
83
- name: 'Germany',
84
- native: 'Deutschland',
85
- iso2: 'de',
86
- dialCode: '+49',
87
- format: '+49 ## #### ####',
88
- flag: 'https://flagcdn.com/w40/de.png',
89
- phoneLength: 10
90
- },
91
- {
92
- name: 'France',
93
- native: 'France',
94
- iso2: 'fr',
95
- dialCode: '+33',
96
- format: '+33 # ## ## ## ##',
97
- flag: 'https://flagcdn.com/w40/fr.png',
98
- phoneLength: 9
99
- },
100
- {
101
- name: 'Brazil',
102
- native: 'Brasil',
103
- iso2: 'br',
104
- dialCode: '+55',
105
- format: '+55 ## ####-####',
106
- flag: 'https://flagcdn.com/w40/br.png',
107
- phoneLength: 11
108
- },
109
- {
110
- name: 'Italy',
111
- native: 'Italia',
112
- iso2: 'it',
113
- dialCode: '+39',
114
- format: '+39 ## #### ####',
115
- flag: 'https://flagcdn.com/w40/it.png',
116
- phoneLength: 10
117
- },
118
- {
119
- name: 'Spain',
120
- native: 'España',
121
- iso2: 'es',
122
- dialCode: '+34',
123
- format: '+34 ## ## ## ##',
124
- flag: 'https://flagcdn.com/w40/es.png',
125
- phoneLength: 9
126
- },
127
- {
128
- name: 'Mexico',
129
- native: 'México',
130
- iso2: 'mx',
131
- dialCode: '+52',
132
- format: '+52 ## #### ####',
133
- flag: 'https://flagcdn.com/w40/mx.png',
134
- phoneLength: 10
135
- },
136
- {
137
- name: 'Russia',
138
- native: 'Россия',
139
- iso2: 'ru',
140
- dialCode: '+7',
141
- format: '+7 (###) ###-##-##',
142
- flag: 'https://flagcdn.com/w40/ru.png',
143
- phoneLength: 10
144
- },
145
- {
146
- name: 'Turkey',
147
- native: 'Türkiye',
148
- iso2: 'tr',
149
- dialCode: '+90',
150
- format: '+90 (###) ###-##-##',
151
- flag: 'https://flagcdn.com/w40/tr.png',
152
- phoneLength: 10
153
- },
154
- {
155
- name: 'Indonesia',
156
- native: 'Indonesia',
157
- iso2: 'id',
158
- dialCode: '+62',
159
- format: '+62 ## #### ####',
160
- flag: 'https://flagcdn.com/w40/id.png',
161
- phoneLength: 10
162
- },
163
- {
164
- name: 'Nigeria',
165
- native: 'Nigeria',
166
- iso2: 'ng',
167
- dialCode: '+234',
168
- format: '+234 ## ### ####',
169
- flag: 'https://flagcdn.com/w40/ng.png',
170
- phoneLength: 10
171
- },
172
- {
173
- name: 'South Africa',
174
- native: 'South Africa',
175
- iso2: 'za',
176
- dialCode: '+27',
177
- format: '+27 ## ### ####',
178
- flag: 'https://flagcdn.com/w40/za.png',
179
- phoneLength: 9
180
- },
181
- {
182
- name: 'Argentina',
183
- native: 'Argentina',
184
- iso2: 'ar',
185
- dialCode: '+54',
186
- format: '+54 ## ####-####',
187
- flag: 'https://flagcdn.com/w40/ar.png',
188
- phoneLength: 10
189
- },
190
- {
191
- name: 'Philippines',
192
- native: 'Pilipinas',
193
- iso2: 'ph',
194
- dialCode: '+63',
195
- format: '+63 ## #### ####',
196
- flag: 'https://flagcdn.com/w40/ph.png',
197
- phoneLength: 10
198
- },
199
- {
200
- name: 'Vietnam',
201
- native: 'Việt Nam',
202
- iso2: 'vn',
203
- dialCode: '+84',
204
- format: '+84 ## #### ####',
205
- flag: 'https://flagcdn.com/w40/vn.png',
206
- phoneLength: 9
207
- },
208
- {
209
- name: 'Thailand',
210
- native: 'ประเทศไทย',
211
- iso2: 'th',
212
- dialCode: '+66',
213
- format: '+66 ## #### ####',
214
- flag: 'https://flagcdn.com/w40/th.png',
215
- phoneLength: 9
216
- },
217
- {
218
- name: 'Egypt',
219
- native: 'مصر',
220
- iso2: 'eg',
221
- dialCode: '+20',
222
- format: '+20 ## #### ####',
223
- flag: 'https://flagcdn.com/w40/eg.png',
224
- phoneLength: 10
225
- },
226
- {
227
- name: 'Colombia',
228
- native: 'Colombia',
229
- iso2: 'co',
230
- dialCode: '+57',
231
- format: '+57 ## #### ####',
232
- flag: 'https://flagcdn.com/w40/co.png',
233
- phoneLength: 10
234
- },
235
- {
236
- name: 'Kenya',
237
- native: 'Kenya',
238
- iso2: 'ke',
239
- dialCode: '+254',
240
- format: '+254 ## ### ####',
241
- flag: 'https://flagcdn.com/w40/ke.png',
242
- phoneLength: 9
243
- },
244
- {
245
- name: 'Malaysia',
246
- native: 'Malaysia',
247
- iso2: 'my',
248
- dialCode: '+60',
249
- format: '+60 ## #### ####',
250
- flag: 'https://flagcdn.com/w40/my.png',
251
- phoneLength: 9
252
- },
253
- {
254
- name: 'Saudi Arabia',
255
- native: 'المملكة العربية السعودية',
256
- iso2: 'sa',
257
- dialCode: '+966',
258
- format: '+966 ## #### ####',
259
- flag: 'https://flagcdn.com/w40/sa.png',
260
- phoneLength: 9
261
- },
262
- {
263
- name: 'Peru',
264
- native: 'Perú',
265
- iso2: 'pe',
266
- dialCode: '+51',
267
- format: '+51 ## #### ####',
268
- flag: 'https://flagcdn.com/w40/pe.png',
269
- phoneLength: 9
270
- },
271
- {
272
- name: 'Chile',
273
- native: 'Chile',
274
- iso2: 'cl',
275
- dialCode: '+56',
276
- format: '+56 ## #### ####',
277
- flag: 'https://flagcdn.com/w40/cl.png',
278
- phoneLength: 9
279
- },
280
- {
281
- name: 'Ukraine',
282
- native: 'Україна',
283
- iso2: 'ua',
284
- dialCode: '+380',
285
- format: '+380 ## ### ## ##',
286
- flag: 'https://flagcdn.com/w40/ua.png',
287
- phoneLength: 9
288
- },
289
- {
290
- name: 'Iraq',
291
- native: 'العراق',
292
- iso2: 'iq',
293
- dialCode: '+964',
294
- format: '+964 ## #### ####',
295
- flag: 'https://flagcdn.com/w40/iq.png',
296
- phoneLength: 10
297
- },
298
- {
299
- name: 'Morocco',
300
- native: 'المغرب',
301
- iso2: 'ma',
302
- dialCode: '+212',
303
- format: '+212 ## ### ####',
304
- flag: 'https://flagcdn.com/w40/ma.png',
305
- phoneLength: 9
306
- },
307
- {
308
- name: 'Algeria',
309
- native: 'الجزائر',
310
- iso2: 'dz',
311
- dialCode: '+213',
312
- format: '+213 ## ## ## ##',
313
- flag: 'https://flagcdn.com/w40/dz.png',
314
- phoneLength: 9
315
- },
316
- {
317
- name: 'Kazakhstan',
318
- native: 'Қазақстан',
319
- iso2: 'kz',
320
- dialCode: '+7',
321
- format: '+7 (###) ###-##-##',
322
- flag: 'https://flagcdn.com/w40/kz.png',
323
- phoneLength: 10
324
- },
325
- {
326
- name: 'Ethiopia',
327
- native: 'ኢትዮጵያ',
328
- iso2: 'et',
329
- dialCode: '+251',
330
- format: '+251 ## #### ####',
331
- flag: 'https://flagcdn.com/w40/et.png',
332
- phoneLength: 9
333
- },
334
- {
335
- name: 'Sudan',
336
- native: 'السودان',
337
- iso2: 'sd',
338
- dialCode: '+249',
339
- format: '+249 ## ### ####',
340
- flag: 'https://flagcdn.com/w40/sd.png',
341
- phoneLength: 9
342
- },
343
- {
344
- name: 'Angola',
345
- native: 'Angola',
346
- iso2: 'ao',
347
- dialCode: '+244',
348
- format: '+244 ## ### ####',
349
- flag: 'https://flagcdn.com/w40/ao.png',
350
- phoneLength: 9
351
- },
352
- {
353
- name: 'Ghana',
354
- native: 'Ghana',
355
- iso2: 'gh',
356
- dialCode: '+233',
357
- format: '+233 ## ### ####',
358
- flag: 'https://flagcdn.com/w40/gh.png',
359
- phoneLength: 9
360
- },
361
- {
362
- name: 'Uganda',
363
- native: 'Uganda',
364
- iso2: 'ug',
365
- dialCode: '+256',
366
- format: '+256 ## ### ####',
367
- flag: 'https://flagcdn.com/w40/ug.png',
368
- phoneLength: 9
369
- },
370
- {
371
- name: 'Nepal',
372
- native: 'नेपाल',
373
- iso2: 'np',
374
- dialCode: '+977',
375
- format: '+977 ## #### ####',
376
- flag: 'https://flagcdn.com/w40/np.png',
377
- phoneLength: 10
378
- },
379
- {
380
- name: 'Venezuela',
381
- native: 'Venezuela',
382
- iso2: 've',
383
- dialCode: '+58',
384
- format: '+58 ##-###-####',
385
- flag: 'https://flagcdn.com/w40/ve.png',
386
- phoneLength: 10
387
- },
388
- {
389
- name: 'Sri Lanka',
390
- native: 'ශ්‍රී ලංකාව',
391
- iso2: 'lk',
392
- dialCode: '+94',
393
- format: '+94 ## #### ####',
394
- flag: 'https://flagcdn.com/w40/lk.png',
395
- phoneLength: 9
396
- },
397
- {
398
- name: 'Tanzania',
399
- native: 'Tanzania',
400
- iso2: 'tz',
401
- dialCode: '+255',
402
- format: '+255 ## ### ####',
403
- flag: 'https://flagcdn.com/w40/tz.png',
404
- phoneLength: 9
405
- },
406
- {
407
- name: 'Zimbabwe',
408
- native: 'Zimbabwe',
409
- iso2: 'zw',
410
- dialCode: '+263',
411
- format: '+263 ## ### ####',
412
- flag: 'https://flagcdn.com/w40/zw.png',
413
- phoneLength: 9
414
- },
415
- {
416
- name: 'Czech Republic',
417
- native: 'Česká republika',
418
- iso2: 'cz',
419
- dialCode: '+420',
420
- format: '+420 ## ### ###',
421
- flag: 'https://flagcdn.com/w40/cz.png',
422
- phoneLength: 9
423
- },
424
- {
425
- name: 'Finland',
426
- native: 'Suomi',
427
- iso2: 'fi',
428
- dialCode: '+358',
429
- format: '+358 ## #### ####',
430
- flag: 'https://flagcdn.com/w40/fi.png',
431
- phoneLength: 10
432
- },
433
- {
434
- name: 'Sweden',
435
- native: 'Sverige',
436
- iso2: 'se',
437
- dialCode: '+46',
438
- format: '+46 ## ### ## ##',
439
- flag: 'https://flagcdn.com/w40/se.png',
440
- phoneLength: 9
441
- },
442
- {
443
- name: 'Norway',
444
- native: 'Norge',
445
- iso2: 'no',
446
- dialCode: '+47',
447
- format: '+47 ## ## ## ##',
448
- flag: 'https://flagcdn.com/w40/no.png',
449
- phoneLength: 8
450
- },
451
- {
452
- name: 'Denmark',
453
- native: 'Danmark',
454
- iso2: 'dk',
455
- dialCode: '+45',
456
- format: '+45 ## ## ## ##',
457
- flag: 'https://flagcdn.com/w40/dk.png',
458
- phoneLength: 8
459
- },
460
- {
461
- name: 'Austria',
462
- native: 'Österreich',
463
- iso2: 'at',
464
- dialCode: '+43',
465
- format: '+43 ## #### ####',
466
- flag: 'https://flagcdn.com/w40/at.png',
467
- phoneLength: 10
468
- },
469
- {
470
- name: 'Belgium',
471
- native: 'België',
472
- iso2: 'be',
473
- dialCode: '+32',
474
- format: '+32 ## ## ## ##',
475
- flag: 'https://flagcdn.com/w40/be.png',
476
- phoneLength: 9
477
- },
478
- {
479
- name: 'Switzerland',
480
- native: 'Schweiz',
481
- iso2: 'ch',
482
- dialCode: '+41',
483
- format: '+41 ## ### ####',
484
- flag: 'https://flagcdn.com/w40/ch.png',
485
- phoneLength: 9
486
- },
487
- {
488
- name: 'Portugal',
489
- native: 'Portugal',
490
- iso2: 'pt',
491
- dialCode: '+351',
492
- format: '+351 ## ### ####',
493
- flag: 'https://flagcdn.com/w40/pt.png',
494
- phoneLength: 9
495
- },
496
- {
497
- name: 'Ireland',
498
- native: 'Éire',
499
- iso2: 'ie',
500
- dialCode: '+353',
501
- format: '+353 ## ### ####',
502
- flag: 'https://flagcdn.com/w40/ie.png',
503
- phoneLength: 9
504
- },
505
- {
506
- name: 'Hungary',
507
- native: 'Magyarország',
508
- iso2: 'hu',
509
- dialCode: '+36',
510
- format: '+36 ## ### ####',
511
- flag: 'https://flagcdn.com/w40/hu.png',
512
- phoneLength: 9
513
- },
514
- {
515
- name: 'Romania',
516
- native: 'România',
517
- iso2: 'ro',
518
- dialCode: '+40',
519
- format: '+40 ## #### ####',
520
- flag: 'https://flagcdn.com/w40/ro.png',
521
- phoneLength: 9
522
- },
523
- {
524
- name: 'Slovakia',
525
- native: 'Slovensko',
526
- iso2: 'sk',
527
- dialCode: '+421',
528
- format: '+421 ## ### ###',
529
- flag: 'https://flagcdn.com/w40/sk.png',
530
- phoneLength: 9
531
- },
532
- {
533
- name: 'Bulgaria',
534
- native: 'България',
535
- iso2: 'bg',
536
- dialCode: '+359',
537
- format: '+359 ## ### ####',
538
- flag: 'https://flagcdn.com/w40/bg.png',
539
- phoneLength: 9
540
- },
541
- {
542
- name: 'Croatia',
543
- native: 'Hrvatska',
544
- iso2: 'hr',
545
- dialCode: '+385',
546
- format: '+385 ## ### ####',
547
- flag: 'https://flagcdn.com/w40/hr.png',
548
- phoneLength: 9
549
- },
550
- {
551
- name: 'Serbia',
552
- native: 'Србија',
553
- iso2: 'rs',
554
- dialCode: '+381',
555
- format: '+381 ## ### ####',
556
- flag: 'https://flagcdn.com/w40/rs.png',
557
- phoneLength: 9
558
- },
559
- {
560
- name: 'Slovenia',
561
- native: 'Slovenija',
562
- iso2: 'si',
563
- dialCode: '+386',
564
- format: '+386 ## ### ####',
565
- flag: 'https://flagcdn.com/w40/si.png',
566
- phoneLength: 8
567
- },
568
- {
569
- name: 'Lithuania',
570
- native: 'Lietuva',
571
- iso2: 'lt',
572
- dialCode: '+370',
573
- format: '+370 ## ### ####',
574
- flag: 'https://flagcdn.com/w40/lt.png',
575
- phoneLength: 8
576
- },
577
- {
578
- name: 'Latvia',
579
- native: 'Latvija',
580
- iso2: 'lv',
581
- dialCode: '+371',
582
- format: '+371 ## ### ####',
583
- flag: 'https://flagcdn.com/w40/lv.png',
584
- phoneLength: 8
585
- },
586
- {
587
- name: 'Estonia',
588
- native: 'Eesti',
589
- iso2: 'ee',
590
- dialCode: '+372',
591
- format: '+372 ## ### ####',
592
- flag: 'https://flagcdn.com/w40/ee.png',
593
- phoneLength: 8
594
- },
595
- {
596
- name: 'Moldova',
597
- native: 'Moldova',
598
- iso2: 'md',
599
- dialCode: '+373',
600
- format: '+373 ## ### ###',
601
- flag: 'https://flagcdn.com/w40/md.png',
602
- phoneLength: 8
603
- },
604
- {
605
- name: 'Belarus',
606
- native: 'Беларусь',
607
- iso2: 'by',
608
- dialCode: '+375',
609
- format: '+375 ## ### ####',
610
- flag: 'https://flagcdn.com/w40/by.png',
611
- phoneLength: 9
612
- },
613
- {
614
- name: 'Bosnia and Herzegovina',
615
- native: 'Bosna i Hercegovina',
616
- iso2: 'ba',
617
- dialCode: '+387',
618
- format: '+387 ## ### ####',
619
- flag: 'https://flagcdn.com/w40/ba.png',
620
- phoneLength: 8
621
- },
622
- {
623
- name: 'North Macedonia',
624
- native: 'Северна Македонија',
625
- iso2: 'mk',
626
- dialCode: '+389',
627
- format: '+389 ## ### ####',
628
- flag: 'https://flagcdn.com/w40/mk.png',
629
- phoneLength: 8
630
- },
631
- {
632
- name: 'Georgia',
633
- native: 'საქართველო',
634
- iso2: 'ge',
635
- dialCode: '+995',
636
- format: '+995 ## ### ####',
637
- flag: 'https://flagcdn.com/w40/ge.png',
638
- phoneLength: 9
639
- },
640
- {
641
- name: 'Armenia',
642
- native: 'Հայաստան',
643
- iso2: 'am',
644
- dialCode: '+374',
645
- format: '+374 ## ### ####',
646
- flag: 'https://flagcdn.com/w40/am.png',
647
- phoneLength: 8
648
- },
649
- {
650
- name: 'Azerbaijan',
651
- native: 'Azərbaycan',
652
- iso2: 'az',
653
- dialCode: '+994',
654
- format: '+994 ## ### ## ##',
655
- flag: 'https://flagcdn.com/w40/az.png',
656
- phoneLength: 9
657
- },
658
- {
659
- name: 'Kyrgyzstan',
660
- native: 'Кыргызстан',
661
- iso2: 'kg',
662
- dialCode: '+996',
663
- format: '+996 ## ### ####',
664
- flag: 'https://flagcdn.com/w40/kg.png',
665
- phoneLength: 9
666
- },
667
- {
668
- name: 'Uzbekistan',
669
- native: 'O‘zbekiston',
670
- iso2: 'uz',
671
- dialCode: '+998',
672
- format: '+998 ## ### ## ##',
673
- flag: 'https://flagcdn.com/w40/uz.png',
674
- phoneLength: 9
675
- },
676
- {
677
- name: 'Turkmenistan',
678
- native: 'Türkmenistan',
679
- iso2: 'tm',
680
- dialCode: '+993',
681
- format: '+993 ## ### ## ##',
682
- flag: 'https://flagcdn.com/w40/tm.png',
683
- phoneLength: 8
684
- },
685
- {
686
- name: 'Tajikistan',
687
- native: 'Тоҷикистон',
688
- iso2: 'tj',
689
- dialCode: '+992',
690
- format: '+992 ## ### ####',
691
- flag: 'https://flagcdn.com/w40/tj.png',
692
- phoneLength: 9
693
- },
694
- {
695
- name: 'Mongolia',
696
- native: 'Монгол улс',
697
- iso2: 'mn',
698
- dialCode: '+976',
699
- format: '+976 ## #### ####',
700
- flag: 'https://flagcdn.com/w40/mn.png',
701
- phoneLength: 8
702
- },
703
- {
704
- name: 'Myanmar',
705
- native: 'မြန်မာ',
706
- iso2: 'mm',
707
- dialCode: '+95',
708
- format: '+95 ## #### ####',
709
- flag: 'https://flagcdn.com/w40/mm.png',
710
- phoneLength: 9
711
- },
712
- {
713
- name: 'Cambodia',
714
- native: 'កម្ពុជា',
715
- iso2: 'kh',
716
- dialCode: '+855',
717
- format: '+855 ## ### ###',
718
- flag: 'https://flagcdn.com/w40/kh.png',
719
- phoneLength: 8
720
- },
721
- {
722
- name: 'Bangladesh',
723
- native: 'বাংলাদেশ',
724
- iso2: 'bd',
725
- dialCode: '+880',
726
- format: '+880 ## #### ####',
727
- flag: 'https://flagcdn.com/w40/bd.png',
728
- phoneLength: 10
729
- },
730
- {
731
- name: 'Laos',
732
- native: 'ສປປ ລາວ',
733
- iso2: 'la',
734
- dialCode: '+856',
735
- format: '+856 ## ### ####',
736
- flag: 'https://flagcdn.com/w40/la.png',
737
- phoneLength: 10
738
- },
739
- {
740
- name: 'Brunei',
741
- native: 'Brunei',
742
- iso2: 'bn',
743
- dialCode: '+673',
744
- format: '+673 ## ### ####',
745
- flag: 'https://flagcdn.com/w40/bn.png',
746
- phoneLength: 7
747
- },
748
- {
749
- name: 'Singapore',
750
- native: '新加坡',
751
- iso2: 'sg',
752
- dialCode: '+65',
753
- format: '+65 #### ####',
754
- flag: 'https://flagcdn.com/w40/sg.png',
755
- phoneLength: 8
756
- },
757
- {
758
- name: 'New Zealand',
759
- native: 'Aotearoa',
760
- iso2: 'nz',
761
- dialCode: '+64',
762
- format: '+64 ## ### ####',
763
- flag: 'https://flagcdn.com/w40/nz.png',
764
- phoneLength: 9
765
- },
766
- {
767
- name: 'Australia',
768
- native: 'Australia',
769
- iso2: 'au',
770
- dialCode: '+61',
771
- format: '+61 ## ### ####',
772
- flag: 'https://flagcdn.com/w40/au.png',
773
- phoneLength: 9
774
- },
775
- {
776
- name: 'Fiji',
777
- native: 'Fiji',
778
- iso2: 'fj',
779
- dialCode: '+679',
780
- format: '+679 ## ### ####',
781
- flag: 'https://flagcdn.com/w40/fj.png',
782
- phoneLength: 7
783
- },
784
- {
785
- name: 'Papua New Guinea',
786
- native: 'Papua New Guinea',
787
- iso2: 'pg',
788
- dialCode: '+675',
789
- format: '+675 ## ### ####',
790
- flag: 'https://flagcdn.com/w40/pg.png',
791
- phoneLength: 8
792
- },
793
- {
794
- name: 'Solomon Islands',
795
- native: 'Solomon Islands',
796
- iso2: 'sb',
797
- dialCode: '+677',
798
- format: '+677 ## ### ####',
799
- flag: 'https://flagcdn.com/w40/sb.png',
800
- phoneLength: 7
801
- },
802
- {
803
- name: 'Samoa',
804
- native: 'Sāmoa',
805
- iso2: 'ws',
806
- dialCode: '+685',
807
- format: '+685 ## ### ####',
808
- flag: 'https://flagcdn.com/w40/ws.png',
809
- phoneLength: 7
810
- },
811
- {
812
- name: 'Tonga',
813
- native: 'Tonga',
814
- iso2: 'to',
815
- dialCode: '+676',
816
- format: '+676 ## ### ####',
817
- flag: 'https://flagcdn.com/w40/to.png',
818
- phoneLength: 7
819
- },
820
- {
821
- name: 'Vanuatu',
822
- native: 'Vanuatu',
823
- iso2: 'vu',
824
- dialCode: '+678',
825
- format: '+678 ## ### ####',
826
- flag: 'https://flagcdn.com/w40/vu.png',
827
- phoneLength: 7
828
- },
829
- {
830
- name: 'Kiribati',
831
- native: 'Kiribati',
832
- iso2: 'ki',
833
- dialCode: '+686',
834
- format: '+686 ## ### ####',
835
- flag: 'https://flagcdn.com/w40/ki.png',
836
- phoneLength: 5
837
- },
838
- {
839
- name: 'Marshall Islands',
840
- native: 'M̧ajeļ',
841
- iso2: 'mh',
842
- dialCode: '+692',
843
- format: '+692 ## ### ####',
844
- flag: 'https://flagcdn.com/w40/mh.png',
845
- phoneLength: 7
846
- },
847
- {
848
- name: 'Micronesia',
849
- native: 'Micronesia',
850
- iso2: 'fm',
851
- dialCode: '+691',
852
- format: '+691 ## ### ####',
853
- flag: 'https://flagcdn.com/w40/fm.png',
854
- phoneLength: 7
855
- },
856
- {
857
- name: 'Tuvalu',
858
- native: 'Tuvalu',
859
- iso2: 'tv',
860
- dialCode: '+688',
861
- format: '+688 ## ### ####',
862
- flag: 'https://flagcdn.com/w40/tv.png',
863
- phoneLength: 5
864
- },
865
- {
866
- name: 'Nauru',
867
- native: 'Nauru',
868
- iso2: 'nr',
869
- dialCode: '+674',
870
- format: '+674 ## ### ####',
871
- flag: 'https://flagcdn.com/w40/nr.png',
872
- phoneLength: 7
873
- },
874
- {
875
- name: 'Palau',
876
- native: 'Beluu er a Belau',
877
- iso2: 'pw',
878
- dialCode: '+680',
879
- format: '+680 ## ### ####',
880
- flag: 'https://flagcdn.com/w40/pw.png',
881
- phoneLength: 7
882
- },
883
- {
884
- name: 'American Samoa',
885
- native: 'American Samoa',
886
- iso2: 'as',
887
- dialCode: '+1 684',
888
- format: '+1 684 ### ####',
889
- flag: 'https://flagcdn.com/w40/as.png',
890
- phoneLength: 7
891
- },
892
- {
893
- name: 'Guam',
894
- native: 'Guam',
895
- iso2: 'gu',
896
- dialCode: '+1 671',
897
- format: '+1 671 ### ####',
898
- flag: 'https://flagcdn.com/w40/gu.png',
899
- phoneLength: 7
900
- },
901
- {
902
- name: 'Northern Mariana Islands',
903
- native: 'Northern Mariana Islands',
904
- iso2: 'mp',
905
- dialCode: '+1 670',
906
- format: '+1 670 ### ####',
907
- flag: 'https://flagcdn.com/w40/mp.png',
908
- phoneLength: 7
909
- },
910
- {
911
- name: 'Puerto Rico',
912
- native: 'Puerto Rico',
913
- iso2: 'pr',
914
- dialCode: '+1 787',
915
- format: '+1 787 ### ####',
916
- flag: 'https://flagcdn.com/w40/pr.png',
917
- phoneLength: 10
918
- },
919
- {
920
- name: 'Virgin Islands (US)',
921
- native: 'Virgin Islands (US)',
922
- iso2: 'vi',
923
- dialCode: '+1 340',
924
- format: '+1 340 ### ####',
925
- flag: 'https://flagcdn.com/w40/vi.png',
926
- phoneLength: 10
927
- },
928
- {
929
- name: 'Saint Kitts and Nevis',
930
- native: 'Saint Kitts and Nevis',
931
- iso2: 'kn',
932
- dialCode: '+1 869',
933
- format: '+1 869 ### ####',
934
- flag: 'https://flagcdn.com/w40/kn.png',
935
- phoneLength: 10
936
- },
937
- {
938
- name: 'Saint Lucia',
939
- native: 'Saint Lucia',
940
- iso2: 'lc',
941
- dialCode: '+1 758',
942
- format: '+1 758 ### ####',
943
- flag: 'https://flagcdn.com/w40/lc.png',
944
- phoneLength: 10
945
- },
946
- {
947
- name: 'Saint Vincent and the Grenadines',
948
- native: 'Saint Vincent and the Grenadines',
949
- iso2: 'vc',
950
- dialCode: '+1 784',
951
- format: '+1 784 ### ####',
952
- flag: 'https://flagcdn.com/w40/vc.png',
953
- phoneLength: 10
954
- },
955
- {
956
- name: 'Dominica',
957
- native: 'Dominica',
958
- iso2: 'dm',
959
- dialCode: '+1 767',
960
- format: '+1 767 ### ####',
961
- flag: 'https://flagcdn.com/w40/dm.png',
962
- phoneLength: 10
963
- },
964
- {
965
- name: 'Grenada',
966
- native: 'Grenada',
967
- iso2: 'gd',
968
- dialCode: '+1 473',
969
- format: '+1 473 ### ####',
970
- flag: 'https://flagcdn.com/w40/gd.png',
971
- phoneLength: 10
972
- },
973
- {
974
- name: 'Barbados',
975
- native: 'Barbados',
976
- iso2: 'bb',
977
- dialCode: '+1 246',
978
- format: '+1 246 ### ####',
979
- flag: 'https://flagcdn.com/w40/bb.png',
980
- phoneLength: 10
981
- },
982
- {
983
- name: 'Antigua and Barbuda',
984
- native: 'Antigua and Barbuda',
985
- iso2: 'ag',
986
- dialCode: '+1 268',
987
- format: '+1 268 ### ####',
988
- flag: 'https://flagcdn.com/w40/ag.png',
989
- phoneLength: 10
990
- },
991
- {
992
- name: 'Dominican Republic',
993
- native: 'República Dominicana',
994
- iso2: 'do',
995
- dialCode: '+1 809',
996
- format: '+1 809 ### ####',
997
- flag: 'https://flagcdn.com/w40/do.png',
998
- phoneLength: 10
999
- },
1000
- {
1001
- name: 'Haiti',
1002
- native: 'Haïti',
1003
- iso2: 'ht',
1004
- dialCode: '+509',
1005
- format: '+509 ##-##-####',
1006
- flag: 'https://flagcdn.com/w40/ht.png',
1007
- phoneLength: 8
1008
- },
1009
- {
1010
- name: 'Cuba',
1011
- native: 'Cuba',
1012
- iso2: 'cu',
1013
- dialCode: '+53',
1014
- format: '+53 ##-###-####',
1015
- flag: 'https://flagcdn.com/w40/cu.png',
1016
- phoneLength: 8
1017
- },
1018
- {
1019
- name: 'Jamaica',
1020
- native: 'Jamaica',
1021
- iso2: 'jm',
1022
- dialCode: '+1 876',
1023
- format: '+1 876 ### ####',
1024
- flag: 'https://flagcdn.com/w40/jm.png',
1025
- phoneLength: 10
1026
- },
1027
- {
1028
- name: 'Bahamas',
1029
- native: 'Bahamas',
1030
- iso2: 'bs',
1031
- dialCode: '+1 242',
1032
- format: '+1 242 ### ####',
1033
- flag: 'https://flagcdn.com/w40/bs.png',
1034
- phoneLength: 10
1035
- },
1036
- {
1037
- name: 'Trinidad and Tobago',
1038
- native: 'Trinidad and Tobago',
1039
- iso2: 'tt',
1040
- dialCode: '+1 868',
1041
- format: '+1 868 ### ####',
1042
- flag: 'https://flagcdn.com/w40/tt.png',
1043
- phoneLength: 10
1044
- },
1045
- {
1046
- name: 'Montserrat',
1047
- native: 'Montserrat',
1048
- iso2: 'ms',
1049
- dialCode: '+1 664',
1050
- format: '+1 664 ### ####',
1051
- flag: 'https://flagcdn.com/w40/ms.png',
1052
- phoneLength: 10
1053
- },
1054
- {
1055
- name: 'Anguilla',
1056
- native: 'Anguilla',
1057
- iso2: 'ai',
1058
- dialCode: '+1 264',
1059
- format: '+1 264 ### ####',
1060
- flag: 'https://flagcdn.com/w40/ai.png',
1061
- phoneLength: 10
1062
- },
1063
- {
1064
- name: 'British Virgin Islands',
1065
- native: 'British Virgin Islands',
1066
- iso2: 'vg',
1067
- dialCode: '+1 284',
1068
- format: '+1 284 ### ####',
1069
- flag: 'https://flagcdn.com/w40/vg.png',
1070
- phoneLength: 10
1071
- },
1072
- {
1073
- name: 'Turks and Caicos Islands',
1074
- native: 'Turks and Caicos Islands',
1075
- iso2: 'tc',
1076
- dialCode: '+1 649',
1077
- format: '+1 649 ### ####',
1078
- flag: 'https://flagcdn.com/w40/tc.png',
1079
- phoneLength: 10
1080
- },
1081
- {
1082
- name: 'Greenland',
1083
- native: 'Kalaallit Nunaat',
1084
- iso2: 'gl',
1085
- dialCode: '+299',
1086
- format: '+299 ## ## ##',
1087
- flag: 'https://flagcdn.com/w40/gl.png',
1088
- phoneLength: 6
1089
- },
1090
- {
1091
- name: 'Bermuda',
1092
- native: 'Bermuda',
1093
- iso2: 'bm',
1094
- dialCode: '+1 441',
1095
- format: '+1 441 ### ####',
1096
- flag: 'https://flagcdn.com/w40/bm.png',
1097
- phoneLength: 10
1098
- },
1099
- {
1100
- name: 'Saint Barthélemy',
1101
- native: 'Saint-Barthélemy',
1102
- iso2: 'bl',
1103
- dialCode: '+590',
1104
- format: '+590 ## ## ## ##',
1105
- flag: 'https://flagcdn.com/w40/bl.png',
1106
- phoneLength: 9
1107
- },
1108
- {
1109
- name: 'Saint Martin (French part)',
1110
- native: 'Saint-Martin (partie française)',
1111
- iso2: 'mf',
1112
- dialCode: '+590',
1113
- format: '+590 ## ## ## ##',
1114
- flag: 'https://flagcdn.com/w40/mf.png',
1115
- phoneLength: 9
1116
- },
1117
- {
1118
- name: 'Guadeloupe',
1119
- native: 'Guadeloupe',
1120
- iso2: 'gp',
1121
- dialCode: '+590',
1122
- format: '+590 ## ## ## ##',
1123
- flag: 'https://flagcdn.com/w40/gp.png',
1124
- phoneLength: 9
1125
- },
1126
- {
1127
- name: 'Martinique',
1128
- native: 'Martinique',
1129
- iso2: 'mq',
1130
- dialCode: '+596',
1131
- format: '+596 ## ## ## ##',
1132
- flag: 'https://flagcdn.com/w40/mq.png',
1133
- phoneLength: 9 // Mobile: 9 digits (e.g., +596 696 12 34 56)
1134
- },
1135
- {
1136
- name: 'Réunion',
1137
- native: 'La Réunion',
1138
- iso2: 're',
1139
- dialCode: '+262',
1140
- format: '+262 ## ## ## ##',
1141
- flag: 'https://flagcdn.com/w40/re.png',
1142
- phoneLength: 9 // Mobile: 9 digits (e.g., +262 692 12 34 56)
1143
- },
1144
- {
1145
- name: 'Mayotte',
1146
- native: 'Mayotte',
1147
- iso2: 'yt',
1148
- dialCode: '+262',
1149
- format: '+262 ## ## ## ##',
1150
- flag: 'https://flagcdn.com/w40/yt.png',
1151
- phoneLength: 9 // Same as Réunion (e.g., +262 639 12 34 56)
1152
- },
1153
- {
1154
- name: 'French Guiana',
1155
- native: 'Guyane française',
1156
- iso2: 'gf',
1157
- dialCode: '+594',
1158
- format: '+594 ## ## ## ##',
1159
- flag: 'https://flagcdn.com/w40/gf.png',
1160
- phoneLength: 9 // Mobile: 9 digits (e.g., +594 694 12 34 56)
1161
- },
1162
- {
1163
- name: 'Wallis and Futuna',
1164
- native: 'Uvea o Futuna',
1165
- iso2: 'wf',
1166
- dialCode: '+681',
1167
- format: '+681 ## ## ##',
1168
- flag: 'https://flagcdn.com/w40/wf.png',
1169
- phoneLength: 6 // Mobile: 6 digits (e.g., +681 72 34 56)
1170
- },
1171
- {
1172
- name: 'New Caledonia',
1173
- native: 'Nouvelle-Calédonie',
1174
- iso2: 'nc',
1175
- dialCode: '+687',
1176
- format: '+687 ## ## ##',
1177
- flag: 'https://flagcdn.com/w40/nc.png',
1178
- phoneLength: 6 // Mobile: 6 digits (e.g., +687 75 12 34)
1179
- },
1180
- {
1181
- name: 'French Polynesia',
1182
- native: 'Polynésie française',
1183
- iso2: 'pf',
1184
- dialCode: '+689',
1185
- format: '+689 ## ## ##',
1186
- flag: 'https://flagcdn.com/w40/pf.png',
1187
- phoneLength: 6 // Mobile: 6 digits (e.g., +689 87 12 34)
1188
- },
1189
- {
1190
- name: 'Cook Islands',
1191
- native: 'Kūki Ākau',
1192
- iso2: 'ck',
1193
- dialCode: '+682',
1194
- format: '+682 ## ###',
1195
- flag: 'https://flagcdn.com/w40/ck.png',
1196
- phoneLength: 5 // Mobile: 5 digits (e.g., +682 71 234)
1197
- },
1198
- {
1199
- name: 'Niue',
1200
- native: 'Niuē',
1201
- iso2: 'nu',
1202
- dialCode: '+683',
1203
- format: '+683 ## ###',
1204
- flag: 'https://flagcdn.com/w40/nu.png',
1205
- phoneLength: 4 // Mobile: 4 digits (e.g., +683 1234)
1206
- },
1207
- {
1208
- name: 'Tokelau',
1209
- native: 'Tokelau',
1210
- iso2: 'tk',
1211
- dialCode: '+690',
1212
- format: '+690 ## ###',
1213
- flag: 'https://flagcdn.com/w40/tk.png',
1214
- phoneLength: 4 // Mobile: 4 digits (e.g., +690 1234)
1215
- },
1216
- {
1217
- name: 'Canada',
1218
- native: 'Canada',
1219
- iso2: 'ca',
1220
- dialCode: '+1',
1221
- format: '+1 ### ### ####',
1222
- flag: 'https://flagcdn.com/w40/ca.png',
1223
- phoneLength: 10 // NANP standard (e.g., +1 416 123 4567)
1224
- },
1225
- {
1226
- name: 'Costa Rica',
1227
- native: 'Costa Rica',
1228
- iso2: 'cr',
1229
- dialCode: '+506',
1230
- format: '+506 ###-####',
1231
- flag: 'https://flagcdn.com/w40/cr.png',
1232
- phoneLength: 8 // Mobile: 8 digits (e.g., +506 6123 4567)
1233
- },
1234
- {
1235
- name: 'El Salvador',
1236
- native: 'El Salvador',
1237
- iso2: 'sv',
1238
- dialCode: '+503',
1239
- format: '+503 ##-###-####',
1240
- flag: 'https://flagcdn.com/w40/sv.png',
1241
- phoneLength: 8 // Mobile: 8 digits (e.g., +503 6123 4567)
1242
- },
1243
- {
1244
- name: 'Guatemala',
1245
- native: 'Guatemala',
1246
- iso2: 'gt',
1247
- dialCode: '+502',
1248
- format: '+502 ##-###-####',
1249
- flag: 'https://flagcdn.com/w40/gt.png',
1250
- phoneLength: 8 // Mobile: 8 digits (e.g., +502 6123 4567)
1251
- },
1252
- {
1253
- name: 'Honduras',
1254
- native: 'Honduras',
1255
- iso2: 'hn',
1256
- dialCode: '+504',
1257
- format: '+504 ##-###-####',
1258
- flag: 'https://flagcdn.com/w40/hn.png',
1259
- phoneLength: 8 // Mobile: 8 digits (e.g., +504 6123 4567)
1260
- },
1261
- {
1262
- name: 'Nicaragua',
1263
- native: 'Nicaragua',
1264
- iso2: 'ni',
1265
- dialCode: '+505',
1266
- format: '+505 ##-###-####',
1267
- flag: 'https://flagcdn.com/w40/ni.png',
1268
- phoneLength: 8 // Mobile: 8 digits (e.g., +505 6123 4567)
1269
- },
1270
- {
1271
- name: 'Belize',
1272
- native: 'Belize',
1273
- iso2: 'bz',
1274
- dialCode: '+501',
1275
- format: '+501 ###-####',
1276
- flag: 'https://flagcdn.com/w40/bz.png',
1277
- phoneLength: 7 // Mobile: 7 digits (e.g., +501 6123 456)
1278
- },
1279
- {
1280
- name: 'Curaçao',
1281
- native: 'Curaçao',
1282
- iso2: 'cw',
1283
- dialCode: '+599',
1284
- format: '+599 9 ### ####',
1285
- flag: 'https://flagcdn.com/w40/cw.png',
1286
- phoneLength: 7 // Mobile: 7 digits (e.g., +599 9 123 4567)
1287
- },
1288
- {
1289
- name: 'Sint Maarten (Dutch part)',
1290
- native: 'Sint Maarten',
1291
- iso2: 'sx',
1292
- dialCode: '+1 721',
1293
- format: '+1 721 ### ####',
1294
- flag: 'https://flagcdn.com/w40/sx.png',
1295
- phoneLength: 10 // Mobile: 10 digits (e.g., +1 721 123 4567)
1296
- },
1297
- {
1298
- name: 'Aruba',
1299
- native: 'Aruba',
1300
- iso2: 'aw',
1301
- dialCode: '+297',
1302
- format: '+297 ### ####',
1303
- flag: 'https://flagcdn.com/w40/aw.png',
1304
- phoneLength: 7 // Mobile: 7 digits (e.g., +297 6123 456)
1305
- },
1306
- {
1307
- name: 'Bonaire, Sint Eustatius and Saba',
1308
- native: 'Bonaire, Sint Eustatius en Saba',
1309
- iso2: 'bq',
1310
- dialCode: '+599 7',
1311
- format: '+599 7 ### ####',
1312
- flag: 'https://flagcdn.com/w40/bq.png',
1313
- phoneLength: 7 // Mobile: 7 digits (e.g., +599 7 123 4567)
1314
- },
1315
- {
1316
- name: 'Sint Eustatius',
1317
- native: 'Sint Eustatius',
1318
- iso2: 'bq',
1319
- dialCode: '+599 3',
1320
- format: '+599 3 ### ####',
1321
- flag: 'https://flagcdn.com/w40/bq.png',
1322
- phoneLength: 7 // Mobile: 7 digits (e.g., +599 3 123 4567)
1323
- },
1324
- {
1325
- name: 'Saba',
1326
- native: 'Saba',
1327
- iso2: 'bq',
1328
- dialCode: '+599 4',
1329
- format: '+599 4 ### ####',
1330
- flag: 'https://flagcdn.com/w40/bq.png',
1331
- phoneLength: 7 // Mobile: 7 digits (e.g., +599 4 123 4567)
1332
- },
1333
- {
1334
- name: 'Greece',
1335
- native: 'Ελλάδα',
1336
- iso2: 'gr',
1337
- dialCode: '+30',
1338
- flag: 'https://flagcdn.com/w40/gr.png',
1339
- format: '+30 ### ### ####',
1340
- phoneLength: 10
1341
- }
1342
- ];
1343
-
1344
- class PhoneInputComponent {
1345
- constructor(eRef) {
1346
- this.eRef = eRef;
1347
- this.countriesList = [...countries].sort((a, b) => a.name.localeCompare(b.name));
1348
- this.searchTerm = '';
1349
- this.defaultCountry = '';
1350
- this.placeholder = '';
1351
- this.searchEnabled = true;
1352
- this.numberFormat = 'international';
1353
- this.setFirstCountry = '';
1354
- this.phoneChange = new EventEmitter();
1355
- this.phoneNumber = '';
1356
- this.isInvalid = false;
1357
- this.dropdownOpen = false;
1358
- this.animating = false;
1359
- this.selectedCountry = countries[0];
1360
- this.onChange = () => { };
1361
- this.onTouched = () => { };
1362
- }
1363
- ngOnInit() {
1364
- if (this.defaultCountry) {
1365
- const match = countries.find(c => c.iso2 === this.defaultCountry.toLowerCase());
1366
- if (match)
1367
- this.selectedCountry = match;
1368
- }
1369
- }
1370
- handleClickOutside(event) {
1371
- if (!this.eRef.nativeElement.contains(event.target)) {
1372
- this.dropdownOpen = false;
1373
- }
1374
- }
1375
- onAnimationDone(event) {
1376
- if (!this.dropdownOpen) {
1377
- this.animating = false;
1378
- }
1379
- }
1380
- toggleDropdown() {
1381
- this.dropdownOpen = !this.dropdownOpen;
1382
- this.animating = true;
1383
- }
1384
- onClickOutside(event) {
1385
- if (!this.eRef.nativeElement.contains(event.target)) {
1386
- this.dropdownOpen = false;
1387
- }
1388
- }
1389
- onSearchChange() {
1390
- const term = this.searchTerm.toLowerCase();
1391
- this.countriesList = countries
1392
- .filter(c => {
1393
- var _a;
1394
- return c.name.toLowerCase().includes(term) ||
1395
- ((_a = c.native) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(term));
1396
- })
1397
- .sort((a, b) => a.name.localeCompare(b.name));
1398
- }
1399
- selectCountry(country) {
1400
- this.selectedCountry = country;
1401
- this.searchTerm = '';
1402
- this.countriesList = countries;
1403
- this.dropdownOpen = false;
1404
- this.emitPhoneChange();
1405
- }
1406
- onPhoneInput() {
1407
- this.emitPhoneChange();
1408
- }
1409
- emitPhoneChange() {
1410
- var _a, _b;
1411
- const raw = this.phoneNumber || '';
1412
- const digitsOnly = raw.replace(/\D/g, '');
1413
- const hyphenCount = (raw.match(/-/g) || []).length;
1414
- const spaceCount = (raw.match(/ /g) || []).length;
1415
- const totalChars = this.phoneNumber.length;
1416
- const maxAllowedLength = ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phoneLength) + hyphenCount + spaceCount;
1417
- if (digitsOnly.length !== ((_b = this.selectedCountry) === null || _b === void 0 ? void 0 : _b.phoneLength)) {
1418
- this.isInvalid = true;
1419
- }
1420
- else if (totalChars > maxAllowedLength) {
1421
- this.isInvalid = true;
1422
- }
1423
- else {
1424
- this.isInvalid = false;
1425
- }
1426
- const fullPhone = this.selectedCountry.dialCode + raw;
1427
- const structuredValue = {
1428
- e164Number: fullPhone,
1429
- nationalNumber: raw,
1430
- dialCode: this.selectedCountry.dialCode,
1431
- countryCode: this.selectedCountry.iso2,
1432
- isValid: !this.isInvalid,
1433
- };
1434
- this.onChange(structuredValue);
1435
- this.phoneChange.emit(structuredValue);
1436
- }
1437
- writeValue(value) {
1438
- if (value && value.dialCode && value.countryCode) {
1439
- const match = countries.find(c => c.dialCode === value.dialCode && c.iso2 === value.countryCode);
1440
- if (match) {
1441
- this.selectedCountry = match;
1442
- }
1443
- else {
1444
- this.selectedCountry = countries[0];
1445
- }
1446
- this.phoneNumber = value.nationalNumber || '';
1447
- }
1448
- else {
1449
- this.selectedCountry = countries[0];
1450
- this.phoneNumber = '';
1451
- }
1452
- }
1453
- registerOnChange(fn) {
1454
- this.onChange = fn;
1455
- }
1456
- registerOnTouched(fn) {
1457
- this.onTouched = fn;
1458
- }
1459
- allowPhoneCharacters(event) {
1460
- const allowedChars = [' ', '-'];
1461
- const charCode = event.charCode;
1462
- // Allow digits 0–9
1463
- if (charCode >= 48 && charCode <= 57)
1464
- return;
1465
- // Allow hyphen and space
1466
- if (allowedChars.includes(event.key))
1467
- return;
1468
- event.preventDefault();
1469
- }
1470
- }
1471
- PhoneInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1472
- PhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PhoneInputComponent, selector: "phone-input", inputs: { defaultCountry: "defaultCountry", placeholder: "placeholder", searchEnabled: "searchEnabled", numberFormat: "numberFormat", setFirstCountry: "setFirstCountry" }, outputs: { phoneChange: "phoneChange" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, providers: [{
1473
- provide: NG_VALUE_ACCESSOR,
1474
- useExisting: forwardRef(() => PhoneInputComponent),
1475
- multi: true
1476
- }], ngImport: i0, template: `<div class="phone-input-wrapper">
1477
- <div class="input-container">
1478
- <!-- Country Selector (20%) -->
1479
- <div class="country-select" (click)="toggleDropdown()" (blur)="toggleDropdown()">
1480
- <img [src]="selectedCountry.flag" width="20" />
1481
- <span>{{selectedCountry.dialCode}}</span>
1482
- <span class="arrow-down">▾</span>
1483
- </div>
1484
-
1485
- <!-- Phone Input (80%) -->
1486
- <input
1487
- type="tel"
1488
- pattern="[0-9\\s\\-]*"
1489
- inputmode="numeric"
1490
- class="phone-input"
1491
- [placeholder]="placeholder"
1492
- [(ngModel)]="phoneNumber"
1493
- [ngClass]="{ 'error-border': isInvalid }"
1494
- (input)="onPhoneInput()"
1495
- (keypress)="allowPhoneCharacters($event)"
1496
- />
1497
- </div>
1498
-
1499
- <!-- Dropdown Content (full width below) -->
1500
- <div
1501
- class="dropdown-content"
1502
- [@dropdownAnimation]="dropdownOpen ? 'open' : 'closed'"
1503
- *ngIf="dropdownOpen || animating"
1504
- (@dropdownAnimation.done)="onAnimationDone($event)" >
1505
- <input
1506
- *ngIf="searchEnabled"
1507
- type="text"
1508
- class="search-box"
1509
- placeholder="Search Country"
1510
- [(ngModel)]="searchTerm"
1511
- (input)="onSearchChange()"
1512
- />
1513
- <div class="country-list">
1514
- <div
1515
- class="country-option"
1516
- *ngFor="let country of countriesList"
1517
- (click)="selectCountry(country)"
1518
- >
1519
- <img [src]="country.flag" width="20" />
1520
- <span class="country-name">{{ country.name }} ({{ country.native }})</span>
1521
- <span class="dial-code">{{ country.dialCode }}</span>
1522
- </div>
1523
- </div>
1524
- </div>
1525
- </div>
1526
-
1527
- `, isInline: true, styles: [".phone-input-wrapper{position:relative;font-family:Arial,sans-serif}.input-container{display:flex;width:100%;padding-bottom:3px}.country-select{width:24%;display:flex;align-items:center;justify-content:space-between;border:1px solid #ccc;border-right:none;border-radius:4px 0 0 4px;padding:8px;cursor:pointer;background-color:#f8f8f8}.country-select img{margin-right:5px}.arrow-down{font-size:13px;color:#666}.arrow-down:after{display:none}.phone-input{width:80%;padding:8px 12px;border:1px solid #ccc;border-radius:0 4px 4px 0;outline:none}.dropdown-content{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #ccc;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:-1px}.search-box{width:100%;padding:8px 12px;border:none;border-bottom:1px solid #eee;outline:none}.country-list{max-height:200px;overflow-y:auto}.country-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-option:hover{background-color:#f5f5f5}.country-option img{margin-right:5px}.country-name{flex-grow:1}.dial-code{color:#666;font-size:.9em}input.error-border{border-color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
1528
- trigger('dropdownAnimation', [
1529
- state('open', style({
1530
- opacity: 1,
1531
- transform: 'scaleY(1)',
1532
- height: '*',
1533
- padding: '*'
1534
- })),
1535
- state('closed', style({
1536
- opacity: 0,
1537
- transform: 'scaleY(0)',
1538
- height: '0px',
1539
- padding: '0px'
1540
- })),
1541
- transition('closed => open', [
1542
- animate('200ms ease-out')
1543
- ]),
1544
- transition('open => closed', [
1545
- animate('150ms ease-in')
1546
- ])
1547
- ])
1548
- ] });
1549
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputComponent, decorators: [{
1550
- type: Component,
1551
- args: [{ selector: 'phone-input', animations: [
1552
- trigger('dropdownAnimation', [
1553
- state('open', style({
1554
- opacity: 1,
1555
- transform: 'scaleY(1)',
1556
- height: '*',
1557
- padding: '*'
1558
- })),
1559
- state('closed', style({
1560
- opacity: 0,
1561
- transform: 'scaleY(0)',
1562
- height: '0px',
1563
- padding: '0px'
1564
- })),
1565
- transition('closed => open', [
1566
- animate('200ms ease-out')
1567
- ]),
1568
- transition('open => closed', [
1569
- animate('150ms ease-in')
1570
- ])
1571
- ])
1572
- ], template: `<div class="phone-input-wrapper">
1573
- <div class="input-container">
1574
- <!-- Country Selector (20%) -->
1575
- <div class="country-select" (click)="toggleDropdown()" (blur)="toggleDropdown()">
1576
- <img [src]="selectedCountry.flag" width="20" />
1577
- <span>{{selectedCountry.dialCode}}</span>
1578
- <span class="arrow-down">▾</span>
1579
- </div>
1580
-
1581
- <!-- Phone Input (80%) -->
1582
- <input
1583
- type="tel"
1584
- pattern="[0-9\\s\\-]*"
1585
- inputmode="numeric"
1586
- class="phone-input"
1587
- [placeholder]="placeholder"
1588
- [(ngModel)]="phoneNumber"
1589
- [ngClass]="{ 'error-border': isInvalid }"
1590
- (input)="onPhoneInput()"
1591
- (keypress)="allowPhoneCharacters($event)"
1592
- />
1593
- </div>
1594
-
1595
- <!-- Dropdown Content (full width below) -->
1596
- <div
1597
- class="dropdown-content"
1598
- [@dropdownAnimation]="dropdownOpen ? 'open' : 'closed'"
1599
- *ngIf="dropdownOpen || animating"
1600
- (@dropdownAnimation.done)="onAnimationDone($event)" >
1601
- <input
1602
- *ngIf="searchEnabled"
1603
- type="text"
1604
- class="search-box"
1605
- placeholder="Search Country"
1606
- [(ngModel)]="searchTerm"
1607
- (input)="onSearchChange()"
1608
- />
1609
- <div class="country-list">
1610
- <div
1611
- class="country-option"
1612
- *ngFor="let country of countriesList"
1613
- (click)="selectCountry(country)"
1614
- >
1615
- <img [src]="country.flag" width="20" />
1616
- <span class="country-name">{{ country.name }} ({{ country.native }})</span>
1617
- <span class="dial-code">{{ country.dialCode }}</span>
1618
- </div>
1619
- </div>
1620
- </div>
1621
- </div>
1622
-
1623
- `, providers: [{
1624
- provide: NG_VALUE_ACCESSOR,
1625
- useExisting: forwardRef(() => PhoneInputComponent),
1626
- multi: true
1627
- }], styles: [".phone-input-wrapper{position:relative;font-family:Arial,sans-serif}.input-container{display:flex;width:100%;padding-bottom:3px}.country-select{width:24%;display:flex;align-items:center;justify-content:space-between;border:1px solid #ccc;border-right:none;border-radius:4px 0 0 4px;padding:8px;cursor:pointer;background-color:#f8f8f8}.country-select img{margin-right:5px}.arrow-down{font-size:13px;color:#666}.arrow-down:after{display:none}.phone-input{width:80%;padding:8px 12px;border:1px solid #ccc;border-radius:0 4px 4px 0;outline:none}.dropdown-content{position:absolute;top:100%;left:0;width:100%;background:white;border:1px solid #ccc;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:-1px}.search-box{width:100%;padding:8px 12px;border:none;border-bottom:1px solid #eee;outline:none}.country-list{max-height:200px;overflow-y:auto}.country-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-option:hover{background-color:#f5f5f5}.country-option img{margin-right:5px}.country-name{flex-grow:1}.dial-code{color:#666;font-size:.9em}input.error-border{border-color:red}\n"] }]
1628
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { defaultCountry: [{
1629
- type: Input
1630
- }], placeholder: [{
1631
- type: Input
1632
- }], searchEnabled: [{
1633
- type: Input
1634
- }], numberFormat: [{
1635
- type: Input
1636
- }], setFirstCountry: [{
1637
- type: Input
1638
- }], phoneChange: [{
1639
- type: Output
1640
- }], handleClickOutside: [{
1641
- type: HostListener,
1642
- args: ['document:click', ['$event']]
1643
- }] } });
1644
-
1645
- class PhoneInputModule {
1646
- }
1647
- PhoneInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1648
- PhoneInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, declarations: [PhoneInputComponent], imports: [CommonModule,
1649
- FormsModule], exports: [PhoneInputComponent] });
1650
- PhoneInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, imports: [CommonModule,
1651
- FormsModule] });
1652
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneInputModule, decorators: [{
1653
- type: NgModule,
1654
- args: [{
1655
- declarations: [PhoneInputComponent],
1656
- imports: [
1657
- CommonModule,
1658
- FormsModule
1659
- ],
1660
- exports: [PhoneInputComponent]
1661
- }]
1662
- }] });
1663
-
1664
- /*
1665
- * Public API Surface of phone-input
1666
- */
1667
-
1668
- /**
1669
- * Generated bundle index. Do not edit.
1670
- */
1671
-
1672
- export { PhoneInputComponent, PhoneInputModule };
1673
- //# sourceMappingURL=ngx-country-dial-input.mjs.map