@angular/material 11.0.0-rc.4 → 11.0.3

package/fesm2015/datepicker.js

@@ -6,7 +6,7 @@ import { ɵɵdefineInjectable, Injectable, EventEmitter, Component, ViewEncapsul
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { DateAdapter, MAT_DATE_FORMATS, mixinColor, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, mixinColor, ErrorStateMatcher, mixinErrorState, MatCommonModule } from '@angular/material/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { ESCAPE, hasModifierKey, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, BACKSPACE } from '@angular/cdk/keycodes';
 import { Directionality } from '@angular/cdk/bidi';
@@ -1408,6 +1408,8 @@ MatYearView.propDecorators = {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+/** Counter used to generate unique IDs. */
+let uniqueId = 0;
 /** Default header for MatCalendar */
 class MatCalendarHeader {
     constructor(_intl, calendar, _dateAdapter, _dateFormats, changeDetectorRef) {
@@ -1415,6 +1417,7 @@ class MatCalendarHeader {
         this.calendar = calendar;
         this._dateAdapter = _dateAdapter;
         this._dateFormats = _dateFormats;
+        this._buttonDescriptionId = `mat-calendar-button-${uniqueId++}`;
         this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
     }
     /** The label for the current calendar view. */
@@ -1502,7 +1505,7 @@ class MatCalendarHeader {
 MatCalendarHeader.decorators = [
     { type: Component, args: [{
                 selector: 'mat-calendar-header',
-                template: "<div class=\"mat-calendar-header\">\n  <div class=\"mat-calendar-controls\">\n    <button mat-button type=\"button\" class=\"mat-calendar-period-button\"\n            (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\"\n            cdkAriaLive=\"polite\">\n      {{periodButtonText}}\n      <div class=\"mat-calendar-arrow\"\n           [class.mat-calendar-invert]=\"calendar.currentView != 'month'\"></div>\n    </button>\n\n    <div class=\"mat-calendar-spacer\"></div>\n\n    <ng-content></ng-content>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\"\n            [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\"\n            [attr.aria-label]=\"prevButtonLabel\">\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\"\n            [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\"\n            [attr.aria-label]=\"nextButtonLabel\">\n    </button>\n  </div>\n</div>\n",
+                template: "<div class=\"mat-calendar-header\">\n  <div class=\"mat-calendar-controls\">\n    <button mat-button type=\"button\" class=\"mat-calendar-period-button\"\n            (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\"\n            [attr.aria-describedby]=\"_buttonDescriptionId\"\n            cdkAriaLive=\"polite\">\n      <span [attr.id]=\"_buttonDescriptionId\">{{periodButtonText}}</span>\n      <div class=\"mat-calendar-arrow\"\n           [class.mat-calendar-invert]=\"calendar.currentView !== 'month'\"></div>\n    </button>\n\n    <div class=\"mat-calendar-spacer\"></div>\n\n    <ng-content></ng-content>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\"\n            [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\"\n            [attr.aria-label]=\"prevButtonLabel\">\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\"\n            [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\"\n            [attr.aria-label]=\"nextButtonLabel\">\n    </button>\n  </div>\n</div>\n",
                 exportAs: 'matCalendarHeader',
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush
@@ -1875,7 +1878,7 @@ MatDatepickerContent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 inputs: ['color'],
-                styles: [".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content-touch{display:block;max-height:80vh;overflow:auto;margin:-24px}.mat-datepicker-content-touch .mat-calendar{min-width:250px;min-height:312px;max-width:750px;max-height:788px}.mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-calendar{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-calendar{width:80vw;height:100vw}}\n"]
+                styles: [".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.mat-datepicker-content-touch{display:block;max-height:80vh;overflow:auto;margin:-24px}.mat-datepicker-content-touch .mat-calendar{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-calendar{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-calendar{width:80vw;height:100vw}}\n"]
             },] }
 ];
 MatDatepickerContent.ctorParameters = () => [
@@ -2331,8 +2334,7 @@ class MatDatepickerInputBase {
         /** The form control validator for the date filter. */
         this._filterValidator = (control) => {
             const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
-            const dateFilter = this._getDateFilter();
-            return !dateFilter || !controlValue || dateFilter(controlValue) ?
+            return !controlValue || this._matchesFilter(controlValue) ?
                 null : { 'matDatepickerFilter': true };
         };
         /** The form control validator for the min date. */
@@ -2538,6 +2540,11 @@ class MatDatepickerInputBase {
     _parentDisabled() {
         return false;
     }
+    /** Gets whether a value matches the current date filter. */
+    _matchesFilter(value) {
+        const filter = this._getDateFilter();
+        return !filter || filter(value);
+    }
 }
 MatDatepickerInputBase.decorators = [
     { type: Directive }
@@ -2627,8 +2634,11 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     /** Function that can be used to filter out dates within the datepicker. */
     get dateFilter() { return this._dateFilter; }
     set dateFilter(value) {
+        const wasMatchingValue = this._matchesFilter(this.value);
         this._dateFilter = value;
-        this._validatorOnChange();
+        if (this._matchesFilter(this.value) !== wasMatchingValue) {
+            this._validatorOnChange();
+        }
     }
     /**
      * Gets the element that the datepicker popup should be connected to.
@@ -3209,8 +3219,17 @@ class MatDateRangeInput {
     /** Function that can be used to filter out dates within the date range picker. */
     get dateFilter() { return this._dateFilter; }
     set dateFilter(value) {
+        const start = this._startInput;
+        const end = this._endInput;
+        const wasMatchingStart = start && start._matchesFilter(start.value);
+        const wasMatchingEnd = end && end._matchesFilter(start.value);
         this._dateFilter = value;
-        this._revalidate();
+        if (start && start._matchesFilter(start.value) !== wasMatchingStart) {
+            start._validatorOnChange();
+        }
+        if (end && end._matchesFilter(end.value) !== wasMatchingEnd) {
+            end._validatorOnChange();
+        }
     }
     /** The minimum valid date. */
     get min() { return this._min; }
@@ -3427,6 +3446,7 @@ MatDatepickerModule.decorators = [
                     OverlayModule,
                     A11yModule,
                     PortalModule,
+                    MatCommonModule,
                 ],
                 exports: [
                     CdkScrollableModule,