third_party/polymer/v1_0/components/paper-input/paper-input-error.html

   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/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>