@vaadin/date-picker 24.8.0-alpha8 → 25.0.0-alpha1

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

@@ -1,172 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/input-container/src/vaadin-lit-input-container.js';
-import './vaadin-lit-date-picker-overlay.js';
-import './vaadin-lit-date-picker-overlay-content.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 { 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';
-
-/**
- * LitElement based version of `<vaadin-date-picker>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))) {
-  static get is() {
-    return 'vaadin-date-picker';
-  }
-
-  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" @click="${this.focus}"></span>
-        </div>
-
-        <vaadin-input-container
-          part="input-field"
-          .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" @click="${this._toggle}"></div>
-        </vaadin-input-container>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-
-      <vaadin-date-picker-overlay
-        id="overlay"
-        ?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
-        no-vertical-overlap
-        .restoreFocusNode="${this.inputElement}"
-        .positionTarget="${this._positionTarget}"
-      ></vaadin-date-picker-overlay>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addController(
-      new InputController(
-        this,
-        (input) => {
-          this._setInputElement(input);
-          this._setFocusElement(input);
-          this.stateTarget = input;
-          this.ariaTarget = input;
-        },
-        {
-          // The "search" word is a trick to prevent Safari from enabling AutoFill,
-          // which is causing click issues:
-          // https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
-          uniqueIdPrefix: 'search-input',
-        },
-      ),
-    );
-    this.addController(new LabelledInputController(this.inputElement, this._labelController));
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-    this._tooltipController.setPosition('top');
-    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());
-  }
-
-  /** @private */
-  _onOpenedChanged(event) {
-    this.opened = event.detail.value;
-  }
-
-  /** @private */
-  _onVaadinOverlayClose(e) {
-    // Prevent closing the overlay on label element click
-    if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
-      e.preventDefault();
-    }
-  }
-
-  /** @private */
-  _toggle(e) {
-    e.stopPropagation();
-    if (this.$.overlay.opened) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-}
-
-defineCustomElement(DatePicker);
-
-export { DatePicker };

package/src/vaadin-lit-month-calendar.js

@@ -1,98 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
-import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
-
-/**
- * @extends HTMLElement
- * @private
- */
-class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(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">${this._getTitle(this.month, this.i18n)}</div>
-      <table
-        id="monthGrid"
-        role="grid"
-        aria-labelledby="month-header"
-        @touchend="${this._preventDefault}"
-        @touchstart="${this._onMonthGridTouchStart}"
-      >
-        <thead id="weekdays-container">
-          <tr role="row" part="weekdays">
-            <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">
-          ${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>
-    `;
-  }
-}
-
-defineCustomElement(MonthCalendar);

package/theme/lumo/vaadin-date-picker-light.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import '../../src/vaadin-date-picker-light.js';

package/theme/lumo/vaadin-date-picker-light.js

@@ -1,4 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import '../../src/vaadin-date-picker-light.js';

package/theme/lumo/vaadin-lit-date-picker.d.ts

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-lit-date-picker.js';

package/theme/lumo/vaadin-lit-date-picker.js

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-lit-date-picker.js';

package/theme/material/vaadin-date-picker-light.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import '../../src/vaadin-date-picker-light.js';

package/theme/material/vaadin-date-picker-light.js

@@ -1,4 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import '../../src/vaadin-date-picker-light.js';

package/theme/material/vaadin-date-picker-overlay-content-styles.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/button/theme/material/vaadin-button-styles.js';
-import './vaadin-date-picker-year-styles.js';

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

@@ -1,132 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/button/theme/material/vaadin-button-styles.js';
-import './vaadin-date-picker-year-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-date-picker-overlay-content',
-  css`
-    :host {
-      background: var(--material-background-color);
-      font-family: var(--material-font-family);
-      font-size: var(--material-body-font-size);
-      -webkit-text-size-adjust: 100%;
-      line-height: 1.4;
-    }
-
-    :host([fullscreen]) {
-      position: absolute;
-    }
-
-    [part='overlay-header'] {
-      display: flex;
-      align-items: baseline;
-      position: relative;
-      color: var(--material-body-text-color);
-      background: var(--material-secondary-background-color);
-      border-bottom: 2px solid var(--material-primary-color);
-      padding: 8px;
-      box-shadow: var(--material-shadow-elevation-4dp);
-    }
-
-    [part='label'] {
-      padding: 0 8px;
-      flex: auto;
-    }
-
-    [part='clear-button'],
-    [part='toggle-button'] {
-      font-family: 'material-icons';
-      font-size: var(--material-icon-font-size);
-      line-height: 24px;
-      width: 24px;
-      height: 24px;
-      text-align: center;
-      padding: 8px;
-      color: var(--material-secondary-text-color);
-    }
-
-    [part='clear-button']:hover,
-    [part='toggle-button']:hover,
-    [part='years-toggle-button']:hover {
-      color: inherit;
-    }
-
-    [part='clear-button']::before {
-      content: var(--material-icons-clear);
-    }
-
-    [part='toggle-button']::before {
-      content: var(--material-icons-calendar);
-    }
-
-    [part='years-toggle-button'] {
-      padding: 4px 8px;
-      font-size: var(--material-body-font-size);
-      font-weight: 500;
-      line-height: 24px;
-      letter-spacing: 0.05em;
-      color: var(--material-secondary-text-color);
-    }
-
-    [part='years-toggle-button']::after {
-      content: var(--material-icons-play);
-      display: inline-block;
-      width: 24px;
-      font-family: 'material-icons';
-      font-size: var(--material-icon-font-size);
-      line-height: 24px;
-      text-align: center;
-      transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    :host([years-visible]) [part='years-toggle-button']::after {
-      transform: rotate(90deg);
-    }
-
-    ::slotted([slot='months']) {
-      --vaadin-infinite-scroller-item-height: 328px;
-      text-align: center;
-    }
-
-    ::slotted([slot='years']) {
-      background: var(--material-secondary-text-color);
-      color: var(--material-background-color);
-      font-size: var(--material-body-font-size);
-      font-weight: 400;
-      line-height: 1.4;
-      text-align: center;
-    }
-
-    ::slotted([slot='years'])::before {
-      border: 0;
-      width: 8px;
-      height: 8px;
-      transform: translateX(-50%) rotate(-45deg);
-      background: var(--material-background-color);
-    }
-
-    [part='toolbar'] {
-      display: flex;
-      justify-content: flex-end;
-      padding: 8px 4px;
-      border-top: 1px solid var(--material-divider-color);
-    }
-
-    ::slotted([slot='cancel-button']) {
-      order: 1;
-    }
-
-    ::slotted([slot='today-button']) {
-      order: 2;
-    }
-
-    ::slotted(vaadin-button) {
-      margin: 0 4px;
-    }
-  `,
-  { moduleId: 'material-date-picker-overlay-content' },
-);

package/theme/material/vaadin-date-picker-overlay-styles.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,47 +0,0 @@
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const datePickerOverlay = css`
-  :host([fullscreen]) {
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-    top: 0 !important;
-    right: 0 !important;
-    bottom: var(--vaadin-overlay-viewport-bottom) !important;
-    left: 0 !important;
-    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
-    align-items: stretch;
-    justify-content: stretch;
-  }
-
-  [part='overlay'] {
-    overflow: hidden;
-    -webkit-overflow-scrolling: auto;
-  }
-
-  :host(:not([fullscreen])) [part='overlay'] {
-    width: 360px;
-    max-height: 500px;
-    border-radius: 0 4px 4px;
-  }
-
-  :host(:not([dir='rtl']):not([fullscreen])[end-aligned]) [part='overlay'],
-  :host([dir='rtl']:not([fullscreen])[start-aligned]) [part='overlay'] {
-    border-radius: 4px 0 4px 4px;
-  }
-
-  :host(:not([fullscreen])[bottom-aligned]) [part='overlay'] {
-    border-radius: 4px;
-  }
-
-  :host(:not([fullscreen])[show-week-numbers]) [part='overlay'] {
-    width: 396px;
-  }
-
-  [part='content'] {
-    padding: 0;
-  }
-`;
-
-registerStyles('vaadin-date-picker-overlay', [overlay, datePickerOverlay], {
-  moduleId: 'material-date-picker-overlay',
-});

package/theme/material/vaadin-date-picker-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';

package/theme/material/vaadin-date-picker-styles.js

@@ -1,22 +0,0 @@
-import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const datePicker = css`
-  :host {
-    display: inline-flex;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  [part='clear-button']::before {
-    content: var(--material-icons-clear);
-  }
-
-  [part='toggle-button']::before {
-    content: var(--material-icons-calendar);
-  }
-`;
-
-registerStyles('vaadin-date-picker', [inputFieldShared, datePicker], { moduleId: 'material-date-picker' });

package/theme/material/vaadin-date-picker-year-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-date-picker-year-styles.js

@@ -1,28 +0,0 @@
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-date-picker-year',
-  css`
-    [part='year-number'] {
-      font-size: var(--material-small-font-size);
-      line-height: 10px; /* NOTE(platosha): chosen to align years to months */
-    }
-
-    [part='year-separator'] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: calc(100% - 10px);
-    }
-
-    [part='year-separator']::before {
-      content: '';
-      background-color: currentColor;
-      width: 4px;
-      height: 4px;
-      border-radius: 50%;
-    }
-  `,
-  { moduleId: 'material-date-picker-year' },
-);

package/theme/material/vaadin-date-picker.d.ts

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-date-picker.js';

package/theme/material/vaadin-date-picker.js

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-date-picker.js';

package/theme/material/vaadin-lit-date-picker.d.ts

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-lit-date-picker.js';

package/theme/material/vaadin-lit-date-picker.js

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-lit-date-picker.js';

package/theme/material/vaadin-month-calendar-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';