@vaadin/date-time-picker 23.2.0 → 23.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.2.0",
-    "@vaadin/custom-field": "^23.2.0",
-    "@vaadin/date-picker": "^23.2.0",
-    "@vaadin/field-base": "^23.2.0",
-    "@vaadin/time-picker": "^23.2.0",
-    "@vaadin/vaadin-lumo-styles": "^23.2.0",
-    "@vaadin/vaadin-material-styles": "^23.2.0",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0"
+    "@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",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

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';
@@ -156,6 +157,8 @@ class DateTimePicker extends FieldMixin(
           <slot name="error-message"></slot>
         </div>
       </div>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -414,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');
 
@@ -429,6 +426,12 @@ class DateTimePicker extends FieldMixin(
 
     this.setAttribute('role', 'group');
 
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+    this._tooltipController.setShouldShow((target) => {
+      return target.__datePicker && !target.__datePicker.opened && target.__timePicker && !target.__timePicker.opened;
+    });
+
     this.ariaTarget = this;
   }
 
@@ -436,6 +439,20 @@ class DateTimePicker extends FieldMixin(
     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.

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "23.2.0",
+  "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.2.0/#/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.2.0/#/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.",
+          "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",
@@ -406,7 +406,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/23.2.0/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/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/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"
@@ -426,6 +426,10 @@
               {
                 "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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "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\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.2.0/#/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.2.0/#/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.",
+          "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": [
             {
@@ -147,7 +147,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/23.2.0/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/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/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"
               }
@@ -172,6 +172,13 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": "@invalid-changed",
+              "description": "Fired when the `invalid` property changes.",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         }