@angular/material
Version:
Angular Material
1,265 lines (1,258 loc) • 142 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
*/
import { Injectable, NgModule, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Inject, Input, Optional, Output, ViewChild, ViewEncapsulation, ElementRef, NgZone, InjectionToken, ViewContainerRef, Directive, Attribute, ContentChild, ɵɵdefineInjectable } from '@angular/core';
import { Subject, merge, Subscription, of } from 'rxjs';
import { take, filter } from 'rxjs/operators';
import { DOWN_ARROW, END, ENTER, HOME, LEFT_ARROW, PAGE_DOWN, PAGE_UP, RIGHT_ARROW, UP_ARROW, SPACE, ESCAPE } from '@angular/cdk/keycodes';
import { DateAdapter, MAT_DATE_FORMATS, mixinColor } from '@angular/material/core';
import { Directionality } from '@angular/cdk/bidi';
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { __extends } from 'tslib';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { DOCUMENT, CommonModule } from '@angular/common';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { MatFormField } from '@angular/material/form-field';
import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { A11yModule } from '@angular/cdk/a11y';
/**
* @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 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: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ MatDatepickerIntl.ngInjectableDef = ɵɵ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 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(take(1)).subscribe((/**
* @return {?}
*/
function () {
/** @type {?} */
var activeCell = _this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
if (activeCell) {
activeCell.focus();
}
}));
}));
};
MatCalendarBody.decorators = [
{ type: 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\" role=\"button\" [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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatCalendarBody.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgZone }
]; };
MatCalendarBody.propDecorators = {
label: [{ type: Input }],
rows: [{ type: Input }],
todayValue: [{ type: Input }],
selectedValue: [{ type: Input }],
labelMinRequiredCells: [{ type: Input }],
numCols: [{ type: Input }],
activeCell: [{ type: Input }],
cellAspectRatio: [{ type: Input }],
selectedValueChange: [{ type: 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 EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new EventEmitter();
/**
* Emits when any date is activated.
*/
this.activeDateChange = new EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
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 LEFT_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
break;
case RIGHT_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
break;
case UP_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);
break;
case DOWN_ARROW:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);
break;
case HOME:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));
break;
case END:
this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, (this._dateAdapter.getNumDaysInMonth(this._activeDate) -
this._dateAdapter.getDate(this._activeDate)));
break;
case PAGE_UP:
this.activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, -1) :
this._dateAdapter.addCalendarMonths(this._activeDate, -1);
break;
case PAGE_DOWN:
this.activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, 1) :
this._dateAdapter.addCalendarMonths(this._activeDate, 1);
break;
case ENTER:
case SPACE:
if (!this.dateFilter || this.dateFilter(this._activeDate)) {
this._dateSelected(this._dateAdapter.getDate(this._activeDate));
this._userSelection.emit();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
return;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
this.activeDateChange.emit(this.activeDate);
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
};
/** Initializes this month view. */
/**
* 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._initWeekdays();
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();
};
/** Initializes the weekdays. */
/**
* Initializes the weekdays.
* @private
* @return {?}
*/
MatMonthView.prototype._initWeekdays = /**
* Initializes the weekdays.
* @private
* @return {?}
*/
function () {
/** @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));
};
/** 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: Component, args: [{selector: 'mat-month-view',
template: "<table class=\"mat-calendar-table\" role=\"presentation\"><thead class=\"mat-calendar-table-header\"><tr><th scope=\"col\" *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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatMonthView.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },
{ type: DateAdapter, decorators: [{ type: Optional }] },
{ type: Directionality, decorators: [{ type: Optional }] }
]; };
MatMonthView.propDecorators = {
activeDate: [{ type: Input }],
selected: [{ type: Input }],
minDate: [{ type: Input }],
maxDate: [{ type: Input }],
dateFilter: [{ type: Input }],
dateClass: [{ type: Input }],
selectedChange: [{ type: Output }],
_userSelection: [{ type: Output }],
activeDateChange: [{ type: Output }],
_matCalendarBody: [{ type: 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 EventEmitter();
/**
* Emits the selected year. This doesn't imply a change on the selected date
*/
this.yearSelected = new EventEmitter();
/**
* Emits when any date is activated.
*/
this.activeDateChange = new EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
this._activeDate = this._dateAdapter.today();
}
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 LEFT_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);
break;
case RIGHT_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);
break;
case UP_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);
break;
case DOWN_ARROW:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);
break;
case HOME:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));
break;
case END:
this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 1);
break;
case PAGE_UP:
this.activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
break;
case PAGE_DOWN:
this.activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
break;
case ENTER:
case SPACE:
this._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: 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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatMultiYearView.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: DateAdapter, decorators: [{ type: Optional }] },
{ type: Directionality, decorators: [{ type: Optional }] }
]; };
MatMultiYearView.propDecorators = {
activeDate: [{ type: Input }],
selected: [{ type: Input }],
minDate: [{ type: Input }],
maxDate: [{ type: Input }],
dateFilter: [{ type: Input }],
selectedChange: [{ type: Output }],
yearSelected: [{ type: Output }],
activeDateChange: [{ type: Output }],
_matCalendarBody: [{ type: 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 EventEmitter();
/**
* Emits the selected month. This doesn't imply a change on the selected date
*/
this.monthSelected = new EventEmitter();
/**
* Emits when any date is activated.
*/
this.activeDateChange = new EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('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 {?} mo