Use intl-tel-input 7.0.* PLUS read only field option added

README.md

@@ -84,6 +84,11 @@ with countries only:
 <input type="text" international-phone-number only-countries ng-model="phone">
 ```
 
+read only field:
+```html
+<input type="text" international-phone-number ng-model="phone" readonly="true">
+```
+
 Feel free to mix options together:
 ```html
 <input type="text" international-phone-number only-countries="pl, de, en, es" default-country="pl" preferred-countries="pl, de" ng-model="phone">

bower.json

@@ -1,11 +1,12 @@
 {
   "name": "international-phone-number",
+  "version": "1.0.0",
   "main": "releases/international-phone-number.js",
   "description": "AngularJS directive for intl-tel-input jQuery plugin",
   "author": "Marek Pietrucha (http://enginearch.com)",
   "license": "MIT",
   "dependencies": {
     "angular": ">1.3.0",
-    "intl-tel-input": "~5.1.0"
+    "intl-tel-input": "~7.0.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "international-phone-number",
-  "version": "0.0.11",
+  "version": "1.0.0",
   "description": "AngularJS directive for intl-tel-input jQuery plugin",
   "keywords": [
     "international",

releases/international-phone-number.js

@@ -6,7 +6,7 @@
     autoHideDialCode: true,
     autoPlaceholder: true,
     customPlaceholder: null,
-    defaultCountry: "",
+    initialCountry: "",
     geoIpLookup: null,
     nationalMode: true,
     numberType: "MOBILE",
@@ -21,10 +21,11 @@
         require: '^ngModel',
         scope: {
           ngModel: '=',
-          country: '='
+          country: '=',
+          geoIpLookup: '&'
         },
         link: function(scope, element, attrs, ctrl) {
-          var handleWhatsSupposedToBeAnArray, options, read, watchOnce;
+          var checkReadOnly, handleWhatsSupposedToBeAnArray, options, read, watchOnce;
           if (ctrl) {
             if (element.val() !== '') {
               $timeout(function() {
@@ -43,6 +44,25 @@
               return value.toString().replace(/[ ]/g, '').split(',');
             }
           };
+          checkReadOnly = function() {
+            var divIntlTelInput, readOnly, readOnlyClass, readOnlySpan;
+            readOnly = attrs.readonly;
+            if (readOnly) {
+              readOnlyClass = 'intl-tel-input-read-only';
+              divIntlTelInput = element.parents('.intl-tel-input:first');
+              divIntlTelInput.find('select:first').attr('disabled', true);
+              divIntlTelInput.find('.iti-arrow').hide();
+              readOnlySpan = divIntlTelInput.find('span.' + readOnlyClass);
+              if (readOnlySpan.length === 0 && element.val() !== '') {
+                readOnlySpan = angular.element('<span></span>');
+                readOnlySpan.attr('class', readOnlyClass);
+                readOnlySpan.attr('style', 'padding-left: 38px');
+                element.hide();
+                element.after(readOnlySpan);
+              }
+              readOnlySpan.text(element.val());
+            }
+          };
           options = angular.copy(ipnConfig);
           angular.forEach(options, function(value, key) {
             var option;
@@ -60,6 +80,7 @@
               return options[key] = option;
             }
           });
+          options['geoIpLookup'] = scope.geoIpLookup ? scope.geoIpLookup() : null;
           watchOnce = scope.$watch('ngModel', function(newValue) {
             return scope.$$postDigest(function() {
               if (newValue !== null && newValue !== void 0 && newValue.length > 0) {
@@ -77,14 +98,15 @@
           });
           scope.$watch('country', function(newValue) {
             if (newValue !== null && newValue !== void 0 && newValue !== '') {
-              return element.intlTelInput("selectCountry", newValue);
+              return element.intlTelInput("setCountry", newValue);
             }
           });
           ctrl.$formatters.push(function(value) {
             if (!value) {
               return value;
             }
             element.intlTelInput('setNumber', value);
+            checkReadOnly();
             return element.val();
           });
           ctrl.$parsers.push(function(value) {

src/international-phone-number.coffee

@@ -10,7 +10,7 @@ angular.module("internationalPhoneNumber", [])
     autoHideDialCode:       true
     autoPlaceholder:        true
     customPlaceholder:      null
-    defaultCountry:         ""
+    initialCountry:         ""
     geoIpLookup:            null
     nationalMode:           true
     numberType:             "MOBILE"
@@ -27,6 +27,7 @@ angular.module("internationalPhoneNumber", [])
   scope:
     ngModel: '='
     country: '='
+    geoIpLookup: '&'
 
   link: (scope, element, attrs, ctrl) ->
 
@@ -47,6 +48,23 @@ angular.module("internationalPhoneNumber", [])
       else
         value.toString().replace(/[ ]/g, '').split(',')
 
+    checkReadOnly = () ->
+      readOnly = attrs.readonly
+      if readOnly
+        readOnlyClass = 'intl-tel-input-read-only'
+        divIntlTelInput = element.parents('.intl-tel-input:first')
+        divIntlTelInput.find('select:first').attr('disabled', true)
+        divIntlTelInput.find('.iti-arrow').hide()
+        readOnlySpan = divIntlTelInput.find('span.' + readOnlyClass)
+        if readOnlySpan.length == 0 and element.val() != ''
+          readOnlySpan = angular.element('<span></span>')
+          readOnlySpan.attr('class', readOnlyClass)
+          readOnlySpan.attr('style', 'padding-left: 38px')
+          element.hide()
+          element.after(readOnlySpan)
+        readOnlySpan.text(element.val())
+      return
+
     options = angular.copy(ipnConfig)
 
     angular.forEach options, (value, key) ->
@@ -60,7 +78,7 @@ angular.module("internationalPhoneNumber", [])
         options[key] = (option == "true")
       else
         options[key] = option
-
+    options['geoIpLookup'] = if scope.geoIpLookup then scope.geoIpLookup() else null
     # Wait for ngModel to be set
     watchOnce = scope.$watch('ngModel', (newValue) ->
       # Wait to see if other scope variables were set at the same time
@@ -84,14 +102,15 @@ angular.module("internationalPhoneNumber", [])
 
     scope.$watch('country', (newValue) ->
         if newValue != null && newValue != undefined && newValue != ''
-            element.intlTelInput("selectCountry", newValue)
+            element.intlTelInput("setCountry", newValue)
     )
 
     ctrl.$formatters.push (value) ->
       if !value
         return value
 
       element.intlTelInput 'setNumber', value
+      checkReadOnly()
       element.val()
 
     ctrl.$parsers.push (value) ->