@vaadin/date-time-picker 24.8.0-alpha9 → 24.8.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,20 +37,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/custom-field": "24.8.0-alpha9",
-    "@vaadin/date-picker": "24.8.0-alpha9",
-    "@vaadin/field-base": "24.8.0-alpha9",
-    "@vaadin/time-picker": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "24.8.0-rc1",
+    "@vaadin/component-base": "24.8.0-rc1",
+    "@vaadin/custom-field": "24.8.0-rc1",
+    "@vaadin/date-picker": "24.8.0-rc1",
+    "@vaadin/field-base": "24.8.0-rc1",
+    "@vaadin/time-picker": "24.8.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.8.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "24.8.0-rc1",
+    "@vaadin/test-runner-commands": "24.8.0-rc1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "901d3eb9224983fd81e222e2fa5c7c207f9a6e46"
 }

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

@@ -305,6 +305,7 @@ export const DateTimePickerMixin = (superClass) =>
       // Default value for "max" property of vaadin-time-picker (for removing constraint)
       this.__defaultTimeMaxValue = '23:59:59.999';
 
+      this.__onGlobalClick = this.__onGlobalClick.bind(this);
       this.__changeEventHandler = this.__changeEventHandler.bind(this);
       this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this);
       this.__openedChangedEventHandler = this.__openedChangedEventHandler.bind(this);
@@ -315,12 +316,38 @@ export const DateTimePickerMixin = (superClass) =>
       return [this.__datePicker, this.__timePicker];
     }
 
+    /** @private */
+    get __filledPickers() {
+      return this.__pickers.filter((picker) => picker.value || picker.__unparsableValue);
+    }
+
     /** @private */
     get __formattedValue() {
       const values = this.__pickers.map((picker) => picker.value);
       return values.every(Boolean) ? values.join('T') : '';
     }
 
+    /**
+     * Values:
+     * - ""
+     * - "fooT"
+     * - "Tbar"
+     * - "fooTbar"
+     * - "T12:00"
+     * - "fooT12:00"
+     * - "2024-01-01T"
+     * - "2024-01-01Tbar"
+     *
+     * @private
+     */
+    get __unparsableValue() {
+      if (this.__filledPickers.length > 0 && !this.__pickers.every((picker) => picker.value)) {
+        return this.__pickers.map((picker) => picker.value || picker.__unparsableValue).join('T');
+      }
+
+      return '';
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -347,12 +374,49 @@ export const DateTimePickerMixin = (superClass) =>
       this.ariaTarget = this;
     }
 
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      document.addEventListener('click', this.__onGlobalClick, true);
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      document.removeEventListener('click', this.__onGlobalClick, true);
+    }
+
     focus() {
       if (this.__datePicker) {
         this.__datePicker.focus();
       }
     }
 
+    /** @private */
+    __onGlobalClick(event) {
+      const isOpened = this.__datePicker.opened || this.__timePicker.opened;
+      if (!isOpened) {
+        return;
+      }
+
+      const isOutsideClick = event.composedPath().every((node) => {
+        return ![
+          this.__datePicker,
+          this.__datePicker.$.overlay,
+          this.__timePicker,
+          this.__timePicker.$.comboBox.$.overlay,
+        ].includes(node);
+      });
+
+      if (isOutsideClick) {
+        this.__outsideClickInProgress = true;
+
+        setTimeout(() => {
+          this.__outsideClickInProgress = false;
+        });
+      }
+    }
+
     /**
      * Override method inherited from `FocusMixin` to validate on blur.
      * @param {boolean} focused
@@ -365,7 +429,7 @@ export const DateTimePickerMixin = (superClass) =>
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (!focused && document.hasFocus()) {
-        this._requestValidation();
+        this.__commitPendingValueChange();
       }
     }
 
@@ -379,12 +443,12 @@ export const DateTimePickerMixin = (superClass) =>
      */
     _shouldRemoveFocus(event) {
       const target = event.relatedTarget;
-      const overlayContent = this.__datePicker._overlayContent;
 
       if (
+        this.__datePicker.opened ||
+        this.__timePicker.opened ||
         this.__datePicker.contains(target) ||
-        this.__timePicker.contains(target) ||
-        (overlayContent && overlayContent.contains(target))
+        this.__timePicker.contains(target)
       ) {
         return false;
       }
@@ -408,22 +472,35 @@ export const DateTimePickerMixin = (superClass) =>
     __changeEventHandler(event) {
       event.stopPropagation();
 
-      if (this.__dispatchChangeForValue === this.value) {
-        this._requestValidation();
-        this.__dispatchChange();
+      const isAlreadyInvalid = this.invalid;
+      const filledPickers = this.__filledPickers;
+      if (filledPickers.length === 1 && filledPickers[0].checkValidity() && !isAlreadyInvalid) {
+        // Skip if (a) only one picker is filled, (b) its value is valid by itself, and (c) the user
+        // is still interacting with the field. This is to give the user a chance to finish the input
+        // before giving him feedback. However, if the field is already in the invalid state due to
+        // a previous error, proceed to committing the value to get the error message updated.
+        return;
+      }
+
+      if (this.__hasPendingValueChange) {
+        this.__commitPendingValueChange();
       }
-      this.__dispatchChangeForValue = undefined;
     }
 
     /** @private */
     __openedChangedEventHandler() {
       const opened = this.__datePicker.opened || this.__timePicker.opened;
       this.style.pointerEvents = opened ? 'auto' : '';
+
+      if (!opened && this.__outsideClickInProgress) {
+        this.__commitPendingValueChange();
+      }
     }
 
     /** @private */
     __addInputListeners(node) {
       node.addEventListener('change', this.__changeEventHandler);
+      node.addEventListener('unparsable-change', this.__changeEventHandler);
       node.addEventListener('value-changed', this.__valueChangedEventHandler);
       node.addEventListener('opened-changed', this.__openedChangedEventHandler);
     }
@@ -431,6 +508,7 @@ export const DateTimePickerMixin = (superClass) =>
     /** @private */
     __removeInputListeners(node) {
       node.removeEventListener('change', this.__changeEventHandler);
+      node.removeEventListener('unparsable-change', this.__changeEventHandler);
       node.removeEventListener('value-changed', this.__valueChangedEventHandler);
       node.removeEventListener('opened-changed', this.__openedChangedEventHandler);
     }
@@ -724,8 +802,27 @@ export const DateTimePickerMixin = (superClass) =>
      */
     checkValidity() {
       const hasInvalidPickers = this.__pickers.some((picker) => !picker.checkValidity());
+      const hasOnlyOneFilledPicker = this.__filledPickers.length === 1;
       const hasEmptyRequiredPickers = this.required && this.__pickers.some((picker) => !picker.value);
-      return !hasInvalidPickers && !hasEmptyRequiredPickers;
+      return !hasInvalidPickers && !hasEmptyRequiredPickers && !hasOnlyOneFilledPicker;
+    }
+
+    /** @private */
+    __commitPendingValueChange() {
+      this._requestValidation();
+      if (this.__committedValue !== this.value) {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      } else if (this.__committedUnparsableValue !== this.__unparsableValue) {
+        this.dispatchEvent(new CustomEvent('unparsable-change'));
+      }
+
+      this.__committedValue = this.value;
+      this.__committedUnparsableValue = this.__unparsableValue;
+    }
+
+    /** @private */
+    get __hasPendingValueChange() {
+      return this.__committedValue !== this.value || this.__committedUnparsableValue !== this.__unparsableValue;
     }
 
     /**
@@ -769,8 +866,9 @@ export const DateTimePickerMixin = (superClass) =>
     __valueChanged(value, oldValue) {
       this.__handleDateTimeChange('value', '__selectedDateTime', value, oldValue);
 
-      if (oldValue !== undefined) {
-        this.__dispatchChangeForValue = value;
+      if (!this.__keepCommittedValue) {
+        this.__committedValue = value;
+        this.__committedUnparsableValue = '';
       }
 
       this.toggleAttribute('has-value', !!value);
@@ -839,8 +937,12 @@ export const DateTimePickerMixin = (superClass) =>
       }
 
       this.__ignoreInputValueChange = true;
+      this.__keepCommittedValue = true;
+
       this.__updateTimePickerMinMax();
       this.value = this.__formattedValue;
+
+      this.__keepCommittedValue = false;
       this.__ignoreInputValueChange = false;
     }
 

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

@@ -93,7 +93,30 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * ### Change events
+ *
+ * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+ * the component can fire either a `change` event or an `unparsable-change` event:
+ *
+ * Value change             | Event
+ * :------------------------|:------------------
+ * empty => parsable        | change
+ * empty => unparsable      | unparsable-change
+ * parsable => empty        | change
+ * parsable => parsable     | change
+ * parsable => unparsable   | change
+ * unparsable => empty      | unparsable-change
+ * unparsable => parsable   | change
+ * unparsable => unparsable | unparsable-change
+ * incomplete => empty      | unparsable-change
+ * incomplete => parsable   | change
+ * incomplete => unparsable | unparsable-change
+ * empty => incomplete      | unparsable-change
+ * parsable => incomplete   | change
+ * unparsable => incomplete | unparsable-change
+ *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} unparsable-change - Fired when the user commits an unparsable or incomplete value change and there is no change event.
  * @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.

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

@@ -64,7 +64,30 @@ registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * ### Change events
+ *
+ * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+ * the component can fire either a `change` event or an `unparsable-change` event:
+ *
+ * Value change             | Event
+ * :------------------------|:------------------
+ * empty => parsable        | change
+ * empty => unparsable      | unparsable-change
+ * parsable => empty        | change
+ * parsable => parsable     | change
+ * parsable => unparsable   | change
+ * unparsable => empty      | unparsable-change
+ * unparsable => parsable   | change
+ * unparsable => unparsable | unparsable-change
+ * incomplete => empty      | unparsable-change
+ * incomplete => parsable   | change
+ * incomplete => unparsable | unparsable-change
+ * empty => incomplete      | unparsable-change
+ * parsable => incomplete   | change
+ * unparsable => incomplete | unparsable-change
+ *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} unparsable-change - Fired when the user commits an unparsable or incomplete value change and there is no change event.
  * @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.

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-rc1",
   "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\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
           "attributes": [
             {
               "name": "disabled",
@@ -235,7 +235,7 @@
             },
             {
               "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker#property-overlayClass)",
+              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-time-picker#property-overlayClass)",
               "value": {
                 "type": [
                   "string",
@@ -483,7 +483,7 @@
               },
               {
                 "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/24.8.0-alpha9/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).",
+                "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/24.8.0-rc1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-time-picker).",
                 "value": {
                   "type": [
                     "DateTimePickerI18n"
@@ -492,7 +492,7 @@
               },
               {
                 "name": "overlayClass",
-                "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker#property-overlayClass)",
+                "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-time-picker#property-overlayClass)",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "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\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
           "extension": true,
           "attributes": [
             {
@@ -168,14 +168,14 @@
             },
             {
               "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/24.8.0-alpha9/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).",
+              "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/24.8.0-rc1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-time-picker).",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker#property-overlayClass)",
+              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-time-picker#property-overlayClass)",
               "value": {
                 "kind": "expression"
               }

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

@@ -1 +0,0 @@
-export * from './vaadin-date-time-picker.js';