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 |