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,120 @@
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
+
12
+ <html>
13
+ <head>
14
+
15
+ <title>iron-icon</title>
16
+ <meta charset="utf-8">
17
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+
19
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20
+ <script src="../../web-component-tester/browser.js"></script>
21
+ <script src="../../test-fixture/test-fixture-mocha.js"></script>
22
+
23
+ <link rel="import" href="../iron-icon.html">
24
+ <link rel="import" href="../../iron-iconset/iron-iconset.html">
25
+ <link rel="import" href="../../test-fixture/test-fixture.html">
26
+
27
+ </head>
28
+ <body>
29
+
30
+ <test-fixture id="TrivialIcon">
31
+ <template>
32
+ <iron-icon src="../demo/location.png"></iron-icon>
33
+ </template>
34
+ </test-fixture>
35
+
36
+ <test-fixture id="IconFromIconset">
37
+ <template>
38
+ <iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset>
39
+ <iron-icon icon="example:location"></iron-icon>
40
+ </template>
41
+ </test-fixture>
42
+
43
+ <test-fixture id="WithoutAnIconSource">
44
+ <template>
45
+ <iron-icon icon=""></iron-icon>
46
+ <iron-icon></iron-icon>
47
+ <iron-icon src=""></iron-icon>
48
+ </template>
49
+ </test-fixture>
50
+
51
+ <script>
52
+ function iconElementFor (node) {
53
+ var nodes = Polymer.dom(node.root).childNodes;
54
+
55
+ for (var i = 0; i < nodes.length; ++i) {
56
+ if (nodes[i].nodeName.match(/DIV|IMG/)) {
57
+ return nodes[i];
58
+ }
59
+ }
60
+ }
61
+
62
+ function hasIcon (node) {
63
+ return /png/.test(node.style.backgroundImage);
64
+ }
65
+
66
+ suite('<iron-icon>', function() {
67
+ suite('basic behavior', function() {
68
+ var icon;
69
+
70
+ setup(function() {
71
+ icon = fixture('TrivialIcon');
72
+ });
73
+
74
+ test('can be assigned an icon with the src attribute', function() {
75
+ expect(iconElementFor(icon)).to.be.ok;
76
+ expect(iconElementFor(icon).src).to.match(/demo\/location\.png/);
77
+ });
78
+
79
+ test('can change its src dynamically', function() {
80
+ icon.src = 'foo.png';
81
+
82
+ expect(iconElementFor(icon).src).to.match(/foo\.png/);
83
+ });
84
+ });
85
+
86
+ suite('when paired with an iconset', function() {
87
+ var icon;
88
+
89
+ setup(function() {
90
+ var elements = fixture('IconFromIconset');
91
+
92
+ icon = elements[1];
93
+ });
94
+
95
+ test('can be assigned an icon from the iconset', function() {
96
+ expect(hasIcon(icon)).to.be.ok;
97
+ });
98
+
99
+ test('can change its icon dynamically', function() {
100
+ var style = icon.style;
101
+
102
+ expect(style.backgroundPosition).to.match(/0(%|px) 0(%|px)/);
103
+
104
+ icon.icon = "example:blank";
105
+
106
+ expect(style.backgroundPosition).to.match(/-24px 0(%|px)/);
107
+ });
108
+ });
109
+
110
+ suite('when no icon source is provided', function() {
111
+ test('will politely wait for an icon source without throwing', function() {
112
+ document.createElement('iron-icon');
113
+ fixture('WithoutAnIconSource');
114
+ });
115
+ })
116
+ });
117
+ </script>
118
+
119
+ </body>
120
+ </html>
@@ -0,0 +1,16 @@
1
+ # iron-input
2
+
3
+ An input with data binding.
4
+
5
+ By default you can only get notified of changes to an `input`'s `value` due to user input:
6
+
7
+ ```html
8
+ <input value="{{myValue::input}}">
9
+ ```
10
+
11
+ `iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
12
+ for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
13
+
14
+ ```html
15
+ <input is="iron-input" bind-value="{{myValue}}">
16
+ ```
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "iron-input",
3
+ "version": "1.0.2",
4
+ "description": "An input element with data binding",
5
+ "authors": [
6
+ "The Polymer Authors"
7
+ ],
8
+ "keywords": [
9
+ "web-components",
10
+ "polymer",
11
+ "input"
12
+ ],
13
+ "main": [
14
+ "iron-input.html"
15
+ ],
16
+ "private": true,
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git://github.com/PolymerElements/iron-input.git"
20
+ },
21
+ "license": "http://polymer.github.io/LICENSE.txt",
22
+ "homepage": "https://github.com/PolymerElements/iron-input",
23
+ "ignore": [],
24
+ "dependencies": {
25
+ "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
26
+ "polymer": "Polymer/polymer#^1.0.0"
27
+ },
28
+ "devDependencies": {
29
+ "paper-styles": "polymerelements/paper-styles#^1.0.2",
30
+ "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
31
+ "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
32
+ "test-fixture": "PolymerElements/test-fixture#^1.0.0",
33
+ "web-component-tester": "*",
34
+ "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
35
+ }
36
+ }
@@ -0,0 +1,87 @@
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>iron-input demo</title>
19
+
20
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
+
22
+ <link rel="import" href="../iron-input.html">
23
+
24
+ <link href="../../paper-styles/paper-styles.html" rel="import">
25
+ <link href="../../paper-styles/demo-pages.html" rel="import">
26
+
27
+ <style is="custom-style">
28
+
29
+ .vertical-section {
30
+ @apply(--paper-font-body1);
31
+
32
+ line-height: 40px;
33
+ }
34
+
35
+ code {
36
+ color: var(--google-grey-700);
37
+ }
38
+
39
+ input[is=iron-input] {
40
+ width: 100%;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ input, button {
45
+ font-size: 20px;
46
+ padding: 0.2em;
47
+ }
48
+
49
+ </style>
50
+ </head>
51
+ <body>
52
+
53
+ <div class="vertical-section vertical-section-container centered">
54
+ <template is="dom-bind">
55
+ <p>
56
+ <input is="iron-input" bind-value="{{bindValue}}" value="{{value::input}}">
57
+ <br>
58
+ bind to <code>bind-value</code>: <b>[[bindValue]]</b>
59
+ <br>
60
+ bind to <code>value::input</code>: <b>{{value}}</b>
61
+ </p>
62
+
63
+ <p on-click="setValue">
64
+ set bind-value to: <input> <button is="paper-button" value="bindValue">set</button>
65
+ <br>
66
+ set value to: <input> <button value="value">set</button>
67
+ </p>
68
+ </template>
69
+ <p>only allows these characters:
70
+ <code>!@#0123456789</code></p>
71
+ <input is="iron-input" allowed-pattern="[!@#0-9]" prevent-invalid-input>
72
+
73
+ </div>
74
+
75
+ <script>
76
+ var scope = document.querySelector('template[is=dom-bind]');
77
+
78
+ scope.setValue = function(event) {
79
+ if (!(event.target instanceof HTMLButtonElement)) {
80
+ return;
81
+ }
82
+ document.querySelector('input[is=iron-input]')[event.target.value] = event.target.previousElementSibling.value;
83
+ }
84
+ </script>
85
+
86
+ </body>
87
+ </html>
@@ -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,30 @@
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, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16
+
17
+ <title>iron-input</title>
18
+
19
+ <script src="../webcomponentsjs/webcomponents-lite.js"></script>
20
+
21
+ <link rel="import" href="../polymer/polymer.html">
22
+ <link rel="import" href="../iron-component-page/iron-component-page.html">
23
+
24
+ </head>
25
+ <body>
26
+
27
+ <iron-component-page></iron-component-page>
28
+
29
+ </body>
30
+ </html>
@@ -0,0 +1,235 @@
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-validatable-behavior/iron-validatable-behavior.html">
13
+
14
+ <script>
15
+
16
+ /*
17
+ `<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
18
+ to `<input>`.
19
+
20
+ ### Two-way binding
21
+
22
+ By default you can only get notified of changes to an `input`'s `value` due to user input:
23
+
24
+ <input value="{{myValue::input}}">
25
+
26
+ `iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
27
+ for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
28
+
29
+ <input is="iron-input" bind-value="{{myValue}}">
30
+
31
+ ### Custom validators
32
+
33
+ You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
34
+
35
+ <input is="iron-input" validator="my-custom-validator">
36
+
37
+ ### Stopping invalid input
38
+
39
+ It may be desirable to only allow users to enter certain characters. You can use the
40
+ `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
41
+ is separate from validation, and `allowed-pattern` does not affect how the input is validated.
42
+
43
+ <!-- only allow characters that match [0-9] -->
44
+ <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
45
+
46
+ @hero hero.svg
47
+ @demo demo/index.html
48
+ */
49
+
50
+ Polymer({
51
+
52
+ is: 'iron-input',
53
+
54
+ extends: 'input',
55
+
56
+ behaviors: [
57
+ Polymer.IronValidatableBehavior
58
+ ],
59
+
60
+ properties: {
61
+
62
+ /**
63
+ * Use this property instead of `value` for two-way data binding.
64
+ */
65
+ bindValue: {
66
+ observer: '_bindValueChanged',
67
+ type: String
68
+ },
69
+
70
+ /**
71
+ * Set to true to prevent the user from entering invalid input. The new input characters are
72
+ * matched with `allowedPattern` if it is set, otherwise it will use the `pattern` attribute if
73
+ * set, or the `type` attribute (only supported for `type=number`).
74
+ */
75
+ preventInvalidInput: {
76
+ type: Boolean
77
+ },
78
+
79
+ /**
80
+ * Regular expression to match valid input characters.
81
+ */
82
+ allowedPattern: {
83
+ type: String
84
+ },
85
+
86
+ _previousValidInput: {
87
+ type: String,
88
+ value: ''
89
+ },
90
+
91
+ _patternAlreadyChecked: {
92
+ type: Boolean,
93
+ value: false
94
+ }
95
+
96
+ },
97
+
98
+ listeners: {
99
+ 'input': '_onInput',
100
+ 'keypress': '_onKeypress'
101
+ },
102
+
103
+ get _patternRegExp() {
104
+ var pattern;
105
+ if (this.allowedPattern) {
106
+ pattern = new RegExp(this.allowedPattern);
107
+ } else if (this.pattern) {
108
+ pattern = new RegExp(this.pattern);
109
+ } else {
110
+ switch (this.type) {
111
+ case 'number':
112
+ pattern = /[0-9.,e-]/;
113
+ break;
114
+ }
115
+ }
116
+ return pattern;
117
+ },
118
+
119
+ ready: function() {
120
+ this.bindValue = this.value;
121
+ },
122
+
123
+ _bindValueChanged: function() {
124
+ if (this.value !== this.bindValue) {
125
+ this.value = !this.bindValue ? '' : this.bindValue;
126
+ }
127
+ // manually notify because we don't want to notify until after setting value
128
+ this.fire('bind-value-changed', {value: this.bindValue});
129
+ },
130
+
131
+ _onInput: function() {
132
+ // Need to validate each of the characters pasted if they haven't
133
+ // been validated inside `_onKeypress` already.
134
+ if (this.preventInvalidInput && !this._patternAlreadyChecked) {
135
+ var valid = this._checkPatternValidity();
136
+ if (!valid) {
137
+ this.value = this._previousValidInput;
138
+ }
139
+ }
140
+
141
+ this.bindValue = this.value;
142
+ this._previousValidInput = this.value;
143
+ this._patternAlreadyChecked = false;
144
+ },
145
+
146
+ _isPrintable: function(event) {
147
+ // What a control/printable character is varies wildly based on the browser.
148
+ // - most control characters (arrows, backspace) do not send a `keypress` event
149
+ // in Chrome, but the *do* on Firefox
150
+ // - in Firefox, when they do send a `keypress` event, control chars have
151
+ // a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
152
+ // - printable characters always send a keypress event.
153
+ // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
154
+ // always matches the charCode.
155
+ // None of this makes any sense.
156
+
157
+ var nonPrintable =
158
+ (event.keyCode == 8) || // backspace
159
+ (event.keyCode == 19) || // pause
160
+ (event.keyCode == 20) || // caps lock
161
+ (event.keyCode == 27) || // escape
162
+ (event.keyCode == 45) || // insert
163
+ (event.keyCode == 46) || // delete
164
+ (event.keyCode == 144) || // num lock
165
+ (event.keyCode == 145) || // scroll lock
166
+ (event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, home, arrows
167
+ (event.keyCode > 111 && event.keyCode < 124); // fn keys
168
+
169
+ return !(event.charCode == 0 && nonPrintable);
170
+ },
171
+
172
+ _onKeypress: function(event) {
173
+ if (!this.preventInvalidInput && this.type !== 'number') {
174
+ return;
175
+ }
176
+ var regexp = this._patternRegExp;
177
+ if (!regexp) {
178
+ return;
179
+ }
180
+
181
+ // Handle special keys and backspace
182
+ if (event.metaKey || event.ctrlKey || event.altKey)
183
+ return;
184
+
185
+ // Check the pattern either here or in `_onInput`, but not in both.
186
+ this._patternAlreadyChecked = true;
187
+
188
+ var thisChar = String.fromCharCode(event.charCode);
189
+ if (this._isPrintable(event) && !regexp.test(thisChar)) {
190
+ event.preventDefault();
191
+ }
192
+ },
193
+
194
+ _checkPatternValidity: function() {
195
+ var regexp = this._patternRegExp;
196
+ if (!regexp) {
197
+ return true;
198
+ }
199
+ for (var i = 0; i < this.value.length; i++) {
200
+ if (!regexp.test(this.value[i])) {
201
+ return false;
202
+ }
203
+ }
204
+ return true;
205
+ },
206
+
207
+ /**
208
+ * Returns true if `value` is valid. The validator provided in `validator` will be used first,
209
+ * then any constraints.
210
+ * @return {Boolean} True if the value is valid.
211
+ */
212
+ validate: function() {
213
+ // Empty, non-required input is valid.
214
+ if (!this.required && this.value == '')
215
+ return true;
216
+
217
+ var valid;
218
+ if (this.hasValidator()) {
219
+ valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
220
+ } else {
221
+ this.invalid = !this.validity.valid;
222
+ valid = this.validity.valid;
223
+ }
224
+ this.fire('iron-input-validate');
225
+ return valid;
226
+ }
227
+
228
+ });
229
+
230
+ /*
231
+ The `iron-input-validate` event is fired whenever `validate()` is called.
232
+ @event iron-input-validate
233
+ */
234
+
235
+ </script>