@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/Calendar.js

@@ -8,7 +8,7 @@ var Calendar_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
@@ -21,6 +21,7 @@ import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { getMaxCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
 import CalendarDate from "./CalendarDate.js";
 import CalendarDateRange from "./CalendarDateRange.js";
 import "./SpecialCalendarDate.js";
@@ -34,7 +35,7 @@ import CalendarTemplate from "./CalendarTemplate.js";
 // Styles
 import calendarCSS from "./generated/themes/Calendar.css.js";
 import CalendarHeaderCss from "./generated/themes/CalendarHeader.css.js";
-import { CALENDAR_HEADER_NEXT_BUTTON, CALENDAR_HEADER_PREVIOUS_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import { CALENDAR_HEADER_MONTH_BUTTON, CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_BUTTON, CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_RANGE_BUTTON, CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT, CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE, CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT, CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE, CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE, CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE, CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE, CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE, } from "./generated/i18n/i18n-defaults.js";
 /**
  * @class
  *
@@ -136,9 +137,17 @@ import { CALENDAR_HEADER_NEXT_BUTTON, CALENDAR_HEADER_PREVIOUS_BUTTON } from "./
  * @csspart month-cell - Used to style the month cells.
  * @csspart month-cell-selected - Used to style the month cells when selected.
  * @csspart month-cell-selected-between - Used to style the day cells in between of selected months in range.
+ * @csspart month-picker-root - Used to style the month picker root container.
  * @csspart year-cell - Used to style the year cells.
  * @csspart year-cell-selected - Used to style the year cells when selected.
- * @csspart year-cell-selected-between - Used to style the day cells in between of selected years in range.
+ * @csspart year-cell-selected-between - Used to style the year cells in between of selected years in range.
+ * @csspart year-picker-root - Used to style the year picker root container.
+ * @csspart year-range-cell - Used to style the year range cells.
+ * @csspart year-range-cell-selected - Used to style the year range cells when selected.
+ * @csspart year-range-cell-selected-between - Used to style the year range cells in between of selected year ranges.
+ * @csspart year-range-picker-root - Used to style the year range picker root container.
+ * @csspart calendar-header-middle-button - Used to style the calendar header middle buttons (month/year/year-range buttons).
+ * @csspart calendar-header-arrow-button - Used to style the calendar header navigation arrow buttons (previous/next buttons).
  * @since 1.0.0-rc.11
  */
 let Calendar = Calendar_1 = class Calendar extends CalendarPart {
@@ -165,7 +174,7 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
          */
         this.hideWeekNumbers = false;
         /**
-         * Which picker is currently visible to the user: day/month/year
+         * Which picker is currently visible to the user: day/month/year/yearRange
          * @private
          */
         this._currentPicker = "day";
@@ -261,6 +270,17 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         const date = this.getFormat().parse(dateString);
         return !!date;
     }
+    get _disabledDates() {
+        const validDisabledDateRanges = this.disabledDates.filter(dateRange => {
+            const startValue = dateRange.startValue;
+            const endValue = dateRange.endValue;
+            return (startValue && this._isValidCalendarDate(startValue)) || (endValue && this._isValidCalendarDate(endValue));
+        });
+        return validDisabledDateRanges.map(dateRange => ({
+            startValue: dateRange.startValue,
+            endValue: dateRange.endValue,
+        }));
+    }
     get _specialCalendarDates() {
         const hasSelectedType = this._specialDates.some(date => date.type === this._selectedItemType);
         const validSpecialDates = this._specialDates.filter(date => {
@@ -296,23 +316,22 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         if (defaultTypes.includes(this._selectedItemType)) {
             this._selectedItemType = "None"; // In order to avoid filtering of default types
         }
-        this._currentPickerDOM._autoFocus = false;
     }
     /**
      * Makes sure that _currentPicker is always set to a value, allowed by _pickersMode
      */
     _normalizeCurrentPicker() {
         if (this._currentPicker === "day" && this._pickersMode !== CalendarPickersMode.DAY_MONTH_YEAR) {
-            this._currentPicker = "month";
+            this.switchToMonthPicker(true);
         }
         if (this._currentPicker === "month" && this._pickersMode === CalendarPickersMode.YEAR) {
-            this._currentPicker = "year";
+            this.switchToYearPicker(true);
         }
     }
     onBeforeRendering() {
         this._normalizeCurrentPicker();
         if (!this._valueIsProcessed) {
-            if (this._selectedDatesTimestamps) {
+            if (this._selectedDatesTimestamps.length) {
                 this.timestamp = this._selectedDatesTimestamps[0];
             }
             this._valueIsProcessed = true;
@@ -326,13 +345,9 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         const localeData = getCachedLocaleDataInstance(getLocale());
         this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
         this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
-        if (this._currentPicker === "year") {
-            const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
-            const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
-            rangeStart.setYear(this._currentPickerDOM._firstYear);
-            rangeEnd.setYear(this._currentPickerDOM._lastYear);
-            this._headerYearRangeButtonText = `${yearFormat.format(rangeStart.toLocalJSDate())} - ${yearFormat.format(rangeEnd.toLocalJSDate())}`;
-        }
+        const currentYearRange = this._currentYearRange;
+        const { rangeStartText, rangeEndText } = this._formatYearRangeText(currentYearRange);
+        this._headerYearRangeButtonText = `${rangeStartText} - ${rangeEndText}`;
         this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
     }
     onInvalidation(changeInfo) {
@@ -343,61 +358,85 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
     /**
      * The user clicked the "month" button in the header
      */
-    onHeaderShowMonthPress() {
-        this.showMonth();
+    onHeaderMonthButtonPress() {
+        this.switchToMonthPicker();
         this.fireDecoratorEvent("show-month-view");
     }
-    showMonth() {
-        this._currentPickerDOM._autoFocus = false;
+    async switchToDayPicker(suppressFocus = false) {
+        this._currentPicker = "day";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
+    }
+    async switchToMonthPicker(suppressFocus = false) {
         this._currentPicker = "month";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
     }
     /**
      * The user clicked the "year" button in the header
      */
-    onHeaderShowYearPress() {
-        this.showYear();
+    onHeaderYearButtonPress() {
+        this.switchToYearPicker();
         this.fireDecoratorEvent("show-year-view");
     }
-    showYear() {
-        this._currentPickerDOM._autoFocus = false;
+    async switchToYearPicker(suppressFocus = false) {
         this._currentPicker = "year";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
+    }
+    /**
+     * The user clicked the "year range" button in the YearPicker header
+     */
+    onHeaderYearRangeButtonPress() {
+        this.switchToYearRangePicker();
+        this.fireDecoratorEvent("show-year-range-view");
+    }
+    async switchToYearRangePicker(suppressFocus = false) {
+        this._currentPicker = "yearrange";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
     }
     get _currentPickerDOM() {
         // Calendar's shadowRoot and all the pickers are always present - the "!" is safe to be used.
         return this.shadowRoot.querySelector(`[ui5-${this._currentPicker}picker]`);
     }
+    /**
+     * Returns the focusable element inside the Calendar (the current picker)
+     * @override
+     */
+    getFocusDomRef() {
+        return this._currentPickerDOM;
+    }
     /**
      * The year clicked the "Previous" button in the header
      */
     onHeaderPreviousPress() {
         this._currentPickerDOM._showPreviousPage();
-        if (this.calendarLegend) {
-            this._currentPickerDOM._autoFocus = true;
-        }
     }
     /**
      * The year clicked the "Next" button in the header
      */
     onHeaderNextPress() {
         this._currentPickerDOM._showNextPage();
-        if (this.calendarLegend) {
-            this._currentPickerDOM._autoFocus = true;
-        }
     }
     _setSecondaryCalendarTypeButtonText() {
         const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
         this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
-        if (this._currentPicker === "year") {
-            const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
-            const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
-            rangeStart.setYear(this._currentPickerDOM._firstYear);
-            rangeEnd.setYear(this._currentPickerDOM._lastYear);
-            const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeStart.valueOf() / 1000, true)
-                .firstDate;
-            const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
-                .lastDate;
-            this._headerYearRangeButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate())} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate())}`;
-        }
+        const currentYearRange = this._currentYearRange;
+        const { rangeStart, rangeEnd } = this._createYearRangeDates(currentYearRange);
+        const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeStart.valueOf() / 1000, true)
+            .firstDate;
+        const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
+            .lastDate;
+        this._headerYearRangeButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate())} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate())}`;
     }
     get secondaryCalendarTypeButtonText() {
         if (!this.hasSecondaryCalendarType) {
@@ -419,14 +458,21 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
      * @private
      */
     get _isHeaderMonthButtonHidden() {
-        return this._currentPicker === "month" || this._currentPicker === "year";
+        return this._currentPicker !== "day";
     }
     /**
-     * The year button is hidden when the year picker is shown
+     * The year range picker button is shown only in the year picker
+     * @private
+     */
+    get _isHeaderYearRangeButtonHidden() {
+        return this._currentPicker !== "year";
+    }
+    /**
+     * The year button is shown only in the day & month pickers
      * @private
      */
     get _isHeaderYearButtonHidden() {
-        return this._currentPicker === "year";
+        return !(this._currentPicker === "day" || this._currentPicker === "month");
     }
     get _isDayPickerHidden() {
         return this._currentPicker !== "day";
@@ -437,8 +483,32 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
     get _isYearPickerHidden() {
         return this._currentPicker !== "year";
     }
-    get _isHeaderYearRangeButtonHidden() {
-        return this._currentPicker !== "year";
+    get _isYearRangePickerHidden() {
+        return this._currentPicker !== "yearrange";
+    }
+    get _currentYearRange() {
+        const rangeSize = this.hasSecondaryCalendarType ? 8 : 20;
+        const yearsOffset = this.hasSecondaryCalendarType ? 2 : 9;
+        const currentYear = this._calendarDate.getYear();
+        // On first load, current year should be the 3rd or 10th year in the range (depending on the calendar type)
+        if (!this._rangeStartYear) {
+            this._rangeStartYear = currentYear - yearsOffset;
+        }
+        // If page navigation occured, update the current range start year
+        this._rangeStartYear += Math.floor((currentYear - this._rangeStartYear) / rangeSize) * rangeSize;
+        // Normalize range start year to be between the min and absolute max year
+        const minYear = this._minDate.getYear();
+        if (currentYear - rangeSize < minYear) {
+            this._rangeStartYear = minYear;
+        }
+        const absoluteMaxYear = getMaxCalendarDate(this._primaryCalendarType).getYear();
+        if (currentYear + rangeSize > absoluteMaxYear) {
+            this._rangeStartYear = absoluteMaxYear - rangeSize + 1;
+        }
+        return {
+            startYear: this._rangeStartYear,
+            endYear: this._rangeStartYear + rangeSize - 1,
+        };
     }
     _fireEventAndUpdateSelectedDates(selectedDates) {
         const datesValues = selectedDates.map(timestamp => {
@@ -457,38 +527,49 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
     onSelectedMonthChange(e) {
         this.timestamp = e.detail.timestamp;
         if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
-            this._currentPicker = "day";
+            this.switchToDayPicker();
         }
         else {
             this._fireEventAndUpdateSelectedDates(e.detail.dates);
         }
-        this._currentPickerDOM._autoFocus = true;
     }
     onSelectedYearChange(e) {
         this.timestamp = e.detail.timestamp;
         if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
-            this._currentPicker = "day";
+            this.switchToDayPicker();
         }
         else if (this._pickersMode === CalendarPickersMode.MONTH_YEAR) {
-            this._currentPicker = "month";
+            this.switchToMonthPicker();
         }
         else {
             this._fireEventAndUpdateSelectedDates(e.detail.dates);
         }
-        this._currentPickerDOM._autoFocus = true;
     }
-    onNavigate(e) {
+    onSelectedYearRangeChange(e) {
+        this.timestamp = e.detail.timestamp;
+        this.switchToYearPicker();
+    }
+    async onNavigate(e) {
         this.timestamp = e.detail.timestamp;
+        await renderFinished();
+        this._currentPickerDOM.focus();
     }
     _onkeydown(e) {
         if (isF4(e) && this._currentPicker !== "month") {
-            this._currentPicker = "month";
+            this.switchToMonthPicker();
             this.fireDecoratorEvent("show-month-view");
         }
-        if (isF4Shift(e) && this._currentPicker !== "year") {
-            this._currentPicker = "year";
+        if (!isF4Shift(e)) {
+            return;
+        }
+        if (this._currentPicker !== "year") {
+            this.switchToYearPicker();
             this.fireDecoratorEvent("show-year-view");
         }
+        else {
+            this.switchToYearRangePicker();
+            this.fireDecoratorEvent("show-year-range-view");
+        }
     }
     _onLegendFocusOut() {
         this._selectedItemType = "None";
@@ -509,16 +590,71 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         };
     }
     get accInfo() {
+        const currentYearRange = this._currentYearRange;
+        const { rangeStartText, rangeEndText } = this._formatYearRangeText(currentYearRange);
+        const headerMonthButtonText = this.hasSecondaryCalendarType
+            ? `${this._headerMonthButtonText}, ${this.secondMonthButtonText}` : `${this._headerMonthButtonText}`;
+        // Get base labels
+        const monthLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON, headerMonthButtonText);
+        const yearLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_BUTTON, this._headerYearButtonText);
+        const yearRangeLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_BUTTON, rangeStartText, rangeEndText);
+        let nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE);
+        let prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE);
+        if (this._currentPicker === "month") {
+            nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE);
+            prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE);
+        }
+        else if (this._currentPicker === "year" || this._currentPicker === "yearrange") {
+            nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE);
+            prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE);
+        }
+        // Get shortcuts
+        const monthShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT);
+        const yearShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT);
+        const yearRangeShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT);
+        const nextBtnShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT);
+        const prevBtnShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT);
         return {
-            ariaLabelMonthButton: this.hasSecondaryCalendarType
-                ? `${this._headerMonthButtonText}, ${this.secondMonthButtonText}` : `${this._headerMonthButtonText}`,
+            ariaLabelMonthButton: monthLabel,
+            ariaLabelYearButton: yearLabel,
+            ariaLabelYearRangeButton: yearRangeLabel,
+            ariaLabelNextButton: nextBtnLabel,
+            ariaLabelPrevButton: prevBtnLabel,
+            // Keyboard shortcuts for aria-keyshortcuts
+            keyShortcutMonthButton: monthShortcut,
+            keyShortcutYearButton: yearShortcut,
+            keyShortcutYearRangeButton: yearRangeShortcut,
+            keyShortcutNextButton: nextBtnShortcut,
+            keyShortcutPrevButton: prevBtnShortcut,
+            // Tooltips combining label and shortcut
+            tooltipMonthButton: `${monthLabel} (${monthShortcut})`,
+            tooltipYearButton: `${yearLabel} (${yearShortcut})`,
+            tooltipYearRangeButton: `${yearRangeLabel} (${yearRangeShortcut})`,
+            tooltipNextButton: `${nextBtnLabel} (${nextBtnShortcut})`,
+            tooltipPrevButton: `${prevBtnLabel} (${prevBtnShortcut})`,
         };
     }
-    get headerPreviousButtonText() {
-        return Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+    /**
+     * Helper method to create CalendarDateComponent instances for year range
+     * @private
+     */
+    _createYearRangeDates(yearRange, calendarType = this._primaryCalendarType) {
+        const rangeStart = new CalendarDateComponent(this._calendarDate, calendarType);
+        const rangeEnd = new CalendarDateComponent(this._calendarDate, calendarType);
+        rangeStart.setYear(yearRange.startYear);
+        rangeEnd.setYear(yearRange.endYear);
+        return { rangeStart, rangeEnd };
     }
-    get headerNextButtonText() {
-        return Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_NEXT_BUTTON);
+    /**
+     * Helper method to format year range text
+     * @private
+     */
+    _formatYearRangeText(yearRange) {
+        const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
+        const { rangeStart, rangeEnd } = this._createYearRangeDates(yearRange, this.primaryCalendarType);
+        const rangeStartText = yearFormat.format(rangeStart.toLocalJSDate());
+        const rangeEndText = yearFormat.format(rangeEnd.toLocalJSDate());
+        return { rangeStartText, rangeEndText };
     }
     get secondMonthButtonText() {
         const secondMonthButtonText = this.secondaryCalendarTypeButtonText?.monthButtonText;
@@ -529,14 +665,14 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
             e.preventDefault();
         }
         if (isEnter(e)) {
-            this.showMonth();
+            this.switchToMonthPicker();
             this.fireDecoratorEvent("show-month-view");
         }
     }
     onMonthButtonKeyUp(e) {
         if (isSpace(e)) {
             e.preventDefault();
-            this.showMonth();
+            this.switchToMonthPicker();
             this.fireDecoratorEvent("show-month-view");
         }
     }
@@ -545,32 +681,48 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
             e.preventDefault();
         }
         if (isEnter(e)) {
-            this.showYear();
+            this.switchToYearPicker();
             this.fireDecoratorEvent("show-year-view");
         }
     }
     onYearButtonKeyUp(e) {
         if (isSpace(e)) {
-            this.showYear();
+            this.switchToYearPicker();
             this.fireDecoratorEvent("show-year-view");
         }
     }
-    onPrevButtonClick(e) {
-        if (this._previousButtonDisabled) {
+    onYearRangeButtonKeyDown(e) {
+        if (isSpace(e)) {
             e.preventDefault();
-            return;
         }
-        this.onHeaderPreviousPress();
-        e.preventDefault();
+        if (isEnter(e)) {
+            this.switchToYearRangePicker();
+            this.fireDecoratorEvent("show-year-range-view");
+        }
     }
-    onNextButtonClick(e) {
-        if (this._nextButtonDisabled) {
+    onYearRangeButtonKeyUp(e) {
+        if (isSpace(e)) {
+            this.switchToYearRangePicker();
+            this.fireDecoratorEvent("show-year-range-view");
+        }
+    }
+    _handleNavigationButtonKeyDown(e, isDisabled, action) {
+        if (isDisabled) {
             e.preventDefault();
             return;
         }
-        this.onHeaderNextPress();
+        if (e.button !== 0) {
+            return;
+        }
+        action();
         e.preventDefault();
     }
+    onPrevButtonClick(e) {
+        this._handleNavigationButtonKeyDown(e, this._previousButtonDisabled, () => this.onHeaderPreviousPress());
+    }
+    onNextButtonClick(e) {
+        this._handleNavigationButtonKeyDown(e, this._nextButtonDisabled, () => this.onHeaderNextPress());
+    }
     /**
      * Returns an array of UTC timestamps, representing the selected dates.
      * @protected
@@ -631,6 +783,9 @@ __decorate([
 __decorate([
     slot({ type: HTMLElement, invalidateOnChildChange: true })
 ], Calendar.prototype, "specialDates", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], Calendar.prototype, "disabledDates", void 0);
 __decorate([
     property()
 ], Calendar.prototype, "_selectedItemType", void 0);
@@ -663,6 +818,9 @@ Calendar = Calendar_1 = __decorate([
     }),
     event("show-year-view", {
         bubbles: true,
+    }),
+    event("show-year-range-view", {
+        bubbles: true,
     })
 ], Calendar);
 Calendar.define();