UNPKG

@angular/material

Version:
1,241 lines (1,233 loc) 69.7 kB
/** * @license * Copyright Google Inc. 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 { A11yModule } from '@angular/cdk/a11y'; import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, Inject, Injectable, InjectionToken, Input, NgModule, NgZone, Optional, Output, Renderer2, ViewChild, ViewContainerRef, ViewEncapsulation, forwardRef } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; import { DOWN_ARROW, END, ENTER, ESCAPE, HOME, LEFT_ARROW, PAGE_DOWN, PAGE_UP, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { first } from 'rxjs/operator/first'; import { Subject } from 'rxjs/Subject'; import { Directionality } from '@angular/cdk/bidi'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { ComponentPortal } from '@angular/cdk/portal'; import { first as first$1 } from '@angular/cdk/rxjs'; import { DOCUMENT } from '@angular/platform-browser'; import { Subscription } from 'rxjs/Subscription'; import { NG_VALIDATORS, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; import { MatFormField } from '@angular/material/form-field'; import { merge } from 'rxjs/observable/merge'; import { of } from 'rxjs/observable/of'; /** * Function that attempts to coerce a value to a date using a DateAdapter. Date instances, null, * and undefined will be passed through. Empty strings will be coerced to null. Valid ISO 8601 * strings (https://www.ietf.org/rfc/rfc3339.txt) will be coerced to dates. All other values will * result in an error being thrown. * @throws Throws when the value cannot be coerced. * @template D * @param {?} adapter The date adapter to use for coercion * @param {?} value The value to coerce. * @return {?} A date object coerced from the value. */ function coerceDateProperty(adapter, value) { if (typeof value === 'string') { if (value == '') { value = null; } else { value = adapter.fromIso8601(value) || value; } } if (value == null || adapter.isDateInstance(value)) { return value; } throw Error(`Datepicker: Value must be either a date object recognized by the DateAdapter or ` + `an ISO 8601 string. Instead got: ${value}`); } /** * \@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, or provide a custom implementation.`); } /** * Datepicker data that requires internationalization. */ class MatDatepickerIntl { constructor() { /** * 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 'switch to month view' button (used by screen readers). */ this.switchToMonthViewLabel = 'Change to month view'; /** * A label for the 'switch to year view' button (used by screen readers). */ this.switchToYearViewLabel = 'Change to year view'; } } MatDatepickerIntl.decorators = [ { type: Injectable }, ]; /** * @nocollapse */ MatDatepickerIntl.ctorParameters = () => []; /** * An internal class that represents the data corresponding to a single calendar cell. * \@docs-private */ class MatCalendarCell { /** * @param {?} value * @param {?} displayValue * @param {?} ariaLabel * @param {?} enabled */ constructor(value, displayValue, ariaLabel, enabled) { this.value = value; this.displayValue = displayValue; this.ariaLabel = ariaLabel; this.enabled = enabled; } } /** * An internal component used to display calendar data in a table. * \@docs-private */ class MatCalendarBody { constructor() { /** * 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 EventEmitter(); } /** * @param {?} cell * @return {?} */ _cellClicked(cell) { if (!this.allowDisabledSelection && !cell.enabled) { return; } this.selectedValueChange.emit(cell.value); } /** * The number of blank cells to put at the beginning for the first row. * @return {?} */ get _firstRowOffset() { return this.rows && this.rows.length && this.rows[0].length ? this.numCols - this.rows[0].length : 0; } /** * @param {?} rowIndex * @param {?} colIndex * @return {?} */ _isActiveCell(rowIndex, colIndex) { let /** @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: 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', }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, },] }, ]; /** * @nocollapse */ MatCalendarBody.ctorParameters = () => []; MatCalendarBody.propDecorators = { 'label': [{ type: Input },], 'rows': [{ type: Input },], 'todayValue': [{ type: Input },], 'selectedValue': [{ type: Input },], 'labelMinRequiredCells': [{ type: Input },], 'numCols': [{ type: Input },], 'allowDisabledSelection': [{ type: Input },], 'activeCell': [{ type: Input },], 'cellAspectRatio': [{ type: Input },], 'selectedValueChange': [{ type: Output },], }; const DAYS_PER_WEEK = 7; /** * An internal component used to display a single month in the datepicker. * \@docs-private */ class MatMonthView { /** * @param {?} _dateAdapter * @param {?} _dateFormats * @param {?} _changeDetectorRef */ constructor(_dateAdapter, _dateFormats, _changeDetectorRef) { this._dateAdapter = _dateAdapter; this._dateFormats = _dateFormats; this._changeDetectorRef = _changeDetectorRef; /** * Emits when a new date is selected. */ this.selectedChange = new EventEmitter(); /** * Emits when any date is selected. */ this._userSelection = new EventEmitter(); if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); } if (!this._dateFormats) { throw createMissingDateImplError('MAT_DATE_FORMATS'); } const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek(); const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow'); const longWeekdays = this._dateAdapter.getDayOfWeekNames('long'); // Rotate the labels for days of the week based on the configured first day of the week. let weekdays = longWeekdays.map((long, i) => { return { long, narrow: narrowWeekdays[i] }; }); this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek)); this._activeDate = this._dateAdapter.today(); } /** * The date to display in this month view (everything other than the month and year is ignored). * @return {?} */ get activeDate() { return this._activeDate; } /** * @param {?} value * @return {?} */ set activeDate(value) { let /** @type {?} */ oldActiveDate = this._activeDate; this._activeDate = coerceDateProperty(this._dateAdapter, value) || this._dateAdapter.today(); if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) { this._init(); } } /** * The currently selected date. * @return {?} */ get selected() { return this._selected; } /** * @param {?} value * @return {?} */ set selected(value) { this._selected = coerceDateProperty(this._dateAdapter, value); this._selectedDate = this._getDateInCurrentMonth(this._selected); } /** * @return {?} */ ngAfterContentInit() { this._init(); } /** * Handles when a new date is selected. * @param {?} date * @return {?} */ _dateSelected(date) { if (this._selectedDate != date) { const /** @type {?} */ selectedYear = this._dateAdapter.getYear(this.activeDate); const /** @type {?} */ selectedMonth = this._dateAdapter.getMonth(this.activeDate); const /** @type {?} */ selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date); this.selectedChange.emit(selectedDate); } this._userSelection.emit(); } /** * Initializes this month view. * @return {?} */ _init() { this._selectedDate = this._getDateInCurrentMonth(this.selected); this._todayDate = this._getDateInCurrentMonth(this._dateAdapter.today()); this._monthLabel = this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)] .toLocaleUpperCase(); let /** @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 {?} */ _createWeekCells() { let /** @type {?} */ daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate); let /** @type {?} */ dateNames = this._dateAdapter.getDateNames(); this._weeks = [[]]; for (let /** @type {?} */ i = 0, /** @type {?} */ cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) { if (cell == DAYS_PER_WEEK) { this._weeks.push([]); cell = 0; } let /** @type {?} */ date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1); let /** @type {?} */ enabled = !this.dateFilter || this.dateFilter(date); let /** @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)); } } /** * 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 {?} */ _getDateInCurrentMonth(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 {?} */ _hasSameMonthAndYear(d1, d2) { return !!(d1 && d2 && this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) && this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2)); } } MatMonthView.decorators = [ { type: 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 role=\"grid\" [label]=\"_monthLabel\" [rows]=\"_weeks\" [todayValue]=\"_todayDate\" [selectedValue]=\"_selectedDate\" [labelMinRequiredCells]=\"3\" [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\" (selectedValueChange)=\"_dateSelected($event)\"></tbody></table>", encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, },] }, ]; /** * @nocollapse */ MatMonthView.ctorParameters = () => [ { type: DateAdapter, decorators: [{ type: Optional },] }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] },] }, { type: ChangeDetectorRef, }, ]; MatMonthView.propDecorators = { 'activeDate': [{ type: Input },], 'selected': [{ type: Input },], 'dateFilter': [{ type: Input },], 'selectedChange': [{ type: Output },], '_userSelection': [{ type: Output },], }; /** * An internal component used to display a single year in the datepicker. * \@docs-private */ class MatYearView { /** * @param {?} _dateAdapter * @param {?} _dateFormats * @param {?} _changeDetectorRef */ constructor(_dateAdapter, _dateFormats, _changeDetectorRef) { this._dateAdapter = _dateAdapter; this._dateFormats = _dateFormats; this._changeDetectorRef = _changeDetectorRef; /** * Emits when a new month is selected. */ this.selectedChange = new EventEmitter(); if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); } if (!this._dateFormats) { throw createMissingDateImplError('MAT_DATE_FORMATS'); } this._activeDate = this._dateAdapter.today(); } /** * The date to display in this year view (everything other than the year is ignored). * @return {?} */ get activeDate() { return this._activeDate; } /** * @param {?} value * @return {?} */ set activeDate(value) { let /** @type {?} */ oldActiveDate = this._activeDate; this._activeDate = coerceDateProperty(this._dateAdapter, value) || this._dateAdapter.today(); if (this._dateAdapter.getYear(oldActiveDate) != this._dateAdapter.getYear(this._activeDate)) { this._init(); } } /** * The currently selected date. * @return {?} */ get selected() { return this._selected; } /** * @param {?} value * @return {?} */ set selected(value) { this._selected = coerceDateProperty(this._dateAdapter, value); this._selectedMonth = this._getMonthInCurrentYear(this._selected); } /** * @return {?} */ ngAfterContentInit() { this._init(); } /** * Handles when a new month is selected. * @param {?} month * @return {?} */ _monthSelected(month) { let /** @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 month view. * @return {?} */ _init() { this._selectedMonth = this._getMonthInCurrentYear(this.selected); this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today()); this._yearLabel = this._dateAdapter.getYearName(this.activeDate); let /** @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(row => row.map(month => 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 {?} */ _getMonthInCurrentYear(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 {?} */ _createCellForMonth(month, monthName) { let /** @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._isMonthEnabled(month)); } /** * Whether the given month is enabled. * @param {?} month * @return {?} */ _isMonthEnabled(month) { if (!this.dateFilter) { return true; } let /** @type {?} */ firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1); // If any date in the month is enabled count the month as enabled. for (let /** @type {?} */ date = firstOfMonth; this._dateAdapter.getMonth(date) == month; date = this._dateAdapter.addCalendarDays(date, 1)) { if (this.dateFilter(date)) { return true; } } return false; } } MatYearView.decorators = [ { type: 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 role=\"grid\" 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>", encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, },] }, ]; /** * @nocollapse */ MatYearView.ctorParameters = () => [ { type: DateAdapter, decorators: [{ type: Optional },] }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] },] }, { type: ChangeDetectorRef, }, ]; MatYearView.propDecorators = { 'activeDate': [{ type: Input },], 'selected': [{ type: Input },], 'dateFilter': [{ type: Input },], 'selectedChange': [{ type: Output },], }; /** * A calendar that is used as part of the datepicker. * \@docs-private */ class MatCalendar { /** * @param {?} _elementRef * @param {?} _intl * @param {?} _ngZone * @param {?} _dateAdapter * @param {?} _dateFormats * @param {?} changeDetectorRef */ constructor(_elementRef, _intl, _ngZone, _dateAdapter, _dateFormats, changeDetectorRef) { this._elementRef = _elementRef; this._intl = _intl; this._ngZone = _ngZone; this._dateAdapter = _dateAdapter; this._dateFormats = _dateFormats; /** * Whether the calendar should be started in month or year view. */ this.startView = 'month'; /** * Emits when the currently selected date changes. */ this.selectedChange = new EventEmitter(); /** * Emits when any date is selected. */ this._userSelection = new EventEmitter(); /** * Date filter for the month and year views. */ this._dateFilterForViews = (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); }; if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); } if (!this._dateFormats) { throw createMissingDateImplError('MAT_DATE_FORMATS'); } this._intlChanges = _intl.changes.subscribe(() => changeDetectorRef.markForCheck()); } /** * A date representing the period (month or year) to start the calendar in. * @return {?} */ get startAt() { return this._startAt; } /** * @param {?} value * @return {?} */ set startAt(value) { this._startAt = coerceDateProperty(this._dateAdapter, value); } /** * The currently selected date. * @return {?} */ get selected() { return this._selected; } /** * @param {?} value * @return {?} */ set selected(value) { this._selected = coerceDateProperty(this._dateAdapter, value); } /** * The minimum selectable date. * @return {?} */ get minDate() { return this._minDate; } /** * @param {?} value * @return {?} */ set minDate(value) { this._minDate = coerceDateProperty(this._dateAdapter, value); } /** * The maximum selectable date. * @return {?} */ get maxDate() { return this._maxDate; } /** * @param {?} value * @return {?} */ set maxDate(value) { this._maxDate = coerceDateProperty(this._dateAdapter, value); } /** * The current active date. This determines which time period is shown and which date is * highlighted when using keyboard navigation. * @return {?} */ get _activeDate() { return this._clampedActiveDate; } /** * @param {?} value * @return {?} */ set _activeDate(value) { this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate); } /** * The label for the current calendar view. * @return {?} */ get _periodButtonText() { return this._monthView ? this._dateAdapter.format(this._activeDate, this._dateFormats.display.monthYearLabel) .toLocaleUpperCase() : this._dateAdapter.getYearName(this._activeDate); } /** * @return {?} */ get _periodButtonLabel() { return this._monthView ? this._intl.switchToYearViewLabel : this._intl.switchToMonthViewLabel; } /** * The label for the the previous button. * @return {?} */ get _prevButtonLabel() { return this._monthView ? this._intl.prevMonthLabel : this._intl.prevYearLabel; } /** * The label for the the next button. * @return {?} */ get _nextButtonLabel() { return this._monthView ? this._intl.nextMonthLabel : this._intl.nextYearLabel; } /** * @return {?} */ ngAfterContentInit() { this._activeDate = this.startAt || this._dateAdapter.today(); this._focusActiveCell(); this._monthView = this.startView != 'year'; } /** * @return {?} */ ngOnDestroy() { this._intlChanges.unsubscribe(); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { const /** @type {?} */ change = changes.minDate || changes.maxDate || changes.dateFilter; if (change && !change.firstChange) { const /** @type {?} */ view = this.monthView || this.yearView; if (view) { view._init(); } } } /** * Handles date selection in the month view. * @param {?} date * @return {?} */ _dateSelected(date) { if (!this._dateAdapter.sameDate(date, this.selected)) { this.selectedChange.emit(date); } } /** * @return {?} */ _userSelected() { this._userSelection.emit(); } /** * Handles month selection in the year view. * @param {?} month * @return {?} */ _monthSelected(month) { this._activeDate = month; this._monthView = true; } /** * Handles user clicks on the period label. * @return {?} */ _currentPeriodClicked() { this._monthView = !this._monthView; } /** * Handles user clicks on the previous button. * @return {?} */ _previousClicked() { this._activeDate = this._monthView ? this._dateAdapter.addCalendarMonths(this._activeDate, -1) : this._dateAdapter.addCalendarYears(this._activeDate, -1); } /** * Handles user clicks on the next button. * @return {?} */ _nextClicked() { this._activeDate = this._monthView ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : this._dateAdapter.addCalendarYears(this._activeDate, 1); } /** * Whether the previous period button is enabled. * @return {?} */ _previousEnabled() { if (!this.minDate) { return true; } return !this.minDate || !this._isSameView(this._activeDate, this.minDate); } /** * Whether the next period button is enabled. * @return {?} */ _nextEnabled() { return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate); } /** * Handles keydown events on the calendar body. * @param {?} event * @return {?} */ _handleCalendarBodyKeydown(event) { // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent // disabled ones from being selected. This may not be ideal, we should look into whether // navigation should skip over disabled dates, and if so, how to implement that efficiently. if (this._monthView) { this._handleCalendarBodyKeydownInMonthView(event); } else { this._handleCalendarBodyKeydownInYearView(event); } } /** * Focuses the active cell after the microtask queue is empty. * @return {?} */ _focusActiveCell() { this._ngZone.runOutsideAngular(() => { first.call(this._ngZone.onStable.asObservable()).subscribe(() => { this._elementRef.nativeElement.querySelector('.mat-calendar-body-active').focus(); }); }); } /** * Whether the two dates represent the same view in the current view mode (month or year). * @param {?} date1 * @param {?} date2 * @return {?} */ _isSameView(date1, date2) { return this._monthView ? this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) && this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2) : this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2); } /** * Handles keydown events on the calendar body when calendar is in month view. * @param {?} event * @return {?} */ _handleCalendarBodyKeydownInMonthView(event) { switch (event.keyCode) { case LEFT_ARROW: this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -1); break; case RIGHT_ARROW: this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 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: if (this._dateFilterForViews(this._activeDate)) { this._dateSelected(this._activeDate); // 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; } this._focusActiveCell(); // Prevent unexpected default actions such as form submission. event.preventDefault(); } /** * Handles keydown events on the calendar body when calendar is in year view. * @param {?} event * @return {?} */ _handleCalendarBodyKeydownInYearView(event) { switch (event.keyCode) { case LEFT_ARROW: this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -1); break; case RIGHT_ARROW: this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 1); break; case UP_ARROW: this._activeDate = this._prevMonthInSameCol(this._activeDate); break; case DOWN_ARROW: this._activeDate = this._nextMonthInSameCol(this._activeDate); break; case HOME: this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate)); break; case END: this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate)); break; case PAGE_UP: this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1); break; case PAGE_DOWN: this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1); break; case ENTER: this._monthSelected(this._activeDate); break; default: // Don't prevent default or focus active cell on keys that we don't explicitly handle. return; } this._focusActiveCell(); // Prevent unexpected default actions such as form submission. event.preventDefault(); } /** * Determine the date for the month that comes before the given month in the same column in the * calendar table. * @param {?} date * @return {?} */ _prevMonthInSameCol(date) { // Determine how many months to jump forward given that there are 2 empty slots at the beginning // of each year. let /** @type {?} */ increment = this._dateAdapter.getMonth(date) <= 4 ? -5 : (this._dateAdapter.getMonth(date) >= 7 ? -7 : -12); return this._dateAdapter.addCalendarMonths(date, increment); } /** * Determine the date for the month that comes after the given month in the same column in the * calendar table. * @param {?} date * @return {?} */ _nextMonthInSameCol(date) { // Determine how many months to jump forward given that there are 2 empty slots at the beginning // of each year. let /** @type {?} */ increment = this._dateAdapter.getMonth(date) <= 4 ? 7 : (this._dateAdapter.getMonth(date) >= 7 ? 5 : 12); return this._dateAdapter.addCalendarMonths(date, increment); } } MatCalendar.decorators = [ { type: Component, args: [{selector: 'mat-calendar', template: "<div class=\"mat-calendar-header\"><div class=\"mat-calendar-controls\"><button mat-button class=\"mat-calendar-period-button\" (click)=\"_currentPeriodClicked()\" [attr.aria-label]=\"_periodButtonLabel\">{{_periodButtonText}}<div class=\"mat-calendar-arrow\" [class.mat-calendar-invert]=\"!_monthView\"></div></button><div class=\"mat-calendar-spacer\"></div><button mat-icon-button class=\"mat-calendar-previous-button\" [disabled]=\"!_previousEnabled()\" (click)=\"_previousClicked()\" [attr.aria-label]=\"_prevButtonLabel\"></button> <button mat-icon-button class=\"mat-calendar-next-button\" [disabled]=\"!_nextEnabled()\" (click)=\"_nextClicked()\" [attr.aria-label]=\"_nextButtonLabel\"></button></div></div><div class=\"mat-calendar-content\" (keydown)=\"_handleCalendarBodyKeydown($event)\" [ngSwitch]=\"_monthView\" cdkMonitorSubtreeFocus><mat-month-view *ngSwitchCase=\"true\" [activeDate]=\"_activeDate\" [selected]=\"selected\" [dateFilter]=\"_dateFilterForViews\" (selectedChange)=\"_dateSelected($event)\" (_userSelection)=\"_userSelected()\"></mat-month-view><mat-year-view *ngSwitchDefault [activeDate]=\"_activeDate\" [selected]=\"selected\" [dateFilter]=\"_dateFilterForViews\" (selectedChange)=\"_monthSelected($event)\"></mat-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', }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, },] }, ]; /** * @nocollapse */ MatCalendar.ctorParameters = () => [ { type: ElementRef, }, { type: MatDatepickerIntl, }, { type: NgZone, }, { type: DateAdapter, decorators: [{ type: Optional },] }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] },] }, { type: ChangeDetectorRef, }, ]; MatCalendar.propDecorators = { 'startAt': [{ type: Input },], 'startView': [{ type: Input },], 'selected': [{ type: Input },], 'minDate': [{ type: Input },], 'maxDate': [{ type: Input },], 'dateFilter': [{ type: Input },], 'selectedChange': [{ type: Output },], '_userSelection': [{ type: Output },], 'monthView': [{ type: ViewChild, args: [MatMonthView,] },], 'yearView': [{ type: ViewChild, args: [MatYearView,] },], }; /** * Used to generate a unique ID for each datepicker instance. */ let datepickerUid = 0; /** * Injection token that determines the scroll handling while the calendar is open. */ const MAT_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('mat-datepicker-scroll-strategy'); /** * \@docs-private * @param {?} overlay * @return {?} */ function MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) { return () => overlay.scrollStrategies.reposition(); } /** * \@docs-private */ const MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER = { provide: MAT_DATEPICKER_SCROLL_STRATEGY, deps: [Overlay], useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY, }; /** * 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 */ class MatDatepickerContent { /** * @return {?} */ ngAfterContentInit() { this._calendar._focusActiveCell(); } /** * Handles keydown event on datepicker content. * @param {?} event The event. * @return {?} */ _handleKeydown(event) { if (event.keyCode === ESCAPE) { this.datepicker.close(); event.preventDefault(); event.stopPropagation(); } } } MatDatepickerContent.decorators = [ { type: Component, args: [{selector: 'mat-datepicker-content', template: "<mat-calendar cdkTrapFocus [id]=\"datepicker.id\" [startAt]=\"datepicker.startAt\" [startView]=\"datepicker.startView\" [minDate]=\"datepicker._minDate\" [maxDate]=\"datepicker._maxDate\" [dateFilter]=\"datepicker._dateFilter\" [selected]=\"datepicker._selected\" (selectedChange)=\"datepicker._select($event)\" (_userSelection)=\"datepicker.close()\"></mat-calendar>", styles: [".mat-datepicker-content{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);display:block}.mat-calendar{width:296px;height:354px}.mat-datepicker-content-touch{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);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', '[class.mat-datepicker-content-touch]': 'datepicker.touchUi', '(keydown)': '_handleKeydown($event)', }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, },] }, ]; /** * @nocollapse */ MatDatepickerContent.ctorParameters = () => []; MatDatepickerContent.propDecorators = { '_calendar': [{ type: ViewChild, args: [MatCalendar,] },], }; /** * Component responsible for managing the datepicker popup/dialog. */ class MatDatepicker { /** * @param {?} _dialog * @param {?} _overlay * @param {?} _ngZone * @param {?} _viewContainerRef * @param {?} _scrollStrategy * @param {?} _dateAdapter * @param {?} _dir * @param {?} _document */ constructor(_dialog, _overlay, _ngZone, _viewContainerRef, _scrollStrategy, _dateAdapter, _dir, _document) { this._dialog = _dialog; this._overlay = _overlay; this._ngZone = _ngZone; this._viewContainerRef = _viewContainerRef; this._scrollStrategy = _scrollStrategy; this._dateAdapter = _dateAdapter; this._dir = _dir; this._document = _document; /** * The view that the calendar should start in. */ this.startView = 'month'; /** * 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. */ this.touchUi = false; /** * Emits new selected date when selected date changes. * @deprecated Switch to the `dateChange` and `dateInput` binding on the input element. */ this.selectedChanged = new EventEmitter(); /** * Whether the calendar is open. */ 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; this._inputSubscription = Subscription.EMPTY; /** * Emits when the datepicker is disabled. */ this._disabledChange = new Subject(); if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); } } /** * The date to open the calendar to initially. * @return {?} */ get startAt() { // If an explicit startAt is set we start there, otherwise we start at whatever the currently // selected value is. return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null); } /** * @param {?} date * @return {?} */ set startAt(date) { this._startAt = coerceDateProperty(this._dateAdapter, date); } /** * Whether the datepicker pop-up should be disabled. * @return {?} */ get disabled() { return this._disabled === undefined && this._datepickerInput ? this._datepickerInput.disabled : this._disabled; } /** * @param {?} value * @return {?} */ set disabled(value) { const /** @type {?} */ newValue = coerceBooleanProperty(value); if (newValue !== this._disabled) { this._disabled = newValue; this._disabledChange.next(newValue); } } /** * The currently selected date. * @return {?} */ get _selected() { return this._validSelected; } /** * @param {?} value * @return {?} */ set _selected(value) { this._validSelected = value; } /** * The minimum selectable date. * @return {?} */ get _minDate() { return this._datepickerInput && this._datepickerInput.min; } /** * The maximum selectable date. * @return {?} */ get _maxDate() { return this._datepickerInput && this._datepickerInput.max; } /** * @return {?} */ get _dateFilter() { return this._datepickerInput && this._datepickerInput._dateFilter; } /** * @return {?} */ ngOnDestroy() { this.close(); this._inputSubscription.unsubscribe(); this._disabledChange.complete(); if (this._popupRef) { this._popupRef.dispose(); } } /** * Selects the given date * @param {?} date * @return {?} */ _select(date) { let /** @type {?} */ oldValue = this._selected; this._selected = date; if (!this._dateAdapter.sameDate(oldValue, this._selected)) { this.selectedChanged.emit(date); } } /** * Register an input with this datepicker. * @param {?} input The datepicker input to register with this datepicker. * @return {?} */ _registerInput(input) { if (this._datepickerInput) { throw Error('An MatDatepicker can only be associated with a single input.'); } this._datepickerInput = input; this._inputSubscription = this._datepickerInput._valueChange.subscribe((value) => this._selected = value); } /** * Open the calendar. * @return {?} */ open() { 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; } /** * Close the calendar. * @return {?} */ close() { 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(); } if (this._focusedElementBeforeOpen && typeof this._focusedElementBeforeOpen.focus === 'function') { this._focusedElementBeforeOpen.focus(); this._focusedElementBeforeOpen = null; } this.opened = false; } /** * Open the calendar as a dialog. * @return {?} */ _openAsDialog() { this._dialogRef = this._dialog.open(MatDatepickerContent, {