@vaadin/date-time-picker 25.0.0-alpha17 → 25.0.0-alpha18
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 +12 -12
- package/src/vaadin-date-time-picker-mixin.d.ts +27 -7
- package/src/vaadin-date-time-picker-mixin.js +64 -36
- package/web-types.json +11 -11
- package/web-types.lit.json +9 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha18",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,25 +34,25 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
38
|
-
"@vaadin/component-base": "25.0.0-
|
|
39
|
-
"@vaadin/custom-field": "25.0.0-
|
|
40
|
-
"@vaadin/date-picker": "25.0.0-
|
|
41
|
-
"@vaadin/field-base": "25.0.0-
|
|
42
|
-
"@vaadin/time-picker": "25.0.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-alpha18",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-alpha18",
|
|
39
|
+
"@vaadin/custom-field": "25.0.0-alpha18",
|
|
40
|
+
"@vaadin/date-picker": "25.0.0-alpha18",
|
|
41
|
+
"@vaadin/field-base": "25.0.0-alpha18",
|
|
42
|
+
"@vaadin/time-picker": "25.0.0-alpha18",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha18",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
47
|
+
"@vaadin/chai-plugins": "25.0.0-alpha18",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha18",
|
|
49
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha18",
|
|
51
51
|
"sinon": "^21.0.0"
|
|
52
52
|
},
|
|
53
53
|
"web-types": [
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "cb5cafb5687a117ebead1b81e2116991cec13abe"
|
|
58
58
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
7
|
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
8
8
|
import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
9
|
+
import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
9
10
|
import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
10
11
|
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
|
|
11
12
|
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
|
|
@@ -19,7 +20,7 @@ export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {
|
|
|
19
20
|
* If both properties are defined, then accessibleName takes precedence.
|
|
20
21
|
* Then, the dateLabel value is concatenated with it.
|
|
21
22
|
*/
|
|
22
|
-
dateLabel
|
|
23
|
+
dateLabel?: string;
|
|
23
24
|
|
|
24
25
|
/**
|
|
25
26
|
* Accessible label to the time picker.
|
|
@@ -27,7 +28,7 @@ export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {
|
|
|
27
28
|
* If both properties are defined, then accessibleName takes precedence.
|
|
28
29
|
* Then, the dateLabel value is concatenated with it.
|
|
29
30
|
*/
|
|
30
|
-
timeLabel
|
|
31
|
+
timeLabel?: string;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
/**
|
|
@@ -39,6 +40,7 @@ export declare function DateTimePickerMixin<T extends Constructor<HTMLElement>>(
|
|
|
39
40
|
Constructor<DisabledMixinClass> &
|
|
40
41
|
Constructor<FieldMixinClass> &
|
|
41
42
|
Constructor<FocusMixinClass> &
|
|
43
|
+
Constructor<I18nMixinClass<DateTimePickerI18n>> &
|
|
42
44
|
Constructor<LabelMixinClass> &
|
|
43
45
|
Constructor<ValidateMixinClass> &
|
|
44
46
|
T;
|
|
@@ -142,13 +144,31 @@ export declare class DateTimePickerMixinClass {
|
|
|
142
144
|
autofocus: boolean;
|
|
143
145
|
|
|
144
146
|
/**
|
|
145
|
-
* The object used to localize this component.
|
|
146
|
-
*
|
|
147
|
-
*
|
|
147
|
+
* The object used to localize this component. To change the default
|
|
148
|
+
* localization, replace this with an object that provides all properties, or
|
|
149
|
+
* just the individual properties you want to change.
|
|
148
150
|
*
|
|
149
|
-
* The object
|
|
151
|
+
* The object has the following structure and default values:
|
|
152
|
+
*
|
|
153
|
+
* ```
|
|
154
|
+
* {
|
|
155
|
+
* // Accessible label to the date picker.
|
|
156
|
+
* // The property works in conjunction with label and accessibleName defined on the field.
|
|
157
|
+
* // If both properties are defined, then accessibleName takes precedence.
|
|
158
|
+
* // Then, the dateLabel value is concatenated with it.
|
|
159
|
+
* dateLabel: undefined;
|
|
160
|
+
*
|
|
161
|
+
* // Accessible label to the time picker.
|
|
162
|
+
* // The property works in conjunction with label and accessibleName defined on the field.
|
|
163
|
+
* // If both properties are defined, then accessibleName takes precedence.
|
|
164
|
+
* // Then, the dateLabel value is concatenated with it.
|
|
165
|
+
* timeLabel: undefined;
|
|
166
|
+
* }
|
|
167
|
+
* ```
|
|
168
|
+
*
|
|
169
|
+
* Additionally, all i18n properties from
|
|
150
170
|
* [`<vaadin-date-picker>`](#/elements/vaadin-date-picker) and
|
|
151
|
-
* [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
|
|
171
|
+
* [`<vaadin-time-picker>`](#/elements/vaadin-time-picker) are supported.
|
|
152
172
|
*/
|
|
153
173
|
i18n: DateTimePickerI18n;
|
|
154
174
|
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
7
7
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
8
|
+
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
8
9
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
9
10
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
10
11
|
import {
|
|
@@ -21,6 +22,8 @@ import { timePickerI18nDefaults } from '@vaadin/time-picker/src/vaadin-time-pick
|
|
|
21
22
|
const datePickerI18nProps = Object.keys(datePickerI18nDefaults);
|
|
22
23
|
const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
|
|
23
24
|
|
|
25
|
+
const DEFAULT_I18N = { ...datePickerI18nDefaults, ...timePickerI18nDefaults };
|
|
26
|
+
|
|
24
27
|
/**
|
|
25
28
|
* A controller to initialize slotted picker.
|
|
26
29
|
*
|
|
@@ -46,7 +49,7 @@ class PickerSlotController extends SlotController {
|
|
|
46
49
|
* @mixes FocusMixin
|
|
47
50
|
*/
|
|
48
51
|
export const DateTimePickerMixin = (superClass) =>
|
|
49
|
-
class DateTimePickerMixinClass extends FieldMixin(FocusMixin(DisabledMixin(superClass))) {
|
|
52
|
+
class DateTimePickerMixinClass extends I18nMixin(DEFAULT_I18N, FieldMixin(FocusMixin(DisabledMixin(superClass)))) {
|
|
50
53
|
static get properties() {
|
|
51
54
|
return {
|
|
52
55
|
/**
|
|
@@ -224,22 +227,6 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
224
227
|
sync: true,
|
|
225
228
|
},
|
|
226
229
|
|
|
227
|
-
/**
|
|
228
|
-
* The object used to localize this component.
|
|
229
|
-
* To change the default localization, replace the entire
|
|
230
|
-
* `i18n` object or just the properties you want to modify.
|
|
231
|
-
*
|
|
232
|
-
* The object is a combination of the i18n properties supported by
|
|
233
|
-
* [`<vaadin-date-picker>`](#/elements/vaadin-date-picker) and
|
|
234
|
-
* [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
|
|
235
|
-
* @type {!DateTimePickerI18n}
|
|
236
|
-
*/
|
|
237
|
-
i18n: {
|
|
238
|
-
type: Object,
|
|
239
|
-
sync: true,
|
|
240
|
-
value: () => ({ ...datePickerI18nDefaults, ...timePickerI18nDefaults }),
|
|
241
|
-
},
|
|
242
|
-
|
|
243
230
|
/**
|
|
244
231
|
* The current slotted date picker.
|
|
245
232
|
* @private
|
|
@@ -274,11 +261,11 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
274
261
|
'__invalidChanged(invalid, __datePicker, __timePicker)',
|
|
275
262
|
'__disabledChanged(disabled, __datePicker, __timePicker)',
|
|
276
263
|
'__readonlyChanged(readonly, __datePicker, __timePicker)',
|
|
277
|
-
'__i18nChanged(
|
|
264
|
+
'__i18nChanged(__effectiveI18n, __datePicker, __timePicker)',
|
|
278
265
|
'__autoOpenDisabledChanged(autoOpenDisabled, __datePicker, __timePicker)',
|
|
279
266
|
'__themeChanged(_theme, __datePicker, __timePicker)',
|
|
280
267
|
'__pickersChanged(__datePicker, __timePicker)',
|
|
281
|
-
'__labelOrAccessibleNameChanged(label, accessibleName,
|
|
268
|
+
'__labelOrAccessibleNameChanged(label, accessibleName, __effectiveI18n, __datePicker, __timePicker)',
|
|
282
269
|
];
|
|
283
270
|
}
|
|
284
271
|
|
|
@@ -297,6 +284,43 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
297
284
|
this.__openedChangedEventHandler = this.__openedChangedEventHandler.bind(this);
|
|
298
285
|
}
|
|
299
286
|
|
|
287
|
+
/**
|
|
288
|
+
* The object used to localize this component. To change the default
|
|
289
|
+
* localization, replace this with an object that provides all properties, or
|
|
290
|
+
* just the individual properties you want to change.
|
|
291
|
+
*
|
|
292
|
+
* The object has the following structure and default values:
|
|
293
|
+
*
|
|
294
|
+
* ```
|
|
295
|
+
* {
|
|
296
|
+
* // Accessible label to the date picker.
|
|
297
|
+
* // The property works in conjunction with label and accessibleName defined on the field.
|
|
298
|
+
* // If both properties are defined, then accessibleName takes precedence.
|
|
299
|
+
* // Then, the dateLabel value is concatenated with it.
|
|
300
|
+
* dateLabel: undefined;
|
|
301
|
+
*
|
|
302
|
+
* // Accessible label to the time picker.
|
|
303
|
+
* // The property works in conjunction with label and accessibleName defined on the field.
|
|
304
|
+
* // If both properties are defined, then accessibleName takes precedence.
|
|
305
|
+
* // Then, the dateLabel value is concatenated with it.
|
|
306
|
+
* timeLabel: undefined;
|
|
307
|
+
* }
|
|
308
|
+
* ```
|
|
309
|
+
*
|
|
310
|
+
* Additionally, all i18n properties from
|
|
311
|
+
* [`<vaadin-date-picker>`](#/elements/vaadin-date-picker) and
|
|
312
|
+
* [`<vaadin-time-picker>`](#/elements/vaadin-time-picker) are supported.
|
|
313
|
+
*
|
|
314
|
+
* @type {!DateTimePickerI18n}
|
|
315
|
+
*/
|
|
316
|
+
get i18n() {
|
|
317
|
+
return super.i18n;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
set i18n(value) {
|
|
321
|
+
super.i18n = value;
|
|
322
|
+
}
|
|
323
|
+
|
|
300
324
|
/** @private */
|
|
301
325
|
get __pickers() {
|
|
302
326
|
return [this.__datePicker, this.__timePicker];
|
|
@@ -372,9 +396,14 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
372
396
|
document.removeEventListener('click', this.__onGlobalClick, true);
|
|
373
397
|
}
|
|
374
398
|
|
|
375
|
-
|
|
399
|
+
/**
|
|
400
|
+
* @param {FocusOptions=} options
|
|
401
|
+
* @protected
|
|
402
|
+
* @override
|
|
403
|
+
*/
|
|
404
|
+
focus(options) {
|
|
376
405
|
if (this.__datePicker) {
|
|
377
|
-
this.__datePicker.focus();
|
|
406
|
+
this.__datePicker.focus(options);
|
|
378
407
|
}
|
|
379
408
|
}
|
|
380
409
|
|
|
@@ -443,15 +472,15 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
443
472
|
}
|
|
444
473
|
|
|
445
474
|
/** @private */
|
|
446
|
-
__syncI18n(target,
|
|
447
|
-
const
|
|
475
|
+
__syncI18n(target, i18n, props) {
|
|
476
|
+
const targetI18n = {};
|
|
448
477
|
props.forEach((prop) => {
|
|
449
478
|
// eslint-disable-next-line no-prototype-builtins
|
|
450
|
-
if (
|
|
451
|
-
|
|
479
|
+
if (i18n && i18n.hasOwnProperty(prop)) {
|
|
480
|
+
targetI18n[prop] = i18n[prop];
|
|
452
481
|
}
|
|
453
482
|
});
|
|
454
|
-
target.i18n =
|
|
483
|
+
target.i18n = targetI18n;
|
|
455
484
|
}
|
|
456
485
|
|
|
457
486
|
/** @private */
|
|
@@ -523,7 +552,6 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
523
552
|
this.datePlaceholder = newDatePicker.placeholder;
|
|
524
553
|
this.initialPosition = newDatePicker.initialPosition;
|
|
525
554
|
this.showWeekNumbers = newDatePicker.showWeekNumbers;
|
|
526
|
-
this.__syncI18n(this, newDatePicker, datePickerI18nProps);
|
|
527
555
|
}
|
|
528
556
|
|
|
529
557
|
// Min and max are always synchronized from date time picker (host) to inner fields because time picker
|
|
@@ -552,7 +580,6 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
552
580
|
// Synchronize properties from slotted time picker
|
|
553
581
|
this.timePlaceholder = newTimePicker.placeholder;
|
|
554
582
|
this.step = newTimePicker.step;
|
|
555
|
-
this.__syncI18n(this, newTimePicker, timePickerI18nProps);
|
|
556
583
|
}
|
|
557
584
|
|
|
558
585
|
// Min and max are always synchronized from parent to slotted because time picker min and max
|
|
@@ -584,26 +611,27 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
584
611
|
}
|
|
585
612
|
|
|
586
613
|
/** @private */
|
|
587
|
-
__i18nChanged(
|
|
588
|
-
|
|
589
|
-
|
|
614
|
+
__i18nChanged(effectiveI18n, datePicker, timePicker) {
|
|
615
|
+
// Only propagate i18n to default pickers
|
|
616
|
+
if (datePicker && this.__isDefaultPicker(datePicker, 'date')) {
|
|
617
|
+
this.__syncI18n(datePicker, effectiveI18n, datePickerI18nProps);
|
|
590
618
|
}
|
|
591
619
|
|
|
592
|
-
if (timePicker) {
|
|
593
|
-
this.__syncI18n(timePicker,
|
|
620
|
+
if (timePicker && this.__isDefaultPicker(timePicker, 'time')) {
|
|
621
|
+
this.__syncI18n(timePicker, effectiveI18n, timePickerI18nProps);
|
|
594
622
|
}
|
|
595
623
|
}
|
|
596
624
|
|
|
597
625
|
/** @private */
|
|
598
|
-
__labelOrAccessibleNameChanged(label, accessibleName,
|
|
626
|
+
__labelOrAccessibleNameChanged(label, accessibleName, effectiveI18n, datePicker, timePicker) {
|
|
599
627
|
const name = accessibleName || label || '';
|
|
600
628
|
|
|
601
629
|
if (datePicker) {
|
|
602
|
-
datePicker.accessibleName = `${name} ${
|
|
630
|
+
datePicker.accessibleName = `${name} ${effectiveI18n.dateLabel || ''}`.trim();
|
|
603
631
|
}
|
|
604
632
|
|
|
605
633
|
if (timePicker) {
|
|
606
|
-
timePicker.accessibleName = `${name} ${
|
|
634
|
+
timePicker.accessibleName = `${name} ${effectiveI18n.timeLabel || ''}`.trim();
|
|
607
635
|
}
|
|
608
636
|
}
|
|
609
637
|
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-time-picker",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha18",
|
|
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`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\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.0.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`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\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.0.0-alpha18/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha18/#/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": "disabled",
|
|
@@ -346,6 +346,15 @@
|
|
|
346
346
|
]
|
|
347
347
|
}
|
|
348
348
|
},
|
|
349
|
+
{
|
|
350
|
+
"name": "i18n",
|
|
351
|
+
"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```\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.0.0-alpha18/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha18/#/elements/vaadin-time-picker) are supported.",
|
|
352
|
+
"value": {
|
|
353
|
+
"type": [
|
|
354
|
+
"?"
|
|
355
|
+
]
|
|
356
|
+
}
|
|
357
|
+
},
|
|
349
358
|
{
|
|
350
359
|
"name": "name",
|
|
351
360
|
"description": "The name of the control, which is submitted with the form data.",
|
|
@@ -469,15 +478,6 @@
|
|
|
469
478
|
"boolean"
|
|
470
479
|
]
|
|
471
480
|
}
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
"name": "i18n",
|
|
475
|
-
"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/25.0.0-alpha17/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-time-picker).",
|
|
476
|
-
"value": {
|
|
477
|
-
"type": [
|
|
478
|
-
"DateTimePickerI18n"
|
|
479
|
-
]
|
|
480
|
-
}
|
|
481
481
|
}
|
|
482
482
|
],
|
|
483
483
|
"events": [
|
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.0.0-
|
|
4
|
+
"version": "25.0.0-alpha18",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
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`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\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.0.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`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\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.0.0-alpha18/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha18/#/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
|
{
|
|
@@ -110,6 +110,13 @@
|
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".i18n",
|
|
115
|
+
"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```\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.0.0-alpha18/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha18/#/elements/vaadin-time-picker) are supported.",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
113
120
|
{
|
|
114
121
|
"name": ".name",
|
|
115
122
|
"description": "The name of the control, which is submitted with the form data.",
|
|
@@ -166,13 +173,6 @@
|
|
|
166
173
|
"kind": "expression"
|
|
167
174
|
}
|
|
168
175
|
},
|
|
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/25.0.0-alpha17/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha17/#/elements/vaadin-time-picker).",
|
|
172
|
-
"value": {
|
|
173
|
-
"kind": "expression"
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
176
|
{
|
|
177
177
|
"name": "@validated",
|
|
178
178
|
"description": "Fired whenever the field is validated.",
|