@vaadin/date-picker 24.8.4 → 25.0.0-alpha10

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

@@ -83,18 +83,19 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * Part name             | Description
- * ----------------------|--------------------
- * `toggle-button`       | Toggle button
+ * Part name        | Description
+ * -----------------|--------------------
+ * `toggle-button`  | Toggle button
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * 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
- *
- * 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.
+ * Attribute      | Description
+ * ---------------|----------------------------------------------
+ * `opened`       | Set when the date selector overlay is opened
+ * `week-numbers` | Set when week numbers are shown in the calendar
  *
  * ### Internal components
  *
@@ -113,12 +114,8 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * Part name             | Description
  * ----------------------|--------------------
- * `overlay-header`      | Fullscreen mode header
- * `label`               | Fullscreen mode value/label
- * `clear-button`        | Fullscreen mode clear button
- * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `toolbar`             | Footer bar with slotted buttons
+ * `toolbar`             | Toolbar with slotted buttons
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *

package/src/vaadin-date-picker.js

@@ -6,19 +6,20 @@
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { datePickerStyles } from './styles/vaadin-date-picker-core-styles.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' });
 
 /**
  * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
@@ -46,18 +47,19 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  *
  * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * Part name             | Description
- * ----------------------|--------------------
- * `toggle-button`       | Toggle button
+ * Part name        | Description
+ * -----------------|--------------------
+ * `toggle-button`  | Toggle button
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * 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
- *
- * 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.
+ * Attribute      | Description
+ * ---------------|----------------------------------------------
+ * `opened`       | Set when the date selector overlay is opened
+ * `week-numbers` | Set when week numbers are shown in the calendar
  *
  * ### Internal components
  *
@@ -76,12 +78,8 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  *
  * Part name             | Description
  * ----------------------|--------------------
- * `overlay-header`      | Fullscreen mode header
- * `label`               | Fullscreen mode value/label
- * `clear-button`        | Fullscreen mode clear button
- * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `toolbar`             | Footer bar with slotted buttons
+ * `toolbar`             | Toolbar with slotted buttons
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *
@@ -150,30 +148,56 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * @mixes InputControlMixin
  * @mixes DatePickerMixin
  */
-class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+class DatePicker extends DatePickerMixin(
+  InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-date-picker';
   }
 
-  static get template() {
+  static get styles() {
+    return [inputFieldShared, datePickerStyles];
+  }
+
+  static get properties() {
+    return {
+      /** @private */
+      _positionTarget: {
+        type: Object,
+        sync: true,
+      },
+    };
+  }
+
+  /**
+   * Used by `InputControlMixin` as a reference to the clear button element.
+   * @protected
+   * @return {!HTMLElement}
+   */
+  get clearElement() {
+    return this.$.clearButton;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div class="vaadin-date-picker-container">
         <div part="label">
           <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+          <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
         </div>
 
         <vaadin-input-container
           part="input-field"
-          readonly="[[readonly]]"
-          disabled="[[disabled]]"
-          invalid="[[invalid]]"
-          theme$="[[_theme]]"
+          .readonly="${this.readonly}"
+          .disabled="${this.disabled}"
+          .invalid="${this.invalid}"
+          theme="${ifDefined(this._theme)}"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
           <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div part="toggle-button" slot="suffix" aria-hidden="true" on-click="_toggle"></div>
+          <div part="toggle-button" slot="suffix" aria-hidden="true" @click="${this._toggle}"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -187,29 +211,28 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
       <vaadin-date-picker-overlay
         id="overlay"
-        fullscreen$="[[_fullscreen]]"
-        theme$="[[_theme]]"
-        opened="{{opened}}"
-        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
-        on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-closing="_onOverlayClosed"
+        .owner="${this}"
+        ?fullscreen="${this._fullscreen}"
+        theme="${ifDefined(this._theme)}"
+        .opened="${this.opened}"
+        @opened-changed="${this._onOpenedChanged}"
+        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
+        @vaadin-overlay-open="${this._onOverlayOpened}"
+        @vaadin-overlay-close="${this._onVaadinOverlayClose}"
+        @vaadin-overlay-closing="${this._onOverlayClosed}"
         restore-focus-on-close
-        restore-focus-node="[[inputElement]]"
-      ></vaadin-date-picker-overlay>
+        no-vertical-overlap
+        exportparts="backdrop, overlay, content"
+        .restoreFocusNode="${this.inputElement}"
+        .positionTarget="${this._positionTarget}"
+      >
+        <slot name="overlay"></slot>
+      </vaadin-date-picker-overlay>
 
       <slot name="tooltip"></slot>
     `;
   }
 
-  /**
-   * Used by `InputControlMixin` as a reference to the clear button element.
-   * @protected
-   * @return {!HTMLElement}
-   */
-  get clearElement() {
-    return this.$.clearButton;
-  }
-
   /** @protected */
   ready() {
     super.ready();
@@ -239,10 +262,15 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
     this._tooltipController.setAriaTarget(this.inputElement);
     this._tooltipController.setShouldShow((target) => !target.opened);
 
+    this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
+  }
 
-    this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));
+  /** @private */
+  _onOpenedChanged(event) {
+    this.opened = event.detail.value;
   }
 
   /** @private */
@@ -262,15 +290,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       this.open();
     }
   }
-
-  // Workaround https://github.com/vaadin/web-components/issues/2855
-  /** @protected */
-  _openedChanged(opened) {
-    super._openedChanged(opened);
-
-    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
-    this.$.overlay.noVerticalOverlap = true;
-  }
 }
 
 defineCustomElement(DatePicker);

package/src/vaadin-infinite-scroller.js

@@ -3,7 +3,6 @@
  * 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 { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -22,13 +21,8 @@ template.innerHTML = `
       height: 100%;
       overflow: auto;
       outline: none;
-      margin-right: -40px;
-      -webkit-overflow-scrolling: touch;
       overflow-x: hidden;
-    }
-
-    #scroller.notouchscroll {
-      -webkit-overflow-scrolling: auto;
+      scrollbar-width: none;
     }
 
     #scroller::-webkit-scrollbar {
@@ -39,7 +33,6 @@ template.innerHTML = `
       position: absolute;
       width: var(--vaadin-infinite-scroller-buffer-width, 100%);
       box-sizing: border-box;
-      padding-right: 40px;
       top: var(--vaadin-infinite-scroller-buffer-offset, 0);
     }
   </style>
@@ -159,17 +152,6 @@ export class InfiniteScroller extends HTMLElement {
       this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
       this._scrollDisabled = false;
     }
-
-    if (this._mayHaveMomentum) {
-      // Stop the possible iOS Safari momentum with -webkit-overflow-scrolling: auto;
-      this.$.scroller.classList.add('notouchscroll');
-      this._mayHaveMomentum = false;
-
-      setTimeout(() => {
-        // Restore -webkit-overflow-scrolling: touch; after a small delay.
-        this.$.scroller.classList.remove('notouchscroll');
-      }, 10);
-    }
   }
 
   /** @protected */
@@ -220,8 +202,6 @@ export class InfiniteScroller extends HTMLElement {
       this._updateClones();
       this._debouncerUpdateClones.cancel();
     }
-
-    flush();
   }
 
   /**
@@ -295,7 +275,6 @@ export class InfiniteScroller extends HTMLElement {
 
     if (!this._preventScrollEvent) {
       this.dispatchEvent(new CustomEvent('custom-scroll', { bubbles: false, composed: true }));
-      this._mayHaveMomentum = true;
     }
     this._preventScrollEvent = false;
 

package/src/vaadin-month-calendar.js

@@ -3,76 +3,98 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/polymer/lib/elements/dom-repeat.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.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 { monthCalendarStyles } from './styles/vaadin-month-calendar-core-styles.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
-import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
-
-registerStyles('vaadin-month-calendar', monthCalendarStyles, {
-  moduleId: 'vaadin-month-calendar-styles',
-});
 
 /**
  * @customElement
  * @extends HTMLElement
  * @private
  */
-class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
-  static get template() {
+class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-month-calendar';
+  }
+
+  static get styles() {
+    return monthCalendarStyles;
+  }
+
+  /** @protected */
+  render() {
+    const weekDayNames = this.__computeWeekDayNames(this.i18n, this.showWeekNumbers);
+    const weeks = this._weeks;
+    const hideWeekSeparator = !this.__computeShowWeekSeparator(this.showWeekNumbers, this.i18n);
+
     return html`
-      <div part="month-header" id="month-header" aria-hidden="true">[[_getTitle(month, i18n)]]</div>
+      <div part="month-header" id="month-header" aria-hidden="true">${this._getTitle(this.month, this.i18n)}</div>
       <table
         id="monthGrid"
         role="grid"
         aria-labelledby="month-header"
-        on-touchend="_preventDefault"
-        on-touchstart="_onMonthGridTouchStart"
+        @touchend="${this._preventDefault}"
+        @touchstart="${this._onMonthGridTouchStart}"
       >
         <thead id="weekdays-container">
           <tr role="row" part="weekdays">
-            <th part="weekday" aria-hidden="true" hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]"></th>
-            <template is="dom-repeat" items="[[__computeWeekDayNames(i18n, showWeekNumbers)]]">
-              <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true">
-                [[item.weekDayShort]]
-              </th>
-            </template>
+            <th part="weekday" aria-hidden="true" ?hidden="${hideWeekSeparator}"></th>
+            ${weekDayNames.map(
+              (item) => html`
+                <th role="columnheader" part="weekday" scope="col" abbr="${item.weekDay}" aria-hidden="true">
+                  ${item.weekDayShort}
+                </th>
+              `,
+            )}
           </tr>
         </thead>
         <tbody id="days-container">
-          <template is="dom-repeat" items="[[_weeks]]" as="week">
-            <tr role="row">
-              <td
-                part="week-number"
-                aria-hidden="true"
-                hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]"
-              >
-                [[__computeWeekNumber(week)]]
-              </td>
-              <template is="dom-repeat" items="[[week]]">
-                <td
-                  role="gridcell"
-                  part$="[[__computeDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]"
-                  date="[[item]]"
-                  tabindex$="[[__computeDayTabIndex(item, focusedDate)]]"
-                  disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
-                  aria-selected$="[[__computeDayAriaSelected(item, selectedDate)]]"
-                  aria-disabled$="[[__computeDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]"
-                  aria-label$="[[__computeDayAriaLabel(item)]]"
-                  >[[_getDate(item)]]</td
-                >
-              </template>
-            </tr>
-          </template>
+          ${weeks.map(
+            (week) => html`
+              <tr role="row">
+                <td part="week-number" aria-hidden="true" ?hidden="${hideWeekSeparator}">
+                  ${this.__computeWeekNumber(week)}
+                </td>
+                ${week.map((date) => {
+                  return html`
+                    <td
+                      role="gridcell"
+                      part="${this.__computeDatePart(
+                        date,
+                        this.focusedDate,
+                        this.selectedDate,
+                        this.minDate,
+                        this.maxDate,
+                        this.isDateDisabled,
+                        this.enteredDate,
+                        this.__hasFocus,
+                      )}"
+                      .date="${date}"
+                      ?disabled="${this.__isDayDisabled(date, this.minDate, this.maxDate, this.isDateDisabled)}"
+                      tabindex="${this.__computeDayTabIndex(date, this.focusedDate)}"
+                      aria-selected="${this.__computeDayAriaSelected(date, this.selectedDate)}"
+                      aria-disabled="${this.__computeDayAriaDisabled(
+                        date,
+                        this.minDate,
+                        this.maxDate,
+                        this.isDateDisabled,
+                      )}"
+                      aria-label="${this.__computeDayAriaLabel(date)}"
+                      >${this._getDate(date)}</td
+                    >
+                  `;
+                })}
+              </tr>
+            `,
+          )}
         </tbody>
       </table>
     `;
   }
-
-  static get is() {
-    return 'vaadin-month-calendar';
-  }
 }
 
 defineCustomElement(MonthCalendar);

package/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -20,6 +20,10 @@ registerStyles(
       cursor: default;
     }
 
+    :host([dir='rtl']) {
+      background-position: top left;
+    }
+
     ::slotted([slot='months']) {
       /* Month calendar height:
               header height + margin-bottom
@@ -36,39 +40,26 @@ registerStyles(
             + var(--lumo-space-s)
           );
       --vaadin-infinite-scroller-buffer-offset: 10%;
-      -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       position: relative;
-      margin-right: 57px;
     }
 
     ::slotted([slot='years']) {
       /* TODO get rid of fixed magic number */
-      --vaadin-infinite-scroller-buffer-width: 97px;
+      --vaadin-infinite-scroller-buffer-width: 57px;
       width: 57px;
-      height: auto;
-      top: 0;
-      bottom: 0;
       font-size: var(--lumo-font-size-s);
       box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
-      -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
       mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
       cursor: var(--lumo-clickable-cursor);
     }
 
-    ::slotted([slot='years']:hover) {
-      --_lumo-date-picker-year-opacity: 1;
-    }
-
-    /* TODO unsupported selector */
-    #scrollers {
-      position: static;
-      display: block;
+    :host([dir='rtl']) ::slotted([slot='years']) {
+      box-shadow: inset -2px 0 4px 0 var(--lumo-shade-5pct);
     }
 
-    /* TODO fix this in vaadin-date-picker that it adapts to the width of the year scroller */
-    :host([desktop]) ::slotted([slot='months']) {
-      right: auto;
+    ::slotted([slot='years']:hover) {
+      --_lumo-date-picker-year-opacity: 1;
     }
 
     /* Year scroller position indicator */
@@ -84,10 +75,14 @@ registerStyles(
       z-index: 1;
     }
 
+    :host([dir='rtl']) ::slotted([slot='years'])::before {
+      right: 0;
+      transform: translate(75%, -50%) rotate(45deg);
+    }
+
     [part='toolbar'] {
       padding: var(--lumo-space-s);
       border-bottom-left-radius: var(--lumo-border-radius-l);
-      margin-right: 57px;
     }
 
     [part='toolbar'] ::slotted(vaadin-button) {
@@ -97,24 +92,8 @@ registerStyles(
     /* Narrow viewport mode (fullscreen) */
 
     :host([fullscreen]) [part='toolbar'] {
-      order: -1;
       background-color: var(--lumo-base-color);
-    }
-
-    :host([fullscreen]) [part='overlay-header'] {
-      order: -2;
-      height: var(--lumo-size-m);
-      padding: var(--lumo-space-s);
-      position: absolute;
-      left: 0;
-      right: 0;
-      justify-content: center;
-    }
-
-    :host([fullscreen]) [part='toggle-button'],
-    :host([fullscreen]) [part='clear-button'],
-    [part='overlay-header'] [part='label'] {
-      display: none;
+      margin-inline-end: 57px;
     }
 
     /* Very narrow screen (year scroller initially hidden) */
@@ -122,10 +101,9 @@ registerStyles(
     [part='years-toggle-button'] {
       display: flex;
       align-items: center;
-      height: var(--lumo-size-s);
+      height: var(--lumo-size-m);
       padding: 0 0.5em;
       border-radius: var(--lumo-border-radius-m);
-      z-index: 3;
       color: var(--lumo-primary-text-color);
       font-weight: 500;
       -webkit-font-smoothing: antialiased;
@@ -143,21 +121,16 @@ registerStyles(
         background-image: none;
       }
 
-      [part='toolbar'],
-      ::slotted([slot='months']) {
-        margin-right: 0;
+      :host([fullscreen]) [part='toolbar'] {
+        margin-inline-end: 0;
       }
 
       /* TODO make date-picker adapt to the width of the years part */
       ::slotted([slot='years']) {
-        --vaadin-infinite-scroller-buffer-width: 90px;
+        --vaadin-infinite-scroller-buffer-width: 50px;
         width: 50px;
         background-color: var(--lumo-shade-5pct);
       }
-
-      :host([years-visible]) ::slotted([slot='months']) {
-        padding-left: 50px;
-      }
     }
   `,
   { moduleId: 'lumo-date-picker-overlay-content' },

package/theme/lumo/vaadin-date-picker-overlay-styles.js

@@ -29,7 +29,6 @@ const datePickerOverlay = css`
     padding: 0;
     height: 100%;
     overflow: hidden;
-    -webkit-mask-image: none;
     mask-image: none;
   }