@vaadin/date-time-picker 24.0.0-alpha2 → 24.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha2",
+  "version": "24.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha2",
-    "@vaadin/custom-field": "24.0.0-alpha2",
-    "@vaadin/date-picker": "24.0.0-alpha2",
-    "@vaadin/field-base": "24.0.0-alpha2",
-    "@vaadin/time-picker": "24.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha2"
+    "@vaadin/component-base": "24.0.0-alpha4",
+    "@vaadin/custom-field": "24.0.0-alpha4",
+    "@vaadin/date-picker": "24.0.0-alpha4",
+    "@vaadin/field-base": "24.0.0-alpha4",
+    "@vaadin/time-picker": "24.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0c16c01a6807e629a84f5a982793afecc1a7ced0"
+  "gitHead": "66be46e82c4d0a673859fbc9bdb1581dd89f360c"
 }

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

@@ -6,7 +6,6 @@
 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 type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import type { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
@@ -104,9 +103,7 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  * @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))))),
-) {
+declare class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**
    * The name of the control, which is submitted with the form data.
    */

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

@@ -5,12 +5,11 @@
  */
 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 { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { dateEquals, parseDate } from '@vaadin/date-picker/src/vaadin-date-picker-helper.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
@@ -44,6 +43,22 @@ const timePickerI18nDefaults = getPropertyFromPrototype(timePickerClass, 'i18n')
 const datePickerI18nProps = Object.keys(datePickerI18nDefaults);
 const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
 
+/**
+ * A controller to initialize slotted picker.
+ *
+ * @private
+ */
+class PickerSlotController extends SlotController {
+  constructor(host, type) {
+    super(host, `${type}-picker`, `vaadin-date-time-picker-${type}-picker`, {
+      initializer: (picker, host) => {
+        const prop = `__${type}Picker`;
+        host[prop] = picker;
+      },
+    });
+  }
+}
+
 /**
  * `<vaadin-date-time-picker>` is a Web Component providing a date time selection field.
  *
@@ -105,12 +120,9 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
  * @mixes ThemableMixin
  * @mixes FocusMixin
  * @mixes DisabledMixin
- * @mixes SlotMixin
  * @mixes FieldMixin
  */
-class DateTimePicker extends FieldMixin(
-  SlotMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(PolymerElement))))),
-) {
+class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(PolymerElement))))) {
   static get template() {
     return html`
       <style>
@@ -359,39 +371,22 @@ class DateTimePicker extends FieldMixin(
   static get observers() {
     return [
       '__selectedDateTimeChanged(__selectedDateTime)',
-      '__datePlaceholderChanged(datePlaceholder)',
-      '__timePlaceholderChanged(timePlaceholder)',
-      '__stepChanged(step)',
-      '__initialPositionChanged(initialPosition)',
-      '__showWeekNumbersChanged(showWeekNumbers)',
-      '__requiredChanged(required)',
-      '__invalidChanged(invalid)',
-      '__disabledChanged(disabled)',
-      '__readonlyChanged(readonly)',
-      '__i18nChanged(i18n.*)',
-      '__autoOpenDisabledChanged(autoOpenDisabled)',
+      '__datePlaceholderChanged(datePlaceholder, __datePicker)',
+      '__timePlaceholderChanged(timePlaceholder, __timePicker)',
+      '__stepChanged(step, __timePicker)',
+      '__initialPositionChanged(initialPosition, __datePicker)',
+      '__showWeekNumbersChanged(showWeekNumbers, __datePicker)',
+      '__requiredChanged(required, __datePicker, __timePicker)',
+      '__invalidChanged(invalid, __datePicker, __timePicker)',
+      '__disabledChanged(disabled, __datePicker, __timePicker)',
+      '__readonlyChanged(readonly, __datePicker, __timePicker)',
+      '__i18nChanged(i18n, __datePicker, __timePicker)',
+      '__autoOpenDisabledChanged(autoOpenDisabled, __datePicker, __timePicker)',
       '__themeChanged(_theme, __datePicker, __timePicker)',
       '__pickersChanged(__datePicker, __timePicker)',
     ];
   }
 
-  /** @protected */
-  get slots() {
-    return {
-      ...super.slots,
-      'date-picker': () => {
-        const element = document.createElement('vaadin-date-time-picker-date-picker');
-        element.__defaultPicker = true;
-        return element;
-      },
-      'time-picker': () => {
-        const element = document.createElement('vaadin-date-time-picker-time-picker');
-        element.__defaultPicker = true;
-        return element;
-      },
-    };
-  }
-
   constructor() {
     super();
     // Default value for "min" and "max" properties of vaadin-date-picker (for removing constraint)
@@ -403,18 +398,17 @@ class DateTimePicker extends FieldMixin(
 
     this.__changeEventHandler = this.__changeEventHandler.bind(this);
     this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this);
-
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      this.__onDomChange(info.addedNodes);
-    });
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    this.__datePicker = this._getDirectSlotChild('date-picker');
-    this.__timePicker = this._getDirectSlotChild('time-picker');
+    this._datePickerController = new PickerSlotController(this, 'date');
+    this.addController(this._datePickerController);
+
+    this._timePickerController = new PickerSlotController(this, 'time');
+    this.addController(this._timePickerController);
 
     if (this.autofocus && !this.disabled) {
       window.requestAnimationFrame(() => this.focus());
@@ -508,22 +502,9 @@ class DateTimePicker extends FieldMixin(
   }
 
   /** @private */
-  __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;
-        }
-      });
-
-    if (this.value && (this.min || this.max)) {
-      this.validate();
-    }
+  __isDefaultPicker(picker, type) {
+    const controller = this[`_${type}PickerController`];
+    return controller && picker === controller.defaultNode;
   }
 
   /** @private */
@@ -539,7 +520,7 @@ class DateTimePicker extends FieldMixin(
 
     this.__addInputListeners(newDatePicker);
 
-    if (newDatePicker.__defaultPicker) {
+    if (this.__isDefaultPicker(newDatePicker, 'date')) {
       // Synchronize properties to default date picker
       newDatePicker.placeholder = this.datePlaceholder;
       newDatePicker.invalid = this.invalid;
@@ -558,10 +539,6 @@ class DateTimePicker extends FieldMixin(
     // min and max need to be dynamically set depending on currently selected date instead of simple propagation
     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
     newDatePicker.validate = () => {};
@@ -581,7 +558,7 @@ class DateTimePicker extends FieldMixin(
 
     this.__addInputListeners(newTimePicker);
 
-    if (newTimePicker.__defaultPicker) {
+    if (this.__isDefaultPicker(newTimePicker, 'time')) {
       // Synchronize properties to default time picker
       newTimePicker.placeholder = this.timePlaceholder;
       newTimePicker.step = this.step;
@@ -597,10 +574,6 @@ class DateTimePicker extends FieldMixin(
     // 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();
-    newTimePicker.required = this.required;
-    newTimePicker.disabled = this.disabled;
-    newTimePicker.readonly = this.readonly;
-    newTimePicker.autoOpenDisabled = this.autoOpenDisabled;
 
     // Disable default internal validation for the component
     newTimePicker.validate = () => {};
@@ -634,88 +607,88 @@ class DateTimePicker extends FieldMixin(
   }
 
   /** @private */
-  __i18nChanged(changeRecord) {
-    if (this.__datePicker) {
-      this.__datePicker.set(changeRecord.path, changeRecord.value);
+  __i18nChanged(i18n, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.i18n = { ...datePicker.i18n, ...i18n };
     }
 
-    if (this.__timePicker) {
-      this.__timePicker.set(changeRecord.path, changeRecord.value);
+    if (timePicker) {
+      timePicker.i18n = { ...timePicker.i18n, ...i18n };
     }
   }
 
   /** @private */
-  __datePlaceholderChanged(datePlaceholder) {
-    if (this.__datePicker) {
-      this.__datePicker.placeholder = datePlaceholder;
+  __datePlaceholderChanged(datePlaceholder, datePicker) {
+    if (datePicker) {
+      datePicker.placeholder = datePlaceholder;
     }
   }
 
   /** @private */
-  __timePlaceholderChanged(timePlaceholder) {
-    if (this.__timePicker) {
-      this.__timePicker.placeholder = timePlaceholder;
+  __timePlaceholderChanged(timePlaceholder, timePicker) {
+    if (timePicker) {
+      timePicker.placeholder = timePlaceholder;
     }
   }
 
   /** @private */
-  __stepChanged(step) {
-    if (this.__timePicker && this.__timePicker.step !== step) {
-      this.__timePicker.step = step;
+  __stepChanged(step, timePicker) {
+    if (timePicker && timePicker.step !== step) {
+      timePicker.step = step;
     }
   }
 
   /** @private */
-  __initialPositionChanged(initialPosition) {
-    if (this.__datePicker) {
-      this.__datePicker.initialPosition = initialPosition;
+  __initialPositionChanged(initialPosition, datePicker) {
+    if (datePicker) {
+      datePicker.initialPosition = initialPosition;
     }
   }
 
   /** @private */
-  __showWeekNumbersChanged(showWeekNumbers) {
-    if (this.__datePicker) {
-      this.__datePicker.showWeekNumbers = showWeekNumbers;
+  __showWeekNumbersChanged(showWeekNumbers, datePicker) {
+    if (datePicker) {
+      datePicker.showWeekNumbers = showWeekNumbers;
     }
   }
 
   /** @private */
-  __invalidChanged(invalid) {
-    if (this.__datePicker) {
-      this.__datePicker.invalid = invalid;
+  __invalidChanged(invalid, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.invalid = invalid;
     }
-    if (this.__timePicker) {
-      this.__timePicker.invalid = invalid;
+    if (timePicker) {
+      timePicker.invalid = invalid;
     }
   }
 
   /** @private */
-  __requiredChanged(required) {
-    if (this.__datePicker) {
-      this.__datePicker.required = required;
+  __requiredChanged(required, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.required = required;
     }
-    if (this.__timePicker) {
-      this.__timePicker.required = required;
+    if (timePicker) {
+      timePicker.required = required;
     }
   }
 
   /** @private */
-  __disabledChanged(disabled) {
-    if (this.__datePicker) {
-      this.__datePicker.disabled = disabled;
+  __disabledChanged(disabled, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.disabled = disabled;
     }
-    if (this.__timePicker) {
-      this.__timePicker.disabled = disabled;
+    if (timePicker) {
+      timePicker.disabled = disabled;
     }
   }
 
   /** @private */
-  __readonlyChanged(readonly) {
-    if (this.__datePicker) {
-      this.__datePicker.readonly = readonly;
+  __readonlyChanged(readonly, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.readonly = readonly;
     }
-    if (this.__timePicker) {
-      this.__timePicker.readonly = readonly;
+    if (timePicker) {
+      timePicker.readonly = readonly;
     }
   }
 
@@ -1021,12 +994,12 @@ class DateTimePicker extends FieldMixin(
   }
 
   /** @private */
-  __autoOpenDisabledChanged(autoOpenDisabled) {
-    if (this.__datePicker) {
-      this.__datePicker.autoOpenDisabled = autoOpenDisabled;
+  __autoOpenDisabledChanged(autoOpenDisabled, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.autoOpenDisabled = autoOpenDisabled;
     }
-    if (this.__timePicker) {
-      this.__timePicker.autoOpenDisabled = autoOpenDisabled;
+    if (timePicker) {
+      timePicker.autoOpenDisabled = autoOpenDisabled;
     }
   }
 
@@ -1053,7 +1026,7 @@ class DateTimePicker extends FieldMixin(
       return;
     }
 
-    if (datePicker.__defaultPicker !== timePicker.__defaultPicker) {
+    if (this.__isDefaultPicker(datePicker, 'date') !== this.__isDefaultPicker(timePicker, 'time')) {
       // Both pickers are not replaced yet
       return;
     }
@@ -1064,6 +1037,10 @@ class DateTimePicker extends FieldMixin(
     } else if (this.value) {
       // The component has a value, update the new pickers values
       this.__selectedDateTimeChanged(this.__selectedDateTime);
+
+      if (this.min || this.max) {
+        this.validate();
+      }
     }
   }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha2",
+  "version": "24.0.0-alpha4",
   "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/24.0.0-alpha2/#/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/24.0.0-alpha2/#/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/24.0.0-alpha4/#/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/24.0.0-alpha4/#/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/24.0.0-alpha2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha2/#/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.0.0-alpha4/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha4/#/elements/vaadin-time-picker).",
                 "value": {
                   "type": [
                     "DateTimePickerI18n"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha2",
+  "version": "24.0.0-alpha4",
   "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/24.0.0-alpha2/#/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/24.0.0-alpha2/#/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/24.0.0-alpha4/#/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/24.0.0-alpha4/#/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/24.0.0-alpha2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha2/#/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.0.0-alpha4/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha4/#/elements/vaadin-time-picker).",
               "value": {
                 "kind": "expression"
               }