@ng-matero/extensions 14.5.0 → 14.6.1

package/fesm2020/mtxDatetimepicker.mjs

@@ -6,19 +6,18 @@ import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, InjectionToken, ViewChild, inject, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, Injectable, Directive, ElementRef, ViewChild, InjectionToken, inject, forwardRef, ContentChild, NgModule } from '@angular/core';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
+import { UP_ARROW, DOWN_ARROW, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { coerceNumberProperty, coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
 import { first, take, filter } from 'rxjs/operators';
 import * as i1 from '@ng-matero/extensions/core';
 import { MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
 import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
-import * as i1$1 from '@angular/material/datepicker';
-import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
-import { mixinColor } from '@angular/material/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
+import { normalizePassiveListenerOptions, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
+import { mixinColor } from '@angular/material/core';
 import * as i6 from '@angular/cdk/bidi';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
@@ -130,12 +129,12 @@ class MtxCalendarBody {
     }
 }
 /** @nocollapse */ MtxCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxCalendarBody, 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<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td [attr.colspan]=\"numCols\" class=\"mtx-calendar-body-label\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" 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  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      [attr.colspan]=\"_firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mtx-calendar-body-label\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\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      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      (click)=\"_cellClicked(item)\">\n    <div [attr.aria-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         class=\"mtx-calendar-body-cell-content\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[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-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ MtxCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxCalendarBody, 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<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" 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  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\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</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[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-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxCalendarBody, decorators: [{
             type: Component,
             args: [{ selector: '[mtx-calendar-body]', host: {
                         class: 'mtx-calendar-body',
-                    }, 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<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td [attr.colspan]=\"numCols\" class=\"mtx-calendar-body-label\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" 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  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      [attr.colspan]=\"_firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mtx-calendar-body-label\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\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      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      (click)=\"_cellClicked(item)\">\n    <div [attr.aria-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         class=\"mtx-calendar-body-cell-content\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[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-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
+                    }, 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<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" 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  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\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</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[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-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], rows: [{
@@ -362,6 +361,67 @@ function euclideanModulo(a, b) {
     return ((a % b) + b) % b;
 }
 
+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 */ MtxDatetimepickerIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ MtxDatetimepickerIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerIntl, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const activeEventOptions = normalizePassiveListenerOptions({ passive: false });
 const CLOCK_RADIUS = 50;
 const CLOCK_INNER_RADIUS = 27.5;
 const CLOCK_OUTER_RADIUS = 41.25;
@@ -371,9 +431,11 @@ const CLOCK_TICK_RADIUS = 7.0833;
  * @docs-private
  */
 class MtxClock {
-    constructor(_element, _adapter) {
-        this._element = _element;
+    constructor(_elementRef, _adapter, _changeDetectorRef, _document) {
+        this._elementRef = _elementRef;
         this._adapter = _adapter;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._document = _document;
         /** Step over minutes. */
         this.interval = 1;
         /** Whether the clock uses 12 hour format. */
@@ -384,17 +446,39 @@ class MtxClock {
         this.activeDateChange = new EventEmitter();
         /** Emits when any date is selected. */
         this._userSelection = new EventEmitter();
-        /** Hours and Minutes representing the clock view. */
-        this._hours = [];
-        this._minutes = [];
         /** Whether the clock is in hour view. */
         this._hourView = true;
+        this._hours = [];
+        this._minutes = [];
         this._timeChanged = false;
-        this.mouseMoveListener = (event) => {
-            this._handleMousemove(event);
+        /** Called when the user has put their pointer down on the clock. */
+        this._pointerDown = (event) => {
+            this._timeChanged = false;
+            this.setTime(event);
+            this._bindGlobalEvents(event);
         };
-        this.mouseUpListener = () => {
-            this._handleMouseup();
+        /**
+         * 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._hourView) {
+                    this._userSelection.emit();
+                }
+            }
         };
     }
     /**
@@ -464,39 +548,40 @@ class MtxClock {
             deg = Math.round(this._selectedMinute * (360 / 60));
         }
         return {
-            'transform': `rotate(${deg}deg)`,
-            'height': `${radius}%`,
-            'margin-top': `${50 - radius}%`,
+            height: `${radius}%`,
+            marginTop: `${50 - radius}%`,
+            transform: `rotate(${deg}deg)`,
         };
     }
     ngAfterContentInit() {
         this.activeDate = this._activeDate || this._adapter.today();
         this._init();
     }
-    /** Handles mousedown events on the clock body. */
-    _handleMousedown(event) {
-        this._timeChanged = false;
-        this.setTime(event);
-        document.addEventListener('mousemove', this.mouseMoveListener);
-        document.addEventListener('touchmove', this.mouseMoveListener);
-        document.addEventListener('mouseup', this.mouseUpListener);
-        document.addEventListener('touchend', this.mouseUpListener);
-    }
-    _handleMousemove(event) {
-        event.preventDefault();
-        this.setTime(event);
-    }
-    _handleMouseup() {
-        document.removeEventListener('mousemove', this.mouseMoveListener);
-        document.removeEventListener('touchmove', this.mouseMoveListener);
-        document.removeEventListener('mouseup', this.mouseUpListener);
-        document.removeEventListener('touchend', this.mouseUpListener);
-        if (this._timeChanged) {
-            this.selectedChange.emit(this.activeDate);
-            if (!this._hourView) {
-                this._userSelection.emit();
-            }
-        }
+    ngOnDestroy() {
+        this._removeGlobalEvents();
+    }
+    /** 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() {
@@ -559,12 +644,11 @@ class MtxClock {
      * @param event
      */
     setTime(event) {
-        const trigger = this._element.nativeElement;
+        const trigger = this._elementRef.nativeElement;
         const triggerRect = trigger.getBoundingClientRect();
         const width = trigger.offsetWidth;
         const height = trigger.offsetHeight;
-        const pageX = event.pageX !== undefined ? event.pageX : event.touches[0].pageX;
-        const pageY = event.pageY !== undefined ? event.pageY : event.touches[0].pageY;
+        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);
@@ -600,19 +684,24 @@ class MtxClock {
         }
         this._timeChanged = true;
         this.activeDate = date;
+        this._changeDetectorRef.markForCheck();
         this.activeDateChange.emit(this.activeDate);
     }
 }
-/** @nocollapse */ MtxClock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxClock, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxClock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxClock, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_handleMousedown($event)" }, properties: { "class.mtx-clock": "true" } }, exportAs: ["mtxClock"], ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div [ngStyle]=\"_hand\" class=\"mtx-clock-hand\"></div>\n  <div [class.active]=\"_hourView\" class=\"mtx-clock-hours\">\n    <div *ngFor=\"let item of _hours\"\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+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n  <div [class.active]=\"!_hourView\" class=\"mtx-clock-minutes\">\n    <div *ngFor=\"let item of _minutes\"\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+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.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}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ MtxClock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxClock, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxClock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxClock, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", 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"], ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [ngStyle]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    <div *ngFor=\"let item of _hours\"\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  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    <div *ngFor=\"let item of _minutes\"\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  </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}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.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}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxClock, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-clock', host: {
-                        '[class.mtx-clock]': 'true',
                         'role': 'clock',
-                        '(mousedown)': '_handleMousedown($event)',
-                    }, exportAs: 'mtxClock', encapsulation: ViewEncapsulation.None, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div [ngStyle]=\"_hand\" class=\"mtx-clock-hand\"></div>\n  <div [class.active]=\"_hourView\" class=\"mtx-clock-hours\">\n    <div *ngFor=\"let item of _hours\"\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+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n  <div [class.active]=\"!_hourView\" class=\"mtx-clock-minutes\">\n    <div *ngFor=\"let item of _minutes\"\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+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.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}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter }]; }, propDecorators: { dateFilter: [{
+                        '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\" [ngStyle]=\"_hand\"></div>\n  <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n    <div *ngFor=\"let item of _hours\"\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  </div>\n  <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n    <div *ngFor=\"let item of _minutes\"\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  </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}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.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}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { dateFilter: [{
                 type: Input
             }], interval: [{
                 type: Input
@@ -635,6 +724,469 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             }], 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;
+}
+
+function pad(num, size) {
+    num = String(num);
+    while (num.length < size)
+        num = '0' + num;
+    return num;
+}
+class MtxTimeInput {
+    constructor(element, cdr) {
+        this.element = element;
+        this.cdr = cdr;
+        this._interval = 1;
+        this._min = 0;
+        this._max = Infinity;
+        this.timeValueChanged = new EventEmitter();
+        this.keyDownListener = this.keyDownHandler.bind(this);
+        this.keyPressListener = this.keyPressHandler.bind(this);
+        this.inputEventListener = this.inputChangedHandler.bind(this);
+        this.inputElement.addEventListener('keydown', this.keyDownListener, {
+            passive: true,
+        });
+        // Do not passive since we want to be able to preventDefault()
+        this.inputElement.addEventListener('keypress', this.keyPressListener);
+        this.inputElement.addEventListener('input', this.inputEventListener, {
+            passive: true,
+        });
+    }
+    set timeInterval(value) {
+        this._interval = coerceNumberProperty(value);
+    }
+    set timeMin(value) {
+        this._min = coerceNumberProperty(value);
+    }
+    set timeMax(value) {
+        this._max = coerceNumberProperty(value);
+    }
+    set timeValue(value) {
+        this._value = coerceNumberProperty(value);
+        if (!this.hasFocus) {
+            this.writeValue(this._value);
+        }
+        this.writePlaceholder(this._value);
+    }
+    get hasFocus() {
+        return this.element.nativeElement && this.element?.nativeElement === document?.activeElement;
+    }
+    get inputElement() {
+        return this.element.nativeElement;
+    }
+    // We look here at the placeholder value, because we write '' into the value on focus
+    // placeholder should always be up to date with "currentValue"
+    get valid() {
+        // At the start _value is undefined therefore this would result in not valid and
+        // make a ugly warning border afterwards we can safely check
+        if (this._value) {
+            const currentValue = String(this.inputElement.value);
+            // It can be that currentValue is empty due to we removing the value on focus,
+            // if that is the case we should check previous value which should be in the placeholder
+            if (currentValue.length) {
+                return this._value == this.inputElement.value;
+            }
+            else {
+                return this._value == this.inputElement.placeholder;
+            }
+        }
+        return true;
+    }
+    get invalid() {
+        return !this.valid;
+    }
+    blur() {
+        this.writeValue(this._value);
+        this.writePlaceholder(this._value);
+        this.timeValueChanged.emit(this._value);
+    }
+    focus() {
+        this.writeValue('');
+    }
+    /**
+     * Write value to inputElement
+     * @param value NumberInput
+     */
+    writeValue(value) {
+        if (value !== '') {
+            this.inputElement.value = pad(value, 2);
+        }
+        else {
+            this.inputElement.value = '';
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Writes value to placeholder
+     * @param value NumberInput
+     */
+    writePlaceholder(value) {
+        this.inputElement.placeholder = pad(value, 2);
+        this.cdr.markForCheck();
+    }
+    keyDownHandler(event) {
+        if (String(this.inputElement.value).length > 0) {
+            let value = null;
+            if (event.keyCode === UP_ARROW) {
+                value = coerceNumberProperty(this._value);
+                value += this._interval;
+                event.stopPropagation();
+            }
+            else if (event.keyCode === DOWN_ARROW) {
+                value = coerceNumberProperty(this._value);
+                value -= this._interval;
+                event.stopPropagation();
+            }
+            // if value has changed
+            if (typeof value === 'number') {
+                this.writeValue(value);
+                this.writePlaceholder(value);
+                this.clampInputValue();
+                this.timeValueChanged.emit(this._value);
+            }
+        }
+    }
+    /**
+     * Prevent non number inputs in the inputElement with the exception of Enter/BackSpace
+     * @param event KeyboardEvent
+     */
+    keyPressHandler(event) {
+        const key = event?.key ?? null;
+        if (isNaN(Number(key)) && key !== 'Enter') {
+            event.preventDefault();
+        }
+    }
+    inputChangedHandler() {
+        this.clampInputValue();
+        this.timeValueChanged.emit(this._value);
+    }
+    clampInputValue() {
+        if (this.inputElement?.value === '') {
+            return;
+        }
+        const value = coerceNumberProperty(this.inputElement?.value ?? null);
+        if (value) {
+            const clampedValue = Math.min(Math.max(value, this._min), this._max);
+            if (clampedValue !== value) {
+                this.writeValue(clampedValue);
+                this.writePlaceholder(clampedValue);
+            }
+            this._value = clampedValue;
+        }
+    }
+    /**
+     * Remove event listeners on destruction
+     */
+    ngOnDestroy() {
+        this.inputElement.removeEventListener('keydown', this.keyDownListener);
+        this.inputElement.removeEventListener('keypress', this.keyPressListener);
+        this.inputElement.removeEventListener('input', this.inputEventListener);
+    }
+}
+/** @nocollapse */ MtxTimeInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxTimeInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ MtxTimeInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: MtxTimeInput, 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: "14.2.0", ngImport: i0, type: MtxTimeInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input.mtx-time-input',
+                    host: {
+                        '(blur)': 'blur($event)',
+                        '(focus)': 'focus($event)',
+                    },
+                    exportAs: 'mtxTimeInput',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { timeInterval: [{
+                type: Input,
+                args: ['timeInterval']
+            }], timeMin: [{
+                type: Input,
+                args: ['timeMin']
+            }], timeMax: [{
+                type: Input,
+                args: ['timeMax']
+            }], timeValue: [{
+                type: Input,
+                args: ['timeValue']
+            }], timeValueChanged: [{
+                type: Output
+            }] } });
+class MtxTime {
+    constructor(_adapter, _changeDetectorRef, _datetimepickerIntl) {
+        this._adapter = _adapter;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._datetimepickerIntl = _datetimepickerIntl;
+        /** Emits when the currently selected date changes. */
+        this.selectedChange = new EventEmitter();
+        /** Emits when any date changes. */
+        this.activeDateChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
+        /** Emits when AM/PM button are clicked. */
+        this.ampmChange = new EventEmitter();
+        /** Emits when AM/PM button are clicked. */
+        this.clockViewChange = new EventEmitter();
+        /** Step over minutes. */
+        this.interval = 1;
+        this._twelvehour = false;
+        /** Whether the time is now in AM or PM. */
+        this.AMPM = 'AM';
+        /** Whether the clock is in hour view. */
+        this._clockView = 'hour';
+        this.datetimepickerIntlChangesSubscription = this._datetimepickerIntl.changes.subscribe(() => {
+            this._changeDetectorRef.detectChanges();
+        });
+    }
+    /** Whether the clock uses 12 hour format. */
+    get twelvehour() {
+        return this._twelvehour;
+    }
+    set twelvehour(value) {
+        this._twelvehour = coerceBooleanProperty(value);
+    }
+    /**
+     * The date to display in this clock view.
+     */
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        this._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
+    }
+    /** 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. */
+    get clockView() {
+        return this._clockView;
+    }
+    set clockView(value) {
+        this._clockView = value;
+    }
+    get isHourView() {
+        return this._clockView === 'hour';
+    }
+    get isMinuteView() {
+        return this._clockView === 'hour';
+    }
+    get hour() {
+        if (!this.activeDate) {
+            if (this.twelvehour) {
+                return '12';
+            }
+            else {
+                return '00';
+            }
+        }
+        const hour = Number(this._adapter.getHour(this.activeDate));
+        if (!this.twelvehour) {
+            return this.prefixWithZero(hour);
+        }
+        if (hour === 0) {
+            return '12';
+        }
+        else {
+            return this.prefixWithZero(hour > 12 ? hour - 12 : hour);
+        }
+    }
+    get minute() {
+        if (this.activeDate) {
+            return this.prefixWithZero(this._adapter.getMinute(this.activeDate));
+        }
+        return '00';
+    }
+    prefixWithZero(value) {
+        if (value < 10) {
+            return '0' + String(value);
+        }
+        return String(value);
+    }
+    ngOnChanges(changes) {
+        // when clockView changes by input we should focus the correct input
+        if (changes.clockView) {
+            if (changes.clockView.currentValue !== changes.clockView.previousValue) {
+                this.focusInputElement();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.focusInputElement();
+    }
+    focusInputElement() {
+        if (this.clockView === 'hour') {
+            if (this.hourInputElement) {
+                this.hourInputElement.nativeElement.focus();
+            }
+        }
+        else {
+            if (this.minuteInputElement) {
+                this.minuteInputElement.nativeElement.focus();
+            }
+        }
+    }
+    handleHourInputChange(value) {
+        const hour = coerceNumberProperty(value);
+        if (hour || hour === 0) {
+            const newValue = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this.updateHourForAmPm(hour), this._adapter.getMinute(this.activeDate));
+            this._activeDate = this._adapter.clampDate(newValue, this.minDate, this.maxDate);
+            this.activeDateChange.emit(this.activeDate);
+            // If previously we did set [mtxValue]="13" and the input changed to 6, and the clamping will make it "13" again
+            // then the hourInputDirective will not have been updated since "13" === "13" same reference so no change detected
+            // by directly setting it within this handler, we handle this usecase
+            if (this.hourInputDirective) {
+                this.hourInputDirective.timeValue = this.hour;
+            }
+        }
+    }
+    updateHourForAmPm(value) {
+        if (!this.twelvehour) {
+            return value;
+        }
+        // value should be between 1-12
+        if (this.AMPM === 'AM') {
+            if (value === 0 || value === 12) {
+                return 0;
+            }
+            return value;
+        }
+        // PM
+        else {
+            if (value === 0 || value === 12) {
+                return 12;
+            }
+            // other cases, we should add 12 to the value aka 3:00 PM = 3 + 12 = 15:00
+            return value + 12;
+        }
+    }
+    handleMinuteInputChange(value) {
+        const minute = coerceNumberProperty(value);
+        if (minute || minute === 0) {
+            const newValue = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this._activeDate), minute);
+            this._activeDate = this._adapter.clampDate(newValue, this.minDate, this.maxDate);
+            this.activeDateChange.emit(this.activeDate);
+            // If previously we did set [mtxValue]="40" and the input changed to 30, and the clamping will make it "40" again
+            // then the minuteInputDirective will not have been updated since "40" === "40" same reference so no change detected
+            // by directly setting it within this handler, we handle this usecase
+            if (this.minuteInputDirective) {
+                this.minuteInputDirective.timeValue = this.minute;
+            }
+        }
+    }
+    handleFocus(clockView) {
+        this.clockView = clockView;
+        this.clockViewChange.emit(clockView);
+    }
+    _timeSelected(date) {
+        if (this.clockView === 'hour') {
+            this.clockView = 'minute';
+        }
+        this._activeDate = this.selected = date;
+    }
+    _onActiveDateChange(date) {
+        this._activeDate = date;
+        this.activeDateChange.emit(date);
+    }
+    handleOk() {
+        if (this._selected) {
+            this.selectedChange.emit(this._selected);
+        }
+        this._userSelection.emit();
+    }
+    handleCancel() {
+        this._userSelection.emit();
+    }
+    ngOnDestroy() {
+        if (this.datetimepickerIntlChangesSubscription) {
+            this.datetimepickerIntlChangesSubscription.unsubscribe();
+        }
+    }
+}
+/** @nocollapse */ MtxTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxTime, deps: [{ token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: MtxDatetimepickerIntl }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxTime, selector: "mtx-time", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", 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    <div *ngIf=\"twelvehour\" 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  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n           (activeDateChange)=\"_onActiveDateChange($event)\"\n           [dateFilter]=\"dateFilter\"\n           [interval]=\"interval\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n           [selected]=\"selected\"\n           [startView]=\"clockView\"\n           [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\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", 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-radius:8px;border:2px solid transparent;-webkit-appearance:none;appearance:none;outline:none}.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{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "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: "14.2.0", ngImport: i0, type: MtxTime, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-time', exportAs: 'mtxTime', host: {
+                        class: 'mtx-time',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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    <div *ngIf=\"twelvehour\" 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  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n           (activeDateChange)=\"_onActiveDateChange($event)\"\n           [dateFilter]=\"dateFilter\"\n           [interval]=\"interval\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n           [selected]=\"selected\"\n           [startView]=\"clockView\"\n           [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\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", 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-radius:8px;border:2px solid transparent;-webkit-appearance:none;appearance:none;outline:none}.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{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: MtxDatetimepickerIntl }]; }, propDecorators: { selectedChange: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], ampmChange: [{
+                type: Output
+            }], clockViewChange: [{
+                type: Output
+            }], dateFilter: [{
+                type: Input
+            }], interval: [{
+                type: Input
+            }], hourInputElement: [{
+                type: ViewChild,
+                args: ['hourInput', { read: (ElementRef) }]
+            }], hourInputDirective: [{
+                type: ViewChild,
+                args: ['hourInput', { read: MtxTimeInput }]
+            }], minuteInputElement: [{
+                type: ViewChild,
+                args: ['minuteInput', { read: (ElementRef) }]
+            }], minuteInputDirective: [{
+                type: ViewChild,
+                args: ['minuteInput', { read: MtxTimeInput }]
+            }], twelvehour: [{
+                type: Input
+            }], AMPM: [{
+                type: Input
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], clockView: [{
+                type: Input
+            }] } });
 
 const DAYS_PER_WEEK = 7;
 /**
@@ -910,7 +1462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
  * @docs-private
  */
 class MtxCalendar {
-    constructor(_elementRef, _intl, _ngZone, _adapter, _dateFormats, changeDetectorRef) {
+    constructor(_elementRef, _intl, _ngZone, _adapter, _dateFormats, _changeDetectorRef) {
         this._elementRef = _elementRef;
         this._intl = _intl;
         this._ngZone = _ngZone;
@@ -931,6 +1483,7 @@ class MtxCalendar {
         this._userSelection = new EventEmitter();
         this._clockView = 'hour';
         this._type = 'date';
+        this._timeInput = false;
         /** Date filter for the month and year views. */
         this._dateFilterForViews = (date) => {
             return (!!date &&
@@ -944,7 +1497,7 @@ class MtxCalendar {
         if (!this._dateFormats) {
             throw createMissingDateImplError('MTX_DATETIME_FORMATS');
         }
-        this._intlChanges = _intl.changes.subscribe(() => changeDetectorRef.markForCheck());
+        this._intlChanges = _intl.changes.subscribe(() => _changeDetectorRef.markForCheck());
     }
     /** Whether to show multi-year view. */
     get multiYearSelector() {
@@ -977,6 +1530,17 @@ class MtxCalendar {
     set startAt(value) {
         this._startAt = this._adapter.getValidDateOrNull(value);
     }
+    /**
+     * Whether the calendar is in time mode. In time mode the calendar clock gets time input elements rather then just clock
+     *
+     * When touchUi is enabled this will be disabled
+     */
+    get timeInput() {
+        return this._timeInput;
+    }
+    set timeInput(value) {
+        this._timeInput = coerceBooleanProperty(value);
+    }
     /** The currently selected date. */
     get selected() {
         return this._selected;
@@ -1028,11 +1592,7 @@ class MtxCalendar {
         this._currentView = view;
         this.viewChanged.emit(view);
     }
-    /** The label for the current calendar view. */
-    get _yearLabel() {
-        return this._adapter.getYearName(this._activeDate);
-    }
-    get _monthYearLabel() {
+    get _yearPeriodText() {
         if (this.currentView === 'multi-year') {
             // The offset from the active year to the "slot" for the starting year is the
             // *actual* first rendered year in the multi-year view, and the last year is
@@ -1048,7 +1608,15 @@ class MtxCalendar {
             ? this._adapter.getMonthNames('long')[this._adapter.getMonth(this._activeDate)]
             : this._adapter.getYearName(this._activeDate);
     }
-    get _dateLabel() {
+    get _yearButtonText() {
+        return this._adapter.getYearName(this._activeDate);
+    }
+    get _yearButtonLabel() {
+        return this.multiYearSelector
+            ? this._intl.switchToMultiYearViewLabel
+            : this._intl.switchToYearViewLabel;
+    }
+    get _dateButtonText() {
         switch (this.type) {
             case 'month':
                 return this._adapter.getMonthNames('long')[this._adapter.getMonth(this._activeDate)];
@@ -1056,7 +1624,10 @@ class MtxCalendar {
                 return this._adapter.format(this._activeDate, this._dateFormats.display.popupHeaderDateLabel);
         }
     }
-    get _hoursLabel() {
+    get _dateButtonLabel() {
+        return this._intl.switchToMonthViewLabel;
+    }
+    get _hoursButtonText() {
         let hour = this._adapter.getHour(this._activeDate);
         if (this.twelvehour) {
             if (hour === 0) {
@@ -1066,29 +1637,35 @@ class MtxCalendar {
         }
         return this._2digit(hour);
     }
-    get _minutesLabel() {
+    get _hourButtonLabel() {
+        return this._intl.switchToClockHourViewLabel;
+    }
+    get _minutesButtonText() {
         return this._2digit(this._adapter.getMinute(this._activeDate));
     }
-    get _ariaLabelNext() {
+    get _minuteButtonLabel() {
+        return this._intl.switchToClockMinuteViewLabel;
+    }
+    get _prevButtonLabel() {
         switch (this._currentView) {
             case 'month':
-                return this._intl.nextMonthLabel;
+                return this._intl.prevMonthLabel;
             case 'year':
-                return this._intl.nextYearLabel;
+                return this._intl.prevYearLabel;
             case 'multi-year':
-                return this._intl.nextMultiYearLabel;
+                return this._intl.prevMultiYearLabel;
             default:
                 return '';
         }
     }
-    get _ariaLabelPrev() {
+    get _nextButtonLabel() {
         switch (this._currentView) {
             case 'month':
-                return this._intl.prevMonthLabel;
+                return this._intl.nextMonthLabel;
             case 'year':
-                return this._intl.prevYearLabel;
+                return this._intl.nextYearLabel;
             case 'multi-year':
-                return this._intl.prevMultiYearLabel;
+                return this._intl.nextMultiYearLabel;
             default:
                 return '';
         }
@@ -1155,6 +1732,12 @@ class MtxCalendar {
         }
     }
     _timeSelected(date) {
+        this._activeDate = this._updateDate(date);
+        if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
+            this.selectedChange.emit(date);
+        }
+    }
+    _dialTimeSelected(date) {
         if (this._clockView !== 'minute') {
             this._activeDate = this._updateDate(date);
             this._clockView = 'minute';
@@ -1183,7 +1766,8 @@ class MtxCalendar {
         return date;
     }
     _selectAMPM(date) {
-        if (this._adapter.getHour(date) > 11) {
+        const hour = this._adapter.getHour(date);
+        if (hour > 11) {
             this._AMPM = 'PM';
         }
         else {
@@ -1191,16 +1775,22 @@ class MtxCalendar {
         }
     }
     _ampmClicked(source) {
+        this._currentView = 'clock';
         if (source === this._AMPM) {
             return;
         }
         this._AMPM = source;
+        // if AMPM changed from PM to AM substract 12 hours
+        const currentHour = this._adapter.getHour(this._activeDate);
+        let newHourValue;
         if (this._AMPM === 'AM') {
-            this._activeDate = this._adapter.addCalendarHours(this._activeDate, -12);
+            newHourValue = currentHour >= 12 ? this._adapter.getHour(this._activeDate) - 12 : 12;
         }
+        // otherwise add 12 hours
         else {
-            this._activeDate = this._adapter.addCalendarHours(this._activeDate, 12);
+            newHourValue = (currentHour + 12) % 24;
         }
+        this._activeDate = this._adapter.createDatetime(this._adapter.getYear(this._activeDate), this._adapter.getMonth(this._activeDate), this._adapter.getDate(this._activeDate), newHourValue, this._adapter.getMinute(this._activeDate));
     }
     _yearClicked() {
         if (this.type === 'year' || this.multiYearSelector) {
@@ -1417,16 +2007,22 @@ class MtxCalendar {
                 this._activeDate =
                     this._clockView === 'hour'
                         ? this._adapter.addCalendarHours(this._activeDate, 1)
-                        : this._adapter.addCalendarMinutes(this._activeDate, 1);
+                        : this._adapter.addCalendarMinutes(this._activeDate, this.timeInterval);
+                // if the hours changed the am/pm we should update the AM/PM
+                this._selectAMPM(this._activeDate);
                 break;
             case DOWN_ARROW:
                 this._activeDate =
                     this._clockView === 'hour'
                         ? this._adapter.addCalendarHours(this._activeDate, -1)
-                        : this._adapter.addCalendarMinutes(this._activeDate, -1);
+                        : this._adapter.addCalendarMinutes(this._activeDate, -this.timeInterval);
+                // if the hours changed the am/pm we should update the AM/PM
+                this._selectAMPM(this._activeDate);
                 break;
             case ENTER:
-                this._timeSelected(this._activeDate);
+                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.
@@ -1462,16 +2058,17 @@ class MtxCalendar {
         return ('00' + n).slice(-2);
     }
 }
-/** @nocollapse */ MtxCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxCalendar, deps: [{ token: i0.ElementRef }, { token: i1$1.MatDatepickerIntl }, { token: i0.NgZone }, { token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxCalendar, selector: "mtx-calendar", inputs: { multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, classAttribute: "mtx-calendar" }, exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\" *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\" role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span class=\"mtx-calendar-header-hour-minute-container\">\n        <span (click)=\"_hoursClicked()\"\n              [class.active]=\"_clockView === 'hour'\"\n              class=\"mtx-calendar-header-hours\"\n              role=\"button\">{{ _hoursLabel }}</span>\n        <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n        <span (click)=\"_minutesClicked()\"\n              [class.active]=\"_clockView === 'minute'\"\n              class=\"mtx-calendar-header-minutes\"\n              role=\"button\">{{ _minutesLabel }}</span>\n      </span>\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\" role=\"button\">AM</span>\n        <span (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\" role=\"button\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div [@slideCalendar]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\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</div>\n", styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;white-space:nowrap}.mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-year+.mtx-calendar-header-date-time{margin-top:4px}.mtx-calendar-header-date-time{line-height:36px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.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){cursor:pointer;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{cursor:pointer;opacity:1}[mode=landscape] .mtx-calendar-header-time{display:flex;flex-direction:column}.mtx-calendar-header-hour-minute-container{padding:0 8px}[mode=landscape] .mtx-calendar-header-hour-minute-container{padding:0}.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}[mode=landscape] .mtx-calendar-header-ampm-container{flex-direction:row}[mode=landscape] .mtx-calendar-header-ampm{padding:4px}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;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}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.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}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:flex;flex-direction:column}.mtx-calendar[mode=auto] .mtx-calendar-header-hour-minute-container{padding:0}.mtx-calendar[mode=auto] .mtx-calendar-header-ampm-container{flex-direction:row}.mtx-calendar[mode=auto] .mtx-calendar-header-ampm{padding:4px}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { 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"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ MtxCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.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 */ MtxCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxCalendar, selector: "mtx-calendar", inputs: { multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", timeInput: "timeInput", 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  <button *ngIf=\"type !== 'time'\"\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    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </button>\n  <div *ngIf=\"type !== 'year'\" class=\"mtx-calendar-header-date-time\">\n    <button *ngIf=\"type !== 'time'\"\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    <span *ngIf=\"type.endsWith('time')\" class=\"mtx-calendar-header-time\"\n          [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      <span *ngIf=\"twelvehour\" 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    </span>\n  </div>\n</div>\n\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       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\"></path>\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\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view *ngSwitchCase=\"'month'\"\n                  (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view *ngSwitchCase=\"'year'\"\n                 (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view *ngSwitchCase=\"'multi-year'\"\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  <ng-container *ngSwitchDefault>\n    <mtx-time *ngIf=\"timeInput; else clock\"\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    </mtx-time>\n\n    <ng-template #clock>\n      <mtx-clock (_userSelection)=\"_userSelected()\"\n                 (activeDateChange)=\"_onActiveDateChange($event)\"\n                 (selectedChange)=\"_dialTimeSelected($event)\"\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    </ng-template>\n  </ng-container>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0}.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{min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;font-size:inherit;font-weight:inherit;white-space:normal;word-break:break-word}.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:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-radius:0 4px 4px 0}[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}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-radius:0 4px 4px 0}[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}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;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}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.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}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "component", type: MtxTime, selector: "mtx-time", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }, { 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"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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, template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\" *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\" role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span class=\"mtx-calendar-header-hour-minute-container\">\n        <span (click)=\"_hoursClicked()\"\n              [class.active]=\"_clockView === 'hour'\"\n              class=\"mtx-calendar-header-hours\"\n              role=\"button\">{{ _hoursLabel }}</span>\n        <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n        <span (click)=\"_minutesClicked()\"\n              [class.active]=\"_clockView === 'minute'\"\n              class=\"mtx-calendar-header-minutes\"\n              role=\"button\">{{ _minutesLabel }}</span>\n      </span>\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\" role=\"button\">AM</span>\n        <span (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\" role=\"button\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div [@slideCalendar]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\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</div>\n", styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;white-space:nowrap}.mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-year+.mtx-calendar-header-date-time{margin-top:4px}.mtx-calendar-header-date-time{line-height:36px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.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){cursor:pointer;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{cursor:pointer;opacity:1}[mode=landscape] .mtx-calendar-header-time{display:flex;flex-direction:column}.mtx-calendar-header-hour-minute-container{padding:0 8px}[mode=landscape] .mtx-calendar-header-hour-minute-container{padding:0}.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}[mode=landscape] .mtx-calendar-header-ampm-container{flex-direction:row}[mode=landscape] .mtx-calendar-header-ampm{padding:4px}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;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}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.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}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:flex;flex-direction:column}.mtx-calendar[mode=auto] .mtx-calendar-header-hour-minute-container{padding:0}.mtx-calendar[mode=auto] .mtx-calendar-header-ampm-container{flex-direction:row}.mtx-calendar[mode=auto] .mtx-calendar-header-ampm{padding:4px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.MatDatepickerIntl }, { type: i0.NgZone }, { type: i1.DatetimeAdapter, decorators: [{
+                    }, exportAs: 'mtxCalendar', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mtx-calendar-header\">\n  <button *ngIf=\"type !== 'time'\"\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    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </button>\n  <div *ngIf=\"type !== 'year'\" class=\"mtx-calendar-header-date-time\">\n    <button *ngIf=\"type !== 'time'\"\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    <span *ngIf=\"type.endsWith('time')\" class=\"mtx-calendar-header-time\"\n          [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      <span *ngIf=\"twelvehour\" 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    </span>\n  </div>\n</div>\n\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       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\"></path>\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\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view *ngSwitchCase=\"'month'\"\n                  (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view *ngSwitchCase=\"'year'\"\n                 (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view *ngSwitchCase=\"'multi-year'\"\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  <ng-container *ngSwitchDefault>\n    <mtx-time *ngIf=\"timeInput; else clock\"\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    </mtx-time>\n\n    <ng-template #clock>\n      <mtx-clock (_userSelection)=\"_userSelected()\"\n                 (activeDateChange)=\"_onActiveDateChange($event)\"\n                 (selectedChange)=\"_dialTimeSelected($event)\"\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    </ng-template>\n  </ng-container>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0}.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{min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;font-size:inherit;font-weight:inherit;white-space:normal;word-break:break-word}.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:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-radius:0 4px 4px 0}[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}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:150px;min-width:150px;padding:16px 8px;border-radius:4px 0 0 4px}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-radius:0 4px 4px 0}[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}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;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}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MtxDatetimepickerIntl }, { type: i0.NgZone }, { type: i1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -1500,6 +2097,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }], startAt: [{
                 type: Input
+            }], timeInput: [{
+                type: Input
             }], selected: [{
                 type: Input
             }], minDate: [{
@@ -1540,6 +2139,8 @@ class MtxDatetimepickerContent extends _MtxDatetimepickerContentBase {
         this._changeDetectorRef = _changeDetectorRef;
         /** Emits when an animation has finished. */
         this._animationDone = new Subject();
+        /** Id of the label for the `role="dialog"` element. */
+        this._dialogLabelId = null;
     }
     ngOnInit() {
         this._animationState = this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';
@@ -1556,7 +2157,7 @@ class MtxDatetimepickerContent extends _MtxDatetimepickerContentBase {
     }
 }
 /** @nocollapse */ MtxDatetimepickerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerContent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxDatetimepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxDatetimepickerContent, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "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 }], usesInheritance: true, ngImport: i0, template: "<div cdkTrapFocus\n     class=\"mtx-datetimepicker-content-container\"\n     [attr.mode]=\"datetimepicker.mode\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"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                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [@fadeInCalendar]=\"'enter'\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\">\n  </mtx-calendar>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar[mode=landscape]{width:446px;height:328px}@media all and (orientation: landscape){.mtx-datetimepicker-content .mtx-calendar[mode=auto]{width:446px;height:328px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;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}@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=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.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=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }], animations: [
+/** @nocollapse */ MtxDatetimepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxDatetimepickerContent, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "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 }], usesInheritance: 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  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"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                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:446px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:412px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:446px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:412px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;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}@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=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.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=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "type", "startAt", "timeInput", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }], animations: [
         mtxDatetimepickerAnimations.transformPanel,
         mtxDatetimepickerAnimations.fadeInCalendar,
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1571,7 +2172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                     }, animations: [
                         mtxDatetimepickerAnimations.transformPanel,
                         mtxDatetimepickerAnimations.fadeInCalendar,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], template: "<div cdkTrapFocus\n     class=\"mtx-datetimepicker-content-container\"\n     [attr.mode]=\"datetimepicker.mode\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"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                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [@fadeInCalendar]=\"'enter'\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\">\n  </mtx-calendar>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar[mode=landscape]{width:446px;height:328px}@media all and (orientation: landscape){.mtx-datetimepicker-content .mtx-calendar[mode=auto]{width:446px;height:328px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;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}@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=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.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=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], 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  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"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                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:446px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:412px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:446px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:412px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;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}@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=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.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=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _calendar: [{
                 type: ViewChild,
                 args: [MtxCalendar, { static: true }]
@@ -1617,8 +2218,9 @@ class MtxDatetimepicker {
         /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
         this._backdropHarnessClass = `${this.id}-backdrop`;
         this._inputStateChanges = Subscription.EMPTY;
-        this._type = 'date';
+        this._type = 'datetime';
         this._touchUi = false;
+        this._timeInput = false;
         /** Preferred position of the datetimepicker in the X axis. */
         this.xPosition = 'start';
         /** Preferred position of the datetimepicker in the Y axis. */
@@ -1681,7 +2283,7 @@ class MtxDatetimepicker {
         return this._type;
     }
     set type(value) {
-        this._type = value || 'date';
+        this._type = value || 'datetime';
     }
     /**
      * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
@@ -1693,6 +2295,16 @@ class MtxDatetimepicker {
     set touchUi(value) {
         this._touchUi = coerceBooleanProperty(value);
     }
+    /**
+     * Whether the calendar is in time mode. In time mode the calendar clock gets time input
+     * elements rather then just clock. When `touchUi` is enabled this will be disabled.
+     */
+    get timeInput() {
+        return this._timeInput && !this.touchUi;
+    }
+    set timeInput(value) {
+        this._timeInput = coerceBooleanProperty(value);
+    }
     /** Whether the datetimepicker pop-up should be disabled. */
     get disabled() {
         return this._disabled === undefined && this.datetimepickerInput
@@ -1828,6 +2440,7 @@ class MtxDatetimepicker {
     _forwardContentValues(instance) {
         instance.datetimepicker = this;
         instance.color = this.color;
+        instance._dialogLabelId = this.datetimepickerInput.getOverlayLabelId();
     }
     /** Opens the overlay with the calendar. */
     _openOverlay() {
@@ -1936,7 +2549,7 @@ class MtxDatetimepicker {
     }
 }
 /** @nocollapse */ MtxDatetimepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepicker, deps: [{ token: i4$1.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: MTX_DATETIMEPICKER_SCROLL_STRATEGY }, { token: i1.DatetimeAdapter, optional: true }, { token: i6.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxDatetimepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxDatetimepicker, selector: "mtx-datetimepicker", inputs: { multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: "preventSameDateTimeSelection", panelClass: "panelClass", opened: "opened", color: "color", startAt: "startAt", type: "type", touchUi: "touchUi", disabled: "disabled", xPosition: "xPosition", yPosition: "yPosition", restoreFocus: "restoreFocus" }, 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 */ MtxDatetimepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxDatetimepicker, selector: "mtx-datetimepicker", inputs: { multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: "preventSameDateTimeSelection", panelClass: "panelClass", opened: "opened", color: "color", startAt: "startAt", type: "type", touchUi: "touchUi", timeInput: "timeInput", disabled: "disabled", xPosition: "xPosition", yPosition: "yPosition", restoreFocus: "restoreFocus" }, 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: "14.2.0", ngImport: i0, type: MtxDatetimepicker, decorators: [{
             type: Component,
             args: [{
@@ -1988,6 +2601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }], touchUi: [{
                 type: Input
+            }], timeInput: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], xPosition: [{
@@ -2391,8 +3006,8 @@ class MtxDatetimepickerToggle {
         ]).subscribe(() => this._changeDetectorRef.markForCheck());
     }
 }
-/** @nocollapse */ MtxDatetimepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: i1$1.MatDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxDatetimepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxDatetimepickerToggle, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "focus": "_button.focus()" }, properties: { "attr.tabindex": "disabled ? null : -1", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"" }, 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]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\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\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\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\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\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\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ MtxDatetimepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: MtxDatetimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxDatetimepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MtxDatetimepickerToggle, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "focus": "_button.focus()" }, properties: { "attr.tabindex": "disabled ? null : -1", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"" }, 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        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\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\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\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\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\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\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-toggle', host: {
@@ -2404,12 +3019,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                         '[class.mat-accent]': 'datetimepicker && datetimepicker.color === "accent"',
                         '[class.mat-warn]': 'datetimepicker && datetimepicker.color === "warn"',
                         '(focus)': '_button.focus()',
-                    }, exportAs: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\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\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\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\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\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\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDatepickerIntl }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { datetimepicker: [{
+                    }, exportAs: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, 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        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\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\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\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\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\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\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: MtxDatetimepickerIntl }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { datetimepicker: [{
                 type: Input,
                 args: ['for']
             }], tabIndex: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
             }], disabled: [{
                 type: Input
             }], disableRipple: [{
@@ -2428,6 +3046,8 @@ class MtxDatetimepickerModule {
 /** @nocollapse */ MtxDatetimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: MtxDatetimepickerModule, declarations: [MtxCalendar,
         MtxCalendarBody,
         MtxClock,
+        MtxTime,
+        MtxTimeInput,
         MtxDatetimepicker,
         MtxDatetimepickerToggle,
         MtxDatetimepickerToggleIcon,
@@ -2438,6 +3058,7 @@ class MtxDatetimepickerModule {
         MtxMultiYearView], imports: [CommonModule, MatButtonModule, OverlayModule, A11yModule, PortalModule], exports: [MtxCalendar,
         MtxCalendarBody,
         MtxClock,
+        MtxTime,
         MtxDatetimepicker,
         MtxDatetimepickerToggle,
         MtxDatetimepickerToggleIcon,
@@ -2455,6 +3076,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                         MtxCalendar,
                         MtxCalendarBody,
                         MtxClock,
+                        MtxTime,
+                        MtxTimeInput,
                         MtxDatetimepicker,
                         MtxDatetimepickerToggle,
                         MtxDatetimepickerToggleIcon,
@@ -2468,6 +3091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                         MtxCalendar,
                         MtxCalendarBody,
                         MtxClock,
+                        MtxTime,
                         MtxDatetimepicker,
                         MtxDatetimepickerToggle,
                         MtxDatetimepickerToggleIcon,
@@ -2485,5 +3109,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.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, MtxDatetimepickerContent, MtxDatetimepickerFilterType, MtxDatetimepickerInput, MtxDatetimepickerInputEvent, MtxDatetimepickerModule, MtxDatetimepickerToggle, MtxDatetimepickerToggleIcon, MtxMonthView, MtxMultiYearView, 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, MtxDatetimepickerContent, MtxDatetimepickerFilterType, MtxDatetimepickerInput, MtxDatetimepickerInputEvent, MtxDatetimepickerModule, MtxDatetimepickerToggle, MtxDatetimepickerToggleIcon, MtxMonthView, MtxMultiYearView, MtxTime, MtxTimeInput, MtxYearView, getActiveOffset, isSameMultiYearView, mtxDatetimepickerAnimations, yearsPerPage, yearsPerRow };
 //# sourceMappingURL=mtxDatetimepicker.mjs.map