Google Git
Sign in
apache / nifi-fds / 6435e394f6c7c31d3f61a4bfc9702bde2a1659fa / . / node_modules / @angular / material / bundles / material-datepicker.umd.js
blob: 93cc73140817239ff7e47c1801958fdce188d030 [file] [log] [blame]
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/keycodes'), require('@angular/material/core'), require('@angular/cdk/bidi'), require('@angular/cdk/portal'), require('@angular/animations'), require('@angular/cdk/coercion'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/button'), require('@angular/cdk/a11y')) :
typeof define === 'function' && define.amd ? define('@angular/material/datepicker', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/cdk/keycodes', '@angular/material/core', '@angular/cdk/bidi', '@angular/cdk/portal', '@angular/animations', '@angular/cdk/coercion', '@angular/cdk/overlay', '@angular/common', '@angular/material/dialog', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/button', '@angular/cdk/a11y'], factory) :
(factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.datepicker = {}),global.ng.core,global.rxjs,global.rxjs.operators,global.ng.cdk.keycodes,global.ng.material.core,global.ng.cdk.bidi,global.ng.cdk.portal,global.ng.animations,global.ng.cdk.coercion,global.ng.cdk.overlay,global.ng.common,global.ng.material.dialog,global.ng.forms,global.ng.material.formField,global.ng.material.input,global.ng.material.button,global.ng.cdk.a11y));
}(this, (function (exports,core,rxjs,operators,keycodes,core$1,bidi,portal,animations,coercion,overlay,common,dialog,forms,formField,input,button,a11y) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* \@docs-private
* @param {?} provider
* @return {?}
*/
function createMissingDateImplError(provider) {
return Error("MatDatepicker: No provider found for " + provider + ". You must import one of the following " +
"modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a " +
"custom implementation.");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Datepicker data that requires internationalization.
*/
var MatDatepickerIntl = /** @class */ (function () {
function MatDatepickerIntl() {
/**
* Stream that emits whenever the labels here are changed. Use this to notify
* components if the labels have changed after initialization.
*/
this.changes = new rxjs.Subject();
/**
* A label for the calendar popup (used by screen readers).
*/
this.calendarLabel = 'Calendar';
/**
* A label for the button used to open the calendar popup (used by screen readers).
*/
this.openCalendarLabel = 'Open calendar';
/**
* A label for the previous month button (used by screen readers).
*/
this.prevMonthLabel = 'Previous month';
/**
* A label for the next month button (used by screen readers).
*/
this.nextMonthLabel = 'Next month';
/**
* A label for the previous year button (used by screen readers).
*/
this.prevYearLabel = 'Previous year';
/**
* A label for the next year button (used by screen readers).
*/
this.nextYearLabel = 'Next year';
/**
* A label for the previous multi-year button (used by screen readers).
*/
this.prevMultiYearLabel = 'Previous 20 years';
/**
* A label for the next multi-year button (used by screen readers).
*/
this.nextMultiYearLabel = 'Next 20 years';
/**
* A label for the 'switch to month view' button (used by screen readers).
*/
this.switchToMonthViewLabel = 'Choose date';
/**
* A label for the 'switch to year view' button (used by screen readers).
*/
this.switchToMultiYearViewLabel = 'Choose month and year';
}
MatDatepickerIntl.decorators = [
{ type: core.Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ MatDatepickerIntl.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatDatepickerIntl_Factory() { return new MatDatepickerIntl(); }, token: MatDatepickerIntl, providedIn: "root" });
return MatDatepickerIntl;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* An internal class that represents the data corresponding to a single calendar cell.
* \@docs-private
*/
var /**
* An internal class that represents the data corresponding to a single calendar cell.
* \@docs-private
*/
MatCalendarCell = /** @class */ (function () {
function MatCalendarCell(value, displayValue, ariaLabel, enabled, cssClasses) {
this.value = value;
this.displayValue = displayValue;
this.ariaLabel = ariaLabel;
this.enabled = enabled;
this.cssClasses = cssClasses;
}
return MatCalendarCell;
}());
/**
* An internal component used to display calendar data in a table.
* \@docs-private
*/
var MatCalendarBody = /** @class */ (function () {
function MatCalendarBody(_elementRef, _ngZone) {
this._elementRef = _elementRef;
this._ngZone = _ngZone;
/**
* The number of columns in the table.
*/
this.numCols = 7;
/**
* The cell number of the active cell in the table.
*/
this.activeCell = 0;
/**
* The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
* maintained even as the table resizes.
*/
this.cellAspectRatio = 1;
/**
* Emits when a new value is selected.
*/
this.selectedValueChange = new core.EventEmitter();
}
/**
* @param {?} cell
* @return {?}
*/
MatCalendarBody.prototype._cellClicked = /**
* @param {?} cell
* @return {?}
*/
function (cell) {
if (cell.enabled) {
this.selectedValueChange.emit(cell.value);
}
};
/**
* @param {?} changes
* @return {?}
*/
MatCalendarBody.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
/** @type {?} */
var columnChanges = changes['numCols'];
var _a = this, rows = _a.rows, numCols = _a.numCols;
if (changes['rows'] || columnChanges) {
this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
}
if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {
this._cellPadding = 50 * this.cellAspectRatio / numCols + "%";
}
if (columnChanges || !this._cellWidth) {
this._cellWidth = 100 / numCols + "%";
}
};
/**
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
MatCalendarBody.prototype._isActiveCell = /**
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
function (rowIndex, colIndex) {
/** @type {?} */
var cellNumber = rowIndex * this.numCols + colIndex;
// Account for the fact that the first row may not have as many cells.
if (rowIndex) {
cellNumber -= this._firstRowOffset;
}
return cellNumber == this.activeCell;
};
/** Focuses the active cell after the microtask queue is empty. */
/**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
MatCalendarBody.prototype._focusActiveCell = /**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
function () {
var _this = this;
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this._ngZone.onStable.asObservable().pipe(operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
/** @type {?} */
var activeCell = _this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
if (activeCell) {
activeCell.focus();
}
}));
}));
};
MatCalendarBody.decorators = [
{ type: core.Component, args: [{selector: '[mat-calendar-body]',
template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [ngClass]=\"item.cssClasses\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width]=\"_cellWidth\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.71429%;padding-right:4.71429%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}@media (-ms-high-contrast:active){.mat-calendar-body-cell-content{border:none}}@media (-ms-high-contrast:active){.mat-calendar-body-selected,.mat-datepicker-popup:not(:empty){outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:dotted 2px}}[dir=rtl] .mat-calendar-body-label{text-align:right}"],
host: {
'class': 'mat-calendar-body',
'role': 'grid',
'aria-readonly': 'true'
},
exportAs: 'matCalendarBody',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatCalendarBody.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.NgZone }
]; };
MatCalendarBody.propDecorators = {
label: [{ type: core.Input }],
rows: [{ type: core.Input }],
todayValue: [{ type: core.Input }],
selectedValue: [{ type: core.Input }],
labelMinRequiredCells: [{ type: core.Input }],
numCols: [{ type: core.Input }],
activeCell: [{ type: core.Input }],
cellAspectRatio: [{ type: core.Input }],
selectedValueChange: [{ type: core.Output }]
};
return MatCalendarBody;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DAYS_PER_WEEK = 7;
/**
* An internal component used to display a single month in the datepicker.
* \@docs-private
* @template D
*/
var MatMonthView = /** @class */ (function () {
function MatMonthView(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) {
this._changeDetectorRef = _changeDetectorRef;
this._dateFormats = _dateFormats;
this._dateAdapter = _dateAdapter;
this._dir = _dir;
/**
* Emits when a new date is selected.
*/
this.selectedChange = new core.EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new core.EventEmitter();
/**
* Emits when any date is activated.
*/
this.activeDateChange = new core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
/** @type {?} */
var firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
/** @type {?} */
var narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
/** @type {?} */
var longWeekdays = this._dateAdapter.getDayOfWeekNames('long');
// Rotate the labels for days of the week based on the configured first day of the week.
/** @type {?} */
var weekdays = longWeekdays.map((/**
* @param {?} long
* @param {?} i
* @return {?}
*/
function (long, i) {
return { long: long, narrow: narrowWeekdays[i] };
}));
this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
this._activeDate = this._dateAdapter.today();
}
Object.defineProperty(MatMonthView.prototype, "activeDate", {
/**
* The date to display in this month view (everything other than the month and year is ignored).
*/
get: /**
* The date to display in this month view (everything other than the month and year is ignored).
* @return {?}
*/
function () { return this._activeDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var oldActiveDate = this._activeDate;
/** @type {?} */
var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMonthView.prototype, "selected", {
/** The currently selected date. */
get: /**
* The currently selected date.
* @return {?}
*/
function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._selectedDate = this._getDateInCurrentMonth(this._selected);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMonthView.prototype, "minDate", {
/** The minimum selectable date. */
get: /**
* The minimum selectable date.
* @return {?}
*/
function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMonthView.prototype, "maxDate", {
/** The maximum selectable date. */
get: /**
* The maximum selectable date.
* @return {?}
*/
function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatMonthView.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._init();
};
/** Handles when a new date is selected. */
/**
* Handles when a new date is selected.
* @param {?} date
* @return {?}
*/
MatMonthView.prototype._dateSelected = /**
* Handles when a new date is selected.
* @param {?} date
* @return {?}
*/
function (date) {
if (this._selectedDate != date) {
/** @type {?} */
var selectedYear = this._dateAdapter.getYear(this.activeDate);
/** @type {?} */
var selectedMonth = this._dateAdapter.getMonth(this.activeDate);
/** @type {?} */
var selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
this.selectedChange.emit(selectedDate);
}
this._userSelection.emit();
};
/** Handles keydown events on the calendar body when calendar is in month view. */
/**
* Handles keydown events on the calendar body when calendar is in month view.
* @param {?} event
* @return {?}
*/
MatMonthView.prototype._handleCalendarBodyKeydown = /**
* Handles keydown events on the calendar body when calendar is in month view.
* @param {?} event
* @return {?}
*/
function (event) {
// TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
// disabled ones from being selected. This may not be ideal, we should look into whether
// navigation should skip over disabled dates, and if so, how to implement that efficiently.
// TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
// disabled ones from being selected. This may not be ideal, we should look into whether
// navigation should skip over disabled dates, and if so, how to implement that efficiently.
/** @type {?} */
var oldActiveDate = this._activeDate;
/** @type {?} */
var isRtl = this._isRtl();
switch (event.keyCode) {
case keycodes.LEFT_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
break;
case keycodes.RIGHT_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
break;
case keycodes.UP_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);
break;
case keycodes.DOWN_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);
break;
case keycodes.HOME:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));
break;
case keycodes.END:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, (this._dateAdapter.getNumDaysInMonth(this._activeDate) -
this._dateAdapter.getDate(this._activeDate)));
break;
case keycodes.PAGE_UP:
this.activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, -1) :
this._dateAdapter.addCalendarMonths(this._activeDate, -1);
break;
case keycodes.PAGE_DOWN:
this.activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, 1) :
this._dateAdapter.addCalendarMonths(this._activeDate, 1);
break;
case keycodes.ENTER:
case keycodes.SPACE:
if (!this.dateFilter || this.dateFilter(this._activeDate)) {
this._dateSelected(this._dateAdapter.getDate(this._activeDate));
this._userSelection.emit();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
return;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
this.activeDateChange.emit(this.activeDate);
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
};
/** Initializes this month view. */
/**
* Initializes this month view.
* @return {?}
*/
MatMonthView.prototype._init = /**
* Initializes this month view.
* @return {?}
*/
function () {
this._selectedDate = this._getDateInCurrentMonth(this.selected);
this._todayDate = this._getDateInCurrentMonth(this._dateAdapter.today());
this._monthLabel =
this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]
.toLocaleUpperCase();
/** @type {?} */
var firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);
this._firstWeekOffset =
(DAYS_PER_WEEK + this._dateAdapter.getDayOfWeek(firstOfMonth) -
this._dateAdapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
this._createWeekCells();
this._changeDetectorRef.markForCheck();
};
/** Focuses the active cell after the microtask queue is empty. */
/**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
MatMonthView.prototype._focusActiveCell = /**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
function () {
this._matCalendarBody._focusActiveCell();
};
/** Creates MatCalendarCells for the dates in this month. */
/**
* Creates MatCalendarCells for the dates in this month.
* @private
* @return {?}
*/
MatMonthView.prototype._createWeekCells = /**
* Creates MatCalendarCells for the dates in this month.
* @private
* @return {?}
*/
function () {
/** @type {?} */
var daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
/** @type {?} */
var dateNames = this._dateAdapter.getDateNames();
this._weeks = [[]];
for (var i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
if (cell == DAYS_PER_WEEK) {
this._weeks.push([]);
cell = 0;
}
/** @type {?} */
var date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);
/** @type {?} */
var enabled = this._shouldEnableDate(date);
/** @type {?} */
var ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
/** @type {?} */
var cellClasses = this.dateClass ? this.dateClass(date) : undefined;
this._weeks[this._weeks.length - 1]
.push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));
}
};
/** Date filter for the month */
/**
* Date filter for the month
* @private
* @param {?} date
* @return {?}
*/
MatMonthView.prototype._shouldEnableDate = /**
* Date filter for the month
* @private
* @param {?} date
* @return {?}
*/
function (date) {
return !!date &&
(!this.dateFilter || this.dateFilter(date)) &&
(!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&
(!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0);
};
/**
* Gets the date in this month that the given Date falls on.
* Returns null if the given Date is in another month.
*/
/**
* Gets the date in this month that the given Date falls on.
* Returns null if the given Date is in another month.
* @private
* @param {?} date
* @return {?}
*/
MatMonthView.prototype._getDateInCurrentMonth = /**
* Gets the date in this month that the given Date falls on.
* Returns null if the given Date is in another month.
* @private
* @param {?} date
* @return {?}
*/
function (date) {
return date && this._hasSameMonthAndYear(date, this.activeDate) ?
this._dateAdapter.getDate(date) : null;
};
/** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
/**
* Checks whether the 2 dates are non-null and fall within the same month of the same year.
* @private
* @param {?} d1
* @param {?} d2
* @return {?}
*/
MatMonthView.prototype._hasSameMonthAndYear = /**
* Checks whether the 2 dates are non-null and fall within the same month of the same year.
* @private
* @param {?} d1
* @param {?} d2
* @return {?}
*/
function (d1, d2) {
return !!(d1 && d2 && this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) &&
this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));
};
/**
* @param obj The object to check.
* @returns The given object if it is both a date instance and valid, otherwise null.
*/
/**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatMonthView.prototype._getValidDateOrNull = /**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
/** Determines whether the user has the RTL layout direction. */
/**
* Determines whether the user has the RTL layout direction.
* @private
* @return {?}
*/
MatMonthView.prototype._isRtl = /**
* Determines whether the user has the RTL layout direction.
* @private
* @return {?}
*/
function () {
return this._dir && this._dir.value === 'rtl';
};
MatMonthView.decorators = [
{ type: core.Component, args: [{selector: 'mat-month-view',
template: "<table class=\"mat-calendar-table\" role=\"presentation\"><thead class=\"mat-calendar-table-header\"><tr><th *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th></tr><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"7\" aria-hidden=\"true\"></th></tr></thead><tbody mat-calendar-body [label]=\"_monthLabel\" [rows]=\"_weeks\" [todayValue]=\"_todayDate\" [selectedValue]=\"_selectedDate\" [labelMinRequiredCells]=\"3\" [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\" (selectedValueChange)=\"_dateSelected($event)\" (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody></table>",
exportAs: 'matMonthView',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatMonthView.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_DATE_FORMATS,] }] },
{ type: core$1.DateAdapter, decorators: [{ type: core.Optional }] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional }] }
]; };
MatMonthView.propDecorators = {
activeDate: [{ type: core.Input }],
selected: [{ type: core.Input }],
minDate: [{ type: core.Input }],
maxDate: [{ type: core.Input }],
dateFilter: [{ type: core.Input }],
dateClass: [{ type: core.Input }],
selectedChange: [{ type: core.Output }],
_userSelection: [{ type: core.Output }],
activeDateChange: [{ type: core.Output }],
_matCalendarBody: [{ type: core.ViewChild, args: [MatCalendarBody, { static: false },] }]
};
return MatMonthView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var yearsPerPage = 24;
/** @type {?} */
var yearsPerRow = 4;
/**
* An internal component used to display a year selector in the datepicker.
* \@docs-private
* @template D
*/
var MatMultiYearView = /** @class */ (function () {
function MatMultiYearView(_changeDetectorRef, _dateAdapter, _dir) {
this._changeDetectorRef = _changeDetectorRef;
this._dateAdapter = _dateAdapter;
this._dir = _dir;
/**
* Emits when a new year is selected.
*/
this.selectedChange = new core.EventEmitter();
/**
* Emits the selected year. This doesn't imply a change on the selected date
*/
this.yearSelected = new core.EventEmitter();
/**
* Emits when any date is activated.
*/
this.activeDateChange = new core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
this._activeDate = this._dateAdapter.today();
}
Object.defineProperty(MatMultiYearView.prototype, "activeDate", {
/** The date to display in this multi-year view (everything other than the year is ignored). */
get: /**
* The date to display in this multi-year view (everything other than the year is ignored).
* @return {?}
*/
function () { return this._activeDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var oldActiveDate = this._activeDate;
/** @type {?} */
var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMultiYearView.prototype, "selected", {
/** The currently selected date. */
get: /**
* The currently selected date.
* @return {?}
*/
function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._selectedYear = this._selected && this._dateAdapter.getYear(this._selected);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMultiYearView.prototype, "minDate", {
/** The minimum selectable date. */
get: /**
* The minimum selectable date.
* @return {?}
*/
function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMultiYearView.prototype, "maxDate", {
/** The maximum selectable date. */
get: /**
* The maximum selectable date.
* @return {?}
*/
function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatMultiYearView.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._init();
};
/** Initializes this multi-year view. */
/**
* Initializes this multi-year view.
* @return {?}
*/
MatMultiYearView.prototype._init = /**
* Initializes this multi-year view.
* @return {?}
*/
function () {
var _this = this;
this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());
// We want a range years such that we maximize the number of
// enabled dates visible at once. This prevents issues where the minimum year
// is the last item of a page OR the maximum year is the first item of a page.
// The offset from the active year to the "slot" for the starting year is the
// *actual* first rendered year in the multi-year view.
/** @type {?} */
var activeYear = this._dateAdapter.getYear(this._activeDate);
/** @type {?} */
var minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);
this._years = [];
for (var i = 0, row = []; i < yearsPerPage; i++) {
row.push(minYearOfPage + i);
if (row.length == yearsPerRow) {
this._years.push(row.map((/**
* @param {?} year
* @return {?}
*/
function (year) { return _this._createCellForYear(year); })));
row = [];
}
}
this._changeDetectorRef.markForCheck();
};
/** Handles when a new year is selected. */
/**
* Handles when a new year is selected.
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._yearSelected = /**
* Handles when a new year is selected.
* @param {?} year
* @return {?}
*/
function (year) {
this.yearSelected.emit(this._dateAdapter.createDate(year, 0, 1));
/** @type {?} */
var month = this._dateAdapter.getMonth(this.activeDate);
/** @type {?} */
var daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));
this.selectedChange.emit(this._dateAdapter.createDate(year, month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
};
/** Handles keydown events on the calendar body when calendar is in multi-year view. */
/**
* Handles keydown events on the calendar body when calendar is in multi-year view.
* @param {?} event
* @return {?}
*/
MatMultiYearView.prototype._handleCalendarBodyKeydown = /**
* Handles keydown events on the calendar body when calendar is in multi-year view.
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var oldActiveDate = this._activeDate;
/** @type {?} */
var isRtl = this._isRtl();
switch (event.keyCode) {
case keycodes.LEFT_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);
break;
case keycodes.RIGHT_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);
break;
case keycodes.UP_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);
break;
case keycodes.DOWN_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);
break;
case keycodes.HOME:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));
break;
case keycodes.END:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 1);
break;
case keycodes.PAGE_UP:
this.activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
break;
case keycodes.PAGE_DOWN:
this.activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
break;
case keycodes.ENTER:
case keycodes.SPACE:
this._yearSelected(this._dateAdapter.getYear(this._activeDate));
break;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
this.activeDateChange.emit(this.activeDate);
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
};
/**
* @return {?}
*/
MatMultiYearView.prototype._getActiveCell = /**
* @return {?}
*/
function () {
return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);
};
/** Focuses the active cell after the microtask queue is empty. */
/**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
MatMultiYearView.prototype._focusActiveCell = /**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
function () {
this._matCalendarBody._focusActiveCell();
};
/** Creates an MatCalendarCell for the given year. */
/**
* Creates an MatCalendarCell for the given year.
* @private
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._createCellForYear = /**
* Creates an MatCalendarCell for the given year.
* @private
* @param {?} year
* @return {?}
*/
function (year) {
/** @type {?} */
var yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
};
/** Whether the given year is enabled. */
/**
* Whether the given year is enabled.
* @private
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._shouldEnableYear = /**
* Whether the given year is enabled.
* @private
* @param {?} year
* @return {?}
*/
function (year) {
// disable if the year is greater than maxDate lower than minDate
if (year === undefined || year === null ||
(this.maxDate && year > this._dateAdapter.getYear(this.maxDate)) ||
(this.minDate && year < this._dateAdapter.getYear(this.minDate))) {
return false;
}
// enable if it reaches here and there's no filter defined
if (!this.dateFilter) {
return true;
}
/** @type {?} */
var firstOfYear = this._dateAdapter.createDate(year, 0, 1);
// If any date in the year is enabled count the year as enabled.
for (var date = firstOfYear; this._dateAdapter.getYear(date) == year; date = this._dateAdapter.addCalendarDays(date, 1)) {
if (this.dateFilter(date)) {
return true;
}
}
return false;
};
/**
* @param obj The object to check.
* @returns The given object if it is both a date instance and valid, otherwise null.
*/
/**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatMultiYearView.prototype._getValidDateOrNull = /**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
/** Determines whether the user has the RTL layout direction. */
/**
* Determines whether the user has the RTL layout direction.
* @private
* @return {?}
*/
MatMultiYearView.prototype._isRtl = /**
* Determines whether the user has the RTL layout direction.
* @private
* @return {?}
*/
function () {
return this._dir && this._dir.value === 'rtl';
};
MatMultiYearView.decorators = [
{ type: core.Component, args: [{selector: 'mat-multi-year-view',
template: "<table class=\"mat-calendar-table\" role=\"presentation\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body [rows]=\"_years\" [todayValue]=\"_todayYear\" [selectedValue]=\"_selectedYear\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_getActiveCell()\" (selectedValueChange)=\"_yearSelected($event)\" (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody></table>",
exportAs: 'matMultiYearView',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatMultiYearView.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: core$1.DateAdapter, decorators: [{ type: core.Optional }] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional }] }
]; };
MatMultiYearView.propDecorators = {
activeDate: [{ type: core.Input }],
selected: [{ type: core.Input }],
minDate: [{ type: core.Input }],
maxDate: [{ type: core.Input }],
dateFilter: [{ type: core.Input }],
selectedChange: [{ type: core.Output }],
yearSelected: [{ type: core.Output }],
activeDateChange: [{ type: core.Output }],
_matCalendarBody: [{ type: core.ViewChild, args: [MatCalendarBody, { static: false },] }]
};
return MatMultiYearView;
}());
/**
* @template D
* @param {?} dateAdapter
* @param {?} date1
* @param {?} date2
* @param {?} minDate
* @param {?} maxDate
* @return {?}
*/
function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
/** @type {?} */
var year1 = dateAdapter.getYear(date1);
/** @type {?} */
var year2 = dateAdapter.getYear(date2);
/** @type {?} */
var startingYear = getStartingYear(dateAdapter, minDate, maxDate);
return Math.floor((year1 - startingYear) / yearsPerPage) ===
Math.floor((year2 - startingYear) / yearsPerPage);
}
/**
* When the multi-year view is first opened, the active year will be in view.
* So we compute how many years are between the active year and the *slot* where our
* "startingYear" will render when paged into view.
* @template D
* @param {?} dateAdapter
* @param {?} activeDate
* @param {?} minDate
* @param {?} maxDate
* @return {?}
*/
function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
/** @type {?} */
var activeYear = dateAdapter.getYear(activeDate);
return euclideanModulo((activeYear - getStartingYear(dateAdapter, minDate, maxDate)), yearsPerPage);
}
/**
* We pick a "starting" year such that either the maximum year would be at the end
* or the minimum year would be at the beginning of a page.
* @template D
* @param {?} dateAdapter
* @param {?} minDate
* @param {?} maxDate
* @return {?}
*/
function getStartingYear(dateAdapter, minDate, maxDate) {
/** @type {?} */
var startingYear = 0;
if (maxDate) {
/** @type {?} */
var maxYear = dateAdapter.getYear(maxDate);
startingYear = maxYear - yearsPerPage + 1;
}
else if (minDate) {
startingYear = dateAdapter.getYear(minDate);
}
return startingYear;
}
/**
* Gets remainder that is non-negative, even if first number is negative
* @param {?} a
* @param {?} b
* @return {?}
*/
function euclideanModulo(a, b) {
return (a % b + b) % b;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* An internal component used to display a single year in the datepicker.
* \@docs-private
* @template D
*/
var MatYearView = /** @class */ (function () {
function MatYearView(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) {
this._changeDetectorRef = _changeDetectorRef;
this._dateFormats = _dateFormats;
this._dateAdapter = _dateAdapter;
this._dir = _dir;
/**
* Emits when a new month is selected.
*/
this.selectedChange = new core.EventEmitter();
/**
* Emits the selected month. This doesn't imply a change on the selected date
*/
this.monthSelected = new core.EventEmitter();
/**
* Emits when any date is activated.
*/
this.activeDateChange = new core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
this._activeDate = this._dateAdapter.today();
}
Object.defineProperty(MatYearView.prototype, "activeDate", {
/** The date to display in this year view (everything other than the year is ignored). */
get: /**
* The date to display in this year view (everything other than the year is ignored).
* @return {?}
*/
function () { return this._activeDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var oldActiveDate = this._activeDate;
/** @type {?} */
var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
if (this._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatYearView.prototype, "selected", {
/** The currently selected date. */
get: /**
* The currently selected date.
* @return {?}
*/
function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._selectedMonth = this._getMonthInCurrentYear(this._selected);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatYearView.prototype, "minDate", {
/** The minimum selectable date. */
get: /**
* The minimum selectable date.
* @return {?}
*/
function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatYearView.prototype, "maxDate", {
/** The maximum selectable date. */
get: /**
* The maximum selectable date.
* @return {?}
*/
function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatYearView.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._init();
};
/** Handles when a new month is selected. */
/**
* Handles when a new month is selected.
* @param {?} month
* @return {?}
*/
MatYearView.prototype._monthSelected = /**
* Handles when a new month is selected.
* @param {?} month
* @return {?}
*/
function (month) {
/** @type {?} */
var normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);
this.monthSelected.emit(normalizedDate);
/** @type {?} */
var daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate);
this.selectedChange.emit(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
};
/** Handles keydown events on the calendar body when calendar is in year view. */
/**
* Handles keydown events on the calendar body when calendar is in year view.
* @param {?} event
* @return {?}
*/
MatYearView.prototype._handleCalendarBodyKeydown = /**
* Handles keydown events on the calendar body when calendar is in year view.
* @param {?} event
* @return {?}
*/
function (event) {
// TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
// disabled ones from being selected. This may not be ideal, we should look into whether
// navigation should skip over disabled dates, and if so, how to implement that efficiently.
// TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
// disabled ones from being selected. This may not be ideal, we should look into whether
// navigation should skip over disabled dates, and if so, how to implement that efficiently.
/** @type {?} */
var oldActiveDate = this._activeDate;
/** @type {?} */
var isRtl = this._isRtl();
switch (event.keyCode) {
case keycodes.LEFT_ARROW:
this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);
break;
case keycodes.RIGHT_ARROW:
this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);
break;
case keycodes.UP_ARROW:
this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -4);
break;
case keycodes.DOWN_ARROW:
this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 4);
break;
case keycodes.HOME:
this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));
break;
case keycodes.END:
this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));
break;
case keycodes.PAGE_UP:
this.activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
break;
case keycodes.PAGE_DOWN:
this.activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
break;
case keycodes.ENTER:
case keycodes.SPACE:
this._monthSelected(this._dateAdapter.getMonth(this._activeDate));
break;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
this.activeDateChange.emit(this.activeDate);
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
};
/** Initializes this year view. */
/**
* Initializes this year view.
* @return {?}
*/
MatYearView.prototype._init = /**
* Initializes this year view.
* @return {?}
*/
function () {
var _this = this;
this._selectedMonth = this._getMonthInCurrentYear(this.selected);
this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today());
this._yearLabel = this._dateAdapter.getYearName(this.activeDate);
/** @type {?} */
var monthNames = this._dateAdapter.getMonthNames('short');
// First row of months only contains 5 elements so we can fit the year label on the same row.
this._months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]].map((/**
* @param {?} row
* @return {?}
*/
function (row) { return row.map((/**
* @param {?} month
* @return {?}
*/
function (month) { return _this._createCellForMonth(month, monthNames[month]); })); }));
this._changeDetectorRef.markForCheck();
};
/** Focuses the active cell after the microtask queue is empty. */
/**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
MatYearView.prototype._focusActiveCell = /**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
function () {
this._matCalendarBody._focusActiveCell();
};
/**
* Gets the month in this year that the given Date falls on.
* Returns null if the given Date is in another year.
*/
/**
* Gets the month in this year that the given Date falls on.
* Returns null if the given Date is in another year.
* @private
* @param {?} date
* @return {?}
*/
MatYearView.prototype._getMonthInCurrentYear = /**
* Gets the month in this year that the given Date falls on.
* Returns null if the given Date is in another year.
* @private
* @param {?} date
* @return {?}
*/
function (date) {
return date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate) ?
this._dateAdapter.getMonth(date) : null;
};
/** Creates an MatCalendarCell for the given month. */
/**
* Creates an MatCalendarCell for the given month.
* @private
* @param {?} month
* @param {?} monthName
* @return {?}
*/
MatYearView.prototype._createCellForMonth = /**
* Creates an MatCalendarCell for the given month.
* @private
* @param {?} month
* @param {?} monthName
* @return {?}
*/
function (month, monthName) {
/** @type {?} */
var ariaLabel = this._dateAdapter.format(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1), this._dateFormats.display.monthYearA11yLabel);
return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));
};
/** Whether the given month is enabled. */
/**
* Whether the given month is enabled.
* @private
* @param {?} month
* @return {?}
*/
MatYearView.prototype._shouldEnableMonth = /**
* Whether the given month is enabled.
* @private
* @param {?} month
* @return {?}
*/
function (month) {
/** @type {?} */
var activeYear = this._dateAdapter.getYear(this.activeDate);
if (month === undefined || month === null ||
this._isYearAndMonthAfterMaxDate(activeYear, month) ||
this._isYearAndMonthBeforeMinDate(activeYear, month)) {
return false;
}
if (!this.dateFilter) {
return true;
}
/** @type {?} */
var firstOfMonth = this._dateAdapter.createDate(activeYear, month, 1);
// If any date in the month is enabled count the month as enabled.
for (var date = firstOfMonth; this._dateAdapter.getMonth(date) == month; date = this._dateAdapter.addCalendarDays(date, 1)) {
if (this.dateFilter(date)) {
return true;
}
}
return false;
};
/**
* Tests whether the combination month/year is after this.maxDate, considering
* just the month and year of this.maxDate
*/
/**
* Tests whether the combination month/year is after this.maxDate, considering
* just the month and year of this.maxDate
* @private
* @param {?} year
* @param {?} month
* @return {?}
*/
MatYearView.prototype._isYearAndMonthAfterMaxDate = /**
* Tests whether the combination month/year is after this.maxDate, considering
* just the month and year of this.maxDate
* @private
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
if (this.maxDate) {
/** @type {?} */
var maxYear = this._dateAdapter.getYear(this.maxDate);
/** @type {?} */
var maxMonth = this._dateAdapter.getMonth(this.maxDate);
return year > maxYear || (year === maxYear && month > maxMonth);
}
return false;
};
/**
* Tests whether the combination month/year is before this.minDate, considering
* just the month and year of this.minDate
*/
/**
* Tests whether the combination month/year is before this.minDate, considering
* just the month and year of this.minDate
* @private
* @param {?} year
* @param {?} month
* @return {?}
*/
MatYearView.prototype._isYearAndMonthBeforeMinDate = /**
* Tests whether the combination month/year is before this.minDate, considering
* just the month and year of this.minDate
* @private
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
if (this.minDate) {
/** @type {?} */
var minYear = this._dateAdapter.getYear(this.minDate);
/** @type {?} */
var minMonth = this._dateAdapter.getMonth(this.minDate);
return year < minYear || (year === minYear && month < minMonth);
}
return false;
};
/**
* @param obj The object to check.
* @returns The given object if it is both a date instance and valid, otherwise null.
*/
/**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatYearView.prototype._getValidDateOrNull = /**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
/** Determines whether the user has the RTL layout direction. */
/**
* Determines whether the user has the RTL layout direction.
* @private
* @return {?}
*/
MatYearView.prototype._isRtl = /**
* Determines whether the user has the RTL layout direction.
* @private
* @return {?}
*/
function () {
return this._dir && this._dir.value === 'rtl';
};
MatYearView.decorators = [
{ type: core.Component, args: [{selector: 'mat-year-view',
template: "<table class=\"mat-calendar-table\" role=\"presentation\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body [label]=\"_yearLabel\" [rows]=\"_months\" [todayValue]=\"_todayMonth\" [selectedValue]=\"_selectedMonth\" [labelMinRequiredCells]=\"2\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_dateAdapter.getMonth(activeDate)\" (selectedValueChange)=\"_monthSelected($event)\" (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody></table>",
exportAs: 'matYearView',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatYearView.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_DATE_FORMATS,] }] },
{ type: core$1.DateAdapter, decorators: [{ type: core.Optional }] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional }] }
]; };
MatYearView.propDecorators = {
activeDate: [{ type: core.Input }],
selected: [{ type: core.Input }],
minDate: [{ type: core.Input }],
maxDate: [{ type: core.Input }],
dateFilter: [{ type: core.Input }],
selectedChange: [{ type: core.Output }],
monthSelected: [{ type: core.Output }],
activeDateChange: [{ type: core.Output }],
_matCalendarBody: [{ type: core.ViewChild, args: [MatCalendarBody, { static: false },] }]
};
return MatYearView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Default header for MatCalendar
* @template D
*/
var MatCalendarHeader = /** @class */ (function () {
function MatCalendarHeader(_intl, calendar, _dateAdapter, _dateFormats, changeDetectorRef) {
this._intl = _intl;
this.calendar = calendar;
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this.calendar.stateChanges.subscribe((/**
* @return {?}
*/
function () { return changeDetectorRef.markForCheck(); }));
}
Object.defineProperty(MatCalendarHeader.prototype, "periodButtonText", {
/** The label for the current calendar view. */
get: /**
* The label for the current calendar view.
* @return {?}
*/
function () {
if (this.calendar.currentView == 'month') {
return this._dateAdapter
.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
.toLocaleUpperCase();
}
if (this.calendar.currentView == 'year') {
return this._dateAdapter.getYearName(this.calendar.activeDate);
}
// The offset from the active year to the "slot" for the starting year is the
// *actual* first rendered year in the multi-year view, and the last year is
// just yearsPerPage - 1 away.
/** @type {?} */
var activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
/** @type {?} */
var minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate);
/** @type {?} */
var maxYearOfPage = minYearOfPage + yearsPerPage - 1;
return minYearOfPage + " \u2013 " + maxYearOfPage;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendarHeader.prototype, "periodButtonLabel", {
get: /**
* @return {?}
*/
function () {
return this.calendar.currentView == 'month' ?
this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendarHeader.prototype, "prevButtonLabel", {
/** The label for the previous button. */
get: /**
* The label for the previous button.
* @return {?}
*/
function () {
return {
'month': this._intl.prevMonthLabel,
'year': this._intl.prevYearLabel,
'multi-year': this._intl.prevMultiYearLabel
}[this.calendar.currentView];
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendarHeader.prototype, "nextButtonLabel", {
/** The label for the next button. */
get: /**
* The label for the next button.
* @return {?}
*/
function () {
return {
'month': this._intl.nextMonthLabel,
'year': this._intl.nextYearLabel,
'multi-year': this._intl.nextMultiYearLabel
}[this.calendar.currentView];
},
enumerable: true,
configurable: true
});
/** Handles user clicks on the period label. */
/**
* Handles user clicks on the period label.
* @return {?}
*/
MatCalendarHeader.prototype.currentPeriodClicked = /**
* Handles user clicks on the period label.
* @return {?}
*/
function () {
this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month';
};
/** Handles user clicks on the previous button. */
/**
* Handles user clicks on the previous button.
* @return {?}
*/
MatCalendarHeader.prototype.previousClicked = /**
* Handles user clicks on the previous button.
* @return {?}
*/
function () {
this.calendar.activeDate = this.calendar.currentView == 'month' ?
this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage);
};
/** Handles user clicks on the next button. */
/**
* Handles user clicks on the next button.
* @return {?}
*/
MatCalendarHeader.prototype.nextClicked = /**
* Handles user clicks on the next button.
* @return {?}
*/
function () {
this.calendar.activeDate = this.calendar.currentView == 'month' ?
this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage);
};
/** Whether the previous period button is enabled. */
/**
* Whether the previous period button is enabled.
* @return {?}
*/
MatCalendarHeader.prototype.previousEnabled = /**
* Whether the previous period button is enabled.
* @return {?}
*/
function () {
if (!this.calendar.minDate) {
return true;
}
return !this.calendar.minDate ||
!this._isSameView(this.calendar.activeDate, this.calendar.minDate);
};
/** Whether the next period button is enabled. */
/**
* Whether the next period button is enabled.
* @return {?}
*/
MatCalendarHeader.prototype.nextEnabled = /**
* Whether the next period button is enabled.
* @return {?}
*/
function () {
return !this.calendar.maxDate ||
!this._isSameView(this.calendar.activeDate, this.calendar.maxDate);
};
/** Whether the two dates represent the same view in the current view mode (month or year). */
/**
* Whether the two dates represent the same view in the current view mode (month or year).
* @private
* @param {?} date1
* @param {?} date2
* @return {?}
*/
MatCalendarHeader.prototype._isSameView = /**
* Whether the two dates represent the same view in the current view mode (month or year).
* @private
* @param {?} date1
* @param {?} date2
* @return {?}
*/
function (date1, date2) {
if (this.calendar.currentView == 'month') {
return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) &&
this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2);
}
if (this.calendar.currentView == 'year') {
return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);
}
// Otherwise we are in 'multi-year' view.
return isSameMultiYearView(this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate);
};
MatCalendarHeader.decorators = [
{ type: core.Component, args: [{selector: 'mat-calendar-header',
template: "<div class=\"mat-calendar-header\"><div class=\"mat-calendar-controls\"><button mat-button type=\"button\" class=\"mat-calendar-period-button\" (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\" cdkAriaLive=\"polite\">{{periodButtonText}}<div class=\"mat-calendar-arrow\" [class.mat-calendar-invert]=\"calendar.currentView != 'month'\"></div></button><div class=\"mat-calendar-spacer\"></div><ng-content></ng-content><button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\" [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\" [attr.aria-label]=\"prevButtonLabel\"></button> <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\" [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\" [attr.aria-label]=\"nextButtonLabel\"></button></div></div>",
exportAs: 'matCalendarHeader',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatCalendarHeader.ctorParameters = function () { return [
{ type: MatDatepickerIntl },
{ type: MatCalendar, decorators: [{ type: core.Inject, args: [core.forwardRef((/**
* @return {?}
*/
function () { return MatCalendar; })),] }] },
{ type: core$1.DateAdapter, decorators: [{ type: core.Optional }] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_DATE_FORMATS,] }] },
{ type: core.ChangeDetectorRef }
]; };
return MatCalendarHeader;
}());
/**
* A calendar that is used as part of the datepicker.
* \@docs-private
* @template D
*/
var MatCalendar = /** @class */ (function () {
function MatCalendar(_intl, _dateAdapter, _dateFormats, _changeDetectorRef) {
var _this = this;
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._changeDetectorRef = _changeDetectorRef;
/**
* Used for scheduling that focus should be moved to the active cell on the next tick.
* We need to schedule it, rather than do it immediately, because we have to wait
* for Angular to re-evaluate the view children.
*/
this._moveFocusOnNextTick = false;
/**
* Whether the calendar should be started in month or year view.
*/
this.startView = 'month';
/**
* Emits when the currently selected date changes.
*/
this.selectedChange = new core.EventEmitter();
/**
* Emits the year chosen in multiyear view.
* This doesn't imply a change on the selected date.
*/
this.yearSelected = new core.EventEmitter();
/**
* Emits the month chosen in year view.
* This doesn't imply a change on the selected date.
*/
this.monthSelected = new core.EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new core.EventEmitter();
/**
* Emits whenever there is a state change that the header may need to respond to.
*/
this.stateChanges = new rxjs.Subject();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
this._intlChanges = _intl.changes.subscribe((/**
* @return {?}
*/
function () {
_changeDetectorRef.markForCheck();
_this.stateChanges.next();
}));
}
Object.defineProperty(MatCalendar.prototype, "startAt", {
/** A date representing the period (month or year) to start the calendar in. */
get: /**
* A date representing the period (month or year) to start the calendar in.
* @return {?}
*/
function () { return this._startAt; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "selected", {
/** The currently selected date. */
get: /**
* The currently selected date.
* @return {?}
*/
function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "minDate", {
/** The minimum selectable date. */
get: /**
* The minimum selectable date.
* @return {?}
*/
function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "maxDate", {
/** The maximum selectable date. */
get: /**
* The maximum selectable date.
* @return {?}
*/
function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "activeDate", {
/**
* The current active date. This determines which time period is shown and which date is
* highlighted when using keyboard navigation.
*/
get: /**
* The current active date. This determines which time period is shown and which date is
* highlighted when using keyboard navigation.
* @return {?}
*/
function () { return this._clampedActiveDate; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);
this.stateChanges.next();
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "currentView", {
/** Whether the calendar is in month view. */
get: /**
* Whether the calendar is in month view.
* @return {?}
*/
function () { return this._currentView; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._currentView = value;
this._moveFocusOnNextTick = true;
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatCalendar.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._calendarHeaderPortal = new portal.ComponentPortal(this.headerComponent || MatCalendarHeader);
this.activeDate = this.startAt || this._dateAdapter.today();
// Assign to the private property since we don't want to move focus on init.
this._currentView = this.startView;
};
/**
* @return {?}
*/
MatCalendar.prototype.ngAfterViewChecked = /**
* @return {?}
*/
function () {
if (this._moveFocusOnNextTick) {
this._moveFocusOnNextTick = false;
this.focusActiveCell();
}
};
/**
* @return {?}
*/
MatCalendar.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._intlChanges.unsubscribe();
this.stateChanges.complete();
};
/**
* @param {?} changes
* @return {?}
*/
MatCalendar.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
/** @type {?} */
var change = changes['minDate'] || changes['maxDate'] || changes['dateFilter'];
if (change && !change.firstChange) {
/** @type {?} */
var view = this._getCurrentViewComponent();
if (view) {
// We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
// passed down to the view via data bindings which won't be up-to-date when we call `_init`.
this._changeDetectorRef.detectChanges();
view._init();
}
}
this.stateChanges.next();
};
/**
* @return {?}
*/
MatCalendar.prototype.focusActiveCell = /**
* @return {?}
*/
function () {
this._getCurrentViewComponent()._focusActiveCell();
};
/** Updates today's date after an update of the active date */
/**
* Updates today's date after an update of the active date
* @return {?}
*/
MatCalendar.prototype.updateTodaysDate = /**
* Updates today's date after an update of the active date
* @return {?}
*/
function () {
/** @type {?} */
var view = this.currentView == 'month' ? this.monthView :
(this.currentView == 'year' ? this.yearView : this.multiYearView);
view.ngAfterContentInit();
};
/** Handles date selection in the month view. */
/**
* Handles date selection in the month view.
* @param {?} date
* @return {?}
*/
MatCalendar.prototype._dateSelected = /**
* Handles date selection in the month view.
* @param {?} date
* @return {?}
*/
function (date) {
if (!this._dateAdapter.sameDate(date, this.selected)) {
this.selectedChange.emit(date);
}
};
/** Handles year selection in the multiyear view. */
/**
* Handles year selection in the multiyear view.
* @param {?} normalizedYear
* @return {?}
*/
MatCalendar.prototype._yearSelectedInMultiYearView = /**
* Handles year selection in the multiyear view.
* @param {?} normalizedYear
* @return {?}
*/
function (normalizedYear) {
this.yearSelected.emit(normalizedYear);
};
/** Handles month selection in the year view. */
/**
* Handles month selection in the year view.
* @param {?} normalizedMonth
* @return {?}
*/
MatCalendar.prototype._monthSelectedInYearView = /**
* Handles month selection in the year view.
* @param {?} normalizedMonth
* @return {?}
*/
function (normalizedMonth) {
this.monthSelected.emit(normalizedMonth);
};
/**
* @return {?}
*/
MatCalendar.prototype._userSelected = /**
* @return {?}
*/
function () {
this._userSelection.emit();
};
/** Handles year/month selection in the multi-year/year views. */
/**
* Handles year/month selection in the multi-year/year views.
* @param {?} date
* @param {?} view
* @return {?}
*/
MatCalendar.prototype._goToDateInView = /**
* Handles year/month selection in the multi-year/year views.
* @param {?} date
* @param {?} view
* @return {?}
*/
function (date, view) {
this.activeDate = date;
this.currentView = view;
};
/**
* @param obj The object to check.
* @returns The given object if it is both a date instance and valid, otherwise null.
*/
/**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatCalendar.prototype._getValidDateOrNull = /**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
/** Returns the component instance that corresponds to the current calendar view. */
/**
* Returns the component instance that corresponds to the current calendar view.
* @private
* @return {?}
*/
MatCalendar.prototype._getCurrentViewComponent = /**
* Returns the component instance that corresponds to the current calendar view.
* @private
* @return {?}
*/
function () {
return this.monthView || this.yearView || this.multiYearView;
};
MatCalendar.decorators = [
{ type: core.Component, args: [{selector: 'mat-calendar',
template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template><div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\"><mat-month-view *ngSwitchCase=\"'month'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [dateClass]=\"dateClass\" (selectedChange)=\"_dateSelected($event)\" (_userSelection)=\"_userSelected()\"></mat-month-view><mat-year-view *ngSwitchCase=\"'year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (monthSelected)=\"_monthSelectedInYearView($event)\" (selectedChange)=\"_goToDateInView($event, 'month')\"></mat-year-view><mat-multi-year-view *ngSwitchCase=\"'multi-year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (yearSelected)=\"_yearSelectedInMultiYearView($event)\" (selectedChange)=\"_goToDateInView($event, 'year')\"></mat-multi-year-view></div>",
styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:0}.mat-calendar-controls{display:flex;margin:5% calc(33% / 7 - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0}.mat-calendar-arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top-width:5px;border-top-style:solid;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}.mat-calendar-next-button,.mat-calendar-previous-button{position:relative}.mat-calendar-next-button::after,.mat-calendar-previous-button::after{top:0;left:0;right:0;bottom:0;position:absolute;content:'';margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-next-button,[dir=rtl] .mat-calendar-previous-button{transform:rotate(180deg)}.mat-calendar-previous-button::after{border-left-width:2px;transform:translateX(2px) rotate(-45deg)}.mat-calendar-next-button::after{border-right-width:2px;transform:translateX(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:'';position:absolute;top:0;left:-8px;right:-8px;height:1px}"],
host: {
'class': 'mat-calendar',
},
exportAs: 'matCalendar',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatCalendar.ctorParameters = function () { return [
{ type: MatDatepickerIntl },
{ type: core$1.DateAdapter, decorators: [{ type: core.Optional }] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_DATE_FORMATS,] }] },
{ type: core.ChangeDetectorRef }
]; };
MatCalendar.propDecorators = {
headerComponent: [{ type: core.Input }],
startAt: [{ type: core.Input }],
startView: [{ type: core.Input }],
selected: [{ type: core.Input }],
minDate: [{ type: core.Input }],
maxDate: [{ type: core.Input }],
dateFilter: [{ type: core.Input }],
dateClass: [{ type: core.Input }],
selectedChange: [{ type: core.Output }],
yearSelected: [{ type: core.Output }],
monthSelected: [{ type: core.Output }],
_userSelection: [{ type: core.Output }],
monthView: [{ type: core.ViewChild, args: [MatMonthView, { static: false },] }],
yearView: [{ type: core.ViewChild, args: [MatYearView, { static: false },] }],
multiYearView: [{ type: core.ViewChild, args: [MatMultiYearView, { static: false },] }]
};
return MatCalendar;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Animations used by the Material datepicker.
* \@docs-private
* @type {?}
*/
var matDatepickerAnimations = {
/**
* Transforms the height of the datepicker's calendar.
*/
transformPanel: animations.trigger('transformPanel', [
animations.state('void', animations.style({
opacity: 0,
transform: 'scale(1, 0.8)'
})),
animations.transition('void => enter', animations.animate('120ms cubic-bezier(0, 0, 0.2, 1)', animations.style({
opacity: 1,
transform: 'scale(1, 1)'
}))),
animations.transition('* => void', animations.animate('100ms linear', animations.style({ opacity: 0 })))
]),
/**
* Fades in the content of the calendar.
*/
fadeInCalendar: animations.trigger('fadeInCalendar', [
animations.state('void', animations.style({ opacity: 0 })),
animations.state('enter', animations.style({ opacity: 1 })),
// TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
// need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
animations.transition('void => *', animations.animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Used to generate a unique ID for each datepicker instance.
* @type {?}
*/
var datepickerUid = 0;
/**
* Injection token that determines the scroll handling while the calendar is open.
* @type {?}
*/
var MAT_DATEPICKER_SCROLL_STRATEGY = new core.InjectionToken('mat-datepicker-scroll-strategy');
/**
* \@docs-private
* @param {?} overlay
* @return {?}
*/
function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay$$1) {
return (/**
* @return {?}
*/
function () { return overlay$$1.scrollStrategies.reposition(); });
}
/**
* \@docs-private
* @type {?}
*/
var MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
provide: MAT_DATEPICKER_SCROLL_STRATEGY,
deps: [overlay.Overlay],
useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,
};
// Boilerplate for applying mixins to MatDatepickerContent.
/**
* \@docs-private
*/
var
// Boilerplate for applying mixins to MatDatepickerContent.
/**
* \@docs-private
*/
MatDatepickerContentBase = /** @class */ (function () {
function MatDatepickerContentBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatDatepickerContentBase;
}());
/** @type {?} */
var _MatDatepickerContentMixinBase = core$1.mixinColor(MatDatepickerContentBase);
/**
* Component used as the content for the datepicker dialog and popup. We use this instead of using
* MatCalendar directly as the content so we can control the initial focus. This also gives us a
* place to put additional features of the popup that are not part of the calendar itself in the
* future. (e.g. confirmation buttons).
* \@docs-private
* @template D
*/
var MatDatepickerContent = /** @class */ (function (_super) {
__extends(MatDatepickerContent, _super);
function MatDatepickerContent(elementRef) {
return _super.call(this, elementRef) || this;
}
/**
* @return {?}
*/
MatDatepickerContent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this._calendar.focusActiveCell();
};
MatDatepickerContent.decorators = [
{ type: core.Component, args: [{selector: 'mat-datepicker-content',
template: "<mat-calendar cdkTrapFocus [id]=\"datepicker.id\" [ngClass]=\"datepicker.panelClass\" [startAt]=\"datepicker.startAt\" [startView]=\"datepicker.startView\" [minDate]=\"datepicker._minDate\" [maxDate]=\"datepicker._maxDate\" [dateFilter]=\"datepicker._dateFilter\" [headerComponent]=\"datepicker.calendarHeaderComponent\" [selected]=\"datepicker._selected\" [dateClass]=\"datepicker.dateClass\" [@fadeInCalendar]=\"'enter'\" (selectedChange)=\"datepicker.select($event)\" (yearSelected)=\"datepicker._selectYear($event)\" (monthSelected)=\"datepicker._selectMonth($event)\" (_userSelection)=\"datepicker.close()\"></mat-calendar>",
styles: [".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content-touch{display:block;max-height:80vh;overflow:auto;margin:-24px}.mat-datepicker-content-touch .mat-calendar{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-calendar{width:64vh;height:80vh}}@media all and (orientation:portrait){.mat-datepicker-content-touch .mat-calendar{width:80vw;height:100vw}}"],
host: {
'class': 'mat-datepicker-content',
'[@transformPanel]': '"enter"',
'[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
},
animations: [
matDatepickerAnimations.transformPanel,
matDatepickerAnimations.fadeInCalendar,
],
exportAs: 'matDatepickerContent',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
inputs: ['color'],
},] },
];
/** @nocollapse */
MatDatepickerContent.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MatDatepickerContent.propDecorators = {
_calendar: [{ type: core.ViewChild, args: [MatCalendar, { static: false },] }]
};
return MatDatepickerContent;
}(_MatDatepickerContentMixinBase));
// TODO(mmalerba): We use a component instead of a directive here so the user can use implicit
// template reference variables (e.g. #d vs #d="matDatepicker"). We can change this to a directive
// if angular adds support for `exportAs: '$implicit'` on directives.
/**
* Component responsible for managing the datepicker popup/dialog.
* @template D
*/
var MatDatepicker = /** @class */ (function () {
function MatDatepicker(_dialog, _overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _document) {
this._dialog = _dialog;
this._overlay = _overlay;
this._ngZone = _ngZone;
this._viewContainerRef = _viewContainerRef;
this._dateAdapter = _dateAdapter;
this._dir = _dir;
this._document = _document;
/**
* The view that the calendar should start in.
*/
this.startView = 'month';
this._touchUi = false;
/**
* Emits selected year in multiyear view.
* This doesn't imply a change on the selected date.
*/
this.yearSelected = new core.EventEmitter();
/**
* Emits selected month in year view.
* This doesn't imply a change on the selected date.
*/
this.monthSelected = new core.EventEmitter();
/**
* Emits when the datepicker has been opened.
*/
this.openedStream = new core.EventEmitter();
/**
* Emits when the datepicker has been closed.
*/
this.closedStream = new core.EventEmitter();
this._opened = false;
/**
* The id for the datepicker calendar.
*/
this.id = "mat-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 = rxjs.Subscription.EMPTY;
/**
* Emits when the datepicker is disabled.
*/
this._disabledChange = new rxjs.Subject();
/**
* Emits new selected date when selected date changes.
*/
this._selectedChanged = new rxjs.Subject();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
this._scrollStrategy = scrollStrategy;
}
Object.defineProperty(MatDatepicker.prototype, "startAt", {
/** The date to open the calendar to initially. */
get: /**
* The date to open the calendar to initially.
* @return {?}
*/
function () {
// If an explicit startAt is set we start there, otherwise we start at whatever the currently
// selected value is.
return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "color", {
/** Color palette to use on the datepicker's calendar. */
get: /**
* Color palette to use on the datepicker's calendar.
* @return {?}
*/
function () {
return this._color ||
(this._datepickerInput ? this._datepickerInput._getThemePalette() : undefined);
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._color = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "touchUi", {
/**
* Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
* than a popup and elements have more padding to allow for bigger touch targets.
*/
get: /**
* Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
* than a popup and elements have more padding to allow for bigger touch targets.
* @return {?}
*/
function () { return this._touchUi; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._touchUi = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "disabled", {
/** Whether the datepicker pop-up should be disabled. */
get: /**
* Whether the datepicker pop-up should be disabled.
* @return {?}
*/
function () {
return this._disabled === undefined && this._datepickerInput ?
this._datepickerInput.disabled : !!this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._disabled) {
this._disabled = newValue;
this._disabledChange.next(newValue);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "opened", {
/** Whether the calendar is open. */
get: /**
* Whether the calendar is open.
* @return {?}
*/
function () { return this._opened; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { value ? this.open() : this.close(); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_selected", {
/** The currently selected date. */
get: /**
* The currently selected date.
* @return {?}
*/
function () { return this._validSelected; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._validSelected = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_minDate", {
/** The minimum selectable date. */
get: /**
* The minimum selectable date.
* @return {?}
*/
function () {
return this._datepickerInput && this._datepickerInput.min;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_maxDate", {
/** The maximum selectable date. */
get: /**
* The maximum selectable date.
* @return {?}
*/
function () {
return this._datepickerInput && this._datepickerInput.max;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_dateFilter", {
get: /**
* @return {?}
*/
function () {
return this._datepickerInput && this._datepickerInput._dateFilter;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatDatepicker.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.close();
this._inputSubscription.unsubscribe();
this._disabledChange.complete();
if (this._popupRef) {
this._popupRef.dispose();
this._popupComponentRef = null;
}
};
/** Selects the given date */
/**
* Selects the given date
* @param {?} date
* @return {?}
*/
MatDatepicker.prototype.select = /**
* Selects the given date
* @param {?} date
* @return {?}
*/
function (date) {
/** @type {?} */
var oldValue = this._selected;
this._selected = date;
if (!this._dateAdapter.sameDate(oldValue, this._selected)) {
this._selectedChanged.next(date);
}
};
/** Emits the selected year in multiyear view */
/**
* Emits the selected year in multiyear view
* @param {?} normalizedYear
* @return {?}
*/
MatDatepicker.prototype._selectYear = /**
* Emits the selected year in multiyear view
* @param {?} normalizedYear
* @return {?}
*/
function (normalizedYear) {
this.yearSelected.emit(normalizedYear);
};
/** Emits selected month in year view */
/**
* Emits selected month in year view
* @param {?} normalizedMonth
* @return {?}
*/
MatDatepicker.prototype._selectMonth = /**
* Emits selected month in year view
* @param {?} normalizedMonth
* @return {?}
*/
function (normalizedMonth) {
this.monthSelected.emit(normalizedMonth);
};
/**
* Register an input with this datepicker.
* @param input The datepicker input to register with this datepicker.
*/
/**
* Register an input with this datepicker.
* @param {?} input The datepicker input to register with this datepicker.
* @return {?}
*/
MatDatepicker.prototype._registerInput = /**
* Register an input with this datepicker.
* @param {?} input The datepicker input to register with this datepicker.
* @return {?}
*/
function (input$$1) {
var _this = this;
if (this._datepickerInput) {
throw Error('A MatDatepicker can only be associated with a single input.');
}
this._datepickerInput = input$$1;
this._inputSubscription =
this._datepickerInput._valueChange.subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) { return _this._selected = value; }));
};
/** Open the calendar. */
/**
* Open the calendar.
* @return {?}
*/
MatDatepicker.prototype.open = /**
* Open the calendar.
* @return {?}
*/
function () {
if (this._opened || this.disabled) {
return;
}
if (!this._datepickerInput) {
throw Error('Attempted to open an MatDatepicker with no associated input.');
}
if (this._document) {
this._focusedElementBeforeOpen = this._document.activeElement;
}
this.touchUi ? this._openAsDialog() : this._openAsPopup();
this._opened = true;
this.openedStream.emit();
};
/** Close the calendar. */
/**
* Close the calendar.
* @return {?}
*/
MatDatepicker.prototype.close = /**
* Close the calendar.
* @return {?}
*/
function () {
var _this = this;
if (!this._opened) {
return;
}
if (this._popupRef && this._popupRef.hasAttached()) {
this._popupRef.detach();
}
if (this._dialogRef) {
this._dialogRef.close();
this._dialogRef = null;
}
if (this._calendarPortal && this._calendarPortal.isAttached) {
this._calendarPortal.detach();
}
/** @type {?} */
var completeClose = (/**
* @return {?}
*/
function () {
// The `_opened` could've been reset already if
// we got two events in quick succession.
if (_this._opened) {
_this._opened = false;
_this.closedStream.emit();
_this._focusedElementBeforeOpen = null;
}
});
if (this._focusedElementBeforeOpen &&
typeof this._focusedElementBeforeOpen.focus === 'function') {
// Because IE moves focus asynchronously, we can't count on it being restored before we've
// marked the datepicker as closed. If the event fires out of sequence and the element that
// we're refocusing opens the datepicker on focus, the user could be stuck with not being
// able to close the calendar at all. We work around it by making the logic, that marks
// the datepicker as closed, async as well.
this._focusedElementBeforeOpen.focus();
setTimeout(completeClose);
}
else {
completeClose();
}
};
/** Open the calendar as a dialog. */
/**
* Open the calendar as a dialog.
* @private
* @return {?}
*/
MatDatepicker.prototype._openAsDialog = /**
* Open the calendar as a dialog.
* @private
* @return {?}
*/
function () {
var _this = this;
// Usually this would be handled by `open` which ensures that we can only have one overlay
// open at a time, however since we reset the variables in async handlers some overlays
// may slip through if the user opens and closes multiple times in quick succession (e.g.
// by holding down the enter key).
if (this._dialogRef) {
this._dialogRef.close();
}
this._dialogRef = this._dialog.open(MatDatepickerContent, {
direction: this._dir ? this._dir.value : 'ltr',
viewContainerRef: this._viewContainerRef,
panelClass: 'mat-datepicker-dialog',
});
this._dialogRef.afterClosed().subscribe((/**
* @return {?}
*/
function () { return _this.close(); }));
this._dialogRef.componentInstance.datepicker = this;
this._setColor();
};
/** Open the calendar as a popup. */
/**
* Open the calendar as a popup.
* @private
* @return {?}
*/
MatDatepicker.prototype._openAsPopup = /**
* Open the calendar as a popup.
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this._calendarPortal) {
this._calendarPortal = new portal.ComponentPortal(MatDatepickerContent, this._viewContainerRef);
}
if (!this._popupRef) {
this._createPopup();
}
if (!this._popupRef.hasAttached()) {
this._popupComponentRef = this._popupRef.attach(this._calendarPortal);
this._popupComponentRef.instance.datepicker = this;
this._setColor();
// Update the position once the calendar has rendered.
this._ngZone.onStable.asObservable().pipe(operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
_this._popupRef.updatePosition();
}));
}
};
/** Create the popup. */
/**
* Create the popup.
* @private
* @return {?}
*/
MatDatepicker.prototype._createPopup = /**
* Create the popup.
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var overlayConfig = new overlay.OverlayConfig({
positionStrategy: this._createPopupPositionStrategy(),
hasBackdrop: true,
backdropClass: 'mat-overlay-transparent-backdrop',
direction: this._dir,
scrollStrategy: this._scrollStrategy(),
panelClass: 'mat-datepicker-popup',
});
this._popupRef = this._overlay.create(overlayConfig);
this._popupRef.overlayElement.setAttribute('role', 'dialog');
rxjs.merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.keydownEvents().pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) {
// Closing on alt + up is only valid when there's an input associated with the datepicker.
return event.keyCode === keycodes.ESCAPE ||
(_this._datepickerInput && event.altKey && event.keyCode === keycodes.UP_ARROW);
})))).subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (event) {
event.preventDefault();
}
_this.close();
}));
};
/** Create the popup PositionStrategy. */
/**
* Create the popup PositionStrategy.
* @private
* @return {?}
*/
MatDatepicker.prototype._createPopupPositionStrategy = /**
* Create the popup PositionStrategy.
* @private
* @return {?}
*/
function () {
return this._overlay.position()
.flexibleConnectedTo(this._datepickerInput.getConnectedOverlayOrigin())
.withTransformOriginOn('.mat-datepicker-content')
.withFlexibleDimensions(false)
.withViewportMargin(8)
.withLockedPosition()
.withPositions([
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top'
},
{
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom'
},
{
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top'
},
{
originX: 'end',
originY: 'top',
overlayX: 'end',
overlayY: 'bottom'
}
]);
};
/**
* @param obj The object to check.
* @returns The given object if it is both a date instance and valid, otherwise null.
*/
/**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatDatepicker.prototype._getValidDateOrNull = /**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
/** Passes the current theme color along to the calendar overlay. */
/**
* Passes the current theme color along to the calendar overlay.
* @private
* @return {?}
*/
MatDatepicker.prototype._setColor = /**
* Passes the current theme color along to the calendar overlay.
* @private
* @return {?}
*/
function () {
/** @type {?} */
var color = this.color;
if (this._popupComponentRef) {
this._popupComponentRef.instance.color = color;
}
if (this._dialogRef) {
this._dialogRef.componentInstance.color = color;
}
};
MatDatepicker.decorators = [
{ type: core.Component, args: [{selector: 'mat-datepicker',
template: '',
exportAs: 'matDatepicker',
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
},] },
];
/** @nocollapse */
MatDatepicker.ctorParameters = function () { return [
{ type: dialog.MatDialog },
{ type: overlay.Overlay },
{ type: core.NgZone },
{ type: core.ViewContainerRef },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_DATEPICKER_SCROLL_STRATEGY,] }] },
{ type: core$1.DateAdapter, decorators: [{ type: core.Optional }] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional }] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] }
]; };
MatDatepicker.propDecorators = {
calendarHeaderComponent: [{ type: core.Input }],
startAt: [{ type: core.Input }],
startView: [{ type: core.Input }],
color: [{ type: core.Input }],
touchUi: [{ type: core.Input }],
disabled: [{ type: core.Input }],
yearSelected: [{ type: core.Output }],
monthSelected: [{ type: core.Output }],
panelClass: [{ type: core.Input }],
dateClass: [{ type: core.Input }],
openedStream: [{ type: core.Output, args: ['opened',] }],
closedStream: [{ type: core.Output, args: ['closed',] }],
opened: [{ type: core.Input }]
};
return MatDatepicker;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* \@docs-private
* @type {?}
*/
var MAT_DATEPICKER_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return MatDatepickerInput; })),
multi: true
};
/**
* \@docs-private
* @type {?}
*/
var MAT_DATEPICKER_VALIDATORS = {
provide: forms.NG_VALIDATORS,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return MatDatepickerInput; })),
multi: true
};
/**
* An event used for datepicker input and change events. We don't always have access to a native
* input or change event because the event may have been triggered by the user clicking on the
* calendar popup. For consistency, we always use MatDatepickerInputEvent instead.
* @template D
*/
var /**
* An event used for datepicker input and change events. We don't always have access to a native
* input or change event because the event may have been triggered by the user clicking on the
* calendar popup. For consistency, we always use MatDatepickerInputEvent instead.
* @template D
*/
MatDatepickerInputEvent = /** @class */ (function () {
function MatDatepickerInputEvent(target, targetElement) {
this.target = target;
this.targetElement = targetElement;
this.value = this.target.value;
}
return MatDatepickerInputEvent;
}());
/**
* Directive used to connect an input to a MatDatepicker.
* @template D
*/
var MatDatepickerInput = /** @class */ (function () {
function MatDatepickerInput(_elementRef, _dateAdapter, _dateFormats, _formField) {
var _this = this;
this._elementRef = _elementRef;
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._formField = _formField;
/**
* Emits when a `change` event is fired on this `<input>`.
*/
this.dateChange = new core.EventEmitter();
/**
* Emits when an `input` event is fired on this `<input>`.
*/
this.dateInput = new core.EventEmitter();
/**
* Emits when the value changes (either due to user input or programmatic change).
*/
this._valueChange = new core.EventEmitter();
/**
* Emits when the disabled state has changed
*/
this._disabledChange = new core.EventEmitter();
this._onTouched = (/**
* @return {?}
*/
function () { });
this._cvaOnChange = (/**
* @return {?}
*/
function () { });
this._validatorOnChange = (/**
* @return {?}
*/
function () { });
this._datepickerSubscription = rxjs.Subscription.EMPTY;
this._localeSubscription = rxjs.Subscription.EMPTY;
/**
* The form control validator for whether the input parses.
*/
this._parseValidator = (/**
* @return {?}
*/
function () {
return _this._lastValueValid ?
null : { 'matDatepickerParse': { 'text': _this._elementRef.nativeElement.value } };
});
/**
* The form control validator for the min date.
*/
this._minValidator = (/**
* @param {?} control
* @return {?}
*/
function (control) {
/** @type {?} */
var controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
return (!_this.min || !controlValue ||
_this._dateAdapter.compareDate(_this.min, controlValue) <= 0) ?
null : { 'matDatepickerMin': { 'min': _this.min, 'actual': controlValue } };
});
/**
* The form control validator for the max date.
*/
this._maxValidator = (/**
* @param {?} control
* @return {?}
*/
function (control) {
/** @type {?} */
var controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
return (!_this.max || !controlValue ||
_this._dateAdapter.compareDate(_this.max, controlValue) >= 0) ?
null : { 'matDatepickerMax': { 'max': _this.max, 'actual': controlValue } };
});
/**
* The form control validator for the date filter.
*/
this._filterValidator = (/**
* @param {?} control
* @return {?}
*/
function (control) {
/** @type {?} */
var controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
return !_this._dateFilter || !controlValue || _this._dateFilter(controlValue) ?
null : { 'matDatepickerFilter': true };
});
/**
* The combined form control validator for this input.
*/
this._validator = forms.Validators.compose([this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator]);
/**
* Whether the last value set on the input was valid.
*/
this._lastValueValid = false;
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
// Update the displayed date when the locale changes.
this._localeSubscription = _dateAdapter.localeChanges.subscribe((/**
* @return {?}
*/
function () {
_this.value = _this.value;
}));
}
Object.defineProperty(MatDatepickerInput.prototype, "matDatepicker", {
/** The datepicker that this input is associated with. */
set: /**
* The datepicker that this input is associated with.
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (!value) {
return;
}
this._datepicker = value;
this._datepicker._registerInput(this);
this._datepickerSubscription.unsubscribe();
this._datepickerSubscription = this._datepicker._selectedChanged.subscribe((/**
* @param {?} selected
* @return {?}
*/
function (selected) {
_this.value = selected;
_this._cvaOnChange(selected);
_this._onTouched();
_this.dateInput.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
_this.dateChange.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
}));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "matDatepickerFilter", {
/** Function that can be used to filter out dates within the datepicker. */
set: /**
* Function that can be used to filter out dates within the datepicker.
* @param {?} value
* @return {?}
*/
function (value) {
this._dateFilter = value;
this._validatorOnChange();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "value", {
/** The value of the input. */
get: /**
* The value of the input.
* @return {?}
*/
function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
value = this._dateAdapter.deserialize(value);
this._lastValueValid = !value || this._dateAdapter.isValid(value);
value = this._getValidDateOrNull(value);
/** @type {?} */
var oldDate = this.value;
this._value = value;
this._formatValue(value);
if (!this._dateAdapter.sameDate(oldDate, value)) {
this._valueChange.emit(value);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "min", {
/** The minimum valid date. */
get: /**
* The minimum valid date.
* @return {?}
*/
function () { return this._min; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._validatorOnChange();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "max", {
/** The maximum valid date. */
get: /**
* The maximum valid date.
* @return {?}
*/
function () { return this._max; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._validatorOnChange();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "disabled", {
/** Whether the datepicker-input is disabled. */
get: /**
* Whether the datepicker-input is disabled.
* @return {?}
*/
function () { return !!this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
/** @type {?} */
var 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();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatDatepickerInput.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._datepickerSubscription.unsubscribe();
this._localeSubscription.unsubscribe();
this._valueChange.complete();
this._disabledChange.complete();
};
/** @docs-private */
/**
* \@docs-private
* @param {?} fn
* @return {?}
*/
MatDatepickerInput.prototype.registerOnValidatorChange = /**
* \@docs-private
* @param {?} fn
* @return {?}
*/
function (fn) {
this._validatorOnChange = fn;
};
/** @docs-private */
/**
* \@docs-private
* @param {?} c
* @return {?}
*/
MatDatepickerInput.prototype.validate = /**
* \@docs-private
* @param {?} c
* @return {?}
*/
function (c) {
return this._validator ? this._validator(c) : null;
};
/**
* @deprecated
* @breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
*/
/**
* @deprecated
* \@breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
* @return {?}
*/
MatDatepickerInput.prototype.getPopupConnectionElementRef = /**
* @deprecated
* \@breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
* @return {?}
*/
function () {
return this.getConnectedOverlayOrigin();
};
/**
* Gets the element that the datepicker popup should be connected to.
* @return The element to connect the popup to.
*/
/**
* Gets the element that the datepicker popup should be connected to.
* @return {?} The element to connect the popup to.
*/
MatDatepickerInput.prototype.getConnectedOverlayOrigin = /**
* Gets the element that the datepicker popup should be connected to.
* @return {?} The element to connect the popup to.
*/
function () {
return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
};
// Implemented as part of ControlValueAccessor.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MatDatepickerInput.prototype.writeValue =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
};
// Implemented as part of ControlValueAccessor.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatDatepickerInput.prototype.registerOnChange =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._cvaOnChange = fn;
};
// Implemented as part of ControlValueAccessor.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatDatepickerInput.prototype.registerOnTouched =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
// Implemented as part of ControlValueAccessor.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
MatDatepickerInput.prototype.setDisabledState =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* @param {?} event
* @return {?}
*/
MatDatepickerInput.prototype._onKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var isAltDownArrow = event.altKey && event.keyCode === keycodes.DOWN_ARROW;
if (this._datepicker && isAltDownArrow && !this._elementRef.nativeElement.readOnly) {
this._datepicker.open();
event.preventDefault();
}
};
/**
* @param {?} value
* @return {?}
*/
MatDatepickerInput.prototype._onInput = /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
this._lastValueValid = !date || this._dateAdapter.isValid(date);
date = this._getValidDateOrNull(date);
if (!this._dateAdapter.sameDate(date, this._value)) {
this._value = date;
this._cvaOnChange(date);
this._valueChange.emit(date);
this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
}
else {
this._validatorOnChange();
}
};
/**
* @return {?}
*/
MatDatepickerInput.prototype._onChange = /**
* @return {?}
*/
function () {
this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
};
/** Returns the palette used by the input's form field, if any. */
/**
* Returns the palette used by the input's form field, if any.
* @return {?}
*/
MatDatepickerInput.prototype._getThemePalette = /**
* Returns the palette used by the input's form field, if any.
* @return {?}
*/
function () {
return this._formField ? this._formField.color : undefined;
};
/** Handles blur events on the input. */
/**
* Handles blur events on the input.
* @return {?}
*/
MatDatepickerInput.prototype._onBlur = /**
* Handles blur events on the input.
* @return {?}
*/
function () {
// Reformat the input only if we have a valid value.
if (this.value) {
this._formatValue(this.value);
}
this._onTouched();
};
/** Formats a value and sets it on the input element. */
/**
* Formats a value and sets it on the input element.
* @private
* @param {?} value
* @return {?}
*/
MatDatepickerInput.prototype._formatValue = /**
* Formats a value and sets it on the input element.
* @private
* @param {?} value
* @return {?}
*/
function (value) {
this._elementRef.nativeElement.value =
value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
};
/**
* @param obj The object to check.
* @returns The given object if it is both a date instance and valid, otherwise null.
*/
/**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatDatepickerInput.prototype._getValidDateOrNull = /**
* @private
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
MatDatepickerInput.decorators = [
{ type: core.Directive, args: [{
selector: 'input[matDatepicker]',
providers: [
MAT_DATEPICKER_VALUE_ACCESSOR,
MAT_DATEPICKER_VALIDATORS,
{ provide: input.MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },
],
host: {
'aria-haspopup': 'dialog',
'[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
'[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
'[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
'[disabled]': 'disabled',
'(input)': '_onInput($event.target.value)',
'(change)': '_onChange()',
'(blur)': '_onBlur()',
'(keydown)': '_onKeydown($event)',
},
exportAs: 'matDatepickerInput',
},] },
];
/** @nocollapse */
MatDatepickerInput.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core$1.DateAdapter, decorators: [{ type: core.Optional }] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_DATE_FORMATS,] }] },
{ type: formField.MatFormField, decorators: [{ type: core.Optional }] }
]; };
MatDatepickerInput.propDecorators = {
matDatepicker: [{ type: core.Input }],
matDatepickerFilter: [{ type: core.Input }],
value: [{ type: core.Input }],
min: [{ type: core.Input }],
max: [{ type: core.Input }],
disabled: [{ type: core.Input }],
dateChange: [{ type: core.Output }],
dateInput: [{ type: core.Output }]
};
return MatDatepickerInput;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Can be used to override the icon of a `matDatepickerToggle`.
*/
var MatDatepickerToggleIcon = /** @class */ (function () {
function MatDatepickerToggleIcon() {
}
MatDatepickerToggleIcon.decorators = [
{ type: core.Directive, args: [{
selector: '[matDatepickerToggleIcon]'
},] },
];
return MatDatepickerToggleIcon;
}());
/**
* @template D
*/
var MatDatepickerToggle = /** @class */ (function () {
function MatDatepickerToggle(_intl, _changeDetectorRef, defaultTabIndex) {
this._intl = _intl;
this._changeDetectorRef = _changeDetectorRef;
this._stateChanges = rxjs.Subscription.EMPTY;
/** @type {?} */
var parsedTabIndex = Number(defaultTabIndex);
this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
}
Object.defineProperty(MatDatepickerToggle.prototype, "disabled", {
/** Whether the toggle button is disabled. */
get: /**
* Whether the toggle button is disabled.
* @return {?}
*/
function () {
if (this._disabled === undefined && this.datepicker) {
return this.datepicker.disabled;
}
return !!this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._disabled = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
MatDatepickerToggle.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes['datepicker']) {
this._watchStateChanges();
}
};
/**
* @return {?}
*/
MatDatepickerToggle.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._stateChanges.unsubscribe();
};
/**
* @return {?}
*/
MatDatepickerToggle.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._watchStateChanges();
};
/**
* @param {?} event
* @return {?}
*/
MatDatepickerToggle.prototype._open = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.datepicker && !this.disabled) {
this.datepicker.open();
event.stopPropagation();
}
};
/**
* @private
* @return {?}
*/
MatDatepickerToggle.prototype._watchStateChanges = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var datepickerDisabled = this.datepicker ? this.datepicker._disabledChange : rxjs.of();
/** @type {?} */
var inputDisabled = this.datepicker && this.datepicker._datepickerInput ?
this.datepicker._datepickerInput._disabledChange : rxjs.of();
/** @type {?} */
var datepickerToggled = this.datepicker ?
rxjs.merge(this.datepicker.openedStream, this.datepicker.closedStream) :
rxjs.of();
this._stateChanges.unsubscribe();
this._stateChanges = rxjs.merge(this._intl.changes, datepickerDisabled, inputDisabled, datepickerToggled).subscribe((/**
* @return {?}
*/
function () { return _this._changeDetectorRef.markForCheck(); }));
};
MatDatepickerToggle.decorators = [
{ type: core.Component, args: [{selector: 'mat-datepicker-toggle',
template: "<button #button mat-icon-button type=\"button\" aria-haspopup=\"dialog\" [attr.aria-label]=\"_intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"_open($event)\"><svg *ngIf=\"!_customIcon\" class=\"mat-datepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\"><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/></svg><ng-content select=\"[matDatepickerToggleIcon]\"></ng-content></button>",
styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon{margin:auto}"],
host: {
'class': 'mat-datepicker-toggle',
// Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
// consumer may have provided, while still being able to receive focus.
'[attr.tabindex]': '-1',
'[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
'[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
'[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
'(focus)': '_button.focus()',
},
exportAs: 'matDatepickerToggle',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatDatepickerToggle.ctorParameters = function () { return [
{ type: MatDatepickerIntl },
{ type: core.ChangeDetectorRef },
{ type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }
]; };
MatDatepickerToggle.propDecorators = {
datepicker: [{ type: core.Input, args: ['for',] }],
tabIndex: [{ type: core.Input }],
disabled: [{ type: core.Input }],
disableRipple: [{ type: core.Input }],
_customIcon: [{ type: core.ContentChild, args: [MatDatepickerToggleIcon, { static: false },] }],
_button: [{ type: core.ViewChild, args: ['button', { static: false },] }]
};
return MatDatepickerToggle;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MatDatepickerModule = /** @class */ (function () {
function MatDatepickerModule() {
}
MatDatepickerModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
button.MatButtonModule,
dialog.MatDialogModule,
overlay.OverlayModule,
a11y.A11yModule,
portal.PortalModule,
],
exports: [
MatCalendar,
MatCalendarBody,
MatDatepicker,
MatDatepickerContent,
MatDatepickerInput,
MatDatepickerToggle,
MatDatepickerToggleIcon,
MatMonthView,
MatYearView,
MatMultiYearView,
MatCalendarHeader,
],
declarations: [
MatCalendar,
MatCalendarBody,
MatDatepicker,
MatDatepickerContent,
MatDatepickerInput,
MatDatepickerToggle,
MatDatepickerToggleIcon,
MatMonthView,
MatYearView,
MatMultiYearView,
MatCalendarHeader,
],
providers: [
MatDatepickerIntl,
MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
],
entryComponents: [
MatDatepickerContent,
MatCalendarHeader,
]
},] },
];
return MatDatepickerModule;
}());
exports.MatMultiYearView = MatMultiYearView;
exports.yearsPerPage = yearsPerPage;
exports.yearsPerRow = yearsPerRow;
exports.MatDatepickerModule = MatDatepickerModule;
exports.MatCalendarHeader = MatCalendarHeader;
exports.MatCalendar = MatCalendar;
exports.MatCalendarCell = MatCalendarCell;
exports.MatCalendarBody = MatCalendarBody;
exports.MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY = MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY;
exports.MAT_DATEPICKER_SCROLL_STRATEGY = MAT_DATEPICKER_SCROLL_STRATEGY;
exports.MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER;
exports.MatDatepickerContent = MatDatepickerContent;
exports.MatDatepicker = MatDatepicker;
exports.matDatepickerAnimations = matDatepickerAnimations;
exports.MAT_DATEPICKER_VALUE_ACCESSOR = MAT_DATEPICKER_VALUE_ACCESSOR;
exports.MAT_DATEPICKER_VALIDATORS = MAT_DATEPICKER_VALIDATORS;
exports.MatDatepickerInputEvent = MatDatepickerInputEvent;
exports.MatDatepickerInput = MatDatepickerInput;
exports.MatDatepickerIntl = MatDatepickerIntl;
exports.MatDatepickerToggleIcon = MatDatepickerToggleIcon;
exports.MatDatepickerToggle = MatDatepickerToggle;
exports.MatMonthView = MatMonthView;
exports.MatYearView = MatYearView;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=material-datepicker.umd.js.map