@vaadin/date-picker 23.2.0-beta1 → 23.2.0-beta2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "23.2.0-
|
|
3
|
+
"version": "23.2.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/button": "23.2.0-
|
|
40
|
-
"@vaadin/component-base": "23.2.0-
|
|
41
|
-
"@vaadin/field-base": "23.2.0-
|
|
42
|
-
"@vaadin/input-container": "23.2.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "23.2.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "23.2.0-
|
|
45
|
-
"@vaadin/vaadin-overlay": "23.2.0-
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "23.2.0-
|
|
39
|
+
"@vaadin/button": "23.2.0-beta2",
|
|
40
|
+
"@vaadin/component-base": "23.2.0-beta2",
|
|
41
|
+
"@vaadin/field-base": "23.2.0-beta2",
|
|
42
|
+
"@vaadin/input-container": "23.2.0-beta2",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "23.2.0-beta2",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "23.2.0-beta2",
|
|
45
|
+
"@vaadin/vaadin-overlay": "23.2.0-beta2",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "23.2.0-beta2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "42864949ade7e573ac534a64ecdd97fab32a87fc"
|
|
58
58
|
}
|
|
@@ -74,7 +74,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
|
|
|
74
74
|
fullscreen$="[[_fullscreen]]"
|
|
75
75
|
opened="{{opened}}"
|
|
76
76
|
on-vaadin-overlay-open="_onOverlayOpened"
|
|
77
|
-
on-vaadin-overlay-
|
|
77
|
+
on-vaadin-overlay-closing="_onOverlayClosed"
|
|
78
78
|
restore-focus-on-close
|
|
79
79
|
restore-focus-node="[[inputElement]]"
|
|
80
80
|
theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
|
|
@@ -386,12 +386,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
386
386
|
}
|
|
387
387
|
}
|
|
388
388
|
|
|
389
|
-
|
|
390
|
-
|
|
389
|
+
this.validate();
|
|
390
|
+
|
|
391
|
+
if (this._inputValue === '' && this.value !== '') {
|
|
391
392
|
this.value = '';
|
|
392
|
-
this.__dispatchChange = false;
|
|
393
|
-
} else {
|
|
394
|
-
this.validate();
|
|
395
393
|
}
|
|
396
394
|
}
|
|
397
395
|
}
|
|
@@ -469,7 +467,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
469
467
|
this._close();
|
|
470
468
|
});
|
|
471
469
|
|
|
472
|
-
this._overlayContent.addEventListener('close',
|
|
470
|
+
this._overlayContent.addEventListener('close', () => {
|
|
471
|
+
this._close();
|
|
472
|
+
});
|
|
473
|
+
|
|
473
474
|
this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
|
|
474
475
|
|
|
475
476
|
// User confirmed selected date by clicking the calendar.
|
|
@@ -478,7 +479,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
478
479
|
|
|
479
480
|
this._selectDate(e.detail.date);
|
|
480
481
|
|
|
481
|
-
this._close(
|
|
482
|
+
this._close();
|
|
482
483
|
});
|
|
483
484
|
|
|
484
485
|
// User confirmed selected date by pressing Enter or Today.
|
|
@@ -488,9 +489,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
488
489
|
this._selectDate(e.detail.date);
|
|
489
490
|
});
|
|
490
491
|
|
|
491
|
-
//
|
|
492
|
+
// Set focus-ring attribute when moving focus to the overlay
|
|
493
|
+
// by pressing Tab or arrow key, after opening it on click.
|
|
492
494
|
this._overlayContent.addEventListener('focusin', () => {
|
|
493
|
-
this.
|
|
495
|
+
if (this._keyboardActive) {
|
|
496
|
+
this._setFocused(true);
|
|
497
|
+
}
|
|
494
498
|
});
|
|
495
499
|
|
|
496
500
|
this.addEventListener('mousedown', () => this.__bringToFront());
|
|
@@ -523,6 +527,51 @@ export const DatePickerMixin = (subclass) =>
|
|
|
523
527
|
return inputValid && minMaxValid && inputValidity;
|
|
524
528
|
}
|
|
525
529
|
|
|
530
|
+
/**
|
|
531
|
+
* Override method inherited from `FocusMixin`
|
|
532
|
+
* to not call `_setFocused(true)` when focus
|
|
533
|
+
* is restored after closing overlay on click,
|
|
534
|
+
* and to avoid removing `focus-ring` attribute.
|
|
535
|
+
*
|
|
536
|
+
* @param {!FocusEvent} _event
|
|
537
|
+
* @return {boolean}
|
|
538
|
+
* @protected
|
|
539
|
+
* @override
|
|
540
|
+
*/
|
|
541
|
+
_shouldSetFocus(_event) {
|
|
542
|
+
return !this._shouldKeepFocusRing;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
/**
|
|
546
|
+
* Override method inherited from `FocusMixin`
|
|
547
|
+
* to prevent removing the `focused` attribute:
|
|
548
|
+
* - when moving focus to the overlay content,
|
|
549
|
+
* - when closing on date click / outside click.
|
|
550
|
+
*
|
|
551
|
+
* @param {!FocusEvent} _event
|
|
552
|
+
* @return {boolean}
|
|
553
|
+
* @protected
|
|
554
|
+
* @override
|
|
555
|
+
*/
|
|
556
|
+
_shouldRemoveFocus(_event) {
|
|
557
|
+
return !this.opened;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/**
|
|
561
|
+
* Override method inherited from `FocusMixin`
|
|
562
|
+
* to store the `focus-ring` state to restore
|
|
563
|
+
* it later when closing on outside click.
|
|
564
|
+
*
|
|
565
|
+
* @param {boolean} focused
|
|
566
|
+
* @protected
|
|
567
|
+
* @override
|
|
568
|
+
*/
|
|
569
|
+
_setFocused(focused) {
|
|
570
|
+
super._setFocused(focused);
|
|
571
|
+
|
|
572
|
+
this._shouldKeepFocusRing = focused && this._keyboardActive;
|
|
573
|
+
}
|
|
574
|
+
|
|
526
575
|
/**
|
|
527
576
|
* Select date on user interaction and set the flag
|
|
528
577
|
* to fire change event if necessary.
|
|
@@ -542,10 +591,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
542
591
|
}
|
|
543
592
|
|
|
544
593
|
/** @private */
|
|
545
|
-
_close(
|
|
546
|
-
if (e) {
|
|
547
|
-
e.stopPropagation();
|
|
548
|
-
}
|
|
594
|
+
_close() {
|
|
549
595
|
this._focus();
|
|
550
596
|
this.close();
|
|
551
597
|
}
|
|
@@ -728,8 +774,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
728
774
|
|
|
729
775
|
/** @protected */
|
|
730
776
|
_onOverlayOpened() {
|
|
731
|
-
this._openedWithFocusRing = this.hasAttribute('focus-ring');
|
|
732
|
-
|
|
733
777
|
const parsedInitialPosition = this._parseDate(this.initialPosition);
|
|
734
778
|
|
|
735
779
|
const initialPosition =
|
|
@@ -803,11 +847,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
803
847
|
if (!this.value) {
|
|
804
848
|
this.validate();
|
|
805
849
|
}
|
|
806
|
-
|
|
807
|
-
// If the input isn't focused when overlay closes (fullscreen mode), clear focused state
|
|
808
|
-
if (this.getRootNode().activeElement !== this.inputElement) {
|
|
809
|
-
this._setFocused(false);
|
|
810
|
-
}
|
|
811
850
|
}
|
|
812
851
|
|
|
813
852
|
/** @private */
|
|
@@ -860,10 +899,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
860
899
|
_onChange(event) {
|
|
861
900
|
// For change event on the native <input> blur, after the input is cleared,
|
|
862
901
|
// we schedule change event to be dispatched on date-picker blur.
|
|
863
|
-
if (
|
|
864
|
-
this.inputElement.value === '' &&
|
|
865
|
-
!(event.detail && event.detail.sourceEvent && event.detail.sourceEvent.__fromClearButton)
|
|
866
|
-
) {
|
|
902
|
+
if (this._inputValue === '') {
|
|
867
903
|
this.__dispatchChange = true;
|
|
868
904
|
}
|
|
869
905
|
|
|
@@ -48,18 +48,14 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
48
48
|
flex-grow: 1;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
[
|
|
52
|
-
display: none;
|
|
51
|
+
[hidden] {
|
|
52
|
+
display: none !important;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
[part='years-toggle-button'] {
|
|
56
56
|
display: flex;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
[part='years-toggle-button'][desktop] {
|
|
60
|
-
display: none;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
59
|
:host(:not([years-visible])) [part='years-toggle-button']::before {
|
|
64
60
|
transform: rotate(180deg);
|
|
65
61
|
}
|
|
@@ -154,10 +150,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
154
150
|
|
|
155
151
|
<div part="overlay-header" on-touchend="_preventDefault" desktop$="[[_desktopMode]]" aria-hidden="true">
|
|
156
152
|
<div part="label">[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]</div>
|
|
157
|
-
<div part="clear-button"
|
|
153
|
+
<div part="clear-button" hidden$="[[!selectedDate]]"></div>
|
|
158
154
|
<div part="toggle-button"></div>
|
|
159
155
|
|
|
160
|
-
<div part="years-toggle-button"
|
|
156
|
+
<div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
|
|
161
157
|
[[_yearAfterXMonths(_visibleMonthIndex)]]
|
|
162
158
|
</div>
|
|
163
159
|
</div>
|
|
@@ -243,6 +239,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
243
239
|
*/
|
|
244
240
|
selectedDate: {
|
|
245
241
|
type: Date,
|
|
242
|
+
value: null,
|
|
246
243
|
},
|
|
247
244
|
|
|
248
245
|
/**
|
|
@@ -331,7 +328,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
331
328
|
|
|
332
329
|
this.setAttribute('role', 'dialog');
|
|
333
330
|
|
|
334
|
-
addListener(this, 'tap', this._stopPropagation);
|
|
335
331
|
addListener(this.$.scrollers, 'track', this._track.bind(this));
|
|
336
332
|
addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
|
|
337
333
|
addListener(this.shadowRoot.querySelector('[part="today-button"]'), 'tap', this._onTodayTap.bind(this));
|
|
@@ -499,10 +495,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
499
495
|
this.scrollToDate(new Date(), true);
|
|
500
496
|
}
|
|
501
497
|
|
|
502
|
-
_showClear(selectedDate) {
|
|
503
|
-
return !!selectedDate;
|
|
504
|
-
}
|
|
505
|
-
|
|
506
498
|
_onYearTap(e) {
|
|
507
499
|
if (!this._ignoreTaps && !this._notTapping) {
|
|
508
500
|
const scrollDelta =
|
|
@@ -977,10 +969,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
|
|
|
977
969
|
todayMidnight.setDate(today.getDate());
|
|
978
970
|
return this._dateAllowed(todayMidnight, min, max);
|
|
979
971
|
}
|
|
980
|
-
|
|
981
|
-
_stopPropagation(e) {
|
|
982
|
-
e.stopPropagation();
|
|
983
|
-
}
|
|
984
972
|
}
|
|
985
973
|
|
|
986
974
|
customElements.define(DatePickerOverlayContent.is, DatePickerOverlayContent);
|
|
@@ -162,7 +162,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
|
|
|
162
162
|
fullscreen$="[[_fullscreen]]"
|
|
163
163
|
theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
|
|
164
164
|
on-vaadin-overlay-open="_onOverlayOpened"
|
|
165
|
-
on-vaadin-overlay-
|
|
165
|
+
on-vaadin-overlay-closing="_onOverlayClosed"
|
|
166
166
|
restore-focus-on-close
|
|
167
167
|
restore-focus-node="[[inputElement]]"
|
|
168
168
|
disable-upgrade
|
|
@@ -222,11 +222,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
|
|
|
222
222
|
|
|
223
223
|
/** @private */
|
|
224
224
|
_onVaadinOverlayClose(e) {
|
|
225
|
-
if (this._openedWithFocusRing && this.hasAttribute('focused')) {
|
|
226
|
-
this.setAttribute('focus-ring', '');
|
|
227
|
-
} else if (!this.hasAttribute('focused')) {
|
|
228
|
-
this.blur();
|
|
229
|
-
}
|
|
230
225
|
if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
|
|
231
226
|
e.preventDefault();
|
|
232
227
|
}
|
package/web-types.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": "23.2.0-
|
|
4
|
+
"version": "23.2.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
},
|
|
217
217
|
{
|
|
218
218
|
"name": "vaadin-date-picker",
|
|
219
|
-
"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/23.2.0-
|
|
219
|
+
"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/23.2.0-beta2/#/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`overlay-content` | The overlay element\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n`today` | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date | date\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-beta2/#/elements/vaadin-date-picker-light) element.\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/23.2.0-beta2/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-beta2/#/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`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`months` | Months scroller\n`years` | Years scroller\n`toolbar` | Footer bar with buttons\n`today-button` | Today button\n`cancel-button` | Cancel button\n`month` | Month calendar\n`year-number` | Year number\n`year-separator` | Year separator\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\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/ds/customization/styling-components) documentation.",
|
|
220
220
|
"attributes": [
|
|
221
221
|
{
|
|
222
222
|
"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": "23.2.0-
|
|
4
|
+
"version": "23.2.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
},
|
|
108
108
|
{
|
|
109
109
|
"name": "vaadin-date-picker",
|
|
110
|
-
"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/23.2.0-
|
|
110
|
+
"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/23.2.0-beta2/#/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`overlay-content` | The overlay element\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n`today` | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date | date\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-beta2/#/elements/vaadin-date-picker-light) element.\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/23.2.0-beta2/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-beta2/#/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`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`months` | Months scroller\n`years` | Years scroller\n`toolbar` | Footer bar with buttons\n`today-button` | Today button\n`cancel-button` | Cancel button\n`month` | Month calendar\n`year-number` | Year number\n`year-separator` | Year separator\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\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/ds/customization/styling-components) documentation.",
|
|
111
111
|
"extension": true,
|
|
112
112
|
"attributes": [
|
|
113
113
|
{
|