| <!-- |
| @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> |