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
  1. checksums.yaml +7 -0
  2. data/README.md +36 -0
  3. data/Rakefile +1 -0
  4. data/app/assets/components/gold-cc-cvc-input/README.md +24 -0
  5. data/app/assets/components/gold-cc-cvc-input/bower.json +39 -0
  6. data/app/assets/components/gold-cc-cvc-input/cvc_hint.png +0 -0
  7. data/app/assets/components/gold-cc-cvc-input/cvc_hint_amex.png +0 -0
  8. data/app/assets/components/gold-cc-cvc-input/demo/index.html +54 -0
  9. data/app/assets/components/gold-cc-cvc-input/gold-cc-cvc-input.html +195 -0
  10. data/app/assets/components/gold-cc-cvc-input/hero.svg +36 -0
  11. data/app/assets/components/gold-cc-cvc-input/index.html +26 -0
  12. data/app/assets/components/gold-cc-cvc-input/test/basic.html +125 -0
  13. data/app/assets/components/gold-cc-cvc-input/test/index.html +25 -0
  14. data/app/assets/components/gold-cc-expiration-input/README.md +10 -0
  15. data/app/assets/components/gold-cc-expiration-input/bower.json +40 -0
  16. data/app/assets/components/gold-cc-expiration-input/date-input.html +157 -0
  17. data/app/assets/components/gold-cc-expiration-input/date-validator.html +38 -0
  18. data/app/assets/components/gold-cc-expiration-input/demo/index.html +53 -0
  19. data/app/assets/components/gold-cc-expiration-input/gold-cc-expiration-input.html +131 -0
  20. data/app/assets/components/gold-cc-expiration-input/hero.svg +58 -0
  21. data/app/assets/components/gold-cc-expiration-input/index.html +28 -0
  22. data/app/assets/components/gold-cc-expiration-input/test/basic.html +126 -0
  23. data/app/assets/components/gold-cc-expiration-input/test/index.html +25 -0
  24. data/app/assets/components/gold-cc-input/README.md +9 -0
  25. data/app/assets/components/gold-cc-input/bower.json +39 -0
  26. data/app/assets/components/gold-cc-input/cc-validator.js +192 -0
  27. data/app/assets/components/gold-cc-input/demo/index.html +48 -0
  28. data/app/assets/components/gold-cc-input/gold-cc-input.html +215 -0
  29. data/app/assets/components/gold-cc-input/hero.svg +52 -0
  30. data/app/assets/components/gold-cc-input/images/amex.png +0 -0
  31. data/app/assets/components/gold-cc-input/images/diners_club.png +0 -0
  32. data/app/assets/components/gold-cc-input/images/discover.png +0 -0
  33. data/app/assets/components/gold-cc-input/images/jcb.png +0 -0
  34. data/app/assets/components/gold-cc-input/images/mastercard.png +0 -0
  35. data/app/assets/components/gold-cc-input/images/visa.png +0 -0
  36. data/app/assets/components/gold-cc-input/index.html +28 -0
  37. data/app/assets/components/gold-cc-input/test/basic.html +136 -0
  38. data/app/assets/components/gold-cc-input/test/index.html +25 -0
  39. data/app/assets/components/gold-elements/README.md +12 -0
  40. data/app/assets/components/gold-elements/bower.json +42 -0
  41. data/app/assets/components/gold-elements/demo/complex-form.html +127 -0
  42. data/app/assets/components/gold-elements/demo/index.html +94 -0
  43. data/app/assets/components/gold-elements/demo/item-card.html +59 -0
  44. data/app/assets/components/gold-elements/demo/simple-form.css +55 -0
  45. data/app/assets/components/gold-elements/demo/simple-form.html +93 -0
  46. data/app/assets/components/gold-elements/screenshot.png +0 -0
  47. data/app/assets/components/gold-email-input/README.md +8 -0
  48. data/app/assets/components/gold-email-input/bower.json +40 -0
  49. data/app/assets/components/gold-email-input/demo/index.html +46 -0
  50. data/app/assets/components/gold-email-input/email-validator.html +31 -0
  51. data/app/assets/components/gold-email-input/gold-email-input.html +108 -0
  52. data/app/assets/components/gold-email-input/hero.svg +59 -0
  53. data/app/assets/components/gold-email-input/index.html +28 -0
  54. data/app/assets/components/gold-email-input/test/basic.html +97 -0
  55. data/app/assets/components/gold-email-input/test/index.html +25 -0
  56. data/app/assets/components/gold-phone-input/README.md +13 -0
  57. data/app/assets/components/gold-phone-input/bower.json +39 -0
  58. data/app/assets/components/gold-phone-input/demo/index.html +53 -0
  59. data/app/assets/components/gold-phone-input/gold-phone-input.html +197 -0
  60. data/app/assets/components/gold-phone-input/hero.svg +63 -0
  61. data/app/assets/components/gold-phone-input/index.html +28 -0
  62. data/app/assets/components/gold-phone-input/test/basic.html +117 -0
  63. data/app/assets/components/gold-phone-input/test/index.html +25 -0
  64. data/app/assets/components/gold-zip-input/README.md +8 -0
  65. data/app/assets/components/gold-zip-input/bower.json +40 -0
  66. data/app/assets/components/gold-zip-input/demo/index.html +54 -0
  67. data/app/assets/components/gold-zip-input/gold-zip-input.html +113 -0
  68. data/app/assets/components/gold-zip-input/hero.svg +43 -0
  69. data/app/assets/components/gold-zip-input/index.html +28 -0
  70. data/app/assets/components/gold-zip-input/test/basic.html +116 -0
  71. data/app/assets/components/gold-zip-input/test/index.html +25 -0
  72. data/app/assets/components/gold-zip-input/zip-validator.html +32 -0
  73. data/app/assets/components/iron-autogrow-textarea/README.md +24 -0
  74. data/app/assets/components/iron-autogrow-textarea/bower.json +37 -0
  75. data/app/assets/components/iron-autogrow-textarea/demo/index.html +81 -0
  76. data/app/assets/components/iron-autogrow-textarea/hero.svg +33 -0
  77. data/app/assets/components/iron-autogrow-textarea/index.html +30 -0
  78. data/app/assets/components/iron-autogrow-textarea/iron-autogrow-textarea.html +263 -0
  79. data/app/assets/components/iron-autogrow-textarea/test/basic.html +94 -0
  80. data/app/assets/components/iron-autogrow-textarea/test/index.html +25 -0
  81. data/app/assets/components/iron-flex-layout/README.md +4 -0
  82. data/app/assets/components/iron-flex-layout/bower.json +21 -0
  83. data/app/assets/components/iron-flex-layout/classes/iron-flex-layout.html +307 -0
  84. data/app/assets/components/iron-flex-layout/classes/iron-shadow-flex-layout.html +302 -0
  85. data/app/assets/components/iron-flex-layout/demo/index.html +40 -0
  86. data/app/assets/components/iron-flex-layout/demo/x-app.html +106 -0
  87. data/app/assets/components/iron-flex-layout/iron-flex-layout.html +313 -0
  88. data/app/assets/components/iron-form-element-behavior/README.md +2 -0
  89. data/app/assets/components/iron-form-element-behavior/bower.json +27 -0
  90. data/app/assets/components/iron-form-element-behavior/demo/index.html +53 -0
  91. data/app/assets/components/iron-form-element-behavior/demo/simple-element.html +27 -0
  92. data/app/assets/components/iron-form-element-behavior/demo/simple-form.html +42 -0
  93. data/app/assets/components/iron-form-element-behavior/index.html +30 -0
  94. data/app/assets/components/iron-form-element-behavior/iron-form-element-behavior.html +50 -0
  95. data/app/assets/components/iron-icon/README.md +56 -0
  96. data/app/assets/components/iron-icon/bower.json +29 -0
  97. data/app/assets/components/iron-icon/demo/index.html +28 -0
  98. data/app/assets/components/iron-icon/demo/location.png +0 -0
  99. data/app/assets/components/iron-icon/hero.svg +19 -0
  100. data/app/assets/components/iron-icon/index.html +26 -0
  101. data/app/assets/components/iron-icon/iron-icon.html +187 -0
  102. data/app/assets/components/iron-icon/test/index.html +31 -0
  103. data/app/assets/components/iron-icon/test/iron-icon.html +120 -0
  104. data/app/assets/components/iron-input/README.md +16 -0
  105. data/app/assets/components/iron-input/bower.json +36 -0
  106. data/app/assets/components/iron-input/demo/index.html +87 -0
  107. data/app/assets/components/iron-input/hero.svg +19 -0
  108. data/app/assets/components/iron-input/index.html +30 -0
  109. data/app/assets/components/iron-input/iron-input.html +235 -0
  110. data/app/assets/components/iron-input/test/index.html +24 -0
  111. data/app/assets/components/iron-input/test/iron-input.html +139 -0
  112. data/app/assets/components/iron-input/test/letters-only.html +30 -0
  113. data/app/assets/components/iron-meta/README.md +46 -0
  114. data/app/assets/components/iron-meta/bower.json +28 -0
  115. data/app/assets/components/iron-meta/demo/index.html +45 -0
  116. data/app/assets/components/iron-meta/hero.svg +33 -0
  117. data/app/assets/components/iron-meta/index.html +27 -0
  118. data/app/assets/components/iron-meta/iron-meta.html +352 -0
  119. data/app/assets/components/iron-meta/test/basic.html +48 -0
  120. data/app/assets/components/iron-meta/test/index.html +30 -0
  121. data/app/assets/components/iron-meta/test/iron-meta.html +186 -0
  122. data/app/assets/components/iron-validatable-behavior/README.md +3 -0
  123. data/app/assets/components/iron-validatable-behavior/bower.json +35 -0
  124. data/app/assets/components/iron-validatable-behavior/demo/cats-only.html +46 -0
  125. data/app/assets/components/iron-validatable-behavior/demo/index.html +71 -0
  126. data/app/assets/components/iron-validatable-behavior/demo/validatable-input.html +46 -0
  127. data/app/assets/components/iron-validatable-behavior/index.html +30 -0
  128. data/app/assets/components/iron-validatable-behavior/iron-validatable-behavior.html +101 -0
  129. data/app/assets/components/iron-validatable-behavior/test/index.html +35 -0
  130. data/app/assets/components/iron-validatable-behavior/test/iron-validatable-behavior.html +52 -0
  131. data/app/assets/components/iron-validatable-behavior/test/test-validatable.html +28 -0
  132. data/app/assets/components/iron-validator-behavior/README.md +4 -0
  133. data/app/assets/components/iron-validator-behavior/bower.json +34 -0
  134. data/app/assets/components/iron-validator-behavior/demo/cats-only.html +46 -0
  135. data/app/assets/components/iron-validator-behavior/demo/index.html +144 -0
  136. data/app/assets/components/iron-validator-behavior/index.html +30 -0
  137. data/app/assets/components/iron-validator-behavior/iron-validator-behavior.html +61 -0
  138. data/app/assets/components/iron-validator-behavior/test/index.html +34 -0
  139. data/app/assets/components/iron-validator-behavior/test/iron-validator-behavior.html +47 -0
  140. data/app/assets/components/iron-validator-behavior/test/simple-validator.html +26 -0
  141. data/app/assets/components/paper-input/README.md +5 -0
  142. data/app/assets/components/paper-input/all-imports.html +12 -0
  143. data/app/assets/components/paper-input/bower.json +44 -0
  144. data/app/assets/components/paper-input/demo/index.html +96 -0
  145. data/app/assets/components/paper-input/demo/ssn-input.html +94 -0
  146. data/app/assets/components/paper-input/demo/ssn-validator.html +31 -0
  147. data/app/assets/components/paper-input/hero.svg +19 -0
  148. data/app/assets/components/paper-input/index.html +28 -0
  149. data/app/assets/components/paper-input/paper-input-addon-behavior.html +47 -0
  150. data/app/assets/components/paper-input/paper-input-behavior.html +317 -0
  151. data/app/assets/components/paper-input/paper-input-char-counter.html +95 -0
  152. data/app/assets/components/paper-input/paper-input-container.html +495 -0
  153. data/app/assets/components/paper-input/paper-input-error.html +99 -0
  154. data/app/assets/components/paper-input/paper-input.html +126 -0
  155. data/app/assets/components/paper-input/paper-textarea.html +106 -0
  156. data/app/assets/components/paper-input/test/index.html +28 -0
  157. data/app/assets/components/paper-input/test/letters-only.html +30 -0
  158. data/app/assets/components/paper-input/test/paper-input-char-counter.html +112 -0
  159. data/app/assets/components/paper-input/test/paper-input-container.html +237 -0
  160. data/app/assets/components/paper-input/test/paper-input-error.html +60 -0
  161. data/app/assets/components/paper-input/test/paper-input.html +213 -0
  162. data/app/assets/components/paper-input/test/paper-textarea.html +169 -0
  163. data/app/assets/components/paper-styles/README.md +3 -0
  164. data/app/assets/components/paper-styles/bower.json +27 -0
  165. data/app/assets/components/paper-styles/classes/global.html +96 -0
  166. data/app/assets/components/paper-styles/classes/shadow-layout.html +302 -0
  167. data/app/assets/components/paper-styles/classes/shadow.html +39 -0
  168. data/app/assets/components/paper-styles/classes/typography.html +171 -0
  169. data/app/assets/components/paper-styles/color.html +333 -0
  170. data/app/assets/components/paper-styles/default-theme.html +39 -0
  171. data/app/assets/components/paper-styles/demo-pages.html +72 -0
  172. data/app/assets/components/paper-styles/demo.css +25 -0
  173. data/app/assets/components/paper-styles/paper-styles-classes.html +14 -0
  174. data/app/assets/components/paper-styles/paper-styles.html +17 -0
  175. data/app/assets/components/paper-styles/shadow.html +61 -0
  176. data/app/assets/components/paper-styles/typography.html +240 -0
  177. data/app/assets/components/polymer/LICENSE.txt +27 -0
  178. data/app/assets/components/polymer/bower.json +26 -0
  179. data/app/assets/components/polymer/build.log +27 -0
  180. data/app/assets/components/polymer/polymer-micro.html +523 -0
  181. data/app/assets/components/polymer/polymer-mini.html +1368 -0
  182. data/app/assets/components/polymer/polymer.html +3768 -0
  183. data/app/assets/components/webcomponentsjs/CustomElements.js +956 -0
  184. data/app/assets/components/webcomponentsjs/CustomElements.min.js +11 -0
  185. data/app/assets/components/webcomponentsjs/HTMLImports.js +1078 -0
  186. data/app/assets/components/webcomponentsjs/HTMLImports.min.js +11 -0
  187. data/app/assets/components/webcomponentsjs/MutationObserver.js +344 -0
  188. data/app/assets/components/webcomponentsjs/MutationObserver.min.js +11 -0
  189. data/app/assets/components/webcomponentsjs/README.md +125 -0
  190. data/app/assets/components/webcomponentsjs/ShadowDOM.js +4414 -0
  191. data/app/assets/components/webcomponentsjs/ShadowDOM.min.js +15 -0
  192. data/app/assets/components/webcomponentsjs/bower.json +14 -0
  193. data/app/assets/components/webcomponentsjs/build.log +33 -0
  194. data/app/assets/components/webcomponentsjs/package.json +31 -0
  195. data/app/assets/components/webcomponentsjs/webcomponents-lite.js +2300 -0
  196. data/app/assets/components/webcomponentsjs/webcomponents-lite.min.js +13 -0
  197. data/app/assets/components/webcomponentsjs/webcomponents.js +7112 -0
  198. data/app/assets/components/webcomponentsjs/webcomponents.min.js +15 -0
  199. data/lib/polymer-gold-rails.rb +2 -0
  200. data/lib/polymer-gold-rails/enigne.rb +4 -0
  201. data/lib/polymer-gold-rails/version.rb +3 -0
  202. metadata +312 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 89c0c915234c15d68f1351de9e9c0d393076a894
4
+ data.tar.gz: 30e634488162c961111bdb13df3e7c4d7650bcfe
5
+ SHA512:
6
+ metadata.gz: 898c153b5b9e01d45e1a685b833582dfe19e61a3670601564b6b37403b1879d859d181df7995fd16c5a4dabd748e881452a9373aedd8010e5104400361c9206d
7
+ data.tar.gz: ce71598919c16005905b763d18a561188beaef8aa3ed8c074325314dbfae85f39c221a3b3c11814fe98bc629786ca872cb0687a92e00c793e750e2f6dae5ffc2
data/README.md ADDED
@@ -0,0 +1,36 @@
1
+ # Polymer::Gold::Rails
2
+
3
+
4
+ ## Installation
5
+
6
+ Add this line to your application's Gemfile:
7
+
8
+ ```ruby
9
+ gem 'polymer-gold-rails'
10
+ ```
11
+
12
+ And then execute:
13
+
14
+ $ bundle
15
+
16
+ Or install it yourself as:
17
+
18
+ $ gem install polymer-gold-rails
19
+
20
+ ## Usage
21
+
22
+ TODO: Write usage instructions here
23
+
24
+ ## Development
25
+
26
+ After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/console` for an interactive prompt that will allow you to experiment.
27
+
28
+ To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release` to create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
29
+
30
+ ## Contributing
31
+
32
+ 1. Fork it ( https://github.com/[my-github-username]/polymer-gold-rails/fork )
33
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
34
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
35
+ 4. Push to the branch (`git push origin my-new-feature`)
36
+ 5. Create a new Pull Request
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,24 @@
1
+ # gold-cc-cvc-input
2
+
3
+ `gold-cc-cvc-input` is a single-line text field with Material Design styling
4
+ for entering a credit card's CVC (Card Verification Code). It supports both
5
+ 4-digit Amex CVCs and non-Amex 3-digit CVCs.
6
+
7
+ ```html
8
+ <gold-cc-cvc-input></gold-cc-cvc-input>
9
+
10
+ <gold-cc-cvc-input card-type="amex"></gold-cc-cvc-input>
11
+ ```
12
+
13
+ It may include an optional label, which by default is "CVC".
14
+
15
+ ```html
16
+ <gold-cc-cvc-input label="Card Verification Value"></gold-cc-cvc-input>
17
+ ```
18
+
19
+ It can be used together with a `gold-cc-input` by binding the `cardType` property:
20
+
21
+ ```html
22
+ <gold-cc-input card-type="{{cardType}}"></gold-cc-input>
23
+ <gold-cc-cvc-input card-type="[[cardType]]"></gold-cc-cvc-input>
24
+ ```
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "gold-cc-cvc-input",
3
+ "version": "1.0.2",
4
+ "description": "Provides an input field for a credit card cvc number",
5
+ "authors": [
6
+ "The Polymer Authors"
7
+ ],
8
+ "keywords": [
9
+ "web-components",
10
+ "polymer",
11
+ "gold",
12
+ "input"
13
+ ],
14
+ "main": [
15
+ "gold-cc-cvc-input.html"
16
+ ],
17
+ "private": true,
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git://github.com/PolymerElements/gold-cc-cvc-input.git"
21
+ },
22
+ "license": "http://polymer.github.io/LICENSE.txt",
23
+ "homepage": "https://github.com/PolymerElements/gold-cc-cvc-input",
24
+ "ignore": [],
25
+ "dependencies": {
26
+ "iron-icon": "PolymerElements/iron-icon#^1.0.0",
27
+ "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
28
+ "paper-input": "PolymerElements/paper-input#^1.0.0",
29
+ "paper-styles": "PolymerElements/paper-styles#^1.0.0",
30
+ "polymer": "Polymer/polymer#^1.0.0"
31
+ },
32
+ "devDependencies": {
33
+ "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
34
+ "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
35
+ "test-fixture": "PolymerElements/test-fixture#^1.0.0",
36
+ "web-component-tester": "*",
37
+ "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
38
+ }
39
+ }
@@ -0,0 +1,54 @@
1
+ <!doctype html>
2
+ <!--
3
+ @license
4
+ Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8
+ Code distributed by Google as part of the polymer project is also
9
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10
+ -->
11
+ <html>
12
+ <head>
13
+
14
+ <meta charset="utf-8">
15
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17
+
18
+ <title>gold-cc-cvc-input demo</title>
19
+
20
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
+ <link rel="import" href="../gold-cc-cvc-input.html">
22
+
23
+ <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
24
+ <link rel="import" href="../../paper-styles/demo-pages.html">
25
+ </head>
26
+ <style>
27
+ gold-cc-cvc-input {
28
+ width: 80px;
29
+ margin-left: auto;
30
+ margin-right: auto;
31
+ }
32
+ </style>
33
+ <body>
34
+ <div class="vertical-section-container centered">
35
+ <h4>Standard</h4>
36
+ <div class="vertical-section layout horizontal">
37
+ <gold-cc-cvc-input class="small"></gold-cc-cvc-input>
38
+ <gold-cc-cvc-input class="small" label="AMEX" card-type="amex"></gold-cc-cvc-input>
39
+ <gold-cc-cvc-input auto-validate label="Auto"></gold-cc-cvc-input>
40
+ </div>
41
+
42
+ <h4>Pre-validated</h4>
43
+ <div class="vertical-section layout horizontal">
44
+ <gold-cc-cvc-input required auto-validate value="123"></gold-cc-cvc-input>
45
+ <gold-cc-cvc-input required auto-validate card-type="amex" value="1234"></gold-cc-cvc-input>
46
+ <gold-cc-cvc-input required auto-validate value="12"></gold-cc-cvc-input>
47
+ </div>
48
+
49
+ <h4>Custom error message</h4>
50
+ <div class="vertical-section">
51
+ <gold-cc-cvc-input required auto-validate error-message="Please enter a valid CVC"></gold-cc-cvc-input>
52
+ </div>
53
+ </div>
54
+ </body>
@@ -0,0 +1,195 @@
1
+ <!--
2
+ @license
3
+ Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7
+ Code distributed by Google as part of the polymer project is also
8
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9
+ -->
10
+ <link rel="import" href="../polymer/polymer.html">
11
+ <link rel="import" href="../paper-input/paper-input-behavior.html">
12
+ <link rel="import" href="../paper-input/paper-input-container.html">
13
+ <link rel="import" href="../paper-input/paper-input-error.html">
14
+ <link rel="import" href="../iron-input/iron-input.html">
15
+ <link rel="import" href="../iron-icon/iron-icon.html">
16
+ <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
17
+ <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
18
+
19
+ <!--
20
+ `gold-cc-cvc-input` is a single-line text field with Material Design styling
21
+ for entering a credit card's CVC (Card Verification Code). It supports both
22
+ 4-digit Amex CVCs and non-Amex 3-digit CVCs
23
+
24
+ <gold-cc-cvc-input></gold-cc-cvc-input>
25
+
26
+ <gold-cc-cvc-input card-type="amex"></gold-cc-cvc-input>
27
+
28
+ It may include an optional label, which by default is "CVC".
29
+
30
+ <gold-cc-cvc-input label="Card Verification Value"></gold-cc-cvc-input>
31
+
32
+ It can be used together with a `gold-cc-input` by binding the `cardType` property:
33
+
34
+ <gold-cc-input card-type="{{cardType}}"></gold-cc-input>
35
+ <gold-cc-cvc-input card-type="[[cardType]]"></gold-cc-cvc-input>
36
+
37
+ ### Validation
38
+
39
+ The input considers a valid amex CVC to be 4 digits long, and 3 digits otherwise.
40
+ The `amex` attribute can also be bound to a `gold-cc-input`'s `card-type` attribute.
41
+
42
+ The input can be automatically validated as the user is typing by using
43
+ the `auto-validate` and `required` attributes. For manual validation, the
44
+ element also has a `validate()` method, which returns the validity of the
45
+ input as well sets any appropriate error messages and styles.
46
+
47
+ See `Polymer.PaperInputBehavior` for more API docs.
48
+
49
+ ### Styling
50
+
51
+ See `Polymer.PaperInputContainer` for a list of custom properties used to
52
+ style this element.
53
+
54
+ @group Gold Elements
55
+ @hero hero.svg
56
+ @class gold-cc-cvc-input
57
+ @demo demo/index.html
58
+ -->
59
+
60
+ <dom-module id="gold-cc-cvc-input">
61
+ <style>
62
+ :host {
63
+ display: block;
64
+ }
65
+
66
+ iron-icon {
67
+ margin-left: 10px;
68
+ }
69
+ </style>
70
+
71
+ <template>
72
+ <paper-input-container id="container"
73
+ disabled$="[[disabled]]"
74
+ no-label-float="[[noLabelFloat]]"
75
+ always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
76
+ invalid="[[invalid]]">
77
+
78
+ <label hidden$="[[!label]]">[[label]]</label>
79
+
80
+ <div class="horizontal layout">
81
+ <input is="iron-input" id="input" class="flex"
82
+ aria-labelledby$="[[_ariaLabelledBy]]"
83
+ aria-describedby$="[[_ariaDescribedBy]]"
84
+ bind-value="{{value}}"
85
+ prevent-invalid-input allowed-pattern="[0-9]"
86
+ required$="[[required]]"
87
+ type="tel"
88
+ maxlength$="[[_requiredLength]]"
89
+ autocomplete="cc-csc"
90
+ name$="[[name]]"
91
+ disabled$="[[disabled]]"
92
+ invalid="{{invalid}}"
93
+ autofocus$="[[autofocus]]"
94
+ inputmode$="[[inputmode]]"
95
+ placeholder$="[[placeholder]]"
96
+ readonly$="[[readonly]]"
97
+ size$="[[size]]">
98
+
99
+ <iron-icon id="icon" src="cvc_hint.png" hidden$="[[_amex]]" alt="cvc"></iron-icon>
100
+ <iron-icon id="amexIcon" hidden$="[[!_amex]]" src="cvc_hint_amex.png" alt="amex cvc"></iron-icon>
101
+ </div>
102
+
103
+ <template is="dom-if" if="[[errorMessage]]">
104
+ <paper-input-error>[[errorMessage]]</paper-input-error>
105
+ </template>
106
+
107
+ </paper-input-container>
108
+ </template>
109
+ </dom-module>
110
+
111
+ <script>
112
+ (function() {
113
+ Polymer({
114
+
115
+ is: 'gold-cc-cvc-input',
116
+
117
+ properties: {
118
+
119
+ /**
120
+ * The label for this input.
121
+ */
122
+ label: {
123
+ type: String,
124
+ value: 'CVC'
125
+ },
126
+
127
+ /**
128
+ * The type of card that the CVC is for.
129
+ */
130
+ cardType: {
131
+ type: String,
132
+ value: ''
133
+ },
134
+
135
+ _requiredLength: {
136
+ type: Number,
137
+ computed: '_computeRequiredLength(cardType)'
138
+ },
139
+
140
+ _amex: {
141
+ type: Boolean,
142
+ computed: '_computeIsAmex(cardType)'
143
+ }
144
+ },
145
+
146
+ behaviors: [
147
+ Polymer.PaperInputBehavior,
148
+ Polymer.IronFormElementBehavior
149
+ ],
150
+
151
+ listeners: {
152
+ 'input': '_onInput'
153
+ },
154
+
155
+ ready: function() {
156
+ this._onInput();
157
+ },
158
+
159
+ _onInput: function() {
160
+ if (this.autoValidate) {
161
+ this.validate();
162
+ }
163
+ },
164
+
165
+ _computeRequiredLength: function(cardType) {
166
+ return this._computeIsAmex(cardType) ? 4 : 3;
167
+ },
168
+
169
+ _computeIsAmex: function(cardType) {
170
+ return cardType.toLowerCase() == 'amex';
171
+ },
172
+
173
+ validate: function() {
174
+ // Empty, non-required input is valid.
175
+ if (!this.required && this.value == '') {
176
+ return true;
177
+ }
178
+
179
+ var valid = this.value.length == this._requiredLength;
180
+
181
+ // Update the container and its addons (i.e. the custom error-message).
182
+ this.$.container.invalid = !valid;
183
+ this.$.container.updateAddons({
184
+ inputElement: this.$.input,
185
+ value: this.value,
186
+ invalid: !valid
187
+ });
188
+
189
+ return valid;
190
+ }
191
+ })
192
+
193
+ })();
194
+
195
+ </script>
@@ -0,0 +1,36 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+ viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
6
+ <g id="background" display="none">
7
+ <rect display="inline" fill="#B0BEC5" width="225" height="126"/>
8
+ </g>
9
+ <g id="label">
10
+ </g>
11
+ <g id="art">
12
+ <rect x="100" y="67" width="26" height="2"/>
13
+ <g>
14
+ <path d="M102.2,62h1.9v-6.6l-2,0.7V55l3.2-1.2h0.1V62h1.8v1.1h-5V62z"/>
15
+ <path d="M115.4,63.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
16
+ 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
17
+ 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
18
+ 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
19
+ 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.6V63.1z"/>
20
+ <path d="M118.9,57.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
21
+ 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
22
+ 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
23
+ 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
24
+ 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
25
+ 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
26
+ 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
27
+ 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
28
+ 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.9V57.9z"/>
29
+ </g>
30
+ <path d="M151,77H73V44h78V77z M75,75h74V46H75V75z"/>
31
+ <g id="ic_x5F_add_x0D_">
32
+ </g>
33
+ </g>
34
+ <g id="Guides">
35
+ </g>
36
+ </svg>
@@ -0,0 +1,26 @@
1
+ <!doctype html>
2
+ <!--
3
+ @license
4
+ Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8
+ Code distributed by Google as part of the polymer project is also
9
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10
+ -->
11
+ <html>
12
+ <head>
13
+
14
+ <meta charset="utf-8">
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+
17
+ <script src="../webcomponentsjs/webcomponents-lite.js"></script>
18
+ <link rel="import" href="../iron-component-page/iron-component-page.html">
19
+
20
+ </head>
21
+ <body>
22
+
23
+ <iron-component-page></iron-component-page>
24
+
25
+ </body>
26
+ </html>
@@ -0,0 +1,125 @@
1
+ <!doctype html>
2
+ <!--
3
+ @license
4
+ Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8
+ Code distributed by Google as part of the polymer project is also
9
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10
+ -->
11
+ <html>
12
+ <head>
13
+
14
+ <title>gold-cc-cvc-input tests</title>
15
+
16
+ <meta charset="utf-8">
17
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
18
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
19
+
20
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
+
22
+ <script src="../../web-component-tester/browser.js"></script>
23
+ <script src="../../test-fixture/test-fixture-mocha.js"></script>
24
+
25
+ <script src="../../iron-test-helpers/test-helpers.js"></script>
26
+
27
+ <link rel="import" href="../../test-fixture/test-fixture.html">
28
+ <link rel="import" href="../gold-cc-cvc-input.html">
29
+
30
+ </head>
31
+ <body>
32
+
33
+ <test-fixture id="basic">
34
+ <template>
35
+ <gold-cc-cvc-input></gold-cc-cvc-input>
36
+ </template>
37
+ </test-fixture>
38
+
39
+ <test-fixture id="amex">
40
+ <template>
41
+ <gold-cc-cvc-input card-type="amex" required error-message="error"></gold-cc-cvc-input>
42
+ </template>
43
+ </test-fixture>
44
+
45
+ <test-fixture id="required">
46
+ <template>
47
+ <gold-cc-cvc-input auto-validate required error-message="error"></gold-cc-cvc-input>
48
+ </template>
49
+ </test-fixture>
50
+
51
+ <script>
52
+
53
+ suite('basic', function() {
54
+
55
+ test('max length for a non-amex cc is 3', function() {
56
+ var input = fixture('basic');
57
+ assert.equal(input.inputElement.maxLength, 3);
58
+ });
59
+
60
+ test('max length for an amex cc is 4', function() {
61
+ var input = fixture('amex');
62
+ assert.equal(input.inputElement.maxLength, 4);
63
+ });
64
+
65
+ test('valid input is ok', function() {
66
+ var input = fixture('required');
67
+ input.value='123';
68
+ input._onInput();
69
+ forceXIfStamp(input);
70
+ var container = Polymer.dom(input.root).querySelector('paper-input-container');
71
+ assert.ok(container, 'paper-input-container exists');
72
+ assert.isFalse(container.invalid);
73
+ });
74
+
75
+ test('invalid input is not ok', function() {
76
+ var input = fixture('required');
77
+ input.value='13';
78
+ input._onInput();
79
+ forceXIfStamp(input);
80
+ var container = Polymer.dom(input.root).querySelector('paper-input-container');
81
+ assert.ok(container, 'paper-input-container exists');
82
+ assert.isTrue(container.invalid);
83
+ });
84
+
85
+ test('empty required input shows error', function() {
86
+ var input = fixture('required');
87
+ forceXIfStamp(input);
88
+ var error = Polymer.dom(input.root).querySelector('paper-input-error');
89
+ assert.ok(error, 'paper-input-error exists');
90
+ assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
91
+ });
92
+
93
+ test('invalid input shows error message after manual validation', function() {
94
+ var input = fixture('amex');
95
+ forceXIfStamp(input);
96
+ var error = Polymer.dom(input.root).querySelector('paper-input-error');
97
+ assert.ok(error, 'paper-input-error exists');
98
+
99
+ // The error message is only displayed after manual validation.
100
+ assert.equal(getComputedStyle(error).display, 'none', 'error is not display:none');
101
+ input.validate();
102
+ assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
103
+ });
104
+ });
105
+
106
+ suite('a11y', function() {
107
+
108
+ test('has aria-labelledby', function() {
109
+ var input = fixture('basic');
110
+ assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
111
+ assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
112
+ });
113
+
114
+ test('required and error has aria-labelledby', function() {
115
+ var input = fixture('required');
116
+ assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
117
+ assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
118
+ });
119
+
120
+ });
121
+
122
+ </script>
123
+
124
+ </body>
125
+ </html>