ember-intl-tel-input

An Ember.js addon for entering and validating international telephone numbers.

Please check out the demo page to see the addon in action.

For more information on using ember-cli, visit http://www.ember-cli.com/.

Installation

$ ember install ember-intl-tel-input

Basic Usage

Just place the {{intl-tel-input}} component in the handlebars template, as you would have guessed.

{{intl-tel-input}}

The component derives from Ember.TextField, anything you can do with the input helper can also be done with this component.

{{intl-tel-input value="555-5555"}}

With Utilities Script

With the utilities script included, the autoFormat and autoPlaceholder options are automatically enabled.

If your ember version is <= 1.12, use Brocfile:

// Brocfile.js (if ember <= 1.12)

var app = new EmberAddon({

  intlTelInput: {
    includeUtilsScript: true, // default to false
  },

});

Otherwise, use ember-cli-build.js

// ember-cli-build.js

var app = new EmberApp(defaults, {
  // Add options here
  intlTelInput: {
    includeUtilsScript: true,
  }
});

{{intl-tel-input}}

Properties Binding

Use the following properties for binding:

• value for input value
• selectedCountryData for data of the currently selected country
• number for formatted phone number
• extension for the extension part of the number
• numberType for the type of the current number
• isValidNumber for the validity of the number
• validationError for information about a validation error

{{intl-tel-input
  allowExtensions=true
  value=value
  selectedCountryData=selectedCountryData
  number=number
  extension=extension
  numberType=numberType
  isValidNumber=isValidNumber
  validationError=validationError}}

Lookup User's Country

intl-tel-input provides a convenient way to look up the user's country based on their IP addresses. This example uses Telize for demonstration.

// controller

geoIpLookupFunc: function(callback) {
  $.getJSON('//www.telize.com/geoip')
   .always(function(resp) {
     if (!resp || !resp.country_code) {
       callback('');
     }

     callback(resp.country_code);
   });
}

{{intl-tel-input
  defaultCountry="auto"
  geoIpLookup=geoIpLookupFunc}}

Running The Demo Page Locally

Run ember server, and visit the demo page at http://localhost:4200.

Credits

This is a wrapper library. It simply wraps the API of the original jQuery plugin created by Jack O'Connor into an Ember.js component.

The original jQuery plugin also depends on several other open-source libraries:

• Flag images from region-flags
• Original country data from mledoze's World countries in JSON, CSV and XML
• Formatting/validation/example number code from Google's libphonenumber
• Lookup user's country using ipinfo.io

This addon's demo page uses Telize for a fast, SSL-supported, yet FREE Geo IP service.

The layout and color theme of the demo page comes from Twitter's Bootstrap and Ember.js, respectively.