@angular/material 8.0.0 → 8.1.1

package/esm2015/datepicker.js

@@ -640,8 +640,7 @@ class MatMultiYearView {
         /** @type {?} */
         const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
         this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
-        if (Math.floor(this._dateAdapter.getYear(oldActiveDate) / yearsPerPage) !=
-            Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
+        if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
             this._init();
         }
     }
@@ -694,13 +693,18 @@ class MatMultiYearView {
      */
     _init() {
         this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());
+        // We want a range years such that we maximize the number of
+        // enabled dates visible at once. This prevents issues where the minimum year
+        // is the last item of a page OR the maximum year is the first item of a page.
+        // The offset from the active year to the "slot" for the starting year is the
+        // *actual* first rendered year in the multi-year view.
         /** @type {?} */
-        let activeYear = this._dateAdapter.getYear(this._activeDate);
+        const activeYear = this._dateAdapter.getYear(this._activeDate);
         /** @type {?} */
-        let activeOffset = activeYear % yearsPerPage;
+        const minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);
         this._years = [];
         for (let i = 0, row = []; i < yearsPerPage; i++) {
-            row.push(activeYear - activeOffset + i);
+            row.push(minYearOfPage + i);
             if (row.length == yearsPerRow) {
                 this._years.push(row.map((/**
                  * @param {?} year
@@ -731,12 +735,6 @@ class MatMultiYearView {
      * @return {?}
      */
     _handleCalendarBodyKeydown(event) {
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
         /** @type {?} */
         const oldActiveDate = this._activeDate;
         /** @type {?} */
@@ -755,10 +753,10 @@ class MatMultiYearView {
                 this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);
                 break;
             case HOME:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -this._dateAdapter.getYear(this._activeDate) % yearsPerPage);
+                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));
                 break;
             case END:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - this._dateAdapter.getYear(this._activeDate) % yearsPerPage - 1);
+                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 1);
                 break;
             case PAGE_UP:
                 this.activeDate =
@@ -787,7 +785,7 @@ class MatMultiYearView {
      * @return {?}
      */
     _getActiveCell() {
-        return this._dateAdapter.getYear(this.activeDate) % yearsPerPage;
+        return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);
     }
     /**
      * Focuses the active cell after the microtask queue is empty.
@@ -876,6 +874,72 @@ MatMultiYearView.propDecorators = {
     activeDateChange: [{ type: Output }],
     _matCalendarBody: [{ type: ViewChild, args: [MatCalendarBody, { static: false },] }]
 };
+/**
+ * @template D
+ * @param {?} dateAdapter
+ * @param {?} date1
+ * @param {?} date2
+ * @param {?} minDate
+ * @param {?} maxDate
+ * @return {?}
+ */
+function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
+    /** @type {?} */
+    const year1 = dateAdapter.getYear(date1);
+    /** @type {?} */
+    const year2 = dateAdapter.getYear(date2);
+    /** @type {?} */
+    const startingYear = getStartingYear(dateAdapter, minDate, maxDate);
+    return Math.floor((year1 - startingYear) / yearsPerPage) ===
+        Math.floor((year2 - startingYear) / yearsPerPage);
+}
+/**
+ * When the multi-year view is first opened, the active year will be in view.
+ * So we compute how many years are between the active year and the *slot* where our
+ * "startingYear" will render when paged into view.
+ * @template D
+ * @param {?} dateAdapter
+ * @param {?} activeDate
+ * @param {?} minDate
+ * @param {?} maxDate
+ * @return {?}
+ */
+function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
+    /** @type {?} */
+    const activeYear = dateAdapter.getYear(activeDate);
+    return euclideanModulo((activeYear - getStartingYear(dateAdapter, minDate, maxDate)), yearsPerPage);
+}
+/**
+ * We pick a "starting" year such that either the maximum year would be at the end
+ * or the minimum year would be at the beginning of a page.
+ * @template D
+ * @param {?} dateAdapter
+ * @param {?} minDate
+ * @param {?} maxDate
+ * @return {?}
+ */
+function getStartingYear(dateAdapter, minDate, maxDate) {
+    /** @type {?} */
+    let startingYear = 0;
+    if (maxDate) {
+        /** @type {?} */
+        const maxYear = dateAdapter.getYear(maxDate);
+        startingYear = maxYear - yearsPerPage + 1;
+    }
+    else if (minDate) {
+        startingYear = dateAdapter.getYear(minDate);
+    }
+    return startingYear;
+}
+/**
+ * Gets remainder that is non-negative, even if first number is negative
+ * @param {?} a
+ * @param {?} b
+ * @return {?}
+ */
+function euclideanModulo(a, b) {
+    return (a % b + b) % b;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -1249,13 +1313,16 @@ class MatCalendarHeader {
         if (this.calendar.currentView == 'year') {
             return this._dateAdapter.getYearName(this.calendar.activeDate);
         }
+        // The offset from the active year to the "slot" for the starting year is the
+        // *actual* first rendered year in the multi-year view, and the last year is
+        // just yearsPerPage - 1 away.
         /** @type {?} */
         const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
         /** @type {?} */
-        const firstYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
+        const minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate);
         /** @type {?} */
-        const lastYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
-        return `${firstYearInView} \u2013 ${lastYearInView}`;
+        const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
+        return `${minYearOfPage} \u2013 ${maxYearOfPage}`;
     }
     /**
      * @return {?}
@@ -1346,8 +1413,7 @@ class MatCalendarHeader {
             return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);
         }
         // Otherwise we are in 'multi-year' view.
-        return Math.floor(this._dateAdapter.getYear(date1) / yearsPerPage) ==
-            Math.floor(this._dateAdapter.getYear(date2) / yearsPerPage);
+        return isSameMultiYearView(this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate);
     }
 }
 MatCalendarHeader.decorators = [
@@ -2173,9 +2239,15 @@ class MatDatepicker {
             return event.keyCode === ESCAPE ||
                 (this._datepickerInput && event.altKey && event.keyCode === UP_ARROW);
         })))).subscribe((/**
+         * @param {?} event
          * @return {?}
          */
-        () => this.close()));
+        event => {
+            if (event) {
+                event.preventDefault();
+            }
+            this.close();
+        }));
     }
     /**
      * Create the popup PositionStrategy.
@@ -2928,5 +3000,5 @@ MatDatepickerModule.decorators = [
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { MatDatepickerModule, MatCalendarHeader, MatCalendar, MatCalendarCell, MatCalendarBody, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MatDatepickerContent, MatDatepicker, matDatepickerAnimations, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATEPICKER_VALIDATORS, MatDatepickerInputEvent, MatDatepickerInput, MatDatepickerIntl, MatDatepickerToggleIcon, MatDatepickerToggle, MatMonthView, MatYearView, yearsPerPage, yearsPerRow, MatMultiYearView };
+export { MatMultiYearView, yearsPerPage, yearsPerRow, MatDatepickerModule, MatCalendarHeader, MatCalendar, MatCalendarCell, MatCalendarBody, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MatDatepickerContent, MatDatepicker, matDatepickerAnimations, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATEPICKER_VALIDATORS, MatDatepickerInputEvent, MatDatepickerInput, MatDatepickerIntl, MatDatepickerToggleIcon, MatDatepickerToggle, MatMonthView, MatYearView };
 //# sourceMappingURL=datepicker.js.map