@angular/material 8.0.1 → 8.1.2

package/esm2015/datepicker.js

@@ -219,7 +219,7 @@ class MatCalendarBody {
 }
 MatCalendarBody.decorators = [
     { type: Component, args: [{selector: '[mat-calendar-body]',
-                template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [ngClass]=\"item.cssClasses\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width]=\"_cellWidth\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
+                template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [ngClass]=\"item.cssClasses\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width]=\"_cellWidth\" [style.paddingTop]=\"_cellPadding\" role=\"button\" [style.paddingBottom]=\"_cellPadding\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
                 styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.71429%;padding-right:4.71429%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}@media (-ms-high-contrast:active){.mat-calendar-body-cell-content{border:none}}@media (-ms-high-contrast:active){.mat-calendar-body-selected,.mat-datepicker-popup:not(:empty){outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:dotted 2px}}[dir=rtl] .mat-calendar-body-label{text-align:right}"],
                 host: {
                     'class': 'mat-calendar-body',
@@ -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 = [
@@ -2934,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