@ng-matero/extensions 19.2.1 → 19.3.1

package/fesm2022/mtxDatetimepicker.mjs

@@ -3,10 +3,9 @@ import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, NgZone, Injector, EventEmitter, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, booleanAttribute, ViewChild, ChangeDetectorRef, Directive, InjectionToken, ViewContainerRef, numberAttribute, forwardRef, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';
+import { Injectable, inject, ElementRef, NgZone, Injector, EventEmitter, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, booleanAttribute, ViewChild, ChangeDetectorRef, Directive, InjectionToken, ANIMATION_MODULE_TYPE, Renderer2, ViewContainerRef, numberAttribute, forwardRef, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import { DatetimeAdapter, MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
-import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { Directionality } from '@angular/cdk/bidi';
 import { SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
@@ -17,49 +16,6 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { MatFormField } from '@angular/material/form-field';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
 
-/**
- * Animations used by the Material datetimepicker.
- * @docs-private
- */
-const mtxDatetimepickerAnimations = {
-    /** Transforms the height of the datetimepicker's calendar. */
-    transformPanel: trigger('transformPanel', [
-        transition('void => enter-dropdown', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
-            style({ opacity: 0, transform: 'scale(1, 0.8)' }),
-            style({ opacity: 1, transform: 'scale(1, 1)' }),
-        ]))),
-        transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
-            style({ opacity: 0, transform: 'scale(0.7)' }),
-            style({ transform: 'none', opacity: 1 }),
-        ]))),
-        transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
-    ]),
-    /** Fades in the content of the calendar. */
-    fadeInCalendar: trigger('fadeInCalendar', [
-        state('void', style({ opacity: 0 })),
-        state('enter', style({ opacity: 1 })),
-        // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
-        // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
-        transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
-    ]),
-    slideCalendar: trigger('slideCalendar', [
-        transition('* => left', [
-            animate(180, keyframes([
-                style({ transform: 'translateX(100%)', offset: 0.5 }),
-                style({ transform: 'translateX(-100%)', offset: 0.51 }),
-                style({ transform: 'translateX(0)', offset: 1 }),
-            ])),
-        ]),
-        transition('* => right', [
-            animate(180, keyframes([
-                style({ transform: 'translateX(-100%)', offset: 0.5 }),
-                style({ transform: 'translateX(100%)', offset: 0.51 }),
-                style({ transform: 'translateX(0)', offset: 1 }),
-            ])),
-        ]),
-    ]),
-};
-
 /** @docs-private */
 function createMissingDateImplError(provider) {
     return Error(`MtxDatetimepicker: No provider found for ${provider}. You must add one of the following ` +
@@ -131,10 +87,10 @@ class MtxDatetimepickerIntl {
     formatYearRangeLabel(start, end) {
         return `${start} to ${end}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerIntl, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -225,10 +181,10 @@ class MtxCalendarBody {
             });
         }, { injector: this._injector });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxCalendarBody, isStandalone: true, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", cellAspectRatio: "cellAspectRatio", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { attributes: { "role": "grid", "aria-readonly": "true" }, classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], 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\n      class=\"mtx-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\"\n    >\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    @if (row[0].isWeekNumber) {\n      <th\n        class=\"mtx-calendar-body-week-number\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n        [attr.aria-label]=\"row[0].ariaLabel\"\n      >\n        {{ row[0].displayValue }}\n      </th>\n    }\n\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=\"mtx-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n      >\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      @if (!item.isWeekNumber) {\n        <td\n          role=\"gridcell\"\n          class=\"mtx-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=\"mtx-calendar-body-cell\"\n            [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n            [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n            [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n            [attr.aria-label]=\"item.ariaLabel\"\n            [attr.aria-disabled]=\"!item.enabled || null\"\n            (click)=\"_cellClicked(item)\"\n          >\n            <span\n              class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n              [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n              [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n            >\n              {{ item.displayValue }}\n            </span>\n          </button>\n        </td>\n      }\n    }\n  </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-week-number{height:0;line-height:0;font-weight:400;color:var(--mtx-datetimepicker-calendar-body-week-number-text-color, var(--mat-sys-secondary))}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;font-family:inherit;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-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))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-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))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxCalendarBody, isStandalone: true, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", cellAspectRatio: "cellAspectRatio", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { attributes: { "role": "grid", "aria-readonly": "true" }, classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], 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\n      class=\"mtx-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\"\n    >\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    @if (row[0].isWeekNumber) {\n      <th\n        class=\"mtx-calendar-body-week-number\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n        [attr.aria-label]=\"row[0].ariaLabel\"\n      >\n        {{ row[0].displayValue }}\n      </th>\n    }\n\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=\"mtx-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n      >\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      @if (!item.isWeekNumber) {\n        <td\n          role=\"gridcell\"\n          class=\"mtx-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=\"mtx-calendar-body-cell\"\n            [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n            [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n            [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n            [attr.aria-label]=\"item.ariaLabel\"\n            [attr.aria-disabled]=\"!item.enabled || null\"\n            (click)=\"_cellClicked(item)\"\n          >\n            <span\n              class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n              [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n              [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n            >\n              {{ item.displayValue }}\n            </span>\n          </button>\n        </td>\n      }\n    }\n  </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-week-number{height:0;line-height:0;font-weight:400;color:var(--mtx-datetimepicker-calendar-body-week-number-text-color, var(--mat-sys-secondary))}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;font-family:inherit;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-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))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-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))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCalendarBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendarBody, decorators: [{
             type: Component,
             args: [{ selector: '[mtx-calendar-body]', host: {
                         'class': 'mtx-calendar-body',
@@ -302,12 +258,6 @@ class MtxMonthView {
             this._activeDate &&
             !this._adapter.sameMonthAndYear(oldActiveDate, this._activeDate)) {
             this._init();
-            if (this._adapter.isInNextMonth(oldActiveDate, this._activeDate)) {
-                this.calendarState('right');
-            }
-            else {
-                this.calendarState('left');
-            }
         }
     }
     /** The currently selected date. */
@@ -330,9 +280,6 @@ class MtxMonthView {
             this._userSelection.emit();
         }
     }
-    _calendarStateDone() {
-        this._calendarState = '';
-    }
     /** Initializes this month view. */
     _init() {
         this._selectedDate = this._getDateInCurrentMonth(this.selected);
@@ -388,9 +335,6 @@ class MtxMonthView {
             ? this._adapter.getDate(date)
             : null;
     }
-    calendarState(direction) {
-        this._calendarState = direction;
-    }
     /** Handles keydown events on the calendar body when calendar is in month view. */
     _handleCalendarBodyKeydown(event) {
         // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
@@ -456,12 +400,12 @@ class MtxMonthView {
     _isRtl() {
         return this._dir && this._dir.value === 'rtl';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMonthView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @if (showWeekNumbers) {\n        <th></th>\n      }\n      @for (day of _weekdays; track day.id) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [numCols]=\"showWeekNumbers ? 8 : 7\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMonthView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @if (showWeekNumbers) {\n        <th></th>\n      }\n      @for (day of _weekdays; track day.id) {\n        <th [attr.aria-label]=\"day.long\">{{ day.narrow }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    mtx-calendar-body\n    [rows]=\"_weeks\"\n    [numCols]=\"showWeekNumbers ? 8 : 7\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxMonthView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMonthView, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-month-view', exportAs: 'mtxMonthView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @if (showWeekNumbers) {\n        <th></th>\n      }\n      @for (day of _weekdays; track day.id) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [numCols]=\"showWeekNumbers ? 8 : 7\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
+            args: [{ selector: 'mtx-month-view', exportAs: 'mtxMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @if (showWeekNumbers) {\n        <th></th>\n      }\n      @for (day of _weekdays; track day.id) {\n        <th [attr.aria-label]=\"day.long\">{{ day.narrow }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    mtx-calendar-body\n    [rows]=\"_weeks\"\n    [numCols]=\"showWeekNumbers ? 8 : 7\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"\n  ></tbody>\n</table>\n" }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], dateFilter: [{
@@ -666,10 +610,10 @@ class MtxMultiYearView {
     _isRtl() {
         return this._dir && this._dir.value === 'rtl';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxMultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxMultiYearView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMultiYearView, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-multi-year-view', exportAs: 'mtxMultiYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
         }], ctorParameters: () => [], propDecorators: { type: [{
@@ -1024,10 +968,10 @@ class MtxClock {
         this._changeDetectorRef.markForCheck();
         this.activeDateChange.emit(this.activeDate);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxClock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxClock, isStandalone: true, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", actionButtons: "actionButtons", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_pointerDown($event)", "touchstart": "_pointerDown($event)" }, classAttribute: "mtx-clock" }, exportAs: ["mtxClock"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    @for (item of _hours; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n        [style.fontSize]=\"item.fontSize\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    @for (item of _minutes; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-sys-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-sys-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxClock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxClock, isStandalone: true, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", actionButtons: "actionButtons", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_pointerDown($event)", "touchstart": "_pointerDown($event)" }, classAttribute: "mtx-clock" }, exportAs: ["mtxClock"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    @for (item of _hours; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n        [style.fontSize]=\"item.fontSize\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    @for (item of _minutes; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-sys-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-sys-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxClock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxClock, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-clock', host: {
                         'role': 'clock',
@@ -1239,10 +1183,10 @@ class MtxTimeInput {
         this.inputElement.removeEventListener('keypress', this.keyPressListener);
         this.inputElement.removeEventListener('input', this.inputEventListener);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTimeInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input.mtx-time-input',
@@ -1268,6 +1212,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 type: Output
             }] } });
 class MtxTimeView {
+    set hourInputDirective(input) {
+        this._hourInputDirective = input;
+        this._changeDetectorRef.detectChanges();
+    }
+    set minuteInputDirective(input) {
+        this._hourInputDirective = input;
+        this._changeDetectorRef.detectChanges();
+    }
     /** The date to display in this clock view. */
     get activeDate() {
         return this._activeDate;
@@ -1488,8 +1440,8 @@ class MtxTimeView {
             // will make it "40" again then the minuteInputDirective will not have been updated
             // since "40" === "40" same reference so no change detected by directly setting it within
             // this handler, we handle this usecase
-            if (this.minuteInputDirective) {
-                this.minuteInputDirective.timeValue = this.minute;
+            if (this._minuteInputDirective) {
+                this._minuteInputDirective.timeValue = this.minute;
             }
         }
     }
@@ -1552,16 +1504,16 @@ class MtxTimeView {
             this._elementRef.nativeElement.focus();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTimeView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxTimeView, isStandalone: true, selector: "mtx-time-view", inputs: { dateFilter: "dateFilter", timeInput: ["timeInput", "timeInput", booleanAttribute], interval: "interval", actionsPortal: "actionsPortal", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, classAttribute: "mtx-time-view" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "@if (timeInput) {\n  <div class=\"mtx-time-input-wrapper\">\n    <div class=\"mtx-time-input-inner\">\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'hour'\"\n        [class.mtx-time-input-warning]=\"!hourInput.valid\"\n        #hourInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"twelvehour ? 1 : 0\"\n        [timeMax]=\"twelvehour ? 12 : 23\"\n        [timeValue]=\"hour\"\n        (timeValueChanged)=\"_handleHourInputChange($event)\"\n        (focus)=\"_handleFocus('hour')\" />\n\n      <div class=\"mtx-time-seperator\">:</div>\n\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'minute'\"\n        [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n        #minuteInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"0\"\n        [timeMax]=\"59\"\n        [timeValue]=\"minute\"\n        (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n        [timeInterval]=\"interval\"\n        (focus)=\"_handleFocus('minute')\" />\n\n      @if (twelvehour) {\n        <div class=\"mtx-time-ampm\">\n          <button mat-button type=\"button\" class=\"mtx-time-am\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('AM')\">AM</button>\n          <button mat-button type=\"button\" class=\"mtx-time-pm\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('PM')\">PM</button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<mtx-clock\n  (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxTimeView, isStandalone: true, selector: "mtx-time-view", inputs: { dateFilter: "dateFilter", timeInput: ["timeInput", "timeInput", booleanAttribute], interval: "interval", actionsPortal: "actionsPortal", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, classAttribute: "mtx-time-view" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "@if (timeInput) {\n  <div class=\"mtx-time-input-wrapper\">\n    <div class=\"mtx-time-input-inner\">\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'hour'\"\n        [class.mtx-time-input-warning]=\"!hourInput.valid\"\n        #hourInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"twelvehour ? 1 : 0\"\n        [timeMax]=\"twelvehour ? 12 : 23\"\n        [timeValue]=\"hour\"\n        (timeValueChanged)=\"_handleHourInputChange($event)\"\n        (focus)=\"_handleFocus('hour')\" />\n\n      <div class=\"mtx-time-seperator\">:</div>\n\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'minute'\"\n        [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n        #minuteInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"0\"\n        [timeMax]=\"59\"\n        [timeValue]=\"minute\"\n        (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n        [timeInterval]=\"interval\"\n        (focus)=\"_handleFocus('minute')\" />\n\n      @if (twelvehour) {\n        <div class=\"mtx-time-ampm\">\n          <button mat-button type=\"button\" class=\"mtx-time-am\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('AM')\">AM</button>\n          <button mat-button type=\"button\" class=\"mtx-time-pm\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('PM')\">PM</button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<mtx-clock\n  (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"_minuteInputDirective?.invalid || _hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTimeView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeView, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-time-view', exportAs: 'mtxTime', host: {
                         'class': 'mtx-time-view',
                         'tabindex': '0',
                         '(keydown)': '_handleCalendarBodyKeydown($event)',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MtxClock, MtxTimeInput], template: "@if (timeInput) {\n  <div class=\"mtx-time-input-wrapper\">\n    <div class=\"mtx-time-input-inner\">\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'hour'\"\n        [class.mtx-time-input-warning]=\"!hourInput.valid\"\n        #hourInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"twelvehour ? 1 : 0\"\n        [timeMax]=\"twelvehour ? 12 : 23\"\n        [timeValue]=\"hour\"\n        (timeValueChanged)=\"_handleHourInputChange($event)\"\n        (focus)=\"_handleFocus('hour')\" />\n\n      <div class=\"mtx-time-seperator\">:</div>\n\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'minute'\"\n        [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n        #minuteInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"0\"\n        [timeMax]=\"59\"\n        [timeValue]=\"minute\"\n        (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n        [timeInterval]=\"interval\"\n        (focus)=\"_handleFocus('minute')\" />\n\n      @if (twelvehour) {\n        <div class=\"mtx-time-ampm\">\n          <button mat-button type=\"button\" class=\"mtx-time-am\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('AM')\">AM</button>\n          <button mat-button type=\"button\" class=\"mtx-time-pm\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('PM')\">PM</button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<mtx-clock\n  (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MtxClock, MtxTimeInput], template: "@if (timeInput) {\n  <div class=\"mtx-time-input-wrapper\">\n    <div class=\"mtx-time-input-inner\">\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'hour'\"\n        [class.mtx-time-input-warning]=\"!hourInput.valid\"\n        #hourInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"twelvehour ? 1 : 0\"\n        [timeMax]=\"twelvehour ? 12 : 23\"\n        [timeValue]=\"hour\"\n        (timeValueChanged)=\"_handleHourInputChange($event)\"\n        (focus)=\"_handleFocus('hour')\" />\n\n      <div class=\"mtx-time-seperator\">:</div>\n\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'minute'\"\n        [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n        #minuteInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"0\"\n        [timeMax]=\"59\"\n        [timeValue]=\"minute\"\n        (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n        [timeInterval]=\"interval\"\n        (focus)=\"_handleFocus('minute')\" />\n\n      @if (twelvehour) {\n        <div class=\"mtx-time-ampm\">\n          <button mat-button type=\"button\" class=\"mtx-time-am\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('AM')\">AM</button>\n          <button mat-button type=\"button\" class=\"mtx-time-pm\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('PM')\">PM</button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<mtx-clock\n  (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"_minuteInputDirective?.invalid || _hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], activeDateChange: [{
@@ -1771,10 +1723,10 @@ class MtxYearView {
     _isRtl() {
         return this._dir && this._dir.value === 'rtl';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxYearView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxYearView, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-year-view', exportAs: 'mtxYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
         }], ctorParameters: () => [], propDecorators: { type: [{
@@ -1905,21 +1857,9 @@ class MtxCalendar {
         return this._clampedActiveDate;
     }
     set _activeDate(value) {
-        const oldActiveDate = this._clampedActiveDate;
         this._clampedActiveDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
         // whenever active date changed, and possibly got clamped we should adjust the am/pm setting
         this._selectAMPM(this._clampedActiveDate);
-        if (oldActiveDate &&
-            this._clampedActiveDate &&
-            this.currentView === 'month' &&
-            !this._adapter.sameMonthAndYear(oldActiveDate, this._clampedActiveDate)) {
-            if (this._adapter.isInNextMonth(oldActiveDate, this._clampedActiveDate)) {
-                this.calendarState('right');
-            }
-            else {
-                this.calendarState('left');
-            }
-        }
         this._changeDetectorRef.markForCheck();
     }
     /** Whether the calendar is in month view. */
@@ -2178,9 +2118,6 @@ class MtxCalendar {
     _nextEnabled() {
         return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
     }
-    _calendarStateDone() {
-        this._calendarState = '';
-    }
     /** Whether the two dates represent the same view in the current view mode (month or year). */
     _isSameView(date1, date2) {
         if (this.currentView === 'month') {
@@ -2193,9 +2130,6 @@ class MtxCalendar {
         // Otherwise we are in 'multi-year' view.
         return isSameMultiYearView(this._adapter, date1, date2, this.minDate, this.maxDate);
     }
-    calendarState(direction) {
-        this._calendarState = direction;
-    }
     _2digit(n) {
         return ('00' + n).slice(-2);
     }
@@ -2207,15 +2141,15 @@ class MtxCalendar {
     focusActiveCell() {
         this._getCurrentViewComponent()._focusActiveCell(false);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: MtxMonthView, descendants: true }, { propertyName: "yearView", first: true, predicate: MtxYearView, descendants: true }, { propertyName: "multiYearView", first: true, predicate: MtxMultiYearView, descendants: true }, { propertyName: "timeView", first: true, predicate: MtxTimeView, descendants: true }], exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-previous-button\"\n        [class.disabled]=\"!_previousEnabled()\"\n        [attr.aria-disabled]=\"!_previousEnabled()\"\n        [attr.aria-label]=\"_prevButtonLabel\"\n        (click)=\"_previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n        </svg>\n      </button>\n      <div class=\"mtx-calendar-period-button\"\n        [@slideCalendar]=\"_calendarState\"\n        (@slideCalendar.done)=\"_calendarStateDone()\">\n        <strong>{{ _yearPeriodText }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-next-button\"\n        [class.disabled]=\"!_nextEnabled()\"\n        [attr.aria-disabled]=\"!_nextEnabled()\"\n        [attr.aria-label]=\"_nextButtonLabel\"\n        (click)=\"_nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n      @case ('month') {\n        <mtx-month-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_dateSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [showWeekNumbers]=\"showWeekNumbers\"\n          [type]=\"type\">\n        </mtx-month-view>\n      }\n      @case ('year') {\n        <mtx-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_monthSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-year-view>\n      }\n      @case ('multi-year') {\n        <mtx-multi-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_yearSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-multi-year-view>\n      }\n      @default {\n        <mtx-time-view\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [(selected)]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\"\n          [timeInput]=\"timeInput\"\n          [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n        </mtx-time-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "showWeekNumbers", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTimeView, selector: "mtx-time-view", inputs: ["dateFilter", "timeInput", "interval", "actionsPortal", "preventSameDateTimeSelection", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: MtxMonthView, descendants: true }, { propertyName: "yearView", first: true, predicate: MtxYearView, descendants: true }, { propertyName: "multiYearView", first: true, predicate: MtxMultiYearView, descendants: true }, { propertyName: "timeView", first: true, predicate: MtxTimeView, descendants: true }], exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-previous-button\"\n        [class.disabled]=\"!_previousEnabled()\"\n        [attr.aria-disabled]=\"!_previousEnabled()\"\n        [attr.aria-label]=\"_prevButtonLabel\"\n        (click)=\"_previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n        </svg>\n      </button>\n      <div class=\"mtx-calendar-period-button\">\n        <strong>{{ _yearPeriodText }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-next-button\"\n        [class.disabled]=\"!_nextEnabled()\"\n        [attr.aria-disabled]=\"!_nextEnabled()\"\n        [attr.aria-label]=\"_nextButtonLabel\"\n        (click)=\"_nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n      @case ('month') {\n        <mtx-month-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_dateSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [showWeekNumbers]=\"showWeekNumbers\"\n          [type]=\"type\">\n        </mtx-month-view>\n      }\n      @case ('year') {\n        <mtx-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_monthSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-year-view>\n      }\n      @case ('multi-year') {\n        <mtx-multi-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_yearSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-multi-year-view>\n      }\n      @default {\n        <mtx-time-view\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [(selected)]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\"\n          [timeInput]=\"timeInput\"\n          [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n        </mtx-time-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "showWeekNumbers", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTimeView, selector: "mtx-time-view", inputs: ["dateFilter", "timeInput", "interval", "actionsPortal", "preventSameDateTimeSelection", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-calendar', host: {
                         'class': 'mtx-calendar',
                         '[class.mtx-calendar-with-time-input]': 'timeInput',
-                    }, exportAs: 'mtxCalendar', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                    }, exportAs: 'mtxCalendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CdkPortalOutlet,
                         CdkMonitorFocus,
                         MatButton,
@@ -2224,7 +2158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         MtxYearView,
                         MtxMultiYearView,
                         MtxTimeView,
-                    ], template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-previous-button\"\n        [class.disabled]=\"!_previousEnabled()\"\n        [attr.aria-disabled]=\"!_previousEnabled()\"\n        [attr.aria-label]=\"_prevButtonLabel\"\n        (click)=\"_previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n        </svg>\n      </button>\n      <div class=\"mtx-calendar-period-button\"\n        [@slideCalendar]=\"_calendarState\"\n        (@slideCalendar.done)=\"_calendarStateDone()\">\n        <strong>{{ _yearPeriodText }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-next-button\"\n        [class.disabled]=\"!_nextEnabled()\"\n        [attr.aria-disabled]=\"!_nextEnabled()\"\n        [attr.aria-label]=\"_nextButtonLabel\"\n        (click)=\"_nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n      @case ('month') {\n        <mtx-month-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_dateSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [showWeekNumbers]=\"showWeekNumbers\"\n          [type]=\"type\">\n        </mtx-month-view>\n      }\n      @case ('year') {\n        <mtx-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_monthSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-year-view>\n      }\n      @case ('multi-year') {\n        <mtx-multi-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_yearSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-multi-year-view>\n      }\n      @default {\n        <mtx-time-view\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [(selected)]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\"\n          [timeInput]=\"timeInput\"\n          [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n        </mtx-time-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
+                    ], template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-previous-button\"\n        [class.disabled]=\"!_previousEnabled()\"\n        [attr.aria-disabled]=\"!_previousEnabled()\"\n        [attr.aria-label]=\"_prevButtonLabel\"\n        (click)=\"_previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n        </svg>\n      </button>\n      <div class=\"mtx-calendar-period-button\">\n        <strong>{{ _yearPeriodText }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-next-button\"\n        [class.disabled]=\"!_nextEnabled()\"\n        [attr.aria-disabled]=\"!_nextEnabled()\"\n        [attr.aria-label]=\"_nextButtonLabel\"\n        (click)=\"_nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n      @case ('month') {\n        <mtx-month-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_dateSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [showWeekNumbers]=\"showWeekNumbers\"\n          [type]=\"type\">\n        </mtx-month-view>\n      }\n      @case ('year') {\n        <mtx-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_monthSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-year-view>\n      }\n      @case ('multi-year') {\n        <mtx-multi-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_yearSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-multi-year-view>\n      }\n      @default {\n        <mtx-time-view\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [(selected)]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\"\n          [timeInput]=\"timeInput\"\n          [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n        </mtx-time-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { multiYearSelector: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2293,9 +2227,19 @@ const MTX_DATETIMEPICKER_SCROLL_STRATEGY = new InjectionToken('mtx-datetimepicke
         return () => overlay.scrollStrategies.reposition();
     },
 });
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 function MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
 }
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 const MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     provide: MTX_DATETIMEPICKER_SCROLL_STRATEGY,
     deps: [Overlay],
@@ -2311,10 +2255,18 @@ const MTX_DATETIMEPICKER_DEFAULT_OPTIONS = new InjectionToken('mtx-datetimepicke
  * @docs-private
  */
 class MtxDatetimepickerContent {
+    _viewChanged(view) {
+        this.view = view;
+    }
     constructor() {
+        this._elementRef = inject(ElementRef);
+        this._animationsDisabled = inject(ANIMATION_MODULE_TYPE, { optional: true }) === 'NoopAnimations';
         this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._ngZone = inject(NgZone);
         /** Emits when an animation has finished. */
         this._animationDone = new Subject();
+        /** Whether there is an in-progress animation. */
+        this._isAnimating = false;
         /** Id of the label for the `role="dialog"` element. */
         this._dialogLabelId = null;
         /** Portal with projected action buttons. */
@@ -2327,24 +2279,57 @@ class MtxDatetimepickerContent {
         this._closeButtonText = '';
         /** Whether the close button currently has focus. */
         this._closeButtonFocused = false;
-        const intl = inject(MtxDatetimepickerIntl);
-        this._closeButtonText = intl.closeCalendarLabel;
-    }
-    _viewChanged(view) {
-        this.view = view;
-    }
-    ngOnInit() {
-        this._animationState = this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';
+        this._handleAnimationEvent = (event) => {
+            const element = this._elementRef.nativeElement;
+            if (event.target !== element ||
+                !event.animationName.startsWith('_mtx-datetimepicker-content')) {
+                return;
+            }
+            clearTimeout(this._animationFallback);
+            this._isAnimating = event.type === 'animationstart';
+            element.classList.toggle('mtx-datetimepicker-content-animating', this._isAnimating);
+            if (!this._isAnimating) {
+                this._animationDone.next();
+            }
+        };
+        this._closeButtonText = inject(MtxDatetimepickerIntl).closeCalendarLabel;
+        if (!this._animationsDisabled) {
+            const element = this._elementRef.nativeElement;
+            const renderer = inject(Renderer2);
+            this._eventCleanups = this._ngZone.runOutsideAngular(() => [
+                renderer.listen(element, 'animationstart', this._handleAnimationEvent),
+                renderer.listen(element, 'animationend', this._handleAnimationEvent),
+                renderer.listen(element, 'animationcancel', this._handleAnimationEvent),
+            ]);
+        }
     }
     ngAfterViewInit() {
+        this._stateChanges = this.datetimepicker._disabledChange.subscribe(() => {
+            this._changeDetectorRef.markForCheck();
+        });
         this._calendar.focusActiveCell();
     }
     ngOnDestroy() {
+        clearTimeout(this._animationFallback);
+        this._eventCleanups?.forEach(cleanup => cleanup());
         this._animationDone.complete();
     }
     _startExitAnimation() {
-        this._animationState = 'void';
-        this._changeDetectorRef.markForCheck();
+        this._elementRef.nativeElement.classList.add('mtx-datetimepicker-content-exit');
+        if (this._animationsDisabled) {
+            this._animationDone.next();
+        }
+        else {
+            // Some internal apps disable animations in tests using `* {animation: none !important}`.
+            // If that happens, the animation events won't fire and we'll never clean up the overlay.
+            // Add a fallback that will fire if the animation doesn't run in a certain amount of time.
+            clearTimeout(this._animationFallback);
+            this._animationFallback = setTimeout(() => {
+                if (!this._isAnimating) {
+                    this._animationDone.next();
+                }
+            }, 200);
+        }
     }
     _handleUserSelection() {
         // Delegate closing the overlay to the actions.
@@ -2363,25 +2348,18 @@ class MtxDatetimepickerContent {
             this._changeDetectorRef.detectChanges();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "_animationState" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [showWeekNumbers]=\"datetimepicker.showWeekNumbers\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n    <!-- Invisible close button for screen reader users. -->\n    <button\n      type=\"button\"\n      mat-raised-button\n      [color]=\"color || 'primary'\"\n      class=\"mtx-datetimepicker-close-button\"\n      [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n      (focus)=\"_closeButtonFocused = true\"\n      (blur)=\"_closeButtonFocused = false\"\n      (click)=\"datetimepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "showWeekNumbers", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], animations: [
-            mtxDatetimepickerAnimations.transformPanel,
-            mtxDatetimepickerAnimations.fadeInCalendar,
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "class.mtx-datetimepicker-content-animations-enabled": "!_animationsDisabled", "attr.mode": "datetimepicker.mode" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n  [attr.mode]=\"datetimepicker.mode\"\n  class=\"mtx-datetimepicker-content-container\"\n  [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n  [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n  [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\"\n>\n  <mtx-calendar\n    [id]=\"datetimepicker.id\"\n    [class]=\"datetimepicker.panelClass\"\n    [attr.mode]=\"datetimepicker.mode\"\n    [type]=\"datetimepicker.type\"\n    [startAt]=\"datetimepicker.startAt\"\n    [startView]=\"datetimepicker.startView\"\n    [maxDate]=\"datetimepicker._maxDate\"\n    [minDate]=\"datetimepicker._minDate\"\n    [dateFilter]=\"datetimepicker._dateFilter\"\n    [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n    [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n    [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n    [timeInterval]=\"datetimepicker.timeInterval\"\n    [twelvehour]=\"datetimepicker.twelvehour\"\n    [showWeekNumbers]=\"datetimepicker.showWeekNumbers\"\n    [selected]=\"datetimepicker._selected\"\n    [timeInput]=\"datetimepicker.timeInput\"\n    [actionsPortal]=\"_actionsPortal\"\n    [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n    (selectedChange)=\"datetimepicker._select($event)\"\n    (viewChanged)=\"datetimepicker._viewChanged($event)\"\n    (viewChanged)=\"_viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection()\"\n  ></mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mtx-datetimepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datetimepicker.close()\"\n  >\n    {{ _closeButtonText }}\n  </button>\n</div>\n", styles: ["@keyframes _mtx-datetimepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-dialog-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.mtx-datetimepicker-content-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}.mtx-datetimepicker-content-exit.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-exit .1s linear}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "showWeekNumbers", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-content', host: {
                         'class': 'mtx-datetimepicker-content',
                         '[class]': 'color ? "mat-" + color : ""',
                         '[class.mtx-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
+                        '[class.mtx-datetimepicker-content-animations-enabled]': '!_animationsDisabled',
                         '[attr.mode]': 'datetimepicker.mode',
-                        '[@transformPanel]': '_animationState',
-                        '(@transformPanel.done)': '_animationDone.next()',
-                    }, animations: [
-                        mtxDatetimepickerAnimations.transformPanel,
-                        mtxDatetimepickerAnimations.fadeInCalendar,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus, MtxCalendar, CdkPortalOutlet, MatButton], template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [showWeekNumbers]=\"datetimepicker.showWeekNumbers\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n    <!-- Invisible close button for screen reader users. -->\n    <button\n      type=\"button\"\n      mat-raised-button\n      [color]=\"color || 'primary'\"\n      class=\"mtx-datetimepicker-close-button\"\n      [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n      (focus)=\"_closeButtonFocused = true\"\n      (blur)=\"_closeButtonFocused = false\"\n      (click)=\"datetimepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus, MtxCalendar, CdkPortalOutlet, MatButton], template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n  [attr.mode]=\"datetimepicker.mode\"\n  class=\"mtx-datetimepicker-content-container\"\n  [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n  [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n  [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\"\n>\n  <mtx-calendar\n    [id]=\"datetimepicker.id\"\n    [class]=\"datetimepicker.panelClass\"\n    [attr.mode]=\"datetimepicker.mode\"\n    [type]=\"datetimepicker.type\"\n    [startAt]=\"datetimepicker.startAt\"\n    [startView]=\"datetimepicker.startView\"\n    [maxDate]=\"datetimepicker._maxDate\"\n    [minDate]=\"datetimepicker._minDate\"\n    [dateFilter]=\"datetimepicker._dateFilter\"\n    [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n    [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n    [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n    [timeInterval]=\"datetimepicker.timeInterval\"\n    [twelvehour]=\"datetimepicker.twelvehour\"\n    [showWeekNumbers]=\"datetimepicker.showWeekNumbers\"\n    [selected]=\"datetimepicker._selected\"\n    [timeInput]=\"datetimepicker.timeInput\"\n    [actionsPortal]=\"_actionsPortal\"\n    [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n    (selectedChange)=\"datetimepicker._select($event)\"\n    (viewChanged)=\"datetimepicker._viewChanged($event)\"\n    (viewChanged)=\"_viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection()\"\n  ></mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mtx-datetimepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datetimepicker.close()\"\n  >\n    {{ _closeButtonText }}\n  </button>\n</div>\n", styles: ["@keyframes _mtx-datetimepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-dialog-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.mtx-datetimepicker-content-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}.mtx-datetimepicker-content-exit.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-exit .1s linear}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _calendar: [{
                 type: ViewChild,
                 args: [MtxCalendar, { static: true }]
@@ -2614,7 +2592,6 @@ class MtxDatetimepicker {
         };
         if (this._componentRef) {
             const { instance, location } = this._componentRef;
-            instance._startExitAnimation();
             instance._animationDone.pipe(take(1)).subscribe(() => {
                 const activeElement = this._document.activeElement;
                 // Since we restore focus after the exit animation, we have to check that
@@ -2628,6 +2605,7 @@ class MtxDatetimepicker {
                 this._focusedElementBeforeOpen = null;
                 this._destroyOverlay();
             });
+            instance._startExitAnimation();
         }
         if (canRestoreFocus) {
             // Because IE moves focus asynchronously, we can't count on it being restored before we've
@@ -2782,10 +2760,10 @@ class MtxDatetimepicker {
             this._componentRef?.instance._assignActions(null, true);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.6", type: MtxDatetimepicker, isStandalone: true, selector: "mtx-datetimepicker", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", mode: "mode", timeInterval: ["timeInterval", "timeInterval", numberAttribute], preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], calendarHeaderComponent: "calendarHeaderComponent", panelClass: "panelClass", opened: ["opened", "opened", booleanAttribute], color: "color", startAt: "startAt", type: "type", touchUi: ["touchUi", "touchUi", booleanAttribute], timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { selectedChanged: "selectedChanged", openedStream: "opened", closedStream: "closed", viewChanged: "viewChanged" }, exportAs: ["mtxDatetimepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: MtxDatetimepicker, isStandalone: true, selector: "mtx-datetimepicker", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", mode: "mode", timeInterval: ["timeInterval", "timeInterval", numberAttribute], preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], calendarHeaderComponent: "calendarHeaderComponent", panelClass: "panelClass", opened: ["opened", "opened", booleanAttribute], color: "color", startAt: "startAt", type: "type", touchUi: ["touchUi", "touchUi", booleanAttribute], timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { selectedChanged: "selectedChanged", openedStream: "opened", closedStream: "closed", viewChanged: "viewChanged" }, exportAs: ["mtxDatetimepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'mtx-datetimepicker',
@@ -3139,14 +3117,14 @@ class MtxDatetimepickerInput {
     getThemePalette() {
         return this._formField ? this._formField.color : undefined;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.6", type: MtxDatetimepickerInput, isStandalone: true, selector: "input[mtxDatetimepicker]", inputs: { mtxDatetimepicker: "mtxDatetimepicker", mtxDatetimepickerFilter: "mtxDatetimepickerFilter", value: "value", min: "min", max: "max", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(_datetimepicker?.opened && _datetimepicker.id) || null", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: MtxDatetimepickerInput, isStandalone: true, selector: "input[mtxDatetimepicker]", inputs: { mtxDatetimepicker: "mtxDatetimepicker", mtxDatetimepickerFilter: "mtxDatetimepickerFilter", value: "value", min: "min", max: "max", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(_datetimepicker?.opened && _datetimepicker.id) || null", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
             MAT_DATETIMEPICKER_VALUE_ACCESSOR,
             MAT_DATETIMEPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxDatetimepickerInput },
         ], exportAs: ["mtxDatetimepickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mtxDatetimepicker]',
@@ -3189,10 +3167,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 
 /** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
 class MtxDatetimepickerToggleIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: MtxDatetimepickerToggleIcon, isStandalone: true, selector: "[mtxDatetimepickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerToggleIcon, isStandalone: true, selector: "[mtxDatetimepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerToggleIcon]',
@@ -3244,10 +3222,10 @@ class MtxDatetimepickerToggle {
         this._stateChanges.unsubscribe();
         this._stateChanges = merge(this._intl.changes, datetimepickerDisabled, inputDisabled, datetimepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxDatetimepickerToggle, isStandalone: true, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n        </svg>\n      }\n      @case ('datetime') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n        </svg>\n      }\n      @default {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\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  }\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-datetimepicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxDatetimepickerToggle, isStandalone: true, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n        </svg>\n      }\n      @case ('datetime') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n        </svg>\n      }\n      @default {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\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  }\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-datetimepicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-toggle', host: {
                         'class': 'mtx-datetimepicker-toggle',
@@ -3288,10 +3266,10 @@ class MtxDatetimepickerApply {
     constructor() {
         this._datetimepicker = inject(MtxDatetimepicker);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: MtxDatetimepickerApply, isStandalone: true, selector: "[mtxDatetimepickerApply]", host: { listeners: { "click": "_datetimepicker._selectManually()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerApply, isStandalone: true, selector: "[mtxDatetimepickerApply]", host: { listeners: { "click": "_datetimepicker._selectManually()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerApply, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerApply, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerApply]',
@@ -3302,10 +3280,10 @@ class MtxDatetimepickerCancel {
     constructor() {
         this._datetimepicker = inject(MtxDatetimepicker);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: MtxDatetimepickerCancel, isStandalone: true, selector: "[mtxDatetimepickerCancel]", host: { listeners: { "click": "_datetimepicker.close()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerCancel, isStandalone: true, selector: "[mtxDatetimepickerCancel]", host: { listeners: { "click": "_datetimepicker.close()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerCancel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerCancel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerCancel]',
@@ -3316,10 +3294,10 @@ class MtxDatetimepickerClear {
     constructor() {
         this._datetimepicker = inject(MtxDatetimepicker);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: MtxDatetimepickerClear, isStandalone: true, selector: "[mtxDatetimepickerClear]", host: { listeners: { "click": "_datetimepicker._clearSelected()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerClear, isStandalone: true, selector: "[mtxDatetimepickerClear]", host: { listeners: { "click": "_datetimepicker._clearSelected()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerClear, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerClear, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerClear]',
@@ -3342,8 +3320,8 @@ class MtxDatetimepickerActions {
             this._portal?.detach();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MtxDatetimepickerActions, isStandalone: true, selector: "mtx-datetimepicker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerActions, isStandalone: true, selector: "mtx-datetimepicker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
     <ng-template>
       <div class="mtx-datetimepicker-actions">
         <ng-content></ng-content>
@@ -3351,7 +3329,7 @@ class MtxDatetimepickerActions {
     </ng-template>
   `, isInline: true, styles: [".mtx-datetimepicker-actions{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px}.mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerActions, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-actions', template: `
     <ng-template>
@@ -3366,8 +3344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }] } });
 
 class MtxDatetimepickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -3404,7 +3382,7 @@ class MtxDatetimepickerModule {
             MtxDatetimepickerCancel,
             MtxDatetimepickerClear,
             MtxDatetimepickerActions] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerModule, providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -3414,7 +3392,7 @@ class MtxDatetimepickerModule {
             MtxDatetimepickerToggle,
             MtxDatetimepickerContent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxDatetimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3463,6 +3441,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }] });
 
+/**
+ * Animations used by the Material datetimepicker.
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+const mtxDatetimepickerAnimations = {
+    // Represents:
+    // transformPanel: trigger('transformPanel', [
+    //   transition(
+    //     'void => enter-dropdown',
+    //     animate(
+    //       '120ms cubic-bezier(0, 0, 0.2, 1)',
+    //       keyframes([
+    //         style({ opacity: 0, transform: 'scale(1, 0.8)' }),
+    //         style({ opacity: 1, transform: 'scale(1, 1)' }),
+    //       ])
+    //     )
+    //   ),
+    //   transition(
+    //     'void => enter-dialog',
+    //     animate(
+    //       '150ms cubic-bezier(0, 0, 0.2, 1)',
+    //       keyframes([
+    //         style({ opacity: 0, transform: 'scale(0.7)' }),
+    //         style({ transform: 'none', opacity: 1 }),
+    //       ])
+    //     )
+    //   ),
+    //   transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
+    // ]),
+    /** Transforms the height of the datetimepicker's calendar. */
+    transformPanel: {
+        type: 7,
+        name: 'transformPanel',
+        definitions: [
+            {
+                type: 1,
+                expr: 'void => enter-dropdown',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        steps: [
+                            { type: 6, styles: { opacity: 0, transform: 'scale(1, 0.8)' }, offset: null },
+                            { type: 6, styles: { opacity: 1, transform: 'scale(1, 1)' }, offset: null },
+                        ],
+                    },
+                    timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: 'void => enter-dialog',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        steps: [
+                            { type: 6, styles: { opacity: 0, transform: 'scale(0.7)' }, offset: null },
+                            { type: 6, styles: { transform: 'none', opacity: 1 }, offset: null },
+                        ],
+                    },
+                    timings: '150ms cubic-bezier(0, 0, 0.2, 1)',
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => void',
+                animation: {
+                    type: 4,
+                    styles: { type: 6, styles: { opacity: 0 }, offset: null },
+                    timings: '100ms linear',
+                },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+    // Represents:
+    // fadeInCalendar: trigger('fadeInCalendar', [
+    //   state('void', style({ opacity: 0 })),
+    //   state('enter', style({ opacity: 1 })),
+    //   // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
+    //   // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
+    //   transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
+    // ]),
+    /** Fades in the content of the calendar. */
+    fadeInCalendar: {
+        type: 7,
+        name: 'fadeInCalendar',
+        definitions: [
+            { type: 0, name: 'void', styles: { type: 6, styles: { opacity: 0 }, offset: null } },
+            { type: 0, name: 'enter', styles: { type: 6, styles: { opacity: 1 }, offset: null } },
+            {
+                type: 1,
+                expr: 'void => *',
+                animation: {
+                    type: 4,
+                    styles: null,
+                    timings: '120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)',
+                },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+    // Represents:
+    // slideCalendar: trigger('slideCalendar', [
+    //   transition('* => left', [
+    //     animate(
+    //       180,
+    //       keyframes([
+    //         style({ transform: 'translateX(100%)', offset: 0.5 }),
+    //         style({ transform: 'translateX(-100%)', offset: 0.51 }),
+    //         style({ transform: 'translateX(0)', offset: 1 }),
+    //       ])
+    //     ),
+    //   ]),
+    //   transition('* => right', [
+    //     animate(
+    //       180,
+    //       keyframes([
+    //         style({ transform: 'translateX(-100%)', offset: 0.5 }),
+    //         style({ transform: 'translateX(100%)', offset: 0.51 }),
+    //         style({ transform: 'translateX(0)', offset: 1 }),
+    //       ])
+    //     ),
+    //   ]),
+    // ]),
+    /** Slides the calendar in a datetimepicker left or right. */
+    slideCalendar: {
+        type: 7,
+        name: 'slideCalendar',
+        definitions: [
+            {
+                type: 1,
+                expr: '* => left',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        steps: [
+                            { type: 6, styles: { transform: 'translateX(100%)' }, offset: 0.5 },
+                            { type: 6, styles: { transform: 'translateX(-100%)' }, offset: 0.51 },
+                            { type: 6, styles: { transform: 'translateX(0)' }, offset: 1 },
+                        ],
+                    },
+                    timings: 180,
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => right',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        steps: [
+                            { type: 6, styles: { transform: 'translateX(-100%)' }, offset: 0.5 },
+                            { type: 6, styles: { transform: 'translateX(100%)' }, offset: 0.51 },
+                            { type: 6, styles: { transform: 'translateX(0)' }, offset: 1 },
+                        ],
+                    },
+                    timings: 180,
+                },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+};
+
 /**
  * Generated bundle index. Do not edit.
  */