@vaadin/integer-field 25.2.0-alpha8 → 25.2.0-beta1
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 +187 -3
- package/package.json +8 -8
- package/src/vaadin-integer-field.d.ts +39 -0
- package/src/vaadin-integer-field.js +39 -0
- package/web-types.json +57 -153
- package/web-types.lit.json +56 -49
package/custom-elements.json
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
26
|
-
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-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 clear, decrease and increase buttons\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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
26
|
+
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-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 clear, decrease and increase buttons\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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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\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.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
27
27
|
"name": "IntegerField",
|
|
28
28
|
"members": [
|
|
29
29
|
{
|
|
@@ -111,6 +111,20 @@
|
|
|
111
111
|
"package": "@vaadin/field-base/src/input-field-mixin.js"
|
|
112
112
|
}
|
|
113
113
|
},
|
|
114
|
+
{
|
|
115
|
+
"kind": "field",
|
|
116
|
+
"name": "autofocus",
|
|
117
|
+
"privacy": "public",
|
|
118
|
+
"type": {
|
|
119
|
+
"text": "boolean"
|
|
120
|
+
},
|
|
121
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
122
|
+
"attribute": "autofocus",
|
|
123
|
+
"inheritedFrom": {
|
|
124
|
+
"name": "DelegateFocusMixin",
|
|
125
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
126
|
+
}
|
|
127
|
+
},
|
|
114
128
|
{
|
|
115
129
|
"kind": "field",
|
|
116
130
|
"name": "autoselect",
|
|
@@ -129,9 +143,23 @@
|
|
|
129
143
|
"kind": "method",
|
|
130
144
|
"name": "checkValidity",
|
|
131
145
|
"description": "Override the method from `InputConstraintsMixin`\nto enforce HTML constraint validation even if\nthe user didn't add any constraints explicitly:\nthe field has to be regardless checked for bad input.",
|
|
146
|
+
"return": {
|
|
147
|
+
"type": {
|
|
148
|
+
"text": "boolean"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
132
151
|
"inheritedFrom": {
|
|
133
|
-
"name": "
|
|
134
|
-
"package": "@vaadin/
|
|
152
|
+
"name": "InputConstraintsMixin",
|
|
153
|
+
"package": "@vaadin/field-base/src/input-constraints-mixin.js"
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"kind": "method",
|
|
158
|
+
"name": "clear",
|
|
159
|
+
"description": "Clear the value of the field.",
|
|
160
|
+
"inheritedFrom": {
|
|
161
|
+
"name": "ClearButtonMixin",
|
|
162
|
+
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
135
163
|
}
|
|
136
164
|
},
|
|
137
165
|
{
|
|
@@ -148,6 +176,20 @@
|
|
|
148
176
|
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
149
177
|
}
|
|
150
178
|
},
|
|
179
|
+
{
|
|
180
|
+
"kind": "field",
|
|
181
|
+
"name": "disabled",
|
|
182
|
+
"privacy": "public",
|
|
183
|
+
"type": {
|
|
184
|
+
"text": "boolean"
|
|
185
|
+
},
|
|
186
|
+
"description": "If true, the user cannot interact with this element.",
|
|
187
|
+
"attribute": "disabled",
|
|
188
|
+
"inheritedFrom": {
|
|
189
|
+
"name": "DelegateFocusMixin",
|
|
190
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
191
|
+
}
|
|
192
|
+
},
|
|
151
193
|
{
|
|
152
194
|
"kind": "field",
|
|
153
195
|
"name": "errorMessage",
|
|
@@ -176,6 +218,20 @@
|
|
|
176
218
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
177
219
|
}
|
|
178
220
|
},
|
|
221
|
+
{
|
|
222
|
+
"kind": "field",
|
|
223
|
+
"name": "invalid",
|
|
224
|
+
"privacy": "public",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "boolean"
|
|
227
|
+
},
|
|
228
|
+
"description": "Set to true when the field is invalid.",
|
|
229
|
+
"attribute": "invalid",
|
|
230
|
+
"inheritedFrom": {
|
|
231
|
+
"name": "FieldMixin",
|
|
232
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
233
|
+
}
|
|
234
|
+
},
|
|
179
235
|
{
|
|
180
236
|
"kind": "field",
|
|
181
237
|
"name": "label",
|
|
@@ -190,6 +246,20 @@
|
|
|
190
246
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
191
247
|
}
|
|
192
248
|
},
|
|
249
|
+
{
|
|
250
|
+
"kind": "field",
|
|
251
|
+
"name": "manualValidation",
|
|
252
|
+
"privacy": "public",
|
|
253
|
+
"type": {
|
|
254
|
+
"text": "boolean"
|
|
255
|
+
},
|
|
256
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
257
|
+
"attribute": "manual-validation",
|
|
258
|
+
"inheritedFrom": {
|
|
259
|
+
"name": "FieldMixin",
|
|
260
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
261
|
+
}
|
|
262
|
+
},
|
|
193
263
|
{
|
|
194
264
|
"kind": "field",
|
|
195
265
|
"name": "max",
|
|
@@ -260,6 +330,20 @@
|
|
|
260
330
|
"package": "@vaadin/field-base/src/input-control-mixin.js"
|
|
261
331
|
}
|
|
262
332
|
},
|
|
333
|
+
{
|
|
334
|
+
"kind": "field",
|
|
335
|
+
"name": "required",
|
|
336
|
+
"privacy": "public",
|
|
337
|
+
"type": {
|
|
338
|
+
"text": "boolean"
|
|
339
|
+
},
|
|
340
|
+
"description": "Specifies that the user must fill in a value.",
|
|
341
|
+
"attribute": "required",
|
|
342
|
+
"inheritedFrom": {
|
|
343
|
+
"name": "FieldMixin",
|
|
344
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
345
|
+
}
|
|
346
|
+
},
|
|
263
347
|
{
|
|
264
348
|
"kind": "field",
|
|
265
349
|
"name": "step",
|
|
@@ -301,6 +385,34 @@
|
|
|
301
385
|
"name": "InputControlMixin",
|
|
302
386
|
"package": "@vaadin/field-base/src/input-control-mixin.js"
|
|
303
387
|
}
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"kind": "method",
|
|
391
|
+
"name": "validate",
|
|
392
|
+
"description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
|
|
393
|
+
"return": {
|
|
394
|
+
"type": {
|
|
395
|
+
"text": "boolean"
|
|
396
|
+
}
|
|
397
|
+
},
|
|
398
|
+
"inheritedFrom": {
|
|
399
|
+
"name": "FieldMixin",
|
|
400
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
401
|
+
}
|
|
402
|
+
},
|
|
403
|
+
{
|
|
404
|
+
"kind": "field",
|
|
405
|
+
"name": "value",
|
|
406
|
+
"privacy": "public",
|
|
407
|
+
"type": {
|
|
408
|
+
"text": "string"
|
|
409
|
+
},
|
|
410
|
+
"description": "The value of the field.",
|
|
411
|
+
"attribute": "value",
|
|
412
|
+
"inheritedFrom": {
|
|
413
|
+
"name": "ClearButtonMixin",
|
|
414
|
+
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
415
|
+
}
|
|
304
416
|
}
|
|
305
417
|
],
|
|
306
418
|
"events": [
|
|
@@ -450,6 +562,18 @@
|
|
|
450
562
|
"package": "@vaadin/field-base/src/input-field-mixin.js"
|
|
451
563
|
}
|
|
452
564
|
},
|
|
565
|
+
{
|
|
566
|
+
"name": "autofocus",
|
|
567
|
+
"type": {
|
|
568
|
+
"text": "boolean"
|
|
569
|
+
},
|
|
570
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
571
|
+
"fieldName": "autofocus",
|
|
572
|
+
"inheritedFrom": {
|
|
573
|
+
"name": "DelegateFocusMixin",
|
|
574
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
575
|
+
}
|
|
576
|
+
},
|
|
453
577
|
{
|
|
454
578
|
"name": "autoselect",
|
|
455
579
|
"type": {
|
|
@@ -474,6 +598,18 @@
|
|
|
474
598
|
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
475
599
|
}
|
|
476
600
|
},
|
|
601
|
+
{
|
|
602
|
+
"name": "disabled",
|
|
603
|
+
"type": {
|
|
604
|
+
"text": "boolean"
|
|
605
|
+
},
|
|
606
|
+
"description": "If true, the user cannot interact with this element.",
|
|
607
|
+
"fieldName": "disabled",
|
|
608
|
+
"inheritedFrom": {
|
|
609
|
+
"name": "DelegateFocusMixin",
|
|
610
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
611
|
+
}
|
|
612
|
+
},
|
|
477
613
|
{
|
|
478
614
|
"name": "error-message",
|
|
479
615
|
"type": {
|
|
@@ -498,6 +634,18 @@
|
|
|
498
634
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
499
635
|
}
|
|
500
636
|
},
|
|
637
|
+
{
|
|
638
|
+
"name": "invalid",
|
|
639
|
+
"type": {
|
|
640
|
+
"text": "boolean"
|
|
641
|
+
},
|
|
642
|
+
"description": "Set to true when the field is invalid.",
|
|
643
|
+
"fieldName": "invalid",
|
|
644
|
+
"inheritedFrom": {
|
|
645
|
+
"name": "FieldMixin",
|
|
646
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
647
|
+
}
|
|
648
|
+
},
|
|
501
649
|
{
|
|
502
650
|
"name": "label",
|
|
503
651
|
"type": {
|
|
@@ -510,6 +658,18 @@
|
|
|
510
658
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
511
659
|
}
|
|
512
660
|
},
|
|
661
|
+
{
|
|
662
|
+
"name": "manual-validation",
|
|
663
|
+
"type": {
|
|
664
|
+
"text": "boolean"
|
|
665
|
+
},
|
|
666
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
667
|
+
"fieldName": "manualValidation",
|
|
668
|
+
"inheritedFrom": {
|
|
669
|
+
"name": "FieldMixin",
|
|
670
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
671
|
+
}
|
|
672
|
+
},
|
|
513
673
|
{
|
|
514
674
|
"name": "max",
|
|
515
675
|
"type": {
|
|
@@ -570,6 +730,18 @@
|
|
|
570
730
|
"package": "@vaadin/field-base/src/input-control-mixin.js"
|
|
571
731
|
}
|
|
572
732
|
},
|
|
733
|
+
{
|
|
734
|
+
"name": "required",
|
|
735
|
+
"type": {
|
|
736
|
+
"text": "boolean"
|
|
737
|
+
},
|
|
738
|
+
"description": "Specifies that the user must fill in a value.",
|
|
739
|
+
"fieldName": "required",
|
|
740
|
+
"inheritedFrom": {
|
|
741
|
+
"name": "FieldMixin",
|
|
742
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
743
|
+
}
|
|
744
|
+
},
|
|
573
745
|
{
|
|
574
746
|
"name": "step",
|
|
575
747
|
"type": {
|
|
@@ -605,6 +777,18 @@
|
|
|
605
777
|
"name": "InputControlMixin",
|
|
606
778
|
"package": "@vaadin/field-base/src/input-control-mixin.js"
|
|
607
779
|
}
|
|
780
|
+
},
|
|
781
|
+
{
|
|
782
|
+
"name": "value",
|
|
783
|
+
"type": {
|
|
784
|
+
"text": "string"
|
|
785
|
+
},
|
|
786
|
+
"description": "The value of the field.",
|
|
787
|
+
"fieldName": "value",
|
|
788
|
+
"inheritedFrom": {
|
|
789
|
+
"name": "ClearButtonMixin",
|
|
790
|
+
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
791
|
+
}
|
|
608
792
|
}
|
|
609
793
|
]
|
|
610
794
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/integer-field",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/component-base": "25.2.0-
|
|
38
|
-
"@vaadin/number-field": "25.2.0-
|
|
37
|
+
"@vaadin/component-base": "25.2.0-beta1",
|
|
38
|
+
"@vaadin/number-field": "25.2.0-beta1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@vaadin/aura": "25.2.0-
|
|
42
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
43
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
41
|
+
"@vaadin/aura": "25.2.0-beta1",
|
|
42
|
+
"@vaadin/chai-plugins": "25.2.0-beta1",
|
|
43
|
+
"@vaadin/test-runner-commands": "25.2.0-beta1",
|
|
44
44
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
|
|
46
46
|
"sinon": "^21.0.2"
|
|
47
47
|
},
|
|
48
48
|
"customElements": "custom-elements.json",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"web-types.json",
|
|
51
51
|
"web-types.lit.json"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
|
|
54
54
|
}
|
|
@@ -85,6 +85,45 @@ export interface IntegerFieldEventMap extends HTMLElementEventMap, IntegerFieldC
|
|
|
85
85
|
* `focus-ring` | Set when the element is keyboard focused
|
|
86
86
|
* `readonly` | Set when the element is readonly
|
|
87
87
|
*
|
|
88
|
+
* The following custom CSS properties are available for styling:
|
|
89
|
+
*
|
|
90
|
+
* Custom CSS property |
|
|
91
|
+
* :--------------------------------------------------|
|
|
92
|
+
* | `--vaadin-field-default-width` |
|
|
93
|
+
* | `--vaadin-input-field-background` |
|
|
94
|
+
* | `--vaadin-input-field-border-color` |
|
|
95
|
+
* | `--vaadin-input-field-border-radius` |
|
|
96
|
+
* | `--vaadin-input-field-border-width` |
|
|
97
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
98
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
99
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
100
|
+
* | `--vaadin-input-field-container-gap` |
|
|
101
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
102
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
103
|
+
* | `--vaadin-input-field-error-color` |
|
|
104
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
105
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
106
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
107
|
+
* | `--vaadin-input-field-gap` |
|
|
108
|
+
* | `--vaadin-input-field-helper-color` |
|
|
109
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
110
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
111
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
112
|
+
* | `--vaadin-input-field-label-color` |
|
|
113
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
114
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
115
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
116
|
+
* | `--vaadin-input-field-padding` |
|
|
117
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
118
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
119
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
120
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
121
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
122
|
+
* | `--vaadin-input-field-value-color` |
|
|
123
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
124
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
125
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
126
|
+
*
|
|
88
127
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
89
128
|
*
|
|
90
129
|
* ### Change events
|
|
@@ -45,6 +45,45 @@ import { NumberField } from '@vaadin/number-field/src/vaadin-number-field.js';
|
|
|
45
45
|
* `focus-ring` | Set when the element is keyboard focused
|
|
46
46
|
* `readonly` | Set when the element is readonly
|
|
47
47
|
*
|
|
48
|
+
* The following custom CSS properties are available for styling:
|
|
49
|
+
*
|
|
50
|
+
* Custom CSS property |
|
|
51
|
+
* :--------------------------------------------------|
|
|
52
|
+
* | `--vaadin-field-default-width` |
|
|
53
|
+
* | `--vaadin-input-field-background` |
|
|
54
|
+
* | `--vaadin-input-field-border-color` |
|
|
55
|
+
* | `--vaadin-input-field-border-radius` |
|
|
56
|
+
* | `--vaadin-input-field-border-width` |
|
|
57
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
58
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
59
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
60
|
+
* | `--vaadin-input-field-container-gap` |
|
|
61
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
62
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
63
|
+
* | `--vaadin-input-field-error-color` |
|
|
64
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
65
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
66
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
67
|
+
* | `--vaadin-input-field-gap` |
|
|
68
|
+
* | `--vaadin-input-field-helper-color` |
|
|
69
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
70
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
71
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
72
|
+
* | `--vaadin-input-field-label-color` |
|
|
73
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
74
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
75
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
76
|
+
* | `--vaadin-input-field-padding` |
|
|
77
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
78
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
79
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
80
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
81
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
82
|
+
* | `--vaadin-input-field-value-color` |
|
|
83
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
84
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
85
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
86
|
+
*
|
|
48
87
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
49
88
|
*
|
|
50
89
|
* ### Change events
|
package/web-types.json
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/integer-field",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-integer-field",
|
|
11
|
-
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-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 clear, decrease and increase buttons\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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
11
|
+
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-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 clear, decrease and increase buttons\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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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\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.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-name",
|
|
15
15
|
"description": "String used to label the component to screen reader users.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -26,9 +24,7 @@
|
|
|
26
24
|
"description": "Id of the element used as label of the component to screen reader users.",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"string"
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
27
|
+
"string"
|
|
32
28
|
]
|
|
33
29
|
}
|
|
34
30
|
},
|
|
@@ -37,9 +33,7 @@
|
|
|
37
33
|
"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-]\"`",
|
|
38
34
|
"value": {
|
|
39
35
|
"type": [
|
|
40
|
-
"string"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
36
|
+
"string"
|
|
43
37
|
]
|
|
44
38
|
}
|
|
45
39
|
},
|
|
@@ -48,9 +42,7 @@
|
|
|
48
42
|
"description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
|
|
49
43
|
"value": {
|
|
50
44
|
"type": [
|
|
51
|
-
"string"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
45
|
+
"string"
|
|
54
46
|
]
|
|
55
47
|
}
|
|
56
48
|
},
|
|
@@ -59,9 +51,7 @@
|
|
|
59
51
|
"description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
|
|
60
52
|
"value": {
|
|
61
53
|
"type": [
|
|
62
|
-
"string"
|
|
63
|
-
"null",
|
|
64
|
-
"undefined"
|
|
54
|
+
"string"
|
|
65
55
|
]
|
|
66
56
|
}
|
|
67
57
|
},
|
|
@@ -70,9 +60,7 @@
|
|
|
70
60
|
"description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
|
|
71
61
|
"value": {
|
|
72
62
|
"type": [
|
|
73
|
-
"string"
|
|
74
|
-
"null",
|
|
75
|
-
"undefined"
|
|
63
|
+
"string"
|
|
76
64
|
]
|
|
77
65
|
}
|
|
78
66
|
},
|
|
@@ -81,9 +69,7 @@
|
|
|
81
69
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
82
70
|
"value": {
|
|
83
71
|
"type": [
|
|
84
|
-
"boolean"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
72
|
+
"boolean"
|
|
87
73
|
]
|
|
88
74
|
}
|
|
89
75
|
},
|
|
@@ -92,9 +78,7 @@
|
|
|
92
78
|
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
93
79
|
"value": {
|
|
94
80
|
"type": [
|
|
95
|
-
"boolean"
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
81
|
+
"boolean"
|
|
98
82
|
]
|
|
99
83
|
}
|
|
100
84
|
},
|
|
@@ -103,9 +87,7 @@
|
|
|
103
87
|
"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.",
|
|
104
88
|
"value": {
|
|
105
89
|
"type": [
|
|
106
|
-
"boolean"
|
|
107
|
-
"null",
|
|
108
|
-
"undefined"
|
|
90
|
+
"boolean"
|
|
109
91
|
]
|
|
110
92
|
}
|
|
111
93
|
},
|
|
@@ -114,9 +96,7 @@
|
|
|
114
96
|
"description": "If true, the user cannot interact with this element.",
|
|
115
97
|
"value": {
|
|
116
98
|
"type": [
|
|
117
|
-
"boolean"
|
|
118
|
-
"null",
|
|
119
|
-
"undefined"
|
|
99
|
+
"boolean"
|
|
120
100
|
]
|
|
121
101
|
}
|
|
122
102
|
},
|
|
@@ -125,9 +105,7 @@
|
|
|
125
105
|
"description": "Error to show when the field is invalid.",
|
|
126
106
|
"value": {
|
|
127
107
|
"type": [
|
|
128
|
-
"string"
|
|
129
|
-
"null",
|
|
130
|
-
"undefined"
|
|
108
|
+
"string"
|
|
131
109
|
]
|
|
132
110
|
}
|
|
133
111
|
},
|
|
@@ -136,9 +114,7 @@
|
|
|
136
114
|
"description": "String used for the helper text.",
|
|
137
115
|
"value": {
|
|
138
116
|
"type": [
|
|
139
|
-
"string"
|
|
140
|
-
"null",
|
|
141
|
-
"undefined"
|
|
117
|
+
"string"
|
|
142
118
|
]
|
|
143
119
|
}
|
|
144
120
|
},
|
|
@@ -147,9 +123,7 @@
|
|
|
147
123
|
"description": "Set to true when the field is invalid.",
|
|
148
124
|
"value": {
|
|
149
125
|
"type": [
|
|
150
|
-
"boolean"
|
|
151
|
-
"null",
|
|
152
|
-
"undefined"
|
|
126
|
+
"boolean"
|
|
153
127
|
]
|
|
154
128
|
}
|
|
155
129
|
},
|
|
@@ -158,9 +132,7 @@
|
|
|
158
132
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
159
133
|
"value": {
|
|
160
134
|
"type": [
|
|
161
|
-
"string"
|
|
162
|
-
"null",
|
|
163
|
-
"undefined"
|
|
135
|
+
"string"
|
|
164
136
|
]
|
|
165
137
|
}
|
|
166
138
|
},
|
|
@@ -169,9 +141,7 @@
|
|
|
169
141
|
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
170
142
|
"value": {
|
|
171
143
|
"type": [
|
|
172
|
-
"boolean"
|
|
173
|
-
"null",
|
|
174
|
-
"undefined"
|
|
144
|
+
"boolean"
|
|
175
145
|
]
|
|
176
146
|
}
|
|
177
147
|
},
|
|
@@ -180,9 +150,7 @@
|
|
|
180
150
|
"description": "The maximum value of the field.",
|
|
181
151
|
"value": {
|
|
182
152
|
"type": [
|
|
183
|
-
"number"
|
|
184
|
-
"null",
|
|
185
|
-
"undefined"
|
|
153
|
+
"number"
|
|
186
154
|
]
|
|
187
155
|
}
|
|
188
156
|
},
|
|
@@ -191,9 +159,7 @@
|
|
|
191
159
|
"description": "The minimum value of the field.",
|
|
192
160
|
"value": {
|
|
193
161
|
"type": [
|
|
194
|
-
"number"
|
|
195
|
-
"null",
|
|
196
|
-
"undefined"
|
|
162
|
+
"number"
|
|
197
163
|
]
|
|
198
164
|
}
|
|
199
165
|
},
|
|
@@ -202,9 +168,7 @@
|
|
|
202
168
|
"description": "The name of this field.",
|
|
203
169
|
"value": {
|
|
204
170
|
"type": [
|
|
205
|
-
"string"
|
|
206
|
-
"null",
|
|
207
|
-
"undefined"
|
|
171
|
+
"string"
|
|
208
172
|
]
|
|
209
173
|
}
|
|
210
174
|
},
|
|
@@ -213,9 +177,7 @@
|
|
|
213
177
|
"description": "A hint to the user of what can be entered in the field.",
|
|
214
178
|
"value": {
|
|
215
179
|
"type": [
|
|
216
|
-
"string"
|
|
217
|
-
"null",
|
|
218
|
-
"undefined"
|
|
180
|
+
"string"
|
|
219
181
|
]
|
|
220
182
|
}
|
|
221
183
|
},
|
|
@@ -224,9 +186,7 @@
|
|
|
224
186
|
"description": "When present, it specifies that the field is read-only.",
|
|
225
187
|
"value": {
|
|
226
188
|
"type": [
|
|
227
|
-
"boolean"
|
|
228
|
-
"null",
|
|
229
|
-
"undefined"
|
|
189
|
+
"boolean"
|
|
230
190
|
]
|
|
231
191
|
}
|
|
232
192
|
},
|
|
@@ -235,9 +195,7 @@
|
|
|
235
195
|
"description": "Specifies that the user must fill in a value.",
|
|
236
196
|
"value": {
|
|
237
197
|
"type": [
|
|
238
|
-
"boolean"
|
|
239
|
-
"null",
|
|
240
|
-
"undefined"
|
|
198
|
+
"boolean"
|
|
241
199
|
]
|
|
242
200
|
}
|
|
243
201
|
},
|
|
@@ -246,9 +204,7 @@
|
|
|
246
204
|
"description": "Specifies the allowed number intervals of the field.",
|
|
247
205
|
"value": {
|
|
248
206
|
"type": [
|
|
249
|
-
"number"
|
|
250
|
-
"null",
|
|
251
|
-
"undefined"
|
|
207
|
+
"number"
|
|
252
208
|
]
|
|
253
209
|
}
|
|
254
210
|
},
|
|
@@ -257,9 +213,7 @@
|
|
|
257
213
|
"description": "Set to true to show increase/decrease buttons.",
|
|
258
214
|
"value": {
|
|
259
215
|
"type": [
|
|
260
|
-
"boolean"
|
|
261
|
-
"null",
|
|
262
|
-
"undefined"
|
|
216
|
+
"boolean"
|
|
263
217
|
]
|
|
264
218
|
}
|
|
265
219
|
},
|
|
@@ -279,9 +233,7 @@
|
|
|
279
233
|
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
280
234
|
"value": {
|
|
281
235
|
"type": [
|
|
282
|
-
"string"
|
|
283
|
-
"null",
|
|
284
|
-
"undefined"
|
|
236
|
+
"string"
|
|
285
237
|
]
|
|
286
238
|
}
|
|
287
239
|
},
|
|
@@ -290,9 +242,7 @@
|
|
|
290
242
|
"description": "The value of the field.",
|
|
291
243
|
"value": {
|
|
292
244
|
"type": [
|
|
293
|
-
"string"
|
|
294
|
-
"null",
|
|
295
|
-
"undefined"
|
|
245
|
+
"string"
|
|
296
246
|
]
|
|
297
247
|
}
|
|
298
248
|
}
|
|
@@ -304,9 +254,7 @@
|
|
|
304
254
|
"description": "String used to label the component to screen reader users.",
|
|
305
255
|
"value": {
|
|
306
256
|
"type": [
|
|
307
|
-
"string"
|
|
308
|
-
"null",
|
|
309
|
-
"undefined"
|
|
257
|
+
"string"
|
|
310
258
|
]
|
|
311
259
|
}
|
|
312
260
|
},
|
|
@@ -315,9 +263,7 @@
|
|
|
315
263
|
"description": "Id of the element used as label of the component to screen reader users.",
|
|
316
264
|
"value": {
|
|
317
265
|
"type": [
|
|
318
|
-
"string"
|
|
319
|
-
"null",
|
|
320
|
-
"undefined"
|
|
266
|
+
"string"
|
|
321
267
|
]
|
|
322
268
|
}
|
|
323
269
|
},
|
|
@@ -326,9 +272,7 @@
|
|
|
326
272
|
"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-]\"`",
|
|
327
273
|
"value": {
|
|
328
274
|
"type": [
|
|
329
|
-
"string"
|
|
330
|
-
"null",
|
|
331
|
-
"undefined"
|
|
275
|
+
"string"
|
|
332
276
|
]
|
|
333
277
|
}
|
|
334
278
|
},
|
|
@@ -337,9 +281,7 @@
|
|
|
337
281
|
"description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
|
|
338
282
|
"value": {
|
|
339
283
|
"type": [
|
|
340
|
-
"string"
|
|
341
|
-
"null",
|
|
342
|
-
"undefined"
|
|
284
|
+
"string"
|
|
343
285
|
]
|
|
344
286
|
}
|
|
345
287
|
},
|
|
@@ -348,9 +290,7 @@
|
|
|
348
290
|
"description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
|
|
349
291
|
"value": {
|
|
350
292
|
"type": [
|
|
351
|
-
"string"
|
|
352
|
-
"null",
|
|
353
|
-
"undefined"
|
|
293
|
+
"string"
|
|
354
294
|
]
|
|
355
295
|
}
|
|
356
296
|
},
|
|
@@ -359,9 +299,7 @@
|
|
|
359
299
|
"description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
|
|
360
300
|
"value": {
|
|
361
301
|
"type": [
|
|
362
|
-
"string"
|
|
363
|
-
"null",
|
|
364
|
-
"undefined"
|
|
302
|
+
"string"
|
|
365
303
|
]
|
|
366
304
|
}
|
|
367
305
|
},
|
|
@@ -370,9 +308,7 @@
|
|
|
370
308
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
371
309
|
"value": {
|
|
372
310
|
"type": [
|
|
373
|
-
"boolean"
|
|
374
|
-
"null",
|
|
375
|
-
"undefined"
|
|
311
|
+
"boolean"
|
|
376
312
|
]
|
|
377
313
|
}
|
|
378
314
|
},
|
|
@@ -381,9 +317,7 @@
|
|
|
381
317
|
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
382
318
|
"value": {
|
|
383
319
|
"type": [
|
|
384
|
-
"boolean"
|
|
385
|
-
"null",
|
|
386
|
-
"undefined"
|
|
320
|
+
"boolean"
|
|
387
321
|
]
|
|
388
322
|
}
|
|
389
323
|
},
|
|
@@ -392,9 +326,7 @@
|
|
|
392
326
|
"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.",
|
|
393
327
|
"value": {
|
|
394
328
|
"type": [
|
|
395
|
-
"boolean"
|
|
396
|
-
"null",
|
|
397
|
-
"undefined"
|
|
329
|
+
"boolean"
|
|
398
330
|
]
|
|
399
331
|
}
|
|
400
332
|
},
|
|
@@ -403,9 +335,7 @@
|
|
|
403
335
|
"description": "If true, the user cannot interact with this element.",
|
|
404
336
|
"value": {
|
|
405
337
|
"type": [
|
|
406
|
-
"boolean"
|
|
407
|
-
"null",
|
|
408
|
-
"undefined"
|
|
338
|
+
"boolean"
|
|
409
339
|
]
|
|
410
340
|
}
|
|
411
341
|
},
|
|
@@ -414,9 +344,7 @@
|
|
|
414
344
|
"description": "Error to show when the field is invalid.",
|
|
415
345
|
"value": {
|
|
416
346
|
"type": [
|
|
417
|
-
"string"
|
|
418
|
-
"null",
|
|
419
|
-
"undefined"
|
|
347
|
+
"string"
|
|
420
348
|
]
|
|
421
349
|
}
|
|
422
350
|
},
|
|
@@ -425,9 +353,7 @@
|
|
|
425
353
|
"description": "String used for the helper text.",
|
|
426
354
|
"value": {
|
|
427
355
|
"type": [
|
|
428
|
-
"string"
|
|
429
|
-
"null",
|
|
430
|
-
"undefined"
|
|
356
|
+
"string"
|
|
431
357
|
]
|
|
432
358
|
}
|
|
433
359
|
},
|
|
@@ -436,9 +362,7 @@
|
|
|
436
362
|
"description": "Set to true when the field is invalid.",
|
|
437
363
|
"value": {
|
|
438
364
|
"type": [
|
|
439
|
-
"boolean"
|
|
440
|
-
"null",
|
|
441
|
-
"undefined"
|
|
365
|
+
"boolean"
|
|
442
366
|
]
|
|
443
367
|
}
|
|
444
368
|
},
|
|
@@ -447,9 +371,7 @@
|
|
|
447
371
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
448
372
|
"value": {
|
|
449
373
|
"type": [
|
|
450
|
-
"string"
|
|
451
|
-
"null",
|
|
452
|
-
"undefined"
|
|
374
|
+
"string"
|
|
453
375
|
]
|
|
454
376
|
}
|
|
455
377
|
},
|
|
@@ -458,9 +380,7 @@
|
|
|
458
380
|
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
459
381
|
"value": {
|
|
460
382
|
"type": [
|
|
461
|
-
"boolean"
|
|
462
|
-
"null",
|
|
463
|
-
"undefined"
|
|
383
|
+
"boolean"
|
|
464
384
|
]
|
|
465
385
|
}
|
|
466
386
|
},
|
|
@@ -469,9 +389,7 @@
|
|
|
469
389
|
"description": "The maximum value of the field.",
|
|
470
390
|
"value": {
|
|
471
391
|
"type": [
|
|
472
|
-
"number"
|
|
473
|
-
"null",
|
|
474
|
-
"undefined"
|
|
392
|
+
"number"
|
|
475
393
|
]
|
|
476
394
|
}
|
|
477
395
|
},
|
|
@@ -480,9 +398,7 @@
|
|
|
480
398
|
"description": "The minimum value of the field.",
|
|
481
399
|
"value": {
|
|
482
400
|
"type": [
|
|
483
|
-
"number"
|
|
484
|
-
"null",
|
|
485
|
-
"undefined"
|
|
401
|
+
"number"
|
|
486
402
|
]
|
|
487
403
|
}
|
|
488
404
|
},
|
|
@@ -491,9 +407,7 @@
|
|
|
491
407
|
"description": "The name of this field.",
|
|
492
408
|
"value": {
|
|
493
409
|
"type": [
|
|
494
|
-
"string"
|
|
495
|
-
"null",
|
|
496
|
-
"undefined"
|
|
410
|
+
"string"
|
|
497
411
|
]
|
|
498
412
|
}
|
|
499
413
|
},
|
|
@@ -502,9 +416,7 @@
|
|
|
502
416
|
"description": "A hint to the user of what can be entered in the field.",
|
|
503
417
|
"value": {
|
|
504
418
|
"type": [
|
|
505
|
-
"string"
|
|
506
|
-
"null",
|
|
507
|
-
"undefined"
|
|
419
|
+
"string"
|
|
508
420
|
]
|
|
509
421
|
}
|
|
510
422
|
},
|
|
@@ -513,9 +425,7 @@
|
|
|
513
425
|
"description": "When present, it specifies that the field is read-only.",
|
|
514
426
|
"value": {
|
|
515
427
|
"type": [
|
|
516
|
-
"boolean"
|
|
517
|
-
"null",
|
|
518
|
-
"undefined"
|
|
428
|
+
"boolean"
|
|
519
429
|
]
|
|
520
430
|
}
|
|
521
431
|
},
|
|
@@ -524,9 +434,7 @@
|
|
|
524
434
|
"description": "Specifies that the user must fill in a value.",
|
|
525
435
|
"value": {
|
|
526
436
|
"type": [
|
|
527
|
-
"boolean"
|
|
528
|
-
"null",
|
|
529
|
-
"undefined"
|
|
437
|
+
"boolean"
|
|
530
438
|
]
|
|
531
439
|
}
|
|
532
440
|
},
|
|
@@ -535,9 +443,7 @@
|
|
|
535
443
|
"description": "Specifies the allowed number intervals of the field.",
|
|
536
444
|
"value": {
|
|
537
445
|
"type": [
|
|
538
|
-
"number"
|
|
539
|
-
"null",
|
|
540
|
-
"undefined"
|
|
446
|
+
"number"
|
|
541
447
|
]
|
|
542
448
|
}
|
|
543
449
|
},
|
|
@@ -546,9 +452,7 @@
|
|
|
546
452
|
"description": "Set to true to show increase/decrease buttons.",
|
|
547
453
|
"value": {
|
|
548
454
|
"type": [
|
|
549
|
-
"boolean"
|
|
550
|
-
"null",
|
|
551
|
-
"undefined"
|
|
455
|
+
"boolean"
|
|
552
456
|
]
|
|
553
457
|
}
|
|
554
458
|
},
|
|
@@ -557,9 +461,7 @@
|
|
|
557
461
|
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
558
462
|
"value": {
|
|
559
463
|
"type": [
|
|
560
|
-
"string"
|
|
561
|
-
"null",
|
|
562
|
-
"undefined"
|
|
464
|
+
"string"
|
|
563
465
|
]
|
|
564
466
|
}
|
|
565
467
|
},
|
|
@@ -568,9 +470,7 @@
|
|
|
568
470
|
"description": "The value of the field.",
|
|
569
471
|
"value": {
|
|
570
472
|
"type": [
|
|
571
|
-
"string"
|
|
572
|
-
"null",
|
|
573
|
-
"undefined"
|
|
473
|
+
"string"
|
|
574
474
|
]
|
|
575
475
|
}
|
|
576
476
|
}
|
|
@@ -582,12 +482,16 @@
|
|
|
582
482
|
},
|
|
583
483
|
{
|
|
584
484
|
"name": "input",
|
|
585
|
-
"description": "Fired when the value is changed by the user: on every typing keystroke
|
|
485
|
+
"description": "Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button."
|
|
586
486
|
},
|
|
587
487
|
{
|
|
588
488
|
"name": "invalid-changed",
|
|
589
489
|
"description": "Fired when the `invalid` property changes."
|
|
590
490
|
},
|
|
491
|
+
{
|
|
492
|
+
"name": "unparsable-change",
|
|
493
|
+
"description": "Fired when the user commits an unparsable value change and there is no change event."
|
|
494
|
+
},
|
|
591
495
|
{
|
|
592
496
|
"name": "validated",
|
|
593
497
|
"description": "Fired whenever the field is validated."
|
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/integer-field",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,166 +16,166 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-integer-field",
|
|
19
|
-
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-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 clear, decrease and increase buttons\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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
19
|
+
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-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 clear, decrease and increase buttons\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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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\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.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
|
-
"name": "
|
|
24
|
-
"description": "
|
|
23
|
+
"name": ".accessibleName",
|
|
24
|
+
"description": "String used to label the component to screen reader users.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
30
|
+
"name": ".accessibleNameRef",
|
|
31
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "
|
|
38
|
-
"description": "
|
|
37
|
+
"name": ".allowedCharPattern",
|
|
38
|
+
"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-]\"`",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "
|
|
45
|
-
"description": "
|
|
44
|
+
"name": ".autocapitalize",
|
|
45
|
+
"description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "
|
|
52
|
-
"description": "
|
|
51
|
+
"name": ".autocomplete",
|
|
52
|
+
"description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": ".autocorrect",
|
|
59
|
+
"description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": "?
|
|
66
|
-
"description": "
|
|
65
|
+
"name": "?autofocus",
|
|
66
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "?
|
|
73
|
-
"description": "
|
|
72
|
+
"name": "?autoselect",
|
|
73
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": "?
|
|
80
|
-
"description": "Set to true to
|
|
79
|
+
"name": "?clearButtonVisible",
|
|
80
|
+
"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.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": "
|
|
87
|
-
"description": "
|
|
86
|
+
"name": "?disabled",
|
|
87
|
+
"description": "If true, the user cannot interact with this element.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".errorMessage",
|
|
94
|
+
"description": "Error to show when the field is invalid.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": ".
|
|
101
|
-
"description": "
|
|
100
|
+
"name": ".helperText",
|
|
101
|
+
"description": "String used for the helper text.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": "
|
|
108
|
-
"description": "
|
|
107
|
+
"name": "?invalid",
|
|
108
|
+
"description": "Set to true when the field is invalid.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": ".
|
|
115
|
-
"description": "
|
|
114
|
+
"name": ".label",
|
|
115
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": "
|
|
122
|
-
"description": "
|
|
121
|
+
"name": "?manualValidation",
|
|
122
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": ".
|
|
129
|
-
"description": "
|
|
128
|
+
"name": ".max",
|
|
129
|
+
"description": "The maximum value of the field.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": ".
|
|
136
|
-
"description": "
|
|
135
|
+
"name": ".min",
|
|
136
|
+
"description": "The minimum value of the field.",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": ".
|
|
143
|
-
"description": "The
|
|
142
|
+
"name": ".name",
|
|
143
|
+
"description": "The name of this field.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": ".
|
|
150
|
-
"description": "
|
|
149
|
+
"name": ".placeholder",
|
|
150
|
+
"description": "A hint to the user of what can be entered in the field.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
|
-
"name": "
|
|
157
|
-
"description": "
|
|
156
|
+
"name": "?readonly",
|
|
157
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": "
|
|
164
|
-
"description": "
|
|
163
|
+
"name": "?required",
|
|
164
|
+
"description": "Specifies that the user must fill in a value.",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": ".
|
|
171
|
-
"description": "
|
|
170
|
+
"name": ".step",
|
|
171
|
+
"description": "Specifies the allowed number intervals of the field.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
|
-
"name": "
|
|
178
|
-
"description": "
|
|
177
|
+
"name": "?stepButtonsVisible",
|
|
178
|
+
"description": "Set to true to show increase/decrease buttons.",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
205
|
"name": "@input",
|
|
206
|
-
"description": "Fired when the value is changed by the user: on every typing keystroke
|
|
206
|
+
"description": "Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.",
|
|
207
207
|
"value": {
|
|
208
208
|
"kind": "expression"
|
|
209
209
|
}
|
|
@@ -215,6 +215,13 @@
|
|
|
215
215
|
"kind": "expression"
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
|
+
{
|
|
219
|
+
"name": "@unparsable-change",
|
|
220
|
+
"description": "Fired when the user commits an unparsable value change and there is no change event.",
|
|
221
|
+
"value": {
|
|
222
|
+
"kind": "expression"
|
|
223
|
+
}
|
|
224
|
+
},
|
|
218
225
|
{
|
|
219
226
|
"name": "@validated",
|
|
220
227
|
"description": "Fired whenever the field is validated.",
|