@angular/material 12.0.0-rc.2 → 12.0.2

package/fesm2015/datepicker.js

@@ -12,6 +12,7 @@ import { ESCAPE, hasModifierKey, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DO
 import { Directionality } from '@angular/cdk/bidi';
 import { take, startWith, filter } from 'rxjs/operators';
 import { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
+import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, NgControl, NgForm, FormGroupDirective, ControlContainer } from '@angular/forms';
 import { MatFormField, MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
@@ -61,9 +62,9 @@ class MatDatepickerIntl {
         /** A label for the next year button (used by screen readers). */
         this.nextYearLabel = 'Next year';
         /** A label for the previous multi-year button (used by screen readers). */
-        this.prevMultiYearLabel = 'Previous 20 years';
+        this.prevMultiYearLabel = 'Previous 24 years';
         /** A label for the next multi-year button (used by screen readers). */
-        this.nextMultiYearLabel = 'Next 20 years';
+        this.nextMultiYearLabel = 'Next 24 years';
         /** A label for the 'switch to month view' button (used by screen readers). */
         this.switchToMonthViewLabel = 'Choose date';
         /** A label for the 'switch to year view' button (used by screen readers). */
@@ -1938,13 +1939,17 @@ class MatDatepickerBase {
      * @deprecated `_dialog` parameter is no longer being used and it will be removed.
      * @breaking-change 13.0.0
      */
-    _dialog, _overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _document, _model) {
+    _dialog, _overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, 
+    /**
+     * @deprecated No longer being used. To be removed.
+     * @breaking-change 13.0.0
+     */
+    _document, _model) {
         this._overlay = _overlay;
         this._ngZone = _ngZone;
         this._viewContainerRef = _viewContainerRef;
         this._dateAdapter = _dateAdapter;
         this._dir = _dir;
-        this._document = _document;
         this._model = _model;
         this._inputStateChanges = Subscription.EMPTY;
         /** The view that the calendar should start in. */
@@ -2128,18 +2133,13 @@ class MatDatepickerBase {
     }
     /** Open the calendar. */
     open() {
-        var _a, _b;
         if (this._opened || this.disabled) {
             return;
         }
         if (!this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error('Attempted to open an MatDatepicker with no associated input.');
         }
-        // If the `activeElement` is inside a shadow root, `document.activeElement` will
-        // point to the shadow root so we have to descend into it ourselves.
-        const activeElement = (_a = this._document) === null || _a === void 0 ? void 0 : _a.activeElement;
-        this._focusedElementBeforeOpen =
-            ((_b = activeElement === null || activeElement === void 0 ? void 0 : activeElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) || activeElement;
+        this._focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
         this._openOverlay();
         this._opened = true;
         this.openedStream.emit();
@@ -2192,6 +2192,7 @@ class MatDatepickerBase {
     _openOverlay() {
         this._destroyOverlay();
         const isDialog = this.touchUi;
+        const labelId = this.datepickerInput.getOverlayLabelId();
         const portal = new ComponentPortal(MatDatepickerContent, this._viewContainerRef);
         const overlayRef = this._overlayRef = this._overlay.create(new OverlayConfig({
             positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),
@@ -2204,9 +2205,13 @@ class MatDatepickerBase {
             scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),
             panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`,
         }));
-        overlayRef.overlayElement.setAttribute('role', 'dialog');
+        const overlayElement = overlayRef.overlayElement;
+        overlayElement.setAttribute('role', 'dialog');
+        if (labelId) {
+            overlayElement.setAttribute('aria-labelledby', labelId);
+        }
         if (isDialog) {
-            overlayRef.overlayElement.setAttribute('aria-modal', 'true');
+            overlayElement.setAttribute('aria-modal', 'true');
         }
         this._getCloseStream(overlayRef).subscribe(event => {
             if (event) {
@@ -2698,6 +2703,13 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     getConnectedOverlayOrigin() {
         return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
     }
+    /** Gets the ID of an element that should be used a description for the calendar overlay. */
+    getOverlayLabelId() {
+        if (this._formField) {
+            return this._formField.getLabelId();
+        }
+        return this._elementRef.nativeElement.getAttribute('aria-labelledby');
+    }
     /** Returns the palette used by the input's form field, if any. */
     getThemePalette() {
         return this._formField ? this._formField.color : undefined;
@@ -2909,7 +2921,8 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
         // itself. Usually we can work around it for the CVA, but there's no API to do it for the
         // validator. We work around it here by injecting the `NgControl` in `ngOnInit`, after
         // everything has been resolved.
-        const ngControl = this._injector.get(NgControl, null, InjectFlags.Self);
+        // tslint:disable-next-line:no-bitwise
+        const ngControl = this._injector.get(NgControl, null, InjectFlags.Self | InjectFlags.Optional);
         if (ngControl) {
             this.ngControl = ngControl;
         }
@@ -3389,6 +3402,10 @@ class MatDateRangeInput {
     getConnectedOverlayOrigin() {
         return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
     }
+    /** Gets the ID of an element that should be used a description for the calendar overlay. */
+    getOverlayLabelId() {
+        return this._formField ? this._formField.getLabelId() : null;
+    }
     /** Gets the value that is used to mirror the state input. */
     _getInputMirrorValue() {
         return this._startInput ? this._startInput.getMirrorValue() : '';