From a03c21c082185a1587aa93a9088c5f4de78c6557 Mon Sep 17 00:00:00 2001
From: GeoloeG-IsT <pascal.gula@gmail.com>
Date: Sun, 24 Sep 2017 22:30:56 +0200
Subject: [PATCH] migration to 2.0

---
 .gitignore               |   4 +-
 .travis.yml              |  19 ++--
 bower.json               |  56 +++++++---
 gold-password-input.html | 227 +++++++++++++++++++++++++++++++++------
 4 files changed, 245 insertions(+), 61 deletions(-)

diff --git a/.gitignore b/.gitignore
index 66595f4..2be39e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-bower_components/
-tmp-*
+bower_components*
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
index 8137a3c..1052e28 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,21 +1,24 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
 env:
   global:
-    - secure: TcDqx+YdNCa/DRQjdKt9dgYCPgXtPl2EZ7Nnv6bRvbcmUjW2eSr7Zwb+e0fO8wgwms/RqFaVx+u5jo7D1lnC4Ybcg1HKiMOvCyzY36MjF9oB/VKSEUC+p4tMVQfw1IZ/RmK3dD+WEWaoT/EKmNfctz7v5kR+yk2lZo44D9I7rrc=
-    - secure: nh65tvhnhOrK05qKvDJKMV7Jm9yiCoG1wFkP3ZnqOHix9Ny+KmcTa41Bl6NXQdvYaMTFtzS7lMZX5cqIziyKyGWHVN30LzGMHJNz12fhcMi3nJ84trhQGcu/9qR9yDv16q9ouGlcz1VxnDOHaRAHnIKjLIbhN3aJtMtZBbnWihA=
+    - secure: >-
+        TcDqx+YdNCa/DRQjdKt9dgYCPgXtPl2EZ7Nnv6bRvbcmUjW2eSr7Zwb+e0fO8wgwms/RqFaVx+u5jo7D1lnC4Ybcg1HKiMOvCyzY36MjF9oB/VKSEUC+p4tMVQfw1IZ/RmK3dD+WEWaoT/EKmNfctz7v5kR+yk2lZo44D9I7rrc=
+    - secure: >-
+        nh65tvhnhOrK05qKvDJKMV7Jm9yiCoG1wFkP3ZnqOHix9Ny+KmcTa41Bl6NXQdvYaMTFtzS7lMZX5cqIziyKyGWHVN30LzGMHJNz12fhcMi3nJ84trhQGcu/9qR9yDv16q9ouGlcz1VxnDOHaRAHnIKjLIbhN3aJtMtZBbnWihA=
 node_js: stable
 addons:
-  firefox: '46.0'
+  firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
 script:
-  - xvfb-run wct
+  - xvfb-run polymer test
 dist: trusty
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 8773610..29aedfc 100644
--- a/bower.json
+++ b/bower.json
@@ -1,10 +1,10 @@
 {
   "name": "gold-password-input",
-  "version": "1.1.6",
+  "version": "2.0.0",
+  "description": "[Polymer 2.x] Input element with Material Design that allows password with an optional strength meter.",
   "authors": [
     "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>"
   ],
-  "description": "[Polymer 1.x] Input element with Material Design that allows password with an optional strength meter.",
   "keywords": [
     "web-component",
     "web-components",
@@ -34,22 +34,44 @@
     "/test/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0",
-    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
-    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
-    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
-    "paper-input": "PolymerElements/paper-input#^1.0.0",
-    "paper-tooltip": "PolymerElements/paper-tooltip#^1.1.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "toggle-icon": "toggle-icon#^1.0.3",
-    "zxcvbn": "zxcvbn#^4.2.0"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^2.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^2.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.0",
+    "paper-tooltip": "PolymerElements/paper-tooltip#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "toggle-icon": "RoXus/toggle-icon#master",
+    "zxcvbn": "zxcvbn#^4.4.0"
   },
   "devDependencies": {
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "web-component-tester": "^4.0.0"
+    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "variants": {
+    "dependencies": {
+      "polymer": "Polymer/polymer#^1.2.0",
+      "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
+      "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+      "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+      "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
+      "paper-input": "PolymerElements/paper-input#^1.0.0",
+      "paper-tooltip": "PolymerElements/paper-tooltip#^1.1.0",
+      "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+      "toggle-icon": "toggle-icon#^1.0.3",
+      "zxcvbn": "zxcvbn#^4.2.0"
+    },
+    "devDependencies": {
+      "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+      "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+      "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+      "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+      "web-component-tester": "^4.0.0"
+    }
   }
 }
diff --git a/gold-password-input.html b/gold-password-input.html
index 55859be..046cf2f 100644
--- a/gold-password-input.html
+++ b/gold-password-input.html
@@ -2,6 +2,7 @@
 
 <link rel="import" href="../iron-input/iron-input.html">
 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 
 <link rel="import" href="../paper-input/paper-input-behavior.html">
 <link rel="import" href="../paper-input/paper-input-container.html">
@@ -26,7 +27,7 @@
     <gold-password-input strength-meter></gold-password-input>
 
 ***Note**: You need to add the dependency to the `polymer.json` configuration file like follow:
-    
+
     "includeDependencies": [ "bower_components/zxcvbn/dist/zxcvbn.js" ]
 
 It may include an optional label, which by default is "Password".
@@ -89,6 +90,47 @@
         display: block;
       }
 
+      /* TODO: This should be a dropdown */
+      span {
+        @apply --paper-font-subhead;
+        @apply --paper-input-container-input;
+      }
+
+      input {
+        @apply --layout-flex;
+      }
+      input
+      {
+        position: relative; /* to make a stacking context */
+        outline: none;
+        box-shadow: none;
+        padding: 0;
+        width: 100%;
+        max-width: 100%;
+        background: transparent;
+        border: none;
+        color: var(--paper-input-container-input-color, var(--primary-text-color));
+        -webkit-appearance: none;
+        text-align: inherit;
+        vertical-align: bottom;
+        /* Firefox sets a min-width on the input, which can cause layout issues */
+        min-width: 0;
+        @apply --paper-font-subhead;
+        @apply --paper-input-container-input;
+      }
+      input::-webkit-input-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+      input:-moz-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+      input::-moz-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+      input:-ms-input-placeholder {
+        color: var(--paper-input-container-color, var(--secondary-text-color));
+      }
+
       toggle-icon {
         color: gray;
         --paper-icon-button: {
@@ -102,50 +144,44 @@
     <paper-input-container
       id="container"
       disabled$="[[disabled]]"
-      invalid="[[invalid]]"
       no-label-float="[[noLabelFloat]]"
       always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
+      invalid="[[invalid]]"
       auto-validate$="[[autoValidate]]">
 
-      <label hidden$="[[!label]]">[[label]]</label>
+      <label slot="label" hidden$="[[!label]]">[[label]]</label>
 
-      <input is="iron-input"
-        id="input"
-        bind-value="{{value}}"
-        disabled$="[[disabled]]"
-        invalid="{{invalid}}"
-        validator="[[validator]]"
-        type="password"
-        required$="[[required]]"
-        autocomplete$="[[autocomplete]]"
-        autofocus$="[[autofocus]]"
-        inputmode$="[[inputmode]]"
-        minlength$="[[minlength]]"
-        maxlength$="[[maxlength]]"
-        name$="[[name]]"
-        placeholder$="[[placeholder]]"
-        readonly$="[[readonly]]"
-        size$="[[size]]"
-        autocapitalize$="[[autocapitalize]]"
-        autocorrect$="[[autocorrect]]"
-        aria-labelledby$="[[_ariaLabelledBy]]"
-        aria-describedby$="[[_ariaDescribedBy]]">
+      <span id="template-placeholder"></span>
 
-      <toggle-icon
-        suffix$=[[suffix]] prefix$=[[prefix]] noink
-        id="reveal"
-        icon="gold-password-input:visibility"
-        icon-checked="gold-password-input:visibility-off"
-        hidden$="[[!reveal]]" checked="{{_checked}}"
-        animation="flip-horizontal">
-      </toggle-icon>
+      <template is="dom-if" if="[[prefix]]">
+        <toggle-icon
+          slot="prefix" noink
+          id="reveal"
+          icon="gold-password-input:visibility"
+          icon-checked="gold-password-input:visibility-off"
+          hidden$="[[!reveal]]" checked="{{_checked}}"
+          animation="flip-horizontal">
+        </toggle-icon>
+      </template>
+      <template is="dom-if" if="[[suffix]]">
+        <toggle-icon
+          slot="suffix" noink
+          id="reveal"
+          icon="gold-password-input:visibility"
+          icon-checked="gold-password-input:visibility-off"
+          hidden$="[[!reveal]]" checked="{{_checked}}"
+          animation="flip-horizontal">
+        </toggle-icon>
+      </template>
 
       <template is="dom-if" if="[[errorMessage]]">
-        <paper-input-error id="error">[[errorMessage]]</paper-input-error>
+        <paper-input-error slot="add-on" id="error">[[errorMessage]]</paper-input-error>
       </template>
 
+      <!-- TODO PG: check if we need a slot here too! -->
       <template is="dom-if" if="[[strengthMeter]]">
         <gold-password-input-strength-meter
+          slot="add-on"
           id="strength"
           strength-meter-labels="[[strengthMeterLabels]]">
         </gold-password-input-strength-meter>
@@ -153,6 +189,55 @@
 
     </paper-input-container>
   </template>
+
+  <template id="v0">
+      <input is="iron-input" id="input" slot="input"
+        aria-labelledby$="[[_ariaLabelledBy]]"
+        aria-describedby$="[[_ariaDescribedBy]]"
+        required$="[[required]]"
+        bind-value="{{value}}"
+        name$="[[name]]"
+        autocomplete$="[[autocomplete]]"
+        type="password"
+        disabled$="[[disabled]]"
+        invalid="{{invalid}}"
+        autofocus$="[[autofocus]]"
+        inputmode$="[[inputmode]]"
+        placeholder$="[[placeholder]]"
+        validator="[[validator]]"
+        readonly$="[[readonly]]"
+        minlength$="[[minlength]]"
+        maxlength$="[[maxlength]]"
+        size$="[[size]]"
+        autocapitalize$="[[autocapitalize]]"
+        autocorrect$="[[autocorrect]]">
+  </template>
+
+  <template id="v1">
+      <iron-input id="input" slot="input"
+        bind-value$="{{value}}"
+        validator="[[validator]]"
+        invalid$="{{invalid}}">
+        <input id="nativeInput"
+          aria-labelledby$="[[_ariaLabelledBy]]"
+          aria-describedby$="[[_ariaDescribedBy]]"
+          required$="[[required]]"
+          name$="[[name]]"
+          autocomplete$="[[autocomplete]]"
+          type="password"
+          disabled$="[[disabled]]"
+          autofocus$="[[autofocus]]"
+          inputmode$="[[inputmode]]"
+          placeholder$="[[placeholder]]"
+          readonly$="[[readonly]]"
+          minlength$="[[minlength]]"
+          maxlength$="[[maxlength]]"
+          size$="[[size]]"
+          autocapitalize$="[[autocapitalize]]"
+          autocorrect$="[[autocorrect]]">
+      </iron-input>
+  </template>
+
   <script>
     Polymer({
       is: 'gold-password-input',
@@ -163,6 +248,19 @@
       ],
 
       properties: {
+        /**
+        * The label for this input.
+        */
+        label: {
+          type: String,
+          value: 'Password'
+        },
+
+        value: {
+          type: String,
+          observer: '_onValueChanged'
+        },
+
         /**
          * Set to true to show a strength meter.
          */
@@ -206,6 +304,31 @@
         }
       },
 
+      beforeRegister: function() {
+        var template = Polymer.DomModule.import('gold-password-input', 'template');
+        var version = Polymer.Element ? 'v1' : 'v0';
+        var inputTemplate = Polymer.DomModule.import('gold-password-input', 'template#' + version);
+        var inputPlaceholder = template.content.querySelector('#template-placeholder');
+        if (inputPlaceholder) {
+          inputPlaceholder.parentNode.replaceChild(inputTemplate.content, inputPlaceholder);
+        }
+      },
+
+      /**
+      * Returns a reference to the focusable element. Overridden from PaperInputBehavior
+      * to correctly focus the native input.
+      */
+      get _focusableElement() {
+        return Polymer.Element ? this.inputElement._inputElement : this.inputElement;
+      },
+
+      // Note: This event is only available in the 2.0 version of this element.
+      // In 1.0, the functionality of `_onIronInputReady` is done in
+      // PaperInputBehavior::attached.
+      listeners: {
+        'iron-input-ready': '_onIronInputReady'
+      },
+
       ready: function() {
         if (!this.label) {
           this.label = "Password";
@@ -216,19 +339,55 @@
         if (this.suffix && this.prefix) {
           this.prefix = false;
         }
+        if (this.value && !Polymer.Element) {
+          this._handleAutoValidate();
+        }
+      },
+
+      _onIronInputReady: function() {
+        // Only validate when attached if the input already has a value.
+        if (!!this.inputElement.bindValue) {
+          this._handleAutoValidate();
+        // Assign an empty string value if no value so if it becomes time
+        // to validate it is not undefined.
+        } else {
+          this.value = '';
+        }
       },
+
       attached: function() {
         // this prevent tabbing issue since paperInputBehavior is forcing focus on input element...
         this.$.reveal.$.checked.tabIndex = -1;
         this.$.reveal.$.unchecked.tabIndex = -1;
       },
+
       _checkedChanged: function(checked) {
         if (checked) {
           this.$.input.type = "text";
+          this.$.nativeInput.type = "text";
         } else {
           this.$.input.type = "password";
+          this.$.nativeInput.type = "password";
         }
-      }
+      },
+
+      /**
+      * A handler that is called on input
+      */
+      _onValueChanged: function(value, oldValue) {
+        // The initial property assignment is handled by `ready`.
+        if (oldValue == undefined || value === oldValue)
+          return;
+
+        //Ensure value is a string
+        value = value ? value.toString() : '';
+
+        // Note: this will call _onValueChanged again, which will move the
+        // cursor to the end of the value. Correctly adjust the caret afterwards.
+        this.updateValueAndPreserveCaret(value.trim());
+
+        this._handleAutoValidate();
+      },
     });
   </script>
 </dom-module>