@vaadin/date-time-picker 24.2.0-dev.f254716fe → 24.3.0-alpha1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/date-time-picker",
3
- "version": "24.2.0-dev.f254716fe",
3
+ "version": "24.3.0-alpha1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,24 +36,24 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
40
- "@vaadin/component-base": "24.2.0-dev.f254716fe",
41
- "@vaadin/custom-field": "24.2.0-dev.f254716fe",
42
- "@vaadin/date-picker": "24.2.0-dev.f254716fe",
43
- "@vaadin/field-base": "24.2.0-dev.f254716fe",
44
- "@vaadin/time-picker": "24.2.0-dev.f254716fe",
45
- "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
46
- "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
47
- "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe"
39
+ "@vaadin/a11y-base": "24.3.0-alpha1",
40
+ "@vaadin/component-base": "24.3.0-alpha1",
41
+ "@vaadin/custom-field": "24.3.0-alpha1",
42
+ "@vaadin/date-picker": "24.3.0-alpha1",
43
+ "@vaadin/field-base": "24.3.0-alpha1",
44
+ "@vaadin/time-picker": "24.3.0-alpha1",
45
+ "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
46
+ "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
47
+ "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@esm-bundle/chai": "^4.3.4",
51
- "@vaadin/testing-helpers": "^0.4.3",
51
+ "@vaadin/testing-helpers": "^0.5.0",
52
52
  "sinon": "^13.0.2"
53
53
  },
54
54
  "web-types": [
55
55
  "web-types.json",
56
56
  "web-types.lit.json"
57
57
  ],
58
- "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
58
+ "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
59
59
  }
@@ -39,6 +39,11 @@ export type DateTimePickerChangeEvent = Event & {
39
39
  */
40
40
  export type DateTimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
41
41
 
42
+ /**
43
+ * Fired when the `dirty` property changes.
44
+ */
45
+ export type DateTimePickerDirtyChangedEvent = CustomEvent<{ value: boolean }>;
46
+
42
47
  /**
43
48
  * Fired when the `value` property changes.
44
49
  */
@@ -52,6 +57,8 @@ export type DateTimePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
52
57
  export interface DateTimePickerCustomEventMap {
53
58
  'invalid-changed': DateTimePickerInvalidChangedEvent;
54
59
 
60
+ 'dirty-changed': DateTimePickerDirtyChangedEvent;
61
+
55
62
  'value-changed': DateTimePickerValueChangedEvent;
56
63
 
57
64
  validated: DateTimePickerValidatedEvent;
@@ -113,6 +120,7 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
113
120
  *
114
121
  * @fires {Event} change - Fired when the user commits a value change.
115
122
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
123
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
116
124
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
117
125
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
118
126
  */
@@ -214,6 +222,15 @@ declare class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(Themabl
214
222
  */
215
223
  autofocus: boolean;
216
224
 
225
+ /**
226
+ * Whether the field is dirty.
227
+ *
228
+ * The field is automatically marked as dirty once the user triggers
229
+ * an `input` or `change` event on the child pickers. Additionally, the field
230
+ * can be manually marked as dirty by setting the property to `true`.
231
+ */
232
+ dirty: boolean;
233
+
217
234
  /**
218
235
  * The object used to localize this component.
219
236
  * To change the default localization, replace the entire
@@ -6,6 +6,7 @@
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
7
  import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
8
8
  import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
9
+ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
9
10
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
10
11
  import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
11
12
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -112,6 +113,7 @@ class PickerSlotController extends SlotController {
112
113
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
113
114
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
114
115
  *
116
+ * @customElement
115
117
  * @extends HTMLElement
116
118
  * @mixes ElementMixin
117
119
  * @mixes ThemableMixin
@@ -322,6 +324,19 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
322
324
  type: Boolean,
323
325
  },
324
326
 
327
+ /**
328
+ * Whether the field is dirty.
329
+ *
330
+ * The field is automatically marked as dirty once the user triggers
331
+ * an `input` or `change` event on the child pickers. Additionally, the field
332
+ * can be manually marked as dirty by setting the property to `true`.
333
+ */
334
+ dirty: {
335
+ type: Boolean,
336
+ value: false,
337
+ notify: true,
338
+ },
339
+
325
340
  /**
326
341
  * The current selected date time.
327
342
  * @private
@@ -409,6 +424,7 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
409
424
  this.__defaultTimeMaxValue = '23:59:59.999';
410
425
 
411
426
  this.__changeEventHandler = this.__changeEventHandler.bind(this);
427
+ this.__dirtyChangedEventHandler = this.__dirtyChangedEventHandler.bind(this);
412
428
  this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this);
413
429
  }
414
430
 
@@ -510,21 +526,30 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
510
526
  event.stopPropagation();
511
527
 
512
528
  if (this.__dispatchChangeForValue === this.value) {
513
- this.__dispatchChange();
514
529
  this.validate();
530
+ this.__dispatchChange();
515
531
  }
516
532
  this.__dispatchChangeForValue = undefined;
517
533
  }
518
534
 
535
+ /** @private */
536
+ __dirtyChangedEventHandler(event) {
537
+ if (event.detail.value) {
538
+ this.dirty = true;
539
+ }
540
+ }
541
+
519
542
  /** @private */
520
543
  __addInputListeners(node) {
521
544
  node.addEventListener('change', this.__changeEventHandler);
545
+ node.addEventListener('dirty-changed', this.__dirtyChangedEventHandler);
522
546
  node.addEventListener('value-changed', this.__valueChangedEventHandler);
523
547
  }
524
548
 
525
549
  /** @private */
526
550
  __removeInputListeners(node) {
527
551
  node.removeEventListener('change', this.__changeEventHandler);
552
+ node.removeEventListener('dirty-changed', this.__dirtyChangedEventHandler);
528
553
  node.removeEventListener('value-changed', this.__valueChangedEventHandler);
529
554
  }
530
555
 
@@ -1087,6 +1112,6 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
1087
1112
  */
1088
1113
  }
1089
1114
 
1090
- customElements.define(DateTimePicker.is, DateTimePicker);
1115
+ defineCustomElement(DateTimePicker);
1091
1116
 
1092
1117
  export { DateTimePicker };
package/web-types.json ADDED
@@ -0,0 +1,532 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/date-time-picker",
4
+ "version": "24.3.0-alpha1",
5
+ "description-markup": "markdown",
6
+ "contributions": {
7
+ "html": {
8
+ "elements": [
9
+ {
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`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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\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/24.3.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
+ "attributes": [
13
+ {
14
+ "name": "disabled",
15
+ "description": "If true, the user cannot interact with this element.",
16
+ "value": {
17
+ "type": [
18
+ "boolean",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
24
+ {
25
+ "name": "label",
26
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
27
+ "value": {
28
+ "type": [
29
+ "string",
30
+ "null",
31
+ "undefined"
32
+ ]
33
+ }
34
+ },
35
+ {
36
+ "name": "invalid",
37
+ "description": "Set to true when the field is invalid.",
38
+ "value": {
39
+ "type": [
40
+ "boolean",
41
+ "null",
42
+ "undefined"
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "name": "required",
48
+ "description": "Specifies that the user must fill in a value.",
49
+ "value": {
50
+ "type": [
51
+ "boolean",
52
+ "null",
53
+ "undefined"
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "name": "error-message",
59
+ "description": "Error to show when the field is invalid.",
60
+ "value": {
61
+ "type": [
62
+ "string",
63
+ "null",
64
+ "undefined"
65
+ ]
66
+ }
67
+ },
68
+ {
69
+ "name": "helper-text",
70
+ "description": "String used for the helper text.",
71
+ "value": {
72
+ "type": [
73
+ "string",
74
+ "null",
75
+ "undefined"
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "name": "accessible-name",
81
+ "description": "String used to label the component to screen reader users.",
82
+ "value": {
83
+ "type": [
84
+ "string",
85
+ "null",
86
+ "undefined"
87
+ ]
88
+ }
89
+ },
90
+ {
91
+ "name": "accessible-name-ref",
92
+ "description": "Id of the element used as label of the component to screen reader users.",
93
+ "value": {
94
+ "type": [
95
+ "string",
96
+ "null",
97
+ "undefined"
98
+ ]
99
+ }
100
+ },
101
+ {
102
+ "name": "name",
103
+ "description": "The name of the control, which is submitted with the form data.",
104
+ "value": {
105
+ "type": [
106
+ "string",
107
+ "null",
108
+ "undefined"
109
+ ]
110
+ }
111
+ },
112
+ {
113
+ "name": "value",
114
+ "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\"`",
115
+ "value": {
116
+ "type": [
117
+ "string"
118
+ ]
119
+ }
120
+ },
121
+ {
122
+ "name": "min",
123
+ "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\"`",
124
+ "value": {
125
+ "type": [
126
+ "string",
127
+ "undefined"
128
+ ]
129
+ }
130
+ },
131
+ {
132
+ "name": "max",
133
+ "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\"`",
134
+ "value": {
135
+ "type": [
136
+ "string",
137
+ "undefined"
138
+ ]
139
+ }
140
+ },
141
+ {
142
+ "name": "date-placeholder",
143
+ "description": "A placeholder string for the date field.",
144
+ "value": {
145
+ "type": [
146
+ "string",
147
+ "null",
148
+ "undefined"
149
+ ]
150
+ }
151
+ },
152
+ {
153
+ "name": "time-placeholder",
154
+ "description": "A placeholder string for the time field.",
155
+ "value": {
156
+ "type": [
157
+ "string",
158
+ "null",
159
+ "undefined"
160
+ ]
161
+ }
162
+ },
163
+ {
164
+ "name": "step",
165
+ "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.",
166
+ "value": {
167
+ "type": [
168
+ "number",
169
+ "null",
170
+ "undefined"
171
+ ]
172
+ }
173
+ },
174
+ {
175
+ "name": "initial-position",
176
+ "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.",
177
+ "value": {
178
+ "type": [
179
+ "string",
180
+ "null",
181
+ "undefined"
182
+ ]
183
+ }
184
+ },
185
+ {
186
+ "name": "show-week-numbers",
187
+ "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).",
188
+ "value": {
189
+ "type": [
190
+ "boolean",
191
+ "null",
192
+ "undefined"
193
+ ]
194
+ }
195
+ },
196
+ {
197
+ "name": "auto-open-disabled",
198
+ "description": "Set to true to prevent the overlays from opening automatically.",
199
+ "value": {
200
+ "type": [
201
+ "boolean",
202
+ "null",
203
+ "undefined"
204
+ ]
205
+ }
206
+ },
207
+ {
208
+ "name": "readonly",
209
+ "description": "Set to true to make this element read-only.",
210
+ "value": {
211
+ "type": [
212
+ "boolean"
213
+ ]
214
+ }
215
+ },
216
+ {
217
+ "name": "autofocus",
218
+ "description": "Specify that this control should have input focus when the page loads.",
219
+ "value": {
220
+ "type": [
221
+ "boolean"
222
+ ]
223
+ }
224
+ },
225
+ {
226
+ "name": "dirty",
227
+ "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event on the child pickers. Additionally, the field\ncan be manually marked as dirty by setting the property to `true`.",
228
+ "value": {
229
+ "type": [
230
+ "boolean",
231
+ "null",
232
+ "undefined"
233
+ ]
234
+ }
235
+ },
236
+ {
237
+ "name": "overlay-class",
238
+ "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
239
+ "value": {
240
+ "type": [
241
+ "string",
242
+ "null",
243
+ "undefined"
244
+ ]
245
+ }
246
+ },
247
+ {
248
+ "name": "theme",
249
+ "description": "The theme variants to apply to the component.",
250
+ "value": {
251
+ "type": [
252
+ "string",
253
+ "null",
254
+ "undefined"
255
+ ]
256
+ }
257
+ }
258
+ ],
259
+ "js": {
260
+ "properties": [
261
+ {
262
+ "name": "disabled",
263
+ "description": "If true, the user cannot interact with this element.",
264
+ "value": {
265
+ "type": [
266
+ "boolean",
267
+ "null",
268
+ "undefined"
269
+ ]
270
+ }
271
+ },
272
+ {
273
+ "name": "label",
274
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
275
+ "value": {
276
+ "type": [
277
+ "string",
278
+ "null",
279
+ "undefined"
280
+ ]
281
+ }
282
+ },
283
+ {
284
+ "name": "invalid",
285
+ "description": "Set to true when the field is invalid.",
286
+ "value": {
287
+ "type": [
288
+ "boolean",
289
+ "null",
290
+ "undefined"
291
+ ]
292
+ }
293
+ },
294
+ {
295
+ "name": "required",
296
+ "description": "Specifies that the user must fill in a value.",
297
+ "value": {
298
+ "type": [
299
+ "boolean",
300
+ "null",
301
+ "undefined"
302
+ ]
303
+ }
304
+ },
305
+ {
306
+ "name": "errorMessage",
307
+ "description": "Error to show when the field is invalid.",
308
+ "value": {
309
+ "type": [
310
+ "string",
311
+ "null",
312
+ "undefined"
313
+ ]
314
+ }
315
+ },
316
+ {
317
+ "name": "helperText",
318
+ "description": "String used for the helper text.",
319
+ "value": {
320
+ "type": [
321
+ "string",
322
+ "null",
323
+ "undefined"
324
+ ]
325
+ }
326
+ },
327
+ {
328
+ "name": "accessibleName",
329
+ "description": "String used to label the component to screen reader users.",
330
+ "value": {
331
+ "type": [
332
+ "string",
333
+ "null",
334
+ "undefined"
335
+ ]
336
+ }
337
+ },
338
+ {
339
+ "name": "accessibleNameRef",
340
+ "description": "Id of the element used as label of the component to screen reader users.",
341
+ "value": {
342
+ "type": [
343
+ "string",
344
+ "null",
345
+ "undefined"
346
+ ]
347
+ }
348
+ },
349
+ {
350
+ "name": "name",
351
+ "description": "The name of the control, which is submitted with the form data.",
352
+ "value": {
353
+ "type": [
354
+ "string",
355
+ "null",
356
+ "undefined"
357
+ ]
358
+ }
359
+ },
360
+ {
361
+ "name": "value",
362
+ "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\"`",
363
+ "value": {
364
+ "type": [
365
+ "string"
366
+ ]
367
+ }
368
+ },
369
+ {
370
+ "name": "min",
371
+ "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\"`",
372
+ "value": {
373
+ "type": [
374
+ "string",
375
+ "undefined"
376
+ ]
377
+ }
378
+ },
379
+ {
380
+ "name": "max",
381
+ "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\"`",
382
+ "value": {
383
+ "type": [
384
+ "string",
385
+ "undefined"
386
+ ]
387
+ }
388
+ },
389
+ {
390
+ "name": "datePlaceholder",
391
+ "description": "A placeholder string for the date field.",
392
+ "value": {
393
+ "type": [
394
+ "string",
395
+ "null",
396
+ "undefined"
397
+ ]
398
+ }
399
+ },
400
+ {
401
+ "name": "timePlaceholder",
402
+ "description": "A placeholder string for the time field.",
403
+ "value": {
404
+ "type": [
405
+ "string",
406
+ "null",
407
+ "undefined"
408
+ ]
409
+ }
410
+ },
411
+ {
412
+ "name": "step",
413
+ "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.",
414
+ "value": {
415
+ "type": [
416
+ "number",
417
+ "null",
418
+ "undefined"
419
+ ]
420
+ }
421
+ },
422
+ {
423
+ "name": "initialPosition",
424
+ "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.",
425
+ "value": {
426
+ "type": [
427
+ "string",
428
+ "null",
429
+ "undefined"
430
+ ]
431
+ }
432
+ },
433
+ {
434
+ "name": "showWeekNumbers",
435
+ "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).",
436
+ "value": {
437
+ "type": [
438
+ "boolean",
439
+ "null",
440
+ "undefined"
441
+ ]
442
+ }
443
+ },
444
+ {
445
+ "name": "autoOpenDisabled",
446
+ "description": "Set to true to prevent the overlays from opening automatically.",
447
+ "value": {
448
+ "type": [
449
+ "boolean",
450
+ "null",
451
+ "undefined"
452
+ ]
453
+ }
454
+ },
455
+ {
456
+ "name": "readonly",
457
+ "description": "Set to true to make this element read-only.",
458
+ "value": {
459
+ "type": [
460
+ "boolean"
461
+ ]
462
+ }
463
+ },
464
+ {
465
+ "name": "autofocus",
466
+ "description": "Specify that this control should have input focus when the page loads.",
467
+ "value": {
468
+ "type": [
469
+ "boolean"
470
+ ]
471
+ }
472
+ },
473
+ {
474
+ "name": "dirty",
475
+ "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event on the child pickers. Additionally, the field\ncan be manually marked as dirty by setting the property to `true`.",
476
+ "value": {
477
+ "type": [
478
+ "boolean",
479
+ "null",
480
+ "undefined"
481
+ ]
482
+ }
483
+ },
484
+ {
485
+ "name": "i18n",
486
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-time-picker).",
487
+ "value": {
488
+ "type": [
489
+ "DateTimePickerI18n"
490
+ ]
491
+ }
492
+ },
493
+ {
494
+ "name": "overlayClass",
495
+ "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
496
+ "value": {
497
+ "type": [
498
+ "string",
499
+ "null",
500
+ "undefined"
501
+ ]
502
+ }
503
+ }
504
+ ],
505
+ "events": [
506
+ {
507
+ "name": "validated",
508
+ "description": "Fired whenever the field is validated."
509
+ },
510
+ {
511
+ "name": "change",
512
+ "description": "Fired when the user commits a value change."
513
+ },
514
+ {
515
+ "name": "value-changed",
516
+ "description": "Fired when the `value` property changes."
517
+ },
518
+ {
519
+ "name": "dirty-changed",
520
+ "description": "Fired when the `dirty` property changes."
521
+ },
522
+ {
523
+ "name": "invalid-changed",
524
+ "description": "Fired when the `invalid` property changes."
525
+ }
526
+ ]
527
+ }
528
+ }
529
+ ]
530
+ }
531
+ }
532
+ }
@@ -0,0 +1,223 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/date-time-picker",
4
+ "version": "24.3.0-alpha1",
5
+ "description-markup": "markdown",
6
+ "framework": "lit",
7
+ "framework-config": {
8
+ "enable-when": {
9
+ "node-packages": [
10
+ "lit"
11
+ ]
12
+ }
13
+ },
14
+ "contributions": {
15
+ "html": {
16
+ "elements": [
17
+ {
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`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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\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/24.3.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
+ "extension": true,
21
+ "attributes": [
22
+ {
23
+ "name": "?disabled",
24
+ "description": "If true, the user cannot interact with this element.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
29
+ {
30
+ "name": "?invalid",
31
+ "description": "Set to true when the field is invalid.",
32
+ "value": {
33
+ "kind": "expression"
34
+ }
35
+ },
36
+ {
37
+ "name": "?required",
38
+ "description": "Specifies that the user must fill in a value.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
43
+ {
44
+ "name": "?showWeekNumbers",
45
+ "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).",
46
+ "value": {
47
+ "kind": "expression"
48
+ }
49
+ },
50
+ {
51
+ "name": "?autoOpenDisabled",
52
+ "description": "Set to true to prevent the overlays from opening automatically.",
53
+ "value": {
54
+ "kind": "expression"
55
+ }
56
+ },
57
+ {
58
+ "name": "?readonly",
59
+ "description": "Set to true to make this element read-only.",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
65
+ "name": "?autofocus",
66
+ "description": "Specify that this control should have input focus when the page loads.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": "?dirty",
73
+ "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event on the child pickers. Additionally, the field\ncan be manually marked as dirty by setting the property to `true`.",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": ".label",
80
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": ".errorMessage",
87
+ "description": "Error to show when the field is invalid.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
92
+ {
93
+ "name": ".helperText",
94
+ "description": "String used for the helper text.",
95
+ "value": {
96
+ "kind": "expression"
97
+ }
98
+ },
99
+ {
100
+ "name": ".accessibleName",
101
+ "description": "String used to label the component to screen reader users.",
102
+ "value": {
103
+ "kind": "expression"
104
+ }
105
+ },
106
+ {
107
+ "name": ".accessibleNameRef",
108
+ "description": "Id of the element used as label of the component to screen reader users.",
109
+ "value": {
110
+ "kind": "expression"
111
+ }
112
+ },
113
+ {
114
+ "name": ".name",
115
+ "description": "The name of the control, which is submitted with the form data.",
116
+ "value": {
117
+ "kind": "expression"
118
+ }
119
+ },
120
+ {
121
+ "name": ".value",
122
+ "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\"`",
123
+ "value": {
124
+ "kind": "expression"
125
+ }
126
+ },
127
+ {
128
+ "name": ".min",
129
+ "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\"`",
130
+ "value": {
131
+ "kind": "expression"
132
+ }
133
+ },
134
+ {
135
+ "name": ".max",
136
+ "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\"`",
137
+ "value": {
138
+ "kind": "expression"
139
+ }
140
+ },
141
+ {
142
+ "name": ".datePlaceholder",
143
+ "description": "A placeholder string for the date field.",
144
+ "value": {
145
+ "kind": "expression"
146
+ }
147
+ },
148
+ {
149
+ "name": ".timePlaceholder",
150
+ "description": "A placeholder string for the time field.",
151
+ "value": {
152
+ "kind": "expression"
153
+ }
154
+ },
155
+ {
156
+ "name": ".step",
157
+ "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.",
158
+ "value": {
159
+ "kind": "expression"
160
+ }
161
+ },
162
+ {
163
+ "name": ".initialPosition",
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.",
165
+ "value": {
166
+ "kind": "expression"
167
+ }
168
+ },
169
+ {
170
+ "name": ".i18n",
171
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-time-picker).",
172
+ "value": {
173
+ "kind": "expression"
174
+ }
175
+ },
176
+ {
177
+ "name": ".overlayClass",
178
+ "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
179
+ "value": {
180
+ "kind": "expression"
181
+ }
182
+ },
183
+ {
184
+ "name": "@validated",
185
+ "description": "Fired whenever the field is validated.",
186
+ "value": {
187
+ "kind": "expression"
188
+ }
189
+ },
190
+ {
191
+ "name": "@change",
192
+ "description": "Fired when the user commits a value change.",
193
+ "value": {
194
+ "kind": "expression"
195
+ }
196
+ },
197
+ {
198
+ "name": "@value-changed",
199
+ "description": "Fired when the `value` property changes.",
200
+ "value": {
201
+ "kind": "expression"
202
+ }
203
+ },
204
+ {
205
+ "name": "@dirty-changed",
206
+ "description": "Fired when the `dirty` property changes.",
207
+ "value": {
208
+ "kind": "expression"
209
+ }
210
+ },
211
+ {
212
+ "name": "@invalid-changed",
213
+ "description": "Fired when the `invalid` property changes.",
214
+ "value": {
215
+ "kind": "expression"
216
+ }
217
+ }
218
+ ]
219
+ }
220
+ ]
221
+ }
222
+ }
223
+ }