<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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>