playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4032 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4037

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7965ad0a31d9d18d905cedd8a804cafc16faa273ada6eb2a62e12e55a2945688
4
- data.tar.gz: cb55355040cec1dfb434fde14e62c4f236d32365db8a5f646f82e18d9c6765c8
3
+ metadata.gz: a06ad76a5b0490f9a83f4327fd8a9dd388d2ed6fa1ee83dc72d6ca6a5071ae5c
4
+ data.tar.gz: 42bfb4eb362d27094685c06ad868c9c5bfb8ebb70960b50df06da156125b9fc1
5
5
  SHA512:
6
- metadata.gz: 7004f33f0684cd4774d4560503bbb0f9f8ce78f54da1aa9d98d4de56d6c585bf55326bb0e591628b0fa74ee30cb0ad091c22ab0aea49aaae5ac0c809ffe7762f
7
- data.tar.gz: 9fac218509a6e59c22d966df75eb7d5568b7355545cbed9ba821de046c098df5802346ea8ce89f46db66ab2d8c5d0de5b0705493fa6cb5ae6663586c8fd5de84
6
+ metadata.gz: 4bafbfe0895af6e9f6548d7cced94e4c0b341f6a68957d81ea1d47c31ee00fd27b72e90e9028c27a23f6a990dbdc528651aca7e71fd81d0bcd996cc44537adbc
7
+ data.tar.gz: e632b6fc5da05678aed09cd65a0cc4a6e772e1dcfc5d556546dbd5356644813da9210ac1ab2765bec1f4a38efc9187d7b9a1969cbf9d19ed410004041190dbfb
@@ -18,6 +18,18 @@ $flag-min-resolution: 192dpi;
18
18
  display: none;
19
19
  }
20
20
 
21
+ .iti__selected-dial-code {
22
+ font-family: $font_family_base;
23
+ font-size: $font_base;
24
+ line-height: 1.5;
25
+ letter-spacing: $lspace_normal;
26
+ font-weight: $regular;
27
+ font-style: normal;
28
+ text-rendering: optimizeLegibility;
29
+ -moz-font-feature-settings: "liga" on;
30
+ color: $charcoal;
31
+ }
32
+
21
33
  input::placeholder {
22
34
  color: $focus_input_light;
23
35
  }
@@ -46,6 +58,9 @@ $flag-min-resolution: 192dpi;
46
58
  justify-content: center;
47
59
  align-items: center;
48
60
  margin-right: 10px;
61
+ .iti__flag {
62
+ margin-right: 0;
63
+ }
49
64
  }
50
65
 
51
66
  .iti__selected-country {
@@ -133,7 +148,7 @@ $flag-min-resolution: 192dpi;
133
148
 
134
149
  .iti__arrow.iti__arrow--up::before {
135
150
  transform: rotate(-($transform-rotate-deg/3));
136
- top: $space_xs + 4px;
151
+ top: $space_xs + 1px;
137
152
  color: $primary_action;
138
153
  }
139
154
 
@@ -213,16 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
213
213
  // This also Fixes things for our react_component rendering on the Rails Side
214
214
  useEffect(formatAllCountries, [])
215
215
 
216
+ // If an initial country is not specified, the "globe" icon will show
217
+ // Always set a country
218
+ const fallbackCountry =
219
+ preferredCountries.length > 0 ? preferredCountries[0] :
220
+ onlyCountries.length > 0 ? onlyCountries.sort()[0] :
221
+ "af";
222
+
216
223
  useEffect(() => {
217
224
  const telInputInit = intlTelInput(inputRef.current, {
218
225
  separateDialCode: true,
219
226
  countryOrder: preferredCountries,
220
227
  allowDropdown: !disabled,
221
228
  autoInsertDialCode: false,
222
- initialCountry,
229
+ initialCountry: initialCountry || fallbackCountry,
223
230
  onlyCountries,
224
231
  countrySearch: false,
225
232
  fixDropdownWidth: false,
233
+ formatAsYouType: false,
226
234
  })
227
235
 
228
236
  inputRef.current.addEventListener("countrychange", (evt: Event) => {
@@ -1 +1 @@
1
- Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
1
+ Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
@@ -1,4 +1,6 @@
1
1
  /* @import "intl-tel-input/build/css/intlTelInput.css"; */
2
+ // Taken from 18.5.3, but with background-image replaced with PLAY-1527
3
+ // https://unpkg.com/browse/intl-tel-input@18.5.3/build/css/intlTelInput.css
2
4
  .iti {
3
5
  position: relative;
4
6
  display: inline-block;