@vaadin/date-picker 24.2.0-beta2 → 24.2.0-beta3
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 +11 -11
- package/src/vaadin-date-picker-light.d.ts +0 -8
- package/src/vaadin-date-picker-mixin.js +27 -38
- package/src/vaadin-date-picker.d.ts +0 -8
- package/theme/lumo/vaadin-date-picker-styles.js +1 -0
- package/theme/lumo/vaadin-date-picker.js +0 -1
- package/theme/material/vaadin-date-picker-styles.js +1 -0
- package/theme/material/vaadin-date-picker.js +0 -1
- package/web-types.json +2 -54
- package/web-types.lit.json +2 -30
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-beta3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -40,15 +40,15 @@
|
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
42
42
|
"@polymer/polymer": "^3.2.0",
|
|
43
|
-
"@vaadin/a11y-base": "24.2.0-
|
|
44
|
-
"@vaadin/button": "24.2.0-
|
|
45
|
-
"@vaadin/component-base": "24.2.0-
|
|
46
|
-
"@vaadin/field-base": "24.2.0-
|
|
47
|
-
"@vaadin/input-container": "24.2.0-
|
|
48
|
-
"@vaadin/overlay": "24.2.0-
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
50
|
-
"@vaadin/vaadin-material-styles": "24.2.0-
|
|
51
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
43
|
+
"@vaadin/a11y-base": "24.2.0-beta3",
|
|
44
|
+
"@vaadin/button": "24.2.0-beta3",
|
|
45
|
+
"@vaadin/component-base": "24.2.0-beta3",
|
|
46
|
+
"@vaadin/field-base": "24.2.0-beta3",
|
|
47
|
+
"@vaadin/input-container": "24.2.0-beta3",
|
|
48
|
+
"@vaadin/overlay": "24.2.0-beta3",
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-beta3",
|
|
50
|
+
"@vaadin/vaadin-material-styles": "24.2.0-beta3",
|
|
51
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-beta3"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"web-types.json",
|
|
60
60
|
"web-types.lit.json"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "91ea11e7ad706065340acdb93b92316919ce5e69"
|
|
63
63
|
}
|
|
@@ -25,11 +25,6 @@ export type DatePickerLightOpenedChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
25
25
|
*/
|
|
26
26
|
export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
27
27
|
|
|
28
|
-
/**
|
|
29
|
-
* Fired when the `dirty` property changes.
|
|
30
|
-
*/
|
|
31
|
-
export type DatePickerLightDirtyChangedEvent = CustomEvent<{ value: boolean }>;
|
|
32
|
-
|
|
33
28
|
/**
|
|
34
29
|
* Fired when the `value` property changes.
|
|
35
30
|
*/
|
|
@@ -45,8 +40,6 @@ export interface DatePickerLightCustomEventMap {
|
|
|
45
40
|
|
|
46
41
|
'invalid-changed': DatePickerLightInvalidChangedEvent;
|
|
47
42
|
|
|
48
|
-
'dirty-changed': DatePickerLightDirtyChangedEvent;
|
|
49
|
-
|
|
50
43
|
'value-changed': DatePickerLightValueChangedEvent;
|
|
51
44
|
|
|
52
45
|
validated: DatePickerLightValidatedEvent;
|
|
@@ -87,7 +80,6 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker
|
|
|
87
80
|
*
|
|
88
81
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
89
82
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
90
|
-
* @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
|
|
91
83
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
92
84
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
93
85
|
*/
|
|
@@ -447,7 +447,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
447
447
|
super._onBlur(event);
|
|
448
448
|
|
|
449
449
|
if (!this.opened) {
|
|
450
|
-
this.
|
|
450
|
+
this.__commitParsedOrFocusedDate();
|
|
451
451
|
|
|
452
452
|
// Do not validate when focusout is caused by document
|
|
453
453
|
// losing focus, which happens on browser tab switch.
|
|
@@ -523,19 +523,14 @@ export const DatePickerMixin = (subclass) =>
|
|
|
523
523
|
|
|
524
524
|
// User confirmed selected date by clicking the calendar.
|
|
525
525
|
content.addEventListener('date-tap', (e) => {
|
|
526
|
-
this.
|
|
527
|
-
|
|
528
|
-
this._selectDate(e.detail.date);
|
|
526
|
+
this.__commitDate(e.detail.date);
|
|
529
527
|
|
|
530
528
|
this._close();
|
|
531
529
|
});
|
|
532
530
|
|
|
533
531
|
// User confirmed selected date by pressing Enter, Space, or Today.
|
|
534
532
|
content.addEventListener('date-selected', (e) => {
|
|
535
|
-
|
|
536
|
-
this.__userConfirmedDate = !!e.detail.date;
|
|
537
|
-
|
|
538
|
-
this._selectDate(e.detail.date);
|
|
533
|
+
this.__commitDate(e.detail.date);
|
|
539
534
|
});
|
|
540
535
|
|
|
541
536
|
// Set focus-ring attribute when moving focus to the overlay
|
|
@@ -657,19 +652,18 @@ export const DatePickerMixin = (subclass) =>
|
|
|
657
652
|
}
|
|
658
653
|
|
|
659
654
|
/**
|
|
660
|
-
*
|
|
661
|
-
*
|
|
655
|
+
* Sets the given date as the value and fires a change event
|
|
656
|
+
* if the value has changed.
|
|
662
657
|
*
|
|
663
|
-
* @param {Date}
|
|
664
|
-
* @
|
|
658
|
+
* @param {Date} date
|
|
659
|
+
* @private
|
|
665
660
|
*/
|
|
666
|
-
|
|
661
|
+
__commitDate(date) {
|
|
667
662
|
const prevValue = this.value;
|
|
668
663
|
|
|
669
|
-
this._selectedDate =
|
|
664
|
+
this._selectedDate = date;
|
|
670
665
|
|
|
671
666
|
if (prevValue !== this.value) {
|
|
672
|
-
this.dirty = true;
|
|
673
667
|
this.__dispatchChange();
|
|
674
668
|
}
|
|
675
669
|
}
|
|
@@ -897,8 +891,15 @@ export const DatePickerMixin = (subclass) =>
|
|
|
897
891
|
: getClosestDate(initialPosition, [this._minDate, this._maxDate]);
|
|
898
892
|
}
|
|
899
893
|
|
|
900
|
-
/**
|
|
901
|
-
|
|
894
|
+
/**
|
|
895
|
+
* Tries to parse the input element's value as a date. When succeeds,
|
|
896
|
+
* sets the resulting date as the value and fires a change event
|
|
897
|
+
* (if the value has changed). If no i18n parser is provided, sets
|
|
898
|
+
* the focused date as the value.
|
|
899
|
+
*
|
|
900
|
+
* @private
|
|
901
|
+
*/
|
|
902
|
+
__commitParsedOrFocusedDate() {
|
|
902
903
|
// Select the parsed input or focused date
|
|
903
904
|
this._ignoreFocusedDateChange = true;
|
|
904
905
|
if (this.i18n.parseDate) {
|
|
@@ -906,15 +907,15 @@ export const DatePickerMixin = (subclass) =>
|
|
|
906
907
|
const parsedDate = this.__parseDate(inputValue);
|
|
907
908
|
|
|
908
909
|
if (parsedDate) {
|
|
909
|
-
this.
|
|
910
|
+
this.__commitDate(parsedDate);
|
|
910
911
|
} else {
|
|
911
912
|
this.__keepInputValue = true;
|
|
912
|
-
this.
|
|
913
|
+
this.__commitDate(null);
|
|
913
914
|
this._selectedDate = null;
|
|
914
915
|
this.__keepInputValue = false;
|
|
915
916
|
}
|
|
916
917
|
} else if (this._focusedDate) {
|
|
917
|
-
this.
|
|
918
|
+
this.__commitDate(this._focusedDate);
|
|
918
919
|
}
|
|
919
920
|
this._ignoreFocusedDateChange = false;
|
|
920
921
|
}
|
|
@@ -929,12 +930,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
929
930
|
|
|
930
931
|
window.removeEventListener('scroll', this._boundOnScroll, true);
|
|
931
932
|
|
|
932
|
-
|
|
933
|
-
if (this.__userConfirmedDate) {
|
|
934
|
-
this.__userConfirmedDate = false;
|
|
935
|
-
} else {
|
|
936
|
-
this._selectParsedOrFocusedDate();
|
|
937
|
-
}
|
|
933
|
+
this.__commitParsedOrFocusedDate();
|
|
938
934
|
|
|
939
935
|
if (this._nativeInput && this._nativeInput.selectionStart) {
|
|
940
936
|
this._nativeInput.selectionStart = this._nativeInput.selectionEnd;
|
|
@@ -1020,10 +1016,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1020
1016
|
*/
|
|
1021
1017
|
_onClearButtonClick(event) {
|
|
1022
1018
|
event.preventDefault();
|
|
1023
|
-
this.
|
|
1024
|
-
this._inputElementValue = '';
|
|
1025
|
-
this.value = '';
|
|
1026
|
-
this.__dispatchChange();
|
|
1019
|
+
this.__commitDate(null);
|
|
1027
1020
|
}
|
|
1028
1021
|
|
|
1029
1022
|
/**
|
|
@@ -1092,7 +1085,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1092
1085
|
// Closing will implicitly select parsed or focused date
|
|
1093
1086
|
this.close();
|
|
1094
1087
|
} else {
|
|
1095
|
-
this.
|
|
1088
|
+
this.__commitParsedOrFocusedDate();
|
|
1096
1089
|
}
|
|
1097
1090
|
if (oldValue === this.value) {
|
|
1098
1091
|
this.validate();
|
|
@@ -1122,15 +1115,11 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1122
1115
|
return;
|
|
1123
1116
|
}
|
|
1124
1117
|
|
|
1125
|
-
if (this.
|
|
1118
|
+
if (this.inputElement.value === '') {
|
|
1126
1119
|
// Do not restore selected date if Esc was pressed after clearing input field
|
|
1127
|
-
|
|
1128
|
-
this._selectDate(null);
|
|
1129
|
-
}
|
|
1130
|
-
this._applyInputValue(this._selectedDate);
|
|
1120
|
+
this.__commitDate(null);
|
|
1131
1121
|
} else {
|
|
1132
|
-
this.
|
|
1133
|
-
this._selectParsedOrFocusedDate();
|
|
1122
|
+
this._applyInputValue(this._selectedDate);
|
|
1134
1123
|
}
|
|
1135
1124
|
}
|
|
1136
1125
|
|
|
@@ -26,11 +26,6 @@ export type DatePickerOpenedChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
26
26
|
*/
|
|
27
27
|
export type DatePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
28
28
|
|
|
29
|
-
/**
|
|
30
|
-
* Fired when the `dirty` property changes.
|
|
31
|
-
*/
|
|
32
|
-
export type DatePickerDirtyChangedEvent = CustomEvent<{ value: boolean }>;
|
|
33
|
-
|
|
34
29
|
/**
|
|
35
30
|
* Fired when the `value` property changes.
|
|
36
31
|
*/
|
|
@@ -46,8 +41,6 @@ export interface DatePickerCustomEventMap {
|
|
|
46
41
|
|
|
47
42
|
'invalid-changed': DatePickerInvalidChangedEvent;
|
|
48
43
|
|
|
49
|
-
'dirty-changed': DatePickerDirtyChangedEvent;
|
|
50
|
-
|
|
51
44
|
'value-changed': DatePickerValueChangedEvent;
|
|
52
45
|
|
|
53
46
|
validated: DatePickerValidatedEvent;
|
|
@@ -158,7 +151,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
|
|
|
158
151
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
159
152
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
160
153
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
161
|
-
* @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
|
|
162
154
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
163
155
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
164
156
|
*/
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
|
|
1
2
|
import '@vaadin/vaadin-lumo-styles/font-icons.js';
|
|
2
3
|
import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
|
|
3
4
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
|
|
1
2
|
import '@vaadin/vaadin-material-styles/color.js';
|
|
2
3
|
import '@vaadin/vaadin-material-styles/font-icons.js';
|
|
3
4
|
import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
|
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.2.0-
|
|
4
|
+
"version": "24.2.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -41,17 +41,6 @@
|
|
|
41
41
|
]
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
|
-
{
|
|
45
|
-
"name": "dirty",
|
|
46
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
47
|
-
"value": {
|
|
48
|
-
"type": [
|
|
49
|
-
"boolean",
|
|
50
|
-
"null",
|
|
51
|
-
"undefined"
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
44
|
{
|
|
56
45
|
"name": "invalid",
|
|
57
46
|
"description": "Set to true when the field is invalid.",
|
|
@@ -203,17 +192,6 @@
|
|
|
203
192
|
]
|
|
204
193
|
}
|
|
205
194
|
},
|
|
206
|
-
{
|
|
207
|
-
"name": "dirty",
|
|
208
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
209
|
-
"value": {
|
|
210
|
-
"type": [
|
|
211
|
-
"boolean",
|
|
212
|
-
"null",
|
|
213
|
-
"undefined"
|
|
214
|
-
]
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
195
|
{
|
|
218
196
|
"name": "invalid",
|
|
219
197
|
"description": "Set to true when the field is invalid.",
|
|
@@ -347,10 +325,6 @@
|
|
|
347
325
|
"name": "value-changed",
|
|
348
326
|
"description": "Fired when `value` property value changes."
|
|
349
327
|
},
|
|
350
|
-
{
|
|
351
|
-
"name": "dirty-changed",
|
|
352
|
-
"description": "Fired when the `dirty` property changes."
|
|
353
|
-
},
|
|
354
328
|
{
|
|
355
329
|
"name": "invalid-changed",
|
|
356
330
|
"description": "Fired when the `invalid` property changes."
|
|
@@ -360,7 +334,7 @@
|
|
|
360
334
|
},
|
|
361
335
|
{
|
|
362
336
|
"name": "vaadin-date-picker",
|
|
363
|
-
"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.2.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.2.0-beta3/#/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.2.0-beta3/#/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.2.0-beta3/#/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.2.0-beta3/#/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.",
|
|
364
338
|
"attributes": [
|
|
365
339
|
{
|
|
366
340
|
"name": "disabled",
|
|
@@ -470,17 +444,6 @@
|
|
|
470
444
|
]
|
|
471
445
|
}
|
|
472
446
|
},
|
|
473
|
-
{
|
|
474
|
-
"name": "dirty",
|
|
475
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
476
|
-
"value": {
|
|
477
|
-
"type": [
|
|
478
|
-
"boolean",
|
|
479
|
-
"null",
|
|
480
|
-
"undefined"
|
|
481
|
-
]
|
|
482
|
-
}
|
|
483
|
-
},
|
|
484
447
|
{
|
|
485
448
|
"name": "clear-button-visible",
|
|
486
449
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -755,17 +718,6 @@
|
|
|
755
718
|
]
|
|
756
719
|
}
|
|
757
720
|
},
|
|
758
|
-
{
|
|
759
|
-
"name": "dirty",
|
|
760
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
761
|
-
"value": {
|
|
762
|
-
"type": [
|
|
763
|
-
"boolean",
|
|
764
|
-
"null",
|
|
765
|
-
"undefined"
|
|
766
|
-
]
|
|
767
|
-
}
|
|
768
|
-
},
|
|
769
721
|
{
|
|
770
722
|
"name": "clearButtonVisible",
|
|
771
723
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -952,10 +904,6 @@
|
|
|
952
904
|
{
|
|
953
905
|
"name": "invalid-changed",
|
|
954
906
|
"description": "Fired when the `invalid` property changes."
|
|
955
|
-
},
|
|
956
|
-
{
|
|
957
|
-
"name": "dirty-changed",
|
|
958
|
-
"description": "Fired when the `dirty` property changes."
|
|
959
907
|
}
|
|
960
908
|
]
|
|
961
909
|
}
|
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.2.0-
|
|
4
|
+
"version": "24.2.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -33,13 +33,6 @@
|
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
|
-
{
|
|
37
|
-
"name": "?dirty",
|
|
38
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
39
|
-
"value": {
|
|
40
|
-
"kind": "expression"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
36
|
{
|
|
44
37
|
"name": "?invalid",
|
|
45
38
|
"description": "Set to true when the field is invalid.",
|
|
@@ -152,13 +145,6 @@
|
|
|
152
145
|
"kind": "expression"
|
|
153
146
|
}
|
|
154
147
|
},
|
|
155
|
-
{
|
|
156
|
-
"name": "@dirty-changed",
|
|
157
|
-
"description": "Fired when the `dirty` property changes.",
|
|
158
|
-
"value": {
|
|
159
|
-
"kind": "expression"
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
148
|
{
|
|
163
149
|
"name": "@invalid-changed",
|
|
164
150
|
"description": "Fired when the `invalid` property changes.",
|
|
@@ -170,7 +156,7 @@
|
|
|
170
156
|
},
|
|
171
157
|
{
|
|
172
158
|
"name": "vaadin-date-picker",
|
|
173
|
-
"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.2.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.2.0-beta3/#/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.2.0-beta3/#/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.2.0-beta3/#/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.2.0-beta3/#/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.",
|
|
174
160
|
"extension": true,
|
|
175
161
|
"attributes": [
|
|
176
162
|
{
|
|
@@ -201,13 +187,6 @@
|
|
|
201
187
|
"kind": "expression"
|
|
202
188
|
}
|
|
203
189
|
},
|
|
204
|
-
{
|
|
205
|
-
"name": "?dirty",
|
|
206
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
207
|
-
"value": {
|
|
208
|
-
"kind": "expression"
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
190
|
{
|
|
212
191
|
"name": "?clearButtonVisible",
|
|
213
192
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -396,13 +375,6 @@
|
|
|
396
375
|
"value": {
|
|
397
376
|
"kind": "expression"
|
|
398
377
|
}
|
|
399
|
-
},
|
|
400
|
-
{
|
|
401
|
-
"name": "@dirty-changed",
|
|
402
|
-
"description": "Fired when the `dirty` property changes.",
|
|
403
|
-
"value": {
|
|
404
|
-
"kind": "expression"
|
|
405
|
-
}
|
|
406
378
|
}
|
|
407
379
|
]
|
|
408
380
|
}
|