@angular/material 22.0.3 → 22.0.5

package/fesm2022/datepicker.mjs

@@ -20,6 +20,7 @@ import { NG_VALIDATORS, NG_VALUE_ACCESSOR, Validators, ControlContainer, NgForm,
 import { MAT_INPUT_VALUE_ACCESSOR } from './_input-value-accessor-chunk.mjs';
 import { MAT_FORM_FIELD, MatFormFieldControl } from './_form-field-chunk.mjs';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { FORM_FIELD } from '@angular/forms/signals';
 import { ErrorStateMatcher } from './_error-options-chunk.mjs';
 import { _ErrorStateTracker } from './_error-state-chunk.mjs';
 import './_ripple-module-chunk.mjs';
@@ -57,7 +58,7 @@ class MatDatepickerIntl {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerIntl,
     deps: [],
@@ -65,14 +66,14 @@ class MatDatepickerIntl {
   });
   static ɵprov = i0.ɵɵngDeclareService({
     minVersion: "22.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerIntl
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerIntl,
   decorators: [{
@@ -415,7 +416,7 @@ class MatCalendarBody {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatCalendarBody,
     deps: [],
@@ -423,7 +424,7 @@ class MatCalendarBody {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatCalendarBody,
     isStandalone: true,
     selector: "[mat-calendar-body]",
@@ -459,13 +460,13 @@ class MatCalendarBody {
     usesOnChanges: true,
     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"],
+    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.mat-calendar-body-cell-content::before {\n  border-radius: 50%;\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"],
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatCalendarBody,
   decorators: [{
@@ -478,7 +479,7 @@ i0.ɵɵngDeclareClassMetadata({
       exportAs: 'matCalendarBody',
       encapsulation: ViewEncapsulation.None,
       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"]
+      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.mat-calendar-body-cell-content::before {\n  border-radius: 50%;\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"]
     }]
   }],
   ctorParameters: () => [],
@@ -612,7 +613,7 @@ class MatDateSelectionModel {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDateSelectionModel,
     deps: "invalid",
@@ -620,14 +621,14 @@ class MatDateSelectionModel {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDateSelectionModel
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDateSelectionModel,
   decorators: [{
@@ -659,7 +660,7 @@ class MatSingleDateSelectionModel extends MatDateSelectionModel {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatSingleDateSelectionModel,
     deps: [{
@@ -669,14 +670,14 @@ class MatSingleDateSelectionModel extends MatDateSelectionModel {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatSingleDateSelectionModel
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatSingleDateSelectionModel,
   decorators: [{
@@ -728,7 +729,7 @@ class MatRangeDateSelectionModel extends MatDateSelectionModel {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatRangeDateSelectionModel,
     deps: [{
@@ -738,14 +739,14 @@ class MatRangeDateSelectionModel extends MatDateSelectionModel {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatRangeDateSelectionModel
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatRangeDateSelectionModel,
   decorators: [{
@@ -843,7 +844,7 @@ class DefaultMatCalendarRangeStrategy {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: DefaultMatCalendarRangeStrategy,
     deps: [{
@@ -853,14 +854,14 @@ class DefaultMatCalendarRangeStrategy {
   });
   static ɵprov = i0.ɵɵngDeclareInjectable({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: DefaultMatCalendarRangeStrategy
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: DefaultMatCalendarRangeStrategy,
   decorators: [{
@@ -1231,7 +1232,7 @@ class MatMonthView {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatMonthView,
     deps: [],
@@ -1239,7 +1240,7 @@ class MatMonthView {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatMonthView,
     isStandalone: true,
     selector: "mat-month-view",
@@ -1286,7 +1287,7 @@ class MatMonthView {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatMonthView,
   decorators: [{
@@ -1567,7 +1568,7 @@ class MatMultiYearView {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatMultiYearView,
     deps: [],
@@ -1575,7 +1576,7 @@ class MatMultiYearView {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatMultiYearView,
     isStandalone: true,
     selector: "mat-multi-year-view",
@@ -1614,7 +1615,7 @@ class MatMultiYearView {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatMultiYearView,
   decorators: [{
@@ -1911,7 +1912,7 @@ class MatYearView {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatYearView,
     deps: [],
@@ -1919,7 +1920,7 @@ class MatYearView {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatYearView,
     isStandalone: true,
     selector: "mat-year-view",
@@ -1958,7 +1959,7 @@ class MatYearView {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatYearView,
   decorators: [{
@@ -2111,7 +2112,7 @@ class MatCalendarHeader {
   _periodButtonLabelId = inject(_IdGenerator).getId('mat-calendar-period-label-');
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatCalendarHeader,
     deps: [],
@@ -2119,7 +2120,7 @@ class MatCalendarHeader {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatCalendarHeader,
     isStandalone: true,
     selector: "mat-calendar-header",
@@ -2149,7 +2150,7 @@ class MatCalendarHeader {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatCalendarHeader,
   decorators: [{
@@ -2333,7 +2334,7 @@ class MatCalendar {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatCalendar,
     deps: [],
@@ -2341,7 +2342,7 @@ class MatCalendar {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatCalendar,
     isStandalone: true,
     selector: "mat-calendar",
@@ -2432,7 +2433,7 @@ class MatCalendar {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatCalendar,
   decorators: [{
@@ -2636,7 +2637,7 @@ class MatDatepickerContent {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerContent,
     deps: [],
@@ -2644,7 +2645,7 @@ class MatDatepickerContent {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerContent,
     isStandalone: true,
     selector: "mat-datepicker-content",
@@ -2701,7 +2702,7 @@ class MatDatepickerContent {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerContent,
   decorators: [{
@@ -3015,7 +3016,7 @@ class MatDatepickerBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerBase,
     deps: [],
@@ -3023,7 +3024,7 @@ class MatDatepickerBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "16.1.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerBase,
     isStandalone: true,
     inputs: {
@@ -3053,7 +3054,7 @@ class MatDatepickerBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerBase,
   decorators: [{
@@ -3132,7 +3133,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatDatepicker extends MatDatepickerBase {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepicker,
     deps: null,
@@ -3140,7 +3141,7 @@ class MatDatepicker extends MatDatepickerBase {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepicker,
     isStandalone: true,
     selector: "mat-datepicker",
@@ -3158,7 +3159,7 @@ class MatDatepicker extends MatDatepickerBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepicker,
   decorators: [{
@@ -3396,7 +3397,7 @@ class MatDatepickerInputBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerInputBase,
     deps: [],
@@ -3404,7 +3405,7 @@ class MatDatepickerInputBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "16.1.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerInputBase,
     isStandalone: true,
     inputs: {
@@ -3421,7 +3422,7 @@ class MatDatepickerInputBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerInputBase,
   decorators: [{
@@ -3583,7 +3584,7 @@ class MatDatepickerInput extends MatDatepickerInputBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerInput,
     deps: [],
@@ -3591,7 +3592,7 @@ class MatDatepickerInput extends MatDatepickerInputBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerInput,
     isStandalone: true,
     selector: "input[matDatepicker]",
@@ -3629,7 +3630,7 @@ class MatDatepickerInput extends MatDatepickerInputBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerInput,
   decorators: [{
@@ -3677,7 +3678,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatDatepickerToggleIcon {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerToggleIcon,
     deps: [],
@@ -3685,7 +3686,7 @@ class MatDatepickerToggleIcon {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerToggleIcon,
     isStandalone: true,
     selector: "[matDatepickerToggleIcon]",
@@ -3694,7 +3695,7 @@ class MatDatepickerToggleIcon {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerToggleIcon,
   decorators: [{
@@ -3757,7 +3758,7 @@ class MatDatepickerToggle {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerToggle,
     deps: [],
@@ -3765,7 +3766,7 @@ class MatDatepickerToggle {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerToggle,
     isStandalone: true,
     selector: "mat-datepicker-toggle",
@@ -3817,7 +3818,7 @@ class MatDatepickerToggle {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerToggle,
   decorators: [{
@@ -4121,7 +4122,7 @@ class MatDateRangeInput {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDateRangeInput,
     deps: [],
@@ -4129,7 +4130,7 @@ class MatDateRangeInput {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "16.1.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDateRangeInput,
     isStandalone: true,
     selector: "mat-date-range-input",
@@ -4179,7 +4180,7 @@ class MatDateRangeInput {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDateRangeInput,
   decorators: [{
@@ -4335,6 +4336,10 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
       optional: true,
       self: true
     });
+    this._errorStateTracker.formField = this._injector.get(FORM_FIELD, null, {
+      optional: true,
+      self: true
+    });
     if (ngControl) {
       this.ngControl = ngControl;
       this._errorStateTracker.ngControl = ngControl;
@@ -4404,7 +4409,7 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDateRangeInputPartBase,
     deps: [],
@@ -4412,7 +4417,7 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDateRangeInputPartBase,
     isStandalone: true,
     inputs: {
@@ -4424,7 +4429,7 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDateRangeInputPartBase,
   decorators: [{
@@ -4483,7 +4488,7 @@ class MatStartDate extends MatDateRangeInputPartBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatStartDate,
     deps: null,
@@ -4491,7 +4496,7 @@ class MatStartDate extends MatDateRangeInputPartBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatStartDate,
     isStandalone: true,
     selector: "input[matStartDate]",
@@ -4533,7 +4538,7 @@ class MatStartDate extends MatDateRangeInputPartBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatStartDate,
   decorators: [{
@@ -4619,7 +4624,7 @@ class MatEndDate extends MatDateRangeInputPartBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatEndDate,
     deps: null,
@@ -4627,7 +4632,7 @@ class MatEndDate extends MatDateRangeInputPartBase {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatEndDate,
     isStandalone: true,
     selector: "input[matEndDate]",
@@ -4669,7 +4674,7 @@ class MatEndDate extends MatDateRangeInputPartBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatEndDate,
   decorators: [{
@@ -4716,7 +4721,7 @@ class MatDateRangePicker extends MatDatepickerBase {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDateRangePicker,
     deps: null,
@@ -4724,7 +4729,7 @@ class MatDateRangePicker extends MatDatepickerBase {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDateRangePicker,
     isStandalone: true,
     selector: "mat-date-range-picker",
@@ -4751,7 +4756,7 @@ class MatDateRangePicker extends MatDatepickerBase {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDateRangePicker,
   decorators: [{
@@ -4786,7 +4791,7 @@ class MatDatepickerApply {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerApply,
     deps: [],
@@ -4794,7 +4799,7 @@ class MatDatepickerApply {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerApply,
     isStandalone: true,
     selector: "[matDatepickerApply], [matDateRangePickerApply]",
@@ -4808,7 +4813,7 @@ class MatDatepickerApply {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerApply,
   decorators: [{
@@ -4825,7 +4830,7 @@ class MatDatepickerCancel {
   _datepicker = inject(MatDatepickerBase);
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerCancel,
     deps: [],
@@ -4833,7 +4838,7 @@ class MatDatepickerCancel {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerCancel,
     isStandalone: true,
     selector: "[matDatepickerCancel], [matDateRangePickerCancel]",
@@ -4847,7 +4852,7 @@ class MatDatepickerCancel {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerCancel,
   decorators: [{
@@ -4877,7 +4882,7 @@ class MatDatepickerActions {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerActions,
     deps: [],
@@ -4885,7 +4890,7 @@ class MatDatepickerActions {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     type: MatDatepickerActions,
     isStandalone: true,
     selector: "mat-datepicker-actions, mat-date-range-picker-actions",
@@ -4910,7 +4915,7 @@ class MatDatepickerActions {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerActions,
   decorators: [{
@@ -4939,7 +4944,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatDatepickerModule {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerModule,
     deps: [],
@@ -4947,7 +4952,7 @@ class MatDatepickerModule {
   });
   static ɵmod = i0.ɵɵngDeclareNgModule({
     minVersion: "14.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     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],
@@ -4955,7 +4960,7 @@ class MatDatepickerModule {
   });
   static ɵinj = i0.ɵɵngDeclareInjector({
     minVersion: "12.0.0",
-    version: "22.0.4",
+    version: "22.0.6",
     ngImport: i0,
     type: MatDatepickerModule,
     providers: [MatDatepickerIntl],
@@ -4964,7 +4969,7 @@ class MatDatepickerModule {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.4",
+  version: "22.0.6",
   ngImport: i0,
   type: MatDatepickerModule,
   decorators: [{