npm-polymer-elements/gold-email-input/gold-email-input.html

Polymer Elements package for npm

<!--
@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-input/paper-input-behavior.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-input/paper-input-error.html">
<link rel="import" href="../iron-input/iron-input.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">

<!--
`<gold-email-input>` is a single-line text field with Material Design styling
for entering an email address.

    <gold-email-input></gold-email-input>

It may include an optional label, which by default is "Email".

    <gold-email-input label="your email address"></gold-email-input>

### Validation

The input can be automatically validated as the user is typing by using
the `auto-validate` and `required` attributes. For manual validation, the
element also has a `validate()` method, which returns the validity of the
input as well sets any appropriate error messages and styles.

See `Polymer.PaperInputBehavior` for more API docs.

### Styling

See `Polymer.PaperInputContainer` for a list of custom properties used to
style this element.

@group Gold Elements
@hero hero.svg
@demo demo/index.html
@class gold-email-input
-->

<dom-module id="gold-email-input">
  <style>
  :host {
    display: block;
  }
  </style>

  <template>

    <paper-input-container id="container"
        disabled$="[[disabled]]"
        no-label-float="[[noLabelFloat]]"
        always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
        invalid="[[invalid]]">

      <label hidden$="[[!label]]">[[label]]</label>

      <input is="iron-input" id="input"
          type="email"
          required$="[[required]]"
          disabled$="[[disabled]]"
          aria-labelledby$="[[_ariaLabelledBy]]"
          aria-describedby$="[[_ariaDescribedBy]]"
          validator="email-validator"
          bind-value="{{value}}"
          autocomplete="email"
          autocapitalize="none"
          name$="[[name]]"
          invalid="{{invalid}}"
          autofocus$="[[autofocus]]"
          inputmode$="[[inputmode]]"
          placeholder$="[[placeholder]]"
          readonly$="[[readonly]]"
          size$="[[size]]">

      <template is="dom-if" if="[[errorMessage]]">
        <paper-input-error id="error">[[errorMessage]]</paper-input-error>
      </template>

    </paper-input-container>
  </template>

</dom-module>

<script>
(function() {
  Polymer({

    is: 'gold-email-input',

    behaviors: [
      Polymer.PaperInputBehavior,
      Polymer.IronFormElementBehavior
    ],

    properties: {
      /**
       * The label for this input.
       */
      label: {
        type: String,
        value: "Email"
      },

      /**
       * The regular expression used to validate the email. By default, the
       * input is of type=email and uses the native input regex, as defined in
       * the spec: http://www.w3.org/TR/html-markup/input.email.html#input.email.attrs.value.single.
       * You can override this if you want your email to be validated against
       * a custom regex. If the empty string, then no validation will be applied.
       */
      regex: {
        type: String,
        value: null
      },

      value: {
        observer: '_onValueChanged'
      }
    },

    observers: [
      '_onFocusedChanged(focused)'
    ],

    ready: function() {
      // If there's an initial input, validate it.
      if (this.value)
        this._handleAutoValidate();
    },

    /**
     * A handler that is called on input
     */
    _onValueChanged: function(value, oldValue) {
      // The initial property assignment is handled by `ready`.
      if (oldValue == undefined)
        return;

      this._handleAutoValidate();
    },

    /**
     * Returns true if the element has a valid value, and sets the visual error
     * state.
     *
     * @return {boolean} Whether the input is currently valid or not.
     */
    validate: function() {

      var valid;

      // Empty, non-required input is valid.
      if (!this.required && this.value == '') {
        valid = true;
      } else if (this.regex === null) {
        // If the regex isn't set, then use the native validator.
        valid = this.$.input.validate();
      } else {
        // A blank regex means everything is valid. Else, check value against regex.
        valid = new RegExp(this.regex, "i").test(this.value);
      }

      // Check if validity has changed
      if (valid == this.invalid) {
        // Update `this.invalid` since it's data-bound to container
        this.invalid = !valid;

        // Update container's addons (i.e. the custom error-message).
        this.$.container.updateAddons({
          inputElement: this.$.input,
          value: this.value,
          invalid: !valid
        });
      }

      return valid;
    },

    /**
     * Overidden from Polymer.IronControlState.
     */
    _onFocusedChanged: function(focused) {
      if (!focused) {
        this._handleAutoValidate();
      }
    }
  })

})();

</script>