From b9b3c94c50608e41225340a94fed551513e4f562 Mon Sep 17 00:00:00 2001
From: WilliamSWoodruff <williamswoodruff@gmail.com>
Date: Thu, 25 Feb 2016 15:58:06 -0500
Subject: [PATCH 1/7] add noCountryCode option

---
 gold-phone-input.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/gold-phone-input.html b/gold-phone-input.html
index d3f7d85..aaea807 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -87,6 +87,10 @@
     left: 40px !important;
   }
 
+  .label-no-country-code {
+    left: 0 !important;
+  }
+
   input {
     @apply(--layout-flex);
   }
@@ -103,8 +107,9 @@
       <label hidden$="[[!label]]">[[label]]</label>
 
       <div class="container">
+        <template is="dom-if" if="{{!noCountryCode}}">
          <span class="country-code">+[[countryCode]]</span>
-
+        </template>
         <input is="iron-input" id="input"
           aria-labelledby$="[[_ariaLabelledBy]]"
           aria-describedby$="[[_ariaDescribedBy]]"
@@ -162,6 +167,14 @@
         value: '1'
       },
 
+      /*
+       * Set this to true to disable the country code
+       */
+      noCountryCode: {
+        type: Boolean,
+        value: false
+      },
+
       /*
        * The format of a valid phone number, including formatting but excluding
        * the country code. Use 'X' to denote the digits separated by dashes.
@@ -186,6 +199,19 @@
       // If there's an initial input, validate it.
       if (this.value)
         this._handleAutoValidate();
+      
+      if(this.noCountryCode) {
+        this.set('countryCode', '');
+      }
+    },
+
+    attached: function() {
+      
+      if(this.noCountryCode) {
+        this.set('countryCode', '');
+        Polymer.dom(this).node.querySelector('label').classList.add('label-no-country-code');
+      }
+      
     },
 
     _phoneNumberPatternChanged: function() {

From 93c0b6efbced2058b18c8a34dbec039c0d220939 Mon Sep 17 00:00:00 2001
From: WilliamSWoodruff <williamswoodruff@gmail.com>
Date: Thu, 25 Feb 2016 16:04:38 -0500
Subject: [PATCH 2/7] add parens formatting

---
 gold-phone-input.html | 92 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 74 insertions(+), 18 deletions(-)

diff --git a/gold-phone-input.html b/gold-phone-input.html
index aaea807..ae1d259 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -94,7 +94,7 @@
   input {
     @apply(--layout-flex);
   }
-
+  
   </style>
 
   <template>
@@ -108,7 +108,7 @@
 
       <div class="container">
         <template is="dom-if" if="{{!noCountryCode}}">
-         <span class="country-code">+[[countryCode]]</span>
+          <span class="country-code">+[[countryCode]]</span>
         </template>
         <input is="iron-input" id="input"
           aria-labelledby$="[[_ariaLabelledBy]]"
@@ -116,7 +116,7 @@
           required$="[[required]]"
           bind-value="{{value}}"
           name$="[[name]]"
-          allowed-pattern="[0-9\-]"
+          allowed-pattern="[()\s0-9\-]"
           autocomplete="tel"
           type="tel"
           prevent-invalid-input
@@ -200,9 +200,6 @@
       if (this.value)
         this._handleAutoValidate();
       
-      if(this.noCountryCode) {
-        this.set('countryCode', '');
-      }
     },
 
     attached: function() {
@@ -212,6 +209,8 @@
         Polymer.dom(this).node.querySelector('label').classList.add('label-no-country-code');
       }
       
+      this.set('maxlength', this.phoneNumberPattern.length);
+      
     },
 
     _phoneNumberPatternChanged: function() {
@@ -227,36 +226,84 @@
      * A handler that is called on input
      */
     _onValueChanged: function(value, oldValue) {
+
       // The initial property assignment is handled by `ready`.
-      if (oldValue == undefined || value === oldValue)
+      if (oldValue == undefined || value == undefined) {
         return;
-
-      //Ensure value is a string
+      }
+      
       value = value ? value.toString() : '';
-
+      
       // Keep track of how many dashes the original value has. After
       // reformatting the value, we might gain or lose some of them, which
       // means we have to correctly move the caret to account for the difference.
       var start = this.$.input.selectionStart;
+
       var initialDashesBeforeCaret = value.substr(0, start).split('-').length - 1;
+      var initialSpacesBeforeCaret = value.substr(0, start).split(' ').length - 1;
+      var initialLeftParenBeforeCaret = value.substr(0, start).split('(').length - 1;
+      var initialRightParenBeforeCaret = value.substr(0, start).split(')').length - 1;
+
+      var formattedValue = '';
 
       // Remove any already-applied formatting.
       value = value.replace(/-/g, '');
-      var shouldFormat = value.length <= this.phoneNumberPattern.replace(/-/g, '').length;
-      var formattedValue = '';
+      value = value.replace(/\(/g, '');
+      value = value.replace(/\)/g, '');
+      value = value.replace(/\s/g, '');
+
+      oldValue = oldValue.replace(/-/g, '');
+      oldValue = oldValue.replace(/\(/g, '');
+      oldValue = oldValue.replace(/\)/g, '');
+      oldValue = oldValue.replace(/\s/g, '');
+
+      if(value === oldValue) {
+        return;
+      }
 
       // Fill in the dashes according to the specified pattern.
+      var leftParenIndex = this.phoneNumberPattern.indexOf('(');
+      var leftParenAdded = false;
+
+      var rightParenIndex = this.phoneNumberPattern.indexOf(')') - 1;
+      var rightParenAdded = false;
+
+      var currentSpaceIndex = 0;
       var currentDashIndex = 0;
-      var totalDashesAdded = 0;
+
+      var totalCharactersAdded = 0;
+
       for (var i = 0; i < value.length; i++) {
+
         currentDashIndex = this.phoneNumberPattern.indexOf('-', currentDashIndex);
 
-        // Since we remove any formatting first, we need to account added dashes
+        currentSpaceIndex = this.phoneNumberPattern.indexOf(' ', currentSpaceIndex);
+
+        // Since we remove any formatting first, we need to account added dashes, etc.
         // when counting the position of new dashes in the pattern.
-        if (shouldFormat && i == (currentDashIndex - totalDashesAdded)) {
+
+        if (i == leftParenIndex) {
+          formattedValue += '(';
+          leftParenAdded = true;
+          totalCharactersAdded++;
+        }
+
+        if (i == rightParenIndex) {
+          formattedValue += ')';
+          rightParenAdded = true;
+          totalCharactersAdded++;
+        }
+
+        if (i == (currentSpaceIndex - totalCharactersAdded)) {
+          formattedValue += ' ';
+          currentSpaceIndex++;
+          totalCharactersAdded++;
+        }
+
+        if (i == (currentDashIndex - totalCharactersAdded)) {
           formattedValue += '-';
           currentDashIndex++;
-          totalDashesAdded++;
+          totalCharactersAdded++;
         }
 
         formattedValue += value[i];
@@ -265,13 +312,22 @@
       var updatedDashesBeforeCaret = formattedValue.substr(0, start).split('-').length - 1;
       var dashesDifference = updatedDashesBeforeCaret - initialDashesBeforeCaret;
 
+      var updatedSpacesBeforeCaret = formattedValue.substr(0, start+1).split(' ').length - 1;
+      var spacesDifference = updatedSpacesBeforeCaret - initialSpacesBeforeCaret;
+
+      var updatedLeftParenBeforeCaret = formattedValue.substr(0, start).split('(').length - 1;
+      var leftParenDifference = updatedLeftParenBeforeCaret - initialLeftParenBeforeCaret;
+
+      var updatedRightParenBeforeCaret = formattedValue.substr(0, start).split(')').length - 1;
+      var rightParenDifference = updatedRightParenBeforeCaret - initialRightParenBeforeCaret;
+
       // Note: this will call _onValueChanged again, which will move the
       // cursor to the end of the value. Correctly adjust the caret afterwards.
       this.updateValueAndPreserveCaret(formattedValue.trim());
 
       // Advance or back up the caret based on the change that happened before it.
-      this.$.input.selectionStart = this.$.input.selectionEnd = start + dashesDifference;
-      
+      this.$.input.selectionStart = this.$.input.selectionEnd = start + spacesDifference + dashesDifference + leftParenDifference + rightParenDifference;
+
       this._handleAutoValidate();
     },
 

From 954fd8f9f9068d4c53b754585f2214463689e1eb Mon Sep 17 00:00:00 2001
From: WilliamSWoodruff <williamswoodruff@gmail.com>
Date: Thu, 25 Feb 2016 16:32:40 -0500
Subject: [PATCH 3/7] fix validation

---
 gold-phone-input.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/gold-phone-input.html b/gold-phone-input.html
index ae1d259..2365c2f 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -217,9 +217,13 @@
       // Transform the pattern into a regex the iron-input understands.
       var regex = '';
       regex = this.phoneNumberPattern.replace(/\s/g, '\\s');
+      regex = regex.replace(/\(/gi, '\\(');
+      regex = regex.replace(/\)/gi, '\\)');
       regex = regex.replace(/X/gi, '\\d');
       regex = regex.replace(/\+/g, '\\+');
       this.$.input.pattern = regex;
+      
+      this.regex = regex;
     },
 
     /**

From db4eaac8d8d7c8560b828d944580e2031d8e2482 Mon Sep 17 00:00:00 2001
From: WilliamSWoodruff <williamswoodruff@gmail.com>
Date: Wed, 1 Jun 2016 11:55:25 -0400
Subject: [PATCH 4/7] add demo, fix tests, make default format (xxx) xxx-xxxx

---
 demo/index.html       | 19 ++++++++++++++-----
 gold-phone-input.html | 21 ++++++++++++++-------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 3fe3f45..f47ce11 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,13 +10,13 @@
 -->
 <html>
 <head>
-
+  
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-
+  
   <title>gold-phone-input demo</title>
-
+  
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../gold-phone-input.html">
   <link rel="import" href="../../paper-styles/demo-pages.html">
@@ -34,17 +34,26 @@ <h4>Standard</h4>
           auto-validate>
       </gold-phone-input>
     </div>
-
+    
     <h4>Pre-validated</h4>
     <div class="vertical-section">
       <gold-phone-input country-code="44" auto-validate required></gold-phone-input>
       <gold-phone-input label="Valid US number" value="415-111-1111" auto-validate></gold-phone-input>
       <gold-phone-input label="Invalid US number" value="415-111-111" auto-validate></gold-phone-input>
     </div>
-
+    
     <h4>Custom error message, auto-validates on blur</h4>
     <div class="vertical-section">
       <gold-phone-input auto-validate label="Cats only" error-message="needs more cats" required></gold-phone-input>
     </div>
+    
+    <h4>No country code</h4>
+    <div class="vertical-section">
+      <gold-phone-input 
+          no-country-code
+          label="No country code"
+          class="form-element">
+      </gold-phone-input>
+    </div>
   </div>
 </body>
diff --git a/gold-phone-input.html b/gold-phone-input.html
index 67d6c2c..81141d7 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -29,10 +29,10 @@
 ### Validation
 
 By default, the phone number is considered to be a US phone number, and
-will be validated according to the pattern `XXX-XXX-XXXX`, where `X` is a
-digit, and `-` is the separating dash. If you want to customize the input
+will be validated according to the pattern <span style="white-space: nowrap;">`(XXX) XXX-XXXX`</span>, where `X` is a
+digit, and `-` is the separating dash. Formatting also supports single spaces. If you want to customize the input
 for a different area code or number pattern, use the `country-code` and
-`phone-number-pattern` attributes
+`phone-number-pattern` attributes.
 
     <gold-phone-input
         country-code="33"
@@ -65,7 +65,7 @@
       :host {
         display: block;
       }
-
+      
       /* TODO: This should be a dropdown */
       span {
         @apply(--paper-font-subhead);
@@ -84,7 +84,7 @@
       .container {
         @apply(--layout-horizontal);
       }
-
+      
       /* TODO(notwaldorf): The style applied by paper-input-container is more
        * specific, and we need the important to override it. This will go away
        * once we can refactor this element to use the paper-input suffix */
@@ -176,7 +176,7 @@
        */
       phoneNumberPattern: {
         type: String,
-        value: 'XXX-XXX-XXXX',
+        value: '(XXX) XXX-XXXX',
         observer: '_phoneNumberPatternChanged'
       },
 
@@ -228,6 +228,7 @@
 
       // The initial property assignment is handled by `ready`.
       if (oldValue == undefined || value == undefined) {
+        this.value = '';
         return;
       }
       
@@ -259,7 +260,13 @@
       if(value === oldValue) {
         return;
       }
-
+      
+      if(value.length > 10) {
+        this.updateValueAndPreserveCaret(value.trim());
+        this._handleAutoValidate();
+        return;
+      }
+      
       // Fill in the dashes according to the specified pattern.
       var leftParenIndex = this.phoneNumberPattern.indexOf('(');
       var leftParenAdded = false;

From 062191979f015f4372d51cf8b90e4c78c3b5919d Mon Sep 17 00:00:00 2001
From: "William S. Woodruff" <williamswoodruff@gmail.com>
Date: Wed, 1 Jun 2016 19:20:33 -0400
Subject: [PATCH 5/7] add test for (xxx) xxx-xxxx format

---
 demo/index.html       | 12 ++++++------
 gold-phone-input.html | 30 +++++++++++++++---------------
 test/basic.html       | 15 +++++++++++++++
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index f47ce11..8a40740 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,13 +10,13 @@
 -->
 <html>
 <head>
-  
+
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-  
+
   <title>gold-phone-input demo</title>
-  
+
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../gold-phone-input.html">
   <link rel="import" href="../../paper-styles/demo-pages.html">
@@ -34,19 +34,19 @@ <h4>Standard</h4>
           auto-validate>
       </gold-phone-input>
     </div>
-    
+
     <h4>Pre-validated</h4>
     <div class="vertical-section">
       <gold-phone-input country-code="44" auto-validate required></gold-phone-input>
       <gold-phone-input label="Valid US number" value="415-111-1111" auto-validate></gold-phone-input>
       <gold-phone-input label="Invalid US number" value="415-111-111" auto-validate></gold-phone-input>
     </div>
-    
+
     <h4>Custom error message, auto-validates on blur</h4>
     <div class="vertical-section">
       <gold-phone-input auto-validate label="Cats only" error-message="needs more cats" required></gold-phone-input>
     </div>
-    
+
     <h4>No country code</h4>
     <div class="vertical-section">
       <gold-phone-input 
diff --git a/gold-phone-input.html b/gold-phone-input.html
index 81141d7..0383bfa 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -29,7 +29,7 @@
 ### Validation
 
 By default, the phone number is considered to be a US phone number, and
-will be validated according to the pattern <span style="white-space: nowrap;">`(XXX) XXX-XXXX`</span>, where `X` is a
+will be validated according to the pattern <span style="white-space: nowrap;">`XXX-XXX-XXXX`</span>, where `X` is a
 digit, and `-` is the separating dash. Formatting also supports single spaces. If you want to customize the input
 for a different area code or number pattern, use the `country-code` and
 `phone-number-pattern` attributes.
@@ -65,26 +65,26 @@
       :host {
         display: block;
       }
-      
+
       /* TODO: This should be a dropdown */
       span {
         @apply(--paper-font-subhead);
         @apply(--paper-input-container-input);
         width: 40px;
       }
-      
+
       .country-code {
         @apply(--gold-phone-input-country-code);
       }
-      
+
       .label-no-country-code {
         left: 0 !important;
       }
-      
+
       .container {
         @apply(--layout-horizontal);
       }
-      
+
       /* TODO(notwaldorf): The style applied by paper-input-container is more
        * specific, and we need the important to override it. This will go away
        * once we can refactor this element to use the paper-input suffix */
@@ -176,7 +176,7 @@
        */
       phoneNumberPattern: {
         type: String,
-        value: '(XXX) XXX-XXXX',
+        value: 'XXX-XXX-XXXX',
         observer: '_phoneNumberPatternChanged'
       },
 
@@ -198,14 +198,14 @@
     },
 
     attached: function() {
-      
+
       if(this.noCountryCode) {
         this.set('countryCode', '');
         Polymer.dom(this).node.querySelector('label').classList.add('label-no-country-code');
       }
-      
+
       this.set('maxlength', this.phoneNumberPattern.length);
-      
+
     },
 
     _phoneNumberPatternChanged: function() {
@@ -217,7 +217,7 @@
       regex = regex.replace(/X/gi, '\\d');
       regex = regex.replace(/\+/g, '\\+');
       this.$.input.pattern = regex;
-      
+
       this.regex = regex;
     },
 
@@ -231,9 +231,9 @@
         this.value = '';
         return;
       }
-      
+
       value = value ? value.toString() : '';
-      
+
       // Keep track of how many dashes the original value has. After
       // reformatting the value, we might gain or lose some of them, which
       // means we have to correctly move the caret to account for the difference.
@@ -260,13 +260,13 @@
       if(value === oldValue) {
         return;
       }
-      
+
       if(value.length > 10) {
         this.updateValueAndPreserveCaret(value.trim());
         this._handleAutoValidate();
         return;
       }
-      
+
       // Fill in the dashes according to the specified pattern.
       var leftParenIndex = this.phoneNumberPattern.indexOf('(');
       var leftParenAdded = false;
diff --git a/test/basic.html b/test/basic.html
index e9a9ead..e6baa0a 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -41,6 +41,14 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="parensFormat">
+    <template>
+      <gold-phone-input
+        phone-number-pattern="(XXX) XXX-XXXX"
+      ></gold-phone-input>
+    </template>
+  </test-fixture>
+
   <script>
 
     suite('basic', function() {
@@ -101,6 +109,13 @@
         assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden');
         assert.isTrue(container.invalid);
       });
+
+      test('input format respects parentheses and spaces', function() {
+        var input = fixture('parensFormat');
+        input.value ='1231112222';
+        assert.equal(input.value, '(123) 111-2222');
+      });
+
     });
 
     suite('a11y', function() {

From 8bd677ef46783846496d65036e9d6e2ff766beca Mon Sep 17 00:00:00 2001
From: "William S. Woodruff" <williamswoodruff@gmail.com>
Date: Wed, 1 Jun 2016 22:45:42 -0400
Subject: [PATCH 6/7] hide country code instead of template

---
 demo/index.html       | 3 ++-
 gold-phone-input.html | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 8a40740..d895830 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -47,10 +47,11 @@ <h4>Custom error message, auto-validates on blur</h4>
       <gold-phone-input auto-validate label="Cats only" error-message="needs more cats" required></gold-phone-input>
     </div>
 
-    <h4>No country code</h4>
+    <h4>No country code, parentheses US format</h4>
     <div class="vertical-section">
       <gold-phone-input 
           no-country-code
+          phone-number-pattern="(XXX) XXX-XXXX"
           label="No country code"
           class="form-element">
       </gold-phone-input>
diff --git a/gold-phone-input.html b/gold-phone-input.html
index 0383bfa..df88183 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -29,7 +29,7 @@
 ### Validation
 
 By default, the phone number is considered to be a US phone number, and
-will be validated according to the pattern <span style="white-space: nowrap;">`XXX-XXX-XXXX`</span>, where `X` is a
+will be validated according to the pattern `XXX-XXX-XXXX`, where `X` is a
 digit, and `-` is the separating dash. Formatting also supports single spaces. If you want to customize the input
 for a different area code or number pattern, use the `country-code` and
 `phone-number-pattern` attributes.
@@ -105,9 +105,9 @@
       <label hidden$="[[!label]]">[[label]]</label>
 
       <div class="container">
-        <template is="dom-if" if="{{!noCountryCode}}">
-          <span class="country-code">+[[countryCode]]</span>
-        </template>
+        
+        <span hidden="[[noCountryCode]]" class="country-code">+[[countryCode]]</span>
+        
         <input is="iron-input" id="input"
           aria-labelledby$="[[_ariaLabelledBy]]"
           aria-describedby$="[[_ariaDescribedBy]]"

From 4da6646b5422db514657cd286efe24c936352f9c Mon Sep 17 00:00:00 2001
From: WilliamSWoodruff <williamswoodruff@gmail.com>
Date: Thu, 2 Jun 2016 15:49:35 -0400
Subject: [PATCH 7/7] fix lint for hidden

---
 gold-phone-input.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gold-phone-input.html b/gold-phone-input.html
index df88183..df8c6f2 100644
--- a/gold-phone-input.html
+++ b/gold-phone-input.html
@@ -106,7 +106,7 @@
 
       <div class="container">
         
-        <span hidden="[[noCountryCode]]" class="country-code">+[[countryCode]]</span>
+        <span hidden$="[[noCountryCode]]" class="country-code">+[[countryCode]]</span>
         
         <input is="iron-input" id="input"
           aria-labelledby$="[[_ariaLabelledBy]]"