intl-tel-input 25.10.10 → 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 +11 -9
- package/angular/README.md +1 -1
- package/angular/build/IntlTelInput.js +524 -154
- package/angular/build/IntlTelInputWithUtils.js +524 -154
- package/angular/build/types/intl-tel-input/data.d.ts +1 -1
- package/angular/build/types/intl-tel-input.d.ts +3 -3
- package/angular/build/types/modules/format/formatting.d.ts +3 -3
- package/angular/build/types/modules/types/public-api.d.ts +0 -7
- package/build/js/data.js +497 -143
- package/build/js/data.min.js +2 -2
- package/build/js/intlTelInput.d.ts +7 -14
- package/build/js/intlTelInput.js +525 -155
- package/build/js/intlTelInput.min.js +4 -4
- package/build/js/intlTelInputWithUtils.js +525 -155
- package/build/js/intlTelInputWithUtils.min.js +3 -3
- package/package.json +5 -4
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +524 -154
- package/react/build/IntlTelInput.d.ts +7 -14
- package/react/build/IntlTelInput.js +524 -154
- package/react/build/IntlTelInputWithUtils.cjs +524 -154
- package/react/build/IntlTelInputWithUtils.js +524 -154
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +803 -433
- package/vue/build/IntlTelInputWithUtils.mjs +939 -569
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.
|
|
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.
|
|
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.
|
|
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)
|
|
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`
|
|
@@ -328,7 +330,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
|
|
|
328
330
|
```js
|
|
329
331
|
// (A) import utils module from a CDN
|
|
330
332
|
intlTelInput(htmlInputElement, {
|
|
331
|
-
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.
|
|
333
|
+
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/js/utils.js"),
|
|
332
334
|
});
|
|
333
335
|
|
|
334
336
|
// (B) import utils module from your own hosted version of utils.js
|
|
@@ -612,7 +614,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
|
|
|
612
614
|
```js
|
|
613
615
|
// (A) import utils module from a CDN
|
|
614
616
|
intlTelInput(htmlInputElement, {
|
|
615
|
-
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.
|
|
617
|
+
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.11/build/js/utils.js"),
|
|
616
618
|
});
|
|
617
619
|
|
|
618
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.
|
|
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.
|