feat(material-experimental/snack-bar): add MDC-based snack-bar (#19800)

* feat(material-experimental/snack-bar): add MDC-based snack-bar

* prefix underscores for snackbar

* remove underscore from simple snackbar interface

* remove docs private from TextOnlySnackBar

.github/CODEOWNERS

@@ -111,7 +111,7 @@
 /src/material-experimental/mdc-progress-spinner/** @andrewseguin
 /src/material-experimental/mdc-progress-bar/**     @andrewseguin
 /src/material-experimental/mdc-radio/**            @mmalerba
-/src/material-experimental/mdc-snackbar/**         @opozo
+/src/material-experimental/mdc-snack-bar/**        @andrewseguin
 /src/material-experimental/mdc-slide-toggle/**     @crisbeto
 /src/material-experimental/mdc-slider/**           @devversion
 /src/material-experimental/mdc-tabs/**             @crisbeto
@@ -175,8 +175,9 @@
 /src/dev-app/mdc-menu/**                           @crisbeto
 /src/dev-app/mdc-progress-bar/**                   @crisbeto
 /src/dev-app/mdc-radio/**                          @mmalerba
-/src/dev-app/mdc-snackbar/**                       @opozo
+/src/dev-app/mdc-snack-bar/**                      @andrewseguin
 /src/dev-app/mdc-sidenav/**                        @crisbeto
+/src/dev-app/mdc-snack-bar/**                      @andrewseguin
 /src/dev-app/mdc-slide-toggle/**                   @crisbeto
 /src/dev-app/mdc-slider/**                         @devversion
 /src/dev-app/mdc-table/**                          @andrewseguin

src/dev-app/BUILD.bazel

@@ -57,7 +57,7 @@ ng_module(
         "//src/dev-app/mdc-sidenav",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-slider",
-        "//src/dev-app/mdc-snackbar",
+        "//src/dev-app/mdc-snack-bar",
         "//src/dev-app/mdc-table",
         "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",

src/dev-app/dev-app/dev-app-layout.ts

@@ -85,7 +85,7 @@ export class DevAppLayout {
     {name: 'MDC Sidenav', route: '/mdc-sidenav'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
-    {name: 'MDC Snackbar', route: '/mdc-snackbar'},
+    {name: 'MDC Snack Bar', route: '/mdc-snack-bar'},
     {name: 'MDC Table', route: '/mdc-table'},
   ];
 

src/dev-app/dev-app/routes.ts

@@ -78,8 +78,8 @@ export const DEV_APP_ROUTES: Routes = [
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
   {path: 'mdc-sidenav', loadChildren: 'mdc-sidenav/mdc-sidenav-demo-module#MdcSidenavDemoModule'},
   {
-    path: 'mdc-snackbar',
-    loadChildren: 'mdc-snackbar/mdc-snackbar-demo-module#MdcSnackbarDemoModule'
+    path: 'mdc-snack-bar',
+    loadChildren: 'mdc-snack-bar/mdc-snack-bar-demo-module#MdcSnackBarDemoModule'
   },
   {
     path: 'mdc-slide-toggle',

src/dev-app/mdc-snack-bar/BUILD.bazel

@@ -0,0 +1,29 @@
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-snack-bar",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-snack-bar-demo.html",
+        ":mdc_snack_bar_demo_scss",
+    ],
+    deps = [
+        "//src/cdk/bidi",
+        "//src/material-experimental/mdc-snack-bar",
+        "//src/material/button",
+        "//src/material/checkbox",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_snack_bar_demo_scss",
+    src = "mdc-snack-bar-demo.scss",
+)

src/dev-app/mdc-snack-bar/mdc-snack-bar-demo-module.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatSnackBarModule} from '@angular/material-experimental/mdc-snack-bar';
+import {RouterModule} from '@angular/router';
+import {MdcSnackBarDemo} from './mdc-snack-bar-demo';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+
+@NgModule({
+  imports: [
+    MatSnackBarModule,
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    RouterModule.forChild([{path: '', component: MdcSnackBarDemo}]),
+  ],
+  declarations: [MdcSnackBarDemo],
+})
+export class MdcSnackBarDemoModule {
+}

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

@@ -0,0 +1,59 @@
+<h1>SnackBar demo</h1>
+<div>
+  <div>
+    Message: <mat-form-field><input matInput type="text" [(ngModel)]="message"></mat-form-field>
+  </div>
+  <div>
+    <div>Position in page: </div>
+    <mat-form-field>
+      <mat-select [(ngModel)]="horizontalPosition">
+        <mat-option value="start">Start</mat-option>
+        <mat-option value="end">End</mat-option>
+        <mat-option value="left">Left</mat-option>
+        <mat-option value="right">Right</mat-option>
+        <mat-option value="center">Center</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-select [(ngModel)]="verticalPosition">
+        <mat-option value="top">Top</mat-option>
+        <mat-option value="bottom">Bottom</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div>
+    <mat-checkbox [(ngModel)]="action">
+      <p *ngIf="!action">Show button on snack bar</p>
+      <mat-form-field *ngIf="action">
+        <mat-label>Snack bar action label</mat-label>
+        <input matInput
+               type="text"
+               [(ngModel)]="actionButtonLabel">
+      </mat-form-field>
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox [(ngModel)]="setAutoHide">
+      <p *ngIf="!setAutoHide">Auto hide after duration</p>
+      <mat-form-field *ngIf="setAutoHide">
+        <mat-label>Auto hide duration in ms</mat-label>
+        <input matInput
+               type="number"
+               [(ngModel)]="autoHide">
+      </mat-form-field>
+    </mat-checkbox>
+  </div>
+  <p>
+    <mat-checkbox [(ngModel)]="addExtraClass">Add extra class to container</mat-checkbox>
+  </p>
+</div>
+
+<p>
+  <button mat-raised-button (click)="open()">OPEN</button>
+</p>
+
+<button mat-raised-button (click)="openTemplate()">OPEN TEMPLATE</button>
+
+<ng-template #template>
+  Template snack bar: {{message}}
+</ng-template>

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

@@ -0,0 +1,17 @@
+.demo-party .mdc-snackbar__surface {
+  animation: demo-party 5000ms infinite;
+}
+
+@keyframes demo-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/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directionality} from '@angular/cdk/bidi';
+import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
+import {MatSnackBar} from '@angular/material-experimental/mdc-snack-bar';
+import {
+  MatSnackBarConfig,
+  MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition
+} from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'mdc-snack-bar-demo',
+  templateUrl: 'mdc-snack-bar-demo.html',
+  styleUrls: ['mdc-snack-bar-demo.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class MdcSnackBarDemo {
+
+  @ViewChild('template') template: TemplateRef<any>;
+  message = 'Snack Bar opened.';
+  actionButtonLabel = 'Retry';
+  action = false;
+  setAutoHide = true;
+  autoHide = 10000;
+  addExtraClass = false;
+  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+
+  constructor(public snackBar: MatSnackBar, private _dir: Directionality) {}
+
+  open() {
+    const config = this._createConfig();
+    this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
+  }
+
+  openTemplate() {
+    const config = this._createConfig();
+    this.snackBar.openFromTemplate(this.template, config);
+  }
+
+  private _createConfig() {
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = this.verticalPosition;
+    config.horizontalPosition = this.horizontalPosition;
+    config.duration = this.setAutoHide ? this.autoHide : 0;
+    config.panelClass = this.addExtraClass ? ['demo-party'] : undefined;
+    config.direction = this._dir.value;
+    return config;
+  }
+}

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

@@ -7,7 +7,7 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {Component, TemplateRef, ViewChild} from '@angular/core';
+import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
 import {
   MatSnackBar,
   MatSnackBarConfig,
@@ -20,6 +20,7 @@ import {
   selector: 'snack-bar-demo',
   styleUrls: ['snack-bar-demo.css'],
   templateUrl: 'snack-bar-demo.html',
+  encapsulation: ViewEncapsulation.None,
 })
 export class SnackBarDemo {
   @ViewChild('template') template: TemplateRef<any>;

src/material-experimental/config.bzl

@@ -24,7 +24,7 @@ entryPoints = [
     "mdc-slide-toggle/testing",
     "mdc-slider",
     "mdc-slider/testing",
-    "mdc-snackbar",
+    "mdc-snack-bar",
     "mdc-table",
     "mdc-tabs",
     "popover-edit",