intl-tel-input 18.1.7 → 18.2.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.
Files changed (21) hide show
  1. package/README.md +24 -17
  2. package/build/css/intlTelInput.css +233 -209
  3. package/build/css/intlTelInput.min.css +1 -1
  4. package/build/img/flags.png +0 -0
  5. package/build/img/flags@2x.png +0 -0
  6. package/build/js/data.js +1 -1
  7. package/build/js/data.min.js +1 -1
  8. package/build/js/intlTelInput-jquery.js +15 -3
  9. package/build/js/intlTelInput-jquery.min.js +3 -3
  10. package/build/js/intlTelInput.js +15 -3
  11. package/build/js/intlTelInput.min.js +3 -3
  12. package/build/js/utils.js +40 -40
  13. package/composer.json +1 -1
  14. package/package.json +2 -2
  15. package/spec.html +2 -0
  16. package/src/css/intlTelInput.scss +5 -0
  17. package/src/css/sprite.scss +230 -210
  18. package/src/js/intlTelInput.js +16 -1
  19. package/src/js/utils.js +14 -0
  20. package/src/spec/tests/methods/isPossibleNumber.js +56 -0
  21. package/src/spec/tests/methods/isValidNumber.js +7 -7
package/README.md CHANGED
@@ -59,7 +59,7 @@ _Note: In v12.0.0 we dropped support for IE9 and IE10, because they are [no long
59
59
  ```html
60
60
  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script>
61
61
  <script>
62
- var input = document.querySelector("#phone");
62
+ const input = document.querySelector("#phone");
63
63
  window.intlTelInput(input, {
64
64
  utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js",
65
65
  });
@@ -111,7 +111,7 @@ _Note: In v12.0.0 we dropped support for IE9 and IE10, because they are [no long
111
111
  ```html
112
112
  <script src="path/to/intlTelInput.js"></script>
113
113
  <script>
114
- var input = document.querySelector("#phone");
114
+ const input = document.querySelector("#phone");
115
115
  window.intlTelInput(input, {
116
116
  utilsScript: "path/to/utils.js"
117
117
  });
@@ -121,9 +121,9 @@ _Note: In v12.0.0 we dropped support for IE9 and IE10, because they are [no long
121
121
  ## Recommended Usage
122
122
  We highly recommend you (lazy) load the included utils.js using the `utilsScript` option. 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.
123
123
 
124
- 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 it will automatically set the country and format it according to the options you specify (e.g. when using `nationalMode` it will automatically remove the international dial code for you).
124
+ 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 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).
125
125
 
126
- Finally, make sure you have `<meta charset="utf-8">` in the `<head>` section of your page, else you will get an error as the JS contains some special unicode characters.
126
+ Finally, make sure you have `<meta charset="utf-8">` in the `<head>` section of your page, else you will get an error as the JS contains some special unicode characters for localised country names.
127
127
 
128
128
 
129
129
  ## Initialisation Options
@@ -247,7 +247,7 @@ Enable formatting/validation etc. by specifying the URL of the included utils.js
247
247
 
248
248
 
249
249
  ## Public Methods
250
- In these examples, `iti` refers to the plugin instance which gets returned when you initialise the plugin e.g. `var iti = intlTelInput(input)`
250
+ In these examples, `iti` refers to the plugin instance which gets returned when you initialise the plugin e.g. `const iti = intlTelInput(input)`
251
251
 
252
252
  **destroy**
253
253
  Remove the plugin from the input, and unbind any event listeners.
@@ -258,23 +258,23 @@ iti.destroy();
258
258
  **getExtension**
259
259
  Get the extension from the current number. Requires the `utilsScript` option.
260
260
  ```js
261
- var extension = iti.getExtension();
261
+ const extension = iti.getExtension();
262
262
  ```
263
263
  Returns a string e.g. if the input value was `"(702) 555-5555 ext. 1234"`, this would return `"1234"`
264
264
 
265
265
  **getNumber**
266
266
  Get the current number in the given format (defaults to [E.164 standard](https://en.wikipedia.org/wiki/E.164)). The different formats are available in the enum `intlTelInputUtils.numberFormat` - which you can see [here](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js#L109). Requires the `utilsScript` option. _Note that even if `nationalMode` is enabled, this can still return a full international number. Also note that this method expects a valid number, and so should only be used after validation._
267
267
  ```js
268
- var number = iti.getNumber();
268
+ const number = iti.getNumber();
269
269
  // or
270
- var number = iti.getNumber(intlTelInputUtils.numberFormat.E164);
270
+ const number = iti.getNumber(intlTelInputUtils.numberFormat.E164);
271
271
  ```
272
272
  Returns a string e.g. `"+17024181234"`
273
273
 
274
274
  **getNumberType**
275
275
  Get the type (fixed-line/mobile/toll-free etc) of the current number. Requires the `utilsScript` option.
276
276
  ```js
277
- var numberType = iti.getNumberType();
277
+ const numberType = iti.getNumberType();
278
278
  ```
279
279
  Returns an integer, which you can match against the [various options](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js#L119) in the global enum `intlTelInputUtils.numberType` e.g.
280
280
  ```js
@@ -287,7 +287,7 @@ _Note that in the US there's no way to differentiate between fixed-line and mobi
287
287
  **getSelectedCountryData**
288
288
  Get the country data for the currently selected flag.
289
289
  ```js
290
- var countryData = iti.getSelectedCountryData();
290
+ const countryData = iti.getSelectedCountryData();
291
291
  ```
292
292
  Returns something like this:
293
293
  ```js
@@ -301,7 +301,7 @@ Returns something like this:
301
301
  **getValidationError**
302
302
  Get more information about a validation error. Requires the `utilsScript` option.
303
303
  ```js
304
- var error = iti.getValidationError();
304
+ const error = iti.getValidationError();
305
305
  ```
306
306
  Returns an integer, which you can match against the [various options](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js#L153) in the global enum `intlTelInputUtils.validationError` e.g.
307
307
  ```js
@@ -310,10 +310,17 @@ if (error === intlTelInputUtils.validationError.TOO_SHORT) {
310
310
  }
311
311
  ```
312
312
 
313
+ **isPossibleNumber**
314
+ Check if the current number is possible. This is a simple form of validation that only checks the length of the number but should be sufficient for most use cases. See `isValidNumber` for more accurate validation, but the advantage of `isPossibleNumber` is that it is much more future-proof as while countries around the world regularly update their number rules, they very rarely change their number lengths. If it returns false, you can use `getValidationError` to get more information. Requires the `utilsScript` option.
315
+ ```js
316
+ const isPossible = iti.isPossibleNumber();
317
+ ```
318
+ Returns: `true`/`false`
319
+
313
320
  **isValidNumber**
314
- Validate the current number - [see example](https://intl-tel-input.com/examples/validation.html). If validation fails, you can use `getValidationError` to get more information. Requires the `utilsScript` option. Also see `getNumberType` if you want to make sure the user enters a certain type of number e.g. a mobile number.
321
+ Check if the current number is valid - [see example](https://intl-tel-input.com/examples/validation.html). This is a very accurate validation check (with specific rules for each dial code etc). Note that these valid number rules change each month for various countries around the world, so you need to be careful to keep the plugin up-to-date else you will start rejecting valid numbers. For a simpler and more future-proof form of validation, see `isPossibleNumber` above. If validation fails, you can use `getValidationError` to get more information. Requires the `utilsScript` option.
315
322
  ```js
316
- var isValid = iti.isValidNumber();
323
+ const isValid = iti.isValidNumber();
317
324
  ```
318
325
  Returns: `true`/`false`
319
326
 
@@ -341,7 +348,7 @@ iti.setPlaceholderNumberType("FIXED_LINE");
341
348
  **getCountryData**
342
349
  Retrieve the plugin's country data - either to re-use elsewhere e.g. to generate your own country dropdown - [see example](https://intl-tel-input.com/examples/country-sync.html), or alternatively, you could use it to modify the country data. Note that any modifications must be done before initialising the plugin.
343
350
  ```js
344
- var countryData = window.intlTelInputGlobals.getCountryData();
351
+ const countryData = window.intlTelInputGlobals.getCountryData();
345
352
  ```
346
353
  Returns an array of country objects:
347
354
  ```js
@@ -355,8 +362,8 @@ Returns an array of country objects:
355
362
  **getInstance**
356
363
  After initialising the plugin, you can always access the instance again using this method, by just passing in the relevant input element.
357
364
  ```js
358
- var input = document.querySelector('#phone');
359
- var iti = window.intlTelInputGlobals.getInstance(input);
365
+ const input = document.querySelector('#phone');
366
+ const iti = window.intlTelInputGlobals.getInstance(input);
360
367
  iti.isValidNumber(); // etc
361
368
  ```
362
369
 
@@ -412,7 +419,7 @@ If you have a scrolling container other than `window` which is causing problems
412
419
 
413
420
  ```js
414
421
  scrollingElement.addEventListener("scroll", function() {
415
- var e = document.createEvent('Event');
422
+ const e = document.createEvent('Event');
416
423
  e.initEvent("scroll", true, true);
417
424
  window.dispatchEvent(e);
418
425
  });