| OLD | NEW |
| (Empty) |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * @fileoverview | |
| 7 * 'cr-input' is a single-line text field for user input. It is a convenience | |
| 8 * element composed of a 'paper-input-decorator' and a 'input is="core-input"'. | |
| 9 * | |
| 10 * Example: | |
| 11 * | |
| 12 * <cr-input></cr-input> | |
| 13 * | |
| 14 * @group Chrome Elements | |
| 15 * @element cr-input | |
| 16 */ | |
| 17 Polymer('cr-input', { | |
| 18 publish: { | |
| 19 /** | |
| 20 * The label for this input. It normally appears as grey text inside | |
| 21 * the text input and disappears once the user enters text. | |
| 22 * | |
| 23 * @attribute label | |
| 24 * @type string | |
| 25 * @default '' | |
| 26 */ | |
| 27 label: '', | |
| 28 | |
| 29 /** | |
| 30 * If true, the label will "float" above the text input once the | |
| 31 * user enters text instead of disappearing. | |
| 32 * | |
| 33 * @attribute floatingLabel | |
| 34 * @type boolean | |
| 35 * @default true | |
| 36 */ | |
| 37 floatingLabel: true, | |
| 38 | |
| 39 /** | |
| 40 * Set to true to style the element as disabled. | |
| 41 * | |
| 42 * @attribute disabled | |
| 43 * @type boolean | |
| 44 * @default false | |
| 45 */ | |
| 46 disabled: {value: false, reflect: true}, | |
| 47 | |
| 48 /** | |
| 49 * Set to true to make the input read-only. | |
| 50 * | |
| 51 * @attribute readonly | |
| 52 * @type boolean | |
| 53 * @default false | |
| 54 */ | |
| 55 readonly: {value: false, reflect: true}, | |
| 56 | |
| 57 /** | |
| 58 * Set to true to mark the input as required. | |
| 59 * | |
| 60 * @attribute required | |
| 61 * @type boolean | |
| 62 * @default false | |
| 63 */ | |
| 64 required: {value: false, reflect: true}, | |
| 65 | |
| 66 /** | |
| 67 * The current value of the input. | |
| 68 * | |
| 69 * @attribute value | |
| 70 * @type string | |
| 71 * @default '' | |
| 72 */ | |
| 73 value: '', | |
| 74 | |
| 75 /** | |
| 76 * The validation pattern for the input. | |
| 77 * | |
| 78 * @attribute pattern | |
| 79 * @type string | |
| 80 * @default '' | |
| 81 */ | |
| 82 pattern: '', | |
| 83 | |
| 84 /** | |
| 85 * The type of the input (password, date, etc.). | |
| 86 * | |
| 87 * @attribute type | |
| 88 * @type string | |
| 89 * @default 'text' | |
| 90 */ | |
| 91 type: 'text', | |
| 92 | |
| 93 /** | |
| 94 * The message to display if the input value fails validation. If this | |
| 95 * is unset or the empty string, a default message is displayed depending | |
| 96 * on the type of validation error. | |
| 97 * | |
| 98 * @attribute error | |
| 99 * @type string | |
| 100 * @default '' | |
| 101 */ | |
| 102 error: '', | |
| 103 | |
| 104 /** | |
| 105 * The most recently committed value of the input. | |
| 106 * | |
| 107 * @attribute committedValue | |
| 108 * @type string | |
| 109 * @default '' | |
| 110 */ | |
| 111 committedValue: '', | |
| 112 }, | |
| 113 | |
| 114 computed: { | |
| 115 isInvalid: '$.decorator.isInvalid' | |
| 116 }, | |
| 117 | |
| 118 /** | |
| 119 * Focuses the 'input' element. | |
| 120 */ | |
| 121 focus: function() { | |
| 122 this.$.input.focus(); | |
| 123 }, | |
| 124 | |
| 125 valueChanged: function() { | |
| 126 this.$.decorator.updateLabelVisibility(this.value); | |
| 127 }, | |
| 128 | |
| 129 patternChanged: function() { | |
| 130 if (this.pattern) | |
| 131 this.$.input.pattern = this.pattern; | |
| 132 else | |
| 133 this.$.input.removeAttribute('pattern'); | |
| 134 }, | |
| 135 | |
| 136 /** @override */ | |
| 137 ready: function() { | |
| 138 this.$.events.forward(this.$.input, ['change']); | |
| 139 this.patternChanged(); | |
| 140 }, | |
| 141 }); | |
| OLD | NEW |