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.
- checksums.yaml +7 -0
- data/README.md +36 -0
- data/Rakefile +1 -0
- data/app/assets/components/gold-cc-cvc-input/README.md +24 -0
- data/app/assets/components/gold-cc-cvc-input/bower.json +39 -0
- data/app/assets/components/gold-cc-cvc-input/cvc_hint.png +0 -0
- data/app/assets/components/gold-cc-cvc-input/cvc_hint_amex.png +0 -0
- data/app/assets/components/gold-cc-cvc-input/demo/index.html +54 -0
- data/app/assets/components/gold-cc-cvc-input/gold-cc-cvc-input.html +195 -0
- data/app/assets/components/gold-cc-cvc-input/hero.svg +36 -0
- data/app/assets/components/gold-cc-cvc-input/index.html +26 -0
- data/app/assets/components/gold-cc-cvc-input/test/basic.html +125 -0
- data/app/assets/components/gold-cc-cvc-input/test/index.html +25 -0
- data/app/assets/components/gold-cc-expiration-input/README.md +10 -0
- data/app/assets/components/gold-cc-expiration-input/bower.json +40 -0
- data/app/assets/components/gold-cc-expiration-input/date-input.html +157 -0
- data/app/assets/components/gold-cc-expiration-input/date-validator.html +38 -0
- data/app/assets/components/gold-cc-expiration-input/demo/index.html +53 -0
- data/app/assets/components/gold-cc-expiration-input/gold-cc-expiration-input.html +131 -0
- data/app/assets/components/gold-cc-expiration-input/hero.svg +58 -0
- data/app/assets/components/gold-cc-expiration-input/index.html +28 -0
- data/app/assets/components/gold-cc-expiration-input/test/basic.html +126 -0
- data/app/assets/components/gold-cc-expiration-input/test/index.html +25 -0
- data/app/assets/components/gold-cc-input/README.md +9 -0
- data/app/assets/components/gold-cc-input/bower.json +39 -0
- data/app/assets/components/gold-cc-input/cc-validator.js +192 -0
- data/app/assets/components/gold-cc-input/demo/index.html +48 -0
- data/app/assets/components/gold-cc-input/gold-cc-input.html +215 -0
- data/app/assets/components/gold-cc-input/hero.svg +52 -0
- data/app/assets/components/gold-cc-input/images/amex.png +0 -0
- data/app/assets/components/gold-cc-input/images/diners_club.png +0 -0
- data/app/assets/components/gold-cc-input/images/discover.png +0 -0
- data/app/assets/components/gold-cc-input/images/jcb.png +0 -0
- data/app/assets/components/gold-cc-input/images/mastercard.png +0 -0
- data/app/assets/components/gold-cc-input/images/visa.png +0 -0
- data/app/assets/components/gold-cc-input/index.html +28 -0
- data/app/assets/components/gold-cc-input/test/basic.html +136 -0
- data/app/assets/components/gold-cc-input/test/index.html +25 -0
- data/app/assets/components/gold-elements/README.md +12 -0
- data/app/assets/components/gold-elements/bower.json +42 -0
- data/app/assets/components/gold-elements/demo/complex-form.html +127 -0
- data/app/assets/components/gold-elements/demo/index.html +94 -0
- data/app/assets/components/gold-elements/demo/item-card.html +59 -0
- data/app/assets/components/gold-elements/demo/simple-form.css +55 -0
- data/app/assets/components/gold-elements/demo/simple-form.html +93 -0
- data/app/assets/components/gold-elements/screenshot.png +0 -0
- data/app/assets/components/gold-email-input/README.md +8 -0
- data/app/assets/components/gold-email-input/bower.json +40 -0
- data/app/assets/components/gold-email-input/demo/index.html +46 -0
- data/app/assets/components/gold-email-input/email-validator.html +31 -0
- data/app/assets/components/gold-email-input/gold-email-input.html +108 -0
- data/app/assets/components/gold-email-input/hero.svg +59 -0
- data/app/assets/components/gold-email-input/index.html +28 -0
- data/app/assets/components/gold-email-input/test/basic.html +97 -0
- data/app/assets/components/gold-email-input/test/index.html +25 -0
- data/app/assets/components/gold-phone-input/README.md +13 -0
- data/app/assets/components/gold-phone-input/bower.json +39 -0
- data/app/assets/components/gold-phone-input/demo/index.html +53 -0
- data/app/assets/components/gold-phone-input/gold-phone-input.html +197 -0
- data/app/assets/components/gold-phone-input/hero.svg +63 -0
- data/app/assets/components/gold-phone-input/index.html +28 -0
- data/app/assets/components/gold-phone-input/test/basic.html +117 -0
- data/app/assets/components/gold-phone-input/test/index.html +25 -0
- data/app/assets/components/gold-zip-input/README.md +8 -0
- data/app/assets/components/gold-zip-input/bower.json +40 -0
- data/app/assets/components/gold-zip-input/demo/index.html +54 -0
- data/app/assets/components/gold-zip-input/gold-zip-input.html +113 -0
- data/app/assets/components/gold-zip-input/hero.svg +43 -0
- data/app/assets/components/gold-zip-input/index.html +28 -0
- data/app/assets/components/gold-zip-input/test/basic.html +116 -0
- data/app/assets/components/gold-zip-input/test/index.html +25 -0
- data/app/assets/components/gold-zip-input/zip-validator.html +32 -0
- data/app/assets/components/iron-autogrow-textarea/README.md +24 -0
- data/app/assets/components/iron-autogrow-textarea/bower.json +37 -0
- data/app/assets/components/iron-autogrow-textarea/demo/index.html +81 -0
- data/app/assets/components/iron-autogrow-textarea/hero.svg +33 -0
- data/app/assets/components/iron-autogrow-textarea/index.html +30 -0
- data/app/assets/components/iron-autogrow-textarea/iron-autogrow-textarea.html +263 -0
- data/app/assets/components/iron-autogrow-textarea/test/basic.html +94 -0
- data/app/assets/components/iron-autogrow-textarea/test/index.html +25 -0
- data/app/assets/components/iron-flex-layout/README.md +4 -0
- data/app/assets/components/iron-flex-layout/bower.json +21 -0
- data/app/assets/components/iron-flex-layout/classes/iron-flex-layout.html +307 -0
- data/app/assets/components/iron-flex-layout/classes/iron-shadow-flex-layout.html +302 -0
- data/app/assets/components/iron-flex-layout/demo/index.html +40 -0
- data/app/assets/components/iron-flex-layout/demo/x-app.html +106 -0
- data/app/assets/components/iron-flex-layout/iron-flex-layout.html +313 -0
- data/app/assets/components/iron-form-element-behavior/README.md +2 -0
- data/app/assets/components/iron-form-element-behavior/bower.json +27 -0
- data/app/assets/components/iron-form-element-behavior/demo/index.html +53 -0
- data/app/assets/components/iron-form-element-behavior/demo/simple-element.html +27 -0
- data/app/assets/components/iron-form-element-behavior/demo/simple-form.html +42 -0
- data/app/assets/components/iron-form-element-behavior/index.html +30 -0
- data/app/assets/components/iron-form-element-behavior/iron-form-element-behavior.html +50 -0
- data/app/assets/components/iron-icon/README.md +56 -0
- data/app/assets/components/iron-icon/bower.json +29 -0
- data/app/assets/components/iron-icon/demo/index.html +28 -0
- data/app/assets/components/iron-icon/demo/location.png +0 -0
- data/app/assets/components/iron-icon/hero.svg +19 -0
- data/app/assets/components/iron-icon/index.html +26 -0
- data/app/assets/components/iron-icon/iron-icon.html +187 -0
- data/app/assets/components/iron-icon/test/index.html +31 -0
- data/app/assets/components/iron-icon/test/iron-icon.html +120 -0
- data/app/assets/components/iron-input/README.md +16 -0
- data/app/assets/components/iron-input/bower.json +36 -0
- data/app/assets/components/iron-input/demo/index.html +87 -0
- data/app/assets/components/iron-input/hero.svg +19 -0
- data/app/assets/components/iron-input/index.html +30 -0
- data/app/assets/components/iron-input/iron-input.html +235 -0
- data/app/assets/components/iron-input/test/index.html +24 -0
- data/app/assets/components/iron-input/test/iron-input.html +139 -0
- data/app/assets/components/iron-input/test/letters-only.html +30 -0
- data/app/assets/components/iron-meta/README.md +46 -0
- data/app/assets/components/iron-meta/bower.json +28 -0
- data/app/assets/components/iron-meta/demo/index.html +45 -0
- data/app/assets/components/iron-meta/hero.svg +33 -0
- data/app/assets/components/iron-meta/index.html +27 -0
- data/app/assets/components/iron-meta/iron-meta.html +352 -0
- data/app/assets/components/iron-meta/test/basic.html +48 -0
- data/app/assets/components/iron-meta/test/index.html +30 -0
- data/app/assets/components/iron-meta/test/iron-meta.html +186 -0
- data/app/assets/components/iron-validatable-behavior/README.md +3 -0
- data/app/assets/components/iron-validatable-behavior/bower.json +35 -0
- data/app/assets/components/iron-validatable-behavior/demo/cats-only.html +46 -0
- data/app/assets/components/iron-validatable-behavior/demo/index.html +71 -0
- data/app/assets/components/iron-validatable-behavior/demo/validatable-input.html +46 -0
- data/app/assets/components/iron-validatable-behavior/index.html +30 -0
- data/app/assets/components/iron-validatable-behavior/iron-validatable-behavior.html +101 -0
- data/app/assets/components/iron-validatable-behavior/test/index.html +35 -0
- data/app/assets/components/iron-validatable-behavior/test/iron-validatable-behavior.html +52 -0
- data/app/assets/components/iron-validatable-behavior/test/test-validatable.html +28 -0
- data/app/assets/components/iron-validator-behavior/README.md +4 -0
- data/app/assets/components/iron-validator-behavior/bower.json +34 -0
- data/app/assets/components/iron-validator-behavior/demo/cats-only.html +46 -0
- data/app/assets/components/iron-validator-behavior/demo/index.html +144 -0
- data/app/assets/components/iron-validator-behavior/index.html +30 -0
- data/app/assets/components/iron-validator-behavior/iron-validator-behavior.html +61 -0
- data/app/assets/components/iron-validator-behavior/test/index.html +34 -0
- data/app/assets/components/iron-validator-behavior/test/iron-validator-behavior.html +47 -0
- data/app/assets/components/iron-validator-behavior/test/simple-validator.html +26 -0
- data/app/assets/components/paper-input/README.md +5 -0
- data/app/assets/components/paper-input/all-imports.html +12 -0
- data/app/assets/components/paper-input/bower.json +44 -0
- data/app/assets/components/paper-input/demo/index.html +96 -0
- data/app/assets/components/paper-input/demo/ssn-input.html +94 -0
- data/app/assets/components/paper-input/demo/ssn-validator.html +31 -0
- data/app/assets/components/paper-input/hero.svg +19 -0
- data/app/assets/components/paper-input/index.html +28 -0
- data/app/assets/components/paper-input/paper-input-addon-behavior.html +47 -0
- data/app/assets/components/paper-input/paper-input-behavior.html +317 -0
- data/app/assets/components/paper-input/paper-input-char-counter.html +95 -0
- data/app/assets/components/paper-input/paper-input-container.html +495 -0
- data/app/assets/components/paper-input/paper-input-error.html +99 -0
- data/app/assets/components/paper-input/paper-input.html +126 -0
- data/app/assets/components/paper-input/paper-textarea.html +106 -0
- data/app/assets/components/paper-input/test/index.html +28 -0
- data/app/assets/components/paper-input/test/letters-only.html +30 -0
- data/app/assets/components/paper-input/test/paper-input-char-counter.html +112 -0
- data/app/assets/components/paper-input/test/paper-input-container.html +237 -0
- data/app/assets/components/paper-input/test/paper-input-error.html +60 -0
- data/app/assets/components/paper-input/test/paper-input.html +213 -0
- data/app/assets/components/paper-input/test/paper-textarea.html +169 -0
- data/app/assets/components/paper-styles/README.md +3 -0
- data/app/assets/components/paper-styles/bower.json +27 -0
- data/app/assets/components/paper-styles/classes/global.html +96 -0
- data/app/assets/components/paper-styles/classes/shadow-layout.html +302 -0
- data/app/assets/components/paper-styles/classes/shadow.html +39 -0
- data/app/assets/components/paper-styles/classes/typography.html +171 -0
- data/app/assets/components/paper-styles/color.html +333 -0
- data/app/assets/components/paper-styles/default-theme.html +39 -0
- data/app/assets/components/paper-styles/demo-pages.html +72 -0
- data/app/assets/components/paper-styles/demo.css +25 -0
- data/app/assets/components/paper-styles/paper-styles-classes.html +14 -0
- data/app/assets/components/paper-styles/paper-styles.html +17 -0
- data/app/assets/components/paper-styles/shadow.html +61 -0
- data/app/assets/components/paper-styles/typography.html +240 -0
- data/app/assets/components/polymer/LICENSE.txt +27 -0
- data/app/assets/components/polymer/bower.json +26 -0
- data/app/assets/components/polymer/build.log +27 -0
- data/app/assets/components/polymer/polymer-micro.html +523 -0
- data/app/assets/components/polymer/polymer-mini.html +1368 -0
- data/app/assets/components/polymer/polymer.html +3768 -0
- data/app/assets/components/webcomponentsjs/CustomElements.js +956 -0
- data/app/assets/components/webcomponentsjs/CustomElements.min.js +11 -0
- data/app/assets/components/webcomponentsjs/HTMLImports.js +1078 -0
- data/app/assets/components/webcomponentsjs/HTMLImports.min.js +11 -0
- data/app/assets/components/webcomponentsjs/MutationObserver.js +344 -0
- data/app/assets/components/webcomponentsjs/MutationObserver.min.js +11 -0
- data/app/assets/components/webcomponentsjs/README.md +125 -0
- data/app/assets/components/webcomponentsjs/ShadowDOM.js +4414 -0
- data/app/assets/components/webcomponentsjs/ShadowDOM.min.js +15 -0
- data/app/assets/components/webcomponentsjs/bower.json +14 -0
- data/app/assets/components/webcomponentsjs/build.log +33 -0
- data/app/assets/components/webcomponentsjs/package.json +31 -0
- data/app/assets/components/webcomponentsjs/webcomponents-lite.js +2300 -0
- data/app/assets/components/webcomponentsjs/webcomponents-lite.min.js +13 -0
- data/app/assets/components/webcomponentsjs/webcomponents.js +7112 -0
- data/app/assets/components/webcomponentsjs/webcomponents.min.js +15 -0
- data/lib/polymer-gold-rails.rb +2 -0
- data/lib/polymer-gold-rails/enigne.rb +4 -0
- data/lib/polymer-gold-rails/version.rb +3 -0
- metadata +312 -0
@@ -0,0 +1,32 @@
|
|
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: 'zip-validator',
|
19
|
+
|
20
|
+
behaviors: [
|
21
|
+
Polymer.IronValidatorBehavior
|
22
|
+
],
|
23
|
+
|
24
|
+
validate: function(value) {
|
25
|
+
// A valid zipcode is 5 digits or 5 digits, a dash, and 4 more digits.
|
26
|
+
var re = /^\d{5}(?:-\d{4})?$/;
|
27
|
+
return re.test(value);
|
28
|
+
}
|
29
|
+
|
30
|
+
});
|
31
|
+
|
32
|
+
</script>
|
@@ -0,0 +1,24 @@
|
|
1
|
+
# iron-autogrow-textarea
|
2
|
+
|
3
|
+
`iron-autogrow-textarea` is an element containing a textarea that grows in height as more
|
4
|
+
lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
|
5
|
+
never scroll.
|
6
|
+
|
7
|
+
Example:
|
8
|
+
|
9
|
+
<iron-autogrow-textarea id="a1">
|
10
|
+
<textarea id="t1"></textarea>
|
11
|
+
</iron-autogrow-textarea>
|
12
|
+
|
13
|
+
Because the `textarea`'s `value` property is not observable, you should use
|
14
|
+
this element's `bind-value` instead for imperative updates. Alternatively, if
|
15
|
+
you do set the `textarea`'s `value` imperatively, you must also call `update`
|
16
|
+
to notify this element the value has changed.
|
17
|
+
|
18
|
+
Example:
|
19
|
+
/* preferred, using the example HTML above*/
|
20
|
+
a1.bindValue = 'some\ntext';
|
21
|
+
|
22
|
+
/* alternatively, */
|
23
|
+
t1.value = 'some\ntext';
|
24
|
+
a1.update();
|
@@ -0,0 +1,37 @@
|
|
1
|
+
{
|
2
|
+
"name": "iron-autogrow-textarea",
|
3
|
+
"version": "1.0.1",
|
4
|
+
"description": "A textarea element that automatically grows with input",
|
5
|
+
"authors": [
|
6
|
+
"The Polymer Authors"
|
7
|
+
],
|
8
|
+
"keywords": [
|
9
|
+
"web-components",
|
10
|
+
"polymer",
|
11
|
+
"input",
|
12
|
+
"textarea"
|
13
|
+
],
|
14
|
+
"main": [
|
15
|
+
"iron-autogrow-textarea.html"
|
16
|
+
],
|
17
|
+
"private": true,
|
18
|
+
"repository": {
|
19
|
+
"type": "git",
|
20
|
+
"url": "git://github.com/PolymerElements/iron-autogrow-textarea.git"
|
21
|
+
},
|
22
|
+
"license": "http://polymer.github.io/LICENSE.txt",
|
23
|
+
"homepage": "https://github.com/PolymerElements/iron-autogrow-textarea",
|
24
|
+
"ignore": [],
|
25
|
+
"dependencies": {
|
26
|
+
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
27
|
+
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
|
28
|
+
"polymer": "Polymer/polymer#^1.0.0"
|
29
|
+
},
|
30
|
+
"devDependencies": {
|
31
|
+
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
32
|
+
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
33
|
+
"web-component-tester": "*",
|
34
|
+
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
35
|
+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
36
|
+
}
|
37
|
+
}
|
@@ -0,0 +1,81 @@
|
|
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-autogrow-textarea demo</title>
|
19
|
+
|
20
|
+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
21
|
+
<link rel="import" href="../iron-autogrow-textarea.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
|
+
iron-autogrow-textarea {
|
28
|
+
width: 200px;
|
29
|
+
}
|
30
|
+
</style>
|
31
|
+
<body>
|
32
|
+
<div class="vertical-section-container centered">
|
33
|
+
<h4>Updating the value imperatively</h4>
|
34
|
+
<template is="dom-bind">
|
35
|
+
<div class="vertical-section">
|
36
|
+
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
|
37
|
+
<br><br>
|
38
|
+
|
39
|
+
<code>bind-value</code>: <span>[[bindValue]]</span>
|
40
|
+
|
41
|
+
<p on-click="setValue">
|
42
|
+
set <code>bind-value</code> to: <br>
|
43
|
+
<textarea></textarea>
|
44
|
+
<button value="bindValue">set</button>
|
45
|
+
<br><br>
|
46
|
+
|
47
|
+
set <code>textarea.value</code> to: <br>
|
48
|
+
<textarea></textarea>
|
49
|
+
<button value="value">set</button>
|
50
|
+
</p>
|
51
|
+
</div>
|
52
|
+
</template>
|
53
|
+
|
54
|
+
<h4>Custom</h4>
|
55
|
+
<div class="vertical-section">
|
56
|
+
<p>Scrolls after 4 rows:</p>
|
57
|
+
<iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
|
58
|
+
<p>Initial height of 4 rows</p>
|
59
|
+
<iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
|
63
|
+
<script>
|
64
|
+
var scope = document.querySelector('template[is=dom-bind]');
|
65
|
+
|
66
|
+
scope.setValue = function(event) {
|
67
|
+
if (!(event.target instanceof HTMLButtonElement)) {
|
68
|
+
return;
|
69
|
+
}
|
70
|
+
var inputValue = event.target.previousElementSibling.value;
|
71
|
+
if (event.target.value == "bindValue") {
|
72
|
+
document.querySelector('iron-autogrow-textarea').bindValue = inputValue;
|
73
|
+
} else {
|
74
|
+
document.querySelector('iron-autogrow-textarea').textarea.value = inputValue;
|
75
|
+
}
|
76
|
+
|
77
|
+
}
|
78
|
+
</script>
|
79
|
+
|
80
|
+
</body>
|
81
|
+
</html>
|
@@ -0,0 +1,33 @@
|
|
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
|
+
<path d="M140,47c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
|
13
|
+
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
|
14
|
+
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
|
15
|
+
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
|
16
|
+
c1.3,1.9,2.5,3.6,4.5,3.6V47z"/>
|
17
|
+
<path d="M140,65c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
|
18
|
+
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
|
19
|
+
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
|
20
|
+
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
|
21
|
+
c1.3,1.9,2.5,3.6,4.5,3.6V65z"/>
|
22
|
+
<path d="M140,83c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
|
23
|
+
c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
|
24
|
+
c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
|
25
|
+
s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
|
26
|
+
c1.3,1.9,2.5,3.6,4.5,3.6V83z"/>
|
27
|
+
<g id="ic_x5F_add_x0D_">
|
28
|
+
</g>
|
29
|
+
<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
|
30
|
+
</g>
|
31
|
+
<g id="Guides">
|
32
|
+
</g>
|
33
|
+
</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-autogrow-textarea</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,263 @@
|
|
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-flex-layout/classes/iron-flex-layout.html">
|
13
|
+
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
|
14
|
+
|
15
|
+
<!--
|
16
|
+
`iron-autogrow-textarea` is an element containing a textarea that grows in height as more
|
17
|
+
lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
|
18
|
+
never scroll.
|
19
|
+
|
20
|
+
Example:
|
21
|
+
|
22
|
+
<iron-autogrow-textarea id="a1">
|
23
|
+
<textarea id="t1"></textarea>
|
24
|
+
</iron-autogrow-textarea>
|
25
|
+
|
26
|
+
Because the `textarea`'s `value` property is not observable, you should use
|
27
|
+
this element's `bind-value` instead for imperative updates.
|
28
|
+
|
29
|
+
@group Iron Elements
|
30
|
+
@hero hero.svg
|
31
|
+
@demo demo/index.html
|
32
|
+
-->
|
33
|
+
|
34
|
+
<dom-module id="iron-autogrow-textarea">
|
35
|
+
|
36
|
+
<style>
|
37
|
+
:host {
|
38
|
+
display: inline-block;
|
39
|
+
position: relative;
|
40
|
+
width: 400px;
|
41
|
+
border: 1px solid;
|
42
|
+
padding: 2px;
|
43
|
+
-moz-appearance: textarea;
|
44
|
+
-webkit-appearance: textarea;
|
45
|
+
}
|
46
|
+
|
47
|
+
.mirror-text {
|
48
|
+
visibility: hidden;
|
49
|
+
word-wrap: break-word;
|
50
|
+
}
|
51
|
+
|
52
|
+
textarea {
|
53
|
+
position: relative;
|
54
|
+
outline: none;
|
55
|
+
border: none;
|
56
|
+
resize: none;
|
57
|
+
background: inherit;
|
58
|
+
/* see comments in template */
|
59
|
+
width: 100%;
|
60
|
+
height: 100%;
|
61
|
+
font-size: inherit;
|
62
|
+
font-family: inherit;
|
63
|
+
}
|
64
|
+
|
65
|
+
::content textarea:invalid {
|
66
|
+
box-shadow: none;
|
67
|
+
}
|
68
|
+
|
69
|
+
</style>
|
70
|
+
<template>
|
71
|
+
<!-- the mirror sizes the input/textarea so it grows with typing -->
|
72
|
+
<div id="mirror" class="mirror-text" aria-hidden="true"> </div>
|
73
|
+
|
74
|
+
<!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
|
75
|
+
<div class="textarea-container fit">
|
76
|
+
<textarea id="textarea"
|
77
|
+
autocomplete$="[[autocomplete]]"
|
78
|
+
autofocus$="[[autofocus]]"
|
79
|
+
inputmode$="[[inputmode]]"
|
80
|
+
name$="[[name]]"
|
81
|
+
placeholder$="[[placeholder]]"
|
82
|
+
readonly$="[[readonly]]"
|
83
|
+
required$="[[required]]"
|
84
|
+
rows$="[[rows]]"
|
85
|
+
maxlength$="[[maxlength]]"></textarea>
|
86
|
+
</div>
|
87
|
+
</template>
|
88
|
+
|
89
|
+
<script>
|
90
|
+
|
91
|
+
Polymer({
|
92
|
+
|
93
|
+
is: 'iron-autogrow-textarea',
|
94
|
+
|
95
|
+
behaviors: [
|
96
|
+
Polymer.IronValidatableBehavior
|
97
|
+
],
|
98
|
+
|
99
|
+
properties: {
|
100
|
+
|
101
|
+
/**
|
102
|
+
* Use this property instead of `value` for two-way data binding.
|
103
|
+
*/
|
104
|
+
bindValue: {
|
105
|
+
observer: '_bindValueChanged',
|
106
|
+
type: String
|
107
|
+
},
|
108
|
+
|
109
|
+
/**
|
110
|
+
* The initial number of rows.
|
111
|
+
*
|
112
|
+
* @attribute rows
|
113
|
+
* @type number
|
114
|
+
* @default 1
|
115
|
+
*/
|
116
|
+
rows: {
|
117
|
+
type: Number,
|
118
|
+
value: 1,
|
119
|
+
observer: '_updateCached'
|
120
|
+
},
|
121
|
+
|
122
|
+
/**
|
123
|
+
* The maximum number of rows this element can grow to until it
|
124
|
+
* scrolls. 0 means no maximum.
|
125
|
+
*
|
126
|
+
* @attribute maxRows
|
127
|
+
* @type number
|
128
|
+
* @default 0
|
129
|
+
*/
|
130
|
+
maxRows: {
|
131
|
+
type: Number,
|
132
|
+
value: 0,
|
133
|
+
observer: '_updateCached'
|
134
|
+
},
|
135
|
+
|
136
|
+
/**
|
137
|
+
* Bound to the textarea's `autocomplete` attribute.
|
138
|
+
*/
|
139
|
+
autocomplete: {
|
140
|
+
type: String,
|
141
|
+
value: 'off'
|
142
|
+
},
|
143
|
+
|
144
|
+
/**
|
145
|
+
* Bound to the textarea's `autofocus` attribute.
|
146
|
+
*/
|
147
|
+
autofocus: {
|
148
|
+
type: String,
|
149
|
+
value: 'off'
|
150
|
+
},
|
151
|
+
|
152
|
+
/**
|
153
|
+
* Bound to the textarea's `inputmode` attribute.
|
154
|
+
*/
|
155
|
+
inputmode: {
|
156
|
+
type: String
|
157
|
+
},
|
158
|
+
|
159
|
+
/**
|
160
|
+
* Bound to the textarea's `name` attribute.
|
161
|
+
*/
|
162
|
+
name: {
|
163
|
+
type: String
|
164
|
+
},
|
165
|
+
|
166
|
+
/**
|
167
|
+
* Bound to the textarea's `placeholder` attribute.
|
168
|
+
*/
|
169
|
+
placeholder: {
|
170
|
+
type: String
|
171
|
+
},
|
172
|
+
|
173
|
+
/**
|
174
|
+
* Bound to the textarea's `readonly` attribute.
|
175
|
+
*/
|
176
|
+
readonly: {
|
177
|
+
type: String
|
178
|
+
},
|
179
|
+
|
180
|
+
/**
|
181
|
+
* Set to true to mark the textarea as required.
|
182
|
+
*/
|
183
|
+
required: {
|
184
|
+
type: Boolean
|
185
|
+
},
|
186
|
+
|
187
|
+
/**
|
188
|
+
* The maximum length of the input value.
|
189
|
+
*/
|
190
|
+
maxlength: {
|
191
|
+
type: Number
|
192
|
+
}
|
193
|
+
|
194
|
+
},
|
195
|
+
|
196
|
+
listeners: {
|
197
|
+
'input': '_onInput'
|
198
|
+
},
|
199
|
+
|
200
|
+
/**
|
201
|
+
* Returns the underlying textarea.
|
202
|
+
*/
|
203
|
+
get textarea() {
|
204
|
+
return this.$.textarea;
|
205
|
+
},
|
206
|
+
|
207
|
+
_update: function() {
|
208
|
+
this.$.mirror.innerHTML = this._valueForMirror();
|
209
|
+
|
210
|
+
var textarea = this.textarea;
|
211
|
+
// If the value of the textarea was updated imperatively, then we
|
212
|
+
// need to manually update bindValue as well.
|
213
|
+
if (textarea && this.bindValue != textarea.value) {
|
214
|
+
this.bindValue = textarea.value;
|
215
|
+
}
|
216
|
+
},
|
217
|
+
|
218
|
+
_bindValueChanged: function() {
|
219
|
+
var textarea = this.textarea;
|
220
|
+
if (!textarea) {
|
221
|
+
return;
|
222
|
+
}
|
223
|
+
|
224
|
+
textarea.value = this.bindValue;
|
225
|
+
this._update();
|
226
|
+
// manually notify because we don't want to notify until after setting value
|
227
|
+
this.fire('bind-value-changed', {value: this.bindValue});
|
228
|
+
},
|
229
|
+
|
230
|
+
_onInput: function(event) {
|
231
|
+
this.bindValue = event.path ? event.path[0].value : event.target.value;
|
232
|
+
this._update();
|
233
|
+
},
|
234
|
+
|
235
|
+
_constrain: function(tokens) {
|
236
|
+
var _tokens;
|
237
|
+
tokens = tokens || [''];
|
238
|
+
// Enforce the min and max heights for a multiline input to avoid measurement
|
239
|
+
if (this.maxRows > 0 && tokens.length > this.maxRows) {
|
240
|
+
_tokens = tokens.slice(0, this.maxRows);
|
241
|
+
} else {
|
242
|
+
_tokens = tokens.slice(0);
|
243
|
+
}
|
244
|
+
while (this.rows > 0 && _tokens.length < this.rows) {
|
245
|
+
_tokens.push('');
|
246
|
+
}
|
247
|
+
return _tokens.join('<br>') + ' ';
|
248
|
+
},
|
249
|
+
|
250
|
+
_valueForMirror: function() {
|
251
|
+
var input = this.textarea;
|
252
|
+
if (!input) {
|
253
|
+
return;
|
254
|
+
}
|
255
|
+
this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&').replace(/"/gm, '"').replace(/'/gm, ''').replace(/</gm, '<').replace(/>/gm, '>').split('\n') : [''];
|
256
|
+
return this._constrain(this.tokens);
|
257
|
+
},
|
258
|
+
|
259
|
+
_updateCached: function() {
|
260
|
+
this.$.mirror.innerHTML = this._constrain(this.tokens);
|
261
|
+
}
|
262
|
+
})
|
263
|
+
</script>
|