intl-tel-input 18.1.1 → 18.1.3

package/.github/CONTRIBUTING.md

@@ -8,7 +8,7 @@ In order to build the project, you will first need to install [npm](https://www.
 
 In most cases, you will only need to make changes to the JavaScript, in which case you can just run `npm run build:js` to build the JavaScript before committing.
 
-If you want to make changes to the CSS or the flags sprite, you will need to globally install a package called evenizer with `npm install -g evenizer` and then run `npm run build` to build all of the assets (warning: this can take a while), before committing.
+If you want to make changes to the CSS or the flags sprite, you will need to globally install a package called evenizer with `npm install -g evenizer` and ImageMagick with `brew install imagemagick`, then run `npm run build` to build all of the assets (warning: this can take a while), before committing.
 
 ### Updating to a new version of libphonenumber
 

package/.vscode/settings.json

@@ -3,6 +3,5 @@
     "editor.formatOnPaste": false, // required 
     "editor.formatOnType": false, // required
     "editor.formatOnSaveMode": "file", // required to format on save
-    "files.autoSave": "onFocusChange", // optional but recommended
     "vs-code-prettier-eslint.prettierLast": "false" // set as "true" to run 'prettier' last not first
 }

package/README.md

@@ -49,6 +49,23 @@ You can view [a live demo](https://intl-tel-input.com) and see some examples of
 
 _Note: In v12.0.0 we dropped support for IE9 and IE10, because they are [no longer supported](https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/) by any version of Windows._
 
+## Getting Started (Using a CDN)
+1. Add the CSS
+  ```html
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/css/intlTelInput.css">
+  ```
+
+2. Add the plugin script and initialise it on your input element
+  ```html
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script>
+  <script>
+    var input = document.querySelector("#phone");
+    window.intlTelInput(input, {
+      utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js",
+    });
+  </script>
+  ```
+
 ## Getting Started (Using a bundler e.g. Webpack)
 1. Install with npm: `npm install intl-tel-input --save` or yarn: `yarn add intl-tel-input`
 
@@ -69,16 +86,14 @@ _Note: In v12.0.0 we dropped support for IE9 and IE10, because they are [no long
 
   const input = document.querySelector("#phone");
   intlTelInput(input, {
-      // any initialisation options go here
+      utilsScript: "path/to/utils.js"
   });
   ```
 
-5. **Recommended:** initialise the plugin with the `utilsScript` option to enable formatting/validation, and to allow you to extract full international numbers using `getNumber`.
-
 ## Getting Started (Not using a bundler)
 1. Download the [latest release](https://github.com/jackocnr/intl-tel-input/releases/latest), or better yet install it with [npm](https://www.npmjs.com/package/intl-tel-input)
 
-2. Include the stylesheet
+2. Add the stylesheet
   ```html
   <link rel="stylesheet" href="path/to/intlTelInput.css">
   ```
@@ -98,14 +113,11 @@ _Note: In v12.0.0 we dropped support for IE9 and IE10, because they are [no long
   <script>
     var input = document.querySelector("#phone");
     window.intlTelInput(input, {
-      // any initialisation options go here
+      utilsScript: "path/to/utils.js"
     });
   </script>
   ```
 
-5. **Recommended:** initialise the plugin with the `utilsScript` option to enable formatting/validation, and to allow you to extract full international numbers using `getNumber`.
-
-
 ## Recommended Usage
 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.
 
@@ -187,10 +199,20 @@ If you leave `initialCountry` blank, it will default to the first country in the
 
 **localizedCountries**  
 Type: `Object` Default: `{}`  
-Allows to translate the countries by its given iso code e.g.:
+Allow localisation of country names. For each country, the key should be the iso2 country code, and the value should be the localised country name. [See example](https://intl-tel-input.com/examples/localise-countries.html).
 
 ```js
-{ 'de': 'Deutschland' }
+// Country names in German
+{
+    fr: "Frankreich",
+    de: "Deutschland",
+    es: "Spanien",
+    it: "Italien",
+    ch: "Schweiz",
+    nl: "Niederlande",
+    at: "Österreich",
+    dk: "Dänemark",
+  }
 ```
 
 **nationalMode**  
@@ -317,7 +339,7 @@ iti.setPlaceholderNumberType("FIXED_LINE");
 ## Static Methods
 
 **getCountryData**  
-Get all of the plugin's country data - either to re-use elsewhere e.g. to populate a country dropdown - [see example](https://intl-tel-input.com/examples/country-sync.html), or to modify - [see example](https://intl-tel-input.com/examples/modify-country-data.html). Note that any modifications must be done before initialising the plugin.  
+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.  
 ```js
 var countryData = window.intlTelInputGlobals.getCountryData();
 ```

package/build/css/demo.css

@@ -1,19 +1,18 @@
 * {
   box-sizing: border-box;
-  -moz-box-sizing: border-box; }
+}
 
 body {
   margin: 20px;
   font-size: 14px;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-  color: #555; }
-
-.iti__hide {
-  display: none; }
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #555;
+}
 
 pre {
   margin: 0 !important;
-  display: inline-block; }
+  display: inline-block;
+}
 
 .token.operator,
 .token.entity,
@@ -21,42 +20,42 @@ pre {
 .language-css .token.string,
 .style .token.string,
 .token.variable {
-  background: none; }
+  background: none;
+}
 
-input, button {
+input,
+button {
   height: 35px;
   margin: 0;
   padding: 6px 12px;
   border-radius: 2px;
   font-family: inherit;
   font-size: 100%;
-  color: inherit; }
-  input[disabled], button[disabled] {
-    background-color: #eee; }
-
-input, select {
-  border: 1px solid #CCC;
-  width: 250px; }
-
-::-webkit-input-placeholder {
-  color: #BBB; }
-
-::-moz-placeholder {
-  /* Firefox 19+ */
-  color: #BBB;
-  opacity: 1; }
-
+  color: inherit;
+}
+input[disabled],
+button[disabled] {
+  background-color: #eee;
+}
+
+input,
+select {
+  border: 1px solid #ccc;
+  width: 250px;
+}
+
+::placeholder,
 :-ms-input-placeholder {
-  color: #BBB; }
+  color: #bbb;
+}
 
 button {
-  color: #FFF;
-  background-color: #428BCA;
-  border: 1px solid #357EBD; }
-  button:hover {
-    background-color: #3276B1;
-    border-color: #285E8E;
-    cursor: pointer; }
-
-#result {
-  margin-bottom: 100px; }
+  color: #fff;
+  background-color: #428bca;
+  border: 1px solid #357ebd;
+}
+button:hover {
+  background-color: #3276b1;
+  border-color: #285e8e;
+  cursor: pointer;
+}