@angular/material
Version:
Angular Material
1,230 lines (1,216 loc) • 114 kB
JavaScript
/**
* @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/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/core'), require('@angular/material/button'), require('@angular/material/dialog'), require('@angular/cdk/keycodes'), require('@angular/material/core'), require('rxjs/operators/take'), require('rxjs/Subject'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/portal'), require('rxjs/operators/filter'), require('rxjs/Subscription'), require('rxjs/observable/merge'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('rxjs/observable/of')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/common', '@angular/core', '@angular/material/button', '@angular/material/dialog', '@angular/cdk/keycodes', '@angular/material/core', 'rxjs/operators/take', 'rxjs/Subject', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/portal', 'rxjs/operators/filter', 'rxjs/Subscription', 'rxjs/observable/merge', '@angular/forms', '@angular/material/form-field', '@angular/material/input', 'rxjs/observable/of'], factory) :
(factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.datepicker = global.ng.material.datepicker || {}),global.ng.cdk.a11y,global.ng.cdk.overlay,global.ng.common,global.ng.core,global.ng.material.button,global.ng.material.dialog,global.ng.cdk.keycodes,global.ng.material.core,global.Rx.operators,global.Rx,global.ng.cdk.bidi,global.ng.cdk.coercion,global.ng.cdk.portal,global.Rx.operators,global.Rx,global.Rx.Observable,global.ng.forms,global.ng.material.formField,global.ng.material.input,global.Rx.Observable));
}(this, (function (exports,_angular_cdk_a11y,_angular_cdk_overlay,_angular_common,_angular_core,_angular_material_button,_angular_material_dialog,_angular_cdk_keycodes,_angular_material_core,rxjs_operators_take,rxjs_Subject,_angular_cdk_bidi,_angular_cdk_coercion,_angular_cdk_portal,rxjs_operators_filter,rxjs_Subscription,rxjs_observable_merge,_angular_forms,_angular_material_formField,_angular_material_input,rxjs_observable_of) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} 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} 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.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: _angular_core.Injectable },
];
/** @nocollapse */
MatDatepickerIntl.ctorParameters = function () { return []; };
return MatDatepickerIntl;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* An internal class that represents the data corresponding to a single calendar cell.
* \@docs-private
*/
var MatCalendarCell = /** @class */ (function () {
function MatCalendarCell(value, displayValue, ariaLabel, enabled) {
this.value = value;
this.displayValue = displayValue;
this.ariaLabel = ariaLabel;
this.enabled = enabled;
}
return MatCalendarCell;
}());
/**
* An internal component used to display calendar data in a table.
* \@docs-private
*/
var MatCalendarBody = /** @class */ (function () {
function MatCalendarBody() {
/**
* The number of columns in the table.
*/
this.numCols = 7;
/**
* Whether to allow selection of disabled cells.
*/
this.allowDisabledSelection = false;
/**
* 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 _angular_core.EventEmitter();
}
/**
* @param {?} cell
* @return {?}
*/
MatCalendarBody.prototype._cellClicked = /**
* @param {?} cell
* @return {?}
*/
function (cell) {
if (!this.allowDisabledSelection && !cell.enabled) {
return;
}
this.selectedValueChange.emit(cell.value);
};
Object.defineProperty(MatCalendarBody.prototype, "_firstRowOffset", {
/** The number of blank cells to put at the beginning for the first row. */
get: /**
* The number of blank cells to put at the beginning for the first row.
* @return {?}
*/
function () {
return this.rows && this.rows.length && this.rows[0].length ?
this.numCols - this.rows[0].length : 0;
},
enumerable: true,
configurable: true
});
/**
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
MatCalendarBody.prototype._isActiveCell = /**
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
function (rowIndex, colIndex) {
var /** @type {?} */ 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;
};
MatCalendarBody.decorators = [
{ type: _angular_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.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">{{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.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [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\" (click)=\"_cellClicked(item)\" [style.width.%]=\"100 / numCols\" [style.paddingTop.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\"><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}[dir=rtl] .mat-calendar-body-label{text-align:right}"],
host: {
'class': 'mat-calendar-body',
'role': 'grid',
'attr.aria-readonly': 'true'
},
exportAs: 'matCalendarBody',
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatCalendarBody.ctorParameters = function () { return []; };
MatCalendarBody.propDecorators = {
"label": [{ type: _angular_core.Input },],
"rows": [{ type: _angular_core.Input },],
"todayValue": [{ type: _angular_core.Input },],
"selectedValue": [{ type: _angular_core.Input },],
"labelMinRequiredCells": [{ type: _angular_core.Input },],
"numCols": [{ type: _angular_core.Input },],
"allowDisabledSelection": [{ type: _angular_core.Input },],
"activeCell": [{ type: _angular_core.Input },],
"cellAspectRatio": [{ type: _angular_core.Input },],
"selectedValueChange": [{ type: _angular_core.Output },],
};
return MatCalendarBody;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DAYS_PER_WEEK = 7;
/**
* An internal component used to display a single month in the datepicker.
* \@docs-private
*/
var MatMonthView = /** @class */ (function () {
function MatMonthView(_dateAdapter, _dateFormats, _changeDetectorRef) {
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._changeDetectorRef = _changeDetectorRef;
/**
* Emits when a new date is selected.
*/
this.selectedChange = new _angular_core.EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new _angular_core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
var /** @type {?} */ firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
var /** @type {?} */ narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
var /** @type {?} */ longWeekdays = this._dateAdapter.getDayOfWeekNames('long');
// Rotate the labels for days of the week based on the configured first day of the week.
var /** @type {?} */ weekdays = longWeekdays.map(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", {
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) {
var /** @type {?} */ oldActiveDate = this._activeDate;
this._activeDate =
this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMonthView.prototype, "selected", {
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", {
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", {
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) {
var /** @type {?} */ selectedYear = this._dateAdapter.getYear(this.activeDate);
var /** @type {?} */ selectedMonth = this._dateAdapter.getMonth(this.activeDate);
var /** @type {?} */ selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
this.selectedChange.emit(selectedDate);
}
this._userSelection.emit();
};
/** 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();
var /** @type {?} */ 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();
};
/**
* Creates MatCalendarCells for the dates in this month.
* @return {?}
*/
MatMonthView.prototype._createWeekCells = /**
* Creates MatCalendarCells for the dates in this month.
* @return {?}
*/
function () {
var /** @type {?} */ daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
var /** @type {?} */ dateNames = this._dateAdapter.getDateNames();
this._weeks = [[]];
for (var /** @type {?} */ i = 0, /** @type {?} */ cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
if (cell == DAYS_PER_WEEK) {
this._weeks.push([]);
cell = 0;
}
var /** @type {?} */ date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);
var /** @type {?} */ enabled = this._shouldEnableDate(date);
var /** @type {?} */ ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
this._weeks[this._weeks.length - 1]
.push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
}
};
/**
* Date filter for the month
* @param {?} date
* @return {?}
*/
MatMonthView.prototype._shouldEnableDate = /**
* Date filter for the month
* @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.
* @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.
* @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.
* @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.
* @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.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatMonthView.prototype._getValidDateOrNull = /**
* @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;
};
MatMonthView.decorators = [
{ type: _angular_core.Component, args: [{selector: 'mat-month-view',
template: "<table class=\"mat-calendar-table\"><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)\"></tbody></table>",
exportAs: 'matMonthView',
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatMonthView.ctorParameters = function () { return [
{ type: _angular_material_core.DateAdapter, decorators: [{ type: _angular_core.Optional },] },
{ type: undefined, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Inject, args: [_angular_material_core.MAT_DATE_FORMATS,] },] },
{ type: _angular_core.ChangeDetectorRef, },
]; };
MatMonthView.propDecorators = {
"activeDate": [{ type: _angular_core.Input },],
"selected": [{ type: _angular_core.Input },],
"minDate": [{ type: _angular_core.Input },],
"maxDate": [{ type: _angular_core.Input },],
"dateFilter": [{ type: _angular_core.Input },],
"selectedChange": [{ type: _angular_core.Output },],
"_userSelection": [{ type: _angular_core.Output },],
};
return MatMonthView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var yearsPerPage = 24;
var yearsPerRow = 4;
/**
* An internal component used to display a year selector in the datepicker.
* \@docs-private
*/
var MatMultiYearView = /** @class */ (function () {
function MatMultiYearView(_dateAdapter, _changeDetectorRef) {
this._dateAdapter = _dateAdapter;
this._changeDetectorRef = _changeDetectorRef;
/**
* Emits when a new month is selected.
*/
this.selectedChange = new _angular_core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
this._activeDate = this._dateAdapter.today();
}
Object.defineProperty(MatMultiYearView.prototype, "activeDate", {
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) {
var /** @type {?} */ oldActiveDate = this._activeDate;
this._activeDate =
this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
if (Math.floor(this._dateAdapter.getYear(oldActiveDate) / yearsPerPage) !=
Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMultiYearView.prototype, "selected", {
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", {
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", {
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());
var /** @type {?} */ activeYear = this._dateAdapter.getYear(this._activeDate);
var /** @type {?} */ activeOffset = activeYear % yearsPerPage;
this._years = [];
for (var /** @type {?} */ i = 0, /** @type {?} */ row = []; i < yearsPerPage; i++) {
row.push(activeYear - activeOffset + i);
if (row.length == yearsPerRow) {
this._years.push(row.map(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) {
var /** @type {?} */ month = this._dateAdapter.getMonth(this.activeDate);
var /** @type {?} */ 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)));
};
/**
* @return {?}
*/
MatMultiYearView.prototype._getActiveCell = /**
* @return {?}
*/
function () {
return this._dateAdapter.getYear(this.activeDate) % yearsPerPage;
};
/**
* Creates an MatCalendarCell for the given year.
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._createCellForYear = /**
* Creates an MatCalendarCell for the given year.
* @param {?} year
* @return {?}
*/
function (year) {
var /** @type {?} */ 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.
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._shouldEnableYear = /**
* Whether the given year is enabled.
* @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;
}
var /** @type {?} */ firstOfYear = this._dateAdapter.createDate(year, 0, 1);
// If any date in the year is enabled count the year as enabled.
for (var /** @type {?} */ 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.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatMultiYearView.prototype._getValidDateOrNull = /**
* @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;
};
MatMultiYearView.decorators = [
{ type: _angular_core.Component, args: [{selector: 'mat-multi-year-view',
template: "<table class=\"mat-calendar-table\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body allowDisabledSelection=\"true\" [rows]=\"_years\" [todayValue]=\"_todayYear\" [selectedValue]=\"_selectedYear\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_getActiveCell()\" (selectedValueChange)=\"_yearSelected($event)\"></tbody></table>",
exportAs: 'matMultiYearView',
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatMultiYearView.ctorParameters = function () { return [
{ type: _angular_material_core.DateAdapter, decorators: [{ type: _angular_core.Optional },] },
{ type: _angular_core.ChangeDetectorRef, },
]; };
MatMultiYearView.propDecorators = {
"activeDate": [{ type: _angular_core.Input },],
"selected": [{ type: _angular_core.Input },],
"minDate": [{ type: _angular_core.Input },],
"maxDate": [{ type: _angular_core.Input },],
"dateFilter": [{ type: _angular_core.Input },],
"selectedChange": [{ type: _angular_core.Output },],
};
return MatMultiYearView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* An internal component used to display a single year in the datepicker.
* \@docs-private
*/
var MatYearView = /** @class */ (function () {
function MatYearView(_dateAdapter, _dateFormats, _changeDetectorRef) {
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._changeDetectorRef = _changeDetectorRef;
/**
* Emits when a new month is selected.
*/
this.selectedChange = new _angular_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", {
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) {
var /** @type {?} */ oldActiveDate = this._activeDate;
this._activeDate =
this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
if (this._dateAdapter.getYear(oldActiveDate) != this._dateAdapter.getYear(this._activeDate)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatYearView.prototype, "selected", {
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", {
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", {
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) {
var /** @type {?} */ daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1));
this.selectedChange.emit(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
};
/** 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);
var /** @type {?} */ 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(function (row) {
return row.map(function (month) { return _this._createCellForMonth(month, monthNames[month]); });
});
this._changeDetectorRef.markForCheck();
};
/**
* Gets the month in this year that the given Date falls on.
* Returns null if the given Date is in another year.
* @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.
* @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.
* @param {?} month
* @param {?} monthName
* @return {?}
*/
MatYearView.prototype._createCellForMonth = /**
* Creates an MatCalendarCell for the given month.
* @param {?} month
* @param {?} monthName
* @return {?}
*/
function (month, monthName) {
var /** @type {?} */ 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.
* @param {?} month
* @return {?}
*/
MatYearView.prototype._shouldEnableMonth = /**
* Whether the given month is enabled.
* @param {?} month
* @return {?}
*/
function (month) {
var /** @type {?} */ 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;
}
var /** @type {?} */ firstOfMonth = this._dateAdapter.createDate(activeYear, month, 1);
// If any date in the month is enabled count the month as enabled.
for (var /** @type {?} */ 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
* @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
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
if (this.maxDate) {
var /** @type {?} */ maxYear = this._dateAdapter.getYear(this.maxDate);
var /** @type {?} */ 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
* @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
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
if (this.minDate) {
var /** @type {?} */ minYear = this._dateAdapter.getYear(this.minDate);
var /** @type {?} */ minMonth = this._dateAdapter.getMonth(this.minDate);
return year < minYear || (year === minYear && month < minMonth);
}
return false;
};
/**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatYearView.prototype._getValidDateOrNull = /**
* @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;
};
MatYearView.decorators = [
{ type: _angular_core.Component, args: [{selector: 'mat-year-view',
template: "<table class=\"mat-calendar-table\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body allowDisabledSelection=\"true\" [label]=\"_yearLabel\" [rows]=\"_months\" [todayValue]=\"_todayMonth\" [selectedValue]=\"_selectedMonth\" [labelMinRequiredCells]=\"2\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_dateAdapter.getMonth(activeDate)\" (selectedValueChange)=\"_monthSelected($event)\"></tbody></table>",
exportAs: 'matYearView',
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatYearView.ctorParameters = function () { return [
{ type: _angular_material_core.DateAdapter, decorators: [{ type: _angular_core.Optional },] },
{ type: undefined, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Inject, args: [_angular_material_core.MAT_DATE_FORMATS,] },] },
{ type: _angular_core.ChangeDetectorRef, },
]; };
MatYearView.propDecorators = {
"activeDate": [{ type: _angular_core.Input },],
"selected": [{ type: _angular_core.Input },],
"minDate": [{ type: _angular_core.Input },],
"maxDate": [{ type: _angular_core.Input },],
"dateFilter": [{ type: _angular_core.Input },],
"selectedChange": [{ type: _angular_core.Output },],
};
return MatYearView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* A calendar that is used as part of the datepicker.
* \@docs-private
*/
var MatCalendar = /** @class */ (function () {
function MatCalendar(_elementRef, _intl, _ngZone, _dateAdapter, _dateFormats, changeDetectorRef, _dir) {
this._elementRef = _elementRef;
this._intl = _intl;
this._ngZone = _ngZone;
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._dir = _dir;
/**
* Whether the calendar should be started in month or year view.
*/
this.startView = 'month';
/**
* Emits when the currently selected date changes.
*/
this.selectedChange = new _angular_core.EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new _angular_core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
this._intlChanges = _intl.changes.subscribe(function () { return changeDetectorRef.markForCheck(); });
}
Object.defineProperty(MatCalendar.prototype, "startAt", {
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", {
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", {
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", {
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);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_periodButtonText", {
/** The label for the current calendar view. */
get: /**
* The label for the current calendar view.
* @return {?}
*/
function () {
if (this._currentView == 'month') {
return this._dateAdapter.format(this._activeDate, this._dateFormats.display.monthYearLabel)
.toLocaleUpperCase();
}
if (this._currentView == 'year') {
return this._dateAdapter.getYearName(this._activeDate);
}
var /** @type {?} */ activeYear = this._dateAdapter.getYear(this._activeDate);
var /** @type {?} */ firstYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
var /** @type {?} */ lastYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
return firstYearInView + " \u2013 " + lastYearInView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_periodButtonLabel", {
get: /**
* @return {?}
*/
function () {
return this._currentView == 'month' ?
this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_prevButtonLabel", {
/** The label for the the previous button. */
get: /**
* The label for the the previous button.
* @return {?}
*/
function () {
return {
'month': this._intl.prevMonthLabel,
'year': this._intl.prevYearLabel,
'multi-year': this._intl.prevMultiYearLabel
}[this._currentView];
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_nextButtonLabel", {
/** The label for the the next button. */
get: /**
* The label for the the next button.
* @return {?}
*/
function () {
return {
'month': this._intl.nextMonthLabel,
'year': this._intl.nextYearLabel,
'multi-year': this._intl.nextMultiYearLabel
}[this._currentView];
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatCalendar.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._activeDate = this.startAt || this._dateAdapter.today();
this._focusActiveCell();
this._currentView = this.startView;
};
/**
* @return {?}
*/
MatCalendar.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._intlChanges.unsubscribe();
};
/**
* @param {?} changes
* @return {?}
*/
MatCalendar.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var /** @type {?} */ change = changes["minDate"] || changes["maxDate"] || changes["dateFilter"];
if (change && !change.firstChange) {
var /** @type {?} */ view = this.monthView || this.yearView || this.multiYearView;
if (view) {
view._init();
}
}
};
/** Handles date selection in the month view. */
/**
* Handles date selection in the month view.
* @p