@angular/material 22.0.0-next.7 → 22.0.0-rc.0

package/fesm2022/datepicker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Service, inject, ElementRef, NgZone, EventEmitter, Injector, Renderer2, afterNextRender, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, InjectionToken, ChangeDetectorRef, signal, ViewChild, ViewContainerRef, DOCUMENT, booleanAttribute, Directive, forwardRef, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';
+import { Service, inject, ElementRef, NgZone, EventEmitter, Injector, Renderer2, afterNextRender, Output, Input, ViewEncapsulation, Component, Injectable, InjectionToken, ChangeDetectorRef, signal, ViewChild, ViewContainerRef, DOCUMENT, booleanAttribute, Directive, forwardRef, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { DateAdapter, MAT_DATE_FORMATS } from './_date-formats-chunk.mjs';
 import { _IdGenerator, CdkMonitorFocus, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
@@ -57,7 +57,7 @@ class MatDatepickerIntl {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerIntl,
     deps: [],
@@ -65,14 +65,14 @@ class MatDatepickerIntl {
   });
   static ɵprov = i0.ɵɵngDeclareService({
     minVersion: "22.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerIntl
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerIntl,
   decorators: [{
@@ -415,7 +415,7 @@ class MatCalendarBody {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatCalendarBody,
     deps: [],
@@ -423,7 +423,7 @@ class MatCalendarBody {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatCalendarBody,
     isStandalone: true,
     selector: "[mat-calendar-body]",
@@ -460,13 +460,12 @@ class MatCalendarBody {
     ngImport: i0,
     template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td class=\"mat-calendar-body-label\"\n        [attr.colspan]=\"numCols\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\">\n      {{label}}\n    </td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n      This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n      because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n      table cells is maintained by setting the top and bottom padding as a percentage of the width\n      (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td\n        class=\"mat-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\">\n        {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n      </td>\n    }\n    <!--\n      Each gridcell in the calendar contains a button, which signals to assistive technology that the\n      cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n      background.\n    -->\n    @for (item of row; track item.id; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mat-calendar-body-cell-container\"\n        [style.width]=\"_cellWidth\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\"\n      >\n        <button\n            type=\"button\"\n            class=\"mat-calendar-body-cell\"\n            [class]=\"item.cssClasses\"\n            [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n            [class.mat-calendar-body-disabled]=\"!item.enabled\"\n            [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n            [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n            [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n            [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n            [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n            [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n            [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n            [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n            [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n            [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n            [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n            [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n            [attr.aria-label]=\"item.ariaLabel\"\n            [attr.aria-disabled]=\"!item.enabled || null\"\n            [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\n            [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n            [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\n            (click)=\"_cellClicked(item, $event)\"\n            (focus)=\"_emitActiveDateChange(item, $event)\">\n            <span class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n              [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n              [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\n              [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n              {{item.displayValue}}\n            </span>\n            <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n        </button>\n      </td>\n    }\n  </tr>\n}\n\n<span [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{startDateAccessibleName}}\n</span>\n<span [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{endDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonStartDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{comparisonDateAccessibleName}} {{startDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonEndDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{comparisonDateAccessibleName}} {{endDateAccessibleName}}\n</span>\n",
     styles: [".mat-calendar-body {\n  min-width: 224px;\n}\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  border-color: var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-sys-primary));\n}\n\n.mat-calendar-body-label {\n  height: 0;\n  line-height: 0;\n  text-align: start;\n  padding-left: 4.7142857143%;\n  padding-right: 4.7142857143%;\n  font-size: var(--mat-datepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));\n  font-weight: var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));\n  color: var(--mat-datepicker-calendar-body-label-text-color, var(--mat-sys-on-surface));\n}\n\n.mat-calendar-body-hidden-label {\n  display: none;\n}\n\n.mat-calendar-body-cell-container {\n  position: relative;\n  height: 0;\n  line-height: 0;\n}\n\n.mat-calendar-body-cell {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: none;\n  text-align: center;\n  outline: none;\n  margin: 0;\n  font-family: var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));\n  font-size: var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));\n  -webkit-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  outline: none;\n  border: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.mat-calendar-body-cell::-moz-focus-inner {\n  border: 0;\n}\n\n.mat-calendar-body-cell::before,\n.mat-calendar-body-cell::after,\n.mat-calendar-body-cell-preview {\n  content: \"\";\n  position: absolute;\n  top: 5%;\n  left: 0;\n  z-index: 0;\n  box-sizing: border-box;\n  display: block;\n  height: 90%;\n  width: 100%;\n}\n\n.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,\n.mat-calendar-body-range-start::after,\n.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,\n.mat-calendar-body-comparison-start::after,\n.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  left: 5%;\n  width: 95%;\n  border-top-left-radius: 999px;\n  border-bottom-left-radius: 999px;\n}\n[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,\n[dir=rtl] .mat-calendar-body-range-start::after,\n[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,\n[dir=rtl] .mat-calendar-body-comparison-start::after,\n[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  left: 0;\n  border-radius: 0;\n  border-top-right-radius: 999px;\n  border-bottom-right-radius: 999px;\n}\n\n.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,\n.mat-calendar-body-range-end::after,\n.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,\n.mat-calendar-body-comparison-end::after,\n.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  width: 95%;\n  border-top-right-radius: 999px;\n  border-bottom-right-radius: 999px;\n}\n[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,\n[dir=rtl] .mat-calendar-body-range-end::after,\n[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,\n[dir=rtl] .mat-calendar-body-comparison-end::after,\n[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  left: 5%;\n  border-radius: 0;\n  border-top-left-radius: 999px;\n  border-bottom-left-radius: 999px;\n}\n\n[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,\n[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after {\n  width: 95%;\n  border-top-right-radius: 999px;\n  border-bottom-right-radius: 999px;\n}\n\n.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after, [dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,\n.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,\n[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after {\n  width: 90%;\n}\n\n.mat-calendar-body-in-preview {\n  color: var(--mat-datepicker-calendar-date-preview-state-outline-color, var(--mat-sys-primary));\n}\n.mat-calendar-body-in-preview .mat-calendar-body-cell-preview {\n  border-top: dashed 1px;\n  border-bottom: dashed 1px;\n}\n\n.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  border-left: dashed 1px;\n}\n[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  border-left: 0;\n  border-right: dashed 1px;\n}\n\n.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  border-right: dashed 1px;\n}\n[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  border-right: 0;\n  border-left: dashed 1px;\n}\n\n.mat-calendar-body-disabled {\n  cursor: default;\n}\n.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  color: var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  border-color: var(--mat-datepicker-calendar-date-today-disabled-state-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n@media (forced-colors: active) {\n  .mat-calendar-body-disabled {\n    opacity: 0.5;\n  }\n}\n\n.mat-calendar-body-cell-content {\n  top: 5%;\n  left: 5%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 90%;\n  height: 90%;\n  line-height: 1;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 999px;\n  color: var(--mat-datepicker-calendar-date-text-color, var(--mat-sys-on-surface));\n  border-color: var(--mat-datepicker-calendar-date-outline-color, transparent);\n}\n.mat-calendar-body-cell-content.mat-focus-indicator {\n  position: absolute;\n}\n@media (forced-colors: active) {\n  .mat-calendar-body-cell-content {\n    border: none;\n  }\n}\n\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  background-color: var(--mat-datepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));\n}\n\n@media (hover: hover) {\n  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));\n  }\n}\n.mat-calendar-body-selected {\n  background-color: var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));\n  color: var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary));\n}\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n  background-color: var(--mat-datepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-calendar-body-selected.mat-calendar-body-today {\n  box-shadow: inset 0 0 0 1px var(--mat-datepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary));\n}\n\n.mat-calendar-body-in-range::before {\n  background: var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container));\n}\n\n.mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range::before {\n  background: var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container));\n}\n\n.mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range::before {\n  background: var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container));\n}\n\n.mat-calendar-body-comparison-bridge-start::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n  background: linear-gradient(to right, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%);\n}\n\n.mat-calendar-body-comparison-bridge-end::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n  background: linear-gradient(to left, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%);\n}\n\n.mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n  background: var(--mat-datepicker-calendar-date-in-overlap-range-state-background-color, var(--mat-sys-secondary-container));\n}\n\n.mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n  background: var(--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color, var(--mat-sys-secondary));\n}\n\n@media (forced-colors: active) {\n  .mat-datepicker-popup:not(:empty),\n  .mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected {\n    outline: solid 1px;\n  }\n  .mat-calendar-body-today {\n    outline: dotted 1px;\n  }\n  .mat-calendar-body-cell::before,\n  .mat-calendar-body-cell::after,\n  .mat-calendar-body-selected {\n    background: none;\n  }\n  .mat-calendar-body-in-range::before,\n  .mat-calendar-body-comparison-bridge-start::before,\n  .mat-calendar-body-comparison-bridge-end::before {\n    border-top: solid 1px;\n    border-bottom: solid 1px;\n  }\n  .mat-calendar-body-range-start::before {\n    border-left: solid 1px;\n  }\n  [dir=rtl] .mat-calendar-body-range-start::before {\n    border-left: 0;\n    border-right: solid 1px;\n  }\n  .mat-calendar-body-range-end::before {\n    border-right: solid 1px;\n  }\n  [dir=rtl] .mat-calendar-body-range-end::before {\n    border-right: 0;\n    border-left: solid 1px;\n  }\n  .mat-calendar-body-in-comparison-range::before {\n    border-top: dashed 1px;\n    border-bottom: dashed 1px;\n  }\n  .mat-calendar-body-comparison-start::before {\n    border-left: dashed 1px;\n  }\n  [dir=rtl] .mat-calendar-body-comparison-start::before {\n    border-left: 0;\n    border-right: dashed 1px;\n  }\n  .mat-calendar-body-comparison-end::before {\n    border-right: dashed 1px;\n  }\n  [dir=rtl] .mat-calendar-body-comparison-end::before {\n    border-right: 0;\n    border-left: dashed 1px;\n  }\n}\n"],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatCalendarBody,
   decorators: [{
@@ -478,7 +477,6 @@ i0.ɵɵngDeclareClassMetadata({
       },
       exportAs: 'matCalendarBody',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td class=\"mat-calendar-body-label\"\n        [attr.colspan]=\"numCols\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\">\n      {{label}}\n    </td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n      This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n      because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n      table cells is maintained by setting the top and bottom padding as a percentage of the width\n      (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td\n        class=\"mat-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\">\n        {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n      </td>\n    }\n    <!--\n      Each gridcell in the calendar contains a button, which signals to assistive technology that the\n      cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n      background.\n    -->\n    @for (item of row; track item.id; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mat-calendar-body-cell-container\"\n        [style.width]=\"_cellWidth\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\"\n      >\n        <button\n            type=\"button\"\n            class=\"mat-calendar-body-cell\"\n            [class]=\"item.cssClasses\"\n            [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n            [class.mat-calendar-body-disabled]=\"!item.enabled\"\n            [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n            [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n            [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n            [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n            [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n            [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n            [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n            [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n            [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n            [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n            [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n            [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n            [attr.aria-label]=\"item.ariaLabel\"\n            [attr.aria-disabled]=\"!item.enabled || null\"\n            [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\n            [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n            [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\n            (click)=\"_cellClicked(item, $event)\"\n            (focus)=\"_emitActiveDateChange(item, $event)\">\n            <span class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n              [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n              [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\n              [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n              {{item.displayValue}}\n            </span>\n            <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n        </button>\n      </td>\n    }\n  </tr>\n}\n\n<span [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{startDateAccessibleName}}\n</span>\n<span [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{endDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonStartDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{comparisonDateAccessibleName}} {{startDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonEndDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{comparisonDateAccessibleName}} {{endDateAccessibleName}}\n</span>\n",
       styles: [".mat-calendar-body {\n  min-width: 224px;\n}\n\n.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  border-color: var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-sys-primary));\n}\n\n.mat-calendar-body-label {\n  height: 0;\n  line-height: 0;\n  text-align: start;\n  padding-left: 4.7142857143%;\n  padding-right: 4.7142857143%;\n  font-size: var(--mat-datepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));\n  font-weight: var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));\n  color: var(--mat-datepicker-calendar-body-label-text-color, var(--mat-sys-on-surface));\n}\n\n.mat-calendar-body-hidden-label {\n  display: none;\n}\n\n.mat-calendar-body-cell-container {\n  position: relative;\n  height: 0;\n  line-height: 0;\n}\n\n.mat-calendar-body-cell {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: none;\n  text-align: center;\n  outline: none;\n  margin: 0;\n  font-family: var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));\n  font-size: var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));\n  -webkit-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  outline: none;\n  border: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.mat-calendar-body-cell::-moz-focus-inner {\n  border: 0;\n}\n\n.mat-calendar-body-cell::before,\n.mat-calendar-body-cell::after,\n.mat-calendar-body-cell-preview {\n  content: \"\";\n  position: absolute;\n  top: 5%;\n  left: 0;\n  z-index: 0;\n  box-sizing: border-box;\n  display: block;\n  height: 90%;\n  width: 100%;\n}\n\n.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,\n.mat-calendar-body-range-start::after,\n.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,\n.mat-calendar-body-comparison-start::after,\n.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  left: 5%;\n  width: 95%;\n  border-top-left-radius: 999px;\n  border-bottom-left-radius: 999px;\n}\n[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,\n[dir=rtl] .mat-calendar-body-range-start::after,\n[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,\n[dir=rtl] .mat-calendar-body-comparison-start::after,\n[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  left: 0;\n  border-radius: 0;\n  border-top-right-radius: 999px;\n  border-bottom-right-radius: 999px;\n}\n\n.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,\n.mat-calendar-body-range-end::after,\n.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,\n.mat-calendar-body-comparison-end::after,\n.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  width: 95%;\n  border-top-right-radius: 999px;\n  border-bottom-right-radius: 999px;\n}\n[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,\n[dir=rtl] .mat-calendar-body-range-end::after,\n[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,\n[dir=rtl] .mat-calendar-body-comparison-end::after,\n[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  left: 5%;\n  border-radius: 0;\n  border-top-left-radius: 999px;\n  border-bottom-left-radius: 999px;\n}\n\n[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,\n[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after {\n  width: 95%;\n  border-top-right-radius: 999px;\n  border-bottom-right-radius: 999px;\n}\n\n.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after, [dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,\n.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,\n[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after {\n  width: 90%;\n}\n\n.mat-calendar-body-in-preview {\n  color: var(--mat-datepicker-calendar-date-preview-state-outline-color, var(--mat-sys-primary));\n}\n.mat-calendar-body-in-preview .mat-calendar-body-cell-preview {\n  border-top: dashed 1px;\n  border-bottom: dashed 1px;\n}\n\n.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  border-left: dashed 1px;\n}\n[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {\n  border-left: 0;\n  border-right: dashed 1px;\n}\n\n.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  border-right: dashed 1px;\n}\n[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {\n  border-right: 0;\n  border-left: dashed 1px;\n}\n\n.mat-calendar-body-disabled {\n  cursor: default;\n}\n.mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  color: var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  border-color: var(--mat-datepicker-calendar-date-today-disabled-state-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n@media (forced-colors: active) {\n  .mat-calendar-body-disabled {\n    opacity: 0.5;\n  }\n}\n\n.mat-calendar-body-cell-content {\n  top: 5%;\n  left: 5%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 90%;\n  height: 90%;\n  line-height: 1;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 999px;\n  color: var(--mat-datepicker-calendar-date-text-color, var(--mat-sys-on-surface));\n  border-color: var(--mat-datepicker-calendar-date-outline-color, transparent);\n}\n.mat-calendar-body-cell-content.mat-focus-indicator {\n  position: absolute;\n}\n@media (forced-colors: active) {\n  .mat-calendar-body-cell-content {\n    border: none;\n  }\n}\n\n.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n  background-color: var(--mat-datepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));\n}\n\n@media (hover: hover) {\n  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));\n  }\n}\n.mat-calendar-body-selected {\n  background-color: var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));\n  color: var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary));\n}\n.mat-calendar-body-disabled > .mat-calendar-body-selected {\n  background-color: var(--mat-datepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-calendar-body-selected.mat-calendar-body-today {\n  box-shadow: inset 0 0 0 1px var(--mat-datepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary));\n}\n\n.mat-calendar-body-in-range::before {\n  background: var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container));\n}\n\n.mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range::before {\n  background: var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container));\n}\n\n.mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range::before {\n  background: var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container));\n}\n\n.mat-calendar-body-comparison-bridge-start::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-end::before {\n  background: linear-gradient(to right, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%);\n}\n\n.mat-calendar-body-comparison-bridge-end::before,\n[dir=rtl] .mat-calendar-body-comparison-bridge-start::before {\n  background: linear-gradient(to left, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%);\n}\n\n.mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n  background: var(--mat-datepicker-calendar-date-in-overlap-range-state-background-color, var(--mat-sys-secondary-container));\n}\n\n.mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n.mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n  background: var(--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color, var(--mat-sys-secondary));\n}\n\n@media (forced-colors: active) {\n  .mat-datepicker-popup:not(:empty),\n  .mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected {\n    outline: solid 1px;\n  }\n  .mat-calendar-body-today {\n    outline: dotted 1px;\n  }\n  .mat-calendar-body-cell::before,\n  .mat-calendar-body-cell::after,\n  .mat-calendar-body-selected {\n    background: none;\n  }\n  .mat-calendar-body-in-range::before,\n  .mat-calendar-body-comparison-bridge-start::before,\n  .mat-calendar-body-comparison-bridge-end::before {\n    border-top: solid 1px;\n    border-bottom: solid 1px;\n  }\n  .mat-calendar-body-range-start::before {\n    border-left: solid 1px;\n  }\n  [dir=rtl] .mat-calendar-body-range-start::before {\n    border-left: 0;\n    border-right: solid 1px;\n  }\n  .mat-calendar-body-range-end::before {\n    border-right: solid 1px;\n  }\n  [dir=rtl] .mat-calendar-body-range-end::before {\n    border-right: 0;\n    border-left: solid 1px;\n  }\n  .mat-calendar-body-in-comparison-range::before {\n    border-top: dashed 1px;\n    border-bottom: dashed 1px;\n  }\n  .mat-calendar-body-comparison-start::before {\n    border-left: dashed 1px;\n  }\n  [dir=rtl] .mat-calendar-body-comparison-start::before {\n    border-left: 0;\n    border-right: dashed 1px;\n  }\n  .mat-calendar-body-comparison-end::before {\n    border-right: dashed 1px;\n  }\n  [dir=rtl] .mat-calendar-body-comparison-end::before {\n    border-right: 0;\n    border-left: dashed 1px;\n  }\n}\n"]
     }]
@@ -614,7 +612,7 @@ class MatDateSelectionModel {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDateSelectionModel,
     deps: "invalid",
@@ -622,14 +620,14 @@ class MatDateSelectionModel {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDateSelectionModel
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDateSelectionModel,
   decorators: [{
@@ -661,7 +659,7 @@ class MatSingleDateSelectionModel extends MatDateSelectionModel {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSingleDateSelectionModel,
     deps: [{
@@ -671,14 +669,14 @@ class MatSingleDateSelectionModel extends MatDateSelectionModel {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSingleDateSelectionModel
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatSingleDateSelectionModel,
   decorators: [{
@@ -730,7 +728,7 @@ class MatRangeDateSelectionModel extends MatDateSelectionModel {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatRangeDateSelectionModel,
     deps: [{
@@ -740,14 +738,14 @@ class MatRangeDateSelectionModel extends MatDateSelectionModel {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatRangeDateSelectionModel
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatRangeDateSelectionModel,
   decorators: [{
@@ -845,7 +843,7 @@ class DefaultMatCalendarRangeStrategy {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: DefaultMatCalendarRangeStrategy,
     deps: [{
@@ -855,14 +853,14 @@ class DefaultMatCalendarRangeStrategy {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: DefaultMatCalendarRangeStrategy
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: DefaultMatCalendarRangeStrategy,
   decorators: [{
@@ -1233,7 +1231,7 @@ class MatMonthView {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatMonthView,
     deps: [],
@@ -1241,7 +1239,7 @@ class MatMonthView {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatMonthView,
     isStandalone: true,
     selector: "mat-month-view",
@@ -1283,13 +1281,12 @@ class MatMonthView {
       outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"],
       exportAs: ["matCalendarBody"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatMonthView,
   decorators: [{
@@ -1298,7 +1295,6 @@ i0.ɵɵngDeclareClassMetadata({
       selector: 'mat-month-view',
       exportAs: 'matMonthView',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       imports: [MatCalendarBody],
       template: "<table class=\"mat-calendar-table\" role=\"grid\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays(); track day.id) {\n        <th scope=\"col\">\n          <span class=\"cdk-visually-hidden\">{{day.long}}</span>\n          <span aria-hidden=\"true\">{{day.narrow}}</span>\n        </th>\n      }\n    </tr>\n    <tr aria-hidden=\"true\"><th 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         [startDateAccessibleName]=\"startDateAccessibleName\"\n         [endDateAccessibleName]=\"endDateAccessibleName\"\n         (selectedValueChange)=\"_dateSelected($event)\"\n         (activeDateChange)=\"_updateActiveDate($event)\"\n         (previewChange)=\"_previewChanged($event)\"\n         (dragStarted)=\"dragStarted.emit($event)\"\n         (dragEnded)=\"_dragEnded($event)\"\n         (keyup)=\"_handleCalendarBodyKeyup($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n"
     }]
@@ -1571,7 +1567,7 @@ class MatMultiYearView {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatMultiYearView,
     deps: [],
@@ -1579,7 +1575,7 @@ class MatMultiYearView {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatMultiYearView,
     isStandalone: true,
     selector: "mat-multi-year-view",
@@ -1613,13 +1609,12 @@ class MatMultiYearView {
       outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"],
       exportAs: ["matCalendarBody"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatMultiYearView,
   decorators: [{
@@ -1628,7 +1623,6 @@ i0.ɵɵngDeclareClassMetadata({
       selector: 'mat-multi-year-view',
       exportAs: 'matMultiYearView',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       imports: [MatCalendarBody],
       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         (activeDateChange)=\"_updateActiveDate($event)\"\n         (keyup)=\"_handleCalendarBodyKeyup($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n"
     }]
@@ -1917,7 +1911,7 @@ class MatYearView {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatYearView,
     deps: [],
@@ -1925,7 +1919,7 @@ class MatYearView {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatYearView,
     isStandalone: true,
     selector: "mat-year-view",
@@ -1959,13 +1953,12 @@ class MatYearView {
       outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"],
       exportAs: ["matCalendarBody"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatYearView,
   decorators: [{
@@ -1974,7 +1967,6 @@ i0.ɵɵngDeclareClassMetadata({
       selector: 'mat-year-view',
       exportAs: 'matYearView',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       imports: [MatCalendarBody],
       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         (activeDateChange)=\"_updateActiveDate($event)\"\n         (keyup)=\"_handleCalendarBodyKeyup($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n"
     }]
@@ -2119,7 +2111,7 @@ class MatCalendarHeader {
   _periodButtonLabelId = inject(_IdGenerator).getId('mat-calendar-period-label-');
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatCalendarHeader,
     deps: [],
@@ -2127,7 +2119,7 @@ class MatCalendarHeader {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatCalendarHeader,
     isStandalone: true,
     selector: "mat-calendar-header",
@@ -2152,13 +2144,12 @@ class MatCalendarHeader {
       inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"],
       exportAs: ["matTooltip"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatCalendarHeader,
   decorators: [{
@@ -2167,7 +2158,6 @@ i0.ɵɵngDeclareClassMetadata({
       selector: 'mat-calendar-header',
       exportAs: 'matCalendarHeader',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       imports: [MatButton, MatIconButton, MatTooltip],
       template: "<div class=\"mat-calendar-header\">\n  <div class=\"mat-calendar-controls\">\n    <!-- [Firefox Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1880533]\n      Relocated label next to related button and made visually hidden via cdk-visually-hidden\n      to enable label to appear in a11y tree for SR when using Firefox -->\n    <span [id]=\"_periodButtonLabelId\" class=\"cdk-visually-hidden\" aria-live=\"polite\">{{periodButtonDescription}}</span>\n    <button matButton type=\"button\" class=\"mat-calendar-period-button\"\n            (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\"\n            [attr.aria-describedby]=\"_periodButtonLabelId\">\n      <span aria-hidden=\"true\">{{periodButtonText}}</span>\n      <svg class=\"mat-calendar-arrow\" [class.mat-calendar-invert]=\"calendar.currentView !== 'month'\"\n           viewBox=\"0 0 10 5\" focusable=\"false\" aria-hidden=\"true\">\n           <polygon points=\"0,0 5,5 10,0\"/>\n      </svg>\n    </button>\n\n    <div class=\"mat-calendar-spacer\"></div>\n\n    <ng-content></ng-content>\n\n    <button matIconButton type=\"button\" class=\"mat-calendar-previous-button\"\n            [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\"\n            [matTooltip]=\"prevButtonLabel\" [attr.aria-label]=\"prevButtonLabel\" disabledInteractive>\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/>\n       </svg>\n    </button>\n\n    <button matIconButton type=\"button\" class=\"mat-calendar-next-button\"\n            [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\"\n            [matTooltip]=\"nextButtonLabel\" [attr.aria-label]=\"nextButtonLabel\" disabledInteractive>\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n"
     }]
@@ -2343,7 +2333,7 @@ class MatCalendar {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatCalendar,
     deps: [],
@@ -2351,7 +2341,7 @@ class MatCalendar {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatCalendar,
     isStandalone: true,
     selector: "mat-calendar",
@@ -2437,13 +2427,12 @@ class MatCalendar {
       outputs: ["selectedChange", "yearSelected", "activeDateChange"],
       exportAs: ["matMultiYearView"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatCalendar,
   decorators: [{
@@ -2455,7 +2444,6 @@ i0.ɵɵngDeclareClassMetadata({
       },
       exportAs: 'matCalendar',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER],
       imports: [CdkPortalOutlet, CdkMonitorFocus, MatMonthView, MatYearView, MatMultiYearView],
       template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n\n<div class=\"mat-calendar-content\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  @switch (currentView) {\n    @case ('month') {\n        <mat-month-view\n            [(activeDate)]=\"activeDate\"\n            [selected]=\"selected\"\n            [dateFilter]=\"dateFilter\"\n            [maxDate]=\"maxDate\"\n            [minDate]=\"minDate\"\n            [dateClass]=\"dateClass\"\n            [comparisonStart]=\"comparisonStart\"\n            [comparisonEnd]=\"comparisonEnd\"\n            [startDateAccessibleName]=\"startDateAccessibleName\"\n            [endDateAccessibleName]=\"endDateAccessibleName\"\n            (_userSelection)=\"_dateSelected($event)\"\n            (dragStarted)=\"_dragStarted($event)\"\n            (dragEnded)=\"_dragEnded($event)\"\n            [activeDrag]=\"_activeDrag\"></mat-month-view>\n    }\n\n    @case ('year') {\n        <mat-year-view\n            [(activeDate)]=\"activeDate\"\n            [selected]=\"selected\"\n            [dateFilter]=\"dateFilter\"\n            [maxDate]=\"maxDate\"\n            [minDate]=\"minDate\"\n            [dateClass]=\"dateClass\"\n            (monthSelected)=\"_monthSelectedInYearView($event)\"\n            (selectedChange)=\"_goToDateInView($event, 'month')\"></mat-year-view>\n    }\n\n    @case ('multi-year') {\n        <mat-multi-year-view\n            [(activeDate)]=\"activeDate\"\n            [selected]=\"selected\"\n            [dateFilter]=\"dateFilter\"\n            [maxDate]=\"maxDate\"\n            [minDate]=\"minDate\"\n            [dateClass]=\"dateClass\"\n            (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n            (selectedChange)=\"_goToDateInView($event, 'year')\"></mat-multi-year-view>\n    }\n  }\n</div>\n",
@@ -2648,7 +2636,7 @@ class MatDatepickerContent {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerContent,
     deps: [],
@@ -2656,7 +2644,7 @@ class MatDatepickerContent {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerContent,
     isStandalone: true,
     selector: "mat-datepicker-content",
@@ -2708,13 +2696,12 @@ class MatDatepickerContent {
       inputs: ["matButton"],
       exportAs: ["matButton", "matAnchor"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerContent,
   decorators: [{
@@ -2729,7 +2716,6 @@ i0.ɵɵngDeclareClassMetadata({
       },
       exportAs: 'matDatepickerContent',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       imports: [CdkTrapFocus, MatCalendar, CdkPortalOutlet, MatButton],
       template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n  class=\"mat-datepicker-content-container\"\n  [class.mat-datepicker-content-container-with-custom-header]=\"datepicker.calendarHeaderComponent\"\n  [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\">\n  <mat-calendar\n    [id]=\"datepicker.id\"\n    [class]=\"datepicker.panelClass\"\n    [startAt]=\"datepicker.startAt\"\n    [startView]=\"datepicker.startView\"\n    [minDate]=\"datepicker._getMinDate()\"\n    [maxDate]=\"datepicker._getMaxDate()\"\n    [dateFilter]=\"datepicker._getDateFilter()\"\n    [headerComponent]=\"datepicker.calendarHeaderComponent\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker.dateClass\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [startDateAccessibleName]=\"startDateAccessibleName\"\n    [endDateAccessibleName]=\"endDateAccessibleName\"\n    (yearSelected)=\"datepicker._selectYear($event)\"\n    (monthSelected)=\"datepicker._selectMonth($event)\"\n    (viewChanged)=\"datepicker._viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\"\n    (_userDragDrop)=\"_handleUserDragDrop($event)\"></mat-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    matButton=\"elevated\"\n    [color]=\"color || 'primary'\"\n    class=\"mat-datepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n",
       styles: ["@keyframes _mat-datepicker-content-dropdown-enter {\n  from {\n    opacity: 0;\n    transform: scaleY(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@keyframes _mat-datepicker-content-dialog-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@keyframes _mat-datepicker-content-exit {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n.mat-datepicker-content {\n  display: block;\n  background-color: var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));\n  color: var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));\n  box-shadow: var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));\n  border-radius: var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large));\n}\n.mat-datepicker-content.mat-datepicker-content-animations-enabled {\n  animation: _mat-datepicker-content-dropdown-enter 120ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-datepicker-content .mat-calendar {\n  width: 296px;\n  height: 354px;\n}\n.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar {\n  height: auto;\n}\n.mat-datepicker-content .mat-datepicker-close-button {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  margin-top: 8px;\n}\n.mat-datepicker-content-animating .mat-datepicker-content .mat-datepicker-close-button {\n  display: none;\n}\n\n.mat-datepicker-content-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.mat-datepicker-content-touch {\n  display: block;\n  max-height: 80vh;\n  box-shadow: var(--mat-datepicker-calendar-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));\n  border-radius: var(--mat-datepicker-calendar-container-touch-shape, var(--mat-sys-corner-extra-large));\n  position: relative;\n  overflow: visible;\n}\n.mat-datepicker-content-touch.mat-datepicker-content-animations-enabled {\n  animation: _mat-datepicker-content-dialog-enter 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-datepicker-content-touch .mat-datepicker-content-container {\n  min-height: 312px;\n  max-height: 788px;\n  min-width: 250px;\n  max-width: 750px;\n}\n.mat-datepicker-content-touch .mat-calendar {\n  width: 100%;\n  height: auto;\n}\n\n.mat-datepicker-content-exit.mat-datepicker-content-animations-enabled {\n  animation: _mat-datepicker-content-exit 100ms linear;\n}\n\n@media all and (orientation: landscape) {\n  .mat-datepicker-content-touch .mat-datepicker-content-container {\n    width: 64vh;\n    height: 80vh;\n  }\n}\n@media all and (orientation: portrait) {\n  .mat-datepicker-content-touch .mat-datepicker-content-container {\n    width: 80vw;\n    height: 100vw;\n  }\n  .mat-datepicker-content-touch .mat-datepicker-content-container-with-actions {\n    height: 115vw;\n  }\n}\n"]
@@ -3029,7 +3015,7 @@ class MatDatepickerBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerBase,
     deps: [],
@@ -3037,7 +3023,7 @@ class MatDatepickerBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "16.1.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerBase,
     isStandalone: true,
     inputs: {
@@ -3067,7 +3053,7 @@ class MatDatepickerBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerBase,
   decorators: [{
@@ -3146,7 +3132,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatDatepicker extends MatDatepickerBase {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepicker,
     deps: null,
@@ -3154,7 +3140,7 @@ class MatDatepicker extends MatDatepickerBase {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepicker,
     isStandalone: true,
     selector: "mat-datepicker",
@@ -3167,13 +3153,12 @@ class MatDatepicker extends MatDatepickerBase {
     ngImport: i0,
     template: '',
     isInline: true,
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepicker,
   decorators: [{
@@ -3182,7 +3167,6 @@ i0.ɵɵngDeclareClassMetadata({
       selector: 'mat-datepicker',
       template: '',
       exportAs: 'matDatepicker',
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, {
         provide: MatDatepickerBase,
@@ -3412,7 +3396,7 @@ class MatDatepickerInputBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerInputBase,
     deps: [],
@@ -3420,7 +3404,7 @@ class MatDatepickerInputBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "16.1.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerInputBase,
     isStandalone: true,
     inputs: {
@@ -3437,7 +3421,7 @@ class MatDatepickerInputBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerInputBase,
   decorators: [{
@@ -3599,7 +3583,7 @@ class MatDatepickerInput extends MatDatepickerInputBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerInput,
     deps: [],
@@ -3607,7 +3591,7 @@ class MatDatepickerInput extends MatDatepickerInputBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerInput,
     isStandalone: true,
     selector: "input[matDatepicker]",
@@ -3645,7 +3629,7 @@ class MatDatepickerInput extends MatDatepickerInputBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerInput,
   decorators: [{
@@ -3693,7 +3677,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatDatepickerToggleIcon {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerToggleIcon,
     deps: [],
@@ -3701,7 +3685,7 @@ class MatDatepickerToggleIcon {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerToggleIcon,
     isStandalone: true,
     selector: "[matDatepickerToggleIcon]",
@@ -3710,7 +3694,7 @@ class MatDatepickerToggleIcon {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerToggleIcon,
   decorators: [{
@@ -3773,7 +3757,7 @@ class MatDatepickerToggle {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerToggle,
     deps: [],
@@ -3781,7 +3765,7 @@ class MatDatepickerToggle {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerToggle,
     isStandalone: true,
     selector: "mat-datepicker-toggle",
@@ -3828,13 +3812,12 @@ class MatDatepickerToggle {
       selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
       exportAs: ["matButton", "matAnchor"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerToggle,
   decorators: [{
@@ -3852,7 +3835,6 @@ i0.ɵɵngDeclareClassMetadata({
       },
       exportAs: 'matDatepickerToggle',
       encapsulation: ViewEncapsulation.None,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       imports: [MatIconButton],
       template: "<button\n  #button\n  matIconButton\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [tabIndex]=\"disabled ? -1 : tabIndex\"\n  [attr.aria-expanded]=\"datepicker ? datepicker.opened : null\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    <svg\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      aria-hidden=\"true\">\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\n  <ng-content select=\"[matDatepickerToggleIcon]\"></ng-content>\n</button>\n",
       styles: [".mat-datepicker-toggle {\n  pointer-events: auto;\n  color: var(--mat-datepicker-toggle-icon-color, var(--mat-sys-on-surface-variant));\n}\n.mat-datepicker-toggle button {\n  color: inherit;\n}\n\n.mat-datepicker-toggle-active {\n  color: var(--mat-datepicker-toggle-active-state-icon-color, var(--mat-sys-primary));\n}\n\n@media (forced-colors: active) {\n  .mat-datepicker-toggle-default-icon {\n    color: CanvasText;\n  }\n}\n"]
@@ -4139,7 +4121,7 @@ class MatDateRangeInput {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDateRangeInput,
     deps: [],
@@ -4147,7 +4129,7 @@ class MatDateRangeInput {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "16.1.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDateRangeInput,
     isStandalone: true,
     selector: "mat-date-range-input",
@@ -4192,13 +4174,12 @@ class MatDateRangeInput {
       outputs: ["cdkFocusChange"],
       exportAs: ["cdkMonitorFocus"]
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDateRangeInput,
   decorators: [{
@@ -4216,7 +4197,6 @@ i0.ɵɵngDeclareClassMetadata({
         '[attr.aria-describedby]': '_ariaDescribedBy',
         '[attr.data-mat-calendar]': 'rangePicker ? rangePicker.id : null'
       },
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       providers: [{
         provide: MatFormFieldControl,
@@ -4424,7 +4404,7 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDateRangeInputPartBase,
     deps: [],
@@ -4432,7 +4412,7 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDateRangeInputPartBase,
     isStandalone: true,
     inputs: {
@@ -4444,7 +4424,7 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDateRangeInputPartBase,
   decorators: [{
@@ -4503,7 +4483,7 @@ class MatStartDate extends MatDateRangeInputPartBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatStartDate,
     deps: null,
@@ -4511,7 +4491,7 @@ class MatStartDate extends MatDateRangeInputPartBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatStartDate,
     isStandalone: true,
     selector: "input[matStartDate]",
@@ -4553,7 +4533,7 @@ class MatStartDate extends MatDateRangeInputPartBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatStartDate,
   decorators: [{
@@ -4639,7 +4619,7 @@ class MatEndDate extends MatDateRangeInputPartBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatEndDate,
     deps: null,
@@ -4647,7 +4627,7 @@ class MatEndDate extends MatDateRangeInputPartBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatEndDate,
     isStandalone: true,
     selector: "input[matEndDate]",
@@ -4689,7 +4669,7 @@ class MatEndDate extends MatDateRangeInputPartBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatEndDate,
   decorators: [{
@@ -4736,7 +4716,7 @@ class MatDateRangePicker extends MatDatepickerBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDateRangePicker,
     deps: null,
@@ -4744,7 +4724,7 @@ class MatDateRangePicker extends MatDatepickerBase {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDateRangePicker,
     isStandalone: true,
     selector: "mat-date-range-picker",
@@ -4766,13 +4746,12 @@ class MatDateRangePicker extends MatDatepickerBase {
     ngImport: i0,
     template: '',
     isInline: true,
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDateRangePicker,
   decorators: [{
@@ -4781,7 +4760,6 @@ i0.ɵɵngDeclareClassMetadata({
       selector: 'mat-date-range-picker',
       template: '',
       exportAs: 'matDateRangePicker',
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       providers: [MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, {
         provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
@@ -4808,7 +4786,7 @@ class MatDatepickerApply {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerApply,
     deps: [],
@@ -4816,7 +4794,7 @@ class MatDatepickerApply {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerApply,
     isStandalone: true,
     selector: "[matDatepickerApply], [matDateRangePickerApply]",
@@ -4830,7 +4808,7 @@ class MatDatepickerApply {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerApply,
   decorators: [{
@@ -4847,7 +4825,7 @@ class MatDatepickerCancel {
   _datepicker = inject(MatDatepickerBase);
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerCancel,
     deps: [],
@@ -4855,7 +4833,7 @@ class MatDatepickerCancel {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerCancel,
     isStandalone: true,
     selector: "[matDatepickerCancel], [matDateRangePickerCancel]",
@@ -4869,7 +4847,7 @@ class MatDatepickerCancel {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerCancel,
   decorators: [{
@@ -4899,7 +4877,7 @@ class MatDatepickerActions {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerActions,
     deps: [],
@@ -4907,7 +4885,7 @@ class MatDatepickerActions {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDatepickerActions,
     isStandalone: true,
     selector: "mat-datepicker-actions, mat-date-range-picker-actions",
@@ -4927,13 +4905,12 @@ class MatDatepickerActions {
   `,
     isInline: true,
     styles: [".mat-datepicker-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px 8px 8px;\n}\n.mat-datepicker-actions .mat-mdc-button-base + .mat-mdc-button-base {\n  margin-left: 8px;\n}\n[dir=rtl] .mat-datepicker-actions .mat-mdc-button-base + .mat-mdc-button-base {\n  margin-left: 0;\n  margin-right: 8px;\n}\n"],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerActions,
   decorators: [{
@@ -4947,7 +4924,6 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     </ng-template>
   `,
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       styles: [".mat-datepicker-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px 8px 8px;\n}\n.mat-datepicker-actions .mat-mdc-button-base + .mat-mdc-button-base {\n  margin-left: 8px;\n}\n[dir=rtl] .mat-datepicker-actions .mat-mdc-button-base + .mat-mdc-button-base {\n  margin-left: 0;\n  margin-right: 8px;\n}\n"]
     }]
@@ -4963,7 +4939,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatDatepickerModule {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerModule,
     deps: [],
@@ -4971,7 +4947,7 @@ class MatDatepickerModule {
   });
   static ɵmod = i0.ɵɵngDeclareNgModule({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerModule,
     imports: [MatButtonModule, OverlayModule, A11yModule, PortalModule, MatCalendar, MatCalendarBody, MatDatepicker, MatDatepickerContent, MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatMonthView, MatYearView, MatMultiYearView, MatCalendarHeader, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, MatDatepickerActions, MatDatepickerCancel, MatDatepickerApply],
@@ -4979,7 +4955,7 @@ class MatDatepickerModule {
   });
   static ɵinj = i0.ɵɵngDeclareInjector({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDatepickerModule,
     providers: [MatDatepickerIntl],
@@ -4988,7 +4964,7 @@ class MatDatepickerModule {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDatepickerModule,
   decorators: [{