intl-tel-input 18.4.0 → 18.5.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/README.md CHANGED
@@ -141,6 +141,10 @@ When enabled (requires `nationalMode` to be disabled), the international dial co
141
141
  Type: `String` Default: `"polite"`
142
142
  Set the input's placeholder to an example number for the selected country, and update it if the country changes. You can specify the number type using the `placeholderNumberType` option. By default it is set to `"polite"`, which means it will only set the placeholder if the input doesn't already have one. You can also set it to `"aggressive"`, which will replace any existing placeholder, or `"off"`. Requires the `utilsScript` option.
143
143
 
144
+ **countrySearch**
145
+ Type: `Boolean` Default: `false`
146
+ Add a search input to the top of the dropdown, so users can filter the displayed countries.
147
+
144
148
  **customContainer**
145
149
  Type: `String` Default: `""`
146
150
  Additional classes to add to the parent div.
@@ -11,9 +11,9 @@
11
11
  .iti__v-hide {
12
12
  visibility: hidden;
13
13
  }
14
- .iti input,
15
- .iti input[type=text],
16
- .iti input[type=tel] {
14
+ .iti input.iti__tel-input,
15
+ .iti input.iti__tel-input[type=text],
16
+ .iti input.iti__tel-input[type=tel] {
17
17
  position: relative;
18
18
  z-index: 0;
19
19
  margin-top: 0 !important;
@@ -52,12 +52,10 @@
52
52
  border-top: none;
53
53
  border-bottom: 4px solid #555;
54
54
  }
55
- .iti__country-list {
55
+ .iti__dropdown-content {
56
56
  position: absolute;
57
57
  z-index: 2;
58
- list-style: none;
59
- padding: 0;
60
- margin: 0 0 0 -1px;
58
+ margin-left: -1px;
61
59
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
62
60
  background-color: white;
63
61
  border: 1px solid #ccc;
@@ -65,18 +63,27 @@
65
63
  overflow-y: scroll;
66
64
  -webkit-overflow-scrolling: touch;
67
65
  }
68
- .iti__country-list--dropup {
66
+ .iti__dropdown-content--dropup {
69
67
  bottom: 100%;
70
68
  margin-bottom: -1px;
71
69
  }
72
- @media (max-width: 500px) {
73
- .iti__country-list {
74
- white-space: normal;
75
- }
70
+ .iti__search-input {
71
+ width: 100%;
72
+ border-width: 0;
73
+ }
74
+ .iti__country-list {
75
+ list-style: none;
76
+ padding: 0;
77
+ margin: 0;
76
78
  }
77
79
  .iti--flexible-dropdown-width .iti__country-list {
78
80
  white-space: nowrap;
79
81
  }
82
+ @media (max-width: 500px) {
83
+ .iti--flexible-dropdown-width .iti__country-list {
84
+ white-space: normal;
85
+ }
86
+ }
80
87
  .iti__flag-box {
81
88
  display: inline-block;
82
89
  width: 20px;
@@ -105,20 +112,20 @@
105
112
  margin-right: 0;
106
113
  margin-left: 6px;
107
114
  }
108
- .iti--allow-dropdown input,
109
- .iti--allow-dropdown input[type=text],
110
- .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
111
- .iti--separate-dial-code input[type=text],
112
- .iti--separate-dial-code input[type=tel] {
115
+ .iti--allow-dropdown input.iti__tel-input,
116
+ .iti--allow-dropdown input.iti__tel-input[type=text],
117
+ .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
118
+ .iti--separate-dial-code input.iti__tel-input[type=text],
119
+ .iti--separate-dial-code input.iti__tel-input[type=tel] {
113
120
  padding-right: 6px;
114
121
  padding-left: 52px;
115
122
  margin-left: 0;
116
123
  }
117
- [dir=rtl] .iti--allow-dropdown input,
118
- [dir=rtl] .iti--allow-dropdown input[type=text],
119
- [dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
120
- [dir=rtl] .iti--separate-dial-code input[type=text],
121
- [dir=rtl] .iti--separate-dial-code input[type=tel] {
124
+ [dir=rtl] .iti--allow-dropdown input.iti__tel-input,
125
+ [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
126
+ [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
127
+ [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
128
+ [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
122
129
  padding-right: 52px;
123
130
  padding-left: 6px;
124
131
  margin-right: 0;
@@ -178,7 +185,7 @@
178
185
  flex-direction: column;
179
186
  justify-content: center;
180
187
  }
181
- .iti--fullscreen-popup .iti__country-list {
188
+ .iti--fullscreen-popup .iti__dropdown-content {
182
189
  max-height: 100%;
183
190
  position: relative;
184
191
  }
@@ -1 +1 @@
1
- .iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=tel],.iti input[type=text]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #ccc;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width:500px){.iti__country-list{white-space:normal}}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:0}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:rgba(0,0,0,.05)}.iti__country-name,.iti__flag-box{margin-right:6px}[dir=rtl] .iti__country-name,[dir=rtl] .iti__flag-box{margin-right:0;margin-left:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=tel],.iti--allow-dropdown input[type=text],.iti--separate-dial-code input,.iti--separate-dial-code input[type=tel],.iti--separate-dial-code input[type=text]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input,[dir=rtl] .iti--allow-dropdown input[type=tel],[dir=rtl] .iti--allow-dropdown input[type=text],[dir=rtl] .iti--separate-dial-code input,[dir=rtl] .iti--separate-dial-code input[type=tel],[dir=rtl] .iti--separate-dial-code input[type=text]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-fullscreen-popup .iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:30px;display:flex;flex-direction:column;justify-content:center}.iti-fullscreen-popup .iti__country-list{max-height:100%;position:relative}.iti-fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (min-resolution:2x){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0 0}.iti__flag.iti__ad{height:14px;background-position:-22px 0}.iti__flag.iti__ae{height:10px;background-position:-44px 0}.iti__flag.iti__af{height:14px;background-position:-66px 0}.iti__flag.iti__ag{height:14px;background-position:-88px 0}.iti__flag.iti__ai{height:10px;background-position:-110px 0}.iti__flag.iti__al{height:15px;background-position:-132px 0}.iti__flag.iti__am{height:10px;background-position:-154px 0}.iti__flag.iti__ao{height:14px;background-position:-176px 0}.iti__flag.iti__aq{height:14px;background-position:-198px 0}.iti__flag.iti__ar{height:13px;background-position:-220px 0}.iti__flag.iti__as{height:10px;background-position:-242px 0}.iti__flag.iti__at{height:14px;background-position:-264px 0}.iti__flag.iti__au{height:10px;background-position:-286px 0}.iti__flag.iti__aw{height:14px;background-position:-308px 0}.iti__flag.iti__ax{height:13px;background-position:-330px 0}.iti__flag.iti__az{height:10px;background-position:-352px 0}.iti__flag.iti__ba{height:10px;background-position:-374px 0}.iti__flag.iti__bb{height:14px;background-position:-396px 0}.iti__flag.iti__bd{height:12px;background-position:-418px 0}.iti__flag.iti__be{height:15px;background-position:-440px 0}.iti__flag.iti__bf{height:14px;background-position:-460px 0}.iti__flag.iti__bg{height:12px;background-position:-482px 0}.iti__flag.iti__bh{height:12px;background-position:-504px 0}.iti__flag.iti__bi{height:12px;background-position:-526px 0}.iti__flag.iti__bj{height:14px;background-position:-548px 0}.iti__flag.iti__bl{height:14px;background-position:-570px 0}.iti__flag.iti__bm{height:10px;background-position:-592px 0}.iti__flag.iti__bn{height:10px;background-position:-614px 0}.iti__flag.iti__bo{height:14px;background-position:-636px 0}.iti__flag.iti__bq{height:14px;background-position:-658px 0}.iti__flag.iti__br{height:14px;background-position:-680px 0}.iti__flag.iti__bs{height:10px;background-position:-702px 0}.iti__flag.iti__bt{height:14px;background-position:-724px 0}.iti__flag.iti__bv{height:15px;background-position:-746px 0}.iti__flag.iti__bw{height:14px;background-position:-768px 0}.iti__flag.iti__by{height:10px;background-position:-790px 0}.iti__flag.iti__bz{height:12px;background-position:-812px 0}.iti__flag.iti__ca{height:10px;background-position:-834px 0}.iti__flag.iti__cc{height:10px;background-position:-856px 0}.iti__flag.iti__cd{height:15px;background-position:-878px 0}.iti__flag.iti__cf{height:14px;background-position:-900px 0}.iti__flag.iti__cg{height:14px;background-position:-922px 0}.iti__flag.iti__ch{height:15px;background-position:-944px 0}.iti__flag.iti__ci{height:14px;background-position:-961px 0}.iti__flag.iti__ck{height:10px;background-position:-983px 0}.iti__flag.iti__cl{height:14px;background-position:-1005px 0}.iti__flag.iti__cm{height:14px;background-position:-1027px 0}.iti__flag.iti__cn{height:14px;background-position:-1049px 0}.iti__flag.iti__co{height:14px;background-position:-1071px 0}.iti__flag.iti__cp{height:14px;background-position:-1093px 0}.iti__flag.iti__cq{height:12px;background-position:-1115px 0}.iti__flag.iti__cr{height:12px;background-position:-1137px 0}.iti__flag.iti__cu{height:10px;background-position:-1159px 0}.iti__flag.iti__cv{height:12px;background-position:-1181px 0}.iti__flag.iti__cw{height:14px;background-position:-1203px 0}.iti__flag.iti__cx{height:10px;background-position:-1225px 0}.iti__flag.iti__cy{height:14px;background-position:-1247px 0}.iti__flag.iti__cz{height:14px;background-position:-1269px 0}.iti__flag.iti__de{height:12px;background-position:-1291px 0}.iti__flag.iti__dg{height:10px;background-position:-1313px 0}.iti__flag.iti__dj{height:14px;background-position:-1335px 0}.iti__flag.iti__dk{height:15px;background-position:-1357px 0}.iti__flag.iti__dm{height:10px;background-position:-1379px 0}.iti__flag.iti__do{height:14px;background-position:-1401px 0}.iti__flag.iti__dz{height:14px;background-position:-1423px 0}.iti__flag.iti__ea{height:14px;background-position:-1445px 0}.iti__flag.iti__ec{height:14px;background-position:-1467px 0}.iti__flag.iti__ee{height:13px;background-position:-1489px 0}.iti__flag.iti__eg{height:14px;background-position:-1511px 0}.iti__flag.iti__eh{height:10px;background-position:-1533px 0}.iti__flag.iti__er{height:10px;background-position:-1555px 0}.iti__flag.iti__es{height:14px;background-position:-1577px 0}.iti__flag.iti__et{height:10px;background-position:-1599px 0}.iti__flag.iti__eu{height:14px;background-position:-1621px 0}.iti__flag.iti__ez{height:14px;background-position:-1643px 0}.iti__flag.iti__fi{height:12px;background-position:-1665px 0}.iti__flag.iti__fj{height:10px;background-position:-1687px 0}.iti__flag.iti__fk{height:10px;background-position:-1709px 0}.iti__flag.iti__fm{height:11px;background-position:-1731px 0}.iti__flag.iti__fo{height:15px;background-position:-1753px 0}.iti__flag.iti__fr{height:14px;background-position:-1775px 0}.iti__flag.iti__fx{height:14px;background-position:-1797px 0}.iti__flag.iti__ga{height:15px;background-position:-1819px 0}.iti__flag.iti__gb{height:10px;background-position:-1841px 0}.iti__flag.iti__gd{height:12px;background-position:-1863px 0}.iti__flag.iti__ge{height:14px;background-position:-1885px 0}.iti__flag.iti__gf{height:14px;background-position:-1907px 0}.iti__flag.iti__gg{height:14px;background-position:-1929px 0}.iti__flag.iti__gh{height:14px;background-position:-1951px 0}.iti__flag.iti__gi{height:10px;background-position:-1973px 0}.iti__flag.iti__gl{height:14px;background-position:-1995px 0}.iti__flag.iti__gm{height:14px;background-position:-2017px 0}.iti__flag.iti__gn{height:14px;background-position:-2039px 0}.iti__flag.iti__gp{height:14px;background-position:-2061px 0}.iti__flag.iti__gq{height:14px;background-position:-2083px 0}.iti__flag.iti__gr{height:14px;background-position:-2105px 0}.iti__flag.iti__gs{height:10px;background-position:-2127px 0}.iti__flag.iti__gt{height:13px;background-position:-2149px 0}.iti__flag.iti__gu{height:11px;background-position:-2171px 0}.iti__flag.iti__gw{height:10px;background-position:-2193px 0}.iti__flag.iti__gy{height:12px;background-position:-2215px 0}.iti__flag.iti__hk{height:14px;background-position:-2237px 0}.iti__flag.iti__hm{height:10px;background-position:-2259px 0}.iti__flag.iti__hn{height:10px;background-position:-2281px 0}.iti__flag.iti__hr{height:10px;background-position:-2303px 0}.iti__flag.iti__ht{height:12px;background-position:-2325px 0}.iti__flag.iti__hu{height:10px;background-position:-2347px 0}.iti__flag.iti__ic{height:14px;background-position:-2369px 0}.iti__flag.iti__id{height:14px;background-position:-2391px 0}.iti__flag.iti__ie{height:10px;background-position:-2413px 0}.iti__flag.iti__il{height:15px;background-position:-2435px 0}.iti__flag.iti__im{height:10px;background-position:-2457px 0}.iti__flag.iti__in{height:14px;background-position:-2479px 0}.iti__flag.iti__io{height:10px;background-position:-2501px 0}.iti__flag.iti__iq{height:14px;background-position:-2523px 0}.iti__flag.iti__ir{height:12px;background-position:-2545px 0}.iti__flag.iti__is{height:15px;background-position:-2567px 0}.iti__flag.iti__it{height:14px;background-position:-2589px 0}.iti__flag.iti__je{height:12px;background-position:-2611px 0}.iti__flag.iti__jm{height:10px;background-position:-2633px 0}.iti__flag.iti__jo{height:10px;background-position:-2655px 0}.iti__flag.iti__jp{height:14px;background-position:-2677px 0}.iti__flag.iti__ke{height:14px;background-position:-2699px 0}.iti__flag.iti__kg{height:12px;background-position:-2721px 0}.iti__flag.iti__kh{height:13px;background-position:-2743px 0}.iti__flag.iti__ki{height:10px;background-position:-2765px 0}.iti__flag.iti__km{height:12px;background-position:-2787px 0}.iti__flag.iti__kn{height:14px;background-position:-2809px 0}.iti__flag.iti__kp{height:10px;background-position:-2831px 0}.iti__flag.iti__kr{height:14px;background-position:-2853px 0}.iti__flag.iti__kw{height:10px;background-position:-2875px 0}.iti__flag.iti__ky{height:10px;background-position:-2897px 0}.iti__flag.iti__kz{height:10px;background-position:-2919px 0}.iti__flag.iti__la{height:14px;background-position:-2941px 0}.iti__flag.iti__lb{height:14px;background-position:-2963px 0}.iti__flag.iti__lc{height:10px;background-position:-2985px 0}.iti__flag.iti__li{height:12px;background-position:-3007px 0}.iti__flag.iti__lk{height:10px;background-position:-3029px 0}.iti__flag.iti__lr{height:11px;background-position:-3051px 0}.iti__flag.iti__ls{height:14px;background-position:-3073px 0}.iti__flag.iti__lt{height:12px;background-position:-3095px 0}.iti__flag.iti__lu{height:12px;background-position:-3117px 0}.iti__flag.iti__lv{height:10px;background-position:-3139px 0}.iti__flag.iti__ly{height:10px;background-position:-3161px 0}.iti__flag.iti__ma{height:14px;background-position:-3183px 0}.iti__flag.iti__mc{height:15px;background-position:-3205px 0}.iti__flag.iti__md{height:10px;background-position:-3226px 0}.iti__flag.iti__me{height:10px;background-position:-3248px 0}.iti__flag.iti__mf{height:14px;background-position:-3270px 0}.iti__flag.iti__mg{height:14px;background-position:-3292px 0}.iti__flag.iti__mh{height:11px;background-position:-3314px 0}.iti__flag.iti__mk{height:10px;background-position:-3336px 0}.iti__flag.iti__ml{height:14px;background-position:-3358px 0}.iti__flag.iti__mm{height:14px;background-position:-3380px 0}.iti__flag.iti__mn{height:10px;background-position:-3402px 0}.iti__flag.iti__mo{height:14px;background-position:-3424px 0}.iti__flag.iti__mp{height:10px;background-position:-3446px 0}.iti__flag.iti__mq{height:14px;background-position:-3468px 0}.iti__flag.iti__mr{height:14px;background-position:-3490px 0}.iti__flag.iti__ms{height:10px;background-position:-3512px 0}.iti__flag.iti__mt{height:14px;background-position:-3534px 0}.iti__flag.iti__mu{height:14px;background-position:-3556px 0}.iti__flag.iti__mv{height:14px;background-position:-3578px 0}.iti__flag.iti__mw{height:14px;background-position:-3600px 0}.iti__flag.iti__mx{height:12px;background-position:-3622px 0}.iti__flag.iti__my{height:10px;background-position:-3644px 0}.iti__flag.iti__mz{height:14px;background-position:-3666px 0}.iti__flag.iti__na{height:14px;background-position:-3688px 0}.iti__flag.iti__nc{height:10px;background-position:-3710px 0}.iti__flag.iti__ne{height:15px;background-position:-3732px 0}.iti__flag.iti__nf{height:10px;background-position:-3752px 0}.iti__flag.iti__ng{height:10px;background-position:-3774px 0}.iti__flag.iti__ni{height:12px;background-position:-3796px 0}.iti__flag.iti__nl{height:14px;background-position:-3818px 0}.iti__flag.iti__no{height:15px;background-position:-3840px 0}.iti__flag.iti__np{height:15px;background-position:-3862px 0}.iti__flag.iti__nr{height:10px;background-position:-3877px 0}.iti__flag.iti__nu{height:10px;background-position:-3899px 0}.iti__flag.iti__nz{height:10px;background-position:-3921px 0}.iti__flag.iti__om{height:10px;background-position:-3943px 0}.iti__flag.iti__pa{height:14px;background-position:-3965px 0}.iti__flag.iti__pe{height:14px;background-position:-3987px 0}.iti__flag.iti__pf{height:14px;background-position:-4009px 0}.iti__flag.iti__pg{height:15px;background-position:-4031px 0}.iti__flag.iti__ph{height:10px;background-position:-4053px 0}.iti__flag.iti__pk{height:14px;background-position:-4075px 0}.iti__flag.iti__pl{height:13px;background-position:-4097px 0}.iti__flag.iti__pm{height:14px;background-position:-4119px 0}.iti__flag.iti__pn{height:10px;background-position:-4141px 0}.iti__flag.iti__pr{height:14px;background-position:-4163px 0}.iti__flag.iti__ps{height:10px;background-position:-4185px 0}.iti__flag.iti__pt{height:14px;background-position:-4207px 0}.iti__flag.iti__pw{height:13px;background-position:-4229px 0}.iti__flag.iti__py{height:11px;background-position:-4251px 0}.iti__flag.iti__qa{height:8px;background-position:-4273px 0}.iti__flag.iti__re{height:14px;background-position:-4295px 0}.iti__flag.iti__ro{height:14px;background-position:-4317px 0}.iti__flag.iti__rs{height:14px;background-position:-4339px 0}.iti__flag.iti__ru{height:14px;background-position:-4361px 0}.iti__flag.iti__rw{height:14px;background-position:-4383px 0}.iti__flag.iti__sa{height:14px;background-position:-4405px 0}.iti__flag.iti__sb{height:10px;background-position:-4427px 0}.iti__flag.iti__sc{height:10px;background-position:-4449px 0}.iti__flag.iti__sd{height:10px;background-position:-4471px 0}.iti__flag.iti__se{height:13px;background-position:-4493px 0}.iti__flag.iti__sg{height:14px;background-position:-4515px 0}.iti__flag.iti__sh{height:10px;background-position:-4537px 0}.iti__flag.iti__si{height:10px;background-position:-4559px 0}.iti__flag.iti__sj{height:15px;background-position:-4581px 0}.iti__flag.iti__sk{height:14px;background-position:-4603px 0}.iti__flag.iti__sl{height:14px;background-position:-4625px 0}.iti__flag.iti__sm{height:15px;background-position:-4647px 0}.iti__flag.iti__sn{height:14px;background-position:-4669px 0}.iti__flag.iti__so{height:14px;background-position:-4691px 0}.iti__flag.iti__sr{height:14px;background-position:-4713px 0}.iti__flag.iti__ss{height:10px;background-position:-4735px 0}.iti__flag.iti__st{height:10px;background-position:-4757px 0}.iti__flag.iti__su{height:10px;background-position:-4779px 0}.iti__flag.iti__sv{height:12px;background-position:-4801px 0}.iti__flag.iti__sx{height:14px;background-position:-4823px 0}.iti__flag.iti__sy{height:14px;background-position:-4845px 0}.iti__flag.iti__sz{height:14px;background-position:-4867px 0}.iti__flag.iti__ta{height:10px;background-position:-4889px 0}.iti__flag.iti__tc{height:10px;background-position:-4911px 0}.iti__flag.iti__td{height:14px;background-position:-4933px 0}.iti__flag.iti__tf{height:14px;background-position:-4955px 0}.iti__flag.iti__tg{height:13px;background-position:-4977px 0}.iti__flag.iti__th{height:14px;background-position:-4999px 0}.iti__flag.iti__tj{height:10px;background-position:-5021px 0}.iti__flag.iti__tk{height:10px;background-position:-5043px 0}.iti__flag.iti__tl{height:10px;background-position:-5065px 0}.iti__flag.iti__tm{height:14px;background-position:-5087px 0}.iti__flag.iti__tn{height:14px;background-position:-5109px 0}.iti__flag.iti__to{height:10px;background-position:-5131px 0}.iti__flag.iti__tr{height:14px;background-position:-5153px 0}.iti__flag.iti__tt{height:12px;background-position:-5175px 0}.iti__flag.iti__tv{height:10px;background-position:-5197px 0}.iti__flag.iti__tw{height:14px;background-position:-5219px 0}.iti__flag.iti__tz{height:14px;background-position:-5241px 0}.iti__flag.iti__ua{height:14px;background-position:-5263px 0}.iti__flag.iti__ug{height:14px;background-position:-5285px 0}.iti__flag.iti__uk{height:10px;background-position:-5307px 0}.iti__flag.iti__um{height:11px;background-position:-5329px 0}.iti__flag.iti__un{height:14px;background-position:-5351px 0}.iti__flag.iti__us{height:11px;background-position:-5373px 0}.iti__flag.iti__uy{height:14px;background-position:-5395px 0}.iti__flag.iti__uz{height:10px;background-position:-5417px 0}.iti__flag.iti__va{height:15px;background-position:-5439px 0}.iti__flag.iti__vc{height:14px;background-position:-5456px 0}.iti__flag.iti__ve{height:14px;background-position:-5478px 0}.iti__flag.iti__vg{height:10px;background-position:-5500px 0}.iti__flag.iti__vi{height:14px;background-position:-5522px 0}.iti__flag.iti__vn{height:14px;background-position:-5544px 0}.iti__flag.iti__vu{height:12px;background-position:-5566px 0}.iti__flag.iti__wf{height:14px;background-position:-5588px 0}.iti__flag.iti__ws{height:10px;background-position:-5610px 0}.iti__flag.iti__xk{height:15px;background-position:-5632px 0}.iti__flag.iti__ye{height:14px;background-position:-5654px 0}.iti__flag.iti__yt{height:14px;background-position:-5676px 0}.iti__flag.iti__za{height:14px;background-position:-5698px 0}.iti__flag.iti__zm{height:14px;background-position:-5720px 0}.iti__flag.iti__zw{height:10px;background-position:-5742px 0}.iti__flag{height:15px;box-shadow:0 0 1px 0 #888;background-image:url(../img/flags.png?1);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (min-resolution:2x){.iti__flag{background-image:url(../img/flags@2x.png?1)}}.iti__flag.iti__np{background-color:transparent}
1
+ .iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input.iti__tel-input,.iti input.iti__tel-input[type=tel],.iti input.iti__tel-input[type=text]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__dropdown-content{position:absolute;z-index:2;margin-left:-1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #ccc;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__dropdown-content--dropup{bottom:100%;margin-bottom:-1px}.iti__search-input{width:100%;border-width:0}.iti__country-list{list-style:none;padding:0;margin:0}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}@media (max-width:500px){.iti--flexible-dropdown-width .iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:0}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:rgba(0,0,0,.05)}.iti__country-name,.iti__flag-box{margin-right:6px}[dir=rtl] .iti__country-name,[dir=rtl] .iti__flag-box{margin-right:0;margin-left:6px}.iti--allow-dropdown input.iti__tel-input,.iti--allow-dropdown input.iti__tel-input[type=tel],.iti--allow-dropdown input.iti__tel-input[type=text],.iti--separate-dial-code input.iti__tel-input,.iti--separate-dial-code input.iti__tel-input[type=tel],.iti--separate-dial-code input.iti__tel-input[type=text]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input.iti__tel-input,[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel],[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],[dir=rtl] .iti--separate-dial-code input.iti__tel-input,[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel],[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--allow-dropdown .iti__flag-container:has(+input[disabled]):hover,.iti--allow-dropdown .iti__flag-container:has(+input[readonly]):hover{cursor:default}.iti--allow-dropdown .iti__flag-container:has(+input[disabled]):hover .iti__selected-flag,.iti--allow-dropdown .iti__flag-container:has(+input[readonly]):hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti--fullscreen-popup.iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:30px;display:flex;flex-direction:column;justify-content:center}.iti--fullscreen-popup .iti__dropdown-content{max-height:100%;position:relative}.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (min-resolution:2x){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0 0}.iti__flag.iti__ad{height:14px;background-position:-22px 0}.iti__flag.iti__ae{height:10px;background-position:-44px 0}.iti__flag.iti__af{height:14px;background-position:-66px 0}.iti__flag.iti__ag{height:14px;background-position:-88px 0}.iti__flag.iti__ai{height:10px;background-position:-110px 0}.iti__flag.iti__al{height:15px;background-position:-132px 0}.iti__flag.iti__am{height:10px;background-position:-154px 0}.iti__flag.iti__ao{height:14px;background-position:-176px 0}.iti__flag.iti__aq{height:14px;background-position:-198px 0}.iti__flag.iti__ar{height:13px;background-position:-220px 0}.iti__flag.iti__as{height:10px;background-position:-242px 0}.iti__flag.iti__at{height:14px;background-position:-264px 0}.iti__flag.iti__au{height:10px;background-position:-286px 0}.iti__flag.iti__aw{height:14px;background-position:-308px 0}.iti__flag.iti__ax{height:13px;background-position:-330px 0}.iti__flag.iti__az{height:10px;background-position:-352px 0}.iti__flag.iti__ba{height:10px;background-position:-374px 0}.iti__flag.iti__bb{height:14px;background-position:-396px 0}.iti__flag.iti__bd{height:12px;background-position:-418px 0}.iti__flag.iti__be{height:15px;background-position:-440px 0}.iti__flag.iti__bf{height:14px;background-position:-460px 0}.iti__flag.iti__bg{height:12px;background-position:-482px 0}.iti__flag.iti__bh{height:12px;background-position:-504px 0}.iti__flag.iti__bi{height:12px;background-position:-526px 0}.iti__flag.iti__bj{height:14px;background-position:-548px 0}.iti__flag.iti__bl{height:14px;background-position:-570px 0}.iti__flag.iti__bm{height:10px;background-position:-592px 0}.iti__flag.iti__bn{height:10px;background-position:-614px 0}.iti__flag.iti__bo{height:14px;background-position:-636px 0}.iti__flag.iti__bq{height:14px;background-position:-658px 0}.iti__flag.iti__br{height:14px;background-position:-680px 0}.iti__flag.iti__bs{height:10px;background-position:-702px 0}.iti__flag.iti__bt{height:14px;background-position:-724px 0}.iti__flag.iti__bv{height:15px;background-position:-746px 0}.iti__flag.iti__bw{height:14px;background-position:-768px 0}.iti__flag.iti__by{height:10px;background-position:-790px 0}.iti__flag.iti__bz{height:12px;background-position:-812px 0}.iti__flag.iti__ca{height:10px;background-position:-834px 0}.iti__flag.iti__cc{height:10px;background-position:-856px 0}.iti__flag.iti__cd{height:15px;background-position:-878px 0}.iti__flag.iti__cf{height:14px;background-position:-900px 0}.iti__flag.iti__cg{height:14px;background-position:-922px 0}.iti__flag.iti__ch{height:15px;background-position:-944px 0}.iti__flag.iti__ci{height:14px;background-position:-961px 0}.iti__flag.iti__ck{height:10px;background-position:-983px 0}.iti__flag.iti__cl{height:14px;background-position:-1005px 0}.iti__flag.iti__cm{height:14px;background-position:-1027px 0}.iti__flag.iti__cn{height:14px;background-position:-1049px 0}.iti__flag.iti__co{height:14px;background-position:-1071px 0}.iti__flag.iti__cp{height:14px;background-position:-1093px 0}.iti__flag.iti__cq{height:12px;background-position:-1115px 0}.iti__flag.iti__cr{height:12px;background-position:-1137px 0}.iti__flag.iti__cu{height:10px;background-position:-1159px 0}.iti__flag.iti__cv{height:12px;background-position:-1181px 0}.iti__flag.iti__cw{height:14px;background-position:-1203px 0}.iti__flag.iti__cx{height:10px;background-position:-1225px 0}.iti__flag.iti__cy{height:14px;background-position:-1247px 0}.iti__flag.iti__cz{height:14px;background-position:-1269px 0}.iti__flag.iti__de{height:12px;background-position:-1291px 0}.iti__flag.iti__dg{height:10px;background-position:-1313px 0}.iti__flag.iti__dj{height:14px;background-position:-1335px 0}.iti__flag.iti__dk{height:15px;background-position:-1357px 0}.iti__flag.iti__dm{height:10px;background-position:-1379px 0}.iti__flag.iti__do{height:14px;background-position:-1401px 0}.iti__flag.iti__dz{height:14px;background-position:-1423px 0}.iti__flag.iti__ea{height:14px;background-position:-1445px 0}.iti__flag.iti__ec{height:14px;background-position:-1467px 0}.iti__flag.iti__ee{height:13px;background-position:-1489px 0}.iti__flag.iti__eg{height:14px;background-position:-1511px 0}.iti__flag.iti__eh{height:10px;background-position:-1533px 0}.iti__flag.iti__er{height:10px;background-position:-1555px 0}.iti__flag.iti__es{height:14px;background-position:-1577px 0}.iti__flag.iti__et{height:10px;background-position:-1599px 0}.iti__flag.iti__eu{height:14px;background-position:-1621px 0}.iti__flag.iti__ez{height:14px;background-position:-1643px 0}.iti__flag.iti__fi{height:12px;background-position:-1665px 0}.iti__flag.iti__fj{height:10px;background-position:-1687px 0}.iti__flag.iti__fk{height:10px;background-position:-1709px 0}.iti__flag.iti__fm{height:11px;background-position:-1731px 0}.iti__flag.iti__fo{height:15px;background-position:-1753px 0}.iti__flag.iti__fr{height:14px;background-position:-1775px 0}.iti__flag.iti__fx{height:14px;background-position:-1797px 0}.iti__flag.iti__ga{height:15px;background-position:-1819px 0}.iti__flag.iti__gb{height:10px;background-position:-1841px 0}.iti__flag.iti__gd{height:12px;background-position:-1863px 0}.iti__flag.iti__ge{height:14px;background-position:-1885px 0}.iti__flag.iti__gf{height:14px;background-position:-1907px 0}.iti__flag.iti__gg{height:14px;background-position:-1929px 0}.iti__flag.iti__gh{height:14px;background-position:-1951px 0}.iti__flag.iti__gi{height:10px;background-position:-1973px 0}.iti__flag.iti__gl{height:14px;background-position:-1995px 0}.iti__flag.iti__gm{height:14px;background-position:-2017px 0}.iti__flag.iti__gn{height:14px;background-position:-2039px 0}.iti__flag.iti__gp{height:14px;background-position:-2061px 0}.iti__flag.iti__gq{height:14px;background-position:-2083px 0}.iti__flag.iti__gr{height:14px;background-position:-2105px 0}.iti__flag.iti__gs{height:10px;background-position:-2127px 0}.iti__flag.iti__gt{height:13px;background-position:-2149px 0}.iti__flag.iti__gu{height:11px;background-position:-2171px 0}.iti__flag.iti__gw{height:10px;background-position:-2193px 0}.iti__flag.iti__gy{height:12px;background-position:-2215px 0}.iti__flag.iti__hk{height:14px;background-position:-2237px 0}.iti__flag.iti__hm{height:10px;background-position:-2259px 0}.iti__flag.iti__hn{height:10px;background-position:-2281px 0}.iti__flag.iti__hr{height:10px;background-position:-2303px 0}.iti__flag.iti__ht{height:12px;background-position:-2325px 0}.iti__flag.iti__hu{height:10px;background-position:-2347px 0}.iti__flag.iti__ic{height:14px;background-position:-2369px 0}.iti__flag.iti__id{height:14px;background-position:-2391px 0}.iti__flag.iti__ie{height:10px;background-position:-2413px 0}.iti__flag.iti__il{height:15px;background-position:-2435px 0}.iti__flag.iti__im{height:10px;background-position:-2457px 0}.iti__flag.iti__in{height:14px;background-position:-2479px 0}.iti__flag.iti__io{height:10px;background-position:-2501px 0}.iti__flag.iti__iq{height:14px;background-position:-2523px 0}.iti__flag.iti__ir{height:12px;background-position:-2545px 0}.iti__flag.iti__is{height:15px;background-position:-2567px 0}.iti__flag.iti__it{height:14px;background-position:-2589px 0}.iti__flag.iti__je{height:12px;background-position:-2611px 0}.iti__flag.iti__jm{height:10px;background-position:-2633px 0}.iti__flag.iti__jo{height:10px;background-position:-2655px 0}.iti__flag.iti__jp{height:14px;background-position:-2677px 0}.iti__flag.iti__ke{height:14px;background-position:-2699px 0}.iti__flag.iti__kg{height:12px;background-position:-2721px 0}.iti__flag.iti__kh{height:13px;background-position:-2743px 0}.iti__flag.iti__ki{height:10px;background-position:-2765px 0}.iti__flag.iti__km{height:12px;background-position:-2787px 0}.iti__flag.iti__kn{height:14px;background-position:-2809px 0}.iti__flag.iti__kp{height:10px;background-position:-2831px 0}.iti__flag.iti__kr{height:14px;background-position:-2853px 0}.iti__flag.iti__kw{height:10px;background-position:-2875px 0}.iti__flag.iti__ky{height:10px;background-position:-2897px 0}.iti__flag.iti__kz{height:10px;background-position:-2919px 0}.iti__flag.iti__la{height:14px;background-position:-2941px 0}.iti__flag.iti__lb{height:14px;background-position:-2963px 0}.iti__flag.iti__lc{height:10px;background-position:-2985px 0}.iti__flag.iti__li{height:12px;background-position:-3007px 0}.iti__flag.iti__lk{height:10px;background-position:-3029px 0}.iti__flag.iti__lr{height:11px;background-position:-3051px 0}.iti__flag.iti__ls{height:14px;background-position:-3073px 0}.iti__flag.iti__lt{height:12px;background-position:-3095px 0}.iti__flag.iti__lu{height:12px;background-position:-3117px 0}.iti__flag.iti__lv{height:10px;background-position:-3139px 0}.iti__flag.iti__ly{height:10px;background-position:-3161px 0}.iti__flag.iti__ma{height:14px;background-position:-3183px 0}.iti__flag.iti__mc{height:15px;background-position:-3205px 0}.iti__flag.iti__md{height:10px;background-position:-3226px 0}.iti__flag.iti__me{height:10px;background-position:-3248px 0}.iti__flag.iti__mf{height:14px;background-position:-3270px 0}.iti__flag.iti__mg{height:14px;background-position:-3292px 0}.iti__flag.iti__mh{height:11px;background-position:-3314px 0}.iti__flag.iti__mk{height:10px;background-position:-3336px 0}.iti__flag.iti__ml{height:14px;background-position:-3358px 0}.iti__flag.iti__mm{height:14px;background-position:-3380px 0}.iti__flag.iti__mn{height:10px;background-position:-3402px 0}.iti__flag.iti__mo{height:14px;background-position:-3424px 0}.iti__flag.iti__mp{height:10px;background-position:-3446px 0}.iti__flag.iti__mq{height:14px;background-position:-3468px 0}.iti__flag.iti__mr{height:14px;background-position:-3490px 0}.iti__flag.iti__ms{height:10px;background-position:-3512px 0}.iti__flag.iti__mt{height:14px;background-position:-3534px 0}.iti__flag.iti__mu{height:14px;background-position:-3556px 0}.iti__flag.iti__mv{height:14px;background-position:-3578px 0}.iti__flag.iti__mw{height:14px;background-position:-3600px 0}.iti__flag.iti__mx{height:12px;background-position:-3622px 0}.iti__flag.iti__my{height:10px;background-position:-3644px 0}.iti__flag.iti__mz{height:14px;background-position:-3666px 0}.iti__flag.iti__na{height:14px;background-position:-3688px 0}.iti__flag.iti__nc{height:10px;background-position:-3710px 0}.iti__flag.iti__ne{height:15px;background-position:-3732px 0}.iti__flag.iti__nf{height:10px;background-position:-3752px 0}.iti__flag.iti__ng{height:10px;background-position:-3774px 0}.iti__flag.iti__ni{height:12px;background-position:-3796px 0}.iti__flag.iti__nl{height:14px;background-position:-3818px 0}.iti__flag.iti__no{height:15px;background-position:-3840px 0}.iti__flag.iti__np{height:15px;background-position:-3862px 0}.iti__flag.iti__nr{height:10px;background-position:-3877px 0}.iti__flag.iti__nu{height:10px;background-position:-3899px 0}.iti__flag.iti__nz{height:10px;background-position:-3921px 0}.iti__flag.iti__om{height:10px;background-position:-3943px 0}.iti__flag.iti__pa{height:14px;background-position:-3965px 0}.iti__flag.iti__pe{height:14px;background-position:-3987px 0}.iti__flag.iti__pf{height:14px;background-position:-4009px 0}.iti__flag.iti__pg{height:15px;background-position:-4031px 0}.iti__flag.iti__ph{height:10px;background-position:-4053px 0}.iti__flag.iti__pk{height:14px;background-position:-4075px 0}.iti__flag.iti__pl{height:13px;background-position:-4097px 0}.iti__flag.iti__pm{height:14px;background-position:-4119px 0}.iti__flag.iti__pn{height:10px;background-position:-4141px 0}.iti__flag.iti__pr{height:14px;background-position:-4163px 0}.iti__flag.iti__ps{height:10px;background-position:-4185px 0}.iti__flag.iti__pt{height:14px;background-position:-4207px 0}.iti__flag.iti__pw{height:13px;background-position:-4229px 0}.iti__flag.iti__py{height:11px;background-position:-4251px 0}.iti__flag.iti__qa{height:8px;background-position:-4273px 0}.iti__flag.iti__re{height:14px;background-position:-4295px 0}.iti__flag.iti__ro{height:14px;background-position:-4317px 0}.iti__flag.iti__rs{height:14px;background-position:-4339px 0}.iti__flag.iti__ru{height:14px;background-position:-4361px 0}.iti__flag.iti__rw{height:14px;background-position:-4383px 0}.iti__flag.iti__sa{height:14px;background-position:-4405px 0}.iti__flag.iti__sb{height:10px;background-position:-4427px 0}.iti__flag.iti__sc{height:10px;background-position:-4449px 0}.iti__flag.iti__sd{height:10px;background-position:-4471px 0}.iti__flag.iti__se{height:13px;background-position:-4493px 0}.iti__flag.iti__sg{height:14px;background-position:-4515px 0}.iti__flag.iti__sh{height:10px;background-position:-4537px 0}.iti__flag.iti__si{height:10px;background-position:-4559px 0}.iti__flag.iti__sj{height:15px;background-position:-4581px 0}.iti__flag.iti__sk{height:14px;background-position:-4603px 0}.iti__flag.iti__sl{height:14px;background-position:-4625px 0}.iti__flag.iti__sm{height:15px;background-position:-4647px 0}.iti__flag.iti__sn{height:14px;background-position:-4669px 0}.iti__flag.iti__so{height:14px;background-position:-4691px 0}.iti__flag.iti__sr{height:14px;background-position:-4713px 0}.iti__flag.iti__ss{height:10px;background-position:-4735px 0}.iti__flag.iti__st{height:10px;background-position:-4757px 0}.iti__flag.iti__su{height:10px;background-position:-4779px 0}.iti__flag.iti__sv{height:12px;background-position:-4801px 0}.iti__flag.iti__sx{height:14px;background-position:-4823px 0}.iti__flag.iti__sy{height:14px;background-position:-4845px 0}.iti__flag.iti__sz{height:14px;background-position:-4867px 0}.iti__flag.iti__ta{height:10px;background-position:-4889px 0}.iti__flag.iti__tc{height:10px;background-position:-4911px 0}.iti__flag.iti__td{height:14px;background-position:-4933px 0}.iti__flag.iti__tf{height:14px;background-position:-4955px 0}.iti__flag.iti__tg{height:13px;background-position:-4977px 0}.iti__flag.iti__th{height:14px;background-position:-4999px 0}.iti__flag.iti__tj{height:10px;background-position:-5021px 0}.iti__flag.iti__tk{height:10px;background-position:-5043px 0}.iti__flag.iti__tl{height:10px;background-position:-5065px 0}.iti__flag.iti__tm{height:14px;background-position:-5087px 0}.iti__flag.iti__tn{height:14px;background-position:-5109px 0}.iti__flag.iti__to{height:10px;background-position:-5131px 0}.iti__flag.iti__tr{height:14px;background-position:-5153px 0}.iti__flag.iti__tt{height:12px;background-position:-5175px 0}.iti__flag.iti__tv{height:10px;background-position:-5197px 0}.iti__flag.iti__tw{height:14px;background-position:-5219px 0}.iti__flag.iti__tz{height:14px;background-position:-5241px 0}.iti__flag.iti__ua{height:14px;background-position:-5263px 0}.iti__flag.iti__ug{height:14px;background-position:-5285px 0}.iti__flag.iti__uk{height:10px;background-position:-5307px 0}.iti__flag.iti__um{height:11px;background-position:-5329px 0}.iti__flag.iti__un{height:14px;background-position:-5351px 0}.iti__flag.iti__us{height:11px;background-position:-5373px 0}.iti__flag.iti__uy{height:14px;background-position:-5395px 0}.iti__flag.iti__uz{height:10px;background-position:-5417px 0}.iti__flag.iti__va{height:15px;background-position:-5439px 0}.iti__flag.iti__vc{height:14px;background-position:-5456px 0}.iti__flag.iti__ve{height:14px;background-position:-5478px 0}.iti__flag.iti__vg{height:10px;background-position:-5500px 0}.iti__flag.iti__vi{height:14px;background-position:-5522px 0}.iti__flag.iti__vn{height:14px;background-position:-5544px 0}.iti__flag.iti__vu{height:12px;background-position:-5566px 0}.iti__flag.iti__wf{height:14px;background-position:-5588px 0}.iti__flag.iti__ws{height:10px;background-position:-5610px 0}.iti__flag.iti__xk{height:15px;background-position:-5632px 0}.iti__flag.iti__ye{height:14px;background-position:-5654px 0}.iti__flag.iti__yt{height:14px;background-position:-5676px 0}.iti__flag.iti__za{height:14px;background-position:-5698px 0}.iti__flag.iti__zm{height:14px;background-position:-5720px 0}.iti__flag.iti__zw{height:10px;background-position:-5742px 0}.iti__flag{height:15px;box-shadow:0 0 1px 0 #888;background-image:url(../img/flags.png?1);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (min-resolution:2x){.iti__flag{background-image:url(../img/flags@2x.png?1)}}.iti__flag.iti__np{background-color:transparent}
package/build/js/data.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v18.4.0
2
+ * International Telephone Input v18.5.0
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v18.4.0
2
+ * International Telephone Input v18.5.0
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v18.4.0
2
+ * International Telephone Input v18.5.0
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -131,6 +131,8 @@
131
131
  autoInsertDialCode: false,
132
132
  // add a placeholder in the input with an example number for the selected country
133
133
  autoPlaceholder: "polite",
134
+ // add a country search input at the top of the dropdown
135
+ countrySearch: false,
134
136
  // modify the parentClass
135
137
  customContainer: "",
136
138
  // modify the auto placeholder
@@ -213,6 +215,11 @@
213
215
  // if showing fullscreen popup, do not fix the width
214
216
  if (this.options.useFullscreenPopup) {
215
217
  this.options.fixDropdownWidth = false;
218
+ this.options.countrySearch = false;
219
+ }
220
+ // when search enabled, we must fix the width else it would change with different results
221
+ if (this.options.countrySearch) {
222
+ this.options.fixDropdownWidth = true;
216
223
  }
217
224
  // if in nationalMode, do not insert dial codes
218
225
  if (this.options.nationalMode) {
@@ -415,6 +422,7 @@
415
422
  }, {
416
423
  key: "_generateMarkup",
417
424
  value: function _generateMarkup() {
425
+ this.telInput.classList.add("iti__tel-input");
418
426
  // if autocomplete does not exist on the element and its form, then
419
427
  // prevent autocomplete as there's no safe, cross-browser event we can react to, so it can
420
428
  // easily put the plugin in an inconsistent state e.g. the wrong flag selected for the
@@ -422,7 +430,7 @@
422
430
  if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
423
431
  this.telInput.setAttribute("autocomplete", "off");
424
432
  }
425
- var _this$options = this.options, allowDropdown = _this$options.allowDropdown, separateDialCode = _this$options.separateDialCode, showFlags = _this$options.showFlags, customContainer = _this$options.customContainer, hiddenInput = _this$options.hiddenInput, dropdownContainer = _this$options.dropdownContainer, fixDropdownWidth = _this$options.fixDropdownWidth, useFullscreenPopup = _this$options.useFullscreenPopup;
433
+ var _this$options = this.options, allowDropdown = _this$options.allowDropdown, separateDialCode = _this$options.separateDialCode, showFlags = _this$options.showFlags, customContainer = _this$options.customContainer, hiddenInput = _this$options.hiddenInput, dropdownContainer = _this$options.dropdownContainer, fixDropdownWidth = _this$options.fixDropdownWidth, useFullscreenPopup = _this$options.useFullscreenPopup, countrySearch = _this$options.countrySearch;
426
434
  // containers (mostly for positioning)
427
435
  var parentClass = "iti";
428
436
  if (allowDropdown) {
@@ -487,14 +495,24 @@
487
495
  this.dropdownArrow = this._createEl("div", {
488
496
  "class": "iti__arrow"
489
497
  }, this.selectedFlag);
490
- // country dropdown: preferred countries, then divider, then all countries
498
+ this.dropdownContent = this._createEl("div", {
499
+ "class": "iti__dropdown-content iti__hide"
500
+ });
501
+ if (countrySearch) {
502
+ this.searchInput = this._createEl("input", {
503
+ type: "text",
504
+ "class": "iti__search-input",
505
+ placeholder: "Search"
506
+ }, this.dropdownContent);
507
+ }
508
+ // country list: preferred countries, then divider, then all countries
491
509
  this.countryList = this._createEl("ul", {
492
- "class": "iti__country-list iti__hide",
510
+ "class": "iti__country-list",
493
511
  id: "iti-".concat(this.id, "__country-listbox"),
494
512
  role: "listbox",
495
513
  "aria-label": "List of countries"
496
- });
497
- if (this.preferredCountries.length) {
514
+ }, this.dropdownContent);
515
+ if (this.preferredCountries.length && !countrySearch) {
498
516
  this._appendListItems(this.preferredCountries, "iti__preferred", true);
499
517
  this._createEl("li", {
500
518
  "class": "iti__divider",
@@ -508,9 +526,9 @@
508
526
  this.dropdown = this._createEl("div", {
509
527
  "class": "iti iti--container ".concat(fullscreenClass)
510
528
  });
511
- this.dropdown.appendChild(this.countryList);
529
+ this.dropdown.appendChild(this.dropdownContent);
512
530
  } else {
513
- this.flagsContainer.appendChild(this.countryList);
531
+ this.flagsContainer.appendChild(this.dropdownContent);
514
532
  }
515
533
  }
516
534
  if (hiddenInput) {
@@ -534,26 +552,30 @@
534
552
  }, {
535
553
  key: "_appendListItems",
536
554
  value: function _appendListItems(countries, className, preferred) {
537
- // we create so many DOM elements, it is faster to build a temp string
538
- // and then add everything to the DOM in one go at the end
539
- var tmp = "";
540
- // for each country
541
555
  for (var i = 0; i < countries.length; i++) {
542
556
  var c = countries[i];
543
557
  var idSuffix = preferred ? "-preferred" : "";
544
- // open the list item
545
- tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-").concat(this.id, "__item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "' aria-selected='false'>");
558
+ var listItem = this._createEl("li", {
559
+ id: "iti-".concat(this.id, "__item-").concat(c.iso2).concat(idSuffix),
560
+ "class": "iti__country ".concat(className),
561
+ tabindex: "-1",
562
+ role: "option",
563
+ "data-dial-code": c.dialCode,
564
+ "data-country-code": c.iso2,
565
+ "aria-selected": "false"
566
+ }, this.countryList);
567
+ // store this for later use e.g. country search filtering
568
+ c.node = listItem;
569
+ var content = "";
546
570
  // add the flag
547
571
  if (this.options.showFlags) {
548
- tmp += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
572
+ content += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
549
573
  }
550
574
  // and the country name and dial code
551
- tmp += "<span class='iti__country-name'>".concat(c.name, "</span>");
552
- tmp += "<span class='iti__dial-code'>+".concat(c.dialCode, "</span>");
553
- // close the list item
554
- tmp += "</li>";
575
+ content += "<span class='iti__country-name'>".concat(c.name, "</span>");
576
+ content += "<span class='iti__dial-code'>+".concat(c.dialCode, "</span>");
577
+ listItem.insertAdjacentHTML("beforeend", content);
555
578
  }
556
- this.countryList.insertAdjacentHTML("beforeend", tmp);
557
579
  }
558
580
  }, {
559
581
  key: "_setInitialState",
@@ -642,7 +664,7 @@
642
664
  // close it again
643
665
  this._handleLabelClick = function(e) {
644
666
  // if the dropdown is closed, then focus the input, else ignore the click
645
- if (_this4.countryList.classList.contains("iti__hide")) {
667
+ if (_this4.dropdownContent.classList.contains("iti__hide")) {
646
668
  _this4.telInput.focus();
647
669
  } else {
648
670
  e.preventDefault();
@@ -657,15 +679,15 @@
657
679
  // only intercept this event if we're opening the dropdown
658
680
  // else let it bubble up to the top ("click-off-to-close" listener)
659
681
  // we cannot just stopPropagation as it may be needed to close another instance
660
- if (_this4.countryList.classList.contains("iti__hide") && !_this4.telInput.disabled && !_this4.telInput.readOnly) {
682
+ if (_this4.dropdownContent.classList.contains("iti__hide") && !_this4.telInput.disabled && !_this4.telInput.readOnly) {
661
683
  _this4._showDropdown();
662
684
  }
663
685
  };
664
686
  this.selectedFlag.addEventListener("click", this._handleClickSelectedFlag);
665
- // open dropdown list if currently focused
687
+ // open dropdown if selected flag is focused and they press up/down/space/enter
666
688
  this._handleFlagsContainerKeydown = function(e) {
667
- var isDropdownHidden = _this4.countryList.classList.contains("iti__hide");
668
- if (isDropdownHidden && [ "ArrowUp", "Up", "ArrowDown", "Down", " ", "Enter" ].indexOf(e.key) !== -1) {
689
+ var isDropdownHidden = _this4.dropdownContent.classList.contains("iti__hide");
690
+ if (isDropdownHidden && [ "ArrowUp", "ArrowDown", " ", "Enter" ].includes(e.key)) {
669
691
  // prevent form from being submitted if "ENTER" was pressed
670
692
  e.preventDefault();
671
693
  // prevent event from being handled again by document
@@ -800,13 +822,17 @@
800
822
  key: "_showDropdown",
801
823
  value: function _showDropdown() {
802
824
  if (this.options.fixDropdownWidth) {
803
- this.countryList.style.width = "".concat(this.telInput.offsetWidth, "px");
825
+ this.dropdownContent.style.width = "".concat(this.telInput.offsetWidth, "px");
804
826
  }
805
- this.countryList.classList.remove("iti__hide");
827
+ this.dropdownContent.classList.remove("iti__hide");
806
828
  this.selectedFlag.setAttribute("aria-expanded", "true");
807
829
  this._setDropdownPosition();
808
- // update highlighting and scroll to active list item
809
- if (this.activeItem) {
830
+ if (this.options.countrySearch) {
831
+ // start by highlighting the first item in the list
832
+ this._highlightListItem(this.countryList.firstElementChild, false);
833
+ this.searchInput.focus();
834
+ } else if (this.activeItem) {
835
+ // update highlighting and scroll to active list item
810
836
  this._highlightListItem(this.activeItem, false);
811
837
  this._scrollTo(this.activeItem, true);
812
838
  }
@@ -837,13 +863,13 @@
837
863
  // windowTop from https://stackoverflow.com/a/14384091/217866
838
864
  var windowTop = window.pageYOffset || document.documentElement.scrollTop;
839
865
  var inputTop = pos.top + windowTop;
840
- var dropdownHeight = this.countryList.offsetHeight;
866
+ var dropdownHeight = this.dropdownContent.offsetHeight;
841
867
  // dropdownFitsBelow = (dropdownBottom < windowBottom)
842
868
  var dropdownFitsBelow = inputTop + this.telInput.offsetHeight + dropdownHeight < windowTop + window.innerHeight;
843
869
  var dropdownFitsAbove = inputTop - dropdownHeight > windowTop;
844
870
  // by default, the dropdown will be below the input. If we want to position it above the
845
871
  // input, we add the dropup class.
846
- this._toggleClass(this.countryList, "iti__country-list--dropup", !dropdownFitsBelow && dropdownFitsAbove);
872
+ this._toggleClass(this.dropdownContent, "iti__country-list--dropup", !dropdownFitsBelow && dropdownFitsAbove);
847
873
  // if dropdownContainer is enabled, calculate postion
848
874
  if (this.options.dropdownContainer) {
849
875
  // by default the dropdown will be directly over the input because it's not in the flow.
@@ -903,7 +929,7 @@
903
929
  isOpening = false;
904
930
  };
905
931
  document.documentElement.addEventListener("click", this._handleClickOffToClose);
906
- // listen for up/down scrolling, enter to select, or letters to jump to country name.
932
+ // listen for up/down scrolling, enter to select, or escape to close
907
933
  // use keydown as keypress doesn't fire for non-char keys and we want to catch if they
908
934
  // just hit down and hold it to scroll down (no keyup event).
909
935
  // listen on the document because that's where key events are triggered if no input has focus
@@ -912,15 +938,22 @@
912
938
  this._handleKeydownOnDropdown = function(e) {
913
939
  // prevent down key from scrolling the whole page,
914
940
  // and enter key from submitting a form etc
915
- e.preventDefault();
916
- // up and down to navigate
917
- if (e.key === "ArrowUp" || e.key === "Up" || e.key === "ArrowDown" || e.key === "Down") {
918
- _this9._handleUpDownKey(e.key);
919
- } else if (e.key === "Enter") {
920
- _this9._handleEnterKey();
921
- } else if (e.key === "Escape") {
922
- _this9._closeDropdown();
923
- } else if (/^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
941
+ if ([ "ArrowUp", "ArrowDown", "Enter", "Escape" ].includes(e.key)) {
942
+ e.preventDefault();
943
+ e.stopPropagation();
944
+ // up and down to navigate
945
+ if (e.key === "ArrowUp" || e.key === "ArrowDown") {
946
+ _this9._handleUpDownKey(e.key);
947
+ } else if (e.key === "Enter") {
948
+ _this9._handleEnterKey();
949
+ } else if (e.key === "Escape") {
950
+ _this9._closeDropdown();
951
+ }
952
+ }
953
+ // alpha chars to perform search
954
+ // regex allows one latin alpha char or space, based on https://stackoverflow.com/a/26900132/217866)
955
+ if (!_this9.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
956
+ e.stopPropagation();
924
957
  // jump to countries that start with the query string
925
958
  if (queryTimer) {
926
959
  clearTimeout(queryTimer);
@@ -934,17 +967,73 @@
934
967
  }
935
968
  };
936
969
  document.addEventListener("keydown", this._handleKeydownOnDropdown);
970
+ if (this.options.countrySearch) {
971
+ var doFilter = function doFilter() {
972
+ var inputQuery = _this9.searchInput.value.trim();
973
+ if (inputQuery) {
974
+ _this9._filterCountries(inputQuery.toLowerCase());
975
+ } else {
976
+ _this9._filterCountries(null, true);
977
+ }
978
+ };
979
+ var keyupTimer = null;
980
+ this._handleSearchChange = function() {
981
+ // filtering country nodes is expensive (lots of DOM manipulation), so rate limit it
982
+ if (keyupTimer) {
983
+ clearTimeout(keyupTimer);
984
+ }
985
+ keyupTimer = setTimeout(function() {
986
+ doFilter();
987
+ keyupTimer = null;
988
+ }, 100);
989
+ };
990
+ this.searchInput.addEventListener("input", this._handleSearchChange);
991
+ // stop propagation on search input click, so doesn't trigger click-off-to-close listener
992
+ this.searchInput.addEventListener("click", function(e) {
993
+ return e.stopPropagation();
994
+ });
995
+ }
996
+ }
997
+ }, {
998
+ key: "_filterCountries",
999
+ value: function _filterCountries(query) {
1000
+ var isReset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
1001
+ var isFirst = true;
1002
+ this.countryList.innerHTML = "";
1003
+ for (var i = 0; i < this.countries.length; i++) {
1004
+ var c = this.countries[i];
1005
+ var nameLower = c.name.toLowerCase();
1006
+ var fullDialCode = "+".concat(c.dialCode);
1007
+ if (isReset || nameLower.includes(query) || fullDialCode.includes(query)) {
1008
+ this.countryList.appendChild(c.node);
1009
+ // highlight the first item
1010
+ if (isFirst) {
1011
+ this._highlightListItem(c.node, false);
1012
+ isFirst = false;
1013
+ }
1014
+ }
1015
+ }
937
1016
  }
938
1017
  }, {
939
1018
  key: "_handleUpDownKey",
940
1019
  value: function _handleUpDownKey(key) {
941
- var next = key === "ArrowUp" || key === "Up" ? this.highlightedItem.previousElementSibling : this.highlightedItem.nextElementSibling;
1020
+ var next = key === "ArrowUp" ? this.highlightedItem.previousElementSibling : this.highlightedItem.nextElementSibling;
942
1021
  if (next) {
943
1022
  // skip the divider
944
1023
  if (next.classList.contains("iti__divider")) {
945
- next = key === "ArrowUp" || key === "Up" ? next.previousElementSibling : next.nextElementSibling;
1024
+ next = key === "ArrowUp" ? next.previousElementSibling : next.nextElementSibling;
1025
+ }
1026
+ } else if (this.countryList.childElementCount > 1) {
1027
+ // otherwise, we must be at the end, so loop round again
1028
+ next = key === "ArrowUp" ? this.countryList.lastElementChild : this.countryList.firstElementChild;
1029
+ }
1030
+ if (next) {
1031
+ // if country search enabled, dont lose focus from the search input on up/down
1032
+ var doFocus = !this.options.countrySearch;
1033
+ this._highlightListItem(next, doFocus);
1034
+ if (this.options.countrySearch) {
1035
+ this._scrollTo(next, false);
946
1036
  }
947
- this._highlightListItem(next, true);
948
1037
  }
949
1038
  }
950
1039
  }, {
@@ -959,7 +1048,7 @@
959
1048
  value: function _searchForCountry(query) {
960
1049
  for (var i = 0; i < this.countries.length; i++) {
961
1050
  if (this._startsWith(this.countries[i].name, query)) {
962
- var listItem = this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(this.countries[i].iso2));
1051
+ var listItem = this.countries[i].node;
963
1052
  // update highlighting and scroll
964
1053
  this._highlightListItem(listItem, false);
965
1054
  this._scrollTo(listItem, true);
@@ -1199,13 +1288,16 @@
1199
1288
  }, {
1200
1289
  key: "_closeDropdown",
1201
1290
  value: function _closeDropdown() {
1202
- this.countryList.classList.add("iti__hide");
1291
+ this.dropdownContent.classList.add("iti__hide");
1203
1292
  this.selectedFlag.setAttribute("aria-expanded", "false");
1204
1293
  this.selectedFlag.removeAttribute("aria-activedescendant");
1205
1294
  // update the arrow
1206
1295
  this.dropdownArrow.classList.remove("iti__arrow--up");
1207
1296
  // unbind key events
1208
1297
  document.removeEventListener("keydown", this._handleKeydownOnDropdown);
1298
+ if (this.options.countrySearch) {
1299
+ this.searchInput.removeEventListener("input", this._handleSearchChange);
1300
+ }
1209
1301
  document.documentElement.removeEventListener("click", this._handleClickOffToClose);
1210
1302
  this.countryList.removeEventListener("mouseover", this._handleMouseoverCountryList);
1211
1303
  this.countryList.removeEventListener("click", this._handleClickCountryList);
@@ -1223,7 +1315,7 @@
1223
1315
  }, {
1224
1316
  key: "_scrollTo",
1225
1317
  value: function _scrollTo(element, middle) {
1226
- var container = this.countryList;
1318
+ var container = this.dropdownContent;
1227
1319
  // windowTop from https://stackoverflow.com/a/14384091/217866
1228
1320
  var windowTop = window.pageYOffset || document.documentElement.scrollTop;
1229
1321
  var containerHeight = container.offsetHeight;
@@ -1550,7 +1642,7 @@
1550
1642
  // default options
1551
1643
  intlTelInputGlobals.defaults = defaults;
1552
1644
  // version
1553
- intlTelInputGlobals.version = "18.4.0";
1645
+ intlTelInputGlobals.version = "18.5.0";
1554
1646
  var pluginName = "intlTelInput";
1555
1647
  // A really lightweight plugin wrapper around the constructor,
1556
1648
  // preventing against multiple instantiations