feat(snackbar): Support custom components

demos/src/app/app-routing.module.ts

@@ -67,7 +67,7 @@ const routes: Routes = [
   {path: 'slider-demo', loadChildren: () => import('./components/slider/module').then(m => m.SliderModule)},
   {
     path: 'snackbar-demo', loadChildren: () =>
-      import('./components/snackbar-demo/snackbar.module').then(m => m.SnackbarModule)
+      import('./components/snackbar/module').then(m => m.SnackbarModule)
   },
   {path: 'switch-demo', loadChildren: () => import('./components/switch-demo/switch.module').then(m => m.SwitchModule)},
   {path: 'tabs-demo', loadChildren: () => import('./components/tabs-demo/tabs.module').then(m => m.TabsModule)},

demos/src/app/components/snackbar-demo/api.html → demos/src/app/components/snackbar/api.html

@@ -16,7 +16,8 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>afterDismiss: Observable
           <pre>MdcSnackbarDismissReason</pre>
         </td>
-        <td>Gets an observable that is notified when the snackbar is finished closing.
+        <td>Gets an observable that is notified when the snackbar is finished
+          closing.
           <pre><code highlight="/** Event that is emitted when a snackbar is dismissed. */
 export interface MdcSnackbarDismissReason {
   /** Whether the snackbar was dismissed using the action button. */
@@ -42,9 +43,14 @@ <h4 mdcSubtitle2>Methods</h4>
         <td>Opens snackbar message and action.</td>
       </tr>
       <tr>
-        <td>open(message: string, action: string, config?: MdcSnackbarConfig)</td>
+        <td>open(message: string, action: string, config?: MdcSnackbarConfig)
+        </td>
         <td>Opens the snackbar with optional configuration.</td>
       </tr>
+      <tr>
+        <td><code highlight='openFromComponent(component: Component<T>, config?: MdcSnackbarConfig)'></code></td>
+        <td>Creates and dispatches a snackbar with a custom component for the content, removing any currently opened snackbars.</td>
+      </tr>
     </tbody>
   </table>
 
@@ -53,19 +59,22 @@ <h4 mdcSubtitle2>MdcSnackbarConfig</h4>
     <tbody>
       <tr>
         <td>timeoutMs?: number</td>
-        <td>Value must be between 4000 and 10000 or an error will be thrown. Defaults to 5000 (5 seconds).</td>
+        <td>Value must be between 4000 and 10000 or an error will be thrown.
+          Defaults to 5000 (5 seconds).</td>
       </tr>
       <tr>
         <td>stacked?: boolean</td>
-        <td>Positions the action button/icon below the label instead of alongside it. Defaults to false.</td>
+        <td>Positions the action button/icon below the label instead of
+          alongside it. Defaults to false.</td>
       </tr>
       <tr>
         <td>leading?: boolean</td>
         <td>Positions the snackbar on the leading edge of the screen.</td>
       </tr>
       <tr>
         <td>trailing?: boolean</td>
-        <td>Positions the snackbar on the trailing (right) edge of the screen.</td>
+        <td>Positions the snackbar on the trailing (right) edge of the screen.
+        </td>
       </tr>
       <tr>
         <td>direction?: string</td>
@@ -77,7 +86,8 @@ <h4 mdcSubtitle2>MdcSnackbarConfig</h4>
       </tr>
       <tr>
         <td>closeOnEscape?: boolean</td>
-        <td>Whether the snackbar closes when it is focused and the user presses the ESC key. Default is true.</td>
+        <td>Whether the snackbar closes when it is focused and the user presses
+          the ESC key. Default is true.</td>
       </tr>
       <tr>
         <td>classes?: string | string[]</td>
@@ -93,7 +103,8 @@ <h4 mdcSubtitle2>MdcSnackbarConfig</h4>
       </tr>
       <tr>
         <td>politeness?: AriaLivePoliteness</td>
-        <td>The politeness level for the screen reader announcement. Default is 'polite'</td>
+        <td>The politeness level for the screen reader announcement. Default is
+          'polite'</td>
       </tr>
     </tbody>
   </table>

demos/src/app/components/snackbar/examples.html

@@ -0,0 +1,89 @@
+<div class="demo-content">
+  <div class="demo-layout__row">
+    <div class="demo-container">
+      <button mdc-button (click)="simple()">Simple</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="withAction()">With Action</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="dismissIcon()">Dismiss Icon</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="stacked()">Stacked</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="maxTimeout()">Max Timeout</button>
+    </div>
+  </div>
+  <example-viewer [example]="exampleSnackbar"></example-viewer>
+</div>
+
+<div class="demo-content">
+  <div class="demo-layout__row">
+    <div class="demo-container">
+      <button mdc-button (click)="openLeading()">Leading</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openTrailing()">Trailing</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openRtl()">RTL</button>
+    </div>
+  </div>
+  <example-viewer [example]="exampleAlign"></example-viewer>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Custom</h3>
+  <div class="demo-layout__row">
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: 'custom-snackbar--shape-radius'})">Shaped</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: 'custom-snackbar--elevation'})">Elevation</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: 'custom-snackbar--viewport-margin'})">Viewport Margin</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: 'custom-snackbar--max-width'})">Max-Width</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: 'custom-snackbar--min-width'})">Min-Width</button>
+    </div>
+  </div>
+  <example-viewer [example]="exampleCustom"></example-viewer>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Theme</h3>
+  <div class="demo-layout__row">
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: 'custom-snackbar--fill-color'})">Fill Color</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: 'custom-snackbar--label-ink-color'})">Ink Color</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({classes: ['custom-snackbar--fill-color', 'custom-snackbar--label-ink-color']})">Fill/Ink
+        Color</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({actionClasses: 'mdc-button--outlined'})">Action Outlined</button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button (click)="openCustom({dismissClasses: 'demo-icon-button-custom'})">Dismiss Icon</button>
+    </div>
+  </div>
+  <example-viewer [example]="exampleTheme"></example-viewer>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Open from Component</h3>
+  <div class="demo-layout__row">
+    <div class="demo-container">
+      <button mdc-button (click)="openFromComponent()">Open</button>
+    </div>
+  </div>
+</div>

demos/src/app/components/snackbar/module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+
+import {SharedModule} from '../../shared.module';
+import {RoutingModule, ROUTE_DECLARATIONS} from './routing.module';
+
+import {
+  BurritosNotification
+} from './snackbar';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RoutingModule
+  ],
+  declarations: [
+    ROUTE_DECLARATIONS,
+    BurritosNotification,
+  ]
+})
+export class SnackbarModule {}

demos/src/app/components/snackbar/routing.module.ts

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, Snackbar} from './snackbar';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  Snackbar
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: Snackbar,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}

demos/src/app/components/snackbar-demo/snackbar-demo.ts → demos/src/app/components/snackbar/snackbar.ts

@@ -11,7 +11,7 @@ interface CustomClasses {
 }
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class SnackbarDemo implements OnInit {
+export class Snackbar implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -38,6 +38,9 @@ export class Api {}
 @Component({templateUrl: './sass.html'})
 export class Sass {}
 
+@Component({template: '<p>Burritos are on the way.</p>'})
+export class BurritosNotification {}
+
 @Component({templateUrl: './examples.html'})
 export class Examples {
   constructor(private snackbar: MdcSnackbar) {}
@@ -116,6 +119,10 @@ export class Examples {
     });
   }
 
+  openFromComponent() {
+    this.snackbar.openFromComponent(BurritosNotification);
+  }
+
   //
   // Examples
   //

packages/snackbar/module.ts

@@ -4,8 +4,9 @@ import {OverlayModule} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {MdcButtonModule} from '@angular-mdc/web/button';
 
-import {MdcSnackbarComponent} from './snackbar.component';
+import {MdcSnackbarBase} from './snackbar-base';
 import {MdcSnackbarContainer} from './snackbar-container';
+import {MdcSnackbarComponent} from './snackbar.component';
 
 @NgModule({
   imports: [
@@ -15,7 +16,7 @@ import {MdcSnackbarContainer} from './snackbar-container';
     MdcButtonModule
   ],
   exports: [MdcSnackbarContainer],
-  declarations: [MdcSnackbarContainer, MdcSnackbarComponent],
-  entryComponents: [MdcSnackbarContainer, MdcSnackbarComponent]
+  declarations: [MdcSnackbarContainer, MdcSnackbarBase, MdcSnackbarComponent],
+  entryComponents: [MdcSnackbarContainer, MdcSnackbarComponent, MdcSnackbarBase]
 })
 export class MdcSnackbarModule { }