.

Author: tinayuangao

e2e/components/card-e2e.spec.ts

@@ -2,14 +2,14 @@ import {browser, by, element} from 'protractor';
 import {screenshot} from '../screenshot';
 
 describe('md-card', () => {
-  describe('card-fancy', () => {
-    beforeEach(() => browser.get('/card-fancy'));
 
-    it('should show a card', async () => {
-      const card = element(by.tagName('md-card'));
-      expect(card).toBeDefined();
+  beforeEach(() => browser.get('/cards'));
 
-      screenshot('fancy card example');
-    });
+  it('should show a card', async () => {
+    const card = element(by.tagName('md-card'));
+    expect(card).toBeDefined();
+
+    screenshot('fancy card example');
   });
+
 });

e2e/components/expansion-e2e.spec.ts

@@ -0,0 +1,25 @@
+import {browser, by, element} from 'protractor';
+import {screenshot} from '../screenshot';
+
+describe('expansion', () => {
+
+  beforeEach(() => browser.get('/expansion'));
+
+  it('should show a expansion panel', async () => {
+    expect(element(by.css('.mat-expansion-panel'))).toBeDefined();
+
+    screenshot();
+  });
+
+  it('should hide contents of the expansion panel on click', async () => {
+    const panelHeader = element(by.css('.mat-expansion-panel-header'));
+    const panelContent = element(by.css('.mat-expansion-panel-content'));
+
+    expect(panelContent.isDisplayed()).toBe(false);
+
+    panelHeader.click();
+
+    expect(panelContent.isDisplayed()).toBe(true);
+  });
+
+});

package-lock.json

@@ -67,7 +67,7 @@
     "firebase-tools": "^3.9.0",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
-    "google-closure-compiler": "^20170218.0.0",
+    "google-closure-compiler": "20170409.0.0",
     "gulp": "^3.9.1",
     "gulp-clean": "^0.3.2",
     "gulp-clean-css": "^3.3.1",
@@ -114,7 +114,7 @@
     "stylelint": "^7.12.0",
     "ts-node": "^3.0.4",
     "tsconfig-paths": "^2.2.0",
-    "tslint": "~5.6.0",
+    "tslint": "^5.7.0",
     "tsutils": "^2.6.0",
     "typescript": "~2.2.1",
     "uglify-js": "^2.8.14",

package.json

@@ -8,7 +8,6 @@ set -e -o pipefail
 # Go to the project root directory
 cd $(dirname $0)/../..
 
-
 # Build a release of material and of the CDK package.
 $(npm bin)/gulp material:build-release:clean
 $(npm bin)/gulp cdk:build-release
@@ -17,21 +16,12 @@ $(npm bin)/gulp cdk:build-release
 $(npm bin)/gulp :build:devapp:assets :build:devapp:scss
 $(npm bin)/tsc -p src/demo-app/tsconfig-build.json --target ES2015 --module ES2015
 
-# Re-compile RxJS sources into ES2015. Otherwise closure compiler can't parse it properly.
-$(npm bin)/ngc -p scripts/closure-compiler/tsconfig-rxjs.json
-
 # Create a list of all RxJS source files.
-rxjsSourceFiles=$(find dist/packages/rxjs -name '*.js');
+rxjsSourceFiles=$(find node_modules/rxjs/ -name '*.js');
 
 # List of entry points in the CDK package. Exclude "testing" since it's not an entry point.
 cdkEntryPoints=($(find src/cdk -maxdepth 1 -mindepth 1 -type d -not -name testing -exec basename {} \;))
 
-# Due a Closure Compiler issue https://github.com/google/closure-compiler/issues/2247
-# we need to add exports to the different RxJS ES2015 files.
-for i in $rxjsSourceFiles; do
-    echo "export var __CLOSURE_WORKAROUND__" >> $i
-done
-
 OPTS=(
   "--language_in=ES6_STRICT"
   "--language_out=ES5"
@@ -41,6 +31,8 @@ OPTS=(
   "--property_renaming_report=dist/closure/property_renaming_report"
   "--warning_level=QUIET"
   "--rewrite_polyfills=false"
+  "--module_resolution=node"
+  "--process_common_js_modules"
 
   # List of path prefixes to be removed from ES6 & CommonJS modules.
   "--js_module_root=dist/packages"
@@ -103,4 +95,4 @@ echo ${OPTS[*]} > $closureFlags
 # Run the Google Closure compiler java runnable.
 java -jar node_modules/google-closure-compiler/compiler.jar --flagfile $closureFlags
 
-echo "Finished bundling the dev-app using google closure compiler.."
+echo "Finished bundling the dev-app using Google Closure Compiler."

scripts/closure-compiler/build-devapp-bundle.sh

@@ -0,0 +1,10 @@
+import {Routes} from '@angular/router';
+
+import {SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs-a11y';
+
+export const TABS_DEMO_ROUTES: Routes = [
+  {path: '', redirectTo: 'sunny-tab', pathMatch: 'full'},
+  {path: 'sunny-tab', component: SunnyTabContent},
+  {path: 'rainy-tab', component: RainyTabContent},
+  {path: 'foggy-tab', component: FoggyTabContent},
+];

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

@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
 
 @Component({
   moduleId: module.id,
@@ -20,7 +19,7 @@ export class TabsAccessibilityDemo {
     {
       label: 'German Shepherd',
       content: `The German Shepherd is a breed of medium to large-sized working dog that originated
-          in Germany. The breed's officially recognized name is German Shepherd Dog in the 
+          in Germany. The breed's officially recognized name is German Shepherd Dog in the
           English language. The breed is also known as the Alsatian in Britain and Ireland.`
     }, {
       label: 'Labrador Retriever',
@@ -31,11 +30,11 @@ export class TabsAccessibilityDemo {
       label: 'Rottweiler',
       disabled: true,
       content: `The Rottweiler is a breed of domestic dog, regarded as medium-to-large or large.
-          The dogs were known in German as Rottweiler Metzgerhund, meaning Rottweil butchers' dogs, 
+          The dogs were known in German as Rottweiler Metzgerhund, meaning Rottweil butchers' dogs,
           because their main use was to ...`
     }, {
       label: 'Beagle',
-      content: `The Beagle is a breed of small hound, similar in appearance to the much larger 
+      content: `The Beagle is a breed of small hound, similar in appearance to the much larger
           foxhound. The beagle is a scent hound, developed primarily for hunting hare.`
     },
   ];

src/demo-app/a11y/tabs/tabs-a11y.ts

@@ -6,8 +6,6 @@ import {
   MdCardModule,
   MdCheckboxModule,
   MdChipsModule,
-  MdCoreModule,
-  MdTableModule,
   MdDatepickerModule,
   MdDialogModule,
   MdExpansionModule,
@@ -29,12 +27,19 @@ import {
   MdSlideToggleModule,
   MdSnackBarModule,
   MdSortModule,
+  MdTableModule,
   MdTabsModule,
   MdToolbarModule,
   MdTooltipModule,
   StyleModule
 } from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
+import {A11yModule} from '@angular/cdk/a11y';
+import {BidiModule} from '@angular/cdk/bidi';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {PlatformModule} from '@angular/cdk/platform';
+import {ObserversModule} from '@angular/cdk/observers';
+import {PortalModule} from '@angular/cdk/portal';
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
@@ -57,7 +62,6 @@ import {CdkTableModule} from '@angular/cdk/table';
     MdInputModule,
     MdListModule,
     MdMenuModule,
-    MdCoreModule,
     MdPaginatorModule,
     MdProgressBarModule,
     MdProgressSpinnerModule,
@@ -74,7 +78,13 @@ import {CdkTableModule} from '@angular/cdk/table';
     MdTooltipModule,
     MdNativeDateModule,
     CdkTableModule,
-    StyleModule
+    StyleModule,
+    A11yModule,
+    BidiModule,
+    ObserversModule,
+    OverlayModule,
+    PlatformModule,
+    PortalModule,
   ]
 })
 export class DemoMaterialModule {}

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

@@ -3,8 +3,10 @@
 <md-nav-list *ngIf="showLinks">
   <a md-list-item [routerLink]="['block-scroll-strategy']">Block scroll strategy</a>
   <a md-list-item [routerLink]="['button']">Button</a>
+  <a md-list-item [routerLink]="['button-toggle']">Button Toggle</a>
   <a md-list-item [routerLink]="['checkbox']">Checkbox</a>
   <a md-list-item [routerLink]="['dialog']">Dialog</a>
+  <a md-list-item [routerLink]="['expansion']">Expansion</a>
   <a md-list-item [routerLink]="['fullscreen']">Fullscreen</a>
   <a md-list-item [routerLink]="['grid-list']">Grid list</a>
   <a md-list-item [routerLink]="['icon']">Icon</a>
@@ -17,6 +19,8 @@
   <a md-list-item [routerLink]="['sidenav']">Sidenav</a>
   <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
   <a md-list-item [routerLink]="['tabs']">Tabs</a>
+  <a md-list-item [routerLink]="['cards']">Cards</a>
+  <a md-list-item [routerLink]="['toolbar']">Toolbar</a>
 </md-nav-list>
 
 <main>

src/e2e-app/e2e-app/e2e-app.html

@@ -20,6 +20,7 @@ import {
   ListOverviewExample,
   ToolbarMultirowExample,
   ButtonToggleOverviewExample,
+  ExpansionOverviewExample
 } from '@angular/material-examples';
 
 export const E2E_APP_ROUTES: Routes = [
@@ -29,6 +30,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'button-toggle', component: ButtonToggleOverviewExample},
   {path: 'checkbox', component: SimpleCheckboxes},
   {path: 'dialog', component: DialogE2E},
+  {path: 'expansion', component: ExpansionOverviewExample},
   {path: 'fullscreen', component: FullscreenE2E},
   {path: 'grid-list', component: GridListE2E},
   {path: 'icon', component: IconE2E},
@@ -41,6 +43,6 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'sidenav', component: SidenavE2E},
   {path: 'slide-toggle', component: SlideToggleE2E},
   {path: 'tabs', component: BasicTabs},
-  {path: 'card-fancy', component: CardFancyExample},
+  {path: 'cards', component: CardFancyExample},
   {path: 'toolbar', component: ToolbarMultirowExample},
 ];