docs(demo): New snackbar documentation and api (#229)

Author: trimox

config/rollup-demo.config.js

@@ -2,7 +2,7 @@ import nodeResolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 
 export default {
-  input: 'publish-demo/demo-app/main-aot.js',
+  input: 'publish-demo/main-aot.js',
   plugins: [
     nodeResolve(),
     commonjs({

src/demo-app/app.module.ts

@@ -6,6 +6,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { DemoMaterialModule } from './demo-material.module';
+
 import { AppComponent } from './app.component';
 import { ButtonDemoComponent } from './components/button-demo/button-demo.component';
 import { CardDemoComponent } from './components/card-demo/card-demo.component';
@@ -28,8 +30,6 @@ import { TypographyDemoComponent } from './components/typography-demo/typography
 import { TabDemoComponent, ItemOneContent, ItemTwoContent, ItemThreeContent } from './components/tab-demo/tab-demo.component';
 import { NavbarComponent } from './components/navigation/navbar.component';
 
-import { MaterialModule } from '../lib/public_api';
-
 import { HomeComponent } from './components/home/home.component';
 
 import { demoAppRoutes } from './routes';
@@ -41,7 +41,7 @@ import { demoAppRoutes } from './routes';
     HttpModule,
     ReactiveFormsModule,
     FlexLayoutModule,
-    MaterialModule,
+    DemoMaterialModule,
     RouterModule.forRoot(demoAppRoutes, { useHash: true })
   ],
   declarations: [

src/demo-app/components/button-demo/button-demo.component.html

@@ -102,12 +102,6 @@ <h1 mdc-typography-display1>Buttons</h1>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-icon-button</span> <span style="color:#89bdff">material-icon</span>></span>favorite<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-icon-button</span>></span>
   Icon
 <span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-</pre>
-  <button mdc-button [primary]="true" [raised]="true" (click)="handleClick();">Click event</button>
-<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
- [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
- [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>
- (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"handleClick();"</span>></span>Click event<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
   <button mdc-button [raised]="true" [mdc-theme-dark]="true">Dark theme</button>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
@@ -149,5 +143,5 @@ <h1 mdc-typography-display1>Buttons</h1>
  [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
  [<span style="color:#e0c589">disabled</span>]=<span style="color:#65b042">"true"</span>></span>Disabled<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
-<mdc-snackbar #snack></mdc-snackbar></div>
+</div>
 

src/demo-app/components/button-demo/button-demo.component.ts

@@ -1,23 +1,7 @@
-import {
-	Component,
-	ViewChild
-} from '@angular/core';
-
-import { SnackbarMessage, MdcSnackbarComponent } from '../../../lib/public_api';
+import { Component } from '@angular/core';
 
 @Component({
-	selector: 'button-demo',
-	templateUrl: './button-demo.component.html'
+  selector: 'button-demo',
+  templateUrl: './button-demo.component.html'
 })
-export class ButtonDemoComponent {
-	message: SnackbarMessage;
-	@ViewChild('snack') snack: MdcSnackbarComponent;
-
-	handleClick() {
-		this.message = {
-			message: 'Sample text',
-			actionText: 'Ok',
-		};
-		this.snack.show(this.message);
-	}
-}
+export class ButtonDemoComponent { }

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

@@ -1,7 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { MdcDialogComponent, MdcTextfieldComponent } from '../../../lib/public_api';
+import { MdcDialogComponent, MdcTextfieldComponent } from '@angular-mdc/web';
 
 @Component({
   selector: 'dialog-demo',

src/demo-app/components/drawer-demo/drawer-demo.component.ts

@@ -6,7 +6,7 @@ import {
 import {
   MdcTemporaryDrawerComponent,
   MdcPersistentDrawerComponent
-} from '../../../lib/public_api';
+} from '@angular-mdc/web';
 
 @Component({
   selector: 'drawer-demo',

src/demo-app/components/elevation-demo/elevation-demo.component.html

@@ -14,14 +14,14 @@ <h1 mdc-typography-display1>Elevation</h1>
       </thead>
       <tbody>
         <tr>
-          <td>mdc-elevation="#"</td>
+          <td>[mdc-elevation]="#"</td>
           <td>Elevation values are mapped out in a "z-space" and range from 0 to 24.</td>
         </tr>
       </tbody>
     </table>
     <div fxLayout="row" fxLayoutWrap>
       <figure [mdc-elevation]="i" class="demo-surface" *ngFor="let i of items">
-        <figcaption>mdc-elevation="{{i}}"</figcaption>
+        <figcaption>[mdc-elevation]="{{i}}"</figcaption>
       </figure>
     </div>
   </div>

src/demo-app/components/fab-demo/fab-demo.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 
-import { MdcFabComponent } from '../../../lib/public_api';
+import { MdcFabComponent } from '@angular-mdc/web';
 
 @Component({
   selector: 'fab-demo',

src/demo-app/components/menu-demo/menu-demo.component.ts

@@ -3,7 +3,7 @@ import {
   ViewChild
 } from '@angular/core';
 
-import { MdcMenuComponent } from '../../../lib/public_api';
+import { MdcMenuComponent } from '@angular-mdc/web';
 
 @Component({
   selector: 'menu-demo',

src/demo-app/components/navigation/navbar.component.ts

@@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { navigationLinks } from '../../common/navigation-links';
-import { MdcTemporaryDrawerComponent } from '../../../lib/public_api';
+import { MdcTemporaryDrawerComponent } from '@angular-mdc/web';
 
 @Component({
   selector: 'navbar',