@vaadin/text-field 23.3.20 → 23.3.21
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 +94 -72
- package/web-types.lit.json +37 -30
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/text-field",
|
|
3
|
-
"version": "23.3.
|
|
3
|
+
"version": "23.3.21",
|
|
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.21",
|
|
39
|
+
"@vaadin/field-base": "~23.3.21",
|
|
40
|
+
"@vaadin/input-container": "~23.3.21",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "~23.3.21",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "~23.3.21",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "~23.3.21"
|
|
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": "5caee824b60295eb1e03b736880ed73f62a8988c"
|
|
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": "24.2.0-alpha1",
|
|
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/
|
|
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.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "If true, the user cannot interact with this element.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"
|
|
18
|
+
"boolean",
|
|
19
19
|
"null",
|
|
20
20
|
"undefined"
|
|
21
21
|
]
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
|
-
"name": "
|
|
26
|
-
"description": "
|
|
25
|
+
"name": "autofocus",
|
|
26
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
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": "label",
|
|
37
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
38
38
|
"value": {
|
|
39
39
|
"type": [
|
|
40
|
-
"
|
|
40
|
+
"string",
|
|
41
41
|
"null",
|
|
42
42
|
"undefined"
|
|
43
43
|
]
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
|
-
"name": "
|
|
48
|
-
"description": "
|
|
47
|
+
"name": "invalid",
|
|
48
|
+
"description": "Set to true when the field is invalid.",
|
|
49
49
|
"value": {
|
|
50
50
|
"type": [
|
|
51
|
-
"
|
|
51
|
+
"boolean",
|
|
52
52
|
"null",
|
|
53
53
|
"undefined"
|
|
54
54
|
]
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "required",
|
|
59
|
+
"description": "Specifies that the user must fill in a value.",
|
|
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": "error-message",
|
|
70
|
+
"description": "Error to show when the field is invalid.",
|
|
71
71
|
"value": {
|
|
72
72
|
"type": [
|
|
73
|
-
"
|
|
73
|
+
"string",
|
|
74
74
|
"null",
|
|
75
75
|
"undefined"
|
|
76
76
|
]
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
80
|
+
"name": "helper-text",
|
|
81
|
+
"description": "String used for the helper text.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
|
-
"
|
|
84
|
+
"string",
|
|
85
85
|
"null",
|
|
86
86
|
"undefined"
|
|
87
87
|
]
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
91
|
+
"name": "accessible-name",
|
|
92
|
+
"description": "String used to label the component to screen reader users.",
|
|
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": "accessible-name-ref",
|
|
103
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
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": "value",
|
|
114
|
+
"description": "The value of the field.",
|
|
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": "clear-button-visible",
|
|
125
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
126
126
|
"value": {
|
|
127
127
|
"type": [
|
|
128
|
-
"
|
|
128
|
+
"boolean",
|
|
129
129
|
"null",
|
|
130
130
|
"undefined"
|
|
131
131
|
]
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "
|
|
135
|
+
"name": "allowed-char-pattern",
|
|
136
|
+
"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-]\"`",
|
|
137
137
|
"value": {
|
|
138
138
|
"type": [
|
|
139
|
-
"
|
|
139
|
+
"string",
|
|
140
140
|
"null",
|
|
141
141
|
"undefined"
|
|
142
142
|
]
|
|
143
143
|
}
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
|
-
"name": "
|
|
147
|
-
"description": "
|
|
146
|
+
"name": "autoselect",
|
|
147
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
148
148
|
"value": {
|
|
149
149
|
"type": [
|
|
150
150
|
"boolean",
|
|
@@ -252,6 +252,17 @@
|
|
|
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
|
+
},
|
|
255
266
|
{
|
|
256
267
|
"name": "theme",
|
|
257
268
|
"description": "The theme variants to apply to the component.",
|
|
@@ -267,19 +278,19 @@
|
|
|
267
278
|
"js": {
|
|
268
279
|
"properties": [
|
|
269
280
|
{
|
|
270
|
-
"name": "
|
|
271
|
-
"description": "
|
|
281
|
+
"name": "disabled",
|
|
282
|
+
"description": "If true, the user cannot interact with this element.",
|
|
272
283
|
"value": {
|
|
273
284
|
"type": [
|
|
274
|
-
"
|
|
285
|
+
"boolean",
|
|
275
286
|
"null",
|
|
276
287
|
"undefined"
|
|
277
288
|
]
|
|
278
289
|
}
|
|
279
290
|
},
|
|
280
291
|
{
|
|
281
|
-
"name": "
|
|
282
|
-
"description": "
|
|
292
|
+
"name": "autofocus",
|
|
293
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
283
294
|
"value": {
|
|
284
295
|
"type": [
|
|
285
296
|
"boolean",
|
|
@@ -289,30 +300,30 @@
|
|
|
289
300
|
}
|
|
290
301
|
},
|
|
291
302
|
{
|
|
292
|
-
"name": "
|
|
293
|
-
"description": "
|
|
303
|
+
"name": "label",
|
|
304
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
294
305
|
"value": {
|
|
295
306
|
"type": [
|
|
296
|
-
"
|
|
307
|
+
"string",
|
|
297
308
|
"null",
|
|
298
309
|
"undefined"
|
|
299
310
|
]
|
|
300
311
|
}
|
|
301
312
|
},
|
|
302
313
|
{
|
|
303
|
-
"name": "
|
|
304
|
-
"description": "
|
|
314
|
+
"name": "invalid",
|
|
315
|
+
"description": "Set to true when the field is invalid.",
|
|
305
316
|
"value": {
|
|
306
317
|
"type": [
|
|
307
|
-
"
|
|
318
|
+
"boolean",
|
|
308
319
|
"null",
|
|
309
320
|
"undefined"
|
|
310
321
|
]
|
|
311
322
|
}
|
|
312
323
|
},
|
|
313
324
|
{
|
|
314
|
-
"name": "
|
|
315
|
-
"description": "
|
|
325
|
+
"name": "required",
|
|
326
|
+
"description": "Specifies that the user must fill in a value.",
|
|
316
327
|
"value": {
|
|
317
328
|
"type": [
|
|
318
329
|
"boolean",
|
|
@@ -322,30 +333,30 @@
|
|
|
322
333
|
}
|
|
323
334
|
},
|
|
324
335
|
{
|
|
325
|
-
"name": "
|
|
326
|
-
"description": "
|
|
336
|
+
"name": "errorMessage",
|
|
337
|
+
"description": "Error to show when the field is invalid.",
|
|
327
338
|
"value": {
|
|
328
339
|
"type": [
|
|
329
|
-
"
|
|
340
|
+
"string",
|
|
330
341
|
"null",
|
|
331
342
|
"undefined"
|
|
332
343
|
]
|
|
333
344
|
}
|
|
334
345
|
},
|
|
335
346
|
{
|
|
336
|
-
"name": "
|
|
337
|
-
"description": "
|
|
347
|
+
"name": "helperText",
|
|
348
|
+
"description": "String used for the helper text.",
|
|
338
349
|
"value": {
|
|
339
350
|
"type": [
|
|
340
|
-
"
|
|
351
|
+
"string",
|
|
341
352
|
"null",
|
|
342
353
|
"undefined"
|
|
343
354
|
]
|
|
344
355
|
}
|
|
345
356
|
},
|
|
346
357
|
{
|
|
347
|
-
"name": "
|
|
348
|
-
"description": "
|
|
358
|
+
"name": "accessibleName",
|
|
359
|
+
"description": "String used to label the component to screen reader users.",
|
|
349
360
|
"value": {
|
|
350
361
|
"type": [
|
|
351
362
|
"string",
|
|
@@ -355,8 +366,8 @@
|
|
|
355
366
|
}
|
|
356
367
|
},
|
|
357
368
|
{
|
|
358
|
-
"name": "
|
|
359
|
-
"description": "
|
|
369
|
+
"name": "accessibleNameRef",
|
|
370
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
360
371
|
"value": {
|
|
361
372
|
"type": [
|
|
362
373
|
"string",
|
|
@@ -366,8 +377,8 @@
|
|
|
366
377
|
}
|
|
367
378
|
},
|
|
368
379
|
{
|
|
369
|
-
"name": "
|
|
370
|
-
"description": "
|
|
380
|
+
"name": "value",
|
|
381
|
+
"description": "The value of the field.",
|
|
371
382
|
"value": {
|
|
372
383
|
"type": [
|
|
373
384
|
"string",
|
|
@@ -377,30 +388,30 @@
|
|
|
377
388
|
}
|
|
378
389
|
},
|
|
379
390
|
{
|
|
380
|
-
"name": "
|
|
381
|
-
"description": "
|
|
391
|
+
"name": "clearButtonVisible",
|
|
392
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
382
393
|
"value": {
|
|
383
394
|
"type": [
|
|
384
|
-
"
|
|
395
|
+
"boolean",
|
|
385
396
|
"null",
|
|
386
397
|
"undefined"
|
|
387
398
|
]
|
|
388
399
|
}
|
|
389
400
|
},
|
|
390
401
|
{
|
|
391
|
-
"name": "
|
|
392
|
-
"description": "
|
|
402
|
+
"name": "allowedCharPattern",
|
|
403
|
+
"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
404
|
"value": {
|
|
394
405
|
"type": [
|
|
395
|
-
"
|
|
406
|
+
"string",
|
|
396
407
|
"null",
|
|
397
408
|
"undefined"
|
|
398
409
|
]
|
|
399
410
|
}
|
|
400
411
|
},
|
|
401
412
|
{
|
|
402
|
-
"name": "
|
|
403
|
-
"description": "
|
|
413
|
+
"name": "autoselect",
|
|
414
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
404
415
|
"value": {
|
|
405
416
|
"type": [
|
|
406
417
|
"boolean",
|
|
@@ -507,6 +518,17 @@
|
|
|
507
518
|
"undefined"
|
|
508
519
|
]
|
|
509
520
|
}
|
|
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
|
+
}
|
|
510
532
|
}
|
|
511
533
|
],
|
|
512
534
|
"events": [
|
|
@@ -522,13 +544,13 @@
|
|
|
522
544
|
"name": "input",
|
|
523
545
|
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
|
|
524
546
|
},
|
|
525
|
-
{
|
|
526
|
-
"name": "value-changed",
|
|
527
|
-
"description": "Fired when the `value` property changes."
|
|
528
|
-
},
|
|
529
547
|
{
|
|
530
548
|
"name": "invalid-changed",
|
|
531
549
|
"description": "Fired when the `invalid` property changes."
|
|
550
|
+
},
|
|
551
|
+
{
|
|
552
|
+
"name": "value-changed",
|
|
553
|
+
"description": "Fired when the `value` property changes."
|
|
532
554
|
}
|
|
533
555
|
]
|
|
534
556
|
}
|
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": "24.2.0-alpha1",
|
|
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/
|
|
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.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
|
-
"name": "?
|
|
24
|
-
"description": "
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "?
|
|
31
|
-
"description": "
|
|
30
|
+
"name": "?autofocus",
|
|
31
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "
|
|
37
|
+
"name": "?invalid",
|
|
38
|
+
"description": "Set to true when the field is invalid.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "
|
|
44
|
+
"name": "?required",
|
|
45
|
+
"description": "Specifies that the user must fill in a value.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "?
|
|
52
|
-
"description": "
|
|
51
|
+
"name": "?clearButtonVisible",
|
|
52
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
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": "?readonly",
|
|
66
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "
|
|
73
|
-
"description": "
|
|
72
|
+
"name": ".label",
|
|
73
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".errorMessage",
|
|
80
|
+
"description": "Error to show when the field is invalid.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": ".
|
|
87
|
-
"description": "
|
|
86
|
+
"name": ".helperText",
|
|
87
|
+
"description": "String used for the helper text.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".accessibleName",
|
|
94
|
+
"description": "String used to label the component to screen reader users.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": ".
|
|
101
|
-
"description": "
|
|
100
|
+
"name": ".accessibleNameRef",
|
|
101
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": ".
|
|
108
|
-
"description": "
|
|
107
|
+
"name": ".value",
|
|
108
|
+
"description": "The value of the field.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
@@ -173,6 +173,13 @@
|
|
|
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
|
+
},
|
|
176
183
|
{
|
|
177
184
|
"name": "@validated",
|
|
178
185
|
"description": "Fired whenever the field is validated.",
|
|
@@ -195,15 +202,15 @@
|
|
|
195
202
|
}
|
|
196
203
|
},
|
|
197
204
|
{
|
|
198
|
-
"name": "@
|
|
199
|
-
"description": "Fired when the `
|
|
205
|
+
"name": "@invalid-changed",
|
|
206
|
+
"description": "Fired when the `invalid` property changes.",
|
|
200
207
|
"value": {
|
|
201
208
|
"kind": "expression"
|
|
202
209
|
}
|
|
203
210
|
},
|
|
204
211
|
{
|
|
205
|
-
"name": "@
|
|
206
|
-
"description": "Fired when the `
|
|
212
|
+
"name": "@value-changed",
|
|
213
|
+
"description": "Fired when the `value` property changes.",
|
|
207
214
|
"value": {
|
|
208
215
|
"kind": "expression"
|
|
209
216
|
}
|