@vaadin/date-picker 24.2.0-dev.f254716fe → 24.3.0-alpha2

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const datePickerOverlayStyles = css`
+  [part='overlay'] {
+    display: flex;
+    flex: auto;
+  }
+
+  [part~='content'] {
+    flex: auto;
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid;
+    }
+  }
+`;

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

@@ -4,28 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const datePickerOverlayStyles = css`
-  [part='overlay'] {
-    display: flex;
-    flex: auto;
-  }
-
-  [part~='content'] {
-    flex: auto;
-  }
-
-  @media (forced-colors: active) {
-    [part='overlay'] {
-      outline: 3px solid;
-    }
-  }
-`;
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
 
 registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlayStyles], {
   moduleId: 'vaadin-date-picker-overlay-styles',
@@ -34,7 +19,12 @@ registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlaySt
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
- * @extends Overlay
+ * @customElement
+ * @extends HTMLElement
+ * @mixes PositionMixin
+ * @mixes OverlayMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
  * @private
  */
 class DatePickerOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
@@ -54,4 +44,4 @@ class DatePickerOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixi
   }
 }
 
-customElements.define(DatePickerOverlay.is, DatePickerOverlay);
+defineCustomElement(DatePickerOverlay);

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const datePickerStyles = css`
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  :host([dir='rtl']) [part='input-field'] {
+    direction: ltr;
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+    direction: rtl;
+    text-align: left;
+  }
+`;

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

@@ -3,10 +3,11 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { InfiniteScroller } from './vaadin-infinite-scroller.js';
 
-const stylesTemplate = html`
+const stylesTemplate = document.createElement('template');
+stylesTemplate.innerHTML = `
   <style>
     :host {
       --vaadin-infinite-scroller-item-height: 80px;
@@ -42,13 +43,11 @@ const stylesTemplate = html`
   </style>
 `;
 
-let memoizedTemplate;
-
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends InfiniteScroller
- * @mixes ThemableMixin
  * @private
  */
 class DatePickerYearScroller extends InfiniteScroller {
@@ -56,22 +55,11 @@ class DatePickerYearScroller extends InfiniteScroller {
     return 'vaadin-date-picker-year-scroller';
   }
 
-  static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-      memoizedTemplate.content.appendChild(stylesTemplate.content.cloneNode(true));
-    }
-
-    return memoizedTemplate;
-  }
+  constructor() {
+    super();
 
-  static get properties() {
-    return {
-      bufferSize: {
-        type: Number,
-        value: 12,
-      },
-    };
+    this.bufferSize = 12;
+    this.shadowRoot.appendChild(stylesTemplate.content.cloneNode(true));
   }
 
   /**
@@ -101,4 +89,4 @@ class DatePickerYearScroller extends InfiniteScroller {
   }
 }
 
-customElements.define(DatePickerYearScroller.is, DatePickerYearScroller);
+defineCustomElement(DatePickerYearScroller);

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

@@ -4,11 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @private
@@ -54,4 +56,4 @@ export class DatePickerYear extends ThemableMixin(PolymerElement) {
   }
 }
 
-customElements.define(DatePickerYear.is, DatePickerYear);
+defineCustomElement(DatePickerYear);

package/src/vaadin-date-picker.js

@@ -7,6 +7,7 @@ import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -15,8 +16,9 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, 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';
 
-registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-picker-styles' });
+registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { moduleId: 'vaadin-date-picker-styles' });
 
 /**
  * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
@@ -122,6 +124,7 @@ registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
@@ -135,21 +138,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   static get template() {
     return html`
-      <style>
-        :host([opened]) {
-          pointer-events: auto;
-        }
-
-        :host([dir='rtl']) [part='input-field'] {
-          direction: ltr;
-        }
-
-        :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
-          direction: rtl;
-          text-align: left;
-        }
-      </style>
-
       <div class="vaadin-date-picker-container">
         <div part="label">
           <slot name="label"></slot>
@@ -220,6 +208,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
     this._tooltipController.setPosition('top');
+    this._tooltipController.setAriaTarget(this.inputElement);
     this._tooltipController.setShouldShow((target) => !target.opened);
 
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
@@ -255,6 +244,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
   }
 }
 
-customElements.define(DatePicker.is, DatePicker);
+defineCustomElement(DatePicker);
 
 export { DatePicker };

package/src/vaadin-infinite-scroller.js

@@ -3,119 +3,118 @@
  * 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 { 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
- */
-export class InfiniteScroller extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          overflow: hidden;
-          height: 500px;
-        }
-
-        #scroller {
-          position: relative;
-          height: 100%;
-          overflow: auto;
-          outline: none;
-          margin-right: -40px;
-          -webkit-overflow-scrolling: touch;
-          overflow-x: hidden;
-        }
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      overflow: hidden;
+      height: 500px;
+    }
 
-        #scroller.notouchscroll {
-          -webkit-overflow-scrolling: auto;
-        }
+    #scroller {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+      outline: none;
+      margin-right: -40px;
+      -webkit-overflow-scrolling: touch;
+      overflow-x: hidden;
+    }
 
-        #scroller::-webkit-scrollbar {
-          display: none;
-        }
+    #scroller.notouchscroll {
+      -webkit-overflow-scrolling: auto;
+    }
 
-        .buffer {
-          position: absolute;
-          width: var(--vaadin-infinite-scroller-buffer-width, 100%);
-          box-sizing: border-box;
-          padding-right: 40px;
-          top: var(--vaadin-infinite-scroller-buffer-offset, 0);
-          animation: fadein 0.2s;
-        }
+    #scroller::-webkit-scrollbar {
+      display: none;
+    }
 
-        @keyframes fadein {
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-      </style>
-
-      <div id="scroller" on-scroll="_scroll">
-        <div class="buffer"></div>
-        <div class="buffer"></div>
-        <div id="fullHeight"></div>
-      </div>
-    `;
-  }
+    .buffer {
+      position: absolute;
+      width: var(--vaadin-infinite-scroller-buffer-width, 100%);
+      box-sizing: border-box;
+      padding-right: 40px;
+      top: var(--vaadin-infinite-scroller-buffer-offset, 0);
+      animation: fadein 0.2s;
+    }
 
-  static get properties() {
-    return {
-      /**
-       * Count of individual items in each buffer.
-       * The scroller has 2 buffers altogether so bufferSize of 20
-       * will result in 40 buffered DOM items in total.
-       * Changing after initialization not supported.
-       */
-      bufferSize: {
-        type: Number,
-        value: 20,
-      },
-
-      /**
-       * The amount of initial scroll top. Needed in order for the
-       * user to be able to scroll backwards.
-       * @private
-       */
-      _initialScroll: {
-        value: 500000,
-      },
-
-      /**
-       * The index/position mapped at _initialScroll point.
-       * @private
-       */
-      _initialIndex: {
-        value: 0,
-      },
+    @keyframes fadein {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  </style>
 
-      /** @private */
-      _buffers: Array,
+  <div id="scroller">
+    <div class="buffer"></div>
+    <div class="buffer"></div>
+    <div id="fullHeight"></div>
+  </div>
+`;
 
-      /** @private */
-      _preventScrollEvent: Boolean,
-
-      /** @private */
-      _mayHaveMomentum: Boolean,
+/**
+ * @extends HTMLElement
+ * @private
+ */
+export class InfiniteScroller extends HTMLElement {
+  constructor() {
+    super();
+
+    const root = this.attachShadow({ mode: 'open' });
+    root.appendChild(template.content.cloneNode(true));
+
+    /**
+     * Count of individual items in each buffer.
+     * The scroller has 2 buffers altogether so bufferSize of 20
+     * will result in 40 buffered DOM items in total.
+     * Changing after initialization not supported.
+     * @type {number}
+     */
+    this.bufferSize = 20;
+
+    /**
+     * The amount of initial scroll top. Needed in order for the
+     * user to be able to scroll backwards.
+     * @type {number}
+     * @private
+     */
+    this._initialScroll = 500000;
+
+    /**
+     * The index/position mapped at _initialScroll point.
+     * @type {number}
+     * @private
+     */
+    this._initialIndex = 0;
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._activated = false;
+  }
 
-      /** @private */
-      _initialized: Boolean,
+  /**
+   * @return {boolean}
+   */
+  get active() {
+    return this._activated;
+  }
 
-      active: {
-        type: Boolean,
-        observer: '_activated',
-      },
-    };
+  set active(active) {
+    if (active && !this._activated) {
+      this._createPool();
+      this._activated = true;
+    }
   }
 
   /**
@@ -184,17 +183,27 @@ export class InfiniteScroller extends PolymerElement {
   }
 
   /** @protected */
-  ready() {
-    super.ready();
+  connectedCallback() {
+    if (!this._ready) {
+      this._ready = true;
+
+      this.$ = {};
+      this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
+        this.$[node.id] = node;
+      });
 
-    this._buffers = [...this.shadowRoot.querySelectorAll('.buffer')];
+      this.$.scroller.addEventListener('scroll', () => this._scroll());
 
-    this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
+      /** @private */
+      this._buffers = [...this.shadowRoot.querySelectorAll('.buffer')];
+
+      this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
 
-    // Firefox interprets elements with overflow:auto as focusable
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
-    if (isFirefox) {
-      this.$.scroller.tabIndex = -1;
+      // Firefox interprets elements with overflow:auto as focusable
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
+      if (isFirefox) {
+        this.$.scroller.tabIndex = -1;
+      }
     }
   }
 
@@ -228,14 +237,6 @@ export class InfiniteScroller extends PolymerElement {
     // To be implemented.
   }
 
-  /** @private */
-  _activated(active) {
-    if (active && !this._initialized) {
-      this._createPool();
-      this._initialized = true;
-    }
-  }
-
   /** @private */
   _finishInit() {
     if (!this._initDone) {
@@ -347,7 +348,7 @@ export class InfiniteScroller extends PolymerElement {
       }
     });
 
-    afterNextRender(this, () => {
+    requestAnimationFrame(() => {
       this._finishInit();
     });
   }
@@ -364,7 +365,7 @@ export class InfiniteScroller extends PolymerElement {
     itemWrapper.appendChild(itemWrapper.instance);
 
     Object.keys(tmpInstance).forEach((prop) => {
-      itemWrapper.instance.set(prop, tmpInstance[prop]);
+      itemWrapper.instance[prop] = tmpInstance[prop];
     });
   }