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

Sign up to get free protection for your applications and to get access to all the features.
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
@@ -0,0 +1,31 @@
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
+
11
+ <link rel="import" href="../../polymer/polymer.html">
12
+ <link rel="import" href="../../iron-validator-behavior/iron-validator-behavior.html">
13
+
14
+ <script>
15
+
16
+ Polymer({
17
+
18
+ is: 'ssn-validator',
19
+
20
+ behaviors: [
21
+ Polymer.IronValidatorBehavior
22
+ ],
23
+
24
+ validate: function(value) {
25
+ // this regex validates incomplete ssn's (by design)
26
+ return !value || value.match(/^[0-9]{0,3}-[0-9]{0,2}-[0-9]{0,4}$/);
27
+ }
28
+
29
+ });
30
+
31
+ </script>
@@ -0,0 +1,19 @@
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="49" y="53" width="2" height="18"/>
13
+ <path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
14
+ <g id="ic_x5F_add_x0D_">
15
+ </g>
16
+ </g>
17
+ <g id="Guides">
18
+ </g>
19
+ </svg>
@@ -0,0 +1,28 @@
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
+ <title>paper-input</title>
18
+
19
+ <script src="../webcomponentsjs/webcomponents-lite.js"></script>
20
+ <link rel="import" href="../iron-component-page/iron-component-page.html">
21
+
22
+ </head>
23
+ <body>
24
+
25
+ <iron-component-page src="all-imports.html"></iron-component-page>
26
+
27
+ </body>
28
+ </html>
@@ -0,0 +1,47 @@
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
+
11
+ <link rel="import" href="../polymer/polymer.html">
12
+
13
+ <script>
14
+
15
+ /**
16
+ * Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-container>`. A
17
+ * add-on appears below the input, and may display information based on the input value and
18
+ * validity such as a character counter or an error message.
19
+ * @polymerBehavior
20
+ */
21
+ Polymer.PaperInputAddonBehavior = {
22
+
23
+ hostAttributes: {
24
+ 'add-on': ''
25
+ },
26
+
27
+ attached: function() {
28
+ this.fire('addon-attached');
29
+ },
30
+
31
+ /**
32
+ * The function called by `<paper-input-container>` when the input value or validity changes.
33
+ * @param {{
34
+ * inputElement: (Node|undefined),
35
+ * value: (string|undefined),
36
+ * invalid: (boolean|undefined)
37
+ * }} state All properties are optional -
38
+ * inputElement: The input element.
39
+ * value: The input value.
40
+ * invalid: True if the input value is invalid.
41
+ */
42
+ update: function(state) {
43
+ }
44
+
45
+ };
46
+
47
+ </script>
@@ -0,0 +1,317 @@
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
+
12
+ <script>
13
+
14
+ /**
15
+ * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
16
+ * behavior is implemented by `<paper-input>`. It exposes a number of properties from
17
+ * `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
18
+ * template.
19
+ *
20
+ * The input element can be accessed by the `inputElement` property if you need to access
21
+ * properties or methods that are not exposed.
22
+ * @polymerBehavior
23
+ */
24
+ Polymer.PaperInputBehavior = {
25
+
26
+ properties: {
27
+
28
+ /**
29
+ * The label for this input. Bind this to `<paper-input-container>`'s `label` property.
30
+ */
31
+ label: {
32
+ type: String
33
+ },
34
+
35
+ /**
36
+ * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
37
+ * property, or the value property of your input that is `notify:true`.
38
+ */
39
+ value: {
40
+ notify: true,
41
+ type: String
42
+ },
43
+
44
+ /**
45
+ * Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
46
+ * and the input's `disabled` property.
47
+ */
48
+ disabled: {
49
+ type: Boolean,
50
+ value: false
51
+ },
52
+
53
+ /**
54
+ * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
55
+ * and the input's `invalid` property.
56
+ */
57
+ invalid: {
58
+ type: Boolean,
59
+ value: false
60
+ },
61
+
62
+ /**
63
+ * Set to true to prevent the user from entering invalid input. Bind this to the
64
+ * `<input is="iron-input">`'s `preventInvalidInput` property.
65
+ */
66
+ preventInvalidInput: {
67
+ type: Boolean
68
+ },
69
+
70
+ /**
71
+ * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
72
+ * `<input is="iron-input">`'s `allowedPattern` property.
73
+ */
74
+ allowedPattern: {
75
+ type: String
76
+ },
77
+
78
+ /**
79
+ * The type of the input. The supported types are `text`, `number` and `password`. Bind this
80
+ * to the `<input is="iron-input">`'s `type` property.
81
+ */
82
+ type: {
83
+ type: String
84
+ },
85
+
86
+ /**
87
+ * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
88
+ * `pattern` property.
89
+ */
90
+ pattern: {
91
+ type: String
92
+ },
93
+
94
+ /**
95
+ * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
96
+ * `required` property.
97
+ */
98
+ required: {
99
+ type: Boolean,
100
+ value: false
101
+ },
102
+
103
+ /**
104
+ * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
105
+ * `maxlength` property.
106
+ */
107
+ maxlength: {
108
+ type: Number
109
+ },
110
+
111
+ /**
112
+ * The error message to display when the input is invalid. Bind this to the
113
+ * `<paper-input-error>`'s content, if using.
114
+ */
115
+ errorMessage: {
116
+ type: String
117
+ },
118
+
119
+ /**
120
+ * Set to true to show a character counter.
121
+ */
122
+ charCounter: {
123
+ type: Boolean,
124
+ value: false
125
+ },
126
+
127
+ /**
128
+ * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
129
+ * `noLabelFloat` property.
130
+ */
131
+ noLabelFloat: {
132
+ type: Boolean,
133
+ value: false
134
+ },
135
+
136
+ /**
137
+ * Set to true to always float the label. Bind this to the `<paper-input-container>`'s
138
+ * `alwaysFloatLabel` property.
139
+ */
140
+ alwaysFloatLabel: {
141
+ type: Boolean,
142
+ value: false
143
+ },
144
+
145
+ /**
146
+ * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
147
+ * `autoValidate` property.
148
+ */
149
+ autoValidate: {
150
+ type: Boolean,
151
+ value: false
152
+ },
153
+
154
+ /**
155
+ * Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
156
+ * property.
157
+ */
158
+ validator: {
159
+ type: String
160
+ },
161
+
162
+ // HTMLInputElement attributes for binding if needed
163
+
164
+ /**
165
+ * Bind this to the `<input is="iron-input">`'s `autocomplete` property.
166
+ */
167
+ autocomplete: {
168
+ type: String,
169
+ value: 'off'
170
+ },
171
+
172
+ /**
173
+ * Bind this to the `<input is="iron-input">`'s `autofocus` property.
174
+ */
175
+ autofocus: {
176
+ type: Boolean
177
+ },
178
+
179
+ /**
180
+ * Bind this to the `<input is="iron-input">`'s `inputmode` property.
181
+ */
182
+ inputmode: {
183
+ type: String
184
+ },
185
+
186
+ /**
187
+ * Bind this to the `<input is="iron-input">`'s `minlength` property.
188
+ */
189
+ minlength: {
190
+ type: Number
191
+ },
192
+
193
+ /**
194
+ * Bind this to the `<input is="iron-input">`'s `name` property.
195
+ */
196
+ name: {
197
+ type: String
198
+ },
199
+
200
+ /**
201
+ * A placeholder string in addition to the label. If this is set, the label will always float.
202
+ */
203
+ placeholder: {
204
+ type: String,
205
+ // need to set a default so _computeAlwaysFloatLabel is run
206
+ value: ''
207
+ },
208
+
209
+ /**
210
+ * Bind this to the `<input is="iron-input">`'s `readonly` property.
211
+ */
212
+ readonly: {
213
+ type: Boolean,
214
+ value: false
215
+ },
216
+
217
+ /**
218
+ * Bind this to the `<input is="iron-input">`'s `size` property.
219
+ */
220
+ size: {
221
+ type: Number
222
+ },
223
+
224
+ _ariaDescribedBy: {
225
+ type: String,
226
+ value: ''
227
+ }
228
+
229
+ },
230
+
231
+ listeners: {
232
+ 'addon-attached': '_onAddonAttached'
233
+ },
234
+
235
+ /**
236
+ * Returns a reference to the input element.
237
+ */
238
+ get inputElement() {
239
+ return this.$.input;
240
+ },
241
+
242
+ attached: function() {
243
+ this._updateAriaLabelledBy();
244
+ },
245
+
246
+ _appendStringWithSpace: function(str, more) {
247
+ if (str) {
248
+ str = str + ' ' + more;
249
+ } else {
250
+ str = more;
251
+ }
252
+ return str;
253
+ },
254
+
255
+ _onAddonAttached: function(event) {
256
+ var target = event.path ? event.path[0] : event.target;
257
+ if (target.id) {
258
+ this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
259
+ } else {
260
+ var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
261
+ target.id = id;
262
+ this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
263
+ }
264
+ },
265
+
266
+ /**
267
+ * Validates the input element and sets an error style if needed.
268
+ */
269
+ validate: function() {
270
+ return this.inputElement.validate();
271
+ },
272
+
273
+ /**
274
+ * Restores the cursor to its original position after updating the value.
275
+ * @param {String} newValue The value that should be saved.
276
+ */
277
+ updateValueAndPreserveCaret: function(newValue) {
278
+ // Not all elements might have selection, and even if they have the
279
+ // right properties, accessing them might throw an exception (like for
280
+ // <input type=number>)
281
+ try {
282
+ var start = this.inputElement.selectionStart;
283
+ this.value = newValue;
284
+
285
+ // The cursor automatically jumps to the end after re-setting the value,
286
+ // so restore it to its original position.
287
+ this.inputElement.selectionStart = start;
288
+ this.inputElement.selectionEnd = start;
289
+ } catch (e) {
290
+ // Just set the value and give up on the caret.
291
+ this.value = newValue;
292
+ }
293
+ },
294
+
295
+ _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
296
+ return placeholder || alwaysFloatLabel;
297
+ },
298
+
299
+ _updateAriaLabelledBy: function() {
300
+ var label = Polymer.dom(this.root).querySelector('label');
301
+ if (!label) {
302
+ this._ariaLabelledBy = '';
303
+ return;
304
+ }
305
+ var labelledBy;
306
+ if (label.id) {
307
+ labelledBy = label.id;
308
+ } else {
309
+ labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
310
+ label.id = labelledBy;
311
+ }
312
+ this._ariaLabelledBy = labelledBy;
313
+ }
314
+
315
+ };
316
+
317
+ </script>
@@ -0,0 +1,95 @@
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
+
11
+ <link rel="import" href="../polymer/polymer.html">
12
+ <link rel="import" href="../paper-styles/paper-styles.html">
13
+ <link rel="import" href="paper-input-addon-behavior.html">
14
+
15
+ <!--
16
+ `<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`. It
17
+ shows the number of characters entered in the input and the max length if it is specified.
18
+
19
+ <paper-input-container>
20
+ <input is="iron-input" maxlength="20">
21
+ <paper-input-char-counter></paper-input-char-counter>
22
+ </paper-input-container>
23
+
24
+ ### Styling
25
+
26
+ The following mixin is available for styling:
27
+
28
+ Custom property | Description | Default
29
+ ----------------|-------------|----------
30
+ `--paper-input-char-counter` | Mixin applied to the element | `{}`
31
+ -->
32
+ <dom-module id="paper-input-char-counter">
33
+
34
+ <style>
35
+
36
+ :host {
37
+ display: inline-block;
38
+ float: right;
39
+
40
+ @apply(--paper-font-caption);
41
+ @apply(--paper-input-char-counter);
42
+ }
43
+
44
+ </style>
45
+
46
+ <template>
47
+
48
+ <span>[[_charCounterStr]]</span>
49
+
50
+ </template>
51
+
52
+ </dom-module>
53
+
54
+ <script>
55
+
56
+ (function() {
57
+
58
+ Polymer({
59
+
60
+ is: 'paper-input-char-counter',
61
+
62
+ behaviors: [
63
+ Polymer.PaperInputAddonBehavior
64
+ ],
65
+
66
+ properties: {
67
+
68
+ _charCounterStr: {
69
+ type: String,
70
+ value: '0'
71
+ }
72
+
73
+ },
74
+
75
+ update: function(state) {
76
+ if (!state.inputElement) {
77
+ return;
78
+ }
79
+
80
+ state.value = state.value || '';
81
+
82
+ // Account for the textarea's new lines.
83
+ var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
84
+
85
+ if (state.inputElement.hasAttribute('maxlength')) {
86
+ str += '/' + state.inputElement.getAttribute('maxlength');
87
+ }
88
+ this._charCounterStr = str;
89
+ }
90
+
91
+ });
92
+
93
+ })();
94
+
95
+ </script>