@vaadin/date-picker 24.8.4 → 25.0.0-alpha10

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

@@ -8,7 +8,6 @@ import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.j
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
@@ -82,7 +81,6 @@ export const datePickerI18nDefaults = Object.freeze({
 
 /**
  * @polymerMixin
- * @mixes ControllerMixin
  * @mixes DelegateFocusMixin
  * @mixes I18nMixin
  * @mixes InputConstraintsMixin
@@ -93,7 +91,7 @@ export const datePickerI18nDefaults = Object.freeze({
 export const DatePickerMixin = (subclass) =>
   class DatePickerMixinClass extends I18nMixin(
     datePickerI18nDefaults,
-    OverlayClassMixin(ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))))),
+    OverlayClassMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),
   ) {
     static get properties() {
       return {
@@ -297,7 +295,6 @@ export const DatePickerMixin = (subclass) =>
 
       this._boundOnClick = this._onClick.bind(this);
       this._boundOnScroll = this._onScroll.bind(this);
-      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
     /**
@@ -397,26 +394,6 @@ export const DatePickerMixin = (subclass) =>
       this.__setEnteredDate(parsedDate);
     }
 
-    /**
-     * Override a getter from `InputControlMixin` to make it optional
-     * and to prevent warning when a clear button is missing,
-     * for example when using <vaadin-date-picker-light>.
-     * @protected
-     * @return {Element | null | undefined}
-     */
-    get clearElement() {
-      return null;
-    }
-
-    /** @private */
-    get _nativeInput() {
-      if (this.inputElement) {
-        // TODO: support focusElement for backwards compatibility
-        return this.inputElement.focusElement || this.inputElement;
-      }
-      return null;
-    }
-
     /**
      * The input element's value when it cannot be parsed as a date, and an empty string otherwise.
      *
@@ -475,13 +452,17 @@ export const DatePickerMixin = (subclass) =>
 
       this.addController(new VirtualKeyboardController(this));
 
-      const overlay = this.$.overlay;
-      this._overlayElement = overlay;
+      this._overlayElement = this.$.overlay;
+    }
 
-      overlay.renderer = this._boundOverlayRenderer;
+    /** @protected */
+    updated(props) {
+      super.updated(props);
 
-      this.addEventListener('mousedown', () => this.__bringToFront());
-      this.addEventListener('touchstart', () => this.__bringToFront());
+      if (props.has('showWeekNumbers') || props.has('__effectiveI18n')) {
+        // Currently only supported for locales that start the week on Monday.
+        this.toggleAttribute('week-numbers', this.showWeekNumbers && this.__effectiveI18n.firstDayOfWeek === 1);
+      }
     }
 
     /** @protected */
@@ -520,14 +501,15 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _overlayRenderer(root) {
-      if (root.firstChild) {
+    __ensureContent() {
+      if (this._overlayContent) {
         return;
       }
 
       // Create and store document content element
       const content = document.createElement('vaadin-date-picker-overlay-content');
-      root.appendChild(content);
+      content.setAttribute('slot', 'overlay');
+      this.appendChild(content);
 
       this._overlayContent = content;
 
@@ -734,13 +716,6 @@ export const DatePickerMixin = (subclass) =>
       this.close();
     }
 
-    /** @private */
-    __bringToFront() {
-      requestAnimationFrame(() => {
-        this.$.overlay.bringToFront();
-      });
-    }
-
     /** @private */
     // eslint-disable-next-line @typescript-eslint/max-params
     _isNoInput(inputElement, fullscreen, ios, effectiveI18n, opened, autoOpenDisabled) {
@@ -774,6 +749,10 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _openedChanged(opened) {
+      if (opened) {
+        this.__ensureContent();
+      }
+
       if (this.inputElement) {
         this.inputElement.setAttribute('aria-expanded', opened);
       }
@@ -928,7 +907,7 @@ export const DatePickerMixin = (subclass) =>
         this._focus();
       }
 
-      const input = this._nativeInput;
+      const input = this.inputElement;
       if (this._noInput && input) {
         input.blur();
         this._overlayContent.focusDateElement();
@@ -994,8 +973,8 @@ export const DatePickerMixin = (subclass) =>
       }
       this.__commitParsedOrFocusedDate();
 
-      if (this._nativeInput && this._nativeInput.selectionStart) {
-        this._nativeInput.selectionStart = this._nativeInput.selectionEnd;
+      if (this.inputElement && this.inputElement.selectionStart) {
+        this.inputElement.selectionStart = this.inputElement.selectionEnd;
       }
       // No need to revalidate the value after `_selectedDateChanged`
       // Needed in case the value was not changed: open and close dropdown,
@@ -1032,8 +1011,8 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     _setSelectionRange(a, b) {
-      if (this._nativeInput && this._nativeInput.setSelectionRange) {
-        this._nativeInput.setSelectionRange(a, b);
+      if (this.inputElement) {
+        this.inputElement.setSelectionRange(a, b);
       }
     }
 
@@ -1053,6 +1032,11 @@ export const DatePickerMixin = (subclass) =>
      * @private
      */
     _onClick(event) {
+      // Ignore click events bubbling from the overlay
+      if (event.composedPath().includes(this._overlayContent)) {
+        return;
+      }
+
       // Clear button click is handled in separate listener
       // but bubbles to the host, so we need to ignore it.
       if (!this._isClearButton(event)) {
@@ -1141,7 +1125,12 @@ export const DatePickerMixin = (subclass) =>
      * @protected
      * @override
      */
-    _onEnter(_event) {
+    _onEnter(event) {
+      // Ignore Enter keydown event bubbling from the overlay
+      if (event.composedPath().includes(this._overlayContent)) {
+        return;
+      }
+
       if (this.opened) {
         // Closing will implicitly select parsed or focused date
         this.close();

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

@@ -12,12 +12,8 @@ stylesTemplate.innerHTML = `
   <style>
     :host {
       --vaadin-infinite-scroller-item-height: 270px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
+      grid-area: months;
+      height: auto;
     }
   </style>
 `;

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

@@ -3,19 +3,12 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { flush } from '@polymer/polymer/lib/utils/flush.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import {
-  dateAfterXMonths,
-  dateAllowed,
-  dateEquals,
-  extractDateParts,
-  getClosestDate,
-} from './vaadin-date-picker-helper.js';
+import { dateAfterXMonths, dateAllowed, dateEquals, getClosestDate } from './vaadin-date-picker-helper.js';
 
 /**
  * @polymerMixin
@@ -76,14 +69,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           value: '(min-width: 375px)',
         },
 
-        _translateX: {
-          observer: '_translateXChanged',
-        },
-
-        _yearScrollerWidth: {
-          value: 50,
-        },
-
         i18n: {
           type: Object,
         },
@@ -179,20 +164,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
     }
 
-    /** @protected */
-    _addListeners() {
-      setTouchAction(this.$.scrollers, 'pan-y');
-
-      addListener(this.$.scrollers, 'track', this._track.bind(this));
-      addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
-      addListener(this.shadowRoot.querySelector('[part="toggle-button"]'), 'tap', this._cancel.bind(this));
-      addListener(
-        this.shadowRoot.querySelector('[part="years-toggle-button"]'),
-        'tap',
-        this._toggleYearScroller.bind(this),
-      );
-    }
-
     /** @protected */
     _initControllers() {
       this.addController(
@@ -207,7 +178,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           initializer: (btn) => {
             btn.setAttribute('theme', 'tertiary');
             btn.addEventListener('keydown', (e) => this.__onTodayButtonKeyDown(e));
-            addListener(btn, 'tap', this._onTodayTap.bind(this));
+            btn.addEventListener('click', this._onTodayTap.bind(this));
             this._todayButton = btn;
           },
         }),
@@ -219,7 +190,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           initializer: (btn) => {
             btn.setAttribute('theme', 'tertiary');
             btn.addEventListener('keydown', (e) => this.__onCancelButtonKeyDown(e));
-            addListener(btn, 'tap', this._cancel.bind(this));
+            btn.addEventListener('click', this._cancel.bind(this));
             this._cancelButton = btn;
           },
         }),
@@ -231,7 +202,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     reset() {
       this._closeYearScroller();
-      this._toggleAnimateClass(true);
     }
 
     /**
@@ -528,14 +498,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       });
     }
 
-    /** @protected */
-    _formatDisplayed(date, i18n, label) {
-      if (date && i18n && typeof i18n.formatDate === 'function') {
-        return i18n.formatDate(extractDateParts(date));
-      }
-      return label;
-    }
-
     /** @private */
     _onTodayTap() {
       const today = this._getTodayMidnight();
@@ -648,99 +610,14 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       window.requestAnimationFrame(smoothScroll);
     }
 
-    /** @private */
-    _limit(value, range) {
-      return Math.min(range.max, Math.max(range.min, value));
-    }
-
-    /** @private */
-    _handleTrack(e) {
-      // Check if horizontal movement threshold (dx) not exceeded or
-      // scrolling fast vertically (ddy).
-      if (Math.abs(e.detail.dx) < 10 || Math.abs(e.detail.ddy) > 10) {
-        return;
-      }
-
-      // If we're flinging quickly -> start animating already.
-      if (Math.abs(e.detail.ddx) > this._yearScrollerWidth / 3) {
-        this._toggleAnimateClass(true);
-      }
-
-      const newTranslateX = this._translateX + e.detail.ddx;
-      this._translateX = this._limit(newTranslateX, {
-        min: 0,
-        max: this._yearScrollerWidth,
-      });
-    }
-
-    /** @private */
-    _track(e) {
-      if (this._desktopMode) {
-        // No need to track for swipe gestures on desktop.
-        return;
-      }
-
-      switch (e.detail.state) {
-        case 'start':
-          this._toggleAnimateClass(false);
-          break;
-        case 'track':
-          this._handleTrack(e);
-          break;
-        case 'end':
-          this._toggleAnimateClass(true);
-          if (this._translateX >= this._yearScrollerWidth / 2) {
-            this._closeYearScroller();
-          } else {
-            this._openYearScroller();
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    /** @private */
-    _toggleAnimateClass(enable) {
-      if (enable) {
-        this.classList.add('animate');
-      } else {
-        this.classList.remove('animate');
-      }
-    }
-
     /** @private */
     _toggleYearScroller() {
-      if (this._isYearScrollerVisible()) {
-        this._closeYearScroller();
-      } else {
-        this._openYearScroller();
-      }
-    }
-
-    /** @private */
-    _openYearScroller() {
-      this._translateX = 0;
-      this.setAttribute('years-visible', '');
+      this.toggleAttribute('years-visible');
     }
 
     /** @private */
     _closeYearScroller() {
       this.removeAttribute('years-visible');
-      this._translateX = this._yearScrollerWidth;
-    }
-
-    /** @private */
-    _isYearScrollerVisible() {
-      return this._translateX < this._yearScrollerWidth / 2;
-    }
-
-    /** @private */
-    _translateXChanged(x) {
-      if (!this._desktopMode) {
-        this._monthScroller.style.transform = `translateX(${x - this._yearScrollerWidth}px)`;
-        this._yearScroller.style.transform = `translateX(${x}px)`;
-      }
     }
 
     /** @private */
@@ -770,11 +647,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       this._close();
     }
 
-    /** @protected */
-    _preventDefault(e) {
-      e.preventDefault();
-    }
-
     /** @private */
     __toggleDate(date) {
       if (dateEquals(date, this.selectedDate)) {
@@ -937,8 +809,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
         await new Promise((resolve) => {
           requestAnimationFrame(() => {
             setTimeout(() => {
-              // Force dom-repeat elements to render
-              flush();
               resolve();
             });
           });

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

@@ -8,17 +8,14 @@ import './vaadin-date-picker-month-scroller.js';
 import './vaadin-date-picker-year-scroller.js';
 import './vaadin-date-picker-year.js';
 import './vaadin-month-calendar.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { overlayContentStyles } from './styles/vaadin-date-picker-overlay-content-core-styles.js';
 import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
-import { overlayContentStyles } from './vaadin-date-picker-overlay-content-styles.js';
-
-registerStyles('vaadin-date-picker-overlay-content', overlayContentStyles, {
-  moduleId: 'vaadin-date-picker-overlay-content-styles',
-});
 
 /**
  * @customElement
@@ -26,43 +23,43 @@ registerStyles('vaadin-date-picker-overlay-content', overlayContentStyles, {
  * @private
  */
 class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
-  ControllerMixin(ThemableMixin(DirMixin(PolymerElement))),
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
 ) {
-  static get template() {
-    return html`
-      <div part="overlay-header" on-touchend="_preventDefault" aria-hidden="true">
-        <div part="label">[[_formatDisplayed(selectedDate, i18n, label)]]</div>
-        <div part="clear-button" hidden$="[[!selectedDate]]"></div>
-        <div part="toggle-button"></div>
+  static get is() {
+    return 'vaadin-date-picker-overlay-content';
+  }
 
-        <div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
-          [[_yearAfterXMonths(_visibleMonthIndex)]]
-        </div>
-      </div>
+  static get styles() {
+    return overlayContentStyles;
+  }
 
-      <div id="scrollers">
-        <slot name="months"></slot>
-        <slot name="years"></slot>
-      </div>
+  /** @protected */
+  render() {
+    return html`
+      <slot name="months"></slot>
+      <slot name="years"></slot>
 
-      <div on-touchend="_preventDefault" role="toolbar" part="toolbar">
+      <div role="toolbar" part="toolbar">
         <slot name="today-button"></slot>
+        <div
+          part="years-toggle-button"
+          ?hidden="${this._desktopMode}"
+          aria-hidden="true"
+          @click="${this._toggleYearScroller}"
+        >
+          ${this._yearAfterXMonths(this._visibleMonthIndex)}
+        </div>
         <slot name="cancel-button"></slot>
       </div>
     `;
   }
 
-  static get is() {
-    return 'vaadin-date-picker-overlay-content';
-  }
-
   /** @protected */
-  ready() {
-    super.ready();
+  firstUpdated() {
+    super.firstUpdated();
 
     this.setAttribute('role', 'dialog');
 
-    this._addListeners();
     this._initControllers();
   }
 }

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

@@ -3,17 +3,15 @@
  * Copyright (c) 2016 - 2025 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 { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { datePickerOverlayStyles } from './styles/vaadin-date-picker-overlay-core-styles.js';
 import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
-import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
-
-registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlayStyles], {
-  moduleId: 'vaadin-date-picker-overlay-styles',
-});
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
@@ -25,14 +23,21 @@ registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlaySt
  * @mixes ThemableMixin
  * @private
  */
-class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class DatePickerOverlay extends DatePickerOverlayMixin(
+  DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    return [overlayStyles, datePickerOverlayStyles];
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay">
         <div part="content" id="content">
           <slot></slot>
@@ -40,6 +45,17 @@ class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(Po
       </div>
     `;
   }
+
+  /**
+   * Override method from `OverlayFocusMixin` to specify content root
+   * used to detect whether focus should be restored on overlay close.
+   *
+   * @protected
+   * @override
+   */
+  get _contentRoot() {
+    return this.owner._overlayContent;
+  }
 }
 
 defineCustomElement(DatePickerOverlay);

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

@@ -13,10 +13,9 @@ stylesTemplate.innerHTML = `
       --vaadin-infinite-scroller-item-height: 80px;
       width: 50px;
       display: block;
-      height: 100%;
-      position: absolute;
-      right: 0;
-      transform: translateX(100%);
+      position: relative;
+      grid-area: years;
+      height: auto;
       -webkit-tap-highlight-color: transparent;
       -webkit-user-select: none;
       user-select: none;

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

@@ -3,10 +3,12 @@
  * Copyright (c) 2016 - 2025 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 { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
+import { datePickerYearStyles } from './styles/vaadin-date-picker-year-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
@@ -17,23 +19,49 @@ import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
  * @mixes DatePickerYearMixin
  * @private
  */
-export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolymerElement)) {
+export class DatePickerYear extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
   static get is() {
     return 'vaadin-date-picker-year';
   }
 
-  static get template() {
+  static get styles() {
+    return datePickerYearStyles;
+  }
+
+  static get properties() {
+    return {
+      year: {
+        type: String,
+        sync: true,
+      },
+
+      selectedDate: {
+        type: Object,
+        sync: true,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <style>
-        :host {
-          display: block;
-          height: 100%;
-        }
-      </style>
-      <div part="year-number">[[year]]</div>
+      <div part="year-number">${this.year}</div>
       <div part="year-separator" aria-hidden="true"></div>
     `;
   }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('year')) {
+      this.toggleAttribute('current', this.year === new Date().getFullYear());
+    }
+
+    if (props.has('year') || props.has('selectedDate')) {
+      this.toggleAttribute('selected', this.selectedDate && this.selectedDate.getFullYear() === this.year);
+    }
+  }
 }
 
 defineCustomElement(DatePickerYear);