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> |