@angular/material 2.0.0-alpha.9-3 → 2.0.0-beta.11

package/esm2015/datepicker.js

@@ -0,0 +1,1808 @@
+/**
+ * @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 { MdButtonModule } from '@angular/material/button';
+import { MdDialog, MdDialogModule } from '@angular/material/dialog';
+import { MdIconModule } 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, MATERIAL_COMPATIBILITY_MODE, MD_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 { MdFormField } 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(`MdDatepicker: No provider found for ${provider}. You must import one of the following ` +
+        `modules at your application root: MdNativeDateModule, or provide a custom implementation.`);
+}
+
+/**
+ * Datepicker data that requires internationalization.
+ */
+class MdDatepickerIntl {
+    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';
+    }
+}
+MdDatepickerIntl.decorators = [
+    { type: Injectable },
+];
+/**
+ * @nocollapse
+ */
+MdDatepickerIntl.ctorParameters = () => [];
+
+/**
+ * A calendar that is used as part of the datepicker.
+ * \@docs-private
+ */
+class MdCalendar {
+    /**
+     * @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('MD_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();
+    }
+    /**
+     * 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);
+    }
+}
+MdCalendar.decorators = [
+    { type: Component, args: [{selector: 'md-calendar, 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><md-month-view *ngSwitchCase=\"true\" [activeDate]=\"_activeDate\" [selected]=\"selected\" [dateFilter]=\"_dateFilterForViews\" (selectedChange)=\"_dateSelected($event)\" (userSelection)=\"_userSelected()\"></md-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,
+                viewProviders: [{ provide: MATERIAL_COMPATIBILITY_MODE, useValue: true }],
+            },] },
+];
+/**
+ * @nocollapse
+ */
+MdCalendar.ctorParameters = () => [
+    { type: ElementRef, },
+    { type: MdDatepickerIntl, },
+    { type: NgZone, },
+    { type: DateAdapter, decorators: [{ type: Optional },] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MD_DATE_FORMATS,] },] },
+    { type: ChangeDetectorRef, },
+];
+MdCalendar.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 },],
+};
+
+/**
+ * An internal class that represents the data corresponding to a single calendar cell.
+ * \@docs-private
+ */
+class MdCalendarCell {
+    /**
+     * @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 MdCalendarBody {
+    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;
+    }
+}
+MdCalendarBody.decorators = [
+    { type: Component, args: [{selector: '[md-calendar-body], [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
+ */
+MdCalendarBody.ctorParameters = () => [];
+MdCalendarBody.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 },],
+};
+
+/**
+ * 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 MD_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('md-datepicker-scroll-strategy');
+/**
+ * \@docs-private
+ * @param {?} overlay
+ * @return {?}
+ */
+function MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
+    return () => overlay.scrollStrategies.reposition();
+}
+/**
+ * \@docs-private
+ */
+const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
+    provide: MD_DATEPICKER_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY,
+};
+/**
+ * Component used as the content for the datepicker dialog and popup. We use this instead of using
+ * MdCalendar 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 MdDatepickerContent {
+    /**
+     * @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();
+        }
+    }
+}
+MdDatepickerContent.decorators = [
+    { type: Component, args: [{selector: 'md-datepicker-content, 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,
+                viewProviders: [{ provide: MATERIAL_COMPATIBILITY_MODE, useValue: true }],
+            },] },
+];
+/**
+ * @nocollapse
+ */
+MdDatepickerContent.ctorParameters = () => [];
+MdDatepickerContent.propDecorators = {
+    '_calendar': [{ type: ViewChild, args: [MdCalendar,] },],
+};
+/**
+ * Component responsible for managing the datepicker popup/dialog.
+ */
+class MdDatepicker {
+    /**
+     * @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 = `md-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.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 MdDatepicker 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 MdDatepicker 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(MdDatepickerContent, {
+            direction: this._dir ? this._dir.value : 'ltr',
+            viewContainerRef: this._viewContainerRef,
+        });
+        this._dialogRef.afterClosed().subscribe(() => this.close());
+        this._dialogRef.componentInstance.datepicker = this;
+    }
+    /**
+     * Open the calendar as a popup.
+     * @return {?}
+     */
+    _openAsPopup() {
+        if (!this._calendarPortal) {
+            this._calendarPortal = new ComponentPortal(MdDatepickerContent, this._viewContainerRef);
+        }
+        if (!this._popupRef) {
+            this._createPopup();
+        }
+        if (!this._popupRef.hasAttached()) {
+            let /** @type {?} */ componentRef = this._popupRef.attach(this._calendarPortal);
+            componentRef.instance.datepicker = this;
+            // Update the position once the calendar has rendered.
+            first$1.call(this._ngZone.onStable.asObservable()).subscribe(() => {
+                this._popupRef.updatePosition();
+            });
+        }
+        this._popupRef.backdropClick().subscribe(() => this.close());
+    }
+    /**
+     * Create the popup.
+     * @return {?}
+     */
+    _createPopup() {
+        const /** @type {?} */ overlayState = new OverlayConfig({
+            positionStrategy: this._createPopupPositionStrategy(),
+            hasBackdrop: true,
+            backdropClass: 'mat-overlay-transparent-backdrop',
+            direction: this._dir ? this._dir.value : 'ltr',
+            scrollStrategy: this._scrollStrategy()
+        });
+        this._popupRef = this._overlay.create(overlayState);
+    }
+    /**
+     * Create the popup PositionStrategy.
+     * @return {?}
+     */
+    _createPopupPositionStrategy() {
+        return this._overlay.position()
+            .connectedTo(this._datepickerInput.getPopupConnectionElementRef(), { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
+            .withFallbackPosition({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
+            .withFallbackPosition({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' })
+            .withFallbackPosition({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' });
+    }
+}
+MdDatepicker.decorators = [
+    { type: Component, args: [{selector: 'md-datepicker, mat-datepicker',
+                template: '',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                preserveWhitespaces: false,
+            },] },
+];
+/**
+ * @nocollapse
+ */
+MdDatepicker.ctorParameters = () => [
+    { type: MdDialog, },
+    { type: Overlay, },
+    { type: NgZone, },
+    { type: ViewContainerRef, },
+    { type: undefined, decorators: [{ type: Inject, args: [MD_DATEPICKER_SCROLL_STRATEGY,] },] },
+    { type: DateAdapter, decorators: [{ type: Optional },] },
+    { type: Directionality, decorators: [{ type: Optional },] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] },] },
+];
+MdDatepicker.propDecorators = {
+    'startAt': [{ type: Input },],
+    'startView': [{ type: Input },],
+    'touchUi': [{ type: Input },],
+    'disabled': [{ type: Input },],
+    'selectedChanged': [{ type: Output },],
+};
+
+const MD_DATEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MdDatepickerInput),
+    multi: true
+};
+const MD_DATEPICKER_VALIDATORS = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => MdDatepickerInput),
+    multi: true
+};
+/**
+ * An event used for datepicker input and change events. We don't always have access to a native
+ * input or change event because the event may have been triggered by the user clicking on the
+ * calendar popup. For consistency, we always use MdDatepickerInputEvent instead.
+ */
+class MdDatepickerInputEvent {
+    /**
+     * @param {?} target
+     * @param {?} targetElement
+     */
+    constructor(target, targetElement) {
+        this.target = target;
+        this.targetElement = targetElement;
+        this.value = this.target.value;
+    }
+}
+/**
+ * Directive used to connect an input to a MdDatepicker.
+ */
+class MdDatepickerInput {
+    /**
+     * @param {?} _elementRef
+     * @param {?} _renderer
+     * @param {?} _dateAdapter
+     * @param {?} _dateFormats
+     * @param {?} _mdFormField
+     */
+    constructor(_elementRef, _renderer, _dateAdapter, _dateFormats, _mdFormField) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._dateAdapter = _dateAdapter;
+        this._dateFormats = _dateFormats;
+        this._mdFormField = _mdFormField;
+        /**
+         * Emits when a `change` event is fired on this `<input>`.
+         */
+        this.dateChange = new EventEmitter();
+        /**
+         * Emits when an `input` event is fired on this `<input>`.
+         */
+        this.dateInput = new EventEmitter();
+        /**
+         * Emits when the value changes (either due to user input or programmatic change).
+         */
+        this._valueChange = new EventEmitter();
+        /**
+         * Emits when the disabled state has changed
+         */
+        this._disabledChange = new EventEmitter();
+        this._onTouched = () => { };
+        this._cvaOnChange = () => { };
+        this._validatorOnChange = () => { };
+        this._datepickerSubscription = Subscription.EMPTY;
+        this._localeSubscription = Subscription.EMPTY;
+        /**
+         * The form control validator for whether the input parses.
+         */
+        this._parseValidator = () => {
+            return this._lastValueValid ?
+                null : { 'mdDatepickerParse': { 'text': this._elementRef.nativeElement.value } };
+        };
+        /**
+         * The form control validator for the min date.
+         */
+        this._minValidator = (control) => {
+            const controlValue = coerceDateProperty(this._dateAdapter, control.value);
+            return (!this.min || !controlValue ||
+                this._dateAdapter.compareDate(this.min, controlValue) <= 0) ?
+                null : { 'mdDatepickerMin': { 'min': this.min, 'actual': controlValue } };
+        };
+        /**
+         * The form control validator for the max date.
+         */
+        this._maxValidator = (control) => {
+            const controlValue = coerceDateProperty(this._dateAdapter, control.value);
+            return (!this.max || !controlValue ||
+                this._dateAdapter.compareDate(this.max, controlValue) >= 0) ?
+                null : { 'mdDatepickerMax': { 'max': this.max, 'actual': controlValue } };
+        };
+        /**
+         * The form control validator for the date filter.
+         */
+        this._filterValidator = (control) => {
+            const controlValue = coerceDateProperty(this._dateAdapter, control.value);
+            return !this._dateFilter || !controlValue || this._dateFilter(controlValue) ?
+                null : { 'mdDatepickerFilter': true };
+        };
+        /**
+         * The combined form control validator for this input.
+         */
+        this._validator = Validators.compose([this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator]);
+        /**
+         * Whether the last value set on the input was valid.
+         */
+        this._lastValueValid = false;
+        if (!this._dateAdapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        if (!this._dateFormats) {
+            throw createMissingDateImplError('MD_DATE_FORMATS');
+        }
+        // Update the displayed date when the locale changes.
+        this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
+            this.value = this.value;
+        });
+    }
+    /**
+     * The datepicker that this input is associated with.
+     * @param {?} value
+     * @return {?}
+     */
+    set mdDatepicker(value) {
+        this.registerDatepicker(value);
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    registerDatepicker(value) {
+        if (value) {
+            this._datepicker = value;
+            this._datepicker._registerInput(this);
+        }
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set matDatepicker(value) {
+        // Note that we don't set `this.mdDatepicker = value` here,
+        // because that line gets stripped by the JS compiler.
+        this.registerDatepicker(value);
+    }
+    /**
+     * @param {?} filter
+     * @return {?}
+     */
+    set mdDatepickerFilter(filter) {
+        this._dateFilter = filter;
+        this._validatorOnChange();
+    }
+    /**
+     * @param {?} filter
+     * @return {?}
+     */
+    set matDatepickerFilter(filter) {
+        this.mdDatepickerFilter = filter;
+    }
+    /**
+     * The value of the input.
+     * @return {?}
+     */
+    get value() {
+        return this._value;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set value(value) {
+        value = coerceDateProperty(this._dateAdapter, value);
+        this._lastValueValid = !value || this._dateAdapter.isValid(value);
+        value = this._getValidDateOrNull(value);
+        let /** @type {?} */ oldDate = this.value;
+        this._value = value;
+        this._renderer.setProperty(this._elementRef.nativeElement, 'value', value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '');
+        if (!this._dateAdapter.sameDate(oldDate, value)) {
+            this._valueChange.emit(value);
+        }
+    }
+    /**
+     * The minimum valid date.
+     * @return {?}
+     */
+    get min() { return this._min; }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set min(value) {
+        this._min = coerceDateProperty(this._dateAdapter, value);
+        this._validatorOnChange();
+    }
+    /**
+     * The maximum valid date.
+     * @return {?}
+     */
+    get max() { return this._max; }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set max(value) {
+        this._max = coerceDateProperty(this._dateAdapter, value);
+        this._validatorOnChange();
+    }
+    /**
+     * Whether the datepicker-input is disabled.
+     * @return {?}
+     */
+    get disabled() { return this._disabled; }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set disabled(value) {
+        const /** @type {?} */ newValue = coerceBooleanProperty(value);
+        if (this._disabled !== newValue) {
+            this._disabled = newValue;
+            this._disabledChange.emit(newValue);
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterContentInit() {
+        if (this._datepicker) {
+            this._datepickerSubscription =
+                this._datepicker.selectedChanged.subscribe((selected) => {
+                    this.value = selected;
+                    this._cvaOnChange(selected);
+                    this._onTouched();
+                    this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));
+                    this.dateChange.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));
+                });
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this._datepickerSubscription.unsubscribe();
+        this._localeSubscription.unsubscribe();
+        this._valueChange.complete();
+        this._disabledChange.complete();
+    }
+    /**
+     * @param {?} fn
+     * @return {?}
+     */
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    /**
+     * @param {?} c
+     * @return {?}
+     */
+    validate(c) {
+        return this._validator ? this._validator(c) : null;
+    }
+    /**
+     * Gets the element that the datepicker popup should be connected to.
+     * @return {?} The element to connect the popup to.
+     */
+    getPopupConnectionElementRef() {
+        return this._mdFormField ? this._mdFormField.underlineRef : this._elementRef;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * @param {?} fn
+     * @return {?}
+     */
+    registerOnChange(fn) {
+        this._cvaOnChange = fn;
+    }
+    /**
+     * @param {?} fn
+     * @return {?}
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * @param {?} disabled
+     * @return {?}
+     */
+    setDisabledState(disabled) {
+        this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', disabled);
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    _onKeydown(event) {
+        if (event.altKey && event.keyCode === DOWN_ARROW) {
+            this._datepicker.open();
+            event.preventDefault();
+        }
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    _onInput(value) {
+        let /** @type {?} */ date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
+        this._lastValueValid = !date || this._dateAdapter.isValid(date);
+        date = this._getValidDateOrNull(date);
+        this._value = date;
+        this._cvaOnChange(date);
+        this._valueChange.emit(date);
+        this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));
+    }
+    /**
+     * @return {?}
+     */
+    _onChange() {
+        this.dateChange.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));
+    }
+    /**
+     * @param {?} obj The object to check.
+     * @return {?} The given object if it is both a date instance and valid, otherwise null.
+     */
+    _getValidDateOrNull(obj) {
+        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
+    }
+}
+MdDatepickerInput.decorators = [
+    { type: Directive, args: [{
+                selector: 'input[mdDatepicker], input[matDatepicker]',
+                providers: [MD_DATEPICKER_VALUE_ACCESSOR, MD_DATEPICKER_VALIDATORS],
+                host: {
+                    '[attr.aria-haspopup]': 'true',
+                    '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
+                    '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
+                    '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
+                    '[disabled]': 'disabled',
+                    '(input)': '_onInput($event.target.value)',
+                    '(change)': '_onChange()',
+                    '(blur)': '_onTouched()',
+                    '(keydown)': '_onKeydown($event)',
+                },
+                exportAs: 'mdDatepickerInput, matDatepickerInput',
+            },] },
+];
+/**
+ * @nocollapse
+ */
+MdDatepickerInput.ctorParameters = () => [
+    { type: ElementRef, },
+    { type: Renderer2, },
+    { type: DateAdapter, decorators: [{ type: Optional },] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MD_DATE_FORMATS,] },] },
+    { type: MdFormField, decorators: [{ type: Optional },] },
+];
+MdDatepickerInput.propDecorators = {
+    'mdDatepicker': [{ type: Input },],
+    'matDatepicker': [{ type: Input },],
+    'mdDatepickerFilter': [{ type: Input },],
+    'matDatepickerFilter': [{ type: Input },],
+    'value': [{ type: Input },],
+    'min': [{ type: Input },],
+    'max': [{ type: Input },],
+    'disabled': [{ type: Input },],
+    'dateChange': [{ type: Output },],
+    'dateInput': [{ type: Output },],
+};
+
+class MdDatepickerToggle {
+    /**
+     * @param {?} _intl
+     * @param {?} _changeDetectorRef
+     */
+    constructor(_intl, _changeDetectorRef) {
+        this._intl = _intl;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._stateChanges = Subscription.EMPTY;
+    }
+    /**
+     * Whether the toggle button is disabled.
+     * @return {?}
+     */
+    get disabled() {
+        return this._disabled === undefined ? this.datepicker.disabled : this._disabled;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    ngOnChanges(changes) {
+        if (changes.datepicker) {
+            const /** @type {?} */ datepicker = changes.datepicker.currentValue;
+            const /** @type {?} */ datepickerDisabled = datepicker ? datepicker._disabledChange : of();
+            const /** @type {?} */ inputDisabled = datepicker && datepicker._datepickerInput ?
+                datepicker._datepickerInput._disabledChange :
+                of();
+            this._stateChanges.unsubscribe();
+            this._stateChanges = merge(this._intl.changes, datepickerDisabled, inputDisabled)
+                .subscribe(() => this._changeDetectorRef.markForCheck());
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this._stateChanges.unsubscribe();
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    _open(event) {
+        if (this.datepicker && !this.disabled) {
+            this.datepicker.open();
+            event.stopPropagation();
+        }
+    }
+}
+MdDatepickerToggle.decorators = [
+    { type: Component, args: [{selector: 'md-datepicker-toggle, mat-datepicker-toggle',
+                template: "<button mat-icon-button type=\"button\" [attr.aria-label]=\"_intl.openCalendarLabel\" [disabled]=\"disabled\" (click)=\"_open($event)\"><mat-icon><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"100%\" height=\"100%\" fill=\"currentColor\" style=\"vertical-align: top\" focusable=\"false\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/></svg></mat-icon></button>",
+                host: {
+                    'class': 'mat-datepicker-toggle',
+                },
+                encapsulation: ViewEncapsulation.None,
+                preserveWhitespaces: false,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                viewProviders: [{ provide: MATERIAL_COMPATIBILITY_MODE, useValue: true }],
+            },] },
+];
+/**
+ * @nocollapse
+ */
+MdDatepickerToggle.ctorParameters = () => [
+    { type: MdDatepickerIntl, },
+    { type: ChangeDetectorRef, },
+];
+MdDatepickerToggle.propDecorators = {
+    'datepicker': [{ type: Input, args: ['for',] },],
+    'disabled': [{ type: Input },],
+};
+
+const DAYS_PER_WEEK = 7;
+/**
+ * An internal component used to display a single month in the datepicker.
+ * \@docs-private
+ */
+class MdMonthView {
+    /**
+     * @param {?} _dateAdapter
+     * @param {?} _dateFormats
+     */
+    constructor(_dateAdapter, _dateFormats) {
+        this._dateAdapter = _dateAdapter;
+        this._dateFormats = _dateFormats;
+        /**
+         * 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('MD_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();
+    }
+    /**
+     * Creates MdCalendarCells 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 MdCalendarCell(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));
+    }
+}
+MdMonthView.decorators = [
+    { type: Component, args: [{selector: 'md-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,
+                viewProviders: [{ provide: MATERIAL_COMPATIBILITY_MODE, useValue: true }],
+            },] },
+];
+/**
+ * @nocollapse
+ */
+MdMonthView.ctorParameters = () => [
+    { type: DateAdapter, decorators: [{ type: Optional },] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MD_DATE_FORMATS,] },] },
+];
+MdMonthView.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 MdYearView {
+    /**
+     * @param {?} _dateAdapter
+     * @param {?} _dateFormats
+     */
+    constructor(_dateAdapter, _dateFormats) {
+        this._dateAdapter = _dateAdapter;
+        this._dateFormats = _dateFormats;
+        /**
+         * Emits when a new month is selected.
+         */
+        this.selectedChange = new EventEmitter();
+        if (!this._dateAdapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        if (!this._dateFormats) {
+            throw createMissingDateImplError('MD_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])));
+    }
+    /**
+     * 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 MdCalendarCell 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 MdCalendarCell(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;
+    }
+}
+MdYearView.decorators = [
+    { type: Component, args: [{selector: 'md-year-view, 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
+ */
+MdYearView.ctorParameters = () => [
+    { type: DateAdapter, decorators: [{ type: Optional },] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MD_DATE_FORMATS,] },] },
+];
+MdYearView.propDecorators = {
+    'activeDate': [{ type: Input },],
+    'selected': [{ type: Input },],
+    'dateFilter': [{ type: Input },],
+    'selectedChange': [{ type: Output },],
+};
+
+class MdDatepickerModule {
+}
+MdDatepickerModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    MdButtonModule,
+                    MdDialogModule,
+                    MdIconModule,
+                    OverlayModule,
+                    A11yModule,
+                ],
+                exports: [
+                    MdCalendar,
+                    MdCalendarBody,
+                    MdDatepicker,
+                    MdDatepickerContent,
+                    MdDatepickerInput,
+                    MdDatepickerToggle,
+                    MdMonthView,
+                    MdYearView,
+                ],
+                declarations: [
+                    MdCalendar,
+                    MdCalendarBody,
+                    MdDatepicker,
+                    MdDatepickerContent,
+                    MdDatepickerInput,
+                    MdDatepickerToggle,
+                    MdMonthView,
+                    MdYearView,
+                ],
+                providers: [
+                    MdDatepickerIntl,
+                    MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER,
+                ],
+                entryComponents: [
+                    MdDatepickerContent,
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+MdDatepickerModule.ctorParameters = () => [];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MdDatepickerModule, MdCalendar, MdCalendarCell, MdCalendarBody, coerceDateProperty, MD_DATEPICKER_SCROLL_STRATEGY, MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY, MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER, MdDatepickerContent, MdDatepicker, MD_DATEPICKER_VALUE_ACCESSOR, MD_DATEPICKER_VALIDATORS, MdDatepickerInputEvent, MdDatepickerInput, MdDatepickerIntl, MdDatepickerToggle, MdMonthView, MdYearView, MD_DATEPICKER_SCROLL_STRATEGY as MAT_DATEPICKER_SCROLL_STRATEGY, MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER as MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER, MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY as MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY, MD_DATEPICKER_VALIDATORS as MAT_DATEPICKER_VALIDATORS, MD_DATEPICKER_VALUE_ACCESSOR as MAT_DATEPICKER_VALUE_ACCESSOR, MdCalendar as MatCalendar, MdCalendarBody as MatCalendarBody, MdCalendarCell as MatCalendarCell, MdDatepicker as MatDatepicker, MdDatepickerContent as MatDatepickerContent, MdDatepickerInput as MatDatepickerInput, MdDatepickerInputEvent as MatDatepickerInputEvent, MdDatepickerIntl as MatDatepickerIntl, MdDatepickerModule as MatDatepickerModule, MdDatepickerToggle as MatDatepickerToggle, MdMonthView as MatMonthView, MdYearView as MatYearView };
+//# sourceMappingURL=datepicker.js.map