Merge branch 'master' into dialog-backdrop-config-feature

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-# Contributing to Angular 2 Material
+# Contributing to Angular Material
 
-We would love for you to contribute to Angular 2 Material and help make it ever better!
+We would love for you to contribute to Angular Material and help make it ever better!
 As a contributor, here are the guidelines we would like you to follow:
 
  - [Code of Conduct](#coc)
@@ -19,7 +19,7 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
 
 If you have questions about how to *use* Angular Material, please direct them to the 
 [Google Group][material-group] discussion list or [StackOverflow][stackoverflow]. 
-Please note that Angular 2 Material is still in very early development, and the team's capacity 
+Please note that Angular Material is still in very early development, and the team's capacity 
 to answer usage questions is limited. Community chat is also available on [Gitter][gitter].
 
 ## <a name="issue"></a> Found an Issue?
@@ -33,7 +33,7 @@ You can help the team even more and [submit a Pull Request](#submit-pr) with a f
 ## <a name="feature"></a> Want a Feature?
 You can *request* a new feature by [submitting an issue](#submit-issue) to our [GitHub
 Repository][github]. If you would like to *implement* a new feature, please submit an issue with
-a proposal for your work first, to be sure that we can use it. Angular 2 Material is in very early 
+a proposal for your work first, to be sure that we can use it. Angular Material is in very early 
 stages and we are not ready to accept major contributions ahead of the full release.
 Please consider what kind of change it is:
 

README.md

@@ -1,9 +1,9 @@
-# Material Design for Angular 2
+# Material Design for Angular
 [![npm version](https://badge.fury.io/js/%40angular%2Fmaterial.svg)](https://www.npmjs.com/package/%40angular%2Fmaterial)
 [![Build Status](https://travis-ci.org/angular/material2.svg?branch=master)](https://travis-ci.org/angular/material2)
 [![Gitter](https://badges.gitter.im/angular/material2.svg)](https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
-This is the home for the Angular team's Material Design components built on top of Angular 2.
+This is the home for the Angular team's Material Design components built on top of Angular.
 
 #### Quick links
 [Google group](https://groups.google.com/forum/#!forum/angular-material2),
@@ -18,15 +18,15 @@ The latest release of Angular Material can be installed from npm
 
 Playing with the latest changes from [master](https://github.com/angular/material2/tree/master) is also possible
 
-`npm install https://github.com/angular/material2-builds.git`
+`npm install --save https://github.com/angular/material2-builds.git`
 
 ### Getting started
 
 See our [Getting Started Guide][getting-started]
-if you're building your first project with Angular Material 2.
+if you're building your first project with Angular Material.
 
 ### Project status
-Angular Material 2 is currently in beta and under active development.
+Angular Material is currently in beta and under active development.
 During beta, new features will be added regularly and APIs will evolve based on user feedback.
 
 Check out our [directory of design documents](https://github.com/angular/material2/wiki/Design-doc-directory)
@@ -141,7 +141,7 @@ High level items planned for January 2017:
 be missing some behaviors or polish.
 
 ## The goal of Angular Material
-Our goal is to build a set of high-quality UI components built with Angular 2 and TypeScript,
+Our goal is to build a set of high-quality UI components built with Angular and TypeScript,
 following the Material Design spec. These
 components will serve as an example of how to write Angular code following best practices.
 

e2e/index.e2e.ts

@@ -4,7 +4,7 @@ describe('hello, protractor', function () {
   describe('index', function () {
     browser.get('/');
     it('should have a title', function () {
-      expect(browser.getTitle()).toBe('Material2');
+      expect(browser.getTitle()).toBe('Angular Material');
     });
   });
 });

guides/getting-started.md

@@ -1,4 +1,4 @@
-Get started with Angular Material 2 using the Angular CLI.
+Get started with Angular Material using the Angular CLI.
 
 ## Install the CLI
 
@@ -85,6 +85,6 @@ load the Material Design font in your `index.html`.
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 ```
 
-## Sample Angular Material 2 projects
-- [Material 2 Sample App](https://github.com/jelbourn/material2-app)
+## Sample Angular Material projects
+- [Material Sample App](https://github.com/jelbourn/material2-app)
 - [Angular Connect 2016 Demo](https://github.com/kara/leashed-in)

guides/theming.md

@@ -13,7 +13,7 @@ a theme consists of:
 * A foreground palette: colors for text and icons.
 * A background palette: colors used for element backgrounds.
 
-In Angular Material 2, all theme styles are generated _statically_ at build-time so that your
+In Angular Material, all theme styles are generated _statically_ at build-time so that your
 app doesn't have to spend cycles generating theme styles on startup.
 
 [1]: https://material.google.com/style/color.html#color-color-palette

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material2-srcs",
-  "description": "Material Design components for Angular 2",
+  "description": "Material Design components for Angular",
   "homepage": "https://github.com/angular/material2",
   "bugs": "https://github.com/angular/material2/issues",
   "repository": {
@@ -72,7 +72,6 @@
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.4.0",
     "gulp-transform": "^1.1.0",
-    "gulp-typescript": "^3.1.4",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.9.0",
     "jasmine-core": "^2.5.2",

scripts/release/copy-docs.sh

@@ -7,7 +7,7 @@
 # Use OVERVIEW.html when possible. If there's no OVERVIEW file exists, use README.html
 
 usage='Usage: copy-docs.sh $destinationFolder'
-if [ $# -ne 1 ]; then 
+if [ $# -ne 1 ]; then
   echo "Missing destination folder. $usage"
   exit
 fi
@@ -23,7 +23,7 @@ fi
 for file in $originFolder*
 do
   name=${file#$originFolder}
-  overviewFile=$originFolder$name/OVERVIEW.html
+  overviewFile=$originFolder$name/$name.html
   readmeFile=$originFolder$name/README.html
   destFile=$destFolder/$name.html
   if [ -f $overviewFile ]; then

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

@@ -25,7 +25,7 @@ export class MdCheckboxDemoNestedChecklist {
       subtasks: [
         { name: 'Cook Dinner', completed: false },
         { name: 'Read the Material Design Spec', completed: false },
-        { name: 'Upgrade Application to Angular2', completed: false }
+        { name: 'Upgrade Application to Angular', completed: false }
       ]
     },
     {

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

@@ -8,7 +8,7 @@ import {MaterialModule, OverlayContainer,
   FullscreenOverlayContainer} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
-import {JazzDialog, ContentElementDialog, DialogDemo} from './dialog/dialog-demo';
+import {JazzDialog, ContentElementDialog, DialogDemo, IFrameDialog} from './dialog/dialog-demo';
 import {RippleDemo} from './ripple/ripple-demo';
 import {IconDemo} from './icon/icon-demo';
 import {GesturesDemo} from './gestures/gestures-demo';
@@ -65,6 +65,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     InputContainerDemo,
     JazzDialog,
     ContentElementDialog,
+    IFrameDialog,
     ListDemo,
     LiveAnnouncerDemo,
     MdCheckboxDemoNestedChecklist,
@@ -100,6 +101,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     DemoApp,
     JazzDialog,
     ContentElementDialog,
+    IFrameDialog,
     RotiniPanel,
     ScienceJoke,
     SpagettiPanel,

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

@@ -24,7 +24,7 @@
         <md-icon class="md-24" >menu</md-icon>
       </button>
       <div class="demo-toolbar">
-        <h1>Angular Material 2 Demos</h1>
+        <h1>Angular Material Demos</h1>
         <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
           Fullscreen
         </button>

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

@@ -4,7 +4,7 @@ import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
 @Component({
   selector: 'home',
   template: `
-    <p>Welcome to the development demos for Angular Material 2!</p>
+    <p>Welcome to the development demos for Angular Material!</p>
     <p>Open the sidenav to select a demo. </p>
   `
 })

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

@@ -1,4 +1,5 @@
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
+import {DOCUMENT} from '@angular/platform-browser';
 import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
 
 @Component({
@@ -25,7 +26,19 @@ export class DialogDemo {
     }
   };
 
-  constructor(public dialog: MdDialog) { }
+  constructor(public dialog: MdDialog, @Inject(DOCUMENT) doc: any) {
+    // Possible useful example for the open and closeAll events.
+    // Adding a class to the body if a dialog opens and
+    // removing it after all open dialogs are closed
+    dialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
+      if (!doc.body.classList.contains('no-scroll')) {
+        doc.body.classList.add('no-scroll');
+      }
+    });
+    dialog.afterAllClosed.subscribe(() => {
+      doc.body.classList.remove('no-scroll');
+    });
+  }
 
   openJazz() {
     this.dialogRef = this.dialog.open(JazzDialog, this.config);
@@ -93,9 +106,46 @@ export class JazzDialog {
         color="primary"
         href="https://en.wikipedia.org/wiki/Neptune"
         target="_blank">Read more on Wikipedia</a>
+      
+      <button
+        md-button
+        color="secondary"
+        (click)="showInStackedDialog()">
+        Show in Dialog</button>
     </md-dialog-actions>
   `
 })
 export class ContentElementDialog {
   actionsAlignment: string;
+
+  constructor(public dialog: MdDialog) { }
+
+  showInStackedDialog() {
+    this.dialog.open(IFrameDialog);
+  }
+}
+
+@Component({
+  selector: 'demo-iframe-dialog',
+  styles: [
+    `iframe {
+      width: 800px;
+    }`
+  ],
+  template: `
+    <h2 md-dialog-title>Neptune</h2>
+
+    <md-dialog-content>
+      <iframe frameborder="0" src="https://en.wikipedia.org/wiki/Neptune"></iframe>
+    </md-dialog-content>
+
+    <md-dialog-actions>
+      <button
+        md-raised-button
+        color="primary"
+        md-dialog-close>Close</button>
+    </md-dialog-actions>
+  `
+})
+export class IFrameDialog {
 }

src/demo-app/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Material2</title>
+  <title>Angular Material</title>
   <base href="/">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/demo-app/snack-bar/snack-bar-demo.html

@@ -27,6 +27,10 @@ <h1>SnackBar demo</h1>
       </md-input-container>
     </md-checkbox>
   </div>
+
+  <p>
+    <md-checkbox [(ngModel)]="addExtraClass">Add extra class to container</md-checkbox>
+  </p>
 </div>
 
 <button md-raised-button (click)="open()">OPEN</button>

src/demo-app/snack-bar/snack-bar-demo.scss

@@ -1,3 +1,17 @@
-.demo-button-label-input {
-  display: inline-block;
-}
+.party {
+  animation: party 5000ms infinite;
+}
+
+@keyframes party {
+  0% { background: #00f; }
+  10% { background: #8e44ad; }
+  20% { background: #1abc9c; }
+  30% { background: #d35400; }
+  40% { background: #00f; }
+  50% { background: #34495e; }
+  60% { background: #00f; }
+  70% { background: #2980b9; }
+  80% { background: #f1c40f; }
+  90% { background: #2980b9; }
+  100% { background: #0ff; }
+}

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -1,24 +1,27 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
 
 @Component({
   moduleId: module.id,
   selector: 'snack-bar-demo',
+  styleUrls: ['snack-bar-demo.css'],
   templateUrl: 'snack-bar-demo.html',
+  encapsulation: ViewEncapsulation.None,
 })
 export class SnackBarDemo {
   message: string = 'Snack Bar opened.';
   actionButtonLabel: string = 'Retry';
   action: boolean = false;
   setAutoHide: boolean = true;
-  autoHide: number = 0;
+  autoHide: number = 10000;
+  addExtraClass: boolean = false;
 
-  constructor(
-      public snackBar: MdSnackBar) { }
+  constructor(public snackBar: MdSnackBar) { }
 
   open() {
     let config = new MdSnackBarConfig();
     config.duration = this.autoHide;
+    config.extraClasses = this.addExtraClass ? ['party'] : null;
     this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
   }
 }

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
 import {TooltipPosition} from '@angular/material';
 
 
@@ -7,6 +7,7 @@ import {TooltipPosition} from '@angular/material';
   selector: 'tooltip-demo',
   templateUrl: 'tooltip-demo.html',
   styleUrls: ['tooltip-demo.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush // make sure tooltip also works OnPush
 })
 export class TooltipDemo {
   position: TooltipPosition = 'below';

src/demo-app/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "declaration": true,
+    "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": ["es6", "es2015", "dom"],
@@ -22,8 +22,11 @@
       ]
     }
   },
-  "exclude": [
-    "*-aot.ts"
+  "files": [
+    "./demo-app-types.d.ts",
+    "./demo-app-module.ts",
+    "./system-config.ts",
+    "./main.ts"
   ],
   "angularCompilerOptions": {
     "genDir": "../../dist",

src/e2e-app/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Material2</title>
+  <title>Angular Material</title>
   <base href="/">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">