docs(material/progress-spinner): switch examples to MDC

.github/CODEOWNERS

@@ -202,7 +202,7 @@
 /src/dev-app/legacy-button/**                               @andrewseguin
 /src/dev-app/mdc-chips/**                                   @mmalerba
 /src/dev-app/legacy-progress-bar/**                         @crisbeto
-/src/dev-app/mdc-progress-spinner/**                        @mmalerba
+/src/dev-app/legacy-progress-spinner/**                     @mmalerba
 /src/dev-app/mdc-slide-toggle/**                            @crisbeto
 /src/dev-app/legacy-slider/**                               @devversion
 /src/dev-app/mdc-snack-bar/**                               @andrewseguin

src/dev-app/BUILD.bazel

@@ -56,6 +56,7 @@ ng_module(
         "//src/dev-app/legacy-menu",
         "//src/dev-app/legacy-paginator",
         "//src/dev-app/legacy-progress-bar",
+        "//src/dev-app/legacy-progress-spinner",
         "//src/dev-app/legacy-radio",
         "//src/dev-app/legacy-select",
         "//src/dev-app/legacy-slider",
@@ -66,7 +67,6 @@ ng_module(
         "//src/dev-app/live-announcer",
         "//src/dev-app/mdc-autocomplete",
         "//src/dev-app/mdc-chips",
-        "//src/dev-app/mdc-progress-spinner",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",

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

@@ -106,7 +106,6 @@ export class DevAppLayout {
     {name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
-    {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'Legacy Button', route: '/legacy-button'},
@@ -118,6 +117,7 @@ export class DevAppLayout {
     {name: 'Legacy Menu', route: '/legacy-menu'},
     {name: 'Legacy Paginator', route: '/legacy-paginator'},
     {name: 'Legacy Progress Bar', route: '/legacy-progress-bar'},
+    {name: 'Legacy Progress Spinner', route: '/legacy-progress-spinner'},
     {name: 'Legacy Radio', route: '/legacy-radio'},
     {name: 'Legacy Select', route: '/legacy-select'},
     {name: 'Legacy Slider', route: '/legacy-slider'},

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

@@ -0,0 +1,24 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-progress-spinner",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "legacy-progress-spinner-demo.html",
+        ":legacy_progress_spinner_demo_scss",
+    ],
+    deps = [
+        "//src/material/button-toggle",
+        "//src/material/legacy-button",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-progress-spinner",
+        "@npm//@angular/forms",
+    ],
+)
+
+sass_binary(
+    name = "legacy_progress_spinner_demo_scss",
+    src = "legacy-progress-spinner-demo.scss",
+)

src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html → src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.html

@@ -9,11 +9,11 @@ <h1>Determinate</h1>
 
 <div class="demo-progress-spinner">
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-                        [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
+      [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-                        [value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
+      [value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-                        [value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
+      [value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
 </div>
 
 <h1>Indeterminate</h1>

src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss → src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.scss

@@ -1,10 +1,11 @@
 .demo-progress-spinner {
   width: 100%;
 
-  .mat-mdc-progress-spinner,
-  .mat-mdc-spinner {
+  .mat-progress-spinner,
+  .mat-spinner {
     display: inline-block;
   }
+
 }
 
 .demo-progress-spinner-controls {

src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts → src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.ts

@@ -8,26 +8,26 @@
 
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {FormsModule} from '@angular/forms';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
 
 @Component({
-  selector: 'mdc-progress-spinner-demo',
-  templateUrl: 'mdc-progress-spinner-demo.html',
-  styleUrls: ['mdc-progress-spinner-demo.css'],
+  selector: 'legacy-progress-spinner-demo',
+  templateUrl: 'legacy-progress-spinner-demo.html',
+  styleUrls: ['legacy-progress-spinner-demo.css'],
   standalone: true,
   imports: [
-    MatButtonModule,
-    MatCheckboxModule,
-    MatButtonToggleModule,
     FormsModule,
-    MatProgressSpinnerModule,
+    MatLegacyButtonModule,
+    MatButtonToggleModule,
+    MatLegacyCheckboxModule,
+    MatLegacyProgressSpinnerModule,
   ],
 })
-export class MdcProgressSpinnerDemo {
+export class LegacyProgressSpinnerDemo {
   progressValue = 60;
   color: ThemePalette = 'primary';
   isDeterminate = true;

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

@@ -10,10 +10,10 @@ ng_module(
         ":progress_spinner_demo_scss",
     ],
     deps = [
+        "//src/material/button",
         "//src/material/button-toggle",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-progress-spinner",
+        "//src/material/checkbox",
+        "//src/material/progress-spinner",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/progress-spinner/progress-spinner-demo.html

@@ -9,11 +9,11 @@ <h1>Determinate</h1>
 
 <div class="demo-progress-spinner">
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-      [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
+                        [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-      [value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
+                        [value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-      [value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
+                        [value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
 </div>
 
 <h1>Indeterminate</h1>

src/dev-app/progress-spinner/progress-spinner-demo.scss

@@ -1,11 +1,10 @@
 .demo-progress-spinner {
   width: 100%;
 
-  .mat-progress-spinner,
-  .mat-spinner {
+  .mat-mdc-progress-spinner,
+  .mat-mdc-spinner {
     display: inline-block;
   }
-
 }
 
 .demo-progress-spinner-controls {

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

@@ -8,23 +8,23 @@
 
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
-import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'progress-spinner-demo',
   templateUrl: 'progress-spinner-demo.html',
   styleUrls: ['progress-spinner-demo.css'],
   standalone: true,
   imports: [
-    FormsModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
+    MatCheckboxModule,
     MatButtonToggleModule,
-    MatLegacyCheckboxModule,
-    MatLegacyProgressSpinnerModule,
+    FormsModule,
+    MatProgressSpinnerModule,
   ],
 })
 export class ProgressSpinnerDemo {

src/dev-app/routes.ts

@@ -189,10 +189,10 @@ export const DEV_APP_ROUTES: Routes = [
       import('./legacy-paginator/legacy-paginator-demo').then(m => m.LegacyPaginatorDemo),
   },
   {
-    path: 'mdc-progress-spinner',
+    path: 'legacy-progress-spinner',
     loadComponent: () =>
-      import('./mdc-progress-spinner/mdc-progress-spinner-demo').then(
-        m => m.MdcProgressSpinnerDemo,
+      import('./legacy-progress-spinner/legacy-progress-spinner-demo').then(
+        m => m.LegacyProgressSpinnerDemo,
       ),
   },
   {