intl-tel-input 25.10.9 → 25.10.11

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
@@ -77,16 +77,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
77
77
  ## Getting Started (Using a CDN)
78
78
  1. Add the CSS
79
79
  ```html
80
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.9/build/css/intlTelInput.css">
80
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/css/intlTelInput.css">
81
81
  ```
82
82
 
83
83
  2. Add the plugin script and initialise it on your input element
84
84
  ```html
85
- <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.9/build/js/intlTelInput.min.js"></script>
85
+ <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/js/intlTelInput.min.js"></script>
86
86
  <script>
87
87
  const input = document.querySelector("#phone");
88
88
  window.intlTelInput(input, {
89
- loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.9/build/js/utils.js"),
89
+ loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/js/utils.js"),
90
90
  });
91
91
  </script>
92
92
  ```
@@ -148,20 +148,22 @@ Most bundlers (such as Webpack, Vite, or Parcel) will see this and place the [ut
148
148
  ```
149
149
 
150
150
  ## Recommended Usage
151
- We highly recommend you [load the included utils.js](#loading-the-utilities-script), which enables formatting and validation etc. Then the plugin is built to always deal with numbers in the full international format (e.g. "+17024181234") and convert them accordingly - even when `nationalMode` or `separateDialCode` is enabled. We recommend you get, store, and set numbers exclusively in this format for simplicity - then you don't have to deal with handling the country code separately, as full international numbers include the country code information.
151
+ We highly recommend you [load the included utils.js](#loading-the-utilities-script), which enables formatting and validation, etc. Then the plugin is built to always deal with numbers in the full international format (e.g. "+17024181234") and convert them accordingly - even when `nationalMode` or `separateDialCode` is enabled. We recommend you get, store, and set numbers exclusively in this format for simplicity - then you don't have to deal with handling the country code separately, as full international numbers include the country code information*.
152
152
 
153
- You can always get the full international number (including country code) using `getNumber`, then you only have to store that one string in your database (you don't have to store the country separately), and then the next time you initialise the plugin with that number in the input, it will automatically set the country and format it according to the options you specify (e.g. when using `nationalMode` it will automatically display the number in national format, removing the international dial code).
153
+ You can always get the full international number (including country code) using `getNumber`, then you only have to store that one string in your database (you don't have to store the country separately), and then the next time you initialise the plugin with that number in the input, it will automatically set the country* and format it according to the options you specify (e.g. when using `nationalMode` it will automatically display the number in national format, removing the international dial code).
154
154
 
155
- If you know the user's country, you can set it with `initialCountry` (e.g. `"us"` for the United States), and if you don't, we recommend setting `initialCountry` to `"auto"` (along with the `geoIpLookup` option) to determine the user's country based on their IP address - [see example](https://intl-tel-input.com/examples/lookup-country.html).
155
+ If you know the user's country, you can set it with `initialCountry` (e.g. `"us"` for the United States). If you don't, we recommend setting `initialCountry` to `"auto"` (along with the `geoIpLookup` option) to determine the user's country based on their IP address - [see example](https://intl-tel-input.com/examples/lookup-country.html).
156
156
 
157
157
  If you know the user's language, you can use the included translations to localise the country names (etc) - [see example](https://intl-tel-input.com/examples/localise-countries.html).
158
158
 
159
+ _*Except for some small satellite territories, which share number ranges with the main country (search data.ts for "shared" for examples). When displaying numbers from those shared ranges, we default to selecting the main country._
160
+
159
161
  ## Initialisation Options
160
162
  When you initialise the plugin, the first argument is the input element, and the second is an object containing any initialisation options you want, which are detailed below. Note: any options that take country codes should be [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) codes.
161
163
 
162
164
  **allowDropdown**
163
165
  Type: `Boolean` Default: `true`
164
- Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected country is not clickable. Also, if showFlags is enabled we display the selected flag on the right instead because it is just a marker of state. Note that if `separateDialCode` is enabled, `allowDropdown` is forced to `true` as the dropdown is required when the user types "+" in this case. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown) (using the React component).
166
+ Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected country is not clickable. Also, if showFlags is enabled, we display the selected flag on the right instead because it is just a marker of state. Note that if `separateDialCode` is enabled, `allowDropdown` is forced to `true` as the dropdown is required when the user types "+" in this case. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown) (using the React component).
165
167
 
166
168
  **allowPhonewords**
167
169
  Type: `Boolean` Default: `false`
@@ -305,9 +307,10 @@ intlTelInput(input, {
305
307
  multipleSearchResults: "${count} results found",
306
308
  // OPTIONAL: For more complex pluralisation cases, e.g. Polish or Arabic, you can implement your own logic, like below. In this case, you can omit the "one" and "multiple" keys above.
307
309
  searchResultsText(count) {
308
- // NOTE: zero results is always handled by "zeroSearchResults" above
310
+ // NOTE: zero results are always handled by "zeroSearchResults" above
309
311
  if (count === 1) return "1 result found";
310
- return `${count} results found`;
312
+ if (count < 5) return `Some ${count} results found`;
313
+ return `Many ${count} results found`;
311
314
  }
312
315
  }
313
316
  });
@@ -327,7 +330,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
327
330
  ```js
328
331
  // (A) import utils module from a CDN
329
332
  intlTelInput(htmlInputElement, {
330
- loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.9/build/js/utils.js"),
333
+ loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/js/utils.js"),
331
334
  });
332
335
 
333
336
  // (B) import utils module from your own hosted version of utils.js
@@ -364,7 +367,7 @@ Set this to false to hide the flags e.g. for political reasons. Instead, it will
364
367
  **separateDialCode**
365
368
  Type: `Boolean` Default: `false`
366
369
  Display the selected country's international dial code next to the input, so it looks like it's part of the typed number. Since the user cannot edit the displayed dial code, they may try to type a new one - in this case, to avoid having two dial codes next to each other, we automatically open the country dropdown and put the new dial code in the search input instead. So if they type +54, then Argentina will be highlighted in the dropdown and they can simply press Enter to select it, updating the displayed dial code (this feature requires `allowDropdown` and `countrySearch` to be enabled). Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--separatedialcode) (using the React component).
367
- __Note: if the user enters their number with autocomplete or by copying and pasting it, and their number includes the international dial code, then this will be shown twice__
370
+ __Note: if the user enters their number with autofill or by copying and pasting it, and their number includes the international dial code, then this will be shown twice__
368
371
 
369
372
  <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/separate-dial-code4.png" width="267px" height="51px" alt="Separate Dial Code">
370
373
 
@@ -611,7 +614,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
611
614
  ```js
612
615
  // (A) import utils module from a CDN
613
616
  intlTelInput(htmlInputElement, {
614
- loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.9/build/js/utils.js"),
617
+ loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/js/utils.js"),
615
618
  });
616
619
 
617
620
  // (B) import utils module from your own hosted version of utils.js
package/angular/README.md CHANGED
@@ -29,7 +29,7 @@ import "intl-tel-input/styles";
29
29
 
30
30
  See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) for a more fleshed-out example of how to handle validation.
31
31
 
32
- A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.9/build/js/utils.js"`.
32
+ A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/js/utils.js"`.
33
33
 
34
34
  ## Props
35
35
  Here's a list of all of the current props you can pass to the IntlTelInput Angular component.