@vaadin/date-picker 23.3.0-alpha5 → 24.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.3.0-alpha5",
+  "version": "24.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "23.3.0-alpha5",
-    "@vaadin/component-base": "23.3.0-alpha5",
-    "@vaadin/field-base": "23.3.0-alpha5",
-    "@vaadin/input-container": "23.3.0-alpha5",
-    "@vaadin/overlay": "23.3.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha5",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha5"
+    "@vaadin/button": "24.0.0-alpha2",
+    "@vaadin/component-base": "24.0.0-alpha2",
+    "@vaadin/field-base": "24.0.0-alpha2",
+    "@vaadin/input-container": "24.0.0-alpha2",
+    "@vaadin/overlay": "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"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0b6fdcf444683e97e3efb433d603e1274d5bcd66"
+  "gitHead": "0c16c01a6807e629a84f5a982793afecc1a7ced0"
 }

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

@@ -42,6 +42,13 @@ export { extractDateParts };
  */
 declare function extractDateParts(date: Date): { day: number; month: number; year: number };
 
+/**
+ * Get difference in months between today and given months value.
+ */
+declare function dateAfterXMonths(months: number): number;
+
+export { dateAfterXMonths };
+
 /**
  * Calculate the year of the date based on the provided reference date
  * Gets a two-digit year and returns a full year.

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

@@ -104,6 +104,20 @@ export function extractDateParts(date) {
   };
 }
 
+/**
+ * Get difference in months between today and given months value.
+ *
+ * @param {number} months
+ * @return {number}
+ */
+export function dateAfterXMonths(months) {
+  const today = new Date();
+  const result = new Date(today);
+  result.setDate(1);
+  result.setMonth(parseInt(months) + today.getMonth());
+  return result;
+}
+
 /**
  * Calculate the year of the date based on the provided reference date.
  * Gets a two-digit year and returns a full year.

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

@@ -66,12 +66,6 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker
  *
  * ### Styling
  *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `overlay-content` | The overlay element | vaadin-date-picker-light
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * In addition to `<vaadin-date-picker-light>` itself, the following

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

@@ -28,12 +28,6 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  *
  * ### Styling
  *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `overlay-content` | The overlay element | vaadin-date-picker-light
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * In addition to `<vaadin-date-picker-light>` itself, the following
@@ -73,29 +67,13 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
         id="overlay"
         fullscreen$="[[_fullscreen]]"
         opened="{{opened}}"
+        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
-        theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
-      >
-        <template>
-          <vaadin-date-picker-overlay-content
-            id="overlay-content"
-            i18n="[[i18n]]"
-            fullscreen$="[[_fullscreen]]"
-            label="[[label]]"
-            selected-date="[[_selectedDate]]"
-            focused-date="{{_focusedDate}}"
-            show-week-numbers="[[showWeekNumbers]]"
-            min-date="[[_minDate]]"
-            max-date="[[_maxDate]]"
-            part="overlay-content"
-            theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
-          >
-          </vaadin-date-picker-overlay-content>
-        </template>
-      </vaadin-date-picker-overlay>
+        theme$="[[_theme]]"
+      ></vaadin-date-picker-overlay>
     `;
   }
 
@@ -115,29 +93,13 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
         type: String,
         value: 'value',
       },
-
-      /**
-       * @type {boolean}
-       * @protected
-       */
-      _overlayInitialized: {
-        type: Boolean,
-        value: true,
-      },
     };
   }
 
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._initOverlay();
-  }
-
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    const cssSelector = 'vaadin-text-field,iron-input,paper-input,.paper-input-input,.input';
+    const cssSelector = 'vaadin-text-field,.input';
     this._setInputElement(this.querySelector(cssSelector));
     this._setFocusElement(this.inputElement);
   }

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

@@ -22,8 +22,6 @@ export interface DatePickerI18n {
   weekdays: string[];
   weekdaysShort: string[];
   firstDayOfWeek: number;
-  week: string;
-  calendar: string;
   today: string;
   cancel: string;
   referenceDate: string;
@@ -122,13 +120,6 @@ export declare class DatePickerMixinClass {
    *   // (0 = Sunday, 1 = Monday, etc.).
    *   firstDayOfWeek: 0,
    *
-   *   // Used in screen reader announcements along with week
-   *   // numbers, if they are displayed.
-   *   week: 'Week',
-   *
-   *   // Translation of the Calendar icon button title.
-   *   calendar: 'Calendar',
-   *
    *   // Translation of the Today shortcut button text.
    *   today: 'Today',
    *

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

@@ -91,6 +91,7 @@ export const DatePickerMixin = (subclass) =>
          */
         showWeekNumbers: {
           type: Boolean,
+          value: false,
         },
 
         /**
@@ -152,13 +153,6 @@ export const DatePickerMixin = (subclass) =>
          *   // (0 = Sunday, 1 = Monday, etc.).
          *   firstDayOfWeek: 0,
          *
-         *   // Used in screen reader announcements along with week
-         *   // numbers, if they are displayed.
-         *   week: 'Week',
-         *
-         *   // Translation of the Calendar icon button title.
-         *   calendar: 'Calendar',
-         *
          *   // Translation of the Today shortcut button text.
          *   today: 'Today',
          *
@@ -224,8 +218,6 @@ export const DatePickerMixin = (subclass) =>
               weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
               weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
               firstDayOfWeek: 0,
-              week: 'Week',
-              calendar: 'Calendar',
               today: 'Today',
               cancel: 'Cancel',
               referenceDate: '',
@@ -327,8 +319,8 @@ export const DatePickerMixin = (subclass) =>
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
-        /** @protected */
-        _overlayInitialized: Boolean,
+        /** @private */
+        _overlayContent: Object,
       };
     }
 
@@ -336,6 +328,9 @@ export const DatePickerMixin = (subclass) =>
       return [
         '_selectedDateChanged(_selectedDate, i18n.formatDate)',
         '_focusedDateChanged(_focusedDate, i18n.formatDate)',
+        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers)',
+        '__updateOverlayContentTheme(_overlayContent, _theme)',
+        '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
     }
 
@@ -380,6 +375,7 @@ export const DatePickerMixin = (subclass) =>
 
       this._boundOnClick = this._onClick.bind(this);
       this._boundOnScroll = this._onScroll.bind(this);
+      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
     /**
@@ -430,6 +426,11 @@ export const DatePickerMixin = (subclass) =>
       );
 
       this.addController(new VirtualKeyboardController(this));
+
+      this.$.overlay.renderer = this._boundOverlayRenderer;
+
+      this.addEventListener('mousedown', () => this.__bringToFront());
+      this.addEventListener('touchstart', () => this.__bringToFront());
     }
 
     /** @protected */
@@ -471,33 +472,29 @@ export const DatePickerMixin = (subclass) =>
      * Closes the dropdown.
      */
     close() {
-      if (this._overlayInitialized || this.autoOpenDisabled) {
-        this.$.overlay.close();
-      }
+      this.$.overlay.close();
     }
 
-    /** @protected */
-    _initOverlay() {
-      this.$.overlay.removeAttribute('disable-upgrade');
-      this._overlayInitialized = true;
+    /** @private */
+    _overlayRenderer(root) {
+      if (root.firstChild) {
+        return;
+      }
 
-      this.$.overlay.addEventListener('opened-changed', (e) => {
-        this.opened = e.detail.value;
-      });
+      // Create and store document content element
+      const content = document.createElement('vaadin-date-picker-overlay-content');
+      root.appendChild(content);
 
-      this.$.overlay.addEventListener('vaadin-overlay-escape-press', () => {
-        this._focusedDate = this._selectedDate;
-        this._close();
-      });
+      this._overlayContent = content;
 
-      this._overlayContent.addEventListener('close', () => {
+      content.addEventListener('close', () => {
         this._close();
       });
 
-      this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
+      content.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
       // User confirmed selected date by clicking the calendar.
-      this._overlayContent.addEventListener('date-tap', (e) => {
+      content.addEventListener('date-tap', (e) => {
         this.__userConfirmedDate = true;
 
         this._selectDate(e.detail.date);
@@ -506,7 +503,7 @@ export const DatePickerMixin = (subclass) =>
       });
 
       // User confirmed selected date by pressing Enter or Today.
-      this._overlayContent.addEventListener('date-selected', (e) => {
+      content.addEventListener('date-selected', (e) => {
         this.__userConfirmedDate = true;
 
         this._selectDate(e.detail.date);
@@ -514,14 +511,16 @@ export const DatePickerMixin = (subclass) =>
 
       // Set focus-ring attribute when moving focus to the overlay
       // by pressing Tab or arrow key, after opening it on click.
-      this._overlayContent.addEventListener('focusin', () => {
+      content.addEventListener('focusin', () => {
         if (this._keyboardActive) {
           this._setFocused(true);
         }
       });
 
-      this.addEventListener('mousedown', () => this.__bringToFront());
-      this.addEventListener('touchstart', () => this.__bringToFront());
+      // Two-way data binding for `focusedDate` property
+      content.addEventListener('focused-date-changed', (e) => {
+        this._focusedDate = e.detail.value;
+      });
     }
 
     /**
@@ -680,12 +679,6 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _openedChanged(opened) {
-      if (opened && !this._overlayInitialized) {
-        this._initOverlay();
-      }
-      if (this._overlayInitialized) {
-        this.$.overlay.opened = opened;
-      }
       if (this.inputElement) {
         this.inputElement.setAttribute('aria-expanded', opened);
       }
@@ -721,13 +714,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    __getOverlayTheme(theme, overlayInitialized) {
-      if (overlayInitialized) {
-        return theme;
-      }
-    }
-
     /**
      * Override the value observer from `InputMixin` to implement custom
      * handling of the `value` property. The date-picker doesn't forward
@@ -766,6 +752,46 @@ export const DatePickerMixin = (subclass) =>
       this._toggleHasValue(this._hasValue);
     }
 
+    /** @private */
+    // eslint-disable-next-line max-params
+    __updateOverlayContent(overlayContent, i18n, label, minDate, maxDate, focusedDate, selectedDate, showWeekNumbers) {
+      if (overlayContent) {
+        overlayContent.setProperties({
+          i18n,
+          label,
+          minDate,
+          maxDate,
+          focusedDate,
+          selectedDate,
+          showWeekNumbers,
+        });
+      }
+    }
+
+    /** @private */
+    __updateOverlayContentTheme(overlayContent, theme) {
+      if (overlayContent) {
+        if (theme) {
+          overlayContent.setAttribute('theme', theme);
+        } else {
+          overlayContent.removeAttribute('theme');
+        }
+      }
+    }
+
+    /** @private */
+    __updateOverlayContentFullScreen(overlayContent, fullscreen) {
+      if (overlayContent) {
+        overlayContent.toggleAttribute('fullscreen', fullscreen);
+      }
+    }
+
+    /** @protected */
+    _onOverlayEscapePress() {
+      this._focusedDate = this._selectedDate;
+      this._close();
+    }
+
     /** @protected */
     _onOverlayOpened() {
       const parsedInitialPosition = parseDate(this.initialPosition);
@@ -1000,7 +1026,7 @@ export const DatePickerMixin = (subclass) =>
       const parsedDate = this._getParsedDate();
       const isValidDate = this._isValidDate(parsedDate);
       if (this.opened) {
-        if (this._overlayInitialized && this._overlayContent.focusedDate && isValidDate) {
+        if (this._overlayContent && this._overlayContent.focusedDate && isValidDate) {
           this._selectDate(this._overlayContent.focusedDate);
         }
         this.close();
@@ -1088,11 +1114,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    get _overlayContent() {
-      return this.$.overlay.content.querySelector('#overlay-content');
-    }
-
     /** @private */
     __computeMinOrMaxDate(dateString) {
       return parseDate(dateString);

package/src/vaadin-date-picker-month-scroller.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { dateAfterXMonths } from './vaadin-date-picker-helper.js';
+import { InfiniteScroller } from './vaadin-infinite-scroller.js';
+
+const stylesTemplate = html`
+  <style>
+    :host {
+      --vaadin-infinite-scroller-item-height: 270px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+    }
+  </style>
+`;
+
+let memoizedTemplate;
+
+/**
+ * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+ *
+ * @extends InfiniteScroller
+ * @private
+ */
+class DatePickerMonthScroller extends InfiniteScroller {
+  static get is() {
+    return 'vaadin-date-picker-month-scroller';
+  }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      memoizedTemplate.content.appendChild(stylesTemplate.content.cloneNode(true));
+    }
+
+    return memoizedTemplate;
+  }
+
+  static get properties() {
+    return {
+      bufferSize: {
+        type: Number,
+        value: 3,
+      },
+    };
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _createElement() {
+    return document.createElement('vaadin-month-calendar');
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {number} index
+   * @protected
+   * @override
+   */
+  _updateElement(element, index) {
+    element.month = dateAfterXMonths(index);
+  }
+}
+
+customElements.define(DatePickerMonthScroller.is, DatePickerMonthScroller);