@angular/material 11.1.0 → 11.1.1

package/fesm2015/datepicker.js

@@ -2662,12 +2662,14 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     constructor(elementRef, dateAdapter, dateFormats, _formField) {
         super(elementRef, dateAdapter, dateFormats);
         this._formField = _formField;
+        this._closedSubscription = Subscription.EMPTY;
         this._validator = Validators.compose(super._getValidators());
     }
     /** The datepicker that this input is associated with. */
     set matDatepicker(datepicker) {
         if (datepicker) {
             this._datepicker = datepicker;
+            this._closedSubscription = datepicker.closedStream.subscribe(() => this._onTouched());
             this._registerModel(datepicker.registerInput(this));
         }
     }
@@ -2713,6 +2715,10 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     getStartValue() {
         return this.value;
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._closedSubscription.unsubscribe();
+    }
     /** Opens the associated datepicker. */
     _openPopup() {
         if (this._datepicker) {
@@ -2849,15 +2855,12 @@ MatDatepickerToggle.decorators = [
                 template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n  (click)=\"_open($event)\">\n\n  <svg\n    *ngIf=\"!_customIcon\"\n    class=\"mat-datepicker-toggle-default-icon\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    height=\"24px\"\n    fill=\"currentColor\"\n    focusable=\"false\">\n    <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/>\n  </svg>\n\n  <ng-content select=\"[matDatepickerToggleIcon]\"></ng-content>\n</button>\n",
                 host: {
                     'class': 'mat-datepicker-toggle',
-                    // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
-                    // consumer may have provided, while still being able to receive focus.
-                    '[attr.tabindex]': 'disabled ? null : -1',
+                    '[attr.tabindex]': 'null',
                     '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
                     '[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
                     '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
                     // Used by the test harness to tie this toggle to its datepicker.
                     '[attr.data-mat-calendar]': 'datepicker ? datepicker.id : null',
-                    '(focus)': '_button.focus()',
                 },
                 exportAs: 'matDatepickerToggle',
                 encapsulation: ViewEncapsulation.None,
@@ -3182,6 +3185,7 @@ class MatDateRangeInput {
         this._elementRef = _elementRef;
         this._dateAdapter = _dateAdapter;
         this._formField = _formField;
+        this._closedSubscription = Subscription.EMPTY;
         /** Unique ID for the input. */
         this.id = `mat-date-range-input-${nextUniqueId++}`;
         /** Whether the control is focused. */
@@ -3230,6 +3234,12 @@ class MatDateRangeInput {
         if (rangePicker) {
             this._model = rangePicker.registerInput(this);
             this._rangePicker = rangePicker;
+            this._closedSubscription.unsubscribe();
+            this._closedSubscription = rangePicker.closedStream.subscribe(() => {
+                var _a, _b;
+                (_a = this._startInput) === null || _a === void 0 ? void 0 : _a._onTouched();
+                (_b = this._endInput) === null || _b === void 0 ? void 0 : _b._onTouched();
+            });
             this._registerModel(this._model);
         }
     }
@@ -3342,6 +3352,7 @@ class MatDateRangeInput {
         }
     }
     ngOnDestroy() {
+        this._closedSubscription.unsubscribe();
         this.stateChanges.complete();
     }
     /** Gets the date at which the calendar should start. */