feat(datepicker): merge datepicker branch into master (angular#4404)

src/demo-app/datepicker/datepicker-demo.html

@@ -0,0 +1,65 @@
+<h2>Options</h2>
+<p>
+  <md-checkbox [(ngModel)]="touch">Use touch UI</md-checkbox>
+  <md-checkbox [(ngModel)]="filterOdd">Filter odd months and dates</md-checkbox>
+  <md-checkbox [(ngModel)]="yearView">Start in year view</md-checkbox>
+</p>
+<p>
+  <md-input-container>
+    <input mdInput [mdDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
+    <button mdSuffix [mdDatepickerToggle]="minDatePicker"></button>
+  </md-input-container>
+  <md-datepicker #minDatePicker [touchUi]="touch"></md-datepicker>
+  <md-input-container>
+    <input mdInput [mdDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
+    <button mdSuffix [mdDatepickerToggle]="maxDatePicker"></button>
+  </md-input-container>
+  <md-datepicker #maxDatePicker [touchUi]="touch"></md-datepicker>
+</p>
+<p>
+  <md-input-container>
+    <input mdInput [mdDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date">
+    <button mdSuffix [mdDatepickerToggle]="startAtPicker"></button>
+  </md-input-container>
+  <md-datepicker #startAtPicker [touchUi]="touch"></md-datepicker>
+</p>
+
+<h2>Result</h2>
+
+<p>
+  <button [mdDatepickerToggle]="resultPicker"></button>
+  <md-input-container>
+    <input mdInput
+           #resultPickerModel="ngModel"
+           [mdDatepicker]="resultPicker"
+           [(ngModel)]="date"
+           [min]="minDate"
+           [max]="maxDate"
+           [mdDatepickerFilter]="filterOdd ? dateFilter : null"
+           placeholder="Pick a date">
+    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
+    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
+    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>
+  </md-input-container>
+  <md-datepicker
+      #resultPicker
+      [touchUi]="touch"
+      [startAt]="startAt"
+      [startView]="yearView ? 'year' : 'month'">
+  </md-datepicker>
+</p>
+<p>
+  <input [mdDatepicker]="resultPicker2"
+         [(ngModel)]="date"
+         [min]="minDate"
+         [max]="maxDate"
+         [mdDatepickerFilter]="filterOdd ? dateFilter : null"
+         placeholder="Pick a date">
+  <button [mdDatepickerToggle]="resultPicker2"></button>
+  <md-datepicker
+      #resultPicker2
+      [touchUi]="touch"
+      [startAt]="startAt"
+      [startView]="yearView ? 'year' : 'month'">
+  </md-datepicker>
+</p>

src/demo-app/datepicker/datepicker-demo.scss

@@ -0,0 +1,3 @@
+md-calendar {
+  width: 300px;
+}

src/demo-app/datepicker/datepicker-demo.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'datepicker-demo',
+  templateUrl: 'datepicker-demo.html',
+  styleUrls: ['datepicker-demo.css'],
+})
+export class DatepickerDemo {
+  touch: boolean;
+  filterOdd: boolean;
+  yearView: boolean;
+  minDate: Date;
+  maxDate: Date;
+  startAt: Date;
+  date: Date;
+  dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
+}

src/demo-app/demo-app-module.ts

@@ -1,19 +1,20 @@
-import {NgModule, ApplicationRef} from '@angular/core';
+import {ApplicationRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {
-  MaterialModule,
-  OverlayContainer,
   FullscreenOverlayContainer,
+  MaterialModule,
+  MdNativeDateModule,
   MdSelectionModule,
+  OverlayContainer
 } from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
-import {JazzDialog, ContentElementDialog, DialogDemo, IFrameDialog} from './dialog/dialog-demo';
+import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo';
 import {RippleDemo} from './ripple/ripple-demo';
 import {IconDemo} from './icon/icon-demo';
 import {GesturesDemo} from './gestures/gestures-demo';
@@ -27,22 +28,24 @@ import {ListDemo} from './list/list-demo';
 import {BaselineDemo} from './baseline/baseline-demo';
 import {GridListDemo} from './grid-list/grid-list-demo';
 import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
-import {OverlayDemo, SpagettiPanel, RotiniPanel} from './overlay/overlay-demo';
+import {OverlayDemo, RotiniPanel, SpagettiPanel} from './overlay/overlay-demo';
 import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
 import {ToolbarDemo} from './toolbar/toolbar-demo';
 import {ButtonDemo} from './button/button-demo';
-import {MdCheckboxDemoNestedChecklist, CheckboxDemo} from './checkbox/checkbox-demo';
+import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from './checkbox/checkbox-demo';
 import {SelectDemo} from './select/select-demo';
 import {SliderDemo} from './slider/slider-demo';
 import {SidenavDemo} from './sidenav/sidenav-demo';
 import {SnackBarDemo} from './snack-bar/snack-bar-demo';
 import {PortalDemo, ScienceJoke} from './portal/portal-demo';
 import {MenuDemo} from './menu/menu-demo';
-import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs/tabs-demo';
+import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from './tabs/tabs-demo';
 import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
+import {DatepickerDemo} from './datepicker/datepicker-demo';
+import {ExpansionDemo} from './expansion/expansion-demo';
 
 
 @NgModule({
@@ -54,6 +57,7 @@ import {StyleDemo} from './style/style-demo';
     ReactiveFormsModule,
     RouterModule.forRoot(DEMO_APP_ROUTES),
     MaterialModule,
+    MdNativeDateModule,
     MdSelectionModule,
   ],
   declarations: [
@@ -64,6 +68,7 @@ import {StyleDemo} from './style/style-demo';
     CardDemo,
     ChipsDemo,
     CheckboxDemo,
+    DatepickerDemo,
     DemoApp,
     DialogDemo,
     GesturesDemo,
@@ -100,6 +105,7 @@ import {StyleDemo} from './style/style-demo';
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    ExpansionDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

src/demo-app/demo-app/demo-app.ts

@@ -30,7 +30,9 @@ export class DemoApp {
     {name: 'Card', route: 'card'},
     {name: 'Chips', route: 'chips'},
     {name: 'Checkbox', route: 'checkbox'},
+    {name: 'Datepicker', route: 'datepicker'},
     {name: 'Dialog', route: 'dialog'},
+    {name: 'Expansion Panel', route: 'expansion'},
     {name: 'Gestures', route: 'gestures'},
     {name: 'Grid List', route: 'grid-list'},
     {name: 'Icon', route: 'icon'},

src/demo-app/demo-app/routes.ts

@@ -32,13 +32,16 @@ import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
+import {DatepickerDemo} from '../datepicker/datepicker-demo';
+import {ExpansionDemo} from '../expansion/expansion-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'autocomplete', component: AutocompleteDemo},
   {path: 'button', component: ButtonDemo},
   {path: 'card', component: CardDemo},
   {path: 'chips', component: ChipsDemo},
+  {path: 'datepicker', component: DatepickerDemo},
   {path: 'radio', component: RadioDemo},
   {path: 'select', component: SelectDemo},
   {path: 'sidenav', component: SidenavDemo},
@@ -66,4 +69,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarDemo},
   {path: 'platform', component: PlatformDemo},
   {path: 'style', component: StyleDemo},
+  {path: 'expansion', component: ExpansionDemo},
 ];

src/demo-app/expansion/expansion-demo.html

@@ -0,0 +1,58 @@
+<h1>Single Expansion Panel</h1>
+<md-expansion-panel class="md-expansion-demo-width" #myPanel>
+  <md-expansion-panel-header>
+    <span class="title">Panel Title</span>
+    <span class="description">This is a panel description.</span>
+  </md-expansion-panel-header>
+    This is the content text that makes sense here.
+  <div md-action-row>
+    <button md-button (click)="myPanel.expanded = false">CANCEL</button>
+    <button md-button>SAVE</button>
+  </div>
+</md-expansion-panel>
+<br>
+<h1>Accordion</h1>
+<div>
+  <p>Accordion Options</p>
+  <div>
+    <md-slide-toggle [(ngModel)]="multi">Allow Multi Expansion</md-slide-toggle>
+    <md-slide-toggle [(ngModel)]="showToggle">Show Indicators</md-slide-toggle>
+    <md-slide-toggle [(ngModel)]="showPanel3">Show Panel 3</md-slide-toggle>
+  </div>
+  <p>Accordion Style</p>
+  <md-radio-group [(ngModel)]="displayMode">
+    <md-radio-button value="default">Default</md-radio-button>
+    <md-radio-button value="flat">Flat</md-radio-button>
+  </md-radio-group>
+  <p>Accordion Panel(s)</p>
+  <div>
+    <md-checkbox [(ngModel)]="panel1.expanded">Panel 1</md-checkbox>
+    <md-checkbox [(ngModel)]="panel2.expanded">Panel 2</md-checkbox>
+  </div>
+</div>
+<br>
+<div cdk-accordion [displayMode]="displayMode" [multi]="multi"
+     class="md-expansion-demo-width">
+  <md-expansion-panel #panel1  [showToggle]="showToggle">
+    <md-expansion-panel-header>
+      Section 1
+    </md-expansion-panel-header>
+    <p>This is the content text that makes sense here.</p>
+  </md-expansion-panel>
+  <md-expansion-panel #panel2 [showToggle]="showToggle">
+    <md-expansion-panel-header>
+      Section 2
+    </md-expansion-panel-header>
+    <p>This is the content text that makes sense here.</p>
+  </md-expansion-panel>
+  <md-expansion-panel #panel3 *ngIf="showPanel3" [showToggle]="showToggle">
+    <md-expansion-panel-header>
+      Section 3
+    </md-expansion-panel-header>
+    <md-checkbox #showButtons>Reveal Buttons Below</md-checkbox>
+    <div md-action-row *ngIf="showButtons.checked">
+      <button md-button (click)="panel2.expanded = true">OPEN SECTION 2</button>
+      <button md-button (click)="panel3.expanded = false">CLOSE</button>
+    </div>
+  </md-expansion-panel>
+</div>

src/demo-app/expansion/expansion-demo.scss

@@ -0,0 +1,3 @@
+.md-expansion-demo-width {
+  width: 600px;
+}

src/demo-app/expansion/expansion-demo.ts

@@ -0,0 +1,15 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'expansion-demo',
+  styleUrls: ['expansion-demo.css'],
+  templateUrl: 'expansion-demo.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class ExpansionDemo {
+  displayMode: string = 'default';
+  multi: boolean = false;
+  showToggle: boolean = true;
+  showPanel3 = true;
+}

src/lib/core/core.ts

@@ -103,6 +103,8 @@ export {CompatibilityModule, NoConflictStyleCompatibilityMode} from './compatibi
 // Common material module
 export {MdCommonModule} from './common-behaviors/common-module';
 
+// Datetime
+export * from './datetime/index';
 
 @NgModule({
   imports: [