refactor!: move date-picker scrollers to light DOM (#4770)

packages/date-picker/src/vaadin-date-picker-helper.d.ts

@@ -41,3 +41,10 @@ export { extractDateParts };
  * to the expected format.
  */
 declare function extractDateParts(date: Date): { day: number; month: number; year: number };
+
+/**
+ * Get difference in months between today and given months value.
+ */
+declare function dateAfterXMonths(months: number): number;
+
+export { dateAfterXMonths };

packages/date-picker/src/vaadin-date-picker-helper.js

@@ -103,3 +103,17 @@ export function extractDateParts(date) {
     year: date.getFullYear(),
   };
 }
+
+/**
+ * Get difference in months between today and given months value.
+ *
+ * @param {number} months
+ * @return {number}
+ */
+export function dateAfterXMonths(months) {
+  const today = new Date();
+  const result = new Date(today);
+  result.setDate(1);
+  result.setMonth(parseInt(months) + today.getMonth());
+  return result;
+}

packages/date-picker/src/vaadin-date-picker-mixin.js

@@ -84,6 +84,7 @@ export const DatePickerMixin = (subclass) =>
          */
         showWeekNumbers: {
           type: Boolean,
+          value: false,
         },
 
         /**

packages/date-picker/src/vaadin-date-picker-month-scroller.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2022 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 { dateAfterXMonths } from './vaadin-date-picker-helper.js';
+import { InfiniteScroller } from './vaadin-infinite-scroller.js';
+
+const stylesTemplate = html`
+  <style>
+    :host {
+      --vaadin-infinite-scroller-item-height: 270px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+    }
+  </style>
+`;
+
+let memoizedTemplate;
+
+/**
+ * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+ *
+ * @extends InfiniteScroller
+ * @private
+ */
+class DatePickerMonthScroller extends InfiniteScroller {
+  static get is() {
+    return 'vaadin-date-picker-month-scroller';
+  }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      memoizedTemplate.content.appendChild(stylesTemplate.content.cloneNode(true));
+    }
+
+    return memoizedTemplate;
+  }
+
+  static get properties() {
+    return {
+      bufferSize: {
+        type: Number,
+        value: 3,
+      },
+    };
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _createElement() {
+    return document.createElement('vaadin-month-calendar');
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {number} index
+   * @protected
+   * @override
+   */
+  _updateElement(element, index) {
+    element.month = dateAfterXMonths(index);
+  }
+}
+
+customElements.define(DatePickerMonthScroller.is, DatePickerMonthScroller);