@vaadin/date-picker 24.2.0-alpha7 → 24.2.0-alpha9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/date-picker",
3
- "version": "24.2.0-alpha7",
3
+ "version": "24.2.0-alpha9",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -40,24 +40,24 @@
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-alpha7",
44
- "@vaadin/button": "24.2.0-alpha7",
45
- "@vaadin/component-base": "24.2.0-alpha7",
46
- "@vaadin/field-base": "24.2.0-alpha7",
47
- "@vaadin/input-container": "24.2.0-alpha7",
48
- "@vaadin/overlay": "24.2.0-alpha7",
49
- "@vaadin/vaadin-lumo-styles": "24.2.0-alpha7",
50
- "@vaadin/vaadin-material-styles": "24.2.0-alpha7",
51
- "@vaadin/vaadin-themable-mixin": "24.2.0-alpha7"
43
+ "@vaadin/a11y-base": "24.2.0-alpha9",
44
+ "@vaadin/button": "24.2.0-alpha9",
45
+ "@vaadin/component-base": "24.2.0-alpha9",
46
+ "@vaadin/field-base": "24.2.0-alpha9",
47
+ "@vaadin/input-container": "24.2.0-alpha9",
48
+ "@vaadin/overlay": "24.2.0-alpha9",
49
+ "@vaadin/vaadin-lumo-styles": "24.2.0-alpha9",
50
+ "@vaadin/vaadin-material-styles": "24.2.0-alpha9",
51
+ "@vaadin/vaadin-themable-mixin": "24.2.0-alpha9"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@esm-bundle/chai": "^4.3.4",
55
- "@vaadin/testing-helpers": "^0.4.3",
55
+ "@vaadin/testing-helpers": "^0.5.0",
56
56
  "sinon": "^13.0.2"
57
57
  },
58
58
  "web-types": [
59
59
  "web-types.json",
60
60
  "web-types.lit.json"
61
61
  ],
62
- "gitHead": "81ecf12d2d59a3e5b467273c37a391e31932dc9c"
62
+ "gitHead": "e9765733fea96542e379e02e6f42b07145893140"
63
63
  }
@@ -25,6 +25,11 @@ 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
+
28
33
  /**
29
34
  * Fired when the `value` property changes.
30
35
  */
@@ -40,6 +45,8 @@ export interface DatePickerLightCustomEventMap {
40
45
 
41
46
  'invalid-changed': DatePickerLightInvalidChangedEvent;
42
47
 
48
+ 'dirty-changed': DatePickerLightDirtyChangedEvent;
49
+
43
50
  'value-changed': DatePickerLightValueChangedEvent;
44
51
 
45
52
  validated: DatePickerLightValidatedEvent;
@@ -80,6 +87,7 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker
80
87
  *
81
88
  * @fires {Event} change - Fired when the user commits a value change.
82
89
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
90
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
83
91
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
84
92
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
85
93
  */
@@ -671,6 +671,7 @@ export const DatePickerMixin = (subclass) =>
671
671
 
672
672
  // Only set flag if the value will change.
673
673
  if (this.value !== value) {
674
+ this.dirty = true;
674
675
  this.__dispatchChange = true;
675
676
  }
676
677
 
@@ -1040,6 +1041,7 @@ export const DatePickerMixin = (subclass) =>
1040
1041
  */
1041
1042
  _onClearButtonClick(event) {
1042
1043
  event.preventDefault();
1044
+ this.dirty = true;
1043
1045
  this._inputElementValue = '';
1044
1046
  this.value = '';
1045
1047
  this.validate();
@@ -26,6 +26,11 @@ 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
+
29
34
  /**
30
35
  * Fired when the `value` property changes.
31
36
  */
@@ -41,6 +46,8 @@ export interface DatePickerCustomEventMap {
41
46
 
42
47
  'invalid-changed': DatePickerInvalidChangedEvent;
43
48
 
49
+ 'dirty-changed': DatePickerDirtyChangedEvent;
50
+
44
51
  'value-changed': DatePickerValueChangedEvent;
45
52
 
46
53
  validated: DatePickerValidatedEvent;
@@ -151,6 +158,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
151
158
  * @fires {Event} change - Fired when the user commits a value change.
152
159
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
153
160
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
161
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
154
162
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
155
163
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
156
164
  */
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-alpha7",
4
+ "version": "24.2.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -41,6 +41,17 @@
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
+ },
44
55
  {
45
56
  "name": "invalid",
46
57
  "description": "Set to true when the field is invalid.",
@@ -192,6 +203,17 @@
192
203
  ]
193
204
  }
194
205
  },
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
+ },
195
217
  {
196
218
  "name": "invalid",
197
219
  "description": "Set to true when the field is invalid.",
@@ -325,6 +347,10 @@
325
347
  "name": "value-changed",
326
348
  "description": "Fired when `value` property value changes."
327
349
  },
350
+ {
351
+ "name": "dirty-changed",
352
+ "description": "Fired when the `dirty` property changes."
353
+ },
328
354
  {
329
355
  "name": "invalid-changed",
330
356
  "description": "Fired when the `invalid` property changes."
@@ -334,7 +360,7 @@
334
360
  },
335
361
  {
336
362
  "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.2.0-alpha7/#/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-alpha7/#/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-alpha7/#/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-alpha7/#/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.",
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-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\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-alpha9/#/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-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`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.",
338
364
  "attributes": [
339
365
  {
340
366
  "name": "disabled",
@@ -444,6 +470,17 @@
444
470
  ]
445
471
  }
446
472
  },
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
+ },
447
484
  {
448
485
  "name": "clear-button-visible",
449
486
  "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.",
@@ -718,6 +755,17 @@
718
755
  ]
719
756
  }
720
757
  },
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
+ },
721
769
  {
722
770
  "name": "clearButtonVisible",
723
771
  "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.",
@@ -904,6 +952,10 @@
904
952
  {
905
953
  "name": "invalid-changed",
906
954
  "description": "Fired when the `invalid` property changes."
955
+ },
956
+ {
957
+ "name": "dirty-changed",
958
+ "description": "Fired when the `dirty` property changes."
907
959
  }
908
960
  ]
909
961
  }
@@ -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-alpha7",
4
+ "version": "24.2.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -33,6 +33,13 @@
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
+ },
36
43
  {
37
44
  "name": "?invalid",
38
45
  "description": "Set to true when the field is invalid.",
@@ -145,6 +152,13 @@
145
152
  "kind": "expression"
146
153
  }
147
154
  },
155
+ {
156
+ "name": "@dirty-changed",
157
+ "description": "Fired when the `dirty` property changes.",
158
+ "value": {
159
+ "kind": "expression"
160
+ }
161
+ },
148
162
  {
149
163
  "name": "@invalid-changed",
150
164
  "description": "Fired when the `invalid` property changes.",
@@ -156,7 +170,7 @@
156
170
  },
157
171
  {
158
172
  "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.2.0-alpha7/#/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-alpha7/#/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-alpha7/#/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-alpha7/#/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.",
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-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\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-alpha9/#/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-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`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.",
160
174
  "extension": true,
161
175
  "attributes": [
162
176
  {
@@ -187,6 +201,13 @@
187
201
  "kind": "expression"
188
202
  }
189
203
  },
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
+ },
190
211
  {
191
212
  "name": "?clearButtonVisible",
192
213
  "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.",
@@ -375,6 +396,13 @@
375
396
  "value": {
376
397
  "kind": "expression"
377
398
  }
399
+ },
400
+ {
401
+ "name": "@dirty-changed",
402
+ "description": "Fired when the `dirty` property changes.",
403
+ "value": {
404
+ "kind": "expression"
405
+ }
378
406
  }
379
407
  ]
380
408
  }