@vaadin/date-time-picker 25.2.0-alpha1 → 25.2.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 +276 -0
- package/package.json +12 -12
- package/src/vaadin-date-time-picker-mixin.js +1 -7
- package/src/vaadin-date-time-picker.d.ts +7 -0
- package/web-types.json +50 -130
- package/web-types.lit.json +47 -40
package/custom-elements.json
CHANGED
|
@@ -82,6 +82,10 @@
|
|
|
82
82
|
"type": {
|
|
83
83
|
"text": "boolean"
|
|
84
84
|
}
|
|
85
|
+
},
|
|
86
|
+
"inheritedFrom": {
|
|
87
|
+
"name": "ValidateMixin",
|
|
88
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
85
89
|
}
|
|
86
90
|
},
|
|
87
91
|
{
|
|
@@ -94,6 +98,20 @@
|
|
|
94
98
|
"description": "A placeholder string for the date field.",
|
|
95
99
|
"attribute": "date-placeholder"
|
|
96
100
|
},
|
|
101
|
+
{
|
|
102
|
+
"kind": "field",
|
|
103
|
+
"name": "disabled",
|
|
104
|
+
"privacy": "public",
|
|
105
|
+
"type": {
|
|
106
|
+
"text": "boolean"
|
|
107
|
+
},
|
|
108
|
+
"description": "If true, the user cannot interact with this element.",
|
|
109
|
+
"attribute": "disabled",
|
|
110
|
+
"inheritedFrom": {
|
|
111
|
+
"name": "DisabledMixin",
|
|
112
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
97
115
|
{
|
|
98
116
|
"kind": "field",
|
|
99
117
|
"name": "errorMessage",
|
|
@@ -146,6 +164,20 @@
|
|
|
146
164
|
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
147
165
|
"attribute": "initial-position"
|
|
148
166
|
},
|
|
167
|
+
{
|
|
168
|
+
"kind": "field",
|
|
169
|
+
"name": "invalid",
|
|
170
|
+
"privacy": "public",
|
|
171
|
+
"type": {
|
|
172
|
+
"text": "boolean"
|
|
173
|
+
},
|
|
174
|
+
"description": "Set to true when the field is invalid.",
|
|
175
|
+
"attribute": "invalid",
|
|
176
|
+
"inheritedFrom": {
|
|
177
|
+
"name": "ValidateMixin",
|
|
178
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
149
181
|
{
|
|
150
182
|
"kind": "field",
|
|
151
183
|
"name": "label",
|
|
@@ -160,6 +192,20 @@
|
|
|
160
192
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
161
193
|
}
|
|
162
194
|
},
|
|
195
|
+
{
|
|
196
|
+
"kind": "field",
|
|
197
|
+
"name": "manualValidation",
|
|
198
|
+
"privacy": "public",
|
|
199
|
+
"type": {
|
|
200
|
+
"text": "boolean"
|
|
201
|
+
},
|
|
202
|
+
"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.",
|
|
203
|
+
"attribute": "manual-validation",
|
|
204
|
+
"inheritedFrom": {
|
|
205
|
+
"name": "ValidateMixin",
|
|
206
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
207
|
+
}
|
|
208
|
+
},
|
|
163
209
|
{
|
|
164
210
|
"kind": "field",
|
|
165
211
|
"name": "max",
|
|
@@ -200,6 +246,20 @@
|
|
|
200
246
|
"description": "Set to true to make this element read-only.",
|
|
201
247
|
"attribute": "readonly"
|
|
202
248
|
},
|
|
249
|
+
{
|
|
250
|
+
"kind": "field",
|
|
251
|
+
"name": "required",
|
|
252
|
+
"privacy": "public",
|
|
253
|
+
"type": {
|
|
254
|
+
"text": "boolean"
|
|
255
|
+
},
|
|
256
|
+
"description": "Specifies that the user must fill in a value.",
|
|
257
|
+
"attribute": "required",
|
|
258
|
+
"inheritedFrom": {
|
|
259
|
+
"name": "ValidateMixin",
|
|
260
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
261
|
+
}
|
|
262
|
+
},
|
|
203
263
|
{
|
|
204
264
|
"kind": "field",
|
|
205
265
|
"name": "showWeekNumbers",
|
|
@@ -230,6 +290,20 @@
|
|
|
230
290
|
"description": "A placeholder string for the time field.",
|
|
231
291
|
"attribute": "time-placeholder"
|
|
232
292
|
},
|
|
293
|
+
{
|
|
294
|
+
"kind": "method",
|
|
295
|
+
"name": "validate",
|
|
296
|
+
"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.",
|
|
297
|
+
"return": {
|
|
298
|
+
"type": {
|
|
299
|
+
"text": "boolean"
|
|
300
|
+
}
|
|
301
|
+
},
|
|
302
|
+
"inheritedFrom": {
|
|
303
|
+
"name": "ValidateMixin",
|
|
304
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
305
|
+
}
|
|
306
|
+
},
|
|
233
307
|
{
|
|
234
308
|
"kind": "field",
|
|
235
309
|
"name": "value",
|
|
@@ -253,6 +327,16 @@
|
|
|
253
327
|
"type": {
|
|
254
328
|
"text": "CustomEvent"
|
|
255
329
|
}
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
"name": "validated",
|
|
333
|
+
"type": {
|
|
334
|
+
"text": "CustomEvent"
|
|
335
|
+
},
|
|
336
|
+
"inheritedFrom": {
|
|
337
|
+
"name": "ValidateMixin",
|
|
338
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
339
|
+
}
|
|
256
340
|
}
|
|
257
341
|
],
|
|
258
342
|
"attributes": [
|
|
@@ -304,6 +388,18 @@
|
|
|
304
388
|
"description": "A placeholder string for the date field.",
|
|
305
389
|
"fieldName": "datePlaceholder"
|
|
306
390
|
},
|
|
391
|
+
{
|
|
392
|
+
"name": "disabled",
|
|
393
|
+
"type": {
|
|
394
|
+
"text": "boolean"
|
|
395
|
+
},
|
|
396
|
+
"description": "If true, the user cannot interact with this element.",
|
|
397
|
+
"fieldName": "disabled",
|
|
398
|
+
"inheritedFrom": {
|
|
399
|
+
"name": "DisabledMixin",
|
|
400
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
401
|
+
}
|
|
402
|
+
},
|
|
307
403
|
{
|
|
308
404
|
"name": "error-message",
|
|
309
405
|
"type": {
|
|
@@ -348,6 +444,18 @@
|
|
|
348
444
|
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
349
445
|
"fieldName": "initialPosition"
|
|
350
446
|
},
|
|
447
|
+
{
|
|
448
|
+
"name": "invalid",
|
|
449
|
+
"type": {
|
|
450
|
+
"text": "boolean"
|
|
451
|
+
},
|
|
452
|
+
"description": "Set to true when the field is invalid.",
|
|
453
|
+
"fieldName": "invalid",
|
|
454
|
+
"inheritedFrom": {
|
|
455
|
+
"name": "ValidateMixin",
|
|
456
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
457
|
+
}
|
|
458
|
+
},
|
|
351
459
|
{
|
|
352
460
|
"name": "label",
|
|
353
461
|
"type": {
|
|
@@ -360,6 +468,18 @@
|
|
|
360
468
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
361
469
|
}
|
|
362
470
|
},
|
|
471
|
+
{
|
|
472
|
+
"name": "manual-validation",
|
|
473
|
+
"type": {
|
|
474
|
+
"text": "boolean"
|
|
475
|
+
},
|
|
476
|
+
"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.",
|
|
477
|
+
"fieldName": "manualValidation",
|
|
478
|
+
"inheritedFrom": {
|
|
479
|
+
"name": "ValidateMixin",
|
|
480
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
481
|
+
}
|
|
482
|
+
},
|
|
363
483
|
{
|
|
364
484
|
"name": "max",
|
|
365
485
|
"type": {
|
|
@@ -392,6 +512,18 @@
|
|
|
392
512
|
"description": "Set to true to make this element read-only.",
|
|
393
513
|
"fieldName": "readonly"
|
|
394
514
|
},
|
|
515
|
+
{
|
|
516
|
+
"name": "required",
|
|
517
|
+
"type": {
|
|
518
|
+
"text": "boolean"
|
|
519
|
+
},
|
|
520
|
+
"description": "Specifies that the user must fill in a value.",
|
|
521
|
+
"fieldName": "required",
|
|
522
|
+
"inheritedFrom": {
|
|
523
|
+
"name": "ValidateMixin",
|
|
524
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
525
|
+
}
|
|
526
|
+
},
|
|
395
527
|
{
|
|
396
528
|
"name": "show-week-numbers",
|
|
397
529
|
"type": {
|
|
@@ -554,6 +686,20 @@
|
|
|
554
686
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
555
687
|
}
|
|
556
688
|
},
|
|
689
|
+
{
|
|
690
|
+
"kind": "field",
|
|
691
|
+
"name": "disabled",
|
|
692
|
+
"privacy": "public",
|
|
693
|
+
"type": {
|
|
694
|
+
"text": "boolean"
|
|
695
|
+
},
|
|
696
|
+
"description": "If true, the user cannot interact with this element.",
|
|
697
|
+
"attribute": "disabled",
|
|
698
|
+
"inheritedFrom": {
|
|
699
|
+
"name": "DisabledMixin",
|
|
700
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
701
|
+
}
|
|
702
|
+
},
|
|
557
703
|
{
|
|
558
704
|
"kind": "field",
|
|
559
705
|
"name": "errorMessage",
|
|
@@ -610,6 +756,48 @@
|
|
|
610
756
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
611
757
|
}
|
|
612
758
|
},
|
|
759
|
+
{
|
|
760
|
+
"kind": "field",
|
|
761
|
+
"name": "invalid",
|
|
762
|
+
"privacy": "public",
|
|
763
|
+
"type": {
|
|
764
|
+
"text": "boolean"
|
|
765
|
+
},
|
|
766
|
+
"description": "Set to true when the field is invalid.",
|
|
767
|
+
"attribute": "invalid",
|
|
768
|
+
"inheritedFrom": {
|
|
769
|
+
"name": "ValidateMixin",
|
|
770
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
771
|
+
}
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"kind": "field",
|
|
775
|
+
"name": "label",
|
|
776
|
+
"privacy": "public",
|
|
777
|
+
"type": {
|
|
778
|
+
"text": "string"
|
|
779
|
+
},
|
|
780
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
781
|
+
"attribute": "label",
|
|
782
|
+
"inheritedFrom": {
|
|
783
|
+
"name": "LabelMixin",
|
|
784
|
+
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
785
|
+
}
|
|
786
|
+
},
|
|
787
|
+
{
|
|
788
|
+
"kind": "field",
|
|
789
|
+
"name": "manualValidation",
|
|
790
|
+
"privacy": "public",
|
|
791
|
+
"type": {
|
|
792
|
+
"text": "boolean"
|
|
793
|
+
},
|
|
794
|
+
"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.",
|
|
795
|
+
"attribute": "manual-validation",
|
|
796
|
+
"inheritedFrom": {
|
|
797
|
+
"name": "ValidateMixin",
|
|
798
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
799
|
+
}
|
|
800
|
+
},
|
|
613
801
|
{
|
|
614
802
|
"kind": "field",
|
|
615
803
|
"name": "max",
|
|
@@ -666,6 +854,20 @@
|
|
|
666
854
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
667
855
|
}
|
|
668
856
|
},
|
|
857
|
+
{
|
|
858
|
+
"kind": "field",
|
|
859
|
+
"name": "required",
|
|
860
|
+
"privacy": "public",
|
|
861
|
+
"type": {
|
|
862
|
+
"text": "boolean"
|
|
863
|
+
},
|
|
864
|
+
"description": "Specifies that the user must fill in a value.",
|
|
865
|
+
"attribute": "required",
|
|
866
|
+
"inheritedFrom": {
|
|
867
|
+
"name": "ValidateMixin",
|
|
868
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
869
|
+
}
|
|
870
|
+
},
|
|
669
871
|
{
|
|
670
872
|
"kind": "field",
|
|
671
873
|
"name": "showWeekNumbers",
|
|
@@ -708,6 +910,20 @@
|
|
|
708
910
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
709
911
|
}
|
|
710
912
|
},
|
|
913
|
+
{
|
|
914
|
+
"kind": "method",
|
|
915
|
+
"name": "validate",
|
|
916
|
+
"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.",
|
|
917
|
+
"return": {
|
|
918
|
+
"type": {
|
|
919
|
+
"text": "boolean"
|
|
920
|
+
}
|
|
921
|
+
},
|
|
922
|
+
"inheritedFrom": {
|
|
923
|
+
"name": "ValidateMixin",
|
|
924
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
925
|
+
}
|
|
926
|
+
},
|
|
711
927
|
{
|
|
712
928
|
"kind": "field",
|
|
713
929
|
"name": "value",
|
|
@@ -857,6 +1073,18 @@
|
|
|
857
1073
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
858
1074
|
}
|
|
859
1075
|
},
|
|
1076
|
+
{
|
|
1077
|
+
"name": "disabled",
|
|
1078
|
+
"type": {
|
|
1079
|
+
"text": "boolean"
|
|
1080
|
+
},
|
|
1081
|
+
"description": "If true, the user cannot interact with this element.",
|
|
1082
|
+
"fieldName": "disabled",
|
|
1083
|
+
"inheritedFrom": {
|
|
1084
|
+
"name": "DisabledMixin",
|
|
1085
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
1086
|
+
}
|
|
1087
|
+
},
|
|
860
1088
|
{
|
|
861
1089
|
"name": "error-message",
|
|
862
1090
|
"type": {
|
|
@@ -905,6 +1133,42 @@
|
|
|
905
1133
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
906
1134
|
}
|
|
907
1135
|
},
|
|
1136
|
+
{
|
|
1137
|
+
"name": "invalid",
|
|
1138
|
+
"type": {
|
|
1139
|
+
"text": "boolean"
|
|
1140
|
+
},
|
|
1141
|
+
"description": "Set to true when the field is invalid.",
|
|
1142
|
+
"fieldName": "invalid",
|
|
1143
|
+
"inheritedFrom": {
|
|
1144
|
+
"name": "ValidateMixin",
|
|
1145
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1146
|
+
}
|
|
1147
|
+
},
|
|
1148
|
+
{
|
|
1149
|
+
"name": "label",
|
|
1150
|
+
"type": {
|
|
1151
|
+
"text": "string"
|
|
1152
|
+
},
|
|
1153
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
1154
|
+
"fieldName": "label",
|
|
1155
|
+
"inheritedFrom": {
|
|
1156
|
+
"name": "LabelMixin",
|
|
1157
|
+
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
1158
|
+
}
|
|
1159
|
+
},
|
|
1160
|
+
{
|
|
1161
|
+
"name": "manual-validation",
|
|
1162
|
+
"type": {
|
|
1163
|
+
"text": "boolean"
|
|
1164
|
+
},
|
|
1165
|
+
"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.",
|
|
1166
|
+
"fieldName": "manualValidation",
|
|
1167
|
+
"inheritedFrom": {
|
|
1168
|
+
"name": "ValidateMixin",
|
|
1169
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1170
|
+
}
|
|
1171
|
+
},
|
|
908
1172
|
{
|
|
909
1173
|
"name": "max",
|
|
910
1174
|
"type": {
|
|
@@ -953,6 +1217,18 @@
|
|
|
953
1217
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
954
1218
|
}
|
|
955
1219
|
},
|
|
1220
|
+
{
|
|
1221
|
+
"name": "required",
|
|
1222
|
+
"type": {
|
|
1223
|
+
"text": "boolean"
|
|
1224
|
+
},
|
|
1225
|
+
"description": "Specifies that the user must fill in a value.",
|
|
1226
|
+
"fieldName": "required",
|
|
1227
|
+
"inheritedFrom": {
|
|
1228
|
+
"name": "ValidateMixin",
|
|
1229
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1230
|
+
}
|
|
1231
|
+
},
|
|
956
1232
|
{
|
|
957
1233
|
"name": "show-week-numbers",
|
|
958
1234
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.2.0-
|
|
39
|
-
"@vaadin/component-base": "25.2.0-
|
|
40
|
-
"@vaadin/date-picker": "25.2.0-
|
|
41
|
-
"@vaadin/field-base": "25.2.0-
|
|
42
|
-
"@vaadin/time-picker": "25.2.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.2.0-alpha10",
|
|
39
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
40
|
+
"@vaadin/date-picker": "25.2.0-alpha10",
|
|
41
|
+
"@vaadin/field-base": "25.2.0-alpha10",
|
|
42
|
+
"@vaadin/time-picker": "25.2.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "25.2.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
47
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
48
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha10",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
52
52
|
"sinon": "^21.0.2"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
60
60
|
}
|
|
@@ -469,7 +469,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
469
469
|
const targetI18n = {};
|
|
470
470
|
props.forEach((prop) => {
|
|
471
471
|
// eslint-disable-next-line no-prototype-builtins
|
|
472
|
-
if (i18n
|
|
472
|
+
if (i18n?.hasOwnProperty(prop)) {
|
|
473
473
|
targetI18n[prop] = i18n[prop];
|
|
474
474
|
}
|
|
475
475
|
});
|
|
@@ -1007,10 +1007,4 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
1007
1007
|
}
|
|
1008
1008
|
}
|
|
1009
1009
|
}
|
|
1010
|
-
|
|
1011
|
-
/**
|
|
1012
|
-
* Fired when the user commits a value change.
|
|
1013
|
-
*
|
|
1014
|
-
* @event change
|
|
1015
|
-
*/
|
|
1016
1010
|
};
|
|
@@ -16,6 +16,11 @@ export type DateTimePickerChangeEvent = Event & {
|
|
|
16
16
|
target: DateTimePicker;
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
+
/**
|
|
20
|
+
* Fired when the user commits an unparsable value change and there is no change event.
|
|
21
|
+
*/
|
|
22
|
+
export type DateTimePickerUnparsableChangeEvent = CustomEvent;
|
|
23
|
+
|
|
19
24
|
/**
|
|
20
25
|
* Fired when the `invalid` property changes.
|
|
21
26
|
*/
|
|
@@ -34,6 +39,8 @@ export type DateTimePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
|
34
39
|
export interface DateTimePickerCustomEventMap {
|
|
35
40
|
'invalid-changed': DateTimePickerInvalidChangedEvent;
|
|
36
41
|
|
|
42
|
+
'unparsable-change': DateTimePickerUnparsableChangeEvent;
|
|
43
|
+
|
|
37
44
|
'value-changed': DateTimePickerValueChangedEvent;
|
|
38
45
|
|
|
39
46
|
validated: DateTimePickerValidatedEvent;
|
package/web-types.json
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-time-picker",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-time-picker",
|
|
11
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message 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`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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
11
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message 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`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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-time-picker).\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 | unparsable-change\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | unparsable-change",
|
|
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": "Set to true to prevent the overlays from opening automatically.",
|
|
38
34
|
"value": {
|
|
39
35
|
"type": [
|
|
40
|
-
"boolean"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
36
|
+
"boolean"
|
|
43
37
|
]
|
|
44
38
|
}
|
|
45
39
|
},
|
|
@@ -48,9 +42,7 @@
|
|
|
48
42
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
49
43
|
"value": {
|
|
50
44
|
"type": [
|
|
51
|
-
"boolean"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
45
|
+
"boolean"
|
|
54
46
|
]
|
|
55
47
|
}
|
|
56
48
|
},
|
|
@@ -59,9 +51,7 @@
|
|
|
59
51
|
"description": "A placeholder string for the date field.",
|
|
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": "If true, the user cannot interact with this element.",
|
|
71
61
|
"value": {
|
|
72
62
|
"type": [
|
|
73
|
-
"boolean"
|
|
74
|
-
"null",
|
|
75
|
-
"undefined"
|
|
63
|
+
"boolean"
|
|
76
64
|
]
|
|
77
65
|
}
|
|
78
66
|
},
|
|
@@ -81,9 +69,7 @@
|
|
|
81
69
|
"description": "Error to show when the field is invalid.",
|
|
82
70
|
"value": {
|
|
83
71
|
"type": [
|
|
84
|
-
"string"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
72
|
+
"string"
|
|
87
73
|
]
|
|
88
74
|
}
|
|
89
75
|
},
|
|
@@ -92,9 +78,7 @@
|
|
|
92
78
|
"description": "String used for the helper text.",
|
|
93
79
|
"value": {
|
|
94
80
|
"type": [
|
|
95
|
-
"string"
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
81
|
+
"string"
|
|
98
82
|
]
|
|
99
83
|
}
|
|
100
84
|
},
|
|
@@ -103,9 +87,7 @@
|
|
|
103
87
|
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
104
88
|
"value": {
|
|
105
89
|
"type": [
|
|
106
|
-
"string"
|
|
107
|
-
"null",
|
|
108
|
-
"undefined"
|
|
90
|
+
"string"
|
|
109
91
|
]
|
|
110
92
|
}
|
|
111
93
|
},
|
|
@@ -114,9 +96,7 @@
|
|
|
114
96
|
"description": "Set to true when the field is invalid.",
|
|
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": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
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": "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.",
|
|
137
115
|
"value": {
|
|
138
116
|
"type": [
|
|
139
|
-
"boolean"
|
|
140
|
-
"null",
|
|
141
|
-
"undefined"
|
|
117
|
+
"boolean"
|
|
142
118
|
]
|
|
143
119
|
}
|
|
144
120
|
},
|
|
@@ -147,9 +123,7 @@
|
|
|
147
123
|
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
148
124
|
"value": {
|
|
149
125
|
"type": [
|
|
150
|
-
"string"
|
|
151
|
-
"null",
|
|
152
|
-
"undefined"
|
|
126
|
+
"string"
|
|
153
127
|
]
|
|
154
128
|
}
|
|
155
129
|
},
|
|
@@ -158,9 +132,7 @@
|
|
|
158
132
|
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
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": "The name of the control, which is submitted with the form data.",
|
|
170
142
|
"value": {
|
|
171
143
|
"type": [
|
|
172
|
-
"string"
|
|
173
|
-
"null",
|
|
174
|
-
"undefined"
|
|
144
|
+
"string"
|
|
175
145
|
]
|
|
176
146
|
}
|
|
177
147
|
},
|
|
@@ -180,9 +150,7 @@
|
|
|
180
150
|
"description": "Set to true to make this element read-only.",
|
|
181
151
|
"value": {
|
|
182
152
|
"type": [
|
|
183
|
-
"boolean"
|
|
184
|
-
"null",
|
|
185
|
-
"undefined"
|
|
153
|
+
"boolean"
|
|
186
154
|
]
|
|
187
155
|
}
|
|
188
156
|
},
|
|
@@ -191,9 +159,7 @@
|
|
|
191
159
|
"description": "Specifies that the user must fill in a value.",
|
|
192
160
|
"value": {
|
|
193
161
|
"type": [
|
|
194
|
-
"boolean"
|
|
195
|
-
"null",
|
|
196
|
-
"undefined"
|
|
162
|
+
"boolean"
|
|
197
163
|
]
|
|
198
164
|
}
|
|
199
165
|
},
|
|
@@ -202,9 +168,7 @@
|
|
|
202
168
|
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
203
169
|
"value": {
|
|
204
170
|
"type": [
|
|
205
|
-
"boolean"
|
|
206
|
-
"null",
|
|
207
|
-
"undefined"
|
|
171
|
+
"boolean"
|
|
208
172
|
]
|
|
209
173
|
}
|
|
210
174
|
},
|
|
@@ -213,9 +177,7 @@
|
|
|
213
177
|
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
|
|
214
178
|
"value": {
|
|
215
179
|
"type": [
|
|
216
|
-
"number"
|
|
217
|
-
"null",
|
|
218
|
-
"undefined"
|
|
180
|
+
"number"
|
|
219
181
|
]
|
|
220
182
|
}
|
|
221
183
|
},
|
|
@@ -235,9 +197,7 @@
|
|
|
235
197
|
"description": "A placeholder string for the time field.",
|
|
236
198
|
"value": {
|
|
237
199
|
"type": [
|
|
238
|
-
"string"
|
|
239
|
-
"null",
|
|
240
|
-
"undefined"
|
|
200
|
+
"string"
|
|
241
201
|
]
|
|
242
202
|
}
|
|
243
203
|
},
|
|
@@ -246,9 +206,7 @@
|
|
|
246
206
|
"description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
247
207
|
"value": {
|
|
248
208
|
"type": [
|
|
249
|
-
"string"
|
|
250
|
-
"null",
|
|
251
|
-
"undefined"
|
|
209
|
+
"string"
|
|
252
210
|
]
|
|
253
211
|
}
|
|
254
212
|
}
|
|
@@ -260,9 +218,7 @@
|
|
|
260
218
|
"description": "String used to label the component to screen reader users.",
|
|
261
219
|
"value": {
|
|
262
220
|
"type": [
|
|
263
|
-
"string"
|
|
264
|
-
"null",
|
|
265
|
-
"undefined"
|
|
221
|
+
"string"
|
|
266
222
|
]
|
|
267
223
|
}
|
|
268
224
|
},
|
|
@@ -271,9 +227,7 @@
|
|
|
271
227
|
"description": "Id of the element used as label of the component to screen reader users.",
|
|
272
228
|
"value": {
|
|
273
229
|
"type": [
|
|
274
|
-
"string"
|
|
275
|
-
"null",
|
|
276
|
-
"undefined"
|
|
230
|
+
"string"
|
|
277
231
|
]
|
|
278
232
|
}
|
|
279
233
|
},
|
|
@@ -282,9 +236,7 @@
|
|
|
282
236
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
283
237
|
"value": {
|
|
284
238
|
"type": [
|
|
285
|
-
"boolean"
|
|
286
|
-
"null",
|
|
287
|
-
"undefined"
|
|
239
|
+
"boolean"
|
|
288
240
|
]
|
|
289
241
|
}
|
|
290
242
|
},
|
|
@@ -293,9 +245,7 @@
|
|
|
293
245
|
"description": "Set to true to prevent the overlays from opening automatically.",
|
|
294
246
|
"value": {
|
|
295
247
|
"type": [
|
|
296
|
-
"boolean"
|
|
297
|
-
"null",
|
|
298
|
-
"undefined"
|
|
248
|
+
"boolean"
|
|
299
249
|
]
|
|
300
250
|
}
|
|
301
251
|
},
|
|
@@ -304,9 +254,7 @@
|
|
|
304
254
|
"description": "A placeholder string for the date field.",
|
|
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": "If true, the user cannot interact with this element.",
|
|
316
264
|
"value": {
|
|
317
265
|
"type": [
|
|
318
|
-
"boolean"
|
|
319
|
-
"null",
|
|
320
|
-
"undefined"
|
|
266
|
+
"boolean"
|
|
321
267
|
]
|
|
322
268
|
}
|
|
323
269
|
},
|
|
@@ -326,9 +272,7 @@
|
|
|
326
272
|
"description": "Error to show when the field is invalid.",
|
|
327
273
|
"value": {
|
|
328
274
|
"type": [
|
|
329
|
-
"string"
|
|
330
|
-
"null",
|
|
331
|
-
"undefined"
|
|
275
|
+
"string"
|
|
332
276
|
]
|
|
333
277
|
}
|
|
334
278
|
},
|
|
@@ -337,18 +281,16 @@
|
|
|
337
281
|
"description": "String used for the helper text.",
|
|
338
282
|
"value": {
|
|
339
283
|
"type": [
|
|
340
|
-
"string"
|
|
341
|
-
"null",
|
|
342
|
-
"undefined"
|
|
284
|
+
"string"
|
|
343
285
|
]
|
|
344
286
|
}
|
|
345
287
|
},
|
|
346
288
|
{
|
|
347
289
|
"name": "i18n",
|
|
348
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
290
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-time-picker) are supported.",
|
|
349
291
|
"value": {
|
|
350
292
|
"type": [
|
|
351
|
-
"
|
|
293
|
+
"Object"
|
|
352
294
|
]
|
|
353
295
|
}
|
|
354
296
|
},
|
|
@@ -357,9 +299,7 @@
|
|
|
357
299
|
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
358
300
|
"value": {
|
|
359
301
|
"type": [
|
|
360
|
-
"string"
|
|
361
|
-
"null",
|
|
362
|
-
"undefined"
|
|
302
|
+
"string"
|
|
363
303
|
]
|
|
364
304
|
}
|
|
365
305
|
},
|
|
@@ -368,9 +308,7 @@
|
|
|
368
308
|
"description": "Set to true when the field is invalid.",
|
|
369
309
|
"value": {
|
|
370
310
|
"type": [
|
|
371
|
-
"boolean"
|
|
372
|
-
"null",
|
|
373
|
-
"undefined"
|
|
311
|
+
"boolean"
|
|
374
312
|
]
|
|
375
313
|
}
|
|
376
314
|
},
|
|
@@ -379,9 +317,7 @@
|
|
|
379
317
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
380
318
|
"value": {
|
|
381
319
|
"type": [
|
|
382
|
-
"string"
|
|
383
|
-
"null",
|
|
384
|
-
"undefined"
|
|
320
|
+
"string"
|
|
385
321
|
]
|
|
386
322
|
}
|
|
387
323
|
},
|
|
@@ -390,9 +326,7 @@
|
|
|
390
326
|
"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.",
|
|
391
327
|
"value": {
|
|
392
328
|
"type": [
|
|
393
|
-
"boolean"
|
|
394
|
-
"null",
|
|
395
|
-
"undefined"
|
|
329
|
+
"boolean"
|
|
396
330
|
]
|
|
397
331
|
}
|
|
398
332
|
},
|
|
@@ -401,9 +335,7 @@
|
|
|
401
335
|
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
402
336
|
"value": {
|
|
403
337
|
"type": [
|
|
404
|
-
"string"
|
|
405
|
-
"null",
|
|
406
|
-
"undefined"
|
|
338
|
+
"string"
|
|
407
339
|
]
|
|
408
340
|
}
|
|
409
341
|
},
|
|
@@ -412,9 +344,7 @@
|
|
|
412
344
|
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
413
345
|
"value": {
|
|
414
346
|
"type": [
|
|
415
|
-
"string"
|
|
416
|
-
"null",
|
|
417
|
-
"undefined"
|
|
347
|
+
"string"
|
|
418
348
|
]
|
|
419
349
|
}
|
|
420
350
|
},
|
|
@@ -423,9 +353,7 @@
|
|
|
423
353
|
"description": "The name of the control, which is submitted with the form data.",
|
|
424
354
|
"value": {
|
|
425
355
|
"type": [
|
|
426
|
-
"string"
|
|
427
|
-
"null",
|
|
428
|
-
"undefined"
|
|
356
|
+
"string"
|
|
429
357
|
]
|
|
430
358
|
}
|
|
431
359
|
},
|
|
@@ -434,9 +362,7 @@
|
|
|
434
362
|
"description": "Set to true to make this element read-only.",
|
|
435
363
|
"value": {
|
|
436
364
|
"type": [
|
|
437
|
-
"boolean"
|
|
438
|
-
"null",
|
|
439
|
-
"undefined"
|
|
365
|
+
"boolean"
|
|
440
366
|
]
|
|
441
367
|
}
|
|
442
368
|
},
|
|
@@ -445,9 +371,7 @@
|
|
|
445
371
|
"description": "Specifies that the user must fill in a value.",
|
|
446
372
|
"value": {
|
|
447
373
|
"type": [
|
|
448
|
-
"boolean"
|
|
449
|
-
"null",
|
|
450
|
-
"undefined"
|
|
374
|
+
"boolean"
|
|
451
375
|
]
|
|
452
376
|
}
|
|
453
377
|
},
|
|
@@ -456,9 +380,7 @@
|
|
|
456
380
|
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
457
381
|
"value": {
|
|
458
382
|
"type": [
|
|
459
|
-
"boolean"
|
|
460
|
-
"null",
|
|
461
|
-
"undefined"
|
|
383
|
+
"boolean"
|
|
462
384
|
]
|
|
463
385
|
}
|
|
464
386
|
},
|
|
@@ -467,9 +389,7 @@
|
|
|
467
389
|
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
|
|
468
390
|
"value": {
|
|
469
391
|
"type": [
|
|
470
|
-
"number"
|
|
471
|
-
"null",
|
|
472
|
-
"undefined"
|
|
392
|
+
"number"
|
|
473
393
|
]
|
|
474
394
|
}
|
|
475
395
|
},
|
|
@@ -478,9 +398,7 @@
|
|
|
478
398
|
"description": "A placeholder string for the time field.",
|
|
479
399
|
"value": {
|
|
480
400
|
"type": [
|
|
481
|
-
"string"
|
|
482
|
-
"null",
|
|
483
|
-
"undefined"
|
|
401
|
+
"string"
|
|
484
402
|
]
|
|
485
403
|
}
|
|
486
404
|
},
|
|
@@ -489,9 +407,7 @@
|
|
|
489
407
|
"description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
490
408
|
"value": {
|
|
491
409
|
"type": [
|
|
492
|
-
"string"
|
|
493
|
-
"null",
|
|
494
|
-
"undefined"
|
|
410
|
+
"string"
|
|
495
411
|
]
|
|
496
412
|
}
|
|
497
413
|
}
|
|
@@ -505,6 +421,10 @@
|
|
|
505
421
|
"name": "invalid-changed",
|
|
506
422
|
"description": "Fired when the `invalid` property changes."
|
|
507
423
|
},
|
|
424
|
+
{
|
|
425
|
+
"name": "unparsable-change",
|
|
426
|
+
"description": "Fired when the user commits an unparsable or incomplete value change and there is no change event."
|
|
427
|
+
},
|
|
508
428
|
{
|
|
509
429
|
"name": "validated",
|
|
510
430
|
"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/date-time-picker",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,138 +16,138 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-date-time-picker",
|
|
19
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message 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`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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
19
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message 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`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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-time-picker).\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 | unparsable-change\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | unparsable-change",
|
|
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": "?autofocus",
|
|
38
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "Set to true
|
|
44
|
+
"name": "?autoOpenDisabled",
|
|
45
|
+
"description": "Set to true to prevent the overlays from opening automatically.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "
|
|
52
|
-
"description": "
|
|
51
|
+
"name": ".datePlaceholder",
|
|
52
|
+
"description": "A placeholder string for the date field.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "?
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "?disabled",
|
|
59
|
+
"description": "If true, the user cannot interact with this element.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": "
|
|
66
|
-
"description": "
|
|
65
|
+
"name": ".errorMessage",
|
|
66
|
+
"description": "Error to show when the field is invalid.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "
|
|
73
|
-
"description": "
|
|
72
|
+
"name": ".helperText",
|
|
73
|
+
"description": "String used for the helper text.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".i18n",
|
|
80
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-time-picker) are supported.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": ".
|
|
87
|
-
"description": "
|
|
86
|
+
"name": ".initialPosition",
|
|
87
|
+
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": "
|
|
94
|
-
"description": "
|
|
93
|
+
"name": "?invalid",
|
|
94
|
+
"description": "Set to true when the field is invalid.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": ".
|
|
101
|
-
"description": "
|
|
100
|
+
"name": ".label",
|
|
101
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": "
|
|
108
|
-
"description": "
|
|
107
|
+
"name": "?manualValidation",
|
|
108
|
+
"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.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": ".
|
|
115
|
-
"description": "The
|
|
114
|
+
"name": ".max",
|
|
115
|
+
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": ".
|
|
122
|
-
"description": "
|
|
121
|
+
"name": ".min",
|
|
122
|
+
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": ".
|
|
129
|
-
"description": "The
|
|
128
|
+
"name": ".name",
|
|
129
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "
|
|
135
|
+
"name": "?readonly",
|
|
136
|
+
"description": "Set to true to make this element read-only.",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": "
|
|
143
|
-
"description": "
|
|
142
|
+
"name": "?required",
|
|
143
|
+
"description": "Specifies that the user must fill in a value.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": "
|
|
150
|
-
"description": "
|
|
149
|
+
"name": "?showWeekNumbers",
|
|
150
|
+
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
@@ -187,6 +187,13 @@
|
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
|
+
{
|
|
191
|
+
"name": "@unparsable-change",
|
|
192
|
+
"description": "Fired when the user commits an unparsable or incomplete value change and there is no change event.",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
190
197
|
{
|
|
191
198
|
"name": "@validated",
|
|
192
199
|
"description": "Fired whenever the field is validated.",
|