update dev-app

Author: mmalerba

src/dev-app/BUILD.bazel

@@ -50,6 +50,7 @@ ng_module(
         "//src/dev-app/legacy-input",
         "//src/dev-app/legacy-paginator",
         "//src/dev-app/legacy-select",
+        "//src/dev-app/legacy-snack-bar",
         "//src/dev-app/legacy-table",
         "//src/dev-app/legacy-tooltip",
         "//src/dev-app/list",
@@ -67,7 +68,6 @@ ng_module(
         "//src/dev-app/mdc-radio",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-slider",
-        "//src/dev-app/mdc-snack-bar",
         "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",
         "//src/dev-app/menubar",

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

@@ -46,35 +46,35 @@ export class DevAppLayout {
   strongFocus = false;
   navItems = [
     {name: 'Examples', route: '/examples'},
+    {name: 'CDK Dialog', route: '/cdk-dialog'},
+    {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
+    {name: 'CDK Listbox', route: '/cdk-listbox'},
+    {name: 'CDK Menu', route: '/cdk-menu'},
     {name: 'Autocomplete', route: '/autocomplete'},
     {name: 'Badge', route: '/badge'},
     {name: 'Bottom sheet', route: '/bottom-sheet'},
     {name: 'Button Toggle', route: '/button-toggle'},
     {name: 'Button', route: '/button'},
     {name: 'Card', route: '/card'},
-    {name: 'CDK Dialog', route: '/cdk-dialog'},
-    {name: 'CDK Listbox', route: '/cdk-listbox'},
-    {name: 'CDK Menu', route: '/cdk-menu'},
-    {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
     {name: 'Checkbox', route: '/checkbox'},
     {name: 'Chips', route: '/chips'},
     {name: 'Clipboard', route: '/clipboard'},
     {name: 'Column Resize', route: 'column-resize'},
     {name: 'Connected Overlay', route: '/connected-overlay'},
     {name: 'Datepicker', route: '/datepicker'},
     {name: 'Dialog', route: '/dialog'},
-    {name: 'Drawer', route: '/drawer'},
     {name: 'Drag and Drop', route: '/drag-drop'},
+    {name: 'Drawer', route: '/drawer'},
     {name: 'Expansion Panel', route: '/expansion'},
     {name: 'Focus Origin', route: '/focus-origin'},
     {name: 'Focus Trap', route: '/focus-trap'},
     {name: 'Google Map', route: '/google-map'},
     {name: 'Grid List', route: '/grid-list'},
     {name: 'Icon', route: '/icon'},
-    {name: 'Input', route: '/input'},
     {name: 'Input Modality', route: '/input-modality'},
-    {name: 'List', route: '/list'},
+    {name: 'Input', route: '/input'},
     {name: 'Layout', route: '/layout'},
+    {name: 'List', route: '/list'},
     {name: 'Live Announcer', route: '/live-announcer'},
     {name: 'Menu', route: '/menu'},
     {name: 'Menubar', route: '/menubar'},
@@ -94,8 +94,8 @@ export class DevAppLayout {
     {name: 'Slider', route: '/slider'},
     {name: 'Snack Bar', route: '/snack-bar'},
     {name: 'Stepper', route: '/stepper'},
-    {name: 'Table', route: '/table'},
     {name: 'Table Scroll Container', route: '/table-scroll-container'},
+    {name: 'Table', route: '/table'},
     {name: 'Tabs', route: '/tabs'},
     {name: 'Toolbar', route: '/toolbar'},
     {name: 'Tooltip', route: '/tooltip'},
@@ -111,18 +111,18 @@ export class DevAppLayout {
     {name: 'MDC Dialog', route: '/mdc-dialog'},
     {name: 'MDC List', route: '/mdc-list'},
     {name: 'MDC Menu', route: '/mdc-menu'},
-    {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
-    {name: 'MDC Tabs', route: '/mdc-tabs'},
+    {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
-    {name: 'MDC Snack Bar', route: '/mdc-snack-bar'},
+    {name: 'MDC Tabs', route: '/mdc-tabs'},
+    {name: 'Legacy Input', route: '/legacy-input'},
+    {name: 'Legacy Paginator', route: '/legacy-paginator'},
     {name: 'Legacy Select', route: '/legacy-select'},
-    {name: 'Legacy Tooltip', route: '/legacy-tooltip'},
+    {name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},
     {name: 'Legacy Table', route: '/legacy-table'},
-    {name: 'Legacy Paginator', route: '/legacy-paginator'},
-    {name: 'Legacy Input', route: '/legacy-input'},
+    {name: 'Legacy Tooltip', route: '/legacy-tooltip'},
   ];
 
   /** Currently selected density scale based on the index. */

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

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

src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.html renamed to src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.html

@@ -6,7 +6,6 @@ <h1>SnackBar demo</h1>
   <div>
     <div>Position in page: </div>
     <mat-form-field>
-      <mat-label>Horizontal</mat-label>
       <mat-select [(ngModel)]="horizontalPosition">
         <mat-option value="start">Start</mat-option>
         <mat-option value="end">End</mat-option>
@@ -16,7 +15,6 @@ <h1>SnackBar demo</h1>
       </mat-select>
     </mat-form-field>
     <mat-form-field>
-      <mat-label>Vertical</mat-label>
       <mat-select [(ngModel)]="verticalPosition">
         <mat-option value="top">Top</mat-option>
         <mat-option value="bottom">Bottom</mat-option>

src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.scss renamed to src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.scss

@@ -1,4 +1,4 @@
-.demo-party .mdc-snackbar__surface {
+.demo-party {
   animation: demo-party 5000ms infinite;
 }
 

src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts renamed to src/dev-app/legacy-snack-bar/legacy-snack-bar-demo.ts

@@ -6,50 +6,52 @@
  * 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,
-  MatSnackBarConfig,
-  MatSnackBarHorizontalPosition,
-  MatSnackBarVerticalPosition,
-  MatSnackBarModule,
-} from '@angular/material/snack-bar';
+import {Directionality} from '@angular/cdk/bidi';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatInputModule} from '@angular/material/input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {
+  MatLegacySnackBar,
+  MatLegacySnackBarConfig,
+  MatLegacySnackBarHorizontalPosition,
+  MatLegacySnackBarModule,
+  MatLegacySnackBarVerticalPosition,
+} from '@angular/material/legacy-snack-bar';
 
 @Component({
-  selector: 'mdc-snack-bar-demo',
-  templateUrl: 'mdc-snack-bar-demo.html',
-  styleUrls: ['mdc-snack-bar-demo.css'],
+  selector: 'legacy-snack-bar-demo',
+  styleUrls: ['legacy-snack-bar-demo.css'],
+  templateUrl: 'legacy-snack-bar-demo.html',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    MatSnackBarModule,
     CommonModule,
     FormsModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatInputModule,
-    MatSelectModule,
+    MatLegacyButtonModule,
+    MatLegacyCheckboxModule,
+    MatLegacyFormFieldModule,
+    MatLegacyInputModule,
+    MatLegacySelectModule,
+    MatLegacySnackBarModule,
   ],
 })
-export class MdcSnackBarDemo {
+export class LegacySnackBarDemo {
   @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';
+  horizontalPosition: MatLegacySnackBarHorizontalPosition = 'center';
+  verticalPosition: MatLegacySnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MatSnackBar, private _dir: Directionality) {}
+  constructor(public snackBar: MatLegacySnackBar, private _dir: Directionality) {}
 
   open() {
     const config = this._createConfig();
@@ -62,7 +64,7 @@ export class MdcSnackBarDemo {
   }
 
   private _createConfig() {
-    const config = new MatSnackBarConfig();
+    const config = new MatLegacySnackBarConfig();
     config.verticalPosition = this.verticalPosition;
     config.horizontalPosition = this.horizontalPosition;
     config.duration = this.setAutoHide ? this.autoHide : 0;

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

@@ -204,8 +204,8 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./select/select-demo').then(m => m.SelectDemo),
   },
   {
-    path: 'mdc-snack-bar',
-    loadComponent: () => import('./mdc-snack-bar/mdc-snack-bar-demo').then(m => m.MdcSnackBarDemo),
+    path: 'snack-bar',
+    loadComponent: () => import('./snack-bar/snack-bar-demo').then(m => m.SnackBarDemo),
   },
   {
     path: 'mdc-slide-toggle',
@@ -283,8 +283,9 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./slider/slider-demo').then(m => m.SliderDemo),
   },
   {
-    path: 'snack-bar',
-    loadComponent: () => import('./snack-bar/snack-bar-demo').then(m => m.SnackBarDemo),
+    path: 'legacy-snack-bar',
+    loadComponent: () =>
+      import('./legacy-snack-bar/legacy-snack-bar-demo').then(m => m.LegacySnackBarDemo),
   },
   {
     path: 'stepper',

src/dev-app/routes.ts

@@ -11,12 +11,12 @@ ng_module(
     ],
     deps = [
         "//src/cdk/bidi",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
-        "//src/material/legacy-snack-bar",
+        "//src/material/button",
+        "//src/material/checkbox",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+        "//src/material/snack-bar",
         "@npm//@angular/forms",
     ],
 )

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

@@ -6,6 +6,7 @@ <h1>SnackBar demo</h1>
   <div>
     <div>Position in page: </div>
     <mat-form-field>
+      <mat-label>Horizontal</mat-label>
       <mat-select [(ngModel)]="horizontalPosition">
         <mat-option value="start">Start</mat-option>
         <mat-option value="end">End</mat-option>
@@ -15,6 +16,7 @@ <h1>SnackBar demo</h1>
       </mat-select>
     </mat-form-field>
     <mat-form-field>
+      <mat-label>Vertical</mat-label>
       <mat-select [(ngModel)]="verticalPosition">
         <mat-option value="top">Top</mat-option>
         <mat-option value="bottom">Bottom</mat-option>

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

@@ -1,4 +1,4 @@
-.demo-party {
+.demo-party .mdc-snackbar__surface {
   animation: demo-party 5000ms infinite;
 }