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

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

@@ -0,0 +1,104 @@
+/**
+ * @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 { InfiniteScroller } from './vaadin-infinite-scroller.js';
+
+const stylesTemplate = html`
+  <style>
+    :host {
+      --vaadin-infinite-scroller-item-height: 80px;
+      width: 50px;
+      display: block;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      transform: translateX(100%);
+      -webkit-tap-highlight-color: transparent;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      /* Center the year scroller position. */
+      --vaadin-infinite-scroller-buffer-offset: 50%;
+    }
+
+    :host::before {
+      content: '';
+      display: block;
+      background: transparent;
+      width: 0;
+      height: 0;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 6px;
+      border-style: solid;
+      border-color: transparent;
+      border-left-color: #000;
+    }
+  </style>
+`;
+
+let memoizedTemplate;
+
+/**
+ * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+ *
+ * @extends InfiniteScroller
+ * @mixes ThemableMixin
+ * @private
+ */
+class DatePickerYearScroller extends InfiniteScroller {
+  static get is() {
+    return 'vaadin-date-picker-year-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: 12,
+      },
+    };
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _createElement() {
+    return document.createElement('vaadin-date-picker-year');
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {number} index
+   * @protected
+   * @override
+   */
+  _updateElement(element, index) {
+    element.year = this._yearAfterXYears(index);
+  }
+
+  /** @private */
+  _yearAfterXYears(index) {
+    const today = new Date();
+    const result = new Date(today);
+    result.setFullYear(parseInt(index) + today.getFullYear());
+    return result.getFullYear();
+  }
+}
+
+customElements.define(DatePickerYearScroller.is, DatePickerYearScroller);

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

@@ -0,0 +1,57 @@
+/**
+ * @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, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @private
+ */
+export class DatePickerYear extends ThemableMixin(PolymerElement) {
+  static get is() {
+    return 'vaadin-date-picker-year';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          height: 100%;
+        }
+      </style>
+      <div part="year-number">[[year]]</div>
+      <div part="year-separator" aria-hidden="true"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      year: {
+        type: String,
+      },
+
+      selectedDate: {
+        type: Object,
+      },
+    };
+  }
+
+  static get observers() {
+    return ['__updateSelected(year, selectedDate)'];
+  }
+
+  /** @private */
+  __updateSelected(year, selectedDate) {
+    this.toggleAttribute('selected', selectedDate && selectedDate.getFullYear() === year);
+    this.toggleAttribute('current', year === new Date().getFullYear());
+  }
+}
+
+customElements.define(DatePickerYear.is, DatePickerYear);

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

@@ -79,15 +79,12 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * Part name             | Description
  * ----------------------|--------------------
  * `toggle-button`       | Toggle button
- * `overlay-content`     | The overlay element
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
  * Attribute  | Description                                      | Part name
  * -----------|--------------------------------------------------|-----------
  * `opened`   | Set when the date selector overlay is opened     | :host
- * `today`    | Set on the date corresponding to the current day | date
- * `selected` | Set on the selected date                         | date
  *
  * If you want to replace the default `<input>` and its container with a custom implementation to get full control
  * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
@@ -99,6 +96,9 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
+ * - `<vaadin-date-picker-month-scroller>`
+ * - `<vaadin-date-picker-year-scroller>`
+ * - `<vaadin-date-picker-year>`
  * - `<vaadin-month-calendar>`
  * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
@@ -111,14 +111,15 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `clear-button`        | Fullscreen mode clear button
  * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `months`              | Months scroller
- * `years`               | Years scroller
- * `toolbar`             | Footer bar with buttons
- * `today-button`        | Today button
- * `cancel-button`       | Cancel button
- * `month`               | Month calendar
- * `year-number`         | Year number
- * `year-separator`      | Year separator
+ * `toolbar`             | Footer bar with slotted buttons
+ *
+ * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+ *
+ * Attribute       | Description
+ * ----------------|-------------------------------------------------
+ * `desktop`       | Set when the overlay content is in desktop mode
+ * `fullscreen`    | Set when the overlay content is in fullscreen mode
+ * `years-visible` | Set when the year scroller is visible in fullscreen mode
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -130,6 +131,17 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `week-numbers`        | Week numbers container
  * `week-number`         | Week number element
  * `date`                | Date element
+ * `disabled`            | Disabled date element
+ * `focused`             | Focused date element
+ * `selected`            | Selected date element
+ * `today`               | Date element corresponding to the current day
+ *
+ * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
  *
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.

package/src/vaadin-date-picker.js

@@ -15,9 +15,8 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-import { datePickerStyles } from './vaadin-date-picker-styles.js';
 
-registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { moduleId: 'vaadin-date-picker-styles' });
+registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-picker-styles' });
 
 /**
  * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
@@ -48,15 +47,12 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * Part name             | Description
  * ----------------------|--------------------
  * `toggle-button`       | Toggle button
- * `overlay-content`     | The overlay element
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
  * Attribute  | Description                                      | Part name
  * -----------|--------------------------------------------------|-----------
  * `opened`   | Set when the date selector overlay is opened     | :host
- * `today`    | Set on the date corresponding to the current day | date
- * `selected` | Set on the selected date                         | date
  *
  * If you want to replace the default `<input>` and its container with a custom implementation to get full control
  * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
@@ -68,6 +64,9 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  *
  * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
+ * - `<vaadin-date-picker-month-scroller>`
+ * - `<vaadin-date-picker-year-scroller>`
+ * - `<vaadin-date-picker-year>`
  * - `<vaadin-month-calendar>`
  * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
@@ -80,14 +79,15 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * `clear-button`        | Fullscreen mode clear button
  * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `months`              | Months scroller
- * `years`               | Years scroller
- * `toolbar`             | Footer bar with buttons
- * `today-button`        | Today button
- * `cancel-button`       | Cancel button
- * `month`               | Month calendar
- * `year-number`         | Year number
- * `year-separator`      | Year separator
+ * `toolbar`             | Footer bar with slotted buttons
+ *
+ * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+ *
+ * Attribute       | Description
+ * ----------------|-------------------------------------------------
+ * `desktop`       | Set when the overlay content is in desktop mode
+ * `fullscreen`    | Set when the overlay content is in fullscreen mode
+ * `years-visible` | Set when the year scroller is visible in fullscreen mode
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -99,6 +99,17 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * `week-numbers`        | Week numbers container
  * `week-number`         | Week number element
  * `date`                | Date element
+ * `disabled`            | Disabled date element
+ * `focused`             | Focused date element
+ * `selected`            | Selected date element
+ * `today`               | Date element corresponding to the current day
+ *
+ * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
  *
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
@@ -128,6 +139,15 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         :host([opened]) {
           pointer-events: auto;
         }
+
+        :host([dir='rtl']) [part='input-field'] {
+          direction: ltr;
+        }
+
+        :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+          direction: rtl;
+          text-align: left;
+        }
       </style>
 
       <div class="vaadin-date-picker-container">
@@ -161,29 +181,14 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       <vaadin-date-picker-overlay
         id="overlay"
         fullscreen$="[[_fullscreen]]"
-        theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
+        theme$="[[_theme]]"
+        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]]"
-        disable-upgrade
-      >
-        <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>
+      ></vaadin-date-picker-overlay>
 
       <slot name="tooltip"></slot>
     `;
@@ -219,11 +224,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
-  }
-
-  /** @protected */
-  _initOverlay() {
-    super._initOverlay();
 
     this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));
   }
@@ -238,7 +238,11 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
   /** @private */
   _toggle(e) {
     e.stopPropagation();
-    this[this._overlayInitialized && this.$.overlay.opened ? 'close' : 'open']();
+    if (this.$.overlay.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
   }
 
   // Workaround https://github.com/vaadin/web-components/issues/2855

package/src/vaadin-infinite-scroller.js

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
@@ -14,7 +13,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
  * @extends HTMLElement
  * @private
  */
-class InfiniteScroller extends PolymerElement {
+export class InfiniteScroller extends PolymerElement {
   static get template() {
     return html`
       <style>
@@ -69,10 +68,6 @@ class InfiniteScroller extends PolymerElement {
     `;
   }
 
-  static get is() {
-    return 'vaadin-infinite-scroller';
-  }
-
   static get properties() {
     return {
       /**
@@ -130,19 +125,6 @@ class InfiniteScroller extends PolymerElement {
 
     this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
 
-    const tpl = this.querySelector('template');
-    this._TemplateClass = templatize(tpl, this, {
-      forwardHostProp(prop, value) {
-        if (prop !== 'index') {
-          this._buffers.forEach((buffer) => {
-            [...buffer.children].forEach((slot) => {
-              slot._itemWrapper.instance[prop] = value;
-            });
-          });
-        }
-      },
-    });
-
     // Firefox interprets elements with overflow:auto as focusable
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
     if (isFirefox) {
@@ -162,6 +144,24 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  _createElement() {
+    // To be implemented.
+  }
+
+  /**
+   * @param {HTMLElement} _element
+   * @param {number} _index
+   * @protected
+   * @override
+   */
+  _updateElement(_element, _index) {
+    // To be implemented.
+  }
+
   /** @private */
   _activated(active) {
     if (active && !this._initialized) {
@@ -185,6 +185,7 @@ class InfiniteScroller extends PolymerElement {
       }
 
       this._initDone = true;
+      this.dispatchEvent(new CustomEvent('init-done'));
     }
   }
 
@@ -339,18 +340,16 @@ class InfiniteScroller extends PolymerElement {
         itemWrapper.setAttribute('slot', slotName);
         this.appendChild(itemWrapper);
 
-        setTimeout(() => {
-          // Only stamp the visible instances first
-          if (this._isVisible(itemWrapper, container)) {
-            this._ensureStampedInstance(itemWrapper);
-          }
-        }, 1); // Wait for first reset
+        // Only stamp the visible instances first
+        if (this._isVisible(itemWrapper, container)) {
+          this._ensureStampedInstance(itemWrapper);
+        }
       }
     });
 
-    setTimeout(() => {
-      afterNextRender(this, this._finishInit.bind(this));
-    }, 1);
+    afterNextRender(this, () => {
+      this._finishInit();
+    });
   }
 
   /** @private */
@@ -361,8 +360,8 @@ class InfiniteScroller extends PolymerElement {
 
     const tmpInstance = itemWrapper.instance;
 
-    itemWrapper.instance = new this._TemplateClass({});
-    itemWrapper.appendChild(itemWrapper.instance.root);
+    itemWrapper.instance = this._createElement();
+    itemWrapper.appendChild(itemWrapper.instance);
 
     Object.keys(tmpInstance).forEach((prop) => {
       itemWrapper.instance.set(prop, tmpInstance[prop]);
@@ -381,7 +380,7 @@ class InfiniteScroller extends PolymerElement {
         [...buffer.children].forEach((slot, index) => {
           const itemWrapper = slot._itemWrapper;
           if (!viewPortOnly || this._isVisible(itemWrapper, scrollerRect)) {
-            itemWrapper.instance.index = firstIndex + index;
+            this._updateElement(itemWrapper.instance, firstIndex + index);
           }
         });
         buffer.updated = true;
@@ -395,5 +394,3 @@ class InfiniteScroller extends PolymerElement {
     return rect.bottom > container.top && rect.top < container.bottom;
   }
 }
-
-customElements.define(InfiniteScroller.is, InfiniteScroller);

package/src/vaadin-month-calendar.js

@@ -32,17 +32,21 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
           display: flex;
         }
 
-        [part='date'] {
+        [part~='date'] {
           outline: none;
         }
 
+        [part~='disabled'] {
+          pointer-events: none;
+        }
+
         [part='week-number'][hidden],
         [part='weekday'][hidden] {
           display: none;
         }
 
         [part='weekday'],
-        [part='date'] {
+        [part~='date'] {
           width: calc(100% / 7);
           padding: 0;
           font-weight: normal;
@@ -56,7 +60,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
         }
 
         :host([week-numbers]) [part='weekday']:not(:empty),
-        :host([week-numbers]) [part='date'] {
+        :host([week-numbers]) [part~='date'] {
           width: 12.5%;
         }
       </style>
@@ -99,12 +103,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
               <template is="dom-repeat" items="[[week]]">
                 <td
                   role="gridcell"
-                  part="date"
+                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate)]]"
                   date="[[item]]"
-                  today$="[[_isToday(item)]]"
-                  focused$="[[__isDayFocused(item, focusedDate)]]"
                   tabindex$="[[__getDayTabindex(item, focusedDate)]]"
-                  selected$="[[__isDaySelected(item, selectedDate)]]"
                   disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
                   aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
                   aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
@@ -211,7 +212,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
   }
 
   get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('[part=date]')].find((datePart) => {
+    return [...this.shadowRoot.querySelectorAll('[part~=date]')].find((datePart) => {
       return dateEquals(datePart.date, this.focusedDate);
     });
   }
@@ -369,6 +370,28 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     e.preventDefault();
   }
 
+  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
+    const result = ['date'];
+
+    if (this.__isDayDisabled(date, minDate, maxDate)) {
+      result.push('disabled');
+    }
+
+    if (this.__isDayFocused(date, focusedDate)) {
+      result.push('focused');
+    }
+
+    if (this.__isDaySelected(date, selectedDate)) {
+      result.push('selected');
+    }
+
+    if (this._isToday(date)) {
+      result.push('today');
+    }
+
+    return result.join(' ');
+  }
+
   __getWeekNumber(days) {
     const date = days.reduce((acc, d) => {
       return !acc && d ? d : acc;