WebCompDev / COMPONENTS

  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://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 http://polymer.github.io/PATENTS.txt
  -->
  
  <link rel="import" href="../polymer/polymer.html">

  <link rel="import" href="../paper-styles/color.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 | `--google-red-500`
  `--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, --google-red-500);

          @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
        }

      },
  
      update: function(state) {
        this._setInvalid(state.invalid);
      }

    });

  </script>