Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(13)

Side by Side Diff: third_party/polymer/v0_8/components/paper-input/paper-input-behavior.html

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1
Patch Set: fix a merge mistake Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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.g ithub.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/CONTRI BUTORS.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/PATEN TS.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-con tainer>`. This
16 * behavior is implemented by `<paper-input>`. It exposes a number of properti es 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 nee d 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 `lab el` 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-inp ut-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 `pa ssword`. 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="ir on-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="iro n-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 th e
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-inp ut-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-c ontainer>`'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 labe l will always float.
202 */
203 placeholder: {
204 type: String
205 },
206
207 /**
208 * Bind this to the `<input is="iron-input">`'s `readonly` property.
209 */
210 readonly: {
211 type: Boolean,
212 value: false
213 },
214
215 /**
216 * Bind this to the `<input is="iron-input">`'s `size` property.
217 */
218 size: {
219 type: Number
220 },
221
222 _ariaDescribedBy: {
223 type: String,
224 value: ''
225 }
226
227 },
228
229 listeners: {
230 'addon-attached': '_onAddonAttached'
231 },
232
233 /**
234 * Returns a reference to the input element.
235 */
236 get inputElement() {
237 return this.$.input;
238 },
239
240 attached: function() {
241 this._updateAriaLabelledBy();
242 },
243
244 _appendStringWithSpace: function(str, more) {
245 if (str) {
246 str = str + ' ' + more;
247 } else {
248 str = more;
249 }
250 return str;
251 },
252
253 _onAddonAttached: function(event) {
254 var target = event.path ? event.path[0] : event.target;
255 if (target.id) {
256 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB y, target.id);
257 } else {
258 var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
259 target.id = id;
260 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB y, id);
261 }
262 },
263
264 /**
265 * Validates the input element and sets an error style if needed.
266 */
267 validate: function () {
268 return this.inputElement.validate();
269 },
270
271 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
272 return placeholder || alwaysFloatLabel;
273 },
274
275 _updateAriaLabelledBy: function() {
276 var label = Polymer.dom(this.root).querySelector('label');
277 if (!label) {
278 this._ariaLabelledBy = '';
279 return;
280 }
281 var labelledBy;
282 if (label.id) {
283 labelledBy = label.id;
284 } else {
285 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
286 label.id = labelledBy;
287 }
288 this._ariaLabelledBy = labelledBy;
289 }
290
291 };
292
293 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698