Index: third_party/polymer/v0_8/components/paper-input/paper-input.html |
diff --git a/third_party/polymer/v0_8/components/paper-input/paper-input.html b/third_party/polymer/v0_8/components/paper-input/paper-input.html |
index c6ebb25a57bdc4a37ba89a529e130be8476a4777..234db956270934e6ff194255af18a654c433a4c4 100644 |
--- a/third_party/polymer/v0_8/components/paper-input/paper-input.html |
+++ b/third_party/polymer/v0_8/components/paper-input/paper-input.html |
@@ -9,32 +9,94 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
--> |
<link rel="import" href="../polymer/polymer.html"> |
<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="paper-input-behavior.html"> |
<link rel="import" href="paper-input-container.html"> |
<link rel="import" href="paper-input-error.html"> |
<link rel="import" href="paper-input-char-counter.html"> |
<!-- |
-`<paper-input>` is a text field. |
+`<paper-input>` is a single-line text field with Material Design styling. |
+ |
+ <paper-input label="Input label"></paper-input> |
+ |
+It may include an optional error message or character counter. |
+ |
+ <paper-input error-message="Invalid input!" label="Input label"></paper-input> |
+ <paper-input char-counter label="Input label"></paper-input> |
+ |
+See `Polymer.PaperInputBehavior` for more API docs. |
+ |
+### Styling |
+ |
+See `Polymer.PaperInputContainer` for a list of custom properties used to |
+style this element. |
+ |
+@group Paper Elements |
+@element paper-input |
+@hero hero.svg |
+@demo demo/index.html |
--> |
<dom-module id="paper-input"> |
- <template> |
+ <style> |
- <paper-input-container no-label-float$="[[noLabelFloat]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]"> |
+ :host { |
+ display: block; |
+ } |
- <template is="x-if" if="[[label]]"> |
- <label>[[parent.label]]</label> |
- </template> |
+ input::-webkit-input-placeholder { |
+ color: var(--paper-input-container-color, --secondary-text-color); |
+ } |
+ |
+ input:-moz-placeholder { |
+ color: var(--paper-input-container-color, --secondary-text-color); |
+ } |
+ |
+ input::-moz-placeholder { |
+ color: var(--paper-input-container-color, --secondary-text-color); |
+ } |
- <input is="iron-input" id="input" bind-value="{{value}}" prevent-invalid-input="[[preventInvalidInput]]" type$="[[type]]" pattern$="[[pattern]]" maxlength$="[[maxlength]]" required$="[[required]]" disabled$="[[disabled]]"> |
+ input:-ms-input-placeholder { |
+ color: var(--paper-input-container-color, --secondary-text-color); |
+ } |
+ |
+ </style> |
+ |
+ <template> |
- <template is="x-if" if="[[errorMessage]]"> |
- <paper-input-error>[[parent.errorMessage]]</paper-input-error> |
+ <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> |
+ |
+ <label hidden$="[[!label]]">[[label]]</label> |
+ |
+ <input is="iron-input" id="input" |
+ aria-labelledby$="[[_ariaLabelledBy]]" |
+ aria-describedby$="[[_ariaDescribedBy]]" |
+ disabled$="[[disabled]]" |
+ bind-value="{{value}}" |
+ invalid="{{invalid}}" |
+ prevent-invalid-input="[[preventInvalidInput]]" |
+ allowedPattern="[[allowedPattern]]" |
+ validator="[[validator]]" |
+ type$="[[type]]" |
+ pattern$="[[pattern]]" |
+ maxlength$="[[maxlength]]" |
+ required$="[[required]]" |
+ autocomplete$="[[autocomplete]]" |
+ autofocus$="[[autofocus]]" |
+ inputmode$="[[inputmode]]" |
+ minlength$="[[minlength]]" |
+ name$="[[name]]" |
+ placeholder$="[[placeholder]]" |
+ readonly$="[[readonly]]" |
+ size$="[[size]]"> |
+ |
+ <template is="dom-if" if="[[errorMessage]]"> |
+ <paper-input-error>[[errorMessage]]</paper-input-error> |
</template> |
- <template is="x-if" if="[[charCounter]]"> |
+ <template is="dom-if" if="[[charCounter]]"> |
<paper-input-char-counter></paper-input-char-counter> |
</template> |
@@ -53,7 +115,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
is: 'paper-input', |
behaviors: [ |
- Polymer.PaperInputBehavior |
+ Polymer.PaperInputBehavior, |
+ Polymer.IronFormElementBehavior |
] |
}) |