gold-cc-expiration-input.html

<!--
@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">

  <template>
    <style>
      :host {
        display: block;
      }
    </style>

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

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

      <date-input class="paper-input-input" id="input"
          stop-date-event-propagation$="[[!_observeDateChange]]"
          date="{{date}}"
          slot="input"
          aria-label-prefix="[[_ariaLabelledBy]]"
          required$="[[required]]"
          auto-validate="[[autoValidate]]"
          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 slot="add-on">[[errorMessage]]</paper-input-error>
      </template>

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

  <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"
          },

          /**
           * The value as 'mm/yy'
           */
          value: {
            type: String,
            notify: true,
            value: ''
          },

          /**
           * The value as an object with a 'month' and 'year' property
           */
          date: {
            type: Object,
            notify: true,
            observer: '_onDateChanged'
          },

          /**
           * Composed date-input will not publish changes to its `date` property
           * until `_observeDateChange` is true. This prevents the `date` property
           * observer from incorrectly stepping-on the initial `value` property
           */
          _observeDateChange: {
            type: Boolean,
            value: false
          }
        },

        observers: [
          '_onFocusedChanged(focused)',
          '_onValueChanged(value, _observeDateChange)'
        ],

        ready: function() {
          this._observeDateChange = true;
          /**
           * PaperInputBehavior's tabindex=0 seems to cause problems
           * the natural tabindex from date-input's native inputs should prevail
           */
          this.removeAttribute('tabindex');
        },

        /**
         * A handler that is called on input
         */
        _onValueChanged: function(value, ready) {
          var parts = (value || '').split('/');
          var input = this.$.input;
          input.month = parts[0];
          input.year = parts[1];
        },

        /**
         * Handles Date change events published by `date-input` by updating the
         * `value` property
         */
        _onDateChanged: function(d) {
          d = d || {};
          var month = d.month || '';
          var year = d.year || '';
          var value = year ? (month + '/' + year) : month;
          this.value = String(value);
        },

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

        /**
         * Overidden from Polymer.IronControlState.
         */
        _onFocusedChanged: function(focused) {
          var previouslyFocused = this._previouslyFocused || false;
          this._previouslyFocused = focused || previouslyFocused;
          if (!focused && previouslyFocused) {
            this.validate();
          }
        }
      })

    })();
  </script>

</dom-module>