build: switch remaining dev app demos to MDC

.github/CODEOWNERS

@@ -153,6 +153,7 @@
 /src/dev-app/autocomplete/**                                @crisbeto
 /src/dev-app/badge/**                                       @andrewseguin
 /src/dev-app/baseline/**                                    @mmalerba
+/src/dev-app/legacy-baseline/**                             @mmalerba
 /src/dev-app/bottom-sheet/**                                @andrewseguin @crisbeto
 /src/dev-app/button-toggle/**                               @andrewseguin
 /src/dev-app/button/**                                      @andrewseguin

src/components-examples/material/core/ripple-overview/ripple-overview-example.html

@@ -3,10 +3,12 @@
 <mat-checkbox [(ngModel)]="unbounded" class="example-ripple-checkbox">Unbounded</mat-checkbox>
 
 <mat-form-field class="example-ripple-form-field" appearance="fill">
-  <input matInput [(ngModel)]="radius" type="number" placeholder="Radius">
+  <mat-label>Radius</mat-label>
+  <input matInput [(ngModel)]="radius" type="number">
 </mat-form-field>
 <mat-form-field class="example-ripple-form-field" appearance="fill">
-  <input matInput [(ngModel)]="color" type="text" placeholder="Color">
+  <mat-label>Color</mat-label>
+  <input matInput [(ngModel)]="color" type="text">
 </mat-form-field>
 
 

src/dev-app/BUILD.bazel

@@ -48,6 +48,7 @@ ng_module(
         "//src/dev-app/input-modality",
         "//src/dev-app/layout",
         "//src/dev-app/legacy-autocomplete",
+        "//src/dev-app/legacy-baseline",
         "//src/dev-app/legacy-button",
         "//src/dev-app/legacy-card",
         "//src/dev-app/legacy-checkbox",

src/dev-app/badge/BUILD.bazel

@@ -11,8 +11,8 @@ ng_module(
     ],
     deps = [
         "//src/material/badge",
+        "//src/material/button",
         "//src/material/icon",
-        "//src/material/legacy-button",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/badge/badge-demo.ts

@@ -10,15 +10,15 @@ import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule} from '@angular/material/badge';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'badge-demo',
   templateUrl: 'badge-demo.html',
   styleUrls: ['badge-demo.css'],
   standalone: true,
-  imports: [CommonModule, FormsModule, MatBadgeModule, MatLegacyButtonModule, MatIconModule],
+  imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
 })
 export class BadgeDemo {
   visible = true;

src/dev-app/baseline/BUILD.bazel

@@ -10,12 +10,12 @@ ng_module(
         ":baseline_demo_scss",
     ],
     deps = [
-        "//src/material/legacy-card",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-radio",
-        "//src/material/legacy-select",
+        "//src/material/card",
+        "//src/material/checkbox",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/radio",
+        "//src/material/select",
         "//src/material/toolbar",
     ],
 )

src/dev-app/baseline/baseline-demo.scss

@@ -2,7 +2,7 @@
   padding: 0;
 }
 
-.demo-basic .mat-card-content {
+.demo-basic .mat-mdc-card-content {
   padding: 16px;
 }
 

src/dev-app/baseline/baseline-demo.ts

@@ -8,12 +8,12 @@
 
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+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 {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
 import {MatToolbarModule} from '@angular/material/toolbar';
 
 @Component({
@@ -23,12 +23,12 @@ import {MatToolbarModule} from '@angular/material/toolbar';
   standalone: true,
   imports: [
     CommonModule,
-    MatLegacyCardModule,
-    MatLegacyCheckboxModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
-    MatLegacyRadioModule,
-    MatLegacySelectModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
     MatToolbarModule,
   ],
 })

src/dev-app/bottom-sheet/BUILD.bazel

@@ -11,14 +11,14 @@ ng_module(
     ],
     deps = [
         "//src/material/bottom-sheet",
+        "//src/material/button",
+        "//src/material/card",
+        "//src/material/checkbox",
+        "//src/material/form-field",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-card",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-list",
-        "//src/material/legacy-select",
+        "//src/material/input",
+        "//src/material/list",
+        "//src/material/select",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/bottom-sheet/bottom-sheet-demo.html

@@ -37,9 +37,9 @@ <h2>Options</h2>
 <ng-template let-bottomSheetRef="bottomSheetRef">
   <mat-nav-list>
     <mat-list-item (click)="bottomSheetRef.dismiss()" *ngFor="let action of [1, 2, 3]">
-      <mat-icon mat-list-icon>folder</mat-icon>
-      <span mat-line>Action {{ action }}</span>
-      <span mat-line>Description</span>
+      <mat-icon matListItemIcon>folder</mat-icon>
+      <span matListItemTitle>Action {{ action }}</span>
+      <span matLine>Description</span>
     </mat-list-item>
   </mat-nav-list>
 </ng-template>

src/dev-app/bottom-sheet/bottom-sheet-demo.scss

@@ -3,6 +3,6 @@
   margin: 20px 0;
 }
 
-.mat-raised-button {
+.mat-mdc-raised-button {
   margin-right: 5px;
 }

src/dev-app/bottom-sheet/bottom-sheet-demo.ts

@@ -15,14 +15,14 @@ import {
   MatBottomSheetModule,
   MatBottomSheetRef,
 } from '@angular/material/bottom-sheet';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+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 {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyListModule} from '@angular/material/legacy-list';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
+import {MatSelectModule} from '@angular/material/select';
 
 const defaultConfig = new MatBottomSheetConfig();
 
@@ -35,14 +35,14 @@ const defaultConfig = new MatBottomSheetConfig();
     CommonModule,
     FormsModule,
     MatBottomSheetModule,
-    MatLegacyButtonModule,
-    MatLegacyCardModule,
-    MatLegacyCheckboxModule,
-    MatLegacyFormFieldModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
-    MatLegacyListModule,
+    MatInputModule,
+    MatSelectModule,
+    MatListModule,
   ],
 })
 export class BottomSheetDemo {
@@ -71,13 +71,13 @@ export class BottomSheetDemo {
   template: `
     <mat-nav-list>
       <a href="#" mat-list-item (click)="handleClick($event)" *ngFor="let action of [1, 2, 3]">
-        <span mat-line>Action {{ action }}</span>
-        <span mat-line>Description</span>
+        <span matListItemTitle>Action {{ action }}</span>
+        <span matListItemLine>Description</span>
       </a>
     </mat-nav-list>
   `,
   standalone: true,
-  imports: [CommonModule, MatLegacyListModule],
+  imports: [CommonModule, MatListModule],
 })
 export class ExampleBottomSheet {
   constructor(private _bottomSheet: MatBottomSheetRef) {}

src/dev-app/button-toggle/BUILD.bazel

@@ -11,8 +11,8 @@ ng_module(
     ],
     deps = [
         "//src/material/button-toggle",
+        "//src/material/checkbox",
         "//src/material/icon",
-        "//src/material/legacy-checkbox",
     ],
 )
 

src/dev-app/button-toggle/button-toggle-demo.ts

@@ -10,21 +10,15 @@ import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'button-toggle-demo',
   templateUrl: 'button-toggle-demo.html',
   styleUrls: ['button-toggle-demo.css'],
   standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonToggleModule,
-    MatLegacyCheckboxModule,
-    MatIconModule,
-  ],
+  imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
 })
 export class ButtonToggleDemo {
   isVertical = false;

src/dev-app/checkbox/BUILD.bazel

@@ -11,10 +11,10 @@ ng_module(
         ":checkbox_demo_scss",
     ],
     deps = [
+        "//src/material/checkbox",
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
-        "//src/material/legacy-checkbox",
         "//src/material/select",
         "@npm//@angular/forms",
     ],

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

@@ -7,10 +7,7 @@
  */
 
 import {Component, Directive} from '@angular/core';
-import {
-  MatLegacyCheckboxModule,
-  MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS,
-} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule, MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
@@ -26,14 +23,14 @@ export interface Task {
 
 @Directive({
   selector: '[clickActionNoop]',
-  providers: [{provide: MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}],
+  providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}],
   standalone: true,
 })
 export class ClickActionNoop {}
 
 @Directive({
   selector: '[clickActionCheck]',
-  providers: [{provide: MAT_LEGACY_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}],
+  providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}],
   standalone: true,
 })
 export class ClickActionCheck {}
@@ -56,7 +53,7 @@ export class AnimationsNoop {}
   ],
   templateUrl: 'nested-checklist.html',
   standalone: true,
-  imports: [CommonModule, MatLegacyCheckboxModule, FormsModule],
+  imports: [CommonModule, MatCheckboxModule, FormsModule],
 })
 export class MatCheckboxDemoNestedChecklist {
   tasks: Task[] = [
@@ -110,7 +107,7 @@ export class MatCheckboxDemoNestedChecklist {
   imports: [
     CommonModule,
     FormsModule,
-    MatLegacyCheckboxModule,
+    MatCheckboxModule,
     MatInputModule,
     MatSelectModule,
     MatPseudoCheckboxModule,

src/dev-app/connected-overlay/BUILD.bazel

@@ -14,9 +14,9 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/portal",
         "//src/components-examples/cdk/overlay",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-radio",
+        "//src/material/button",
+        "//src/material/checkbox",
+        "//src/material/radio",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/connected-overlay/connected-overlay-demo.scss

@@ -6,7 +6,7 @@
     margin: 16px;
   }
 
-  .mat-radio-button {
+  .mat-mdc-radio-button {
     display: block;
     margin-bottom: 5px;
   }

src/dev-app/connected-overlay/connected-overlay-demo.ts

@@ -26,9 +26,9 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRadioModule} from '@angular/material/radio';
 
 @Component({
   selector: 'overlay-demo',
@@ -40,9 +40,9 @@ import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
     CdkOverlayExamplesModule,
     CommonModule,
     FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
-    MatLegacyRadioModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatRadioModule,
     OverlayModule,
   ],
 })