@vaadin/date-picker 24.5.0-alpha1 → 24.5.0-alpha10
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/README.md +1 -1
- package/package.json +14 -14
- package/src/vaadin-date-picker-mixin.js +29 -7
- package/src/vaadin-date-picker-overlay-content-mixin.js +8 -3
- package/src/vaadin-date-picker.js +15 -6
- package/src/vaadin-month-calendar-mixin.js +8 -6
- package/src/vaadin-month-calendar.js +1 -0
- package/theme/lumo/vaadin-date-picker-overlay-styles.js +0 -3
- package/theme/lumo/vaadin-month-calendar-styles.js +6 -2
- package/theme/material/vaadin-date-picker-overlay-styles.js +1 -1
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ import '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
|
51
51
|
|
|
52
52
|
## Contributing
|
|
53
53
|
|
|
54
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/contributing
|
|
54
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
55
55
|
|
|
56
56
|
## License
|
|
57
57
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.5.0-
|
|
3
|
+
"version": "24.5.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,25 +36,25 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.5.0-
|
|
40
|
-
"@vaadin/button": "24.5.0-
|
|
41
|
-
"@vaadin/component-base": "24.5.0-
|
|
42
|
-
"@vaadin/field-base": "24.5.0-
|
|
43
|
-
"@vaadin/input-container": "24.5.0-
|
|
44
|
-
"@vaadin/overlay": "24.5.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.5.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.5.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.5.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.5.0-alpha10",
|
|
40
|
+
"@vaadin/button": "24.5.0-alpha10",
|
|
41
|
+
"@vaadin/component-base": "24.5.0-alpha10",
|
|
42
|
+
"@vaadin/field-base": "24.5.0-alpha10",
|
|
43
|
+
"@vaadin/input-container": "24.5.0-alpha10",
|
|
44
|
+
"@vaadin/overlay": "24.5.0-alpha10",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.5.0-alpha10",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@
|
|
52
|
-
"@vaadin/testing-helpers": "^0.
|
|
53
|
-
"sinon": "^
|
|
51
|
+
"@vaadin/chai-plugins": "24.5.0-alpha10",
|
|
52
|
+
"@vaadin/testing-helpers": "^1.0.0",
|
|
53
|
+
"sinon": "^18.0.0"
|
|
54
54
|
},
|
|
55
55
|
"web-types": [
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
|
|
60
60
|
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js';
|
|
7
7
|
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
8
9
|
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
9
10
|
import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
|
|
10
11
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
@@ -459,7 +460,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
459
460
|
_onFocus(event) {
|
|
460
461
|
super._onFocus(event);
|
|
461
462
|
|
|
462
|
-
if (this._noInput) {
|
|
463
|
+
if (this._noInput && !isKeyboardActive()) {
|
|
463
464
|
event.target.blur();
|
|
464
465
|
}
|
|
465
466
|
}
|
|
@@ -566,6 +567,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
566
567
|
}
|
|
567
568
|
});
|
|
568
569
|
|
|
570
|
+
content.addEventListener('focusout', (event) => {
|
|
571
|
+
if (this._shouldRemoveFocus(event)) {
|
|
572
|
+
this._setFocused(false);
|
|
573
|
+
}
|
|
574
|
+
});
|
|
575
|
+
|
|
569
576
|
// Two-way data binding for `focusedDate` property
|
|
570
577
|
content.addEventListener('focused-date-changed', (e) => {
|
|
571
578
|
this._focusedDate = e.detail.value;
|
|
@@ -649,12 +656,27 @@ export const DatePickerMixin = (subclass) =>
|
|
|
649
656
|
* - when moving focus to the overlay content,
|
|
650
657
|
* - when closing on date click / outside click.
|
|
651
658
|
*
|
|
652
|
-
* @param {
|
|
659
|
+
* @param {FocusEvent} event
|
|
653
660
|
* @return {boolean}
|
|
654
661
|
* @protected
|
|
655
662
|
* @override
|
|
656
663
|
*/
|
|
657
|
-
_shouldRemoveFocus(
|
|
664
|
+
_shouldRemoveFocus(event) {
|
|
665
|
+
// Remove the focused state when clicking outside on a focusable element that is deliberately
|
|
666
|
+
// made targetable with pointer-events: auto, such as the time-picker in the date-time-picker.
|
|
667
|
+
// In this scenario, focus will move straight to that element and the closing overlay won't
|
|
668
|
+
// attempt to restore focus to the input.
|
|
669
|
+
const { relatedTarget } = event;
|
|
670
|
+
if (
|
|
671
|
+
this.opened &&
|
|
672
|
+
relatedTarget !== null &&
|
|
673
|
+
relatedTarget !== document.body &&
|
|
674
|
+
!this.contains(relatedTarget) &&
|
|
675
|
+
!this._overlayContent.contains(relatedTarget)
|
|
676
|
+
) {
|
|
677
|
+
return true;
|
|
678
|
+
}
|
|
679
|
+
|
|
658
680
|
return !this.opened;
|
|
659
681
|
}
|
|
660
682
|
|
|
@@ -735,7 +757,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
735
757
|
}
|
|
736
758
|
|
|
737
759
|
/** @private */
|
|
738
|
-
// eslint-disable-next-line max-params
|
|
760
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
739
761
|
_isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
|
|
740
762
|
// On fullscreen mode, text input is disabled if auto-open isn't disabled or
|
|
741
763
|
// whenever the dropdown is opened
|
|
@@ -863,7 +885,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
863
885
|
}
|
|
864
886
|
|
|
865
887
|
/** @private */
|
|
866
|
-
// eslint-disable-next-line max-params
|
|
888
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
867
889
|
__updateOverlayContent(
|
|
868
890
|
overlayContent,
|
|
869
891
|
i18n,
|
|
@@ -960,8 +982,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
960
982
|
return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate, this.isDateDisabled)
|
|
961
983
|
? initialPosition
|
|
962
984
|
: this._minDate || this._maxDate
|
|
963
|
-
|
|
964
|
-
|
|
985
|
+
? getClosestDate(initialPosition, [this._minDate, this._maxDate])
|
|
986
|
+
: new Date();
|
|
965
987
|
}
|
|
966
988
|
|
|
967
989
|
/**
|
|
@@ -327,7 +327,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
|
|
|
327
327
|
}
|
|
328
328
|
}
|
|
329
329
|
|
|
330
|
-
// eslint-disable-next-line max-params
|
|
330
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
331
331
|
__updateCalendars(
|
|
332
332
|
calendars,
|
|
333
333
|
i18n,
|
|
@@ -531,7 +531,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
|
|
|
531
531
|
|
|
532
532
|
/** @private */
|
|
533
533
|
_onTodayTap() {
|
|
534
|
-
const today =
|
|
534
|
+
const today = this._getTodayMidnight();
|
|
535
535
|
|
|
536
536
|
if (Math.abs(this._monthScroller.position - this._differenceInMonths(today, this._originDate)) < 0.001) {
|
|
537
537
|
// Select today only if the month scroller is positioned approximately
|
|
@@ -1040,12 +1040,17 @@ export const DatePickerOverlayContentMixin = (superClass) =>
|
|
|
1040
1040
|
|
|
1041
1041
|
/** @private */
|
|
1042
1042
|
_isTodayAllowed(min, max, isDateDisabled) {
|
|
1043
|
+
return this._dateAllowed(this._getTodayMidnight(), min, max, isDateDisabled);
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
/** @private */
|
|
1047
|
+
_getTodayMidnight() {
|
|
1043
1048
|
const today = new Date();
|
|
1044
1049
|
const todayMidnight = new Date(0, 0);
|
|
1045
1050
|
todayMidnight.setFullYear(today.getFullYear());
|
|
1046
1051
|
todayMidnight.setMonth(today.getMonth());
|
|
1047
1052
|
todayMidnight.setDate(today.getDate());
|
|
1048
|
-
return
|
|
1053
|
+
return todayMidnight;
|
|
1049
1054
|
}
|
|
1050
1055
|
|
|
1051
1056
|
/**
|
|
@@ -213,12 +213,21 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
|
|
|
213
213
|
super.ready();
|
|
214
214
|
|
|
215
215
|
this.addController(
|
|
216
|
-
new InputController(
|
|
217
|
-
this
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
216
|
+
new InputController(
|
|
217
|
+
this,
|
|
218
|
+
(input) => {
|
|
219
|
+
this._setInputElement(input);
|
|
220
|
+
this._setFocusElement(input);
|
|
221
|
+
this.stateTarget = input;
|
|
222
|
+
this.ariaTarget = input;
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
// The "search" word is a trick to prevent Safari from enabling AutoFill,
|
|
226
|
+
// which is causing click issues:
|
|
227
|
+
// https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
|
|
228
|
+
uniqueIdPrefix: 'search-input',
|
|
229
|
+
},
|
|
230
|
+
),
|
|
222
231
|
);
|
|
223
232
|
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
224
233
|
|
|
@@ -199,12 +199,14 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
199
199
|
const weekDayNamesShort = this._applyFirstDayOfWeek(weekdaysShort, firstDayOfWeek);
|
|
200
200
|
const weekDayNames = this._applyFirstDayOfWeek(weekdays, firstDayOfWeek);
|
|
201
201
|
|
|
202
|
-
return weekDayNames
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
202
|
+
return weekDayNames
|
|
203
|
+
.map((day, index) => {
|
|
204
|
+
return {
|
|
205
|
+
weekDay: day,
|
|
206
|
+
weekDayShort: weekDayNamesShort[index],
|
|
207
|
+
};
|
|
208
|
+
})
|
|
209
|
+
.slice(0, 7);
|
|
208
210
|
}
|
|
209
211
|
|
|
210
212
|
/** @private */
|
|
@@ -107,6 +107,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
|
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
/** @private */
|
|
110
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
110
111
|
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
|
|
111
112
|
const result = ['date'];
|
|
112
113
|
|
|
@@ -102,7 +102,9 @@ registerStyles(
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
[part~='date'][part~='focused']::before {
|
|
105
|
-
box-shadow:
|
|
105
|
+
box-shadow:
|
|
106
|
+
0 0 0 1px var(--lumo-base-color),
|
|
107
|
+
0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
|
|
106
108
|
}
|
|
107
109
|
|
|
108
110
|
:host(:not([focused])) [part~='date'][part~='focused']::before {
|
|
@@ -111,7 +113,9 @@ registerStyles(
|
|
|
111
113
|
|
|
112
114
|
@keyframes vaadin-date-picker-month-calendar-focus-date {
|
|
113
115
|
50% {
|
|
114
|
-
box-shadow:
|
|
116
|
+
box-shadow:
|
|
117
|
+
0 0 0 1px var(--lumo-base-color),
|
|
118
|
+
0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
|
|
115
119
|
}
|
|
116
120
|
}
|
|
117
121
|
|
|
@@ -24,7 +24,7 @@ const datePickerOverlay = css`
|
|
|
24
24
|
border-radius: 0 4px 4px;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
:host([dir='
|
|
27
|
+
:host(:not([dir='rtl']):not([fullscreen])[end-aligned]) [part='overlay'],
|
|
28
28
|
:host([dir='rtl']:not([fullscreen])[start-aligned]) [part='overlay'] {
|
|
29
29
|
border-radius: 4px 0 4px 4px;
|
|
30
30
|
}
|
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": "24.5.0-
|
|
4
|
+
"version": "24.5.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -344,7 +344,7 @@
|
|
|
344
344
|
},
|
|
345
345
|
{
|
|
346
346
|
"name": "vaadin-date-picker",
|
|
347
|
-
"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/24.5.0-
|
|
347
|
+
"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/24.5.0-alpha10/#/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\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\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/24.5.0-alpha10/#/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/24.5.0-alpha10/#/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/24.5.0-alpha10/#/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`toolbar` | Footer bar 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\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",
|
|
348
348
|
"attributes": [
|
|
349
349
|
{
|
|
350
350
|
"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": "24.5.0-
|
|
4
|
+
"version": "24.5.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
},
|
|
164
164
|
{
|
|
165
165
|
"name": "vaadin-date-picker",
|
|
166
|
-
"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/24.5.0-
|
|
166
|
+
"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/24.5.0-alpha10/#/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\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\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/24.5.0-alpha10/#/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/24.5.0-alpha10/#/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/24.5.0-alpha10/#/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`toolbar` | Footer bar 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\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",
|
|
167
167
|
"extension": true,
|
|
168
168
|
"attributes": [
|
|
169
169
|
{
|