1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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
18displayed 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
27The following custom properties and mixins are available for styling:
28
29Custom 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