cmat 0.0.3 → 0.0.5

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, Input, HostBinding, HostListener, Optional, Inject, Injectable, Directive, ElementRef, ViewChild, InjectionToken, forwardRef, ContentChild } from '@angular/core';
-import { NgStyle, NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgClass, DOCUMENT } from '@angular/common';
+import { NgStyle, NgClass, DOCUMENT } from '@angular/common';
 import * as i1 from 'cmat/components/adapter';
 import { CMAT_DATETIME_FORMATS } from 'cmat/components/adapter';
 import { first, take, filter } from 'rxjs/operators';
@@ -277,12 +277,12 @@ class CmatDatetimepickerClockComponent {
         this.activeDate = date;
         this.activeDateChange.emit(this.activeDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 [ngStyle]=\"hand\" class=\"cmat-datetimepicker-clock-hand\"></div>\r\n  <div [class.active]=\"hourView\" class=\"cmat-datetimepicker-clock-hours\">\r\n    <div *ngFor=\"let item of hours;trackBy: trackByFn\" [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      class=\"cmat-datetimepicker-clock-cell\">\r\n      {{ item.displayValue }}</div>\r\n  </div>\r\n  <div [class.active]=\"!hourView\" class=\"cmat-datetimepicker-clock-minutes\">\r\n    <div *ngFor=\"let item of minutes;trackBy: trackByFn\" [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n      [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\"\r\n      [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\" class=\"cmat-datetimepicker-clock-cell\">{{ item.displayValue\r\n      }}</div>\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"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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\">\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\n  <div [ngStyle]=\"hand\" class=\"cmat-datetimepicker-clock-hand\"></div>\n  <div [class.active]=\"hourView\" class=\"cmat-datetimepicker-clock-hours\">\n    @for (item of hours; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\"\n        class=\"cmat-datetimepicker-clock-cell\">\n      {{ item.displayValue }}</div>\n    }\n  </div>\n  <div [class.active]=\"!hourView\" class=\"cmat-datetimepicker-clock-minutes\">\n    @for (item of minutes; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\"\n        [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\" class=\"cmat-datetimepicker-clock-cell\">{{ item.displayValue\n      }}</div>\n    }\n  </div>\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: "17.1.0", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-clock', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerClock', standalone: true, imports: [NgStyle, NgFor], template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div [ngStyle]=\"hand\" class=\"cmat-datetimepicker-clock-hand\"></div>\r\n  <div [class.active]=\"hourView\" class=\"cmat-datetimepicker-clock-hours\">\r\n    <div *ngFor=\"let item of hours;trackBy: trackByFn\" [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      class=\"cmat-datetimepicker-clock-cell\">\r\n      {{ item.displayValue }}</div>\r\n  </div>\r\n  <div [class.active]=\"!hourView\" class=\"cmat-datetimepicker-clock-minutes\">\r\n    <div *ngFor=\"let item of minutes;trackBy: trackByFn\" [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n      [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\"\r\n      [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\" class=\"cmat-datetimepicker-clock-cell\">{{ item.displayValue\r\n      }}</div>\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"] }]
+            args: [{ selector: 'cmat-datetimepicker-clock', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerClock', standalone: true, imports: [NgStyle], template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\n  <div [ngStyle]=\"hand\" class=\"cmat-datetimepicker-clock-hand\"></div>\n  <div [class.active]=\"hourView\" class=\"cmat-datetimepicker-clock-hours\">\n    @for (item of hours; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\"\n        class=\"cmat-datetimepicker-clock-cell\">\n      {{ item.displayValue }}</div>\n    }\n  </div>\n  <div [class.active]=\"!hourView\" class=\"cmat-datetimepicker-clock-minutes\">\n    @for (item of minutes; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\"\n        [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\" class=\"cmat-datetimepicker-clock-cell\">{{ item.displayValue\n      }}</div>\n    }\n  </div>\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: () => [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter }], propDecorators: { userSelection: [{
                 type: Output
             }], dateFilter: [{
@@ -405,12 +405,12 @@ class CmatDatetimepickerCalendarBodyComponent {
     trackByFn(index, item) {
         return item.value || index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 there's not enough space in the first row, create a separate label row. We mark this row as\r\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\r\n-->\r\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\r\n    <td [attr.colspan]=\"numCols\" class=\"cmat-datetimepicker-calendar-body-label\">{{ label }}</td>\r\n</tr>\r\n\r\n<!-- Create the first row separately so we can include a special spacer cell. -->\r\n<tr *ngFor=\"let row of rows; let rowIndex = index\" 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    <td *ngIf=\"rowIndex === 0 && _firstRowOffset\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\"\r\n        class=\"cmat-datetimepicker-calendar-body-label\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n    </td>\r\n    <td role=\"presentation\" (click)=\"cellClicked(item)\"\r\n        *ngFor=\"let item of row; let colIndex = index;trackBy: trackByFn\" [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\"\r\n        class=\"cmat-datetimepicker-calendar-body-cell\" role=\"button\">\r\n        <div [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            class=\"cmat-datetimepicker-calendar-body-cell-content\">\r\n            {{ item.displayValue }}\r\n        </div>\r\n    </td>\r\n</tr>", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 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:7.1428571429% 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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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: "<!--\nIf there's not enough space in the first row, create a separate label row. We mark this row as\naria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td [attr.colspan]=\"numCols\" class=\"cmat-datetimepicker-calendar-body-label\">{{ label }}</td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track row; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\"\n        class=\"cmat-datetimepicker-calendar-body-label\">\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    @for (item of row; track trackByFn(colIndex, item); let colIndex = $index) {\n      <td role=\"presentation\" (click)=\"cellClicked(item)\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\"\n        class=\"cmat-datetimepicker-calendar-body-cell\" role=\"button\">\n        <div [attr.aria-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\"\n          class=\"cmat-datetimepicker-calendar-body-cell-content\">\n          {{ item.displayValue }}\n        </div>\n      </td>\n    }\n  </tr>\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 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:7.1428571429% 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: "17.1.0", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[cmat-datetimepicker-calendar-body]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendarBody', standalone: true, imports: [NgIf, NgFor], template: "<!--\r\n  If there's not enough space in the first row, create a separate label row. We mark this row as\r\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\r\n-->\r\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\r\n    <td [attr.colspan]=\"numCols\" class=\"cmat-datetimepicker-calendar-body-label\">{{ label }}</td>\r\n</tr>\r\n\r\n<!-- Create the first row separately so we can include a special spacer cell. -->\r\n<tr *ngFor=\"let row of rows; let rowIndex = index\" 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    <td *ngIf=\"rowIndex === 0 && _firstRowOffset\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\"\r\n        class=\"cmat-datetimepicker-calendar-body-label\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n    </td>\r\n    <td role=\"presentation\" (click)=\"cellClicked(item)\"\r\n        *ngFor=\"let item of row; let colIndex = index;trackBy: trackByFn\" [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\"\r\n        class=\"cmat-datetimepicker-calendar-body-cell\" role=\"button\">\r\n        <div [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            class=\"cmat-datetimepicker-calendar-body-cell-content\">\r\n            {{ item.displayValue }}\r\n        </div>\r\n    </td>\r\n</tr>", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 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:7.1428571429% 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', standalone: true, imports: [], template: "<!--\nIf there's not enough space in the first row, create a separate label row. We mark this row as\naria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td [attr.colspan]=\"numCols\" class=\"cmat-datetimepicker-calendar-body-label\">{{ label }}</td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track row; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\"\n        class=\"cmat-datetimepicker-calendar-body-label\">\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    @for (item of row; track trackByFn(colIndex, item); let colIndex = $index) {\n      <td role=\"presentation\" (click)=\"cellClicked(item)\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\"\n        class=\"cmat-datetimepicker-calendar-body-cell\" role=\"button\">\n        <div [attr.aria-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\"\n          class=\"cmat-datetimepicker-calendar-body-cell-content\">\n          {{ item.displayValue }}\n        </div>\n      </td>\n    }\n  </tr>\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 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:7.1428571429% 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: [{
@@ -558,10 +558,10 @@ class CmatDatetimepickerMultiYearViewComponent {
     _getValidDateOrNull(obj) {
         return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"yearSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>", dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"yearSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>", dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-multi-year-view', animations: [slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMultiYearView', standalone: true, imports: [CmatDatetimepickerCalendarBodyComponent], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"yearSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>" }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{
@@ -676,10 +676,10 @@ class CmatDatetimepickerIntl {
     formatYearRangeLabel(start, end) {
         return `${start} to ${end}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -835,10 +835,10 @@ class CmatDatetimepickerTimeInputDirective {
         this.inputElement.removeEventListener('keypress', this._keyPressListener);
         this.inputElement.removeEventListener('input', this._inputEventListener);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", 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: "17.2.4", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", 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: "17.1.0", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input.cmat-datetimepicker-time-input',
@@ -1080,12 +1080,12 @@ class CmatDatetimepickerTimeComponent {
             this.datetimepickerIntlChangesSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerTimeComponent, deps: [{ token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: CmatDatetimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" #hourInput=\"cmatDatetimepickerTimeInput\"\r\n      type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [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 class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" #minuteInput=\"cmatDatetimepickerTimeInput\"\r\n      type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n      (timeValueChanged)=\"handleMinuteInputChange($event)\" [timeInterval]=\"interval\" (focus)=\"handleFocus('minute')\" />\r\n\r\n    <div *ngIf=\"twelvehour\" class=\"cmat-datetimepicker-time-ampm\">\r\n      <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\r\n        (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n      <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\r\n        (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<cmat-datetimepicker-clock (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n  [dateFilter]=\"dateFilter\" [interval]=\"interval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\"\r\n  [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\r\n</cmat-datetimepicker-clock>\r\n\r\n<div class=\"cmat-datetimepicker-time-button-wrapper space-x-4\">\r\n  <button class=\"cmat=datetimepicker-time-cancel-button\" mat-stroked-button type=\"button\" (click)=\"handleCancel()\">\r\n    {{ datetimepickerIntl.cancelLabel }}\r\n  </button>\r\n  <button class=\"cmat-datetimepicker-time-ok-button\" mat-flat-button type=\"button\" color=\"primary\" (click)=\"handleOk()\"\r\n    [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "17.2.4", ngImport: i0, type: CmatDatetimepickerTimeComponent, deps: [{ token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: CmatDatetimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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\">\n  <div class=\"cmat-datetimepicker-time-input-inner\">\n    <input class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\"\n      [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" #hourInput=\"cmatDatetimepickerTimeInput\"\n      type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\n\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\n\n      <input class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\"\n        [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" #minuteInput=\"cmatDatetimepickerTimeInput\"\n        type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\n        (timeValueChanged)=\"handleMinuteInputChange($event)\" [timeInterval]=\"interval\" (focus)=\"handleFocus('minute')\" />\n\n        @if (twelvehour) {\n          <div class=\"cmat-datetimepicker-time-ampm\">\n            <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-am\"\n              [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\n            <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-pm\"\n              [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <cmat-datetimepicker-clock (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\"\n      [dateFilter]=\"dateFilter\" [interval]=\"interval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\"\n      [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\n    </cmat-datetimepicker-clock>\n\n    <div class=\"cmat-datetimepicker-time-button-wrapper space-x-4\">\n      <button class=\"cmat=datetimepicker-time-cancel-button\" mat-stroked-button type=\"button\" (click)=\"handleCancel()\">\n        {{ datetimepickerIntl.cancelLabel }}\n      </button>\n      <button class=\"cmat-datetimepicker-time-ok-button\" mat-flat-button type=\"button\" color=\"primary\" (click)=\"handleOk()\"\n        [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n        {{ datetimepickerIntl.okLabel }}\n      </button>\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: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "17.1.0", ngImport: i0, type: CmatDatetimepickerTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-time', exportAs: 'cmatDatetimepickerTime', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CmatDatetimepickerTimeInputDirective, NgIf, MatButtonModule, CmatDatetimepickerClockComponent], template: "<div class=\"cmat-datetimepicker-time-input-wrapper\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" #hourInput=\"cmatDatetimepickerTimeInput\"\r\n      type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [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 class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" #minuteInput=\"cmatDatetimepickerTimeInput\"\r\n      type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n      (timeValueChanged)=\"handleMinuteInputChange($event)\" [timeInterval]=\"interval\" (focus)=\"handleFocus('minute')\" />\r\n\r\n    <div *ngIf=\"twelvehour\" class=\"cmat-datetimepicker-time-ampm\">\r\n      <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\r\n        (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n      <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\r\n        (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<cmat-datetimepicker-clock (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n  [dateFilter]=\"dateFilter\" [interval]=\"interval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\"\r\n  [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\r\n</cmat-datetimepicker-clock>\r\n\r\n<div class=\"cmat-datetimepicker-time-button-wrapper space-x-4\">\r\n  <button class=\"cmat=datetimepicker-time-cancel-button\" mat-stroked-button type=\"button\" (click)=\"handleCancel()\">\r\n    {{ datetimepickerIntl.cancelLabel }}\r\n  </button>\r\n  <button class=\"cmat-datetimepicker-time-ok-button\" mat-flat-button type=\"button\" color=\"primary\" (click)=\"handleOk()\"\r\n    [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\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, standalone: true, imports: [CmatDatetimepickerTimeInputDirective, MatButtonModule, CmatDatetimepickerClockComponent], template: "<div class=\"cmat-datetimepicker-time-input-wrapper\">\n  <div class=\"cmat-datetimepicker-time-input-inner\">\n    <input class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\"\n      [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" #hourInput=\"cmatDatetimepickerTimeInput\"\n      type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\n\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\n\n      <input class=\"cmat-datetimepicker-time-input\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\"\n        [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" #minuteInput=\"cmatDatetimepickerTimeInput\"\n        type=\"text\" inputmode=\"numeric\" maxlength=\"2\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\n        (timeValueChanged)=\"handleMinuteInputChange($event)\" [timeInterval]=\"interval\" (focus)=\"handleFocus('minute')\" />\n\n        @if (twelvehour) {\n          <div class=\"cmat-datetimepicker-time-ampm\">\n            <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-am\"\n              [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\n            <button mat-button type=\"button\" class=\"cmat-datetimepicker-time-pm\"\n              [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <cmat-datetimepicker-clock (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\"\n      [dateFilter]=\"dateFilter\" [interval]=\"interval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\"\n      [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\n    </cmat-datetimepicker-clock>\n\n    <div class=\"cmat-datetimepicker-time-button-wrapper space-x-4\">\n      <button class=\"cmat=datetimepicker-time-cancel-button\" mat-stroked-button type=\"button\" (click)=\"handleCancel()\">\n        {{ datetimepickerIntl.cancelLabel }}\n      </button>\n      <button class=\"cmat-datetimepicker-time-ok-button\" mat-flat-button type=\"button\" color=\"primary\" (click)=\"handleOk()\"\n        [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n        {{ datetimepickerIntl.okLabel }}\n      </button>\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"] }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: CmatDatetimepickerIntl }], propDecorators: { selectedChange: [{
                 type: Output
             }], activeDateChange: [{
@@ -1221,10 +1221,10 @@ class CmatDatetimepickerYearViewComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerYearViewComponent, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"monthSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>", dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerYearViewComponent, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"monthSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>", dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerYearViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-year-view', animations: [slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerYearView', standalone: true, imports: [CmatDatetimepickerCalendarBodyComponent], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"monthSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>" }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{
@@ -1358,12 +1358,12 @@ class CmatDatetimepickerMonthViewComponent {
     _changeCalendarState(direction) {
         this.calendarState = direction;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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            <th *ngFor=\"let day of weekdays;trackBy: trackByFn\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\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 (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"dateSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n        [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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\">\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\n    <tr>\n      @for (day of weekdays; track trackByFn($index, day)) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n    <tr>\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\n    </tr>\n  </thead>\n  <tbody (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"dateSelected($event)\"\n    [@slideCalendar]=\"calendarState\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\n  [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\n</table>", dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-month-view', animations: [slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMonthView', standalone: true, imports: [NgFor, CmatDatetimepickerCalendarBodyComponent], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n        <tr>\r\n            <th *ngFor=\"let day of weekdays;trackBy: trackByFn\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\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 (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"dateSelected($event)\"\r\n        [@slideCalendar]=\"calendarState\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n        [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\r\n</table>" }]
+            args: [{ selector: 'cmat-datetimepicker-month-view', animations: [slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMonthView', standalone: true, imports: [CmatDatetimepickerCalendarBodyComponent], template: "<table class=\"cmat-datetimepicker-calendar-table\">\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\n    <tr>\n      @for (day of weekdays; track trackByFn($index, day)) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n    <tr>\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\n    </tr>\n  </thead>\n  <tbody (@slideCalendar.done)=\"calendarStateDone()\" (selectedValueChange)=\"dateSelected($event)\"\n    [@slideCalendar]=\"calendarState\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\n  [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" cmat-datetimepicker-calendar-body role=\"grid\"></tbody>\n</table>" }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -1979,17 +1979,16 @@ class CmatDatetimepickerCalendarComponent {
     _2digit(n) {
         return ('00' + n).slice(-2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [{ token: i0.ElementRef }, { token: CmatDatetimepickerIntl }, { token: i0.NgZone }, { token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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    <div role=\"presentation\" *ngIf=\"type !== 'time'\" 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        <svg *ngIf=\"multiYearSelector || type === 'year'\" class=\"cmat-datetimepicker-calendar-header-year-dropdown\"\r\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n        </svg>\r\n    </div>\r\n    <div *ngIf=\"type !== 'year'\" class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n        <div role=\"presentation\" *ngIf=\"type !== 'time'\" 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        <span *ngIf=\"type.endsWith('time')\" class=\"cmat-datetimepicker-calendar-header-time\"\r\n            [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\"\r\n                    (click)=\"minutesClicked()\">{{ minutesButtonText }}</div>\r\n            </span>\r\n            <span *ngIf=\"twelvehour\" class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n                <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n                    [class.active]=\"AMPM === 'AM'\" aria-label=\"AM\" (click)=\"ampmClicked('AM')\">AM</div>\r\n                <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n                    [class.active]=\"AMPM === 'PM'\" aria-label=\"PM\" (click)=\"ampmClicked('PM')\">PM</div>\r\n            </span>\r\n        </span>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngSwitch]=\"currentView\">\r\n    <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\r\n        class=\"cmat-datetimepickermonth-content\">\r\n        <div class=\"cmat-datetimepicker-calendar-controls\">\r\n            <button type=\"button\" mat-icon-button 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\"\r\n                [@slideCalendar]=\"calendarState\" (@slideCalendar.done)=\"calendarStateDone()\">\r\n                <strong>{{ yearPeriodText }}</strong>\r\n            </div>\r\n            <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-next-button\"\r\n                [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\"\r\n                [attr.aria-label]=\"nextButtonLabel\" (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    <cmat-datetimepicker-month-view *ngSwitchCase=\"'month'\" (userSelection)=\"userSelected()\"\r\n        (selectedChange)=\"dateSelected($event)\" [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\"\r\n        [selected]=\"selected!\" [type]=\"type\">\r\n    </cmat-datetimepicker-month-view>\r\n    <cmat-datetimepicker-year-view *ngSwitchCase=\"'year'\" (userSelection)=\"userSelected()\"\r\n        (selectedChange)=\"monthSelected($event)\" [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\"\r\n        [selected]=\"selected!\" [type]=\"type\">\r\n    </cmat-datetimepicker-year-view>\r\n    <cmat-datetimepicker-multi-year-view *ngSwitchCase=\"'multi-year'\" (userSelection)=\"userSelected()\"\r\n        (selectedChange)=\"yearSelected($event)\" [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\"\r\n        [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\">\r\n    </cmat-datetimepicker-multi-year-view>\r\n\r\n    <ng-container *ngSwitchDefault>\r\n        <cmat-datetimepicker-time *ngIf=\"timeInput; else clock\" (userSelection)=\"userSelected()\"\r\n            (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"timeSelected($event)\" [AMPM]=\"AMPM\"\r\n            (ampmChange)=\"ampmClicked($event)\" [clockView]=\"clockView\" (clockViewChange)=\"clockView = $event\"\r\n            [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\"\r\n            [minDate]=\"minDate\" [selected]=\"activeDate\">\r\n        </cmat-datetimepicker-time>\r\n\r\n        <ng-template #clock>\r\n            <cmat-datetimepicker-clock (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n                (selectedChange)=\"dialTimeSelected($event)\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\"\r\n                [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\" [startView]=\"clockView\"\r\n                [twelvehour]=\"twelvehour\">\r\n            </cmat-datetimepicker-clock>\r\n        </ng-template>\r\n    </ng-container>\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}.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}.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}[mode=landscape] .cmat-datetimepicker-calendar{display:flex}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{width:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{border-radius:0 4px 4px 0}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-year+.cmat-datetimepicker-calendar-header-date-time,[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date+.cmat-datetimepicker-calendar-header-time{margin-top:12px}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date-time{font-size:28px;flex-direction:column}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm-container{flex-direction:row;font-size:24px}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm{padding:4px}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm+.cmat-datetimepicker-calendar-header-ampm{margin:0 8px}@media all and (orientation: landscape){[mode=auto] .cmat-datetimepicker-calendar{display:flex}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{width:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{border-radius:0 4px 4px 0}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-year+.cmat-datetimepicker-calendar-header-date-time,[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date+.cmat-datetimepicker-calendar-header-time{margin-top:12px}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date-time{font-size:28px;flex-direction:column}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm-container{flex-direction:row;font-size:24px}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm{padding:4px}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm+.cmat-datetimepicker-calendar-header-ampm{margin:0 8px}}.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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [{ token: i0.ElementRef }, { token: CmatDatetimepickerIntl }, { token: i0.NgZone }, { token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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\">\n  @if (type !== 'time') {\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\n    (click)=\"yearClicked()\">\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\n    @if (multiYearSelector || type === 'year') {\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n      fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n    }\n  </div>\n  }\n  @if (type !== 'year') {\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\n    @if (type !== 'time') {\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\n    }\n    @if (type.endsWith('time')) {\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\n          {{ hoursButtonText }}</div>\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\n          minutesButtonText }}</div>\n      </span>\n      @if (twelvehour) {\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'AM'\" aria-label=\"AM\" (click)=\"ampmClicked('AM')\">AM</div>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'PM'\" aria-label=\"PM\" (click)=\"ampmClicked('PM')\">PM</div>\n      </span>\n      }\n    </span>\n    }\n  </div>\n  }\n</div>\n\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n  <div class=\"cmat-datetimepickermonth-content\">\n    <div class=\"cmat-datetimepicker-calendar-controls\">\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium\" [@slideCalendar]=\"calendarState\"\n        (@slideCalendar.done)=\"calendarStateDone()\">\n        <strong>{{ yearPeriodText }}</strong>\n      </div>\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-next-button\"\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  }\n\n  @switch (currentView) {\n  @case ('month') {\n  <cmat-datetimepicker-month-view (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-month-view>\n  }\n  @case ('year') {\n  <cmat-datetimepicker-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-year-view>\n  }\n  @case ('multi-year') {\n  <cmat-datetimepicker-multi-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"yearSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\n    [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-multi-year-view>\n  }\n  @default {\n  @if (timeInput) {\n  <cmat-datetimepicker-time (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"timeSelected($event)\" [AMPM]=\"AMPM\" (ampmChange)=\"ampmClicked($event)\" [clockView]=\"clockView\"\n    (clockViewChange)=\"clockView = $event\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\"\n    [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\">\n  </cmat-datetimepicker-time>\n  } @else {\n  <cmat-datetimepicker-clock (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"dialTimeSelected($event)\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\" [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\n  </cmat-datetimepicker-clock>\n  }\n  }\n  }\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"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-calendar', animations: [slideCalendar], host: {
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class.cmat-datetimepicker-calendar-with-time-input]': 'timeInput',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, exportAs: 'cmatDatetimepickerCalendar', imports: [NgIf, NgSwitch, MatButtonModule, NgSwitchCase, CmatDatetimepickerMonthViewComponent,
-                        CmatDatetimepickerYearViewComponent, CmatDatetimepickerMultiYearViewComponent, NgSwitchDefault,
-                        CmatDatetimepickerTimeComponent, CmatDatetimepickerClockComponent], template: "<div class=\"cmat-datetimepicker-calendar-header\">\r\n    <div role=\"presentation\" *ngIf=\"type !== 'time'\" 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        <svg *ngIf=\"multiYearSelector || type === 'year'\" class=\"cmat-datetimepicker-calendar-header-year-dropdown\"\r\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n        </svg>\r\n    </div>\r\n    <div *ngIf=\"type !== 'year'\" class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n        <div role=\"presentation\" *ngIf=\"type !== 'time'\" 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        <span *ngIf=\"type.endsWith('time')\" class=\"cmat-datetimepicker-calendar-header-time\"\r\n            [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\"\r\n                    (click)=\"minutesClicked()\">{{ minutesButtonText }}</div>\r\n            </span>\r\n            <span *ngIf=\"twelvehour\" class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n                <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n                    [class.active]=\"AMPM === 'AM'\" aria-label=\"AM\" (click)=\"ampmClicked('AM')\">AM</div>\r\n                <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n                    [class.active]=\"AMPM === 'PM'\" aria-label=\"PM\" (click)=\"ampmClicked('PM')\">PM</div>\r\n            </span>\r\n        </span>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngSwitch]=\"currentView\">\r\n    <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\r\n        class=\"cmat-datetimepickermonth-content\">\r\n        <div class=\"cmat-datetimepicker-calendar-controls\">\r\n            <button type=\"button\" mat-icon-button 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\"\r\n                [@slideCalendar]=\"calendarState\" (@slideCalendar.done)=\"calendarStateDone()\">\r\n                <strong>{{ yearPeriodText }}</strong>\r\n            </div>\r\n            <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-next-button\"\r\n                [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\"\r\n                [attr.aria-label]=\"nextButtonLabel\" (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    <cmat-datetimepicker-month-view *ngSwitchCase=\"'month'\" (userSelection)=\"userSelected()\"\r\n        (selectedChange)=\"dateSelected($event)\" [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\"\r\n        [selected]=\"selected!\" [type]=\"type\">\r\n    </cmat-datetimepicker-month-view>\r\n    <cmat-datetimepicker-year-view *ngSwitchCase=\"'year'\" (userSelection)=\"userSelected()\"\r\n        (selectedChange)=\"monthSelected($event)\" [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\"\r\n        [selected]=\"selected!\" [type]=\"type\">\r\n    </cmat-datetimepicker-year-view>\r\n    <cmat-datetimepicker-multi-year-view *ngSwitchCase=\"'multi-year'\" (userSelection)=\"userSelected()\"\r\n        (selectedChange)=\"yearSelected($event)\" [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\"\r\n        [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\">\r\n    </cmat-datetimepicker-multi-year-view>\r\n\r\n    <ng-container *ngSwitchDefault>\r\n        <cmat-datetimepicker-time *ngIf=\"timeInput; else clock\" (userSelection)=\"userSelected()\"\r\n            (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"timeSelected($event)\" [AMPM]=\"AMPM\"\r\n            (ampmChange)=\"ampmClicked($event)\" [clockView]=\"clockView\" (clockViewChange)=\"clockView = $event\"\r\n            [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\"\r\n            [minDate]=\"minDate\" [selected]=\"activeDate\">\r\n        </cmat-datetimepicker-time>\r\n\r\n        <ng-template #clock>\r\n            <cmat-datetimepicker-clock (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n                (selectedChange)=\"dialTimeSelected($event)\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\"\r\n                [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\" [startView]=\"clockView\"\r\n                [twelvehour]=\"twelvehour\">\r\n            </cmat-datetimepicker-clock>\r\n        </ng-template>\r\n    </ng-container>\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}.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}.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}[mode=landscape] .cmat-datetimepicker-calendar{display:flex}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{width:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{border-radius:0 4px 4px 0}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-year+.cmat-datetimepicker-calendar-header-date-time,[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date+.cmat-datetimepicker-calendar-header-time{margin-top:12px}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date-time{font-size:28px;flex-direction:column}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm-container{flex-direction:row;font-size:24px}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm{padding:4px}[mode=landscape] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm+.cmat-datetimepicker-calendar-header-ampm{margin:0 8px}@media all and (orientation: landscape){[mode=auto] .cmat-datetimepicker-calendar{display:flex}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{width:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header{border-radius:0 4px 4px 0}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-year+.cmat-datetimepicker-calendar-header-date-time,[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date+.cmat-datetimepicker-calendar-header-time{margin-top:12px}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-date-time{font-size:28px;flex-direction:column}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm-container{flex-direction:row;font-size:24px}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm{padding:4px}[mode=auto] .cmat-datetimepicker-calendar .cmat-datetimepicker-calendar-header-ampm+.cmat-datetimepicker-calendar-header-ampm{margin:0 8px}}.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"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, exportAs: 'cmatDatetimepickerCalendar', imports: [MatButtonModule, CmatDatetimepickerMonthViewComponent, CmatDatetimepickerYearViewComponent,
+                        CmatDatetimepickerMultiYearViewComponent, CmatDatetimepickerTimeComponent, CmatDatetimepickerClockComponent, NgClass], template: "<div class=\"cmat-datetimepicker-calendar-header\">\n  @if (type !== 'time') {\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\n    (click)=\"yearClicked()\">\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\n    @if (multiYearSelector || type === 'year') {\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n      fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n    }\n  </div>\n  }\n  @if (type !== 'year') {\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\n    @if (type !== 'time') {\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\n    }\n    @if (type.endsWith('time')) {\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\n          {{ hoursButtonText }}</div>\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\n          minutesButtonText }}</div>\n      </span>\n      @if (twelvehour) {\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'AM'\" aria-label=\"AM\" (click)=\"ampmClicked('AM')\">AM</div>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'PM'\" aria-label=\"PM\" (click)=\"ampmClicked('PM')\">PM</div>\n      </span>\n      }\n    </span>\n    }\n  </div>\n  }\n</div>\n\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n  <div class=\"cmat-datetimepickermonth-content\">\n    <div class=\"cmat-datetimepicker-calendar-controls\">\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium\" [@slideCalendar]=\"calendarState\"\n        (@slideCalendar.done)=\"calendarStateDone()\">\n        <strong>{{ yearPeriodText }}</strong>\n      </div>\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-next-button\"\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  }\n\n  @switch (currentView) {\n  @case ('month') {\n  <cmat-datetimepicker-month-view (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-month-view>\n  }\n  @case ('year') {\n  <cmat-datetimepicker-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-year-view>\n  }\n  @case ('multi-year') {\n  <cmat-datetimepicker-multi-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"yearSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\n    [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-multi-year-view>\n  }\n  @default {\n  @if (timeInput) {\n  <cmat-datetimepicker-time (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"timeSelected($event)\" [AMPM]=\"AMPM\" (ampmChange)=\"ampmClicked($event)\" [clockView]=\"clockView\"\n    (clockViewChange)=\"clockView = $event\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\"\n    [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\">\n  </cmat-datetimepicker-time>\n  } @else {\n  <cmat-datetimepicker-clock (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"dialTimeSelected($event)\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\" [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\n  </cmat-datetimepicker-clock>\n  }\n  }\n  }\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: CmatDatetimepickerIntl }, { type: i0.NgZone }, { type: i1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -2091,13 +2090,13 @@ class CmatDatetimepickerContentComponent extends cmatDatetimepickerContentBase {
     ngOnDestroy() {
         this.animationDone.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatDatetimepickerContentComponent, isStandalone: true, selector: "cmat-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "animationDone.next()" }, properties: { "class.cmat-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "animationState" }, classAttribute: "cmat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: CmatDatetimepickerCalendarComponent, descendants: true, static: true }], exportAs: ["cmatDatetimepickerContent"], usesInheritance: true, ngImport: i0, template: "<div cdkTrapFocus role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-labelledby]=\"dialogLabelId ?? undefined\"\r\n    [attr.mode]=\"datetimepicker.mode\" class=\"cmat-datetimepicker-content-container\">\r\n    <cmat-datetimepicker-calendar [id]=\"datetimepicker.id\" [ngClass]=\"datetimepicker.panelClass\"\r\n        [attr.mode]=\"datetimepicker.mode\" [type]=\"datetimepicker.type\" [startAt]=\"datetimepicker.startAt\"\r\n        [startView]=\"datetimepicker.startView\" [maxDate]=\"datetimepicker.maxDate\" [minDate]=\"datetimepicker.minDate\"\r\n        [dateFilter]=\"datetimepicker.dateFilter\" [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()\" [@fadeInCalendar]=\"'enter'\">\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"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CmatDatetimepickerContentComponent, isStandalone: true, selector: "cmat-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "animationDone.next()" }, properties: { "class.cmat-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "animationState" }, classAttribute: "cmat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: CmatDatetimepickerCalendarComponent, descendants: true, static: true }], exportAs: ["cmatDatetimepickerContent"], usesInheritance: true, ngImport: i0, template: "<div cdkTrapFocus role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-labelledby]=\"dialogLabelId ?? undefined\"\r\n    [attr.mode]=\"datetimepicker.mode\" class=\"cmat-datetimepicker-content-container\">\r\n    <cmat-datetimepicker-calendar [id]=\"datetimepicker.id\" [ngClass]=\"datetimepicker.panelClass\"\r\n        [attr.mode]=\"datetimepicker.mode\" [type]=\"datetimepicker.type\" [startAt]=\"datetimepicker.startAt\"\r\n        [startView]=\"datetimepicker.startView\" [maxDate]=\"datetimepicker.maxDate\" [minDate]=\"datetimepicker.minDate\"\r\n        [dateFilter]=\"datetimepicker.dateFilter\" [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()\" [@fadeInCalendar]=\"'enter'\">\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"] }], animations: [
             transformPanel,
             fadeInCalendar,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-content', host: {
                         'class': 'cmat-datetimepicker-content',
@@ -2497,12 +2496,12 @@ class CmatDatetimepickerComponent {
                 hasModifierKey(event, 'altKey') &&
                 event.code === 'ArrowUp')))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerComponent, deps: [{ token: i2.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: CMAT_DATETIMEPICKER_SCROLL_STRATEGY }, { token: i1.DatetimeAdapter, optional: true }, { token: i4.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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-content{@apply shadow border-slate-300 bg-card dark:bg-black dark:bg-opacity-5 dark:border-slate-500;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[mode=landscape] .cmat-datetimepicker-calendar{width:446px;height:328px}.cmat-datetimepicker-content[mode=landscape] .cmat-datetimepicker-calendar.cmat-datetimepicker-calendar-with-time-input{height:412px}@media all and (orientation: landscape){.cmat-datetimepicker-content[mode=auto] .cmat-datetimepicker-calendar{width:446px;height:328px}.cmat-datetimepicker-content[mode=auto] .cmat-datetimepicker-calendar.cmat-datetimepicker-calendar-with-time-input{height:412px}}.cmat-datetimepicker-content-touch{display:block;max-height:80vh;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: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-content{@apply bg-card text-hint !important;}.cmat-datetimepicker-calendar-header{@apply bg-primary;color:#fff!important}.cmat-datetimepicker-body-label{@apply text-secondary;}.cmat-datetimepicker-calendar-table-header{@apply text-hint;}.cmat-datetimepicker-calendar-body-cell-content{@apply text-default;}.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{@apply bg-primary;color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected.cmat-datetimepicker-calendar-body-today{@apply shadow;}.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-center,.cmat-datetimepicker-clock-hand{@apply bg-primary;}.cmat-datetimepicker-clock-hand:before{@apply bg-primary;}.cmat-datetimepicker-clock-cell{@apply text-default;}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{@apply bg-primary;color:#fff!important}.cmat-datetimepicker-clock-cell:not(.cmat-datetimepicker-clock-cell-selected,.cmat-datetimepicker-clock-cell-disabled):hover{@apply bg-hover;}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-datetimepicker-toggle-active{@apply text-primary;}.cmat-datetimepicker-datetimepicker-toggle-active.mat-accent{@apply text-accent;}.cmat-datetimepicker-datetimepicker-toggle-active.mat-warn{@apply text-warn;}.cmat-datetimepicker-time-input{@apply text-primary;background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{@apply text-primary;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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerComponent, deps: [{ token: i2.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: CMAT_DATETIMEPICKER_SCROLL_STRATEGY }, { token: i1.DatetimeAdapter, optional: true }, { token: i4.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker', exportAs: 'cmatDatetimepicker', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: true, styles: [".cmat-datetimepicker-content{@apply shadow border-slate-300 bg-card dark:bg-black dark:bg-opacity-5 dark:border-slate-500;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[mode=landscape] .cmat-datetimepicker-calendar{width:446px;height:328px}.cmat-datetimepicker-content[mode=landscape] .cmat-datetimepicker-calendar.cmat-datetimepicker-calendar-with-time-input{height:412px}@media all and (orientation: landscape){.cmat-datetimepicker-content[mode=auto] .cmat-datetimepicker-calendar{width:446px;height:328px}.cmat-datetimepicker-content[mode=auto] .cmat-datetimepicker-calendar.cmat-datetimepicker-calendar-with-time-input{height:412px}}.cmat-datetimepicker-content-touch{display:block;max-height:80vh;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: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-content{@apply bg-card text-hint !important;}.cmat-datetimepicker-calendar-header{@apply bg-primary;color:#fff!important}.cmat-datetimepicker-body-label{@apply text-secondary;}.cmat-datetimepicker-calendar-table-header{@apply text-hint;}.cmat-datetimepicker-calendar-body-cell-content{@apply text-default;}.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{@apply bg-primary;color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected.cmat-datetimepicker-calendar-body-today{@apply shadow;}.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-center,.cmat-datetimepicker-clock-hand{@apply bg-primary;}.cmat-datetimepicker-clock-hand:before{@apply bg-primary;}.cmat-datetimepicker-clock-cell{@apply text-default;}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{@apply bg-primary;color:#fff!important}.cmat-datetimepicker-clock-cell:not(.cmat-datetimepicker-clock-cell-selected,.cmat-datetimepicker-clock-cell-disabled):hover{@apply bg-hover;}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-datetimepicker-toggle-active{@apply text-primary;}.cmat-datetimepicker-datetimepicker-toggle-active.mat-accent{@apply text-accent;}.cmat-datetimepicker-datetimepicker-toggle-active.mat-warn{@apply text-warn;}.cmat-datetimepicker-time-input{@apply text-primary;background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{@apply text-primary;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)}\n"] }]
+            args: [{ selector: 'cmat-datetimepicker', exportAs: 'cmatDatetimepicker', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: 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}}\n"] }]
         }], ctorParameters: () => [{ type: i2.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CMAT_DATETIMEPICKER_SCROLL_STRATEGY]
@@ -2830,14 +2829,14 @@ class CmatDatetimepickerInputDirective {
         this._elementRef.nativeElement.value =
             value ? this._dateAdapter.format(value, this._getDisplayFormat()) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i2$1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", 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: "17.2.4", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i2$1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", 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: "17.1.0", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[cmatDatetimepicker]',
@@ -2890,10 +2889,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
 
 /** Can be used to override the icon of a `cmatDatetimepickerToggle`. */
 class CmatDatetimepickerToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatDatetimepickerToggleIcon]',
@@ -2939,12 +2938,12 @@ class CmatDatetimepickerToggleComponent {
         this._stateChanges = merge([this.intl.changes, datepickerDisabled, inputDisabled])
             .subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [{ token: CmatDatetimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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\" (click)=\"open($event)\" [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\r\n    [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n    [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" [disabled]=\"disabled\" mat-icon-button type=\"button\">\r\n    <ng-container *ngIf=\"!customIcon\" [ngSwitch]=\"datetimepicker.type\">\r\n        <svg *ngSwitchCase=\"'time'\" class=\"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        <svg *ngSwitchCase=\"'datetime'\" class=\"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        <svg *ngSwitchDefault class=\"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    </ng-container>\r\n\r\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [{ token: CmatDatetimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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\" (click)=\"open($event)\" [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" [disabled]=\"disabled\" mat-icon-button type=\"button\">\n  @if (!customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg class=\"cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\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\">\n          </path>\n        </svg>\n      }\n      @case ('datetime') {\n        <svg class=\"cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\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\">\n          </path>\n        </svg>\n      }\n      @default {\n        <svg class=\"cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\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\" />\n          </svg>\n        }\n      }\n    }\n\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\n  </button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-toggle', exportAs: 'cmatDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault], template: "<button type=\"button\" (click)=\"open($event)\" [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\r\n    [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n    [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" [disabled]=\"disabled\" mat-icon-button type=\"button\">\r\n    <ng-container *ngIf=\"!customIcon\" [ngSwitch]=\"datetimepicker.type\">\r\n        <svg *ngSwitchCase=\"'time'\" class=\"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        <svg *ngSwitchCase=\"'datetime'\" class=\"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        <svg *ngSwitchDefault class=\"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    </ng-container>\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, standalone: true, imports: [MatButtonModule], template: "<button type=\"button\" (click)=\"open($event)\" [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" [disabled]=\"disabled\" mat-icon-button type=\"button\">\n  @if (!customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg class=\"cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\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\">\n          </path>\n        </svg>\n      }\n      @case ('datetime') {\n        <svg class=\"cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\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\">\n          </path>\n        </svg>\n      }\n      @default {\n        <svg class=\"cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\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\" />\n          </svg>\n        }\n      }\n    }\n\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\n  </button>" }]
         }], ctorParameters: () => [{ type: CmatDatetimepickerIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { datetimepicker: [{
                 type: Input,
                 args: ['for']