intl-tel-input 29.2.3 → 29.4.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.
@@ -756,18 +756,18 @@
756
756
  .iti {
757
757
  position: relative;
758
758
  display: inline-block;
759
- * {
760
- box-sizing: border-box;
761
- }
762
- input.iti__tel-input,
763
- input.iti__tel-input[type=text],
764
- input.iti__tel-input[type=tel] {
765
- position: relative;
766
- z-index: 0;
767
- display: block;
768
- min-width: 100%;
769
- margin: 0 !important;
770
- }
759
+ }
760
+ .iti * {
761
+ box-sizing: border-box;
762
+ }
763
+ .iti input.iti__tel-input,
764
+ .iti input.iti__tel-input[type=text],
765
+ .iti input.iti__tel-input[type=tel] {
766
+ position: relative;
767
+ z-index: 0;
768
+ display: block;
769
+ min-width: 100%;
770
+ margin: 0 !important;
771
771
  }
772
772
  .iti__a11y-text {
773
773
  width: 1px;
@@ -827,15 +827,15 @@
827
827
  .iti__country-selector {
828
828
  border-radius: 3px;
829
829
  background-color: var(--iti-country-selector-bg);
830
- .iti--inline-country-selector & {
831
- border: var(--iti-border-width) solid var(--iti-border-color);
832
- box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
833
- }
834
- .iti--inline-country-selector:not(.iti--detached-country-selector) & {
835
- position: absolute;
836
- z-index: 2;
837
- left: 0;
838
- }
830
+ }
831
+ .iti--inline-country-selector .iti__country-selector {
832
+ border: var(--iti-border-width) solid var(--iti-border-color);
833
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
834
+ }
835
+ .iti--inline-country-selector:not(.iti--detached-country-selector) .iti__country-selector {
836
+ position: absolute;
837
+ z-index: 2;
838
+ left: 0;
839
839
  }
840
840
  .iti__search-input {
841
841
  width: 100%;
@@ -843,14 +843,14 @@
843
843
  border-radius: 3px;
844
844
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
845
845
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
846
- [dir=rtl] & {
847
- padding-left: inherit;
848
- padding-right: 30px;
849
- background-position: right 8px center;
850
- }
851
- &::-webkit-search-cancel-button {
852
- appearance: none;
853
- }
846
+ }
847
+ [dir=rtl] .iti__search-input {
848
+ padding-left: inherit;
849
+ padding-right: 30px;
850
+ background-position: right 8px center;
851
+ }
852
+ .iti__search-input::-webkit-search-cancel-button {
853
+ appearance: none;
854
854
  }
855
855
  .iti__search-input,
856
856
  .iti__country {
@@ -868,10 +868,10 @@
868
868
  left: var(--iti-spacer-horizontal);
869
869
  display: flex;
870
870
  pointer-events: none;
871
- [dir=rtl] & {
872
- left: auto;
873
- right: var(--iti-spacer-horizontal);
874
- }
871
+ }
872
+ [dir=rtl] .iti__search-icon {
873
+ left: auto;
874
+ right: var(--iti-spacer-horizontal);
875
875
  }
876
876
  .iti__search-icon-svg {
877
877
  width: var(--iti-globe-icon-size);
@@ -893,21 +893,21 @@
893
893
  align-items: center;
894
894
  justify-content: center;
895
895
  transition: background-color 0.15s ease;
896
- .iti__search-clear-x {
897
- stroke-width: 2;
898
- }
899
- .iti__search-clear-bg {
900
- fill: var(--iti-icon-color);
901
- }
902
- [dir=rtl] & {
903
- right: auto;
904
- left: var(--iti-spacer-horizontal);
905
- }
906
- &:hover,
907
- &:focus-visible {
908
- background: var(--iti-hover-color);
909
- outline: none;
910
- }
896
+ }
897
+ .iti__search-clear .iti__search-clear-x {
898
+ stroke-width: 2;
899
+ }
900
+ .iti__search-clear .iti__search-clear-bg {
901
+ fill: var(--iti-icon-color);
902
+ }
903
+ [dir=rtl] .iti__search-clear {
904
+ right: auto;
905
+ left: var(--iti-spacer-horizontal);
906
+ }
907
+ .iti__search-clear:hover,
908
+ .iti__search-clear:focus-visible {
909
+ background: var(--iti-hover-color);
910
+ outline: none;
911
911
  }
912
912
  .iti__search-clear-svg {
913
913
  width: var(--iti-clear-icon-size);
@@ -923,15 +923,18 @@
923
923
  padding: 0;
924
924
  margin: 0;
925
925
  cursor: pointer;
926
+ outline: none;
926
927
  overflow-y: scroll;
927
928
  -webkit-overflow-scrolling: touch;
928
- .iti--inline-country-selector & {
929
- max-height: 185px;
930
- }
929
+ }
930
+ .iti--inline-country-selector .iti__country-list {
931
+ max-height: 185px;
931
932
  }
932
933
  .iti--flexible-dropdown-width .iti__country-list {
933
934
  white-space: nowrap;
934
- @media (max-width: 500px) {
935
+ }
936
+ @media (max-width: 500px) {
937
+ .iti--flexible-dropdown-width .iti__country-list {
935
938
  white-space: normal;
936
939
  }
937
940
  }
@@ -940,10 +943,9 @@
940
943
  align-items: center;
941
944
  padding-left: var(--iti-spacer-horizontal);
942
945
  padding-right: var(--iti-spacer-horizontal);
943
- outline: none;
944
- &.iti__highlight {
945
- background-color: var(--iti-hover-color);
946
- }
946
+ }
947
+ .iti__country.iti__highlight {
948
+ background-color: var(--iti-hover-color);
947
949
  }
948
950
  .iti__country-name {
949
951
  flex-grow: 1;
@@ -962,36 +964,29 @@
962
964
  .iti__country-list .iti__flag {
963
965
  margin-right: var(--iti-spacer-horizontal);
964
966
  flex-shrink: 0;
965
- [dir=rtl] & {
966
- margin-right: 0;
967
- margin-left: var(--iti-spacer-horizontal);
968
- }
969
967
  }
970
- .iti--has-country-selector {
971
- .iti__country-container:has(+ input[disabled]),
972
- .iti__country-container:has(+ input[readonly]) {
973
- button.iti__selected-country {
974
- cursor: not-allowed;
975
- .iti__arrow {
976
- visibility: hidden;
977
- }
978
- }
979
- }
980
- .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) {
981
- .iti__selected-country-primary:hover,
982
- .iti__selected-country[aria-expanded=true] .iti__selected-country-primary {
983
- background-color: var(--iti-hover-color);
984
- }
985
- }
968
+ [dir=rtl] :is(.iti__country-list .iti__flag) {
969
+ margin-right: 0;
970
+ margin-left: var(--iti-spacer-horizontal);
971
+ }
972
+ :is(.iti--has-country-selector .iti__country-container:has(+ input[disabled]), .iti--has-country-selector .iti__country-container:has(+ input[readonly])) button.iti__selected-country {
973
+ cursor: not-allowed;
974
+ }
975
+ :is(.iti--has-country-selector .iti__country-container:has(+ input[disabled]), .iti--has-country-selector .iti__country-container:has(+ input[readonly])) button.iti__selected-country .iti__arrow {
976
+ visibility: hidden;
977
+ }
978
+ .iti--has-country-selector .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
979
+ .iti--has-country-selector .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country[aria-expanded=true] .iti__selected-country-primary {
980
+ background-color: var(--iti-hover-color);
986
981
  }
987
982
  .iti--detached-country-selector {
988
983
  position: fixed;
989
984
  top: -1000px;
990
985
  left: -1000px;
991
986
  z-index: 1060;
992
- &:hover {
993
- cursor: pointer;
994
- }
987
+ }
988
+ .iti--detached-country-selector:hover {
989
+ cursor: pointer;
995
990
  }
996
991
  .iti--detached-country-selector {
997
992
  top: calc(anchor(bottom) + 3px);
@@ -1008,35 +1003,37 @@
1008
1003
  .iti__v-hide {
1009
1004
  visibility: hidden;
1010
1005
  }
1011
- .iti--fullscreen-popup {
1012
- &.iti--detached-country-selector {
1013
- background-color: rgba(0, 0, 0, 0.5);
1014
- top: 0;
1015
- bottom: 0;
1016
- left: 0;
1017
- right: 0;
1018
- position: fixed;
1019
- padding: var(--iti-mobile-popup-margin);
1020
- display: flex;
1021
- flex-direction: column;
1022
- justify-content: flex-start;
1023
- }
1024
- .iti__country-selector {
1025
- display: flex;
1026
- flex-direction: column;
1027
- max-height: 100%;
1028
- position: relative;
1029
- }
1030
- .iti__country,
1031
- .iti__search-input {
1032
- padding-top: 10px;
1033
- padding-bottom: 10px;
1034
- }
1035
- .iti__country {
1036
- padding-left: 10px;
1037
- padding-right: 10px;
1038
- line-height: 1.5em;
1039
- }
1006
+ .iti--fullscreen-popup.iti--detached-country-selector {
1007
+ background-color: rgba(0, 0, 0, 0.5);
1008
+ top: 0;
1009
+ bottom: 0;
1010
+ left: 0;
1011
+ right: 0;
1012
+ position: fixed;
1013
+ padding: var(--iti-mobile-popup-margin);
1014
+ box-sizing: border-box;
1015
+ display: flex;
1016
+ flex-direction: column;
1017
+ justify-content: flex-start;
1018
+ }
1019
+ .iti--fullscreen-popup .iti__country-selector {
1020
+ display: flex;
1021
+ flex-direction: column;
1022
+ max-height: 100%;
1023
+ position: relative;
1024
+ }
1025
+ .iti--fullscreen-popup .iti__country,
1026
+ .iti--fullscreen-popup .iti__search-input {
1027
+ padding-top: 10px;
1028
+ padding-bottom: 10px;
1029
+ }
1030
+ .iti--fullscreen-popup .iti__search-input {
1031
+ font-size: max(16px, 1em);
1032
+ }
1033
+ .iti--fullscreen-popup .iti__country {
1034
+ padding-left: 10px;
1035
+ padding-right: 10px;
1036
+ line-height: 1.5em;
1040
1037
  }
1041
1038
  .iti__flag {
1042
1039
  height: var(--iti-flag-height);
@@ -1052,37 +1049,35 @@
1052
1049
  position: relative;
1053
1050
  background: none;
1054
1051
  box-shadow: none;
1055
- &::after {
1056
- content: "";
1057
- position: absolute;
1058
- inset: 0;
1059
- margin: auto;
1060
- width: var(--iti-flag-height);
1061
- height: var(--iti-flag-height);
1062
- box-sizing: border-box;
1063
- border: 2px solid var(--iti-icon-color);
1064
- border-right-color: transparent;
1065
- border-radius: 50%;
1066
- animation: iti-spinner 1s linear infinite;
1067
- }
1052
+ }
1053
+ .iti__loading::after {
1054
+ content: "";
1055
+ position: absolute;
1056
+ inset: 0;
1057
+ margin: auto;
1058
+ width: var(--iti-flag-height);
1059
+ height: var(--iti-flag-height);
1060
+ box-sizing: border-box;
1061
+ border: 2px solid var(--iti-icon-color);
1062
+ border-right-color: transparent;
1063
+ border-radius: 50%;
1064
+ animation: iti-spinner 1s linear infinite;
1068
1065
  }
1069
1066
  @keyframes iti-spinner {
1070
1067
  to {
1071
1068
  transform: rotate(360deg);
1072
1069
  }
1073
1070
  }
1074
- .iti__strict-reject-animation {
1075
- .iti__tel-input,
1076
- .iti__selected-country {
1077
- animation: iti-strict-reject-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
1071
+ .iti__strict-reject-animation .iti__tel-input,
1072
+ .iti__strict-reject-animation .iti__selected-country {
1073
+ animation: iti-strict-reject-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
1074
+ }
1075
+ @media (prefers-reduced-motion: reduce) {
1076
+ .iti__strict-reject-animation .iti__tel-input {
1077
+ animation: iti-strict-reject-flash 0.3s ease-out both;
1078
1078
  }
1079
- @media (prefers-reduced-motion: reduce) {
1080
- .iti__tel-input {
1081
- animation: iti-strict-reject-flash 0.3s ease-out both;
1082
- }
1083
- .iti__selected-country {
1084
- animation: none;
1085
- }
1079
+ .iti__strict-reject-animation .iti__selected-country {
1080
+ animation: none;
1086
1081
  }
1087
1082
  }
1088
1083
  @keyframes iti-strict-reject-shake {
@@ -1112,11 +1107,11 @@
1112
1107
  align-items: center;
1113
1108
  justify-content: center;
1114
1109
  padding: 0;
1115
- .iti__globe-svg {
1116
- width: 100%;
1117
- height: 100%;
1118
- fill: var(--iti-icon-color);
1119
- }
1110
+ }
1111
+ .iti__globe .iti__globe-svg {
1112
+ width: 100%;
1113
+ height: 100%;
1114
+ fill: var(--iti-icon-color);
1120
1115
  }
1121
1116
  @supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))) {
1122
1117
  .iti__tel-input:focus {
@@ -1 +1 @@
1
- :root{--iti-flag-width: 20px;--iti-flag-count: 244}.iti__ac{--iti-flag-offset: 0}.iti__ad{--iti-flag-offset: -1}.iti__ae{--iti-flag-offset: -2}.iti__af{--iti-flag-offset: -3}.iti__ag{--iti-flag-offset: -4}.iti__ai{--iti-flag-offset: -5}.iti__al{--iti-flag-offset: -6}.iti__am{--iti-flag-offset: -7}.iti__ao{--iti-flag-offset: -8}.iti__ar{--iti-flag-offset: -9}.iti__as{--iti-flag-offset: -10}.iti__at{--iti-flag-offset: -11}.iti__au{--iti-flag-offset: -12}.iti__aw{--iti-flag-offset: -13}.iti__ax{--iti-flag-offset: -14}.iti__az{--iti-flag-offset: -15}.iti__ba{--iti-flag-offset: -16}.iti__bb{--iti-flag-offset: -17}.iti__bd{--iti-flag-offset: -18}.iti__be{--iti-flag-offset: -19}.iti__bf{--iti-flag-offset: -20}.iti__bg{--iti-flag-offset: -21}.iti__bh{--iti-flag-offset: -22}.iti__bi{--iti-flag-offset: -23}.iti__bj{--iti-flag-offset: -24}.iti__bl{--iti-flag-offset: -25}.iti__bm{--iti-flag-offset: -26}.iti__bn{--iti-flag-offset: -27}.iti__bo{--iti-flag-offset: -28}.iti__bq{--iti-flag-offset: -29}.iti__br{--iti-flag-offset: -30}.iti__bs{--iti-flag-offset: -31}.iti__bt{--iti-flag-offset: -32}.iti__bw{--iti-flag-offset: -33}.iti__by{--iti-flag-offset: -34}.iti__bz{--iti-flag-offset: -35}.iti__ca{--iti-flag-offset: -36}.iti__cc{--iti-flag-offset: -37}.iti__cd{--iti-flag-offset: -38}.iti__cf{--iti-flag-offset: -39}.iti__cg{--iti-flag-offset: -40}.iti__ch{--iti-flag-offset: -41}.iti__ci{--iti-flag-offset: -42}.iti__ck{--iti-flag-offset: -43}.iti__cl{--iti-flag-offset: -44}.iti__cm{--iti-flag-offset: -45}.iti__cn{--iti-flag-offset: -46}.iti__co{--iti-flag-offset: -47}.iti__cr{--iti-flag-offset: -48}.iti__cu{--iti-flag-offset: -49}.iti__cv{--iti-flag-offset: -50}.iti__cw{--iti-flag-offset: -51}.iti__cx{--iti-flag-offset: -52}.iti__cy{--iti-flag-offset: -53}.iti__cz{--iti-flag-offset: -54}.iti__de{--iti-flag-offset: -55}.iti__dj{--iti-flag-offset: -56}.iti__dk{--iti-flag-offset: -57}.iti__dm{--iti-flag-offset: -58}.iti__do{--iti-flag-offset: -59}.iti__dz{--iti-flag-offset: -60}.iti__ec{--iti-flag-offset: -61}.iti__ee{--iti-flag-offset: -62}.iti__eg{--iti-flag-offset: -63}.iti__eh{--iti-flag-offset: -64}.iti__er{--iti-flag-offset: -65}.iti__es{--iti-flag-offset: -66}.iti__et{--iti-flag-offset: -67}.iti__fi{--iti-flag-offset: -68}.iti__fj{--iti-flag-offset: -69}.iti__fk{--iti-flag-offset: -70}.iti__fm{--iti-flag-offset: -71}.iti__fo{--iti-flag-offset: -72}.iti__fr{--iti-flag-offset: -73}.iti__ga{--iti-flag-offset: -74}.iti__gb{--iti-flag-offset: -75}.iti__gd{--iti-flag-offset: -76}.iti__ge{--iti-flag-offset: -77}.iti__gf{--iti-flag-offset: -78}.iti__gg{--iti-flag-offset: -79}.iti__gh{--iti-flag-offset: -80}.iti__gi{--iti-flag-offset: -81}.iti__gl{--iti-flag-offset: -82}.iti__gm{--iti-flag-offset: -83}.iti__gn{--iti-flag-offset: -84}.iti__gp{--iti-flag-offset: -85}.iti__gq{--iti-flag-offset: -86}.iti__gr{--iti-flag-offset: -87}.iti__gt{--iti-flag-offset: -88}.iti__gu{--iti-flag-offset: -89}.iti__gw{--iti-flag-offset: -90}.iti__gy{--iti-flag-offset: -91}.iti__hk{--iti-flag-offset: -92}.iti__hn{--iti-flag-offset: -93}.iti__hr{--iti-flag-offset: -94}.iti__ht{--iti-flag-offset: -95}.iti__hu{--iti-flag-offset: -96}.iti__id{--iti-flag-offset: -97}.iti__ie{--iti-flag-offset: -98}.iti__il{--iti-flag-offset: -99}.iti__im{--iti-flag-offset: -100}.iti__in{--iti-flag-offset: -101}.iti__io{--iti-flag-offset: -102}.iti__iq{--iti-flag-offset: -103}.iti__ir{--iti-flag-offset: -104}.iti__is{--iti-flag-offset: -105}.iti__it{--iti-flag-offset: -106}.iti__je{--iti-flag-offset: -107}.iti__jm{--iti-flag-offset: -108}.iti__jo{--iti-flag-offset: -109}.iti__jp{--iti-flag-offset: -110}.iti__ke{--iti-flag-offset: -111}.iti__kg{--iti-flag-offset: -112}.iti__kh{--iti-flag-offset: -113}.iti__ki{--iti-flag-offset: -114}.iti__km{--iti-flag-offset: -115}.iti__kn{--iti-flag-offset: -116}.iti__kp{--iti-flag-offset: -117}.iti__kr{--iti-flag-offset: -118}.iti__kw{--iti-flag-offset: -119}.iti__ky{--iti-flag-offset: -120}.iti__kz{--iti-flag-offset: -121}.iti__la{--iti-flag-offset: -122}.iti__lb{--iti-flag-offset: -123}.iti__lc{--iti-flag-offset: -124}.iti__li{--iti-flag-offset: -125}.iti__lk{--iti-flag-offset: -126}.iti__lr{--iti-flag-offset: -127}.iti__ls{--iti-flag-offset: -128}.iti__lt{--iti-flag-offset: -129}.iti__lu{--iti-flag-offset: -130}.iti__lv{--iti-flag-offset: -131}.iti__ly{--iti-flag-offset: -132}.iti__ma{--iti-flag-offset: -133}.iti__mc{--iti-flag-offset: -134}.iti__md{--iti-flag-offset: -135}.iti__me{--iti-flag-offset: -136}.iti__mf{--iti-flag-offset: -137}.iti__mg{--iti-flag-offset: -138}.iti__mh{--iti-flag-offset: -139}.iti__mk{--iti-flag-offset: -140}.iti__ml{--iti-flag-offset: -141}.iti__mm{--iti-flag-offset: -142}.iti__mn{--iti-flag-offset: -143}.iti__mo{--iti-flag-offset: -144}.iti__mp{--iti-flag-offset: -145}.iti__mq{--iti-flag-offset: -146}.iti__mr{--iti-flag-offset: -147}.iti__ms{--iti-flag-offset: -148}.iti__mt{--iti-flag-offset: -149}.iti__mu{--iti-flag-offset: -150}.iti__mv{--iti-flag-offset: -151}.iti__mw{--iti-flag-offset: -152}.iti__mx{--iti-flag-offset: -153}.iti__my{--iti-flag-offset: -154}.iti__mz{--iti-flag-offset: -155}.iti__na{--iti-flag-offset: -156}.iti__nc{--iti-flag-offset: -157}.iti__ne{--iti-flag-offset: -158}.iti__nf{--iti-flag-offset: -159}.iti__ng{--iti-flag-offset: -160}.iti__ni{--iti-flag-offset: -161}.iti__nl{--iti-flag-offset: -162}.iti__no{--iti-flag-offset: -163}.iti__np{--iti-flag-offset: -164}.iti__nr{--iti-flag-offset: -165}.iti__nu{--iti-flag-offset: -166}.iti__nz{--iti-flag-offset: -167}.iti__om{--iti-flag-offset: -168}.iti__pa{--iti-flag-offset: -169}.iti__pe{--iti-flag-offset: -170}.iti__pf{--iti-flag-offset: -171}.iti__pg{--iti-flag-offset: -172}.iti__ph{--iti-flag-offset: -173}.iti__pk{--iti-flag-offset: -174}.iti__pl{--iti-flag-offset: -175}.iti__pm{--iti-flag-offset: -176}.iti__pr{--iti-flag-offset: -177}.iti__ps{--iti-flag-offset: -178}.iti__pt{--iti-flag-offset: -179}.iti__pw{--iti-flag-offset: -180}.iti__py{--iti-flag-offset: -181}.iti__qa{--iti-flag-offset: -182}.iti__re{--iti-flag-offset: -183}.iti__ro{--iti-flag-offset: -184}.iti__rs{--iti-flag-offset: -185}.iti__ru{--iti-flag-offset: -186}.iti__rw{--iti-flag-offset: -187}.iti__sa{--iti-flag-offset: -188}.iti__sb{--iti-flag-offset: -189}.iti__sc{--iti-flag-offset: -190}.iti__sd{--iti-flag-offset: -191}.iti__se{--iti-flag-offset: -192}.iti__sg{--iti-flag-offset: -193}.iti__sh{--iti-flag-offset: -194}.iti__si{--iti-flag-offset: -195}.iti__sj{--iti-flag-offset: -196}.iti__sk{--iti-flag-offset: -197}.iti__sl{--iti-flag-offset: -198}.iti__sm{--iti-flag-offset: -199}.iti__sn{--iti-flag-offset: -200}.iti__so{--iti-flag-offset: -201}.iti__sr{--iti-flag-offset: -202}.iti__ss{--iti-flag-offset: -203}.iti__st{--iti-flag-offset: -204}.iti__sv{--iti-flag-offset: -205}.iti__sx{--iti-flag-offset: -206}.iti__sy{--iti-flag-offset: -207}.iti__sz{--iti-flag-offset: -208}.iti__tc{--iti-flag-offset: -209}.iti__td{--iti-flag-offset: -210}.iti__tg{--iti-flag-offset: -211}.iti__th{--iti-flag-offset: -212}.iti__tj{--iti-flag-offset: -213}.iti__tk{--iti-flag-offset: -214}.iti__tl{--iti-flag-offset: -215}.iti__tm{--iti-flag-offset: -216}.iti__tn{--iti-flag-offset: -217}.iti__to{--iti-flag-offset: -218}.iti__tr{--iti-flag-offset: -219}.iti__tt{--iti-flag-offset: -220}.iti__tv{--iti-flag-offset: -221}.iti__tw{--iti-flag-offset: -222}.iti__tz{--iti-flag-offset: -223}.iti__ua{--iti-flag-offset: -224}.iti__ug{--iti-flag-offset: -225}.iti__us{--iti-flag-offset: -226}.iti__uy{--iti-flag-offset: -227}.iti__uz{--iti-flag-offset: -228}.iti__va{--iti-flag-offset: -229}.iti__vc{--iti-flag-offset: -230}.iti__ve{--iti-flag-offset: -231}.iti__vg{--iti-flag-offset: -232}.iti__vi{--iti-flag-offset: -233}.iti__vn{--iti-flag-offset: -234}.iti__vu{--iti-flag-offset: -235}.iti__wf{--iti-flag-offset: -236}.iti__ws{--iti-flag-offset: -237}.iti__xk{--iti-flag-offset: -238}.iti__ye{--iti-flag-offset: -239}.iti__yt{--iti-flag-offset: -240}.iti__za{--iti-flag-offset: -241}.iti__zm{--iti-flag-offset: -242}.iti__zw{--iti-flag-offset: -243}:root{--iti-hover-color: rgba(0, 0, 0, .05);--iti-border-color: #ccc;--iti-country-selector-bg: white;--iti-icon-color: #555;--iti-spacer-horizontal: 10px;--iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);--iti-globe-icon-size: 17px;--iti-clear-icon-size: 15px;--iti-border-width: 1px;--iti-arrow-size: 5px;--iti-arrow-width: 1.5px;--iti-arrow-padding: 7px;--iti-mobile-popup-margin: 30px;--iti-strict-reject-flash-color: rgba(255, 0, 0, .12)}.iti{position:relative;display:inline-block;*{box-sizing:border-box}input.iti__tel-input,input.iti__tel-input[type=text],input.iti__tel-input[type=tel]{position:relative;z-index:0;display:block;min-width:100%;margin:0!important}}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti__country-container{position:absolute;top:0;bottom:0;left:0;padding:var(--iti-border-width)}.iti__selected-country{z-index:1;position:relative;display:flex;align-items:center;height:100%;background:none;border:0;margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;font-weight:inherit;line-height:inherit;text-decoration:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.iti__selected-dial-code{margin-left:4px}.iti__arrow{margin-left:var(--iti-arrow-padding);margin-top:-2px;width:var(--iti-arrow-size);height:var(--iti-arrow-size);box-sizing:border-box;border-right:var(--iti-arrow-width) solid var(--iti-icon-color);border-bottom:var(--iti-arrow-width) solid var(--iti-icon-color);transform:rotate(45deg)}.iti__arrow--up{margin-top:4px;transform:rotate(-135deg)}.iti__country-selector{border-radius:3px;background-color:var(--iti-country-selector-bg);.iti--inline-country-selector &{border:var(--iti-border-width) solid var(--iti-border-color);box-shadow:1px 1px 4px #0003}.iti--inline-country-selector:not(.iti--detached-country-selector) &{position:absolute;z-index:2;left:0}}.iti__search-input{width:100%;border-width:0;border-radius:3px;padding-left:calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));padding-right:calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));[dir=rtl] &{padding-left:inherit;padding-right:30px;background-position:right 8px center}&::-webkit-search-cancel-button{appearance:none}}.iti__search-input,.iti__country{padding-top:8px;padding-bottom:8px}.iti__search-input-wrapper{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--iti-border-color)}.iti__search-icon{position:absolute;left:var(--iti-spacer-horizontal);display:flex;pointer-events:none;[dir=rtl] &{left:auto;right:var(--iti-spacer-horizontal)}}.iti__search-icon-svg{width:var(--iti-globe-icon-size);height:var(--iti-globe-icon-size);display:block;stroke:var(--iti-icon-color);fill:none;stroke-width:3}.iti__search-clear{position:absolute;right:calc(var(--iti-spacer-horizontal) / 2);background:transparent;border:0;border-radius:3px;cursor:pointer;padding:calc(var(--iti-spacer-horizontal) / 2);display:flex;align-items:center;justify-content:center;transition:background-color .15s ease;.iti__search-clear-x{stroke-width:2}.iti__search-clear-bg{fill:var(--iti-icon-color)}[dir=rtl] &{right:auto;left:var(--iti-spacer-horizontal)}&:hover,&:focus-visible{background:var(--iti-hover-color);outline:none}}.iti__search-clear-svg{width:var(--iti-clear-icon-size);height:var(--iti-clear-icon-size);display:block}.iti__no-results{text-align:center;padding:30px 0}.iti__country-list{list-style:none;padding:0;margin:0;cursor:pointer;overflow-y:scroll;-webkit-overflow-scrolling:touch;.iti--inline-country-selector &{max-height:185px}}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap;@media(max-width:500px){white-space:normal}}.iti__country{display:flex;align-items:center;padding-left:var(--iti-spacer-horizontal);padding-right:var(--iti-spacer-horizontal);outline:none;&.iti__highlight{background-color:var(--iti-hover-color)}}.iti__country-name{flex-grow:1}.iti__country-check{margin-left:var(--iti-spacer-horizontal);display:flex;align-items:center;color:var(--iti-icon-color)}.iti__country-check-svg{width:var(--iti-clear-icon-size);height:var(--iti-clear-icon-size);display:block}.iti__country-list .iti__flag{margin-right:var(--iti-spacer-horizontal);flex-shrink:0;[dir=rtl] &{margin-right:0;margin-left:var(--iti-spacer-horizontal)}}.iti--has-country-selector{.iti__country-container:has(+input[disabled]),.iti__country-container:has(+input[readonly]){button.iti__selected-country{cursor:not-allowed;.iti__arrow{visibility:hidden}}}.iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])){.iti__selected-country-primary:hover,.iti__selected-country[aria-expanded=true] .iti__selected-country-primary{background-color:var(--iti-hover-color)}}}.iti--detached-country-selector{position:fixed;top:-1000px;left:-1000px;z-index:1060;&:hover{cursor:pointer}}.iti--detached-country-selector{top:calc(anchor(bottom) + 3px);left:anchor(left);position-try-fallbacks:--iti-flip-above}@position-try --iti-flip-above{top:auto;bottom:calc(anchor(top) + 3px)}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti--fullscreen-popup{&.iti--detached-country-selector{background-color:#00000080;inset:0;position:fixed;padding:var(--iti-mobile-popup-margin);display:flex;flex-direction:column;justify-content:flex-start}.iti__country-selector{display:flex;flex-direction:column;max-height:100%;position:relative}.iti__country,.iti__search-input{padding-top:10px;padding-bottom:10px}.iti__country{padding-left:10px;padding-right:10px;line-height:1.5em}}.iti__flag{height:var(--iti-flag-height);width:var(--iti-flag-width);border-radius:1px;box-shadow:0 0 1px #888;background-image:image-set(var(--iti-path-flags-1x) 1x,var(--iti-path-flags-2x) 2x);background-repeat:no-repeat;background-position:calc(var(--iti-flag-offset, 100) * var(--iti-flag-width)) 0;background-size:calc(var(--iti-flag-count) * var(--iti-flag-width)) var(--iti-flag-height)}.iti__loading{position:relative;background:none;box-shadow:none;&:after{content:"";position:absolute;inset:0;margin:auto;width:var(--iti-flag-height);height:var(--iti-flag-height);box-sizing:border-box;border:2px solid var(--iti-icon-color);border-right-color:transparent;border-radius:50%;animation:iti-spinner 1s linear infinite}}@keyframes iti-spinner{to{transform:rotate(360deg)}}.iti__strict-reject-animation{.iti__tel-input,.iti__selected-country{animation:iti-strict-reject-shake .3s cubic-bezier(.36,.07,.19,.97)}@media(prefers-reduced-motion:reduce){.iti__tel-input{animation:iti-strict-reject-flash .3s ease-out both}.iti__selected-country{animation:none}}}@keyframes iti-strict-reject-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-3px)}40%,60%{transform:translate(3px)}}@keyframes iti-strict-reject-flash{40%{background-color:var(--iti-strict-reject-flash-color)}}.iti__globe{background:none;box-shadow:none;height:var(--iti-globe-icon-size);display:flex;align-items:center;justify-content:center;padding:0;.iti__globe-svg{width:100%;height:100%;fill:var(--iti-icon-color)}}@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))){.iti__tel-input:focus{outline-offset:1px}}:root{--iti-path-flags-1x: url(../img/flags.webp);--iti-path-flags-2x: url(../img/flags@2x.webp)}
1
+ :root{--iti-flag-width: 20px;--iti-flag-count: 244}.iti__ac{--iti-flag-offset: 0}.iti__ad{--iti-flag-offset: -1}.iti__ae{--iti-flag-offset: -2}.iti__af{--iti-flag-offset: -3}.iti__ag{--iti-flag-offset: -4}.iti__ai{--iti-flag-offset: -5}.iti__al{--iti-flag-offset: -6}.iti__am{--iti-flag-offset: -7}.iti__ao{--iti-flag-offset: -8}.iti__ar{--iti-flag-offset: -9}.iti__as{--iti-flag-offset: -10}.iti__at{--iti-flag-offset: -11}.iti__au{--iti-flag-offset: -12}.iti__aw{--iti-flag-offset: -13}.iti__ax{--iti-flag-offset: -14}.iti__az{--iti-flag-offset: -15}.iti__ba{--iti-flag-offset: -16}.iti__bb{--iti-flag-offset: -17}.iti__bd{--iti-flag-offset: -18}.iti__be{--iti-flag-offset: -19}.iti__bf{--iti-flag-offset: -20}.iti__bg{--iti-flag-offset: -21}.iti__bh{--iti-flag-offset: -22}.iti__bi{--iti-flag-offset: -23}.iti__bj{--iti-flag-offset: -24}.iti__bl{--iti-flag-offset: -25}.iti__bm{--iti-flag-offset: -26}.iti__bn{--iti-flag-offset: -27}.iti__bo{--iti-flag-offset: -28}.iti__bq{--iti-flag-offset: -29}.iti__br{--iti-flag-offset: -30}.iti__bs{--iti-flag-offset: -31}.iti__bt{--iti-flag-offset: -32}.iti__bw{--iti-flag-offset: -33}.iti__by{--iti-flag-offset: -34}.iti__bz{--iti-flag-offset: -35}.iti__ca{--iti-flag-offset: -36}.iti__cc{--iti-flag-offset: -37}.iti__cd{--iti-flag-offset: -38}.iti__cf{--iti-flag-offset: -39}.iti__cg{--iti-flag-offset: -40}.iti__ch{--iti-flag-offset: -41}.iti__ci{--iti-flag-offset: -42}.iti__ck{--iti-flag-offset: -43}.iti__cl{--iti-flag-offset: -44}.iti__cm{--iti-flag-offset: -45}.iti__cn{--iti-flag-offset: -46}.iti__co{--iti-flag-offset: -47}.iti__cr{--iti-flag-offset: -48}.iti__cu{--iti-flag-offset: -49}.iti__cv{--iti-flag-offset: -50}.iti__cw{--iti-flag-offset: -51}.iti__cx{--iti-flag-offset: -52}.iti__cy{--iti-flag-offset: -53}.iti__cz{--iti-flag-offset: -54}.iti__de{--iti-flag-offset: -55}.iti__dj{--iti-flag-offset: -56}.iti__dk{--iti-flag-offset: -57}.iti__dm{--iti-flag-offset: -58}.iti__do{--iti-flag-offset: -59}.iti__dz{--iti-flag-offset: -60}.iti__ec{--iti-flag-offset: -61}.iti__ee{--iti-flag-offset: -62}.iti__eg{--iti-flag-offset: -63}.iti__eh{--iti-flag-offset: -64}.iti__er{--iti-flag-offset: -65}.iti__es{--iti-flag-offset: -66}.iti__et{--iti-flag-offset: -67}.iti__fi{--iti-flag-offset: -68}.iti__fj{--iti-flag-offset: -69}.iti__fk{--iti-flag-offset: -70}.iti__fm{--iti-flag-offset: -71}.iti__fo{--iti-flag-offset: -72}.iti__fr{--iti-flag-offset: -73}.iti__ga{--iti-flag-offset: -74}.iti__gb{--iti-flag-offset: -75}.iti__gd{--iti-flag-offset: -76}.iti__ge{--iti-flag-offset: -77}.iti__gf{--iti-flag-offset: -78}.iti__gg{--iti-flag-offset: -79}.iti__gh{--iti-flag-offset: -80}.iti__gi{--iti-flag-offset: -81}.iti__gl{--iti-flag-offset: -82}.iti__gm{--iti-flag-offset: -83}.iti__gn{--iti-flag-offset: -84}.iti__gp{--iti-flag-offset: -85}.iti__gq{--iti-flag-offset: -86}.iti__gr{--iti-flag-offset: -87}.iti__gt{--iti-flag-offset: -88}.iti__gu{--iti-flag-offset: -89}.iti__gw{--iti-flag-offset: -90}.iti__gy{--iti-flag-offset: -91}.iti__hk{--iti-flag-offset: -92}.iti__hn{--iti-flag-offset: -93}.iti__hr{--iti-flag-offset: -94}.iti__ht{--iti-flag-offset: -95}.iti__hu{--iti-flag-offset: -96}.iti__id{--iti-flag-offset: -97}.iti__ie{--iti-flag-offset: -98}.iti__il{--iti-flag-offset: -99}.iti__im{--iti-flag-offset: -100}.iti__in{--iti-flag-offset: -101}.iti__io{--iti-flag-offset: -102}.iti__iq{--iti-flag-offset: -103}.iti__ir{--iti-flag-offset: -104}.iti__is{--iti-flag-offset: -105}.iti__it{--iti-flag-offset: -106}.iti__je{--iti-flag-offset: -107}.iti__jm{--iti-flag-offset: -108}.iti__jo{--iti-flag-offset: -109}.iti__jp{--iti-flag-offset: -110}.iti__ke{--iti-flag-offset: -111}.iti__kg{--iti-flag-offset: -112}.iti__kh{--iti-flag-offset: -113}.iti__ki{--iti-flag-offset: -114}.iti__km{--iti-flag-offset: -115}.iti__kn{--iti-flag-offset: -116}.iti__kp{--iti-flag-offset: -117}.iti__kr{--iti-flag-offset: -118}.iti__kw{--iti-flag-offset: -119}.iti__ky{--iti-flag-offset: -120}.iti__kz{--iti-flag-offset: -121}.iti__la{--iti-flag-offset: -122}.iti__lb{--iti-flag-offset: -123}.iti__lc{--iti-flag-offset: -124}.iti__li{--iti-flag-offset: -125}.iti__lk{--iti-flag-offset: -126}.iti__lr{--iti-flag-offset: -127}.iti__ls{--iti-flag-offset: -128}.iti__lt{--iti-flag-offset: -129}.iti__lu{--iti-flag-offset: -130}.iti__lv{--iti-flag-offset: -131}.iti__ly{--iti-flag-offset: -132}.iti__ma{--iti-flag-offset: -133}.iti__mc{--iti-flag-offset: -134}.iti__md{--iti-flag-offset: -135}.iti__me{--iti-flag-offset: -136}.iti__mf{--iti-flag-offset: -137}.iti__mg{--iti-flag-offset: -138}.iti__mh{--iti-flag-offset: -139}.iti__mk{--iti-flag-offset: -140}.iti__ml{--iti-flag-offset: -141}.iti__mm{--iti-flag-offset: -142}.iti__mn{--iti-flag-offset: -143}.iti__mo{--iti-flag-offset: -144}.iti__mp{--iti-flag-offset: -145}.iti__mq{--iti-flag-offset: -146}.iti__mr{--iti-flag-offset: -147}.iti__ms{--iti-flag-offset: -148}.iti__mt{--iti-flag-offset: -149}.iti__mu{--iti-flag-offset: -150}.iti__mv{--iti-flag-offset: -151}.iti__mw{--iti-flag-offset: -152}.iti__mx{--iti-flag-offset: -153}.iti__my{--iti-flag-offset: -154}.iti__mz{--iti-flag-offset: -155}.iti__na{--iti-flag-offset: -156}.iti__nc{--iti-flag-offset: -157}.iti__ne{--iti-flag-offset: -158}.iti__nf{--iti-flag-offset: -159}.iti__ng{--iti-flag-offset: -160}.iti__ni{--iti-flag-offset: -161}.iti__nl{--iti-flag-offset: -162}.iti__no{--iti-flag-offset: -163}.iti__np{--iti-flag-offset: -164}.iti__nr{--iti-flag-offset: -165}.iti__nu{--iti-flag-offset: -166}.iti__nz{--iti-flag-offset: -167}.iti__om{--iti-flag-offset: -168}.iti__pa{--iti-flag-offset: -169}.iti__pe{--iti-flag-offset: -170}.iti__pf{--iti-flag-offset: -171}.iti__pg{--iti-flag-offset: -172}.iti__ph{--iti-flag-offset: -173}.iti__pk{--iti-flag-offset: -174}.iti__pl{--iti-flag-offset: -175}.iti__pm{--iti-flag-offset: -176}.iti__pr{--iti-flag-offset: -177}.iti__ps{--iti-flag-offset: -178}.iti__pt{--iti-flag-offset: -179}.iti__pw{--iti-flag-offset: -180}.iti__py{--iti-flag-offset: -181}.iti__qa{--iti-flag-offset: -182}.iti__re{--iti-flag-offset: -183}.iti__ro{--iti-flag-offset: -184}.iti__rs{--iti-flag-offset: -185}.iti__ru{--iti-flag-offset: -186}.iti__rw{--iti-flag-offset: -187}.iti__sa{--iti-flag-offset: -188}.iti__sb{--iti-flag-offset: -189}.iti__sc{--iti-flag-offset: -190}.iti__sd{--iti-flag-offset: -191}.iti__se{--iti-flag-offset: -192}.iti__sg{--iti-flag-offset: -193}.iti__sh{--iti-flag-offset: -194}.iti__si{--iti-flag-offset: -195}.iti__sj{--iti-flag-offset: -196}.iti__sk{--iti-flag-offset: -197}.iti__sl{--iti-flag-offset: -198}.iti__sm{--iti-flag-offset: -199}.iti__sn{--iti-flag-offset: -200}.iti__so{--iti-flag-offset: -201}.iti__sr{--iti-flag-offset: -202}.iti__ss{--iti-flag-offset: -203}.iti__st{--iti-flag-offset: -204}.iti__sv{--iti-flag-offset: -205}.iti__sx{--iti-flag-offset: -206}.iti__sy{--iti-flag-offset: -207}.iti__sz{--iti-flag-offset: -208}.iti__tc{--iti-flag-offset: -209}.iti__td{--iti-flag-offset: -210}.iti__tg{--iti-flag-offset: -211}.iti__th{--iti-flag-offset: -212}.iti__tj{--iti-flag-offset: -213}.iti__tk{--iti-flag-offset: -214}.iti__tl{--iti-flag-offset: -215}.iti__tm{--iti-flag-offset: -216}.iti__tn{--iti-flag-offset: -217}.iti__to{--iti-flag-offset: -218}.iti__tr{--iti-flag-offset: -219}.iti__tt{--iti-flag-offset: -220}.iti__tv{--iti-flag-offset: -221}.iti__tw{--iti-flag-offset: -222}.iti__tz{--iti-flag-offset: -223}.iti__ua{--iti-flag-offset: -224}.iti__ug{--iti-flag-offset: -225}.iti__us{--iti-flag-offset: -226}.iti__uy{--iti-flag-offset: -227}.iti__uz{--iti-flag-offset: -228}.iti__va{--iti-flag-offset: -229}.iti__vc{--iti-flag-offset: -230}.iti__ve{--iti-flag-offset: -231}.iti__vg{--iti-flag-offset: -232}.iti__vi{--iti-flag-offset: -233}.iti__vn{--iti-flag-offset: -234}.iti__vu{--iti-flag-offset: -235}.iti__wf{--iti-flag-offset: -236}.iti__ws{--iti-flag-offset: -237}.iti__xk{--iti-flag-offset: -238}.iti__ye{--iti-flag-offset: -239}.iti__yt{--iti-flag-offset: -240}.iti__za{--iti-flag-offset: -241}.iti__zm{--iti-flag-offset: -242}.iti__zw{--iti-flag-offset: -243}:root{--iti-hover-color: rgba(0, 0, 0, .05);--iti-border-color: #ccc;--iti-country-selector-bg: white;--iti-icon-color: #555;--iti-spacer-horizontal: 10px;--iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);--iti-globe-icon-size: 17px;--iti-clear-icon-size: 15px;--iti-border-width: 1px;--iti-arrow-size: 5px;--iti-arrow-width: 1.5px;--iti-arrow-padding: 7px;--iti-mobile-popup-margin: 30px;--iti-strict-reject-flash-color: rgba(255, 0, 0, .12)}.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti input.iti__tel-input,.iti input.iti__tel-input[type=text],.iti input.iti__tel-input[type=tel]{position:relative;z-index:0;display:block;min-width:100%;margin:0!important}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti__country-container{position:absolute;top:0;bottom:0;left:0;padding:var(--iti-border-width)}.iti__selected-country{z-index:1;position:relative;display:flex;align-items:center;height:100%;background:none;border:0;margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;font-weight:inherit;line-height:inherit;text-decoration:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.iti__selected-dial-code{margin-left:4px}.iti__arrow{margin-left:var(--iti-arrow-padding);margin-top:-2px;width:var(--iti-arrow-size);height:var(--iti-arrow-size);box-sizing:border-box;border-right:var(--iti-arrow-width) solid var(--iti-icon-color);border-bottom:var(--iti-arrow-width) solid var(--iti-icon-color);transform:rotate(45deg)}.iti__arrow--up{margin-top:4px;transform:rotate(-135deg)}.iti__country-selector{border-radius:3px;background-color:var(--iti-country-selector-bg)}.iti--inline-country-selector .iti__country-selector{border:var(--iti-border-width) solid var(--iti-border-color);box-shadow:1px 1px 4px #0003}.iti--inline-country-selector:not(.iti--detached-country-selector) .iti__country-selector{position:absolute;z-index:2;left:0}.iti__search-input{width:100%;border-width:0;border-radius:3px;padding-left:calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));padding-right:calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal))}[dir=rtl] .iti__search-input{padding-left:inherit;padding-right:30px;background-position:right 8px center}.iti__search-input::-webkit-search-cancel-button{appearance:none}.iti__search-input,.iti__country{padding-top:8px;padding-bottom:8px}.iti__search-input-wrapper{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--iti-border-color)}.iti__search-icon{position:absolute;left:var(--iti-spacer-horizontal);display:flex;pointer-events:none}[dir=rtl] .iti__search-icon{left:auto;right:var(--iti-spacer-horizontal)}.iti__search-icon-svg{width:var(--iti-globe-icon-size);height:var(--iti-globe-icon-size);display:block;stroke:var(--iti-icon-color);fill:none;stroke-width:3}.iti__search-clear{position:absolute;right:calc(var(--iti-spacer-horizontal) / 2);background:transparent;border:0;border-radius:3px;cursor:pointer;padding:calc(var(--iti-spacer-horizontal) / 2);display:flex;align-items:center;justify-content:center;transition:background-color .15s ease}.iti__search-clear .iti__search-clear-x{stroke-width:2}.iti__search-clear .iti__search-clear-bg{fill:var(--iti-icon-color)}[dir=rtl] .iti__search-clear{right:auto;left:var(--iti-spacer-horizontal)}.iti__search-clear:hover,.iti__search-clear:focus-visible{background:var(--iti-hover-color);outline:none}.iti__search-clear-svg{width:var(--iti-clear-icon-size);height:var(--iti-clear-icon-size);display:block}.iti__no-results{text-align:center;padding:30px 0}.iti__country-list{list-style:none;padding:0;margin:0;cursor:pointer;outline:none;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti--inline-country-selector .iti__country-list{max-height:185px}.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__country{display:flex;align-items:center;padding-left:var(--iti-spacer-horizontal);padding-right:var(--iti-spacer-horizontal)}.iti__country.iti__highlight{background-color:var(--iti-hover-color)}.iti__country-name{flex-grow:1}.iti__country-check{margin-left:var(--iti-spacer-horizontal);display:flex;align-items:center;color:var(--iti-icon-color)}.iti__country-check-svg{width:var(--iti-clear-icon-size);height:var(--iti-clear-icon-size);display:block}.iti__country-list .iti__flag{margin-right:var(--iti-spacer-horizontal);flex-shrink:0}[dir=rtl] :is(.iti__country-list .iti__flag){margin-right:0;margin-left:var(--iti-spacer-horizontal)}:is(.iti--has-country-selector .iti__country-container:has(+input[disabled]),.iti--has-country-selector .iti__country-container:has(+input[readonly])) button.iti__selected-country{cursor:not-allowed}:is(.iti--has-country-selector .iti__country-container:has(+input[disabled]),.iti--has-country-selector .iti__country-container:has(+input[readonly])) button.iti__selected-country .iti__arrow{visibility:hidden}.iti--has-country-selector .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country-primary:hover,.iti--has-country-selector .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country[aria-expanded=true] .iti__selected-country-primary{background-color:var(--iti-hover-color)}.iti--detached-country-selector{position:fixed;top:-1000px;left:-1000px;z-index:1060}.iti--detached-country-selector:hover{cursor:pointer}.iti--detached-country-selector{top:calc(anchor(bottom) + 3px);left:anchor(left);position-try-fallbacks:--iti-flip-above}@position-try --iti-flip-above{top:auto;bottom:calc(anchor(top) + 3px)}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti--fullscreen-popup.iti--detached-country-selector{background-color:#00000080;inset:0;position:fixed;padding:var(--iti-mobile-popup-margin);box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start}.iti--fullscreen-popup .iti__country-selector{display:flex;flex-direction:column;max-height:100%;position:relative}.iti--fullscreen-popup .iti__country,.iti--fullscreen-popup .iti__search-input{padding-top:10px;padding-bottom:10px}.iti--fullscreen-popup .iti__search-input{font-size:max(16px,1em)}.iti--fullscreen-popup .iti__country{padding-left:10px;padding-right:10px;line-height:1.5em}.iti__flag{height:var(--iti-flag-height);width:var(--iti-flag-width);border-radius:1px;box-shadow:0 0 1px #888;background-image:image-set(var(--iti-path-flags-1x) 1x,var(--iti-path-flags-2x) 2x);background-repeat:no-repeat;background-position:calc(var(--iti-flag-offset, 100) * var(--iti-flag-width)) 0;background-size:calc(var(--iti-flag-count) * var(--iti-flag-width)) var(--iti-flag-height)}.iti__loading{position:relative;background:none;box-shadow:none}.iti__loading:after{content:"";position:absolute;inset:0;margin:auto;width:var(--iti-flag-height);height:var(--iti-flag-height);box-sizing:border-box;border:2px solid var(--iti-icon-color);border-right-color:transparent;border-radius:50%;animation:iti-spinner 1s linear infinite}@keyframes iti-spinner{to{transform:rotate(360deg)}}.iti__strict-reject-animation .iti__tel-input,.iti__strict-reject-animation .iti__selected-country{animation:iti-strict-reject-shake .3s cubic-bezier(.36,.07,.19,.97)}@media(prefers-reduced-motion:reduce){.iti__strict-reject-animation .iti__tel-input{animation:iti-strict-reject-flash .3s ease-out both}.iti__strict-reject-animation .iti__selected-country{animation:none}}@keyframes iti-strict-reject-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-3px)}40%,60%{transform:translate(3px)}}@keyframes iti-strict-reject-flash{40%{background-color:var(--iti-strict-reject-flash-color)}}.iti__globe{background:none;box-shadow:none;height:var(--iti-globe-icon-size);display:flex;align-items:center;justify-content:center;padding:0}.iti__globe .iti__globe-svg{width:100%;height:100%;fill:var(--iti-icon-color)}@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))){.iti__tel-input:focus{outline-offset:1px}}:root{--iti-path-flags-1x: url(../img/flags.webp);--iti-path-flags-2x: url(../img/flags@2x.webp)}
package/dist/js/data.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v29.2.3
2
+ * International Telephone Input v29.4.0
3
3
  * git+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 v29.2.3
2
+ * International Telephone Input v29.4.0
3
3
  * git+https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1800,6 +1800,7 @@ export interface AllOptions {
1800
1800
  excludeCountries: Iso2[] | null;
1801
1801
  matchDropdownWidth: boolean;
1802
1802
  formatAsYouType: boolean;
1803
+ fullscreenParent: HTMLElement | null;
1803
1804
  hiddenInputs: ((telInputName: string) => {
1804
1805
  phone: string;
1805
1806
  country?: string;
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v29.2.3
2
+ * International Telephone Input v29.4.0
3
3
  * git+https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -2014,7 +2014,7 @@ var _factory = (() => {
2014
2014
  customPlaceholder: null,
2015
2015
  //* Always show the dropdown
2016
2016
  dropdownAlwaysOpen: false,
2017
- //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup.
2017
+ //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup (see fullscreenParent).
2018
2018
  dropdownParent: null,
2019
2019
  //* Don't display these countries.
2020
2020
  excludeCountries: null,
@@ -2022,6 +2022,8 @@ var _factory = (() => {
2022
2022
  matchDropdownWidth: true,
2023
2023
  //* Format the number as the user types
2024
2024
  formatAsYouType: true,
2025
+ //* Optional DOM element to append the fullscreen popup to, instead of document.body (e.g. a modal <dialog>, where a body-mounted popup would be unreachable). Only consulted in fullscreen rendering (see dropdownParent for the dropdown). Null means document.body, which is resolved on open rather than here, as document may not exist yet (e.g. SSR).
2026
+ fullscreenParent: null,
2025
2027
  //* Inject hidden inputs with the names returned from this function, and on submit, populate them with the full number and selected country iso2.
2026
2028
  hiddenInputs: null,
2027
2029
  //* Translations for the core library UI strings e.g. search input placeholder, country names.
@@ -2205,8 +2207,9 @@ var _factory = (() => {
2205
2207
  validatedOptions[key] = value;
2206
2208
  break;
2207
2209
  case "dropdownParent":
2210
+ case "fullscreenParent":
2208
2211
  if (value !== null && !isElLike(value)) {
2209
- warnOption("dropdownParent", "an HTMLElement or null", value);
2212
+ warnOption(key, "an HTMLElement or null", value);
2210
2213
  break;
2211
2214
  }
2212
2215
  validatedOptions[key] = value;
@@ -2770,6 +2773,9 @@ var _factory = (() => {
2770
2773
  },
2771
2774
  this.#countrySelectorEl
2772
2775
  );
2776
+ if (!countrySearch) {
2777
+ this.#countryListEl.setAttribute("tabindex", "0");
2778
+ }
2773
2779
  this.#appendListItems();
2774
2780
  if (countrySearch) {
2775
2781
  this.#updateSearchResultsA11yText();
@@ -2790,11 +2796,12 @@ var _factory = (() => {
2790
2796
  this.#countryContainerEl.appendChild(this.#countrySelectorEl);
2791
2797
  }
2792
2798
  }
2793
- //* Resolve the DOM element to attach the country selector to. Fullscreen always uses document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
2799
+ //* Resolve the DOM element to attach the country selector to. Fullscreen is always detached: it uses the consumer-supplied fullscreenParent, falling back to document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
2800
+ //* NOTE: these are deliberately two separate options. For the dropdown, setting a parent switches it from inline to detached rendering (pos:fixed, positioned against the input), whereas the fullscreen popup is detached regardless, so its parent only relocates it. Sharing one option would force a detached dropdown on anyone who only needs to move the fullscreen popup e.g. into a modal <dialog> (issue #2199).
2794
2801
  #getDetachedParent() {
2795
- const { countrySelectorMode, dropdownParent } = this.#options;
2802
+ const { countrySelectorMode, dropdownParent, fullscreenParent } = this.#options;
2796
2803
  if (countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN) {
2797
- return document.body;
2804
+ return fullscreenParent ?? document.body;
2798
2805
  }
2799
2806
  if (countrySelectorMode === COUNTRY_SELECTOR_MODE.DROPDOWN) {
2800
2807
  return dropdownParent;
@@ -2920,7 +2927,6 @@ var _factory = (() => {
2920
2927
  const listItem = createEl("li", {
2921
2928
  id: `iti-${this.#id}__item-${c.iso2}`,
2922
2929
  class: liClass,
2923
- tabindex: "-1",
2924
2930
  role: "option",
2925
2931
  [ARIA.SELECTED]: "false"
2926
2932
  });
@@ -3112,18 +3118,20 @@ var _factory = (() => {
3112
3118
  container.scrollTop = offsetTop - containerRect.height + elementRect.height;
3113
3119
  }
3114
3120
  }
3121
+ //* The element that holds focus while the country selector is open: the search input, or (when countrySearch is disabled) the country list itself.
3122
+ #getOpenFocusEl() {
3123
+ return this.#options.countrySearch ? this.#searchInputEl : this.#countryListEl;
3124
+ }
3115
3125
  //* Remove highlighting from the previous list item and highlight the new one.
3116
3126
  #highlightListItem(listItem, doScroll = true) {
3117
3127
  this.#highlightedListItemEl?.classList.remove(CLASSES.HIGHLIGHT);
3118
3128
  if (listItem) {
3119
3129
  listItem.classList.add(CLASSES.HIGHLIGHT);
3120
- if (this.#options.countrySearch) {
3121
- const activeDescendant = listItem.getAttribute("id") || "";
3122
- this.#searchInputEl.setAttribute(
3123
- ARIA.ACTIVE_DESCENDANT,
3124
- activeDescendant
3125
- );
3126
- }
3130
+ const activeDescendant = listItem.getAttribute("id") || "";
3131
+ this.#getOpenFocusEl().setAttribute(
3132
+ ARIA.ACTIVE_DESCENDANT,
3133
+ activeDescendant
3134
+ );
3127
3135
  if (doScroll) {
3128
3136
  this.#scrollCountryListToItem(listItem);
3129
3137
  }
@@ -3202,7 +3210,7 @@ var _factory = (() => {
3202
3210
  //* Open the country selector: create a fresh AbortController, do the DOM work, and wire up all
3203
3211
  //* open-state listeners (which invoke the caller's onSelect / onClose callbacks).
3204
3212
  openCountrySelector(onSelect, onClose) {
3205
- const { countrySearch, dropdownAlwaysOpen } = this.#options;
3213
+ const { dropdownAlwaysOpen } = this.#options;
3206
3214
  this.#countrySelectorAbortController = new AbortController();
3207
3215
  if (this.#options.countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN) {
3208
3216
  this.#ensureInlineDropdownSizeMeasured();
@@ -3225,10 +3233,11 @@ var _factory = (() => {
3225
3233
  if (itemToHighlight) {
3226
3234
  this.#highlightListItem(itemToHighlight);
3227
3235
  }
3228
- if (countrySearch && !dropdownAlwaysOpen) {
3229
- this.#searchInputEl.focus();
3236
+ if (!dropdownAlwaysOpen) {
3237
+ this.#getOpenFocusEl().focus();
3230
3238
  }
3231
3239
  if (this.#options.countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN && this.#detachedCountrySelectorEl && window.visualViewport) {
3240
+ this.#adjustFullscreenPopupToViewport();
3232
3241
  window.visualViewport.addEventListener(
3233
3242
  "resize",
3234
3243
  () => {
@@ -3345,6 +3354,20 @@ var _factory = (() => {
3345
3354
  };
3346
3355
  this.#selectedCountryEl?.addEventListener("keydown", handleKeydown, { signal });
3347
3356
  this.#countrySelectorEl?.addEventListener("keydown", handleKeydown, { signal });
3357
+ if (this.#detachedCountrySelectorEl) {
3358
+ this.#countrySelectorEl?.addEventListener(
3359
+ "keydown",
3360
+ (e) => {
3361
+ if (e.key === KEYS.TAB) {
3362
+ e.preventDefault();
3363
+ onEscape();
3364
+ const focusEl = e.shiftKey ? this.#selectedCountryEl : this.telInputEl;
3365
+ focusEl.focus();
3366
+ }
3367
+ },
3368
+ { signal }
3369
+ );
3370
+ }
3348
3371
  }
3349
3372
  //* Wire up country search input listener: typing filters the list, the clear button resets it.
3350
3373
  #bindSearchInputListener(signal) {
@@ -3442,8 +3465,8 @@ var _factory = (() => {
3442
3465
  this.#countrySelectorAbortController = null;
3443
3466
  this.#countrySelectorEl.classList.add(CLASSES.HIDE);
3444
3467
  this.#selectedCountryEl.setAttribute(ARIA.EXPANDED, "false");
3468
+ this.#getOpenFocusEl().removeAttribute(ARIA.ACTIVE_DESCENDANT);
3445
3469
  if (countrySearch) {
3446
- this.#searchInputEl.removeAttribute(ARIA.ACTIVE_DESCENDANT);
3447
3470
  this.#searchInputEl.value = "";
3448
3471
  this.#applySearchFilter();
3449
3472
  if (this.#highlightedListItemEl) {
@@ -3456,6 +3479,7 @@ var _factory = (() => {
3456
3479
  this.#detachedCountrySelectorEl.remove();
3457
3480
  this.#detachedCountrySelectorEl.style.top = "";
3458
3481
  this.#detachedCountrySelectorEl.style.bottom = "";
3482
+ this.#detachedCountrySelectorEl.style.height = "";
3459
3483
  this.#detachedCountrySelectorEl.style.paddingLeft = "";
3460
3484
  this.#detachedCountrySelectorEl.style.paddingRight = "";
3461
3485
  } else {
@@ -3521,8 +3545,7 @@ var _factory = (() => {
3521
3545
  if (!vv || !this.#detachedCountrySelectorEl) {
3522
3546
  return;
3523
3547
  }
3524
- const virtualKeyboardHeight = window.innerHeight - vv.height;
3525
- this.#detachedCountrySelectorEl.style.bottom = `${virtualKeyboardHeight}px`;
3548
+ this.#detachedCountrySelectorEl.style.height = `${vv.height}px`;
3526
3549
  }
3527
3550
  // UI: Whether the country selector is currently open (visible).
3528
3551
  isCountrySelectorOpen() {
@@ -4992,7 +5015,7 @@ var _factory = (() => {
4992
5015
  attachUtils,
4993
5016
  startedLoadingUtils: false,
4994
5017
  startedLoadingAutoCountry: false,
4995
- version: "29.2.3",
5018
+ version: "29.4.0",
4996
5019
  NUMBER_FORMAT,
4997
5020
  NUMBER_TYPE,
4998
5021
  VALIDATION_ERROR,