@vaadin/date-picker 24.8.4 → 25.0.0-alpha10

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

@@ -1,112 +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 { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js';
-
-/**
- * Fired when the user commits a value change.
- */
-export type DatePickerLightChangeEvent = Event & {
-  target: DatePickerLight;
-};
-
-/**
- * Fired when the `opened` property changes.
- */
-export type DatePickerLightOpenedChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `invalid` property changes.
- */
-export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `value` property changes.
- */
-export type DatePickerLightValueChangedEvent = CustomEvent<{ value: string }>;
-
-/**
- * Fired whenever the field is validated.
- */
-export type DatePickerLightValidatedEvent = CustomEvent<{ valid: boolean }>;
-
-export interface DatePickerLightCustomEventMap {
-  'opened-changed': DatePickerLightOpenedChangedEvent;
-
-  'invalid-changed': DatePickerLightInvalidChangedEvent;
-
-  'value-changed': DatePickerLightValueChangedEvent;
-
-  validated: DatePickerLightValidatedEvent;
-}
-
-export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePickerLightCustomEventMap {
-  change: DatePickerLightChangeEvent;
-}
-
-/**
- * `<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing
- * only the scrollable month calendar view and leaving the input field definition to the user.
- *
- * To create a custom input field, you need to add a child element which has a two-way
- * data-bindable property representing the input value. The property name is expected
- * to be `bindValue` by default. See the example below for a simplest possible example
- * using an `<input>` element.
- *
- * ```html
- * <vaadin-date-picker-light attr-for-value="value">
- *   <input class="input">
- * </vaadin-date-picker-light>
- * ```
- *
- * ### Styling
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * In addition to `<vaadin-date-picker-light>` itself, the following
- * internal components are themable:
- *
- * - `<vaadin-date-picker-overlay>`
- * - `<vaadin-date-picker-overlay-content>`
- * - `<vaadin-month-calendar>`
- *
- * Note: the `theme` attribute value set on `<vaadin-date-picker-light>`
- * is propagated to the internal themable components listed above.
- *
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- * @fires {CustomEvent} validated - Fired whenever the field is validated.
- */
-declare class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(HTMLElement))) {
-  /**
-   * Name of the two-way data-bindable property representing the
-   * value of the custom input field.
-   */
-  attrForValue: string;
-
-  addEventListener<K extends keyof DatePickerLightEventMap>(
-    type: K,
-    listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: AddEventListenerOptions | boolean,
-  ): void;
-
-  removeEventListener<K extends keyof DatePickerLightEventMap>(
-    type: K,
-    listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: EventListenerOptions | boolean,
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-date-picker-light': DatePickerLight;
-  }
-}
-
-export { DatePickerLight };

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

@@ -1,136 +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-date-picker-overlay-content.js';
-import './vaadin-date-picker-overlay.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-
-function dashToCamelCase(dash) {
-  return dash.replace(/-[a-z]/gu, (m) => m[1].toUpperCase());
-}
-
-/**
- * `<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing
- * only the scrollable month calendar view and leaving the input field definition to the user.
- *
- * To create a custom input field, you need to add a child element which has a two-way
- * data-bindable property representing the input value. The property name is expected
- * to be `bindValue` by default. See the example below for a simplest possible example
- * using an `<input>` element.
- *
- * ```html
- * <vaadin-date-picker-light attr-for-value="value">
- *   <input class="input">
- * </vaadin-date-picker-light>
- * ```
- *
- * ### Styling
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * In addition to `<vaadin-date-picker-light>` itself, the following
- * internal components are themable:
- *
- * - `<vaadin-date-picker-overlay>`
- * - `<vaadin-date-picker-overlay-content>`
- * - `<vaadin-month-calendar>`
- *
- * Note: the `theme` attribute value set on `<vaadin-date-picker-light>`
- * is propagated to the internal themable components listed above.
- *
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- * @fires {CustomEvent} validated - Fired whenever the field is validated.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DatePickerMixin
- */
-class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
-
-        :host([opened]) {
-          pointer-events: auto;
-        }
-      </style>
-      <slot></slot>
-
-      <vaadin-date-picker-overlay
-        id="overlay"
-        fullscreen$="[[_fullscreen]]"
-        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]]"
-        theme$="[[_theme]]"
-      ></vaadin-date-picker-overlay>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-date-picker-light';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Name of the two-way data-bindable property representing the
-       * value of the custom input field.
-       * @attr {string} attr-for-value
-       * @type {string}
-       */
-      attrForValue: {
-        type: String,
-        value: 'value',
-      },
-    };
-  }
-
-  /**
-   * This method from InputMixin is overridden to make
-   * the input element value property customizable.
-   *
-   * @protected
-   * @override
-   * @return {string}
-   */
-  get _inputElementValueProperty() {
-    return dashToCamelCase(this.attrForValue);
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    const cssSelector = 'vaadin-text-field,.input';
-    this._setInputElement(this.querySelector(cssSelector));
-    this._setFocusElement(this.inputElement);
-  }
-
-  // Workaround https://github.com/vaadin/web-components/issues/2855
-  /** @protected */
-  _openedChanged(opened) {
-    super._openedChanged(opened);
-
-    this.$.overlay.positionTarget = this.inputElement;
-    this.$.overlay.noVerticalOverlap = true;
-  }
-}
-
-defineCustomElement(DatePickerLight);
-
-export { DatePickerLight };

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

@@ -1,68 +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 { css } from 'lit';
-
-export const overlayContentStyles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    outline: none;
-  }
-
-  [part='overlay-header'] {
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: nowrap;
-    align-items: center;
-  }
-
-  :host(:not([fullscreen])) [part='overlay-header'] {
-    display: none;
-  }
-
-  [part='label'] {
-    flex-grow: 1;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  [part='years-toggle-button'] {
-    display: flex;
-  }
-
-  #scrollers {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-  }
-
-  :host([desktop]) ::slotted([slot='months']) {
-    right: 50px;
-    transform: none !important;
-  }
-
-  :host([desktop]) ::slotted([slot='years']) {
-    transform: none !important;
-  }
-
-  :host(.animate) ::slotted([slot='months']),
-  :host(.animate) ::slotted([slot='years']) {
-    transition: all 200ms;
-  }
-
-  [part='toolbar'] {
-    display: flex;
-    justify-content: space-between;
-    z-index: 2;
-    flex-shrink: 0;
-  }
-`;

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

@@ -1,35 +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/
- */
-
-/**
- * @polymerMixin
- */
-export const DatePickerYearMixin = (superClass) =>
-  class DatePickerYearMixin extends superClass {
-    static get properties() {
-      return {
-        year: {
-          type: String,
-          sync: true,
-        },
-
-        selectedDate: {
-          type: Object,
-          sync: true,
-        },
-      };
-    }
-
-    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());
-    }
-  };

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

@@ -1,70 +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/button/src/vaadin-lit-button.js';
-import './vaadin-date-picker-month-scroller.js';
-import './vaadin-date-picker-year-scroller.js';
-import './vaadin-lit-date-picker-year.js';
-import './vaadin-lit-month-calendar.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 { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
-import { overlayContentStyles } from './vaadin-date-picker-overlay-content-styles.js';
-
-/**
- * @extends HTMLElement
- * @private
- */
-class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
-  ThemableMixin(DirMixin(PolylitMixin(LitElement))),
-) {
-  static get is() {
-    return 'vaadin-date-picker-overlay-content';
-  }
-
-  static get styles() {
-    return overlayContentStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="overlay-header" @touchend="${this._preventDefault}" aria-hidden="true">
-        <div part="label">${this._formatDisplayed(this.selectedDate, this.i18n, this.label)}</div>
-        <div part="clear-button" ?hidden="${!this.selectedDate}"></div>
-        <div part="toggle-button"></div>
-
-        <div part="years-toggle-button" ?hidden="${this._desktopMode}" aria-hidden="true">
-          ${this._yearAfterXMonths(this._visibleMonthIndex)}
-        </div>
-      </div>
-
-      <div id="scrollers">
-        <slot name="months"></slot>
-        <slot name="years"></slot>
-      </div>
-
-      <div @touchend="${this._preventDefault}" role="toolbar" part="toolbar">
-        <slot name="today-button"></slot>
-        <slot name="cancel-button"></slot>
-      </div>
-    `;
-  }
-
-  /** @protected */
-  firstUpdated() {
-    super.firstUpdated();
-
-    this.setAttribute('role', 'dialog');
-
-    this._addListeners();
-    this._initControllers();
-  }
-}
-
-defineCustomElement(DatePickerOverlayContent);

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

@@ -1,46 +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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
-import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
-
-/**
- * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes DatePickerOverlayMixin
- * @mixes DirMixin
- * @mixes ThemableMixin
- * @private
- */
-class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-date-picker-overlay';
-  }
-
-  static get styles() {
-    return [overlayStyles, datePickerOverlayStyles];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(DatePickerOverlay);

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

@@ -1,41 +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 { css, 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 { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
-
-/**
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DatePickerYearMixin
- * @private
- */
-export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolylitMixin(LitElement))) {
-  static get is() {
-    return 'vaadin-date-picker-year';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="year-number">${this.year}</div>
-      <div part="year-separator" aria-hidden="true"></div>
-    `;
-  }
-}
-
-defineCustomElement(DatePickerYear);

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 };