Feature: Add separateDialCode option

addon/components/phone-input.js

@@ -16,6 +16,7 @@ const PHONE_NUMBER_FORMAT = 'E164' // https://en.wikipedia.org/wiki/E.164
     number='123'
     onlyCountries=europeanCountries
     preferredCountries=englishSpeakingCountries
+    separateDialCode=true
     update=(action 'handleUpdate')}}
   ```
 
@@ -90,6 +91,14 @@ export default Component.extend({
     */
     this.preferredCountries = this.preferredCountries || ['us', 'gb']
 
+    /**
+      Display the country dial code next to the selected flag so it's not part of the typed number
+
+      @argument separateDialCode
+      @type {boolean}
+    */
+    this.separateDialCode = this.separateDialCode || false
+
     /**
       You have to implement this function to update the `number`.
 
@@ -129,7 +138,8 @@ export default Component.extend({
       autoPlaceholder,
       initialCountry,
       onlyCountries,
-      preferredCountries
+      preferredCountries,
+      separateDialCode
     } = this
 
     var input = document.getElementById(this.elementId)
@@ -139,7 +149,8 @@ export default Component.extend({
       autoPlaceholder,
       initialCountry,
       onlyCountries,
-      preferredCountries
+      preferredCountries,
+      separateDialCode
     })
 
     const number = this.number

tests/dummy/app/pods/docs/components/phone-input/all-options/component.js

@@ -1,10 +1,18 @@
 import Component from '@ember/component'
 
 export default Component.extend({
+  number: null,
+  separateDialNumber: null,
+
   actions: {
     handleUpdate(number, metaData) {
       this.set('number', number)
       this.setProperties(metaData)
+    },
+
+    updateSeparateDialOption(separateDialNumber, metaData) {
+      this.set('separateDialNumber', separateDialNumber)
+      this.setProperties(metaData)
     }
   }
 })

tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs

@@ -1,3 +1,4 @@
+<h2>Basic Options</h2>
 {{#docs-demo as |demo|}}
   {{#demo.example name="phone-input-all-options.hbs"}}
 
@@ -17,3 +18,16 @@
 
   {{demo.snippet "phone-input-all-options.hbs"}}
 {{/docs-demo}}
+
+<h2>`separateDialCode` option</h2>
+{{#docs-demo as |demo|}}
+  {{#demo.example name="phone-input-separate-dial-option.hbs"}}
+
+    <p>{{phone-input separateDialCode=true initialCountry="us" number=separateDialNumber update=(action "updateSeparateDialOption")}}</p>
+
+    <p>The internal phone number you'll want to persist on your backend is <em>\{{separateDialNumber}}: </em><strong>{{separateDialNumber}}</strong>.</p>
+
+  {{/demo.example}}
+
+  {{demo.snippet "phone-input-separate-dial-option.hbs"}}
+{{/docs-demo}}

tests/integration/components/phone-input-test.js

@@ -39,6 +39,31 @@ module('Integration | Component | phone-input', function(hooks) {
     assert.dom('input').hasValue(newValue)
   })
 
+  test('renders the value with separate dial code option', async function(assert) {
+    assert.expect(3)
+
+    await this.owner.lookup('service:phone-input').load()
+
+    const newValue = '2'
+    this.set('separateDialNumber', null)
+    this.set('update', () => {})
+
+    await render(
+      hbs`{{phone-input separateDialCode=true number=separateDialNumber update=(action update)}}`
+    )
+
+    assert.dom('input').hasValue('')
+
+    this.set('update', value => {
+      this.set('separateDialNumber', newValue)
+      assert.equal(value, '+12')
+    })
+
+    await fillIn('input', newValue)
+
+    assert.dom('input').hasValue(newValue)
+  })
+
   test('can update the country', async function(assert) {
     assert.expect(2)