@ptsecurity/mosaic 15.6.0 → 16.1.0

package/{fesm2020 → fesm2022}/ptsecurity-mosaic-datepicker.mjs

@@ -5,7 +5,7 @@ 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 { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Injectable, Optional, ViewChild, InjectionToken, Inject, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
 import * as i3 from '@ptsecurity/mosaic/button';
 import { McButtonModule } from '@ptsecurity/mosaic/button';
 import * as i6 from '@ptsecurity/mosaic/icon';
@@ -13,7 +13,7 @@ import { McIconModule } from '@ptsecurity/mosaic/icon';
 import * as i5 from '@ptsecurity/mosaic/select';
 import { McSelectModule } from '@ptsecurity/mosaic/select';
 import * as i1$1 from '@ptsecurity/mosaic/core';
-import { MC_DATE_FORMATS, validationTooltipShowDelay, validationTooltipHideDelay, MC_LOCALE_SERVICE } from '@ptsecurity/mosaic/core';
+import { validationTooltipShowDelay, validationTooltipHideDelay, MC_DATE_FORMATS, MC_LOCALE_SERVICE } from '@ptsecurity/mosaic/core';
 import * as i4 from '@ptsecurity/mosaic/form-field';
 import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
 import { Subject, Subscription, merge, of } from 'rxjs';
@@ -83,10 +83,10 @@ class McCalendarBody {
         }
         return cellNumber === this.activeCell;
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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: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:var(--mc-datepicker-body-size-cell-margin, 5%);left:var(--mc-datepicker-body-size-cell-margin, 5%);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:var(--mc-datepicker-body-size-cell-border-width, 1px);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 }); }
 }
-/** @nocollapse */ McCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: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:var(--mc-datepicker-body-size-cell-margin, 5%);left:var(--mc-datepicker-body-size-cell-margin, 5%);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:var(--mc-datepicker-body-size-cell-border-width, 1px);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: "15.2.9", ngImport: i0, type: McCalendarBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McCalendarBody, decorators: [{
             type: Component,
             args: [{ selector: '[mc-calendar-body]', exportAs: 'mcCalendarBody', host: {
                         class: 'mc-calendar__body'
@@ -113,19 +113,6 @@ 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;
     }
@@ -159,6 +146,19 @@ class McCalendarHeader {
     get nextDisabled() {
         return this.compareDate(this.activeDate, this.maxDate) >= 0;
     }
+    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 }));
+    }
     ngAfterContentInit() {
         this.updateYearsArray();
         this.updateSelectedValues();
@@ -201,25 +201,26 @@ class McCalendarHeader {
     }
     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];
+        const year = this.adapter.getYear(this.activeDate);
+        this.selectedYear = this.years.find(({ name }) => name === year)
+            || { name: year, value: this.adapter.getYearName(this.activeDate) };
     }
     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);
+        for (let key = minYear; key <= maxYear; key++) {
+            this.years.push({ name: key, value: this.adapter.getYearName(this.adapter.createDate(key)) });
         }
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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.name)\">\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            {{ this.selectedYear.value }}\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.value }}\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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\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: i1$1.McOption, selector: "mc-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["mcOption"] }, { kind: "component", type: i6.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i6.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-/** @nocollapse */ McCalendarHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McCalendarHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\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: i1$1.McOption, selector: "mc-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["mcOption"] }, { kind: "component", type: i6.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i6.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McCalendarHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", 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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\n"] }]
+                    }, 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.name)\">\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            {{ this.selectedYear.value }}\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.value }}\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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DateAdapter }]; }, propDecorators: { activeDate: [{
                 type: Input
             }], maxDate: [{
@@ -269,10 +270,10 @@ class McDatepickerIntl {
         /** A label for the 'switch to year view' button (used by screen readers). */
         this.switchToMultiYearViewLabel = 'Choose month and year';
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerIntl, providedIn: 'root' }); }
 }
-/** @nocollapse */ McDatepickerIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ McDatepickerIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerIntl, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -284,9 +285,29 @@ const DAYS_PER_WEEK = 7;
  * @docs-private
  */
 class McMonthView {
-    constructor(changeDetectorRef, dateFormats, adapter) {
+    /**
+     * The date to display in this month view (everything other than the month and year is ignored).
+     */
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        const oldValue = this._activeDate;
+        this._activeDate = value;
+        if (!this.hasSameMonthAndYear(oldValue, value)) {
+            this.init();
+        }
+    }
+    /** The currently selected date. */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        this._selected = value;
+        this.selectedDate = this.getDateInCurrentMonth(this._selected);
+    }
+    constructor(changeDetectorRef, adapter) {
         this.changeDetectorRef = changeDetectorRef;
-        this.dateFormats = dateFormats;
         this.adapter = adapter;
         /** Emits when a new date is selected. */
         this.selectedChange = new EventEmitter();
@@ -297,9 +318,6 @@ class McMonthView {
         if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
-        if (!this.dateFormats) {
-            throw createMissingDateImplError('MC_DATE_FORMATS');
-        }
         const firstDayOfWeek = this.adapter.getFirstDayOfWeek();
         const narrowWeekdays = this.adapter.getDayOfWeekNames('short');
         const longWeekdays = this.adapter.getDayOfWeekNames('long');
@@ -312,27 +330,6 @@ class McMonthView {
             .concat(weekdays.slice(0, firstDayOfWeek));
         this._activeDate = this.adapter.today();
     }
-    /**
-     * The date to display in this month view (everything other than the month and year is ignored).
-     */
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const oldValue = this._activeDate;
-        this._activeDate = value;
-        if (!this.hasSameMonthAndYear(oldValue, value)) {
-            this.init();
-        }
-    }
-    /** The currently selected date. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = value;
-        this.selectedDate = this.getDateInCurrentMonth(this._selected);
-    }
     ngAfterContentInit() {
         this.init();
     }
@@ -391,18 +388,13 @@ class McMonthView {
         return !!(d1 && d2 && this.adapter.getMonth(d1) === this.adapter.getMonth(d2) &&
             this.adapter.getYear(d1) === this.adapter.getYear(d2));
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McMonthView, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DateAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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 }); }
 }
-/** @nocollapse */ McMonthView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", ngImport: i0, type: McMonthView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", 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           [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
-                }, {
-                    type: Inject,
-                    args: [MC_DATE_FORMATS]
-                }] }, { type: i1$1.DateAdapter, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.DateAdapter, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { activeDate: [{
                 type: Input
@@ -432,39 +424,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * @docs-private
  */
 class McCalendar {
-    constructor(intl, adapter, dateFormats, changeDetectorRef) {
-        this.adapter = adapter;
-        this.dateFormats = dateFormats;
-        this.changeDetectorRef = changeDetectorRef;
-        /** Emits when the currently selected date changes. */
-        this.selectedChange = new EventEmitter();
-        /**
-         * Emits the year chosen in multiyear view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.yearSelected = new EventEmitter();
-        /**
-         * Emits the month chosen in year view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.monthSelected = new EventEmitter();
-        /** Emits when any date is selected. */
-        this.userSelection = new EventEmitter();
-        /**
-         * Emits whenever there is a state change that the header may need to respond to.
-         */
-        this.stateChanges = new Subject();
-        if (!this.adapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        if (!this.dateFormats) {
-            throw createMissingDateImplError('MC_DATE_FORMATS');
-        }
-        this.intlChanges = intl.changes.subscribe(() => {
-            changeDetectorRef.markForCheck();
-            this.stateChanges.next();
-        });
-    }
     /** A date representing the period (month or year) to start the calendar in. */
     get startAt() {
         return this._startAt;
@@ -508,6 +467,35 @@ class McCalendar {
         this._activeDate = this.adapter.clampDate(value || this.getActiveDateDefault(), this.minDate, this.maxDate);
         this.stateChanges.next();
     }
+    constructor(intl, adapter, changeDetectorRef) {
+        this.adapter = adapter;
+        this.changeDetectorRef = changeDetectorRef;
+        /** Emits when the currently selected date changes. */
+        this.selectedChange = new EventEmitter();
+        /**
+         * Emits the year chosen in multiyear view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.yearSelected = new EventEmitter();
+        /**
+         * Emits the month chosen in year view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.monthSelected = new EventEmitter();
+        /** Emits when any date is selected. */
+        this.userSelection = new EventEmitter();
+        /**
+         * Emits whenever there is a state change that the header may need to respond to.
+         */
+        this.stateChanges = new Subject();
+        if (!this.adapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        this.intlChanges = intl.changes.subscribe(() => {
+            changeDetectorRef.markForCheck();
+            this.stateChanges.next();
+        });
+    }
     ngAfterContentInit() {
         this.activeDate = this.getActiveDateDefault();
     }
@@ -551,21 +539,16 @@ class McCalendar {
     getActiveDateDefault() {
         return this.startAt || this.adapter.today();
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McCalendar, deps: [{ token: McDatepickerIntl }, { token: i1$1.DateAdapter, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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 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: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:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));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 }); }
 }
-/** @nocollapse */ McCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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 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: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:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));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: "15.2.9", ngImport: i0, type: McCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'mc-calendar', exportAs: 'mcCalendar', host: {
                         class: 'mc-calendar'
                     }, 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 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: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:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));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: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MC_DATE_FORMATS]
                 }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { startAt: [{
                 type: Input
             }], selected: [{
@@ -666,13 +649,13 @@ class McDatepickerContent {
         this.animationState = 'void';
         this.changeDetectorRef.markForCheck();
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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: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 }); }
 }
-/** @nocollapse */ McDatepickerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McDatepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'mc-datepicker__content', exportAs: 'mcDatepickerContent', host: {
                         class: 'mc-datepicker__content',
@@ -691,48 +674,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 // if angular adds support for `exportAs: '$implicit'` on directives.
 /** Component responsible for managing the datepicker popup/dialog. */
 class McDatepicker {
-    constructor(overlay, ngZone, viewContainerRef, scrollStrategy, dateAdapter, dir, document) {
-        this.overlay = overlay;
-        this.ngZone = ngZone;
-        this.viewContainerRef = viewContainerRef;
-        this.dateAdapter = dateAdapter;
-        this.dir = dir;
-        this.document = document;
-        this._hasBackdrop = false;
-        this._opened = false;
-        /**
-         * Emits selected year in multiyear view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.yearSelected = new EventEmitter();
-        /**
-         * Emits selected month in year view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.monthSelected = new EventEmitter();
-        this.backdropClass = 'cdk-overlay-transparent-backdrop';
-        /** Emits when the datepicker has been opened. */
-        this.openedStream = new EventEmitter();
-        /** Emits when the datepicker has been closed. */
-        this.closedStream = new EventEmitter();
-        this.stateChanges = new Subject();
-        /** Emits when the datepicker is disabled. */
-        this.disabledChange = new Subject();
-        /** Emits new selected date when selected date changes. */
-        this.selectedChanged = new Subject();
-        /** The id for the datepicker calendar. */
-        this.id = `mc-datepicker-${datepickerUid++}`;
-        this.validSelected = null;
-        /** The element that was focused before the datepicker was opened. */
-        this.focusedElementBeforeOpen = null;
-        /** Subscription to value changes in the associated input element. */
-        this.inputSubscription = Subscription.EMPTY;
-        this.closeSubscription = Subscription.EMPTY;
-        if (!this.dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        this.scrollStrategy = scrollStrategy;
-    }
     get hasBackdrop() {
         return this._hasBackdrop;
     }
@@ -781,6 +722,48 @@ class McDatepicker {
     get value() {
         return this.selected;
     }
+    constructor(overlay, ngZone, viewContainerRef, scrollStrategy, dateAdapter, dir, document) {
+        this.overlay = overlay;
+        this.ngZone = ngZone;
+        this.viewContainerRef = viewContainerRef;
+        this.dateAdapter = dateAdapter;
+        this.dir = dir;
+        this.document = document;
+        this._hasBackdrop = false;
+        this._opened = false;
+        /**
+         * Emits selected year in multiyear view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.yearSelected = new EventEmitter();
+        /**
+         * Emits selected month in year view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.monthSelected = new EventEmitter();
+        this.backdropClass = 'cdk-overlay-transparent-backdrop';
+        /** Emits when the datepicker has been opened. */
+        this.openedStream = new EventEmitter();
+        /** Emits when the datepicker has been closed. */
+        this.closedStream = new EventEmitter();
+        this.stateChanges = new Subject();
+        /** Emits when the datepicker is disabled. */
+        this.disabledChange = new Subject();
+        /** Emits new selected date when selected date changes. */
+        this.selectedChanged = new Subject();
+        /** The id for the datepicker calendar. */
+        this.id = `mc-datepicker-${datepickerUid++}`;
+        this.validSelected = null;
+        /** The element that was focused before the datepicker was opened. */
+        this.focusedElementBeforeOpen = null;
+        /** Subscription to value changes in the associated input element. */
+        this.inputSubscription = Subscription.EMPTY;
+        this.closeSubscription = Subscription.EMPTY;
+        if (!this.dateAdapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        this.scrollStrategy = scrollStrategy;
+    }
     ngOnDestroy() {
         this.close();
         this.inputSubscription.unsubscribe();
@@ -941,10 +924,10 @@ class McDatepicker {
             }
         ]);
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", 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 */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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 }); }
 }
-/** @nocollapse */ McDatepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", ngImport: i0, type: McDatepicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'mc-datepicker',
@@ -1109,6 +1092,142 @@ class McDatepickerInputEvent {
 let uniqueComponentIdSuffix = 0;
 /** Directive used to connect an input to a McDatepicker. */
 class McDatepickerInput {
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.usePlaceholderFromInput = true;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+    }
+    /** The datepicker that this input is associated with. */
+    set mcDatepicker(value) {
+        if (!value) {
+            return;
+        }
+        this.datepicker = value;
+        this.datepicker.registerInput(this);
+        this.datepickerSubscription.unsubscribe();
+        this.datepickerSubscription = this.datepicker.selectedChanged
+            .subscribe((selected) => {
+            const newValue = this.saveTimePart(selected);
+            this.value = newValue;
+            this.cvaOnChange(newValue);
+            this.onTouched();
+            this.dateChange.emit(new McDatepickerInputEvent(this, this.elementRef.nativeElement));
+        });
+    }
+    /** Function that can be used to filter out dates within the datepicker. */
+    set mcDatepickerFilter(value) {
+        this.dateFilter = value;
+        this.validatorOnChange();
+    }
+    /** The value of the input. */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        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.adapter.sameDate(oldDate, newValue)) {
+            this.valueChange.emit(newValue);
+        }
+    }
+    /** The minimum valid date. */
+    get min() {
+        return this._min;
+    }
+    set min(value) {
+        this._min = this.adapter.deserialize(value);
+        this.validatorOnChange();
+    }
+    /** The maximum valid date. */
+    get max() {
+        return this._max;
+    }
+    set max(value) {
+        this._max = this.adapter.deserialize(value);
+        this.validatorOnChange();
+    }
+    /** Whether the datepicker-input is disabled. */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        const element = this.elementRef.nativeElement;
+        if (this._disabled !== newValue) {
+            this._disabled = newValue;
+            this.disabledChange.emit(newValue);
+        }
+        // We need to null check the `blur` method, because it's undefined during SSR.
+        if (newValue && element.blur) {
+            // Normally, native input elements automatically blur if they turn disabled. This behavior
+            // is problematic, because it would mean that it triggers another change detection cycle,
+            // which then causes a changed after checked error if the input element was focused before.
+            element.blur();
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this.uid;
+    }
+    set mcValidationTooltip(tooltip) {
+        if (!tooltip) {
+            return;
+        }
+        tooltip.enterDelay = validationTooltipShowDelay;
+        tooltip.trigger = 'manual';
+        tooltip.initListeners();
+        this.incorrectInput.subscribe(() => {
+            if (tooltip.isOpen) {
+                return;
+            }
+            tooltip.show();
+            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
+        });
+    }
+    get empty() {
+        return !this.viewValue && !this.isBadInput();
+    }
+    get viewValue() {
+        return this.elementRef.nativeElement.value;
+    }
+    get ngControl() {
+        return this.control;
+    }
+    get isReadOnly() {
+        return this.elementRef.nativeElement.readOnly;
+    }
+    get dateInputFormat() {
+        return this.dateFormats?.dateInput || this.adapter.config.dateInput;
+    }
+    get readyForParse() {
+        return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
+    }
+    get selectionStart() {
+        return this.elementRef.nativeElement.selectionStart;
+    }
+    set selectionStart(value) {
+        this.elementRef.nativeElement.selectionStart = value;
+    }
+    get selectionEnd() {
+        return this.elementRef.nativeElement.selectionEnd;
+    }
+    set selectionEnd(value) {
+        this.elementRef.nativeElement.selectionEnd = value;
+    }
     constructor(elementRef, renderer, adapter, dateFormats, localeService) {
         this.elementRef = elementRef;
         this.renderer = renderer;
@@ -1197,6 +1316,10 @@ class McDatepickerInput {
                 this.cvaOnChange(null);
                 return setTimeout(() => this.control.updateValueAndValidity());
             }
+            /* Check if the number of days entered does not match the entered month */
+            if (!this.getValidDateOrNull(newTimeObj)) {
+                return null;
+            }
             this.lastValueValid = !!newTimeObj;
             this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
             this.updateValue(newTimeObj);
@@ -1247,149 +1370,10 @@ class McDatepickerInput {
         if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
-        if (!this.dateFormats) {
-            throw createMissingDateImplError('MC_DATE_FORMATS');
-        }
         this.setFormat(this.dateInputFormat);
         this.localeSubscription = adapter.localeChanges
             .subscribe(this.updateLocaleParams);
     }
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.usePlaceholderFromInput = true;
-    }
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-    }
-    /** The datepicker that this input is associated with. */
-    set mcDatepicker(value) {
-        if (!value) {
-            return;
-        }
-        this.datepicker = value;
-        this.datepicker.registerInput(this);
-        this.datepickerSubscription.unsubscribe();
-        this.datepickerSubscription = this.datepicker.selectedChanged
-            .subscribe((selected) => {
-            const newValue = this.saveTimePart(selected);
-            this.value = newValue;
-            this.cvaOnChange(newValue);
-            this.onTouched();
-            this.dateChange.emit(new McDatepickerInputEvent(this, this.elementRef.nativeElement));
-        });
-    }
-    /** Function that can be used to filter out dates within the datepicker. */
-    set mcDatepickerFilter(value) {
-        this.dateFilter = value;
-        this.validatorOnChange();
-    }
-    /** The value of the input. */
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        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.adapter.sameDate(oldDate, newValue)) {
-            this.valueChange.emit(newValue);
-        }
-    }
-    /** The minimum valid date. */
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        this._min = this.adapter.deserialize(value);
-        this.validatorOnChange();
-    }
-    /** The maximum valid date. */
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        this._max = this.adapter.deserialize(value);
-        this.validatorOnChange();
-    }
-    /** Whether the datepicker-input is disabled. */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
-        const element = this.elementRef.nativeElement;
-        if (this._disabled !== newValue) {
-            this._disabled = newValue;
-            this.disabledChange.emit(newValue);
-        }
-        // We need to null check the `blur` method, because it's undefined during SSR.
-        if (newValue && element.blur) {
-            // Normally, native input elements automatically blur if they turn disabled. This behavior
-            // is problematic, because it would mean that it triggers another change detection cycle,
-            // which then causes a changed after checked error if the input element was focused before.
-            element.blur();
-        }
-    }
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this.uid;
-    }
-    set mcValidationTooltip(tooltip) {
-        if (!tooltip) {
-            return;
-        }
-        tooltip.enterDelay = validationTooltipShowDelay;
-        tooltip.trigger = 'manual';
-        tooltip.initListeners();
-        this.incorrectInput.subscribe(() => {
-            if (tooltip.isOpen) {
-                return;
-            }
-            tooltip.show();
-            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
-        });
-    }
-    get empty() {
-        return !this.viewValue && !this.isBadInput();
-    }
-    get viewValue() {
-        return this.elementRef.nativeElement.value;
-    }
-    get ngControl() {
-        return this.control;
-    }
-    get isReadOnly() {
-        return this.elementRef.nativeElement.readOnly;
-    }
-    get dateInputFormat() {
-        return this.localeService?.getParams('datepicker').dateInput || this.dateFormats.dateInput;
-    }
-    get readyForParse() {
-        return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
-    }
-    get selectionStart() {
-        return this.elementRef.nativeElement.selectionStart;
-    }
-    set selectionStart(value) {
-        this.elementRef.nativeElement.selectionStart = value;
-    }
-    get selectionEnd() {
-        return this.elementRef.nativeElement.selectionEnd;
-    }
-    set selectionEnd(value) {
-        this.elementRef.nativeElement.selectionEnd = value;
-    }
     onContainerClick() {
         this.focus();
     }
@@ -1632,6 +1616,14 @@ class McDatepickerInput {
                 thirdViewDigit.length < this.thirdDigit.length) {
                 return null;
             }
+            const digitViewValue = {};
+            const dateDigits = [this.firstDigit, this.secondDigit, this.thirdDigit];
+            for (const [index, dateDigit] of dateDigits.entries()) {
+                digitViewValue[dateDigit.fullName] = parseInt(viewDigits[index]);
+            }
+            if (this.value && digitViewValue.month && digitViewValue.month <= this.firstDigit.maxMonth) {
+                dateDigits.forEach((digit) => digit.maxDays = this.getLastDayFor(digitViewValue.year, digitViewValue.month - 1));
+            }
             date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
             date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
             date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
@@ -1639,7 +1631,7 @@ class McDatepickerInput {
         else {
             return null;
         }
-        return this.createDateTime(date);
+        return this.getValidDateOrNull(this.createDateTime(date));
     }
     getDefaultValue() {
         const defaultValue = this.value || this.adapter.today();
@@ -1866,14 +1858,14 @@ class McDatepickerInput {
             this.selectionStart = this.selectionStart - 1;
         }
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: MC_DATE_FORMATS, optional: true }, { token: MC_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: McDatepickerInput, selector: "input[mcDatepicker]", inputs: { placeholder: "placeholder", required: "required", mcDatepicker: "mcDatepicker", mcDatepickerFilter: "mcDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", mcValidationTooltip: "mcValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "mc-input mc-datepicker" }, providers: [
+            MC_DATEPICKER_VALUE_ACCESSOR,
+            MC_DATEPICKER_VALIDATORS,
+            { provide: McFormFieldControl, useExisting: McDatepickerInput }
+        ], exportAs: ["mcDatepickerInput"], ngImport: i0 }); }
 }
-/** @nocollapse */ McDatepickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: MC_DATE_FORMATS, optional: true }, { token: MC_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McDatepickerInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: McDatepickerInput, selector: "input[mcDatepicker]", inputs: { placeholder: "placeholder", required: "required", mcDatepicker: "mcDatepicker", mcDatepickerFilter: "mcDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", mcValidationTooltip: "mcValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "mc-input mc-datepicker" }, providers: [
-        MC_DATEPICKER_VALUE_ACCESSOR,
-        MC_DATEPICKER_VALIDATORS,
-        { provide: McFormFieldControl, useExisting: McDatepickerInput }
-    ], exportAs: ["mcDatepickerInput"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mcDatepicker]',
@@ -1940,21 +1932,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 /** Can be used to override the icon of a `mcDatepickerToggle`. */
 class McDatepickerToggleIcon {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: McDatepickerToggleIcon, selector: "[mcDatepickerToggleIcon]", ngImport: i0 }); }
 }
-/** @nocollapse */ McDatepickerToggleIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McDatepickerToggleIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: McDatepickerToggleIcon, selector: "[mcDatepickerToggleIcon]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mcDatepickerToggleIcon]'
                 }]
         }] });
 class McDatepickerToggle {
-    constructor(intl, changeDetectorRef) {
-        this.intl = intl;
-        this.changeDetectorRef = changeDetectorRef;
-        this.stateChanges = Subscription.EMPTY;
-    }
     /** Whether the toggle button is disabled. */
     get disabled() {
         return this._disabled === undefined ? this.datepicker.disabled : this._disabled;
@@ -1962,6 +1949,11 @@ class McDatepickerToggle {
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
     }
+    constructor(intl, changeDetectorRef) {
+        this.intl = intl;
+        this.changeDetectorRef = changeDetectorRef;
+        this.stateChanges = Subscription.EMPTY;
+    }
     ngOnChanges(changes) {
         if (changes.datepicker) {
             this.watchStateChanges();
@@ -1989,10 +1981,10 @@ class McDatepickerToggle {
         this.stateChanges.unsubscribe();
         this.stateChanges = merge(this.intl.changes, datepickerDisabled, inputDisabled, datepickerToggled).subscribe(() => this.changeDetectorRef.markForCheck());
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerToggle, deps: [{ token: McDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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:var(--mc-datepicker-toggle-size-width, 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: i6.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i6.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-/** @nocollapse */ McDatepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerToggle, deps: [{ token: McDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McDatepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:var(--mc-datepicker-toggle-size-width, 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: i6.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i6.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mc-datepicker-toggle', host: {
                         class: 'mc-datepicker-toggle',
@@ -2014,44 +2006,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class McDatepickerModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerModule, declarations: [McCalendar,
+            McCalendarBody,
+            McDatepicker,
+            McDatepickerContent,
+            McDatepickerInput,
+            McDatepickerToggle,
+            McDatepickerToggleIcon,
+            McMonthView,
+            McCalendarHeader], imports: [CommonModule,
+            McButtonModule,
+            OverlayModule,
+            A11yModule,
+            PortalModule,
+            McButtonModule,
+            McSelectModule,
+            McIconModule], exports: [McCalendar,
+            McCalendarBody,
+            McDatepicker,
+            McDatepickerContent,
+            McDatepickerInput,
+            McDatepickerToggle,
+            McDatepickerToggleIcon,
+            McMonthView,
+            McCalendarHeader] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerModule, providers: [
+            McDatepickerIntl,
+            MC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
+        ], imports: [CommonModule,
+            McButtonModule,
+            OverlayModule,
+            A11yModule,
+            PortalModule,
+            McButtonModule,
+            McSelectModule,
+            McIconModule] }); }
 }
-/** @nocollapse */ McDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerModule, declarations: [McCalendar,
-        McCalendarBody,
-        McDatepicker,
-        McDatepickerContent,
-        McDatepickerInput,
-        McDatepickerToggle,
-        McDatepickerToggleIcon,
-        McMonthView,
-        McCalendarHeader], imports: [CommonModule,
-        McButtonModule,
-        OverlayModule,
-        A11yModule,
-        PortalModule,
-        McButtonModule,
-        McSelectModule,
-        McIconModule], exports: [McCalendar,
-        McCalendarBody,
-        McDatepicker,
-        McDatepickerContent,
-        McDatepickerInput,
-        McDatepickerToggle,
-        McDatepickerToggleIcon,
-        McMonthView,
-        McCalendarHeader] });
-/** @nocollapse */ McDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerModule, providers: [
-        McDatepickerIntl,
-        MC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
-    ], imports: [CommonModule,
-        McButtonModule,
-        OverlayModule,
-        A11yModule,
-        PortalModule,
-        McButtonModule,
-        McSelectModule,
-        McIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [