@angular/material 9.1.3 → 9.2.2

package/fesm2015/datepicker.js

@@ -5,6 +5,7 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, NgZone, Input, Output, ChangeDetectorRef, Optional, Inject, ViewChild, forwardRef, InjectionToken, ViewContainerRef, Directive, Attribute, ContentChild, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { MAT_DATE_FORMATS, DateAdapter, mixinColor } from '@angular/material/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE } from '@angular/cdk/keycodes';
@@ -13,7 +14,7 @@ import { take, startWith, filter } from 'rxjs/operators';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
-import { MatFormField } from '@angular/material/form-field';
+import { MatFormField, MAT_FORM_FIELD } from '@angular/material/form-field';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
 
 /**
@@ -310,7 +311,7 @@ MatCalendarBody.decorators = [
                 exportAs: 'matCalendarBody',
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;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}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.cdk-high-contrast-active .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-high-contrast-active .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}\n"]
+                styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;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}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.cdk-high-contrast-active .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-high-contrast-active .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}@media(hover: none){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background-color:transparent}}\n"]
             }] }
 ];
 /** @nocollapse */
@@ -2146,7 +2147,7 @@ class MatCalendar {
         else {
             view = this.multiYearView;
         }
-        view.ngAfterContentInit();
+        view._init();
     }
     /**
      * Handles date selection in the month view.
@@ -2217,7 +2218,7 @@ MatCalendar.decorators = [
                 exportAs: 'matCalendar',
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;margin:5% calc(33% / 7 - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0}.mat-calendar-arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top-width:5px;border-top-style:solid;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}.mat-calendar-previous-button,.mat-calendar-next-button{position:relative}.mat-calendar-previous-button::after,.mat-calendar-next-button::after{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-previous-button::after{border-left-width:2px;transform:translateX(2px) rotate(-45deg)}.mat-calendar-next-button::after{border-right-width:2px;transform:translateX(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px}\n"]
+                styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;margin:5% calc(33% / 7 - 16px)}.mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0}.mat-calendar-arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top-width:5px;border-top-style:solid;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}.mat-calendar-previous-button,.mat-calendar-next-button{position:relative}.mat-calendar-previous-button::after,.mat-calendar-next-button::after{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-previous-button::after{border-left-width:2px;transform:translateX(2px) rotate(-45deg)}.mat-calendar-next-button::after{border-right-width:2px;transform:translateX(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px}\n"]
             }] }
 ];
 /** @nocollapse */
@@ -2903,7 +2904,13 @@ class MatDatepicker {
             maxHeight: '',
             position: {},
             autoFocus: true,
-            restoreFocus: true
+            // `MatDialog` has focus restoration built in, however we want to disable it since the
+            // datepicker also has focus restoration for dropdown mode. We want to do this, in order
+            // to ensure that the timing is consistent between dropdown and dialog modes since `MatDialog`
+            // restores focus when the animation is finished, but the datepicker does it immediately.
+            // Furthermore, this avoids any conflicts where the datepicker consumer might move focus
+            // inside the `closed` event which is dispatched immediately.
+            restoreFocus: false
         });
         this._dialogRef.afterClosed().subscribe((/**
          * @return {?}
@@ -3511,13 +3518,22 @@ class MatDatepickerInput {
             this._disabledChange.emit(newValue);
         }
         // We need to null check the `blur` method, because it's undefined during SSR.
-        if (newValue && element.blur) {
+        // In Ivy static bindings are invoked earlier, before the element is attached to the DOM.
+        // This can cause an error to be thrown in some browsers (IE/Edge) which assert that the
+        // element has been inserted.
+        if (newValue && this._isInitialized && element.blur) {
             // Normally, native input elements automatically blur if they turn disabled. This behavior
             // is problematic, because it would mean that it triggers another change detection cycle,
             // which then causes a changed after checked error if the input element was focused before.
             element.blur();
         }
     }
+    /**
+     * @return {?}
+     */
+    ngAfterViewInit() {
+        this._isInitialized = true;
+    }
     /**
      * @return {?}
      */
@@ -3693,7 +3709,7 @@ MatDatepickerInput.ctorParameters = () => [
     { type: ElementRef },
     { type: DateAdapter, decorators: [{ type: Optional }] },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },
-    { type: MatFormField, decorators: [{ type: Optional }] }
+    { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] }
 ];
 MatDatepickerInput.propDecorators = {
     matDatepicker: [{ type: Input }],
@@ -3710,6 +3726,12 @@ if (false) {
     MatDatepickerInput.ngAcceptInputType_value;
     /** @type {?} */
     MatDatepickerInput.ngAcceptInputType_disabled;
+    /**
+     * Whether the component has been initialized.
+     * @type {?}
+     * @private
+     */
+    MatDatepickerInput.prototype._isInitialized;
     /** @type {?} */
     MatDatepickerInput.prototype._datepicker;
     /** @type {?} */
@@ -4031,6 +4053,7 @@ MatDatepickerModule.decorators = [
                     PortalModule,
                 ],
                 exports: [
+                    CdkScrollableModule,
                     MatCalendar,
                     MatCalendarBody,
                     MatDatepicker,