@vaadin/date-picker 24.8.4 → 25.0.0-alpha10

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

package/theme/material/vaadin-month-calendar-styles.js

@@ -1,120 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-month-calendar',
-  css`
-    :host {
-      color: var(--material-body-text-color);
-      padding: 0 calc(50% / 8 - 0.5em + 8px);
-    }
-
-    :host([show-week-numbers]) {
-      padding: 0 calc(50% / 9 - 0.5em + 8px);
-    }
-
-    [part='month-header'] {
-      font-size: var(--material-h6-font-size);
-      line-height: 1;
-      padding-top: 20px;
-      margin-bottom: 8px;
-    }
-
-    [part='week-number'],
-    [part='weekday'] {
-      font-size: var(--material-caption-font-size);
-      line-height: 44px;
-      height: 40px;
-      color: var(--material-secondary-text-color);
-    }
-
-    :host([disabled]),
-    :host([disabled]) [part='week-number'],
-    :host([disabled]) [part='weekday'] {
-      color: var(--material-disabled-text-color);
-    }
-
-    [part~='date'] {
-      position: relative;
-      font-size: var(--material-body-font-size);
-      line-height: 42px;
-      height: 40px;
-      cursor: default;
-    }
-
-    [part~='date']::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 38px;
-      height: 38px;
-      box-sizing: border-box;
-      border-radius: 50%;
-      border: 2px solid transparent;
-    }
-
-    /* Today */
-
-    [part~='date'][part~='today'] {
-      color: var(--material-primary-text-color);
-    }
-
-    /* Hover */
-
-    [part~='date']:not([part~='disabled']):hover::after {
-      background-color: var(--material-secondary-background-color);
-      border-color: var(--material-secondary-background-color);
-      z-index: -3;
-    }
-
-    /* Hide for touch devices */
-    @media (hover: none) {
-      [part~='date']:not([part~='disabled']):hover::after {
-        background-color: transparent;
-        border-color: transparent;
-        z-index: -4;
-      }
-    }
-
-    /* Selected */
-
-    [part~='date'][part~='selected'] {
-      font-weight: 500;
-    }
-
-    [part~='date']:not([part~='disabled'])[part~='selected']::after,
-    [part~='date'][part~='selected']::after {
-      background-color: transparent;
-      border-color: currentColor;
-      z-index: -2;
-    }
-
-    /* Focused */
-
-    [part~='date']:not([part~='disabled'])[part~='focused'],
-    [part~='date']:not([part~='disabled']):active {
-      color: var(--material-primary-contrast-color);
-    }
-
-    [part~='date']:not([part~='disabled'])[part~='focused']::after,
-    [part~='date']:not([part~='disabled']):active::after {
-      opacity: 0.7;
-      background-color: var(--material-primary-color);
-      border-color: var(--material-primary-color);
-      z-index: -1;
-    }
-
-    [part~='date'][part~='disabled'] {
-      color: var(--material-disabled-text-color);
-    }
-
-    :host([focused]) [part~='date']:not([part~='disabled'])[part~='focused']::after {
-      opacity: 1;
-    }
-  `,
-  { moduleId: 'material-date-picker-month-calendar' },
-);

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

@@ -1 +0,0 @@
-export * from './src/vaadin-date-picker-light.js';

package/vaadin-date-picker-light.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-date-picker-light.js';
-export * from './src/vaadin-date-picker-light.js';

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

@@ -1 +0,0 @@
-export * from './src/vaadin-date-picker.js';

package/vaadin-lit-date-picker.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-date-picker.js';
-export * from './src/vaadin-lit-date-picker.js';