@ptsecurity/mosaic 14.6.2 → 14.7.1

package/fesm2020/ptsecurity-mosaic-datepicker.mjs

@@ -1,27 +1,30 @@
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i3 from '@angular/cdk/overlay';
+import * as i3$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i4 from '@angular/cdk/portal';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Injectable, Optional, Inject, ViewChild, InjectionToken, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
-import * as i8 from '@ptsecurity/mosaic/button';
+import * as i3 from '@ptsecurity/mosaic/button';
 import { McButtonModule } from '@ptsecurity/mosaic/button';
-import * as i9 from '@ptsecurity/mosaic/icon';
+import * as i7 from '@ptsecurity/mosaic/icon';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
-import { take } from 'rxjs/operators';
+import * as i5 from '@ptsecurity/mosaic/select';
+import { McSelectModule } from '@ptsecurity/mosaic/select';
 import * as i1$1 from '@ptsecurity/cdk/datetime';
 import { MC_DATE_FORMATS } from '@ptsecurity/cdk/datetime';
+import * as i4 from '@ptsecurity/mosaic/form-field';
+import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
+import * as i6 from '@ptsecurity/mosaic/core';
+import { validationTooltipShowDelay, validationTooltipHideDelay } from '@ptsecurity/mosaic/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
-import * as i2 from '@angular/cdk/bidi';
-import { SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, TAB, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE } from '@ptsecurity/cdk/keycodes';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
-import { validationTooltipShowDelay, validationTooltipHideDelay } from '@ptsecurity/mosaic/core';
-import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
+import { TAB, SPACE, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE } from '@ptsecurity/cdk/keycodes';
 import '@ptsecurity/mosaic/tooltip';
+import * as i5$1 from '@angular/cdk/bidi';
+import { take } from 'rxjs/operators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 // tslint:disable:no-magic-numbers
@@ -30,10 +33,9 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
  * @docs-private
  */
 class McCalendarCell {
-    constructor(value, displayValue, ariaLabel, enabled, cssClasses) {
+    constructor(value, displayValue, enabled, cssClasses) {
         this.value = value;
         this.displayValue = displayValue;
-        this.ariaLabel = ariaLabel;
         this.enabled = enabled;
         this.cssClasses = cssClasses;
     }
@@ -43,9 +45,7 @@ class McCalendarCell {
  * @docs-private
  */
 class McCalendarBody {
-    constructor(elementRef, ngZone) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
+    constructor() {
         /** The number of columns in the table. */
         this.numCols = 7;
         /** The cell number of the active cell in the table. */
@@ -85,30 +85,15 @@ class McCalendarBody {
         }
         return cellNumber === this.activeCell;
     }
-    /** Focuses the active cell after the microtask queue is empty. */
-    focusActiveCell() {
-        this.ngZone.runOutsideAngular(() => {
-            this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
-                const activeCell = this.elementRef.nativeElement.querySelector('.mc-calendar__body_active');
-                if (activeCell) {
-                    activeCell.focus();
-                }
-            });
-        });
-    }
 }
-/** @nocollapse */ McCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarBody, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", cellAspectRatio: "cellAspectRatio" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { attributes: { "role": "grid", "aria-readonly": "true" }, classAttribute: "mc-calendar__body" }, exportAs: ["mcCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"firstRowOffset < labelMinRequiredCells\">\n    <td class=\"mc-calendar__body-label\" [attr.colspan]=\"numCols\">\n        {{ label }}\n    </td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\n    <!--\n      We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n      The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n      percentage of the width (a variant of the trick described here:\n      https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n        class=\"mc-calendar__body-label\"\n        [attr.colspan]=\"firstRowOffset\">\n        {{ firstRowOffset >= labelMinRequiredCells ? label : '' }}\n    </td>\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"mc-calendar__body-cell\"\n        [ngClass]=\"item.cssClasses!\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.mc-calendar__body_disabled]=\"!item.enabled\"\n        [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n        (click)=\"cellClicked(item)\"\n        [style.width]=\"cellWidth\"\n        [style.paddingTop]=\"cellPadding\"\n        [style.paddingBottom]=\"cellPadding\">\n        <div class=\"mc-calendar__body-cell-content\"\n             [class.mc-selected]=\"selectedValue === item.value\"\n             [class.mc-calendar__body-today]=\"todayValue === item.value\">\n            {{ item.displayValue }}\n        </div>\n    </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-label{text-align:left;padding:8px 28px 12px 12px;padding:var(--mc-datepicker-body-size-label-paddings, 8px 28px 12px 12px)}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}.cdk-high-contrast-active .mc-calendar__body-cell-content{border:none}.cdk-high-contrast-active :host .mc-calendar__body-cell-content{border:none}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}mc-multi-year-view .mc-calendar__body-cell-content,mc-year-view .mc-calendar__body-cell-content{justify-content:center}.cdk-high-contrast-active .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active .mc-selected{outline:solid 1px}.cdk-high-contrast-active .mc-calendar__body-today{outline:dotted 1px}.cdk-high-contrast-active :host .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active :host .mc-selected{outline:solid 1px}.cdk-high-contrast-active :host .mc-calendar__body-today{outline:dotted 1px}[dir=rtl] .mc-calendar__body-label{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ McCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: { rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", cellAspectRatio: "cellAspectRatio" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mc-calendar__body" }, exportAs: ["mcCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\n    <!--\n      We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n      The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n      percentage of the width (a variant of the trick described here:\n      https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n        class=\"mc-calendar__body-label\"\n        [attr.colspan]=\"firstRowOffset\">\n    </td>\n\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"mc-calendar__body-cell\"\n        [ngClass]=\"item.cssClasses!\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.mc-calendar__body_disabled]=\"!item.enabled\"\n        [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n        (click)=\"cellClicked(item)\"\n        [style.width]=\"cellWidth\"\n        [style.paddingTop]=\"cellPadding\"\n        [style.paddingBottom]=\"cellPadding\">\n        <div class=\"mc-calendar__body-cell-content\"\n             [class.mc-selected]=\"selectedValue === item.value\"\n             [class.mc-calendar__body-today]=\"todayValue === item.value\">\n            {{ item.displayValue }}\n        </div>\n    </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarBody, decorators: [{
             type: Component,
             args: [{ selector: '[mc-calendar-body]', exportAs: 'mcCalendarBody', host: {
-                        class: 'mc-calendar__body',
-                        role: 'grid',
-                        'aria-readonly': 'true'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"firstRowOffset < labelMinRequiredCells\">\n    <td class=\"mc-calendar__body-label\" [attr.colspan]=\"numCols\">\n        {{ label }}\n    </td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\n    <!--\n      We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n      The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n      percentage of the width (a variant of the trick described here:\n      https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n        class=\"mc-calendar__body-label\"\n        [attr.colspan]=\"firstRowOffset\">\n        {{ firstRowOffset >= labelMinRequiredCells ? label : '' }}\n    </td>\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"mc-calendar__body-cell\"\n        [ngClass]=\"item.cssClasses!\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.mc-calendar__body_disabled]=\"!item.enabled\"\n        [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n        (click)=\"cellClicked(item)\"\n        [style.width]=\"cellWidth\"\n        [style.paddingTop]=\"cellPadding\"\n        [style.paddingBottom]=\"cellPadding\">\n        <div class=\"mc-calendar__body-cell-content\"\n             [class.mc-selected]=\"selectedValue === item.value\"\n             [class.mc-calendar__body-today]=\"todayValue === item.value\">\n            {{ item.displayValue }}\n        </div>\n    </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-label{text-align:left;padding:8px 28px 12px 12px;padding:var(--mc-datepicker-body-size-label-paddings, 8px 28px 12px 12px)}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}.cdk-high-contrast-active .mc-calendar__body-cell-content{border:none}.cdk-high-contrast-active :host .mc-calendar__body-cell-content{border:none}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}mc-multi-year-view .mc-calendar__body-cell-content,mc-year-view .mc-calendar__body-cell-content{justify-content:center}.cdk-high-contrast-active .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active .mc-selected{outline:solid 1px}.cdk-high-contrast-active .mc-calendar__body-today{outline:dotted 1px}.cdk-high-contrast-active :host .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active :host .mc-selected{outline:solid 1px}.cdk-high-contrast-active :host .mc-calendar__body-today{outline:dotted 1px}[dir=rtl] .mc-calendar__body-label{text-align:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { label: [{
-                type: Input
-            }], rows: [{
+                        class: 'mc-calendar__body'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\n    <!--\n      We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n      The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n      percentage of the width (a variant of the trick described here:\n      https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n    -->\n    <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n        class=\"mc-calendar__body-label\"\n        [attr.colspan]=\"firstRowOffset\">\n    </td>\n\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"mc-calendar__body-cell\"\n        [ngClass]=\"item.cssClasses!\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.mc-calendar__body_disabled]=\"!item.enabled\"\n        [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n        (click)=\"cellClicked(item)\"\n        [style.width]=\"cellWidth\"\n        [style.paddingTop]=\"cellPadding\"\n        [style.paddingBottom]=\"cellPadding\">\n        <div class=\"mc-calendar__body-cell-content\"\n             [class.mc-selected]=\"selectedValue === item.value\"\n             [class.mc-calendar__body-today]=\"todayValue === item.value\">\n            {{ item.displayValue }}\n        </div>\n    </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}\n"] }]
+        }], propDecorators: { rows: [{
                 type: Input
             }], todayValue: [{
                 type: Input
@@ -126,6 +111,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }] } });
 
+const defaultMinYear = 1900;
+const defaultMaxYear = 2099;
+/** Default header for McCalendar */
+class McCalendarHeader {
+    constructor(adapter) {
+        this.adapter = adapter;
+        this.years = [];
+        // tslint:disable-next-line:no-magic-numbers
+        this._maxDate = this.adapter.createDate(defaultMaxYear, 11);
+        this._minDate = this.adapter.createDate(defaultMinYear, 1);
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        this.monthSelected = new EventEmitter();
+        this.yearSelected = new EventEmitter();
+        this.monthNames = this.adapter.getMonthNames('long')
+            .map((name, i) => ({ name, value: i }));
+    }
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        this._activeDate = value;
+        this.updateSelectedValues();
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        if (!value) {
+            return;
+        }
+        this._maxDate = value;
+        this.updateYearsArray();
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        if (!value) {
+            return;
+        }
+        this._minDate = value;
+        this.updateYearsArray();
+    }
+    get previousDisabled() {
+        return this.compareDate(this.activeDate, this.minDate) < 0;
+    }
+    get nextDisabled() {
+        return this.compareDate(this.activeDate, this.maxDate) >= 0;
+    }
+    ngAfterContentInit() {
+        this.updateYearsArray();
+        this.updateSelectedValues();
+    }
+    /** Handles when a new month is selected. */
+    onMonthSelected(month) {
+        const year = this.adapter.getYear(this.activeDate);
+        const normalizedDate = this.adapter.createDate(year, month);
+        const daysInMonth = this.adapter.getNumDaysInMonth(normalizedDate);
+        this.activeDate = this.adapter.createDate(year, month, Math.min(this.adapter.getDate(this.activeDate), daysInMonth));
+        this.monthSelected.emit(this.activeDate);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    /** Handles when a new year is selected. */
+    onYearSelected(year) {
+        const month = this.adapter.getMonth(this.activeDate);
+        const daysInMonth = this.adapter.getNumDaysInMonth(this.adapter.createDate(year, month));
+        this.activeDate = this.adapter.createDate(year, month, Math.min(this.adapter.getDate(this.activeDate), daysInMonth));
+        this.yearSelected.emit(this.activeDate);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    selectCurrentDate() {
+        this.activeDate = this.adapter.today();
+        this.activeDateChange.emit(this.activeDate);
+    }
+    /** Handles user clicks on the previous button. */
+    selectPreviousMonth() {
+        this.activeDate = this.adapter.addCalendarMonths(this.activeDate, -1);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    /** Handles user clicks on the next button. */
+    selectNextMonth() {
+        this.activeDate = this.adapter.addCalendarMonths(this.activeDate, 1);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    compareDate(first, second) {
+        const normalizedFirst = this.adapter.createDate(this.adapter.getYear(first), this.adapter.getMonth(first));
+        const normalizedSecond = this.adapter.createDate(this.adapter.getYear(second), this.adapter.getMonth(second));
+        return this.adapter.compareDate(normalizedFirst, normalizedSecond);
+    }
+    updateSelectedValues() {
+        this.selectedMonth = this.monthNames[this.adapter.getMonth(this.activeDate)].value;
+        const selectedYear = this.adapter.getYear(this.activeDate);
+        this.selectedYear = this.years.includes(selectedYear) ? selectedYear : this.years[0];
+    }
+    updateYearsArray() {
+        const minYear = this.adapter.getYear(this.minDate);
+        const maxYear = this.adapter.getYear(this.maxDate);
+        this.years = [];
+        for (let i = minYear; i <= maxYear; i++) {
+            this.years.push(i);
+        }
+    }
+}
+/** @nocollapse */ McCalendarHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McCalendarHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarHeader, selector: "mc-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "mc-calendar-header" }, exportAs: ["mcCalendarHeader"], ngImport: i0, template: "<div class=\"mc-calendar-header__select-group\">\n    <mc-select\n        class=\"mc-calendar-header__select\"\n        #monthSelect=\"mcSelect\"\n        [value]=\"selectedMonth\"\n        [panelClass]=\"'mc-calendar-select-panel'\"\n        (selectionChange)=\"onMonthSelected($event.value)\">\n\n        <button class=\"mc-button_transparent layout-padding-right-xs\"\n                mc-button\n                mc-select-matcher\n                [class.mc-active]=\"monthSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ monthSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <mc-option *ngFor=\"let month of monthNames\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"month.value\">\n            {{ month.name }}\n        </mc-option>\n    </mc-select>\n\n    <mc-select\n        #yearSelect=\"mcSelect\"\n        [value]=\"selectedYear\"\n        [panelClass]=\"'mc-calendar-select-panel'\"\n        (selectionChange)=\"onYearSelected($event.value)\">\n        <button class=\"mc-button_transparent layout-padding-right-xs\"\n                mc-button\n                mc-select-matcher\n                [class.mc-active]=\"yearSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ yearSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <mc-option *ngFor=\"let year of years\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"year\">\n            {{ year }}\n        </mc-option>\n    </mc-select>\n</div>\n\n<div class=\"mc-calendar-header__button-group\">\n    <button mc-button\n            class=\"mc-button_transparent mc-calendar-header__previous-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"previousDisabled\"\n            (click)=\"selectPreviousMonth()\">\n\n        <i mc-icon=\"mc-angle-left-L_16\"></i>\n    </button>\n\n    <button mc-button\n            class=\"mc-button_transparent\"\n            [tabindex]=\"-1\"\n            (click)=\"selectCurrentDate()\">\n\n        <i mc-icon=\"mc-circle-8_16\"></i>\n    </button>\n\n    <button mc-button\n            class=\"mc-button_transparent mc-calendar-header__next-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"nextDisabled\"\n            (click)=\"selectNextMonth()\">\n\n        <i mc-icon=\"mc-angle-right-L_16\"></i>\n    </button>\n</div>\n", styles: [".mc-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding:16px 8px 12px;padding:var(--mc-datepicker-calendar-size-padding-top, 16px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-blocks, 12px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px)}.mc-calendar-header__previous-button:after{border-left-width:2px;border-left-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(2px) rotate(-45deg);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:2px;border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(-2px) rotate(45deg);transform:var(--mc-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.mc-calendar-header__select{width:auto!important}.mc-calendar-header__button-group,.mc-calendar-header__select-group{display:flex;flex-direction:row}.mc-calendar-select-panel{margin-top:2px;min-width:98%!important}.mc-calendar-select-panel .mc-select__content{max-height:384px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i3.McButtonCssStyler, selector: "[mc-button]" }, { kind: "directive", type: i4.McValidateDirective, selector: "        input[mcInput],        input[mcInputPassword],        input[mcTimepicker],        input[mcDatepicker],        textarea[mcTextarea],        mc-select,        mc-tree-select,        mc-tag-list    ", exportAs: ["McValidate"] }, { kind: "component", type: i5.McSelect, selector: "mc-select", inputs: ["disabled", "tabIndex", "hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "value", "id", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["mcSelect"] }, { kind: "directive", type: i5.McSelectMatcher, selector: "mc-select-matcher, [mc-select-matcher]" }, { kind: "directive", type: i5.McOptionTooltip, selector: "mc-option" }, { kind: "component", type: i6.McOption, selector: "mc-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["mcOption"] }, { kind: "component", type: i7.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i7.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-calendar-header', exportAs: 'mcCalendarHeader', host: {
+                        class: 'mc-calendar-header'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mc-calendar-header__select-group\">\n    <mc-select\n        class=\"mc-calendar-header__select\"\n        #monthSelect=\"mcSelect\"\n        [value]=\"selectedMonth\"\n        [panelClass]=\"'mc-calendar-select-panel'\"\n        (selectionChange)=\"onMonthSelected($event.value)\">\n\n        <button class=\"mc-button_transparent layout-padding-right-xs\"\n                mc-button\n                mc-select-matcher\n                [class.mc-active]=\"monthSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ monthSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <mc-option *ngFor=\"let month of monthNames\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"month.value\">\n            {{ month.name }}\n        </mc-option>\n    </mc-select>\n\n    <mc-select\n        #yearSelect=\"mcSelect\"\n        [value]=\"selectedYear\"\n        [panelClass]=\"'mc-calendar-select-panel'\"\n        (selectionChange)=\"onYearSelected($event.value)\">\n        <button class=\"mc-button_transparent layout-padding-right-xs\"\n                mc-button\n                mc-select-matcher\n                [class.mc-active]=\"yearSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ yearSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <mc-option *ngFor=\"let year of years\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"year\">\n            {{ year }}\n        </mc-option>\n    </mc-select>\n</div>\n\n<div class=\"mc-calendar-header__button-group\">\n    <button mc-button\n            class=\"mc-button_transparent mc-calendar-header__previous-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"previousDisabled\"\n            (click)=\"selectPreviousMonth()\">\n\n        <i mc-icon=\"mc-angle-left-L_16\"></i>\n    </button>\n\n    <button mc-button\n            class=\"mc-button_transparent\"\n            [tabindex]=\"-1\"\n            (click)=\"selectCurrentDate()\">\n\n        <i mc-icon=\"mc-circle-8_16\"></i>\n    </button>\n\n    <button mc-button\n            class=\"mc-button_transparent mc-calendar-header__next-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"nextDisabled\"\n            (click)=\"selectNextMonth()\">\n\n        <i mc-icon=\"mc-angle-right-L_16\"></i>\n    </button>\n</div>\n", styles: [".mc-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding:16px 8px 12px;padding:var(--mc-datepicker-calendar-size-padding-top, 16px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-blocks, 12px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px)}.mc-calendar-header__previous-button:after{border-left-width:2px;border-left-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(2px) rotate(-45deg);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:2px;border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(-2px) rotate(45deg);transform:var(--mc-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.mc-calendar-header__select{width:auto!important}.mc-calendar-header__button-group,.mc-calendar-header__select-group{display:flex;flex-direction:row}.mc-calendar-select-panel{margin-top:2px;min-width:98%!important}.mc-calendar-select-panel .mc-select__content{max-height:384px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DateAdapter }]; }, propDecorators: { activeDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], activeDateChange: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }] } });
+
 /** @docs-private */
 function createMissingDateImplError(provider) {
     return Error(`McDatepicker: No provider found for ${provider}. You must import one of the existing ` +
@@ -176,26 +286,25 @@ const DAYS_PER_WEEK = 7;
  * @docs-private
  */
 class McMonthView {
-    constructor(changeDetectorRef, dateFormats, dateAdapter, dir) {
+    constructor(changeDetectorRef, dateFormats, adapter) {
         this.changeDetectorRef = changeDetectorRef;
         this.dateFormats = dateFormats;
-        this.dateAdapter = dateAdapter;
-        this.dir = dir;
+        this.adapter = adapter;
         /** Emits when a new date is selected. */
         this.selectedChange = new EventEmitter();
         /** Emits when any date is selected. */
         this.userSelection = new EventEmitter();
         /** Emits when any date is activated. */
         this.activeDateChange = new EventEmitter();
-        if (!this.dateAdapter) {
+        if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
         if (!this.dateFormats) {
             throw createMissingDateImplError('MC_DATE_FORMATS');
         }
-        const firstDayOfWeek = this.dateAdapter.getFirstDayOfWeek();
-        const narrowWeekdays = this.dateAdapter.getDayOfWeekNames('short');
-        const longWeekdays = this.dateAdapter.getDayOfWeekNames('long');
+        const firstDayOfWeek = this.adapter.getFirstDayOfWeek();
+        const narrowWeekdays = this.adapter.getDayOfWeekNames('short');
+        const longWeekdays = this.adapter.getDayOfWeekNames('long');
         // Rotate the labels for days of the week based on the configured first day of the week.
         const weekdays = longWeekdays.map((long, i) => {
             return { long, narrow: narrowWeekdays[i] };
@@ -203,7 +312,7 @@ class McMonthView {
         this.weekdays = weekdays
             .slice(firstDayOfWeek)
             .concat(weekdays.slice(0, firstDayOfWeek));
-        this._activeDate = this.dateAdapter.today();
+        this._activeDate = this.adapter.today();
     }
     /**
      * The date to display in this month view (everything other than the month and year is ignored).
@@ -212,10 +321,9 @@ class McMonthView {
         return this._activeDate;
     }
     set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        const validDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value)) || this.dateAdapter.today();
-        this._activeDate = this.dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
-        if (!this.hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
+        const oldValue = this._activeDate;
+        this._activeDate = value;
+        if (!this.hasSameMonthAndYear(oldValue, value)) {
             this.init();
         }
     }
@@ -224,165 +332,73 @@ class McMonthView {
         return this._selected;
     }
     set selected(value) {
-        this._selected = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this._selected = value;
         this.selectedDate = this.getDateInCurrentMonth(this._selected);
     }
-    /** The minimum selectable date. */
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-    }
-    /** The maximum selectable date. */
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-    }
     ngAfterContentInit() {
         this.init();
     }
     /** Handles when a new date is selected. */
     dateSelected(date) {
         if (this.selectedDate !== date) {
-            const selectedYear = this.dateAdapter.getYear(this.activeDate);
-            const selectedMonth = this.dateAdapter.getMonth(this.activeDate);
-            const selectedDate = this.dateAdapter.createDate(selectedYear, selectedMonth, date);
+            const selectedYear = this.adapter.getYear(this.activeDate);
+            const selectedMonth = this.adapter.getMonth(this.activeDate);
+            const selectedDate = this.adapter.createDate(selectedYear, selectedMonth, date);
             this.selectedChange.emit(selectedDate);
         }
         this.userSelection.emit();
     }
-    /** Handles keydown events on the calendar body when calendar is in month view. */
-    handleCalendarBodyKeydown(event) {
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
-        const oldActiveDate = this._activeDate;
-        const isRtl = this.isRtl();
-        // tslint:disable-next-line:deprecation
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
-                break;
-            case RIGHT_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
-                break;
-            case UP_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarDays(this._activeDate, -7);
-                break;
-            case DOWN_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarDays(this._activeDate, 7);
-                break;
-            case HOME:
-                this.activeDate = this.dateAdapter.addCalendarDays(this._activeDate, 1 - this.dateAdapter.getDate(this._activeDate));
-                break;
-            case END:
-                this.activeDate = this.dateAdapter.addCalendarDays(this._activeDate, (this.dateAdapter.getNumDaysInMonth(this._activeDate) - this.dateAdapter.getDate(this._activeDate)));
-                break;
-            case PAGE_UP:
-                this.activeDate = event.altKey ?
-                    this.dateAdapter.addCalendarYears(this._activeDate, -1) :
-                    this.dateAdapter.addCalendarMonths(this._activeDate, -1);
-                break;
-            case PAGE_DOWN:
-                this.activeDate = event.altKey ?
-                    this.dateAdapter.addCalendarYears(this._activeDate, 1) :
-                    this.dateAdapter.addCalendarMonths(this._activeDate, 1);
-                break;
-            case ENTER:
-            case SPACE:
-                if (!this.dateFilter || this.dateFilter(this._activeDate)) {
-                    this.dateSelected(this.dateAdapter.getDate(this._activeDate));
-                    this.userSelection.emit();
-                    // Prevent unexpected default actions such as form submission.
-                    event.preventDefault();
-                }
-                return;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
-        }
-        if (this.dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
-            this.activeDateChange.emit(this.activeDate);
-        }
-        this.focusActiveCell();
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
     /** Initializes this month view. */
     init() {
         this.selectedDate = this.getDateInCurrentMonth(this.selected);
-        this.todayDate = this.getDateInCurrentMonth(this.dateAdapter.today());
-        this.monthLabel = this.dateAdapter.getMonthNames('short')[this.dateAdapter.getMonth(this.activeDate)];
-        this.monthLabel = this.monthLabel[0].toLocaleUpperCase() + this.monthLabel.substr(1);
-        const firstOfMonth = this.dateAdapter.createDate(this.dateAdapter.getYear(this.activeDate), this.dateAdapter.getMonth(this.activeDate));
-        this.firstWeekOffset =
-            (DAYS_PER_WEEK + this.dateAdapter.getDayOfWeek(firstOfMonth) -
-                this.dateAdapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
+        this.todayDate = this.getDateInCurrentMonth(this.adapter.today());
+        const firstOfMonth = this.adapter.createDate(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate));
+        this.firstWeekOffset = (DAYS_PER_WEEK + this.adapter.getDayOfWeek(firstOfMonth) - this.adapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
         this.createWeekCells();
         this.changeDetectorRef.markForCheck();
     }
-    /** Focuses the active cell after the microtask queue is empty. */
-    focusActiveCell() {
-        this.mcCalendarBody.focusActiveCell();
-    }
     /** Creates McCalendarCells for the dates in this month. */
     createWeekCells() {
-        const daysInMonth = this.dateAdapter.getNumDaysInMonth(this.activeDate);
-        const dateNames = this.dateAdapter.getDateNames();
+        const daysInMonth = this.adapter.getNumDaysInMonth(this.activeDate);
+        const dateNames = this.adapter.getDateNames();
         this.weeks = [[]];
         for (let i = 0, cell = this.firstWeekOffset; i < daysInMonth; i++, cell++) {
             if (cell === DAYS_PER_WEEK) {
                 this.weeks.push([]);
                 cell = 0;
             }
-            const date = this.dateAdapter.createDate(this.dateAdapter.getYear(this.activeDate), this.dateAdapter.getMonth(this.activeDate), i + 1);
+            const date = this.adapter.createDate(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate), i + 1);
             const enabled = this.shouldEnableDate(date);
-            const ariaLabel = this.dateAdapter.format(date, this.dateFormats.dateA11yLabel);
             const cellClasses = this.dateClass ? this.dateClass(date) : undefined;
             this.weeks[this.weeks.length - 1]
-                .push(new McCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));
+                .push(new McCalendarCell(i + 1, dateNames[i], enabled, cellClasses));
         }
     }
     /** Date filter for the month */
     shouldEnableDate(date) {
         return !!date &&
             (!this.dateFilter || this.dateFilter(date)) &&
-            (!this.minDate || this.dateAdapter.compareDate(date, this.minDate) >= 0) &&
-            (!this.maxDate || this.dateAdapter.compareDate(date, this.maxDate) <= 0);
+            (!this.minDate || this.adapter.compareDate(date, this.minDate) >= 0) &&
+            (!this.maxDate || this.adapter.compareDate(date, this.maxDate) <= 0);
     }
     /**
      * Gets the date in this month that the given Date falls on.
      * Returns null if the given Date is in another month.
      */
     getDateInCurrentMonth(date) {
-        return date && this.hasSameMonthAndYear(date, this.activeDate) ?
-            this.dateAdapter.getDate(date) : null;
+        return date && this.hasSameMonthAndYear(date, this.activeDate) ? this.adapter.getDate(date) : null;
     }
     /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
     hasSameMonthAndYear(d1, d2) {
-        return !!(d1 && d2 && this.dateAdapter.getMonth(d1) === this.dateAdapter.getMonth(d2) &&
-            this.dateAdapter.getYear(d1) === this.dateAdapter.getYear(d2));
-    }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    getValidDateOrNull(obj) {
-        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
-    }
-    /** Determines whether the user has the RTL layout direction. */
-    isRtl() {
-        return this.dir && this.dir.value === 'rtl';
+        return !!(d1 && d2 && this.adapter.getMonth(d1) === this.adapter.getMonth(d2) &&
+            this.adapter.getYear(d1) === this.adapter.getYear(d2));
     }
 }
-/** @nocollapse */ McMonthView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McMonthView, deps: [{ token: i0.ChangeDetectorRef }, { token: MC_DATE_FORMATS, optional: true }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McMonthView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McMonthView, selector: "mc-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "mcCalendarBody", first: true, predicate: McCalendarBody, descendants: true }], exportAs: ["mcMonthView"], ngImport: i0, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n        <tr>\n            <th *ngFor=\"let day of weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n        </tr>\n        <tr>\n            <th class=\"mc-calendar__table-header-divider\" colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [label]=\"monthLabel\"\n           [rows]=\"weeks\"\n           [todayValue]=\"todayDate!\"\n           [selectedValue]=\"selectedDate!\"\n           [labelMinRequiredCells]=\"3\"\n           [activeCell]=\"dateAdapter.getDate(activeDate) - 1\"\n           (selectedValueChange)=\"dateSelected($event)\"\n           (keydown)=\"handleCalendarBodyKeydown($event)\">\n    </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["mcCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ McMonthView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McMonthView, deps: [{ token: i0.ChangeDetectorRef }, { token: MC_DATE_FORMATS, optional: true }, { token: i1$1.DateAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McMonthView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McMonthView, selector: "mc-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "mcCalendarBody", first: true, predicate: McCalendarBody, descendants: true }], exportAs: ["mcMonthView"], ngImport: i0, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n        <tr>\n            <th *ngFor=\"let day of weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n        </tr>\n        <tr>\n            <th class=\"mc-calendar__table-header-divider\" colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [rows]=\"weeks\"\n           [todayValue]=\"todayDate!\"\n           [selectedValue]=\"selectedDate!\"\n           [labelMinRequiredCells]=\"3\"\n           [activeCell]=\"adapter.getDate(activeDate) - 1\"\n           (selectedValueChange)=\"dateSelected($event)\">\n    </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: ["rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["mcCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McMonthView, decorators: [{
             type: Component,
-            args: [{ selector: 'mc-month-view', exportAs: 'mcMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n        <tr>\n            <th *ngFor=\"let day of weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n        </tr>\n        <tr>\n            <th class=\"mc-calendar__table-header-divider\" colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [label]=\"monthLabel\"\n           [rows]=\"weeks\"\n           [todayValue]=\"todayDate!\"\n           [selectedValue]=\"selectedDate!\"\n           [labelMinRequiredCells]=\"3\"\n           [activeCell]=\"dateAdapter.getDate(activeDate) - 1\"\n           (selectedValueChange)=\"dateSelected($event)\"\n           (keydown)=\"handleCalendarBodyKeydown($event)\">\n    </tbody>\n</table>\n" }]
+            args: [{ selector: 'mc-month-view', exportAs: 'mcMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n        <tr>\n            <th *ngFor=\"let day of weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n        </tr>\n        <tr>\n            <th class=\"mc-calendar__table-header-divider\" colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [rows]=\"weeks\"\n           [todayValue]=\"todayDate!\"\n           [selectedValue]=\"selectedDate!\"\n           [labelMinRequiredCells]=\"3\"\n           [activeCell]=\"adapter.getDate(activeDate) - 1\"\n           (selectedValueChange)=\"dateSelected($event)\">\n    </tbody>\n</table>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -390,8 +406,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     args: [MC_DATE_FORMATS]
                 }] }, { type: i1$1.DateAdapter, decorators: [{
                     type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
                 }] }]; }, propDecorators: { activeDate: [{
                 type: Input
             }], selected: [{
@@ -415,478 +429,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: [McCalendarBody, { static: false }]
             }] } });
 
-// tslint:disable:no-magic-numbers
-const yearsPerPage = 24;
-const yearsPerRow = 4;
-/**
- * An internal component used to display a year selector in the datepicker.
- * @docs-private
- */
-class McMultiYearView {
-    constructor(changeDetectorRef, dateAdapter, dir) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.dateAdapter = dateAdapter;
-        this.dir = dir;
-        /** Emits when a new year is selected. */
-        this.selectedChange = new EventEmitter();
-        /** Emits the selected year. This doesn't imply a change on the selected date */
-        this.yearSelected = new EventEmitter();
-        /** Emits when any date is activated. */
-        this.activeDateChange = new EventEmitter();
-        if (!this.dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        this._activeDate = this.dateAdapter.today();
-    }
-    /** The date to display in this multi-year view (everything other than the year is ignored). */
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        const validDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value)) || this.dateAdapter.today();
-        this._activeDate = this.dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
-        if (Math.floor(this.dateAdapter.getYear(oldActiveDate) / yearsPerPage) !==
-            Math.floor(this.dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
-            this.init();
-        }
-    }
-    /** The currently selected date. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-        this.selectedYear = this._selected && this.dateAdapter.getYear(this._selected);
-    }
-    /** The minimum selectable date. */
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-    }
-    /** The maximum selectable date. */
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-    }
-    ngAfterContentInit() {
-        this.init();
-    }
-    /** Initializes this multi-year view. */
-    init() {
-        this.todayYear = this.dateAdapter.getYear(this.dateAdapter.today());
-        const activeYear = this.dateAdapter.getYear(this._activeDate);
-        const activeOffset = activeYear % yearsPerPage;
-        this.years = [];
-        for (let i = 0, row = []; i < yearsPerPage; i++) {
-            row.push(activeYear - activeOffset + i);
-            if (row.length === yearsPerRow) {
-                this.years.push(row.map((year) => this.createCellForYear(year)));
-                row = [];
-            }
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-    /** Handles when a new year is selected. */
-    onYearSelected(year) {
-        this.yearSelected.emit(this.dateAdapter.createDate(year));
-        const month = this.dateAdapter.getMonth(this.activeDate);
-        const daysInMonth = this.dateAdapter.getNumDaysInMonth(this.dateAdapter.createDate(year, month));
-        this.selectedChange.emit(this.dateAdapter.createDate(year, month, Math.min(this.dateAdapter.getDate(this.activeDate), daysInMonth)));
-    }
-    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
-    handleCalendarBodyKeydown(event) {
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
-        const oldActiveDate = this._activeDate;
-        const isRtl = this.isRtl();
-        // tslint:disable-next-line:deprecation
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);
-                break;
-            case RIGHT_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);
-                break;
-            case UP_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);
-                break;
-            case DOWN_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);
-                break;
-            case HOME:
-                this.activeDate = this.dateAdapter.addCalendarYears(this._activeDate, -this.dateAdapter.getYear(this._activeDate) % yearsPerPage);
-                break;
-            case END:
-                this.activeDate = this.dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - this.dateAdapter.getYear(this._activeDate) % yearsPerPage - 1);
-                break;
-            case PAGE_UP:
-                this.activeDate =
-                    this.dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
-                break;
-            case PAGE_DOWN:
-                this.activeDate =
-                    this.dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
-                break;
-            case ENTER:
-            case SPACE:
-                this.onYearSelected(this.dateAdapter.getYear(this._activeDate));
-                break;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
-        }
-        if (this.dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
-            this.activeDateChange.emit(this.activeDate);
-        }
-        this.focusActiveCell();
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
-    getActiveCell() {
-        return this.dateAdapter.getYear(this.activeDate) % yearsPerPage;
-    }
-    /** Focuses the active cell after the microtask queue is empty. */
-    focusActiveCell() {
-        this.mcCalendarBody.focusActiveCell();
-    }
-    /** Creates an McCalendarCell for the given year. */
-    createCellForYear(year) {
-        const yearName = this.dateAdapter.getYearName(this.dateAdapter.createDate(year));
-        return new McCalendarCell(year, yearName, yearName, this.shouldEnableYear(year));
-    }
-    /** Whether the given year is enabled. */
-    shouldEnableYear(year) {
-        // disable if the year is greater than maxDate lower than minDate
-        if (year === undefined || year === null ||
-            (this.maxDate && year > this.dateAdapter.getYear(this.maxDate)) ||
-            (this.minDate && year < this.dateAdapter.getYear(this.minDate))) {
-            return false;
-        }
-        // enable if it reaches here and there's no filter defined
-        if (!this.dateFilter) {
-            return true;
-        }
-        const firstOfYear = this.dateAdapter.createDate(year);
-        // If any date in the year is enabled count the year as enabled.
-        for (let date = firstOfYear; this.dateAdapter.getYear(date) === year; date = this.dateAdapter.addCalendarDays(date, 1)) {
-            if (this.dateFilter(date)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    getValidDateOrNull(obj) {
-        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
-    }
-    /** Determines whether the user has the RTL layout direction. */
-    isRtl() {
-        return this.dir && this.dir.value === 'rtl';
-    }
-}
-/** @nocollapse */ McMultiYearView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McMultiYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McMultiYearView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McMultiYearView, selector: "mc-multi-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "mcCalendarBody", first: true, predicate: McCalendarBody, descendants: true }], exportAs: ["mcMultiYearView"], ngImport: i0, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n    <tr>\n        <th class=\"mc-calendar__table-header-divider\" colspan=\"4\"></th>\n    </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [rows]=\"years\"\n           [todayValue]=\"todayYear\"\n           [selectedValue]=\"selectedYear!\"\n           [numCols]=\"4\"\n           [cellAspectRatio]=\"4 / 7\"\n           [activeCell]=\"getActiveCell()\"\n           (selectedValueChange)=\"onYearSelected($event)\"\n           (keydown)=\"handleCalendarBodyKeydown($event)\">\n    </tbody>\n</table>\n", dependencies: [{ kind: "component", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["mcCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McMultiYearView, decorators: [{
-            type: Component,
-            args: [{ selector: 'mc-multi-year-view', exportAs: 'mcMultiYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n    <tr>\n        <th class=\"mc-calendar__table-header-divider\" colspan=\"4\"></th>\n    </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [rows]=\"years\"\n           [todayValue]=\"todayYear\"\n           [selectedValue]=\"selectedYear!\"\n           [numCols]=\"4\"\n           [cellAspectRatio]=\"4 / 7\"\n           [activeCell]=\"getActiveCell()\"\n           (selectedValueChange)=\"onYearSelected($event)\"\n           (keydown)=\"handleCalendarBodyKeydown($event)\">\n    </tbody>\n</table>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], yearSelected: [{
-                type: Output
-            }], activeDateChange: [{
-                type: Output
-            }], mcCalendarBody: [{
-                type: ViewChild,
-                args: [McCalendarBody, { static: false }]
-            }] } });
-
-/**
- * An internal component used to display a single year in the datepicker.
- * @docs-private
- */
-class McYearView {
-    constructor(changeDetectorRef, dateFormats, dateAdapter, dir) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.dateFormats = dateFormats;
-        this.dateAdapter = dateAdapter;
-        this.dir = dir;
-        /** Emits when a new month is selected. */
-        this.selectedChange = new EventEmitter();
-        /** Emits the selected month. This doesn't imply a change on the selected date */
-        this.monthSelected = new EventEmitter();
-        /** Emits when any date is activated. */
-        this.activeDateChange = new EventEmitter();
-        if (!this.dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        if (!this.dateFormats) {
-            throw createMissingDateImplError('MC_DATE_FORMATS');
-        }
-        this._activeDate = this.dateAdapter.today();
-    }
-    /** The date to display in this year view (everything other than the year is ignored). */
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        const validDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value)) || this.dateAdapter.today();
-        this._activeDate = this.dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
-        if (this.dateAdapter.getYear(oldActiveDate) !== this.dateAdapter.getYear(this._activeDate)) {
-            this.init();
-        }
-    }
-    /** The currently selected date. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-        this.selectedMonth = this.getMonthInCurrentYear(this._selected);
-    }
-    /** The minimum selectable date. */
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-    }
-    /** The maximum selectable date. */
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-    }
-    ngAfterContentInit() {
-        this.init();
-    }
-    /** Handles when a new month is selected. */
-    onMonthSelected(month) {
-        const year = this.dateAdapter.getYear(this.activeDate);
-        const normalizedDate = this.dateAdapter.createDate(year, month);
-        this.monthSelected.emit(normalizedDate);
-        const daysInMonth = this.dateAdapter.getNumDaysInMonth(normalizedDate);
-        this.selectedChange.emit(this.dateAdapter.createDate(year, month, Math.min(this.dateAdapter.getDate(this.activeDate), daysInMonth)));
-    }
-    /** Handles keydown events on the calendar body when calendar is in year view. */
-    handleCalendarBodyKeydown(event) {
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
-        const oldActiveDate = this._activeDate;
-        const isRtl = this.isRtl();
-        const VERTICAL_SHIFT = 4;
-        const PAGE_SHIFT = 10;
-        const MAX_MONTH_INDEX = 11;
-        // tslint:disable-next-line:deprecation
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);
-                break;
-            case RIGHT_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);
-                break;
-            case UP_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarMonths(this._activeDate, -VERTICAL_SHIFT);
-                break;
-            case DOWN_ARROW:
-                this.activeDate = this.dateAdapter.addCalendarMonths(this._activeDate, VERTICAL_SHIFT);
-                break;
-            case HOME:
-                this.activeDate = this.dateAdapter.addCalendarMonths(this._activeDate, -this.dateAdapter.getMonth(this._activeDate));
-                break;
-            case END:
-                this.activeDate = this.dateAdapter.addCalendarMonths(this._activeDate, MAX_MONTH_INDEX - this.dateAdapter.getMonth(this._activeDate));
-                break;
-            case PAGE_UP:
-                this.activeDate =
-                    this.dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -PAGE_SHIFT : -1);
-                break;
-            case PAGE_DOWN:
-                this.activeDate =
-                    this.dateAdapter.addCalendarYears(this._activeDate, event.altKey ? PAGE_SHIFT : 1);
-                break;
-            case ENTER:
-            case SPACE:
-                this.onMonthSelected(this.dateAdapter.getMonth(this._activeDate));
-                break;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
-        }
-        if (this.dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
-            this.activeDateChange.emit(this.activeDate);
-        }
-        this.focusActiveCell();
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
-    /** Initializes this year view. */
-    init() {
-        this.selectedMonth = this.getMonthInCurrentYear(this.selected);
-        this.todayMonth = this.getMonthInCurrentYear(this.dateAdapter.today());
-        this.yearLabel = this.dateAdapter.getYearName(this.activeDate);
-        const monthNames = this.dateAdapter.getMonthNames('short');
-        // First row of months only contains 5 elements so we can fit the year label on the same row.
-        // tslint:disable-next-line:no-magic-numbers
-        this.months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]
-            .map((row) => row.map((month) => this.createCellForMonth(month, monthNames[month])));
-        this.changeDetectorRef.markForCheck();
-    }
-    /** Focuses the active cell after the microtask queue is empty. */
-    focusActiveCell() {
-        this.mcCalendarBody.focusActiveCell();
-    }
-    /**
-     * Gets the month in this year that the given Date falls on.
-     * Returns null if the given Date is in another year.
-     */
-    getMonthInCurrentYear(date) {
-        return date && this.dateAdapter.getYear(date) === this.dateAdapter.getYear(this.activeDate) ?
-            this.dateAdapter.getMonth(date) : null;
-    }
-    /** Creates an McCalendarCell for the given month. */
-    createCellForMonth(month, monthName) {
-        const ariaLabel = this.dateAdapter.format(this.dateAdapter.createDate(this.dateAdapter.getYear(this.activeDate), month), this.dateFormats.monthYearA11yLabel);
-        const newMonthName = monthName[0].toLocaleUpperCase() + monthName.substr(1);
-        return new McCalendarCell(month, newMonthName, ariaLabel, this.shouldEnableMonth(month));
-    }
-    /** Whether the given month is enabled. */
-    shouldEnableMonth(month) {
-        const activeYear = this.dateAdapter.getYear(this.activeDate);
-        if (month === undefined || month === null ||
-            this.isYearAndMonthAfterMaxDate(activeYear, month) ||
-            this.isYearAndMonthBeforeMinDate(activeYear, month)) {
-            return false;
-        }
-        if (!this.dateFilter) {
-            return true;
-        }
-        const firstOfMonth = this.dateAdapter.createDate(activeYear, month);
-        // If any date in the month is enabled count the month as enabled.
-        for (let date = firstOfMonth; this.dateAdapter.getMonth(date) === month; date = this.dateAdapter.addCalendarDays(date, 1)) {
-            if (this.dateFilter(date)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Tests whether the combination month/year is after this.maxDate, considering
-     * just the month and year of this.maxDate
-     */
-    isYearAndMonthAfterMaxDate(year, month) {
-        if (this.maxDate) {
-            const maxYear = this.dateAdapter.getYear(this.maxDate);
-            const maxMonth = this.dateAdapter.getMonth(this.maxDate);
-            return year > maxYear || (year === maxYear && month > maxMonth);
-        }
-        return false;
-    }
-    /**
-     * Tests whether the combination month/year is before this.minDate, considering
-     * just the month and year of this.minDate
-     */
-    isYearAndMonthBeforeMinDate(year, month) {
-        if (this.minDate) {
-            const minYear = this.dateAdapter.getYear(this.minDate);
-            const minMonth = this.dateAdapter.getMonth(this.minDate);
-            return year < minYear || (year === minYear && month < minMonth);
-        }
-        return false;
-    }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    getValidDateOrNull(obj) {
-        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
-    }
-    /** Determines whether the user has the RTL layout direction. */
-    isRtl() {
-        return this.dir && this.dir.value === 'rtl';
-    }
-}
-/** @nocollapse */ McYearView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: MC_DATE_FORMATS, optional: true }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McYearView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McYearView, selector: "mc-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter" }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "mcCalendarBody", first: true, predicate: McCalendarBody, descendants: true }], exportAs: ["mcYearView"], ngImport: i0, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n    <tr>\n        <th class=\"mc-calendar__table-header-divider\" colspan=\"4\"></th>\n    </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [label]=\"yearLabel\"\n           [rows]=\"months\"\n           [todayValue]=\"todayMonth!\"\n           [selectedValue]=\"selectedMonth!\"\n           [labelMinRequiredCells]=\"2\"\n           [numCols]=\"4\"\n           [cellAspectRatio]=\"4 / 7\"\n           [activeCell]=\"dateAdapter.getMonth(activeDate)\"\n           (selectedValueChange)=\"onMonthSelected($event)\"\n           (keydown)=\"handleCalendarBodyKeydown($event)\">\n    </tbody>\n</table>\n", dependencies: [{ kind: "component", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["mcCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McYearView, decorators: [{
-            type: Component,
-            args: [{ selector: 'mc-year-view', exportAs: 'mcYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"mc-calendar__table\">\n    <thead class=\"mc-calendar__table-header\">\n    <tr>\n        <th class=\"mc-calendar__table-header-divider\" colspan=\"4\"></th>\n    </tr>\n    </thead>\n    <tbody mc-calendar-body\n           [label]=\"yearLabel\"\n           [rows]=\"months\"\n           [todayValue]=\"todayMonth!\"\n           [selectedValue]=\"selectedMonth!\"\n           [labelMinRequiredCells]=\"2\"\n           [numCols]=\"4\"\n           [cellAspectRatio]=\"4 / 7\"\n           [activeCell]=\"dateAdapter.getMonth(activeDate)\"\n           (selectedValueChange)=\"onMonthSelected($event)\"\n           (keydown)=\"handleCalendarBodyKeydown($event)\">\n    </tbody>\n</table>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MC_DATE_FORMATS]
-                }] }, { type: i1$1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], monthSelected: [{
-                type: Output
-            }], activeDateChange: [{
-                type: Output
-            }], mcCalendarBody: [{
-                type: ViewChild,
-                args: [McCalendarBody, { static: false }]
-            }] } });
-
-/**
- * Possible views for the calendar.
- * @docs-private
- */
-var McCalendarView;
-(function (McCalendarView) {
-    McCalendarView["Month"] = "month";
-    McCalendarView["Year"] = "year";
-    McCalendarView["MultiYear"] = "multi-year";
-})(McCalendarView || (McCalendarView = {}));
 /**
  * A calendar that is used as part of the datepicker.
  * @docs-private
  */
 class McCalendar {
-    constructor(intl, dateAdapter, dateFormats, changeDetectorRef) {
-        this.dateAdapter = dateAdapter;
+    constructor(intl, adapter, dateFormats, changeDetectorRef) {
+        this.adapter = adapter;
         this.dateFormats = dateFormats;
         this.changeDetectorRef = changeDetectorRef;
-        /** Whether the calendar should be started in month or year view. */
-        this.startView = McCalendarView.Month;
         /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
         /**
@@ -905,13 +456,7 @@ class McCalendar {
          * Emits whenever there is a state change that the header may need to respond to.
          */
         this.stateChanges = new Subject();
-        /**
-         * Used for scheduling that focus should be moved to the active cell on the next tick.
-         * We need to schedule it, rather than do it immediately, because we have to wait
-         * for Angular to re-evaluate the view children.
-         */
-        this.moveFocusOnNextTick = false;
-        if (!this.dateAdapter) {
+        if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
         if (!this.dateFormats) {
@@ -927,59 +472,46 @@ class McCalendar {
         return this._startAt;
     }
     set startAt(value) {
-        this._startAt = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        const deserializedValue = this.getValidDateOrNull(this.adapter.deserialize(value));
+        this._startAt = deserializedValue !== null ?
+            this.adapter.clampDate(deserializedValue, this.minDate, this.maxDate) : null;
     }
     /** The currently selected date. */
     get selected() {
         return this._selected;
     }
     set selected(value) {
-        this._selected = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this._selected = this.adapter.deserialize(value);
     }
     /** The minimum selectable date. */
     get minDate() {
         return this._minDate;
     }
     set minDate(value) {
-        this._minDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this._minDate = this.adapter.deserialize(value);
+        this.startAt = this._startAt;
     }
     /** The maximum selectable date. */
     get maxDate() {
         return this._maxDate;
     }
     set maxDate(value) {
-        this._maxDate = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this._maxDate = this.adapter.deserialize(value);
+        this.startAt = this._startAt;
     }
     /**
      * The current active date. This determines which time period is shown and which date is
      * highlighted when using keyboard navigation.
      */
     get activeDate() {
-        return this.clampedActiveDate;
+        return this._activeDate;
     }
     set activeDate(value) {
-        this.clampedActiveDate = this.dateAdapter.clampDate(value, this.minDate, this.maxDate);
+        this._activeDate = this.adapter.clampDate(value, this.minDate, this.maxDate);
         this.stateChanges.next();
     }
-    /** Whether the calendar is in month view. */
-    get currentView() {
-        return this._currentView;
-    }
-    set currentView(value) {
-        this._currentView = value;
-        this.moveFocusOnNextTick = true;
-    }
     ngAfterContentInit() {
-        this.calendarHeaderPortal = new ComponentPortal(this.headerComponent || McCalendarHeader);
-        this.activeDate = this.startAt || this.dateAdapter.today();
-        // Assign to the private property since we don't want to move focus on init.
-        this._currentView = this.startView;
-    }
-    ngAfterViewChecked() {
-        if (this.moveFocusOnNextTick) {
-            this.moveFocusOnNextTick = false;
-            this.focusActiveCell();
-        }
+        this.activeDate = this.startAt || this.adapter.today();
     }
     ngOnDestroy() {
         this.intlChanges.unsubscribe();
@@ -988,66 +520,44 @@ class McCalendar {
     ngOnChanges(changes) {
         const change = changes.minDate || changes.maxDate || changes.dateFilter;
         if (change && !change.firstChange) {
-            const view = this.getCurrentViewComponent();
-            if (view) {
+            if (this.monthView) {
                 // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
                 // passed down to the view via data bindings which won't be up-to-date when we call `init`.
                 this.changeDetectorRef.detectChanges();
-                view.init();
+                this.monthView.init();
             }
         }
         this.stateChanges.next();
     }
-    focusActiveCell() {
-        this.getCurrentViewComponent().focusActiveCell();
-    }
     /** Updates today's date after an update of the active date */
     updateTodaysDate() {
-        const view = this.currentView === McCalendarView.Month ? this.monthView :
-            (this.currentView === McCalendarView.Year ? this.yearView : this.multiYearView);
-        view.ngAfterContentInit();
+        this.monthView.ngAfterContentInit();
     }
     /** Handles date selection in the month view. */
     dateSelected(date) {
-        if (!this.dateAdapter.sameDate(date, this.selected)) {
+        if (!this.adapter.sameDate(date, this.selected)) {
             this.selectedChange.emit(date);
         }
     }
-    /** Handles year selection in the multiyear view. */
-    yearSelectedInMultiYearView(normalizedYear) {
-        this.yearSelected.emit(normalizedYear);
-    }
-    /** Handles month selection in the year view. */
-    monthSelectedInYearView(normalizedMonth) {
-        this.monthSelected.emit(normalizedMonth);
-    }
     userSelected() {
         this.userSelection.emit();
     }
-    /** Handles year/month selection in the multi-year/year views. */
-    goToDateInView(date, view) {
-        this.activeDate = date;
-        this.currentView = view;
-    }
     /**
      * @param obj The object to check.
      * @returns The given object if it is both a date instance and valid, otherwise null.
      */
+    // todo выглядит как костыль от которого нужно избавиться
     getValidDateOrNull(obj) {
-        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
-    }
-    /** Returns the component instance that corresponds to the current calendar view. */
-    getCurrentViewComponent() {
-        return this.monthView || this.yearView || this.multiYearView;
+        return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
     }
 }
 /** @nocollapse */ McCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendar, deps: [{ token: McDatepickerIntl }, { token: i1$1.DateAdapter, optional: true }, { token: MC_DATE_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendar, selector: "mc-calendar", inputs: { startAt: "startAt", selected: "selected", minDate: "minDate", maxDate: "maxDate", headerComponent: "headerComponent", startView: "startView", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", userSelection: "userSelection" }, host: { classAttribute: "mc-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: McMonthView, descendants: true }, { propertyName: "yearView", first: true, predicate: McYearView, descendants: true }, { propertyName: "multiYearView", first: true, predicate: McMultiYearView, descendants: true }], exportAs: ["mcCalendar"], usesOnChanges: true, ngImport: i0, template: "<ng-template [cdkPortalOutlet]=\"calendarHeaderPortal\"></ng-template>\n\n<div class=\"mc-calendar__content\" [ngSwitch]=\"currentView\">\n    <mc-month-view\n        *ngSwitchCase=\"'month'\"\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\">\n    </mc-month-view>\n\n    <mc-year-view\n        *ngSwitchCase=\"'year'\"\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        (monthSelected)=\"monthSelectedInYearView($event)\"\n        (selectedChange)=\"goToDateInView($event, 'multi-year')\">\n    </mc-year-view>\n\n    <mc-multi-year-view\n        *ngSwitchCase=\"'multi-year'\"\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n        (selectedChange)=\"goToDateInView($event, 'month')\">\n    </mc-multi-year-view>\n</div>\n", styles: [".mc-calendar{display:block}.mc-calendar-header{display:flex;padding:16px 8px 12px;padding:var(--mc-datepicker-calendar-size-padding-top, 16px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-blocks, 12px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px)}.mc-calendar__content{padding:0 8px 8px;padding:0 var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px);outline:none}.mc-calendar-spacer{flex:1 1 auto}.mc-calendar__period-button{min-width:0}.mc-calendar__period-button .mc-icon{vertical-align:baseline}.mc-calendar__previous-button:after{border-left-width:2px;border-left-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(2px) rotate(-45deg);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar__next-button:after{border-right-width:2px;border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(-2px) rotate(45deg);transform:var(--mc-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.mc-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.mc-calendar__table-header th{text-align:center;height:30px}.mc-calendar__table-header th.mc-calendar__table-header-divider{position:relative;height:10px;height:calc(var(--mc-datepicker-calendar-size-padding-blocks, 12px) - 2px)}.mc-calendar__table-header th.mc-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;left:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:-8px;right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));height:1px;height:var(--mc-datepicker-calendar-size-divider-width, 1px)}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: McMonthView, selector: "mc-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["mcMonthView"] }, { kind: "component", type: McYearView, selector: "mc-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter"], outputs: ["selectedChange", "monthSelected", "activeDateChange"], exportAs: ["mcYearView"] }, { kind: "component", type: McMultiYearView, selector: "mc-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter"], outputs: ["selectedChange", "yearSelected", "activeDateChange"], exportAs: ["mcMultiYearView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ McCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendar, selector: "mc-calendar", inputs: { startAt: "startAt", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", userSelection: "userSelection" }, host: { classAttribute: "mc-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: McMonthView, descendants: true }], exportAs: ["mcCalendar"], usesOnChanges: true, ngImport: i0, template: "<mc-calendar-header\n    [(activeDate)]=\"activeDate\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\">\n</mc-calendar-header>\n\n<div class=\"mc-calendar__content\">\n    <mc-month-view\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\">\n    </mc-month-view>\n</div>\n", styles: [".mc-calendar{display:block}.mc-calendar__content{padding:0 8px 8px;padding:0 var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px);outline:none}.mc-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.mc-calendar__table-header th{text-align:center;height:30px}.mc-calendar__table-header th.mc-calendar__table-header-divider{position:relative;height:10px;height:calc(var(--mc-datepicker-calendar-size-padding-blocks, 12px) - 2px)}.mc-calendar__table-header th.mc-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;left:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:-8px;right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));height:1px;height:var(--mc-datepicker-calendar-size-divider-width, 1px)}\n"], dependencies: [{ kind: "component", type: McMonthView, selector: "mc-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["mcMonthView"] }, { kind: "component", type: McCalendarHeader, selector: "mc-calendar-header", inputs: ["activeDate", "maxDate", "minDate"], outputs: ["activeDateChange", "monthSelected", "yearSelected"], exportAs: ["mcCalendarHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'mc-calendar', exportAs: 'mcCalendar', host: {
                         class: 'mc-calendar'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [cdkPortalOutlet]=\"calendarHeaderPortal\"></ng-template>\n\n<div class=\"mc-calendar__content\" [ngSwitch]=\"currentView\">\n    <mc-month-view\n        *ngSwitchCase=\"'month'\"\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\">\n    </mc-month-view>\n\n    <mc-year-view\n        *ngSwitchCase=\"'year'\"\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        (monthSelected)=\"monthSelectedInYearView($event)\"\n        (selectedChange)=\"goToDateInView($event, 'multi-year')\">\n    </mc-year-view>\n\n    <mc-multi-year-view\n        *ngSwitchCase=\"'multi-year'\"\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n        (selectedChange)=\"goToDateInView($event, 'month')\">\n    </mc-multi-year-view>\n</div>\n", styles: [".mc-calendar{display:block}.mc-calendar-header{display:flex;padding:16px 8px 12px;padding:var(--mc-datepicker-calendar-size-padding-top, 16px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-blocks, 12px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px)}.mc-calendar__content{padding:0 8px 8px;padding:0 var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px);outline:none}.mc-calendar-spacer{flex:1 1 auto}.mc-calendar__period-button{min-width:0}.mc-calendar__period-button .mc-icon{vertical-align:baseline}.mc-calendar__previous-button:after{border-left-width:2px;border-left-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(2px) rotate(-45deg);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar__next-button:after{border-right-width:2px;border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(-2px) rotate(45deg);transform:var(--mc-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.mc-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.mc-calendar__table-header th{text-align:center;height:30px}.mc-calendar__table-header th.mc-calendar__table-header-divider{position:relative;height:10px;height:calc(var(--mc-datepicker-calendar-size-padding-blocks, 12px) - 2px)}.mc-calendar__table-header th.mc-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;left:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:-8px;right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));height:1px;height:var(--mc-datepicker-calendar-size-divider-width, 1px)}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mc-calendar-header\n    [(activeDate)]=\"activeDate\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\">\n</mc-calendar-header>\n\n<div class=\"mc-calendar__content\">\n    <mc-month-view\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\">\n    </mc-month-view>\n</div>\n", styles: [".mc-calendar{display:block}.mc-calendar__content{padding:0 8px 8px;padding:0 var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px);outline:none}.mc-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.mc-calendar__table-header th{text-align:center;height:30px}.mc-calendar__table-header th.mc-calendar__table-header-divider{position:relative;height:10px;height:calc(var(--mc-datepicker-calendar-size-padding-blocks, 12px) - 2px)}.mc-calendar__table-header th.mc-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:-8px;left:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:-8px;right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));height:1px;height:var(--mc-datepicker-calendar-size-divider-width, 1px)}\n"] }]
         }], ctorParameters: function () { return [{ type: McDatepickerIntl }, { type: i1$1.DateAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -1063,10 +573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], headerComponent: [{
-                type: Input
-            }], startView: [{
-                type: Input
             }], dateFilter: [{
                 type: Input
             }], dateClass: [{
@@ -1082,129 +588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], monthView: [{
                 type: ViewChild,
                 args: [McMonthView, { static: false }]
-            }], yearView: [{
-                type: ViewChild,
-                args: [McYearView, { static: false }]
-            }], multiYearView: [{
-                type: ViewChild,
-                args: [McMultiYearView, { static: false }]
             }] } });
-/** Default header for McCalendar */
-class McCalendarHeader {
-    constructor(intl, calendar, dateAdapter, dateFormats, changeDetectorRef) {
-        this.intl = intl;
-        this.calendar = calendar;
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
-    }
-    /** The label for the current calendar view. */
-    get periodButtonText() {
-        if (this.calendar.currentView === McCalendarView.Month) {
-            const label = this.dateAdapter.format(this.calendar.activeDate, this.dateFormats.monthYearLabel);
-            return (label[0].toLocaleUpperCase() + label.substr(1)).replace('.', '');
-        }
-        if (this.calendar.currentView === McCalendarView.Year) {
-            return this.dateAdapter.getYearName(this.calendar.activeDate);
-        }
-        const activeYear = this.dateAdapter.getYear(this.calendar.activeDate);
-        const firstYearInView = this.dateAdapter.getYearName(
-        // tslint:disable-next-line:no-magic-numbers
-        this.dateAdapter.createDate(activeYear - activeYear % 24));
-        const lastYearInView = this.dateAdapter.getYearName(
-        // tslint:disable-next-line:no-magic-numbers
-        this.dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24));
-        return `${firstYearInView} \u2013 ${lastYearInView}`;
-    }
-    get periodButtonLabel() {
-        return this.calendar.currentView === McCalendarView.Month ?
-            this.intl.switchToMultiYearViewLabel : this.intl.switchToMonthViewLabel;
-    }
-    /** The label for the previous button. */
-    get prevButtonLabel() {
-        return {
-            [McCalendarView.Month]: this.intl.prevMonthLabel,
-            [McCalendarView.Year]: this.intl.prevYearLabel,
-            [McCalendarView.MultiYear]: this.intl.prevMultiYearLabel
-        }[this.calendar.currentView];
-    }
-    /** The label for the next button. */
-    get nextButtonLabel() {
-        return {
-            [McCalendarView.Month]: this.intl.nextMonthLabel,
-            [McCalendarView.Year]: this.intl.nextYearLabel,
-            [McCalendarView.MultiYear]: this.intl.nextMultiYearLabel
-        }[this.calendar.currentView];
-    }
-    /** Handles user clicks on the period label. */
-    currentPeriodClicked() {
-        if ([McCalendarView.Month, McCalendarView.MultiYear].includes(this.calendar.currentView)) {
-            this.calendar.currentView = McCalendarView.Year;
-        }
-        else if (this.calendar.currentView === McCalendarView.Year) {
-            this.calendar.currentView = McCalendarView.Month;
-        }
-    }
-    /** Handles user clicks on the previous button. */
-    previousClicked() {
-        if (this.calendar.currentView === McCalendarView.Month) {
-            this.calendar.activeDate = this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1);
-        }
-        else {
-            this.calendar.activeDate = this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView === McCalendarView.Year ? -1 : -yearsPerPage);
-        }
-    }
-    /** Handles user clicks on the next button. */
-    nextClicked() {
-        if (this.calendar.currentView === McCalendarView.Month) {
-            this.calendar.activeDate = this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1);
-        }
-        else {
-            this.calendar.activeDate = this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView === McCalendarView.Year ? 1 : yearsPerPage);
-        }
-    }
-    /** Whether the previous period button is enabled. */
-    previousEnabled() {
-        if (!this.calendar.minDate) {
-            return true;
-        }
-        return !this.calendar.minDate || !this.isSameView(this.calendar.activeDate, this.calendar.minDate);
-    }
-    /** Whether the next period button is enabled. */
-    nextEnabled() {
-        return !this.calendar.maxDate || !this.isSameView(this.calendar.activeDate, this.calendar.maxDate);
-    }
-    /** Whether the two dates represent the same view in the current view mode (month or year). */
-    isSameView(firstDate, secondDate) {
-        const firstYear = this.dateAdapter.getYear(firstDate);
-        const secondYear = this.dateAdapter.getYear(secondDate);
-        const firstMonth = this.dateAdapter.getMonth(firstDate);
-        const secondMonth = this.dateAdapter.getMonth(secondDate);
-        if (this.calendar.currentView === McCalendarView.Month) {
-            return firstYear === secondYear && firstMonth === secondMonth;
-        }
-        if (this.calendar.currentView === McCalendarView.Year) {
-            return firstYear === secondYear;
-        }
-        // Otherwise we are in 'multi-year' view.
-        return Math.floor(firstYear / yearsPerPage) === Math.floor(secondYear / yearsPerPage);
-    }
-}
-/** @nocollapse */ McCalendarHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarHeader, deps: [{ token: McDatepickerIntl }, { token: McCalendar }, { token: i1$1.DateAdapter, optional: true }, { token: MC_DATE_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McCalendarHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarHeader, selector: "mc-calendar-header", host: { classAttribute: "mc-calendar-header" }, exportAs: ["mcCalendarHeader"], ngImport: i0, template: "<button mc-button\n        [tabindex]=\"'-1'\"\n        class=\"mc-button_transparent mc-calendar__period-button\"\n        (click)=\"currentPeriodClicked()\">\n    {{ periodButtonText }}\n\n    <i class=\"mc mc-icon\"\n       [class.mc-angle-up-M_16]=\"calendar.currentView !== 'month'\"\n       [class.mc-angle-down-M_16]=\"calendar.currentView === 'month'\">\n    </i>\n</button>\n\n<div class=\"mc-calendar-spacer\"></div>\n\n<button mc-button\n        [tabindex]=\"'-1'\"\n        class=\"mc-button_transparent mc-calendar__previous-button\"\n        [disabled]=\"!previousEnabled()\"\n        (click)=\"previousClicked()\">\n\n    <i mc-icon=\"mc-angle-left-L_16\"></i>\n</button>\n\n<button mc-button\n        [tabindex]=\"'-1'\"\n        class=\"mc-button_transparent mc-calendar__next-button\"\n        [disabled]=\"!nextEnabled()\"\n        (click)=\"nextClicked()\">\n\n    <i mc-icon=\"mc-angle-right-L_16\"></i>\n</button>\n", dependencies: [{ kind: "component", type: i8.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i8.McButtonCssStyler, selector: "[mc-button]" }, { kind: "component", type: i9.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i9.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarHeader, decorators: [{
-            type: Component,
-            args: [{ selector: 'mc-calendar-header', exportAs: 'mcCalendarHeader', host: {
-                        class: 'mc-calendar-header'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mc-button\n        [tabindex]=\"'-1'\"\n        class=\"mc-button_transparent mc-calendar__period-button\"\n        (click)=\"currentPeriodClicked()\">\n    {{ periodButtonText }}\n\n    <i class=\"mc mc-icon\"\n       [class.mc-angle-up-M_16]=\"calendar.currentView !== 'month'\"\n       [class.mc-angle-down-M_16]=\"calendar.currentView === 'month'\">\n    </i>\n</button>\n\n<div class=\"mc-calendar-spacer\"></div>\n\n<button mc-button\n        [tabindex]=\"'-1'\"\n        class=\"mc-button_transparent mc-calendar__previous-button\"\n        [disabled]=\"!previousEnabled()\"\n        (click)=\"previousClicked()\">\n\n    <i mc-icon=\"mc-angle-left-L_16\"></i>\n</button>\n\n<button mc-button\n        [tabindex]=\"'-1'\"\n        class=\"mc-button_transparent mc-calendar__next-button\"\n        [disabled]=\"!nextEnabled()\"\n        (click)=\"nextClicked()\">\n\n    <i mc-icon=\"mc-angle-right-L_16\"></i>\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: McDatepickerIntl }, { type: McCalendar }, { type: i1$1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MC_DATE_FORMATS]
-                }] }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Animations used by the mosaic datepicker.
@@ -1282,7 +666,7 @@ class McDatepickerContent {
     }
 }
 /** @nocollapse */ McDatepickerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McDatepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McDatepickerContent, selector: "mc-datepicker__content", host: { listeners: { "@transformPanel.done": "animationDone.next()" }, properties: { "@transformPanel": "animationState" }, classAttribute: "mc-datepicker__content" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: McCalendar, descendants: true }], exportAs: ["mcDatepickerContent"], ngImport: i0, template: "<mc-calendar [id]=\"datepicker.id\"\n             [ngClass]=\"datepicker.panelClass\"\n             [startAt]=\"datepicker.startAt\"\n             [startView]=\"datepicker.startView\"\n             [minDate]=\"datepicker.minDate\"\n             [maxDate]=\"datepicker.maxDate\"\n             [dateFilter]=\"datepicker.dateFilter\"\n             [headerComponent]=\"datepicker.calendarHeaderComponent\"\n             [selected]=\"datepicker.selected\"\n             [dateClass]=\"datepicker.dateClass\"\n             [@fadeInCalendar]=\"'enter'\"\n             (selectedChange)=\"datepicker.select($event)\"\n             (yearSelected)=\"datepicker.selectYear($event)\"\n             (monthSelected)=\"datepicker.selectMonth($event)\"\n             (userSelection)=\"datepicker.close()\">\n</mc-calendar>\n", styles: [".mc-datepicker__content{display:block;border-width:1px;border-style:solid;border-radius:0;border-radius:var(--mc-datepicker-calendar-size-border-radius, 0)}.mc-datepicker__content .mc-calendar{width:296px;height:348px}.mc-datepicker__content .mc-calendar__next-button[disabled],.mc-datepicker__content .mc-calendar__previous-button[disabled]{border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: McCalendar, selector: "mc-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "headerComponent", "startView", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["mcCalendar"] }], animations: [
+/** @nocollapse */ McDatepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McDatepickerContent, selector: "mc-datepicker__content", host: { listeners: { "@transformPanel.done": "animationDone.next()" }, properties: { "@transformPanel": "animationState" }, classAttribute: "mc-datepicker__content" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: McCalendar, descendants: true }], exportAs: ["mcDatepickerContent"], ngImport: i0, template: "<mc-calendar [id]=\"datepicker.id\"\n             [@fadeInCalendar]=\"'enter'\"\n             [ngClass]=\"datepicker.panelClass\"\n             [dateClass]=\"datepicker.dateClass\"\n\n             [startAt]=\"datepicker.startAt\"\n             [minDate]=\"datepicker.minDate\"\n             [maxDate]=\"datepicker.maxDate\"\n             [dateFilter]=\"datepicker.dateFilter\"\n\n             [selected]=\"datepicker.selected\"\n\n             (selectedChange)=\"datepicker.select($event)\"\n             (yearSelected)=\"datepicker.selectYear($event)\"\n             (monthSelected)=\"datepicker.selectMonth($event)\"\n             (userSelection)=\"datepicker.close()\">\n</mc-calendar>\n", styles: [".mc-datepicker__content{display:block;border-width:1px;border-style:solid;border-radius:0;border-radius:var(--mc-datepicker-calendar-size-border-radius, 0)}.mc-datepicker__content .mc-calendar{width:296px;height:348px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: McCalendar, selector: "mc-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["mcCalendar"] }], animations: [
         mcDatepickerAnimations.transformPanel,
         mcDatepickerAnimations.fadeInCalendar
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1295,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     }, animations: [
                         mcDatepickerAnimations.transformPanel,
                         mcDatepickerAnimations.fadeInCalendar
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mc-calendar [id]=\"datepicker.id\"\n             [ngClass]=\"datepicker.panelClass\"\n             [startAt]=\"datepicker.startAt\"\n             [startView]=\"datepicker.startView\"\n             [minDate]=\"datepicker.minDate\"\n             [maxDate]=\"datepicker.maxDate\"\n             [dateFilter]=\"datepicker.dateFilter\"\n             [headerComponent]=\"datepicker.calendarHeaderComponent\"\n             [selected]=\"datepicker.selected\"\n             [dateClass]=\"datepicker.dateClass\"\n             [@fadeInCalendar]=\"'enter'\"\n             (selectedChange)=\"datepicker.select($event)\"\n             (yearSelected)=\"datepicker.selectYear($event)\"\n             (monthSelected)=\"datepicker.selectMonth($event)\"\n             (userSelection)=\"datepicker.close()\">\n</mc-calendar>\n", styles: [".mc-datepicker__content{display:block;border-width:1px;border-style:solid;border-radius:0;border-radius:var(--mc-datepicker-calendar-size-border-radius, 0)}.mc-datepicker__content .mc-calendar{width:296px;height:348px}.mc-datepicker__content .mc-calendar__next-button[disabled],.mc-datepicker__content .mc-calendar__previous-button[disabled]{border:0}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mc-calendar [id]=\"datepicker.id\"\n             [@fadeInCalendar]=\"'enter'\"\n             [ngClass]=\"datepicker.panelClass\"\n             [dateClass]=\"datepicker.dateClass\"\n\n             [startAt]=\"datepicker.startAt\"\n             [minDate]=\"datepicker.minDate\"\n             [maxDate]=\"datepicker.maxDate\"\n             [dateFilter]=\"datepicker.dateFilter\"\n\n             [selected]=\"datepicker.selected\"\n\n             (selectedChange)=\"datepicker.select($event)\"\n             (yearSelected)=\"datepicker.selectYear($event)\"\n             (monthSelected)=\"datepicker.selectMonth($event)\"\n             (userSelection)=\"datepicker.close()\">\n</mc-calendar>\n", styles: [".mc-datepicker__content{display:block;border-width:1px;border-style:solid;border-radius:0;border-radius:var(--mc-datepicker-calendar-size-border-radius, 0)}.mc-datepicker__content .mc-calendar{width:296px;height:348px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { calendar: [{
                 type: ViewChild,
                 args: [McCalendar]
@@ -1314,8 +698,6 @@ class McDatepicker {
         this.document = document;
         this._hasBackdrop = false;
         this._opened = false;
-        /** The view that the calendar should start in. */
-        this.startView = McCalendarView.Month;
         /**
          * Emits selected year in multiyear view.
          * This doesn't imply a change on the selected date.
@@ -1359,10 +741,12 @@ class McDatepicker {
     get startAt() {
         // If an explicit startAt is set we start there, otherwise we start at whatever the currently
         // selected value is.
-        return this._startAt || (this.datepickerInput ? this.datepickerInput.value : null);
+        return this._startAt || this.datepickerInput?.value;
     }
     set startAt(value) {
-        this._startAt = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        const deserializedValue = this.dateAdapter.deserialize(value);
+        this._startAt = deserializedValue !== null ?
+            this.dateAdapter.clampDate(deserializedValue, this.minDate, this.maxDate) : null;
     }
     /** Whether the datepicker pop-up should be disabled. */
     get disabled() {
@@ -1497,7 +881,7 @@ class McDatepicker {
             // Update the position once the calendar has rendered.
             this.ngZone.onStable.asObservable()
                 .pipe(take(1))
-                .subscribe(() => this.popupRef.updatePosition());
+                .subscribe(() => this.popupRef?.updatePosition());
         }
     }
     /** Create the popup. */
@@ -1555,16 +939,9 @@ class McDatepicker {
             }
         ]);
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    getValidDateOrNull(obj) {
-        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
-    }
 }
-/** @nocollapse */ McDatepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepicker, deps: [{ token: i3.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: MC_DATEPICKER_SCROLL_STRATEGY }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McDatepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McDatepicker, selector: "mc-datepicker", inputs: { hasBackdrop: "hasBackdrop", startAt: "startAt", disabled: "disabled", opened: "opened", minDate: "minDate", maxDate: "maxDate", calendarHeaderComponent: "calendarHeaderComponent", startView: "startView", panelClass: "panelClass", dateClass: "dateClass", backdropClass: "backdropClass" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", openedStream: "opened", closedStream: "closed" }, providers: [{ provide: McFormFieldControl, useExisting: McDatepicker }], exportAs: ["mcDatepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ McDatepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepicker, deps: [{ token: i3$1.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: MC_DATEPICKER_SCROLL_STRATEGY }, { token: i1$1.DateAdapter, optional: true }, { token: i5$1.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McDatepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McDatepicker, selector: "mc-datepicker", inputs: { hasBackdrop: "hasBackdrop", startAt: "startAt", disabled: "disabled", opened: "opened", minDate: "minDate", maxDate: "maxDate", panelClass: "panelClass", dateClass: "dateClass", backdropClass: "backdropClass" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", openedStream: "opened", closedStream: "closed" }, providers: [{ provide: McFormFieldControl, useExisting: McDatepicker }], exportAs: ["mcDatepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepicker, decorators: [{
             type: Component,
             args: [{
@@ -1575,12 +952,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     providers: [{ provide: McFormFieldControl, useExisting: McDatepicker }]
                 }]
-        }], ctorParameters: function () { return [{ type: i3.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i3$1.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MC_DATEPICKER_SCROLL_STRATEGY]
                 }] }, { type: i1$1.DateAdapter, decorators: [{
                     type: Optional
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i5$1.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -1599,10 +976,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], calendarHeaderComponent: [{
-                type: Input
-            }], startView: [{
-                type: Input
             }], yearSelected: [{
                 type: Output
             }], monthSelected: [{
@@ -1734,10 +1107,10 @@ class McDatepickerInputEvent {
 let uniqueComponentIdSuffix = 0;
 /** Directive used to connect an input to a McDatepicker. */
 class McDatepickerInput {
-    constructor(elementRef, renderer, dateAdapter, dateFormats) {
+    constructor(elementRef, renderer, adapter, dateFormats) {
         this.elementRef = elementRef;
         this.renderer = renderer;
-        this.dateAdapter = dateAdapter;
+        this.adapter = adapter;
         this.dateFormats = dateFormats;
         this.stateChanges = new Subject();
         this.controlType = 'datepicker';
@@ -1757,6 +1130,9 @@ class McDatepickerInput {
         this.localeSubscription = Subscription.EMPTY;
         /** Whether the last value set on the input was valid. */
         this.lastValueValid = false;
+        this.firstDigit = null;
+        this.secondDigit = null;
+        this.thirdDigit = null;
         // tslint:disable-next-line:no-empty
         this.onTouched = () => { };
         this.onInput = () => {
@@ -1779,7 +1155,7 @@ class McDatepickerInput {
             this.updateValue(newTimeObj);
         };
         this.parseOnBlur = () => {
-            if (!this.viewValue) {
+            if (!this.viewValue || !this.readyForParse) {
                 return null;
             }
             const date = this.getDefaultValue();
@@ -1836,21 +1212,21 @@ class McDatepickerInput {
         };
         /** The form control validator for the min date. */
         this.minValidator = (control) => {
-            const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
-            return !this.min || !controlValue || this.dateAdapter.compareDateTime(this.min, controlValue) <= 0 ?
+            const controlValue = this.adapter.deserialize(control.value);
+            return !this.min || !controlValue || this.adapter.compareDateTime(this.min, controlValue) <= 0 ?
                 null :
                 { mcDatepickerMin: { min: this.min, actual: controlValue } };
         };
         /** The form control validator for the max date. */
         this.maxValidator = (control) => {
-            const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
-            return !this.max || !controlValue || this.dateAdapter.compareDateTime(this.max, controlValue) >= 0 ?
+            const controlValue = this.adapter.deserialize(control.value);
+            return !this.max || !controlValue || this.adapter.compareDateTime(this.max, controlValue) >= 0 ?
                 null :
                 { mcDatepickerMax: { max: this.max, actual: controlValue } };
         };
         /** The form control validator for the date filter. */
         this.filterValidator = (control) => {
-            const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
+            const controlValue = this.adapter.deserialize(control.value);
             return !this.dateFilter || !controlValue || this.dateFilter(controlValue) ?
                 null : { mcDatepickerFilter: true };
         };
@@ -1860,14 +1236,14 @@ class McDatepickerInput {
             this.maxValidator,
             this.filterValidator
         ]);
-        if (!this.dateAdapter) {
+        if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
         if (!this.dateFormats) {
             throw createMissingDateImplError('MC_DATE_FORMATS');
         }
         this.setFormat(dateFormats.dateInput);
-        this.localeSubscription = dateAdapter.localeChanges
+        this.localeSubscription = adapter.localeChanges
             .subscribe(this.updateLocaleParams);
     }
     get required() {
@@ -1903,13 +1279,13 @@ class McDatepickerInput {
         return this._value;
     }
     set value(value) {
-        let newValue = this.dateAdapter.deserialize(value);
-        this.lastValueValid = !newValue || this.dateAdapter.isValid(newValue);
+        let newValue = this.adapter.deserialize(value);
+        this.lastValueValid = !newValue || this.adapter.isValid(newValue);
         newValue = this.getValidDateOrNull(newValue);
         const oldDate = this.value;
         this._value = newValue;
         this.formatValue(newValue);
-        if (!this.dateAdapter.sameDate(oldDate, newValue)) {
+        if (!this.adapter.sameDate(oldDate, newValue)) {
             this.valueChange.emit(newValue);
         }
     }
@@ -1918,7 +1294,7 @@ class McDatepickerInput {
         return this._min;
     }
     set min(value) {
-        this._min = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this._min = this.adapter.deserialize(value);
         this.validatorOnChange();
     }
     /** The maximum valid date. */
@@ -1926,7 +1302,7 @@ class McDatepickerInput {
         return this._max;
     }
     set max(value) {
-        this._max = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this._max = this.adapter.deserialize(value);
         this.validatorOnChange();
     }
     /** Whether the datepicker-input is disabled. */
@@ -1981,6 +1357,9 @@ class McDatepickerInput {
     get isReadOnly() {
         return this.elementRef.nativeElement.readOnly;
     }
+    get readyForParse() {
+        return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
+    }
     get selectionStart() {
         return this.elementRef.nativeElement.selectionStart;
     }
@@ -2122,20 +1501,20 @@ class McDatepickerInput {
         this.updateValue(newTimeObj);
     }
     toISO8601(value) {
-        return this.dateAdapter.toIso8601(value);
+        return this.adapter.toIso8601(value);
     }
     saveTimePart(selected) {
         if (!this.value) {
             return selected;
         }
-        const years = this.dateAdapter.getYear(selected);
-        const month = this.dateAdapter.getMonth(selected);
-        const day = this.dateAdapter.getDate(selected);
-        const hours = this.dateAdapter.getHours(this.value);
-        const minutes = this.dateAdapter.getMinutes(this.value);
-        const seconds = this.dateAdapter.getSeconds(this.value);
-        const milliseconds = this.dateAdapter.getMilliseconds(this.value);
-        return this.dateAdapter.createDateTime(years, month, day, hours, minutes, seconds, milliseconds);
+        const years = this.adapter.getYear(selected);
+        const month = this.adapter.getMonth(selected);
+        const day = this.adapter.getDate(selected);
+        const hours = this.adapter.getHours(this.value);
+        const minutes = this.adapter.getMinutes(this.value);
+        const seconds = this.adapter.getSeconds(this.value);
+        const milliseconds = this.adapter.getMilliseconds(this.value);
+        return this.adapter.createDateTime(years, month, day, hours, minutes, seconds, milliseconds);
     }
     setFormat(format) {
         // @ts-ignore
@@ -2146,7 +1525,7 @@ class McDatepickerInput {
         this.getDigitPositions(format);
     }
     updateValue(newValue) {
-        if (!this.dateAdapter.sameDate(newValue, this.value)) {
+        if (!this.adapter.sameDate(newValue, this.value)) {
             this._value = newValue;
             this.cvaOnChange(newValue);
             this.valueChange.emit(newValue);
@@ -2214,7 +1593,9 @@ class McDatepickerInput {
                 return null;
             }
             date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
-            date.month = 1;
+            if (this.firstDigit.isDay) {
+                date.month = 1;
+            }
             // tslint:disable-next-line:no-magic-numbers
         }
         else if (viewDigits.length === 2) {
@@ -2241,22 +1622,22 @@ class McDatepickerInput {
         return this.createDateTime(date);
     }
     getDefaultValue() {
-        const defaultValue = this.value || this.dateAdapter.today();
+        const defaultValue = this.value || this.adapter.today();
         return {
-            year: this.dateAdapter.getYear(defaultValue),
-            month: this.dateAdapter.getMonth(defaultValue),
-            date: this.dateAdapter.getDate(defaultValue),
-            hours: this.dateAdapter.getHours(defaultValue),
-            minutes: this.dateAdapter.getMinutes(defaultValue),
-            seconds: this.dateAdapter.getSeconds(defaultValue),
-            milliseconds: this.dateAdapter.getMilliseconds(defaultValue)
+            year: this.adapter.getYear(defaultValue),
+            month: this.adapter.getMonth(defaultValue),
+            date: this.adapter.getDate(defaultValue),
+            hours: this.adapter.getHours(defaultValue),
+            minutes: this.adapter.getMinutes(defaultValue),
+            seconds: this.adapter.getSeconds(defaultValue),
+            milliseconds: this.adapter.getMilliseconds(defaultValue)
         };
     }
     getTimeStringFromDate(value, timeFormat) {
-        if (!value || !this.dateAdapter.isValid(value)) {
+        if (!value || !this.adapter.isValid(value)) {
             return '';
         }
-        return this.dateAdapter.format(value, timeFormat);
+        return this.adapter.format(value, timeFormat);
     }
     getDateEditMetrics(cursorPosition) {
         for (const digit of [this.firstDigit, this.secondDigit, this.thirdDigit]) {
@@ -2267,13 +1648,13 @@ class McDatepickerInput {
         return [this.thirdDigit.value, this.thirdDigit.start, this.thirdDigit.end];
     }
     incrementDate(dateVal, whatToIncrement) {
-        let year = this.dateAdapter.getYear(dateVal);
-        let month = this.dateAdapter.getMonth(dateVal);
-        let day = this.dateAdapter.getDate(dateVal);
+        let year = this.adapter.getYear(dateVal);
+        let month = this.adapter.getMonth(dateVal);
+        let day = this.adapter.getDate(dateVal);
         switch (whatToIncrement) {
             case DateParts.day:
                 day++;
-                if (day > this.dateAdapter.getNumDaysInMonth(dateVal)) {
+                if (day > this.adapter.getNumDaysInMonth(dateVal)) {
                     day = 1;
                 }
                 break;
@@ -2299,17 +1680,17 @@ class McDatepickerInput {
         return this.createDate(year, month, day);
     }
     getLastDayFor(year, month) {
-        return this.dateAdapter.getNumDaysInMonth(this.createDate(year, month, 1));
+        return this.adapter.getNumDaysInMonth(this.createDate(year, month, 1));
     }
     decrementDate(dateVal, whatToDecrement) {
-        let year = this.dateAdapter.getYear(dateVal);
-        let month = this.dateAdapter.getMonth(dateVal);
-        let day = this.dateAdapter.getDate(dateVal);
+        let year = this.adapter.getYear(dateVal);
+        let month = this.adapter.getMonth(dateVal);
+        let day = this.adapter.getDate(dateVal);
         switch (whatToDecrement) {
             case DateParts.day:
                 day--;
                 if (day < 1) {
-                    day = this.dateAdapter.getNumDaysInMonth(dateVal);
+                    day = this.adapter.getNumDaysInMonth(dateVal);
                 }
                 break;
             case DateParts.month:
@@ -2404,16 +1785,9 @@ class McDatepickerInput {
     }
     /** Formats a value and sets it on the input element. */
     formatValue(value) {
-        const formattedValue = value ? this.dateAdapter.format(value, this.dateFormats.dateInput) : '';
+        const formattedValue = value ? this.adapter.format(value, this.dateFormats.dateInput) : '';
         this.setViewValue(formattedValue);
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    getValidDateOrNull(obj) {
-        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
-    }
     setControl(control) {
         if (this.control) {
             return;
@@ -2422,7 +1796,15 @@ class McDatepickerInput {
         this.control.valueChanges
             .subscribe((value) => this._value = value);
     }
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    getValidDateOrNull(obj) {
+        return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
+    }
     getDigitPositions(format) {
+        this.firstDigit = this.secondDigit = this.thirdDigit = null;
         const formatInLowerCase = format.toLowerCase();
         formatInLowerCase
             .split('')
@@ -2451,13 +1833,13 @@ class McDatepickerInput {
         }
     }
     createDate(year, month, day) {
-        return this.dateAdapter.createDateTime(year, month, day, this.dateAdapter.getHours(this.value), this.dateAdapter.getMinutes(this.value), this.dateAdapter.getSeconds(this.value), this.dateAdapter.getMilliseconds(this.value));
+        return this.adapter.createDateTime(year, month, day, this.adapter.getHours(this.value), this.adapter.getMinutes(this.value), this.adapter.getSeconds(this.value), this.adapter.getMilliseconds(this.value));
     }
     createDateTime(value) {
         if (Object.values(value).some(isNaN)) {
             return null;
         }
-        return this.getValidDateOrNull(this.dateAdapter.createDateTime(value.year, value.month - 1, value.date, value.hours, value.minutes, value.seconds, value.milliseconds));
+        return this.adapter.createDateTime(value.year, value.month - 1, value.date, value.hours, value.minutes, value.seconds, value.milliseconds);
     }
     correctCursorPosition() {
         if (this.selectionStart && this.separatorPositions.includes(this.selectionStart)) {
@@ -2584,7 +1966,7 @@ class McDatepickerToggle {
     }
 }
 /** @nocollapse */ McDatepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepickerToggle, deps: [{ token: McDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McDatepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McDatepickerToggle, selector: "mc-datepicker-toggle", inputs: { disabled: "disabled", datepicker: ["for", "datepicker"], tabIndex: "tabIndex" }, host: { properties: { "class.mc-active": "datepicker && datepicker.opened" }, classAttribute: "mc-datepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: McDatepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mcDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<!--todo need simplify this-->\n<button\n    #button\n    mc-button\n    type=\"button\"\n    class=\"mc-datepicker-toggle__button\"\n    aria-haspopup=\"true\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [tabIndex]=\"tabIndex\"\n    [disabled]=\"disabled\"\n    (click)=\"open($event)\">\n\n    <i *ngIf=\"!customIcon\" mc-icon=\"mc-calendar_16\" class=\"mc-datepicker-toggle__default-icon\"></i>\n\n    <ng-content select=\"[mcDatepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mc-datepicker-toggle:focus{outline:0}.mc-datepicker-toggle__button.mc-icon-button{width:30px;width:var(--mc-datepicker-toggle-size-width, 30px);height:30px;height:var(--mc-datepicker-toggle-size-height, 30px);margin-left:2px}.mc-form-field-appearance-legacy .mc-form-field-prefix .mc-datepicker-toggle__default-icon,.mc-form-field-appearance-legacy .mc-form-field-suffix .mc-datepicker-toggle__default-icon{width:1em}.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-prefix .mc-datepicker-toggle__default-icon,.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-suffix .mc-datepicker-toggle__default-icon{display:block;width:1.5em;height:1.5em}.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-prefix .mc-icon-button .mc-datepicker-toggle__default-icon,.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-suffix .mc-icon-button .mc-datepicker-toggle__default-icon{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i8.McButtonCssStyler, selector: "[mc-button]" }, { kind: "component", type: i9.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i9.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ McDatepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McDatepickerToggle, selector: "mc-datepicker-toggle", inputs: { disabled: "disabled", datepicker: ["for", "datepicker"], tabIndex: "tabIndex" }, host: { properties: { "class.mc-active": "datepicker && datepicker.opened" }, classAttribute: "mc-datepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: McDatepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mcDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<!--todo need simplify this-->\n<button\n    #button\n    mc-button\n    type=\"button\"\n    class=\"mc-datepicker-toggle__button\"\n    aria-haspopup=\"true\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [tabIndex]=\"tabIndex\"\n    [disabled]=\"disabled\"\n    (click)=\"open($event)\">\n\n    <i *ngIf=\"!customIcon\" mc-icon=\"mc-calendar_16\" class=\"mc-datepicker-toggle__default-icon\"></i>\n\n    <ng-content select=\"[mcDatepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mc-datepicker-toggle:focus{outline:0}.mc-datepicker-toggle__button.mc-icon-button{width:30px;width:var(--mc-datepicker-toggle-size-width, 30px);height:30px;height:var(--mc-datepicker-toggle-size-height, 30px);margin-left:2px}.mc-form-field-appearance-legacy .mc-form-field-prefix .mc-datepicker-toggle__default-icon,.mc-form-field-appearance-legacy .mc-form-field-suffix .mc-datepicker-toggle__default-icon{width:1em}.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-prefix .mc-datepicker-toggle__default-icon,.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-suffix .mc-datepicker-toggle__default-icon{display:block;width:1.5em;height:1.5em}.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-prefix .mc-icon-button .mc-datepicker-toggle__default-icon,.mc-form-field:not(.mc-form-field-appearance-legacy) .mc-form-field-suffix .mc-icon-button .mc-datepicker-toggle__default-icon{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i3.McButtonCssStyler, selector: "[mc-button]" }, { kind: "component", type: i7.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i7.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mc-datepicker-toggle', host: {
@@ -2617,13 +1999,13 @@ class McDatepickerModule {
         McDatepickerToggle,
         McDatepickerToggleIcon,
         McMonthView,
-        McYearView,
-        McMultiYearView,
         McCalendarHeader], imports: [CommonModule,
         McButtonModule,
         OverlayModule,
         A11yModule,
         PortalModule,
+        McButtonModule,
+        McSelectModule,
         McIconModule], exports: [McCalendar,
         McCalendarBody,
         McDatepicker,
@@ -2632,10 +2014,7 @@ class McDatepickerModule {
         McDatepickerToggle,
         McDatepickerToggleIcon,
         McMonthView,
-        McYearView,
-        McMultiYearView,
-        McCalendarHeader,
-        McButtonModule] });
+        McCalendarHeader] });
 /** @nocollapse */ McDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepickerModule, providers: [
         McDatepickerIntl,
         MC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
@@ -2644,7 +2023,9 @@ class McDatepickerModule {
         OverlayModule,
         A11yModule,
         PortalModule,
-        McIconModule, McButtonModule] });
+        McButtonModule,
+        McSelectModule,
+        McIconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2654,6 +2035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         OverlayModule,
                         A11yModule,
                         PortalModule,
+                        McButtonModule,
+                        McSelectModule,
                         McIconModule
                     ],
                     exports: [
@@ -2665,10 +2048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         McDatepickerToggle,
                         McDatepickerToggleIcon,
                         McMonthView,
-                        McYearView,
-                        McMultiYearView,
-                        McCalendarHeader,
-                        McButtonModule
+                        McCalendarHeader
                     ],
                     declarations: [
                         McCalendar,
@@ -2679,8 +2059,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         McDatepickerToggle,
                         McDatepickerToggleIcon,
                         McMonthView,
-                        McYearView,
-                        McMultiYearView,
                         McCalendarHeader
                     ],
                     providers: [
@@ -2694,5 +2072,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MAX_YEAR, MC_DATEPICKER_SCROLL_STRATEGY, MC_DATEPICKER_SCROLL_STRATEGY_FACTORY, MC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MC_DATEPICKER_VALIDATORS, MC_DATEPICKER_VALUE_ACCESSOR, McCalendar, McCalendarBody, McCalendarCell, McCalendarHeader, McCalendarView, McDatepicker, McDatepickerContent, McDatepickerInput, McDatepickerInputEvent, McDatepickerIntl, McDatepickerModule, McDatepickerToggle, McDatepickerToggleIcon, McMonthView, McMultiYearView, McYearView, mcDatepickerAnimations, yearsPerPage, yearsPerRow };
+export { MAX_YEAR, MC_DATEPICKER_SCROLL_STRATEGY, MC_DATEPICKER_SCROLL_STRATEGY_FACTORY, MC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MC_DATEPICKER_VALIDATORS, MC_DATEPICKER_VALUE_ACCESSOR, McCalendar, McCalendarBody, McCalendarCell, McCalendarHeader, McDatepicker, McDatepickerContent, McDatepickerInput, McDatepickerInputEvent, McDatepickerIntl, McDatepickerModule, McDatepickerToggle, McDatepickerToggleIcon, McMonthView, mcDatepickerAnimations };
 //# sourceMappingURL=ptsecurity-mosaic-datepicker.mjs.map