npm-polymer-elements/gold-cc-expiration-input/gold-cc-expiration-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">

<link rel="import" href="date-input.html">

<!--
`gold-cc-expiration-input` is a  single-line text field with Material Design styling
for entering a credit card's expiration date

    <gold-cc-expiration-input></gold-cc-expiration-input>
    <gold-cc-expiration-input value="11/15"></gold-cc-expiration-input>

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

    <gold-cc-expiration-input label="Date"></gold-cc-expiration-input>


### Validation

The input can check whether the entered date is a valid, future date.

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-cc-expiration-input
-->

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

  <template>

    <paper-input-container id="container"
        always-float-label
        attr-for-value="date"
        disabled$="[[disabled]]"
        invalid="[[invalid]]">

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

      <date-input class="paper-input-input" id="input"
          aria-label-prefix="[[_ariaLabelledBy]]"
          required$="[[required]]"
          month="[[_computeMonth(value)]]"
          year="[[_computeYear(value)]]"
          autocomplete$="[[autocomplete]]"
          disabled$="[[disabled]]"
          invalid="{{invalid}}"
          autofocus$="[[autofocus]]"
          inputmode$="[[inputmode]]"
          placeholder$="[[placeholder]]"
          readonly$="[[readonly]]">
      </date-input>

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

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

</dom-module>

<script>
(function() {

  Polymer({

    is: 'gold-cc-expiration-input',

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

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

      value: {
        value: '',
        observer: '_onValueChanged'
      }
    },

    listeners: {
      'dateChanged': '_dateChanged'
    },

    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();
    },

    _dateChanged: function(event) {
      if (event.detail.month && event.detail.year) {
        this.value = event.detail.month + '/' + event.detail.year;
      }
    },

    _computeMonth: function(value) {
      // Date is in MM/YY format.
      return value.split('/')[0];
    },

    _computeYear: function(value) {
      // Date is in MM/YY format.
      return value.split('/')[1];
    },

    /**
     * Overidden from Polymer.PaperInputBehavior.
     */
    validate: function() {
      return this.$.input.validate();
    },

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

})();

</script>