| OLD | NEW | 
 | (Empty) | 
|   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.g
    ithub.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/CONTRI
    BUTORS.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/PATEN
    TS.txt |  | 
|   9 --> |  | 
|  10  |  | 
|  11 <link rel="import" href="../polymer/polymer.html"> |  | 
|  12 <link rel="import" href="../paper-styles/paper-styles.html"> |  | 
|  13 <link rel="import" href="paper-input-addon-behavior.html"> |  | 
|  14  |  | 
|  15 <!-- |  | 
|  16 `<paper-input-error>` is an error message for use with `<paper-input-container>`
    . The error is |  | 
|  17 displayed when the `<paper-input-container>` is `invalid`. |  | 
|  18  |  | 
|  19     <paper-input-container> |  | 
|  20       <input is="iron-input" pattern="[0-9]*"> |  | 
|  21       <paper-input-error>Only numbers are allowed!</paper-input-error> |  | 
|  22     </paper-input-container> |  | 
|  23  |  | 
|  24 ### Styling |  | 
|  25  |  | 
|  26 The following custom properties and mixins are available for styling: |  | 
|  27  |  | 
|  28 Custom property | Description | Default |  | 
|  29 ----------------|-------------|---------- |  | 
|  30 `--paper-input-container-invalid-color` | The foreground color of the error | `-
    -google-red-500` |  | 
|  31 `--paper-input-error`                   | Mixin applied to the error        | `{
    }` |  | 
|  32 --> |  | 
|  33 <dom-module id="paper-input-error"> |  | 
|  34  |  | 
|  35   <style> |  | 
|  36  |  | 
|  37     :host { |  | 
|  38       display: inline-block; |  | 
|  39       visibility: hidden; |  | 
|  40       float: left; |  | 
|  41  |  | 
|  42       color: var(--paper-input-container-invalid-color, --google-red-500); |  | 
|  43  |  | 
|  44       @apply(--paper-font-caption); |  | 
|  45       @apply(--paper-input-error); |  | 
|  46     } |  | 
|  47  |  | 
|  48     :host([invalid]) { |  | 
|  49       visibility: visible; |  | 
|  50     }; |  | 
|  51  |  | 
|  52   </style> |  | 
|  53  |  | 
|  54   <template> |  | 
|  55  |  | 
|  56     <content></content> |  | 
|  57  |  | 
|  58   </template> |  | 
|  59  |  | 
|  60 </dom-module> |  | 
|  61  |  | 
|  62 <script> |  | 
|  63  |  | 
|  64 (function() { |  | 
|  65  |  | 
|  66   Polymer({ |  | 
|  67  |  | 
|  68     is: 'paper-input-error', |  | 
|  69  |  | 
|  70     behaviors: [ |  | 
|  71       Polymer.PaperInputAddonBehavior |  | 
|  72     ], |  | 
|  73  |  | 
|  74     properties: { |  | 
|  75  |  | 
|  76       /** |  | 
|  77        * True if the error is showing. |  | 
|  78        */ |  | 
|  79       invalid: { |  | 
|  80         readOnly: true, |  | 
|  81         reflectToAttribute: true, |  | 
|  82         type: Boolean |  | 
|  83       } |  | 
|  84  |  | 
|  85     }, |  | 
|  86  |  | 
|  87     update: function(state) { |  | 
|  88       this._setInvalid(state.invalid); |  | 
|  89     } |  | 
|  90  |  | 
|  91   }) |  | 
|  92  |  | 
|  93 })(); |  | 
|  94  |  | 
|  95 </script> |  | 
| OLD | NEW |