| OLD | NEW |
| 1 | 1 |
| 2 | 2 |
| 3 /** | 3 /** |
| 4 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This | 4 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This |
| 5 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from | 5 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from |
| 6 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your | 6 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your |
| 7 * template. | 7 * template. |
| 8 * | 8 * |
| 9 * The input element can be accessed by the `inputElement` property if you nee
d to access | 9 * The input element can be accessed by the `inputElement` property if you nee
d to access |
| 10 * properties or methods that are not exposed. | 10 * properties or methods that are not exposed. |
| 11 * @polymerBehavior | 11 * @polymerBehavior Polymer.PaperInputBehavior |
| 12 */ | 12 */ |
| 13 Polymer.PaperInputBehavior = { | 13 Polymer.PaperInputBehaviorImpl = { |
| 14 | 14 |
| 15 properties: { | 15 properties: { |
| 16 | 16 |
| 17 /** | 17 /** |
| 18 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. | 18 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. |
| 19 */ | 19 */ |
| 20 label: { | 20 label: { |
| 21 type: String | 21 type: String |
| 22 }, | 22 }, |
| 23 | 23 |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 66 | 66 |
| 67 /** | 67 /** |
| 68 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this | 68 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this |
| 69 * to the `<input is="iron-input">`'s `type` property. | 69 * to the `<input is="iron-input">`'s `type` property. |
| 70 */ | 70 */ |
| 71 type: { | 71 type: { |
| 72 type: String | 72 type: String |
| 73 }, | 73 }, |
| 74 | 74 |
| 75 /** | 75 /** |
| 76 * The datalist of the input (if any). This should match the id of an exis
ting <datalist>. Bind this |
| 77 * to the `<input is="iron-input">`'s `list` property. |
| 78 */ |
| 79 list: { |
| 80 type: String |
| 81 }, |
| 82 |
| 83 /** |
| 76 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s | 84 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s |
| 77 * `pattern` property. | 85 * `pattern` property. |
| 78 */ | 86 */ |
| 79 pattern: { | 87 pattern: { |
| 80 type: String | 88 type: String |
| 81 }, | 89 }, |
| 82 | 90 |
| 83 /** | 91 /** |
| 84 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s | 92 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s |
| 85 * `required` property. | 93 * `required` property. |
| (...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 203 value: false | 211 value: false |
| 204 }, | 212 }, |
| 205 | 213 |
| 206 /** | 214 /** |
| 207 * Bind this to the `<input is="iron-input">`'s `size` property. | 215 * Bind this to the `<input is="iron-input">`'s `size` property. |
| 208 */ | 216 */ |
| 209 size: { | 217 size: { |
| 210 type: Number | 218 type: Number |
| 211 }, | 219 }, |
| 212 | 220 |
| 221 // Nonstandard attributes for binding if needed |
| 222 |
| 223 /** |
| 224 * Bind this to the `<input is="iron-input">`'s `autocapitalize` property. |
| 225 */ |
| 226 autocapitalize: { |
| 227 type: String, |
| 228 value: 'none' |
| 229 }, |
| 230 |
| 231 /** |
| 232 * Bind this to the `<input is="iron-input">`'s `autocorrect` property. |
| 233 */ |
| 234 autocorrect: { |
| 235 type: String, |
| 236 value: 'off' |
| 237 }, |
| 238 |
| 213 _ariaDescribedBy: { | 239 _ariaDescribedBy: { |
| 214 type: String, | 240 type: String, |
| 215 value: '' | 241 value: '' |
| 216 } | 242 } |
| 217 | 243 |
| 218 }, | 244 }, |
| 219 | 245 |
| 220 listeners: { | 246 listeners: { |
| 221 'addon-attached': '_onAddonAttached' | 247 'addon-attached': '_onAddonAttached' |
| 222 }, | 248 }, |
| 223 | 249 |
| 250 observers: [ |
| 251 '_focusedControlStateChanged(focused)' |
| 252 ], |
| 253 |
| 224 /** | 254 /** |
| 225 * Returns a reference to the input element. | 255 * Returns a reference to the input element. |
| 226 */ | 256 */ |
| 227 get inputElement() { | 257 get inputElement() { |
| 228 return this.$.input; | 258 return this.$.input; |
| 229 }, | 259 }, |
| 230 | 260 |
| 231 attached: function() { | 261 attached: function() { |
| 232 this._updateAriaLabelledBy(); | 262 this._updateAriaLabelledBy(); |
| 233 }, | 263 }, |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 278 } catch (e) { | 308 } catch (e) { |
| 279 // Just set the value and give up on the caret. | 309 // Just set the value and give up on the caret. |
| 280 this.value = newValue; | 310 this.value = newValue; |
| 281 } | 311 } |
| 282 }, | 312 }, |
| 283 | 313 |
| 284 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { | 314 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { |
| 285 return placeholder || alwaysFloatLabel; | 315 return placeholder || alwaysFloatLabel; |
| 286 }, | 316 }, |
| 287 | 317 |
| 318 _focusedControlStateChanged: function(focused) { |
| 319 // IronControlState stops the focus and blur events in order to redispatch
them on the host |
| 320 // element, but paper-input-container listens to those events. Since there
are more |
| 321 // pending work on focus/blur in IronControlState, I'm putting in this hac
k to get the |
| 322 // input focus state working for now. |
| 323 if (!this.$.container) { |
| 324 this.$.container = Polymer.dom(this.root).querySelector('paper-input-con
tainer'); |
| 325 if (!this.$.container) { |
| 326 return; |
| 327 } |
| 328 } |
| 329 if (focused) { |
| 330 this.$.container._onFocus(); |
| 331 } else { |
| 332 this.$.container._onBlur(); |
| 333 } |
| 334 }, |
| 335 |
| 288 _updateAriaLabelledBy: function() { | 336 _updateAriaLabelledBy: function() { |
| 289 var label = Polymer.dom(this.root).querySelector('label'); | 337 var label = Polymer.dom(this.root).querySelector('label'); |
| 290 if (!label) { | 338 if (!label) { |
| 291 this._ariaLabelledBy = ''; | 339 this._ariaLabelledBy = ''; |
| 292 return; | 340 return; |
| 293 } | 341 } |
| 294 var labelledBy; | 342 var labelledBy; |
| 295 if (label.id) { | 343 if (label.id) { |
| 296 labelledBy = label.id; | 344 labelledBy = label.id; |
| 297 } else { | 345 } else { |
| 298 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); | 346 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); |
| 299 label.id = labelledBy; | 347 label.id = labelledBy; |
| 300 } | 348 } |
| 301 this._ariaLabelledBy = labelledBy; | 349 this._ariaLabelledBy = labelledBy; |
| 302 } | 350 } |
| 303 | 351 |
| 304 }; | 352 }; |
| 305 | 353 |
| 354 /** @polymerBehavior */ |
| 355 Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBeha
viorImpl]; |
| 356 |
| OLD | NEW |