@angular/material 12.2.2 → 12.2.6

package/bundles/material-datepicker.umd.js

@@ -1105,9 +1105,13 @@
                     break;
                 case keycodes.ENTER:
                 case keycodes.SPACE:
-                    if (!this.dateFilter || this.dateFilter(this._activeDate)) {
-                        this._dateSelected({ value: this._dateAdapter.getDate(this._activeDate), event: event });
+                    this._selectionKeyPressed = true;
+                    if (this._canSelect(this._activeDate)) {
                         // Prevent unexpected default actions such as form submission.
+                        // Note that we only prevent the default action here while the selection happens in
+                        // `keyup` below. We can't do the selection here, because it can cause the calendar to
+                        // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`
+                        // because it's too late (see #23305).
                         event.preventDefault();
                     }
                     return;
@@ -1132,6 +1136,15 @@
             // Prevent unexpected default actions such as form submission.
             event.preventDefault();
         };
+        /** Handles keyup events on the calendar body when calendar is in month view. */
+        MatMonthView.prototype._handleCalendarBodyKeyup = function (event) {
+            if (event.keyCode === keycodes.SPACE || event.keyCode === keycodes.ENTER) {
+                if (this._selectionKeyPressed && this._canSelect(this._activeDate)) {
+                    this._dateSelected({ value: this._dateAdapter.getDate(this._activeDate), event: event });
+                }
+                this._selectionKeyPressed = false;
+            }
+        };
         /** Initializes this month view. */
         MatMonthView.prototype._init = function () {
             this._setRanges(this.selected);
@@ -1247,12 +1260,16 @@
             this._comparisonRangeStart = this._getCellCompareValue(this.comparisonStart);
             this._comparisonRangeEnd = this._getCellCompareValue(this.comparisonEnd);
         };
+        /** Gets whether a date can be selected in the month view. */
+        MatMonthView.prototype._canSelect = function (date) {
+            return !this.dateFilter || this.dateFilter(date);
+        };
         return MatMonthView;
     }());
     MatMonthView.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-month-view',
-                    template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      <!-- For the day-of-the-week column header, we use an `<abbr>` element because VoiceOver\n           ignores the `aria-label`. ChromeVox, however, does not read the full name\n           for the `<abbr>`, so we still set `aria-label` on the header element. -->\n      <th scope=\"col\" *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">\n        <abbr class=\"mat-calendar-abbr\" [attr.title]=\"day.long\">{{day.narrow}}</abbr>\n      </th>\n    </tr>\n    <tr><th aria-hidden=\"true\" class=\"mat-calendar-table-header-divider\" colspan=\"7\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_monthLabel\"\n         [rows]=\"_weeks\"\n         [todayValue]=\"_todayDate!\"\n         [startValue]=\"_rangeStart!\"\n         [endValue]=\"_rangeEnd!\"\n         [comparisonStart]=\"_comparisonRangeStart\"\n         [comparisonEnd]=\"_comparisonRangeEnd\"\n         [previewStart]=\"_previewStart\"\n         [previewEnd]=\"_previewEnd\"\n         [isRange]=\"_isRange\"\n         [labelMinRequiredCells]=\"3\"\n         [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n         (selectedValueChange)=\"_dateSelected($event)\"\n         (previewChange)=\"_previewChanged($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
+                    template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      <!-- For the day-of-the-week column header, we use an `<abbr>` element because VoiceOver\n           ignores the `aria-label`. ChromeVox, however, does not read the full name\n           for the `<abbr>`, so we still set `aria-label` on the header element. -->\n      <th scope=\"col\" *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">\n        <abbr class=\"mat-calendar-abbr\" [attr.title]=\"day.long\">{{day.narrow}}</abbr>\n      </th>\n    </tr>\n    <tr><th aria-hidden=\"true\" class=\"mat-calendar-table-header-divider\" colspan=\"7\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_monthLabel\"\n         [rows]=\"_weeks\"\n         [todayValue]=\"_todayDate!\"\n         [startValue]=\"_rangeStart!\"\n         [endValue]=\"_rangeEnd!\"\n         [comparisonStart]=\"_comparisonRangeStart\"\n         [comparisonEnd]=\"_comparisonRangeEnd\"\n         [previewStart]=\"_previewStart\"\n         [previewEnd]=\"_previewEnd\"\n         [isRange]=\"_isRange\"\n         [labelMinRequiredCells]=\"3\"\n         [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n         (selectedValueChange)=\"_dateSelected($event)\"\n         (previewChange)=\"_previewChanged($event)\"\n         (keyup)=\"_handleCalendarBodyKeyup($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
                     exportAs: 'matMonthView',
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -1428,7 +1445,11 @@
                     break;
                 case keycodes.ENTER:
                 case keycodes.SPACE:
-                    this._yearSelected({ value: this._dateAdapter.getYear(this._activeDate), event: event });
+                    // Note that we only prevent the default action here while the selection happens in
+                    // `keyup` below. We can't do the selection here, because it can cause the calendar to
+                    // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`
+                    // because it's too late (see #23305).
+                    this._selectionKeyPressed = true;
                     break;
                 default:
                     // Don't prevent default or focus active cell on keys that we don't explicitly handle.
@@ -1441,6 +1462,15 @@
             // Prevent unexpected default actions such as form submission.
             event.preventDefault();
         };
+        /** Handles keyup events on the calendar body when calendar is in multi-year view. */
+        MatMultiYearView.prototype._handleCalendarBodyKeyup = function (event) {
+            if (event.keyCode === keycodes.SPACE || event.keyCode === keycodes.ENTER) {
+                if (this._selectionKeyPressed) {
+                    this._yearSelected({ value: this._dateAdapter.getYear(this._activeDate), event: event });
+                }
+                this._selectionKeyPressed = false;
+            }
+        };
         MatMultiYearView.prototype._getActiveCell = function () {
             return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);
         };
@@ -1498,7 +1528,7 @@
     MatMultiYearView.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-multi-year-view',
-                    template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [startValue]=\"_selectedYear!\"\n         [endValue]=\"_selectedYear!\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
+                    template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [startValue]=\"_selectedYear!\"\n         [endValue]=\"_selectedYear!\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keyup)=\"_handleCalendarBodyKeyup($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
                     exportAs: 'matMultiYearView',
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -1691,7 +1721,11 @@
                     break;
                 case keycodes.ENTER:
                 case keycodes.SPACE:
-                    this._monthSelected({ value: this._dateAdapter.getMonth(this._activeDate), event: event });
+                    // Note that we only prevent the default action here while the selection happens in
+                    // `keyup` below. We can't do the selection here, because it can cause the calendar to
+                    // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`
+                    // because it's too late (see #23305).
+                    this._selectionKeyPressed = true;
                     break;
                 default:
                     // Don't prevent default or focus active cell on keys that we don't explicitly handle.
@@ -1704,6 +1738,15 @@
             // Prevent unexpected default actions such as form submission.
             event.preventDefault();
         };
+        /** Handles keyup events on the calendar body when calendar is in year view. */
+        MatYearView.prototype._handleCalendarBodyKeyup = function (event) {
+            if (event.keyCode === keycodes.SPACE || event.keyCode === keycodes.ENTER) {
+                if (this._selectionKeyPressed) {
+                    this._monthSelected({ value: this._dateAdapter.getMonth(this._activeDate), event: event });
+                }
+                this._selectionKeyPressed = false;
+            }
+        };
         /** Initializes this year view. */
         MatYearView.prototype._init = function () {
             var _this = this;
@@ -1797,7 +1840,7 @@
     MatYearView.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-year-view',
-                    template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [startValue]=\"_selectedMonth!\"\n         [endValue]=\"_selectedMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
+                    template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [startValue]=\"_selectedMonth!\"\n         [endValue]=\"_selectedMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         (keyup)=\"_handleCalendarBodyKeyup($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
                     exportAs: 'matYearView',
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -3732,7 +3775,7 @@
             if (_formField === null || _formField === void 0 ? void 0 : _formField._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
                 var classList = _elementRef.nativeElement.classList;
                 classList.add('mat-mdc-input-element');
-                classList.add('mat-mdc-form-field-control');
+                classList.add('mat-mdc-form-field-input-control');
             }
             // TODO(crisbeto): remove `as any` after #18206 lands.
             this.ngControl = control;