@vaadin/date-picker 24.0.5 → 24.1.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 +2 -2
- package/package.json +11 -10
- package/src/vaadin-date-picker-mixin.d.ts +4 -4
- package/src/vaadin-date-picker-mixin.js +22 -9
- package/src/vaadin-date-picker-overlay.js +6 -0
- package/src/vaadin-month-calendar.js +10 -1
- package/web-types.json +46 -2
- package/web-types.lit.json +16 -2
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ A web component that allows to enter a date by typing or by selecting from a cal
|
|
|
11
11
|
<vaadin-date-picker label="Label" value="2018-12-03" clear-button-visible></vaadin-date-picker>
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/
|
|
14
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/date-picker/screenshot.png" width="343" alt="Screenshot of vaadin-date-picker">](https://vaadin.com/docs/latest/components/date-picker)
|
|
15
15
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
@@ -30,7 +30,7 @@ import '@vaadin/date-picker';
|
|
|
30
30
|
## Themes
|
|
31
31
|
|
|
32
32
|
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
33
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/
|
|
33
|
+
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/date-picker/vaadin-date-picker.js) of the package uses the Lumo theme.
|
|
34
34
|
|
|
35
35
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
36
36
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.0
|
|
3
|
+
"version": "24.1.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,15 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/
|
|
43
|
-
"@vaadin/
|
|
44
|
-
"@vaadin/
|
|
45
|
-
"@vaadin/vaadin-
|
|
46
|
-
"@vaadin/vaadin-
|
|
39
|
+
"@vaadin/a11y-base": "24.1.0-alpha10",
|
|
40
|
+
"@vaadin/button": "24.1.0-alpha10",
|
|
41
|
+
"@vaadin/component-base": "24.1.0-alpha10",
|
|
42
|
+
"@vaadin/field-base": "24.1.0-alpha10",
|
|
43
|
+
"@vaadin/input-container": "24.1.0-alpha10",
|
|
44
|
+
"@vaadin/overlay": "24.1.0-alpha10",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-alpha10",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.1.0-alpha10",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-alpha10"
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
49
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +55,5 @@
|
|
|
54
55
|
"web-types.json",
|
|
55
56
|
"web-types.lit.json"
|
|
56
57
|
],
|
|
57
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
|
|
58
59
|
}
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
-
import type { DelegateFocusMixinClass } from '@vaadin/
|
|
8
|
-
import type { DisabledMixinClass } from '@vaadin/
|
|
9
|
-
import type { FocusMixinClass } from '@vaadin/
|
|
10
|
-
import type { KeyboardMixinClass } from '@vaadin/
|
|
7
|
+
import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
9
|
+
import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
10
|
+
import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
11
11
|
import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
12
|
import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
13
13
|
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2016 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
+
import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js';
|
|
7
|
+
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
6
9
|
import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
|
|
7
10
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
|
-
import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
|
|
9
|
-
import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
10
11
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
11
12
|
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
13
|
import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
@@ -828,32 +829,38 @@ export const DatePickerMixin = (subclass) =>
|
|
|
828
829
|
|
|
829
830
|
/** @protected */
|
|
830
831
|
_onOverlayOpened() {
|
|
832
|
+
const content = this._overlayContent;
|
|
833
|
+
|
|
831
834
|
// Detect which date to show
|
|
832
835
|
const initialPosition = this._getInitialPosition();
|
|
833
|
-
|
|
836
|
+
content.initialPosition = initialPosition;
|
|
834
837
|
|
|
835
838
|
// Scroll the date into view
|
|
836
|
-
const scrollFocusDate =
|
|
837
|
-
|
|
839
|
+
const scrollFocusDate = content.focusedDate || initialPosition;
|
|
840
|
+
content.scrollToDate(scrollFocusDate);
|
|
838
841
|
|
|
839
842
|
// Ensure the date is focused
|
|
840
843
|
this._ignoreFocusedDateChange = true;
|
|
841
|
-
|
|
844
|
+
content.focusedDate = scrollFocusDate;
|
|
842
845
|
this._ignoreFocusedDateChange = false;
|
|
843
846
|
|
|
844
847
|
window.addEventListener('scroll', this._boundOnScroll, true);
|
|
845
848
|
|
|
846
849
|
if (this._focusOverlayOnOpen) {
|
|
847
|
-
|
|
850
|
+
content.focusDateElement();
|
|
848
851
|
this._focusOverlayOnOpen = false;
|
|
849
852
|
} else {
|
|
850
853
|
this._focus();
|
|
851
854
|
}
|
|
852
855
|
|
|
853
|
-
|
|
854
|
-
|
|
856
|
+
const input = this._nativeInput;
|
|
857
|
+
if (this._noInput && input) {
|
|
858
|
+
input.blur();
|
|
855
859
|
this._overlayContent.focusDateElement();
|
|
856
860
|
}
|
|
861
|
+
|
|
862
|
+
const focusables = this._noInput ? content : [input, content];
|
|
863
|
+
this.__showOthers = hideOthers(focusables);
|
|
857
864
|
}
|
|
858
865
|
|
|
859
866
|
/** @private */
|
|
@@ -892,6 +899,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
892
899
|
|
|
893
900
|
/** @protected */
|
|
894
901
|
_onOverlayClosed() {
|
|
902
|
+
// Reset `aria-hidden` state.
|
|
903
|
+
if (this.__showOthers) {
|
|
904
|
+
this.__showOthers();
|
|
905
|
+
this.__showOthers = null;
|
|
906
|
+
}
|
|
907
|
+
|
|
895
908
|
window.removeEventListener('scroll', this._boundOnScroll, true);
|
|
896
909
|
|
|
897
910
|
// No need to select date on close if it was confirmed by the user.
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@polymer/polymer/lib/elements/dom-repeat.js';
|
|
7
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
|
-
import { FocusMixin } from '@vaadin/
|
|
8
|
+
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
9
9
|
import { addListener } from '@vaadin/component-base/src/gestures.js';
|
|
10
10
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
11
|
import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
|
|
@@ -63,6 +63,15 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
|
|
|
63
63
|
:host([week-numbers]) [part~='date'] {
|
|
64
64
|
width: 12.5%;
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
@media (forced-colors: active) {
|
|
68
|
+
[part~='date'][part~='focused'] {
|
|
69
|
+
outline: 1px solid;
|
|
70
|
+
}
|
|
71
|
+
[part~='date'][part~='selected'] {
|
|
72
|
+
outline: 3px solid;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
66
75
|
</style>
|
|
67
76
|
|
|
68
77
|
<div part="month-header" id="month-header" aria-hidden="true">[[_getTitle(month, i18n.monthNames)]]</div>
|
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.0
|
|
4
|
+
"version": "24.1.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
},
|
|
335
335
|
{
|
|
336
336
|
"name": "vaadin-date-picker",
|
|
337
|
-
"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.0
|
|
337
|
+
"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.1.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.1.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.1.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.1.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/custom-theme/styling-components) documentation.",
|
|
338
338
|
"attributes": [
|
|
339
339
|
{
|
|
340
340
|
"name": "disabled",
|
|
@@ -413,6 +413,28 @@
|
|
|
413
413
|
]
|
|
414
414
|
}
|
|
415
415
|
},
|
|
416
|
+
{
|
|
417
|
+
"name": "accessible-name",
|
|
418
|
+
"description": "String used to label the component to screen reader users.",
|
|
419
|
+
"value": {
|
|
420
|
+
"type": [
|
|
421
|
+
"string",
|
|
422
|
+
"null",
|
|
423
|
+
"undefined"
|
|
424
|
+
]
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"name": "accessible-name-ref",
|
|
429
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
430
|
+
"value": {
|
|
431
|
+
"type": [
|
|
432
|
+
"string",
|
|
433
|
+
"null",
|
|
434
|
+
"undefined"
|
|
435
|
+
]
|
|
436
|
+
}
|
|
437
|
+
},
|
|
416
438
|
{
|
|
417
439
|
"name": "value",
|
|
418
440
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -665,6 +687,28 @@
|
|
|
665
687
|
]
|
|
666
688
|
}
|
|
667
689
|
},
|
|
690
|
+
{
|
|
691
|
+
"name": "accessibleName",
|
|
692
|
+
"description": "String used to label the component to screen reader users.",
|
|
693
|
+
"value": {
|
|
694
|
+
"type": [
|
|
695
|
+
"string",
|
|
696
|
+
"null",
|
|
697
|
+
"undefined"
|
|
698
|
+
]
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
{
|
|
702
|
+
"name": "accessibleNameRef",
|
|
703
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
704
|
+
"value": {
|
|
705
|
+
"type": [
|
|
706
|
+
"string",
|
|
707
|
+
"null",
|
|
708
|
+
"undefined"
|
|
709
|
+
]
|
|
710
|
+
}
|
|
711
|
+
},
|
|
668
712
|
{
|
|
669
713
|
"name": "value",
|
|
670
714
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
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.0
|
|
4
|
+
"version": "24.1.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"name": "vaadin-date-picker",
|
|
159
|
-
"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.0
|
|
159
|
+
"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.1.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.1.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.1.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.1.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/custom-theme/styling-components) documentation.",
|
|
160
160
|
"extension": true,
|
|
161
161
|
"attributes": [
|
|
162
162
|
{
|
|
@@ -250,6 +250,20 @@
|
|
|
250
250
|
"kind": "expression"
|
|
251
251
|
}
|
|
252
252
|
},
|
|
253
|
+
{
|
|
254
|
+
"name": ".accessibleName",
|
|
255
|
+
"description": "String used to label the component to screen reader users.",
|
|
256
|
+
"value": {
|
|
257
|
+
"kind": "expression"
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": ".accessibleNameRef",
|
|
262
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
263
|
+
"value": {
|
|
264
|
+
"kind": "expression"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
253
267
|
{
|
|
254
268
|
"name": ".value",
|
|
255
269
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|