cmat 0.0.78 → 0.0.80

package/fesm2022/cmat-components-material-datetimepicker.mjs

@@ -1,6 +1,6 @@
 import { NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, HostListener, Input, HostBinding, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, ChangeDetectorRef, Directive, ViewChild, InjectionToken, Injector, ViewContainerRef, DOCUMENT, afterNextRender, forwardRef, ContentChild } from '@angular/core';
+import { EventEmitter, inject, ElementRef, HostListener, Input, HostBinding, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, signal, Directive, ViewChild, InjectionToken, Injector, ViewContainerRef, DOCUMENT, afterNextRender, forwardRef, ContentChild } from '@angular/core';
 import { DatetimeAdapter, CMAT_DATETIME_FORMATS } from 'cmat/components/adapter';
 import { coerceNumberProperty, coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
 import * as i1 from '@angular/material/button';
@@ -30,23 +30,17 @@ const CLOCK_RADIUS = 50;
 const CLOCK_INNER_RADIUS = 27.5;
 const CLOCK_OUTER_RADIUS = 41.25;
 const CLOCK_TICK_RADIUS = 7.0833;
-/**
- * A clock that is used as part of the datepicker.
- */
 class CmatDatetimepickerClockComponent {
     constructor() {
         this.userSelection = new EventEmitter();
         this.interval = 1;
         this.twelvehour = false;
-        /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
         this.activeDateChange = new EventEmitter();
         this.role = 'clock';
         this.class = 'cmat-datetimepicker-clock';
-        /** Hours and Minutes representing the clock view. */
         this.hours = [];
         this.minutes = [];
-        /** Whether the clock is in hour view. */
         this.hourView = true;
         this._element = inject(ElementRef);
         this._adapter = inject(DatetimeAdapter);
@@ -58,9 +52,6 @@ class CmatDatetimepickerClockComponent {
             this.handleMouseup();
         };
     }
-    /**
-     * The date to display in this clock view.
-     */
     get activeDate() {
         return this._activeDate;
     }
@@ -71,7 +62,6 @@ class CmatDatetimepickerClockComponent {
             this._init();
         }
     }
-    /** The currently selected date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get selected() {
         return this._selected;
@@ -82,7 +72,6 @@ class CmatDatetimepickerClockComponent {
             this.activeDate = this._selected;
         }
     }
-    /** The minimum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get minDate() {
         return this._minDate;
@@ -90,7 +79,6 @@ class CmatDatetimepickerClockComponent {
     set minDate(value) {
         this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
     }
-    /** The maximum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get maxDate() {
         return this._maxDate;
@@ -98,7 +86,6 @@ class CmatDatetimepickerClockComponent {
     set maxDate(value) {
         this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
     }
-    /** Whether the clock should be started in hour or minute view. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     set startView(value) {
         this.hourView = value !== 'minute';
@@ -136,7 +123,6 @@ class CmatDatetimepickerClockComponent {
             'margin-top': `${50 - radius}%`
         };
     }
-    /** Handles mousedown events on the clock body. */
     handleMousedown(event) {
         this._timeChanged = false;
         this._setTime(event);
@@ -165,7 +151,6 @@ class CmatDatetimepickerClockComponent {
             }
         }
     }
-    /** Initializes this clock view. */
     _init() {
         this.hours.length = 0;
         this.minutes.length = 0;
@@ -221,11 +206,6 @@ class CmatDatetimepickerClockComponent {
             });
         }
     }
-    /**
-     * Set Time
-     *
-     * @param event
-     */
     _setTime(event) {
         const trigger = this._element.nativeElement;
         const triggerRect = trigger.getBoundingClientRect();
@@ -270,10 +250,10 @@ class CmatDatetimepickerClockComponent {
         this.activeDate = date;
         this.activeDateChange.emit(this.activeDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatDatetimepickerClockComponent, isStandalone: true, selector: "cmat-datetimepicker-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "role": "this.role", "class": "this.class" } }, exportAs: ["cmatDatetimepickerClock"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hand\" [ngStyle]=\"hand\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hours\" [class.active]=\"hourView\">\r\n    @for (item of hours; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\r\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\">\r\n      {{ item.displayValue }}</div>\r\n    }\r\n  </div>\r\n  <div class=\"cmat-datetimepicker-clock-minutes\" [class.active]=\"!hourView\">\r\n    @for (item of minutes; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\" [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\">{{ item.displayValue\r\n      }}</div>\r\n    }\r\n  </div>\r\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.cmat-datetimepicker-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.cmat-datetimepicker-clock-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.cmat-datetimepicker-clock-hours,.cmat-datetimepicker-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-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}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatDatetimepickerClockComponent, isStandalone: true, selector: "cmat-datetimepicker-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "role": "this.role", "class": "this.class" } }, exportAs: ["cmatDatetimepickerClock"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hand\" [ngStyle]=\"hand\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hours\" [class.active]=\"hourView\">\r\n    @for (item of hours; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\r\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\">\r\n      {{ item.displayValue }}</div>\r\n    }\r\n  </div>\r\n  <div class=\"cmat-datetimepicker-clock-minutes\" [class.active]=\"!hourView\">\r\n    @for (item of minutes; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\" [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\">{{ item.displayValue\r\n      }}</div>\r\n    }\r\n  </div>\r\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.cmat-datetimepicker-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.cmat-datetimepicker-clock-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.cmat-datetimepicker-clock-hours,.cmat-datetimepicker-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-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}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-clock', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerClock', imports: [NgStyle], template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hand\" [ngStyle]=\"hand\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hours\" [class.active]=\"hourView\">\r\n    @for (item of hours; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\r\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\">\r\n      {{ item.displayValue }}</div>\r\n    }\r\n  </div>\r\n  <div class=\"cmat-datetimepicker-clock-minutes\" [class.active]=\"!hourView\">\r\n    @for (item of minutes; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\" [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\">{{ item.displayValue\r\n      }}</div>\r\n    }\r\n  </div>\r\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.cmat-datetimepicker-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.cmat-datetimepicker-clock-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.cmat-datetimepicker-clock-hours,.cmat-datetimepicker-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-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}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { userSelection: [{
@@ -317,67 +297,40 @@ function createMissingDateImplError(provider) {
 
 class CmatDatetimepickerIntl {
     constructor() {
-        /**
-         * Stream to emit from when labels are changed. Use this to notify components when the labels have
-         * changed after initialization.
-         */
         this.changes = new Subject();
-        /** A label for the calendar popup (used by screen readers). */
         this.calendarLabel = '日历';
-        /** A label for the button used to open the calendar popup (used by screen readers). */
         this.openCalendarLabel = '打开日历';
-        /** Label for the button used to close the calendar popup. */
         this.closeCalendarLabel = '关闭日历';
-        /** A label for the previous month button (used by screen readers). */
         this.prevMonthLabel = '上个月';
-        /** A label for the next month button (used by screen readers). */
         this.nextMonthLabel = '下个月';
-        /** A label for the previous year button (used by screen readers). */
-        this.prevYearLabel = '去年';
-        /** A label for the next year button (used by screen readers). */
-        this.nextYearLabel = '明年';
-        /** A label for the previous multi-year button (used by screen readers). */
+        this.prevYearLabel = '上一年';
+        this.nextYearLabel = '下一年';
         this.prevMultiYearLabel = '过去24年';
-        /** A label for the next multi-year button (used by screen readers). */
         this.nextMultiYearLabel = '未来24年';
-        /** A label for the 'switch to month view' button (used by screen readers). */
-        this.switchToMonthViewLabel = '选择日期';
-        /** A label for the 'switch to year view' button (used by screen readers). */
-        this.switchToYearViewLabel = '选择月份';
-        /** A label for the 'switch to multi-year view' button (used by screen readers). */
-        this.switchToMultiYearViewLabel = '选择年月';
-        /** A label for the first date of a range of dates (used by screen readers). */
+        this.switchToMonthViewLabel = '选择月份';
+        this.switchToYearViewLabel = '选择年份';
+        this.switchToMultiYearViewLabel = '选择年份范围';
         this.startDateLabel = '开始日期';
-        /** A label for the last date of a range of dates (used by screen readers). */
         this.endDateLabel = '结束日期';
-        /** A label for the 'switch to clock hour view' button (used by screen readers). */
         this.switchToClockHourViewLabel = '选择小时';
-        /** A label for the 'switch to clock minute view' button (used by screen readers). */
         this.switchToClockMinuteViewLabel = '选择分钟';
-        /** Label used for ok button within the manual time input. */
         this.okLabel = '确认';
-        /** Label used for cancel button within the manual time input. */
         this.cancelLabel = '取消';
     }
-    /** Formats a range of years (used for visuals). */
     formatYearRange(start, end) {
         return `${start} \u2013 ${end}`;
     }
-    /** Formats a label for a range of years (used by screen readers). */
     formatYearRangeLabel(start, end) {
         return `${start} to ${end}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-/**
- * An internal class that represents the data corresponding to a single calendar cell.
- */
 class CmatDatetimepickerCalendarCellComponent {
     constructor(value, displayValue, ariaLabel, enabled) {
         this.value = value;
@@ -386,22 +339,14 @@ class CmatDatetimepickerCalendarCellComponent {
         this.enabled = enabled;
     }
 }
-/**
- * An internal component used to display calendar data in a table.
- */
 class CmatDatetimepickerCalendarBodyComponent {
     constructor() {
-        /** The number of columns in the table. */
         this.numCols = 7;
-        /** Whether to allow selection of disabled cells. */
         this.allowDisabledSelection = false;
-        /** The cell number of the active cell in the table. */
         this.activeCell = 0;
-        /** Emits when a new value is selected. */
         this.selectedValueChange = new EventEmitter();
         this.class = 'cmat-datetimepicker-calendar-body';
     }
-    /** The number of blank cells to put at the beginning for the first row. */
     get _firstRowOffset() {
         return this.rows?.length && this.rows[0].length ?
             this.numCols - this.rows[0].length : 0;
@@ -414,18 +359,17 @@ class CmatDatetimepickerCalendarBodyComponent {
     }
     isActiveCell(rowIndex, colIndex) {
         let cellNumber = rowIndex * this.numCols + colIndex;
-        // Account for the fact that the first row may not have as many cells.
         if (rowIndex) {
             cellNumber -= this._firstRowOffset;
         }
         return cellNumber === this.activeCell;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatDatetimepickerCalendarBodyComponent, isStandalone: true, selector: "[cmat-datetimepicker-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { properties: { "class": "this.class" } }, exportAs: ["cmatDatetimepickerCalendarBody"], ngImport: i0, template: "<!--\r\nIf rst row, create a separate label row. We mark this row as\r\naria-hidden because we don't want it to be read out as one of the weeks in the month.\r\n-->\r\n@if (_firstRowOffset < labelMinRequiredCells) {\r\n  <tr aria-hidden=\"true\">\r\n    <td class=\"cmat-datetimepicker-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\r\n  </tr>\r\n}\r\n\r\n<!-- Create the first row separately so we can include a special spacer cell. -->\r\n@for (row of rows; track $index; let rowIndex = $index) {\r\n  <tr role=\"row\">\r\n    <!--\r\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\r\n    -->\r\n    @if (rowIndex === 0 && _firstRowOffset) {\r\n      <td aria-hidden=\"true\" class=\"cmat-datetimepicker-calendar-body-label\"\r\n        [attr.colspan]=\"_firstRowOffset\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n      </td>\r\n    }\r\n    @for (item of row; track $index; let colIndex = $index) {\r\n      <td role=\"presentation\" class=\"cmat-datetimepicker-calendar-body-cell\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\" (click)=\"cellClicked(item)\">\r\n        <div class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n          [attr.aria-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\">\r\n          {{ item.displayValue }}\r\n        </div>\r\n      </td>\r\n    }\r\n  </tr>\r\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatDatetimepickerCalendarBodyComponent, isStandalone: true, selector: "[cmat-datetimepicker-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { properties: { "class": "this.class" } }, exportAs: ["cmatDatetimepickerCalendarBody"], ngImport: i0, template: "\r\n@if (_firstRowOffset < labelMinRequiredCells) {\r\n  <tr aria-hidden=\"true\">\r\n    <td class=\"cmat-datetimepicker-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\r\n  </tr>\r\n}\r\n\r\n\r\n@for (row of rows; track $index; let rowIndex = $index) {\r\n  <tr role=\"row\">\r\n    \r\n    @if (rowIndex === 0 && _firstRowOffset) {\r\n      <td aria-hidden=\"true\" class=\"cmat-datetimepicker-calendar-body-label\"\r\n        [attr.colspan]=\"_firstRowOffset\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n      </td>\r\n    }\r\n    @for (item of row; track $index; let colIndex = $index) {\r\n      <td role=\"presentation\" class=\"cmat-datetimepicker-calendar-body-cell\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\" (click)=\"cellClicked(item)\">\r\n        <div class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n          [attr.aria-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\">\r\n          {{ item.displayValue }}\r\n        </div>\r\n      </td>\r\n    }\r\n  </tr>\r\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[cmat-datetimepicker-calendar-body]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendarBody', imports: [], template: "<!--\r\nIf rst row, create a separate label row. We mark this row as\r\naria-hidden because we don't want it to be read out as one of the weeks in the month.\r\n-->\r\n@if (_firstRowOffset < labelMinRequiredCells) {\r\n  <tr aria-hidden=\"true\">\r\n    <td class=\"cmat-datetimepicker-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\r\n  </tr>\r\n}\r\n\r\n<!-- Create the first row separately so we can include a special spacer cell. -->\r\n@for (row of rows; track $index; let rowIndex = $index) {\r\n  <tr role=\"row\">\r\n    <!--\r\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\r\n    -->\r\n    @if (rowIndex === 0 && _firstRowOffset) {\r\n      <td aria-hidden=\"true\" class=\"cmat-datetimepicker-calendar-body-label\"\r\n        [attr.colspan]=\"_firstRowOffset\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n      </td>\r\n    }\r\n    @for (item of row; track $index; let colIndex = $index) {\r\n      <td role=\"presentation\" class=\"cmat-datetimepicker-calendar-body-cell\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\" (click)=\"cellClicked(item)\">\r\n        <div class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n          [attr.aria-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\">\r\n          {{ item.displayValue }}\r\n        </div>\r\n      </td>\r\n    }\r\n  </tr>\r\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
+            args: [{ selector: '[cmat-datetimepicker-calendar-body]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendarBody', imports: [], template: "\r\n@if (_firstRowOffset < labelMinRequiredCells) {\r\n  <tr aria-hidden=\"true\">\r\n    <td class=\"cmat-datetimepicker-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\r\n  </tr>\r\n}\r\n\r\n\r\n@for (row of rows; track $index; let rowIndex = $index) {\r\n  <tr role=\"row\">\r\n    \r\n    @if (rowIndex === 0 && _firstRowOffset) {\r\n      <td aria-hidden=\"true\" class=\"cmat-datetimepicker-calendar-body-label\"\r\n        [attr.colspan]=\"_firstRowOffset\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n      </td>\r\n    }\r\n    @for (item of row; track $index; let colIndex = $index) {\r\n      <td role=\"presentation\" class=\"cmat-datetimepicker-calendar-body-cell\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\" (click)=\"cellClicked(item)\">\r\n        <div class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n          [attr.aria-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\">\r\n          {{ item.displayValue }}\r\n        </div>\r\n      </td>\r\n    }\r\n  </tr>\r\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], rows: [{
@@ -450,19 +394,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }] } });
 
 const DAYS_PER_WEEK = 7;
-/**
- * An internal component used to display a single month in the datepicker.
- */
 class CmatDatetimepickerMonthViewComponent {
     constructor() {
         this.type = 'date';
         this.userSelection = new EventEmitter();
-        /** Emits when a new date is selected. */
         this.selectedChange = new EventEmitter();
+        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
         this.adapter = inject(DatetimeAdapter, { optional: true });
         this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
         this._elementRef = inject(ElementRef);
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
         if (!this.adapter) {
             throw createMissingDateImplError('CDatetimeAdapter');
@@ -473,15 +413,11 @@ class CmatDatetimepickerMonthViewComponent {
         const firstDayOfWeek = this.adapter.getFirstDayOfWeek();
         const narrowWeekdays = this.adapter.getDayOfWeekNames('narrow');
         const longWeekdays = this.adapter.getDayOfWeekNames('long');
-        // Rotate the labels for days of the week based on the configured first day of the week.
         const weekdays = longWeekdays.map((long, i) => ({ long, narrow: narrowWeekdays[i] }));
         this.weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
         this._activeDate = this.adapter.today();
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
     }
-    /**
-     * The date to display in this month view (everything other than the month and year is ignored).
-     */
     get activeDate() {
         return this._activeDate;
     }
@@ -499,7 +435,6 @@ class CmatDatetimepickerMonthViewComponent {
             }
         }
     }
-    /** The currently selected date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get selected() {
         return this._selected;
@@ -514,7 +449,6 @@ class CmatDatetimepickerMonthViewComponent {
     ngOnDestroy() {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
     }
-    /** Handles when a new date is selected. */
     dateSelected(date) {
         this.selectedChange.emit(this.adapter.createDatetime(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate), date, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate)));
         if (this.type === 'date') {
@@ -523,11 +457,9 @@ class CmatDatetimepickerMonthViewComponent {
     }
     calendarStateDone(event) {
         if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
-            this.calendarState = '';
-            this._changeDetectorRef.markForCheck();
+            this.calendarState.set('');
         }
     }
-    /** Initializes this month view. */
     _init() {
         this.selectedDate = this._getDateInCurrentMonth(this.selected);
         this.todayDate = this._getDateInCurrentMonth(this.adapter.today());
@@ -537,7 +469,6 @@ class CmatDatetimepickerMonthViewComponent {
                 this.adapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
         this._createWeekCells();
     }
-    /** Creates MdCalendarCells for the dates in this month. */
     _createWeekCells() {
         const daysInMonth = this.adapter.getNumDaysInMonth(this.activeDate);
         const dateNames = this.adapter.getDateNames();
@@ -555,23 +486,19 @@ class CmatDatetimepickerMonthViewComponent {
                 .push(new CmatDatetimepickerCalendarCellComponent(i + 1, dateNames[i], ariaLabel, enabled));
         }
     }
-    /**
-     * Gets the date in this month that the given Date falls on.
-     * Returns null if the given Date is in another month.
-     */
     _getDateInCurrentMonth(date) {
         return this.adapter.sameMonthAndYear(date, this.activeDate) ?
             this.adapter.getDate(date) : null;
     }
     _changeCalendarState(direction) {
-        this.calendarState = direction;
+        this.calendarState.set(direction);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatDatetimepickerMonthViewComponent, isStandalone: true, selector: "cmat-datetimepicker-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMonthView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n    [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatDatetimepickerMonthViewComponent, isStandalone: true, selector: "cmat-datetimepicker-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMonthView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n    [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-month-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMonthView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n    [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+            args: [{ selector: 'cmat-datetimepicker-month-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMonthView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n    [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], userSelection: [{
@@ -588,18 +515,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
 
 const yearsPerPage = 24;
 const yearsPerRow = 4;
-/**
- * An internal component used to display multiple years in the datepicker.
- */
 class CmatDatetimepickerMultiYearViewComponent {
     constructor() {
         this.userSelection = new EventEmitter();
         this.type = 'date';
-        /** Emits when a new month is selected. */
         this.selectedChange = new EventEmitter();
+        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
         this.adapter = inject(DatetimeAdapter, { optional: true });
         this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._elementRef = inject(ElementRef);
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
         if (!this.adapter) {
@@ -611,7 +534,6 @@ class CmatDatetimepickerMultiYearViewComponent {
         this._activeDate = this.adapter.today();
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
     }
-    /** The date to display in this multi year view*/
     get activeDate() {
         return this._activeDate;
     }
@@ -629,7 +551,6 @@ class CmatDatetimepickerMultiYearViewComponent {
             }
         }
     }
-    /** The currently selected date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get selected() {
         return this._selected;
@@ -638,7 +559,6 @@ class CmatDatetimepickerMultiYearViewComponent {
         this._selected = value;
         this.selectedYear = this._selected && this.adapter.getYear(this._selected);
     }
-    /** The minimum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get minDate() {
         return this._minDate;
@@ -646,7 +566,6 @@ class CmatDatetimepickerMultiYearViewComponent {
     set minDate(value) {
         this._minDate = this._getValidDateOrNull(this.adapter.deserialize(value));
     }
-    /** The maximum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get maxDate() {
         return this._maxDate;
@@ -660,7 +579,6 @@ class CmatDatetimepickerMultiYearViewComponent {
     ngOnDestroy() {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
     }
-    /** Handles when a new year is selected. */
     yearSelected(year) {
         const month = this.adapter.getMonth(this.activeDate);
         const normalizedDate = this.adapter.createDatetime(year, month, 1, 0, 0);
@@ -674,11 +592,9 @@ class CmatDatetimepickerMultiYearViewComponent {
     }
     calendarStateDone(event) {
         if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
-            this.calendarState = '';
-            this._changeDetectorRef.markForCheck();
+            this.calendarState.set('');
         }
     }
-    /** Initializes this year view. */
     _init() {
         this.todayYear = this.adapter.getYear(this.adapter.today());
         this.yearLabel = this.adapter.getYearName(this.activeDate);
@@ -693,25 +609,20 @@ class CmatDatetimepickerMultiYearViewComponent {
             }
         }
     }
-    /** Creates an MatDatetimepickerCalendarCell for the given year. */
     _createCellForYear(year) {
         const yearName = this.adapter.getYearName(this.adapter.createDate(year, 0, 1));
         return new CmatDatetimepickerCalendarCellComponent(year, yearName, yearName, this._shouldEnableYear(year));
     }
-    /** Whether the given year is enabled. */
     _shouldEnableYear(year) {
-        // disable if the year is greater than maxDate lower than minDate
         if (year === undefined || year === null ||
             (this.maxDate && year > this.adapter.getYear(this.maxDate)) ||
             (this.minDate && year < this.adapter.getYear(this.minDate))) {
             return false;
         }
-        // enable if it reaches here and there's no filter defined
         if (!this.dateFilter) {
             return true;
         }
         const firstOfYear = this.adapter.createDate(year, 0, 1);
-        // If any date in the year is enabled count the year as enabled.
         for (let date = firstOfYear; this.adapter.getYear(date) === year; date = this.adapter.addCalendarDays(date, 1)) {
             if (this.dateFilter(date)) {
                 return true;
@@ -719,22 +630,18 @@ class CmatDatetimepickerMultiYearViewComponent {
         }
         return false;
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
     _getValidDateOrNull(obj) {
         return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
     }
     _changeCalendarState(direction) {
-        this.calendarState = direction;
+        this.calendarState.set(direction);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatDatetimepickerMultiYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMultiYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmatDatetimepickerMultiYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMultiYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-multi-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMultiYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+            args: [{ selector: 'cmat-datetimepicker-multi-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMultiYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { userSelection: [{
                 type: Output
             }], type: [{
@@ -759,19 +666,10 @@ function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
     return Math.floor((year1 - startingYear) / yearsPerPage) ===
         Math.floor((year2 - startingYear) / yearsPerPage);
 }
-/**
- * When the multi-year view is first opened, the active year will be in view.
- * So we compute how many years are between the active year and the *slot* where our
- * "startingYear" will render when paged into view.
- */
 function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
     const activeYear = dateAdapter.getYear(activeDate);
     return euclideanModulo((activeYear - getStartingYear(dateAdapter, minDate, maxDate)), yearsPerPage);
 }
-/**
- * We pick a "starting" year such that either the maximum year would be at the end
- * or the minimum year would be at the beginning of a page.
- */
 function getStartingYear(dateAdapter, minDate, maxDate) {
     let startingYear = 0;
     if (maxDate) {
@@ -783,7 +681,6 @@ function getStartingYear(dateAdapter, minDate, maxDate) {
     }
     return startingYear;
 }
-/** Gets remainder that is non-negative, even if first number is negative */
 function euclideanModulo(a, b) {
     return (a % b + b) % b;
 }
@@ -802,14 +699,12 @@ class CmatDatetimepickerTimeInputDirective {
         this.timeMax = Infinity;
         this.timeValueChanged = new EventEmitter();
         this._element = inject(ElementRef);
-        this._cdr = inject(ChangeDetectorRef);
         this._keyDownListener = this.keyDownHandler.bind(this);
         this._keyPressListener = this.keyPressHandler.bind(this);
         this._inputEventListener = this.inputChangedHandler.bind(this);
         this.inputElement.addEventListener('keydown', this._keyDownListener, {
             passive: true,
         });
-        // Do not passive since we want to be able to preventDefault()
         this.inputElement.addEventListener('keypress', this._keyPressListener);
         this.inputElement.addEventListener('input', this._inputEventListener, {
             passive: true,
@@ -821,15 +716,9 @@ class CmatDatetimepickerTimeInputDirective {
     get inputElement() {
         return this._element.nativeElement;
     }
-    // We look here at the placeholder value, because we write '' into the value on focus
-    // placeholder should always be up to date with "currentValue"
     get valid() {
-        // At the start _value is undefined therefore this would result in not valid and
-        // make a ugly warning border afterwards we can safely check
         if (this._value) {
             const currentValue = String(this.inputElement.value);
-            // It can be that currentValue is empty due to we removing the value on focus,
-            // if that is the case we should check previous value which should be in the placeholder
             if (currentValue.length) {
                 return pad(this._value, 2) === this.inputElement.value;
             }
@@ -857,11 +746,6 @@ class CmatDatetimepickerTimeInputDirective {
     focus() {
         this.writeValue('');
     }
-    /**
-     * Write value to inputElement
-     *
-     * @param value NumberInput
-     */
     writeValue(value) {
         if (value !== '') {
             this.inputElement.value = pad(value, 2);
@@ -869,16 +753,9 @@ class CmatDatetimepickerTimeInputDirective {
         else {
             this.inputElement.value = '';
         }
-        this._cdr.markForCheck();
     }
-    /**
-     * Writes value to placeholder
-     *
-     * @param value NumberInput
-     */
     writePlaceholder(value) {
         this.inputElement.placeholder = pad(value, 2);
-        this._cdr.markForCheck();
     }
     keyDownHandler(event) {
         if (String(this.inputElement.value).length > 0) {
@@ -893,7 +770,6 @@ class CmatDatetimepickerTimeInputDirective {
                 value -= this.timeInterval;
                 event.stopPropagation();
             }
-            // if value has changed
             if (typeof value === 'number') {
                 this.writeValue(value);
                 this.writePlaceholder(value);
@@ -902,11 +778,6 @@ class CmatDatetimepickerTimeInputDirective {
             }
         }
     }
-    /**
-     * Prevent non number inputs in the inputElement with the exception of Enter/BackSpace
-     *
-     * @param event KeyboardEvent
-     */
     keyPressHandler(event) {
         const key = event?.key ?? null;
         if (isNaN(Number(key)) && key !== 'Enter') {
@@ -931,18 +802,15 @@ class CmatDatetimepickerTimeInputDirective {
             this._value = clampedValue;
         }
     }
-    /**
-     * Remove event listeners on destruction
-     */
     ngOnDestroy() {
         this.inputElement.removeEventListener('keydown', this._keyDownListener);
         this.inputElement.removeEventListener('keypress', this._keyPressListener);
         this.inputElement.removeEventListener('input', this._inputEventListener);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatDatetimepickerTimeInputDirective, isStandalone: true, selector: "input.cmat-datetimepicker-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["cmatDatetimepickerTimeInput"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatDatetimepickerTimeInputDirective, isStandalone: true, selector: "input.cmat-datetimepicker-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["cmatDatetimepickerTimeInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -968,30 +836,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }] } });
 class CmatDatetimepickerTimeComponent {
     constructor() {
-        /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
-        /** Emits when any date changes. */
         this.activeDateChange = new EventEmitter();
-        /** Emits when any date is selected. */
         this.userSelection = new EventEmitter();
-        /** Emits when AM/PM button are clicked. */
         this.ampmChange = new EventEmitter();
-        /** Emits when AM/PM button are clicked. */
         this.clockViewChange = new EventEmitter();
-        /** Step over minutes. */
         this.interval = 1;
-        /** Whether the time is now in AM or PM. */
         // eslint-disable-next-line @typescript-eslint/naming-convention
         this.AMPM = 'AM';
         this.class = 'cmat-datetimepicker-time';
+        this.intlVersion = signal(0, ...(ngDevMode ? [{ debugName: "intlVersion" }] : /* istanbul ignore next */ []));
         this.datetimepickerIntl = inject(CmatDatetimepickerIntl);
         this._adapter = inject(DatetimeAdapter);
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._twelvehour = false;
-        /** Whether the clock is in hour view. */
         this._clockView = 'hour';
         this.datetimepickerIntlChangesSubscription = this.datetimepickerIntl.changes.subscribe(() => {
-            this._changeDetectorRef.detectChanges();
+            this.intlVersion.update(value => value + 1);
         });
     }
     get isHourView() {
@@ -1026,7 +886,6 @@ class CmatDatetimepickerTimeComponent {
         }
         return '00';
     }
-    /** Whether the clock uses 12 hour format. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get twelvehour() {
         return this._twelvehour;
@@ -1034,9 +893,6 @@ class CmatDatetimepickerTimeComponent {
     set twelvehour(value) {
         this._twelvehour = coerceBooleanProperty(value);
     }
-    /**
-     * The date to display in this clock view.
-     */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get activeDate() {
         return this._activeDate;
@@ -1044,7 +900,6 @@ class CmatDatetimepickerTimeComponent {
     set activeDate(value) {
         this._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
     }
-    /** The currently selected date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get selected() {
         return this._selected;
@@ -1055,7 +910,6 @@ class CmatDatetimepickerTimeComponent {
             this.activeDate = this._selected;
         }
     }
-    /** The minimum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get minDate() {
         return this._minDate;
@@ -1063,7 +917,6 @@ class CmatDatetimepickerTimeComponent {
     set minDate(value) {
         this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
     }
-    /** The maximum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get maxDate() {
         return this._maxDate;
@@ -1071,7 +924,6 @@ class CmatDatetimepickerTimeComponent {
     set maxDate(value) {
         this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
     }
-    /** Whether the clock should be started in hour or minute view. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get clockView() {
         return this._clockView;
@@ -1086,7 +938,6 @@ class CmatDatetimepickerTimeComponent {
         return String(value);
     }
     ngOnChanges(changes) {
-        // when clockView changes by input we should focus the correct input
         if (changes['clockView']) {
             if (changes['clockView'].currentValue !== changes['clockView'].previousValue) {
                 this.focusInputElement();
@@ -1114,9 +965,6 @@ class CmatDatetimepickerTimeComponent {
             const newValue = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this.updateHourForAmPm(hour), this._adapter.getMinute(this.activeDate));
             this._activeDate = this._adapter.clampDate(newValue, this.minDate, this.maxDate);
             this.activeDateChange.emit(this.activeDate);
-            // If previously we did set [cmatValue]="13" and the input changed to 6, and the clamping will make it "13" again
-            // then the hourInputDirective will not have been updated since "13" === "13" same reference so no change detected
-            // by directly setting it within this handler, we handle this usecase
             if (this.hourInputDirective) {
                 this.hourInputDirective.timeValue = this.hour;
             }
@@ -1126,19 +974,16 @@ class CmatDatetimepickerTimeComponent {
         if (!this.twelvehour) {
             return value;
         }
-        // value should be between 1-12
         if (this.AMPM === 'AM') {
             if (value === 0 || value === 12) {
                 return 0;
             }
             return value;
         }
-        // PM
         else {
             if (value === 0 || value === 12) {
                 return 12;
             }
-            // other cases, we should add 12 to the value aka 3:00 PM = 3 + 12 = 15:00
             return value + 12;
         }
     }
@@ -1148,9 +993,6 @@ class CmatDatetimepickerTimeComponent {
             const newValue = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this._activeDate), minute);
             this._activeDate = this._adapter.clampDate(newValue, this.minDate, this.maxDate);
             this.activeDateChange.emit(this.activeDate);
-            // If previously we did set [cmatValue]="40" and the input changed to 30, and the clamping 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;
             }
@@ -1184,12 +1026,12 @@ class CmatDatetimepickerTimeComponent {
             this.datetimepickerIntlChangesSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatDatetimepickerTimeComponent, isStandalone: true, selector: "cmat-datetimepicker-time", inputs: { dateFilter: "dateFilter", interval: "interval", AMPM: "AMPM", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", userSelection: "userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }], exportAs: ["cmatDatetimepickerTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-datetimepicker-time-input-wrapper\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input #hourInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\" inputmode=\"numeric\"\r\n      maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\" [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\r\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\r\n\r\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n      <input #minuteInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n        type=\"text\" inputmode=\"numeric\"\r\n        maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\" [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n        [timeInterval]=\"interval\" (timeValueChanged)=\"handleMinuteInputChange($event)\" (focus)=\"handleFocus('minute')\" />\r\n\r\n        @if (twelvehour) {\r\n          <div class=\"cmat-datetimepicker-time-ampm\">\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n              aria-label=\"AM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n              aria-label=\"PM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"interval\"\r\n      [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\"\r\n      (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\">\r\n    </cmat-datetimepicker-clock>\r\n\r\n    <div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n      <button class=\"cmat=datetimepicker-time-cancel-button\" matButton=\"outlined\" type=\"button\" (click)=\"handleCancel()\">\r\n        {{ datetimepickerIntl.cancelLabel }}\r\n      </button>\r\n      <button class=\"cmat-datetimepicker-time-ok-button\" matButton=\"filled\" type=\"button\" color=\"primary\" [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\"\r\n        (click)=\"handleOk()\">\r\n        {{ datetimepickerIntl.okLabel }}\r\n      </button>\r\n    </div>", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: CmatDatetimepickerTimeInputDirective, selector: "input.cmat-datetimepicker-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["cmatDatetimepickerTimeInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatDatetimepickerTimeComponent, isStandalone: true, selector: "cmat-datetimepicker-time", inputs: { dateFilter: "dateFilter", interval: "interval", AMPM: "AMPM", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", userSelection: "userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }], exportAs: ["cmatDatetimepickerTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-datetimepicker-time-input-wrapper\" [attr.data-refresh]=\"intlVersion()\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input #hourInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\" inputmode=\"numeric\"\r\n      maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\" [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\r\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\r\n\r\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n      <input #minuteInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n        type=\"text\" inputmode=\"numeric\"\r\n        maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\" [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n        [timeInterval]=\"interval\" (timeValueChanged)=\"handleMinuteInputChange($event)\" (focus)=\"handleFocus('minute')\" />\r\n\r\n        @if (twelvehour) {\r\n          <div class=\"cmat-datetimepicker-time-ampm\">\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n              aria-label=\"AM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n              aria-label=\"PM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"interval\"\r\n      [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\"\r\n      (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\">\r\n    </cmat-datetimepicker-clock>\r\n\r\n    <div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n      <button class=\"cmat=datetimepicker-time-cancel-button\" matButton=\"outlined\" type=\"button\" (click)=\"handleCancel()\">\r\n        {{ datetimepickerIntl.cancelLabel }}\r\n      </button>\r\n      <button class=\"cmat-datetimepicker-time-ok-button\" matButton=\"filled\" type=\"button\" color=\"primary\" [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\"\r\n        (click)=\"handleOk()\">\r\n        {{ datetimepickerIntl.okLabel }}\r\n      </button>\r\n    </div>\r\n", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: CmatDatetimepickerTimeInputDirective, selector: "input.cmat-datetimepicker-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["cmatDatetimepickerTimeInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-time', exportAs: 'cmatDatetimepickerTime', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatDatetimepickerTimeInputDirective, MatButtonModule, CmatDatetimepickerClockComponent], template: "<div class=\"cmat-datetimepicker-time-input-wrapper\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input #hourInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\" inputmode=\"numeric\"\r\n      maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\" [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\r\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\r\n\r\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n      <input #minuteInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n        type=\"text\" inputmode=\"numeric\"\r\n        maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\" [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n        [timeInterval]=\"interval\" (timeValueChanged)=\"handleMinuteInputChange($event)\" (focus)=\"handleFocus('minute')\" />\r\n\r\n        @if (twelvehour) {\r\n          <div class=\"cmat-datetimepicker-time-ampm\">\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n              aria-label=\"AM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n              aria-label=\"PM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"interval\"\r\n      [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\"\r\n      (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\">\r\n    </cmat-datetimepicker-clock>\r\n\r\n    <div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n      <button class=\"cmat=datetimepicker-time-cancel-button\" matButton=\"outlined\" type=\"button\" (click)=\"handleCancel()\">\r\n        {{ datetimepickerIntl.cancelLabel }}\r\n      </button>\r\n      <button class=\"cmat-datetimepicker-time-ok-button\" matButton=\"filled\" type=\"button\" color=\"primary\" [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\"\r\n        (click)=\"handleOk()\">\r\n        {{ datetimepickerIntl.okLabel }}\r\n      </button>\r\n    </div>", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"] }]
+            args: [{ selector: 'cmat-datetimepicker-time', exportAs: 'cmatDatetimepickerTime', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatDatetimepickerTimeInputDirective, MatButtonModule, CmatDatetimepickerClockComponent], template: "<div class=\"cmat-datetimepicker-time-input-wrapper\" [attr.data-refresh]=\"intlVersion()\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input #hourInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\" inputmode=\"numeric\"\r\n      maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\" [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\r\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\r\n\r\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n      <input #minuteInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n        type=\"text\" inputmode=\"numeric\"\r\n        maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\" [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n        [timeInterval]=\"interval\" (timeValueChanged)=\"handleMinuteInputChange($event)\" (focus)=\"handleFocus('minute')\" />\r\n\r\n        @if (twelvehour) {\r\n          <div class=\"cmat-datetimepicker-time-ampm\">\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n              aria-label=\"AM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n              aria-label=\"PM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"interval\"\r\n      [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\"\r\n      (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\">\r\n    </cmat-datetimepicker-clock>\r\n\r\n    <div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n      <button class=\"cmat=datetimepicker-time-cancel-button\" matButton=\"outlined\" type=\"button\" (click)=\"handleCancel()\">\r\n        {{ datetimepickerIntl.cancelLabel }}\r\n      </button>\r\n      <button class=\"cmat-datetimepicker-time-ok-button\" matButton=\"filled\" type=\"button\" color=\"primary\" [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\"\r\n        (click)=\"handleOk()\">\r\n        {{ datetimepickerIntl.okLabel }}\r\n      </button>\r\n    </div>\r\n", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], activeDateChange: [{
@@ -1235,18 +1077,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 type: Input
             }] } });
 
-/**
- * An internal component used to display a single year in the datepicker.
- */
 class CmatDatetimepickerYearViewComponent {
     constructor() {
         this.userSelection = new EventEmitter();
         this.type = 'date';
-        /** Emits when a new month is selected. */
         this.selectedChange = new EventEmitter();
+        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
         this.adapter = inject(DatetimeAdapter, { optional: true });
         this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._elementRef = inject(ElementRef);
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
         if (!this.adapter) {
@@ -1258,7 +1096,6 @@ class CmatDatetimepickerYearViewComponent {
         this._activeDate = this.adapter.today();
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
     }
-    /** The date to display in this year view (everything other than the year is ignored). */
     get activeDate() {
         return this._activeDate;
     }
@@ -1276,7 +1113,6 @@ class CmatDatetimepickerYearViewComponent {
             }
         }
     }
-    /** The currently selected date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get selected() {
         return this._selected;
@@ -1291,7 +1127,6 @@ class CmatDatetimepickerYearViewComponent {
     ngOnDestroy() {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
     }
-    /** Handles when a new month is selected. */
     monthSelected(month) {
         const normalizedDate = this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, 1, 0, 0);
         this.selectedChange.emit(this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, Math.min(this.adapter.getDate(this.activeDate), this.adapter.getNumDaysInMonth(normalizedDate)), this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate)));
@@ -1301,39 +1136,29 @@ class CmatDatetimepickerYearViewComponent {
     }
     calendarStateDone(event) {
         if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
-            this.calendarState = '';
-            this._changeDetectorRef.markForCheck();
+            this.calendarState.set('');
         }
     }
-    /** Initializes this month view. */
     _init() {
         this.selectedMonth = this._getMonthInCurrentYear(this.selected);
         this.todayMonth = this._getMonthInCurrentYear(this.adapter.today());
         this.yearLabel = this.adapter.getYearName(this.activeDate);
         const monthNames = this.adapter.getMonthNames('short');
-        // First row of months only contains 5 elements so we can fit the year label on the same row.
         this.months = [[0, 1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11]].map(row => row.map(month => this._createCellForMonth(month, monthNames[month])));
     }
-    /**
-     * Gets the month in this year that the given Date falls on.
-     * Returns null if the given Date is in another year.
-     */
     _getMonthInCurrentYear(date) {
         return this.adapter.sameYear(date, this.activeDate) ?
             this.adapter.getMonth(date) : null;
     }
-    /** Creates an MdCalendarCell for the given month. */
     _createCellForMonth(month, monthName) {
         const ariaLabel = this.adapter.format(this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, 1, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate)), this._dateFormats.display.monthYearA11yLabel);
         return new CmatDatetimepickerCalendarCellComponent(month, monthName.toLocaleUpperCase(), ariaLabel, this._isMonthEnabled(month));
     }
-    /** Whether the given month is enabled. */
     _isMonthEnabled(month) {
         if (!this.dateFilter) {
             return true;
         }
         const firstOfMonth = this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, 1, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate));
-        // If any date in the month is enabled count the month as enabled.
         for (let date = firstOfMonth; this.adapter.getMonth(date) === month; date = this.adapter.addCalendarDays(date, 1)) {
             if (this.dateFilter(date)) {
                 return true;
@@ -1342,14 +1167,14 @@ class CmatDatetimepickerYearViewComponent {
         return false;
     }
     _changeCalendarState(direction) {
-        this.calendarState = direction;
+        this.calendarState.set(direction);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatDatetimepickerYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmatDatetimepickerYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerYearViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+            args: [{ selector: 'cmat-datetimepicker-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { userSelection: [{
                 type: Output
             }], type: [{
@@ -1364,45 +1189,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 type: Input
             }] } });
 
-/**
- * A calendar that is used as part of the datepicker.
- */
 class CmatDatetimepickerCalendarComponent {
     constructor() {
         this.userSelection = new EventEmitter();
-        /** Active multi year view when click on year. */
         this.multiYearSelector = false;
-        /** Whether the calendar should be started in month or year view. */
         this.startView = 'month';
         this.twelvehour = false;
         this.timeInterval = 1;
-        /** Prevent user to select same date time */
         this.preventSameDateTimeSelection = false;
-        /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
-        /** Emits when the view has been changed. **/
         this.viewChanged = new EventEmitter();
         this.class = 'cmat-datetimepicker-calendar';
         this.label = 'ariaLabel';
         this.role = 'dialog';
         this.tabindex = 0;
         this.clockView = 'hour';
-        /** Whether the calendar is in month view. */
+        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.intlVersion = signal(0, ...(ngDevMode ? [{ debugName: "intlVersion" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
         this._intl = inject(CmatDatetimepickerIntl);
         this._adapter = inject(DatetimeAdapter, { optional: true });
         this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._type = 'date';
         this._timeInput = false;
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
-        /** Date filter for the month and year views. */
         this.dateFilterForViews = (date) => !!date &&
             (!this.dateFilter || this.dateFilter(date, CmatDatetimepickerFilterType.DATE)) &&
             (!this.minDate || this._adapter.compareDate(date, this.minDate) >= 0) &&
             (!this.maxDate || this._adapter.compareDate(date, this.maxDate) <= 0);
         const _intl = this._intl;
-        const changeDetectorRef = inject(ChangeDetectorRef);
         if (!this._adapter) {
             throw createMissingDateImplError('CDatetimeAdapter');
         }
@@ -1410,7 +1225,7 @@ class CmatDatetimepickerCalendarComponent {
             throw createMissingDateImplError('CMAT_DATETIME_FORMATS');
         }
         this._intlChanges = _intl.changes
-            .subscribe(() => changeDetectorRef.markForCheck());
+            .subscribe(() => this.intlVersion.update(value => value + 1));
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
     }
     get type() {
@@ -1422,7 +1237,6 @@ class CmatDatetimepickerCalendarComponent {
             this.multiYearSelector = true;
         }
     }
-    /** A date representing the period (month or year) to start the calendar in. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get startAt() {
         return this._startAt;
@@ -1430,11 +1244,6 @@ class CmatDatetimepickerCalendarComponent {
     set startAt(value) {
         this._startAt = this._adapter.getValidDateOrNull(value);
     }
-    /**
-     * Whether the calendar is in time mode. In time mode the calendar clock gets time input elements rather then just clock
-     *
-     * When touchUi is enabled this will be disabled
-     */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get timeInput() {
         return this._timeInput;
@@ -1442,7 +1251,6 @@ class CmatDatetimepickerCalendarComponent {
     set timeInput(value) {
         this._timeInput = coerceBooleanProperty(value);
     }
-    /** The currently selected date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get selected() {
         return this._selected;
@@ -1450,7 +1258,6 @@ class CmatDatetimepickerCalendarComponent {
     set selected(value) {
         this._selected = this._adapter.getValidDateOrNull(value);
     }
-    /** The minimum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get minDate() {
         return this._minDate;
@@ -1458,7 +1265,6 @@ class CmatDatetimepickerCalendarComponent {
     set minDate(value) {
         this._minDate = this._adapter.getValidDateOrNull(value);
     }
-    /** The maximum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get maxDate() {
         return this._maxDate;
@@ -1466,10 +1272,6 @@ class CmatDatetimepickerCalendarComponent {
     set maxDate(value) {
         this._maxDate = this._adapter.getValidDateOrNull(value);
     }
-    /**
-     * The current active date. This determines which time period is shown and which date is
-     * highlighted when using keyboard navigation.
-     */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get activeDate() {
         return this._clampedActiveDate;
@@ -1495,7 +1297,6 @@ class CmatDatetimepickerCalendarComponent {
         this._currentView = view;
         this.viewChanged.emit(view);
     }
-    /** The label for the current calendar view. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get yearButtonText() {
         return this._adapter.getYearName(this.activeDate);
@@ -1503,9 +1304,6 @@ class CmatDatetimepickerCalendarComponent {
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get yearPeriodText() {
         if (this.currentView === 'multi-year') {
-            // The offset from the active year to the "slot" for the starting year is the
-            // *actual* first rendered year in the multi-year view, and the last year is
-            // just yearsPerPage - 1 away.
             const activeYear = this._adapter.getYear(this.activeDate);
             const minYearOfPage = activeYear - getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate);
             const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
@@ -1622,7 +1420,6 @@ class CmatDatetimepickerCalendarComponent {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
         this._intlChanges.unsubscribe();
     }
-    /** Handles date selection in the month view. */
     dateSelected(date) {
         if (this.type === 'date') {
             if (!this._adapter.sameDate(date, this.selected) || !this.preventSameDateTimeSelection) {
@@ -1634,7 +1431,6 @@ class CmatDatetimepickerCalendarComponent {
             this.currentView = 'clock';
         }
     }
-    /** Handles month selection in the year view. */
     monthSelected(month) {
         if (this.type === 'month') {
             if (!this._adapter.sameMonthAndYear(month, this.selected) || !this.preventSameDateTimeSelection) {
@@ -1647,7 +1443,6 @@ class CmatDatetimepickerCalendarComponent {
             this.clockView = 'hour';
         }
     }
-    /** Handles year selection in the multi year view. */
     yearSelected(year) {
         if (this.type === 'year') {
             if ((this.selected && !this._adapter.sameYear(year, this.selected)) || !this.preventSameDateTimeSelection) {
@@ -1708,13 +1503,11 @@ class CmatDatetimepickerCalendarComponent {
             return;
         }
         this.AMPM = source;
-        // if AMPM changed from PM to AM substract 12 hours
         const currentHour = this._adapter.getHour(this.activeDate);
         let newHourValue;
         if (this.AMPM === 'AM') {
             newHourValue = currentHour >= 12 ? this._adapter.getHour(this.activeDate) - 12 : 12;
         }
-        // otherwise add 12 hours
         else {
             newHourValue = (currentHour + 12) % 24;
         }
@@ -1740,26 +1533,22 @@ class CmatDatetimepickerCalendarComponent {
         this.currentView = 'clock';
         this.clockView = 'minute';
     }
-    /** Handles user clicks on the previous button. */
     previousClicked() {
         this.activeDate = this.currentView === 'month' ?
             this._adapter.addCalendarMonths(this.activeDate, -1) :
             this._adapter.addCalendarYears(this.activeDate, this.currentView === 'year' ? -1 : -yearsPerPage);
     }
-    /** Handles user clicks on the next button. */
     nextClicked() {
         this.activeDate = this.currentView === 'month' ?
             this._adapter.addCalendarMonths(this.activeDate, 1) :
             this._adapter.addCalendarYears(this.activeDate, this.currentView === 'year' ? 1 : yearsPerPage);
     }
-    /** Whether the previous period button is enabled. */
     previousEnabled() {
         if (!this.minDate) {
             return true;
         }
         return !this.minDate || !this._isSameView(this.activeDate, this.minDate);
     }
-    /** Whether the next period button is enabled. */
     nextEnabled() {
         return !this.maxDate || !this._isSameView(this.activeDate, this.maxDate);
     }
@@ -1768,11 +1557,9 @@ class CmatDatetimepickerCalendarComponent {
     }
     calendarStateDone(event) {
         if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
-            this.calendarState = '';
-            this._changeDetectorRef.markForCheck();
+            this.calendarState.set('');
         }
     }
-    /** Whether the two dates represent the same view in the current view mode (month or year). */
     _isSameView(date1, date2) {
         if (this.currentView === 'month') {
             return this._adapter.getYear(date1) === this._adapter.getYear(date2) &&
@@ -1781,10 +1568,8 @@ class CmatDatetimepickerCalendarComponent {
         if (this.currentView === 'year') {
             return this._adapter.getYear(date1) === this._adapter.getYear(date2);
         }
-        // Otherwise we are in 'multi-year' view.
         return isSameMultiYearView(this._adapter, date1, date2, this.minDate, this.maxDate);
     }
-    /** Handles keydown events on the calendar body when calendar is in month view. */
     _handleCalendarBodyKeydownInMonthView(event) {
         switch (event.code) {
             case 'ArrowLeft':
@@ -1819,18 +1604,14 @@ class CmatDatetimepickerCalendarComponent {
             case 'Enter':
                 if (this.dateFilterForViews(this.activeDate)) {
                     this.dateSelected(this.activeDate);
-                    // Prevent unexpected default actions such as form submission.
                     event.preventDefault();
                 }
                 return;
             default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
                 return;
         }
-        // Prevent unexpected default actions such as form submission.
         event.preventDefault();
     }
-    /** Handles keydown events on the calendar body when calendar is in year view. */
     _handleCalendarBodyKeydownInYearView(event) {
         switch (event.code) {
             case 'ArrowLeft':
@@ -1863,13 +1644,10 @@ class CmatDatetimepickerCalendarComponent {
                 this.monthSelected(this.activeDate);
                 break;
             default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
                 return;
         }
-        // Prevent unexpected default actions such as form submission.
         event.preventDefault();
     }
-    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
     _handleCalendarBodyKeydownInMultiYearView(event) {
         switch (event.code) {
             case 'ArrowLeft':
@@ -1902,25 +1680,21 @@ class CmatDatetimepickerCalendarComponent {
                 this.yearSelected(this.activeDate);
                 break;
             default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
                 return;
         }
     }
-    /** Handles keydown events on the calendar body when calendar is in month view. */
     _handleCalendarBodyKeydownInClockView(event) {
         switch (event.code) {
             case 'ArrowUp':
                 this.activeDate = this.clockView === 'hour' ?
                     this._adapter.addCalendarHours(this.activeDate, 1) :
                     this._adapter.addCalendarMinutes(this.activeDate, this.timeInterval);
-                // if the hours changed the am/pm we should update the AM/PM
                 this.selectAMPM(this.activeDate);
                 break;
             case 'ArrowDown':
                 this.activeDate = this.clockView === 'hour' ?
                     this._adapter.addCalendarHours(this.activeDate, -1) :
                     this._adapter.addCalendarMinutes(this.activeDate, -this.timeInterval);
-                // if the hours changed the am/pm we should update the AM/PM
                 this.selectAMPM(this.activeDate);
                 break;
             case 'Enter':
@@ -1929,50 +1703,36 @@ class CmatDatetimepickerCalendarComponent {
                 }
                 return;
             default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
                 return;
         }
-        // Prevent unexpected default actions such as form submission.
         event.preventDefault();
     }
-    /**
-     * Determine the date for the month that comes before the given month in the same column in the
-     * calendar table.
-     */
     _prevMonthInSameCol(date) {
-        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-        // of each year.
         const increment = this._adapter.getMonth(date) <= 4 ? -5 :
             (this._adapter.getMonth(date) >= 7 ? -7 : -12);
         return this._adapter.addCalendarMonths(date, increment);
     }
-    /**
-     * Determine the date for the month that comes after the given month in the same column in the
-     * calendar table.
-     */
     _nextMonthInSameCol(date) {
-        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-        // of each year.
         const increment = this._adapter.getMonth(date) <= 4 ? 7 :
             (this._adapter.getMonth(date) >= 7 ? 5 : 12);
         return this._adapter.addCalendarMonths(date, increment);
     }
     _changeCalendarState(direction) {
-        this.calendarState = direction;
+        this.calendarState.set(direction);
     }
     _2digit(n) {
         return ('00' + n).slice(-2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatDatetimepickerCalendarComponent, isStandalone: true, selector: "cmat-datetimepicker-calendar", inputs: { multiYearSelector: "multiYearSelector", startView: "startView", twelvehour: "twelvehour", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", timeInput: "timeInput", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", viewChanged: "viewChanged" }, host: { listeners: { "keydown": "handleCalendarBodyKeydown($event)" }, properties: { "class.cmat-datetimepicker-calendar-with-time-input": "timeInput", "class": "this.class", "attr.aria-label": "this.label", "role": "this.role", "tabindex": "this.tabindex" } }, exportAs: ["cmatDatetimepickerCalendar"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-calendar-header\">\r\n  @if (type !== 'time') {\r\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\">\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector || type === 'year') {\r\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\">\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  }\r\n  @if (type !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type !== 'time') {\r\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\r\n    }\r\n    @if (type.endsWith('time')) {\r\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\r\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\r\n          {{ hoursButtonText }}</div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\r\n          minutesButtonText }}</div>\r\n      </span>\r\n      @if (twelvehour) {\r\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"AM\"\r\n          [class.active]=\"AMPM === 'AM'\" (click)=\"ampmClicked('AM')\">AM</div>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"PM\"\r\n          [class.active]=\"AMPM === 'PM'\" (click)=\"ampmClicked('PM')\">PM</div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\r\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button matIconButton type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n        </svg>\r\n      </button>\r\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\">\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button type=\"button\" matIconButton class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  @switch (currentView) {\r\n  @case ('month') {\r\n  <cmat-datetimepicker-month-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\">\r\n  </cmat-datetimepicker-month-view>\r\n  }\r\n  @case ('year') {\r\n  <cmat-datetimepicker-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\">\r\n  </cmat-datetimepicker-year-view>\r\n  }\r\n  @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\" (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\">\r\n  </cmat-datetimepicker-multi-year-view>\r\n  }\r\n  @default {\r\n  @if (timeInput) {\r\n  <cmat-datetimepicker-time [AMPM]=\"AMPM\" [clockView]=\"clockView\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\"\r\n    [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\"\r\n    (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\" (ampmChange)=\"ampmClicked($event)\" (clockViewChange)=\"clockView = $event\">\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\r\n    [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\" (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"dialTimeSelected($event)\">\r\n  </cmat-datetimepicker-clock>\r\n  }\r\n  }\r\n  }\r\n</div>", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerMonthViewComponent, selector: "cmat-datetimepicker-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMonthView"] }, { kind: "component", type: CmatDatetimepickerYearViewComponent, selector: "cmat-datetimepicker-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerYearView"] }, { kind: "component", type: CmatDatetimepickerMultiYearViewComponent, selector: "cmat-datetimepicker-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMultiYearView"] }, { kind: "component", type: CmatDatetimepickerTimeComponent, selector: "cmat-datetimepicker-time", inputs: ["dateFilter", "interval", "AMPM", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "userSelection", "ampmChange", "clockViewChange"], exportAs: ["cmatDatetimepickerTime"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatDatetimepickerCalendarComponent, isStandalone: true, selector: "cmat-datetimepicker-calendar", inputs: { multiYearSelector: "multiYearSelector", startView: "startView", twelvehour: "twelvehour", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", timeInput: "timeInput", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", viewChanged: "viewChanged" }, host: { listeners: { "keydown": "handleCalendarBodyKeydown($event)" }, properties: { "class.cmat-datetimepicker-calendar-with-time-input": "timeInput", "class": "this.class", "attr.aria-label": "this.label", "role": "this.role", "tabindex": "this.tabindex" } }, exportAs: ["cmatDatetimepickerCalendar"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-calendar-header\" [attr.data-refresh]=\"intlVersion()\">\r\n  @if (type !== 'time') {\r\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\">\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector || type === 'year') {\r\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\">\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  }\r\n  @if (type !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type !== 'time') {\r\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\r\n    }\r\n    @if (type.endsWith('time')) {\r\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\r\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\r\n          {{ hoursButtonText }}</div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\r\n          minutesButtonText }}</div>\r\n      </span>\r\n      @if (twelvehour) {\r\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"AM\"\r\n          [class.active]=\"AMPM === 'AM'\" (click)=\"ampmClicked('AM')\">AM</div>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"PM\"\r\n          [class.active]=\"AMPM === 'PM'\" (click)=\"ampmClicked('PM')\">PM</div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\r\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button matIconButton type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n        </svg>\r\n      </button>\r\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\">\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button type=\"button\" matIconButton class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  @switch (currentView) {\r\n  @case ('month') {\r\n  <cmat-datetimepicker-month-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\">\r\n  </cmat-datetimepicker-month-view>\r\n  }\r\n  @case ('year') {\r\n  <cmat-datetimepicker-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\">\r\n  </cmat-datetimepicker-year-view>\r\n  }\r\n  @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\" (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\">\r\n  </cmat-datetimepicker-multi-year-view>\r\n  }\r\n  @default {\r\n  @if (timeInput) {\r\n  <cmat-datetimepicker-time [AMPM]=\"AMPM\" [clockView]=\"clockView\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\"\r\n    [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\"\r\n    (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\" (ampmChange)=\"ampmClicked($event)\" (clockViewChange)=\"clockView = $event\">\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\r\n    [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\" (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"dialTimeSelected($event)\">\r\n  </cmat-datetimepicker-clock>\r\n  }\r\n  }\r\n  }\r\n</div>\r\n", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerMonthViewComponent, selector: "cmat-datetimepicker-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMonthView"] }, { kind: "component", type: CmatDatetimepickerYearViewComponent, selector: "cmat-datetimepicker-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerYearView"] }, { kind: "component", type: CmatDatetimepickerMultiYearViewComponent, selector: "cmat-datetimepicker-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMultiYearView"] }, { kind: "component", type: CmatDatetimepickerTimeComponent, selector: "cmat-datetimepicker-time", inputs: ["dateFilter", "interval", "AMPM", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "userSelection", "ampmChange", "clockViewChange"], exportAs: ["cmatDatetimepickerTime"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-calendar', host: {
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class.cmat-datetimepicker-calendar-with-time-input]': 'timeInput',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendar', imports: [MatButtonModule, CmatDatetimepickerMonthViewComponent, CmatDatetimepickerYearViewComponent,
-                        CmatDatetimepickerMultiYearViewComponent, CmatDatetimepickerTimeComponent, CmatDatetimepickerClockComponent, NgClass], template: "<div class=\"cmat-datetimepicker-calendar-header\">\r\n  @if (type !== 'time') {\r\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\">\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector || type === 'year') {\r\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\">\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  }\r\n  @if (type !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type !== 'time') {\r\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\r\n    }\r\n    @if (type.endsWith('time')) {\r\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\r\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\r\n          {{ hoursButtonText }}</div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\r\n          minutesButtonText }}</div>\r\n      </span>\r\n      @if (twelvehour) {\r\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"AM\"\r\n          [class.active]=\"AMPM === 'AM'\" (click)=\"ampmClicked('AM')\">AM</div>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"PM\"\r\n          [class.active]=\"AMPM === 'PM'\" (click)=\"ampmClicked('PM')\">PM</div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\r\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button matIconButton type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n        </svg>\r\n      </button>\r\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState==='left',\r\n        'right': calendarState==='right'\r\n        }\">\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button type=\"button\" matIconButton class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  @switch (currentView) {\r\n  @case ('month') {\r\n  <cmat-datetimepicker-month-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\">\r\n  </cmat-datetimepicker-month-view>\r\n  }\r\n  @case ('year') {\r\n  <cmat-datetimepicker-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\">\r\n  </cmat-datetimepicker-year-view>\r\n  }\r\n  @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\" (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\">\r\n  </cmat-datetimepicker-multi-year-view>\r\n  }\r\n  @default {\r\n  @if (timeInput) {\r\n  <cmat-datetimepicker-time [AMPM]=\"AMPM\" [clockView]=\"clockView\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\"\r\n    [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\"\r\n    (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\" (ampmChange)=\"ampmClicked($event)\" (clockViewChange)=\"clockView = $event\">\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\r\n    [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\" (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"dialTimeSelected($event)\">\r\n  </cmat-datetimepicker-clock>\r\n  }\r\n  }\r\n  }\r\n</div>", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+                        CmatDatetimepickerMultiYearViewComponent, CmatDatetimepickerTimeComponent, CmatDatetimepickerClockComponent, NgClass], template: "<div class=\"cmat-datetimepicker-calendar-header\" [attr.data-refresh]=\"intlVersion()\">\r\n  @if (type !== 'time') {\r\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\">\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector || type === 'year') {\r\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\">\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  }\r\n  @if (type !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type !== 'time') {\r\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\r\n    }\r\n    @if (type.endsWith('time')) {\r\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\r\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\r\n          {{ hoursButtonText }}</div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\r\n          minutesButtonText }}</div>\r\n      </span>\r\n      @if (twelvehour) {\r\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"AM\"\r\n          [class.active]=\"AMPM === 'AM'\" (click)=\"ampmClicked('AM')\">AM</div>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"PM\"\r\n          [class.active]=\"AMPM === 'PM'\" (click)=\"ampmClicked('PM')\">PM</div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\r\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button matIconButton type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n        </svg>\r\n      </button>\r\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\">\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button type=\"button\" matIconButton class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  @switch (currentView) {\r\n  @case ('month') {\r\n  <cmat-datetimepicker-month-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\">\r\n  </cmat-datetimepicker-month-view>\r\n  }\r\n  @case ('year') {\r\n  <cmat-datetimepicker-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\">\r\n  </cmat-datetimepicker-year-view>\r\n  }\r\n  @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\" (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\">\r\n  </cmat-datetimepicker-multi-year-view>\r\n  }\r\n  @default {\r\n  @if (timeInput) {\r\n  <cmat-datetimepicker-time [AMPM]=\"AMPM\" [clockView]=\"clockView\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\"\r\n    [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\"\r\n    (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\" (ampmChange)=\"ampmClicked($event)\" (clockViewChange)=\"clockView = $event\">\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\r\n    [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\" (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"dialTimeSelected($event)\">\r\n  </cmat-datetimepicker-clock>\r\n  }\r\n  }\r\n  }\r\n</div>\r\n", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { userSelection: [{
                 type: Output
             }], multiYearSelector: [{
@@ -2020,9 +1780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-/** Used to generate a unique ID for each datepicker instance. */
 let datetimepickerUid = 0;
-/** Injection token that determines the scroll handling while the calendar is open. */
 const CMAT_DATETIMEPICKER_SCROLL_STRATEGY = new InjectionToken('cmat-datetimepicker-scroll-strategy');
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
@@ -2035,16 +1793,14 @@ const CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
 };
 class CmatDatetimepickerContentComponent {
     constructor() {
-        /** Emits when an animation has finished. */
+        this.animationState = signal('enter-dropdown', ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
         this.animationDone = new Subject();
-        /** Id of the label for the `role="dialog"` element. */
         this.dialogLabelId = null;
         this._elementRef = inject(ElementRef);
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._animationEndListener = null;
     }
     ngOnInit() {
-        this.animationState = this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';
+        this.animationState.set(this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown');
         this._animationEndListener = (event) => {
             if (event.animationName === 'panel-dropdown-enter' || event.animationName === 'panel-dialog-enter' || event.animationName === 'panel-leave') {
                 this.animationDone.next();
@@ -2056,28 +1812,27 @@ class CmatDatetimepickerContentComponent {
         this._calendar.focusActiveCell();
     }
     startExitAnimation() {
-        this.animationState = 'leave';
-        this._changeDetectorRef.markForCheck();
+        this.animationState.set('leave');
     }
     ngOnDestroy() {
         this.animationDone.complete();
         this._elementRef.nativeElement.removeEventListener('animationend', this._animationEndListener);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatDatetimepickerContentComponent, isStandalone: true, selector: "cmat-datetimepicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.enter-dropdown": "animationState === \"enter-dropdown\"", "class.enter-dialog": "animationState === \"enter-dialog\"", "class.leave": "animationState === \"leave\"", "class.cmat-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode" }, classAttribute: "cmat-datetimepicker-content cmat-datetimepicker-transform-panel" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: CmatDatetimepickerCalendarComponent, descendants: true, static: true }], exportAs: ["cmatDatetimepickerContent"], ngImport: i0, template: "<div cdkTrapFocus role=\"dialog\" class=\"cmat-datetimepicker-content-container\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"dialogLabelId ?? undefined\" [attr.mode]=\"datetimepicker.mode\">\r\n    <cmat-datetimepicker-calendar [id]=\"datetimepicker.id\"\r\n        [ngClass]=\"datetimepicker.panelClass\" [attr.mode]=\"datetimepicker.mode\" [type]=\"datetimepicker.type\"\r\n        [startAt]=\"datetimepicker.startAt\" [startView]=\"datetimepicker.startView\" [maxDate]=\"datetimepicker.maxDate\"\r\n        [minDate]=\"datetimepicker.minDate\" [dateFilter]=\"datetimepicker.dateFilter\"\r\n        [multiYearSelector]=\"datetimepicker.multiYearSelector\"\r\n        [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\r\n        [timeInterval]=\"datetimepicker.timeInterval\" [twelvehour]=\"datetimepicker.twelvehour\"\r\n        [selected]=\"datetimepicker.selected\" [timeInput]=\"datetimepicker.timeInput\"\r\n        (selectedChange)=\"datetimepicker.select($event)\" (viewChanged)=\"datetimepicker.viewChange($event)\"\r\n        (userSelection)=\"datetimepicker.close()\">\r\n    </cmat-datetimepicker-calendar>\r\n</div>", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CmatDatetimepickerCalendarComponent, selector: "cmat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "type", "startAt", "timeInput", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange", "viewChanged"], exportAs: ["cmatDatetimepickerCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmatDatetimepickerContentComponent, isStandalone: true, selector: "cmat-datetimepicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.enter-dropdown": "animationState() === \"enter-dropdown\"", "class.enter-dialog": "animationState() === \"enter-dialog\"", "class.leave": "animationState() === \"leave\"", "class.cmat-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode" }, classAttribute: "cmat-datetimepicker-content cmat-datetimepicker-transform-panel" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: CmatDatetimepickerCalendarComponent, descendants: true, static: true }], exportAs: ["cmatDatetimepickerContent"], ngImport: i0, template: "<div cdkTrapFocus role=\"dialog\" class=\"cmat-datetimepicker-content-container\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"dialogLabelId ?? undefined\" [attr.mode]=\"datetimepicker.mode\">\r\n    <cmat-datetimepicker-calendar [id]=\"datetimepicker.id\"\r\n        [ngClass]=\"datetimepicker.panelClass\" [attr.mode]=\"datetimepicker.mode\" [type]=\"datetimepicker.type\"\r\n        [startAt]=\"datetimepicker.startAt\" [startView]=\"datetimepicker.startView\" [maxDate]=\"datetimepicker.maxDate\"\r\n        [minDate]=\"datetimepicker.minDate\" [dateFilter]=\"datetimepicker.dateFilter\"\r\n        [multiYearSelector]=\"datetimepicker.multiYearSelector\"\r\n        [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\r\n        [timeInterval]=\"datetimepicker.timeInterval\" [twelvehour]=\"datetimepicker.twelvehour\"\r\n        [selected]=\"datetimepicker.selected\" [timeInput]=\"datetimepicker.timeInput\"\r\n        (selectedChange)=\"datetimepicker.select($event)\" (viewChanged)=\"datetimepicker.viewChange($event)\"\r\n        (userSelection)=\"datetimepicker.close()\">\r\n    </cmat-datetimepicker-calendar>\r\n</div>", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CmatDatetimepickerCalendarComponent, selector: "cmat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "type", "startAt", "timeInput", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange", "viewChanged"], exportAs: ["cmatDatetimepickerCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-content', host: {
                         'class': 'cmat-datetimepicker-content cmat-datetimepicker-transform-panel',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class]': 'color ? "mat-" + color : ""',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[class.enter-dropdown]': 'animationState === "enter-dropdown"',
+                        '[class.enter-dropdown]': 'animationState() === "enter-dropdown"',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[class.enter-dialog]': 'animationState === "enter-dialog"',
+                        '[class.enter-dialog]': 'animationState() === "enter-dialog"',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[class.leave]': 'animationState === "leave"',
+                        '[class.leave]': 'animationState() === "leave"',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class.cmat-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -2091,27 +1846,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }] } });
 class CmatDatetimepickerComponent {
     constructor() {
-        /** The view that the calendar should start in. */
         this.startView = 'month';
         this.mode = 'auto';
         this.timeInterval = 1;
-        /** Prevent user to select same date time */
         this.preventSameDateTimeSelection = false;
-        /** Preferred position of the datetimepicker in the X axis. */
         this.xPosition = 'start';
-        /** Preferred position of the datetimepicker in the Y axis. */
         this.yPosition = 'below';
         this.selectedChanged = new EventEmitter();
-        /** Emits when the datepicker has been opened. */
         this.openedStream = new EventEmitter();
-        /** Emits when the datepicker has been closed. */
         this.closedStream = new EventEmitter();
-        /** Emits when the view has been changed. **/
         this.viewChanged = new EventEmitter();
-        /** Whether the calendar is open. */
-        /** The id for the datepicker calendar. */
         this.id = `cmat-datetimepicker-${datetimepickerUid++}`;
-        /** Emits when the datepicker is disabled. */
         this.disabledChange = new Subject();
         this._overlay = inject(Overlay);
         this._injector = inject(Injector);
@@ -2121,9 +1866,7 @@ class CmatDatetimepickerComponent {
         this._dir = inject(Directionality, { optional: true });
         this._document = inject(DOCUMENT, { optional: true });
         this._validSelected = null;
-        /** The element that was focused before the datetimepicker was opened. */
         this._focusedElementBeforeOpen = null;
-        /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
         this._backdropHarnessClass = `${this.id}-backdrop`;
         this._inputStateChanges = Subscription.EMPTY;
         this._multiYearSelector = false;
@@ -2137,14 +1880,12 @@ class CmatDatetimepickerComponent {
             throw createMissingDateImplError('DatetimeAdapter');
         }
     }
-    /** Whether to show multi-year view. */
     get multiYearSelector() {
         return this._multiYearSelector;
     }
     set multiYearSelector(value) {
         this._multiYearSelector = coerceBooleanProperty(value);
     }
-    /** Whether the clock uses 12 hour format. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get twelvehour() {
         return this._twelvehour;
@@ -2152,10 +1893,6 @@ class CmatDatetimepickerComponent {
     set twelvehour(value) {
         this._twelvehour = coerceBooleanProperty(value);
     }
-    /**
-     * Classes to be passed to the date picker panel.
-     * Supports string and string array values, similar to `ngClass`.
-     */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get panelClass() {
         return this._panelClass;
@@ -2163,7 +1900,6 @@ class CmatDatetimepickerComponent {
     set panelClass(value) {
         this._panelClass = coerceStringArray(value);
     }
-    /** Whether the calendar is open. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get opened() {
         return this._opened;
@@ -2171,7 +1907,6 @@ class CmatDatetimepickerComponent {
     set opened(value) {
         coerceBooleanProperty(value) ? this.open() : this.close();
     }
-    /** Color palette to use on the datetimepicker's calendar. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get color() {
         return (this._color ??
@@ -2180,11 +1915,8 @@ class CmatDatetimepickerComponent {
     set color(value) {
         this._color = value;
     }
-    /** The date to open the calendar to initially. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get startAt() {
-        // If an explicit startAt is set we start there, otherwise we start at whatever the currently
-        // selected value is.
         return this._startAt ?? (this.datetimepickerInput ? this.datetimepickerInput.value : null);
     }
     set startAt(date) {
@@ -2197,10 +1929,6 @@ class CmatDatetimepickerComponent {
     set type(value) {
         this._type = value || 'datetime';
     }
-    /**
-     * Whether the calendar is in time mode. In time mode the calendar clock gets time input
-     * elements rather then just clock. When `touchUi` is enabled this will be disabled.
-     */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get timeInput() {
         return this._timeInput && !this.touchUi;
@@ -2208,10 +1936,6 @@ class CmatDatetimepickerComponent {
     set timeInput(value) {
         this._timeInput = coerceBooleanProperty(value);
     }
-    /**
-     * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
-     * than a popup and elements have more padding to allow for bigger touch targets.
-     */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get touchUi() {
         return this._touchUi;
@@ -2219,7 +1943,6 @@ class CmatDatetimepickerComponent {
     set touchUi(value) {
         this._touchUi = coerceBooleanProperty(value);
     }
-    /** Whether the datepicker pop-up should be disabled. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get disabled() {
         return this._disabled === undefined && this.datetimepickerInput ?
@@ -2232,11 +1955,6 @@ class CmatDatetimepickerComponent {
             this.disabledChange.next(newValue);
         }
     }
-    /**
-     * Whether to restore focus to the previously-focused element when the panel is closed.
-     * Note that automatic focus restoration is an accessibility feature and it is recommended that
-     * you provide your own equivalent, if you decide to turn it off.
-     */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get restoreFocus() {
         return this._restoreFocus;
@@ -2244,7 +1962,6 @@ class CmatDatetimepickerComponent {
     set restoreFocus(value) {
         this._restoreFocus = coerceBooleanProperty(value);
     }
-    /** The currently selected date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get selected() {
         return this._validSelected;
@@ -2252,12 +1969,10 @@ class CmatDatetimepickerComponent {
     set selected(value) {
         this._validSelected = value;
     }
-    /** The minimum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get minDate() {
         return this.datetimepickerInput?.min;
     }
-    /** The maximum selectable date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get maxDate() {
         return this.datetimepickerInput?.max;
@@ -2272,11 +1987,6 @@ class CmatDatetimepickerComponent {
         this._inputStateChanges.unsubscribe();
         this.disabledChange.complete();
     }
-    /**
-     * Register an input with this datepicker.
-     *
-     * @param input The datepicker input to register with this datepicker.
-     */
     registerInput(input) {
         if (this.datetimepickerInput) {
             throw Error('A MatDatepicker can only be associated with a single input.');
@@ -2285,7 +1995,6 @@ class CmatDatetimepickerComponent {
         this._inputStateChanges =
             this.datetimepickerInput.valueChange.subscribe((value) => this.selected = value);
     }
-    /** Open the calendar. */
     open() {
         if (this.opened || this.disabled) {
             return;
@@ -2298,7 +2007,6 @@ class CmatDatetimepickerComponent {
         this._opened = true;
         this.openedStream.emit();
     }
-    /** Close the calendar. */
     close() {
         if (!this._opened) {
             return;
@@ -2307,8 +2015,6 @@ class CmatDatetimepickerComponent {
             this._focusedElementBeforeOpen &&
             typeof this._focusedElementBeforeOpen.focus === 'function';
         const completeClose = () => {
-            // The `_opened` could've been reset already if
-            // we got two events in quick succession.
             if (this._opened) {
                 this._opened = false;
                 this.closedStream.emit();
@@ -2319,8 +2025,6 @@ class CmatDatetimepickerComponent {
             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
-                // the user didn't move focus themselves inside the `close` handler.
                 if (canRestoreFocus &&
                     (!activeElement ||
                         activeElement === this._document.activeElement ||
@@ -2332,18 +2036,12 @@ class CmatDatetimepickerComponent {
             });
         }
         if (canRestoreFocus) {
-            // Because IE moves focus asynchronously, we can't count on it being restored before we've
-            // marked the datepicker as closed. If the event fires out of sequence and the element that
-            // we're refocusing opens the datepicker on focus, the user could be stuck with not being
-            // able to close the calendar at all. We work around it by making the logic, that marks
-            // the datepicker as closed, async as well.
             setTimeout(completeClose);
         }
         else {
             completeClose();
         }
     }
-    /** Selects the given date */
     select(date) {
         const oldValue = this.selected;
         this.selected = date;
@@ -2354,16 +2052,11 @@ class CmatDatetimepickerComponent {
     viewChange(type) {
         this.viewChanged.emit(type);
     }
-    /**
-     *  relevant values from the datetimepicker to the
-     * datetimepicker content inside the overlay.
-     */
     _forwardContentValues(instance) {
         instance.datetimepicker = this;
         instance.color = this.color;
         instance.dialogLabelId = this.datetimepickerInput.getOverlayLabelId();
     }
-    /** Opens the overlay with the calendar. */
     _openOverlay() {
         this._destroyOverlay();
         const isDialog = this.touchUi;
@@ -2396,25 +2089,21 @@ class CmatDatetimepickerComponent {
         });
         this._componentRef = overlayRef.attach(portal);
         this._forwardContentValues(this._componentRef.instance);
-        // Update the position once the calendar has rendered. Only relevant in dropdown mode.
         if (!isDialog) {
             afterNextRender(() => {
                 overlayRef.updatePosition();
             }, { injector: this._injector });
         }
     }
-    /** Destroys the current overlay. */
     _destroyOverlay() {
         if (this._overlayRef) {
             this._overlayRef.dispose();
             this._overlayRef = this._componentRef = null;
         }
     }
-    /** Gets a position strategy that will open the calendar as a dropdown. */
     _getDialogStrategy() {
         return this._overlay.position().global().centerHorizontally().centerVertically();
     }
-    /** Gets a position strategy that will open the calendar as a dropdown. */
     _getDropdownStrategy() {
         const strategy = this._overlay
             .position()
@@ -2425,9 +2114,6 @@ class CmatDatetimepickerComponent {
             .withLockedPosition();
         return this._setConnectedPositions(strategy);
     }
-    /**
-     * Sets the positions of the datetimepicker in dropdown mode based on the current configuration.
-     */
     _setConnectedPositions(strategy) {
         const primaryX = this.xPosition === 'end' ? 'end' : 'start';
         const secondaryX = primaryX === 'start' ? 'end' : 'start';
@@ -2460,19 +2146,16 @@ class CmatDatetimepickerComponent {
             },
         ]);
     }
-    /** Gets an observable that will emit when the overlay is supposed to be closed. */
     _getCloseStream(overlayRef) {
-        return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter(event => 
-        // Closing on alt + up is only valid when there's an input associated with the datetimepicker.
-        ((event.code === 'Escape' && !hasModifierKey(event)) ||
+        return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter(event => ((event.code === 'Escape' && !hasModifierKey(event)) ||
             (this.datetimepickerInput &&
                 hasModifierKey(event, 'altKey') &&
                 event.code === 'ArrowUp')))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmatDatetimepickerComponent, isStandalone: true, selector: "cmat-datetimepicker", inputs: { startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: "preventSameDateTimeSelection", xPosition: "xPosition", yPosition: "yPosition", multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", panelClass: "panelClass", opened: "opened", color: "color", startAt: "startAt", type: "type", timeInput: "timeInput", touchUi: "touchUi", disabled: "disabled", restoreFocus: "restoreFocus" }, outputs: { selectedChanged: "selectedChanged", openedStream: "openedStream", closedStream: "closedStream", viewChanged: "viewChanged" }, exportAs: ["cmatDatetimepicker"], ngImport: i0, template: '', isInline: true, styles: [".cmat-datetimepicker-calendar-header,.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected).cmat-datetimepicker-calendar-body-today{border-color:var(--cmat-text-hint)}.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected),.cmat-datetimepicker-calendar-body-active>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){background-color:rgba(var(--cmat-primary-rgb),.3)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){color:var(--cmat-text-disabled)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected){border-color:rgba(var(--cmat-text-disabled),.8)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-selected{background-color:rgba(var(--cmat-primary-rgb),.4)}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-clock-wrapper{background-color:var(--cmat-divider)}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{color:#fff!important}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input{background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{background-color:rgba(var(--cmat-primary-rgb),.2)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus{border-color:var(--cmat-primary);background-color:var(--cmat-divider)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus::placeholder{color:rgba(var(--cmat-primary-rgb),.6)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-warning{border-color:var(--cmat-warn)}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{color:var(--cmat-text-hint);border-color:var(--cmat-text-hint)}.cmat-datetimepicker-time-am.mat-mdc-button.cmat-datetimepicker-time-ampm-active,.cmat-datetimepicker-time-pm.mat-mdc-button.cmat-datetimepicker-time-ampm-active{background-color:rgba(var(--cmat-accent-rgb),.2)}.cmat-datetimepicker-content{display:block;border-radius:4px;overflow:hidden}.cmat-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.cmat-datetimepicker-content .cmat-calendar{width:296px;height:424px}.cmat-datetimepicker-content .cmat-calendar.cmat-datetimepicker-calendar-with-time-input{height:490px}.cmat-datetimepicker-content-touch{display:block;position:relative;overflow:visible}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.cmat-datetimepicker-content-touch .cmat-datetimepicker-calendar{width:100%;height:auto}@media all and (orientation:landscape){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:120vh;height:100%;min-height:80vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}}@media all and (orientation:portrait){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container-with-actions{height:135vw}}.cmat-datetimepicker-transform-panel.enter-dropdown{animation:panel-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.enter-dialog{animation:panel-dialog-enter .15s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.leave{animation:panel-leave .1s linear}@keyframes panel-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panel-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panel-leave{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmatDatetimepickerComponent, isStandalone: true, selector: "cmat-datetimepicker", inputs: { startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: "preventSameDateTimeSelection", xPosition: "xPosition", yPosition: "yPosition", multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", panelClass: "panelClass", opened: "opened", color: "color", startAt: "startAt", type: "type", timeInput: "timeInput", touchUi: "touchUi", disabled: "disabled", restoreFocus: "restoreFocus" }, outputs: { selectedChanged: "selectedChanged", openedStream: "openedStream", closedStream: "closedStream", viewChanged: "viewChanged" }, exportAs: ["cmatDatetimepicker"], ngImport: i0, template: '', isInline: true, styles: [".cmat-datetimepicker-calendar-header,.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected).cmat-datetimepicker-calendar-body-today{border-color:var(--cmat-text-hint)}.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected),.cmat-datetimepicker-calendar-body-active>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){background-color:rgba(var(--cmat-primary-rgb),.3)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){color:var(--cmat-text-disabled)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected){border-color:rgba(var(--cmat-text-disabled),.8)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-selected{background-color:rgba(var(--cmat-primary-rgb),.4)}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-clock-wrapper{background-color:var(--cmat-divider)}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{color:#fff!important}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input{background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{background-color:rgba(var(--cmat-primary-rgb),.2)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus{border-color:var(--cmat-primary);background-color:var(--cmat-divider)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus::placeholder{color:rgba(var(--cmat-primary-rgb),.6)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-warning{border-color:var(--cmat-warn)}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{color:var(--cmat-text-hint);border-color:var(--cmat-text-hint)}.cmat-datetimepicker-time-am.mat-mdc-button.cmat-datetimepicker-time-ampm-active,.cmat-datetimepicker-time-pm.mat-mdc-button.cmat-datetimepicker-time-ampm-active{background-color:rgba(var(--cmat-accent-rgb),.2)}.cmat-datetimepicker-content{display:block;border-radius:4px;overflow:hidden}.cmat-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.cmat-datetimepicker-content .cmat-calendar{width:296px;height:424px}.cmat-datetimepicker-content .cmat-calendar.cmat-datetimepicker-calendar-with-time-input{height:490px}.cmat-datetimepicker-content-touch{display:block;position:relative;overflow:visible}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.cmat-datetimepicker-content-touch .cmat-datetimepicker-calendar{width:100%;height:auto}@media all and (orientation:landscape){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:120vh;height:100%;min-height:80vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}}@media all and (orientation:portrait){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container-with-actions{height:135vw}}.cmat-datetimepicker-transform-panel.enter-dropdown{animation:panel-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.enter-dialog{animation:panel-dialog-enter .15s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.leave{animation:panel-leave .1s linear}@keyframes panel-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panel-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panel-leave{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker', exportAs: 'cmatDatetimepicker', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, styles: [".cmat-datetimepicker-calendar-header,.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected).cmat-datetimepicker-calendar-body-today{border-color:var(--cmat-text-hint)}.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected),.cmat-datetimepicker-calendar-body-active>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){background-color:rgba(var(--cmat-primary-rgb),.3)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){color:var(--cmat-text-disabled)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected){border-color:rgba(var(--cmat-text-disabled),.8)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-selected{background-color:rgba(var(--cmat-primary-rgb),.4)}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-clock-wrapper{background-color:var(--cmat-divider)}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{color:#fff!important}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input{background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{background-color:rgba(var(--cmat-primary-rgb),.2)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus{border-color:var(--cmat-primary);background-color:var(--cmat-divider)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus::placeholder{color:rgba(var(--cmat-primary-rgb),.6)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-warning{border-color:var(--cmat-warn)}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{color:var(--cmat-text-hint);border-color:var(--cmat-text-hint)}.cmat-datetimepicker-time-am.mat-mdc-button.cmat-datetimepicker-time-ampm-active,.cmat-datetimepicker-time-pm.mat-mdc-button.cmat-datetimepicker-time-ampm-active{background-color:rgba(var(--cmat-accent-rgb),.2)}.cmat-datetimepicker-content{display:block;border-radius:4px;overflow:hidden}.cmat-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.cmat-datetimepicker-content .cmat-calendar{width:296px;height:424px}.cmat-datetimepicker-content .cmat-calendar.cmat-datetimepicker-calendar-with-time-input{height:490px}.cmat-datetimepicker-content-touch{display:block;position:relative;overflow:visible}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.cmat-datetimepicker-content-touch .cmat-datetimepicker-calendar{width:100%;height:auto}@media all and (orientation:landscape){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:120vh;height:100%;min-height:80vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}}@media all and (orientation:portrait){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container-with-actions{height:135vw}}.cmat-datetimepicker-transform-panel.enter-dropdown{animation:panel-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.enter-dialog{animation:panel-dialog-enter .15s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.leave{animation:panel-leave .1s linear}@keyframes panel-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panel-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panel-leave{0%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { startView: [{
@@ -2530,11 +2213,6 @@ const CMAT_DATETIMEPICKER_VALIDATORS = {
     useExisting: forwardRef(() => CmatDatetimepickerInputDirective),
     multi: true
 };
-/**
- * An event used for datepicker input and change events. We don't always have access to a native
- * input or change event because the event may have been triggered by the user clicking on the
- * calendar popup. For consistency, we always use MatDatepickerInputEvent instead.
- */
 class CmatDatetimepickerInputEvent {
     constructor(target, targetElement) {
         this.target = target;
@@ -2542,16 +2220,11 @@ class CmatDatetimepickerInputEvent {
         this.value = this.target.value;
     }
 }
-/** Directive used to connect an input to a MatDatepicker. */
 class CmatDatetimepickerInputDirective {
     constructor() {
-        /** Emits when a `change` event is fired on this `<input>`. */
         this.dateChange = new EventEmitter();
-        /** Emits when an `input` event is fired on this `<input>`. */
         this.dateInput = new EventEmitter();
-        /** Emits when the value changes (either due to user input or programmatic change). */
         this.valueChange = new EventEmitter();
-        /** Emits when the disabled state has changed */
         this.disabledChange = new EventEmitter();
         this._elementRef = inject(ElementRef);
         this._dateAdapter = inject(DatetimeAdapter, { optional: true });
@@ -2559,7 +2232,6 @@ class CmatDatetimepickerInputDirective {
         this._formField = inject(MatFormField, { optional: true });
         this._datepickerSubscription = Subscription.EMPTY;
         this._localeSubscription = Subscription.EMPTY;
-        /** Whether the last value set on the input was valid. */
         this._lastValueValid = false;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouched = () => { };
@@ -2567,30 +2239,25 @@ class CmatDatetimepickerInputDirective {
         this._cvaOnChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._validatorOnChange = () => { };
-        /** The form control validator for whether the input parses. */
         this._parseValidator = () => this._lastValueValid ?
             null : { 'matDatepickerParse': { 'text': this._elementRef.nativeElement.value } };
-        /** The form control validator for the min date. */
         this._minValidator = (control) => {
             const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             return (!this.min || !controlValue ||
                 this._dateAdapter.compareDatetime(this.min, controlValue) <= 0) ?
                 null : { 'matDatepickerMin': { 'min': this.min, 'actual': controlValue } };
         };
-        /** The form control validator for the max date. */
         this._maxValidator = (control) => {
             const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             return (!this.max || !controlValue ||
                 this._dateAdapter.compareDatetime(this.max, controlValue) >= 0) ?
                 null : { 'matDatepickerMax': { 'max': this.max, 'actual': controlValue } };
         };
-        /** The form control validator for the date filter. */
         this._filterValidator = (control) => {
             const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             return !this.dateFilter || !controlValue || this.dateFilter(controlValue, CmatDatetimepickerFilterType.DATE) ?
                 null : { 'matDatepickerFilter': true };
         };
-        /** The combined form control validator for this input. */
         // eslint-disable-next-line @typescript-eslint/member-ordering
         this._validator = Validators.compose([this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator]);
         const _dateAdapter = this._dateAdapter;
@@ -2600,10 +2267,8 @@ class CmatDatetimepickerInputDirective {
         if (!this._dateFormats) {
             throw createMissingDateImplError('CMAT_DATETIME_FORMATS');
         }
-        // Update the displayed date when the locale changes.
         this._localeSubscription = _dateAdapter.localeChanges.subscribe();
     }
-    /** The datepicker that this input is associated with. */
     set cmatDatetimepicker(value) {
         this._registerDatetimepicker(value);
     }
@@ -2611,7 +2276,6 @@ class CmatDatetimepickerInputDirective {
         this.dateFilter = filter;
         this._validatorOnChange();
     }
-    /** The value of the input. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get value() {
         return this._value;
@@ -2623,14 +2287,12 @@ class CmatDatetimepickerInputDirective {
         const oldDate = this.value;
         this._value = value;
         this._formatValue(value);
-        // use timeout to ensure the datetimepicker is instantiated and we get the correct format
         setTimeout(() => {
             if (!this._dateAdapter.sameDatetime(oldDate, value)) {
                 this.valueChange.emit(value);
             }
         });
     }
-    /** The minimum valid date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get min() {
         return this._min;
@@ -2639,7 +2301,6 @@ class CmatDatetimepickerInputDirective {
         this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         this._validatorOnChange();
     }
-    /** The maximum valid date. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get max() {
         return this._max;
@@ -2648,7 +2309,6 @@ class CmatDatetimepickerInputDirective {
         this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         this._validatorOnChange();
     }
-    /** Whether the datepicker-input is disabled. */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get disabled() {
         return !!this._disabled;
@@ -2683,34 +2343,24 @@ class CmatDatetimepickerInputDirective {
     validate(c) {
         return this._validator ? this._validator(c) : null;
     }
-    /**
-     * Gets the element that the datepicker popup should be connected to.
-     *
-     * @return The element to connect the popup to.
-     */
     getConnectedOverlayOrigin() {
         return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
     }
-    /** Gets the ID of an element that should be used a description for the calendar overlay. */
     getOverlayLabelId() {
         if (this._formField) {
             return this._formField.getLabelId();
         }
         return this._elementRef.nativeElement.getAttribute('aria-labelledby');
     }
-    // Implemented as part of ControlValueAccessor
     writeValue(value) {
         this.value = value;
     }
-    // Implemented as part of ControlValueAccessor
     registerOnChange(fn) {
         this._cvaOnChange = fn;
     }
-    // Implemented as part of ControlValueAccessor
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    // Implemented as part of ControlValueAccessor
     setDisabledState(disabled) {
         this.disabled = disabled;
     }
@@ -2732,15 +2382,12 @@ class CmatDatetimepickerInputDirective {
     onChange() {
         this.dateChange.emit(new CmatDatetimepickerInputEvent(this, this._elementRef.nativeElement));
     }
-    /** Handles blur events on the input. */
     onBlur() {
-        // Reformat the input only if we have a valid value.
         if (this.value) {
             this._formatValue(this.value);
         }
         this._onTouched();
     }
-    /** Returns the palette used by the input's form field, if any. */
     getThemePalette() {
         return this._formField ? this._formField.color : undefined;
     }
@@ -2786,19 +2433,18 @@ class CmatDatetimepickerInputDirective {
         parseFormat ??= this._dateFormats.parse.dateInput;
         return parseFormat;
     }
-    /** Formats a value and sets it on the input element. */
     _formatValue(value) {
         this._elementRef.nativeElement.value =
             value ? this._dateAdapter.format(value, this._getDisplayFormat()) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatDatetimepickerInputDirective, isStandalone: true, selector: "input[cmatDatetimepicker]", inputs: { cmatDatetimepicker: "cmatDatetimepicker", cmatDatepickerFilter: "cmatDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled" }, 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 ? datetimepicker.toIso8601(min) : null", "attr.max": "max ? datetimepicker.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatDatetimepickerInputDirective, isStandalone: true, selector: "input[cmatDatetimepicker]", inputs: { cmatDatetimepicker: "cmatDatetimepicker", cmatDatepickerFilter: "cmatDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled" }, 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 ? datetimepicker.toIso8601(min) : null", "attr.max": "max ? datetimepicker.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
             CMAT_DATETIMEPICKER_VALUE_ACCESSOR,
             CMAT_DATETIMEPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: CmatDatetimepickerInputDirective },
         ], exportAs: ["cmatDatepickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[cmatDatetimepicker]',
@@ -2838,12 +2484,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 type: Input
             }] } });
 
-/** Can be used to override the icon of a `cmatDatetimepickerToggle`. */
 class CmatDatetimepickerToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatDatetimepickerToggleIcon]'
@@ -2852,11 +2497,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
 class CmatDatetimepickerToggleComponent {
     constructor() {
         this.class = 'cmat-datetimepicker-toggle';
+        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
         this.intl = inject(CmatDatetimepickerIntl);
         this._stateChanges = Subscription.EMPTY;
-        this._changeDetectorRef = inject(ChangeDetectorRef);
     }
-    /** Whether the toggle button is disabled. */
     get disabled() {
         return this._disabled === undefined ? this.datetimepicker.disabled : !!this._disabled;
     }
@@ -2886,14 +2530,14 @@ class CmatDatetimepickerToggleComponent {
             this.datetimepicker.datetimepickerInput.disabledChange : of();
         this._stateChanges.unsubscribe();
         this._stateChanges = merge([this.intl.changes, datepickerDisabled, inputDisabled])
-            .subscribe(() => this._changeDetectorRef.markForCheck());
+            .subscribe(() => this.refreshVersion.update(value => value + 1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatDatetimepickerToggleComponent, isStandalone: true, selector: "cmat-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disableRipple: "disableRipple", disabled: "disabled" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "customIcon", first: true, predicate: CmatDatetimepickerToggleIconDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["cmatDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button type=\"button\" matIconButton  \r\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\" [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"open($event)\">\r\n  @if (!customIcon) {\r\n    @switch (datetimepicker.type) {\r\n      @case ('time') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @case ('datetime') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @default {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            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\" />\r\n          </svg>\r\n        }\r\n      }\r\n    }\r\n\r\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n  </button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatDatetimepickerToggleComponent, isStandalone: true, selector: "cmat-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disableRipple: "disableRipple", disabled: "disabled" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "customIcon", first: true, predicate: CmatDatetimepickerToggleIconDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["cmatDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button type=\"button\" matIconButton [attr.data-refresh]=\"refreshVersion()\" \r\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\" [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"open($event)\">\r\n  @if (!customIcon) {\r\n    @switch (datetimepicker.type) {\r\n      @case ('time') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @case ('datetime') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @default {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            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\" />\r\n          </svg>\r\n        }\r\n      }\r\n    }\r\n\r\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n  </button>\r\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-toggle', exportAs: 'cmatDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], template: "<button type=\"button\" matIconButton  \r\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\" [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"open($event)\">\r\n  @if (!customIcon) {\r\n    @switch (datetimepicker.type) {\r\n      @case ('time') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @case ('datetime') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @default {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            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\" />\r\n          </svg>\r\n        }\r\n      }\r\n    }\r\n\r\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n  </button>" }]
+            args: [{ selector: 'cmat-datetimepicker-toggle', exportAs: 'cmatDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], template: "<button type=\"button\" matIconButton [attr.data-refresh]=\"refreshVersion()\" \r\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\" [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"open($event)\">\r\n  @if (!customIcon) {\r\n    @switch (datetimepicker.type) {\r\n      @case ('time') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @case ('datetime') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            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\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @default {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            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\" />\r\n          </svg>\r\n        }\r\n      }\r\n    }\r\n\r\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n  </button>\r\n" }]
         }], propDecorators: { datetimepicker: [{
                 type: Input,
                 args: ['for']