RubyGems - polymer-gold-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

polymer-gold-rails 1.0.0.pre.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

data/app/assets/components/gold-cc-cvc-input/test/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!doctype 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
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>gold-cc-cvc-input tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html'
+    ]);
+  </script>
+</body>
+</html>

data/app/assets/components/gold-cc-expiration-input/README.md ADDED Viewed

@@ -0,0 +1,10 @@
+# gold-cc-expiration-input
+`gold-cc-expiration-input` is a Material Design field for entering a valid,
+future date representing a credit card's expiration date.
+Example:
+```html
+<gold-cc-expiration-input></gold-cc-expiration-input>
+<gold-cc-expiration-input value="11/15"></gold-cc-expiration-input>
+```

data/app/assets/components/gold-cc-expiration-input/bower.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "name": "gold-cc-expiration-input",
+  "version": "1.0.2",
+  "description": "A validating input for a credit card expiration date",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "gold",
+    "input"
+  ],
+  "main": [
+    "gold-cc-expiration-input.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/gold-cc-expiration-input.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/gold-cc-expiration-input",
+  "ignore": [],
+  "dependencies": {
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/gold-cc-expiration-input/date-input.html ADDED Viewed

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

data/app/assets/components/gold-cc-expiration-input/date-validator.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!--
+@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-validator-behavior/iron-validator-behavior.html">
+<script>
+  Polymer({
+    is: 'date-validator',
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+    validate: function(date) {
+      if (!date)
+        return false;
+      if (date.month > 11 || date.month < 0)
+        return false;
+      var then = new Date ('20' + date.year, date.month);
+      var now = new Date();
+      return (then > now);
+    }
+  });
+</script>

data/app/assets/components/gold-cc-expiration-input/demo/index.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!doctype 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
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>gold-cc-expiration-input demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../gold-cc-expiration-input.html">
+  <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+</head>
+<style>
+  gold-cc-expiration-input {
+    width: 200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
+<body>
+  <div class="vertical-section-container centered">
+    <h4>Standard</h4>
+    <div class="vertical-section">
+      <gold-cc-expiration-input></gold-cc-expiration-input>
+      <gold-cc-expiration-input label="Auto-validating" auto-validate></gold-cc-expiration-input>
+    </div>
+    <h4>Pre-validated</h4>
+    <div class="vertical-section">
+      <gold-cc-expiration-input auto-validate value="11/15"></gold-cc-expiration-input>
+      <gold-cc-expiration-input auto-validate value="31/23"></gold-cc-expiration-input>
+      <gold-cc-expiration-input auto-validate value="11/"></gold-cc-expiration-input>
+    </div>
+    <h4>Custom error message</h4>
+    <div class="vertical-section">
+      <gold-cc-expiration-input required auto-validate error-message="Please enter a valid date" label="Credit Card Expiration"></gold-cc-expiration-input>
+    </div>
+  </div>
+</body>

data/app/assets/components/gold-cc-expiration-input/gold-cc-expiration-input.html ADDED Viewed

@@ -0,0 +1,131 @@
+<!--
+@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
+        auto-validate="[[autoValidate]]"
+        attr-for-value="date">
+      <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]]">
+      </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"
+      }
+    },
+    listeners: {
+      'dateChanged': '_dateChanged'
+    },
+    _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];
+    }
+  })
+})();
+</script>