Socket
Socket
Sign inDemoInstall

ember-intl-tel-input2

Package Overview
Dependencies
9
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-intl-tel-input2

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


Version published
Maintainers
1
Weekly downloads
65
increased by30%

Weekly downloads

Readme

Source

ember-intl-tel-input2

Build Status npm version Dependency Status devDependency Status

An Ember.js addon for entering and validating international telephone numbers. This project is a fork of justin-lau/ember-intl-tel-input that is outdated.

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-input2

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 autoPlaceholder option is automatically enabled.

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    ...
    'ember-intl-tel-input': {
      includeUtilsScript: true, // default to false
    },
    ...
  });
  ...
};

Or if you want to specify your own compatible utils script (like a custom build).

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    ...
    'ember-intl-tel-input': {
      utilsScript: 'path/to/utilsScript.js',
    },
    ...
  });
  ...
};

If you use both options the default utilsScript will be exported to the path specified.

{{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 ipinfo.io for demonstration.

// controller
...
geoIpLookupFunc: function(callback) {
  $.getJSON('http://ipinfo.io/')
   .always(function(resp) {
     if (!resp || !resp.country_code) {
       callback('');
     }

     callback(resp.country_code);
   });
}
...
{{intl-tel-input
  initialCountry="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.

Telize no longer provide free services due to heavy abuse. The demo has switched over to ipinfo.io.

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

Keywords

FAQs

Last updated on 19 Dec 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc