1 <!-- 2 @license 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 Code distributed by Google as part of the polymer project is also 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 --> 10 11 <link rel="import" href="../polymer/polymer.html"> 12 <link rel="import" href="../paper-styles/default-theme.html"> 13 <link rel="import" href="../paper-styles/typography.html"> 14 <link rel="import" href="paper-input-addon-behavior.html"> 15 16 <!-- 17 `<paper-input-error>` is an error message for use with `<paper-input-container>`. The error is 18 displayed when the `<paper-input-container>` is `invalid`. 19 20 <paper-input-container> 21 <input is="iron-input" pattern="[0-9]*"> 22 <paper-input-error>Only numbers are allowed!</paper-input-error> 23 </paper-input-container> 24 25 ### Styling 26 27 The following custom properties and mixins are available for styling: 28 29 Custom property | Description | Default 30 ----------------|-------------|---------- 31 `--paper-input-container-invalid-color` | The foreground color of the error | `--error-color` 32 `--paper-input-error` | Mixin applied to the error | `{}` 33 --> 34 35 <dom-module id="paper-input-error"> 36 <template> 37 <style> 38 :host { 39 display: inline-block; 40 visibility: hidden; 41 42 color: var(--paper-input-container-invalid-color, --error-color); 43 44 @apply(--paper-font-caption); 45 @apply(--paper-input-error); 46 position: absolute; 47 left:0; 48 right:0; 49 } 50 51 :host([invalid]) { 52 visibility: visible; 53 }; 54 </style> 55 56 <content></content> 57 </template> 58 </dom-module> 59 60 <script> 61 Polymer({ 62 is: 'paper-input-error', 63 64 behaviors: [ 65 Polymer.PaperInputAddonBehavior 66 ], 67 68 properties: { 69 /** 70 * True if the error is showing. 71 */ 72 invalid: { 73 readOnly: true, 74 reflectToAttribute: true, 75 type: Boolean 76 } 77 }, 78 79 /** 80 * This overrides the update function in PaperInputAddonBehavior. 81 * @param {{ 82 * inputElement: (Element|undefined), 83 * value: (string|undefined), 84 * invalid: boolean 85 * }} state - 86 * inputElement: The input element. 87 * value: The input value. 88 * invalid: True if the input value is invalid. 89 */ 90 update: function(state) { 91 this._setInvalid(state.invalid); 92 } 93 }); 94 </script> 95
