gold-password-input-warning.html

<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/paper-input-addon-behavior.html">

<!--
`<gold-password-input-warning>` is a warning add-on to use with `<paper-input-container>`. The warning is
displayed when a warning message needs to be displayed.

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--gold-password-input-warning-color` | The foreground color of the error | `--paper-amber-a700`
`--gold-password-input-warning`                   | Mixin applied to the error        | `{}`
-->

<dom-module id="gold-password-input-warning">
  <template>
    <style>
      :host {
        display: inline-block;
        visibility: hidden;

        color: var(--gold-password-input-warning-color, var(--paper-amber-a700));

        @apply --paper-font-caption;
        @apply --gold-password-input-warning;
        position: absolute;
        left:0;
        right:0;
      }

      :host([warning]) {
        visibility: visible;
      };
    </style>

    <slot></slot>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'gold-password-input-warning',

    behaviors: [
      Polymer.PaperInputAddonBehavior
    ],

    properties: {
      /**
       * True if the error is showing.
       */
      warning: {
        reflectToAttribute: true,
        notify: 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) {
      state.value = state.value || '';
      if (state.value === '') {
        this.warning = false;
      }
}
  });
</script>