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

trimox · Oct 1, 2017 · 034a1f1 · 034a1f1
1 parent 4f68194
commit 034a1f1
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 69 deletions.
diff --git a/config/rollup-demo.config.js b/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({

diff --git a/src/demo-app/app.module.ts b/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: [

diff --git a/src/demo-app/components/button-demo/button-demo.component.html b/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>
 
diff --git a/src/demo-app/components/button-demo/button-demo.component.ts b/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 { }
diff --git a/src/demo-app/components/dialog-demo/dialog-demo.component.ts b/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',

diff --git a/src/demo-app/components/drawer-demo/drawer-demo.component.ts b/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',

diff --git a/src/demo-app/components/elevation-demo/elevation-demo.component.html b/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>
diff --git a/src/demo-app/components/fab-demo/fab-demo.component.ts b/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',

diff --git a/src/demo-app/components/menu-demo/menu-demo.component.ts b/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',

diff --git a/src/demo-app/components/navigation/navbar.component.ts b/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',

diff --git a/src/demo-app/components/slider-demo/slider-demo.component.html b/src/demo-app/components/slider-demo/slider-demo.component.html
@@ -93,21 +93,23 @@ <h1 mdc-typography-display1>Slider</h1>
       <tbody>
         <tr>
           <td>
-            <pre><code><![CDATA[change(source: MdcSlider, value)]]></code></pre>
+            change(source: MdcSlider, value)
           </td>
-          <td>Broadcast when slider value is changed and committed by way of a user event, e.g. when a user stops dragging the slider or changes the value using the arrow keys.</td>
+          <td>Broadcast when slider value is changed and committed by way of a user event,
+           e.g. when a user stops dragging the slider or changes the value using the arrow keys.</td>
         </tr>
         <tr>
           <td>
-            <pre><code><![CDATA[input(source: MdcSlider, value)]]></code></pre>
+            input(source: MdcSlider, value)
           </td>
-          <td>Broadcasts when slider value is changed by way of a user event, e.g. when a user is dragging the slider or changing the value using the arrow keys.</td>
+          <td>Broadcasts when slider value is changed by way of a user event,
+           e.g. when a user is dragging the slider or changing the value using the arrow keys.</td>
         </tr>
       </tbody>
     </table>
   </div>
-  <div fxLayout="row" class="mdc-padding" fxLayoutGap="25px">
-    <div fxLayout="column" fxFlex="100">
+</div>
+  <div fxLayout="column" class="mdc-padding">
       <span mdc-typography-headline>Continuous Slider</span>
 <mdc-slider [min]="continuousMin" [max]="continuousMax" [value]="continuousValue" [(ngModel)]="continuousModel" [disabled]="continuousIsDisabled" (input)="inputContinuousValue($event)">
 </mdc-slider>
@@ -121,8 +123,6 @@ <h1 mdc-typography-display1>Slider</h1>
         <mdc-checkbox [(ngModel)]="continuousIsDisabled"></mdc-checkbox>
         <label>Disable</label>
       </mdc-form-field>
-    </div>
-  </div>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-slider</span> 
   [<span style="color:#89bdff">min</span>]=<span style="color:#65b042">"0"</span>
   [<span style="color:#89bdff">max</span>]=<span style="color:#65b042">"100"</span>
@@ -133,9 +133,9 @@ <h1 mdc-typography-display1>Slider</h1>
   (<span style="color:#89bdff">change</span>)=<span style="color:#65b042">"myChangeEvent($event)"</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-slider</span>></span>
 </pre>
+    </div>
 
-  <div fxLayout="row" class="mdc-padding" fxLayoutGap="25px">
-    <div fxLayout="column" fxFlex="100">
+  <div fxLayout="column" class="mdc-padding">
       <span mdc-typography-headline>Discrete Slider</span>
       <mdc-slider [min]="discreteMin" [max]="discreteMax" [value]="discreteValue" [(ngModel)]="discreteValue" [discrete]="true" [disabled]="discreteIsDisabled">
       </mdc-slider>
@@ -149,8 +149,6 @@ <h1 mdc-typography-display1>Slider</h1>
         <mdc-checkbox [(ngModel)]="discreteIsDisabled"></mdc-checkbox>
         <label>Disable</label>
       </mdc-form-field>
-    </div>
-  </div>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-slider</span>
   [<span style="color:#89bdff">discrete</span>]=<span style="color:#65b042">"true"</span>
   [<span style="color:#89bdff">min</span>]=<span style="color:#65b042">"0"</span>
@@ -162,26 +160,23 @@ <h1 mdc-typography-display1>Slider</h1>
   (<span style="color:#89bdff">change</span>)=<span style="color:#65b042">"myChangeEvent($event)"</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-slider</span>></span>
 </pre>
-
-  <div fxLayout="row" class="mdc-padding" fxLayoutGap="25px">
-    <div fxLayout="column" fxFlex="100">
-      <span mdc-typography-headline>Discrete Slider with markers</span>
-      <mdc-slider [min]="dmMin" [max]="dmMax" [step]="dmStep" [value]="dmValue" [(ngModel)]="dmModel" [discrete]="true" [markers]="true" [disabled]="dmIsDisabled">
-      </mdc-slider>
-      <label>Slider value : {{dmModel}}</label>
-      <div fxLayout="row">
-        <mdc-textfield [(ngModel)]="dmMin" label="Min" class="mdc-textfield--short"></mdc-textfield>
-        <mdc-textfield [(ngModel)]="dmMax" label="Max" class="mdc-textfield--short"></mdc-textfield>
-        <mdc-textfield [(ngModel)]="dmStep" label="Step" class="mdc-textfield--short"></mdc-textfield>
-        <mdc-textfield [(ngModel)]="dmValue" label="Value" class="mdc-textfield--short"></mdc-textfield>
-      </div>
-      <mdc-form-field>
-        <mdc-checkbox [(ngModel)]="dmIsDisabled"></mdc-checkbox>
-        <label>Disable</label>
-      </mdc-form-field>
-    </div>
   </div>
 
+  <div fxLayout="column" class="mdc-padding">
+    <span mdc-typography-headline>Discrete Slider with markers</span>
+    <mdc-slider [min]="dmMin" [max]="dmMax" [step]="dmStep" [value]="dmValue" [(ngModel)]="dmModel" [discrete]="true" [markers]="true" [disabled]="dmIsDisabled">
+    </mdc-slider>
+    <label>Slider value : {{dmModel}}</label>
+    <div fxLayout="row">
+      <mdc-textfield [(ngModel)]="dmMin" label="Min" class="mdc-textfield--short"></mdc-textfield>
+      <mdc-textfield [(ngModel)]="dmMax" label="Max" class="mdc-textfield--short"></mdc-textfield>
+      <mdc-textfield [(ngModel)]="dmStep" label="Step" class="mdc-textfield--short"></mdc-textfield>
+      <mdc-textfield [(ngModel)]="dmValue" label="Value" class="mdc-textfield--short"></mdc-textfield>
+    </div>
+    <mdc-form-field>
+      <mdc-checkbox [(ngModel)]="dmIsDisabled"></mdc-checkbox>
+      <label>Disable</label>
+    </mdc-form-field>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-slider</span>
   [<span style="color:#89bdff">discrete</span>]=<span style="color:#65b042">"true"</span>
   [<span style="color:#89bdff">markers</span>]=<span style="color:#65b042">"true"</span>

diff --git a/src/demo-app/components/snackbar-demo/snackbar-demo.component.ts b/src/demo-app/components/snackbar-demo/snackbar-demo.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { MdcSnackbar } from '../../../lib/public_api';
+import { MdcSnackbar } from '@angular-mdc/web';
 
 @Component({
   selector: 'snackbar-demo',

diff --git a/src/demo-app/demo-material.module.ts b/src/demo-app/demo-material.module.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import {
+  MdcButtonModule,
+  MdcCardModule,
+  MdcCheckboxModule,
+  MdcDialogModule,
+  MdcDrawerModule,
+  MdcElevationModule,
+  MdcFabModule,
+  MdcFormFieldModule,
+  MdcIconToggleModule,
+  MdcLinearProgressModule,
+  MdcListModule,
+  MdcMaterialIconModule,
+  MdcMenuModule,
+  MdcRadioModule,
+  MdcSliderModule,
+  MdcSnackbarModule,
+  MdcSwitchModule,
+  MdcTabModule,
+  MdcTextfieldModule,
+  MdcThemeModule,
+  MdcToolbarModule,
+  MdcTypographyModule,
+} from '@angular-mdc/web';
+
+@NgModule({
+  exports: [
+    MdcButtonModule,
+    MdcCardModule,
+    MdcCheckboxModule,
+    MdcDialogModule,
+    MdcDrawerModule,
+    MdcElevationModule,
+    MdcFabModule,
+    MdcFormFieldModule,
+    MdcIconToggleModule,
+    MdcLinearProgressModule,
+    MdcListModule,
+    MdcMaterialIconModule,
+    MdcMenuModule,
+    MdcRadioModule,
+    MdcSliderModule,
+    MdcSnackbarModule,
+    MdcSwitchModule,
+    MdcTabModule,
+    MdcTextfieldModule,
+    MdcThemeModule,
+    MdcToolbarModule,
+    MdcTypographyModule,
+  ]
+})
+export class DemoMaterialModule { }