docs(material/progress-bar): switch examples to MDC (#25629)

Author: andrewseguin

.github/CODEOWNERS

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

src/dev-app/BUILD.bazel

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

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

@@ -117,6 +117,7 @@ export class DevAppLayout {
     {name: 'Legacy List', route: '/legacy-list'},
     {name: 'Legacy Menu', route: '/legacy-menu'},
     {name: 'Legacy Paginator', route: '/legacy-paginator'},
+    {name: 'Legacy Progress Bar', route: '/legacy-progress-bar'},
     {name: 'Legacy Radio', route: '/legacy-radio'},
     {name: 'Legacy Select', route: '/legacy-select'},
     {name: 'Legacy Slider', route: '/legacy-slider'},

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

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

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

@@ -8,26 +8,21 @@
 
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
-import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+
+// TODO(josephperrott): Add an automatically filling example progress bar.
 
 @Component({
-  selector: 'mdc-progress-bar-demo',
-  templateUrl: 'mdc-progress-bar-demo.html',
-  styleUrls: ['mdc-progress-bar-demo.css'],
+  selector: 'legacy-progress-bar-demo',
+  templateUrl: 'legacy-progress-bar-demo.html',
+  styleUrls: ['legacy-progress-bar-demo.css'],
   standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatProgressBarModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-  ],
+  imports: [FormsModule, MatLegacyButtonModule, MatButtonToggleModule, MatLegacyProgressBarModule],
 })
-export class MdcProgressBarDemo {
+export class LegacyProgressBarDemo {
   color: ThemePalette = 'primary';
   determinateProgressValue: number = 30;
   determinateAnimationEndValue: number;

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

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

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

@@ -8,19 +8,24 @@
 
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
+import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
-
-// TODO(josephperrott): Add an automatically filling example progress bar.
 
 @Component({
   selector: 'progress-bar-demo',
   templateUrl: 'progress-bar-demo.html',
   styleUrls: ['progress-bar-demo.css'],
   standalone: true,
-  imports: [FormsModule, MatLegacyButtonModule, MatButtonToggleModule, MatLegacyProgressBarModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+  ],
 })
 export class ProgressBarDemo {
   color: ThemePalette = 'primary';

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

@@ -160,9 +160,8 @@ export const DEV_APP_ROUTES: Routes = [
       import('./legacy-checkbox/legacy-checkbox-demo').then(m => m.LegacyCheckboxDemo),
   },
   {
-    path: 'mdc-progress-bar',
-    loadComponent: () =>
-      import('./mdc-progress-bar/mdc-progress-bar-demo').then(m => m.MdcProgressBarDemo),
+    path: 'progress-bar',
+    loadComponent: () => import('./progress-bar/progress-bar-demo').then(m => m.ProgressBarDemo),
   },
   {
     path: 'mdc-chips',
@@ -251,8 +250,9 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./portal/portal-demo').then(m => m.PortalDemo),
   },
   {
-    path: 'progress-bar',
-    loadComponent: () => import('./progress-bar/progress-bar-demo').then(m => m.ProgressBarDemo),
+    path: 'legacy-progress-bar',
+    loadComponent: () =>
+      import('./legacy-progress-bar/legacy-progress-bar-demo').then(m => m.LegacyProgressBarDemo),
   },
   {
     path: 'progress-spinner',