WebUI: Update Polymer paper-input version 2.1.0 -> 2.2.2

This is in preparation of updating iron-input to its latest version

Bug: 812926
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I6cbcb4869fadac14956ac5c9e9a9d3d7289dda46
Reviewed-on: https://chromium-review.googlesource.com/1026639
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#553624}

third_party/polymer/v1_0/bower.json

@@ -38,7 +38,7 @@
     "paper-checkbox": "PolymerElements/paper-checkbox#2.0.2",
     "paper-fab": "PolymerElements/paper-fab#2.0.0",
     "paper-icon-button": "PolymerElements/paper-icon-button#2.1.0",
-    "paper-input": "PolymerElements/paper-input#2.1.0",
+    "paper-input": "PolymerElements/paper-input#2.2.2",
     "paper-item": "PolymerElements/paper-item#2.0.0",
     "paper-listbox": "PolymerelEments/paper-listbox#2.0.0",
     "paper-progress": "PolymerElements/paper-progress#2.0.1",

third_party/polymer/v1_0/components-chromium/paper-input/bower.json

 {
   "name": "paper-input",
-  "version": "2.1.0",
+  "version": "2.2.2",
   "description": "Material design text fields",
   "authors": [
     "The Polymer Authors"

third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior-extracted.js

@@ -14,9 +14,9 @@
     /**
      * The function called by `<paper-input-container>` when the input value or validity changes.
      * @param {{
+     *   invalid: boolean,
      *   inputElement: (Element|undefined),
-     *   value: (string|undefined),
-     *   invalid: boolean
+     *   value: (string|undefined)
      * }} state -
      *     inputElement: The input element.
      *     value: The input value.

third_party/polymer/v1_0/components-chromium/paper-input/paper-input-behavior-extracted.js

@@ -338,16 +338,19 @@
         type: Boolean
       },
 
+      /** @private */
       _ariaDescribedBy: {
         type: String,
         value: ''
       },
 
+      /** @private */
       _ariaLabelledBy: {
         type: String,
         value: ''
       },
 
+      /** @private */
       _inputId: {
         type: String,
         value: ''
@@ -358,16 +361,21 @@
       'addon-attached': '_onAddonAttached',
     },
 
+    /**
+     * @type {!Object}
+     */
     keyBindings: {
       'shift+tab:keydown': '_onShiftTabDown'
     },
 
+    /** @private */
     hostAttributes: {
       tabindex: 0
     },
 
     /**
      * Returns a reference to the input element.
+     * @return {!HTMLElement}
      */
     get inputElement() {
       // Chrome generates audit errors if an <input type="password"> has a
@@ -385,6 +393,7 @@
 
     /**
      * Returns a reference to the focusable element.
+     * @return {!HTMLElement}
      */
     get _focusableElement() {
       return this.inputElement;

third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js

@@ -123,6 +123,12 @@ Polymer({
     },
 
     ready: function() {
+      // Paper-input treats a value of undefined differently at startup than
+      // the rest of the time (specifically: it does not validate it at startup, but
+      // it does after that. We need to track whether the first time we encounter
+      // the value is basically this first time, so that we can validate it
+      // correctly the rest of the time. See https://github.com/PolymerElements/paper-input/issues/605
+      this.__isFirstValueUpdate = true;
       if (!this._addons) {
         this._addons = [];
       }
@@ -145,6 +151,7 @@ Polymer({
       }
     },
 
+    /** @private */
     _onAddonAttached: function(event) {
       if (!this._addons) {
         this._addons = [];
@@ -158,37 +165,41 @@ Polymer({
       }
     },
 
+    /** @private */
     _onFocus: function() {
       this._setFocused(true);
     },
 
+    /** @private */
     _onBlur: function() {
       this._setFocused(false);
       this._handleValueAndAutoValidate(this._inputElement);
     },
 
+    /** @private */
     _onInput: function(event) {
       this._handleValueAndAutoValidate(event.target);
     },
 
+    /** @private */
     _onValueChanged: function(event) {
       var input = event.target;
 
-      // Problem: if the input is required but has no text entered, we should
-      // only validate it on blur (so that an empty form doesn't come up red
-      // immediately; however, in this handler, we don't know whether this is
-      // the booting up value or a value in the future. I am assuming that the
-      // case  we care about manifests itself when the value is undefined.
-      // If this causes future problems, we need to do something like track whether
-      // the iron-input-ready event has fired, and this handler came before that.
-
-      if (input.value === undefined) {
-        return;
+      // Paper-input treats a value of undefined differently at startup than
+      // the rest of the time (specifically: it does not validate it at startup, but
+      // it does after that. If this is in fact the bootup case, ignore validation,
+      // just this once.
+      if (this.__isFirstValueUpdate) {
+        this.__isFirstValueUpdate = false;
+        if (input.value === undefined) {
+          return;
+        }
       }
 
       this._handleValueAndAutoValidate(event.target);
     },
 
+    /** @private */
     _handleValue: function(inputElement) {
       var value = this._inputElementValue;
 
@@ -206,6 +217,7 @@ Polymer({
       });
     },
 
+    /** @private */
     _handleValueAndAutoValidate: function(inputElement) {
       if (this.autoValidate && inputElement) {
         var valid;
@@ -222,10 +234,12 @@ Polymer({
       this._handleValue(inputElement);
     },
 
+    /** @private */
     _onIronInputValidate: function(event) {
       this.invalid = this._inputElement.invalid;
     },
 
+    /** @private */
     _invalidChanged: function() {
       if (this._addons) {
         this.updateAddons({invalid: this.invalid});
@@ -242,6 +256,7 @@ Polymer({
       }
     },
 
+    /** @private */
     _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
       var cls = 'input-content';
       if (!noLabelFloat) {
@@ -281,6 +296,7 @@ Polymer({
       return cls;
     },
 
+    /** @private */
     _computeUnderlineClass: function(focused, invalid) {
       var cls = 'underline';
       if (invalid) {
@@ -291,6 +307,7 @@ Polymer({
       return cls;
     },
 
+    /** @private */
     _computeAddOnContentClass: function(focused, invalid) {
       var cls = 'add-on-content';
       if (invalid) {

third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html

@@ -102,6 +102,7 @@ Custom property | Description | Default
 `--paper-input-container-input-invalid` | Mixin applied to the input when invalid | `{}`
 `--paper-input-container-input-webkit-spinner` | Mixin applied to the webkit spinner | `{}`
 `--paper-input-container-input-webkit-clear` | Mixin applied to the webkit clear button | `{}`
+`--paper-input-container-input-webkit-calendar-picker-indicator` | Mixin applied to the webkit calendar picker indicator | `{}`
 `--paper-input-container-ms-clear` | Mixin applied to the Internet Explorer clear button | `{}`
 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
@@ -113,30 +114,36 @@ This element is `display:block` by default, but you can set the `inline` attribu
 `display:inline-block`.
 -->
 
-</head><body><dom-module id="paper-input-container">
+</head><body><custom-style>
+  <style is="custom-style">
+    html {
+      --paper-input-container-shared-input-style: {
+        position: relative; /* to make a stacking context */
+        outline: none;
+        box-shadow: none;
+        padding: 0;
+        margin: 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;
+
+        @apply --paper-font-subhead;
+      };
+    }
+  </style>
+</custom-style>
+
+<dom-module id="paper-input-container">
   <template>
     <style>
       :host {
         display: block;
         padding: 8px 0;
-
-        --paper-input-container-shared-input-style: {
-          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;
-
-          @apply --paper-font-subhead;
-        };
-
         @apply --paper-input-container;
       }
 
@@ -271,15 +278,15 @@ This element is `display:block` by default, but you can set the `inline` attribu
         visibility: hidden;
       }
 
-      .input-content ::slotted(iron-input) {
-        @apply --paper-input-container-shared-input-style;
-      }
-
       .input-content ::slotted(input),
+      .input-content ::slotted(iron-input),
       .input-content ::slotted(textarea),
       .input-content ::slotted(iron-autogrow-textarea),
       .input-content ::slotted(.paper-input-input) {
         @apply --paper-input-container-shared-input-style;
+        /* The apply shim doesn't apply the nested color custom property,
+          so we have to re-apply it here. */
+        color: var(--paper-input-container-input-color, var(--primary-text-color));
         @apply --paper-input-container-input;
       }
 
@@ -289,6 +296,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
       }
 
       .input-content.focused ::slotted(input),
+      .input-content.focused ::slotted(iron-input),
       .input-content.focused ::slotted(textarea),
       .input-content.focused ::slotted(iron-autogrow-textarea),
       .input-content.focused ::slotted(.paper-input-input) {
@@ -296,6 +304,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
       }
 
       .input-content.is-invalid ::slotted(input),
+      .input-content.is-invalid ::slotted(iron-input),
       .input-content.is-invalid ::slotted(textarea),
       .input-content.is-invalid ::slotted(iron-autogrow-textarea),
       .input-content.is-invalid ::slotted(.paper-input-input) {

third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js

@@ -26,6 +26,8 @@ Polymer({
     /**
      * Returns a reference to the focusable element. Overridden from PaperInputBehavior
      * to correctly focus the native input.
+     *
+     * @return {!HTMLElement}
      */
     get _focusableElement() {
       return Polymer.Element ? this.inputElement._inputElement : this.inputElement;

third_party/polymer/v1_0/components-chromium/paper-input/paper-input.html

@@ -87,25 +87,25 @@ Custom property | Description | Default
       }
 
       input {
-        position: relative; /* to make a stacking context */
-        outline: none;
-        box-shadow: none;
-        margin: 0;
-        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;
+      /* In 1.x, the <input> is distributed to paper-input-container, which styles it.
+      In 2.x the <iron-input> is distributed to paper-input-container, which styles
+      it, but in order for this to work correctly, we need to reset some
+      of the native input's properties to inherit (from the iron-input) */
+      iron-input > input {
+        @apply --paper-input-container-shared-input-style;
+        font-family: inherit;
+        font-weight: inherit;
+        font-size: inherit;
+        letter-spacing: inherit;
+        word-spacing: inherit;
+        line-height: inherit;
+        text-shadow: inherit;
+        color: inherit;
+        cursor: inherit;
       }
 
       input:disabled {
@@ -121,6 +121,10 @@ Custom property | Description | Default
         @apply --paper-input-container-input-webkit-clear;
       }
 
+      input::-webkit-calendar-picker-indicator {
+        @apply --paper-input-container-input-webkit-calendar-picker-indicator;
+      }
+
       input::-webkit-input-placeholder {
         color: var(--paper-input-container-color, var(--secondary-text-color));
       }

third_party/polymer/v1_0/components-chromium/paper-input/paper-textarea-extracted.js

@@ -43,6 +43,9 @@ Polymer({
       },
     },
 
+    /**
+     * @return {number}
+     */
     get selectionStart() {
       return this.$.input.textarea.selectionStart;
     },
@@ -50,6 +53,9 @@ Polymer({
       this.$.input.textarea.selectionStart = start;
     },
 
+    /**
+     * @return {number}
+     */
     get selectionEnd() {
       return this.$.input.textarea.selectionEnd;
     },

third_party/polymer/v1_0/components_summary.txt

@@ -216,9 +216,9 @@ Tree link: https://github.com/PolymerElements/paper-icon-button/tree/v2.1.0
 
 Name: paper-input
 Repository: https://github.com/PolymerElements/paper-input.git
-Tree: v2.1.0
-Revision: 6a45a9d7495078e56b04a944635f70c1c67f3c23
-Tree link: https://github.com/PolymerElements/paper-input/tree/v2.1.0
+Tree: v2.2.2
+Revision: a89e8f491d01c77e167a4361d0535683591e0a01
+Tree link: https://github.com/PolymerElements/paper-input/tree/v2.2.2
 
 Name: paper-item
 Repository: https://github.com/PolymerElements/paper-item.git