@vaadin/date-time-picker 22.0.0-beta1 → 22.0.1

package/README.md

@@ -1,54 +1,52 @@
-# <vaadin-date-time-picker>
+# @vaadin/date-time-picker
 
-[<vaadin-date-time-picker>](https://vaadin.com/components/vaadin-date-time-picker) is a Web Component providing a date and time selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
+An input field web component for selecting both a date and a time.
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-date-time-picker/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-date-time-picker/html-api)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/date-time-picker)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/date-time-picker)](https://www.npmjs.com/package/@vaadin/date-time-picker)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-time-picker)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-date-time-picker></vaadin-date-time-picker>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-date-time-picker/master/screenshot.png" width="200" alt="Screenshot of vaadin-date-time-picker">](https://vaadin.com/components/vaadin-date-time-picker)
-
 ## Installation
 
-Install `vaadin-date-time-picker`:
+Install the component:
 
 ```sh
-npm i @vaadin/date-time-picker --save
+npm i @vaadin/date-time-picker
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/date-time-picker/vaadin-date-time-picker.js';
+import '@vaadin/date-time-picker';
 ```
 
-## Getting started
-
-Vaadin components use the Lumo theme by default.
-
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+## Themes
 
-## Entry points
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), 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.
 
-- The component with the Lumo theme:
+To use the Material theme, import the component from the `theme/material` folder:
 
-  `theme/lumo/vaadin-date-time-picker.js`
+```js
+import '@vaadin/date-time-picker/theme/material/vaadin-date-time-picker.js';
+```
 
-- The component with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-date-time-picker.js`
+```js
+import '@vaadin/date-time-picker/theme/lumo/vaadin-date-time-picker.js';
+```
 
-- Alias for `theme/lumo/vaadin-date-time-picker.js`:
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-date-time-picker.js`
+```js
+import '@vaadin/date-time-picker/src/vaadin-date-time-picker.js';
+```
 
 ## Contributing
 
@@ -58,4 +56,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "22.0.0-beta1",
+  "version": "22.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -33,19 +33,19 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-beta1",
-    "@vaadin/custom-field": "22.0.0-beta1",
-    "@vaadin/date-picker": "22.0.0-beta1",
-    "@vaadin/field-base": "22.0.0-beta1",
-    "@vaadin/time-picker": "22.0.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
+    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/custom-field": "^22.0.1",
+    "@vaadin/date-picker": "^22.0.1",
+    "@vaadin/field-base": "^22.0.1",
+    "@vaadin/time-picker": "^22.0.1",
+    "@vaadin/vaadin-lumo-styles": "^22.0.1",
+    "@vaadin/vaadin-material-styles": "^22.0.1",
+    "@vaadin/vaadin-themable-mixin": "^22.0.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
 }

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

@@ -3,11 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
-import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

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

@@ -3,17 +3,17 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import './vaadin-date-time-picker-date-picker.js';
+import './vaadin-date-time-picker-time-picker.js';
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.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';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { dateEquals } from '@vaadin/date-picker/src/vaadin-date-picker-helper.js';
-import './vaadin-date-time-picker-date-picker.js';
-import './vaadin-date-time-picker-time-picker.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-date-time-picker' });
 
@@ -328,6 +328,24 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
       i18n: {
         type: Object,
         value: () => Object.assign({}, datePickerI18nDefaults, timePickerI18nDefaults)
+      },
+
+      /**
+       * The current slotted date picker.
+       * @private
+       */
+      __datePicker: {
+        type: HTMLElement,
+        observer: '__datePickerChanged'
+      },
+
+      /**
+       * The current slotted time picker.
+       * @private
+       */
+      __timePicker: {
+        type: HTMLElement,
+        observer: '__timePickerChanged'
       }
     };
   }
@@ -379,6 +397,10 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
 
     this.__changeEventHandler = this.__changeEventHandler.bind(this);
     this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this);
+
+    this._observer = new FlattenedNodesObserver(this, (info) => {
+      this.__onDomChange(info.addedNodes);
+    });
   }
 
   /** @protected */
@@ -391,11 +413,8 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
       }
     });
 
-    this.__datePickerChanged();
-    this.__timePickerChanged();
-
-    this.$.dateSlot.addEventListener('slotchange', this.__datePickerChanged.bind(this));
-    this.$.timeSlot.addEventListener('slotchange', this.__timePickerChanged.bind(this));
+    this.__datePicker = this._getDirectSlotChild('date-picker');
+    this.__timePicker = this._getDirectSlotChild('time-picker');
 
     if (this.autofocus && !this.disabled) {
       window.requestAnimationFrame(() => this.focus());
@@ -406,14 +425,6 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
     this.ariaTarget = this;
   }
 
-  /**
-   * Attribute used by `FieldMixin` to set accessible name.
-   * @protected
-   */
-  get _ariaAttr() {
-    return 'aria-labelledby';
-  }
-
   /** @private */
   __filterElements(node) {
     return node.nodeType === Node.ELEMENT_NODE;
@@ -458,87 +469,98 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
   }
 
   /** @private */
-  __datePickerChanged() {
-    const datePicker = this._getDirectSlotChild('date-picker');
-    if (this.__datePicker === datePicker || !datePicker) {
+  __onDomChange(addedNodes) {
+    addedNodes
+      .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+      .forEach((node) => {
+        const slotAttributeValue = node.getAttribute('slot');
+
+        if (slotAttributeValue === 'date-picker') {
+          this.__datePicker = node;
+        } else if (slotAttributeValue === 'time-picker') {
+          this.__timePicker = node;
+        }
+      });
+  }
+
+  /** @private */
+  __datePickerChanged(newDatePicker, existingDatePicker) {
+    if (!newDatePicker) {
       return;
     }
-    if (this.__datePicker) {
+    if (existingDatePicker) {
       // Remove an existing date picker
-      this.__removeInputListeners(this.__datePicker);
-      this.__datePicker.remove();
+      this.__removeInputListeners(existingDatePicker);
+      existingDatePicker.remove();
     }
 
-    this.__addInputListeners(datePicker);
-    this.__datePicker = datePicker;
+    this.__addInputListeners(newDatePicker);
 
-    if (datePicker.__defaultPicker) {
+    if (newDatePicker.__defaultPicker) {
       // Synchronize properties to default date picker
-      datePicker.placeholder = this.datePlaceholder;
-      datePicker.invalid = this.invalid;
-      datePicker.initialPosition = this.initialPosition;
-      datePicker.showWeekNumbers = this.showWeekNumbers;
-      this.__syncI18n(datePicker, this, datePickerI18nProps);
+      newDatePicker.placeholder = this.datePlaceholder;
+      newDatePicker.invalid = this.invalid;
+      newDatePicker.initialPosition = this.initialPosition;
+      newDatePicker.showWeekNumbers = this.showWeekNumbers;
+      this.__syncI18n(newDatePicker, this, datePickerI18nProps);
     } else {
       // Synchronize properties from slotted date picker
-      this.datePlaceholder = datePicker.placeholder;
-      this.initialPosition = datePicker.initialPosition;
-      this.showWeekNumbers = datePicker.showWeekNumbers;
-      this.__syncI18n(this, datePicker, datePickerI18nProps);
+      this.datePlaceholder = newDatePicker.placeholder;
+      this.initialPosition = newDatePicker.initialPosition;
+      this.showWeekNumbers = newDatePicker.showWeekNumbers;
+      this.__syncI18n(this, newDatePicker, datePickerI18nProps);
     }
 
     // min and max are always synchronized from date time picker (host) to inner fields because time picker
     // min and max need to be dynamically set depending on currently selected date instead of simple propagation
-    datePicker.min = this.__formatDateISO(this.__minDateTime, this.__defaultDateMinMaxValue);
-    datePicker.max = this.__formatDateISO(this.__maxDateTime, this.__defaultDateMinMaxValue);
-    datePicker.required = this.required;
-    datePicker.disabled = this.disabled;
-    datePicker.readonly = this.readonly;
-    datePicker.autoOpenDisabled = this.autoOpenDisabled;
+    newDatePicker.min = this.__formatDateISO(this.__minDateTime, this.__defaultDateMinMaxValue);
+    newDatePicker.max = this.__formatDateISO(this.__maxDateTime, this.__defaultDateMinMaxValue);
+    newDatePicker.required = this.required;
+    newDatePicker.disabled = this.disabled;
+    newDatePicker.readonly = this.readonly;
+    newDatePicker.autoOpenDisabled = this.autoOpenDisabled;
 
     // Disable default internal validation for the component
-    datePicker.validate = () => {};
-    datePicker._validateInput = () => {};
+    newDatePicker.validate = () => {};
+    newDatePicker._validateInput = () => {};
   }
 
   /** @private */
-  __timePickerChanged() {
-    const timePicker = this._getDirectSlotChild('time-picker');
-    if (this.__timePicker === timePicker || !timePicker) {
+  __timePickerChanged(newTimePicker, existingTimePicker) {
+    if (!newTimePicker) {
       return;
     }
-    if (this.__timePicker) {
+    if (existingTimePicker) {
       // Remove an existing time picker
-      this.__removeInputListeners(this.__timePicker);
-      this.__timePicker.remove();
+      this.__removeInputListeners(existingTimePicker);
+      existingTimePicker.remove();
     }
 
-    this.__addInputListeners(timePicker);
-    this.__timePicker = timePicker;
+    this.__addInputListeners(newTimePicker);
 
-    if (timePicker.__defaultPicker) {
+    if (newTimePicker.__defaultPicker) {
       // Synchronize properties to default time picker
-      timePicker.placeholder = this.timePlaceholder;
-      timePicker.step = this.step;
-      timePicker.invalid = this.invalid;
-      this.__syncI18n(timePicker, this, timePickerI18nProps);
+      newTimePicker.placeholder = this.timePlaceholder;
+      newTimePicker.step = this.step;
+      newTimePicker.invalid = this.invalid;
+      this.__syncI18n(newTimePicker, this, timePickerI18nProps);
     } else {
       // Synchronize properties from slotted time picker
-      this.timePlaceholder = timePicker.placeholder;
-      this.step = timePicker.step;
-      this.__syncI18n(this, timePicker, timePickerI18nProps);
+      this.timePlaceholder = newTimePicker.placeholder;
+      this.step = newTimePicker.step;
+      this.__syncI18n(this, newTimePicker, timePickerI18nProps);
     }
 
     // min and max are always synchronized from parent to slotted because time picker min and max
     // need to be dynamically set depending on currently selected date instead of simple propagation
     this.__updateTimePickerMinMax();
-    timePicker.required = this.required;
-    timePicker.disabled = this.disabled;
-    timePicker.readonly = this.readonly;
-    timePicker.autoOpenDisabled = this.autoOpenDisabled;
+    newTimePicker.required = this.required;
+    newTimePicker.disabled = this.disabled;
+    newTimePicker.readonly = this.readonly;
+    newTimePicker.autoOpenDisabled = this.autoOpenDisabled;
 
     // Disable default internal validation for the component
-    timePicker.validate = () => {};
+    newTimePicker.validate = () => {};
   }
 
   /** @private */
@@ -570,12 +592,10 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
 
   /** @private */
   __i18nChanged(changeRecord) {
-    this.__datePickerChanged();
     if (this.__datePicker) {
       this.__datePicker.set(changeRecord.path, changeRecord.value);
     }
 
-    this.__timePickerChanged();
     if (this.__timePicker) {
       this.__timePicker.set(changeRecord.path, changeRecord.value);
     }

package/theme/lumo/vaadin-date-time-picker-styles.js

@@ -1,9 +1,9 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
-import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
-import { customField } from '@vaadin/custom-field/theme/lumo/vaadin-custom-field-styles.js';
 import '@vaadin/date-picker/theme/lumo/vaadin-date-picker.js';
 import '@vaadin/time-picker/theme/lumo/vaadin-time-picker.js';
+import { customField } from '@vaadin/custom-field/theme/lumo/vaadin-custom-field-styles.js';
+import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
+import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles('vaadin-date-time-picker', [requiredField, helper, customField], {
   moduleId: 'lumo-date-time-picker'

package/theme/material/vaadin-date-time-picker-styles.js

@@ -1,9 +1,9 @@
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
-import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
-import { customField } from '@vaadin/custom-field/theme/material/vaadin-custom-field-styles.js';
 import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
 import '@vaadin/time-picker/theme/material/vaadin-time-picker.js';
+import { customField } from '@vaadin/custom-field/theme/material/vaadin-custom-field-styles.js';
+import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
+import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles('vaadin-date-time-picker', [requiredField, helper, customField], {
   moduleId: 'material-date-time-picker'