@vaadin/text-field 25.2.7 → 25.3.0-alpha10
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/custom-elements.json +139 -36
- package/package.json +11 -11
- package/src/vaadin-text-field-mixin.d.ts +8 -0
- package/src/vaadin-text-field-mixin.js +12 -1
- package/src/vaadin-text-field.js +4 -3
- package/web-types.json +42 -8
- package/web-types.lit.json +17 -3
package/custom-elements.json
CHANGED
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
"description": "A mixin providing common text field functionality.",
|
|
27
27
|
"name": "TextFieldMixin",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "accessibleDescriptionRef",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
37
|
+
"attribute": "accessible-description-ref",
|
|
38
|
+
"inheritedFrom": {
|
|
39
|
+
"name": "FieldMixin",
|
|
40
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
29
43
|
{
|
|
30
44
|
"kind": "field",
|
|
31
45
|
"name": "accessibleName",
|
|
@@ -33,7 +47,7 @@
|
|
|
33
47
|
"type": {
|
|
34
48
|
"text": "string"
|
|
35
49
|
},
|
|
36
|
-
"description": "String used to label the component
|
|
50
|
+
"description": "String used to label the component for screen reader users.",
|
|
37
51
|
"attribute": "accessible-name",
|
|
38
52
|
"inheritedFrom": {
|
|
39
53
|
"name": "FieldMixin",
|
|
@@ -47,7 +61,7 @@
|
|
|
47
61
|
"type": {
|
|
48
62
|
"text": "string"
|
|
49
63
|
},
|
|
50
|
-
"description": "
|
|
64
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
51
65
|
"attribute": "accessible-name-ref",
|
|
52
66
|
"inheritedFrom": {
|
|
53
67
|
"name": "FieldMixin",
|
|
@@ -217,6 +231,16 @@
|
|
|
217
231
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
218
232
|
}
|
|
219
233
|
},
|
|
234
|
+
{
|
|
235
|
+
"kind": "field",
|
|
236
|
+
"name": "inputMode",
|
|
237
|
+
"privacy": "public",
|
|
238
|
+
"type": {
|
|
239
|
+
"text": "string"
|
|
240
|
+
},
|
|
241
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
242
|
+
"attribute": "inputmode"
|
|
243
|
+
},
|
|
220
244
|
{
|
|
221
245
|
"kind": "field",
|
|
222
246
|
"name": "invalid",
|
|
@@ -389,12 +413,24 @@
|
|
|
389
413
|
}
|
|
390
414
|
],
|
|
391
415
|
"attributes": [
|
|
416
|
+
{
|
|
417
|
+
"name": "accessible-description-ref",
|
|
418
|
+
"type": {
|
|
419
|
+
"text": "string"
|
|
420
|
+
},
|
|
421
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
422
|
+
"fieldName": "accessibleDescriptionRef",
|
|
423
|
+
"inheritedFrom": {
|
|
424
|
+
"name": "FieldMixin",
|
|
425
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
392
428
|
{
|
|
393
429
|
"name": "accessible-name",
|
|
394
430
|
"type": {
|
|
395
431
|
"text": "string"
|
|
396
432
|
},
|
|
397
|
-
"description": "String used to label the component
|
|
433
|
+
"description": "String used to label the component for screen reader users.",
|
|
398
434
|
"fieldName": "accessibleName",
|
|
399
435
|
"inheritedFrom": {
|
|
400
436
|
"name": "FieldMixin",
|
|
@@ -406,7 +442,7 @@
|
|
|
406
442
|
"type": {
|
|
407
443
|
"text": "string"
|
|
408
444
|
},
|
|
409
|
-
"description": "
|
|
445
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
410
446
|
"fieldName": "accessibleNameRef",
|
|
411
447
|
"inheritedFrom": {
|
|
412
448
|
"name": "FieldMixin",
|
|
@@ -533,6 +569,14 @@
|
|
|
533
569
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
534
570
|
}
|
|
535
571
|
},
|
|
572
|
+
{
|
|
573
|
+
"name": "inputmode",
|
|
574
|
+
"type": {
|
|
575
|
+
"text": "string"
|
|
576
|
+
},
|
|
577
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
578
|
+
"fieldName": "inputMode"
|
|
579
|
+
},
|
|
536
580
|
{
|
|
537
581
|
"name": "invalid",
|
|
538
582
|
"type": {
|
|
@@ -721,6 +765,20 @@
|
|
|
721
765
|
"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 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`field-button` | Set on the clear button\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\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
722
766
|
"name": "TextField",
|
|
723
767
|
"members": [
|
|
768
|
+
{
|
|
769
|
+
"kind": "field",
|
|
770
|
+
"name": "accessibleDescriptionRef",
|
|
771
|
+
"privacy": "public",
|
|
772
|
+
"type": {
|
|
773
|
+
"text": "string"
|
|
774
|
+
},
|
|
775
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
776
|
+
"attribute": "accessible-description-ref",
|
|
777
|
+
"inheritedFrom": {
|
|
778
|
+
"name": "FieldMixin",
|
|
779
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
780
|
+
}
|
|
781
|
+
},
|
|
724
782
|
{
|
|
725
783
|
"kind": "field",
|
|
726
784
|
"name": "accessibleName",
|
|
@@ -728,7 +786,7 @@
|
|
|
728
786
|
"type": {
|
|
729
787
|
"text": "string"
|
|
730
788
|
},
|
|
731
|
-
"description": "String used to label the component
|
|
789
|
+
"description": "String used to label the component for screen reader users.",
|
|
732
790
|
"attribute": "accessible-name",
|
|
733
791
|
"inheritedFrom": {
|
|
734
792
|
"name": "FieldMixin",
|
|
@@ -742,7 +800,7 @@
|
|
|
742
800
|
"type": {
|
|
743
801
|
"text": "string"
|
|
744
802
|
},
|
|
745
|
-
"description": "
|
|
803
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
746
804
|
"attribute": "accessible-name-ref",
|
|
747
805
|
"inheritedFrom": {
|
|
748
806
|
"name": "FieldMixin",
|
|
@@ -912,6 +970,20 @@
|
|
|
912
970
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
913
971
|
}
|
|
914
972
|
},
|
|
973
|
+
{
|
|
974
|
+
"kind": "field",
|
|
975
|
+
"name": "inputMode",
|
|
976
|
+
"privacy": "public",
|
|
977
|
+
"type": {
|
|
978
|
+
"text": "string"
|
|
979
|
+
},
|
|
980
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
981
|
+
"attribute": "inputmode",
|
|
982
|
+
"inheritedFrom": {
|
|
983
|
+
"name": "TextFieldMixin",
|
|
984
|
+
"module": "src/vaadin-text-field-mixin.js"
|
|
985
|
+
}
|
|
986
|
+
},
|
|
915
987
|
{
|
|
916
988
|
"kind": "field",
|
|
917
989
|
"name": "invalid",
|
|
@@ -1136,41 +1208,25 @@
|
|
|
1136
1208
|
"name": "value-changed"
|
|
1137
1209
|
}
|
|
1138
1210
|
],
|
|
1139
|
-
"
|
|
1140
|
-
{
|
|
1141
|
-
"name": "TextFieldMixin",
|
|
1142
|
-
"module": "src/vaadin-text-field-mixin.js"
|
|
1143
|
-
},
|
|
1144
|
-
{
|
|
1145
|
-
"name": "ThemableMixin",
|
|
1146
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1147
|
-
},
|
|
1148
|
-
{
|
|
1149
|
-
"name": "ElementMixin",
|
|
1150
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1151
|
-
},
|
|
1211
|
+
"attributes": [
|
|
1152
1212
|
{
|
|
1153
|
-
"name": "
|
|
1154
|
-
"
|
|
1213
|
+
"name": "accessible-description-ref",
|
|
1214
|
+
"type": {
|
|
1215
|
+
"text": "string"
|
|
1216
|
+
},
|
|
1217
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
1218
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1219
|
+
"inheritedFrom": {
|
|
1220
|
+
"name": "FieldMixin",
|
|
1221
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1222
|
+
}
|
|
1155
1223
|
},
|
|
1156
|
-
{
|
|
1157
|
-
"name": "LumoInjectionMixin",
|
|
1158
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1159
|
-
}
|
|
1160
|
-
],
|
|
1161
|
-
"superclass": {
|
|
1162
|
-
"name": "LitElement",
|
|
1163
|
-
"package": "lit"
|
|
1164
|
-
},
|
|
1165
|
-
"tagName": "vaadin-text-field",
|
|
1166
|
-
"customElement": true,
|
|
1167
|
-
"attributes": [
|
|
1168
1224
|
{
|
|
1169
1225
|
"name": "accessible-name",
|
|
1170
1226
|
"type": {
|
|
1171
1227
|
"text": "string"
|
|
1172
1228
|
},
|
|
1173
|
-
"description": "String used to label the component
|
|
1229
|
+
"description": "String used to label the component for screen reader users.",
|
|
1174
1230
|
"fieldName": "accessibleName",
|
|
1175
1231
|
"inheritedFrom": {
|
|
1176
1232
|
"name": "FieldMixin",
|
|
@@ -1182,7 +1238,7 @@
|
|
|
1182
1238
|
"type": {
|
|
1183
1239
|
"text": "string"
|
|
1184
1240
|
},
|
|
1185
|
-
"description": "
|
|
1241
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1186
1242
|
"fieldName": "accessibleNameRef",
|
|
1187
1243
|
"inheritedFrom": {
|
|
1188
1244
|
"name": "FieldMixin",
|
|
@@ -1309,6 +1365,18 @@
|
|
|
1309
1365
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1310
1366
|
}
|
|
1311
1367
|
},
|
|
1368
|
+
{
|
|
1369
|
+
"name": "inputmode",
|
|
1370
|
+
"type": {
|
|
1371
|
+
"text": "string"
|
|
1372
|
+
},
|
|
1373
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
1374
|
+
"fieldName": "inputMode",
|
|
1375
|
+
"inheritedFrom": {
|
|
1376
|
+
"name": "TextFieldMixin",
|
|
1377
|
+
"module": "src/vaadin-text-field-mixin.js"
|
|
1378
|
+
}
|
|
1379
|
+
},
|
|
1312
1380
|
{
|
|
1313
1381
|
"name": "invalid",
|
|
1314
1382
|
"type": {
|
|
@@ -1429,6 +1497,13 @@
|
|
|
1429
1497
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1430
1498
|
}
|
|
1431
1499
|
},
|
|
1500
|
+
{
|
|
1501
|
+
"type": {
|
|
1502
|
+
"text": "string"
|
|
1503
|
+
},
|
|
1504
|
+
"description": "The theme variants to apply to the component.",
|
|
1505
|
+
"name": "theme"
|
|
1506
|
+
},
|
|
1432
1507
|
{
|
|
1433
1508
|
"name": "title",
|
|
1434
1509
|
"type": {
|
|
@@ -1453,7 +1528,35 @@
|
|
|
1453
1528
|
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
1454
1529
|
}
|
|
1455
1530
|
}
|
|
1456
|
-
]
|
|
1531
|
+
],
|
|
1532
|
+
"mixins": [
|
|
1533
|
+
{
|
|
1534
|
+
"name": "TextFieldMixin",
|
|
1535
|
+
"module": "src/vaadin-text-field-mixin.js"
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"name": "ThemableMixin",
|
|
1539
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1540
|
+
},
|
|
1541
|
+
{
|
|
1542
|
+
"name": "ElementMixin",
|
|
1543
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1544
|
+
},
|
|
1545
|
+
{
|
|
1546
|
+
"name": "PolylitMixin",
|
|
1547
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1548
|
+
},
|
|
1549
|
+
{
|
|
1550
|
+
"name": "LumoInjectionMixin",
|
|
1551
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1552
|
+
}
|
|
1553
|
+
],
|
|
1554
|
+
"superclass": {
|
|
1555
|
+
"name": "LitElement",
|
|
1556
|
+
"package": "lit"
|
|
1557
|
+
},
|
|
1558
|
+
"tagName": "vaadin-text-field",
|
|
1559
|
+
"customElement": true
|
|
1457
1560
|
}
|
|
1458
1561
|
],
|
|
1459
1562
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/text-field",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "
|
|
39
|
-
"@vaadin/component-base": "
|
|
40
|
-
"@vaadin/field-base": "
|
|
41
|
-
"@vaadin/input-container": "
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha10",
|
|
39
|
+
"@vaadin/component-base": "25.3.0-alpha10",
|
|
40
|
+
"@vaadin/field-base": "25.3.0-alpha10",
|
|
41
|
+
"@vaadin/input-container": "25.3.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
|
|
43
43
|
"lit": "^3.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@vaadin/aura": "
|
|
47
|
-
"@vaadin/chai-plugins": "
|
|
48
|
-
"@vaadin/test-runner-commands": "
|
|
46
|
+
"@vaadin/aura": "25.3.0-alpha10",
|
|
47
|
+
"@vaadin/chai-plugins": "25.3.0-alpha10",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha10",
|
|
49
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
|
|
51
51
|
"sinon": "^22.0.0"
|
|
52
52
|
},
|
|
53
53
|
"customElements": "custom-elements.json",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
|
|
59
59
|
}
|
|
@@ -57,4 +57,12 @@ export declare class TextFieldMixinClass {
|
|
|
57
57
|
* The pattern must match the entire value, not just some subset.
|
|
58
58
|
*/
|
|
59
59
|
pattern: string;
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* A hint to the browser about the type of virtual keyboard to display
|
|
63
|
+
* when the user interacts with the field on a mobile device.
|
|
64
|
+
* List of available options at:
|
|
65
|
+
* https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode
|
|
66
|
+
*/
|
|
67
|
+
inputMode: string;
|
|
60
68
|
}
|
|
@@ -35,11 +35,22 @@ export const TextFieldMixin = (superClass) =>
|
|
|
35
35
|
pattern: {
|
|
36
36
|
type: String,
|
|
37
37
|
},
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* A hint to the browser about the type of virtual keyboard to display
|
|
41
|
+
* when the user interacts with the field on a mobile device.
|
|
42
|
+
* List of available options at:
|
|
43
|
+
* https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode
|
|
44
|
+
*/
|
|
45
|
+
inputMode: {
|
|
46
|
+
type: String,
|
|
47
|
+
attribute: 'inputmode',
|
|
48
|
+
},
|
|
38
49
|
};
|
|
39
50
|
}
|
|
40
51
|
|
|
41
52
|
static get delegateAttrs() {
|
|
42
|
-
return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern'];
|
|
53
|
+
return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern', 'inputMode'];
|
|
43
54
|
}
|
|
44
55
|
|
|
45
56
|
static get constraints() {
|
package/src/vaadin-text-field.js
CHANGED
|
@@ -115,12 +115,11 @@ import { TextFieldMixin } from './vaadin-text-field-mixin.js';
|
|
|
115
115
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
116
116
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
117
117
|
*
|
|
118
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
118
119
|
* @customElement vaadin-text-field
|
|
119
120
|
* @extends HTMLElement
|
|
120
121
|
*/
|
|
121
|
-
|
|
122
|
-
ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
123
|
-
) {
|
|
122
|
+
class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
124
123
|
static get is() {
|
|
125
124
|
return 'vaadin-text-field';
|
|
126
125
|
}
|
|
@@ -182,3 +181,5 @@ export class TextField extends TextFieldMixin(
|
|
|
182
181
|
}
|
|
183
182
|
|
|
184
183
|
defineCustomElement(TextField);
|
|
184
|
+
|
|
185
|
+
export { TextField };
|
package/web-types.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": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,9 +10,18 @@
|
|
|
10
10
|
"name": "vaadin-text-field",
|
|
11
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 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`field-button` | Set on the clear button\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\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
13
22
|
{
|
|
14
23
|
"name": "accessible-name",
|
|
15
|
-
"description": "String used to label the component
|
|
24
|
+
"description": "String used to label the component for screen reader users.",
|
|
16
25
|
"value": {
|
|
17
26
|
"type": [
|
|
18
27
|
"string"
|
|
@@ -21,7 +30,7 @@
|
|
|
21
30
|
},
|
|
22
31
|
{
|
|
23
32
|
"name": "accessible-name-ref",
|
|
24
|
-
"description": "
|
|
33
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
25
34
|
"value": {
|
|
26
35
|
"type": [
|
|
27
36
|
"string"
|
|
@@ -118,6 +127,15 @@
|
|
|
118
127
|
]
|
|
119
128
|
}
|
|
120
129
|
},
|
|
130
|
+
{
|
|
131
|
+
"name": "inputmode",
|
|
132
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
133
|
+
"value": {
|
|
134
|
+
"type": [
|
|
135
|
+
"string"
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
},
|
|
121
139
|
{
|
|
122
140
|
"name": "invalid",
|
|
123
141
|
"description": "Set to true when the field is invalid.",
|
|
@@ -213,9 +231,7 @@
|
|
|
213
231
|
"description": "The theme variants to apply to the component.",
|
|
214
232
|
"value": {
|
|
215
233
|
"type": [
|
|
216
|
-
"string"
|
|
217
|
-
"null",
|
|
218
|
-
"undefined"
|
|
234
|
+
"string"
|
|
219
235
|
]
|
|
220
236
|
}
|
|
221
237
|
},
|
|
@@ -240,9 +256,18 @@
|
|
|
240
256
|
],
|
|
241
257
|
"js": {
|
|
242
258
|
"properties": [
|
|
259
|
+
{
|
|
260
|
+
"name": "accessibleDescriptionRef",
|
|
261
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
262
|
+
"value": {
|
|
263
|
+
"type": [
|
|
264
|
+
"string"
|
|
265
|
+
]
|
|
266
|
+
}
|
|
267
|
+
},
|
|
243
268
|
{
|
|
244
269
|
"name": "accessibleName",
|
|
245
|
-
"description": "String used to label the component
|
|
270
|
+
"description": "String used to label the component for screen reader users.",
|
|
246
271
|
"value": {
|
|
247
272
|
"type": [
|
|
248
273
|
"string"
|
|
@@ -251,7 +276,7 @@
|
|
|
251
276
|
},
|
|
252
277
|
{
|
|
253
278
|
"name": "accessibleNameRef",
|
|
254
|
-
"description": "
|
|
279
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
255
280
|
"value": {
|
|
256
281
|
"type": [
|
|
257
282
|
"string"
|
|
@@ -348,6 +373,15 @@
|
|
|
348
373
|
]
|
|
349
374
|
}
|
|
350
375
|
},
|
|
376
|
+
{
|
|
377
|
+
"name": "inputMode",
|
|
378
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
379
|
+
"value": {
|
|
380
|
+
"type": [
|
|
381
|
+
"string"
|
|
382
|
+
]
|
|
383
|
+
}
|
|
384
|
+
},
|
|
351
385
|
{
|
|
352
386
|
"name": "invalid",
|
|
353
387
|
"description": "Set to true when the field is invalid.",
|
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": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,16 +19,23 @@
|
|
|
19
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 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`field-button` | Set on the clear button\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\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
@@ -103,6 +110,13 @@
|
|
|
103
110
|
"kind": "expression"
|
|
104
111
|
}
|
|
105
112
|
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".inputMode",
|
|
115
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
106
120
|
{
|
|
107
121
|
"name": "?invalid",
|
|
108
122
|
"description": "Set to true when the field is invalid.",
|