@vaadin/date-picker 23.3.3 → 24.0.0-alpha10

package/src/vaadin-infinite-scroller.js

@@ -1,20 +1,20 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
 /**
  * @extends HTMLElement
  * @private
  */
-class InfiniteScroller extends PolymerElement {
+export class InfiniteScroller extends PolymerElement {
   static get template() {
     return html`
       <style>
@@ -69,10 +69,6 @@ class InfiniteScroller extends PolymerElement {
     `;
   }
 
-  static get is() {
-    return 'vaadin-infinite-scroller';
-  }
-
   static get properties() {
     return {
       /**
@@ -122,6 +118,71 @@ class InfiniteScroller extends PolymerElement {
     };
   }
 
+  /**
+   * @return {number}
+   */
+  get bufferOffset() {
+    return this._buffers[0].offsetTop;
+  }
+
+  /**
+   * @return {number}
+   */
+  get itemHeight() {
+    if (!this._itemHeightVal) {
+      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
+      // Use background-position temp inline style for unit conversion
+      const tmpStyleProp = 'background-position';
+      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
+      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
+      this.$.fullHeight.style.removeProperty(tmpStyleProp);
+      this._itemHeightVal = parseFloat(itemHeightPx);
+    }
+
+    return this._itemHeightVal;
+  }
+
+  /** @private */
+  get _bufferHeight() {
+    return this.itemHeight * this.bufferSize;
+  }
+
+  /**
+   * @return {number}
+   */
+  get position() {
+    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
+  }
+
+  /**
+   * Current scroller position as index. Can be a fractional number.
+   *
+   * @type {number}
+   */
+  set position(index) {
+    this._preventScrollEvent = true;
+    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
+      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
+    } else {
+      this._initialIndex = ~~index;
+      this._reset();
+      this._scrollDisabled = true;
+      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 */
   ready() {
     super.ready();
@@ -130,19 +191,6 @@ class InfiniteScroller extends PolymerElement {
 
     this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
 
-    const tpl = this.querySelector('template');
-    this._TemplateClass = templatize(tpl, this, {
-      forwardHostProp(prop, value) {
-        if (prop !== 'index') {
-          this._buffers.forEach((buffer) => {
-            [...buffer.children].forEach((slot) => {
-              slot._itemWrapper.instance[prop] = value;
-            });
-          });
-        }
-      },
-    });
-
     // Firefox interprets elements with overflow:auto as focusable
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
     if (isFirefox) {
@@ -162,6 +210,24 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  _createElement() {
+    // To be implemented.
+  }
+
+  /**
+   * @param {HTMLElement} _element
+   * @param {number} _index
+   * @protected
+   * @override
+   */
+  _updateElement(_element, _index) {
+    // To be implemented.
+  }
+
   /** @private */
   _activated(active) {
     if (active && !this._initialized) {
@@ -185,6 +251,7 @@ class InfiniteScroller extends PolymerElement {
       }
 
       this._initDone = true;
+      this.dispatchEvent(new CustomEvent('init-done'));
     }
   }
 
@@ -234,71 +301,6 @@ class InfiniteScroller extends PolymerElement {
     });
   }
 
-  /**
-   * @return {number}
-   */
-  get bufferOffset() {
-    return this._buffers[0].offsetTop;
-  }
-
-  /**
-   * @return {number}
-   */
-  get position() {
-    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
-  }
-
-  /**
-   * Current scroller position as index. Can be a fractional number.
-   *
-   * @type {number}
-   */
-  set position(index) {
-    this._preventScrollEvent = true;
-    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
-      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
-    } else {
-      this._initialIndex = ~~index;
-      this._reset();
-      this._scrollDisabled = true;
-      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);
-    }
-  }
-
-  /**
-   * @return {number}
-   */
-  get itemHeight() {
-    if (!this._itemHeightVal) {
-      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
-      // Use background-position temp inline style for unit conversion
-      const tmpStyleProp = 'background-position';
-      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
-      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
-      this.$.fullHeight.style.removeProperty(tmpStyleProp);
-      this._itemHeightVal = parseFloat(itemHeightPx);
-    }
-
-    return this._itemHeightVal;
-  }
-
-  /** @private */
-  get _bufferHeight() {
-    return this.itemHeight * this.bufferSize;
-  }
-
   /** @private */
   _reset() {
     this._scrollDisabled = true;
@@ -328,8 +330,7 @@ class InfiniteScroller extends PolymerElement {
         itemWrapper.style.height = `${this.itemHeight}px`;
         itemWrapper.instance = {};
 
-        const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
-        const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
+        const slotName = `vaadin-infinite-scroller-item-content-${generateUniqueId()}`;
 
         const slot = document.createElement('slot');
         slot.setAttribute('name', slotName);
@@ -339,18 +340,16 @@ class InfiniteScroller extends PolymerElement {
         itemWrapper.setAttribute('slot', slotName);
         this.appendChild(itemWrapper);
 
-        setTimeout(() => {
-          // Only stamp the visible instances first
-          if (this._isVisible(itemWrapper, container)) {
-            this._ensureStampedInstance(itemWrapper);
-          }
-        }, 1); // Wait for first reset
+        // Only stamp the visible instances first
+        if (this._isVisible(itemWrapper, container)) {
+          this._ensureStampedInstance(itemWrapper);
+        }
       }
     });
 
-    setTimeout(() => {
-      afterNextRender(this, this._finishInit.bind(this));
-    }, 1);
+    afterNextRender(this, () => {
+      this._finishInit();
+    });
   }
 
   /** @private */
@@ -361,8 +360,8 @@ class InfiniteScroller extends PolymerElement {
 
     const tmpInstance = itemWrapper.instance;
 
-    itemWrapper.instance = new this._TemplateClass({});
-    itemWrapper.appendChild(itemWrapper.instance.root);
+    itemWrapper.instance = this._createElement();
+    itemWrapper.appendChild(itemWrapper.instance);
 
     Object.keys(tmpInstance).forEach((prop) => {
       itemWrapper.instance.set(prop, tmpInstance[prop]);
@@ -381,7 +380,7 @@ class InfiniteScroller extends PolymerElement {
         [...buffer.children].forEach((slot, index) => {
           const itemWrapper = slot._itemWrapper;
           if (!viewPortOnly || this._isVisible(itemWrapper, scrollerRect)) {
-            itemWrapper.instance.index = firstIndex + index;
+            this._updateElement(itemWrapper.instance, firstIndex + index);
           }
         });
         buffer.updated = true;
@@ -395,5 +394,3 @@ class InfiniteScroller extends PolymerElement {
     return rect.bottom > container.top && rect.top < container.bottom;
   }
 }
-
-customElements.define(InfiniteScroller.is, InfiniteScroller);

package/src/vaadin-month-calendar.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 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';
@@ -32,17 +32,21 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
           display: flex;
         }
 
-        [part='date'] {
+        [part~='date'] {
           outline: none;
         }
 
+        [part~='disabled'] {
+          pointer-events: none;
+        }
+
         [part='week-number'][hidden],
         [part='weekday'][hidden] {
           display: none;
         }
 
         [part='weekday'],
-        [part='date'] {
+        [part~='date'] {
           width: calc(100% / 7);
           padding: 0;
           font-weight: normal;
@@ -56,7 +60,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
         }
 
         :host([week-numbers]) [part='weekday']:not(:empty),
-        :host([week-numbers]) [part='date'] {
+        :host([week-numbers]) [part~='date'] {
           width: 12.5%;
         }
       </style>
@@ -99,12 +103,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
               <template is="dom-repeat" items="[[week]]">
                 <td
                   role="gridcell"
-                  part="date"
+                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate)]]"
                   date="[[item]]"
-                  today$="[[_isToday(item)]]"
-                  focused$="[[__isDayFocused(item, focusedDate)]]"
                   tabindex$="[[__getDayTabindex(item, focusedDate)]]"
-                  selected$="[[__isDaySelected(item, selectedDate)]]"
                   disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
                   aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
                   aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
@@ -204,18 +205,18 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     ];
   }
 
+  get focusableDateElement() {
+    return [...this.shadowRoot.querySelectorAll('[part~=date]')].find((datePart) => {
+      return dateEquals(datePart.date, this.focusedDate);
+    });
+  }
+
   /** @protected */
   ready() {
     super.ready();
     addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
   }
 
-  get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('[part=date]')].find((datePart) => {
-      return dateEquals(datePart.date, this.focusedDate);
-    });
-  }
-
   /* Returns true if all the dates in the month are out of the allowed range */
   _isDisabled(month, minDate, maxDate) {
     // First day of the month
@@ -369,6 +370,28 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     e.preventDefault();
   }
 
+  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
+    const result = ['date'];
+
+    if (this.__isDayDisabled(date, minDate, maxDate)) {
+      result.push('disabled');
+    }
+
+    if (this.__isDayFocused(date, focusedDate)) {
+      result.push('focused');
+    }
+
+    if (this.__isDaySelected(date, selectedDate)) {
+      result.push('selected');
+    }
+
+    if (this._isToday(date)) {
+      result.push('today');
+    }
+
+    return result.join(' ');
+  }
+
   __getWeekNumber(days) {
     const date = days.reduce((acc, d) => {
       return !acc && d ? d : acc;

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

@@ -4,6 +4,7 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/button/theme/lumo/vaadin-button.js';
+import './vaadin-date-picker-year-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -19,9 +20,7 @@ registerStyles(
       cursor: default;
     }
 
-    /* Month scroller */
-
-    [part='months'] {
+    ::slotted([slot='months']) {
       /* Month calendar height:
               header height + margin-bottom
             + weekdays height + margin-bottom
@@ -43,8 +42,7 @@ registerStyles(
       margin-right: 57px;
     }
 
-    /* Year scroller */
-    [part='years'] {
+    ::slotted([slot='years']) {
       /* TODO get rid of fixed magic number */
       --vaadin-infinite-scroller-buffer-width: 97px;
       width: 57px;
@@ -58,15 +56,8 @@ registerStyles(
       cursor: var(--lumo-clickable-cursor);
     }
 
-    [part='year-number']:not([current]),
-    [part='year-separator'] {
-      opacity: 0.7;
-      transition: 0.2s opacity;
-    }
-
-    [part='years']:hover [part='year-number'],
-    [part='years']:hover [part='year-separator'] {
-      opacity: 1;
+    ::slotted([slot='years']:hover) {
+      --_lumo-date-picker-year-opacity: 1;
     }
 
     /* TODO unsupported selector */
@@ -75,14 +66,13 @@ registerStyles(
       display: block;
     }
 
-    /* TODO unsupported selector, should fix this in vaadin-date-picker that it adapts to the
-       * width of the year scroller */
-    #scrollers[desktop] [part='months'] {
+    /* TODO fix this in vaadin-date-picker that it adapts to the width of the year scroller */
+    :host([desktop]) ::slotted([slot='months']) {
       right: auto;
     }
 
     /* Year scroller position indicator */
-    [part='years']::before {
+    ::slotted([slot='years'])::before {
       border: none;
       width: 1em;
       height: 1em;
@@ -94,37 +84,13 @@ registerStyles(
       z-index: 1;
     }
 
-    [part='year-number'],
-    [part='year-separator'] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 50%;
-      transform: translateY(-50%);
-    }
-
-    [part='years'] [part='year-separator']::after {
-      color: var(--lumo-disabled-text-color);
-      content: '•';
-    }
-
-    /* Current year */
-
-    [part='years'] [part='year-number'][current] {
-      color: var(--lumo-primary-text-color);
-    }
-
-    /* Toolbar (footer) */
-
     [part='toolbar'] {
       padding: var(--lumo-space-s);
       border-bottom-left-radius: var(--lumo-border-radius-l);
       margin-right: 57px;
     }
 
-    /* Today and Cancel buttons */
-
-    [part='toolbar'] [part\$='button'] {
+    [part='toolbar'] ::slotted(vaadin-button) {
       margin: 0;
     }
 
@@ -177,22 +143,19 @@ registerStyles(
         background-image: none;
       }
 
-      [part='years'] {
-        background-color: var(--lumo-shade-5pct);
-      }
-
       [part='toolbar'],
-      [part='months'] {
+      ::slotted([slot='months']) {
         margin-right: 0;
       }
 
       /* TODO make date-picker adapt to the width of the years part */
-      [part='years'] {
+      ::slotted([slot='years']) {
         --vaadin-infinite-scroller-buffer-width: 90px;
         width: 50px;
+        background-color: var(--lumo-shade-5pct);
       }
 
-      :host([years-visible]) [part='months'] {
+      :host([years-visible]) ::slotted([slot='months']) {
         padding-left: 50px;
       }
     }

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

@@ -0,0 +1,32 @@
+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: '•';
+    }
+  `,
+  { moduleId: 'lumo-date-picker-year' },
+);

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

@@ -50,7 +50,7 @@ registerStyles(
 
     /* Date and week number cells */
 
-    [part='date'],
+    [part~='date'],
     [part='week-number'] {
       box-sizing: border-box;
       display: inline-flex;
@@ -60,28 +60,28 @@ registerStyles(
       position: relative;
     }
 
-    [part='date'] {
+    [part~='date'] {
       transition: color 0.1s;
     }
 
-    [part='date']:not(:empty) {
+    [part~='date']:not(:empty) {
       cursor: var(--lumo-clickable-cursor);
     }
 
     :host([week-numbers]) [part='weekday']:not(:empty),
-    :host([week-numbers]) [part='date'] {
+    :host([week-numbers]) [part~='date'] {
       width: calc((100% - var(--lumo-size-xs)) / 7);
     }
 
     /* Today date */
 
-    [part='date'][today] {
+    [part~='date'][part~='today'] {
       color: var(--lumo-primary-text-color);
     }
 
     /* Focused date */
 
-    [part='date']::before {
+    [part~='date']::before {
       content: '';
       position: absolute;
       z-index: -1;
@@ -97,11 +97,11 @@ registerStyles(
       border-radius: var(--lumo-border-radius-m);
     }
 
-    [part='date'][focused]::before {
+    [part~='date'][part~='focused']::before {
       box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
     }
 
-    :host(:not([focused])) [part='date'][focused]::before {
+    :host(:not([focused])) [part~='date'][part~='focused']::before {
       animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
     }
 
@@ -111,33 +111,33 @@ registerStyles(
       }
     }
 
-    [part='date']:not(:empty):not([disabled]):not([selected]):hover::before {
+    [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
       background-color: var(--lumo-primary-color-10pct);
     }
 
-    [part='date'][selected] {
+    [part~='date'][part~='selected'] {
       color: var(--lumo-primary-contrast-color);
     }
 
-    [part='date'][selected]::before {
+    [part~='date'][part~='selected']::before {
       background-color: var(--lumo-primary-color);
     }
 
-    [part='date'][disabled] {
+    [part~='date'][part~='disabled'] {
       color: var(--lumo-disabled-text-color);
     }
 
     @media (pointer: coarse) {
-      [part='date']:hover:not([selected])::before,
-      [part='date'][focused]:not([selected])::before {
+      [part~='date']:hover:not([part~='selected'])::before,
+      [part~='focused']:not([part~='selected'])::before {
         display: none;
       }
 
-      [part='date']:not(:empty):not([disabled]):active::before {
+      [part~='date']:not(:empty):not([part~='disabled']):active::before {
         display: block;
       }
 
-      [part='date'][selected]::before {
+      [part~='date'][part~='selected']::before {
         box-shadow: none;
       }
     }