diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 02146199b117..107b7469405c 100644
--- a/.github/CODEOWNERS
+++ b/.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
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index 86a37edbb026..eaa783769cba 100644
--- a/src/dev-app/BUILD.bazel
+++ b/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",
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index 451c5e78a192..82ff96452bd9 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/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'},
diff --git a/src/dev-app/legacy-progress-spinner/BUILD.bazel b/src/dev-app/legacy-progress-spinner/BUILD.bazel
new file mode 100644
index 000000000000..971076383e1e
--- /dev/null
+++ b/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",
+)
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html b/src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.html
similarity index 77%
rename from src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
rename to src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.html
index 9d2f05fc1f53..eedb490dd4d1 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
+++ b/src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.html
@@ -9,11 +9,11 @@ Determinate
+ [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16">
+ [value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32">
+ [value]="progressValue" color="primary" [diameter]="50">
Indeterminate
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss b/src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.scss
similarity index 72%
rename from src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
rename to src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.scss
index d0dec7c4d5ab..c17e2dfe23a0 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
+++ b/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 {
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts b/src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.ts
similarity index 57%
rename from src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts
rename to src/dev-app/legacy-progress-spinner/legacy-progress-spinner-demo.ts
index ca2d33c0e7d6..8d929850bae5 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts
+++ b/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;
diff --git a/src/dev-app/mdc-progress-spinner/BUILD.bazel b/src/dev-app/mdc-progress-spinner/BUILD.bazel
deleted file mode 100644
index 1403117fff4c..000000000000
--- a/src/dev-app/mdc-progress-spinner/BUILD.bazel
+++ /dev/null
@@ -1,24 +0,0 @@
-load("//tools:defaults.bzl", "ng_module", "sass_binary")
-
-package(default_visibility = ["//visibility:public"])
-
-ng_module(
- name = "mdc-progress-spinner",
- srcs = glob(["**/*.ts"]),
- assets = [
- "mdc-progress-spinner-demo.html",
- ":mdc_progress_spinner_demo_scss",
- ],
- deps = [
- "//src/material/button",
- "//src/material/button-toggle",
- "//src/material/checkbox",
- "//src/material/progress-spinner",
- "@npm//@angular/forms",
- ],
-)
-
-sass_binary(
- name = "mdc_progress_spinner_demo_scss",
- src = "mdc-progress-spinner-demo.scss",
-)
diff --git a/src/dev-app/progress-spinner/BUILD.bazel b/src/dev-app/progress-spinner/BUILD.bazel
index d0dfdcaebeb4..5d84aa093181 100644
--- a/src/dev-app/progress-spinner/BUILD.bazel
+++ b/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",
],
)
diff --git a/src/dev-app/progress-spinner/progress-spinner-demo.html b/src/dev-app/progress-spinner/progress-spinner-demo.html
index eedb490dd4d1..9d2f05fc1f53 100644
--- a/src/dev-app/progress-spinner/progress-spinner-demo.html
+++ b/src/dev-app/progress-spinner/progress-spinner-demo.html
@@ -9,11 +9,11 @@ Determinate
+ [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16">
+ [value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32">
+ [value]="progressValue" color="primary" [diameter]="50">
Indeterminate
diff --git a/src/dev-app/progress-spinner/progress-spinner-demo.scss b/src/dev-app/progress-spinner/progress-spinner-demo.scss
index c17e2dfe23a0..d0dec7c4d5ab 100644
--- a/src/dev-app/progress-spinner/progress-spinner-demo.scss
+++ b/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 {
diff --git a/src/dev-app/progress-spinner/progress-spinner-demo.ts b/src/dev-app/progress-spinner/progress-spinner-demo.ts
index b208b4de37d4..ddaae77f3745 100644
--- a/src/dev-app/progress-spinner/progress-spinner-demo.ts
+++ b/src/dev-app/progress-spinner/progress-spinner-demo.ts
@@ -8,11 +8,11 @@
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',
@@ -20,11 +20,11 @@ import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-
styleUrls: ['progress-spinner-demo.css'],
standalone: true,
imports: [
- FormsModule,
- MatLegacyButtonModule,
+ MatButtonModule,
+ MatCheckboxModule,
MatButtonToggleModule,
- MatLegacyCheckboxModule,
- MatLegacyProgressSpinnerModule,
+ FormsModule,
+ MatProgressSpinnerModule,
],
})
export class ProgressSpinnerDemo {
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
index f1758945fea9..d820dfd51efb 100644
--- a/src/dev-app/routes.ts
+++ b/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,
),
},
{