diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer/components/paper-input/paper-input-error.html')
-rw-r--r-- | chromium/third_party/catapult/third_party/polymer/components/paper-input/paper-input-error.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer/components/paper-input/paper-input-error.html b/chromium/third_party/catapult/third_party/polymer/components/paper-input/paper-input-error.html new file mode 100644 index 00000000000..645f1e722b0 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer/components/paper-input/paper-input-error.html @@ -0,0 +1,94 @@ +<!-- +@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="../paper-styles/default-theme.html"> +<link rel="import" href="../paper-styles/typography.html"> +<link rel="import" href="paper-input-addon-behavior.html"> + +<!-- +`<paper-input-error>` is an error message for use with `<paper-input-container>`. The error is +displayed when the `<paper-input-container>` is `invalid`. + + <paper-input-container> + <input is="iron-input" pattern="[0-9]*"> + <paper-input-error>Only numbers are allowed!</paper-input-error> + </paper-input-container> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-input-container-invalid-color` | The foreground color of the error | `--error-color` +`--paper-input-error` | Mixin applied to the error | `{}` +--> + +<dom-module id="paper-input-error"> + <template> + <style> + :host { + display: inline-block; + visibility: hidden; + + color: var(--paper-input-container-invalid-color, --error-color); + + @apply(--paper-font-caption); + @apply(--paper-input-error); + position: absolute; + left:0; + right:0; + } + + :host([invalid]) { + visibility: visible; + }; + </style> + + <content></content> + </template> +</dom-module> + +<script> + Polymer({ + is: 'paper-input-error', + + behaviors: [ + Polymer.PaperInputAddonBehavior + ], + + properties: { + /** + * True if the error is showing. + */ + invalid: { + readOnly: true, + reflectToAttribute: true, + type: Boolean + } + }, + + /** + * This overrides the update function in PaperInputAddonBehavior. + * @param {{ + * inputElement: (Element|undefined), + * value: (string|undefined), + * invalid: boolean + * }} state - + * inputElement: The input element. + * value: The input value. + * invalid: True if the input value is invalid. + */ + update: function(state) { + this._setInvalid(state.invalid); + } + }); +</script> |