@angular/material 11.1.0 → 11.1.1

package/bundles/material-datepicker.umd.js

@@ -3102,14 +3102,17 @@
         function MatDatepickerInput(elementRef, dateAdapter, dateFormats, _formField) {
             var _this = _super.call(this, elementRef, dateAdapter, dateFormats) || this;
             _this._formField = _formField;
+            _this._closedSubscription = rxjs.Subscription.EMPTY;
             _this._validator = forms.Validators.compose(_super.prototype._getValidators.call(_this));
             return _this;
         }
         Object.defineProperty(MatDatepickerInput.prototype, "matDatepicker", {
             /** The datepicker that this input is associated with. */
             set: function (datepicker) {
+                var _this = this;
                 if (datepicker) {
                     this._datepicker = datepicker;
+                    this._closedSubscription = datepicker.closedStream.subscribe(function () { return _this._onTouched(); });
                     this._registerModel(datepicker.registerInput(this));
                 }
             },
@@ -3170,6 +3173,10 @@
         MatDatepickerInput.prototype.getStartValue = function () {
             return this.value;
         };
+        MatDatepickerInput.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            this._closedSubscription.unsubscribe();
+        };
         /** Opens the associated datepicker. */
         MatDatepickerInput.prototype._openPopup = function () {
             if (this._datepicker) {
@@ -3316,15 +3323,12 @@
                     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: i0.ViewEncapsulation.None,
@@ -3654,6 +3658,7 @@
             this._elementRef = _elementRef;
             this._dateAdapter = _dateAdapter;
             this._formField = _formField;
+            this._closedSubscription = rxjs.Subscription.EMPTY;
             /** Unique ID for the input. */
             this.id = "mat-date-range-input-" + nextUniqueId++;
             /** Whether the control is focused. */
@@ -3712,9 +3717,16 @@
             /** The range picker that this input is associated with. */
             get: function () { return this._rangePicker; },
             set: function (rangePicker) {
+                var _this = this;
                 if (rangePicker) {
                     this._model = rangePicker.registerInput(this);
                     this._rangePicker = rangePicker;
+                    this._closedSubscription.unsubscribe();
+                    this._closedSubscription = rangePicker.closedStream.subscribe(function () {
+                        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);
                 }
             },
@@ -3859,6 +3871,7 @@
             }
         };
         MatDateRangeInput.prototype.ngOnDestroy = function () {
+            this._closedSubscription.unsubscribe();
             this.stateChanges.complete();
         };
         /** Gets the date at which the calendar should start. */