@vaadin/date-picker 23.3.0-alpha2 → 24.0.0-alpha1

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

@@ -3,25 +3,36 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade-mixin.js';
-import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { datePickerOverlayStyles } from './vaadin-date-picker-styles.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles('vaadin-date-picker-overlay', datePickerOverlayStyles, {
-  moduleId: 'vaadin-date-picker-overlay-styles',
-});
+registerStyles(
+  'vaadin-date-picker-overlay',
+  css`
+    [part='overlay'] {
+      display: flex;
+      flex: auto;
+    }
+
+    [part~='content'] {
+      flex: auto;
+    }
+  `,
+  {
+    moduleId: 'vaadin-date-picker-overlay-styles',
+  },
+);
 
 let memoizedTemplate;
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
- * @extends OverlayElement
+ * @extends Overlay
  * @private
  */
-class DatePickerOverlay extends DisableUpgradeMixin(PositionMixin(OverlayElement)) {
+class DatePickerOverlay extends PositionMixin(Overlay) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }

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

@@ -0,0 +1,104 @@
+/**
+ * @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 { InfiniteScroller } from './vaadin-infinite-scroller.js';
+
+const stylesTemplate = html`
+  <style>
+    :host {
+      --vaadin-infinite-scroller-item-height: 80px;
+      width: 50px;
+      display: block;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      transform: translateX(100%);
+      -webkit-tap-highlight-color: transparent;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      /* Center the year scroller position. */
+      --vaadin-infinite-scroller-buffer-offset: 50%;
+    }
+
+    :host::before {
+      content: '';
+      display: block;
+      background: transparent;
+      width: 0;
+      height: 0;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 6px;
+      border-style: solid;
+      border-color: transparent;
+      border-left-color: #000;
+    }
+  </style>
+`;
+
+let memoizedTemplate;
+
+/**
+ * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
+ *
+ * @extends InfiniteScroller
+ * @mixes ThemableMixin
+ * @private
+ */
+class DatePickerYearScroller extends InfiniteScroller {
+  static get is() {
+    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;
+  }
+
+  static get properties() {
+    return {
+      bufferSize: {
+        type: Number,
+        value: 12,
+      },
+    };
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _createElement() {
+    return document.createElement('vaadin-date-picker-year');
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {number} index
+   * @protected
+   * @override
+   */
+  _updateElement(element, index) {
+    element.year = this._yearAfterXYears(index);
+  }
+
+  /** @private */
+  _yearAfterXYears(index) {
+    const today = new Date();
+    const result = new Date(today);
+    result.setFullYear(parseInt(index) + today.getFullYear());
+    return result.getFullYear();
+  }
+}
+
+customElements.define(DatePickerYearScroller.is, DatePickerYearScroller);

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

@@ -0,0 +1,57 @@
+/**
+ * @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, PolymerElement } from '@polymer/polymer/polymer-element.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.
+ *
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @private
+ */
+export class DatePickerYear extends ThemableMixin(PolymerElement) {
+  static get is() {
+    return 'vaadin-date-picker-year';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          height: 100%;
+        }
+      </style>
+      <div part="year-number">[[year]]</div>
+      <div part="year-separator" aria-hidden="true"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      year: {
+        type: String,
+      },
+
+      selectedDate: {
+        type: Object,
+      },
+    };
+  }
+
+  static get observers() {
+    return ['__updateSelected(year, selectedDate)'];
+  }
+
+  /** @private */
+  __updateSelected(year, selectedDate) {
+    this.toggleAttribute('selected', selectedDate && selectedDate.getFullYear() === year);
+    this.toggleAttribute('current', year === new Date().getFullYear());
+  }
+}
+
+customElements.define(DatePickerYear.is, DatePickerYear);

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

@@ -79,7 +79,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * Part name             | Description
  * ----------------------|--------------------
  * `toggle-button`       | Toggle button
- * `overlay-content`     | The overlay element
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
@@ -99,6 +98,9 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
+ * - `<vaadin-date-picker-month-scroller>`
+ * - `<vaadin-date-picker-year-scroller>`
+ * - `<vaadin-date-picker-year>`
  * - `<vaadin-month-calendar>`
  * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
@@ -111,14 +113,15 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `clear-button`        | Fullscreen mode clear button
  * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `months`              | Months scroller
- * `years`               | Years scroller
- * `toolbar`             | Footer bar with buttons
- * `today-button`        | Today button
- * `cancel-button`       | Cancel button
- * `month`               | Month calendar
- * `year-number`         | Year number
- * `year-separator`      | Year separator
+ * `toolbar`             | Footer bar with slotted buttons
+ *
+ * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+ *
+ * Attribute       | Description
+ * ----------------|-------------------------------------------------
+ * `desktop`       | Set when the overlay content is in desktop mode
+ * `fullscreen`    | Set when the overlay content is in fullscreen mode
+ * `years-visible` | Set when the year scroller is visible in fullscreen mode
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -131,6 +134,13 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `week-number`         | Week number element
  * `date`                | Date element
  *
+ * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
+ *
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *

package/src/vaadin-date-picker.js

@@ -15,9 +15,8 @@ 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, datePickerStyles], { moduleId: 'vaadin-date-picker-styles' });
+registerStyles('vaadin-date-picker', inputFieldShared, { 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.
@@ -48,7 +47,6 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * Part name             | Description
  * ----------------------|--------------------
  * `toggle-button`       | Toggle button
- * `overlay-content`     | The overlay element
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
@@ -68,6 +66,9 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  *
  * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
+ * - `<vaadin-date-picker-month-scroller>`
+ * - `<vaadin-date-picker-year-scroller>`
+ * - `<vaadin-date-picker-year>`
  * - `<vaadin-month-calendar>`
  * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
@@ -80,14 +81,15 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * `clear-button`        | Fullscreen mode clear button
  * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `months`              | Months scroller
- * `years`               | Years scroller
- * `toolbar`             | Footer bar with buttons
- * `today-button`        | Today button
- * `cancel-button`       | Cancel button
- * `month`               | Month calendar
- * `year-number`         | Year number
- * `year-separator`      | Year separator
+ * `toolbar`             | Footer bar with slotted buttons
+ *
+ * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
+ *
+ * Attribute       | Description
+ * ----------------|-------------------------------------------------
+ * `desktop`       | Set when the overlay content is in desktop mode
+ * `fullscreen`    | Set when the overlay content is in fullscreen mode
+ * `years-visible` | Set when the year scroller is visible in fullscreen mode
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -100,6 +102,13 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * `week-number`         | Week number element
  * `date`                | Date element
  *
+ * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
+ *
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *
@@ -128,6 +137,15 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         :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">
@@ -161,29 +179,14 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       <vaadin-date-picker-overlay
         id="overlay"
         fullscreen$="[[_fullscreen]]"
-        theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
+        theme$="[[_theme]]"
+        opened="{{opened}}"
+        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
-        disable-upgrade
-      >
-        <template>
-          <vaadin-date-picker-overlay-content
-            id="overlay-content"
-            i18n="[[i18n]]"
-            fullscreen$="[[_fullscreen]]"
-            label="[[label]]"
-            selected-date="[[_selectedDate]]"
-            focused-date="{{_focusedDate}}"
-            show-week-numbers="[[showWeekNumbers]]"
-            min-date="[[_minDate]]"
-            max-date="[[_maxDate]]"
-            part="overlay-content"
-            theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
-          ></vaadin-date-picker-overlay-content>
-        </template>
-      </vaadin-date-picker-overlay>
+      ></vaadin-date-picker-overlay>
 
       <slot name="tooltip"></slot>
     `;
@@ -219,11 +222,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
-  }
-
-  /** @protected */
-  _initOverlay() {
-    super._initOverlay();
 
     this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));
   }
@@ -238,7 +236,11 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
   /** @private */
   _toggle(e) {
     e.stopPropagation();
-    this[this._overlayInitialized && this.$.overlay.opened ? 'close' : 'open']();
+    if (this.$.overlay.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
   }
 
   // Workaround https://github.com/vaadin/web-components/issues/2855

package/src/vaadin-infinite-scroller.js

@@ -4,7 +4,6 @@
  * 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';
@@ -14,7 +13,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
  * @extends HTMLElement
  * @private
  */
-class InfiniteScroller extends PolymerElement {
+export class InfiniteScroller extends PolymerElement {
   static get template() {
     return html`
       <style>
@@ -69,10 +68,6 @@ class InfiniteScroller extends PolymerElement {
     `;
   }
 
-  static get is() {
-    return 'vaadin-infinite-scroller';
-  }
-
   static get properties() {
     return {
       /**
@@ -89,6 +84,7 @@ class InfiniteScroller extends PolymerElement {
       /**
        * The amount of initial scroll top. Needed in order for the
        * user to be able to scroll backwards.
+       * @private
        */
       _initialScroll: {
         value: 500000,
@@ -96,17 +92,22 @@ class InfiniteScroller extends PolymerElement {
 
       /**
        * The index/position mapped at _initialScroll point.
+       * @private
        */
       _initialIndex: {
         value: 0,
       },
 
+      /** @private */
       _buffers: Array,
 
+      /** @private */
       _preventScrollEvent: Boolean,
 
+      /** @private */
       _mayHaveMomentum: Boolean,
 
+      /** @private */
       _initialized: Boolean,
 
       active: {
@@ -116,26 +117,14 @@ class InfiniteScroller extends PolymerElement {
     };
   }
 
+  /** @protected */
   ready() {
     super.ready();
 
-    this._buffers = Array.prototype.slice.call(this.root.querySelectorAll('.buffer'));
+    this._buffers = [...this.shadowRoot.querySelectorAll('.buffer')];
 
     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) => {
-            [].forEach.call(buffer.children, (insertionPoint) => {
-              insertionPoint._itemWrapper.instance[prop] = value;
-            });
-          });
-        }
-      },
-    });
-
     // Firefox interprets elements with overflow:auto as focusable
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
     if (isFirefox) {
@@ -143,6 +132,37 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /**
+   * Force the scroller to update clones after a reset, without
+   * waiting for the debouncer to resolve.
+   */
+  forceUpdate() {
+    if (this._debouncerUpdateClones) {
+      this._buffers[0].updated = this._buffers[1].updated = false;
+      this._updateClones();
+      this._debouncerUpdateClones.cancel();
+    }
+  }
+
+  /**
+   * @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) {
       this._createPool();
@@ -150,11 +170,14 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /** @private */
   _finishInit() {
     if (!this._initDone) {
       // Once the first set of items start fading in, stamp the rest
       this._buffers.forEach((buffer) => {
-        [].forEach.call(buffer.children, (insertionPoint) => this._ensureStampedInstance(insertionPoint._itemWrapper));
+        [...buffer.children].forEach((slot) => {
+          this._ensureStampedInstance(slot._itemWrapper);
+        });
       });
 
       if (!this._buffers[0].translateY) {
@@ -162,9 +185,11 @@ class InfiniteScroller extends PolymerElement {
       }
 
       this._initDone = true;
+      this.dispatchEvent(new CustomEvent('init-done'));
     }
   }
 
+  /** @private */
   _translateBuffer(up) {
     const index = up ? 1 : 0;
     this._buffers[index].translateY = this._buffers[index ? 0 : 1].translateY + this._bufferHeight * (index ? -1 : 1);
@@ -173,6 +198,7 @@ class InfiniteScroller extends PolymerElement {
     this._buffers.reverse();
   }
 
+  /** @private */
   _scroll() {
     if (this._scrollDisabled) {
       return;
@@ -269,10 +295,12 @@ class InfiniteScroller extends PolymerElement {
     return this._itemHeightVal;
   }
 
+  /** @private */
   get _bufferHeight() {
     return this.itemHeight * this.bufferSize;
   }
 
+  /** @private */
   _reset() {
     this._scrollDisabled = true;
     this.$.scroller.scrollTop = this._initialScroll;
@@ -292,6 +320,7 @@ class InfiniteScroller extends PolymerElement {
     this._scrollDisabled = false;
   }
 
+  /** @private */
   _createPool() {
     const container = this.getBoundingClientRect();
     this._buffers.forEach((buffer) => {
@@ -303,28 +332,27 @@ class InfiniteScroller extends PolymerElement {
         const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
         const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
 
-        const insertionPoint = document.createElement('slot');
-        insertionPoint.setAttribute('name', slotName);
-        insertionPoint._itemWrapper = itemWrapper;
-        buffer.appendChild(insertionPoint);
+        const slot = document.createElement('slot');
+        slot.setAttribute('name', slotName);
+        slot._itemWrapper = itemWrapper;
+        buffer.appendChild(slot);
 
         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 */
   _ensureStampedInstance(itemWrapper) {
     if (itemWrapper.firstElementChild) {
       return;
@@ -332,14 +360,15 @@ 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]);
     });
   }
 
+  /** @private */
   _updateClones(viewPortOnly) {
     this._firstIndex = ~~((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;
 
@@ -348,10 +377,10 @@ class InfiniteScroller extends PolymerElement {
       if (!buffer.updated) {
         const firstIndex = this._firstIndex + this.bufferSize * bufferIndex;
 
-        [].forEach.call(buffer.children, (insertionPoint, index) => {
-          const itemWrapper = insertionPoint._itemWrapper;
+        [...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;
@@ -359,10 +388,9 @@ class InfiniteScroller extends PolymerElement {
     });
   }
 
+  /** @private */
   _isVisible(element, container) {
     const rect = element.getBoundingClientRect();
     return rect.bottom > container.top && rect.top < container.bottom;
   }
 }
-
-customElements.define(InfiniteScroller.is, InfiniteScroller);

package/src/vaadin-month-calendar.js

@@ -80,7 +80,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
               is="dom-repeat"
               items="[[_getWeekDayNames(i18n.weekdays, i18n.weekdaysShort, showWeekNumbers, i18n.firstDayOfWeek)]]"
             >
-              <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]">[[item.weekDayShort]]</th>
+              <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true">
+                [[item.weekDayShort]]
+              </th>
             </template>
           </tr>
         </thead>
@@ -426,12 +428,6 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
     return '-1';
   }
-
-  __getWeekNumbers(dates) {
-    return dates
-      .map((date) => this.__getWeekNumber(date, dates))
-      .filter((week, index, arr) => arr.indexOf(week) === index);
-  }
 }
 
 customElements.define(MonthCalendar.is, MonthCalendar);