@vaadin/date-time-picker 25.0.0-alpha2 → 25.0.0-alpha21
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 +13 -14
- package/src/styles/vaadin-date-time-picker-base-styles.d.ts +8 -0
- package/src/styles/vaadin-date-time-picker-base-styles.js +28 -0
- package/src/vaadin-date-time-picker-mixin.d.ts +27 -18
- package/src/vaadin-date-time-picker-mixin.js +65 -62
- package/src/vaadin-date-time-picker.d.ts +12 -14
- package/src/vaadin-date-time-picker.js +19 -39
- package/vaadin-date-time-picker.js +1 -1
- package/web-types.json +11 -33
- package/web-types.lit.json +9 -16
- package/theme/lumo/vaadin-date-time-picker-styles.d.ts +0 -1
- package/theme/lumo/vaadin-date-time-picker-styles.js +0 -21
- package/theme/lumo/vaadin-date-time-picker.d.ts +0 -4
- package/theme/lumo/vaadin-date-time-picker.js +0 -4
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-alpha21",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"theme",
|
|
25
24
|
"vaadin-*.d.ts",
|
|
26
25
|
"vaadin-*.js",
|
|
27
26
|
"web-types.json",
|
|
@@ -35,25 +34,25 @@
|
|
|
35
34
|
],
|
|
36
35
|
"dependencies": {
|
|
37
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/custom-field": "25.0.0-
|
|
41
|
-
"@vaadin/date-picker": "25.0.0-
|
|
42
|
-
"@vaadin/field-base": "25.0.0-
|
|
43
|
-
"@vaadin/time-picker": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-alpha21",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-alpha21",
|
|
39
|
+
"@vaadin/custom-field": "25.0.0-alpha21",
|
|
40
|
+
"@vaadin/date-picker": "25.0.0-alpha21",
|
|
41
|
+
"@vaadin/field-base": "25.0.0-alpha21",
|
|
42
|
+
"@vaadin/time-picker": "25.0.0-alpha21",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
|
|
46
44
|
"lit": "^3.0.0"
|
|
47
45
|
},
|
|
48
46
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
47
|
+
"@vaadin/chai-plugins": "25.0.0-alpha21",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha21",
|
|
51
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
|
|
51
|
+
"sinon": "^21.0.0"
|
|
53
52
|
},
|
|
54
53
|
"web-types": [
|
|
55
54
|
"web-types.json",
|
|
56
55
|
"web-types.lit.json"
|
|
57
56
|
],
|
|
58
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
|
|
59
58
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2019 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
|
|
9
|
+
export const dateTimePickerStyles = css`
|
|
10
|
+
.vaadin-date-time-picker-container {
|
|
11
|
+
width: calc(var(--vaadin-field-default-width, 12em) * 2 + var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s)));
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.slots {
|
|
15
|
+
display: flex;
|
|
16
|
+
gap: var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.slots ::slotted([slot='date-picker']) {
|
|
20
|
+
min-width: 0;
|
|
21
|
+
flex: 1 1 auto;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.slots ::slotted([slot='time-picker']) {
|
|
25
|
+
min-width: 0;
|
|
26
|
+
flex: 1 1.65 auto;
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
@@ -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,24 +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
|
|
150
|
-
*
|
|
151
|
-
*
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
*
|
|
157
|
-
*
|
|
151
|
+
* The object has the following structure and default values:
|
|
152
|
+
*
|
|
153
|
+
* ```js
|
|
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;
|
|
158
160
|
*
|
|
159
|
-
*
|
|
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
|
+
* ```
|
|
161
168
|
*
|
|
162
|
-
*
|
|
169
|
+
* Additionally, all i18n properties from
|
|
170
|
+
* [`<vaadin-date-picker>`](#/elements/vaadin-date-picker) and
|
|
171
|
+
* [`<vaadin-time-picker>`](#/elements/vaadin-time-picker) are supported.
|
|
163
172
|
*/
|
|
164
|
-
|
|
173
|
+
i18n: DateTimePickerI18n;
|
|
165
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,35 +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
|
-
/**
|
|
244
|
-
* A space-delimited list of CSS class names to set on the overlay elements
|
|
245
|
-
* of the internal components controlled by the `<vaadin-date-time-picker>`:
|
|
246
|
-
*
|
|
247
|
-
* - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker#property-overlayClass)
|
|
248
|
-
* - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker#property-overlayClass)
|
|
249
|
-
*
|
|
250
|
-
* @attr {string} overlay-class
|
|
251
|
-
*/
|
|
252
|
-
overlayClass: {
|
|
253
|
-
type: String,
|
|
254
|
-
},
|
|
255
|
-
|
|
256
230
|
/**
|
|
257
231
|
* The current slotted date picker.
|
|
258
232
|
* @private
|
|
@@ -287,12 +261,11 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
287
261
|
'__invalidChanged(invalid, __datePicker, __timePicker)',
|
|
288
262
|
'__disabledChanged(disabled, __datePicker, __timePicker)',
|
|
289
263
|
'__readonlyChanged(readonly, __datePicker, __timePicker)',
|
|
290
|
-
'__i18nChanged(
|
|
264
|
+
'__i18nChanged(__effectiveI18n, __datePicker, __timePicker)',
|
|
291
265
|
'__autoOpenDisabledChanged(autoOpenDisabled, __datePicker, __timePicker)',
|
|
292
266
|
'__themeChanged(_theme, __datePicker, __timePicker)',
|
|
293
|
-
'__overlayClassChanged(overlayClass, __datePicker, __timePicker)',
|
|
294
267
|
'__pickersChanged(__datePicker, __timePicker)',
|
|
295
|
-
'__labelOrAccessibleNameChanged(label, accessibleName,
|
|
268
|
+
'__labelOrAccessibleNameChanged(label, accessibleName, __effectiveI18n, __datePicker, __timePicker)',
|
|
296
269
|
];
|
|
297
270
|
}
|
|
298
271
|
|
|
@@ -311,6 +284,43 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
311
284
|
this.__openedChangedEventHandler = this.__openedChangedEventHandler.bind(this);
|
|
312
285
|
}
|
|
313
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
|
+
* ```js
|
|
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
|
+
|
|
314
324
|
/** @private */
|
|
315
325
|
get __pickers() {
|
|
316
326
|
return [this.__datePicker, this.__timePicker];
|
|
@@ -386,9 +396,14 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
386
396
|
document.removeEventListener('click', this.__onGlobalClick, true);
|
|
387
397
|
}
|
|
388
398
|
|
|
389
|
-
|
|
399
|
+
/**
|
|
400
|
+
* @param {FocusOptions=} options
|
|
401
|
+
* @protected
|
|
402
|
+
* @override
|
|
403
|
+
*/
|
|
404
|
+
focus(options) {
|
|
390
405
|
if (this.__datePicker) {
|
|
391
|
-
this.__datePicker.focus();
|
|
406
|
+
this.__datePicker.focus(options);
|
|
392
407
|
}
|
|
393
408
|
}
|
|
394
409
|
|
|
@@ -404,7 +419,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
404
419
|
this.__datePicker,
|
|
405
420
|
this.__datePicker.$.overlay,
|
|
406
421
|
this.__timePicker,
|
|
407
|
-
this.__timePicker.$.
|
|
422
|
+
this.__timePicker.$.overlay,
|
|
408
423
|
].includes(node);
|
|
409
424
|
});
|
|
410
425
|
|
|
@@ -457,15 +472,15 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
457
472
|
}
|
|
458
473
|
|
|
459
474
|
/** @private */
|
|
460
|
-
__syncI18n(target,
|
|
461
|
-
const
|
|
475
|
+
__syncI18n(target, i18n, props) {
|
|
476
|
+
const targetI18n = {};
|
|
462
477
|
props.forEach((prop) => {
|
|
463
478
|
// eslint-disable-next-line no-prototype-builtins
|
|
464
|
-
if (
|
|
465
|
-
|
|
479
|
+
if (i18n && i18n.hasOwnProperty(prop)) {
|
|
480
|
+
targetI18n[prop] = i18n[prop];
|
|
466
481
|
}
|
|
467
482
|
});
|
|
468
|
-
target.i18n =
|
|
483
|
+
target.i18n = targetI18n;
|
|
469
484
|
}
|
|
470
485
|
|
|
471
486
|
/** @private */
|
|
@@ -537,7 +552,6 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
537
552
|
this.datePlaceholder = newDatePicker.placeholder;
|
|
538
553
|
this.initialPosition = newDatePicker.initialPosition;
|
|
539
554
|
this.showWeekNumbers = newDatePicker.showWeekNumbers;
|
|
540
|
-
this.__syncI18n(this, newDatePicker, datePickerI18nProps);
|
|
541
555
|
}
|
|
542
556
|
|
|
543
557
|
// Min and max are always synchronized from date time picker (host) to inner fields because time picker
|
|
@@ -566,7 +580,6 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
566
580
|
// Synchronize properties from slotted time picker
|
|
567
581
|
this.timePlaceholder = newTimePicker.placeholder;
|
|
568
582
|
this.step = newTimePicker.step;
|
|
569
|
-
this.__syncI18n(this, newTimePicker, timePickerI18nProps);
|
|
570
583
|
}
|
|
571
584
|
|
|
572
585
|
// Min and max are always synchronized from parent to slotted because time picker min and max
|
|
@@ -598,26 +611,27 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
598
611
|
}
|
|
599
612
|
|
|
600
613
|
/** @private */
|
|
601
|
-
__i18nChanged(
|
|
602
|
-
|
|
603
|
-
|
|
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);
|
|
604
618
|
}
|
|
605
619
|
|
|
606
|
-
if (timePicker) {
|
|
607
|
-
this.__syncI18n(timePicker,
|
|
620
|
+
if (timePicker && this.__isDefaultPicker(timePicker, 'time')) {
|
|
621
|
+
this.__syncI18n(timePicker, effectiveI18n, timePickerI18nProps);
|
|
608
622
|
}
|
|
609
623
|
}
|
|
610
624
|
|
|
611
625
|
/** @private */
|
|
612
|
-
__labelOrAccessibleNameChanged(label, accessibleName,
|
|
626
|
+
__labelOrAccessibleNameChanged(label, accessibleName, effectiveI18n, datePicker, timePicker) {
|
|
613
627
|
const name = accessibleName || label || '';
|
|
614
628
|
|
|
615
629
|
if (datePicker) {
|
|
616
|
-
datePicker.accessibleName = `${name} ${
|
|
630
|
+
datePicker.accessibleName = `${name} ${effectiveI18n.dateLabel || ''}`.trim();
|
|
617
631
|
}
|
|
618
632
|
|
|
619
633
|
if (timePicker) {
|
|
620
|
-
timePicker.accessibleName = `${name} ${
|
|
634
|
+
timePicker.accessibleName = `${name} ${effectiveI18n.timeLabel || ''}`.trim();
|
|
621
635
|
}
|
|
622
636
|
}
|
|
623
637
|
|
|
@@ -972,17 +986,6 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
972
986
|
});
|
|
973
987
|
}
|
|
974
988
|
|
|
975
|
-
/** @private */
|
|
976
|
-
__overlayClassChanged(overlayClass, datePicker, timePicker) {
|
|
977
|
-
if (!datePicker || !timePicker) {
|
|
978
|
-
// Both pickers are not ready yet
|
|
979
|
-
return;
|
|
980
|
-
}
|
|
981
|
-
|
|
982
|
-
datePicker.overlayClass = overlayClass;
|
|
983
|
-
timePicker.overlayClass = overlayClass;
|
|
984
|
-
}
|
|
985
|
-
|
|
986
989
|
/** @private */
|
|
987
990
|
__pickersChanged(datePicker, timePicker) {
|
|
988
991
|
if (!datePicker || !timePicker) {
|
|
@@ -69,17 +69,18 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
|
|
|
69
69
|
*
|
|
70
70
|
* The following state attributes are available for styling:
|
|
71
71
|
*
|
|
72
|
-
* Attribute | Description
|
|
73
|
-
*
|
|
74
|
-
* `disabled` | Set when the element is disabled
|
|
75
|
-
* `focused` | Set when the element is focused
|
|
76
|
-
* `focus-ring` | Set when the element is keyboard focused
|
|
77
|
-
* `readonly` | Set when the element is readonly
|
|
78
|
-
* `invalid` | Set when the element is invalid
|
|
79
|
-
* `has-label` | Set when the element has a label
|
|
80
|
-
* `has-value` | Set when the element has a value
|
|
81
|
-
* `has-helper` | Set when the element has helper text
|
|
82
|
-
* `has-error-message` | Set when the element has an error message
|
|
72
|
+
* Attribute | Description
|
|
73
|
+
* --------------------|---------------------------------
|
|
74
|
+
* `disabled` | Set when the element is disabled
|
|
75
|
+
* `focused` | Set when the element is focused
|
|
76
|
+
* `focus-ring` | Set when the element is keyboard focused
|
|
77
|
+
* `readonly` | Set when the element is readonly
|
|
78
|
+
* `invalid` | Set when the element is invalid
|
|
79
|
+
* `has-label` | Set when the element has a label
|
|
80
|
+
* `has-value` | Set when the element has a value
|
|
81
|
+
* `has-helper` | Set when the element has helper text
|
|
82
|
+
* `has-error-message` | Set when the element has an error message
|
|
83
|
+
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
83
84
|
*
|
|
84
85
|
* ### Internal components
|
|
85
86
|
*
|
|
@@ -88,9 +89,6 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
|
|
|
88
89
|
* - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
|
|
89
90
|
* - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
|
|
90
91
|
*
|
|
91
|
-
* Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
|
|
92
|
-
* propagated to these components.
|
|
93
|
-
*
|
|
94
92
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
95
93
|
*
|
|
96
94
|
* ### Change events
|
|
@@ -5,12 +5,14 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
7
7
|
import '@vaadin/time-picker/src/vaadin-time-picker.js';
|
|
8
|
-
import {
|
|
8
|
+
import { html, LitElement } from 'lit';
|
|
9
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
11
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
12
|
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
13
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
13
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
|
+
import { dateTimePickerStyles } from './styles/vaadin-date-time-picker-base-styles.js';
|
|
14
16
|
import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
15
17
|
|
|
16
18
|
/**
|
|
@@ -39,17 +41,18 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
|
39
41
|
*
|
|
40
42
|
* The following state attributes are available for styling:
|
|
41
43
|
*
|
|
42
|
-
* Attribute | Description
|
|
43
|
-
*
|
|
44
|
-
* `disabled` | Set when the element is disabled
|
|
45
|
-
* `focused` | Set when the element is focused
|
|
46
|
-
* `focus-ring` | Set when the element is keyboard focused
|
|
47
|
-
* `readonly` | Set when the element is readonly
|
|
48
|
-
* `invalid` | Set when the element is invalid
|
|
49
|
-
* `has-label` | Set when the element has a label
|
|
50
|
-
* `has-value` | Set when the element has a value
|
|
51
|
-
* `has-helper` | Set when the element has helper text
|
|
52
|
-
* `has-error-message` | Set when the element has an error message
|
|
44
|
+
* Attribute | Description
|
|
45
|
+
* --------------------|---------------------------------
|
|
46
|
+
* `disabled` | Set when the element is disabled
|
|
47
|
+
* `focused` | Set when the element is focused
|
|
48
|
+
* `focus-ring` | Set when the element is keyboard focused
|
|
49
|
+
* `readonly` | Set when the element is readonly
|
|
50
|
+
* `invalid` | Set when the element is invalid
|
|
51
|
+
* `has-label` | Set when the element has a label
|
|
52
|
+
* `has-value` | Set when the element has a value
|
|
53
|
+
* `has-helper` | Set when the element has helper text
|
|
54
|
+
* `has-error-message` | Set when the element has an error message
|
|
55
|
+
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
53
56
|
*
|
|
54
57
|
* ### Internal components
|
|
55
58
|
*
|
|
@@ -58,9 +61,6 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
|
58
61
|
* - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
|
|
59
62
|
* - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
|
|
60
63
|
*
|
|
61
|
-
* Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
|
|
62
|
-
* propagated to these components.
|
|
63
|
-
*
|
|
64
64
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
65
65
|
*
|
|
66
66
|
* ### Change events
|
|
@@ -97,35 +97,15 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
|
97
97
|
* @mixes ThemableMixin
|
|
98
98
|
* @mixes DateTimePickerMixin
|
|
99
99
|
*/
|
|
100
|
-
class DateTimePicker extends DateTimePickerMixin(
|
|
100
|
+
class DateTimePicker extends DateTimePickerMixin(
|
|
101
|
+
ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
102
|
+
) {
|
|
101
103
|
static get is() {
|
|
102
104
|
return 'vaadin-date-time-picker';
|
|
103
105
|
}
|
|
104
106
|
|
|
105
107
|
static get styles() {
|
|
106
|
-
return [
|
|
107
|
-
inputFieldShared,
|
|
108
|
-
css`
|
|
109
|
-
.vaadin-date-time-picker-container {
|
|
110
|
-
--vaadin-field-default-width: auto;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.slots {
|
|
114
|
-
display: flex;
|
|
115
|
-
--vaadin-field-default-width: 12em;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.slots ::slotted([slot='date-picker']) {
|
|
119
|
-
min-width: 0;
|
|
120
|
-
flex: 1 1 auto;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.slots ::slotted([slot='time-picker']) {
|
|
124
|
-
min-width: 0;
|
|
125
|
-
flex: 1 1.65 auto;
|
|
126
|
-
}
|
|
127
|
-
`,
|
|
128
|
-
];
|
|
108
|
+
return [inputFieldShared, dateTimePickerStyles];
|
|
129
109
|
}
|
|
130
110
|
|
|
131
111
|
/** @protected */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-date-time-picker.js';
|
|
2
2
|
export * from './src/vaadin-date-time-picker.js';
|
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-alpha21",
|
|
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
|
|
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-alpha21/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/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",
|
|
@@ -233,17 +233,6 @@
|
|
|
233
233
|
]
|
|
234
234
|
}
|
|
235
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/25.0.0-alpha2/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
239
|
-
"value": {
|
|
240
|
-
"type": [
|
|
241
|
-
"string",
|
|
242
|
-
"null",
|
|
243
|
-
"undefined"
|
|
244
|
-
]
|
|
245
|
-
}
|
|
246
|
-
},
|
|
247
236
|
{
|
|
248
237
|
"name": "theme",
|
|
249
238
|
"description": "The theme variants to apply to the component.",
|
|
@@ -357,6 +346,15 @@
|
|
|
357
346
|
]
|
|
358
347
|
}
|
|
359
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```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.0.0-alpha21/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/elements/vaadin-time-picker) are supported.",
|
|
352
|
+
"value": {
|
|
353
|
+
"type": [
|
|
354
|
+
"?"
|
|
355
|
+
]
|
|
356
|
+
}
|
|
357
|
+
},
|
|
360
358
|
{
|
|
361
359
|
"name": "name",
|
|
362
360
|
"description": "The name of the control, which is submitted with the form data.",
|
|
@@ -480,26 +478,6 @@
|
|
|
480
478
|
"boolean"
|
|
481
479
|
]
|
|
482
480
|
}
|
|
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/25.0.0-alpha2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/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/25.0.0-alpha2/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
496
|
-
"value": {
|
|
497
|
-
"type": [
|
|
498
|
-
"string",
|
|
499
|
-
"null",
|
|
500
|
-
"undefined"
|
|
501
|
-
]
|
|
502
|
-
}
|
|
503
481
|
}
|
|
504
482
|
],
|
|
505
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-alpha21",
|
|
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
|
|
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-alpha21/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/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```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.0.0-alpha21/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/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,20 +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-alpha2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/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/25.0.0-alpha2/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
179
|
-
"value": {
|
|
180
|
-
"kind": "expression"
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
176
|
{
|
|
184
177
|
"name": "@validated",
|
|
185
178
|
"description": "Fired whenever the field is validated.",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { customField } from '@vaadin/custom-field/theme/lumo/vaadin-custom-field-styles.js';
|
|
2
|
-
import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
|
|
3
|
-
import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
|
|
4
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
5
|
-
|
|
6
|
-
const dateTimePicker = css`
|
|
7
|
-
::slotted([slot='date-picker']) {
|
|
8
|
-
margin-inline-end: 2px;
|
|
9
|
-
--vaadin-input-field-top-end-radius: 0;
|
|
10
|
-
--vaadin-input-field-bottom-end-radius: 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
::slotted([slot='time-picker']) {
|
|
14
|
-
--vaadin-input-field-top-start-radius: 0;
|
|
15
|
-
--vaadin-input-field-bottom-start-radius: 0;
|
|
16
|
-
}
|
|
17
|
-
`;
|
|
18
|
-
|
|
19
|
-
registerStyles('vaadin-date-time-picker', [dateTimePicker, requiredField, helper, customField], {
|
|
20
|
-
moduleId: 'lumo-date-time-picker',
|
|
21
|
-
});
|