cmat 0.0.87 → 0.0.88

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

@@ -1,6 +1,6 @@
 import { NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, HostListener, Input, HostBinding, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, signal, Directive, DestroyRef, ViewChild, InjectionToken, Injector, ViewContainerRef, DOCUMENT, afterNextRender, forwardRef, ContentChild } from '@angular/core';
+import { output, input, signal, computed, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, untracked, Directive, viewChild, DestroyRef, model, InjectionToken, EventEmitter, Injector, ViewContainerRef, DOCUMENT, afterNextRender, forwardRef, contentChild } from '@angular/core';
 import { DatetimeAdapter, CMAT_DATETIME_FORMATS } from 'cmat/components/adapter';
 import { coerceNumberProperty, coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -33,96 +33,107 @@ const CLOCK_OUTER_RADIUS = 41.25;
 const CLOCK_TICK_RADIUS = 7.0833;
 class CmatDatetimepickerClockComponent {
     constructor() {
-        this.userSelection = new EventEmitter();
-        this.interval = 1;
-        this.twelvehour = false;
-        this.selectedChange = new EventEmitter();
-        this.activeDateChange = new EventEmitter();
-        this.role = 'clock';
-        this.class = 'cmat-datetimepicker-clock';
-        this.hours = [];
-        this.minutes = [];
-        this.hourView = true;
+        this.userSelection = output();
+        this.selectedChange = output();
+        this.activeDateChange = output();
+        this.dateFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.interval = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
+        this.twelvehour = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "twelvehour" }] : /* istanbul ignore next */ []));
+        this.minDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.selected = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.startView = input('hour', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+        this.activeDate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+        this.hours = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
+        this.minutes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
+        this.hourView = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourView" }] : /* istanbul ignore next */ []));
+        this.selectedHour = computed(() => {
+            let hour = this._adapter.getHour(this._clampedActiveDate());
+            if (this.twelvehour()) {
+                if (hour === 0) {
+                    hour = 24;
+                }
+                return hour > 12 ? hour - 12 : hour;
+            }
+            return hour;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedHour" }] : /* istanbul ignore next */ []));
+        this.selectedMinute = computed(() => {
+            return this._adapter.getMinute(this._clampedActiveDate());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMinute" }] : /* istanbul ignore next */ []));
+        this._clampedActiveDate = computed(() => {
+            const date = this._internalDate();
+            if (!date) {
+                return this._adapter.today();
+            }
+            return this._adapter.clampDate(date, this.minDate(), this.maxDate());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_clampedActiveDate" }] : /* istanbul ignore next */ []));
+        this.hand = computed(() => {
+            const twelvehour = this.twelvehour();
+            let deg;
+            let radius = CLOCK_OUTER_RADIUS;
+            if (this.hourView()) {
+                const outer = this.selectedHour() > 0 && this.selectedHour() < 13;
+                radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
+                if (twelvehour) {
+                    radius = CLOCK_OUTER_RADIUS;
+                }
+                deg = Math.round(this.selectedHour() * (360 / (24 / 2)));
+            }
+            else {
+                deg = Math.round(this.selectedMinute() * (360 / 60));
+            }
+            return {
+                'transform': `rotate(${deg}deg)`,
+                'height': `${radius}%`,
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'margin-top': `${50 - radius}%`,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hand" }] : /* istanbul ignore next */ []));
         this._element = inject(ElementRef);
         this._adapter = inject(DatetimeAdapter);
+        this._renderer = inject(Renderer2);
         this._timeChanged = false;
+        this._internalDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_internalDate" }] : /* istanbul ignore next */ []));
         this._mouseMoveListener = (event) => {
             this.handleMousemove(event);
         };
         this._mouseUpListener = () => {
             this.handleMouseup();
         };
-    }
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        this._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
-        if (!this._adapter.sameMinute(oldActiveDate, this._activeDate)) {
-            this._init();
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-        if (this._selected) {
-            this.activeDate = this._selected;
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    set startView(value) {
-        this.hourView = value !== 'minute';
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get hand() {
-        let hour = this._adapter.getHour(this.activeDate);
-        if (this.twelvehour) {
-            if (hour === 0) {
-                hour = 24;
-            }
-            this.selectedHour = hour > 12 ? (hour - 12) : hour;
-        }
-        else {
-            this.selectedHour = hour;
-        }
-        this.selectedMinute = this._adapter.getMinute(this.activeDate);
-        let deg;
-        let radius = CLOCK_OUTER_RADIUS;
-        if (this.hourView) {
-            const outer = this.selectedHour > 0 && this.selectedHour < 13;
-            radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
-            if (this.twelvehour) {
-                radius = CLOCK_OUTER_RADIUS;
+        // Watch for startView changes
+        effect(() => {
+            this.hourView.set(this.startView() !== 'minute');
+        });
+        // Watch for selected changes
+        effect(() => {
+            const selectedValue = this.selected();
+            if (selectedValue) {
+                this._internalDate.set(selectedValue);
             }
-            deg = Math.round(this.selectedHour * (360 / (24 / 2)));
-        }
-        else {
-            deg = Math.round(this.selectedMinute * (360 / 60));
-        }
-        return {
-            'transform': `rotate(${deg}deg)`,
-            'height': `${radius}%`,
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            'margin-top': `${50 - radius}%`
-        };
+        });
+        // Watch for activeDate input changes
+        effect(() => {
+            this._internalDate.set(this.activeDate());
+        });
+    }
+    get activeDateValue() {
+        return this.activeDate();
     }
     handleMousedown(event) {
         this._timeChanged = false;
@@ -133,11 +144,14 @@ class CmatDatetimepickerClockComponent {
         document.addEventListener('touchend', this._mouseUpListener);
     }
     ngAfterContentInit() {
-        this.activeDate = this._activeDate || this._adapter.today();
         this._init();
+        this._mousedownListener = this._renderer.listen(this._element.nativeElement, 'mousedown', (event) => this.handleMousedown(event));
     }
     ngOnDestroy() {
         this._removeDocumentListeners();
+        if (this._mousedownListener) {
+            this._mousedownListener();
+        }
     }
     handleMousemove(event) {
         event.preventDefault();
@@ -146,8 +160,8 @@ class CmatDatetimepickerClockComponent {
     handleMouseup() {
         this._removeDocumentListeners();
         if (this._timeChanged) {
-            this.selectedChange.emit(this.activeDate);
-            if (!this.hourView) {
+            this.selectedChange.emit(this._clampedActiveDate());
+            if (!this.hourView()) {
                 this.userSelection.emit();
             }
         }
@@ -159,59 +173,75 @@ class CmatDatetimepickerClockComponent {
         document.removeEventListener('touchend', this._mouseUpListener);
     }
     _init() {
-        this.hours.length = 0;
-        this.minutes.length = 0;
+        const hoursList = [];
+        const minutesList = [];
         const hourNames = this._adapter.getHourNames();
         const minuteNames = this._adapter.getMinuteNames();
-        if (this.twelvehour) {
-            for (let i = 1; i < (hourNames.length / 2) + 1; i++) {
-                const radian = i / 6 * Math.PI;
+        const currentDate = this._clampedActiveDate();
+        if (this.twelvehour()) {
+            for (let i = 1; i < hourNames.length / 2 + 1; i++) {
+                const radian = (i / 6) * Math.PI;
                 const radius = CLOCK_OUTER_RADIUS;
-                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i + 1, 0);
-                const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate) >= 0) &&
-                    (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate) <= 0);
-                this.hours.push({
+                const date = this._adapter.createDatetime(this._adapter.getYear(currentDate), this._adapter.getMonth(currentDate), this._adapter.getDate(currentDate), i + 1, 0);
+                const enabled = (!this.minDate() ||
+                    this._adapter.compareDatetime(date, this.minDate()) >=
+                        0) &&
+                    (!this.maxDate() ||
+                        this._adapter.compareDatetime(date, this.maxDate()) <= 0);
+                hoursList.push({
                     value: i,
                     displayValue: i === 0 ? '00' : hourNames[i],
                     enabled: enabled,
                     top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
-                    left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS
+                    left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
                 });
             }
         }
         else {
             for (let i = 0; i < hourNames.length; i++) {
-                const radian = i / 6 * Math.PI;
+                const radian = (i / 6) * Math.PI;
                 const outer = i > 0 && i < 13;
                 const radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
-                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i, 0);
-                const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate, false) >= 0) &&
-                    (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate, false) <= 0) &&
-                    (!this.dateFilter || this.dateFilter(date, CmatDatetimepickerFilterType.HOUR));
-                this.hours.push({
+                const date = this._adapter.createDatetime(this._adapter.getYear(currentDate), this._adapter.getMonth(currentDate), this._adapter.getDate(currentDate), i, 0);
+                const dateFilter = this.dateFilter();
+                const enabled = (!this.minDate() ||
+                    this._adapter.compareDatetime(date, this.minDate(), false) >= 0) &&
+                    (!this.maxDate() ||
+                        this._adapter.compareDatetime(date, this.maxDate(), false) <= 0) &&
+                    (!dateFilter || dateFilter(date, CmatDatetimepickerFilterType.HOUR));
+                hoursList.push({
                     value: i,
                     displayValue: i === 0 ? '00' : hourNames[i],
                     enabled: enabled,
                     top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
                     left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
-                    fontSize: i > 0 && i < 13 ? '' : '80%'
+                    fontSize: i > 0 && i < 13 ? '' : '80%',
                 });
             }
         }
         for (let i = 0; i < minuteNames.length; i += 5) {
-            const radian = i / 30 * Math.PI;
-            const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), i);
-            const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate) >= 0) &&
-                (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate) <= 0) &&
-                (!this.dateFilter || this.dateFilter(date, CmatDatetimepickerFilterType.MINUTE));
-            this.minutes.push({
+            const radian = (i / 30) * Math.PI;
+            const date = this._adapter.createDatetime(this._adapter.getYear(currentDate), this._adapter.getMonth(currentDate), this._adapter.getDate(currentDate), this._adapter.getHour(currentDate), i);
+            const dateFilter = this.dateFilter();
+            const enabled = (!this.minDate() ||
+                this._adapter.compareDatetime(date, this.minDate()) >= 0) &&
+                (!this.maxDate() ||
+                    this._adapter.compareDatetime(date, this.maxDate()) <= 0) &&
+                (!dateFilter || dateFilter(date, CmatDatetimepickerFilterType.MINUTE));
+            minutesList.push({
                 value: i,
                 displayValue: i === 0 ? '00' : minuteNames[i],
                 enabled: enabled,
-                top: CLOCK_RADIUS - Math.cos(radian) * CLOCK_OUTER_RADIUS - CLOCK_TICK_RADIUS,
-                left: CLOCK_RADIUS + Math.sin(radian) * CLOCK_OUTER_RADIUS - CLOCK_TICK_RADIUS
+                top: CLOCK_RADIUS -
+                    Math.cos(radian) * CLOCK_OUTER_RADIUS -
+                    CLOCK_TICK_RADIUS,
+                left: CLOCK_RADIUS +
+                    Math.sin(radian) * CLOCK_OUTER_RADIUS -
+                    CLOCK_TICK_RADIUS,
             });
         }
+        this.hours.set(hoursList);
+        this.minutes.set(minutesList);
     }
     _setTime(event) {
         const trigger = this._element.nativeElement;
@@ -220,81 +250,65 @@ class CmatDatetimepickerClockComponent {
         const height = trigger.offsetHeight;
         const pageX = event instanceof MouseEvent ? event.pageX : event.touches[0].pageX;
         const pageY = event instanceof MouseEvent ? event.pageY : event.touches[0].pageY;
-        const x = (width / 2) - (pageX - triggerRect.left - window.scrollX);
-        const y = (height / 2) - (pageY - triggerRect.top - window.scrollY);
+        const x = width / 2 - (pageX - triggerRect.left - window.scrollX);
+        const y = height / 2 - (pageY - triggerRect.top - window.scrollY);
         let radian = Math.atan2(-x, y);
-        const unit = Math.PI / (this.hourView ? 6 : (this.interval ? (30 / this.interval) : 30));
+        const interval = this.interval();
+        const unit = Math.PI / (this.hourView() ? 6 : interval ? 30 / interval : 30);
         const z = Math.sqrt(x * x + y * y);
-        const outer = this.hourView && z > ((width * (CLOCK_OUTER_RADIUS / 100)) +
-            (width * (CLOCK_INNER_RADIUS / 100))) / 2;
+        const outer = this.hourView() &&
+            z >
+                (width * (CLOCK_OUTER_RADIUS / 100) +
+                    width * (CLOCK_INNER_RADIUS / 100)) /
+                    2;
         if (radian < 0) {
             radian = Math.PI * 2 + radian;
         }
         let value = Math.round(radian / unit);
         let date;
-        if (this.hourView) {
-            if (this.twelvehour) {
+        const currentDate = this._clampedActiveDate();
+        if (this.hourView()) {
+            if (this.twelvehour()) {
                 value = value === 0 ? 12 : value;
             }
             else {
                 if (value === 12) {
                     value = 0;
                 }
-                value = outer ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+                value = outer
+                    ? value === 0
+                        ? 12
+                        : value
+                    : value === 0
+                        ? 0
+                        : value + 12;
             }
-            date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), value, this._adapter.getMinute(this.activeDate));
+            date = this._adapter.createDatetime(this._adapter.getYear(currentDate), this._adapter.getMonth(currentDate), this._adapter.getDate(currentDate), value, this._adapter.getMinute(currentDate));
         }
         else {
-            if (this.interval) {
-                value *= this.interval;
+            const intervalValue = this.interval();
+            if (intervalValue) {
+                value *= intervalValue;
             }
             if (value === 60) {
                 value = 0;
             }
-            date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
+            date = this._adapter.createDatetime(this._adapter.getYear(currentDate), this._adapter.getMonth(currentDate), this._adapter.getDate(currentDate), this._adapter.getHour(currentDate), value);
         }
         this._timeChanged = true;
-        this.activeDate = date;
-        this.activeDateChange.emit(this.activeDate);
+        this._internalDate.set(date);
+        this.activeDateChange.emit(this._clampedActiveDate());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDatetimepickerClockComponent, isStandalone: true, selector: "cmat-datetimepicker-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "role": "this.role", "class": "this.class" } }, exportAs: ["cmatDatetimepickerClock"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hand\" [ngStyle]=\"hand\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hours\" [class.active]=\"hourView\">\r\n    @for (item of hours; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\r\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\">\r\n      {{ item.displayValue }}</div>\r\n    }\r\n  </div>\r\n  <div class=\"cmat-datetimepicker-clock-minutes\" [class.active]=\"!hourView\">\r\n    @for (item of minutes; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\" [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\">{{ item.displayValue\r\n      }}</div>\r\n    }\r\n  </div>\r\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.cmat-datetimepicker-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.cmat-datetimepicker-clock-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.cmat-datetimepicker-clock-hours,.cmat-datetimepicker-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDatetimepickerClockComponent, isStandalone: true, selector: "cmat-datetimepicker-clock", inputs: { dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, twelvehour: { classPropertyName: "twelvehour", publicName: "twelvehour", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, host: { attributes: { "role": "clock" }, classAttribute: "cmat-datetimepicker-clock" }, exportAs: ["cmatDatetimepickerClock"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hand\" [ngStyle]=\"hand()\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hours\" [class.active]=\"hourView()\">\r\n    @for (item of hours(); track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour() === item.value\"\r\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\">\r\n      {{ item.displayValue }}</div>\r\n    }\r\n  </div>\r\n  <div class=\"cmat-datetimepicker-clock-minutes\" [class.active]=\"!hourView()\">\r\n    @for (item of minutes(); track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute() === item.value\" [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\">{{ item.displayValue\r\n      }}</div>\r\n    }\r\n  </div>\r\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.cmat-datetimepicker-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.cmat-datetimepicker-clock-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.cmat-datetimepicker-clock-hours,.cmat-datetimepicker-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-clock', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerClock', imports: [NgStyle], template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hand\" [ngStyle]=\"hand\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hours\" [class.active]=\"hourView\">\r\n    @for (item of hours; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\r\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\">\r\n      {{ item.displayValue }}</div>\r\n    }\r\n  </div>\r\n  <div class=\"cmat-datetimepicker-clock-minutes\" [class.active]=\"!hourView\">\r\n    @for (item of minutes; track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\" [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\">{{ item.displayValue\r\n      }}</div>\r\n    }\r\n  </div>\r\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.cmat-datetimepicker-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.cmat-datetimepicker-clock-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.cmat-datetimepicker-clock-hours,.cmat-datetimepicker-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { userSelection: [{
-                type: Output
-            }], dateFilter: [{
-                type: Input
-            }], interval: [{
-                type: Input
-            }], twelvehour: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], activeDateChange: [{
-                type: Output
-            }], role: [{
-                type: HostBinding,
-                args: ['role']
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], startView: [{
-                type: Input
-            }], handleMousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }] } });
+            args: [{ selector: 'cmat-datetimepicker-clock', host: {
+                        'role': 'clock',
+                        'class': 'cmat-datetimepicker-clock',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerClock', imports: [NgStyle], template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\r\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hand\" [ngStyle]=\"hand()\"></div>\r\n  <div class=\"cmat-datetimepicker-clock-hours\" [class.active]=\"hourView()\">\r\n    @for (item of hours(); track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour() === item.value\"\r\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\">\r\n      {{ item.displayValue }}</div>\r\n    }\r\n  </div>\r\n  <div class=\"cmat-datetimepicker-clock-minutes\" [class.active]=\"!hourView()\">\r\n    @for (item of minutes(); track $index) {\r\n      <div class=\"cmat-datetimepicker-clock-cell\"\r\n        [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\r\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute() === item.value\" [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\">{{ item.displayValue\r\n      }}</div>\r\n    }\r\n  </div>\r\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.cmat-datetimepicker-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.cmat-datetimepicker-clock-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.cmat-datetimepicker-clock-hours,.cmat-datetimepicker-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { userSelection: [{ type: i0.Output, args: ["userSelection"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], twelvehour: [{ type: i0.Input, args: [{ isSignal: true, alias: "twelvehour", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }] } });
 
 function createMissingDateImplError(provider) {
     return Error(`CmatDatetimepickerComponent: No provider found for ${provider}. You must import one of the following ` +
@@ -330,10 +344,10 @@ class CmatDatetimepickerIntl {
     formatYearRangeLabel(start, end) {
         return `${start} to ${end}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -348,67 +362,87 @@ class CmatDatetimepickerCalendarCellComponent {
 }
 class CmatDatetimepickerCalendarBodyComponent {
     constructor() {
-        this.numCols = 7;
-        this.allowDisabledSelection = false;
-        this.activeCell = 0;
-        this.selectedValueChange = new EventEmitter();
-        this.class = 'cmat-datetimepicker-calendar-body';
+        this.selectedValueChange = output();
+        this.label = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.rows = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.todayValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "todayValue" }] : /* istanbul ignore next */ []));
+        this.selectedValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+        this.labelMinRequiredCells = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelMinRequiredCells" }] : /* istanbul ignore next */ []));
+        this.numCols = input(7, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numCols" }] : /* istanbul ignore next */ []));
+        this.allowDisabledSelection = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowDisabledSelection" }] : /* istanbul ignore next */ []));
+        this.activeCell = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
     }
     get _firstRowOffset() {
-        return this.rows?.length && this.rows[0].length ?
-            this.numCols - this.rows[0].length : 0;
+        const rows = this.rows();
+        return rows?.length && rows[0].length ? this.numCols() - rows[0].length : 0;
     }
     cellClicked(cell) {
-        if (!this.allowDisabledSelection && !cell.enabled) {
+        if (!this.allowDisabledSelection() && !cell.enabled) {
             return;
         }
         this.selectedValueChange.emit(cell.value);
     }
     isActiveCell(rowIndex, colIndex) {
-        let cellNumber = rowIndex * this.numCols + colIndex;
+        let cellNumber = rowIndex * this.numCols() + colIndex;
         if (rowIndex) {
             cellNumber -= this._firstRowOffset;
         }
-        return cellNumber === this.activeCell;
+        return cellNumber === this.activeCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDatetimepickerCalendarBodyComponent, isStandalone: true, selector: "[cmat-datetimepicker-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { properties: { "class": "this.class" } }, exportAs: ["cmatDatetimepickerCalendarBody"], ngImport: i0, template: "\r\n@if (_firstRowOffset < labelMinRequiredCells) {\r\n  <tr aria-hidden=\"true\">\r\n    <td class=\"cmat-datetimepicker-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\r\n  </tr>\r\n}\r\n\r\n\r\n@for (row of rows; track $index; let rowIndex = $index) {\r\n  <tr role=\"row\">\r\n    \r\n    @if (rowIndex === 0 && _firstRowOffset) {\r\n      <td aria-hidden=\"true\" class=\"cmat-datetimepicker-calendar-body-label\"\r\n        [attr.colspan]=\"_firstRowOffset\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n      </td>\r\n    }\r\n    @for (item of row; track $index; let colIndex = $index) {\r\n      <td role=\"presentation\" class=\"cmat-datetimepicker-calendar-body-cell\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\" (click)=\"cellClicked(item)\">\r\n        <div class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n          [attr.aria-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\">\r\n          {{ item.displayValue }}\r\n        </div>\r\n      </td>\r\n    }\r\n  </tr>\r\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDatetimepickerCalendarBodyComponent, isStandalone: true, selector: "[cmat-datetimepicker-calendar-body]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, todayValue: { classPropertyName: "todayValue", publicName: "todayValue", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, labelMinRequiredCells: { classPropertyName: "labelMinRequiredCells", publicName: "labelMinRequiredCells", isSignal: true, isRequired: false, transformFunction: null }, numCols: { classPropertyName: "numCols", publicName: "numCols", isSignal: true, isRequired: false, transformFunction: null }, allowDisabledSelection: { classPropertyName: "allowDisabledSelection", publicName: "allowDisabledSelection", isSignal: true, isRequired: false, transformFunction: null }, activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "cmat-datetimepicker-calendar-body" }, exportAs: ["cmatDatetimepickerCalendarBody"], ngImport: i0, template: "@if (_firstRowOffset < labelMinRequiredCells()) {\r\n<tr aria-hidden=\"true\">\r\n  <td\r\n    class=\"cmat-datetimepicker-calendar-body-label\"\r\n    [attr.colspan]=\"numCols()\"\r\n  >\r\n    {{ label() }}\r\n  </td>\r\n</tr>\r\n} @for (row of rows(); track $index; let rowIndex = $index) {\r\n<tr role=\"row\">\r\n  @if (rowIndex === 0 && _firstRowOffset) {\r\n  <td\r\n    aria-hidden=\"true\"\r\n    class=\"cmat-datetimepicker-calendar-body-label\"\r\n    [attr.colspan]=\"_firstRowOffset\"\r\n  >\r\n    {{ _firstRowOffset >= labelMinRequiredCells() ? label() : '' }}\r\n  </td>\r\n  } @for (item of row; track $index; let colIndex = $index) {\r\n  <td\r\n    role=\"presentation\"\r\n    class=\"cmat-datetimepicker-calendar-body-cell\"\r\n    [attr.aria-disabled]=\"!item.enabled || null\"\r\n    [attr.aria-label]=\"item.ariaLabel\"\r\n    [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n    [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\"\r\n    (click)=\"cellClicked(item)\"\r\n  >\r\n    <div\r\n      class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n      [attr.aria-selected]=\"selectedValue() === item.value\"\r\n      [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue() === item.value\"\r\n      [class.cmat-datetimepicker-calendar-body-today]=\"todayValue() === item.value\"\r\n    >\r\n      {{ item.displayValue }}\r\n    </div>\r\n  </td>\r\n  }\r\n</tr>\r\n}\r\n", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[cmat-datetimepicker-calendar-body]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendarBody', imports: [], template: "\r\n@if (_firstRowOffset < labelMinRequiredCells) {\r\n  <tr aria-hidden=\"true\">\r\n    <td class=\"cmat-datetimepicker-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\r\n  </tr>\r\n}\r\n\r\n\r\n@for (row of rows; track $index; let rowIndex = $index) {\r\n  <tr role=\"row\">\r\n    \r\n    @if (rowIndex === 0 && _firstRowOffset) {\r\n      <td aria-hidden=\"true\" class=\"cmat-datetimepicker-calendar-body-label\"\r\n        [attr.colspan]=\"_firstRowOffset\">\r\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\r\n      </td>\r\n    }\r\n    @for (item of row; track $index; let colIndex = $index) {\r\n      <td role=\"presentation\" class=\"cmat-datetimepicker-calendar-body-cell\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\" (click)=\"cellClicked(item)\">\r\n        <div class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n          [attr.aria-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\r\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\">\r\n          {{ item.displayValue }}\r\n        </div>\r\n      </td>\r\n    }\r\n  </tr>\r\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], todayValue: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], labelMinRequiredCells: [{
-                type: Input
-            }], numCols: [{
-                type: Input
-            }], allowDisabledSelection: [{
-                type: Input
-            }], activeCell: [{
-                type: Input
-            }], selectedValueChange: [{
-                type: Output
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: '[cmat-datetimepicker-calendar-body]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendarBody', imports: [], host: { 'class': 'cmat-datetimepicker-calendar-body' }, template: "@if (_firstRowOffset < labelMinRequiredCells()) {\r\n<tr aria-hidden=\"true\">\r\n  <td\r\n    class=\"cmat-datetimepicker-calendar-body-label\"\r\n    [attr.colspan]=\"numCols()\"\r\n  >\r\n    {{ label() }}\r\n  </td>\r\n</tr>\r\n} @for (row of rows(); track $index; let rowIndex = $index) {\r\n<tr role=\"row\">\r\n  @if (rowIndex === 0 && _firstRowOffset) {\r\n  <td\r\n    aria-hidden=\"true\"\r\n    class=\"cmat-datetimepicker-calendar-body-label\"\r\n    [attr.colspan]=\"_firstRowOffset\"\r\n  >\r\n    {{ _firstRowOffset >= labelMinRequiredCells() ? label() : '' }}\r\n  </td>\r\n  } @for (item of row; track $index; let colIndex = $index) {\r\n  <td\r\n    role=\"presentation\"\r\n    class=\"cmat-datetimepicker-calendar-body-cell\"\r\n    [attr.aria-disabled]=\"!item.enabled || null\"\r\n    [attr.aria-label]=\"item.ariaLabel\"\r\n    [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\r\n    [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\"\r\n    (click)=\"cellClicked(item)\"\r\n  >\r\n    <div\r\n      class=\"cmat-datetimepicker-calendar-body-cell-content\"\r\n      [attr.aria-selected]=\"selectedValue() === item.value\"\r\n      [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue() === item.value\"\r\n      [class.cmat-datetimepicker-calendar-body-today]=\"todayValue() === item.value\"\r\n    >\r\n      {{ item.displayValue }}\r\n    </div>\r\n  </td>\r\n  }\r\n</tr>\r\n}\r\n", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:calc(14.2857142857% / 2) 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:calc(14.2857142857% / 2) 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
+        }], propDecorators: { selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], todayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayValue", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], labelMinRequiredCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMinRequiredCells", required: false }] }], numCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "numCols", required: false }] }], allowDisabledSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDisabledSelection", required: false }] }], activeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCell", required: false }] }] } });
 
 const DAYS_PER_WEEK = 7;
 class CmatDatetimepickerMonthViewComponent {
     constructor() {
-        this.type = 'date';
-        this.userSelection = new EventEmitter();
-        this.selectedChange = new EventEmitter();
-        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.userSelection = output();
+        this.selectedChange = output();
+        this.type = input('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.dateFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.minDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.selected = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.weeks = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+        this.firstWeekOffset = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstWeekOffset" }] : /* istanbul ignore next */ []));
+        this.selectedDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+        this.todayDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayDate" }] : /* istanbul ignore next */ []));
+        this.calendarState = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.activeDate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+        this.resolvedActiveDate = computed(() => {
+            const date = this._activeDate();
+            return date ?? this.adapter.today();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedActiveDate" }] : /* istanbul ignore next */ []));
         this.adapter = inject(DatetimeAdapter, { optional: true });
-        this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
+        this._dateFormats = inject(CMAT_DATETIME_FORMATS, {
+            optional: true,
+        });
+        this._activeDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_activeDate" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
         if (!this.adapter) {
@@ -420,35 +454,33 @@ class CmatDatetimepickerMonthViewComponent {
         const firstDayOfWeek = this.adapter.getFirstDayOfWeek();
         const narrowWeekdays = this.adapter.getDayOfWeekNames('narrow');
         const longWeekdays = this.adapter.getDayOfWeekNames('long');
-        const weekdays = longWeekdays.map((long, i) => ({ long, narrow: narrowWeekdays[i] }));
-        this.weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
-        this._activeDate = this.adapter.today();
+        const weekdays = longWeekdays.map((long, i) => ({
+            long,
+            narrow: narrowWeekdays[i],
+        }));
+        this.weekdays = weekdays
+            .slice(firstDayOfWeek)
+            .concat(weekdays.slice(0, firstDayOfWeek));
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
-    }
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        this._activeDate = value || this.adapter.today();
-        if (oldActiveDate && this._activeDate &&
-            !this.adapter.sameMonthAndYear(oldActiveDate, this._activeDate)) {
-            this._init();
-            if (this.adapter.isInNextMonth(oldActiveDate, this._activeDate)) {
-                this._changeCalendarState('right');
-            }
-            else {
-                this._changeCalendarState('left');
-            }
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = value;
-        this.selectedDate = this._getDateInCurrentMonth(this.selected);
+        effect(() => {
+            const value = this.activeDate();
+            const oldActiveDate = this._activeDate();
+            this._activeDate.set(value ?? this.adapter.today());
+            const newActiveDate = this.resolvedActiveDate();
+            untracked(() => {
+                if (oldActiveDate &&
+                    newActiveDate &&
+                    !this.adapter.sameMonthAndYear(oldActiveDate, newActiveDate)) {
+                    this._init();
+                    if (this.adapter.isInNextMonth(oldActiveDate, newActiveDate)) {
+                        this._changeCalendarState('right');
+                    }
+                    else {
+                        this._changeCalendarState('left');
+                    }
+                }
+            });
+        });
     }
     ngAfterContentInit() {
         this._init();
@@ -457,79 +489,106 @@ class CmatDatetimepickerMonthViewComponent {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
     }
     dateSelected(date) {
-        this.selectedChange.emit(this.adapter.createDatetime(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate), date, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate)));
-        if (this.type === 'date') {
+        const currentDate = this.resolvedActiveDate();
+        this.selectedChange.emit(this.adapter.createDatetime(this.adapter.getYear(currentDate), this.adapter.getMonth(currentDate), date, this.adapter.getHour(currentDate), this.adapter.getMinute(currentDate)));
+        if (this.type() === 'date') {
             this.userSelection.emit();
         }
     }
     calendarStateDone(event) {
-        if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
+        if (event.animationName === 'slideCalendarLeft' ||
+            event.animationName === 'slideCalendarRight') {
             this.calendarState.set('');
         }
     }
     _init() {
-        this.selectedDate = this._getDateInCurrentMonth(this.selected);
-        this.todayDate = this._getDateInCurrentMonth(this.adapter.today());
-        const firstOfMonth = this.adapter.createDatetime(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate), 1, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate));
-        this.firstWeekOffset =
-            (DAYS_PER_WEEK + this.adapter.getDayOfWeek(firstOfMonth) -
-                this.adapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
+        const selectedValue = this.selected();
+        this.selectedDate.set(this._getDateInCurrentMonth(selectedValue));
+        this.todayDate.set(this._getDateInCurrentMonth(this.adapter.today()));
+        const currentDate = this.resolvedActiveDate();
+        const firstOfMonth = this.adapter.createDatetime(this.adapter.getYear(currentDate), this.adapter.getMonth(currentDate), 1, this.adapter.getHour(currentDate), this.adapter.getMinute(currentDate));
+        this.firstWeekOffset.set((DAYS_PER_WEEK +
+            this.adapter.getDayOfWeek(firstOfMonth) -
+            this.adapter.getFirstDayOfWeek()) %
+            DAYS_PER_WEEK);
         this._createWeekCells();
     }
     _createWeekCells() {
-        const daysInMonth = this.adapter.getNumDaysInMonth(this.activeDate);
+        const currentDate = this.resolvedActiveDate();
+        const daysInMonth = this.adapter.getNumDaysInMonth(currentDate);
         const dateNames = this.adapter.getDateNames();
-        this.weeks = [[]];
-        for (let i = 0, cell = this.firstWeekOffset; i < daysInMonth; i++, cell++) {
+        const weeksList = [[]];
+        for (let i = 0, cell = this.firstWeekOffset(); i < daysInMonth; i++, cell++) {
             if (cell === DAYS_PER_WEEK) {
-                this.weeks.push([]);
+                weeksList.push([]);
                 cell = 0;
             }
-            const date = this.adapter.createDatetime(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate), i + 1, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate));
-            const enabled = !this.dateFilter ||
-                this.dateFilter(date);
+            const date = this.adapter.createDatetime(this.adapter.getYear(currentDate), this.adapter.getMonth(currentDate), i + 1, this.adapter.getHour(currentDate), this.adapter.getMinute(currentDate));
+            const dateFilter = this.dateFilter();
+            const enabled = !dateFilter || dateFilter(date);
             const ariaLabel = this.adapter.format(date, this._dateFormats.display.dateA11yLabel);
-            this.weeks[this.weeks.length - 1]
-                .push(new CmatDatetimepickerCalendarCellComponent(i + 1, dateNames[i], ariaLabel, enabled));
+            weeksList[weeksList.length - 1].push(new CmatDatetimepickerCalendarCellComponent(i + 1, dateNames[i], ariaLabel, enabled));
         }
+        this.weeks.set(weeksList);
     }
     _getDateInCurrentMonth(date) {
-        return this.adapter.sameMonthAndYear(date, this.activeDate) ?
-            this.adapter.getDate(date) : null;
+        if (!date) {
+            return null;
+        }
+        return this.adapter.sameMonthAndYear(date, this.resolvedActiveDate())
+            ? this.adapter.getDate(date)
+            : null;
     }
     _changeCalendarState(direction) {
         this.calendarState.set(direction);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDatetimepickerMonthViewComponent, isStandalone: true, selector: "cmat-datetimepicker-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMonthView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n    [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDatetimepickerMonthViewComponent, isStandalone: true, selector: "cmat-datetimepicker-month-view", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMonthView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate()) - 1\" [rows]=\"weeks()\"\r\n    [selectedValue]=\"selectedDate()\" [todayValue]=\"todayDate()\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerMonthViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-month-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMonthView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate) - 1\" [rows]=\"weeks\"\r\n    [selectedValue]=\"selectedDate\" [todayValue]=\"todayDate\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{
-                type: Input
-            }], userSelection: [{
-                type: Output
-            }], dateFilter: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-datetimepicker-month-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMonthView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n  <thead class=\"cmat-datetimepicker-calendar-table-header\">\r\n    <tr>\r\n      @for (day of weekdays; track $index) {\r\n      <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\r\n      }\r\n    </tr>\r\n    <tr>\r\n      <th colspan=\"7\" class=\"cmat-calendar-table-header-divider\"></th>\r\n    </tr>\r\n  </thead>\r\n  <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n    [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getDate(activeDate()) - 1\" [rows]=\"weeks()\"\r\n    [selectedValue]=\"selectedDate()\" [todayValue]=\"todayDate()\" (selectedValueChange)=\"dateSelected($event)\">\r\n  </tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { userSelection: [{ type: i0.Output, args: ["userSelection"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }] } });
 
 const yearsPerPage = 24;
 const yearsPerRow = 4;
 class CmatDatetimepickerMultiYearViewComponent {
     constructor() {
-        this.userSelection = new EventEmitter();
-        this.type = 'date';
-        this.selectedChange = new EventEmitter();
-        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.userSelection = output();
+        this.selectedChange = output();
+        this.type = input('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.dateFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.minDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.selected = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.years = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+        this.yearLabel = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearLabel" }] : /* istanbul ignore next */ []));
+        this.todayYear = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayYear" }] : /* istanbul ignore next */ []));
+        this.selectedYear = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedYear" }] : /* istanbul ignore next */ []));
+        this.calendarState = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.activeDate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+        this.resolvedActiveDate = computed(() => {
+            const date = this._activeDate();
+            return date ?? this.adapter.today();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedActiveDate" }] : /* istanbul ignore next */ []));
         this.adapter = inject(DatetimeAdapter, { optional: true });
-        this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
+        this._dateFormats = inject(CMAT_DATETIME_FORMATS, {
+            optional: true,
+        });
+        this._activeDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_activeDate" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
         if (!this.adapter) {
@@ -538,47 +597,27 @@ class CmatDatetimepickerMultiYearViewComponent {
         if (!this._dateFormats) {
             throw createMissingDateImplError('CMAT_DATETIME_FORMATS');
         }
-        this._activeDate = this.adapter.today();
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
-    }
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        this._activeDate = value || this.adapter.today();
-        if (oldActiveDate && this._activeDate &&
-            !isSameMultiYearView(this.adapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
-            this._init();
-            if (this.adapter.isInNextMonth(oldActiveDate, this._activeDate)) {
-                this._changeCalendarState('right');
-            }
-            else {
-                this._changeCalendarState('left');
-            }
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = value;
-        this.selectedYear = this._selected && this.adapter.getYear(this._selected);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this._getValidDateOrNull(this.adapter.deserialize(value));
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this._getValidDateOrNull(this.adapter.deserialize(value));
+        effect(() => {
+            const inputValue = this.activeDate();
+            const newActiveDate = inputValue ?? this.adapter.today();
+            const oldActiveDate = this._previousActiveDate;
+            this._activeDate.set(newActiveDate);
+            this._previousActiveDate = newActiveDate;
+            untracked(() => {
+                if (oldActiveDate &&
+                    newActiveDate &&
+                    !isSameMultiYearView(this.adapter, oldActiveDate, newActiveDate, this.minDate(), this.maxDate())) {
+                    this._init();
+                    if (this.adapter.isInNextMonth(oldActiveDate, newActiveDate)) {
+                        this._changeCalendarState('right');
+                    }
+                    else {
+                        this._changeCalendarState('left');
+                    }
+                }
+            });
+        });
     }
     ngAfterContentInit() {
         this._init();
@@ -587,95 +626,82 @@ class CmatDatetimepickerMultiYearViewComponent {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
     }
     yearSelected(year) {
-        const month = this.adapter.getMonth(this.activeDate);
+        const currentDate = this.resolvedActiveDate();
+        const month = this.adapter.getMonth(currentDate);
         const normalizedDate = this.adapter.createDatetime(year, month, 1, 0, 0);
-        this.selectedChange.emit(this.adapter.createDatetime(year, month, Math.min(this.adapter.getDate(this.activeDate), this.adapter.getNumDaysInMonth(normalizedDate)), this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate)));
-        if (this.type === 'year') {
+        this.selectedChange.emit(this.adapter.createDatetime(year, month, Math.min(this.adapter.getDate(currentDate), this.adapter.getNumDaysInMonth(normalizedDate)), this.adapter.getHour(currentDate), this.adapter.getMinute(currentDate)));
+        if (this.type() === 'year') {
             this.userSelection.emit();
         }
     }
     getActiveCell() {
-        return getActiveOffset(this.adapter, this.activeDate, this.minDate, this.maxDate);
+        return getActiveOffset(this.adapter, this.resolvedActiveDate(), this.minDate(), this.maxDate());
     }
     calendarStateDone(event) {
-        if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
+        if (event.animationName === 'slideCalendarLeft' ||
+            event.animationName === 'slideCalendarRight') {
             this.calendarState.set('');
         }
     }
     _init() {
-        this.todayYear = this.adapter.getYear(this.adapter.today());
-        this.yearLabel = this.adapter.getYearName(this.activeDate);
-        const activeYear = this.adapter.getYear(this.activeDate);
-        const minYearOfPage = activeYear - getActiveOffset(this.adapter, this.activeDate, this.minDate, this.maxDate);
-        this.years = [];
+        this.todayYear.set(this.adapter.getYear(this.adapter.today()));
+        this.yearLabel.set(this.adapter.getYearName(this.resolvedActiveDate()));
+        const activeYear = this.adapter.getYear(this.resolvedActiveDate());
+        const minYearOfPage = activeYear -
+            getActiveOffset(this.adapter, this.resolvedActiveDate(), this.minDate(), this.maxDate());
+        const yearsList = [];
         for (let i = 0, row = []; i < yearsPerPage; i++) {
             row.push(minYearOfPage + i);
             if (row.length === yearsPerRow) {
-                this.years.push(row.map(year => this._createCellForYear(year)));
+                yearsList.push(row.map(year => this._createCellForYear(year)));
                 row = [];
             }
         }
+        this.years.set(yearsList);
     }
     _createCellForYear(year) {
         const yearName = this.adapter.getYearName(this.adapter.createDate(year, 0, 1));
         return new CmatDatetimepickerCalendarCellComponent(year, yearName, yearName, this._shouldEnableYear(year));
     }
     _shouldEnableYear(year) {
-        if (year === undefined || year === null ||
-            (this.maxDate && year > this.adapter.getYear(this.maxDate)) ||
-            (this.minDate && year < this.adapter.getYear(this.minDate))) {
+        if (year === undefined ||
+            year === null ||
+            (this.maxDate() && year > this.adapter.getYear(this.maxDate())) ||
+            (this.minDate() && year < this.adapter.getYear(this.minDate()))) {
             return false;
         }
-        if (!this.dateFilter) {
+        const dateFilter = this.dateFilter();
+        if (!dateFilter) {
             return true;
         }
         const firstOfYear = this.adapter.createDate(year, 0, 1);
         for (let date = firstOfYear; this.adapter.getYear(date) === year; date = this.adapter.addCalendarDays(date, 1)) {
-            if (this.dateFilter(date)) {
+            if (dateFilter(date)) {
                 return true;
             }
         }
         return false;
     }
-    _getValidDateOrNull(obj) {
-        return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
-    }
     _changeCalendarState(direction) {
         this.calendarState.set(direction);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatDatetimepickerMultiYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMultiYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatDatetimepickerMultiYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-multi-year-view", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerMultiYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years()\"\r\n        [selectedValue]=\"selectedYear()\" [todayValue]=\"todayYear()\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerMultiYearViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-multi-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMultiYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years\"\r\n        [selectedValue]=\"selectedYear\" [todayValue]=\"todayYear\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { userSelection: [{
-                type: Output
-            }], type: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-datetimepicker-multi-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerMultiYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"getActiveCell()\" [numCols]=\"4\" [rows]=\"years()\"\r\n        [selectedValue]=\"selectedYear()\" [todayValue]=\"todayYear()\" [allowDisabledSelection]=\"true\"\r\n        (selectedValueChange)=\"yearSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { userSelection: [{ type: i0.Output, args: ["userSelection"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }] } });
 function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
     const year1 = dateAdapter.getYear(date1);
     const year2 = dateAdapter.getYear(date2);
     const startingYear = getStartingYear(dateAdapter, minDate, maxDate);
-    return Math.floor((year1 - startingYear) / yearsPerPage) ===
-        Math.floor((year2 - startingYear) / yearsPerPage);
+    return (Math.floor((year1 - startingYear) / yearsPerPage) ===
+        Math.floor((year2 - startingYear) / yearsPerPage));
 }
 function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
     const activeYear = dateAdapter.getYear(activeDate);
-    return euclideanModulo((activeYear - getStartingYear(dateAdapter, minDate, maxDate)), yearsPerPage);
+    return euclideanModulo(activeYear - getStartingYear(dateAdapter, minDate, maxDate), yearsPerPage);
 }
 function getStartingYear(dateAdapter, minDate, maxDate) {
     let startingYear = 0;
@@ -689,7 +715,7 @@ function getStartingYear(dateAdapter, minDate, maxDate) {
     return startingYear;
 }
 function euclideanModulo(a, b) {
-    return (a % b + b) % b;
+    return ((a % b) + b) % b;
 }
 
 function pad(num, size) {
@@ -701,36 +727,58 @@ function pad(num, size) {
 }
 class CmatDatetimepickerTimeInputDirective {
     constructor() {
-        this.timeInterval = 1;
-        this.timeMin = 0;
-        this.timeMax = Infinity;
-        this.timeValueChanged = new EventEmitter();
+        this.timeValueChanged = output();
+        this.timeInterval = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeInterval" }] : /* istanbul ignore next */ []));
+        this.timeMin = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeMin" }] : /* istanbul ignore next */ []));
+        this.timeMax = input(Infinity, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeMax" }] : /* istanbul ignore next */ []));
+        this.timeValue = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeValue" }] : /* istanbul ignore next */ []));
         this._element = inject(ElementRef);
+        this._internalValue = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_internalValue" }] : /* istanbul ignore next */ []));
         this._keyDownListener = this.keyDownHandler.bind(this);
         this._keyPressListener = this.keyPressHandler.bind(this);
         this._inputEventListener = this.inputChangedHandler.bind(this);
-        this.inputElement.addEventListener('keydown', this._keyDownListener, {
+        this._blurListener = this.blur.bind(this);
+        this._focusListener = this.focus.bind(this);
+        const element = this._element.nativeElement;
+        element.addEventListener('keydown', this._keyDownListener, {
             passive: true,
         });
-        this.inputElement.addEventListener('keypress', this._keyPressListener);
-        this.inputElement.addEventListener('input', this._inputEventListener, {
+        element.addEventListener('keypress', this._keyPressListener);
+        element.addEventListener('input', this._inputEventListener, {
             passive: true,
         });
+        element.addEventListener('blur', this._blurListener);
+        element.addEventListener('focus', this._focusListener);
+        effect(() => {
+            const value = this.timeValue();
+            this._internalValue.set(coerceNumberProperty(value));
+            if (!this.hasFocus) {
+                this.writeValue(this._internalValue());
+            }
+            this.writePlaceholder(this._internalValue());
+        });
     }
     get hasFocus() {
-        return !!this._element.nativeElement && this._element?.nativeElement === document?.activeElement;
+        return (!!this._element.nativeElement &&
+            this._element?.nativeElement === document?.activeElement);
     }
     get inputElement() {
         return this._element.nativeElement;
     }
     get valid() {
-        if (this._value) {
-            const currentValue = String(this.inputElement.value);
-            if (currentValue.length) {
-                return pad(this._value, 2) === this.inputElement.value;
+        const currentValue = this._internalValue();
+        if (currentValue) {
+            const currentInputElementValue = String(this.inputElement.value);
+            if (currentInputElementValue.length) {
+                return pad(currentValue, 2) === this.inputElement.value;
             }
             else {
-                return pad(this._value, 2) === this.inputElement.placeholder;
+                return pad(currentValue, 2) === this.inputElement.placeholder;
             }
         }
         return true;
@@ -738,17 +786,16 @@ class CmatDatetimepickerTimeInputDirective {
     get invalid() {
         return !this.valid;
     }
-    set timeValue(value) {
-        this._value = coerceNumberProperty(value);
-        if (!this.hasFocus) {
-            this.writeValue(this._value);
-        }
-        this.writePlaceholder(this._value);
+    setValue(value) {
+        const numericValue = coerceNumberProperty(value);
+        this._internalValue.set(numericValue);
+        this.writeValue(numericValue);
+        this.writePlaceholder(numericValue);
     }
     blur() {
-        this.writeValue(this._value);
-        this.writePlaceholder(this._value);
-        this.timeValueChanged.emit(this._value);
+        this.writeValue(this._internalValue());
+        this.writePlaceholder(this._internalValue());
+        this.timeValueChanged.emit(this._internalValue());
     }
     focus() {
         this.writeValue('');
@@ -768,20 +815,20 @@ class CmatDatetimepickerTimeInputDirective {
         if (String(this.inputElement.value).length > 0) {
             let value = null;
             if (event.code === 'ArrowUp') {
-                value = coerceNumberProperty(this._value);
-                value += this.timeInterval;
+                value = coerceNumberProperty(this._internalValue());
+                value += this.timeInterval();
                 event.stopPropagation();
             }
             else if (event.code === 'ArrowDown') {
-                value = coerceNumberProperty(this._value);
-                value -= this.timeInterval;
+                value = coerceNumberProperty(this._internalValue());
+                value -= this.timeInterval();
                 event.stopPropagation();
             }
             if (typeof value === 'number') {
                 this.writeValue(value);
                 this.writePlaceholder(value);
                 this.clampInputValue();
-                this.timeValueChanged.emit(this._value);
+                this.timeValueChanged.emit(this._internalValue());
             }
         }
     }
@@ -793,7 +840,7 @@ class CmatDatetimepickerTimeInputDirective {
     }
     inputChangedHandler() {
         this.clampInputValue();
-        this.timeValueChanged.emit(this._value);
+        this.timeValueChanged.emit(this._internalValue());
     }
     clampInputValue() {
         if (this.inputElement?.value === '') {
@@ -801,12 +848,12 @@ class CmatDatetimepickerTimeInputDirective {
         }
         const value = coerceNumberProperty(this.inputElement?.value ?? null);
         if (value) {
-            const clampedValue = Math.min(Math.max(value, this.timeMin), this.timeMax);
+            const clampedValue = Math.min(Math.max(value, this.timeMin()), this.timeMax());
             if (clampedValue !== value) {
                 this.writeValue(clampedValue);
                 this.writePlaceholder(clampedValue);
             }
-            this._value = clampedValue;
+            this._internalValue.set(clampedValue);
         }
     }
     ngOnDestroy() {
@@ -814,132 +861,118 @@ class CmatDatetimepickerTimeInputDirective {
         this.inputElement.removeEventListener('keypress', this._keyPressListener);
         this.inputElement.removeEventListener('input', this._inputEventListener);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", 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: "22.0.2", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: CmatDatetimepickerTimeInputDirective, isStandalone: true, selector: "input.cmat-datetimepicker-time-input", inputs: { timeInterval: { classPropertyName: "timeInterval", publicName: "timeInterval", isSignal: true, isRequired: false, transformFunction: null }, timeMin: { classPropertyName: "timeMin", publicName: "timeMin", isSignal: true, isRequired: false, transformFunction: null }, timeMax: { classPropertyName: "timeMax", publicName: "timeMax", isSignal: true, isRequired: false, transformFunction: null }, timeValue: { classPropertyName: "timeValue", publicName: "timeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeValueChanged: "timeValueChanged" }, exportAs: ["cmatDatetimepickerTimeInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'input.cmat-datetimepicker-time-input',
-                    exportAs: 'cmatDatetimepickerTimeInput'
+                    exportAs: 'cmatDatetimepickerTimeInput',
                 }]
-        }], ctorParameters: () => [], propDecorators: { timeInterval: [{
-                type: Input
-            }], timeMin: [{
-                type: Input
-            }], timeMax: [{
-                type: Input
-            }], timeValueChanged: [{
-                type: Output
-            }], timeValue: [{
-                type: Input
-            }], blur: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
-            }], focus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { timeValueChanged: [{ type: i0.Output, args: ["timeValueChanged"] }], timeInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInterval", required: false }] }], timeMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeMin", required: false }] }], timeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeMax", required: false }] }], timeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeValue", required: false }] }] } });
 class CmatDatetimepickerTimeComponent {
     constructor() {
-        this.selectedChange = new EventEmitter();
-        this.activeDateChange = new EventEmitter();
-        this.userSelection = new EventEmitter();
-        this.ampmChange = new EventEmitter();
-        this.clockViewChange = new EventEmitter();
-        this.interval = 1;
+        this.selectedChange = output();
+        this.activeDateChange = output();
+        this.userSelection = output();
+        this.ampmChange = output();
+        this.clockViewChange = output();
+        this.dateFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.interval = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/naming-convention
-        this.AMPM = 'AM';
-        this.class = 'cmat-datetimepicker-time';
-        this.intlVersion = signal(0, ...(ngDevMode ? [{ debugName: "intlVersion" }] : /* istanbul ignore next */ []));
+        this.AMPM = input('AM', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "AMPM" }] : /* istanbul ignore next */ []));
+        this.twelvehour = input(false, { ...(ngDevMode ? { debugName: "twelvehour" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.minDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.selected = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.clockView = input('hour', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clockView" }] : /* istanbul ignore next */ []));
+        this.intlVersion = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intlVersion" }] : /* istanbul ignore next */ []));
+        this.activeDate = computed(() => {
+            const date = this._activeDate();
+            if (!date) {
+                return this._adapter.today();
+            }
+            return this._adapter.clampDate(date, this.minDate(), this.maxDate());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+        this.isHourView = computed(() => this._clockView() === 'hour', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHourView" }] : /* istanbul ignore next */ []));
+        this.isMinuteView = computed(() => this._clockView() === 'minute', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMinuteView" }] : /* istanbul ignore next */ []));
+        this.hour = computed(() => {
+            const currentDate = this.activeDate();
+            if (!currentDate) {
+                if (this.twelvehour()) {
+                    return '12';
+                }
+                else {
+                    return '00';
+                }
+            }
+            const hour = Number(this._adapter.getHour(currentDate));
+            if (!this.twelvehour()) {
+                return this.prefixWithZero(hour);
+            }
+            if (hour === 0) {
+                return '12';
+            }
+            else {
+                return this.prefixWithZero(hour > 12 ? hour - 12 : hour);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour" }] : /* istanbul ignore next */ []));
+        this.minute = computed(() => {
+            const currentDate = this.activeDate();
+            if (currentDate) {
+                return this.prefixWithZero(this._adapter.getMinute(currentDate));
+            }
+            return '00';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minute" }] : /* istanbul ignore next */ []));
+        this.currentClockView = computed(() => this._clockView(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentClockView" }] : /* istanbul ignore next */ []));
+        this.hourInputElement = viewChild('hourInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourInputElement" }] : /* istanbul ignore next */ []));
+        this.hourInputDirective = viewChild('hourInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourInputDirective" }] : /* istanbul ignore next */ []));
+        this.minuteInputElement = viewChild('minuteInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minuteInputElement" }] : /* istanbul ignore next */ []));
+        this.minuteInputDirective = viewChild('minuteInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minuteInputDirective" }] : /* istanbul ignore next */ []));
         this.datetimepickerIntl = inject(CmatDatetimepickerIntl);
+        this._clockView = signal('hour', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_clockView" }] : /* istanbul ignore next */ []));
         this._adapter = inject(DatetimeAdapter);
         this._destroyRef = inject(DestroyRef);
-        this._twelvehour = false;
-        this._clockView = 'hour';
+        this._activeDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_activeDate" }] : /* istanbul ignore next */ []));
         this.datetimepickerIntl.changes
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this.intlVersion.update(value => value + 1);
         });
-    }
-    get isHourView() {
-        return this._clockView === 'hour';
-    }
-    get isMinuteView() {
-        return this._clockView === 'minute';
-    }
-    get hour() {
-        if (!this.activeDate) {
-            if (this.twelvehour) {
-                return '12';
-            }
-            else {
-                return '00';
+        // Watch for selected changes
+        effect(() => {
+            const selectedValue = this.selected();
+            if (selectedValue) {
+                this._activeDate.set(selectedValue);
             }
-        }
-        const hour = Number(this._adapter.getHour(this.activeDate));
-        if (!this.twelvehour) {
-            return this.prefixWithZero(hour);
-        }
-        if (hour === 0) {
-            return '12';
-        }
-        else {
-            return this.prefixWithZero(hour > 12 ? hour - 12 : hour);
-        }
-    }
-    get minute() {
-        if (this.activeDate) {
-            return this.prefixWithZero(this._adapter.getMinute(this.activeDate));
-        }
-        return '00';
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get twelvehour() {
-        return this._twelvehour;
-    }
-    set twelvehour(value) {
-        this._twelvehour = coerceBooleanProperty(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        this._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-        if (this._selected) {
-            this.activeDate = this._selected;
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get clockView() {
-        return this._clockView;
-    }
-    set clockView(value) {
-        this._clockView = value;
+        });
+        effect(() => {
+            const clockView = this.clockView();
+            this._clockView.set(clockView);
+            this.focusInputElement();
+        });
     }
     prefixWithZero(value) {
         if (value < 10) {
@@ -947,44 +980,41 @@ class CmatDatetimepickerTimeComponent {
         }
         return String(value);
     }
-    ngOnChanges(changes) {
-        if (changes['clockView']) {
-            if (changes['clockView'].currentValue !== changes['clockView'].previousValue) {
-                this.focusInputElement();
-            }
-        }
-    }
     ngAfterViewInit() {
         this.focusInputElement();
     }
     focusInputElement() {
-        if (this.clockView === 'hour') {
-            if (this.hourInputElement) {
-                (this.hourInputElement.nativeElement).focus();
+        if (this.currentClockView() === 'hour') {
+            const hourInput = this.hourInputElement();
+            if (hourInput) {
+                hourInput.nativeElement?.focus();
             }
         }
         else {
-            if (this.minuteInputElement) {
-                (this.minuteInputElement.nativeElement).focus();
+            const minuteInput = this.minuteInputElement();
+            if (minuteInput) {
+                minuteInput.nativeElement?.focus();
             }
         }
     }
     handleHourInputChange(value) {
         const hour = coerceNumberProperty(value);
         if (hour || hour === 0) {
-            const newValue = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this.updateHourForAmPm(hour), this._adapter.getMinute(this.activeDate));
-            this._activeDate = this._adapter.clampDate(newValue, this.minDate, this.maxDate);
-            this.activeDateChange.emit(this.activeDate);
-            if (this.hourInputDirective) {
-                this.hourInputDirective.timeValue = this.hour;
+            const currentDate = this.activeDate();
+            const newValue = this._adapter.createDatetime(this._adapter.getYear(currentDate), this._adapter.getMonth(currentDate), this._adapter.getDate(currentDate), this.updateHourForAmPm(hour), this._adapter.getMinute(currentDate));
+            this._activeDate.set(this._adapter.clampDate(newValue, this.minDate(), this.maxDate()));
+            this.activeDateChange.emit(this.activeDate());
+            const hourDirective = this.hourInputDirective();
+            if (hourDirective) {
+                hourDirective.setValue(this.hour());
             }
         }
     }
     updateHourForAmPm(value) {
-        if (!this.twelvehour) {
+        if (!this.twelvehour()) {
             return value;
         }
-        if (this.AMPM === 'AM') {
+        if (this.AMPM() === 'AM') {
             if (value === 0 || value === 12) {
                 return 0;
             }
@@ -1000,131 +1030,128 @@ class CmatDatetimepickerTimeComponent {
     handleMinuteInputChange(value) {
         const minute = coerceNumberProperty(value);
         if (minute || minute === 0) {
-            const newValue = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this._activeDate), minute);
-            this._activeDate = this._adapter.clampDate(newValue, this.minDate, this.maxDate);
-            this.activeDateChange.emit(this.activeDate);
-            if (this.minuteInputDirective) {
-                this.minuteInputDirective.timeValue = this.minute;
+            const currentDate = this.activeDate();
+            const newValue = this._adapter.createDatetime(this._adapter.getYear(currentDate), this._adapter.getMonth(currentDate), this._adapter.getDate(currentDate), this._adapter.getHour(currentDate), minute);
+            this._activeDate.set(this._adapter.clampDate(newValue, this.minDate(), this.maxDate()));
+            this.activeDateChange.emit(this.activeDate());
+            const minuteDirective = this.minuteInputDirective();
+            if (minuteDirective) {
+                minuteDirective.setValue(this.minute());
             }
         }
     }
     handleFocus(clockView) {
-        this.clockView = clockView;
+        this._clockView.set(clockView);
         this.clockViewChange.emit(clockView);
     }
     timeSelected(date) {
-        if (this.clockView === 'hour') {
-            this.clockView = 'minute';
+        if (this.currentClockView() === 'hour') {
+            this._clockView.set('minute');
         }
-        this._activeDate = this.selected = date;
+        this._activeDate.set(date);
     }
     onActiveDateChange(date) {
-        this._activeDate = date;
+        this._activeDate.set(date);
         this.activeDateChange.emit(date);
     }
     handleOk() {
-        if (this._selected) {
-            this.selectedChange.emit(this._selected);
+        const currentDate = this.activeDate();
+        if (currentDate) {
+            this.selectedChange.emit(currentDate);
         }
         this.userSelection.emit();
     }
     handleCancel() {
         this.userSelection.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDatetimepickerTimeComponent, isStandalone: true, selector: "cmat-datetimepicker-time", inputs: { dateFilter: "dateFilter", interval: "interval", AMPM: "AMPM", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", userSelection: "userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }], exportAs: ["cmatDatetimepickerTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-datetimepicker-time-input-wrapper\" [attr.data-refresh]=\"intlVersion()\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input #hourInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\" inputmode=\"numeric\"\r\n      maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\" [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\r\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\r\n\r\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n      <input #minuteInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n        type=\"text\" inputmode=\"numeric\"\r\n        maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\" [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n        [timeInterval]=\"interval\" (timeValueChanged)=\"handleMinuteInputChange($event)\" (focus)=\"handleFocus('minute')\" />\r\n\r\n        @if (twelvehour) {\r\n          <div class=\"cmat-datetimepicker-time-ampm\">\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n              aria-label=\"AM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n              aria-label=\"PM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"interval\"\r\n      [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\"\r\n      (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\">\r\n    </cmat-datetimepicker-clock>\r\n\r\n    <div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n      <button class=\"cmat=datetimepicker-time-cancel-button\" matButton=\"outlined\" type=\"button\" (click)=\"handleCancel()\">\r\n        {{ datetimepickerIntl.cancelLabel }}\r\n      </button>\r\n      <button class=\"cmat-datetimepicker-time-ok-button\" matButton=\"filled\" type=\"button\" color=\"primary\" [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\"\r\n        (click)=\"handleOk()\">\r\n        {{ datetimepickerIntl.okLabel }}\r\n      </button>\r\n    </div>\r\n", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: CmatDatetimepickerTimeInputDirective, selector: "input.cmat-datetimepicker-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["cmatDatetimepickerTimeInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDatetimepickerTimeComponent, isStandalone: true, selector: "cmat-datetimepicker-time", inputs: { dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, AMPM: { classPropertyName: "AMPM", publicName: "AMPM", isSignal: true, isRequired: false, transformFunction: null }, twelvehour: { classPropertyName: "twelvehour", publicName: "twelvehour", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, clockView: { classPropertyName: "clockView", publicName: "clockView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", userSelection: "userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { classAttribute: "cmat-datetimepicker-time" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, isSignal: true }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, isSignal: true }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, isSignal: true }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, isSignal: true }], exportAs: ["cmatDatetimepickerTime"], ngImport: i0, template: "<div\r\n  class=\"cmat-datetimepicker-time-input-wrapper\"\r\n  [attr.data-refresh]=\"intlVersion()\"\r\n>\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input\r\n      #hourInput=\"cmatDatetimepickerTimeInput\"\r\n      class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      [class.cmat-datetimepicker-time-input-active]=\"currentClockView() === 'hour'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\"\r\n      [timeMin]=\"twelvehour() ? 1 : 0\"\r\n      [timeMax]=\"twelvehour() ? 12 : 23\"\r\n      [timeValue]=\"hour()\"\r\n      (timeValueChanged)=\"handleHourInputChange($event)\"\r\n      (focus)=\"handleFocus('hour')\"\r\n    />\r\n\r\n    <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n    <input\r\n      #minuteInput=\"cmatDatetimepickerTimeInput\"\r\n      class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      [class.cmat-datetimepicker-time-input-active]=\"currentClockView() === 'minute'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\"\r\n      [timeMin]=\"0\"\r\n      [timeMax]=\"59\"\r\n      [timeValue]=\"minute()\"\r\n      [timeInterval]=\"interval()\"\r\n      (timeValueChanged)=\"handleMinuteInputChange($event)\"\r\n      (focus)=\"handleFocus('minute')\"\r\n    />\r\n\r\n    @if (twelvehour()) {\r\n    <div class=\"cmat-datetimepicker-time-ampm\">\r\n      <button\r\n        matButton\r\n        type=\"button\"\r\n        class=\"cmat-datetimepicker-time-am\"\r\n        aria-label=\"AM\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM() === 'AM'\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (click)=\"ampmChange.emit('AM')\"\r\n      >\r\n        AM\r\n      </button>\r\n      <button\r\n        matButton\r\n        type=\"button\"\r\n        class=\"cmat-datetimepicker-time-pm\"\r\n        aria-label=\"PM\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM() === 'PM'\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (click)=\"ampmChange.emit('PM')\"\r\n      >\r\n        PM\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<cmat-datetimepicker-clock\r\n  [activeDate]=\"activeDate()\"\r\n  [dateFilter]=\"dateFilter()\"\r\n  [interval]=\"interval()\"\r\n  [maxDate]=\"maxDate()\"\r\n  [minDate]=\"minDate()\"\r\n  [selected]=\"selected()\"\r\n  [startView]=\"currentClockView()\"\r\n  [twelvehour]=\"twelvehour()\"\r\n  (selectedChange)=\"timeSelected($event)\"\r\n  (activeDateChange)=\"onActiveDateChange($event)\"\r\n>\r\n</cmat-datetimepicker-clock>\r\n\r\n<div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n  <button\r\n    class=\"cmat-datetimepicker-time-cancel-button\"\r\n    matButton=\"outlined\"\r\n    type=\"button\"\r\n    (click)=\"handleCancel()\"\r\n  >\r\n    {{ datetimepickerIntl.cancelLabel }}\r\n  </button>\r\n  <button\r\n    class=\"cmat-datetimepicker-time-ok-button\"\r\n    matButton=\"filled\"\r\n    type=\"button\"\r\n    color=\"primary\"\r\n    [disabled]=\"minuteInputDirective()?.invalid || hourInputDirective()?.invalid\"\r\n    (click)=\"handleOk()\"\r\n  >\r\n    {{ datetimepickerIntl.okLabel }}\r\n  </button>\r\n</div>\r\n", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: CmatDatetimepickerTimeInputDirective, selector: "input.cmat-datetimepicker-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["cmatDatetimepickerTimeInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "minDate", "maxDate", "selected", "startView", "activeDate"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-time', exportAs: 'cmatDatetimepickerTime', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CmatDatetimepickerTimeInputDirective, MatButtonModule, CmatDatetimepickerClockComponent], template: "<div class=\"cmat-datetimepicker-time-input-wrapper\" [attr.data-refresh]=\"intlVersion()\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input #hourInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\" inputmode=\"numeric\"\r\n      maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\" [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\r\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\r\n\r\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n      <input #minuteInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n        type=\"text\" inputmode=\"numeric\"\r\n        maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\" [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n        [timeInterval]=\"interval\" (timeValueChanged)=\"handleMinuteInputChange($event)\" (focus)=\"handleFocus('minute')\" />\r\n\r\n        @if (twelvehour) {\r\n          <div class=\"cmat-datetimepicker-time-ampm\">\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n              aria-label=\"AM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n              aria-label=\"PM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"interval\"\r\n      [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\"\r\n      (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\">\r\n    </cmat-datetimepicker-clock>\r\n\r\n    <div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n      <button class=\"cmat=datetimepicker-time-cancel-button\" matButton=\"outlined\" type=\"button\" (click)=\"handleCancel()\">\r\n        {{ datetimepickerIntl.cancelLabel }}\r\n      </button>\r\n      <button class=\"cmat-datetimepicker-time-ok-button\" matButton=\"filled\" type=\"button\" color=\"primary\" [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\"\r\n        (click)=\"handleOk()\">\r\n        {{ datetimepickerIntl.okLabel }}\r\n      </button>\r\n    </div>\r\n", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { selectedChange: [{
-                type: Output
-            }], activeDateChange: [{
-                type: Output
-            }], userSelection: [{
-                type: Output
-            }], ampmChange: [{
-                type: Output
-            }], clockViewChange: [{
-                type: Output
-            }], dateFilter: [{
-                type: Input
-            }], interval: [{
-                type: Input
-            }], AMPM: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], hourInputElement: [{
-                type: ViewChild,
-                args: ['hourInput', { read: (ElementRef) }]
-            }], hourInputDirective: [{
-                type: ViewChild,
-                args: ['hourInput', { read: CmatDatetimepickerTimeInputDirective }]
-            }], minuteInputElement: [{
-                type: ViewChild,
-                args: ['minuteInput', { read: (ElementRef) }]
-            }], minuteInputDirective: [{
-                type: ViewChild,
-                args: ['minuteInput', { read: CmatDatetimepickerTimeInputDirective }]
-            }], twelvehour: [{
-                type: Input
-            }], activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], clockView: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-datetimepicker-time', host: {
+                        'class': 'cmat-datetimepicker-time',
+                    }, exportAs: 'cmatDatetimepickerTime', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CmatDatetimepickerTimeInputDirective,
+                        MatButtonModule,
+                        CmatDatetimepickerClockComponent,
+                    ], template: "<div\r\n  class=\"cmat-datetimepicker-time-input-wrapper\"\r\n  [attr.data-refresh]=\"intlVersion()\"\r\n>\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input\r\n      #hourInput=\"cmatDatetimepickerTimeInput\"\r\n      class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      [class.cmat-datetimepicker-time-input-active]=\"currentClockView() === 'hour'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\"\r\n      [timeMin]=\"twelvehour() ? 1 : 0\"\r\n      [timeMax]=\"twelvehour() ? 12 : 23\"\r\n      [timeValue]=\"hour()\"\r\n      (timeValueChanged)=\"handleHourInputChange($event)\"\r\n      (focus)=\"handleFocus('hour')\"\r\n    />\r\n\r\n    <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n    <input\r\n      #minuteInput=\"cmatDatetimepickerTimeInput\"\r\n      class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      [class.cmat-datetimepicker-time-input-active]=\"currentClockView() === 'minute'\"\r\n      [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\"\r\n      [timeMin]=\"0\"\r\n      [timeMax]=\"59\"\r\n      [timeValue]=\"minute()\"\r\n      [timeInterval]=\"interval()\"\r\n      (timeValueChanged)=\"handleMinuteInputChange($event)\"\r\n      (focus)=\"handleFocus('minute')\"\r\n    />\r\n\r\n    @if (twelvehour()) {\r\n    <div class=\"cmat-datetimepicker-time-ampm\">\r\n      <button\r\n        matButton\r\n        type=\"button\"\r\n        class=\"cmat-datetimepicker-time-am\"\r\n        aria-label=\"AM\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM() === 'AM'\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (click)=\"ampmChange.emit('AM')\"\r\n      >\r\n        AM\r\n      </button>\r\n      <button\r\n        matButton\r\n        type=\"button\"\r\n        class=\"cmat-datetimepicker-time-pm\"\r\n        aria-label=\"PM\"\r\n        [class.cmat-datetimepicker-time-ampm-active]=\"AMPM() === 'PM'\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (click)=\"ampmChange.emit('PM')\"\r\n      >\r\n        PM\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<cmat-datetimepicker-clock\r\n  [activeDate]=\"activeDate()\"\r\n  [dateFilter]=\"dateFilter()\"\r\n  [interval]=\"interval()\"\r\n  [maxDate]=\"maxDate()\"\r\n  [minDate]=\"minDate()\"\r\n  [selected]=\"selected()\"\r\n  [startView]=\"currentClockView()\"\r\n  [twelvehour]=\"twelvehour()\"\r\n  (selectedChange)=\"timeSelected($event)\"\r\n  (activeDateChange)=\"onActiveDateChange($event)\"\r\n>\r\n</cmat-datetimepicker-clock>\r\n\r\n<div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n  <button\r\n    class=\"cmat-datetimepicker-time-cancel-button\"\r\n    matButton=\"outlined\"\r\n    type=\"button\"\r\n    (click)=\"handleCancel()\"\r\n  >\r\n    {{ datetimepickerIntl.cancelLabel }}\r\n  </button>\r\n  <button\r\n    class=\"cmat-datetimepicker-time-ok-button\"\r\n    matButton=\"filled\"\r\n    type=\"button\"\r\n    color=\"primary\"\r\n    [disabled]=\"minuteInputDirective()?.invalid || hourInputDirective()?.invalid\"\r\n    (click)=\"handleOk()\"\r\n  >\r\n    {{ datetimepickerIntl.okLabel }}\r\n  </button>\r\n</div>\r\n", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], userSelection: [{ type: i0.Output, args: ["userSelection"] }], ampmChange: [{ type: i0.Output, args: ["ampmChange"] }], clockViewChange: [{ type: i0.Output, args: ["clockViewChange"] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], AMPM: [{ type: i0.Input, args: [{ isSignal: true, alias: "AMPM", required: false }] }], twelvehour: [{ type: i0.Input, args: [{ isSignal: true, alias: "twelvehour", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], clockView: [{ type: i0.Input, args: [{ isSignal: true, alias: "clockView", required: false }] }], hourInputElement: [{ type: i0.ViewChild, args: ['hourInput', { isSignal: true }] }], hourInputDirective: [{ type: i0.ViewChild, args: ['hourInput', { isSignal: true }] }], minuteInputElement: [{ type: i0.ViewChild, args: ['minuteInput', { isSignal: true }] }], minuteInputDirective: [{ type: i0.ViewChild, args: ['minuteInput', { isSignal: true }] }] } });
 
 class CmatDatetimepickerYearViewComponent {
     constructor() {
-        this.userSelection = new EventEmitter();
-        this.type = 'date';
-        this.selectedChange = new EventEmitter();
-        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.userSelection = output();
+        this.selectedChange = output();
+        this.type = input('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.dateFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.minDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.selected = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.activeDate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+        this.months = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+        this.yearLabel = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearLabel" }] : /* istanbul ignore next */ []));
+        this.todayMonth = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayMonth" }] : /* istanbul ignore next */ []));
+        this.selectedMonth = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMonth" }] : /* istanbul ignore next */ []));
+        this.calendarState = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.resolvedActiveDate = computed(() => {
+            const inputDate = this.activeDate();
+            return inputDate ?? this._internalActiveDate() ?? this.adapter.today();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedActiveDate" }] : /* istanbul ignore next */ []));
         this.adapter = inject(DatetimeAdapter, { optional: true });
-        this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
+        this._dateFormats = inject(CMAT_DATETIME_FORMATS, {
+            optional: true,
+        });
         this._elementRef = inject(ElementRef);
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
+        this._internalActiveDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_internalActiveDate" }] : /* istanbul ignore next */ []));
         if (!this.adapter) {
             throw createMissingDateImplError('CDatetimeAdapter');
         }
         if (!this._dateFormats) {
             throw createMissingDateImplError('CMAT_DATETIME_FORMATS');
         }
-        this._activeDate = this.adapter.today();
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
-    }
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        this._activeDate = value || this.adapter.today();
-        if (oldActiveDate && this._activeDate &&
-            !this.adapter.sameYear(oldActiveDate, this._activeDate)) {
-            this._init();
-            if (this.adapter.isInNextMonth(oldActiveDate, this._activeDate)) {
-                this._changeCalendarState('right');
-            }
-            else {
-                this._changeCalendarState('left');
+        effect(() => {
+            const newActiveDate = this.activeDate();
+            if (newActiveDate) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const oldActiveDate = this._internalActiveDate();
+                // Update internal tracker
+                const prev = this._internalActiveDate();
+                this._internalActiveDate.set(newActiveDate);
+                untracked(() => {
+                    if (prev &&
+                        newActiveDate &&
+                        !this.adapter.sameYear(prev, newActiveDate)) {
+                        this._init();
+                        if (this.adapter.isInNextMonth(prev, newActiveDate)) {
+                            this._changeCalendarState('right');
+                        }
+                        else {
+                            this._changeCalendarState('left');
+                        }
+                    }
+                    else if (!prev) {
+                        // Initial load case handled by ngAfterContentInit usually, 
+                        // but if input is provided immediately, we might need init.
+                        // ngAfterContentInit calls _init() anyway.
+                    }
+                });
             }
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = value;
-        this.selectedMonth = this._getMonthInCurrentYear(this.selected);
+        });
     }
     ngAfterContentInit() {
         this._init();
@@ -1133,39 +1160,53 @@ class CmatDatetimepickerYearViewComponent {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
     }
     monthSelected(month) {
-        const normalizedDate = this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, 1, 0, 0);
-        this.selectedChange.emit(this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, Math.min(this.adapter.getDate(this.activeDate), this.adapter.getNumDaysInMonth(normalizedDate)), this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate)));
-        if (this.type === 'month') {
+        const currentDate = this.resolvedActiveDate();
+        const normalizedDate = this.adapter.createDatetime(this.adapter.getYear(currentDate), month, 1, 0, 0);
+        this.selectedChange.emit(this.adapter.createDatetime(this.adapter.getYear(currentDate), month, Math.min(this.adapter.getDate(currentDate), this.adapter.getNumDaysInMonth(normalizedDate)), this.adapter.getHour(currentDate), this.adapter.getMinute(currentDate)));
+        if (this.type() === 'month') {
             this.userSelection.emit();
         }
     }
     calendarStateDone(event) {
-        if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
+        if (event.animationName === 'slideCalendarLeft' ||
+            event.animationName === 'slideCalendarRight') {
             this.calendarState.set('');
         }
     }
     _init() {
-        this.selectedMonth = this._getMonthInCurrentYear(this.selected);
-        this.todayMonth = this._getMonthInCurrentYear(this.adapter.today());
-        this.yearLabel = this.adapter.getYearName(this.activeDate);
+        const selectedValue = this.selected();
+        this.selectedMonth.set(this._getMonthInCurrentYear(selectedValue));
+        this.todayMonth.set(this._getMonthInCurrentYear(this.adapter.today()));
+        this.yearLabel.set(this.adapter.getYearName(this.resolvedActiveDate()));
         const monthNames = this.adapter.getMonthNames('short');
-        this.months = [[0, 1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11]].map(row => row.map(month => this._createCellForMonth(month, monthNames[month])));
+        const monthsList = [
+            [0, 1, 2, 3, 4],
+            [5, 6, 7, 8, 9, 10, 11],
+        ].map(row => row.map(month => this._createCellForMonth(month, monthNames[month])));
+        this.months.set(monthsList);
     }
     _getMonthInCurrentYear(date) {
-        return this.adapter.sameYear(date, this.activeDate) ?
-            this.adapter.getMonth(date) : null;
+        if (!date) {
+            return null;
+        }
+        return this.adapter.sameYear(date, this.resolvedActiveDate())
+            ? this.adapter.getMonth(date)
+            : null;
     }
     _createCellForMonth(month, monthName) {
-        const ariaLabel = this.adapter.format(this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, 1, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate)), this._dateFormats.display.monthYearA11yLabel);
+        const currentDate = this.resolvedActiveDate();
+        const ariaLabel = this.adapter.format(this.adapter.createDatetime(this.adapter.getYear(currentDate), month, 1, this.adapter.getHour(currentDate), this.adapter.getMinute(currentDate)), this._dateFormats.display.monthYearA11yLabel);
         return new CmatDatetimepickerCalendarCellComponent(month, monthName.toLocaleUpperCase(), ariaLabel, this._isMonthEnabled(month));
     }
     _isMonthEnabled(month) {
-        if (!this.dateFilter) {
+        const dateFilter = this.dateFilter();
+        if (!dateFilter) {
             return true;
         }
-        const firstOfMonth = this.adapter.createDatetime(this.adapter.getYear(this.activeDate), month, 1, this.adapter.getHour(this.activeDate), this.adapter.getMinute(this.activeDate));
+        const currentDate = this.resolvedActiveDate();
+        const firstOfMonth = this.adapter.createDatetime(this.adapter.getYear(currentDate), month, 1, this.adapter.getHour(currentDate), this.adapter.getMinute(currentDate));
         for (let date = firstOfMonth; this.adapter.getMonth(date) === month; date = this.adapter.addCalendarDays(date, 1)) {
-            if (this.dateFilter(date)) {
+            if (dateFilter(date)) {
                 return true;
             }
         }
@@ -1174,55 +1215,93 @@ class CmatDatetimepickerYearViewComponent {
     _changeCalendarState(direction) {
         this.calendarState.set(direction);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatDatetimepickerYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatDatetimepickerYearViewComponent, isStandalone: true, selector: "cmat-datetimepicker-year-view", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange" }, exportAs: ["cmatDatetimepickerYearView"], ngImport: i0, template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate())\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel()\" [rows]=\"months()\" [selectedValue]=\"selectedMonth()\" [todayValue]=\"todayMonth()\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: CmatDatetimepickerCalendarBodyComponent, selector: "[cmat-datetimepicker-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["cmatDatetimepickerCalendarBody"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerYearViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerYearViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate)\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel\" [rows]=\"months\" [selectedValue]=\"selectedMonth\" [todayValue]=\"todayMonth\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { userSelection: [{
-                type: Output
-            }], type: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-datetimepicker-year-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerYearView', imports: [CmatDatetimepickerCalendarBodyComponent, NgClass], template: "<table class=\"cmat-datetimepicker-calendar-table\">\r\n    <thead class=\"cmat-datetimepicker-calendar-table-header\"></thead>\r\n    <tbody class=\"cmat-calendar-slide-animation\" cmat-datetimepicker-calendar-body role=\"grid\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\" [activeCell]=\"adapter.getMonth(activeDate())\" [labelMinRequiredCells]=\"2\"\r\n        [label]=\"yearLabel()\" [rows]=\"months()\" [selectedValue]=\"selectedMonth()\" [todayValue]=\"todayMonth()\"\r\n        [allowDisabledSelection]=\"true\" (selectedValueChange)=\"monthSelected($event)\"></tbody>\r\n</table>\r\n", styles: [".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { userSelection: [{ type: i0.Output, args: ["userSelection"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }] } });
 
+/* eslint-disable @typescript-eslint/member-ordering */
 class CmatDatetimepickerCalendarComponent {
+    setCurrentView(view) {
+        this._currentView.set(view);
+        this.viewChanged.emit(view);
+    }
+    getCurrentView() {
+        return this._currentView();
+    }
     constructor() {
-        this.userSelection = new EventEmitter();
-        this.multiYearSelector = false;
-        this.startView = 'month';
-        this.twelvehour = false;
-        this.timeInterval = 1;
-        this.preventSameDateTimeSelection = false;
-        this.selectedChange = new EventEmitter();
-        this.viewChanged = new EventEmitter();
-        this.class = 'cmat-datetimepicker-calendar';
-        this.label = 'ariaLabel';
-        this.role = 'dialog';
-        this.tabindex = 0;
-        this.clockView = 'hour';
-        this.calendarState = signal('', ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
-        this.intlVersion = signal(0, ...(ngDevMode ? [{ debugName: "intlVersion" }] : /* istanbul ignore next */ []));
+        this.userSelection = output();
+        this.selectedChange = output();
+        this.viewChanged = output();
+        this.startView = input('month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+        this.twelvehour = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "twelvehour" }] : /* istanbul ignore next */ []));
+        this.timeInterval = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeInterval" }] : /* istanbul ignore next */ []));
+        this.type = input('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.multiYearSelector = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiYearSelector" }] : /* istanbul ignore next */ []));
+        this.timeInput = input(false, { ...(ngDevMode ? { debugName: "timeInput" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.dateFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.preventSameDateTimeSelection = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventSameDateTimeSelection" }] : /* istanbul ignore next */ []));
+        this.minDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.selected = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.startAt = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this.AMPM = signal('AM', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "AMPM" }] : /* istanbul ignore next */ []));
+        this.clockView = signal('hour', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clockView" }] : /* istanbul ignore next */ []));
+        this.calendarState = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarState" }] : /* istanbul ignore next */ []));
+        this.intlVersion = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intlVersion" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
         this._intl = inject(CmatDatetimepickerIntl);
-        this._adapter = inject(DatetimeAdapter, { optional: true });
-        this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
+        this._adapter = inject(DatetimeAdapter, {
+            optional: true,
+        });
+        this._dateFormats = inject(CMAT_DATETIME_FORMATS, {
+            optional: true,
+        });
         this._destroyRef = inject(DestroyRef);
-        this._type = 'date';
-        this._timeInput = false;
+        this._currentView = signal('month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_currentView" }] : /* istanbul ignore next */ []));
+        this._clampedActiveDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_clampedActiveDate" }] : /* istanbul ignore next */ []));
+        // Computed signals
+        this.currentView = computed(() => this._currentView(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+        this.activeDate = computed(() => {
+            const activeDate = this._clampedActiveDate();
+            if (!activeDate) {
+                return this._adapter.today();
+            }
+            return this._adapter.clampDate(activeDate, this.minDate(), this.maxDate());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+        this.dateFilterForViews = (date) => {
+            const dateFilter = this.dateFilter();
+            const minDateVal = this.minDate();
+            const maxDateVal = this.maxDate();
+            return (!!date &&
+                (!dateFilter || dateFilter(date, CmatDatetimepickerFilterType.DATE)) &&
+                (!minDateVal || this._adapter.compareDate(date, minDateVal) >= 0) &&
+                (!maxDateVal || this._adapter.compareDate(date, maxDateVal) <= 0));
+        };
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
-        this.dateFilterForViews = (date) => !!date &&
-            (!this.dateFilter || this.dateFilter(date, CmatDatetimepickerFilterType.DATE)) &&
-            (!this.minDate || this._adapter.compareDate(date, this.minDate) >= 0) &&
-            (!this.maxDate || this._adapter.compareDate(date, this.maxDate) <= 0);
         if (!this._adapter) {
             throw createMissingDateImplError('CDatetimeAdapter');
         }
@@ -1233,151 +1312,82 @@ class CmatDatetimepickerCalendarComponent {
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this.intlVersion.update(value => value + 1));
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
-    }
-    get type() {
-        return this._type;
-    }
-    set type(value) {
-        this._type = value || 'date';
-        if (this.type === 'year') {
-            this.multiYearSelector = true;
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get startAt() {
-        return this._startAt;
-    }
-    set startAt(value) {
-        this._startAt = this._adapter.getValidDateOrNull(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get timeInput() {
-        return this._timeInput;
-    }
-    set timeInput(value) {
-        this._timeInput = coerceBooleanProperty(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = this._adapter.getValidDateOrNull(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this._adapter.getValidDateOrNull(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this._adapter.getValidDateOrNull(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get activeDate() {
-        return this._clampedActiveDate;
-    }
-    set activeDate(value) {
-        const oldActiveDate = this._clampedActiveDate;
-        this._clampedActiveDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
-        if (oldActiveDate && this._clampedActiveDate &&
-            !this._adapter.sameMonthAndYear(oldActiveDate, this._clampedActiveDate)) {
-            if (this._adapter.isInNextMonth(oldActiveDate, this._clampedActiveDate)) {
-                this._changeCalendarState('right');
+        this._keydownListener = this.handleCalendarBodyKeydown.bind(this);
+        this._elementRef.nativeElement.addEventListener('keydown', this._keydownListener);
+        // Watch for type changes
+        effect(() => {
+            const typeValue = this.type();
+            if (typeValue === 'year') {
+                this.multiYearSelector.set(true);
             }
-            else {
-                this._changeCalendarState('left');
-            }
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get currentView() {
-        return this._currentView;
-    }
-    set currentView(view) {
-        this._currentView = view;
-        this.viewChanged.emit(view);
+        });
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get yearButtonText() {
-        return this._adapter.getYearName(this.activeDate);
+        return this._adapter.getYearName(this.activeDate());
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get yearPeriodText() {
-        if (this.currentView === 'multi-year') {
-            const activeYear = this._adapter.getYear(this.activeDate);
-            const minYearOfPage = activeYear - getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate);
+        if (this.getCurrentView() === 'multi-year') {
+            const activeYear = this._adapter.getYear(this.activeDate());
+            const minYearOfPage = activeYear -
+                getActiveOffset(this._adapter, this.activeDate(), this.minDate(), this.maxDate());
             const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
             const minYearName = this._adapter.getYearName(this._adapter.createDate(minYearOfPage, 0, 1));
             const maxYearName = this._adapter.getYearName(this._adapter.createDate(maxYearOfPage, 0, 1));
             return this._intl.formatYearRange(minYearName, maxYearName);
         }
-        return this.currentView === 'month' ? this._adapter.getMonthNames('long')[this._adapter.getMonth(this.activeDate)] :
-            this._adapter.getYearName(this.activeDate);
+        return this.getCurrentView() === 'month'
+            ? this._adapter.getMonthNames('long')[this._adapter.getMonth(this.activeDate())]
+            : this._adapter.getYearName(this.activeDate());
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get yearButtonLabel() {
-        return this.multiYearSelector
+        return this.multiYearSelector()
             ? this._intl.switchToMultiYearViewLabel
             : this._intl.switchToYearViewLabel;
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get dateButtonText() {
-        switch (this.type) {
+        switch (this.type()) {
             case 'month':
-                return this._adapter.getMonthNames('long')[this._adapter.getMonth(this.activeDate)];
+                return this._adapter.getMonthNames('long')[this._adapter.getMonth(this.activeDate())];
             default:
-                return this._adapter.format(this.activeDate, this._dateFormats.display.popupHeaderDateLabel);
+                return this._adapter.format(this.activeDate(), this._dateFormats.display.popupHeaderDateLabel);
         }
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get dateButtonLabel() {
         return this._intl.switchToMonthViewLabel;
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get hoursButtonText() {
-        let hour = this._adapter.getHour(this.activeDate);
-        if (this.twelvehour) {
+        let hour = this._adapter.getHour(this.activeDate());
+        if (this.twelvehour()) {
             if (hour === 0) {
                 hour = 24;
             }
-            hour = hour > 12 ? (hour - 12) : hour;
+            hour = hour > 12 ? hour - 12 : hour;
         }
         return this._2digit(hour);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get hourButtonLabel() {
         return this._intl.switchToClockHourViewLabel;
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get minutesButtonText() {
-        return this._2digit(this._adapter.getMinute(this.activeDate));
+        return this._2digit(this._adapter.getMinute(this.activeDate()));
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get minuteButtonLabel() {
         return this._intl.switchToClockMinuteViewLabel;
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get prevButtonLabel() {
-        switch (this._currentView) {
+        switch (this._currentView()) {
             case 'month':
                 return this._intl.prevMonthLabel;
             case 'year':
-                return this._intl.prevYearLabel;
+                return this._intl.nextYearLabel;
             case 'multi-year':
                 return this._intl.prevMultiYearLabel;
             default:
                 return '';
         }
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get nextButtonLabel() {
-        switch (this._currentView) {
+        switch (this._currentView()) {
             case 'month':
                 return this._intl.nextMonthLabel;
             case 'year':
@@ -1389,13 +1399,13 @@ class CmatDatetimepickerCalendarComponent {
         }
     }
     handleCalendarBodyKeydown(event) {
-        if (this.currentView === 'month') {
+        if (this.getCurrentView() === 'month') {
             this._handleCalendarBodyKeydownInMonthView(event);
         }
-        else if (this.currentView === 'year') {
+        else if (this.getCurrentView() === 'year') {
             this._handleCalendarBodyKeydownInYearView(event);
         }
-        else if (this.currentView === 'multi-year') {
+        else if (this.getCurrentView() === 'multi-year') {
             this._handleCalendarBodyKeydownInMultiYearView(event);
         }
         else {
@@ -1406,89 +1416,101 @@ class CmatDatetimepickerCalendarComponent {
         this.userSelection.emit();
     }
     ngAfterContentInit() {
-        this.activeDate = this.startAt ?? this._adapter.today();
-        this.selectAMPM(this.activeDate);
+        const initialDate = this.startAt() ?? this._adapter.today();
+        this._clampedActiveDate.set(initialDate);
+        this.selectAMPM(this.activeDate());
         this.focusActiveCell();
-        if (this.type === 'year') {
-            this.currentView = 'multi-year';
+        if (this.type() === 'year') {
+            this.setCurrentView('multi-year');
         }
-        else if (this.type === 'month') {
-            this.currentView = 'year';
+        else if (this.type() === 'month') {
+            this.setCurrentView('year');
         }
-        else if (this.type === 'time') {
-            this.currentView = 'clock';
+        else if (this.type() === 'time') {
+            this.setCurrentView('clock');
         }
         else {
-            this.currentView = this.startView || 'month';
+            this.setCurrentView(this.startView() || 'month');
         }
     }
     ngOnDestroy() {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
+        this._elementRef.nativeElement.removeEventListener('keydown', this._keydownListener);
     }
     dateSelected(date) {
-        if (this.type === 'date') {
-            if (!this._adapter.sameDate(date, this.selected) || !this.preventSameDateTimeSelection) {
+        if (this.type() === 'date') {
+            const selectedValue = this.selected();
+            if (!this._adapter.sameDate(date, selectedValue) ||
+                !this.preventSameDateTimeSelection()) {
                 this.selectedChange.emit(date);
             }
         }
         else {
-            this.activeDate = date;
-            this.currentView = 'clock';
+            this._clampedActiveDate.set(date);
+            this.setCurrentView('clock');
         }
     }
     monthSelected(month) {
-        if (this.type === 'month') {
-            if (!this._adapter.sameMonthAndYear(month, this.selected) || !this.preventSameDateTimeSelection) {
+        if (this.type() === 'month') {
+            const selectedValue = this.selected();
+            if (!this._adapter.sameMonthAndYear(month, selectedValue) ||
+                !this.preventSameDateTimeSelection()) {
                 this.selectedChange.emit(this._adapter.getFirstDateOfMonth(month));
             }
         }
         else {
-            this.activeDate = month;
-            this.currentView = 'month';
-            this.clockView = 'hour';
+            this._clampedActiveDate.set(month);
+            this.setCurrentView('month');
+            this.clockView.set('hour');
         }
     }
     yearSelected(year) {
-        if (this.type === 'year') {
-            if ((this.selected && !this._adapter.sameYear(year, this.selected)) || !this.preventSameDateTimeSelection) {
+        if (this.type() === 'year') {
+            const selectedValue = this.selected();
+            if ((selectedValue && !this._adapter.sameYear(year, selectedValue)) ||
+                !this.preventSameDateTimeSelection()) {
                 const normalizedDate = this._adapter.createDatetime(this._adapter.getYear(year), 0, 1, 0, 0);
                 this.selectedChange.emit(normalizedDate);
             }
         }
         else {
-            this.activeDate = year;
-            this.currentView = 'year';
+            this._clampedActiveDate.set(year);
+            this.setCurrentView('year');
         }
     }
     timeSelected(date) {
-        this.activeDate = this.updateDate(date);
-        if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
+        this._clampedActiveDate.set(this.updateDate(date));
+        const selectedValue = this.selected();
+        if (!this._adapter.sameDatetime(date, selectedValue) ||
+            !this.preventSameDateTimeSelection()) {
             this.selectedChange.emit(date);
         }
     }
     dialTimeSelected(date) {
-        if (this.clockView !== 'minute') {
-            this.activeDate = this.updateDate(date);
-            this.clockView = 'minute';
+        if (this.clockView() !== 'minute') {
+            this._clampedActiveDate.set(this.updateDate(date));
+            this.clockView.set('minute');
         }
         else {
-            if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
+            const selectedValue = this.selected();
+            if (!this._adapter.sameDatetime(date, selectedValue) ||
+                !this.preventSameDateTimeSelection()) {
                 this.selectedChange.emit(date);
             }
         }
     }
     onActiveDateChange(date) {
-        this.activeDate = date;
+        this._clampedActiveDate.set(date);
     }
     updateDate(date) {
-        if (this.twelvehour) {
+        if (this.twelvehour()) {
             const HOUR = this._adapter.getHour(date);
             if (HOUR === 12) {
-                if (this.AMPM === 'AM') {
+                if (this.AMPM() === 'AM') {
                     return this._adapter.addCalendarHours(date, -12);
                 }
             }
-            else if (this.AMPM === 'PM') {
+            else if (this.AMPM() === 'PM') {
                 return this._adapter.addCalendarHours(date, 12);
             }
         }
@@ -1496,119 +1518,123 @@ class CmatDatetimepickerCalendarComponent {
     }
     selectAMPM(date) {
         if (this._adapter.getHour(date) > 11) {
-            this.AMPM = 'PM';
+            this.AMPM.set('PM');
         }
         else {
-            this.AMPM = 'AM';
+            this.AMPM.set('AM');
         }
     }
     ampmClicked(source) {
-        this._currentView = 'clock';
-        if (source === this.AMPM) {
+        this._currentView.set('clock');
+        if (source === this.AMPM()) {
             return;
         }
-        this.AMPM = source;
-        const currentHour = this._adapter.getHour(this.activeDate);
+        this.AMPM.set(source);
+        const currentHour = this._adapter.getHour(this.activeDate());
         let newHourValue;
-        if (this.AMPM === 'AM') {
-            newHourValue = currentHour >= 12 ? this._adapter.getHour(this.activeDate) - 12 : 12;
+        if (this.AMPM() === 'AM') {
+            newHourValue =
+                currentHour >= 12 ? this._adapter.getHour(this.activeDate()) - 12 : 12;
         }
         else {
             newHourValue = (currentHour + 12) % 24;
         }
-        this.activeDate = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), newHourValue, this._adapter.getMinute(this.activeDate));
+        this._clampedActiveDate.set(this._adapter.createDatetime(this._adapter.getYear(this.activeDate()), this._adapter.getMonth(this.activeDate()), this._adapter.getDate(this.activeDate()), newHourValue, this._adapter.getMinute(this.activeDate())));
     }
     yearClicked() {
-        if (this.type === 'year' || this.multiYearSelector) {
-            this.currentView = 'multi-year';
+        if (this.type() === 'year' || this.multiYearSelector()) {
+            this.setCurrentView('multi-year');
             return;
         }
-        this.currentView = 'year';
+        this.setCurrentView('year');
     }
     dateClicked() {
-        if (this.type !== 'month') {
-            this.currentView = 'month';
+        if (this.type() !== 'month') {
+            this.setCurrentView('month');
         }
     }
     hoursClicked() {
-        this.currentView = 'clock';
-        this.clockView = 'hour';
+        this.setCurrentView('clock');
+        this.clockView.set('hour');
     }
     minutesClicked() {
-        this.currentView = 'clock';
-        this.clockView = 'minute';
+        this.setCurrentView('clock');
+        this.clockView.set('minute');
     }
     previousClicked() {
-        this.activeDate = this.currentView === 'month' ?
-            this._adapter.addCalendarMonths(this.activeDate, -1) :
-            this._adapter.addCalendarYears(this.activeDate, this.currentView === 'year' ? -1 : -yearsPerPage);
+        this._clampedActiveDate.set(this.getCurrentView() === 'month'
+            ? this._adapter.addCalendarMonths(this.activeDate(), -1)
+            : this._adapter.addCalendarYears(this.activeDate(), this.getCurrentView() === 'year' ? -1 : -yearsPerPage));
     }
     nextClicked() {
-        this.activeDate = this.currentView === 'month' ?
-            this._adapter.addCalendarMonths(this.activeDate, 1) :
-            this._adapter.addCalendarYears(this.activeDate, this.currentView === 'year' ? 1 : yearsPerPage);
+        this._clampedActiveDate.set(this.getCurrentView() === 'month'
+            ? this._adapter.addCalendarMonths(this.activeDate(), 1)
+            : this._adapter.addCalendarYears(this.activeDate(), this.getCurrentView() === 'year' ? 1 : yearsPerPage));
     }
     previousEnabled() {
-        if (!this.minDate) {
+        const minDateVal = this.minDate();
+        if (!minDateVal) {
             return true;
         }
-        return !this.minDate || !this._isSameView(this.activeDate, this.minDate);
+        return !minDateVal || !this._isSameView(this.activeDate(), minDateVal);
     }
     nextEnabled() {
-        return !this.maxDate || !this._isSameView(this.activeDate, this.maxDate);
+        const maxDateVal = this.maxDate();
+        return !maxDateVal || !this._isSameView(this.activeDate(), maxDateVal);
     }
     focusActiveCell() {
         this._elementRef.nativeElement.focus();
     }
     calendarStateDone(event) {
-        if (event.animationName === 'slideCalendarLeft' || event.animationName === 'slideCalendarRight') {
+        if (event.animationName === 'slideCalendarLeft' ||
+            event.animationName === 'slideCalendarRight') {
             this.calendarState.set('');
         }
     }
     _isSameView(date1, date2) {
-        if (this.currentView === 'month') {
-            return this._adapter.getYear(date1) === this._adapter.getYear(date2) &&
-                this._adapter.getMonth(date1) === this._adapter.getMonth(date2);
+        if (this.getCurrentView() === 'month') {
+            return (this._adapter.getYear(date1) === this._adapter.getYear(date2) &&
+                this._adapter.getMonth(date1) === this._adapter.getMonth(date2));
         }
-        if (this.currentView === 'year') {
+        if (this.getCurrentView() === 'year') {
             return this._adapter.getYear(date1) === this._adapter.getYear(date2);
         }
-        return isSameMultiYearView(this._adapter, date1, date2, this.minDate, this.maxDate);
+        return isSameMultiYearView(this._adapter, date1, date2, this.minDate(), this.maxDate());
     }
     _handleCalendarBodyKeydownInMonthView(event) {
         switch (event.code) {
             case 'ArrowLeft':
-                this.activeDate = this._adapter.addCalendarDays(this.activeDate, -1);
+                this._clampedActiveDate.set(this._adapter.addCalendarDays(this.activeDate(), -1));
                 break;
             case 'ArrowRight':
-                this.activeDate = this._adapter.addCalendarDays(this.activeDate, 1);
+                this._clampedActiveDate.set(this._adapter.addCalendarDays(this.activeDate(), 1));
                 break;
             case 'ArrowUp':
-                this.activeDate = this._adapter.addCalendarDays(this.activeDate, -7);
+                this._clampedActiveDate.set(this._adapter.addCalendarDays(this.activeDate(), -7));
                 break;
             case 'ArrowDown':
-                this.activeDate = this._adapter.addCalendarDays(this.activeDate, 7);
+                this._clampedActiveDate.set(this._adapter.addCalendarDays(this.activeDate(), 7));
                 break;
             case 'Home':
-                this.activeDate = this._adapter.addCalendarDays(this.activeDate, 1 - this._adapter.getDate(this.activeDate));
+                this._clampedActiveDate.set(this._adapter.addCalendarDays(this.activeDate(), 1 - this._adapter.getDate(this.activeDate())));
                 break;
             case 'End':
-                this.activeDate = this._adapter.addCalendarDays(this.activeDate, (this._adapter.getNumDaysInMonth(this.activeDate) -
-                    this._adapter.getDate(this.activeDate)));
+                this._clampedActiveDate.set(this._adapter.addCalendarDays(this.activeDate(), this._adapter.getNumDaysInMonth(this.activeDate()) -
+                    this._adapter.getDate(this.activeDate())));
                 break;
             case 'PageUp':
-                this.activeDate = event.altKey ?
-                    this._adapter.addCalendarYears(this.activeDate, -1) :
-                    this._adapter.addCalendarMonths(this.activeDate, -1);
+                this._clampedActiveDate.set(event.altKey
+                    ? this._adapter.addCalendarYears(this.activeDate(), -1)
+                    : this._adapter.addCalendarMonths(this.activeDate(), -1));
                 break;
             case 'PageDown':
-                this.activeDate = event.altKey ?
-                    this._adapter.addCalendarYears(this.activeDate, 1) :
-                    this._adapter.addCalendarMonths(this.activeDate, 1);
+                this._clampedActiveDate.set(event.altKey
+                    ? this._adapter.addCalendarYears(this.activeDate(), 1)
+                    : this._adapter.addCalendarMonths(this.activeDate(), 1));
                 break;
             case 'Enter':
-                if (this.dateFilterForViews(this.activeDate)) {
-                    this.dateSelected(this.activeDate);
+                if (this.dateFilterForViews(this.activeDate())) {
+                    this.dateSelected(this.activeDate());
                     event.preventDefault();
                 }
                 return;
@@ -1620,33 +1646,31 @@ class CmatDatetimepickerCalendarComponent {
     _handleCalendarBodyKeydownInYearView(event) {
         switch (event.code) {
             case 'ArrowLeft':
-                this.activeDate = this._adapter.addCalendarMonths(this.activeDate, -1);
+                this._clampedActiveDate.set(this._adapter.addCalendarMonths(this.activeDate(), -1));
                 break;
             case 'ArrowRight':
-                this.activeDate = this._adapter.addCalendarMonths(this.activeDate, 1);
+                this._clampedActiveDate.set(this._adapter.addCalendarMonths(this.activeDate(), 1));
                 break;
             case 'ArrowUp':
-                this.activeDate = this._prevMonthInSameCol(this.activeDate);
+                this._clampedActiveDate.set(this._prevMonthInSameCol(this.activeDate()));
                 break;
             case 'ArrowDown':
-                this.activeDate = this._nextMonthInSameCol(this.activeDate);
+                this._clampedActiveDate.set(this._nextMonthInSameCol(this.activeDate()));
                 break;
             case 'Home':
-                this.activeDate = this._adapter.addCalendarMonths(this.activeDate, -this._adapter.getMonth(this.activeDate));
+                this._clampedActiveDate.set(this._adapter.addCalendarMonths(this.activeDate(), -this._adapter.getMonth(this.activeDate())));
                 break;
             case 'End':
-                this.activeDate = this._adapter.addCalendarMonths(this.activeDate, 11 - this._adapter.getMonth(this.activeDate));
+                this._clampedActiveDate.set(this._adapter.addCalendarMonths(this.activeDate(), 11 - this._adapter.getMonth(this.activeDate())));
                 break;
             case 'PageUp':
-                this.activeDate =
-                    this._adapter.addCalendarYears(this.activeDate, event.altKey ? -10 : -1);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), event.altKey ? -10 : -1));
                 break;
             case 'PageDown':
-                this.activeDate =
-                    this._adapter.addCalendarYears(this.activeDate, event.altKey ? 10 : 1);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), event.altKey ? 10 : 1));
                 break;
             case 'Enter':
-                this.monthSelected(this.activeDate);
+                this.monthSelected(this.activeDate());
                 break;
             default:
                 return;
@@ -1656,33 +1680,33 @@ class CmatDatetimepickerCalendarComponent {
     _handleCalendarBodyKeydownInMultiYearView(event) {
         switch (event.code) {
             case 'ArrowLeft':
-                this.activeDate = this._adapter.addCalendarYears(this.activeDate, -1);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), -1));
                 break;
             case 'ArrowRight':
-                this.activeDate = this._adapter.addCalendarYears(this.activeDate, 1);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), 1));
                 break;
             case 'ArrowUp':
-                this.activeDate = this._adapter.addCalendarYears(this.activeDate, -yearsPerRow);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), -yearsPerRow));
                 break;
             case 'ArrowDown':
-                this.activeDate = this._adapter.addCalendarYears(this.activeDate, yearsPerRow);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), yearsPerRow));
                 break;
             case 'Home':
-                this.activeDate = this._adapter.addCalendarYears(this.activeDate, -getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate));
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), -getActiveOffset(this._adapter, this.activeDate(), this.minDate(), this.maxDate())));
                 break;
             case 'End':
-                this.activeDate = this._adapter.addCalendarYears(this.activeDate, yearsPerPage - getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate) - 1);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), yearsPerPage -
+                    getActiveOffset(this._adapter, this.activeDate(), this.minDate(), this.maxDate()) -
+                    1));
                 break;
             case 'PageUp':
-                this.activeDate =
-                    this._adapter.addCalendarYears(this.activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), event.altKey ? -yearsPerPage * 10 : -yearsPerPage));
                 break;
             case 'PageDown':
-                this.activeDate =
-                    this._adapter.addCalendarYears(this.activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
+                this._clampedActiveDate.set(this._adapter.addCalendarYears(this.activeDate(), event.altKey ? yearsPerPage * 10 : yearsPerPage));
                 break;
             case 'Enter':
-                this.yearSelected(this.activeDate);
+                this.yearSelected(this.activeDate());
                 break;
             default:
                 return;
@@ -1691,20 +1715,20 @@ class CmatDatetimepickerCalendarComponent {
     _handleCalendarBodyKeydownInClockView(event) {
         switch (event.code) {
             case 'ArrowUp':
-                this.activeDate = this.clockView === 'hour' ?
-                    this._adapter.addCalendarHours(this.activeDate, 1) :
-                    this._adapter.addCalendarMinutes(this.activeDate, this.timeInterval);
-                this.selectAMPM(this.activeDate);
+                this._clampedActiveDate.set(this.clockView() === 'hour'
+                    ? this._adapter.addCalendarHours(this.activeDate(), 1)
+                    : this._adapter.addCalendarMinutes(this.activeDate(), this.timeInterval()));
+                this.selectAMPM(this.activeDate());
                 break;
             case 'ArrowDown':
-                this.activeDate = this.clockView === 'hour' ?
-                    this._adapter.addCalendarHours(this.activeDate, -1) :
-                    this._adapter.addCalendarMinutes(this.activeDate, -this.timeInterval);
-                this.selectAMPM(this.activeDate);
+                this._clampedActiveDate.set(this.clockView() === 'hour'
+                    ? this._adapter.addCalendarHours(this.activeDate(), -1)
+                    : this._adapter.addCalendarMinutes(this.activeDate(), -this.timeInterval()));
+                this.selectAMPM(this.activeDate());
                 break;
             case 'Enter':
-                if (!this.timeInput) {
-                    this.dialTimeSelected(this.activeDate);
+                if (!this.timeInput()) {
+                    this.dialTimeSelected(this.activeDate());
                 }
                 return;
             default:
@@ -1713,13 +1737,19 @@ class CmatDatetimepickerCalendarComponent {
         event.preventDefault();
     }
     _prevMonthInSameCol(date) {
-        const increment = this._adapter.getMonth(date) <= 4 ? -5 :
-            (this._adapter.getMonth(date) >= 7 ? -7 : -12);
+        const increment = this._adapter.getMonth(date) <= 4
+            ? -5
+            : this._adapter.getMonth(date) >= 7
+                ? -7
+                : -12;
         return this._adapter.addCalendarMonths(date, increment);
     }
     _nextMonthInSameCol(date) {
-        const increment = this._adapter.getMonth(date) <= 4 ? 7 :
-            (this._adapter.getMonth(date) >= 7 ? 5 : 12);
+        const increment = this._adapter.getMonth(date) <= 4
+            ? 7
+            : this._adapter.getMonth(date) >= 7
+                ? 5
+                : 12;
         return this._adapter.addCalendarMonths(date, increment);
     }
     _changeCalendarState(direction) {
@@ -1728,62 +1758,29 @@ class CmatDatetimepickerCalendarComponent {
     _2digit(n) {
         return ('00' + n).slice(-2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDatetimepickerCalendarComponent, isStandalone: true, selector: "cmat-datetimepicker-calendar", inputs: { multiYearSelector: "multiYearSelector", startView: "startView", twelvehour: "twelvehour", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", timeInput: "timeInput", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", viewChanged: "viewChanged" }, host: { listeners: { "keydown": "handleCalendarBodyKeydown($event)" }, properties: { "class.cmat-datetimepicker-calendar-with-time-input": "timeInput", "class": "this.class", "attr.aria-label": "this.label", "role": "this.role", "tabindex": "this.tabindex" } }, exportAs: ["cmatDatetimepickerCalendar"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-calendar-header\" [attr.data-refresh]=\"intlVersion()\">\r\n  @if (type !== 'time') {\r\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\">\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector || type === 'year') {\r\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\">\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  }\r\n  @if (type !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type !== 'time') {\r\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\r\n    }\r\n    @if (type.endsWith('time')) {\r\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\r\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\r\n          {{ hoursButtonText }}</div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\r\n          minutesButtonText }}</div>\r\n      </span>\r\n      @if (twelvehour) {\r\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"AM\"\r\n          [class.active]=\"AMPM === 'AM'\" (click)=\"ampmClicked('AM')\">AM</div>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"PM\"\r\n          [class.active]=\"AMPM === 'PM'\" (click)=\"ampmClicked('PM')\">PM</div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\r\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button matIconButton type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n        </svg>\r\n      </button>\r\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\">\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button type=\"button\" matIconButton class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  @switch (currentView) {\r\n  @case ('month') {\r\n  <cmat-datetimepicker-month-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\">\r\n  </cmat-datetimepicker-month-view>\r\n  }\r\n  @case ('year') {\r\n  <cmat-datetimepicker-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\">\r\n  </cmat-datetimepicker-year-view>\r\n  }\r\n  @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\" (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\">\r\n  </cmat-datetimepicker-multi-year-view>\r\n  }\r\n  @default {\r\n  @if (timeInput) {\r\n  <cmat-datetimepicker-time [AMPM]=\"AMPM\" [clockView]=\"clockView\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\"\r\n    [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\"\r\n    (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\" (ampmChange)=\"ampmClicked($event)\" (clockViewChange)=\"clockView = $event\">\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\r\n    [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\" (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"dialTimeSelected($event)\">\r\n  </cmat-datetimepicker-clock>\r\n  }\r\n  }\r\n  }\r\n</div>\r\n", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerMonthViewComponent, selector: "cmat-datetimepicker-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMonthView"] }, { kind: "component", type: CmatDatetimepickerYearViewComponent, selector: "cmat-datetimepicker-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerYearView"] }, { kind: "component", type: CmatDatetimepickerMultiYearViewComponent, selector: "cmat-datetimepicker-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMultiYearView"] }, { kind: "component", type: CmatDatetimepickerTimeComponent, selector: "cmat-datetimepicker-time", inputs: ["dateFilter", "interval", "AMPM", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "userSelection", "ampmChange", "clockViewChange"], exportAs: ["cmatDatetimepickerTime"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDatetimepickerCalendarComponent, isStandalone: true, selector: "cmat-datetimepicker-calendar", inputs: { startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, twelvehour: { classPropertyName: "twelvehour", publicName: "twelvehour", isSignal: true, isRequired: false, transformFunction: null }, timeInterval: { classPropertyName: "timeInterval", publicName: "timeInterval", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiYearSelector: { classPropertyName: "multiYearSelector", publicName: "multiYearSelector", isSignal: true, isRequired: false, transformFunction: null }, timeInput: { classPropertyName: "timeInput", publicName: "timeInput", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, preventSameDateTimeSelection: { classPropertyName: "preventSameDateTimeSelection", publicName: "preventSameDateTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", viewChanged: "viewChanged", multiYearSelector: "multiYearSelectorChange" }, host: { attributes: { "role": "dialog", "tabindex": "0" }, properties: { "attr.aria-label": "\"ariaLabel\"", "class.cmat-datetimepicker-calendar-with-time-input": "timeInput()" }, classAttribute: "cmat-datetimepicker-calendar" }, exportAs: ["cmatDatetimepickerCalendar"], ngImport: i0, template: "<div\r\n  class=\"cmat-datetimepicker-calendar-header\"\r\n  [attr.data-refresh]=\"intlVersion()\"\r\n>\r\n  @if (type() !== 'time') {\r\n  <div\r\n    role=\"presentation\"\r\n    class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView() === 'year' || currentView() === 'multi-year'\"\r\n    [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\"\r\n  >\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector() || type() === 'year') {\r\n    <svg\r\n      class=\"cmat-datetimepicker-calendar-header-year-dropdown\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\"\r\n    >\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  } @if (type() !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type() !== 'time') {\r\n    <div\r\n      role=\"presentation\"\r\n      class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView() === 'month'\"\r\n      [class.not-clickable]=\"type() === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\"\r\n      (click)=\"dateClicked()\"\r\n    >\r\n      {{ dateButtonText }}\r\n    </div>\r\n    } @if (type().endsWith('time')) {\r\n    <span\r\n      class=\"cmat-datetimepicker-calendar-header-time\"\r\n      [class.active]=\"currentView() === 'clock'\"\r\n    >\r\n      <span\r\n        class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\"\r\n      >\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView() === 'hour'\"\r\n          [attr.aria-label]=\"hourButtonLabel\"\r\n          (click)=\"hoursClicked()\"\r\n        >\r\n          {{ hoursButtonText }}\r\n        </div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\"\r\n          >&#58;</span\r\n        >\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView() === 'minute'\"\r\n          [attr.aria-label]=\"minuteButtonLabel\"\r\n          (click)=\"minutesClicked()\"\r\n        >\r\n          {{ minutesButtonText }}\r\n        </div>\r\n      </span>\r\n      @if (twelvehour()) {\r\n      <span\r\n        class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\"\r\n      >\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n          aria-label=\"AM\"\r\n          [class.active]=\"AMPM() === 'AM'\"\r\n          (click)=\"ampmClicked('AM')\"\r\n        >\r\n          AM\r\n        </div>\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n          aria-label=\"PM\"\r\n          [class.active]=\"AMPM() === 'PM'\"\r\n          (click)=\"ampmClicked('PM')\"\r\n        >\r\n          PM\r\n        </div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div\r\n  class=\"cmat-datetimepicker-calendar-content\"\r\n  [ngClass]=\"{'flex flex-col justify-center': currentView() === 'clock'}\"\r\n>\r\n  @if (currentView() === 'month' || currentView() === 'year' || currentView() ===\r\n  'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button\r\n        matIconButton\r\n        type=\"button\"\r\n        class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\"\r\n        [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\"\r\n        (click)=\"previousClicked()\"\r\n      >\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\r\n        class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\"\r\n      >\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        matIconButton\r\n        class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\"\r\n        [attr.aria-disabled]=\"!nextEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\"\r\n      >\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  } @switch (currentView()) { @case ('month') {\r\n  <cmat-datetimepicker-month-view\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilterForViews\"\r\n    [selected]=\"selected()\"\r\n    [type]=\"type()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"dateSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-month-view>\r\n  } @case ('year') {\r\n  <cmat-datetimepicker-year-view\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilterForViews\"\r\n    [selected]=\"selected()\"\r\n    [type]=\"type()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"monthSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-year-view>\r\n  } @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilterForViews\"\r\n    [maxDate]=\"maxDate()\"\r\n    [minDate]=\"minDate()\"\r\n    [selected]=\"selected()\"\r\n    [type]=\"type()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-multi-year-view>\r\n  } @default { @if (timeInput()) {\r\n  <cmat-datetimepicker-time\r\n    [AMPM]=\"AMPM()\"\r\n    [clockView]=\"clockView()\"\r\n    [twelvehour]=\"twelvehour()\"\r\n    [dateFilter]=\"dateFilter()\"\r\n    [interval]=\"timeInterval()\"\r\n    [maxDate]=\"maxDate()\"\r\n    [minDate]=\"minDate()\"\r\n    [selected]=\"activeDate()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\"\r\n    (ampmChange)=\"ampmClicked($event)\"\r\n    (clockViewChange)=\"clockView.set($event)\"\r\n  >\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilter()\"\r\n    [interval]=\"timeInterval()\"\r\n    [maxDate]=\"maxDate()\"\r\n    [minDate]=\"minDate()\"\r\n    [selected]=\"activeDate()\"\r\n    [startView]=\"clockView()\"\r\n    [twelvehour]=\"twelvehour()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"dialTimeSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-clock>\r\n  } } }\r\n</div>\r\n", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerMonthViewComponent, selector: "cmat-datetimepicker-month-view", inputs: ["type", "dateFilter", "minDate", "maxDate", "selected", "activeDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMonthView"] }, { kind: "component", type: CmatDatetimepickerYearViewComponent, selector: "cmat-datetimepicker-year-view", inputs: ["type", "dateFilter", "minDate", "maxDate", "selected", "activeDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerYearView"] }, { kind: "component", type: CmatDatetimepickerMultiYearViewComponent, selector: "cmat-datetimepicker-multi-year-view", inputs: ["type", "dateFilter", "minDate", "maxDate", "selected", "activeDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMultiYearView"] }, { kind: "component", type: CmatDatetimepickerTimeComponent, selector: "cmat-datetimepicker-time", inputs: ["dateFilter", "interval", "AMPM", "twelvehour", "minDate", "maxDate", "selected", "clockView"], outputs: ["selectedChange", "activeDateChange", "userSelection", "ampmChange", "clockViewChange"], exportAs: ["cmatDatetimepickerTime"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "minDate", "maxDate", "selected", "startView", "activeDate"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-calendar', host: {
+                        'class': 'cmat-datetimepicker-calendar',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[class.cmat-datetimepicker-calendar-with-time-input]': 'timeInput',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendar', imports: [MatButtonModule, CmatDatetimepickerMonthViewComponent, CmatDatetimepickerYearViewComponent,
-                        CmatDatetimepickerMultiYearViewComponent, CmatDatetimepickerTimeComponent, CmatDatetimepickerClockComponent, NgClass], template: "<div class=\"cmat-datetimepicker-calendar-header\" [attr.data-refresh]=\"intlVersion()\">\r\n  @if (type !== 'time') {\r\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\">\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector || type === 'year') {\r\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\">\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  }\r\n  @if (type !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type !== 'time') {\r\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\r\n    }\r\n    @if (type.endsWith('time')) {\r\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\r\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\r\n          {{ hoursButtonText }}</div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\r\n          minutesButtonText }}</div>\r\n      </span>\r\n      @if (twelvehour) {\r\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"AM\"\r\n          [class.active]=\"AMPM === 'AM'\" (click)=\"ampmClicked('AM')\">AM</div>\r\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\" aria-label=\"PM\"\r\n          [class.active]=\"AMPM === 'PM'\" (click)=\"ampmClicked('PM')\">PM</div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\r\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button matIconButton type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\r\n        </svg>\r\n      </button>\r\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\">\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button type=\"button\" matIconButton class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  @switch (currentView) {\r\n  @case ('month') {\r\n  <cmat-datetimepicker-month-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\">\r\n  </cmat-datetimepicker-month-view>\r\n  }\r\n  @case ('year') {\r\n  <cmat-datetimepicker-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\"\r\n    [type]=\"type\" (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\">\r\n  </cmat-datetimepicker-year-view>\r\n  }\r\n  @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\" [selected]=\"selected!\" [type]=\"type\" (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\">\r\n  </cmat-datetimepicker-multi-year-view>\r\n  }\r\n  @default {\r\n  @if (timeInput) {\r\n  <cmat-datetimepicker-time [AMPM]=\"AMPM\" [clockView]=\"clockView\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\"\r\n    [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\"\r\n    (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\" (ampmChange)=\"ampmClicked($event)\" (clockViewChange)=\"clockView = $event\">\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\r\n    [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\" (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\" (selectedChange)=\"dialTimeSelected($event)\">\r\n  </cmat-datetimepicker-clock>\r\n  }\r\n  }\r\n  }\r\n</div>\r\n", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { userSelection: [{
-                type: Output
-            }], multiYearSelector: [{
-                type: Input
-            }], startView: [{
-                type: Input
-            }], twelvehour: [{
-                type: Input
-            }], timeInterval: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], preventSameDateTimeSelection: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], viewChanged: [{
-                type: Output
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], label: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], role: [{
-                type: HostBinding,
-                args: ['role']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['tabindex']
-            }], type: [{
-                type: Input
-            }], startAt: [{
-                type: Input
-            }], timeInput: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], handleCalendarBodyKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+                        '[attr.aria-label]': '"ariaLabel"',
+                        'role': 'dialog',
+                        'tabindex': '0',
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[class.cmat-datetimepicker-calendar-with-time-input]': 'timeInput()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendar', imports: [
+                        MatButtonModule,
+                        CmatDatetimepickerMonthViewComponent,
+                        CmatDatetimepickerYearViewComponent,
+                        CmatDatetimepickerMultiYearViewComponent,
+                        CmatDatetimepickerTimeComponent,
+                        CmatDatetimepickerClockComponent,
+                        NgClass,
+                    ], template: "<div\r\n  class=\"cmat-datetimepicker-calendar-header\"\r\n  [attr.data-refresh]=\"intlVersion()\"\r\n>\r\n  @if (type() !== 'time') {\r\n  <div\r\n    role=\"presentation\"\r\n    class=\"cmat-datetimepicker-calendar-header-year header-button\"\r\n    [class.active]=\"currentView() === 'year' || currentView() === 'multi-year'\"\r\n    [attr.aria-label]=\"yearButtonLabel\"\r\n    (click)=\"yearClicked()\"\r\n  >\r\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\r\n    @if (multiYearSelector() || type() === 'year') {\r\n    <svg\r\n      class=\"cmat-datetimepicker-calendar-header-year-dropdown\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\"\r\n    >\r\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\r\n    </svg>\r\n    }\r\n  </div>\r\n  } @if (type() !== 'year') {\r\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\r\n    @if (type() !== 'time') {\r\n    <div\r\n      role=\"presentation\"\r\n      class=\"cmat-datetimepicker-calendar-header-date header-button\"\r\n      [class.active]=\"currentView() === 'month'\"\r\n      [class.not-clickable]=\"type() === 'month'\"\r\n      [attr.aria-label]=\"dateButtonLabel\"\r\n      (click)=\"dateClicked()\"\r\n    >\r\n      {{ dateButtonText }}\r\n    </div>\r\n    } @if (type().endsWith('time')) {\r\n    <span\r\n      class=\"cmat-datetimepicker-calendar-header-time\"\r\n      [class.active]=\"currentView() === 'clock'\"\r\n    >\r\n      <span\r\n        class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\"\r\n      >\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-hours header-button\"\r\n          [class.active]=\"clockView() === 'hour'\"\r\n          [attr.aria-label]=\"hourButtonLabel\"\r\n          (click)=\"hoursClicked()\"\r\n        >\r\n          {{ hoursButtonText }}\r\n        </div>\r\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\"\r\n          >&#58;</span\r\n        >\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\r\n          [class.active]=\"clockView() === 'minute'\"\r\n          [attr.aria-label]=\"minuteButtonLabel\"\r\n          (click)=\"minutesClicked()\"\r\n        >\r\n          {{ minutesButtonText }}\r\n        </div>\r\n      </span>\r\n      @if (twelvehour()) {\r\n      <span\r\n        class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\"\r\n      >\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n          aria-label=\"AM\"\r\n          [class.active]=\"AMPM() === 'AM'\"\r\n          (click)=\"ampmClicked('AM')\"\r\n        >\r\n          AM\r\n        </div>\r\n        <div\r\n          role=\"presentation\"\r\n          class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\r\n          aria-label=\"PM\"\r\n          [class.active]=\"AMPM() === 'PM'\"\r\n          (click)=\"ampmClicked('PM')\"\r\n        >\r\n          PM\r\n        </div>\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<div\r\n  class=\"cmat-datetimepicker-calendar-content\"\r\n  [ngClass]=\"{'flex flex-col justify-center': currentView() === 'clock'}\"\r\n>\r\n  @if (currentView() === 'month' || currentView() === 'year' || currentView() ===\r\n  'multi-year') {\r\n  <div class=\"cmat-datetimepickermonth-content\">\r\n    <div class=\"cmat-datetimepicker-calendar-controls\">\r\n      <button\r\n        matIconButton\r\n        type=\"button\"\r\n        class=\"cmat-datetimepicker-calendar-previous-button\"\r\n        [class.disabled]=\"!previousEnabled()\"\r\n        [attr.aria-disabled]=\"!previousEnabled()\"\r\n        [attr.aria-label]=\"prevButtonLabel\"\r\n        (click)=\"previousClicked()\"\r\n      >\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\r\n        class=\"cmat-datetimepicker-calendar-period-button text-default font-medium cmat-calendar-slide-animation\"\r\n        [ngClass]=\"{\r\n        'left': calendarState()==='left',\r\n        'right': calendarState()==='right'\r\n        }\"\r\n      >\r\n        <strong>{{ yearPeriodText }}</strong>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        matIconButton\r\n        class=\"cmat-datetimepicker-calendar-next-button\"\r\n        [class.disabled]=\"!nextEnabled()\"\r\n        [attr.aria-disabled]=\"!nextEnabled()\"\r\n        [attr.aria-label]=\"nextButtonLabel\"\r\n        (click)=\"nextClicked()\"\r\n      >\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  } @switch (currentView()) { @case ('month') {\r\n  <cmat-datetimepicker-month-view\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilterForViews\"\r\n    [selected]=\"selected()\"\r\n    [type]=\"type()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"dateSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-month-view>\r\n  } @case ('year') {\r\n  <cmat-datetimepicker-year-view\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilterForViews\"\r\n    [selected]=\"selected()\"\r\n    [type]=\"type()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"monthSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-year-view>\r\n  } @case ('multi-year') {\r\n  <cmat-datetimepicker-multi-year-view\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilterForViews\"\r\n    [maxDate]=\"maxDate()\"\r\n    [minDate]=\"minDate()\"\r\n    [selected]=\"selected()\"\r\n    [type]=\"type()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (selectedChange)=\"yearSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-multi-year-view>\r\n  } @default { @if (timeInput()) {\r\n  <cmat-datetimepicker-time\r\n    [AMPM]=\"AMPM()\"\r\n    [clockView]=\"clockView()\"\r\n    [twelvehour]=\"twelvehour()\"\r\n    [dateFilter]=\"dateFilter()\"\r\n    [interval]=\"timeInterval()\"\r\n    [maxDate]=\"maxDate()\"\r\n    [minDate]=\"minDate()\"\r\n    [selected]=\"activeDate()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"timeSelected($event)\"\r\n    (ampmChange)=\"ampmClicked($event)\"\r\n    (clockViewChange)=\"clockView.set($event)\"\r\n  >\r\n  </cmat-datetimepicker-time>\r\n  } @else {\r\n  <cmat-datetimepicker-clock\r\n    [activeDate]=\"activeDate()\"\r\n    [dateFilter]=\"dateFilter()\"\r\n    [interval]=\"timeInterval()\"\r\n    [maxDate]=\"maxDate()\"\r\n    [minDate]=\"minDate()\"\r\n    [selected]=\"activeDate()\"\r\n    [startView]=\"clockView()\"\r\n    [twelvehour]=\"twelvehour()\"\r\n    (userSelection)=\"userSelected()\"\r\n    (activeDateChange)=\"onActiveDateChange($event)\"\r\n    (selectedChange)=\"dialTimeSelected($event)\"\r\n  >\r\n  </cmat-datetimepicker-clock>\r\n  } } }\r\n</div>\r\n", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!important;padding:0 4px;font-size:inherit;white-space:normal;word-break:break-word;font-weight:500;cursor:pointer}.cmat-datetimepicker-calendar-header-year.header-button{font-size:26px;line-height:24px;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-ampm{opacity:1}.cmat-datetimepicker-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.cmat-datetimepicker-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.cmat-datetimepicker-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{transform:rotate(180deg)}.cmat-datetimepicker-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.cmat-datetimepicker-calendar-table-header th{text-align:center;padding:8px 0}\n", ".cmat-calendar-slide-animation.left{animation:slideCalendarLeft .18s}.cmat-calendar-slide-animation.right{animation:slideCalendarRight .18s}@keyframes slideCalendarLeft{0%,50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideCalendarRight{0%,50%{transform:translate(-100%)}51%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { userSelection: [{ type: i0.Output, args: ["userSelection"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], twelvehour: [{ type: i0.Input, args: [{ isSignal: true, alias: "twelvehour", required: false }] }], timeInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInterval", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], multiYearSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiYearSelector", required: false }] }, { type: i0.Output, args: ["multiYearSelectorChange"] }], timeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInput", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], preventSameDateTimeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventSameDateTimeSelection", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }] } });
 
 let datetimepickerUid = 0;
 const CMAT_DATETIMEPICKER_SCROLL_STRATEGY = new InjectionToken('cmat-datetimepicker-scroll-strategy');
@@ -1794,27 +1791,33 @@ function CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
 const CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     provide: CMAT_DATETIMEPICKER_SCROLL_STRATEGY,
     deps: [Overlay],
-    useFactory: CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY
+    useFactory: CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY,
 };
 class CmatDatetimepickerContentComponent {
     constructor() {
-        this.animationState = signal('enter-dropdown', ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
+        this._calendar = viewChild.required(CmatDatetimepickerCalendarComponent);
+        this.color = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+        this.animationState = signal('enter-dropdown', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
         this.animationDone = new Subject();
         this.dialogLabelId = null;
         this._elementRef = inject(ElementRef);
         this._animationEndListener = null;
     }
     ngOnInit() {
-        this.animationState.set(this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown');
+        this.animationState.set(this.datetimepicker.touchUi() ? 'enter-dialog' : 'enter-dropdown');
         this._animationEndListener = (event) => {
-            if (event.animationName === 'panel-dropdown-enter' || event.animationName === 'panel-dialog-enter' || event.animationName === 'panel-leave') {
+            if (event.animationName === 'panel-dropdown-enter' ||
+                event.animationName === 'panel-dialog-enter' ||
+                event.animationName === 'panel-leave') {
                 this.animationDone.next();
             }
         };
         this._elementRef.nativeElement.addEventListener('animationend', this._animationEndListener);
     }
     ngAfterContentInit() {
-        this._calendar.focusActiveCell();
+        this._calendar().focusActiveCell();
     }
     startExitAnimation() {
         this.animationState.set('leave');
@@ -1823,15 +1826,15 @@ class CmatDatetimepickerContentComponent {
         this.animationDone.complete();
         this._elementRef.nativeElement.removeEventListener('animationend', this._animationEndListener);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatDatetimepickerContentComponent, isStandalone: true, selector: "cmat-datetimepicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.enter-dropdown": "animationState() === \"enter-dropdown\"", "class.enter-dialog": "animationState() === \"enter-dialog\"", "class.leave": "animationState() === \"leave\"", "class.cmat-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode" }, classAttribute: "cmat-datetimepicker-content cmat-datetimepicker-transform-panel" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: CmatDatetimepickerCalendarComponent, descendants: true, static: true }], exportAs: ["cmatDatetimepickerContent"], ngImport: i0, template: "<div cdkTrapFocus role=\"dialog\" class=\"cmat-datetimepicker-content-container\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"dialogLabelId ?? undefined\" [attr.mode]=\"datetimepicker.mode\">\r\n    <cmat-datetimepicker-calendar [id]=\"datetimepicker.id\"\r\n        [ngClass]=\"datetimepicker.panelClass\" [attr.mode]=\"datetimepicker.mode\" [type]=\"datetimepicker.type\"\r\n        [startAt]=\"datetimepicker.startAt\" [startView]=\"datetimepicker.startView\" [maxDate]=\"datetimepicker.maxDate\"\r\n        [minDate]=\"datetimepicker.minDate\" [dateFilter]=\"datetimepicker.dateFilter\"\r\n        [multiYearSelector]=\"datetimepicker.multiYearSelector\"\r\n        [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\r\n        [timeInterval]=\"datetimepicker.timeInterval\" [twelvehour]=\"datetimepicker.twelvehour\"\r\n        [selected]=\"datetimepicker.selected\" [timeInput]=\"datetimepicker.timeInput\"\r\n        (selectedChange)=\"datetimepicker.select($event)\" (viewChanged)=\"datetimepicker.viewChange($event)\"\r\n        (userSelection)=\"datetimepicker.close()\">\r\n    </cmat-datetimepicker-calendar>\r\n</div>", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CmatDatetimepickerCalendarComponent, selector: "cmat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "type", "startAt", "timeInput", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange", "viewChanged"], exportAs: ["cmatDatetimepickerCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CmatDatetimepickerContentComponent, isStandalone: true, selector: "cmat-datetimepicker-content", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "color() ? \"mat-\" + color() : \"\"", "class.enter-dropdown": "animationState() === \"enter-dropdown\"", "class.enter-dialog": "animationState() === \"enter-dialog\"", "class.leave": "animationState() === \"leave\"", "class.cmat-datetimepicker-content-touch": "datetimepicker?.touchUi()", "attr.mode": "datetimepicker.mode()" }, classAttribute: "cmat-datetimepicker-content cmat-datetimepicker-transform-panel" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: CmatDatetimepickerCalendarComponent, descendants: true, isSignal: true }], exportAs: ["cmatDatetimepickerContent"], ngImport: i0, template: "<div\r\n  cdkTrapFocus\r\n  role=\"dialog\"\r\n  class=\"cmat-datetimepicker-content-container\"\r\n  [attr.aria-modal]=\"true\"\r\n  [attr.aria-labelledby]=\"dialogLabelId ?? undefined\"\r\n  [attr.mode]=\"datetimepicker.mode()\"\r\n>\r\n  <cmat-datetimepicker-calendar\r\n    [id]=\"datetimepicker.id\"\r\n    [ngClass]=\"datetimepicker.panelClass()\"\r\n    [attr.mode]=\"datetimepicker.mode()\"\r\n    [type]=\"datetimepicker.type()\"\r\n    [startAt]=\"$any(datetimepicker.startAt())\"\r\n    [startView]=\"datetimepicker.startView()\"\r\n    [maxDate]=\"$any(datetimepicker.maxDate())\"\r\n    [minDate]=\"$any(datetimepicker.minDate())\"\r\n    [dateFilter]=\"$any(datetimepicker.dateFilter())\"\r\n    [multiYearSelector]=\"datetimepicker.multiYearSelector()\"\r\n    [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection()\"\r\n    [timeInterval]=\"datetimepicker.timeInterval()\"\r\n    [twelvehour]=\"datetimepicker.twelvehour()\"\r\n    [selected]=\"$any(datetimepicker.selected())\"\r\n    [timeInput]=\"datetimepicker.timeInput()\"\r\n    (selectedChange)=\"datetimepicker.select($any($event))\"\r\n    (viewChanged)=\"datetimepicker.viewChange($event)\"\r\n    (userSelection)=\"datetimepicker.close()\"\r\n  >\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: ["startView", "twelvehour", "timeInterval", "type", "multiYearSelector", "timeInput", "dateFilter", "preventSameDateTimeSelection", "minDate", "maxDate", "selected", "startAt"], outputs: ["userSelection", "selectedChange", "viewChanged", "multiYearSelectorChange"], exportAs: ["cmatDatetimepickerCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-content', host: {
                         'class': 'cmat-datetimepicker-content cmat-datetimepicker-transform-panel',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[class]': 'color ? "mat-" + color : ""',
+                        '[class]': 'color() ? "mat-" + color() : ""',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class.enter-dropdown]': 'animationState() === "enter-dropdown"',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -1839,153 +1842,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class.leave]': 'animationState() === "leave"',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[class.cmat-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
+                        '[class.cmat-datetimepicker-content-touch]': 'datetimepicker?.touchUi()',
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[attr.mode]': 'datetimepicker.mode'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerContent', imports: [A11yModule, CmatDatetimepickerCalendarComponent, NgClass], template: "<div cdkTrapFocus role=\"dialog\" class=\"cmat-datetimepicker-content-container\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"dialogLabelId ?? undefined\" [attr.mode]=\"datetimepicker.mode\">\r\n    <cmat-datetimepicker-calendar [id]=\"datetimepicker.id\"\r\n        [ngClass]=\"datetimepicker.panelClass\" [attr.mode]=\"datetimepicker.mode\" [type]=\"datetimepicker.type\"\r\n        [startAt]=\"datetimepicker.startAt\" [startView]=\"datetimepicker.startView\" [maxDate]=\"datetimepicker.maxDate\"\r\n        [minDate]=\"datetimepicker.minDate\" [dateFilter]=\"datetimepicker.dateFilter\"\r\n        [multiYearSelector]=\"datetimepicker.multiYearSelector\"\r\n        [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\r\n        [timeInterval]=\"datetimepicker.timeInterval\" [twelvehour]=\"datetimepicker.twelvehour\"\r\n        [selected]=\"datetimepicker.selected\" [timeInput]=\"datetimepicker.timeInput\"\r\n        (selectedChange)=\"datetimepicker.select($event)\" (viewChanged)=\"datetimepicker.viewChange($event)\"\r\n        (userSelection)=\"datetimepicker.close()\">\r\n    </cmat-datetimepicker-calendar>\r\n</div>" }]
-        }], propDecorators: { _calendar: [{
-                type: ViewChild,
-                args: [CmatDatetimepickerCalendarComponent, { static: true }]
-            }], color: [{
-                type: Input
-            }] } });
+                        '[attr.mode]': 'datetimepicker.mode()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerContent', imports: [A11yModule, CmatDatetimepickerCalendarComponent, NgClass], template: "<div\r\n  cdkTrapFocus\r\n  role=\"dialog\"\r\n  class=\"cmat-datetimepicker-content-container\"\r\n  [attr.aria-modal]=\"true\"\r\n  [attr.aria-labelledby]=\"dialogLabelId ?? undefined\"\r\n  [attr.mode]=\"datetimepicker.mode()\"\r\n>\r\n  <cmat-datetimepicker-calendar\r\n    [id]=\"datetimepicker.id\"\r\n    [ngClass]=\"datetimepicker.panelClass()\"\r\n    [attr.mode]=\"datetimepicker.mode()\"\r\n    [type]=\"datetimepicker.type()\"\r\n    [startAt]=\"$any(datetimepicker.startAt())\"\r\n    [startView]=\"datetimepicker.startView()\"\r\n    [maxDate]=\"$any(datetimepicker.maxDate())\"\r\n    [minDate]=\"$any(datetimepicker.minDate())\"\r\n    [dateFilter]=\"$any(datetimepicker.dateFilter())\"\r\n    [multiYearSelector]=\"datetimepicker.multiYearSelector()\"\r\n    [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection()\"\r\n    [timeInterval]=\"datetimepicker.timeInterval()\"\r\n    [twelvehour]=\"datetimepicker.twelvehour()\"\r\n    [selected]=\"$any(datetimepicker.selected())\"\r\n    [timeInput]=\"datetimepicker.timeInput()\"\r\n    (selectedChange)=\"datetimepicker.select($any($event))\"\r\n    (viewChanged)=\"datetimepicker.viewChange($event)\"\r\n    (userSelection)=\"datetimepicker.close()\"\r\n  >\r\n  </cmat-datetimepicker-calendar>\r\n</div>" }]
+        }], propDecorators: { _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CmatDatetimepickerCalendarComponent), { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 class CmatDatetimepickerComponent {
     constructor() {
-        this.startView = 'month';
-        this.mode = 'auto';
-        this.timeInterval = 1;
-        this.preventSameDateTimeSelection = false;
-        this.xPosition = 'start';
-        this.yPosition = 'below';
         this.selectedChanged = new EventEmitter();
-        this.openedStream = new EventEmitter();
-        this.closedStream = new EventEmitter();
-        this.viewChanged = new EventEmitter();
+        this.openedStream = output();
+        this.closedStream = output();
+        this.viewChanged = output();
         this.id = `cmat-datetimepicker-${datetimepickerUid++}`;
         this.disabledChange = new Subject();
+        this.startView = input('month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
+        this.mode = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.timeInterval = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeInterval" }] : /* istanbul ignore next */ []));
+        this.preventSameDateTimeSelection = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventSameDateTimeSelection" }] : /* istanbul ignore next */ []));
+        this.xPosition = input('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "xPosition" }] : /* istanbul ignore next */ []));
+        this.yPosition = input('below', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yPosition" }] : /* istanbul ignore next */ []));
+        this.multiYearSelector = input(false, { ...(ngDevMode ? { debugName: "multiYearSelector" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.twelvehour = input(false, { ...(ngDevMode ? { debugName: "twelvehour" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.panelClass = input('', { ...(ngDevMode ? { debugName: "panelClass" } : /* istanbul ignore next */ {}), transform: coerceStringArray });
+        this.timeInput = input(true, { ...(ngDevMode ? { debugName: "timeInput" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.touchUi = input(false, { ...(ngDevMode ? { debugName: "touchUi" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.restoreFocus = input(true, { ...(ngDevMode ? { debugName: "restoreFocus" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.color = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.type = input('datetime', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.opened = input(false, { ...(ngDevMode ? { debugName: "opened" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.startAt = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+        this.openedState = computed(() => this._opened(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openedState" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => {
+            const disabledValue = this.disabled();
+            return disabledValue === undefined && this.datetimepickerInput
+                ? this.datetimepickerInput.disabled()
+                : !!disabledValue;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => this._validSelected(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.minDate = computed(() => this.datetimepickerInput?.min(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.maxDate = computed(() => this.datetimepickerInput?.max(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.dateFilter = computed(() => this.datetimepickerInput?.dateFilter(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.effectiveColor = computed(() => this.color() ??
+            (this.datetimepickerInput
+                ? this.datetimepickerInput.getThemePalette()
+                : undefined), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+        this.effectiveTimeInput = computed(() => this.timeInput() && !this.touchUi(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveTimeInput" }] : /* istanbul ignore next */ []));
         this._overlay = inject(Overlay);
         this._injector = inject(Injector);
         this._viewContainerRef = inject(ViewContainerRef);
         this._scrollStrategy = inject(CMAT_DATETIMEPICKER_SCROLL_STRATEGY);
-        this._dateAdapter = inject(DatetimeAdapter, { optional: true });
+        this._dateAdapter = inject(DatetimeAdapter, {
+            optional: true,
+        });
         this._dir = inject(Directionality, { optional: true });
         this._document = inject(DOCUMENT, { optional: true });
-        this._validSelected = null;
+        this._validSelected = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_validSelected" }] : /* istanbul ignore next */ []));
         this._focusedElementBeforeOpen = null;
         this._backdropHarnessClass = `${this.id}-backdrop`;
         this._inputStateChanges = Subscription.EMPTY;
         this._closeAnimationTimeoutId = null;
-        this._multiYearSelector = false;
-        this._twelvehour = false;
-        this._opened = false;
-        this._type = 'datetime';
-        this._touchUi = false;
-        this._timeInput = true;
-        this._restoreFocus = true;
+        this._opened = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_opened" }] : /* istanbul ignore next */ []));
+        this._startAt = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_startAt" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         if (!this._dateAdapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
-    }
-    get multiYearSelector() {
-        return this._multiYearSelector;
-    }
-    set multiYearSelector(value) {
-        this._multiYearSelector = coerceBooleanProperty(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get twelvehour() {
-        return this._twelvehour;
-    }
-    set twelvehour(value) {
-        this._twelvehour = coerceBooleanProperty(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get panelClass() {
-        return this._panelClass;
-    }
-    set panelClass(value) {
-        this._panelClass = coerceStringArray(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get opened() {
-        return this._opened;
-    }
-    set opened(value) {
-        coerceBooleanProperty(value) ? this.open() : this.close();
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get color() {
-        return (this._color ??
-            (this.datetimepickerInput ? this.datetimepickerInput.getThemePalette() : undefined));
-    }
-    set color(value) {
-        this._color = value;
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get startAt() {
-        return this._startAt ?? (this.datetimepickerInput ? this.datetimepickerInput.value : null);
-    }
-    set startAt(date) {
-        this._startAt = this._dateAdapter.getValidDateOrNull(date);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get type() {
-        return this._type;
-    }
-    set type(value) {
-        this._type = value || 'datetime';
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get timeInput() {
-        return this._timeInput && !this.touchUi;
-    }
-    set timeInput(value) {
-        this._timeInput = coerceBooleanProperty(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get touchUi() {
-        return this._touchUi;
-    }
-    set touchUi(value) {
-        this._touchUi = coerceBooleanProperty(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get disabled() {
-        return this._disabled === undefined && this.datetimepickerInput ?
-            this.datetimepickerInput.disabled : !!this._disabled;
-    }
-    set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (newValue !== this._disabled) {
-            this._disabled = newValue;
-            this.disabledChange.next(newValue);
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get restoreFocus() {
-        return this._restoreFocus;
-    }
-    set restoreFocus(value) {
-        this._restoreFocus = coerceBooleanProperty(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get selected() {
-        return this._validSelected;
-    }
-    set selected(value) {
-        this._validSelected = value;
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get minDate() {
-        return this.datetimepickerInput?.min;
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get maxDate() {
-        return this.datetimepickerInput?.max;
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get dateFilter() {
-        return this.datetimepickerInput?.dateFilter;
+        // Watch for opened input changes
+        effect(() => {
+            const openedValue = this.opened();
+            if (openedValue) {
+                untracked(() => this.open());
+            }
+            else {
+                untracked(() => this.close());
+            }
+        });
+        // Watch for disabled input changes and sync to internal signal
+        effect(() => {
+            const disabledValue = this.disabled();
+            untracked(() => {
+                if (disabledValue !== undefined && disabledValue !== this._disabled()) {
+                    this._disabled.set(disabledValue);
+                    this.disabledChange.next(!!disabledValue);
+                }
+            });
+        });
+        effect(() => {
+            const startAtValue = this.startAt();
+            this._startAt.set(this._dateAdapter.getValidDateOrNull(startAtValue));
+        });
     }
     ngOnDestroy() {
         this._destroyOverlay();
@@ -1998,11 +1965,10 @@ class CmatDatetimepickerComponent {
             throw Error('A MatDatepicker can only be associated with a single input.');
         }
         this.datetimepickerInput = input;
-        this._inputStateChanges =
-            this.datetimepickerInput.valueChange.subscribe((value) => this.selected = value);
+        this._inputStateChanges = this.datetimepickerInput.valueChange.subscribe((value) => this._validSelected.set(value));
     }
     open() {
-        if (this.opened || this.disabled) {
+        if (this._opened() || this.disabledState()) {
             return;
         }
         if (!this.datetimepickerInput) {
@@ -2010,19 +1976,19 @@ class CmatDatetimepickerComponent {
         }
         this._focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
         this._openOverlay();
-        this._opened = true;
+        this._opened.set(true);
         this.openedStream.emit();
     }
     close() {
-        if (!this._opened) {
+        if (!this._opened()) {
             return;
         }
-        const canRestoreFocus = this._restoreFocus &&
+        const canRestoreFocus = this.restoreFocus() &&
             this._focusedElementBeforeOpen &&
             typeof this._focusedElementBeforeOpen.focus === 'function';
         const completeClose = () => {
-            if (this._opened) {
-                this._opened = false;
+            if (this._opened()) {
+                this._opened.set(false);
                 this.closedStream.emit();
             }
         };
@@ -2059,9 +2025,9 @@ class CmatDatetimepickerComponent {
         }
     }
     select(date) {
-        const oldValue = this.selected;
-        this.selected = date;
-        if (!this._dateAdapter.sameDatetime(oldValue, this.selected)) {
+        const oldValue = this.selected();
+        this._validSelected.set(date);
+        if (!this._dateAdapter.sameDatetime(oldValue, this.selected())) {
             this.selectedChanged.emit(date);
         }
     }
@@ -2070,23 +2036,28 @@ class CmatDatetimepickerComponent {
     }
     _forwardContentValues(instance) {
         instance.datetimepicker = this;
-        instance.color = this.color;
         instance.dialogLabelId = this.datetimepickerInput.getOverlayLabelId();
     }
     _openOverlay() {
         this._destroyOverlay();
-        const isDialog = this.touchUi;
+        const isDialog = this.touchUi();
         const labelId = this.datetimepickerInput.getOverlayLabelId();
         const portal = new ComponentPortal(CmatDatetimepickerContentComponent, this._viewContainerRef);
         const overlayRef = (this._overlayRef = this._overlay.create(new OverlayConfig({
-            positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),
+            positionStrategy: isDialog
+                ? this._getDialogStrategy()
+                : this._getDropdownStrategy(),
             hasBackdrop: true,
             backdropClass: [
-                isDialog ? 'cdk-overlay-dark-backdrop' : 'mat-overlay-transparent-backdrop',
+                isDialog
+                    ? 'cdk-overlay-dark-backdrop'
+                    : 'mat-overlay-transparent-backdrop',
                 this._backdropHarnessClass,
             ],
             direction: this._dir,
-            scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),
+            scrollStrategy: isDialog
+                ? this._overlay.scrollStrategies.block()
+                : this._scrollStrategy(),
             panelClass: `cmat-datetimepicker-${isDialog ? 'dialog' : 'popup'}`,
         })));
         const overlayElement = overlayRef.overlayElement;
@@ -2113,7 +2084,11 @@ class CmatDatetimepickerComponent {
         }
     }
     _getDialogStrategy() {
-        return this._overlay.position().global().centerHorizontally().centerVertically();
+        return this._overlay
+            .position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
     }
     _getDropdownStrategy() {
         const strategy = this._overlay
@@ -2126,9 +2101,9 @@ class CmatDatetimepickerComponent {
         return this._setConnectedPositions(strategy);
     }
     _setConnectedPositions(strategy) {
-        const primaryX = this.xPosition === 'end' ? 'end' : 'start';
+        const primaryX = this.xPosition() === 'end' ? 'end' : 'start';
         const secondaryX = primaryX === 'start' ? 'end' : 'start';
-        const primaryY = this.yPosition === 'above' ? 'bottom' : 'top';
+        const primaryY = this.yPosition() === 'above' ? 'bottom' : 'top';
         const secondaryY = primaryY === 'top' ? 'bottom' : 'top';
         return strategy.withPositions([
             {
@@ -2168,10 +2143,13 @@ class CmatDatetimepickerComponent {
                 subscriber.next();
                 subscriber.complete();
             }));
-            subscriptions.add(overlayRef.keydownEvents().pipe(filter(event => ((event.code === 'Escape' && !hasModifierKey(event)) ||
+            subscriptions.add(overlayRef
+                .keydownEvents()
+                .pipe(filter(event => (event.code === 'Escape' && !hasModifierKey(event)) ||
                 (this.datetimepickerInput &&
                     hasModifierKey(event, 'altKey') &&
-                    event.code === 'ArrowUp')))).subscribe(() => {
+                    event.code === 'ArrowUp')))
+                .subscribe(() => {
                 subscriber.next();
                 subscriber.complete();
             }));
@@ -2180,55 +2158,13 @@ class CmatDatetimepickerComponent {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatDatetimepickerComponent, isStandalone: true, selector: "cmat-datetimepicker", inputs: { startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: "preventSameDateTimeSelection", xPosition: "xPosition", yPosition: "yPosition", multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", panelClass: "panelClass", opened: "opened", color: "color", startAt: "startAt", type: "type", timeInput: "timeInput", touchUi: "touchUi", disabled: "disabled", restoreFocus: "restoreFocus" }, outputs: { selectedChanged: "selectedChanged", openedStream: "openedStream", closedStream: "closedStream", viewChanged: "viewChanged" }, exportAs: ["cmatDatetimepicker"], ngImport: i0, template: '', isInline: true, styles: [".cmat-datetimepicker-calendar-header,.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected).cmat-datetimepicker-calendar-body-today{border-color:var(--cmat-text-hint)}.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected),.cmat-datetimepicker-calendar-body-active>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){background-color:rgba(var(--cmat-primary-rgb),.3)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){color:var(--cmat-text-disabled)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected){border-color:rgba(var(--cmat-text-disabled),.8)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-selected{background-color:rgba(var(--cmat-primary-rgb),.4)}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-clock-wrapper{background-color:var(--cmat-divider)}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{color:#fff!important}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input{background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{background-color:rgba(var(--cmat-primary-rgb),.2)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus{border-color:var(--cmat-primary);background-color:var(--cmat-divider)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus::placeholder{color:rgba(var(--cmat-primary-rgb),.6)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-warning{border-color:var(--cmat-warn)}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{color:var(--cmat-text-hint);border-color:var(--cmat-text-hint)}.cmat-datetimepicker-time-am.mat-mdc-button.cmat-datetimepicker-time-ampm-active,.cmat-datetimepicker-time-pm.mat-mdc-button.cmat-datetimepicker-time-ampm-active{background-color:rgba(var(--cmat-accent-rgb),.2)}.cmat-datetimepicker-content{display:block;border-radius:4px;overflow:hidden}.cmat-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.cmat-datetimepicker-content .cmat-calendar{width:296px;height:424px}.cmat-datetimepicker-content .cmat-calendar.cmat-datetimepicker-calendar-with-time-input{height:490px}.cmat-datetimepicker-content-touch{display:block;position:relative;overflow:visible}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.cmat-datetimepicker-content-touch .cmat-datetimepicker-calendar{width:100%;height:auto}@media all and (orientation:landscape){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:120vh;height:100%;min-height:80vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}}@media all and (orientation:portrait){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container-with-actions{height:135vw}}.cmat-datetimepicker-transform-panel.enter-dropdown{animation:panel-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.enter-dialog{animation:panel-dialog-enter .15s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.leave{animation:panel-leave .1s linear}@keyframes panel-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panel-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panel-leave{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatDatetimepickerComponent, isStandalone: true, selector: "cmat-datetimepicker", inputs: { startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, timeInterval: { classPropertyName: "timeInterval", publicName: "timeInterval", isSignal: true, isRequired: false, transformFunction: null }, preventSameDateTimeSelection: { classPropertyName: "preventSameDateTimeSelection", publicName: "preventSameDateTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, multiYearSelector: { classPropertyName: "multiYearSelector", publicName: "multiYearSelector", isSignal: true, isRequired: false, transformFunction: null }, twelvehour: { classPropertyName: "twelvehour", publicName: "twelvehour", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, timeInput: { classPropertyName: "timeInput", publicName: "timeInput", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedStream: "openedStream", closedStream: "closedStream", viewChanged: "viewChanged" }, exportAs: ["cmatDatetimepicker"], ngImport: i0, template: '', isInline: true, styles: [".cmat-datetimepicker-calendar-header,.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected).cmat-datetimepicker-calendar-body-today{border-color:var(--cmat-text-hint)}.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected),.cmat-datetimepicker-calendar-body-active>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){background-color:rgba(var(--cmat-primary-rgb),.3)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){color:var(--cmat-text-disabled)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected){border-color:rgba(var(--cmat-text-disabled),.8)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-selected{background-color:rgba(var(--cmat-primary-rgb),.4)}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-clock-wrapper{background-color:var(--cmat-divider)}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{color:#fff!important}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input{background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{background-color:rgba(var(--cmat-primary-rgb),.2)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus{border-color:var(--cmat-primary);background-color:var(--cmat-divider)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus::placeholder{color:rgba(var(--cmat-primary-rgb),.6)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-warning{border-color:var(--cmat-warn)}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{color:var(--cmat-text-hint);border-color:var(--cmat-text-hint)}.cmat-datetimepicker-time-am.mat-mdc-button.cmat-datetimepicker-time-ampm-active,.cmat-datetimepicker-time-pm.mat-mdc-button.cmat-datetimepicker-time-ampm-active{background-color:rgba(var(--cmat-accent-rgb),.2)}.cmat-datetimepicker-content{display:block;border-radius:4px;overflow:hidden}.cmat-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.cmat-datetimepicker-content .cmat-calendar{width:296px;height:424px}.cmat-datetimepicker-content .cmat-calendar.cmat-datetimepicker-calendar-with-time-input{height:490px}.cmat-datetimepicker-content-touch{display:block;position:relative;overflow:visible}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.cmat-datetimepicker-content-touch .cmat-datetimepicker-calendar{width:100%;height:auto}@media all and (orientation:landscape){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:120vh;height:100%;min-height:80vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}}@media all and (orientation:portrait){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container-with-actions{height:135vw}}.cmat-datetimepicker-transform-panel.enter-dropdown{animation:panel-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.enter-dialog{animation:panel-dialog-enter .15s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.leave{animation:panel-leave .1s linear}@keyframes panel-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panel-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panel-leave{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker', exportAs: 'cmatDatetimepicker', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, styles: [".cmat-datetimepicker-calendar-header,.cmat-datetimepicker-calendar-body-cell-content.cmat-datetimepicker-calendar-body-selected{color:#fff!important}.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected).cmat-datetimepicker-calendar-body-today{border-color:var(--cmat-text-hint)}.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected),.cmat-datetimepicker-calendar-body-active>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){background-color:rgba(var(--cmat-primary-rgb),.3)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected){color:var(--cmat-text-disabled)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected){border-color:rgba(var(--cmat-text-disabled),.8)}.cmat-datetimepicker-calendar-body-disabled>.cmat-datetimepicker-calendar-body-selected{background-color:rgba(var(--cmat-primary-rgb),.4)}.cmat-datetimepicker-calendar-previous-button.disabled,.cmat-datetimepicker-calendar-next-button.disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-clock-wrapper{background-color:var(--cmat-divider)}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-selected{color:#fff!important}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input{background-color:var(--cmat-text-disabled)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active{background-color:rgba(var(--cmat-primary-rgb),.2)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus{border-color:var(--cmat-primary);background-color:var(--cmat-divider)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-active:focus::placeholder{color:rgba(var(--cmat-primary-rgb),.6)}.cmat-datetimepicker-time-input.cmat-datetimepicker-time-input-warning{border-color:var(--cmat-warn)}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{color:var(--cmat-text-hint);border-color:var(--cmat-text-hint)}.cmat-datetimepicker-time-am.mat-mdc-button.cmat-datetimepicker-time-ampm-active,.cmat-datetimepicker-time-pm.mat-mdc-button.cmat-datetimepicker-time-ampm-active{background-color:rgba(var(--cmat-accent-rgb),.2)}.cmat-datetimepicker-content{display:block;border-radius:4px;overflow:hidden}.cmat-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.cmat-datetimepicker-content .cmat-calendar{width:296px;height:424px}.cmat-datetimepicker-content .cmat-calendar.cmat-datetimepicker-calendar-with-time-input{height:490px}.cmat-datetimepicker-content-touch{display:block;position:relative;overflow:visible}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.cmat-datetimepicker-content-touch .cmat-datetimepicker-calendar{width:100%;height:auto}@media all and (orientation:landscape){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:120vh;height:100%;min-height:80vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}}@media all and (orientation:portrait){.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto],.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=auto] .cmat-datetimepicker-calendar,.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=portrait] .cmat-datetimepicker-calendar{width:100%;height:auto}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container[mode=landscape] .cmat-datetimepicker-calendar{width:auto;height:100%}.cmat-datetimepicker-content-touch .cmat-datetimepicker-content-container-with-actions{height:135vw}}.cmat-datetimepicker-transform-panel.enter-dropdown{animation:panel-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.enter-dialog{animation:panel-dialog-enter .15s cubic-bezier(0,0,.2,1)}.cmat-datetimepicker-transform-panel.leave{animation:panel-leave .1s linear}@keyframes panel-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panel-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panel-leave{0%{opacity:1}to{opacity:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { startView: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], timeInterval: [{
-                type: Input
-            }], preventSameDateTimeSelection: [{
-                type: Input
-            }], xPosition: [{
-                type: Input
-            }], yPosition: [{
-                type: Input
-            }], selectedChanged: [{
-                type: Output
-            }], openedStream: [{
-                type: Output
-            }], closedStream: [{
-                type: Output
-            }], viewChanged: [{
-                type: Output
-            }], multiYearSelector: [{
-                type: Input
-            }], twelvehour: [{
-                type: Input
-            }], panelClass: [{
-                type: Input
-            }], opened: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], startAt: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], timeInput: [{
-                type: Input
-            }], touchUi: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], restoreFocus: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { openedStream: [{ type: i0.Output, args: ["openedStream"] }], closedStream: [{ type: i0.Output, args: ["closedStream"] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], timeInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInterval", required: false }] }], preventSameDateTimeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventSameDateTimeSelection", required: false }] }], xPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "xPosition", required: false }] }], yPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "yPosition", required: false }] }], multiYearSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiYearSelector", required: false }] }], twelvehour: [{ type: i0.Input, args: [{ isSignal: true, alias: "twelvehour", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], timeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeInput", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }] } });
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const CMAT_DATETIMEPICKER_VALUE_ACCESSOR = {
@@ -2245,15 +2181,30 @@ class CmatDatetimepickerInputEvent {
     constructor(target, targetElement) {
         this.target = target;
         this.targetElement = targetElement;
-        this.value = this.target.value;
+        this.value = this.target.value();
     }
 }
 class CmatDatetimepickerInputDirective {
     constructor() {
-        this.dateChange = new EventEmitter();
-        this.dateInput = new EventEmitter();
+        this.dateChange = output();
+        this.dateInput = output();
         this.valueChange = new EventEmitter();
         this.disabledChange = new EventEmitter();
+        this.cmatDatetimepicker = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "cmatDatetimepicker" }] : /* istanbul ignore next */ []));
+        this.cmatDatepickerFilter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "cmatDatepickerFilter" }] : /* istanbul ignore next */ []));
+        this.min = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.value = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.dateFilter = computed(() => this.cmatDatepickerFilter(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        this.datetimepicker = computed(() => this.cmatDatetimepicker(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "datetimepicker" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
         this._dateAdapter = inject(DatetimeAdapter, { optional: true });
         this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
@@ -2261,30 +2212,36 @@ class CmatDatetimepickerInputDirective {
         this._datepickerSubscription = Subscription.EMPTY;
         this._localeSubscription = Subscription.EMPTY;
         this._valueChangeTimeoutId = null;
-        this._lastValueValid = false;
+        this._lastValueValid = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_lastValueValid" }] : /* istanbul ignore next */ []));
+        this._internalValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_internalValue" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouched = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._cvaOnChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._validatorOnChange = () => { };
-        this._parseValidator = () => this._lastValueValid ?
+        this._parseValidator = () => this._lastValueValid() ?
             null : { 'matDatepickerParse': { 'text': this._elementRef.nativeElement.value } };
         this._minValidator = (control) => {
             const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
-            return (!this.min || !controlValue ||
-                this._dateAdapter.compareDatetime(this.min, controlValue) <= 0) ?
-                null : { 'matDatepickerMin': { 'min': this.min, 'actual': controlValue } };
+            const minVal = this.min();
+            return (!minVal || !controlValue ||
+                this._dateAdapter.compareDatetime(minVal, controlValue) <= 0) ?
+                null : { 'matDatepickerMin': { 'min': minVal, 'actual': controlValue } };
         };
         this._maxValidator = (control) => {
             const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
-            return (!this.max || !controlValue ||
-                this._dateAdapter.compareDatetime(this.max, controlValue) >= 0) ?
-                null : { 'matDatepickerMax': { 'max': this.max, 'actual': controlValue } };
+            const maxVal = this.max();
+            return (!maxVal || !controlValue ||
+                this._dateAdapter.compareDatetime(maxVal, controlValue) >= 0) ?
+                null : { 'matDatepickerMax': { 'max': maxVal, 'actual': controlValue } };
         };
         this._filterValidator = (control) => {
             const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
-            return !this.dateFilter || !controlValue || this.dateFilter(controlValue, CmatDatetimepickerFilterType.DATE) ?
+            const filter = this.dateFilter();
+            return !filter || !controlValue || filter(controlValue, CmatDatetimepickerFilterType.DATE) ?
                 null : { 'matDatepickerFilter': true };
         };
         // eslint-disable-next-line @typescript-eslint/member-ordering
@@ -2296,67 +2253,38 @@ class CmatDatetimepickerInputDirective {
         if (!this._dateFormats) {
             throw createMissingDateImplError('CMAT_DATETIME_FORMATS');
         }
-        this._localeSubscription = _dateAdapter.localeChanges.subscribe();
-    }
-    set cmatDatetimepicker(value) {
-        this._registerDatetimepicker(value);
-    }
-    set cmatDatepickerFilter(filter) {
-        this.dateFilter = filter;
-        this._validatorOnChange();
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        value = this._dateAdapter.deserialize(value);
-        this._lastValueValid = !value || this._dateAdapter.isValid(value);
-        value = this._dateAdapter.getValidDateOrNull(value);
-        const oldDate = this.value;
-        this._value = value;
-        this._formatValue(value);
-        if (this._valueChangeTimeoutId !== null) {
-            clearTimeout(this._valueChangeTimeoutId);
-        }
-        this._valueChangeTimeoutId = window.setTimeout(() => {
-            this._valueChangeTimeoutId = null;
-            if (!this._dateAdapter.sameDatetime(oldDate, value)) {
-                this.valueChange.emit(value);
+        this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
+            if (this._internalValue()) {
+                this._formatValue(this._internalValue());
             }
         });
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
-        this._validatorOnChange();
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
-        this._validatorOnChange();
-    }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get disabled() {
-        return !!this._disabled;
-    }
-    set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (this._disabled !== newValue) {
-            this._disabled = newValue;
-            this.disabledChange.emit(newValue);
-        }
+        effect(() => {
+            const inputValue = this.value();
+            untracked(() => this._setValue(inputValue));
+        });
+        effect(() => {
+            this.min();
+            this._validatorOnChange();
+        });
+        effect(() => {
+            this.max();
+            this._validatorOnChange();
+        });
+        effect(() => {
+            this.dateFilter();
+            this._validatorOnChange();
+        });
+        effect(() => {
+            const disabledValue = this.disabled();
+            this.disabledChange.emit(disabledValue);
+        });
     }
     ngAfterContentInit() {
-        if (this.datetimepicker) {
-            this._datepickerSubscription = this.datetimepicker.selectedChanged.subscribe((selected) => {
-                this.value = selected;
+        const picker = this.datetimepicker();
+        if (picker) {
+            picker.registerInput(this);
+            this._datepickerSubscription = picker.selectedChanged.subscribe((selected) => {
+                this._setValue(selected);
                 this._cvaOnChange(selected);
                 this._onTouched();
                 this.dateInput.emit(new CmatDatetimepickerInputEvent(this, this._elementRef.nativeElement));
@@ -2390,7 +2318,7 @@ class CmatDatetimepickerInputDirective {
         return this._elementRef.nativeElement.getAttribute('aria-labelledby');
     }
     writeValue(value) {
-        this.value = value;
+        this._setValue(value);
     }
     registerOnChange(fn) {
         this._cvaOnChange = fn;
@@ -2398,20 +2326,21 @@ class CmatDatetimepickerInputDirective {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setDisabledState(disabled) {
-        this.disabled = disabled;
+        // Disabled state is managed through the disabled input signal
     }
     onKeydown(event) {
         if (event.altKey && event.code === 'ArrowDown') {
-            this.datetimepicker.open();
+            this.datetimepicker()?.open();
             event.preventDefault();
         }
     }
     onInput(value) {
         let date = this._dateAdapter.parse(value, this._getParseFormat());
-        this._lastValueValid = !date || this._dateAdapter.isValid(date);
+        this._lastValueValid.set(!date || this._dateAdapter.isValid(date));
         date = this._dateAdapter.getValidDateOrNull(date);
-        this._value = date;
+        this._internalValue.set(date);
         this._cvaOnChange(date);
         this.valueChange.emit(date);
         this.dateInput.emit(new CmatDatetimepickerInputEvent(this, this._elementRef.nativeElement));
@@ -2420,22 +2349,37 @@ class CmatDatetimepickerInputDirective {
         this.dateChange.emit(new CmatDatetimepickerInputEvent(this, this._elementRef.nativeElement));
     }
     onBlur() {
-        if (this.value) {
-            this._formatValue(this.value);
+        if (this._internalValue()) {
+            this._formatValue(this._internalValue());
         }
         this._onTouched();
     }
     getThemePalette() {
         return this._formField ? this._formField.color : undefined;
     }
-    _registerDatetimepicker(value) {
-        if (value) {
-            this.datetimepicker = value;
-            this.datetimepicker.registerInput(this);
+    _setValue(value) {
+        value = this._dateAdapter.deserialize(value);
+        this._lastValueValid.set(!value || this._dateAdapter.isValid(value));
+        value = this._dateAdapter.getValidDateOrNull(value);
+        const oldDate = this._internalValue();
+        this._internalValue.set(value);
+        this._formatValue(value);
+        if (this._valueChangeTimeoutId !== null) {
+            clearTimeout(this._valueChangeTimeoutId);
         }
+        this._valueChangeTimeoutId = window.setTimeout(() => {
+            this._valueChangeTimeoutId = null;
+            if (!this._dateAdapter.sameDatetime(oldDate, value)) {
+                this.valueChange.emit(value);
+            }
+        });
     }
     _getDisplayFormat() {
-        switch (this.datetimepicker.type) {
+        const picker = this.datetimepicker();
+        if (!picker) {
+            return this._dateFormats.display.dateInput;
+        }
+        switch (picker.type()) {
             case 'date':
                 return this._dateFormats.display.dateInput;
             case 'datetime':
@@ -2446,11 +2390,17 @@ class CmatDatetimepickerInputDirective {
                 return this._dateFormats.display.monthInput;
             case 'year':
                 return this._dateFormats.display.yearInput;
+            default:
+                return this._dateFormats.display.dateInput;
         }
     }
     _getParseFormat() {
+        const picker = this.datetimepicker();
+        if (!picker) {
+            return this._dateFormats.parse.dateInput;
+        }
         let parseFormat = this._dateFormats.parse.dateInput;
-        switch (this.datetimepicker.type) {
+        switch (picker.type()) {
             case 'date':
                 parseFormat = this._dateFormats.parse.dateInput;
                 break;
@@ -2473,14 +2423,14 @@ class CmatDatetimepickerInputDirective {
         this._elementRef.nativeElement.value =
             value ? this._dateAdapter.format(value, this._getDisplayFormat()) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", 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: "22.0.2", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: CmatDatetimepickerInputDirective, isStandalone: true, selector: "input[cmatDatetimepicker]", inputs: { cmatDatetimepicker: { classPropertyName: "cmatDatetimepicker", publicName: "cmatDatetimepicker", isSignal: true, isRequired: false, transformFunction: null }, cmatDatepickerFilter: { classPropertyName: "cmatDatepickerFilter", publicName: "cmatDatepickerFilter", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "onInput($event.target.value)", "change": "onChange()", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(datetimepicker()?.opened() && datetimepicker()?.id) || null", "attr.min": "min() ? datetimepicker()?.toIso8601(min()) : null", "attr.max": "max() ? datetimepicker()?.toIso8601(max()) : null", "disabled": "disabled()" } }, providers: [
             CMAT_DATETIMEPICKER_VALUE_ACCESSOR,
             CMAT_DATETIMEPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: CmatDatetimepickerInputDirective },
         ], exportAs: ["cmatDatepickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[cmatDatetimepicker]',
@@ -2491,10 +2441,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     ],
                     host: {
                         '[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',
+                        '[attr.aria-owns]': '(datetimepicker()?.opened() && datetimepicker()?.id) || null',
+                        '[attr.min]': 'min() ? datetimepicker()?.toIso8601(min()) : null',
+                        '[attr.max]': 'max() ? datetimepicker()?.toIso8601(max()) : null',
+                        '[disabled]': 'disabled()',
                         '(input)': 'onInput($event.target.value)',
                         '(change)': 'onChange()',
                         '(blur)': 'onBlur()',
@@ -2502,98 +2452,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     },
                     exportAs: 'cmatDatepickerInput'
                 }]
-        }], ctorParameters: () => [], propDecorators: { dateChange: [{
-                type: Output
-            }], dateInput: [{
-                type: Output
-            }], cmatDatetimepicker: [{
-                type: Input
-            }], cmatDatepickerFilter: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { dateChange: [{ type: i0.Output, args: ["dateChange"] }], dateInput: [{ type: i0.Output, args: ["dateInput"] }], cmatDatetimepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "cmatDatetimepicker", required: false }] }], cmatDatepickerFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "cmatDatepickerFilter", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 class CmatDatetimepickerToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cmatDatetimepickerToggleIcon]'
+                    selector: '[cmatDatetimepickerToggleIcon]',
                 }]
         }] });
 class CmatDatetimepickerToggleComponent {
     constructor() {
-        this.class = 'cmat-datetimepicker-toggle';
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
+        this.customIcon = contentChild(CmatDatetimepickerToggleIconDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customIcon" }] : /* istanbul ignore next */ []));
+        this.button = viewChild('button', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+        this.datetimepicker = input.required({ ...(ngDevMode ? { debugName: "datetimepicker" } : /* istanbul ignore next */ {}), alias: 'for' });
+        this.tabIndex = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        this.disableRipple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
+        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.isDisabled = computed(() => {
+            const disabledValue = this.disabled();
+            const picker = this.datetimepicker();
+            return disabledValue === undefined
+                ? picker?.disabled()
+                : !!disabledValue;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.refreshVersion = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
         this.intl = inject(CmatDatetimepickerIntl);
         this._destroyRef = inject(DestroyRef);
-    }
-    get disabled() {
-        return this._disabled === undefined ? this.datetimepicker.disabled : !!this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    ngOnChanges(changes) {
-        if (changes['datepicker']) {
-            this._watchStateChanges();
-        }
-    }
-    ngAfterContentInit() {
-        this._watchStateChanges();
+        effect(() => {
+            const picker = this.datetimepicker();
+            if (picker) {
+                this._watchStateChanges();
+            }
+        });
     }
     open(event) {
-        if (this.datetimepicker && !this.disabled) {
-            this.datetimepicker.open();
+        const datetimepicker = this.datetimepicker();
+        if (datetimepicker && !this.isDisabled()) {
+            datetimepicker.open();
             event.stopPropagation();
         }
     }
     _watchStateChanges() {
-        const datepickerDisabled = this.datetimepicker?.disabledChange ? this.datetimepicker.disabledChange : of(false);
-        const inputDisabled = this.datetimepicker?.datetimepickerInput?.disabledChange
-            ? this.datetimepicker.datetimepickerInput.disabledChange
-            : of(false);
+        const datetimepicker = this.datetimepicker();
+        const datepickerDisabled = datetimepicker?.disabledChange ?? of(false);
+        const inputDisabled = datetimepicker?.datetimepickerInput
+            ?.disabledChange ?? of(false);
         merge(this.intl.changes, datepickerDisabled, inputDisabled)
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this.refreshVersion.update(value => value + 1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDatetimepickerToggleComponent, isStandalone: true, selector: "cmat-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disableRipple: "disableRipple", disabled: "disabled" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "customIcon", first: true, predicate: CmatDatetimepickerToggleIconDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["cmatDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button type=\"button\" matIconButton [attr.data-refresh]=\"refreshVersion()\" \r\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\" [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"open($event)\">\r\n  @if (!customIcon) {\r\n    @switch (datetimepicker.type) {\r\n      @case ('time') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @case ('datetime') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @default {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\r\n          </svg>\r\n        }\r\n      }\r\n    }\r\n\r\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n  </button>\r\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatDatetimepickerToggleComponent, isStandalone: true, selector: "cmat-datetimepicker-toggle", inputs: { datetimepicker: { classPropertyName: "datetimepicker", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cmat-datetimepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: CmatDatetimepickerToggleIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], exportAs: ["cmatDatetimepickerToggle"], ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  matIconButton\r\n  class=\"mx-1\"\r\n  [attr.data-refresh]=\"refreshVersion()\"\r\n  [attr.aria-haspopup]=\"datetimepicker() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n  [disabled]=\"disabled()\"\r\n  [disableRipple]=\"disableRipple()\"\r\n  (click)=\"open($event)\"\r\n>\r\n  @if (!customIcon()) { @switch (datetimepicker().type()) { @case ('time') {\r\n  <svg\r\n    class=\"mat-icon cmat-datetimepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\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  } @case ('datetime') {\r\n  <svg\r\n    class=\"mat-icon cmat-datetimepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\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  } @default {\r\n  <svg\r\n    class=\"mat-icon cmat-datetimepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\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    />\r\n  </svg>\r\n  } } }\r\n\r\n  <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n</button>\r\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-datetimepicker-toggle', exportAs: 'cmatDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], template: "<button type=\"button\" matIconButton [attr.data-refresh]=\"refreshVersion()\" \r\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\" [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"open($event)\">\r\n  @if (!customIcon) {\r\n    @switch (datetimepicker.type) {\r\n      @case ('time') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @case ('datetime') {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path\r\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\r\n          </path>\r\n        </svg>\r\n      }\r\n      @default {\r\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\r\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\r\n          </svg>\r\n        }\r\n      }\r\n    }\r\n\r\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n  </button>\r\n" }]
-        }], propDecorators: { datetimepicker: [{
-                type: Input,
-                args: ['for']
-            }], tabIndex: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], disableRipple: [{
-                type: Input
-            }], customIcon: [{
-                type: ContentChild,
-                args: [CmatDatetimepickerToggleIconDirective]
-            }], button: [{
-                type: ViewChild,
-                args: ['button']
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], disabled: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-datetimepicker-toggle', exportAs: 'cmatDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], host: { 'class': 'cmat-datetimepicker-toggle' }, template: "<button\r\n  type=\"button\"\r\n  matIconButton\r\n  class=\"mx-1\"\r\n  [attr.data-refresh]=\"refreshVersion()\"\r\n  [attr.aria-haspopup]=\"datetimepicker() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || intl.openCalendarLabel\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n  [disabled]=\"disabled()\"\r\n  [disableRipple]=\"disableRipple()\"\r\n  (click)=\"open($event)\"\r\n>\r\n  @if (!customIcon()) { @switch (datetimepicker().type()) { @case ('time') {\r\n  <svg\r\n    class=\"mat-icon cmat-datetimepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\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  } @case ('datetime') {\r\n  <svg\r\n    class=\"mat-icon cmat-datetimepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\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  } @default {\r\n  <svg\r\n    class=\"mat-icon cmat-datetimepicker-toggle-default-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    fill=\"currentColor\"\r\n    focusable=\"false\"\r\n  >\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    />\r\n  </svg>\r\n  } } }\r\n\r\n  <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\r\n</button>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { customIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CmatDatetimepickerToggleIconDirective), { isSignal: true }] }], button: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], datetimepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.