From 98993d57f148954d3ce897b5c72608e80c4c94f7 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <thijs.louisse@ing.nl>
Date: Wed, 7 Sep 2016 11:49:05 +0200
Subject: [PATCH] support for multiple error messages (which are defined in
 validators)

restored main entry in bower json

added resolutions

added property errors for polylint

deleted unused hidden attribute

made errors array in paper input private
---
 bower.json                        |  10 ++-
 demo/index.html                   |   3 +
 demo/validators/no-catfishes.html |  37 +++++++++++
 demo/validators/no-cats.html      |  37 +++++++++++
 paper-input-behavior.html         |  10 +++
 paper-input.html                  |  49 +++++++++++++-
 test/index.html                   |   2 +
 test/paper-input_validations.html | 104 ++++++++++++++++++++++++++++++
 test/validators/cats-only.html    |  37 +++++++++++
 test/validators/letters-only.html |  37 +++++++++++
 10 files changed, 322 insertions(+), 4 deletions(-)
 create mode 100644 demo/validators/no-catfishes.html
 create mode 100644 demo/validators/no-cats.html
 create mode 100644 test/paper-input_validations.html
 create mode 100644 test/validators/cats-only.html
 create mode 100644 test/validators/letters-only.html

diff --git a/bower.json b/bower.json
index d7804157..0176b780 100644
--- a/bower.json
+++ b/bower.json
@@ -32,7 +32,7 @@
     "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
     "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
-    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "iron-input": "https://github.com/tlouisse/iron-input.git#feature/multipleValidators",
     "paper-styles": "PolymerElements/paper-styles#^1.1.4",
     "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
   },
@@ -42,10 +42,16 @@
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "iron-icon": "PolymerElements/iron-icon#^1.0.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "iron-validatable-behavior": "https://github.com/tlouisse/iron-validatable-behavior.git",
+    "iron-validator-behavior": "https://github.com/tlouisse/iron-validator-behavior.git",
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "resolutions": {
+    "iron-validatable-behavior": "feature/multipleValidators",
+    "iron-validator-behavior": "feature/multipleValidators",
+    "iron-input": "feature/multipleValidators"
   }
 }
diff --git a/demo/index.html b/demo/index.html
index f84799de..9cfdea5d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -30,6 +30,8 @@
   <link rel="import" href="../paper-input.html">
   <link rel="import" href="../paper-textarea.html">
   <link rel="import" href="ssn-input.html">
+  <link rel="import" href="validators/no-cats.html">
+  <link rel="import" href="validators/no-catfishes.html">
 
   <style is="custom-style" include="demo-pages-shared-styles">
     paper-input {
@@ -110,6 +112,7 @@ <h3>Inputs can validate automatically or on demand, and can have custom error me
         <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
         <paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
         <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+        <paper-input label="this input has multiple validators (no-cats + no-catfishes)" validator="no-cats no-catfishes" auto-validate></paper-input>
         <button onclick="validate()">Validate!</button>
       </template>
     </demo-snippet>
diff --git a/demo/validators/no-catfishes.html b/demo/validators/no-catfishes.html
new file mode 100644
index 00000000..5cb91b04
--- /dev/null
+++ b/demo/validators/no-catfishes.html
@@ -0,0 +1,37 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+    Polymer({
+
+        is: 'no-catfishes',
+
+        properties: {
+            message: {
+                type: String,
+                value: 'No cat(fish(es)) allowed'
+            }
+        },
+
+        behaviors: [
+            Polymer.IronValidatorBehavior
+        ],
+
+        validate: function (value) {
+            return !value.match(/cat(fish|fishes)?$/);
+        }
+
+    });
+
+</script>
diff --git a/demo/validators/no-cats.html b/demo/validators/no-cats.html
new file mode 100644
index 00000000..ff9b4ed6
--- /dev/null
+++ b/demo/validators/no-cats.html
@@ -0,0 +1,37 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+    Polymer({
+
+        is: 'no-cats',
+
+        properties: {
+            message: {
+                type: String,
+                value: 'No cat(s) allowed'
+            }
+        },
+
+        behaviors: [
+            Polymer.IronValidatorBehavior
+        ],
+
+        validate: function (value) {
+            return !value.match(/cats?$/);
+        }
+
+    });
+
+</script>
diff --git a/paper-input-behavior.html b/paper-input-behavior.html
index 18bad12f..47a32f1c 100644
--- a/paper-input-behavior.html
+++ b/paper-input-behavior.html
@@ -351,6 +351,16 @@
         type: String
       },
 
+      /**
+       * The id used to connect the validator instance implementing IronValidatableBehavior(having a 'for' property)
+       * to the validatable. This is useful for validator instances containing custom messages.
+       * If you're using PaperInputBehavior to implement your own paper-input-like
+       * element, bind this to the `<input is="iron-input">`'s `validatable-id` property.
+       */
+      validatableId: {
+          type: String
+      },
+
       /**
        * If you're using PaperInputBehavior to implement your own paper-input-like
        * element, bind this to the`<input is="iron-input">`'s `multiple` property,
diff --git a/paper-input.html b/paper-input.html
index 2b795a01..92ae4b0e 100644
--- a/paper-input.html
+++ b/paper-input.html
@@ -142,7 +142,9 @@
         autosave$="[[autosave]]"
         results$="[[results]]"
         accept$="[[accept]]"
-        multiple$="[[multiple]]">
+        multiple$="[[multiple]]"
+        errors="{{_errors}}"
+        validatable-id="[[validatableId]]">
 
       <content select="[suffix]"></content>
 
@@ -150,11 +152,20 @@
         <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error>
       </template>
 
+      <template is="dom-if" if="[[_showErrors(_errors.splices)]]">
+        <paper-input-error aria-live="assertive">
+          <template is="dom-repeat" items="[[_errors]]" filter="_showHighestPrio">
+            <div>[[item.message]]</div>
+          </template>
+        </paper-input-error>
+      </template>
+
       <template is="dom-if" if="[[charCounter]]">
         <paper-input-char-counter></paper-input-char-counter>
       </template>
 
     </paper-input-container>
+
   </template>
 </dom-module>
 
@@ -165,6 +176,40 @@
     behaviors: [
       Polymer.IronFormElementBehavior,
       Polymer.PaperInputBehavior
-    ]
+    ],
+
+    properties: {
+      /*
+       * Errors that are exposed by validatable element.
+       * The error with the highest priority in this list will be shown when validatable is in error state, and no error-message is supplied.
+       * @private
+       */
+      _errors: {
+        type: Array,
+        value: function () {
+          return [];
+        }
+      }
+    },
+
+    /**
+     * Makes sure only error messages with the highest priority are shown.
+     * @param {Object} item The error object to be filtered out.
+     * @return {boolean} whether the item should be shown based on priority
+     */
+    _showHighestPrio: function (item) {
+      return item.priority < 1;
+    },
+
+    /**
+     * Determines whether error with highest priority from errors array needs to be shown.
+     * This error will be visible when property error-message is not supplied and the errors array is not empty.
+     * @param {Array} errors array
+     * @return {boolean} whether error with highest priority from errors array will be shown.
+     */
+    _showErrors: function(_errors) {
+      return !this.errorMessage && _errors;
+    }
+
   });
 </script>
diff --git a/test/index.html b/test/index.html
index 48aa82fd..a4ac95fd 100644
--- a/test/index.html
+++ b/test/index.html
@@ -16,11 +16,13 @@
   <script>
     WCT.loadSuites([
       'paper-input.html',
+      'paper-input_validations.html',
       'paper-textarea.html',
       'paper-input-container.html',
       'paper-input-error.html',
       'paper-input-char-counter.html',
       'paper-input.html?dom=shadow',
+      'paper-input_validations.html?dom=shadow',
       'paper-textarea.html?dom=shadow',
       'paper-input-container.html?dom=shadow',
       'paper-input-error.html?dom=shadow',
diff --git a/test/paper-input_validations.html b/test/paper-input_validations.html
new file mode 100644
index 00000000..1a28fcaa
--- /dev/null
+++ b/test/paper-input_validations.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+    <title>paper-input tests</title>
+
+    <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">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../iron-test-helpers/test-helpers.js"></script>
+    <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+    <link rel="import" href="../paper-input.html">
+    <link rel="import" href="validators/letters-only.html">
+    <link rel="import" href="validators/cats-only.html">
+
+</head>
+<body>
+
+<test-fixture id="validatable">
+    <template>
+        <paper-input validator="cats-only"></paper-input>
+    </template>
+</test-fixture>
+
+<test-fixture id="error-message">
+    <template>
+        <paper-input pattern="[a-zA-Z]*" error-message="override error"></paper-input>
+    </template>
+</test-fixture>
+
+<test-fixture id="multiple-errors">
+    <template>
+        <paper-input validator="cats-only letters-only"></paper-input>
+    </template>
+</test-fixture>
+
+<script>
+
+    suite('validatable id', function () {
+
+        test('validatable id is passed to input field', function () {
+            var node = fixture('validatable');
+            Polymer.dom(node).flush(function () {
+                assert.equal(node.$.input.validatableId, node.validatableId);
+            });
+        });
+
+    });
+
+    suite('error messages', function () {
+
+        test('show error message defined in external validator', function (done) {
+            var input = fixture('validatable');
+            input.value = 'foobar';
+            input.validate();
+            flush(function () {
+                var error = Polymer.dom(input.root).querySelector('paper-input-error').textContent;
+                assert.include(error, 'No cats');
+                done();
+            });
+        });
+
+        test('always show error message defined via error-message attribute', function (done) {
+            var input = fixture('error-message');
+            input.value = '123';
+            input.validate();
+            flush(function () {
+                var error = Polymer.dom(input.root).querySelector('paper-input-error').textContent;
+                assert.equal(error.trim(), 'override error', 'letters only!');
+                done();
+            });
+        });
+
+        test('show error message with top priority', function (done) {
+            var input = fixture('multiple-errors');
+            input.value = '123';
+            input.validate();
+            flush(function () {
+                var error = Polymer.dom(input.root).querySelector('paper-input-error').textContent;
+                assert.include(error, 'No cats');
+                done();
+            });
+        });
+
+    });
+
+</script>
+
+</body>
+</html>
diff --git a/test/validators/cats-only.html b/test/validators/cats-only.html
new file mode 100644
index 00000000..f7491c60
--- /dev/null
+++ b/test/validators/cats-only.html
@@ -0,0 +1,37 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">
+
+    <script>
+
+    Polymer({
+
+        is: 'cats-only',
+
+        behaviors: [
+            Polymer.IronValidatorBehavior
+        ],
+
+        properties: {
+            message: {
+                type: String,
+                value: 'No cats'
+            }
+        },
+
+        validate: function (value) {
+            return value === 'cats';
+        }
+
+    });
+
+</script>
diff --git a/test/validators/letters-only.html b/test/validators/letters-only.html
new file mode 100644
index 00000000..3d3b3990
--- /dev/null
+++ b/test/validators/letters-only.html
@@ -0,0 +1,37 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">
+
+    <script>
+
+    Polymer({
+
+        is: 'letters-only',
+
+        behaviors: [
+            Polymer.IronValidatorBehavior
+        ],
+
+        properties: {
+            message: {
+                type: String,
+                value: 'Only letters, please'
+            }
+        },
+
+        validate: function (value) {
+            return !value || value.match(/^[a-zA-Z]*$/) !== null;
+        }
+
+    });
+
+</script>