@vaadin/text-field 23.3.21 → 23.3.22
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.
- package/package.json +8 -8
- package/web-types.json +72 -94
- package/web-types.lit.json +30 -37
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/text-field",
|
|
3
|
-
"version": "23.3.
|
|
3
|
+
"version": "23.3.22",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/component-base": "~23.3.
|
|
39
|
-
"@vaadin/field-base": "~23.3.
|
|
40
|
-
"@vaadin/input-container": "~23.3.
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "~23.3.
|
|
42
|
-
"@vaadin/vaadin-material-styles": "~23.3.
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "~23.3.
|
|
38
|
+
"@vaadin/component-base": "~23.3.22",
|
|
39
|
+
"@vaadin/field-base": "~23.3.22",
|
|
40
|
+
"@vaadin/input-container": "~23.3.22",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "~23.3.22",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "~23.3.22",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "~23.3.22"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"web-types.json",
|
|
52
52
|
"web-types.lit.json"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "88ff9ce571e2cb894223e9a8f275c1bd8fd51e3e"
|
|
55
55
|
}
|
package/web-types.json
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/text-field",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "23.3.22",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-text-field",
|
|
11
|
-
"description": "`<vaadin-text-field>` is a web component that allows the user to input and edit text.\n\n```html\n<vaadin-text-field label=\"First Name\"></vaadin-text-field>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-field>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-field label=\"Email address\">\n <div slot=\"prefix\">Sent to:</div>\n <div slot=\"suffix\">@vaadin.com</div>\n</vaadin-text-field>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------|------------\n`disabled` | Set to a disabled text field | :host\n`has-value` | Set when the element has a value | :host\n`has-label` | Set when the element has a label | :host\n`has-helper` | Set when the element has helper text or slot | :host\n`has-error-message` | Set when the element has an error message | :host\n`invalid` | Set when the element is invalid | :host\n`input-prevented` | Temporarily set when invalid input is prevented | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set to a readonly text field | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
11
|
+
"description": "`<vaadin-text-field>` is a web component that allows the user to input and edit text.\n\n```html\n<vaadin-text-field label=\"First Name\"></vaadin-text-field>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-field>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-field label=\"Email address\">\n <div slot=\"prefix\">Sent to:</div>\n <div slot=\"suffix\">@vaadin.com</div>\n</vaadin-text-field>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------|------------\n`disabled` | Set to a disabled text field | :host\n`has-value` | Set when the element has a value | :host\n`has-label` | Set when the element has a label | :host\n`has-helper` | Set when the element has helper text or slot | :host\n`has-error-message` | Set when the element has an error message | :host\n`invalid` | Set when the element is invalid | :host\n`input-prevented` | Temporarily set when invalid input is prevented | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set to a readonly text field | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
14
|
+
"name": "value",
|
|
15
|
+
"description": "The value of the field.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"
|
|
18
|
+
"string",
|
|
19
19
|
"null",
|
|
20
20
|
"undefined"
|
|
21
21
|
]
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
|
-
"name": "
|
|
26
|
-
"description": "
|
|
25
|
+
"name": "invalid",
|
|
26
|
+
"description": "Set to true when the field is invalid.",
|
|
27
27
|
"value": {
|
|
28
28
|
"type": [
|
|
29
29
|
"boolean",
|
|
@@ -33,30 +33,30 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
"name": "
|
|
37
|
-
"description": "
|
|
36
|
+
"name": "required",
|
|
37
|
+
"description": "Specifies that the user must fill in a value.",
|
|
38
38
|
"value": {
|
|
39
39
|
"type": [
|
|
40
|
-
"
|
|
40
|
+
"boolean",
|
|
41
41
|
"null",
|
|
42
42
|
"undefined"
|
|
43
43
|
]
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
|
-
"name": "
|
|
48
|
-
"description": "
|
|
47
|
+
"name": "pattern",
|
|
48
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
49
49
|
"value": {
|
|
50
50
|
"type": [
|
|
51
|
-
"
|
|
51
|
+
"string",
|
|
52
52
|
"null",
|
|
53
53
|
"undefined"
|
|
54
54
|
]
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "prevent-invalid-input",
|
|
59
|
+
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
60
60
|
"value": {
|
|
61
61
|
"type": [
|
|
62
62
|
"boolean",
|
|
@@ -66,30 +66,30 @@
|
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
|
-
"name": "
|
|
70
|
-
"description": "
|
|
69
|
+
"name": "disabled",
|
|
70
|
+
"description": "If true, the user cannot interact with this element.",
|
|
71
71
|
"value": {
|
|
72
72
|
"type": [
|
|
73
|
-
"
|
|
73
|
+
"boolean",
|
|
74
74
|
"null",
|
|
75
75
|
"undefined"
|
|
76
76
|
]
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
80
|
+
"name": "autofocus",
|
|
81
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
|
-
"
|
|
84
|
+
"boolean",
|
|
85
85
|
"null",
|
|
86
86
|
"undefined"
|
|
87
87
|
]
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
91
|
+
"name": "label",
|
|
92
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
93
93
|
"value": {
|
|
94
94
|
"type": [
|
|
95
95
|
"string",
|
|
@@ -99,8 +99,8 @@
|
|
|
99
99
|
}
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
|
-
"name": "
|
|
103
|
-
"description": "
|
|
102
|
+
"name": "error-message",
|
|
103
|
+
"description": "Error to show when the field is invalid.",
|
|
104
104
|
"value": {
|
|
105
105
|
"type": [
|
|
106
106
|
"string",
|
|
@@ -110,8 +110,8 @@
|
|
|
110
110
|
}
|
|
111
111
|
},
|
|
112
112
|
{
|
|
113
|
-
"name": "
|
|
114
|
-
"description": "
|
|
113
|
+
"name": "helper-text",
|
|
114
|
+
"description": "String used for the helper text.",
|
|
115
115
|
"value": {
|
|
116
116
|
"type": [
|
|
117
117
|
"string",
|
|
@@ -121,30 +121,30 @@
|
|
|
121
121
|
}
|
|
122
122
|
},
|
|
123
123
|
{
|
|
124
|
-
"name": "
|
|
125
|
-
"description": "
|
|
124
|
+
"name": "allowed-char-pattern",
|
|
125
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
126
126
|
"value": {
|
|
127
127
|
"type": [
|
|
128
|
-
"
|
|
128
|
+
"string",
|
|
129
129
|
"null",
|
|
130
130
|
"undefined"
|
|
131
131
|
]
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "
|
|
135
|
+
"name": "autoselect",
|
|
136
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
137
137
|
"value": {
|
|
138
138
|
"type": [
|
|
139
|
-
"
|
|
139
|
+
"boolean",
|
|
140
140
|
"null",
|
|
141
141
|
"undefined"
|
|
142
142
|
]
|
|
143
143
|
}
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
|
-
"name": "
|
|
147
|
-
"description": "
|
|
146
|
+
"name": "clear-button-visible",
|
|
147
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
148
148
|
"value": {
|
|
149
149
|
"type": [
|
|
150
150
|
"boolean",
|
|
@@ -252,17 +252,6 @@
|
|
|
252
252
|
]
|
|
253
253
|
}
|
|
254
254
|
},
|
|
255
|
-
{
|
|
256
|
-
"name": "pattern",
|
|
257
|
-
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
258
|
-
"value": {
|
|
259
|
-
"type": [
|
|
260
|
-
"string",
|
|
261
|
-
"null",
|
|
262
|
-
"undefined"
|
|
263
|
-
]
|
|
264
|
-
}
|
|
265
|
-
},
|
|
266
255
|
{
|
|
267
256
|
"name": "theme",
|
|
268
257
|
"description": "The theme variants to apply to the component.",
|
|
@@ -278,19 +267,19 @@
|
|
|
278
267
|
"js": {
|
|
279
268
|
"properties": [
|
|
280
269
|
{
|
|
281
|
-
"name": "
|
|
282
|
-
"description": "
|
|
270
|
+
"name": "value",
|
|
271
|
+
"description": "The value of the field.",
|
|
283
272
|
"value": {
|
|
284
273
|
"type": [
|
|
285
|
-
"
|
|
274
|
+
"string",
|
|
286
275
|
"null",
|
|
287
276
|
"undefined"
|
|
288
277
|
]
|
|
289
278
|
}
|
|
290
279
|
},
|
|
291
280
|
{
|
|
292
|
-
"name": "
|
|
293
|
-
"description": "
|
|
281
|
+
"name": "invalid",
|
|
282
|
+
"description": "Set to true when the field is invalid.",
|
|
294
283
|
"value": {
|
|
295
284
|
"type": [
|
|
296
285
|
"boolean",
|
|
@@ -300,30 +289,30 @@
|
|
|
300
289
|
}
|
|
301
290
|
},
|
|
302
291
|
{
|
|
303
|
-
"name": "
|
|
304
|
-
"description": "
|
|
292
|
+
"name": "required",
|
|
293
|
+
"description": "Specifies that the user must fill in a value.",
|
|
305
294
|
"value": {
|
|
306
295
|
"type": [
|
|
307
|
-
"
|
|
296
|
+
"boolean",
|
|
308
297
|
"null",
|
|
309
298
|
"undefined"
|
|
310
299
|
]
|
|
311
300
|
}
|
|
312
301
|
},
|
|
313
302
|
{
|
|
314
|
-
"name": "
|
|
315
|
-
"description": "
|
|
303
|
+
"name": "pattern",
|
|
304
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
316
305
|
"value": {
|
|
317
306
|
"type": [
|
|
318
|
-
"
|
|
307
|
+
"string",
|
|
319
308
|
"null",
|
|
320
309
|
"undefined"
|
|
321
310
|
]
|
|
322
311
|
}
|
|
323
312
|
},
|
|
324
313
|
{
|
|
325
|
-
"name": "
|
|
326
|
-
"description": "
|
|
314
|
+
"name": "preventInvalidInput",
|
|
315
|
+
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
327
316
|
"value": {
|
|
328
317
|
"type": [
|
|
329
318
|
"boolean",
|
|
@@ -333,30 +322,30 @@
|
|
|
333
322
|
}
|
|
334
323
|
},
|
|
335
324
|
{
|
|
336
|
-
"name": "
|
|
337
|
-
"description": "
|
|
325
|
+
"name": "disabled",
|
|
326
|
+
"description": "If true, the user cannot interact with this element.",
|
|
338
327
|
"value": {
|
|
339
328
|
"type": [
|
|
340
|
-
"
|
|
329
|
+
"boolean",
|
|
341
330
|
"null",
|
|
342
331
|
"undefined"
|
|
343
332
|
]
|
|
344
333
|
}
|
|
345
334
|
},
|
|
346
335
|
{
|
|
347
|
-
"name": "
|
|
348
|
-
"description": "
|
|
336
|
+
"name": "autofocus",
|
|
337
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
349
338
|
"value": {
|
|
350
339
|
"type": [
|
|
351
|
-
"
|
|
340
|
+
"boolean",
|
|
352
341
|
"null",
|
|
353
342
|
"undefined"
|
|
354
343
|
]
|
|
355
344
|
}
|
|
356
345
|
},
|
|
357
346
|
{
|
|
358
|
-
"name": "
|
|
359
|
-
"description": "
|
|
347
|
+
"name": "label",
|
|
348
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
360
349
|
"value": {
|
|
361
350
|
"type": [
|
|
362
351
|
"string",
|
|
@@ -366,8 +355,8 @@
|
|
|
366
355
|
}
|
|
367
356
|
},
|
|
368
357
|
{
|
|
369
|
-
"name": "
|
|
370
|
-
"description": "
|
|
358
|
+
"name": "errorMessage",
|
|
359
|
+
"description": "Error to show when the field is invalid.",
|
|
371
360
|
"value": {
|
|
372
361
|
"type": [
|
|
373
362
|
"string",
|
|
@@ -377,8 +366,8 @@
|
|
|
377
366
|
}
|
|
378
367
|
},
|
|
379
368
|
{
|
|
380
|
-
"name": "
|
|
381
|
-
"description": "
|
|
369
|
+
"name": "helperText",
|
|
370
|
+
"description": "String used for the helper text.",
|
|
382
371
|
"value": {
|
|
383
372
|
"type": [
|
|
384
373
|
"string",
|
|
@@ -388,30 +377,30 @@
|
|
|
388
377
|
}
|
|
389
378
|
},
|
|
390
379
|
{
|
|
391
|
-
"name": "
|
|
392
|
-
"description": "
|
|
380
|
+
"name": "allowedCharPattern",
|
|
381
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
393
382
|
"value": {
|
|
394
383
|
"type": [
|
|
395
|
-
"
|
|
384
|
+
"string",
|
|
396
385
|
"null",
|
|
397
386
|
"undefined"
|
|
398
387
|
]
|
|
399
388
|
}
|
|
400
389
|
},
|
|
401
390
|
{
|
|
402
|
-
"name": "
|
|
403
|
-
"description": "
|
|
391
|
+
"name": "autoselect",
|
|
392
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
404
393
|
"value": {
|
|
405
394
|
"type": [
|
|
406
|
-
"
|
|
395
|
+
"boolean",
|
|
407
396
|
"null",
|
|
408
397
|
"undefined"
|
|
409
398
|
]
|
|
410
399
|
}
|
|
411
400
|
},
|
|
412
401
|
{
|
|
413
|
-
"name": "
|
|
414
|
-
"description": "
|
|
402
|
+
"name": "clearButtonVisible",
|
|
403
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
415
404
|
"value": {
|
|
416
405
|
"type": [
|
|
417
406
|
"boolean",
|
|
@@ -518,17 +507,6 @@
|
|
|
518
507
|
"undefined"
|
|
519
508
|
]
|
|
520
509
|
}
|
|
521
|
-
},
|
|
522
|
-
{
|
|
523
|
-
"name": "pattern",
|
|
524
|
-
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
525
|
-
"value": {
|
|
526
|
-
"type": [
|
|
527
|
-
"string",
|
|
528
|
-
"null",
|
|
529
|
-
"undefined"
|
|
530
|
-
]
|
|
531
|
-
}
|
|
532
510
|
}
|
|
533
511
|
],
|
|
534
512
|
"events": [
|
|
@@ -544,13 +522,13 @@
|
|
|
544
522
|
"name": "input",
|
|
545
523
|
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
|
|
546
524
|
},
|
|
547
|
-
{
|
|
548
|
-
"name": "invalid-changed",
|
|
549
|
-
"description": "Fired when the `invalid` property changes."
|
|
550
|
-
},
|
|
551
525
|
{
|
|
552
526
|
"name": "value-changed",
|
|
553
527
|
"description": "Fired when the `value` property changes."
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
"name": "invalid-changed",
|
|
531
|
+
"description": "Fired when the `invalid` property changes."
|
|
554
532
|
}
|
|
555
533
|
]
|
|
556
534
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/text-field",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "23.3.22",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,40 +16,40 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-text-field",
|
|
19
|
-
"description": "`<vaadin-text-field>` is a web component that allows the user to input and edit text.\n\n```html\n<vaadin-text-field label=\"First Name\"></vaadin-text-field>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-field>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-field label=\"Email address\">\n <div slot=\"prefix\">Sent to:</div>\n <div slot=\"suffix\">@vaadin.com</div>\n</vaadin-text-field>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------|------------\n`disabled` | Set to a disabled text field | :host\n`has-value` | Set when the element has a value | :host\n`has-label` | Set when the element has a label | :host\n`has-helper` | Set when the element has helper text or slot | :host\n`has-error-message` | Set when the element has an error message | :host\n`invalid` | Set when the element is invalid | :host\n`input-prevented` | Temporarily set when invalid input is prevented | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set to a readonly text field | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
19
|
+
"description": "`<vaadin-text-field>` is a web component that allows the user to input and edit text.\n\n```html\n<vaadin-text-field label=\"First Name\"></vaadin-text-field>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-field>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-field label=\"Email address\">\n <div slot=\"prefix\">Sent to:</div>\n <div slot=\"suffix\">@vaadin.com</div>\n</vaadin-text-field>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------|------------\n`disabled` | Set to a disabled text field | :host\n`has-value` | Set when the element has a value | :host\n`has-label` | Set when the element has a label | :host\n`has-helper` | Set when the element has helper text or slot | :host\n`has-error-message` | Set when the element has an error message | :host\n`invalid` | Set when the element is invalid | :host\n`input-prevented` | Temporarily set when invalid input is prevented | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set to a readonly text field | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
|
-
"name": "?
|
|
24
|
-
"description": "
|
|
23
|
+
"name": "?invalid",
|
|
24
|
+
"description": "Set to true when the field is invalid.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "?
|
|
31
|
-
"description": "
|
|
30
|
+
"name": "?required",
|
|
31
|
+
"description": "Specifies that the user must fill in a value.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "
|
|
37
|
+
"name": "?preventInvalidInput",
|
|
38
|
+
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "
|
|
44
|
+
"name": "?disabled",
|
|
45
|
+
"description": "If true, the user cannot interact with this element.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "?
|
|
52
|
-
"description": "
|
|
51
|
+
"name": "?autofocus",
|
|
52
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
@@ -62,50 +62,50 @@
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": "?
|
|
66
|
-
"description": "
|
|
65
|
+
"name": "?clearButtonVisible",
|
|
66
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "
|
|
73
|
-
"description": "
|
|
72
|
+
"name": "?readonly",
|
|
73
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".value",
|
|
80
|
+
"description": "The value of the field.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": ".
|
|
87
|
-
"description": "
|
|
86
|
+
"name": ".pattern",
|
|
87
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".label",
|
|
94
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": ".
|
|
101
|
-
"description": "
|
|
100
|
+
"name": ".errorMessage",
|
|
101
|
+
"description": "Error to show when the field is invalid.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": ".
|
|
108
|
-
"description": "
|
|
107
|
+
"name": ".helperText",
|
|
108
|
+
"description": "String used for the helper text.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
@@ -173,13 +173,6 @@
|
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
|
-
{
|
|
177
|
-
"name": ".pattern",
|
|
178
|
-
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
179
|
-
"value": {
|
|
180
|
-
"kind": "expression"
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
176
|
{
|
|
184
177
|
"name": "@validated",
|
|
185
178
|
"description": "Fired whenever the field is validated.",
|
|
@@ -202,15 +195,15 @@
|
|
|
202
195
|
}
|
|
203
196
|
},
|
|
204
197
|
{
|
|
205
|
-
"name": "@
|
|
206
|
-
"description": "Fired when the `
|
|
198
|
+
"name": "@value-changed",
|
|
199
|
+
"description": "Fired when the `value` property changes.",
|
|
207
200
|
"value": {
|
|
208
201
|
"kind": "expression"
|
|
209
202
|
}
|
|
210
203
|
},
|
|
211
204
|
{
|
|
212
|
-
"name": "@
|
|
213
|
-
"description": "Fired when the `
|
|
205
|
+
"name": "@invalid-changed",
|
|
206
|
+
"description": "Fired when the `invalid` property changes.",
|
|
214
207
|
"value": {
|
|
215
208
|
"kind": "expression"
|
|
216
209
|
}
|