@vaadin/date-picker 25.0.0-alpha2 → 25.0.0-alpha20

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

@@ -1,2 +0,0 @@
-import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';

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

@@ -1,30 +0,0 @@
-import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const datePicker = css`
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-calendar);
-  }
-
-  [part='clear-button']::before {
-    content: var(--lumo-icons-cross);
-  }
-
-  @media (max-width: 450px), (max-height: 450px) {
-    [part='overlay-content'] {
-      height: 70vh;
-    }
-  }
-
-  :host([dir='rtl']) [part='input-field'] ::slotted(input) {
-    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-  }
-
-  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
-    --_lumo-text-field-overflow-mask-image: none;
-  }
-`;
-
-registerStyles('vaadin-date-picker', [inputFieldShared, datePicker], { moduleId: 'lumo-date-picker' });

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

@@ -1 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';

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

@@ -1,32 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-date-picker-year',
-  css`
-    :host([current]) [part='year-number'] {
-      color: var(--lumo-primary-text-color);
-    }
-
-    :host(:not([current])) [part='year-number'],
-    [part='year-separator'] {
-      opacity: var(--_lumo-date-picker-year-opacity, 0.7);
-      transition: 0.2s opacity;
-    }
-
-    [part='year-number'],
-    [part='year-separator'] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 50%;
-      transform: translateY(-50%);
-    }
-
-    [part='year-separator']::after {
-      color: var(--lumo-disabled-text-color);
-      content: '\\2022';
-    }
-  `,
-  { moduleId: 'lumo-date-picker-year' },
-);

package/theme/lumo/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/lumo/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/lumo/vaadin-month-calendar-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,158 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-month-calendar',
-  css`
-    :host {
-      -webkit-user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      user-select: none;
-      font-size: var(--lumo-font-size-m);
-      color: var(--lumo-body-text-color);
-      text-align: center;
-      padding: 0 var(--lumo-space-xs);
-      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-      --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
-      --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
-    }
-
-    /* Month header */
-
-    [part='month-header'] {
-      color: var(--lumo-header-text-color);
-      font-size: var(--lumo-font-size-l);
-      line-height: 1;
-      font-weight: 500;
-      margin-bottom: var(--lumo-space-m);
-    }
-
-    /* Week days and numbers */
-
-    [part='weekdays'],
-    [part='weekday'],
-    [part='week-number'] {
-      font-size: var(--lumo-font-size-xxs);
-      line-height: 1;
-      color: var(--lumo-secondary-text-color);
-    }
-
-    [part='weekdays'] {
-      margin-bottom: var(--lumo-space-s);
-    }
-
-    [part='weekday']:empty,
-    [part='week-number'] {
-      width: var(--lumo-size-xs);
-    }
-
-    /* Date and week number cells */
-
-    [part~='date'],
-    [part='week-number'] {
-      box-sizing: border-box;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      height: var(--lumo-size-m);
-      position: relative;
-    }
-
-    [part~='date'] {
-      transition: color 0.1s;
-    }
-
-    [part~='date']:not(:empty) {
-      cursor: var(--lumo-clickable-cursor);
-    }
-
-    :host([week-numbers]) [part='weekday']:not(:empty),
-    :host([week-numbers]) [part~='date'] {
-      width: calc((100% - var(--lumo-size-xs)) / 7);
-    }
-
-    /* Today date */
-
-    [part~='date'][part~='today'] {
-      color: var(--_selection-color-text);
-    }
-
-    /* Focused date */
-
-    [part~='date']::before {
-      content: '';
-      position: absolute;
-      z-index: -1;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      min-width: 2em;
-      min-height: 2em;
-      width: 80%;
-      height: 80%;
-      max-height: 100%;
-      max-width: 100%;
-      border-radius: var(--lumo-border-radius-m);
-    }
-
-    [part~='date'][part~='focused']::before {
-      box-shadow:
-        0 0 0 1px var(--lumo-base-color),
-        0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
-    }
-
-    :host(:not([focused])) [part~='date'][part~='focused']::before {
-      animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
-    }
-
-    @keyframes vaadin-date-picker-month-calendar-focus-date {
-      50% {
-        box-shadow:
-          0 0 0 1px var(--lumo-base-color),
-          0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
-      }
-    }
-
-    [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
-      background-color: var(--lumo-primary-color-10pct);
-    }
-
-    [part~='date'][part~='selected'] {
-      color: var(--lumo-primary-contrast-color);
-    }
-
-    [part~='date'][part~='selected']::before {
-      background-color: var(--_selection-color);
-    }
-
-    [part~='date'][part~='disabled'] {
-      color: var(--lumo-disabled-text-color);
-    }
-
-    @media (pointer: coarse) {
-      [part~='date']:hover:not([part~='selected'])::before,
-      :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::before {
-        display: none;
-      }
-
-      [part~='date']:not(:empty):not([part~='disabled']):active::before {
-        display: block;
-      }
-
-      :host(:not([focus-ring])) [part~='date'][part~='selected']::before {
-        box-shadow: none;
-      }
-    }
-    /* Disabled */
-
-    :host([disabled]) * {
-      color: var(--lumo-disabled-text-color) !important;
-    }
-  `,
-  { moduleId: 'lumo-month-calendar' },
-);