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}diff --git a/third_party/polymer/v1_0/bower.json b/third_party/polymer/v1_0/bower.json
index 4374166..833c7b0 100644
--- a/third_party/polymer/v1_0/bower.json
+++ b/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",
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/bower.json b/third_party/polymer/v1_0/components-chromium/paper-input/bower.json
index 7659a4c..5a0c4be 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/bower.json
+++ b/third_party/polymer/v1_0/components-chromium/paper-input/bower.json
@@ -1,6 +1,6 @@
{
"name": "paper-input",
- "version": "2.1.0",
+ "version": "2.2.2",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior-extracted.js
index 9a019a70..ced2ce92 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-addon-behavior-extracted.js
+++ b/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.
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-behavior-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-behavior-extracted.js
index 888733b..4c7a353 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-behavior-extracted.js
+++ b/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;
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js
index 7df3569..02cde687 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js
+++ b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js
@@ -123,6 +123,12 @@
},
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 @@
}
},
+ /** @private */
_onAddonAttached: function(event) {
if (!this._addons) {
this._addons = [];
@@ -158,37 +165,41 @@
}
},
+ /** @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 @@
});
},
+ /** @private */
_handleValueAndAutoValidate: function(inputElement) {
if (this.autoValidate && inputElement) {
var valid;
@@ -222,10 +234,12 @@
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 @@
}
},
+ /** @private */
_computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
var cls = 'input-content';
if (!noLabelFloat) {
@@ -281,6 +296,7 @@
return cls;
},
+ /** @private */
_computeUnderlineClass: function(focused, invalid) {
var cls = 'underline';
if (invalid) {
@@ -291,6 +307,7 @@
return cls;
},
+ /** @private */
_computeAddOnContentClass: function(focused, invalid) {
var cls = 'add-on-content';
if (invalid) {
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html
index 64df2cb..5571494 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html
@@ -102,6 +102,7 @@
`--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 @@
`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 @@
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 @@
}
.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 @@
}
.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) {
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js
index 754820f..bd4bd0980 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js
+++ b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js
@@ -26,6 +26,8 @@
/**
* 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;
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input.html b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input.html
index f9e21d5..50fa063 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input.html
@@ -87,25 +87,25 @@
}
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 @@
@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));
}
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-textarea-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-input/paper-textarea-extracted.js
index 3cd823d5..787ec08 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-textarea-extracted.js
+++ b/third_party/polymer/v1_0/components-chromium/paper-input/paper-textarea-extracted.js
@@ -43,6 +43,9 @@
},
},
+ /**
+ * @return {number}
+ */
get selectionStart() {
return this.$.input.textarea.selectionStart;
},
@@ -50,6 +53,9 @@
this.$.input.textarea.selectionStart = start;
},
+ /**
+ * @return {number}
+ */
get selectionEnd() {
return this.$.input.textarea.selectionEnd;
},
diff --git a/third_party/polymer/v1_0/components_summary.txt b/third_party/polymer/v1_0/components_summary.txt
index b1f4935..681ecc7 100644
--- a/third_party/polymer/v1_0/components_summary.txt
+++ b/third_party/polymer/v1_0/components_summary.txt
@@ -216,9 +216,9 @@
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
