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-input/demo/index.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!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-input demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../gold-cc-input.html">
+  <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+</head>
+<body>
+  <div class="vertical-section-container centered">
+    <h4>Standard</h4>
+    <div class="vertical-section">
+      <gold-cc-input></gold-cc-input>
+      <gold-cc-input auto-validate label="Auto-validating"></gold-cc-input>
+    </div>
+    <h4>Pre-validated</h4>
+    <div class="vertical-section">
+      <gold-cc-input label="Visa" value="4000 0000 0000 0002" auto-validate></gold-cc-input>
+      <gold-cc-input label= "MasterCard" value="5100 0000 0000 0008" auto-validate></gold-cc-input>
+      <gold-cc-input label="Discover" value="6011 0000 0000 0004" auto-validate></gold-cc-input>
+      <gold-cc-input label="Invalid Discover Card" value="6011 0000 0000 1233" auto-validate></gold-cc-input>
+    </div>
+    <h4>Custom error message</h4>
+    <div class="vertical-section">
+      <gold-cc-input auto-validate label="Cats only" error-message="needs more cats" required></gold-cc-input>
+    <div>
+  </div>
+</body>

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

@@ -0,0 +1,215 @@
+<!--
+@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-flex-layout/classes/iron-flex-layout.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="../iron-icon/iron-icon.html">
+<script src="cc-validator.js"></script>
+<!--
+`gold-cc-input` is a single-line text field with Material Design styling
+for entering a credit card number. As the user types, the number will be
+formatted by adding a space every 4 digits.
+    <gold-cc-input></gold-cc-input>
+It may include an optional label, which by default is "Card number".
+    <gold-cc-input label="CC"></gold-cc-input>
+### Validation
+The input can detect whether a credit card number is valid, and the type
+of credit card it is, using the Luhn checksum. See `http://jquerycreditcardvalidator.com/`
+for more information.
+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-input
+-->
+<dom-module id="gold-cc-input">
+  <style is="custom-style">
+  :host {
+    display: block;
+  }
+  /* Use a container so that when hiding the icon, the layout doesn't jump around. */
+  .icon-container {
+    margin-left: 10px;
+    height: 27px;
+  }
+  iron-icon {
+    --iron-icon-width: 40px;
+    --iron-icon-height: 24px;
+  }
+  </style>
+  <template>
+    <paper-input-container id="container"
+        disabled$="[[disabled]]"
+        no-label-float="[[noLabelFloat]]"
+        always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
+        invalid="[[invalid]]">
+      <label hidden$="[[!label]]">[[label]]</label>
+      <div class="horizontal layout">
+        <input is="iron-input" id="input"
+            aria-labelledby$="[[_ariaLabelledBy]]"
+            aria-describedby$="[[_ariaDescribedBy]]"
+            bind-value="{{value}}"
+            type="tel"
+            maxlength="30"
+            required$="[[required]]"
+            allowed-pattern="[0-9 ]"
+            prevent-invalid-input
+            autocomplete="cc-number"
+            name$="[[name]]"
+            disabled$="[[disabled]]"
+            invalid="{{invalid}}"
+            autofocus$="[[autofocus]]"
+            inputmode$="[[inputmode]]"
+            placeholder$="[[placeholder]]"
+            readonly$="[[readonly]]"
+            size$="[[size]]">
+        <div class="icon-container"><iron-icon id="icon"></iron-icon></div>
+      </div>
+      <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-input',
+    behaviors: [
+      Polymer.PaperInputBehavior,
+      Polymer.IronValidatableBehavior,
+      Polymer.IronFormElementBehavior
+    ],
+    properties: {
+      /**
+       * The label for this input.
+       */
+      label: {
+        type: String,
+        value: "Card number"
+      },
+      /**
+       * The type of the credit card, if it is valid. Empty otherwise.
+       */
+      cardType: {
+        type: String,
+        notify: true
+      },
+    },
+    observers: [
+      '_computeValue(value)'
+    ],
+    _computeValue: function(value) {
+      var start = this.$.input.selectionStart;
+      var previousCharASpace = this.value.charAt(start - 1) == ' ';
+      value = value.replace(/\s+/g, '');
+      var formattedValue = '';
+      for (var i = 0; i < value.length; i++) {
+        // Add a space after every 4 characters.
+        if ((i != 0) && (i % 4 == 0)) {
+          formattedValue += ' ';
+        }
+        formattedValue += value[i];
+      }
+      this.value = formattedValue.trim();
+      if (this.autoValidate)
+        this.validate();
+      // The cursor automatically jumps to the end after re-setting the value,
+      // so restore it to its original position.
+      this.$.input.selectionStart = start;
+      this.$.input.selectionEnd = start;
+      // If the character right before the selection is a newly inserted
+      // space, we need to advance the selection to maintain the caret position.
+      if (!previousCharASpace && this.value.charAt(start - 1) == ' ') {
+        this.$.input.selectionStart = start+1;
+        this.$.input.selectionEnd = start+1;
+      }
+    },
+    validate: function() {
+      // Empty, non-required input is valid.
+      if (!this.required && this.value == '') {
+        return true;
+      }
+      var result = CreditCardValidator.validate(this.value);
+      var valid = result.valid && result.length_valid;
+      this.cardType = valid ? result.card_type.name : '';
+      // Update the container and its addons (i.e. the custom error-message).
+      this.$.container.invalid = !valid;
+      this.$.container.updateAddons({
+        inputElement: this.$.input,
+        value: this.value,
+        invalid: !valid
+      });
+      // We don't have icons for all the card types.
+      if (valid && result.card_type.icon) {
+        this.$.icon.src = this.resolveUrl(result.card_type.icon);
+        this.$.icon.alt = this.cardType;
+        this.$.icon.hidden = false;
+      } else {
+        this.$.icon.src = null;
+        this.$.icon.alt = '';
+        this.$.icon.hidden = true;
+      }
+      return valid;
+    }
+  })
+})();
+</script>

data/app/assets/components/gold-cc-input/hero.svg ADDED Viewed

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<rect x="38" y="68" width="33" height="2"/>
+	<rect x="77" y="68" width="33" height="2"/>
+	<rect x="116" y="68" width="33" height="2"/>
+	<rect x="155" y="68" width="33" height="2"/>
+	<g>
+		<path d="M42.3,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L42.3,58.4z"/>
+		<path d="M50.1,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L50.1,58.4z"/>
+		<path d="M57.9,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7H60L58,60.5l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L57.9,58.4z"/>
+		<path d="M65.7,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L65.7,58.4z"/>
+		<path d="M81.3,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L81.3,58.4z"/>
+		<path d="M89.1,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L89.1,58.4z"/>
+		<path d="M96.9,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7H99L97,60.5l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L96.9,58.4z"/>
+		<path d="M104.7,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L104.7,58.4z"/>
+		<path d="M120.3,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L120.3,58.4z"/>
+		<path d="M128.1,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L128.1,58.4z"/>
+		<path d="M135.9,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7H138l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L135.9,58.4z"/>
+		<path d="M143.7,58.4l2-3.6h1.5l-2.8,4.6l2.9,4.7h-1.5l-2.1-3.6l-2.1,3.6h-1.5l2.9-4.7l-2.8-4.6h1.5L143.7,58.4z"/>
+		<path d="M156.8,63h1.9v-6.6l-2,0.7V56l3.2-1.2h0.1V63h1.8v1.1h-5V63z"/>
+		<path d="M170,64.1h-6.1v-0.9l3-3.4c0.3-0.3,0.5-0.6,0.7-0.8c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.2-0.4,0.2-0.5
+			c0-0.2,0.1-0.3,0.1-0.5c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.3-0.5-0.3s-0.4-0.1-0.6-0.1
+			c-0.3,0-0.6,0-0.8,0.1s-0.4,0.2-0.6,0.4c-0.2,0.2-0.3,0.4-0.3,0.6s-0.1,0.5-0.1,0.8h-1.3c0-0.4,0.1-0.8,0.2-1.1s0.3-0.6,0.6-0.9
+			c0.3-0.3,0.6-0.5,1-0.6c0.4-0.2,0.8-0.2,1.3-0.2c0.4,0,0.8,0.1,1.1,0.2c0.3,0.1,0.6,0.3,0.9,0.5s0.4,0.5,0.5,0.8s0.2,0.7,0.2,1
+			c0,0.3,0,0.5-0.1,0.8c-0.1,0.3-0.2,0.5-0.4,0.8c-0.2,0.3-0.3,0.5-0.5,0.8c-0.2,0.3-0.4,0.5-0.7,0.8l-2.5,2.7h4.6V64.1z"/>
+		<path d="M173.5,58.9h0.9c0.3,0,0.6,0,0.8-0.1s0.4-0.2,0.5-0.3c0.1-0.1,0.3-0.3,0.3-0.5c0.1-0.2,0.1-0.4,0.1-0.6
+			c0-1.1-0.5-1.6-1.5-1.6c-0.2,0-0.5,0-0.7,0.1c-0.2,0.1-0.4,0.2-0.5,0.3c-0.1,0.1-0.2,0.3-0.3,0.5s-0.1,0.4-0.1,0.6h-1.3
+			c0-0.3,0.1-0.7,0.2-1s0.3-0.6,0.6-0.8c0.2-0.2,0.6-0.4,0.9-0.5c0.4-0.1,0.7-0.2,1.2-0.2c0.4,0,0.8,0.1,1.1,0.2s0.6,0.3,0.9,0.5
+			c0.2,0.2,0.4,0.5,0.6,0.8s0.2,0.7,0.2,1.1c0,0.2,0,0.3-0.1,0.5s-0.1,0.4-0.2,0.6s-0.3,0.3-0.4,0.5c-0.2,0.2-0.4,0.3-0.6,0.4
+			c0.3,0.1,0.6,0.2,0.8,0.4c0.2,0.2,0.3,0.3,0.5,0.5s0.2,0.4,0.2,0.6c0,0.2,0.1,0.4,0.1,0.6c0,0.4-0.1,0.8-0.2,1.2
+			c-0.2,0.3-0.4,0.6-0.6,0.9s-0.6,0.4-0.9,0.5c-0.4,0.1-0.8,0.2-1.2,0.2c-0.4,0-0.8-0.1-1.1-0.2c-0.4-0.1-0.7-0.3-0.9-0.5
+			s-0.5-0.5-0.6-0.8s-0.2-0.7-0.2-1.1h1.3c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.4,0.3,0.5c0.1,0.1,0.3,0.2,0.5,0.3s0.4,0.1,0.7,0.1
+			c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.3-0.3,0.3-0.5c0.1-0.2,0.1-0.5,0.1-0.7c0-0.3,0-0.5-0.1-0.7
+			s-0.2-0.4-0.4-0.5c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.5-0.1-0.8-0.1h-0.9V58.9z"/>
+		<path d="M184.7,61h1.3v1h-1.3v2.1h-1.3V62h-4.2v-0.7l4.1-6.4h1.3V61z M180.7,61h2.8v-4.4l-0.2,0.3L180.7,61z"/>
+	</g>
+	<path d="M194,78H31V44h163V78z M33,76h159V46H33V76z"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/gold-cc-input/images/amex.png ADDED Viewed

Binary file

data/app/assets/components/gold-cc-input/images/diners_club.png ADDED Viewed

Binary file

data/app/assets/components/gold-cc-input/images/discover.png ADDED Viewed

Binary file

data/app/assets/components/gold-cc-input/images/jcb.png ADDED Viewed

Binary file

data/app/assets/components/gold-cc-input/images/mastercard.png ADDED Viewed

Binary file

data/app/assets/components/gold-cc-input/images/visa.png ADDED Viewed

Binary file

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

@@ -0,0 +1,28 @@
+<!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, initial-scale=1.0">
+  <title>gold-cc-input</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>

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

@@ -0,0 +1,136 @@
+<!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>
+  <title>gold-cc-input tests</title>
+  <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">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../gold-cc-input.html">
+</head>
+<body>
+  <test-fixture id="basic">
+    <template>
+      <gold-cc-input></gold-cc-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="ErrorWithoutAutoValidate">
+    <template>
+      <gold-cc-input required error-message="error"></gold-cc-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="required">
+    <template>
+      <gold-cc-input auto-validate required error-message="error"></gold-cc-input>
+    </template>
+  </test-fixture>
+  <script>
+    suite('basic', function() {
+      test('input is spaced out correctly', function() {
+        var input = fixture('basic');
+        input.value='12345678';
+        assert.equal(input.value, '1234 5678');
+      });
+      test('invalid input is not ok', function() {
+        var input = fixture('required');
+        input.value='1234';
+        forceXIfStamp(input);
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        assert.ok(container, 'paper-input-container exists');
+        assert.isTrue(container.invalid);
+        assert.equal(input.cardType, '');
+      });
+      test('valid input is ok', function() {
+        var input = fixture('required');
+        input.value='4000000000000002';
+        forceXIfStamp(input);
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        assert.ok(container, 'paper-input-container exists');
+        assert.isFalse(container.invalid);
+        assert.equal(input.cardType, 'visa');
+      });
+      test('empty required input shows error', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+      test('invalid input shows error message after manual validation', function() {
+        var input = fixture('ErrorWithoutAutoValidate');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        // The error message is only displayed after manual validation.
+        assert.equal(getComputedStyle(error).display, 'none', 'error is not display:none');
+        input.validate();
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+      test('caret position is preserved', function() {
+        var input = fixture('required');
+        var ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]');
+        input.value='1111 1111';
+        ironInput.selectionStart = 2;
+        ironInput.selectionEnd = 2;
+        input._computeValue('1122 1111 11');
+        assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
+        assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
+      });
+    });
+    suite('a11y', function() {
+      test('has aria-labelledby', function() {
+        var input = fixture('basic');
+        assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
+        assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+      });
+      test('required and error has aria-labelledby', function() {
+        var input = fixture('required');
+        assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
+        assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+      });
+    });
+  </script>
+</body>
+</html>