| Index: polymer_1.0.4/bower_components/gold-cc-expiration-input/date-input.html
|
| diff --git a/polymer_1.0.4/bower_components/gold-cc-expiration-input/date-input.html b/polymer_1.0.4/bower_components/gold-cc-expiration-input/date-input.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..08a98486d8cee24fd67bba9bcdaff7391ac89559
|
| --- /dev/null
|
| +++ b/polymer_1.0.4/bower_components/gold-cc-expiration-input/date-input.html
|
| @@ -0,0 +1,157 @@
|
| +<!--
|
| +@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="../iron-input/iron-input.html">
|
| +<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
|
| +<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
|
| +<link rel="import" href="date-validator.html">
|
| +
|
| +<dom-module id="date-input">
|
| +
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + }
|
| +
|
| + span {
|
| + @apply(--paper-input-container-font);
|
| + opacity: 0.33;
|
| + text-align: center;
|
| + }
|
| +
|
| + input {
|
| + position: relative; /* to make a stacking context */
|
| + outline: none;
|
| + box-shadow: none;
|
| + padding: 0;
|
| + width: 100%;
|
| + background: transparent;
|
| + border: none;
|
| + color: var(--paper-input-container-input-color, --primary-text-color);
|
| + text-align: center;
|
| +
|
| + @apply(--paper-font-subhead);
|
| + @apply(--paper-input-container-input);
|
| + }
|
| +
|
| + </style>
|
| +
|
| + <template>
|
| + <date-validator id="validator"></date-validator>
|
| +
|
| + <span aria-hidden id="monthLabel" hidden>Month</span>
|
| + <span aria-hidden id="yearLabel" hidden>Year</span>
|
| +
|
| + <div class="horizontal layout">
|
| + <input is="iron-input"
|
| + aria-labelledby$="[[_computeAriaLabel(ariaLabelPrefix,'monthLabel')]]"
|
| + required$="[[required]]"
|
| + maxlength="2"
|
| + bind-value="{{month}}"
|
| + placeholder="MM"
|
| + allowed-pattern="[0-9]"
|
| + prevent-invalid-input
|
| + autocomplete="cc-exp-month"
|
| + type="tel"
|
| + class="flex">
|
| + <span>/</span>
|
| + <input is="iron-input"
|
| + aria-labelledby$="[[_computeAriaLabel(ariaLabelPrefix,'yearLabel')]]"
|
| + required$="[[required]]"
|
| + maxlength="2"
|
| + bind-value="{{year}}"
|
| + placeholder="YY"
|
| + allowed-pattern="[0-9]"
|
| + prevent-invalid-input
|
| + autocomplete="cc-exp-year"
|
| + type="tel"
|
| + class="flex">
|
| + </div>
|
| + </template>
|
| +
|
| +</dom-module>
|
| +
|
| +<script>
|
| + Polymer({
|
| +
|
| + is: 'date-input',
|
| +
|
| + behaviors: [
|
| + Polymer.IronValidatableBehavior
|
| + ],
|
| +
|
| + properties: {
|
| + /**
|
| + * Set to true to mark the input as required.
|
| + */
|
| + required: {
|
| + type: Boolean,
|
| + value: false
|
| + },
|
| +
|
| + /**
|
| + * The month component of the date displayed.
|
| + */
|
| + month: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The year component of the date displayed.
|
| + */
|
| + year: {
|
| + type: String
|
| + },
|
| +
|
| + /**
|
| + * The date object used by the validator. Has two properties, month and year.
|
| + */
|
| + date: {
|
| + notify: true,
|
| + type: Object
|
| + },
|
| +
|
| + validator: {
|
| + type: String,
|
| + value: 'date-validator'
|
| + },
|
| +
|
| + ariaLabelPrefix: {
|
| + type:String
|
| + }
|
| +
|
| + },
|
| +
|
| + observers: [
|
| + '_computeDate(month,year)'
|
| + ],
|
| +
|
| + _computeDate: function(month, year) {
|
| + // Months are 0-11.
|
| + this.date = {month: month, year: year};
|
| + this.fire('dateChanged', this.date);
|
| + },
|
| +
|
| + validate: function() {
|
| + // Empty, non-required input is valid.
|
| + if (!this.required && this.month == '' && this.year == '') {
|
| + return true;
|
| + }
|
| + this.invalid = !this.$.validator.validate(this.date);
|
| + this.fire('iron-input-validate');
|
| + return !this.invalid;
|
| + },
|
| +
|
| + _computeAriaLabel: function(dateLabel, monthLabel) {
|
| + return dateLabel + ' ' + monthLabel;
|
| + }
|
| +
|
| + });
|
| +</script>
|
|
|