@vaadin/date-picker 25.0.0-alpha7 → 25.0.0-alpha9
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/styles/vaadin-date-picker-base-styles.js +16 -14
- package/src/styles/vaadin-date-picker-overlay-base-styles.js +32 -38
- package/src/styles/vaadin-date-picker-overlay-content-base-styles.js +83 -85
- package/src/styles/vaadin-date-picker-year-base-styles.js +13 -15
- package/src/styles/vaadin-month-calendar-base-styles.js +108 -110
- package/src/vaadin-date-picker-mixin.js +40 -17
- package/src/vaadin-date-picker-overlay-content.js +1 -1
- package/src/vaadin-date-picker-overlay.js +12 -1
- package/src/vaadin-date-picker-year.js +1 -1
- package/src/vaadin-date-picker.d.ts +10 -6
- package/src/vaadin-date-picker.js +15 -9
- package/src/vaadin-month-calendar.js +1 -1
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/button": "25.0.0-
|
|
42
|
-
"@vaadin/component-base": "25.0.0-
|
|
43
|
-
"@vaadin/field-base": "25.0.0-
|
|
44
|
-
"@vaadin/input-container": "25.0.0-
|
|
45
|
-
"@vaadin/overlay": "25.0.0-
|
|
46
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.0.0-alpha9",
|
|
41
|
+
"@vaadin/button": "25.0.0-alpha9",
|
|
42
|
+
"@vaadin/component-base": "25.0.0-alpha9",
|
|
43
|
+
"@vaadin/field-base": "25.0.0-alpha9",
|
|
44
|
+
"@vaadin/input-container": "25.0.0-alpha9",
|
|
45
|
+
"@vaadin/overlay": "25.0.0-alpha9",
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
52
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
51
|
+
"@vaadin/chai-plugins": "25.0.0-alpha9",
|
|
52
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha9",
|
|
53
53
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
54
54
|
"sinon": "^18.0.0"
|
|
55
55
|
},
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
|
|
61
61
|
}
|
|
@@ -7,22 +7,24 @@ import '@vaadin/component-base/src/style-props.js';
|
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const datePickerStyles = css`
|
|
10
|
-
|
|
11
|
-
:
|
|
12
|
-
|
|
13
|
-
}
|
|
10
|
+
:host([opened]) {
|
|
11
|
+
pointer-events: auto;
|
|
12
|
+
}
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
:host([week-numbers]) {
|
|
15
|
+
--_vaadin-date-picker-week-numbers-visible: 1;
|
|
16
|
+
}
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
:host([dir='rtl']) [part='input-field'] {
|
|
19
|
+
direction: ltr;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
|
|
23
|
+
direction: rtl;
|
|
24
|
+
text-align: left;
|
|
25
|
+
}
|
|
23
26
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
+
[part='toggle-button']::before {
|
|
28
|
+
mask-image: var(--_vaadin-icon-calendar);
|
|
27
29
|
}
|
|
28
30
|
`;
|
|
@@ -6,49 +6,43 @@
|
|
|
6
6
|
import { css } from 'lit';
|
|
7
7
|
|
|
8
8
|
export const datePickerOverlayStyles = css`
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
width
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var(--vaadin-date-picker-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host([fullscreen]) {
|
|
26
|
-
--vaadin-date-picker-date-width: calc(100% / 7);
|
|
27
|
-
}
|
|
9
|
+
[part='overlay'] {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex: auto;
|
|
12
|
+
max-height: var(--vaadin-date-picker-overlay-max-height, 30rem);
|
|
13
|
+
box-sizing: content-box;
|
|
14
|
+
width: var(
|
|
15
|
+
--vaadin-date-picker-overlay-width,
|
|
16
|
+
calc(
|
|
17
|
+
var(--vaadin-date-picker-date-width, 2rem) * 7 + var(--vaadin-date-picker-month-padding, 0.5rem) * 2 +
|
|
18
|
+
var(--vaadin-date-picker-year-scroller-width, 3rem)
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
cursor: default;
|
|
22
|
+
}
|
|
28
23
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
:host([fullscreen]) {
|
|
25
|
+
--vaadin-date-picker-date-width: calc(100% / 7);
|
|
26
|
+
}
|
|
32
27
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
max-height: 75vh;
|
|
37
|
-
width: 100%;
|
|
38
|
-
}
|
|
28
|
+
:host([fullscreen]) [part='backdrop'] {
|
|
29
|
+
display: block;
|
|
30
|
+
}
|
|
39
31
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
32
|
+
:host([fullscreen]) [part='overlay'] {
|
|
33
|
+
border: none;
|
|
34
|
+
border-radius: 0;
|
|
35
|
+
max-height: 75vh;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
43
38
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
39
|
+
[part~='content'] {
|
|
40
|
+
flex: auto;
|
|
41
|
+
}
|
|
47
42
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
43
|
+
@media (max-width: 450px), (max-height: 450px) {
|
|
44
|
+
:host {
|
|
45
|
+
inset: auto 0 0 !important;
|
|
52
46
|
}
|
|
53
47
|
}
|
|
54
48
|
`;
|
|
@@ -7,103 +7,101 @@ import '@vaadin/component-base/src/style-props.js';
|
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const overlayContentStyles = css`
|
|
10
|
-
|
|
11
|
-
:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
10
|
+
:host {
|
|
11
|
+
display: grid;
|
|
12
|
+
grid-template-areas:
|
|
13
|
+
'header header'
|
|
14
|
+
'months years'
|
|
15
|
+
'toolbar years';
|
|
16
|
+
grid-template-columns: minmax(0, 1fr) 0;
|
|
17
|
+
height: 100%;
|
|
18
|
+
outline: none;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
22
21
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
:host([desktop]) {
|
|
23
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
24
|
+
}
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
:host([fullscreen][years-visible]) {
|
|
27
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
28
|
+
}
|
|
30
29
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
30
|
+
[part='years-toggle-button'] {
|
|
31
|
+
display: inline-flex;
|
|
32
|
+
border: var(--vaadin-button-border, var(--vaadin-button-border-width, 1px) solid transparent);
|
|
33
|
+
border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
|
|
34
|
+
color: var(--vaadin-button-text-color, var(--_vaadin-button-text-color));
|
|
35
|
+
font-size: var(--vaadin-button-font-size, inherit);
|
|
36
|
+
font-weight: var(--vaadin-button-font-weight, 500);
|
|
37
|
+
height: var(--vaadin-button-height, auto);
|
|
38
|
+
line-height: var(--vaadin-button-line-height, inherit);
|
|
39
|
+
padding: var(--vaadin-button-padding, var(--vaadin-padding-container));
|
|
40
|
+
cursor: var(--vaadin-clickable-cursor);
|
|
41
|
+
}
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
:host([years-visible]) [part='years-toggle-button'] {
|
|
44
|
+
background: var(--vaadin-color);
|
|
45
|
+
color: var(--vaadin-background-color);
|
|
46
|
+
}
|
|
48
47
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
[hidden] {
|
|
49
|
+
display: none !important;
|
|
50
|
+
}
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
52
|
+
::slotted([slot='months']) {
|
|
53
|
+
--vaadin-infinite-scroller-item-height: calc(
|
|
54
|
+
16.5rem + var(--_vaadin-date-picker-week-numbers-visible, 0) *
|
|
55
|
+
(var(--vaadin-date-picker-week-number-font-size, 0.7rem) * 1.25 * 6)
|
|
56
|
+
);
|
|
57
|
+
}
|
|
59
58
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
:host([desktop]) ::slotted([slot='months']) {
|
|
60
|
+
border-bottom: 1px solid var(--vaadin-border-color);
|
|
61
|
+
}
|
|
63
62
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
::slotted([slot='years']) {
|
|
64
|
+
visibility: hidden;
|
|
65
|
+
background: var(--vaadin-date-picker-year-scroller-background, var(--vaadin-background-container));
|
|
66
|
+
width: var(--vaadin-date-picker-year-scroller-width, 3rem);
|
|
67
|
+
box-sizing: border-box;
|
|
68
|
+
border-inline-start: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color));
|
|
69
|
+
overflow: visible;
|
|
70
|
+
min-height: 0;
|
|
71
|
+
clip-path: inset(0);
|
|
72
|
+
}
|
|
74
73
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
74
|
+
::slotted([slot='years'])::before {
|
|
75
|
+
background: var(--vaadin-overlay-background, var(--vaadin-background-color));
|
|
76
|
+
border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color));
|
|
77
|
+
width: 16px;
|
|
78
|
+
height: 16px;
|
|
79
|
+
position: absolute;
|
|
80
|
+
left: auto;
|
|
81
|
+
z-index: 1;
|
|
82
|
+
rotate: 45deg;
|
|
83
|
+
translate: calc(-50% - 1px) -50%;
|
|
84
|
+
transform: none;
|
|
85
|
+
}
|
|
87
86
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
:host([dir='rtl']) ::slotted([slot='years'])::before {
|
|
88
|
+
translate: calc(50% + 1px) -50%;
|
|
89
|
+
}
|
|
91
90
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
:host([desktop]) ::slotted([slot='years']),
|
|
92
|
+
:host([years-visible]) ::slotted([slot='years']) {
|
|
93
|
+
visibility: visible;
|
|
94
|
+
}
|
|
96
95
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
96
|
+
[part='toolbar'] {
|
|
97
|
+
display: flex;
|
|
98
|
+
grid-area: toolbar;
|
|
99
|
+
justify-content: space-between;
|
|
100
|
+
padding: var(--vaadin-date-picker-toolbar-padding, var(--vaadin-padding));
|
|
101
|
+
}
|
|
103
102
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
103
|
+
:host([fullscreen]) [part='toolbar'] {
|
|
104
|
+
grid-area: header;
|
|
105
|
+
border-bottom: 1px solid var(--vaadin-border-color);
|
|
108
106
|
}
|
|
109
107
|
`;
|
|
@@ -7,22 +7,20 @@ import '@vaadin/component-base/src/style-props.js';
|
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const datePickerYearStyles = css`
|
|
10
|
-
|
|
11
|
-
:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
15
|
+
[part='year-number'] {
|
|
16
|
+
align-items: center;
|
|
17
|
+
display: flex;
|
|
18
|
+
height: 50%;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
transform: translateY(-50%);
|
|
21
|
+
}
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
23
|
+
:host([current]) [part='year-number'] {
|
|
24
|
+
color: var(--vaadin-date-picker-year-scroller-current-year-color, var(--vaadin-color));
|
|
27
25
|
}
|
|
28
26
|
`;
|
|
@@ -7,136 +7,134 @@ import '@vaadin/component-base/src/style-props.js';
|
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const monthCalendarStyles = css`
|
|
10
|
-
|
|
11
|
-
:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding));
|
|
13
|
+
}
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
[part='month-header'] {
|
|
16
|
+
color: var(--vaadin-date-picker-month-header-color, var(--vaadin-color));
|
|
17
|
+
font-size: var(--vaadin-date-picker-month-header-font-size, 0.9375rem);
|
|
18
|
+
font-weight: var(--vaadin-date-picker-month-header-font-weight, 500);
|
|
19
|
+
line-height: inherit;
|
|
20
|
+
margin-bottom: 0.75rem;
|
|
21
|
+
text-align: center;
|
|
22
|
+
}
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
table {
|
|
25
|
+
border-collapse: collapse;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
}
|
|
30
29
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
tr {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-wrap: wrap;
|
|
33
|
+
}
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
35
|
+
[part~='weekday'] {
|
|
36
|
+
color: var(--vaadin-date-picker-weekday-color, inherit);
|
|
37
|
+
font-size: var(--vaadin-date-picker-weekday-font-size, 0.75rem);
|
|
38
|
+
font-weight: var(--vaadin-date-picker-weekday-font-weight, 500);
|
|
39
|
+
margin-bottom: 0.375rem;
|
|
40
|
+
width: var(--vaadin-date-picker-date-width, 2rem);
|
|
41
|
+
}
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
/* Week numbers are on a separate row, don't reserve space on weekday row. */
|
|
44
|
+
[part~='weekday']:empty {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
48
47
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
[part~='week-number'] {
|
|
49
|
+
color: var(--vaadin-date-picker-week-number-color, inherit);
|
|
50
|
+
font-size: var(--vaadin-date-picker-week-number-font-size, 0.7rem);
|
|
51
|
+
line-height: 1;
|
|
52
|
+
width: 100%;
|
|
53
|
+
margin-top: 0.125em;
|
|
54
|
+
margin-bottom: 0.125em;
|
|
55
|
+
gap: 0.25em;
|
|
56
|
+
}
|
|
58
57
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
[part~='week-number']::after {
|
|
59
|
+
content: '';
|
|
60
|
+
height: 1px;
|
|
61
|
+
flex: 1;
|
|
62
|
+
background: var(--vaadin-date-picker-week-divider-color, var(--vaadin-divider-color, var(--vaadin-border-color)));
|
|
63
|
+
}
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
[part~='weekday'],
|
|
66
|
+
[part~='week-number'],
|
|
67
|
+
[part~='date'] {
|
|
68
|
+
align-items: center;
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
padding: 0;
|
|
72
|
+
}
|
|
74
73
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
74
|
+
[part~='date'] {
|
|
75
|
+
border-radius: var(--vaadin-date-picker-date-border-radius, var(--vaadin-radius-m));
|
|
76
|
+
position: relative;
|
|
77
|
+
width: var(--vaadin-date-picker-date-width, 2rem);
|
|
78
|
+
height: var(--vaadin-date-picker-date-height, 2rem);
|
|
79
|
+
cursor: var(--vaadin-clickable-cursor);
|
|
80
|
+
outline: none;
|
|
81
|
+
}
|
|
83
82
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
83
|
+
[part~='date']::after {
|
|
84
|
+
border-radius: inherit;
|
|
85
|
+
content: '';
|
|
86
|
+
position: absolute;
|
|
87
|
+
z-index: -1;
|
|
88
|
+
height: inherit;
|
|
89
|
+
aspect-ratio: 1;
|
|
90
|
+
}
|
|
92
91
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
92
|
+
:where([part~='date']:focus)::after {
|
|
93
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
94
|
+
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
95
|
+
}
|
|
97
96
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
97
|
+
[part~='today'] {
|
|
98
|
+
color: var(--vaadin-date-picker-date-today-color, var(--vaadin-color));
|
|
99
|
+
}
|
|
101
100
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
101
|
+
[part~='selected'] {
|
|
102
|
+
color: var(--vaadin-date-picker-date-selected-color, var(--vaadin-background-color));
|
|
103
|
+
}
|
|
105
104
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
[part~='selected']::after {
|
|
106
|
+
background: var(--vaadin-date-picker-date-selected-background, var(--vaadin-color));
|
|
107
|
+
outline-offset: 1px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[disabled] {
|
|
111
|
+
cursor: var(--vaadin-disabled-cursor);
|
|
112
|
+
color: var(--vaadin-date-picker-date-disabled-color, var(--vaadin-color-disabled));
|
|
113
|
+
opacity: 0.7;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
[hidden] {
|
|
117
|
+
display: none;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@media (forced-colors: active) {
|
|
121
|
+
[part~='week-number']::after {
|
|
122
|
+
background: CanvasText;
|
|
109
123
|
}
|
|
110
124
|
|
|
111
|
-
[
|
|
112
|
-
|
|
113
|
-
color: var(--vaadin-date-picker-date-disabled-color, var(--vaadin-color-disabled));
|
|
114
|
-
opacity: 0.7;
|
|
125
|
+
[part~='today'] {
|
|
126
|
+
font-weight: 600;
|
|
115
127
|
}
|
|
116
128
|
|
|
117
|
-
[
|
|
118
|
-
|
|
129
|
+
[part~='selected'] {
|
|
130
|
+
forced-color-adjust: none;
|
|
131
|
+
--vaadin-date-picker-date-selected-color: SelectedItemText;
|
|
132
|
+
color: SelectedItemText !important;
|
|
133
|
+
--vaadin-date-picker-date-selected-background: SelectedItem;
|
|
119
134
|
}
|
|
120
135
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
background: CanvasText;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
[part~='today'] {
|
|
127
|
-
font-weight: 600;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
[part~='selected'] {
|
|
131
|
-
forced-color-adjust: none;
|
|
132
|
-
--vaadin-date-picker-date-selected-color: SelectedItemText;
|
|
133
|
-
color: SelectedItemText !important;
|
|
134
|
-
--vaadin-date-picker-date-selected-background: SelectedItem;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
[disabled] {
|
|
138
|
-
color: GrayText !important;
|
|
139
|
-
}
|
|
136
|
+
[disabled] {
|
|
137
|
+
color: GrayText !important;
|
|
140
138
|
}
|
|
141
139
|
}
|
|
142
140
|
`;
|
|
@@ -295,7 +295,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
295
295
|
|
|
296
296
|
this._boundOnClick = this._onClick.bind(this);
|
|
297
297
|
this._boundOnScroll = this._onScroll.bind(this);
|
|
298
|
-
this._boundOverlayRenderer = this._overlayRenderer.bind(this);
|
|
299
298
|
}
|
|
300
299
|
|
|
301
300
|
/**
|
|
@@ -453,13 +452,17 @@ export const DatePickerMixin = (subclass) =>
|
|
|
453
452
|
|
|
454
453
|
this.addController(new VirtualKeyboardController(this));
|
|
455
454
|
|
|
456
|
-
|
|
457
|
-
|
|
455
|
+
this._overlayElement = this.$.overlay;
|
|
456
|
+
}
|
|
458
457
|
|
|
459
|
-
|
|
458
|
+
/** @protected */
|
|
459
|
+
updated(props) {
|
|
460
|
+
super.updated(props);
|
|
460
461
|
|
|
461
|
-
|
|
462
|
-
|
|
462
|
+
if (props.has('showWeekNumbers') || props.has('__effectiveI18n')) {
|
|
463
|
+
// Currently only supported for locales that start the week on Monday.
|
|
464
|
+
this.toggleAttribute('week-numbers', this.showWeekNumbers && this.__effectiveI18n.firstDayOfWeek === 1);
|
|
465
|
+
}
|
|
463
466
|
}
|
|
464
467
|
|
|
465
468
|
/** @protected */
|
|
@@ -469,6 +472,18 @@ export const DatePickerMixin = (subclass) =>
|
|
|
469
472
|
this.opened = false;
|
|
470
473
|
}
|
|
471
474
|
|
|
475
|
+
/**
|
|
476
|
+
* @protected
|
|
477
|
+
* @override
|
|
478
|
+
*/
|
|
479
|
+
focus(options) {
|
|
480
|
+
if (this._noInput && !isKeyboardActive()) {
|
|
481
|
+
this.open();
|
|
482
|
+
} else {
|
|
483
|
+
super.focus(options);
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
|
|
472
487
|
/**
|
|
473
488
|
* Opens the dropdown.
|
|
474
489
|
*/
|
|
@@ -486,14 +501,15 @@ export const DatePickerMixin = (subclass) =>
|
|
|
486
501
|
}
|
|
487
502
|
|
|
488
503
|
/** @private */
|
|
489
|
-
|
|
490
|
-
if (
|
|
504
|
+
__ensureContent() {
|
|
505
|
+
if (this._overlayContent) {
|
|
491
506
|
return;
|
|
492
507
|
}
|
|
493
508
|
|
|
494
509
|
// Create and store document content element
|
|
495
510
|
const content = document.createElement('vaadin-date-picker-overlay-content');
|
|
496
|
-
|
|
511
|
+
content.setAttribute('slot', 'overlay');
|
|
512
|
+
this.appendChild(content);
|
|
497
513
|
|
|
498
514
|
this._overlayContent = content;
|
|
499
515
|
|
|
@@ -700,13 +716,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
700
716
|
this.close();
|
|
701
717
|
}
|
|
702
718
|
|
|
703
|
-
/** @private */
|
|
704
|
-
__bringToFront() {
|
|
705
|
-
requestAnimationFrame(() => {
|
|
706
|
-
this.$.overlay.bringToFront();
|
|
707
|
-
});
|
|
708
|
-
}
|
|
709
|
-
|
|
710
719
|
/** @private */
|
|
711
720
|
// eslint-disable-next-line @typescript-eslint/max-params
|
|
712
721
|
_isNoInput(inputElement, fullscreen, ios, effectiveI18n, opened, autoOpenDisabled) {
|
|
@@ -740,6 +749,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
740
749
|
|
|
741
750
|
/** @protected */
|
|
742
751
|
_openedChanged(opened) {
|
|
752
|
+
if (opened) {
|
|
753
|
+
this.__ensureContent();
|
|
754
|
+
}
|
|
755
|
+
|
|
743
756
|
if (this.inputElement) {
|
|
744
757
|
this.inputElement.setAttribute('aria-expanded', opened);
|
|
745
758
|
}
|
|
@@ -1019,6 +1032,11 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1019
1032
|
* @private
|
|
1020
1033
|
*/
|
|
1021
1034
|
_onClick(event) {
|
|
1035
|
+
// Ignore click events bubbling from the overlay
|
|
1036
|
+
if (event.composedPath().includes(this._overlayContent)) {
|
|
1037
|
+
return;
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1022
1040
|
// Clear button click is handled in separate listener
|
|
1023
1041
|
// but bubbles to the host, so we need to ignore it.
|
|
1024
1042
|
if (!this._isClearButton(event)) {
|
|
@@ -1107,7 +1125,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1107
1125
|
* @protected
|
|
1108
1126
|
* @override
|
|
1109
1127
|
*/
|
|
1110
|
-
_onEnter(
|
|
1128
|
+
_onEnter(event) {
|
|
1129
|
+
// Ignore Enter keydown event bubbling from the overlay
|
|
1130
|
+
if (event.composedPath().includes(this._overlayContent)) {
|
|
1131
|
+
return;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1111
1134
|
if (this.opened) {
|
|
1112
1135
|
// Closing will implicitly select parsed or focused date
|
|
1113
1136
|
this.close();
|
|
@@ -23,7 +23,7 @@ import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-cont
|
|
|
23
23
|
* @private
|
|
24
24
|
*/
|
|
25
25
|
class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
|
|
26
|
-
|
|
26
|
+
ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
27
27
|
) {
|
|
28
28
|
static get is() {
|
|
29
29
|
return 'vaadin-date-picker-overlay-content';
|
|
@@ -24,7 +24,7 @@ import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
|
|
|
24
24
|
* @private
|
|
25
25
|
*/
|
|
26
26
|
class DatePickerOverlay extends DatePickerOverlayMixin(
|
|
27
|
-
DirMixin(
|
|
27
|
+
DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
28
28
|
) {
|
|
29
29
|
static get is() {
|
|
30
30
|
return 'vaadin-date-picker-overlay';
|
|
@@ -45,6 +45,17 @@ class DatePickerOverlay extends DatePickerOverlayMixin(
|
|
|
45
45
|
</div>
|
|
46
46
|
`;
|
|
47
47
|
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Override method from `OverlayFocusMixin` to specify content root
|
|
51
|
+
* used to detect whether focus should be restored on overlay close.
|
|
52
|
+
*
|
|
53
|
+
* @protected
|
|
54
|
+
* @override
|
|
55
|
+
*/
|
|
56
|
+
get _contentRoot() {
|
|
57
|
+
return this.owner._overlayContent;
|
|
58
|
+
}
|
|
48
59
|
}
|
|
49
60
|
|
|
50
61
|
defineCustomElement(DatePickerOverlay);
|
|
@@ -19,7 +19,7 @@ import { datePickerYearStyles } from './styles/vaadin-date-picker-year-core-styl
|
|
|
19
19
|
* @mixes DatePickerYearMixin
|
|
20
20
|
* @private
|
|
21
21
|
*/
|
|
22
|
-
export class DatePickerYear extends
|
|
22
|
+
export class DatePickerYear extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
|
|
23
23
|
static get is() {
|
|
24
24
|
return 'vaadin-date-picker-year';
|
|
25
25
|
}
|
|
@@ -83,15 +83,19 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
|
|
|
83
83
|
*
|
|
84
84
|
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
|
|
85
85
|
*
|
|
86
|
-
* Part name
|
|
87
|
-
*
|
|
88
|
-
* `toggle-button`
|
|
86
|
+
* Part name | Description
|
|
87
|
+
* -----------------|--------------------
|
|
88
|
+
* `toggle-button` | Toggle button
|
|
89
|
+
* `backdrop` | Backdrop of the overlay
|
|
90
|
+
* `overlay` | The overlay container
|
|
91
|
+
* `content` | The overlay content
|
|
89
92
|
*
|
|
90
93
|
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
|
|
91
94
|
*
|
|
92
|
-
* Attribute
|
|
93
|
-
*
|
|
94
|
-
* `opened`
|
|
95
|
+
* Attribute | Description
|
|
96
|
+
* ---------------|----------------------------------------------
|
|
97
|
+
* `opened` | Set when the date selector overlay is opened
|
|
98
|
+
* `week-numbers` | Set when week numbers are shown in the calendar
|
|
95
99
|
*
|
|
96
100
|
* ### Internal components
|
|
97
101
|
*
|
|
@@ -47,15 +47,19 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
|
|
|
47
47
|
*
|
|
48
48
|
* In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
|
|
49
49
|
*
|
|
50
|
-
* Part name
|
|
51
|
-
*
|
|
52
|
-
* `toggle-button`
|
|
50
|
+
* Part name | Description
|
|
51
|
+
* -----------------|--------------------
|
|
52
|
+
* `toggle-button` | Toggle button
|
|
53
|
+
* `backdrop` | Backdrop of the overlay
|
|
54
|
+
* `overlay` | The overlay container
|
|
55
|
+
* `content` | The overlay content
|
|
53
56
|
*
|
|
54
57
|
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
|
|
55
58
|
*
|
|
56
|
-
* Attribute
|
|
57
|
-
*
|
|
58
|
-
* `opened`
|
|
59
|
+
* Attribute | Description
|
|
60
|
+
* ---------------|----------------------------------------------
|
|
61
|
+
* `opened` | Set when the date selector overlay is opened
|
|
62
|
+
* `week-numbers` | Set when week numbers are shown in the calendar
|
|
59
63
|
*
|
|
60
64
|
* ### Internal components
|
|
61
65
|
*
|
|
@@ -145,7 +149,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
|
|
|
145
149
|
* @mixes DatePickerMixin
|
|
146
150
|
*/
|
|
147
151
|
class DatePicker extends DatePickerMixin(
|
|
148
|
-
InputControlMixin(
|
|
152
|
+
InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
|
|
149
153
|
) {
|
|
150
154
|
static get is() {
|
|
151
155
|
return 'vaadin-date-picker';
|
|
@@ -209,7 +213,6 @@ class DatePicker extends DatePickerMixin(
|
|
|
209
213
|
id="overlay"
|
|
210
214
|
.owner="${this}"
|
|
211
215
|
?fullscreen="${this._fullscreen}"
|
|
212
|
-
?week-numbers="${this.showWeekNumbers}"
|
|
213
216
|
theme="${ifDefined(this._theme)}"
|
|
214
217
|
.opened="${this.opened}"
|
|
215
218
|
@opened-changed="${this._onOpenedChanged}"
|
|
@@ -219,9 +222,12 @@ class DatePicker extends DatePickerMixin(
|
|
|
219
222
|
@vaadin-overlay-closing="${this._onOverlayClosed}"
|
|
220
223
|
restore-focus-on-close
|
|
221
224
|
no-vertical-overlap
|
|
225
|
+
exportparts="backdrop, overlay, content"
|
|
222
226
|
.restoreFocusNode="${this.inputElement}"
|
|
223
227
|
.positionTarget="${this._positionTarget}"
|
|
224
|
-
|
|
228
|
+
>
|
|
229
|
+
<slot name="overlay"></slot>
|
|
230
|
+
</vaadin-date-picker-overlay>
|
|
225
231
|
|
|
226
232
|
<slot name="tooltip"></slot>
|
|
227
233
|
`;
|
|
@@ -16,7 +16,7 @@ import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
|
|
|
16
16
|
* @extends HTMLElement
|
|
17
17
|
* @private
|
|
18
18
|
*/
|
|
19
|
-
class MonthCalendar extends MonthCalendarMixin(
|
|
19
|
+
class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
|
|
20
20
|
static get is() {
|
|
21
21
|
return 'vaadin-month-calendar';
|
|
22
22
|
}
|
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-picker",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-picker",
|
|
11
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
11
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|--------------------\n`toggle-button` | Toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n---------------|----------------------------------------------\n`opened` | Set when the date selector overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Toolbar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
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-picker",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha9",
|
|
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-picker",
|
|
19
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
19
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|--------------------\n`toggle-button` | Toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n---------------|----------------------------------------------\n`opened` | Set when the date selector overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Toolbar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|