prototype(progress-spinner): create prototype progress-spinner based on MDC Web (#20048)

* add files for MDC-based MatProgressSpinner

* add demo of mdc-based MatProgressSpinner at localhost:4200/mdc-progress-spinner

* copy MDC DOM and add MDC styles

* set up MDC foundation for MDC-based MatProgressSpinner

* (wip) add adapter and fill in API

* copy over existing demo to MDC-based demo

* serverside rendering, refactor

* add tests (adapter class wip)

* remove separate class for MatSpinner

* add e2e tests

* add harness

* add user documantation README

* add codeowner, theme dep

* address CI failures

* export MatSpinner as const to avoid build error

* fix missing e2e import

* fix nits

* remove changes to _all-themes to keep PR merge-safe (add back in followup)

(cherry picked from commit 294b8ee)

Author: annieyw

.github/CODEOWNERS

@@ -177,6 +177,7 @@
 /src/dev-app/mdc-list/**                           @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
 /src/dev-app/mdc-progress-bar/**                   @crisbeto
+/src/dev-app/mdc-progress-spinner/**               @annieyw @mmalerba
 /src/dev-app/mdc-radio/**                          @mmalerba
 /src/dev-app/mdc-snack-bar/**                      @andrewseguin
 /src/dev-app/mdc-sidenav/**                        @crisbeto
@@ -235,6 +236,7 @@
 /src/e2e-app/mdc-input/**                          @devversion
 /src/e2e-app/mdc-menu/**                           @crisbeto
 /src/e2e-app/mdc-progress-bar/**                   @crisbeto
+/src/e2e-app/mdc-progress-spinner/**               @annieyw @mmalerba
 /src/e2e-app/mdc-radio/**                          @mmalerba
 /src/e2e-app/mdc-slider/**                         @andrewseguin
 /src/e2e-app/mdc-slide-toggle/**                   @crisbeto

rollup-globals.bzl

@@ -41,6 +41,7 @@ ROLLUP_GLOBALS = {
     "@material/auto-init": "mdc.autoInit",
     "@material/base": "mdc.base",
     "@material/checkbox": "mdc.checkbox",
+    "@material/circular-progress": "mdc.circularProgress",
     "@material/chips": "mdc.chips",
     "@material/dialog": "mdc.dialog",
     "@material/dom": "mdc.dom",

src/dev-app/BUILD.bazel

@@ -54,6 +54,7 @@ ng_module(
         "//src/dev-app/mdc-list",
         "//src/dev-app/mdc-menu",
         "//src/dev-app/mdc-progress-bar",
+        "//src/dev-app/mdc-progress-spinner",
         "//src/dev-app/mdc-radio",
         "//src/dev-app/mdc-sidenav",
         "//src/dev-app/mdc-slide-toggle",
@@ -129,6 +130,7 @@ filegroup(
         "@npm//:node_modules/@material/base/dist/mdc.base.js",
         "@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
         "@npm//:node_modules/@material/chips/dist/mdc.chips.js",
+        "@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
         "@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
         "@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
         "@npm//:node_modules/@material/dom/dist/mdc.dom.js",

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

@@ -82,6 +82,7 @@ export class DevAppLayout {
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
+    {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'MDC Sidenav', route: '/mdc-sidenav'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},

src/dev-app/dev-app/routes.ts

@@ -79,6 +79,11 @@ export const DEV_APP_ROUTES: Routes = [
   {path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
   {path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
+  {
+    path: 'mdc-progress-spinner',
+    loadChildren:
+      'mdc-progress-spinner/mdc-progress-spinner-demo-module#MdcProgressSpinnerDemoModule'
+  },
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
   {path: 'mdc-sidenav', loadChildren: 'mdc-sidenav/mdc-sidenav-demo-module#MdcSidenavDemoModule'},
   {

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

@@ -0,0 +1,25 @@
+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-experimental/mdc-progress-spinner",
+        "//src/material/button",
+        "//src/material/button-toggle",
+        "//src/material/checkbox",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_progress_spinner_demo_scss",
+    src = "mdc-progress-spinner-demo.scss",
+)

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+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 {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {FormsModule} from '@angular/forms';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatCheckboxModule,
+    MatButtonToggleModule,
+    FormsModule,
+    MatProgressSpinnerModule,
+    RouterModule.forChild([{path: '', component: MdcProgressSpinnerDemo}]),
+  ],
+  declarations: [MdcProgressSpinnerDemo],
+})
+export class MdcProgressSpinnerDemoModule {}

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

@@ -0,0 +1,32 @@
+<h1>Determinate</h1>
+
+<div class="demo-progress-spinner-controls">
+  <p>Value: {{progressValue}}</p>
+  <button mat-raised-button (click)="step(10)">Increase</button>
+  <button mat-raised-button (click)="step(-10)">Decrease</button>
+  <mat-checkbox [(ngModel)]="isDeterminate">Is determinate</mat-checkbox>
+</div>
+
+<div class="demo-progress-spinner">
+  <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
+                        [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>
+  <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
+                        [value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
+</div>
+
+<h1>Indeterminate</h1>
+
+<mat-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
+  <mat-button-toggle value="primary">Primary Color</mat-button-toggle>
+  <mat-button-toggle value="accent">Accent Color</mat-button-toggle>
+  <mat-button-toggle value="warn">Warn Color</mat-button-toggle>
+</mat-button-toggle-group>
+
+<div class="demo-progress-spinner">
+  <mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
+  <mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
+  <mat-spinner [color]="color"></mat-spinner>
+</div>
+

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
+
+
+@Component({
+  selector: 'mdc-progress-spinner-demo',
+  templateUrl: 'mdc-progress-spinner-demo.html',
+  styleUrls: ['mdc-progress-spinner-demo.css'],
+})
+export class MdcProgressSpinnerDemo {
+  progressValue = 60;
+  color: ThemePalette = 'primary';
+  isDeterminate = true;
+
+  step(val: number) {
+    this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
+  }
+}