@vaadin/date-time-picker 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 An input field web component for selecting both a date and a time.
 
-[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/date-time-picker)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/date-time-picker)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/date-time-picker)](https://www.npmjs.com/package/@vaadin/date-time-picker)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -27,7 +27,7 @@ import '@vaadin/date-time-picker';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/date-time-picker/vaadin-date-time-picker.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -50,7 +50,7 @@ import '@vaadin/date-time-picker/src/vaadin-date-time-picker.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -34,19 +36,23 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/custom-field": "23.2.0-dev.8a7678b70",
-    "@vaadin/date-picker": "23.2.0-dev.8a7678b70",
-    "@vaadin/field-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/time-picker": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/custom-field": "23.3.0-alpha1",
+    "@vaadin/date-picker": "23.3.0-alpha1",
+    "@vaadin/field-base": "23.3.0-alpha1",
+    "@vaadin/time-picker": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

package/src/vaadin-date-time-picker.d.ts

@@ -7,9 +7,9 @@ import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
-import { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
+import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
-import { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
+import type { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {}
@@ -31,10 +31,17 @@ export type DateTimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type DateTimePickerValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type DateTimePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface DateTimePickerCustomEventMap {
   'invalid-changed': DateTimePickerInvalidChangedEvent;
 
   'value-changed': DateTimePickerValueChangedEvent;
+
+  validated: DateTimePickerValidatedEvent;
 }
 
 export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HTMLElementEventMap {
@@ -90,11 +97,12 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
  * propagated to the internal components listed above.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class DateTimePicker extends FieldMixin(
   SlotMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))),
@@ -210,13 +218,13 @@ declare class DateTimePicker extends FieldMixin(
   addEventListener<K extends keyof DateTimePickerEventMap>(
     type: K,
     listener: (this: DateTimePicker, ev: DateTimePickerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof DateTimePickerEventMap>(
     type: K,
     listener: (this: DateTimePicker, ev: DateTimePickerEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-date-time-picker.js

@@ -11,6 +11,7 @@ import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { dateEquals } from '@vaadin/date-picker/src/vaadin-date-picker-helper.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
@@ -92,11 +93,12 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
  * propagated to the internal components listed above.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -155,6 +157,8 @@ class DateTimePicker extends FieldMixin(
           <slot name="error-message"></slot>
         </div>
       </div>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -413,12 +417,6 @@ class DateTimePicker extends FieldMixin(
   ready() {
     super.ready();
 
-    this.addEventListener('focusout', (e) => {
-      if (e.relatedTarget !== this.__datePicker.$.overlay) {
-        this.validate();
-      }
-    });
-
     this.__datePicker = this._getDirectSlotChild('date-picker');
     this.__timePicker = this._getDirectSlotChild('time-picker');
 
@@ -428,18 +426,33 @@ class DateTimePicker extends FieldMixin(
 
     this.setAttribute('role', 'group');
 
-    this.ariaTarget = this;
-  }
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+    this._tooltipController.setShouldShow((target) => {
+      return target.__datePicker && !target.__datePicker.opened && target.__timePicker && !target.__timePicker.opened;
+    });
 
-  /** @private */
-  __filterElements(node) {
-    return node.nodeType === Node.ELEMENT_NODE;
+    this.ariaTarget = this;
   }
 
   focus() {
     this.__datePicker.focus();
   }
 
+  /**
+   * Override method inherited from `FocusMixin` to validate on blur.
+   * @param {boolean} focused
+   * @protected
+   * @override
+   */
+  _setFocused(focused) {
+    super._setFocused(focused);
+
+    if (!focused) {
+      this.validate();
+    }
+  }
+
   /**
    * Override method inherited from `FocusMixin` to not remove focused
    * state when focus moves between pickers or to the overlay.
@@ -509,6 +522,10 @@ class DateTimePicker extends FieldMixin(
           this.__timePicker = node;
         }
       });
+
+    if (this.value && (this.min || this.max)) {
+      this.validate();
+    }
   }
 
   /** @private */
@@ -756,7 +773,7 @@ class DateTimePicker extends FieldMixin(
    */
   __parseDateTime(str) {
     const [dateValue, timeValue] = str.split('T');
-    /* istanbul ignore if */
+    /* c8 ignore next 3 */
     if (!(dateValue && timeValue)) {
       return;
     }
@@ -928,6 +945,10 @@ class DateTimePicker extends FieldMixin(
       this.__datePicker.min = this.__formatDateISO(this.__minDateTime, this.__defaultDateMinMaxValue);
     }
     this.__updateTimePickerMinMax();
+
+    if (this.__datePicker && this.__timePicker && this.value) {
+      this.validate();
+    }
   }
 
   /** @private */
@@ -937,6 +958,10 @@ class DateTimePicker extends FieldMixin(
       this.__datePicker.max = this.__formatDateISO(this.__maxDateTime, this.__defaultDateMinMaxValue);
     }
     this.__updateTimePickerMinMax();
+
+    if (this.__datePicker && this.__timePicker && this.value) {
+      this.validate();
+    }
   }
 
   /** @private */

package/web-types.json

@@ -0,0 +1,440 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/date-time-picker",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-date-time-picker",
+          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`focused`           | Set when the element is focused           | :host\n`focus-ring`        | Set when the element is keyboard focused  | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "label",
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "error-message",
+              "description": "Error to show when the field is invalid.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "helper-text",
+              "description": "String used for the helper text.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "name",
+              "description": "The name of the control, which is submitted with the form data.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "value",
+              "description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "min",
+              "description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+              "value": {
+                "type": [
+                  "string",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "max",
+              "description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+              "value": {
+                "type": [
+                  "string",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "date-placeholder",
+              "description": "A placeholder string for the date field.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "time-placeholder",
+              "description": "A placeholder string for the time field.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "step",
+              "description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "initial-position",
+              "description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "show-week-numbers",
+              "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "auto-open-disabled",
+              "description": "Set to true to prevent the overlays from opening automatically.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "readonly",
+              "description": "Set to true to make this element read-only.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "label",
+                "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "invalid",
+                "description": "Set to true when the field is invalid.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "required",
+                "description": "Specifies that the user must fill in a value.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "errorMessage",
+                "description": "Error to show when the field is invalid.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "helperText",
+                "description": "String used for the helper text.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "name",
+                "description": "The name of the control, which is submitted with the form data.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "value",
+                "description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "min",
+                "description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+                "value": {
+                  "type": [
+                    "string",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "max",
+                "description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+                "value": {
+                  "type": [
+                    "string",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "datePlaceholder",
+                "description": "A placeholder string for the date field.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "timePlaceholder",
+                "description": "A placeholder string for the time field.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "step",
+                "description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "initialPosition",
+                "description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "showWeekNumbers",
+                "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "autoOpenDisabled",
+                "description": "Set to true to prevent the overlays from opening automatically.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "readonly",
+                "description": "Set to true to make this element read-only.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "autofocus",
+                "description": "Specify that this control should have input focus when the page loads.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-time-picker).",
+                "value": {
+                  "type": [
+                    "DateTimePickerI18n"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "validated",
+                "description": "Fired whenever the field is validated."
+              },
+              {
+                "name": "change",
+                "description": "Fired when the user commits a value change."
+              },
+              {
+                "name": "value-changed",
+                "description": "Fired when the `value` property changes."
+              },
+              {
+                "name": "invalid-changed",
+                "description": "Fired when the `invalid` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,188 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/date-time-picker",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-date-time-picker",
+          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`focused`           | Set when the element is focused           | :host\n`focus-ring`        | Set when the element is keyboard focused  | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?showWeekNumbers",
+              "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?autoOpenDisabled",
+              "description": "Set to true to prevent the overlays from opening automatically.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?readonly",
+              "description": "Set to true to make this element read-only.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".label",
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".errorMessage",
+              "description": "Error to show when the field is invalid.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".helperText",
+              "description": "String used for the helper text.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".name",
+              "description": "The name of the control, which is submitted with the form data.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".value",
+              "description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".min",
+              "description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".max",
+              "description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".datePlaceholder",
+              "description": "A placeholder string for the date field.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".timePlaceholder",
+              "description": "A placeholder string for the time field.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".step",
+              "description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".initialPosition",
+              "description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-time-picker).",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@validated",
+              "description": "Fired whenever the field is validated.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@change",
+              "description": "Fired when the user commits a value change.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@value-changed",
+              "description": "Fired when the `value` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@invalid-changed",
+              "description": "Fired when the `invalid` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}