@ng-matero/extensions 15.0.0 → 15.0.1

package/fesm2015/mtxDatetimepicker.mjs

@@ -442,6 +442,8 @@ class MtxClock {
         this.interval = 1;
         /** Whether the clock uses 12 hour format. */
         this.twelvehour = false;
+        /** Whether the time is now in AM or PM. */
+        this.AMPM = 'AM';
         /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
         /** Emits when any date is activated. */
@@ -525,16 +527,8 @@ class MtxClock {
         this._hourView = value !== 'minute';
     }
     get _hand() {
-        let hour = this._adapter.getHour(this.activeDate);
-        if (this.twelvehour) {
-            if (hour === 0) {
-                hour = 24;
-            }
-            this._selectedHour = hour > 12 ? hour - 12 : hour;
-        }
-        else {
-            this._selectedHour = hour;
-        }
+        const hour = this._adapter.getHour(this.activeDate);
+        this._selectedHour = hour;
         this._selectedMinute = this._adapter.getMinute(this.activeDate);
         let deg = 0;
         let radius = CLOCK_OUTER_RADIUS;
@@ -562,6 +556,9 @@ class MtxClock {
     ngOnDestroy() {
         this._removeGlobalEvents();
     }
+    ngOnChanges() {
+        this._init();
+    }
     /** Binds our global move and end events. */
     _bindGlobalEvents(triggerEvent) {
         // Note that we bind the events to the `document`, because it allows us to capture
@@ -592,20 +589,32 @@ class MtxClock {
         const hourNames = this._adapter.getHourNames();
         const minuteNames = this._adapter.getMinuteNames();
         if (this.twelvehour) {
-            for (let i = 1; i < hourNames.length / 2 + 1; i++) {
+            const hours = [];
+            for (let i = 0; i < hourNames.length; i++) {
                 const radian = (i / 6) * Math.PI;
                 const radius = CLOCK_OUTER_RADIUS;
-                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i + 1, 0);
-                const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate) >= 0) &&
-                    (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate) <= 0);
-                this._hours.push({
+                const hour = i;
+                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), hour, 0);
+                // Check if the date is enabled, no need to respect the minute setting here
+                const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate, false) >= 0) &&
+                    (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate, false) <= 0) &&
+                    (!this.dateFilter || this.dateFilter(date, MtxDatetimepickerFilterType.HOUR));
+                // display value for twelvehour clock should be from 1-12 not including 0 and not above 12
+                hours.push({
                     value: i,
-                    displayValue: i === 0 ? '00' : hourNames[i],
+                    displayValue: i % 12 === 0 ? '12' : hourNames[i % 12],
                     enabled,
                     top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
                     left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
                 });
             }
+            // filter out AM or PM hours based on AMPM
+            if (this.AMPM === 'AM') {
+                this._hours = hours.filter(x => x.value < 12);
+            }
+            else {
+                this._hours = hours.filter(x => x.value >= 12);
+            }
         }
         else {
             for (let i = 0; i < hourNames.length; i++) {
@@ -613,6 +622,7 @@ class MtxClock {
                 const outer = i > 0 && i < 13;
                 const radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
                 const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i, 0);
+                // Check if the date is enabled, no need to respect the minute setting here
                 const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate, false) >= 0) &&
                     (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate, false) <= 0) &&
                     (!this.dateFilter || this.dateFilter(date, MtxDatetimepickerFilterType.HOUR));
@@ -665,7 +675,14 @@ class MtxClock {
         let date;
         if (this._hourView) {
             if (this.twelvehour) {
-                value = value === 0 ? 12 : value;
+                if (this.AMPM === 'AM') {
+                    value = value === 0 ? 12 : value;
+                }
+                else {
+                    // if we chosen 12 in PM, the value should be 0 for 0:00,
+                    // else we can safely add 12 to the final value
+                    value = value === 12 ? 0 : value + 12;
+                }
             }
             else {
                 if (value === 12) {
@@ -691,7 +708,7 @@ class MtxClock {
     }
 }
 /** @nocollapse */ MtxClock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", 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: "15.0.2", 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;inset: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 });
+/** @nocollapse */ MtxClock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: MtxClock, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_pointerDown($event)", "touchstart": "_pointerDown($event)" }, classAttribute: "mtx-clock" }, exportAs: ["mtxClock"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div class=\"mtx-clock-hand\" [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;inset: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: "15.0.2", ngImport: i0, type: MtxClock, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-clock', host: {
@@ -711,6 +728,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 type: Input
             }], twelvehour: [{
                 type: Input
+            }], AMPM: [{
+                type: Input
             }], selectedChange: [{
                 type: Output
             }], activeDateChange: [{
@@ -1076,9 +1095,10 @@ class MtxTime {
             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 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;
             }
@@ -1110,9 +1130,10 @@ class MtxTime {
             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 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;
             }
@@ -1148,12 +1169,12 @@ class MtxTime {
     }
 }
 /** @nocollapse */ MtxTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", 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: "15.0.2", 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}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "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-flat-button],    button[mat-stroked-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 });
+/** @nocollapse */ MtxTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", 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           [AMPM]=\"AMPM\"\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}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "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-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", 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}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
+                    }, 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           [AMPM]=\"AMPM\"\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}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: MtxDatetimepickerIntl }]; }, propDecorators: { selectedChange: [{
                 type: Output
             }], activeDateChange: [{
@@ -1543,9 +1564,8 @@ class MtxCalendar {
         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
+     * 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;
@@ -1584,6 +1604,8 @@ class MtxCalendar {
     set _activeDate(value) {
         const oldActiveDate = this._clampedActiveDate;
         this._clampedActiveDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
+        // whenever active date changed, and possibly got clamped we should adjust the am/pm setting
+        this._selectAMPM(this._clampedActiveDate);
         if (oldActiveDate &&
             this._clampedActiveDate &&
             this.currentView === 'month' &&
@@ -1791,18 +1813,23 @@ class MtxCalendar {
         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') {
+        if (source === 'AM') {
             newHourValue = currentHour >= 12 ? this._adapter.getHour(this._activeDate) - 12 : 12;
         }
         // otherwise add 12 hours
         else {
             newHourValue = (currentHour + 12) % 24;
         }
-        this._activeDate = this._adapter.createDatetime(this._adapter.getYear(this._activeDate), this._adapter.getMonth(this._activeDate), this._adapter.getDate(this._activeDate), newHourValue, this._adapter.getMinute(this._activeDate));
+        const newActiveDate = this._adapter.clampDate(this._adapter.createDatetime(this._adapter.getYear(this._activeDate), this._adapter.getMonth(this._activeDate), this._adapter.getDate(this._activeDate), newHourValue, this._adapter.getMinute(this._activeDate)), this.minDate, this.maxDate);
+        // only if our clamped date is not changed, we know we can apply the newActiveDate to the
+        // activeDate
+        if (this._adapter.getHour(newActiveDate) === newHourValue) {
+            this._activeDate = newActiveDate;
+            this._AMPM = source;
+        }
     }
     _yearClicked() {
         if (this.type === 'year' || this.multiYearSelector) {
@@ -2020,16 +2047,12 @@ class MtxCalendar {
                     this._clockView === 'hour'
                         ? this._adapter.addCalendarHours(this._activeDate, 1)
                         : this._adapter.addCalendarMinutes(this._activeDate, this.timeInterval);
-                // if the hours changed the am/pm we should update the AM/PM
-                this._selectAMPM(this._activeDate);
                 break;
             case DOWN_ARROW:
                 this._activeDate =
                     this._clockView === 'hour'
                         ? this._adapter.addCalendarHours(this._activeDate, -1)
                         : this._adapter.addCalendarMinutes(this._activeDate, -this.timeInterval);
-                // if the hours changed the am/pm we should update the AM/PM
-                this._selectAMPM(this._activeDate);
                 break;
             case ENTER:
                 if (!this.timeInput) {
@@ -2071,7 +2094,7 @@ class MtxCalendar {
     }
 }
 /** @nocollapse */ MtxCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", 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: "15.0.2", 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{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year{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-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-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 });
+/** @nocollapse */ MtxCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", 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\" matButtonIcon iconPositionEnd\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                 [AMPM]=\"_AMPM\"\n                 [dateFilter]=\"dateFilter\"\n                 [interval]=\"timeInterval\"\n                 [maxDate]=\"maxDate\"\n                 [minDate]=\"minDate\"\n                 [selected]=\"_activeDate\"\n                 [startView]=\"_clockView\"\n                 [twelvehour]=\"twelvehour\">\n      </mtx-clock>\n    </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{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year{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-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "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: "15.0.2", ngImport: i0, type: MtxCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-calendar', host: {
@@ -2079,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         '[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  <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{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year{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"] }]
+                    }, 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\" matButtonIcon iconPositionEnd\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                 [AMPM]=\"_AMPM\"\n                 [dateFilter]=\"dateFilter\"\n                 [interval]=\"timeInterval\"\n                 [maxDate]=\"maxDate\"\n                 [minDate]=\"minDate\"\n                 [selected]=\"_activeDate\"\n                 [startView]=\"_clockView\"\n                 [twelvehour]=\"twelvehour\">\n      </mtx-clock>\n    </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{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year{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
@@ -2554,7 +2577,8 @@ class MtxDatetimepicker {
     /** Gets an observable that will emit when the overlay is supposed to be closed. */
     _getCloseStream(overlayRef) {
         return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter(event => {
-            // Closing on alt + up is only valid when there's an input associated with the datetimepicker.
+            // Closing on alt + up is only valid when there's an input associated with the
+            // datetimepicker.
             return ((event.keyCode === ESCAPE && !hasModifierKey(event)) ||
                 (this.datetimepickerInput &&
                     hasModifierKey(event, 'altKey') &&
@@ -3138,4 +3162,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
 
 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
-//# sourceMappingURL=mtxDatetimepicker.mjs.map