@ng-matero/extensions 18.4.1 → 19.0.0

package/fesm2022/mtxDatetimepicker.mjs

@@ -1,386 +1,21 @@
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i1$1 from '@angular/cdk/overlay';
+import { CdkMonitorFocus, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, Optional, Injectable, Directive, ElementRef, ViewChild, inject, Injector, afterNextRender, InjectionToken, forwardRef, Attribute, ContentChild, TemplateRef, NgModule } from '@angular/core';
+import { Injectable, inject, ElementRef, NgZone, Injector, EventEmitter, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, ChangeDetectorRef, booleanAttribute, Directive, InjectionToken, ViewContainerRef, forwardRef, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
-import { UP_ARROW, DOWN_ARROW, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import * as i1 from '@ng-matero/extensions/core';
-import { MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
-import { normalizePassiveListenerOptions, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
+import { DatetimeAdapter, MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
 import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
-import { coerceNumberProperty, coerceStringArray } from '@angular/cdk/coercion';
 import { Subject, Subscription, merge, of } from 'rxjs';
+import { SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { Directionality } from '@angular/cdk/bidi';
+import { coerceNumberProperty, coerceStringArray } from '@angular/cdk/coercion';
+import { normalizePassiveListenerOptions, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { take, filter } from 'rxjs/operators';
-import * as i3 from '@angular/cdk/bidi';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
-import * as i2 from '@angular/material/form-field';
-
-var MtxDatetimepickerFilterType;
-(function (MtxDatetimepickerFilterType) {
-    MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["DATE"] = 0] = "DATE";
-    MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["HOUR"] = 1] = "HOUR";
-    MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["MINUTE"] = 2] = "MINUTE";
-})(MtxDatetimepickerFilterType || (MtxDatetimepickerFilterType = {}));
-
-const activeEventOptions = normalizePassiveListenerOptions({ passive: false });
-const CLOCK_RADIUS = 50;
-const CLOCK_INNER_RADIUS = 27.5;
-const CLOCK_OUTER_RADIUS = 41.25;
-const CLOCK_TICK_RADIUS = 7.0833;
-/**
- * A clock that is used as part of the datetimepicker.
- * @docs-private
- */
-class MtxClock {
-    constructor(_elementRef, _adapter, _changeDetectorRef, _document) {
-        this._elementRef = _elementRef;
-        this._adapter = _adapter;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._document = _document;
-        /** Step over minutes. */
-        this.interval = 1;
-        this.actionButtons = false;
-        /** Whether the clock uses 12 hour format. */
-        this.twelvehour = false;
-        /** Whether the time is now in AM or PM. */
-        this.AMPM = 'AM';
-        /** Emits when the currently selected date changes. */
-        this.selectedChange = new EventEmitter();
-        /** Emits when any date is activated. */
-        this.activeDateChange = new EventEmitter();
-        /** Emits when any date is selected. */
-        this._userSelection = new EventEmitter();
-        /** Whether the clock is in hour view. */
-        this._hourView = true;
-        this._hours = [];
-        this._minutes = [];
-        this._timeChanged = false;
-        /** Called when the user has put their pointer down on the clock. */
-        this._pointerDown = (event) => {
-            this._timeChanged = false;
-            this.setTime(event);
-            this._bindGlobalEvents(event);
-        };
-        /**
-         * Called when the user has moved their pointer after
-         * starting to drag. Bound on the document level.
-         */
-        this._pointerMove = (event) => {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            this.setTime(event);
-        };
-        /** Called when the user has lifted their pointer. Bound on the document level. */
-        this._pointerUp = (event) => {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            this._removeGlobalEvents();
-            if (this._timeChanged) {
-                this.selectedChange.emit(this.activeDate);
-                if (this.actionButtons || !this._hourView) {
-                    this._userSelection.emit();
-                }
-            }
-        };
-    }
-    /**
-     * The date to display in this clock view.
-     */
-    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();
-        }
-    }
-    /** The currently selected date. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-        if (this._selected) {
-            this.activeDate = this._selected;
-        }
-    }
-    /** The minimum selectable date. */
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-    }
-    /** The maximum selectable date. */
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-    }
-    /** Whether the clock should be started in hour or minute view. */
-    set startView(value) {
-        this._hourView = value !== 'minute';
-    }
-    get _hand() {
-        const hour = this._adapter.getHour(this.activeDate);
-        this._selectedHour = hour;
-        this._selectedMinute = this._adapter.getMinute(this.activeDate);
-        let deg = 0;
-        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;
-            }
-            deg = Math.round(this._selectedHour * (360 / (24 / 2)));
-        }
-        else {
-            deg = Math.round(this._selectedMinute * (360 / 60));
-        }
-        return {
-            height: `${radius}%`,
-            marginTop: `${50 - radius}%`,
-            transform: `rotate(${deg}deg)`,
-        };
-    }
-    ngAfterContentInit() {
-        this.activeDate = this._activeDate || this._adapter.today();
-        this._init();
-    }
-    ngOnDestroy() {
-        this._removeGlobalEvents();
-    }
-    ngOnChanges() {
-        this._init();
-    }
-    /** Binds our global move and end events. */
-    _bindGlobalEvents(triggerEvent) {
-        // Note that we bind the events to the `document`, because it allows us to capture
-        // drag cancel events where the user's pointer is outside the browser window.
-        const document = this._document;
-        const isTouch = isTouchEvent(triggerEvent);
-        const moveEventName = isTouch ? 'touchmove' : 'mousemove';
-        const endEventName = isTouch ? 'touchend' : 'mouseup';
-        document.addEventListener(moveEventName, this._pointerMove, activeEventOptions);
-        document.addEventListener(endEventName, this._pointerUp, activeEventOptions);
-        if (isTouch) {
-            document.addEventListener('touchcancel', this._pointerUp, activeEventOptions);
-        }
-    }
-    /** Removes any global event listeners that we may have added. */
-    _removeGlobalEvents() {
-        const document = this._document;
-        document.removeEventListener('mousemove', this._pointerMove, activeEventOptions);
-        document.removeEventListener('mouseup', this._pointerUp, activeEventOptions);
-        document.removeEventListener('touchmove', this._pointerMove, activeEventOptions);
-        document.removeEventListener('touchend', this._pointerUp, activeEventOptions);
-        document.removeEventListener('touchcancel', this._pointerUp, activeEventOptions);
-    }
-    /** Initializes this clock view. */
-    _init() {
-        this._hours.length = 0;
-        this._minutes.length = 0;
-        const hourNames = this._adapter.getHourNames();
-        const minuteNames = this._adapter.getMinuteNames();
-        if (this.twelvehour) {
-            const hours = [];
-            for (let i = 0; i < hourNames.length; i++) {
-                const radian = (i / 6) * Math.PI;
-                const radius = CLOCK_OUTER_RADIUS;
-                const hour = i;
-                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), hour, 0);
-                // Check if the date is enabled, no need to respect the minute setting here
-                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, MtxDatetimepickerFilterType.HOUR));
-                // display value for twelvehour clock should be from 1-12 not including 0 and not above 12
-                hours.push({
-                    value: i,
-                    displayValue: i % 12 === 0 ? '12' : hourNames[i % 12],
-                    enabled,
-                    top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
-                    left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
-                });
-            }
-            // filter out AM or PM hours based on AMPM
-            if (this.AMPM === 'AM') {
-                this._hours = hours.filter(x => x.value < 12);
-            }
-            else {
-                this._hours = hours.filter(x => x.value >= 12);
-            }
-        }
-        else {
-            for (let i = 0; i < hourNames.length; i++) {
-                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);
-                // Check if the date is enabled, no need to respect the minute setting here
-                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, MtxDatetimepickerFilterType.HOUR));
-                this._hours.push({
-                    value: i,
-                    displayValue: i === 0 ? '00' : hourNames[i],
-                    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%',
-                });
-            }
-        }
-        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, MtxDatetimepickerFilterType.MINUTE));
-            this._minutes.push({
-                value: i,
-                displayValue: i === 0 ? '00' : minuteNames[i],
-                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,
-            });
-        }
-    }
-    /**
-     * Set Time
-     * @param event
-     */
-    setTime(event) {
-        const trigger = this._elementRef.nativeElement;
-        const triggerRect = trigger.getBoundingClientRect();
-        const width = trigger.offsetWidth;
-        const height = trigger.offsetHeight;
-        const { pageX, pageY } = getPointerPositionOnPage(event);
-        const x = width / 2 - (pageX - triggerRect.left - window.pageXOffset);
-        const y = height / 2 - (pageY - triggerRect.top - window.pageYOffset);
-        let radian = Math.atan2(-x, y);
-        const unit = Math.PI / (this._hourView ? 6 : this.interval ? 30 / this.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;
-        if (radian < 0) {
-            radian = Math.PI * 2 + radian;
-        }
-        let value = Math.round(radian / unit);
-        let date;
-        if (this._hourView) {
-            if (this.twelvehour) {
-                if (this.AMPM === 'AM') {
-                    value = value === 0 ? 12 : value;
-                }
-                else {
-                    // if we chosen 12 in PM, the value should be 0 for 0:00,
-                    // else we can safely add 12 to the final value
-                    value = value === 12 ? 0 : value + 12;
-                }
-            }
-            else {
-                if (value === 12) {
-                    value = 0;
-                }
-                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));
-        }
-        else {
-            if (this.interval) {
-                value *= this.interval;
-            }
-            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);
-        }
-        // if there is a dateFilter, check if the date is allowed if it is not then do not set/emit new date
-        // https://github.com/ng-matero/extensions/issues/244
-        if (this.dateFilter &&
-            !this.dateFilter(date, this._hourView ? MtxDatetimepickerFilterType.HOUR : MtxDatetimepickerFilterType.MINUTE)) {
-            return;
-        }
-        this._timeChanged = true;
-        this.activeDate = date;
-        this._changeDetectorRef.markForCheck();
-        this.activeDateChange.emit(this.activeDate);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxClock, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxClock, isStandalone: true, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", actionButtons: "actionButtons", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_pointerDown($event)", "touchstart": "_pointerDown($event)" }, classAttribute: "mtx-clock" }, exportAs: ["mtxClock"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    @for (item of _hours; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n        [style.fontSize]=\"item.fontSize\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    @for (item of _minutes; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-app-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-app-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-app-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color)}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxClock, decorators: [{
-            type: Component,
-            args: [{ selector: 'mtx-clock', host: {
-                        'role': 'clock',
-                        'class': 'mtx-clock',
-                        '(mousedown)': '_pointerDown($event)',
-                        '(touchstart)': '_pointerDown($event)',
-                    }, exportAs: 'mtxClock', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    @for (item of _hours; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n        [style.fontSize]=\"item.fontSize\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    @for (item of _minutes; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-app-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-app-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-app-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-app-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color)}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { dateFilter: [{
-                type: Input
-            }], interval: [{
-                type: Input
-            }], actionButtons: [{
-                type: Input
-            }], twelvehour: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], AMPM: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], activeDateChange: [{
-                type: Output
-            }], _userSelection: [{
-                type: Output
-            }], activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], startView: [{
-                type: Input
-            }] } });
-/** Returns whether an event is a touch event. */
-function isTouchEvent(event) {
-    // This function is called for every pixel that the user has dragged so we need it to be
-    // as fast as possible. Since we only bind mouse events and touch events, we can assume
-    // that if the event's name starts with `t`, it's a touch event.
-    return event.type[0] === 't';
-}
-/** Gets the coordinates of a touch or mouse event relative to the document. */
-function getPointerPositionOnPage(event) {
-    let point;
-    if (isTouchEvent(event)) {
-        // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
-        point = event.touches[0] || event.changedTouches[0];
-    }
-    else {
-        point = event;
-    }
-    return point;
-}
 
 /**
  * Animations used by the Material datetimepicker.
@@ -433,6 +68,74 @@ function createMissingDateImplError(provider) {
         `custom implementation.`);
 }
 
+var MtxDatetimepickerFilterType;
+(function (MtxDatetimepickerFilterType) {
+    MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["DATE"] = 0] = "DATE";
+    MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["HOUR"] = 1] = "HOUR";
+    MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["MINUTE"] = 2] = "MINUTE";
+})(MtxDatetimepickerFilterType || (MtxDatetimepickerFilterType = {}));
+
+class MtxDatetimepickerIntl {
+    constructor() {
+        /**
+         * Stream to emit from when labels are changed. Use this to notify components when the labels have
+         * changed after initialization.
+         */
+        this.changes = new Subject();
+        /** A label for the calendar popup (used by screen readers). */
+        this.calendarLabel = 'Calendar';
+        /** A label for the button used to open the calendar popup (used by screen readers). */
+        this.openCalendarLabel = 'Open calendar';
+        /** Label for the button used to close the calendar popup. */
+        this.closeCalendarLabel = 'Close calendar';
+        /** A label for the previous month button (used by screen readers). */
+        this.prevMonthLabel = 'Previous month';
+        /** A label for the next month button (used by screen readers). */
+        this.nextMonthLabel = 'Next month';
+        /** A label for the previous year button (used by screen readers). */
+        this.prevYearLabel = 'Previous year';
+        /** A label for the next year button (used by screen readers). */
+        this.nextYearLabel = 'Next year';
+        /** A label for the previous multi-year button (used by screen readers). */
+        this.prevMultiYearLabel = 'Previous 24 years';
+        /** A label for the next multi-year button (used by screen readers). */
+        this.nextMultiYearLabel = 'Next 24 years';
+        /** A label for the 'switch to month view' button (used by screen readers). */
+        this.switchToMonthViewLabel = 'Choose date';
+        /** A label for the 'switch to year view' button (used by screen readers). */
+        this.switchToYearViewLabel = 'Choose month';
+        /** A label for the 'switch to multi-year view' button (used by screen readers). */
+        this.switchToMultiYearViewLabel = 'Choose month and year';
+        /** A label for the first date of a range of dates (used by screen readers). */
+        this.startDateLabel = 'Start date';
+        /** A label for the last date of a range of dates (used by screen readers). */
+        this.endDateLabel = 'End date';
+        /** A label for the 'switch to clock hour view' button (used by screen readers). */
+        this.switchToClockHourViewLabel = 'Choose hour';
+        /** A label for the 'switch to clock minute view' button (used by screen readers). */
+        this.switchToClockMinuteViewLabel = 'Choose minute';
+        /** Label used for ok button within the manual time input. */
+        this.okLabel = 'OK';
+        /** Label used for cancel button within the manual time input. */
+        this.cancelLabel = 'Cancel';
+    }
+    /** Formats a range of years (used for visuals). */
+    formatYearRange(start, end) {
+        return `${start} \u2013 ${end}`;
+    }
+    /** Formats a label for a range of years (used by screen readers). */
+    formatYearRangeLabel(start, end) {
+        return `${start} to ${end}`;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let uniqueIdCounter$1 = 0;
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
  * @docs-private
@@ -443,6 +146,7 @@ class MtxCalendarCell {
         this.displayValue = displayValue;
         this.ariaLabel = ariaLabel;
         this.enabled = enabled;
+        this.id = uniqueIdCounter$1++;
     }
 }
 /**
@@ -451,6 +155,14 @@ class MtxCalendarCell {
  */
 class MtxCalendarBody {
     constructor() {
+        this._elementRef = inject(ElementRef);
+        this._ngZone = inject(NgZone);
+        this._injector = inject(Injector);
+        /**
+         * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
+         * maintained even as the table resizes.
+         */
+        this.cellAspectRatio = 1;
         /** The number of columns in the table. */
         this.numCols = 7;
         /** Whether to allow selection of disabled cells. */
@@ -459,88 +171,330 @@ class MtxCalendarBody {
         this.activeCell = 0;
         /** Emits when a new value is selected. */
         this.selectedValueChange = new EventEmitter();
-    }
-    /** The number of blank cells to put at the beginning for the first row. */
-    get _firstRowOffset() {
-        return this.rows && this.rows.length && this.rows[0].length
-            ? this.numCols - this.rows[0].length
-            : 0;
+        /**
+         * Tracking function for rows based on their identity. Ideally we would use some sort of
+         * key on the row, but that would require a breaking change for the `rows` input. We don't
+         * use the built-in identity tracking, because it logs warnings.
+         */
+        this._trackRow = (row) => row;
     }
     _cellClicked(cell) {
         if (!this.allowDisabledSelection && !cell.enabled) {
             return;
         }
-        this.selectedValueChange.emit(cell.value);
-    }
-    _isActiveCell(rowIndex, colIndex) {
-        let cellNumber = rowIndex * this.numCols + colIndex;
-        // Account for the fact that the first row may not have as many cells.
-        if (rowIndex) {
-            cellNumber -= this._firstRowOffset;
+        this.selectedValueChange.emit(cell.value);
+    }
+    _emitActiveDateChange(cell, event) {
+        if (cell.enabled) {
+            // this.activeDateChange.emit({ value: cell.value, event });
+        }
+    }
+    _isActiveCell(rowIndex, colIndex) {
+        let cellNumber = rowIndex * this.numCols + colIndex;
+        // Account for the fact that the first row may not have as many cells.
+        if (rowIndex) {
+            cellNumber -= this._firstRowOffset;
+        }
+        return cellNumber === this.activeCell;
+    }
+    ngOnChanges(changes) {
+        const columnChanges = changes['numCols'];
+        const { rows, numCols } = this;
+        if (changes['rows'] || columnChanges) {
+            this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
+        }
+        if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {
+            this._cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;
+        }
+        if (columnChanges || !this._cellWidth) {
+            this._cellWidth = `${100 / numCols}%`;
+        }
+    }
+    _focusActiveCell(movePreview = true) {
+        afterNextRender(() => {
+            setTimeout(() => {
+                const activeCell = this._elementRef.nativeElement.querySelector('.mtx-calendar-body-active');
+                if (activeCell) {
+                    activeCell.focus();
+                }
+            });
+        }, { injector: this._injector });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxCalendarBody, isStandalone: true, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", cellAspectRatio: "cellAspectRatio", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { attributes: { "role": "grid", "aria-readonly": "true" }, classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td\n      class=\"mtx-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\"\n    >\n      {{ label }}\n    </td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n      This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n      because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n      table cells is maintained by setting the top and bottom padding as a percentage of the width\n      (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td\n        class=\"mtx-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n      >\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    <!--\n      Each gridcell in the calendar contains a button, which signals to assistive technology that the\n      cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n      background.\n    -->\n    @for (item of row; track item.id; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mtx-calendar-body-cell-container\"\n        [style.width]=\"_cellWidth\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\"\n      >\n        <button\n          type=\"button\"\n          class=\"mtx-calendar-body-cell\"\n          [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n          [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n          [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n          [attr.aria-label]=\"item.ariaLabel\"\n          [attr.aria-disabled]=\"!item.enabled || null\"\n          (click)=\"_cellClicked(item)\"\n        >\n          <span\n            class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n            [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n            [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n          >\n            {{ item.displayValue }}\n          </span>\n        </button>\n      </td>\n    }\n  </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;font-family:inherit;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-large-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxCalendarBody, decorators: [{
+            type: Component,
+            args: [{ selector: '[mtx-calendar-body]', host: {
+                        'class': 'mtx-calendar-body',
+                        'role': 'grid',
+                        'aria-readonly': 'true',
+                    }, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td\n      class=\"mtx-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\"\n    >\n      {{ label }}\n    </td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n      This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n      because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n      table cells is maintained by setting the top and bottom padding as a percentage of the width\n      (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td\n        class=\"mtx-calendar-body-label\"\n        [attr.colspan]=\"_firstRowOffset\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n      >\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    <!--\n      Each gridcell in the calendar contains a button, which signals to assistive technology that the\n      cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n      background.\n    -->\n    @for (item of row; track item.id; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mtx-calendar-body-cell-container\"\n        [style.width]=\"_cellWidth\"\n        [style.paddingTop]=\"_cellPadding\"\n        [style.paddingBottom]=\"_cellPadding\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\"\n      >\n        <button\n          type=\"button\"\n          class=\"mtx-calendar-body-cell\"\n          [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n          [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n          [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n          [attr.aria-label]=\"item.ariaLabel\"\n          [attr.aria-disabled]=\"!item.enabled || null\"\n          (click)=\"_cellClicked(item)\"\n        >\n          <span\n            class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n            [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n            [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n          >\n            {{ item.displayValue }}\n          </span>\n        </button>\n      </td>\n    }\n  </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;font-family:inherit;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-large-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cellAspectRatio: [{
+                type: Input
+            }], todayValue: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], labelMinRequiredCells: [{
+                type: Input
+            }], numCols: [{
+                type: Input
+            }], allowDisabledSelection: [{
+                type: Input
+            }], activeCell: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }] } });
+
+const DAYS_PER_WEEK = 7;
+let uniqueIdCounter = 0;
+/**
+ * An internal component used to display a single month in the datetimepicker.
+ * @docs-private
+ */
+class MtxMonthView {
+    constructor() {
+        this._adapter = inject(DatetimeAdapter, { optional: true });
+        this._dir = inject(Directionality, { optional: true });
+        this._dateFormats = inject(MTX_DATETIME_FORMATS, { optional: true });
+        this.type = 'date';
+        /** Emits when a new date is selected. */
+        this.selectedChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        /** The names of the weekdays. */
+        this._weekdays = [];
+        this._selected = null;
+        if (!this._adapter) {
+            throw createMissingDateImplError('DatetimeAdapter');
+        }
+        if (!this._dateFormats) {
+            throw createMissingDateImplError('MTX_DATETIME_FORMATS');
+        }
+        this._activeDate = this._adapter.today();
+    }
+    /**
+     * The date to display in this month view (everything other than the month and year is ignored).
+     */
+    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.calendarState('right');
+            }
+            else {
+                this.calendarState('left');
+            }
+        }
+    }
+    /** The currently selected date. */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        this._selected = value;
+        this._selectedDate = this._getDateInCurrentMonth(this.selected);
+    }
+    ngAfterContentInit() {
+        this._init();
+    }
+    /** Handles when a new date is selected. */
+    _dateSelected(date) {
+        const dateObject = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), date, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate));
+        this.selectedChange.emit(dateObject);
+        this._activeDate = dateObject;
+        if (this.type === 'date') {
+            this._userSelection.emit();
+        }
+    }
+    _calendarStateDone() {
+        this._calendarState = '';
+    }
+    /** Initializes this month view. */
+    _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;
+        this._initWeekdays();
+        this._createWeekCells();
+    }
+    /** Initializes the weekdays. */
+    _initWeekdays() {
+        const firstDayOfWeek = this._adapter.getFirstDayOfWeek();
+        const narrowWeekdays = this._adapter.getDayOfWeekNames('narrow');
+        const longWeekdays = this._adapter.getDayOfWeekNames('long');
+        // Rotate the labels for days of the week based on the configured first day of the week.
+        const weekdays = longWeekdays.map((long, i) => {
+            return { long, narrow: narrowWeekdays[i], id: uniqueIdCounter++ };
+        });
+        this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
+    }
+    /** Creates MdCalendarCells for the dates in this month. */
+    _createWeekCells() {
+        const daysInMonth = this._adapter.getNumDaysInMonth(this.activeDate);
+        const dateNames = this._adapter.getDateNames();
+        this._weeks = [[]];
+        for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
+            if (cell === DAYS_PER_WEEK) {
+                this._weeks.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 ariaLabel = this._adapter.format(date, this._dateFormats.display.dateA11yLabel);
+            this._weeks[this._weeks.length - 1].push(new MtxCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
+        }
+    }
+    /**
+     * Gets the date in this month that the given Date falls on.
+     * Returns null if the given Date is in another month.
+     */
+    _getDateInCurrentMonth(date) {
+        return date && this._adapter.sameMonthAndYear(date, this.activeDate)
+            ? this._adapter.getDate(date)
+            : null;
+    }
+    calendarState(direction) {
+        this._calendarState = direction;
+    }
+    /** Handles keydown events on the calendar body when calendar is in month view. */
+    _handleCalendarBodyKeydown(event) {
+        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
+        // disabled ones from being selected. This may not be ideal, we should look into whether
+        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
+        const oldActiveDate = this._activeDate;
+        const isRtl = this._isRtl();
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+                this.activeDate = this._adapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
+                break;
+            case RIGHT_ARROW:
+                this.activeDate = this._adapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
+                break;
+            case UP_ARROW:
+                this.activeDate = this._adapter.addCalendarDays(this._activeDate, -7);
+                break;
+            case DOWN_ARROW:
+                this.activeDate = this._adapter.addCalendarDays(this._activeDate, 7);
+                break;
+            case HOME:
+                this.activeDate = 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));
+                break;
+            case PAGE_UP:
+                this.activeDate = event.altKey
+                    ? this._adapter.addCalendarYears(this._activeDate, -1)
+                    : this._adapter.addCalendarMonths(this._activeDate, -1);
+                break;
+            case PAGE_DOWN:
+                this.activeDate = event.altKey
+                    ? this._adapter.addCalendarYears(this._activeDate, 1)
+                    : this._adapter.addCalendarMonths(this._activeDate, 1);
+                break;
+            case ENTER:
+            case SPACE:
+                if (!this.dateFilter || this.dateFilter(this._activeDate)) {
+                    this._dateSelected(this._adapter.getDate(this._activeDate));
+                    // this._userSelection.emit();
+                    // Prevent unexpected default actions such as form submission.
+                    event.preventDefault();
+                }
+                return;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (this._adapter.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
         }
-        return cellNumber === this.activeCell;
+        this._focusActiveCell();
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell(movePreview) {
+        this._mtxCalendarBody._focusActiveCell(movePreview);
+    }
+    /** Determines whether the user has the RTL layout direction. */
+    _isRtl() {
+        return this._dir && this._dir.value === 'rtl';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxCalendarBody, isStandalone: true, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], ngImport: i0, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track row; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n      We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td\n        class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    @for (item of row; track item; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mtx-calendar-body-cell\"\n        [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n        [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n        [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        (click)=\"_cellClicked(item)\">\n        <div class=\"mtx-calendar-body-cell-content\"\n          [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n          [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n          [attr.aria-selected]=\"selectedValue === item.value\">\n          {{ item.displayValue }}\n        </div>\n      </td>\n    }\n  </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-app-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-app-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-app-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-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;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-app-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color)}.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color)}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color)}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-app-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-app-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color)}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-app-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMonthView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track day.id) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendarBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxMonthView, decorators: [{
             type: Component,
-            args: [{ selector: '[mtx-calendar-body]', host: {
-                        class: 'mtx-calendar-body',
-                    }, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track row; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n      We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td\n        class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    @for (item of row; track item; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"mtx-calendar-body-cell\"\n        [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n        [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n        [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [attr.data-mat-row]=\"rowIndex\"\n        [attr.data-mat-col]=\"colIndex\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        (click)=\"_cellClicked(item)\">\n        <div class=\"mtx-calendar-body-cell-content\"\n          [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n          [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n          [attr.aria-selected]=\"selectedValue === item.value\">\n          {{ item.displayValue }}\n        </div>\n      </td>\n    }\n  </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-app-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-app-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-app-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-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;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-app-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color)}.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color)}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color)}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-app-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-app-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color)}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-app-primary))}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], todayValue: [{
-                type: Input
-            }], selectedValue: [{
+            args: [{ selector: 'mtx-month-view', exportAs: 'mtxMonthView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track day.id) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"\n    (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
-            }], labelMinRequiredCells: [{
-                type: Input
-            }], numCols: [{
+            }], dateFilter: [{
                 type: Input
-            }], allowDisabledSelection: [{
+            }], selectedChange: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], _mtxCalendarBody: [{
+                type: ViewChild,
+                args: [MtxCalendarBody]
+            }], activeDate: [{
                 type: Input
-            }], activeCell: [{
+            }], selected: [{
                 type: Input
-            }], selectedValueChange: [{
-                type: Output
             }] } });
 
-const DAYS_PER_WEEK = 7;
+const yearsPerPage = 24;
+const yearsPerRow = 4;
 /**
- * An internal component used to display a single month in the datetimepicker.
+ * An internal component used to display multiple years in the datetimepicker.
  * @docs-private
  */
-class MtxMonthView {
-    constructor(_adapter, _dateFormats) {
-        this._adapter = _adapter;
-        this._dateFormats = _dateFormats;
+class MtxMultiYearView {
+    constructor() {
+        this._adapter = inject(DatetimeAdapter, { optional: true });
+        this._dir = inject(Directionality, { optional: true });
+        this._dateFormats = inject(MTX_DATETIME_FORMATS, { optional: true });
         this.type = 'date';
-        /** Emits when a new date is selected. */
+        /** Emits when a new month is selected. */
         this.selectedChange = new EventEmitter();
         /** Emits when any date is selected. */
         this._userSelection = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        this._selected = null;
         if (!this._adapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
         if (!this._dateFormats) {
             throw createMissingDateImplError('MTX_DATETIME_FORMATS');
         }
-        const firstDayOfWeek = this._adapter.getFirstDayOfWeek();
-        const narrowWeekdays = this._adapter.getDayOfWeekNames('narrow');
-        const longWeekdays = this._adapter.getDayOfWeekNames('long');
-        // Rotate the labels for days of the week based on the configured first day of the week.
-        const weekdays = longWeekdays.map((long, i) => {
-            return { long, narrow: narrowWeekdays[i] };
-        });
-        this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
         this._activeDate = this._adapter.today();
     }
-    /**
-     * The date to display in this month view (everything other than the month and year is ignored).
-     */
+    /** The date to display in this multi year view */
     get activeDate() {
         return this._activeDate;
     }
@@ -549,14 +503,8 @@ class MtxMonthView {
         this._activeDate = value || this._adapter.today();
         if (oldActiveDate &&
             this._activeDate &&
-            !this._adapter.sameMonthAndYear(oldActiveDate, this._activeDate)) {
+            !isSameMultiYearView(this._adapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
             this._init();
-            if (this._adapter.isInNextMonth(oldActiveDate, this._activeDate)) {
-                this.calendarState('right');
-            }
-            else {
-                this.calendarState('left');
-            }
         }
     }
     /** The currently selected date. */
@@ -565,123 +513,279 @@ class MtxMonthView {
     }
     set selected(value) {
         this._selected = value;
-        this._selectedDate = this._getDateInCurrentMonth(this.selected);
+        this._selectedYear = this._selected && this._adapter.getYear(this._selected);
+    }
+    /** The minimum selectable date. */
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this._getValidDateOrNull(this._adapter.deserialize(value));
+    }
+    /** The maximum selectable date. */
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this._getValidDateOrNull(this._adapter.deserialize(value));
     }
     ngAfterContentInit() {
         this._init();
     }
-    /** Handles when a new date is selected. */
-    _dateSelected(date) {
-        const dateObject = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), date, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate));
+    /** Handles when a new year is selected. */
+    _yearSelected(year) {
+        const month = this._adapter.getMonth(this.activeDate);
+        const normalizedDate = this._adapter.createDatetime(year, month, 1, 0, 0);
+        const dateObject = 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));
         this.selectedChange.emit(dateObject);
         this._activeDate = dateObject;
-        if (this.type === 'date') {
+        if (this.type === 'year') {
             this._userSelection.emit();
         }
     }
-    _calendarStateDone() {
-        this._calendarState = '';
+    _getActiveCell() {
+        return getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate);
     }
-    /** Initializes this month view. */
+    /** Initializes this year view. */
     _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;
-        this._createWeekCells();
+        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 = [];
+        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)));
+                row = [];
+            }
+        }
     }
-    /** Creates MdCalendarCells for the dates in this month. */
-    _createWeekCells() {
-        const daysInMonth = this._adapter.getNumDaysInMonth(this.activeDate);
-        const dateNames = this._adapter.getDateNames();
-        this._weeks = [[]];
-        for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
-            if (cell === DAYS_PER_WEEK) {
-                this._weeks.push([]);
-                cell = 0;
+    /** Creates an MtxCalendarCell for the given year. */
+    _createCellForYear(year) {
+        const yearName = this._adapter.getYearName(this._adapter.createDate(year, 0, 1));
+        return new MtxCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
+    }
+    /** Whether the given year is enabled. */
+    _shouldEnableYear(year) {
+        // disable if the year is greater than maxDate lower than minDate
+        if (year === undefined ||
+            year === null ||
+            (this.maxDate && year > this._adapter.getYear(this.maxDate)) ||
+            (this.minDate && year < this._adapter.getYear(this.minDate))) {
+            return false;
+        }
+        // enable if it reaches here and there's no filter defined
+        if (!this.dateFilter) {
+            return true;
+        }
+        const firstOfYear = this._adapter.createDate(year, 0, 1);
+        // If any date in the year is enabled count the year as enabled.
+        for (let date = firstOfYear; this._adapter.getYear(date) === year; date = this._adapter.addCalendarDays(date, 1)) {
+            if (this.dateFilter(date)) {
+                return true;
             }
-            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 ariaLabel = this._adapter.format(date, this._dateFormats.display.dateA11yLabel);
-            this._weeks[this._weeks.length - 1].push(new MtxCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
         }
+        return false;
     }
     /**
-     * Gets the date in this month that the given Date falls on.
-     * Returns null if the given Date is in another month.
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
      */
-    _getDateInCurrentMonth(date) {
-        return this._adapter.sameMonthAndYear(date, this.activeDate)
-            ? this._adapter.getDate(date)
-            : null;
+    _getValidDateOrNull(obj) {
+        return this._adapter.isDateInstance(obj) && this._adapter.isValid(obj) ? obj : null;
+    }
+    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
+    _handleCalendarBodyKeydown(event) {
+        const oldActiveDate = this._activeDate;
+        const isRtl = this._isRtl();
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);
+                break;
+            case RIGHT_ARROW:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);
+                break;
+            case UP_ARROW:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, -yearsPerRow);
+                break;
+            case DOWN_ARROW:
+                this.activeDate = 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));
+                break;
+            case END:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerPage -
+                    getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate) -
+                    1);
+                break;
+            case PAGE_UP:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
+                break;
+            case PAGE_DOWN:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
+                break;
+            case ENTER:
+            case SPACE:
+                this._yearSelected(this._adapter.getYear(this._activeDate));
+                break;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (this._adapter.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
+        }
+        this._focusActiveCell();
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell() {
+        this._mtxCalendarBody._focusActiveCell();
+    }
+    /** Determines whether the user has the RTL layout direction. */
+    _isRtl() {
+        return this._dir && this._dir.value === 'rtl';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxMultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxMultiYearView, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-multi-year-view', exportAs: 'mtxMultiYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], _mtxCalendarBody: [{
+                type: ViewChild,
+                args: [MtxCalendarBody]
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }] } });
+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));
+}
+/**
+ * When the multi-year view is first opened, the active year will be in view.
+ * So we compute how many years are between the active year and the *slot* where our
+ * "startingYear" will render when paged into view.
+ */
+function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
+    const activeYear = dateAdapter.getYear(activeDate);
+    return euclideanModulo(activeYear - getStartingYear(dateAdapter, minDate, maxDate), yearsPerPage);
+}
+/**
+ * We pick a "starting" year such that either the maximum year would be at the end
+ * or the minimum year would be at the beginning of a page.
+ */
+function getStartingYear(dateAdapter, minDate, maxDate) {
+    let startingYear = 0;
+    if (maxDate) {
+        const maxYear = dateAdapter.getYear(maxDate);
+        startingYear = maxYear - yearsPerPage + 1;
     }
-    calendarState(direction) {
-        this._calendarState = direction;
+    else if (minDate) {
+        startingYear = dateAdapter.getYear(minDate);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxMonthView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMonthView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track day) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    return startingYear;
+}
+/** Gets remainder that is non-negative, even if first number is negative */
+function euclideanModulo(a, b) {
+    return ((a % b) + b) % b;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxMonthView, decorators: [{
-            type: Component,
-            args: [{ selector: 'mtx-month-view', exportAs: 'mtxMonthView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendarBody], template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track day) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MTX_DATETIME_FORMATS]
-                }] }], propDecorators: { type: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], _userSelection: [{
-                type: Output
-            }], activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }] } });
 
-const yearsPerPage = 24;
-const yearsPerRow = 4;
+const activeEventOptions = normalizePassiveListenerOptions({ passive: false });
+const CLOCK_RADIUS = 50;
+const CLOCK_INNER_RADIUS = 27.5;
+const CLOCK_OUTER_RADIUS = 41.25;
+const CLOCK_TICK_RADIUS = 7.0833;
 /**
- * An internal component used to display multiple years in the datetimepicker.
+ * A clock that is used as part of the datetimepicker.
  * @docs-private
  */
-class MtxMultiYearView {
-    constructor(_adapter, _dateFormats) {
-        this._adapter = _adapter;
-        this._dateFormats = _dateFormats;
-        this.type = 'date';
-        /** Emits when a new month is selected. */
+class MtxClock {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._adapter = inject(DatetimeAdapter);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._document = inject(DOCUMENT);
+        /** Step over minutes. */
+        this.interval = 1;
+        this.actionButtons = false;
+        /** Whether the clock uses 12 hour format. */
+        this.twelvehour = false;
+        /** Whether the time is now in AM or PM. */
+        this.AMPM = 'AM';
+        /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
         /** Emits when any date is selected. */
         this._userSelection = new EventEmitter();
-        if (!this._adapter) {
-            throw createMissingDateImplError('DatetimeAdapter');
-        }
-        if (!this._dateFormats) {
-            throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-        }
-        this._activeDate = this._adapter.today();
+        /** Whether the clock is in hour view. */
+        this._hourView = true;
+        this._hours = [];
+        this._minutes = [];
+        this._timeChanged = false;
+        /** Called when the user has put their pointer down on the clock. */
+        this._pointerDown = (event) => {
+            this._timeChanged = false;
+            this.setTime(event);
+            this._bindGlobalEvents(event);
+        };
+        /**
+         * Called when the user has moved their pointer after
+         * starting to drag. Bound on the document level.
+         */
+        this._pointerMove = (event) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            this.setTime(event);
+        };
+        /** Called when the user has lifted their pointer. Bound on the document level. */
+        this._pointerUp = (event) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            this._removeGlobalEvents();
+            if (this._timeChanged) {
+                this.selectedChange.emit(this.activeDate);
+                if (this.actionButtons || !this._hourView) {
+                    this._userSelection.emit();
+                }
+            }
+        };
     }
-    /** The date to display in this multi year view */
+    /**
+     * The date to display in this clock view.
+     */
     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._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
+        if (!this._adapter.sameMinute(oldActiveDate, this._activeDate)) {
             this._init();
         }
     }
@@ -690,126 +794,245 @@ class MtxMultiYearView {
         return this._selected;
     }
     set selected(value) {
-        this._selected = value;
-        this._selectedYear = this._selected && this._adapter.getYear(this._selected);
+        this._selected = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
+        if (this._selected) {
+            this.activeDate = this._selected;
+        }
     }
     /** The minimum selectable date. */
     get minDate() {
         return this._minDate;
     }
     set minDate(value) {
-        this._minDate = this._getValidDateOrNull(this._adapter.deserialize(value));
+        this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
     }
     /** The maximum selectable date. */
     get maxDate() {
         return this._maxDate;
     }
     set maxDate(value) {
-        this._maxDate = this._getValidDateOrNull(this._adapter.deserialize(value));
+        this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
+    }
+    /** Whether the clock should be started in hour or minute view. */
+    set startView(value) {
+        this._hourView = value !== 'minute';
+    }
+    get _hand() {
+        const hour = this._adapter.getHour(this.activeDate);
+        this._selectedHour = hour;
+        this._selectedMinute = this._adapter.getMinute(this.activeDate);
+        let deg = 0;
+        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;
+            }
+            deg = Math.round(this._selectedHour * (360 / (24 / 2)));
+        }
+        else {
+            deg = Math.round(this._selectedMinute * (360 / 60));
+        }
+        return {
+            height: `${radius}%`,
+            marginTop: `${50 - radius}%`,
+            transform: `rotate(${deg}deg)`,
+        };
     }
     ngAfterContentInit() {
+        this.activeDate = this._activeDate || this._adapter.today();
         this._init();
     }
-    /** Handles when a new year is selected. */
-    _yearSelected(year) {
-        const month = this._adapter.getMonth(this.activeDate);
-        const normalizedDate = this._adapter.createDatetime(year, month, 1, 0, 0);
-        const dateObject = 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));
-        this.selectedChange.emit(dateObject);
-        this._activeDate = dateObject;
-        if (this.type === 'year') {
-            this._userSelection.emit();
-        }
+    ngOnDestroy() {
+        this._removeGlobalEvents();
     }
-    _getActiveCell() {
-        return getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate);
+    ngOnChanges() {
+        this._init();
     }
-    _calendarStateDone() {
-        this._calendarState = '';
+    /** Binds our global move and end events. */
+    _bindGlobalEvents(triggerEvent) {
+        // Note that we bind the events to the `document`, because it allows us to capture
+        // drag cancel events where the user's pointer is outside the browser window.
+        const document = this._document;
+        const isTouch = isTouchEvent(triggerEvent);
+        const moveEventName = isTouch ? 'touchmove' : 'mousemove';
+        const endEventName = isTouch ? 'touchend' : 'mouseup';
+        document.addEventListener(moveEventName, this._pointerMove, activeEventOptions);
+        document.addEventListener(endEventName, this._pointerUp, activeEventOptions);
+        if (isTouch) {
+            document.addEventListener('touchcancel', this._pointerUp, activeEventOptions);
+        }
     }
-    /** Initializes this year view. */
+    /** Removes any global event listeners that we may have added. */
+    _removeGlobalEvents() {
+        const document = this._document;
+        document.removeEventListener('mousemove', this._pointerMove, activeEventOptions);
+        document.removeEventListener('mouseup', this._pointerUp, activeEventOptions);
+        document.removeEventListener('touchmove', this._pointerMove, activeEventOptions);
+        document.removeEventListener('touchend', this._pointerUp, activeEventOptions);
+        document.removeEventListener('touchcancel', this._pointerUp, activeEventOptions);
+    }
+    /** Initializes this clock view. */
     _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 = [];
-        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)));
-                row = [];
+        this._hours.length = 0;
+        this._minutes.length = 0;
+        const hourNames = this._adapter.getHourNames();
+        const minuteNames = this._adapter.getMinuteNames();
+        if (this.twelvehour) {
+            const hours = [];
+            for (let i = 0; i < hourNames.length; i++) {
+                const radian = (i / 6) * Math.PI;
+                const radius = CLOCK_OUTER_RADIUS;
+                const hour = i;
+                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), hour, 0);
+                // Check if the date is enabled, no need to respect the minute setting here
+                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, MtxDatetimepickerFilterType.HOUR));
+                // display value for twelvehour clock should be from 1-12 not including 0 and not above 12
+                hours.push({
+                    value: i,
+                    displayValue: i % 12 === 0 ? '12' : hourNames[i % 12],
+                    enabled,
+                    top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
+                    left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
+                });
+            }
+            // filter out AM or PM hours based on AMPM
+            if (this.AMPM === 'AM') {
+                this._hours = hours.filter(x => x.value < 12);
             }
+            else {
+                this._hours = hours.filter(x => x.value >= 12);
+            }
+        }
+        else {
+            for (let i = 0; i < hourNames.length; i++) {
+                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);
+                // Check if the date is enabled, no need to respect the minute setting here
+                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, MtxDatetimepickerFilterType.HOUR));
+                this._hours.push({
+                    value: i,
+                    displayValue: i === 0 ? '00' : hourNames[i],
+                    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%',
+                });
+            }
+        }
+        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, MtxDatetimepickerFilterType.MINUTE));
+            this._minutes.push({
+                value: i,
+                displayValue: i === 0 ? '00' : minuteNames[i],
+                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,
+            });
         }
     }
-    /** Creates an MtxCalendarCell for the given year. */
-    _createCellForYear(year) {
-        const yearName = this._adapter.getYearName(this._adapter.createDate(year, 0, 1));
-        return new MtxCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
-    }
-    /** Whether the given year is enabled. */
-    _shouldEnableYear(year) {
-        // disable if the year is greater than maxDate lower than minDate
-        if (year === undefined ||
-            year === null ||
-            (this.maxDate && year > this._adapter.getYear(this.maxDate)) ||
-            (this.minDate && year < this._adapter.getYear(this.minDate))) {
-            return false;
+    /**
+     * Set Time
+     * @param event
+     */
+    setTime(event) {
+        const trigger = this._elementRef.nativeElement;
+        const triggerRect = trigger.getBoundingClientRect();
+        const width = trigger.offsetWidth;
+        const height = trigger.offsetHeight;
+        const { pageX, pageY } = getPointerPositionOnPage(event);
+        const x = width / 2 - (pageX - triggerRect.left - window.pageXOffset);
+        const y = height / 2 - (pageY - triggerRect.top - window.pageYOffset);
+        let radian = Math.atan2(-x, y);
+        const unit = Math.PI / (this._hourView ? 6 : this.interval ? 30 / this.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;
+        if (radian < 0) {
+            radian = Math.PI * 2 + radian;
         }
-        // enable if it reaches here and there's no filter defined
-        if (!this.dateFilter) {
-            return true;
+        let value = Math.round(radian / unit);
+        let date;
+        if (this._hourView) {
+            if (this.twelvehour) {
+                if (this.AMPM === 'AM') {
+                    value = value === 0 ? 12 : value;
+                }
+                else {
+                    // if we chosen 12 in PM, the value should be 0 for 0:00,
+                    // else we can safely add 12 to the final value
+                    value = value === 12 ? 0 : value + 12;
+                }
+            }
+            else {
+                if (value === 12) {
+                    value = 0;
+                }
+                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));
         }
-        const firstOfYear = this._adapter.createDate(year, 0, 1);
-        // If any date in the year is enabled count the year as enabled.
-        for (let date = firstOfYear; this._adapter.getYear(date) === year; date = this._adapter.addCalendarDays(date, 1)) {
-            if (this.dateFilter(date)) {
-                return true;
+        else {
+            if (this.interval) {
+                value *= this.interval;
+            }
+            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);
         }
-        return false;
-    }
-    /**
-     * Gets the year in this years range that the given Date falls on.
-     * Returns null if the given Date is not in this range.
-     */
-    _getYearInCurrentRange(date) {
-        const year = this._adapter.getYear(date);
-        return this._isInRange(year) ? year : null;
-    }
-    /**
-     * Validate if the current year is in the current range
-     * Returns true if is in range else returns false
-     */
-    _isInRange(year) {
-        return true;
-    }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return this._adapter.isDateInstance(obj) && this._adapter.isValid(obj) ? obj : null;
+        // if there is a dateFilter, check if the date is allowed if it is not then do not set/emit new date
+        // https://github.com/ng-matero/extensions/issues/244
+        if (this.dateFilter &&
+            !this.dateFilter(date, this._hourView ? MtxDatetimepickerFilterType.HOUR : MtxDatetimepickerFilterType.MINUTE)) {
+            return;
+        }
+        this._timeChanged = true;
+        this.activeDate = date;
+        this._changeDetectorRef.markForCheck();
+        this.activeDateChange.emit(this.activeDate);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxMultiYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxClock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxClock, isStandalone: true, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", actionButtons: "actionButtons", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_pointerDown($event)", "touchstart": "_pointerDown($event)" }, classAttribute: "mtx-clock" }, exportAs: ["mtxClock"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    @for (item of _hours; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n        [style.fontSize]=\"item.fontSize\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    @for (item of _minutes; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-sys-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-sys-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxMultiYearView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxClock, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-multi-year-view', exportAs: 'mtxMultiYearView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendarBody], template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MTX_DATETIME_FORMATS]
-                }] }], propDecorators: { type: [{
+            args: [{ selector: 'mtx-clock', host: {
+                        'role': 'clock',
+                        'class': 'mtx-clock',
+                        '(mousedown)': '_pointerDown($event)',
+                        '(touchstart)': '_pointerDown($event)',
+                    }, exportAs: 'mtxClock', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    @for (item of _hours; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n        [style.fontSize]=\"item.fontSize\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    @for (item of _minutes; track item.value) {\n      <div\n        class=\"mtx-clock-cell\"\n        [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n        [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n        [style.left]=\"item.left+'%'\"\n        [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n    }\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-sys-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-sys-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}\n"] }]
+        }], propDecorators: { dateFilter: [{
                 type: Input
-            }], dateFilter: [{
+            }], interval: [{
+                type: Input
+            }], actionButtons: [{
+                type: Input
+            }], twelvehour: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], AMPM: [{
                 type: Input
             }], selectedChange: [{
                 type: Output
+            }], activeDateChange: [{
+                type: Output
             }], _userSelection: [{
                 type: Output
             }], activeDate: [{
@@ -820,102 +1043,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], maxDate: [{
                 type: Input
+            }], startView: [{
+                type: Input
             }] } });
-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));
-}
-/**
- * When the multi-year view is first opened, the active year will be in view.
- * So we compute how many years are between the active year and the *slot* where our
- * "startingYear" will render when paged into view.
- */
-function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
-    const activeYear = dateAdapter.getYear(activeDate);
-    return euclideanModulo(activeYear - getStartingYear(dateAdapter, minDate, maxDate), yearsPerPage);
-}
-/**
- * We pick a "starting" year such that either the maximum year would be at the end
- * or the minimum year would be at the beginning of a page.
- */
-function getStartingYear(dateAdapter, minDate, maxDate) {
-    let startingYear = 0;
-    if (maxDate) {
-        const maxYear = dateAdapter.getYear(maxDate);
-        startingYear = maxYear - yearsPerPage + 1;
-    }
-    else if (minDate) {
-        startingYear = dateAdapter.getYear(minDate);
-    }
-    return startingYear;
-}
-/** Gets remainder that is non-negative, even if first number is negative */
-function euclideanModulo(a, b) {
-    return ((a % b) + b) % b;
+/** Returns whether an event is a touch event. */
+function isTouchEvent(event) {
+    // This function is called for every pixel that the user has dragged so we need it to be
+    // as fast as possible. Since we only bind mouse events and touch events, we can assume
+    // that if the event's name starts with `t`, it's a touch event.
+    return event.type[0] === 't';
 }
-
-class MtxDatetimepickerIntl {
-    constructor() {
-        /**
-         * Stream to emit from when labels are changed. Use this to notify components when the labels have
-         * changed after initialization.
-         */
-        this.changes = new Subject();
-        /** A label for the calendar popup (used by screen readers). */
-        this.calendarLabel = 'Calendar';
-        /** A label for the button used to open the calendar popup (used by screen readers). */
-        this.openCalendarLabel = 'Open calendar';
-        /** Label for the button used to close the calendar popup. */
-        this.closeCalendarLabel = 'Close calendar';
-        /** A label for the previous month button (used by screen readers). */
-        this.prevMonthLabel = 'Previous month';
-        /** A label for the next month button (used by screen readers). */
-        this.nextMonthLabel = 'Next month';
-        /** A label for the previous year button (used by screen readers). */
-        this.prevYearLabel = 'Previous year';
-        /** A label for the next year button (used by screen readers). */
-        this.nextYearLabel = 'Next year';
-        /** A label for the previous multi-year button (used by screen readers). */
-        this.prevMultiYearLabel = 'Previous 24 years';
-        /** A label for the next multi-year button (used by screen readers). */
-        this.nextMultiYearLabel = 'Next 24 years';
-        /** A label for the 'switch to month view' button (used by screen readers). */
-        this.switchToMonthViewLabel = 'Choose date';
-        /** A label for the 'switch to year view' button (used by screen readers). */
-        this.switchToYearViewLabel = 'Choose month';
-        /** A label for the 'switch to multi-year view' button (used by screen readers). */
-        this.switchToMultiYearViewLabel = 'Choose month and year';
-        /** A label for the first date of a range of dates (used by screen readers). */
-        this.startDateLabel = 'Start date';
-        /** A label for the last date of a range of dates (used by screen readers). */
-        this.endDateLabel = 'End date';
-        /** A label for the 'switch to clock hour view' button (used by screen readers). */
-        this.switchToClockHourViewLabel = 'Choose hour';
-        /** A label for the 'switch to clock minute view' button (used by screen readers). */
-        this.switchToClockMinuteViewLabel = 'Choose minute';
-        /** Label used for ok button within the manual time input. */
-        this.okLabel = 'OK';
-        /** Label used for cancel button within the manual time input. */
-        this.cancelLabel = 'Cancel';
-    }
-    /** Formats a range of years (used for visuals). */
-    formatYearRange(start, end) {
-        return `${start} \u2013 ${end}`;
+/** Gets the coordinates of a touch or mouse event relative to the document. */
+function getPointerPositionOnPage(event) {
+    let point;
+    if (isTouchEvent(event)) {
+        // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
+        point = event.touches[0] || event.changedTouches[0];
     }
-    /** Formats a label for a range of years (used by screen readers). */
-    formatYearRangeLabel(start, end) {
-        return `${start} to ${end}`;
+    else {
+        point = event;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerIntl, providedIn: 'root' }); }
+    return point;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerIntl, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
 
 function pad(num, size) {
     num = String(num);
@@ -940,9 +1089,9 @@ class MtxTimeInput {
         }
         this.writePlaceholder(this._value);
     }
-    constructor(element, cdr) {
-        this.element = element;
-        this.cdr = cdr;
+    constructor() {
+        this.element = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
         this._interval = 1;
         this._min = 0;
         this._max = Infinity;
@@ -1073,10 +1222,10 @@ class MtxTimeInput {
         this.inputElement.removeEventListener('keypress', this.keyPressListener);
         this.inputElement.removeEventListener('input', this.inputEventListener);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxTimeInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxTimeInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTimeInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input.mtx-time-input',
@@ -1085,9 +1234,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '(focus)': 'focus($event)',
                     },
                     exportAs: 'mtxTimeInput',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { timeInterval: [{
+        }], ctorParameters: () => [], propDecorators: { timeInterval: [{
                 type: Input,
                 args: ['timeInterval']
             }], timeMin: [{
@@ -1102,7 +1250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }], timeValueChanged: [{
                 type: Output
             }] } });
-class MtxTime {
+class MtxTimeView {
     /** The date to display in this clock view. */
     get activeDate() {
         return this._activeDate;
@@ -1179,10 +1327,11 @@ class MtxTime {
         }
         return String(value);
     }
-    constructor(_adapter, _changeDetectorRef, _datetimepickerIntl) {
-        this._adapter = _adapter;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._datetimepickerIntl = _datetimepickerIntl;
+    constructor() {
+        this._adapter = inject(DatetimeAdapter);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
+        this._datetimepickerIntl = inject(MtxDatetimepickerIntl);
         /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
         /** Emits when any date changes. */
@@ -1193,10 +1342,14 @@ class MtxTime {
         this.ampmChange = new EventEmitter();
         /** Emits when AM/PM button are clicked. */
         this.clockViewChange = new EventEmitter();
+        /** Input for action buttons. */
+        this.timeInput = false;
         /** Step over minutes. */
         this.interval = 1;
         /** Input for action buttons. */
         this.actionsPortal = null;
+        /** Prevent user to select same date time */
+        this.preventSameDateTimeSelection = false;
         /** Whether the time input should be auto-focused after view init. */
         this.autoFocus = true;
         /** Whether the clock uses 12 hour format. */
@@ -1213,30 +1366,58 @@ class MtxTime {
         // when clockView changes by input we should focus the correct input
         if (changes.clockView) {
             if (changes.clockView.currentValue !== changes.clockView.previousValue && this.autoFocus) {
-                this.focusInputElement();
+                this._focusInputElement();
             }
         }
     }
-    ngAfterViewInit() {
-        if (this.autoFocus) {
-            this.focusInputElement();
-        }
-    }
     ngOnDestroy() {
         if (this.datetimepickerIntlChangesSubscription) {
             this.datetimepickerIntlChangesSubscription.unsubscribe();
         }
     }
-    focusInputElement() {
+    /** Handles keydown events on the calendar body when calendar is in clock view. */
+    _handleCalendarBodyKeydown(event) {
+        const oldActiveDate = this._activeDate;
+        switch (event.keyCode) {
+            case UP_ARROW:
+                this.selected =
+                    this._clockView === 'hour'
+                        ? this._adapter.addCalendarHours(this._activeDate, 1)
+                        : this._adapter.addCalendarMinutes(this._activeDate, this.interval);
+                break;
+            case DOWN_ARROW:
+                this.selected =
+                    this._clockView === 'hour'
+                        ? this._adapter.addCalendarHours(this._activeDate, -1)
+                        : this._adapter.addCalendarMinutes(this._activeDate, -this.interval);
+                break;
+            case ENTER:
+            case SPACE:
+                if (this.timeInput && event.keyCode == SPACE) {
+                    return;
+                }
+                if (this.clockView == 'hour') {
+                    this._timeSelected(this._activeDate);
+                    this._focusInputElement();
+                }
+                else {
+                    this._userSelection.emit();
+                }
+                return;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        this.selectedChange.emit(this.selected);
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    _focusInputElement() {
         if (this.clockView === 'hour') {
-            if (this.hourInputElement) {
-                this.hourInputElement.nativeElement.focus();
-            }
+            this.hourInputElement?.nativeElement.focus();
         }
         else {
-            if (this.minuteInputElement) {
-                this.minuteInputElement.nativeElement.focus();
-            }
+            this.minuteInputElement?.nativeElement.focus();
         }
     }
     _handleHourInputChange(value) {
@@ -1299,19 +1480,38 @@ class MtxTime {
         this.clockView = clockView;
         this.clockViewChange.emit(clockView);
     }
-    _timeSelected(date) {
+    _dialTimeSelected(date) {
         if (this.clockView === 'hour') {
-            this.clockView = 'minute';
+            this._activeDate = date;
+            this._clockView = 'minute';
+        }
+        if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
+            this.selectedChange.emit(date);
+        }
+    }
+    _timeSelected(date) {
+        if (this.timeInput) {
+            if (this.clockView === 'hour') {
+                this.clockView = 'minute';
+            }
+            this._activeDate = this.selected = date;
+        }
+        else {
+            this._dialTimeSelected(date);
         }
-        this._activeDate = this.selected = date;
     }
     _onActiveDateChange(date) {
         this._activeDate = date;
         this.activeDateChange.emit(date);
     }
     _handleSelection() {
-        if (this.actionsPortal && this._selected) {
-            this.selectedChange.emit(this._selected);
+        if (this.timeInput) {
+            if (this.actionsPortal && this._selected) {
+                this.selectedChange.emit(this._selected);
+            }
+        }
+        else {
+            this._userSelection.emit();
         }
     }
     _handleOk() {
@@ -1323,15 +1523,28 @@ class MtxTime {
     _handleCancel() {
         this._userSelection.emit();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxTime, deps: [{ token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: MtxDatetimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxTime, isStandalone: true, selector: "mtx-time", inputs: { dateFilter: "dateFilter", interval: "interval", actionsPortal: "actionsPortal", autoFocus: ["autoFocus", "autoFocus", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { classAttribute: "mtx-time" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-time-input-wrapper\">\n  <div class=\"mtx-time-input-inner\">\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'hour'\"\n      [class.mtx-time-input-warning]=\"!hourInput.valid\"\n      #hourInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"twelvehour ? 1 : 0\"\n      [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\"\n      (timeValueChanged)=\"_handleHourInputChange($event)\"\n      (focus)=\"_handleFocus('hour')\" />\n\n    <div class=\"mtx-time-seperator\">:</div>\n\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'minute'\"\n      [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n      #minuteInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"0\"\n      [timeMax]=\"59\"\n      [timeValue]=\"minute\"\n      (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n      [timeInterval]=\"interval\"\n      (focus)=\"_handleFocus('minute')\" />\n\n    @if (twelvehour) {\n      <div class=\"mtx-time-ampm\">\n        <button mat-button type=\"button\" class=\"mtx-time-am\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n          (keydown)=\"$event.stopPropagation()\"\n          (click)=\"ampmChange.emit('AM')\">AM</button>\n        <button mat-button type=\"button\" class=\"mtx-time-pm\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n          (keydown)=\"$event.stopPropagation()\"\n          (click)=\"ampmChange.emit('PM')\">PM</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (!actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-app-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-app-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-app-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-app-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-app-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-app-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-app-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-app-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-app-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-app-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-app-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-app-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell() {
+        if (this.timeInput) {
+            if (this.autoFocus) {
+                this._focusInputElement();
+            }
+        }
+        else {
+            this._elementRef.nativeElement.focus();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTimeView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxTimeView, isStandalone: true, selector: "mtx-time-view", inputs: { dateFilter: "dateFilter", timeInput: ["timeInput", "timeInput", booleanAttribute], interval: "interval", actionsPortal: "actionsPortal", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, classAttribute: "mtx-time-view" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "@if (timeInput) {\n  <div class=\"mtx-time-input-wrapper\">\n    <div class=\"mtx-time-input-inner\">\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'hour'\"\n        [class.mtx-time-input-warning]=\"!hourInput.valid\"\n        #hourInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"twelvehour ? 1 : 0\"\n        [timeMax]=\"twelvehour ? 12 : 23\"\n        [timeValue]=\"hour\"\n        (timeValueChanged)=\"_handleHourInputChange($event)\"\n        (focus)=\"_handleFocus('hour')\" />\n\n      <div class=\"mtx-time-seperator\">:</div>\n\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'minute'\"\n        [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n        #minuteInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"0\"\n        [timeMax]=\"59\"\n        [timeValue]=\"minute\"\n        (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n        [timeInterval]=\"interval\"\n        (focus)=\"_handleFocus('minute')\" />\n\n      @if (twelvehour) {\n        <div class=\"mtx-time-ampm\">\n          <button mat-button type=\"button\" class=\"mtx-time-am\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('AM')\">AM</button>\n          <button mat-button type=\"button\" class=\"mtx-time-pm\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('PM')\">PM</button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<mtx-clock\n  (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTimeView, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-time', exportAs: 'mtxTime', host: {
-                        class: 'mtx-time',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButton, MtxClock, MtxTimeInput], template: "<div class=\"mtx-time-input-wrapper\">\n  <div class=\"mtx-time-input-inner\">\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'hour'\"\n      [class.mtx-time-input-warning]=\"!hourInput.valid\"\n      #hourInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"twelvehour ? 1 : 0\"\n      [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\"\n      (timeValueChanged)=\"_handleHourInputChange($event)\"\n      (focus)=\"_handleFocus('hour')\" />\n\n    <div class=\"mtx-time-seperator\">:</div>\n\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'minute'\"\n      [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n      #minuteInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"0\"\n      [timeMax]=\"59\"\n      [timeValue]=\"minute\"\n      (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n      [timeInterval]=\"interval\"\n      (focus)=\"_handleFocus('minute')\" />\n\n    @if (twelvehour) {\n      <div class=\"mtx-time-ampm\">\n        <button mat-button type=\"button\" class=\"mtx-time-am\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n          (keydown)=\"$event.stopPropagation()\"\n          (click)=\"ampmChange.emit('AM')\">AM</button>\n        <button mat-button type=\"button\" class=\"mtx-time-pm\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n          (keydown)=\"$event.stopPropagation()\"\n          (click)=\"ampmChange.emit('PM')\">PM</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (!actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-app-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-app-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-app-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-app-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-app-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-app-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-app-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-app-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-app-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-app-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-app-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-app-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: MtxDatetimepickerIntl }], propDecorators: { selectedChange: [{
+            args: [{ selector: 'mtx-time-view', exportAs: 'mtxTime', host: {
+                        'class': 'mtx-time-view',
+                        'tabindex': '0',
+                        '(keydown)': '_handleCalendarBodyKeydown($event)',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MtxClock, MtxTimeInput], template: "@if (timeInput) {\n  <div class=\"mtx-time-input-wrapper\">\n    <div class=\"mtx-time-input-inner\">\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'hour'\"\n        [class.mtx-time-input-warning]=\"!hourInput.valid\"\n        #hourInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"twelvehour ? 1 : 0\"\n        [timeMax]=\"twelvehour ? 12 : 23\"\n        [timeValue]=\"hour\"\n        (timeValueChanged)=\"_handleHourInputChange($event)\"\n        (focus)=\"_handleFocus('hour')\" />\n\n      <div class=\"mtx-time-seperator\">:</div>\n\n      <input class=\"mtx-time-input\"\n        [class.mtx-time-input-active]=\"clockView === 'minute'\"\n        [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n        #minuteInput=\"mtxTimeInput\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"2\"\n        [timeMin]=\"0\"\n        [timeMax]=\"59\"\n        [timeValue]=\"minute\"\n        (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n        [timeInterval]=\"interval\"\n        (focus)=\"_handleFocus('minute')\" />\n\n      @if (twelvehour) {\n        <div class=\"mtx-time-ampm\">\n          <button mat-button type=\"button\" class=\"mtx-time-am\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('AM')\">AM</button>\n          <button mat-button type=\"button\" class=\"mtx-time-pm\"\n            [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n            (keydown)=\"$event.stopPropagation()\"\n            (click)=\"ampmChange.emit('PM')\">PM</button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<mtx-clock\n  (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  (_userSelection)=\"_handleSelection()\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [actionButtons]=\"!!actionsPortal\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n  <div class=\"mtx-time-button-wrapper\">\n    <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n      {{ _datetimepickerIntl.cancelLabel }}\n    </button>\n    <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n      [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n      {{ _datetimepickerIntl.okLabel }}\n    </button>\n  </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], activeDateChange: [{
                 type: Output
@@ -1343,10 +1556,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Output
             }], dateFilter: [{
                 type: Input
+            }], timeInput: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], interval: [{
                 type: Input
             }], actionsPortal: [{
                 type: Input
+            }], preventSameDateTimeSelection: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], autoFocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1384,14 +1603,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @docs-private
  */
 class MtxYearView {
-    constructor(_adapter, _dateFormats) {
-        this._adapter = _adapter;
-        this._dateFormats = _dateFormats;
+    constructor() {
+        this._adapter = inject(DatetimeAdapter, { optional: true });
+        this._dir = inject(Directionality, { optional: true });
+        this._dateFormats = inject(MTX_DATETIME_FORMATS, { optional: true });
         this.type = 'date';
         /** Emits when a new month is selected. */
         this.selectedChange = new EventEmitter();
         /** Emits when any date is selected. */
         this._userSelection = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        this._selected = null;
         if (!this._adapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
@@ -1411,11 +1634,6 @@ class MtxYearView {
             this._activeDate &&
             !this._adapter.sameYear(oldActiveDate, this._activeDate)) {
             this._init();
-            // if (oldActiveDate < this._activeDate) {
-            //  this.calendarState('right');
-            // } else {
-            //  this.calendarState('left');
-            // }
         }
     }
     /** The currently selected date. */
@@ -1439,9 +1657,6 @@ class MtxYearView {
             this._userSelection.emit();
         }
     }
-    _calendarStateDone() {
-        this._calendarState = '';
-    }
     /** Initializes this month view. */
     _init() {
         this._selectedMonth = this._getMonthInCurrentYear(this.selected);
@@ -1460,16 +1675,15 @@ class MtxYearView {
      * Returns null if the given Date is in another year.
      */
     _getMonthInCurrentYear(date) {
-        return this._adapter.sameYear(date, this.activeDate) ? this._adapter.getMonth(date) : null;
+        return date && this._adapter.sameYear(date, this.activeDate)
+            ? this._adapter.getMonth(date)
+            : null;
     }
     /** Creates an MdCalendarCell for the given month. */
     _createCellForMonth(month, monthName) {
         const ariaLabel = this._adapter.format(this._adapter.createDatetime(this._adapter.getYear(this.activeDate), month, 1, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate)), this._dateFormats.display.monthYearA11yLabel);
         return new MtxCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._isMonthEnabled(month));
     }
-    // private calendarState(direction: string): void {
-    //   this._calendarState = direction;
-    // }
     /** Whether the given month is enabled. */
     _isMonthEnabled(month) {
         if (!this.dateFilter) {
@@ -1484,20 +1698,68 @@ class MtxYearView {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxYearView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** Handles keydown events on the calendar body when calendar is in year view. */
+    _handleCalendarBodyKeydown(event) {
+        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
+        // disabled ones from being selected. This may not be ideal, we should look into whether
+        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
+        const oldActiveDate = this._activeDate;
+        const isRtl = this._isRtl();
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+                this.activeDate = this._adapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);
+                break;
+            case RIGHT_ARROW:
+                this.activeDate = this._adapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);
+                break;
+            case UP_ARROW:
+                this.activeDate = this._adapter.addCalendarMonths(this._activeDate, -4);
+                break;
+            case DOWN_ARROW:
+                this.activeDate = this._adapter.addCalendarMonths(this._activeDate, 4);
+                break;
+            case HOME:
+                this.activeDate = 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));
+                break;
+            case PAGE_UP:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
+                break;
+            case PAGE_DOWN:
+                this.activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
+                break;
+            case ENTER:
+            case SPACE:
+                this._monthSelected(this._adapter.getMonth(this._activeDate));
+                break;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (this._adapter.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
+        }
+        this._focusActiveCell();
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell() {
+        this._mtxCalendarBody._focusActiveCell();
+    }
+    /** Determines whether the user has the RTL layout direction. */
+    _isRtl() {
+        return this._dir && this._dir.value === 'rtl';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxYearView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxYearView, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-year-view', exportAs: 'mtxYearView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendarBody], template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MTX_DATETIME_FORMATS]
-                }] }], propDecorators: { type: [{
+            args: [{ selector: 'mtx-year-view', exportAs: 'mtxYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], dateFilter: [{
                 type: Input
@@ -1505,6 +1767,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Output
             }], _userSelection: [{
                 type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], _mtxCalendarBody: [{
+                type: ViewChild,
+                args: [MtxCalendarBody]
             }], activeDate: [{
                 type: Input
             }], selected: [{
@@ -1516,12 +1783,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @docs-private
  */
 class MtxCalendar {
-    constructor(_elementRef, _intl, _ngZone, _adapter, _dateFormats, _changeDetectorRef) {
-        this._elementRef = _elementRef;
-        this._intl = _intl;
-        this._ngZone = _ngZone;
-        this._adapter = _adapter;
-        this._dateFormats = _dateFormats;
+    constructor() {
+        this._intl = inject(MtxDatetimepickerIntl);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._ngZone = inject(NgZone);
+        this._adapter = inject(DatetimeAdapter, { optional: true });
+        this._dateFormats = inject(MTX_DATETIME_FORMATS, { optional: true });
         /** Whether to show multi-year view. */
         this.multiYearSelector = false;
         /** Whether the clock uses 12 hour format. */
@@ -1540,7 +1807,12 @@ class MtxCalendar {
         this.viewChanged = new EventEmitter();
         this._userSelection = new EventEmitter();
         this._clockView = 'hour';
-        this._injector = inject(Injector);
+        /**
+         * Used for scheduling that focus should be moved to the active cell on the next tick.
+         * We need to schedule it, rather than do it immediately, because we have to wait
+         * for Angular to re-evaluate the view children.
+         */
+        this._moveFocusOnNextTick = false;
         this._type = 'date';
         /**
          * Whether the calendar is in time mode. In time mode the calendar clock gets time input
@@ -1556,13 +1828,16 @@ class MtxCalendar {
                 (!this.minDate || this._adapter.compareDate(date, this.minDate) >= 0) &&
                 (!this.maxDate || this._adapter.compareDate(date, this.maxDate) <= 0));
         };
+        const _intl = this._intl;
         if (!this._adapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
         if (!this._dateFormats) {
             throw createMissingDateImplError('MTX_DATETIME_FORMATS');
         }
-        this._intlChanges = _intl.changes.subscribe(() => _changeDetectorRef.markForCheck());
+        this._intlChanges = _intl.changes.subscribe(() => {
+            this._changeDetectorRef.markForCheck();
+        });
     }
     /** The display type of datetimepicker. */
     get type() {
@@ -1625,14 +1900,20 @@ class MtxCalendar {
                 this.calendarState('left');
             }
         }
+        this._changeDetectorRef.markForCheck();
     }
     /** Whether the calendar is in month view. */
     get currentView() {
         return this._currentView;
     }
-    set currentView(view) {
-        this._currentView = view;
-        this.viewChanged.emit(view);
+    set currentView(value) {
+        const viewChangedResult = this._currentView !== value ? value : null;
+        this._currentView = value;
+        this._moveFocusOnNextTick = true;
+        this._changeDetectorRef.markForCheck();
+        if (viewChangedResult) {
+            this.viewChanged.emit(viewChangedResult);
+        }
     }
     get _yearPeriodText() {
         if (this.currentView === 'multi-year') {
@@ -1721,17 +2002,24 @@ class MtxCalendar {
         }
         this._activeDate = this.startAt || this._adapter.today();
         this._selectAMPM(this._activeDate);
+        // Assign to the private property since we don't want to move focus on init.
         if (this.type === 'year') {
-            this.currentView = 'multi-year';
+            this._currentView = 'multi-year';
         }
         else if (this.type === 'month') {
-            this.currentView = 'year';
+            this._currentView = 'year';
         }
         else if (this.type === 'time') {
-            this.currentView = 'clock';
+            this._currentView = 'clock';
         }
         else {
-            this.currentView = this.startView || 'month';
+            this._currentView = this.startView;
+        }
+    }
+    ngAfterViewChecked() {
+        if (this._moveFocusOnNextTick) {
+            this._moveFocusOnNextTick = false;
+            this.focusActiveCell();
         }
     }
     ngOnDestroy() {
@@ -1784,15 +2072,6 @@ class MtxCalendar {
             this.selectedChange.emit(date);
         }
     }
-    _dialTimeSelected(date) {
-        if (this._clockView !== 'minute') {
-            this._activeDate = date;
-            this._clockView = 'minute';
-        }
-        if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
-            this.selectedChange.emit(date);
-        }
-    }
     _onActiveDateChange(date) {
         this._activeDate = date;
     }
@@ -1804,7 +2083,10 @@ class MtxCalendar {
         else {
             this._AMPM = 'AM';
         }
-        if (this.actionsPortal && this._selected && !this._adapter.sameHour(date, this._selected)) {
+        if (this.actionsPortal &&
+            this.currentView === 'clock' &&
+            this._selected &&
+            !this._adapter.sameHour(date, this._selected)) {
             this.selectedChange.emit(date);
         }
     }
@@ -1876,29 +2158,6 @@ class MtxCalendar {
     _nextEnabled() {
         return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
     }
-    /** Handles keydown events on the calendar body. */
-    _handleCalendarBodyKeydown(event) {
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
-        if (this.currentView === 'month') {
-            this._handleCalendarBodyKeydownInMonthView(event);
-        }
-        else if (this.currentView === 'year') {
-            this._handleCalendarBodyKeydownInYearView(event);
-        }
-        else if (this.currentView === 'multi-year') {
-            this._handleCalendarBodyKeydownInMultiYearView(event);
-        }
-        else {
-            this._handleCalendarBodyKeydownInClockView(event);
-        }
-    }
-    _focusActiveCell() {
-        afterNextRender(() => {
-            this._elementRef.nativeElement.focus();
-        }, { injector: this._injector });
-    }
     _calendarStateDone() {
         this._calendarState = '';
     }
@@ -1914,207 +2173,39 @@ class MtxCalendar {
         // Otherwise we are in 'multi-year' view.
         return isSameMultiYearView(this._adapter, date1, date2, this.minDate, this.maxDate);
     }
-    /** Handles keydown events on the calendar body when calendar is in month view. */
-    _handleCalendarBodyKeydownInMonthView(event) {
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, -1);
-                break;
-            case RIGHT_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1);
-                break;
-            case UP_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, -7);
-                break;
-            case DOWN_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 7);
-                break;
-            case HOME:
-                this._activeDate = 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));
-                break;
-            case PAGE_UP:
-                this._activeDate = event.altKey
-                    ? this._adapter.addCalendarYears(this._activeDate, -1)
-                    : this._adapter.addCalendarMonths(this._activeDate, -1);
-                break;
-            case PAGE_DOWN:
-                this._activeDate = 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);
-                    // Prevent unexpected default actions such as form submission.
-                    event.preventDefault();
-                }
-                return;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
-        }
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
-    /** Handles keydown events on the calendar body when calendar is in year view. */
-    _handleCalendarBodyKeydownInYearView(event) {
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -1);
-                break;
-            case RIGHT_ARROW:
-                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 1);
-                break;
-            case UP_ARROW:
-                this._activeDate = this._prevMonthInSameCol(this._activeDate);
-                break;
-            case DOWN_ARROW:
-                this._activeDate = this._nextMonthInSameCol(this._activeDate);
-                break;
-            case HOME:
-                this._activeDate = 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));
-                break;
-            case PAGE_UP:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
-                break;
-            case PAGE_DOWN:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
-                break;
-            case ENTER:
-                this._monthSelected(this._activeDate);
-                break;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
-        }
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
-    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
-    _handleCalendarBodyKeydownInMultiYearView(event) {
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -1);
-                break;
-            case RIGHT_ARROW:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, 1);
-                break;
-            case UP_ARROW:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -yearsPerRow);
-                break;
-            case DOWN_ARROW:
-                this._activeDate = 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));
-                break;
-            case END:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerPage -
-                    getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate) -
-                    1);
-                break;
-            case PAGE_UP:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
-                break;
-            case PAGE_DOWN:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
-                break;
-            case ENTER:
-                this._yearSelected(this._activeDate);
-                break;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
-        }
-    }
-    /** Handles keydown events on the calendar body when calendar is in month view. */
-    _handleCalendarBodyKeydownInClockView(event) {
-        switch (event.keyCode) {
-            case UP_ARROW:
-                this._activeDate =
-                    this._clockView === 'hour'
-                        ? this._adapter.addCalendarHours(this._activeDate, 1)
-                        : this._adapter.addCalendarMinutes(this._activeDate, this.timeInterval);
-                break;
-            case DOWN_ARROW:
-                this._activeDate =
-                    this._clockView === 'hour'
-                        ? this._adapter.addCalendarHours(this._activeDate, -1)
-                        : this._adapter.addCalendarMinutes(this._activeDate, -this.timeInterval);
-                break;
-            case ENTER:
-                if (!this.timeInput) {
-                    this._dialTimeSelected(this._activeDate);
-                }
-                return;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
-        }
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
-    /**
-     * Determine the date for the month that comes before the given month in the same column in the
-     * calendar table.
-     */
-    _prevMonthInSameCol(date) {
-        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-        // of each year.
-        const increment = this._adapter.getMonth(date) <= 4 ? -5 : this._adapter.getMonth(date) >= 7 ? -7 : -12;
-        return this._adapter.addCalendarMonths(date, increment);
-    }
-    /**
-     * Determine the date for the month that comes after the given month in the same column in the
-     * calendar table.
-     */
-    _nextMonthInSameCol(date) {
-        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-        // of each year.
-        const increment = this._adapter.getMonth(date) <= 4 ? 7 : this._adapter.getMonth(date) >= 7 ? 5 : 12;
-        return this._adapter.addCalendarMonths(date, increment);
-    }
     calendarState(direction) {
         this._calendarState = direction;
     }
     _2digit(n) {
         return ('00' + n).slice(-2);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendar, deps: [{ token: i0.ElementRef }, { token: MtxDatetimepickerIntl }, { token: i0.NgZone }, { token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-month-content\">\n      <div class=\"mtx-calendar-controls\">\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-previous-button\"\n          [class.disabled]=\"!_previousEnabled()\"\n          [attr.aria-disabled]=\"!_previousEnabled()\"\n          [attr.aria-label]=\"_prevButtonLabel\"\n          (click)=\"_previousClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </button>\n        <div class=\"mtx-calendar-period-button\"\n          [@slideCalendar]=\"_calendarState\"\n          (@slideCalendar.done)=\"_calendarStateDone()\">\n          <strong>{{ _yearPeriodText }}</strong>\n        </div>\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-next-button\"\n          [class.disabled]=\"!_nextEnabled()\"\n          [attr.aria-disabled]=\"!_nextEnabled()\"\n          [attr.aria-label]=\"_nextButtonLabel\"\n          (click)=\"_nextClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n\n  @switch (currentView) {\n    @case ('month') {\n      <mtx-month-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_dateSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-month-view>\n    }\n    @case ('year') {\n      <mtx-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_monthSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-year-view>\n    }\n    @case ('multi-year') {\n      <mtx-multi-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_yearSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-multi-year-view>\n    }\n    @default {\n      @if (timeInput) {\n        <mtx-time\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\">\n        </mtx-time>\n      } @else {\n        <mtx-clock (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_dialTimeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [startView]=\"_clockView\"\n          [twelvehour]=\"twelvehour\">\n        </mtx-clock>\n      }\n    }\n  }\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-app-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-app-body-large-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-app-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-app-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-app-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTime, selector: "mtx-time", inputs: ["dateFilter", "interval", "actionsPortal", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** Returns the component instance that corresponds to the current calendar view. */
+    _getCurrentViewComponent() {
+        return this.monthView || this.yearView || this.multiYearView || this.timeView;
+    }
+    /** Focuses the active date. */
+    focusActiveCell() {
+        this._getCurrentViewComponent()._focusActiveCell(false);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: MtxMonthView, descendants: true }, { propertyName: "yearView", first: true, predicate: MtxYearView, descendants: true }, { propertyName: "multiYearView", first: true, predicate: MtxMultiYearView, descendants: true }, { propertyName: "timeView", first: true, predicate: MtxTimeView, descendants: true }], exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-previous-button\"\n        [class.disabled]=\"!_previousEnabled()\"\n        [attr.aria-disabled]=\"!_previousEnabled()\"\n        [attr.aria-label]=\"_prevButtonLabel\"\n        (click)=\"_previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n        </svg>\n      </button>\n      <div class=\"mtx-calendar-period-button\"\n        [@slideCalendar]=\"_calendarState\"\n        (@slideCalendar.done)=\"_calendarStateDone()\">\n        <strong>{{ _yearPeriodText }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-next-button\"\n        [class.disabled]=\"!_nextEnabled()\"\n        [attr.aria-disabled]=\"!_nextEnabled()\"\n        [attr.aria-label]=\"_nextButtonLabel\"\n        (click)=\"_nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n      @case ('month') {\n        <mtx-month-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_dateSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-month-view>\n      }\n      @case ('year') {\n        <mtx-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_monthSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-year-view>\n      }\n      @case ('multi-year') {\n        <mtx-multi-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_yearSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-multi-year-view>\n      }\n      @default {\n        <mtx-time-view\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [(selected)]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\"\n          [timeInput]=\"timeInput\"\n          [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n        </mtx-time-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-large-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTimeView, selector: "mtx-time-view", inputs: ["dateFilter", "timeInput", "interval", "actionsPortal", "preventSameDateTimeSelection", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-calendar', host: {
                         'class': 'mtx-calendar',
                         '[class.mtx-calendar-with-time-input]': 'timeInput',
-                        'tabindex': '0',
-                        '(keydown)': '_handleCalendarBodyKeydown($event)',
-                    }, exportAs: 'mtxCalendar', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                    }, exportAs: 'mtxCalendar', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CdkPortalOutlet,
+                        CdkMonitorFocus,
                         MatButton,
                         MatIconButton,
                         MtxMonthView,
                         MtxYearView,
                         MtxMultiYearView,
-                        MtxTime,
-                        MtxClock,
-                    ], template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-month-content\">\n      <div class=\"mtx-calendar-controls\">\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-previous-button\"\n          [class.disabled]=\"!_previousEnabled()\"\n          [attr.aria-disabled]=\"!_previousEnabled()\"\n          [attr.aria-label]=\"_prevButtonLabel\"\n          (click)=\"_previousClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </button>\n        <div class=\"mtx-calendar-period-button\"\n          [@slideCalendar]=\"_calendarState\"\n          (@slideCalendar.done)=\"_calendarStateDone()\">\n          <strong>{{ _yearPeriodText }}</strong>\n        </div>\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-next-button\"\n          [class.disabled]=\"!_nextEnabled()\"\n          [attr.aria-disabled]=\"!_nextEnabled()\"\n          [attr.aria-label]=\"_nextButtonLabel\"\n          (click)=\"_nextClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n\n  @switch (currentView) {\n    @case ('month') {\n      <mtx-month-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_dateSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-month-view>\n    }\n    @case ('year') {\n      <mtx-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_monthSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-year-view>\n    }\n    @case ('multi-year') {\n      <mtx-multi-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_yearSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-multi-year-view>\n    }\n    @default {\n      @if (timeInput) {\n        <mtx-time\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\">\n        </mtx-time>\n      } @else {\n        <mtx-clock (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_dialTimeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [startView]=\"_clockView\"\n          [twelvehour]=\"twelvehour\">\n        </mtx-clock>\n      }\n    }\n  }\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-app-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-app-body-large-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-app-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-app-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-app-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MtxDatetimepickerIntl }, { type: i0.NgZone }, { type: i1.DatetimeAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MTX_DATETIME_FORMATS]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { multiYearSelector: [{
+                        MtxTimeView,
+                    ], template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-previous-button\"\n        [class.disabled]=\"!_previousEnabled()\"\n        [attr.aria-disabled]=\"!_previousEnabled()\"\n        [attr.aria-label]=\"_prevButtonLabel\"\n        (click)=\"_previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n        </svg>\n      </button>\n      <div class=\"mtx-calendar-period-button\"\n        [@slideCalendar]=\"_calendarState\"\n        (@slideCalendar.done)=\"_calendarStateDone()\">\n        <strong>{{ _yearPeriodText }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\"\n        class=\"mtx-calendar-next-button\"\n        [class.disabled]=\"!_nextEnabled()\"\n        [attr.aria-disabled]=\"!_nextEnabled()\"\n        [attr.aria-label]=\"_nextButtonLabel\"\n        (click)=\"_nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n    @switch (currentView) {\n      @case ('month') {\n        <mtx-month-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_dateSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-month-view>\n      }\n      @case ('year') {\n        <mtx-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_monthSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-year-view>\n      }\n      @case ('multi-year') {\n        <mtx-multi-year-view\n          (_userSelection)=\"_userSelected()\"\n          (selectedChange)=\"_yearSelected($event)\"\n          [(activeDate)]=\"_activeDate\"\n          [dateFilter]=\"_dateFilterForViews\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"selected\"\n          [type]=\"type\">\n        </mtx-multi-year-view>\n      }\n      @default {\n        <mtx-time-view\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [(selected)]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\"\n          [timeInput]=\"timeInput\"\n          [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n        </mtx-time-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-large-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { multiYearSelector: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], twelvehour: [{
@@ -2127,7 +2218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }], dateFilter: [{
                 type: Input
             }], preventSameDateTimeSelection: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], headerComponent: [{
                 type: Input
             }], actionsPortal: [{
@@ -2138,6 +2230,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Output
             }], _userSelection: [{
                 type: Output
+            }], monthView: [{
+                type: ViewChild,
+                args: [MtxMonthView]
+            }], yearView: [{
+                type: ViewChild,
+                args: [MtxYearView]
+            }], multiYearView: [{
+                type: ViewChild,
+                args: [MtxMultiYearView]
+            }], timeView: [{
+                type: ViewChild,
+                args: [MtxTimeView]
             }], type: [{
                 type: Input
             }], startAt: [{
@@ -2182,8 +2286,8 @@ const MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  * @docs-private
  */
 class MtxDatetimepickerContent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         /** Emits when an animation has finished. */
         this._animationDone = new Subject();
         /** Id of the label for the `role="dialog"` element. */
@@ -2194,6 +2298,12 @@ class MtxDatetimepickerContent {
         this.type = 'datetime';
         /** The view of the calendar. */
         this.view = 'month';
+        /** Text for the close button. */
+        this._closeButtonText = '';
+        /** Whether the close button currently has focus. */
+        this._closeButtonFocused = false;
+        const intl = inject(MtxDatetimepickerIntl);
+        this._closeButtonText = intl.closeCalendarLabel;
     }
     _viewChanged(view) {
         this.view = view;
@@ -2201,8 +2311,8 @@ class MtxDatetimepickerContent {
     ngOnInit() {
         this._animationState = this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';
     }
-    ngAfterContentInit() {
-        this._calendar._focusActiveCell();
+    ngAfterViewInit() {
+        this._calendar.focusActiveCell();
     }
     ngOnDestroy() {
         this._animationDone.complete();
@@ -2228,13 +2338,13 @@ class MtxDatetimepickerContent {
             this._changeDetectorRef.detectChanges();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "_animationState" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-app-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow);color:var(--mtx-datetimepicker-container-text-color, var(--mat-app-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow);border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-app-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "_animationState" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n    <!-- Invisible close button for screen reader users. -->\n    <button\n      type=\"button\"\n      mat-raised-button\n      [color]=\"color || 'primary'\"\n      class=\"mtx-datetimepicker-close-button\"\n      [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n      (focus)=\"_closeButtonFocused = true\"\n      (blur)=\"_closeButtonFocused = false\"\n      (click)=\"datetimepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], animations: [
             mtxDatetimepickerAnimations.transformPanel,
             mtxDatetimepickerAnimations.fadeInCalendar,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-content', host: {
                         'class': 'mtx-datetimepicker-content',
@@ -2246,8 +2356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     }, animations: [
                         mtxDatetimepickerAnimations.transformPanel,
                         mtxDatetimepickerAnimations.fadeInCalendar,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendar, CdkPortalOutlet], template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-app-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow);color:var(--mtx-datetimepicker-container-text-color, var(--mat-app-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow);border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-app-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _calendar: [{
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus, MtxCalendar, CdkPortalOutlet, MatButton], template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n    <!-- Invisible close button for screen reader users. -->\n    <button\n      type=\"button\"\n      mat-raised-button\n      [color]=\"color || 'primary'\"\n      class=\"mtx-datetimepicker-close-button\"\n      [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n      (focus)=\"_closeButtonFocused = true\"\n      (blur)=\"_closeButtonFocused = false\"\n      (click)=\"datetimepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _calendar: [{
                 type: ViewChild,
                 args: [MtxCalendar, { static: true }]
             }], color: [{
@@ -2276,12 +2386,12 @@ class MtxDatetimepicker {
     set color(value) {
         this._color = value;
     }
-    constructor(_overlay, _viewContainerRef, _scrollStrategy, _dateAdapter, _dir) {
-        this._overlay = _overlay;
-        this._viewContainerRef = _viewContainerRef;
-        this._scrollStrategy = _scrollStrategy;
-        this._dateAdapter = _dateAdapter;
-        this._dir = _dir;
+    constructor() {
+        this._overlay = inject(Overlay);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._scrollStrategy = inject(MTX_DATETIMEPICKER_SCROLL_STRATEGY);
+        this._dateAdapter = inject(DatetimeAdapter, { optional: true });
+        this._dir = inject(Directionality, { optional: true });
         this._document = inject(DOCUMENT);
         this._injector = inject(Injector);
         /** Whether to show multi-year view. */
@@ -2524,7 +2634,7 @@ class MtxDatetimepicker {
                 isDialog ? 'cdk-overlay-dark-backdrop' : 'mat-overlay-transparent-backdrop',
                 this._backdropHarnessClass,
             ],
-            direction: this._dir,
+            direction: this._dir || undefined,
             scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),
             panelClass: `mtx-datetimepicker-${isDialog ? 'dialog' : 'popup'}`,
         })));
@@ -2640,10 +2750,10 @@ class MtxDatetimepicker {
             this._componentRef?.instance._assignActions(null, true);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepicker, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: MTX_DATETIMEPICKER_SCROLL_STRATEGY }, { token: i1.DatetimeAdapter, optional: true }, { token: i3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: MtxDatetimepicker, isStandalone: true, selector: "mtx-datetimepicker", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], calendarHeaderComponent: "calendarHeaderComponent", panelClass: "panelClass", opened: ["opened", "opened", booleanAttribute], color: "color", startAt: "startAt", type: "type", touchUi: ["touchUi", "touchUi", booleanAttribute], timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { selectedChanged: "selectedChanged", openedStream: "opened", closedStream: "closed", viewChanged: "viewChanged" }, exportAs: ["mtxDatetimepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.4", type: MtxDatetimepicker, isStandalone: true, selector: "mtx-datetimepicker", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], calendarHeaderComponent: "calendarHeaderComponent", panelClass: "panelClass", opened: ["opened", "opened", booleanAttribute], color: "color", startAt: "startAt", type: "type", touchUi: ["touchUi", "touchUi", booleanAttribute], timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { selectedChanged: "selectedChanged", openedStream: "opened", closedStream: "closed", viewChanged: "viewChanged" }, exportAs: ["mtxDatetimepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'mtx-datetimepicker',
@@ -2652,16 +2762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MTX_DATETIMEPICKER_SCROLL_STRATEGY]
-                }] }, { type: i1.DatetimeAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { multiYearSelector: [{
+        }], ctorParameters: () => [], propDecorators: { multiYearSelector: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], twelvehour: [{
@@ -2744,11 +2846,11 @@ class MtxDatetimepickerInputEvent {
 }
 /** Directive used to connect an input to a MtxDatetimepicker. */
 class MtxDatetimepickerInput {
-    constructor(_elementRef, _dateAdapter, _dateFormats, _formField) {
-        this._elementRef = _elementRef;
-        this._dateAdapter = _dateAdapter;
-        this._dateFormats = _dateFormats;
-        this._formField = _formField;
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._dateAdapter = inject(DatetimeAdapter, { optional: true });
+        this._dateFormats = inject(MTX_DATETIME_FORMATS, { optional: true });
+        this._formField = inject(MatFormField, { optional: true });
         /** Emits when a `change` event is fired on this `<input>`. */
         this.dateChange = new EventEmitter();
         /** Emits when an `input` event is fired on this `<input>`. */
@@ -2804,6 +2906,7 @@ class MtxDatetimepickerInput {
             this._maxValidator,
             this._filterValidator,
         ]);
+        const _dateAdapter = this._dateAdapter;
         if (!this._dateAdapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
@@ -3000,14 +3103,14 @@ class MtxDatetimepickerInput {
     getThemePalette() {
         return this._formField ? this._formField.color : undefined;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerInput, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }, { token: i2.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0", type: MtxDatetimepickerInput, isStandalone: true, selector: "input[mtxDatetimepicker]", inputs: { mtxDatetimepicker: "mtxDatetimepicker", mtxDatetimepickerFilter: "mtxDatetimepickerFilter", value: "value", min: "min", max: "max", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(_datetimepicker?.opened && _datetimepicker.id) || null", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.4", type: MtxDatetimepickerInput, isStandalone: true, selector: "input[mtxDatetimepicker]", inputs: { mtxDatetimepicker: "mtxDatetimepicker", mtxDatetimepickerFilter: "mtxDatetimepickerFilter", value: "value", min: "min", max: "max", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(_datetimepicker?.opened && _datetimepicker.id) || null", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
             MAT_DATETIMEPICKER_VALUE_ACCESSOR,
             MAT_DATETIMEPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxDatetimepickerInput },
         ], exportAs: ["mtxDatetimepickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mtxDatetimepicker]',
@@ -3028,18 +3131,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '(keydown)': '_onKeydown($event)',
                     },
                     exportAs: 'mtxDatetimepickerInput',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MTX_DATETIME_FORMATS]
-                }] }, { type: i2.MatFormField, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { dateChange: [{
+        }], ctorParameters: () => [], propDecorators: { dateChange: [{
                 type: Output
             }], dateInput: [{
                 type: Output
@@ -3060,14 +3153,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 /** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
 class MtxDatetimepickerToggleIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerToggleIcon, isStandalone: true, selector: "[mtxDatetimepickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxDatetimepickerToggleIcon, isStandalone: true, selector: "[mtxDatetimepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerToggleIcon]',
-                    standalone: true,
                 }]
         }] });
 class MtxDatetimepickerToggle {
@@ -3078,10 +3170,11 @@ class MtxDatetimepickerToggle {
     set disabled(value) {
         this._disabled = value;
     }
-    constructor(_intl, _changeDetectorRef, defaultTabIndex) {
-        this._intl = _intl;
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._intl = inject(MtxDatetimepickerIntl);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._stateChanges = Subscription.EMPTY;
+        const defaultTabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
         const parsedTabIndex = Number(defaultTabIndex);
         this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
     }
@@ -3115,10 +3208,10 @@ class MtxDatetimepickerToggle {
         this._stateChanges.unsubscribe();
         this._stateChanges = merge(this._intl.changes, datetimepickerDisabled, inputDisabled, datetimepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: MtxDatetimepickerIntl }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxDatetimepickerToggle, isStandalone: true, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n        </svg>\n      }\n      @case ('datetime') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n        </svg>\n      }\n      @default {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n        </svg>\n      }\n    }\n  }\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-app-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-app-on-surface-variant))}.cdk-high-contrast-active .mtx-datetimepicker-toggle-default-icon{color:CanvasText}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxDatetimepickerToggle, isStandalone: true, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n        </svg>\n      }\n      @case ('datetime') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n        </svg>\n      }\n      @default {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n        </svg>\n      }\n    }\n  }\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-datetimepicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-toggle', host: {
                         'class': 'mtx-datetimepicker-toggle',
@@ -3132,11 +3225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
                         // it so that the input doesn't get focused automatically by the form field (See #21836).
                         '(click)': '_open($event)',
-                    }, exportAs: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconButton], template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n        </svg>\n      }\n      @case ('datetime') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n        </svg>\n      }\n      @default {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n        </svg>\n      }\n    }\n  }\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-app-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-app-on-surface-variant))}.cdk-high-contrast-active .mtx-datetimepicker-toggle-default-icon{color:CanvasText}\n"] }]
-        }], ctorParameters: () => [{ type: MtxDatetimepickerIntl }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['tabindex']
-                }] }], propDecorators: { datetimepicker: [{
+                    }, exportAs: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n        </svg>\n      }\n      @case ('datetime') {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n        </svg>\n      }\n      @default {\n        <svg\n          class=\"mtx-datetimepicker-toggle-default-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n        </svg>\n      }\n    }\n  }\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-datetimepicker-toggle-default-icon{color:CanvasText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { datetimepicker: [{
                 type: Input,
                 args: ['for']
             }], tabIndex: [{
@@ -3159,54 +3249,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxDatetimepickerApply {
-    constructor(_datetimepicker) {
-        this._datetimepicker = _datetimepicker;
+    constructor() {
+        this._datetimepicker = inject(MtxDatetimepicker);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerApply, deps: [{ token: MtxDatetimepicker }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerApply, isStandalone: true, selector: "[mtxDatetimepickerApply]", host: { listeners: { "click": "_datetimepicker._selectManually()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxDatetimepickerApply, isStandalone: true, selector: "[mtxDatetimepickerApply]", host: { listeners: { "click": "_datetimepicker._selectManually()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerApply, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerApply, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerApply]',
                     host: { '(click)': '_datetimepicker._selectManually()' },
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: MtxDatetimepicker }] });
+        }], ctorParameters: () => [] });
 class MtxDatetimepickerCancel {
-    constructor(_datetimepicker) {
-        this._datetimepicker = _datetimepicker;
+    constructor() {
+        this._datetimepicker = inject(MtxDatetimepicker);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerCancel, deps: [{ token: MtxDatetimepicker }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerCancel, isStandalone: true, selector: "[mtxDatetimepickerCancel]", host: { listeners: { "click": "_datetimepicker.close()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxDatetimepickerCancel, isStandalone: true, selector: "[mtxDatetimepickerCancel]", host: { listeners: { "click": "_datetimepicker.close()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerCancel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerCancel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerCancel]',
                     host: { '(click)': '_datetimepicker.close()' },
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: MtxDatetimepicker }] });
+        }], ctorParameters: () => [] });
 class MtxDatetimepickerClear {
-    constructor(_datetimepicker) {
-        this._datetimepicker = _datetimepicker;
+    constructor() {
+        this._datetimepicker = inject(MtxDatetimepicker);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerClear, deps: [{ token: MtxDatetimepicker }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerClear, isStandalone: true, selector: "[mtxDatetimepickerClear]", host: { listeners: { "click": "_datetimepicker._clearSelected()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxDatetimepickerClear, isStandalone: true, selector: "[mtxDatetimepickerClear]", host: { listeners: { "click": "_datetimepicker._clearSelected()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerClear, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerClear, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxDatetimepickerClear]',
                     host: { '(click)': '_datetimepicker._clearSelected()' },
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: MtxDatetimepicker }] });
+        }], ctorParameters: () => [] });
 class MtxDatetimepickerActions {
-    constructor(_datetimepicker, _viewContainerRef) {
-        this._datetimepicker = _datetimepicker;
-        this._viewContainerRef = _viewContainerRef;
+    constructor() {
+        this._datetimepicker = inject(MtxDatetimepicker);
+        this._viewContainerRef = inject(ViewContainerRef);
     }
     ngAfterViewInit() {
         this._portal = new TemplatePortal(this._template, this._viewContainerRef);
@@ -3219,8 +3306,8 @@ class MtxDatetimepickerActions {
             this._portal?.detach();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerActions, deps: [{ token: MtxDatetimepicker }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerActions, isStandalone: true, selector: "mtx-datetimepicker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: MtxDatetimepickerActions, isStandalone: true, selector: "mtx-datetimepicker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
     <ng-template>
       <div class="mtx-datetimepicker-actions">
         <ng-content></ng-content>
@@ -3228,7 +3315,7 @@ class MtxDatetimepickerActions {
     </ng-template>
   `, isInline: true, styles: [".mtx-datetimepicker-actions{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px}.mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerActions, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-actions', template: `
     <ng-template>
@@ -3236,15 +3323,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         <ng-content></ng-content>
       </div>
     </ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, styles: [".mtx-datetimepicker-actions{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px}.mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
-        }], ctorParameters: () => [{ type: MtxDatetimepicker }, { type: i0.ViewContainerRef }], propDecorators: { _template: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".mtx-datetimepicker-actions{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px}.mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _template: [{
                 type: ViewChild,
                 args: [TemplateRef]
             }] } });
 
 class MtxDatetimepickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -3252,7 +3339,7 @@ class MtxDatetimepickerModule {
             MtxCalendar,
             MtxCalendarBody,
             MtxClock,
-            MtxTime,
+            MtxTimeView,
             MtxTimeInput,
             MtxDatetimepicker,
             MtxDatetimepickerToggle,
@@ -3268,7 +3355,7 @@ class MtxDatetimepickerModule {
             MtxDatetimepickerActions], exports: [MtxCalendar,
             MtxCalendarBody,
             MtxClock,
-            MtxTime,
+            MtxTimeView,
             MtxDatetimepicker,
             MtxDatetimepickerToggle,
             MtxDatetimepickerToggleIcon,
@@ -3281,17 +3368,17 @@ class MtxDatetimepickerModule {
             MtxDatetimepickerCancel,
             MtxDatetimepickerClear,
             MtxDatetimepickerActions] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerModule, providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerModule, providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
             MatButtonModule,
             MtxCalendar,
-            MtxTime,
+            MtxTimeView,
             MtxDatetimepickerToggle,
             MtxDatetimepickerContent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxDatetimepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3303,7 +3390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MtxCalendar,
                         MtxCalendarBody,
                         MtxClock,
-                        MtxTime,
+                        MtxTimeView,
                         MtxTimeInput,
                         MtxDatetimepicker,
                         MtxDatetimepickerToggle,
@@ -3322,7 +3409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MtxCalendar,
                         MtxCalendarBody,
                         MtxClock,
-                        MtxTime,
+                        MtxTimeView,
                         MtxDatetimepicker,
                         MtxDatetimepickerToggle,
                         MtxDatetimepickerToggleIcon,
@@ -3344,5 +3431,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CLOCK_INNER_RADIUS, CLOCK_OUTER_RADIUS, CLOCK_RADIUS, CLOCK_TICK_RADIUS, MAT_DATETIMEPICKER_VALIDATORS, MAT_DATETIMEPICKER_VALUE_ACCESSOR, MTX_DATETIMEPICKER_SCROLL_STRATEGY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxCalendar, MtxCalendarBody, MtxCalendarCell, MtxClock, MtxDatetimepicker, MtxDatetimepickerActions, MtxDatetimepickerApply, MtxDatetimepickerCancel, MtxDatetimepickerClear, MtxDatetimepickerContent, MtxDatetimepickerFilterType, MtxDatetimepickerInput, MtxDatetimepickerInputEvent, MtxDatetimepickerIntl, MtxDatetimepickerModule, MtxDatetimepickerToggle, MtxDatetimepickerToggleIcon, MtxMonthView, MtxMultiYearView, MtxTime, MtxTimeInput, MtxYearView, getActiveOffset, isSameMultiYearView, mtxDatetimepickerAnimations, yearsPerPage, yearsPerRow };
+export { CLOCK_INNER_RADIUS, CLOCK_OUTER_RADIUS, CLOCK_RADIUS, CLOCK_TICK_RADIUS, MAT_DATETIMEPICKER_VALIDATORS, MAT_DATETIMEPICKER_VALUE_ACCESSOR, MTX_DATETIMEPICKER_SCROLL_STRATEGY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxCalendar, MtxCalendarBody, MtxCalendarCell, MtxClock, MtxDatetimepicker, MtxDatetimepickerActions, MtxDatetimepickerApply, MtxDatetimepickerCancel, MtxDatetimepickerClear, MtxDatetimepickerContent, MtxDatetimepickerFilterType, MtxDatetimepickerInput, MtxDatetimepickerInputEvent, MtxDatetimepickerIntl, MtxDatetimepickerModule, MtxDatetimepickerToggle, MtxDatetimepickerToggleIcon, MtxMonthView, MtxMultiYearView, MtxTimeInput, MtxTimeView, MtxYearView, getActiveOffset, isSameMultiYearView, mtxDatetimepickerAnimations, yearsPerPage, yearsPerRow };
 //# sourceMappingURL=mtxDatetimepicker.mjs.map