webp images

.github/CONTRIBUTING.md

@@ -45,7 +45,7 @@ Then run the tests to make sure nothing has broken: `npm test`, commit the updat
 
 We get our flags from the region-flags project, which in turn pulls them in from Wikipedia. So cd into intl-tel-input/node_modules/region-flags and then do the following:
 
-1. Install some dependencies. On MacOS use brew: `brew install wget dos2unix librsvg optipng`
+1. Install some dependencies. On MacOS use brew: `brew install wget dos2unix librsvg optipng webp`
 2. Run the make-aliases command: `./make-aliases.sh` (Note: I got some "No such file or directory" warnings)
 3. Run the update command: `./update.sh` (Note: this kept freezing for me, so I had to keep doing ctrl+c and then re-running it)
 

Gruntfile.js

@@ -17,7 +17,7 @@ module.exports = function(grunt) {
   // just CSS
   grunt.registerTask('css', ['sass', 'cssmin']);
   // just images
-  grunt.registerTask('img', ['responsive_images:retina', 'exec:evenizer', 'responsive_images:regular', 'sprite', 'imagemin', 'generate-scss-metadata']);
+  grunt.registerTask('img', ['responsive_images:retina', 'exec:evenizer', 'responsive_images:regular', 'sprite', 'imagemin', 'generate-scss-metadata', 'shell:webp']);
   // just javascript
   grunt.registerTask('js', ['shell:eslint', 'shell:genTsDeclaration', 'shell:genReactTsDeclaration', 'shell:buildJs', 'replace', 'shell:buildReact', 'replace:removeImport']);
   // just react

README.md

@@ -1,19 +1,19 @@
 # International Telephone Input [![Build Status](https://app.travis-ci.com/jackocnr/intl-tel-input.svg?branch=master)](https://app.travis-ci.com/jackocnr/intl-tel-input) <img src="https://img.shields.io/github/package-json/v/jackocnr/intl-tel-input.svg" alt="version"/> <img src="https://img.shields.io/npm/dm/intl-tel-input.svg"  alt="downloads"/>
 
-<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/react.png" alt="React logo" width="16px" />  NEWS: we now have our own <a href="https://github.com/jackocnr/intl-tel-input/tree/master/react">React component</a>! Play with it on <a href="https://intl-tel-input.com/storybook/?path=/docs/intltelinput--vanilla">Storybook</a>. 
+<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/react.webp" alt="React logo" width="16px" />  NEWS: we now have our own <a href="https://github.com/jackocnr/intl-tel-input/tree/master/react">React component</a>! Play with it on <a href="https://intl-tel-input.com/storybook/?path=/docs/intltelinput--vanilla">Storybook</a>. 
 
-<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/typescript.png" alt="Typescript logo" width="16px" /> NEWS: we now have our own Typescript type definitions, so no need to use `@types/intl-tel-input` anymore!
+<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/typescript.webp" alt="Typescript logo" width="16px" /> NEWS: we now have our own Typescript type definitions, so no need to use `@types/intl-tel-input` anymore!
 
 🗣️ NEWS: we now provide [translations](https://github.com/jackocnr/intl-tel-input/tree/master/build/js/i18n) in several common languages! [See them in action](https://intl-tel-input.com/examples/localise-countries.html).
 
 International Telephone Input is a JavaScript plugin for entering and validating international telephone numbers. It takes a regular input field, adds a searchable country dropdown, auto-detects the user's country, displays a relevant placeholder number, formats the number as you type, and provides comprehensive validation methods.
 
-<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/vanilla-search.png" alt="Screenshot" width="238px" style="max-width: 100%" />
+<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/vanilla-search.webp" alt="Screenshot" width="238px" style="max-width: 100%" />
 
 If you find the plugin helpful, please consider [supporting the project](https://github.com/sponsors/jackocnr).
 
 ## Sponsored by
-<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/twilio.png" height="100" alt="Twilio"/>
+<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/twilio.webp" height="100" alt="Twilio"/>
 Use <a href="https://www.twilio.com/blog/international-telephone-input-twilio?utm_source=github&utm_medium=referral&utm_campaign=intl_tel_input">Twilio's API to build phone verification, SMS 2FA, appointment reminders, marketing notifications and so much more</a>. We can't wait to see what you build.
 
 ## Table of Contents
@@ -92,13 +92,13 @@ _Note: We have now dropped support for all versions of Internet Explorer because
 
 2. Import the CSS: `import 'intl-tel-input/build/css/intlTelInput.css';`
 
-3. Set the path to flags.png and globe.png in your CSS, by overriding the CSS variables
+3. Set the path to flags.webp and globe.webp in your CSS, by overriding the CSS variables
   ```css
   .iti {
-    --iti-path-flags-1x: url('path/to/flags.png');
-    --iti-path-flags-2x: url('path/to/flags@2x.png');
-    --iti-path-globe-1x: url('path/to/globe.png');
-    --iti-path-globe-2x: url('path/to/globe@2x.png');
+    --iti-path-flags-1x: url('path/to/flags.webp');
+    --iti-path-flags-2x: url('path/to/flags@2x.webp');
+    --iti-path-globe-1x: url('path/to/globe.webp');
+    --iti-path-globe-2x: url('path/to/globe@2x.webp');
   }
   ```
 
@@ -120,13 +120,13 @@ _Note: We have now dropped support for all versions of Internet Explorer because
   <link rel="stylesheet" href="path/to/intlTelInput.css">
   ```
 
-3. Set the path to flags.png and globe.png in your CSS, by overriding the CSS variables
+3. Set the path to flags.webp and globe.webp in your CSS, by overriding the CSS variables
   ```css
   .iti {
-    --iti-path-flags-1x: url('path/to/flags.png');
-    --iti-path-flags-2x: url('path/to/flags@2x.png');
-    --iti-path-globe-1x: url('path/to/globe.png');
-    --iti-path-globe-2x: url('path/to/globe@2x.png');
+    --iti-path-flags-1x: url('path/to/flags.webp');
+    --iti-path-flags-2x: url('path/to/flags@2x.webp');
+    --iti-path-globe-1x: url('path/to/globe.webp');
+    --iti-path-globe-2x: url('path/to/globe@2x.webp');
   }
   ```
 
@@ -317,7 +317,7 @@ Set this to false to hide the flags e.g. for political reasons. Instead it will
 Type: `Boolean` Default: `false`  
 Display the selected country dial code next to the input, so it looks like it's part of the typed number, except it is uneditable. When enabled, typing a plus in the telephone input will open the country dropdown and enter the plus in the search input instead, to force the user to select a country from the list rather than typing their dial code in the telephone input. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--separatedialcode) (using the React component).
 
-<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/separateDialCode2.png" width="232px" height="47px" alt="Separate Dial Code">
+<img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/separateDialCode2.webp" width="232px" height="47px" alt="Separate Dial Code">
 
 **strictMode**  
 Type: `Boolean` Default: `false`  
@@ -338,7 +338,7 @@ Specify [one of the keys](https://github.com/jackocnr/intl-tel-input/blob/master
 ## Theming / Dark Mode
 There are lots of CSS variables available for theming. See [intlTelInput.scss](https://github.com/jackocnr/intl-tel-input/blob/master/src/css/intlTelInput.scss) for a list.
 
-Note that it's easy to [re-generate the globe icon](https://free-icon-rainbow.com/international-call-free-icon) in whatever colour you need for your theme. I recommend you download it in the highest resolution, and then scale the image down to the required sizes (20px wide for globe.png and 40px wide for globe@2x.png).
+Note that it's easy to [re-generate the globe icon](https://free-icon-rainbow.com/international-call-free-icon) in whatever colour you need for your theme. I recommend you download it in the highest resolution, and then scale the image down to the required sizes (20px wide for globe.webp and 40px wide for globe@2x.webp).
 
 Dark mode example:
 ```css
@@ -349,8 +349,8 @@ Dark mode example:
     --iti-dropdown-bg: #0d1117;
     --iti-arrow-color: #aaaaaa;
     --iti-hover-color: #30363d;
-    --iti-path-globe-1x: url("path/to/globe_light.png");
-    --iti-path-globe-2x: url("path/to/globe_light@2x.png");
+    --iti-path-globe-1x: url("path/to/globe_light.webp");
+    --iti-path-globe-2x: url("path/to/globe_light@2x.webp");
   }
 }
 ```

build/css/demo.css

@@ -67,7 +67,7 @@ input::placeholder {
     --iti-dropdown-bg: #0d1117;
     --iti-arrow-color: #aaaaaa;
     --iti-hover-color: #30363d;
-    --iti-path-globe-1x: url("../img/globe_light.png");
-    --iti-path-globe-2x: url("../img/globe_light@2x.png");
+    --iti-path-globe-1x: url("../img/globe_light.webp");
+    --iti-path-globe-2x: url("../img/globe_light@2x.webp");
   }
 }

build/css/intlTelInput.css

@@ -17,10 +17,10 @@
   --iti-input-padding: 6px;
   --iti-right-hand-selected-country-padding: calc(var(--iti-spacer-horizontal) + var(--iti-spacer-horizontal) + var(--iti-flag-width));
   --iti-selected-country-arrow-padding: calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));
-  --iti-path-flags-1x: url("../img/flags.png?1");
-  --iti-path-flags-2x: url("../img/flags@2x.png?1");
-  --iti-path-globe-1x: url("../img/globe.png");
-  --iti-path-globe-2x: url("../img/globe@2x.png");
+  --iti-path-flags-1x: url("../img/flags.webp");
+  --iti-path-flags-2x: url("../img/flags@2x.webp");
+  --iti-path-globe-1x: url("../img/globe.webp");
+  --iti-path-globe-2x: url("../img/globe@2x.webp");
   --iti-flag-sprite-width: 5762px;
   --iti-flag-sprite-height: 15px;
   --iti-mobile-popup-margin: 30px;

grunt/shell.js

@@ -15,5 +15,8 @@ module.exports = function(grunt) {
     eslint: {
       command: 'eslint src/js/intl-tel-input.ts'
     },
+    webp: {
+      command: 'cwebp build/img/flags.png -lossless -o build/img/flags.webp && cwebp build/img/[email protected] -lossless -o build/img/[email protected]'
+    },
   };
 };

src/css/demo.scss

@@ -74,7 +74,7 @@ input::placeholder {
     --iti-dropdown-bg: #0d1117;
     --iti-arrow-color: #aaaaaa;
     --iti-hover-color: #30363d;
-    --iti-path-globe-1x: url("../img/globe_light.png");
-    --iti-path-globe-2x: url("../img/globe_light@2x.png");
+    --iti-path-globe-1x: url("../img/globe_light.webp");
+    --iti-path-globe-2x: url("../img/globe_light@2x.webp");
   }
 }

src/css/intlTelInput.scss

@@ -27,10 +27,10 @@
   --iti-selected-country-arrow-padding: calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));
 
   //* Image related variables.
-  --iti-path-flags-1x: url('../img/flags.png?1');
-  --iti-path-flags-2x: url('../img/flags@2x.png?1');
-  --iti-path-globe-1x: url('../img/globe.png');
-  --iti-path-globe-2x: url('../img/globe@2x.png');
+  --iti-path-flags-1x: url('../img/flags.webp');
+  --iti-path-flags-2x: url('../img/flags@2x.webp');
+  --iti-path-globe-1x: url('../img/globe.webp');
+  --iti-path-globe-2x: url('../img/globe@2x.webp');
 
   --iti-flag-sprite-width: #{map-get($flags-sprite-1x, width)};
   --iti-flag-sprite-height: #{map-get($flags-sprite-1x, height)};
@@ -159,6 +159,9 @@
 
   //* The dropdown.
   &__dropdown-content {
+    border-radius: 3px;
+    background-color: var(--iti-dropdown-bg);
+
     .iti--inline-dropdown & {
       position: absolute;
       //* Popup so render above everything else.
@@ -173,9 +176,6 @@
       border: var(--iti-border-width) solid var(--iti-border-color);
       box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
     }
-
-    border-radius: 3px;
-    background-color: var(--iti-dropdown-bg);
   }
   &__search-input {
     width: 100%;