@vaadin/date-picker 23.3.3 → 24.0.0-alpha10

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

@@ -1,17 +1,28 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade-mixin.js';
 import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { datePickerOverlayStyles } from './vaadin-date-picker-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles('vaadin-date-picker-overlay', datePickerOverlayStyles, {
-  moduleId: 'vaadin-date-picker-overlay-styles',
-});
+registerStyles(
+  'vaadin-date-picker-overlay',
+  css`
+    [part='overlay'] {
+      display: flex;
+      flex: auto;
+    }
+
+    [part~='content'] {
+      flex: auto;
+    }
+  `,
+  {
+    moduleId: 'vaadin-date-picker-overlay-styles',
+  },
+);
 
 let memoizedTemplate;
 
@@ -21,7 +32,7 @@ let memoizedTemplate;
  * @extends Overlay
  * @private
  */
-class DatePickerOverlay extends DisableUpgradeMixin(PositionMixin(Overlay)) {
+class DatePickerOverlay extends PositionMixin(Overlay) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }

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

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 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 - 2023 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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 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';
@@ -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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.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