ember-intl-phone-input demo

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
});

templates.application.hbs

<h1>International phone input examples</h1>
<br>


<br>
	No value no country, just display default one
	{{intl-phone-input}}
<br>
<br>


<br>
	If value specified, but not country, it would be guessed
	{{intl-phone-input value="+44 1632 960339"}}
<br>
<br>


<br>
	Add country param for default placeholder
	{{intl-phone-input country="US"}}
<br>
<br>

<br>
	Event handlers
	{{intl-phone-input 
  	  valueChanged=(action (mut phone))
      keyUpInput=(action (mut phoneKeyUp))
      parseOnInit=(action (mut phoneOnInit))

			value="+441632960339"
  }}
<br>
<br>


<div class="demo-log">
  {{demo-block title="On Init"  phone=phoneOnInit}}
  {{demo-block title="On Change" phone=phone}}
  {{demo-block title="On Key Up" phone=phoneKeyUp}}
</div>


{{! 
	Ember twiddle needs it
	https://github.com/cibernox/ember-power-select/issues/154
}}
<div id="ember-basic-dropdown-wormhole"></div>

templates.components.demo-block.hbs

<h5>{{title}}</h5>
<p>E.164 Number: {{phone.number}}</p>
<p>Country iso: {{phone.country}}</p>
<p>Country calling code: {{phone.callingCode}}</p>
<p>Country name: {{phone.name}}</p>
<p>Local phone: {{phone.phone}}</p>
<p>Number probably valid: {{phone.probablyValidNumber}}</p>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0",
    "ember-intl-phone-input" : "0.3.3"
  }
}