build: use MDC components for MDC demos (#20946)

Uses MDC components whenever possible to implement the demos for other MDC components.

Author: crisbeto

src/dev-app/mdc-checkbox/BUILD.bazel

@@ -12,10 +12,10 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-checkbox",
-        "//src/material/core",
-        "//src/material/form-field",
-        "//src/material/input",
-        "//src/material/select",
+        "//src/material-experimental/mdc-core",
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+        "//src/material-experimental/mdc-select",
         "@npm//@angular/forms",
         "@npm//@angular/router",
     ],

src/dev-app/mdc-checkbox/mdc-checkbox-demo-module.ts

@@ -10,10 +10,10 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
-import {MatPseudoCheckboxModule} from '@angular/material/core';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatPseudoCheckboxModule} from '@angular/material-experimental/mdc-core';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {RouterModule} from '@angular/router';
 
 import {

src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts

@@ -9,7 +9,7 @@
 import {Component, Directive} from '@angular/core';
 import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {ThemePalette} from '@angular/material/core';
+import {ThemePalette} from '@angular/material-experimental/mdc-core';
 
 
 export interface Task {

src/dev-app/mdc-dialog/BUILD.bazel

@@ -10,13 +10,13 @@ ng_module(
         ":mdc_dialog_demo_scss",
     ],
     deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-card",
+        "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-dialog",
-        "//src/material/button",
-        "//src/material/card",
-        "//src/material/checkbox",
-        "//src/material/form-field",
-        "//src/material/input",
-        "//src/material/select",
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+        "//src/material-experimental/mdc-select",
         "@npm//@angular/router",
     ],
 )

src/dev-app/mdc-dialog/mdc-dialog-demo-module.ts

@@ -9,12 +9,12 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatDialogModule} from '@angular/material-experimental/mdc-dialog';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-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';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatCardModule} from '@angular/material-experimental/mdc-card';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {RouterModule} from '@angular/router';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './mdc-dialog-demo';
 

src/dev-app/mdc-dialog/mdc-dialog-demo.scss

@@ -1,8 +1,17 @@
 @import '../../material-experimental/mdc-dialog/dialog-legacy-padding';
 
 .demo-dialog-card {
-  max-width: 405px;
+  max-width: 600px;
   margin: 20px 0;
+
+  mat-form-field + mat-form-field {
+    margin-left: 16px;
+  }
+
+  [dir='rtl'] mat-form-field + mat-form-field {
+    margin-left: 0;
+    margin-right: 16px;
+  }
 }
 
 .demo-dialog-button {

src/dev-app/mdc-input/BUILD.bazel

@@ -11,15 +11,15 @@ ng_module(
     ],
     deps = [
         "//src/components-examples/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-autocomplete",
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-card",
+        "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-form-field",
         "//src/material-experimental/mdc-input",
-        "//src/material/autocomplete",
-        "//src/material/button",
+        "//src/material-experimental/mdc-tabs",
         "//src/material/button-toggle",
-        "//src/material/card",
-        "//src/material/checkbox",
         "//src/material/icon",
-        "//src/material/tabs",
         "//src/material/toolbar",
         "@npm//@angular/forms",
         "@npm//@angular/router",

src/dev-app/mdc-input/mdc-input-demo-module.ts

@@ -14,13 +14,13 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatInputModule} from '@angular/material-experimental/mdc-input';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import {MatButtonModule} from '@angular/material/button';
+import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatCardModule} from '@angular/material/card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatCardModule} from '@angular/material-experimental/mdc-card';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {RouterModule} from '@angular/router';
 import {MdcInputDemo} from './mdc-input-demo';

src/dev-app/mdc-input/mdc-input-demo.ts

@@ -12,7 +12,7 @@ import {
   FloatLabelType,
   MatFormFieldAppearance
 } from '@angular/material-experimental/mdc-form-field';
-import {ErrorStateMatcher, ThemePalette} from '@angular/material/core';
+import {ErrorStateMatcher, ThemePalette} from '@angular/material-experimental/mdc-core';
 
 let max = 5;
 

src/dev-app/mdc-menu/BUILD.bazel

@@ -10,8 +10,8 @@ ng_module(
         ":mdc_menu_demo_scss",
     ],
     deps = [
+        "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-menu",
-        "//src/material/button",
         "//src/material/divider",
         "//src/material/icon",
         "//src/material/toolbar",

src/dev-app/mdc-menu/mdc-menu-demo-module.ts

@@ -13,7 +13,7 @@ import {RouterModule} from '@angular/router';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatIconModule} from '@angular/material/icon';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatButtonModule} from '@angular/material/button';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MdcMenuDemo} from './mdc-menu-demo';
 
 @NgModule({

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material/core';
+import {ThemePalette} from '@angular/material-experimental/mdc-core';
 
 @Component({
   selector: 'mdc-progress-bar-demo',

src/dev-app/mdc-progress-spinner/BUILD.bazel

@@ -10,10 +10,10 @@ ng_module(
         ":mdc_progress_spinner_demo_scss",
     ],
     deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-progress-spinner",
-        "//src/material/button",
         "//src/material/button-toggle",
-        "//src/material/checkbox",
         "@npm//@angular/forms",
         "@npm//@angular/router",
     ],

src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts

@@ -10,8 +10,8 @@ import {NgModule} from '@angular/core';
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 import {RouterModule} from '@angular/router';
 import {MdcProgressSpinnerDemo} from './mdc-progress-spinner-demo';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {FormsModule} from '@angular/forms';
 

src/dev-app/mdc-radio/BUILD.bazel

@@ -10,9 +10,9 @@ ng_module(
         ":mdc_radio_demo_scss",
     ],
     deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-radio",
-        "//src/material/button",
-        "//src/material/checkbox",
         "@npm//@angular/forms",
         "@npm//@angular/router",
     ],

src/dev-app/mdc-radio/mdc-radio-demo-module.ts

@@ -11,8 +11,8 @@ import {MatRadioModule} from '@angular/material-experimental/mdc-radio';
 import {RouterModule} from '@angular/router';
 import {MdcRadioDemo} from './mdc-radio-demo';
 import {FormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
 import {CommonModule} from '@angular/common';
 
 @NgModule({

src/dev-app/mdc-select/mdc-select-demo.ts

@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
-import {ErrorStateMatcher, ThemePalette} from '@angular/material/core';
+import {ErrorStateMatcher, ThemePalette} from '@angular/material-experimental/mdc-core';
 import {MatSelectChange} from '@angular/material-experimental/mdc-select';
 import {FloatLabelType} from '@angular/material-experimental/mdc-form-field';
 

src/dev-app/mdc-slider/BUILD.bazel

@@ -10,7 +10,7 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-slider",
-        "//src/material/tabs",
+        "//src/material-experimental/mdc-tabs",
         "@npm//@angular/forms",
         "@npm//@angular/router",
     ],

src/dev-app/mdc-slider/mdc-slider-demo-module.ts

@@ -9,7 +9,7 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
 import {RouterModule} from '@angular/router';
 import {MdcSliderDemo} from './mdc-slider-demo';
 

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

@@ -12,12 +12,12 @@ ng_module(
     ],
     deps = [
         "//src/cdk/bidi",
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-checkbox",
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+        "//src/material-experimental/mdc-select",
         "//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",
     ],

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

@@ -12,11 +12,11 @@ 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';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 
 @NgModule({
   imports: [

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

@@ -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>