intl-tel-input 18.1.0 → 18.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "18.1.0",
+  "version": "18.1.2",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -21,7 +21,9 @@
     "babel-eslint": "^9.0.0",
     "custom-event-polyfill": "^1.0.6",
     "es6-promise": "^4.2.5",
+    "eslint": "^8.38.0",
     "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
@@ -32,7 +34,7 @@
     "grunt-cli": "^1.2.0",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-cssmin": "^2.2.1",
-    "grunt-contrib-imagemin": "^2.0.1",
+    "grunt-contrib-imagemin": "^4.0.0",
     "grunt-contrib-jasmine": "^3.0.0",
     "grunt-contrib-uglify": "^2.1.0",
     "grunt-contrib-watch": "^1.1.0",
@@ -48,6 +50,7 @@
     "jquery": "^3.1.1",
     "load-grunt-config": "^0.19.2",
     "node-sass": "^6.0.1",
+    "prettier": "^2.8.7",
     "region-flags": "^1.1.0",
     "time-grunt": "^1.4.0"
   },

package/src/css/demo.scss

@@ -1,20 +1,13 @@
 * {
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
 }
-
 body {
   margin: 20px;
-
   font-size: 14px;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #555;
 }
 
-.iti__hide {
-  display: none;
-}
-
 // example code blocks
 pre {
   margin: 0 !important; // override prism.css
@@ -31,7 +24,8 @@ pre {
 }
 
 // general form styling
-input, button {
+input,
+button {
   height: 35px;
   margin: 0;
   padding: 6px 12px;
@@ -48,34 +42,24 @@ input, button {
 }
 
 // select useful for examples
-input, select {
-  border: 1px solid #CCC;
+input,
+select {
+  border: 1px solid #ccc;
   width: 250px;
 }
-::-webkit-input-placeholder {
-   color: #BBB;
-}
-::-moz-placeholder {  /* Firefox 19+ */
-   color: #BBB;
-   opacity:  1;
-}
+::placeholder,
 :-ms-input-placeholder {
-   color: #BBB;
+  color: #bbb;
 }
 
 // borrowed from bootstrap
 button {
-  color: #FFF;
-  background-color: #428BCA;
-  border: 1px solid #357EBD;
+  color: #fff;
+  background-color: #428bca;
+  border: 1px solid #357ebd;
   &:hover {
-    background-color: #3276B1;
-    border-color: #285E8E;
+    background-color: #3276b1;
+    border-color: #285e8e;
     cursor: pointer;
   }
 }
-
-// examples
-#result {
-  margin-bottom: 100px;
-}

package/src/css/intlTelInput.scss

@@ -6,7 +6,7 @@
 // the border-highlighting some browsers give the input on focus
 $hoverColor: rgba(0, 0, 0, 0.05) !default;
 $greyText: #999 !default;
-$greyBorder: #CCC !default;
+$greyBorder: #ccc !default;
 
 $flagHeight: 15px !default;
 $flagWidth: 20px !default;
@@ -17,13 +17,14 @@ $borderWidth: 1px !default;
 
 $arrowHeight: 4px !default;
 $arrowWidth: 6px !default;
-$triangleBorder: 3px !default;
-$arrowPadding: 6px !default;
+$triangleBorder: $arrowWidth / 2 !default;
+$arrowPadding: $arrowWidth !default;
 $arrowColor: #555 !default;
 
 $inputPadding: 6px !default;
 $selectedFlagWidth: $flagWidth + (2 * $flagPadding) !default;
-$selectedFlagArrowWidth: $flagWidth + $flagPadding + $arrowWidth + (2 * $arrowPadding) !default;
+$selectedFlagArrowWidth: $flagWidth + $flagPadding + $arrowWidth +
+  (2 * $arrowPadding) !default;
 
 // image related variables
 $flagsImagePath: "../img/" !default;
@@ -55,7 +56,9 @@ $mobilePopupMargin: 30px !default;
   }
 
   // specify types to increase specificity e.g. to override bootstrap v2.3
-  input, input[type=text], input[type=tel] {
+  input,
+  input[type="text"],
+  input[type="tel"] {
     position: relative;
     // input is bottom level, below selected flag and dropdown
     z-index: 0;
@@ -110,7 +113,7 @@ $mobilePopupMargin: 30px !default;
     border-right: $triangleBorder solid transparent;
     border-top: $arrowHeight solid $arrowColor;
 
-    [dir=rtl] & {
+    [dir="rtl"] & {
       margin-right: $arrowPadding;
       margin-left: 0;
     }
@@ -140,7 +143,7 @@ $mobilePopupMargin: 30px !default;
     // margin-left to compensate for the padding on the parent
     margin: 0 0 0 (-$borderWidth);
 
-    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
     background-color: white;
     border: $borderWidth solid $greyBorder;
 
@@ -192,23 +195,27 @@ $mobilePopupMargin: 30px !default;
   }
 
   // spacing between country flag, name and dial code
-  &__flag-box, &__country-name {
+  &__flag-box,
+  &__country-name {
     margin-right: 6px;
 
-    [dir=rtl] & {
+    [dir="rtl"] & {
       margin-right: 0;
       margin-left: 6px;
     }
   }
 
   // these settings are independent of each other, but both move selected flag to left of input
-  &--allow-dropdown, &--separate-dial-code {
-    input, input[type=text], input[type=tel] {
+  &--allow-dropdown,
+  &--separate-dial-code {
+    input,
+    input[type="text"],
+    input[type="tel"] {
       padding-right: $inputPadding;
       padding-left: $selectedFlagArrowWidth + $inputPadding;
       margin-left: 0;
 
-      [dir=rtl] & {
+      [dir="rtl"] & {
         padding-right: $selectedFlagArrowWidth + $inputPadding;
         padding-left: $inputPadding;
         margin-right: 0;
@@ -218,7 +225,7 @@ $mobilePopupMargin: 30px !default;
       right: auto;
       left: 0;
 
-      [dir=rtl] & {
+      [dir="rtl"] & {
         right: 0;
         left: auto;
       }
@@ -288,11 +295,6 @@ $mobilePopupMargin: 30px !default;
   }
 }
 
-
-
-
-
-
 @import "sprite";
 
 .iti__flag {
@@ -301,7 +303,7 @@ $mobilePopupMargin: 30px !default;
   background-image: url("#{$flagsImagePath}#{$flagsImageName}.#{$flagsImageExtension}");
   background-repeat: no-repeat;
   // empty state
-  background-color: #DBDBDB;
+  background-color: #dbdbdb;
   background-position: $flagWidth 0;
 
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@@ -309,8 +311,6 @@ $mobilePopupMargin: 30px !default;
   }
 }
 
-
-
 // hack for Nepal which is the only flag that is not square/rectangle, so it has transparency, so you can see the default grey behind it
 .iti__flag.iti__np {
   background-color: transparent;

package/src/js/data.js

@@ -220,7 +220,7 @@ var allCountries = [
     "ca",
     "1",
     1,
-    ["204", "226", "236", "249", "250", "289", "306", "343", "365", "367", "368", "387", "403", "416", "418", "431", "437", "438", "450", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
+    ["204", "226", "236", "249", "250", "263", "289", "306", "343", "354", "365", "367", "368", "382", "387", "403", "416", "418", "428", "431", "437", "438", "450", "584", "468", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "683", "705", "709", "742", "753", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
   ],
   [
     "Cape Verde (Kabu Verdi)",