refactor(material-experimental/mdc-progress-spinner): remove MDC adapter usage (#24955)

Removes our usage of the MDC adapter from the MDC-based progress spinner component.

Author: crisbeto

src/material-experimental/mdc-progress-spinner/BUILD.bazel

@@ -26,7 +26,6 @@ ng_module(
         "//src/material/progress-spinner",
         "@npm//@angular/common",
         "@npm//@angular/core",
-        "@npm//@material/circular-progress",
     ],
 )
 

src/material-experimental/mdc-progress-spinner/progress-spinner.ts

@@ -7,21 +7,15 @@
  */
 
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   Inject,
   Input,
-  OnDestroy,
   Optional,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  MDCCircularProgressAdapter,
-  MDCCircularProgressFoundation,
-} from '@material/circular-progress';
 import {CanColor, mixinColor} from '@angular/material-experimental/mdc-core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {
@@ -61,6 +55,7 @@ const BASE_STROKE_WIDTH = 10;
     // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
     'tabindex': '-1',
     '[class._mat-animation-noopable]': `_noopAnimations`,
+    '[class.mdc-circular-progress--indeterminate]': 'mode === "indeterminate"',
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
     '[attr.aria-valuemin]': '0',
@@ -74,41 +69,13 @@ const BASE_STROKE_WIDTH = 10;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressSpinner
-  extends _MatProgressSpinnerBase
-  implements AfterViewInit, OnDestroy, CanColor
-{
+export class MatProgressSpinner extends _MatProgressSpinnerBase implements CanColor {
   /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
   _noopAnimations: boolean;
 
-  /** Implements all of the logic of the MDC circular progress. */
-  _foundation: MDCCircularProgressFoundation;
-
   /** The element of the determinate spinner. */
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
 
-  /** Adapter used by MDC to interact with the DOM. */
-  // TODO: switch to class when MDC removes object spread in foundation
-  // https://github.com/material-components/material-components-web/pull/6256
-  private _adapter: MDCCircularProgressAdapter = {
-    addClass: (className: string) => this._elementRef.nativeElement.classList.add(className),
-    hasClass: (className: string) => this._elementRef.nativeElement.classList.contains(className),
-    removeClass: (className: string) => this._elementRef.nativeElement.classList.remove(className),
-    removeAttribute: (name: string) => this._elementRef.nativeElement.removeAttribute(name),
-    setAttribute: (name, value) => {
-      if (name !== 'aria-valuenow') {
-        // MDC deals with values between 0 and 1 but Angular Material deals with values between
-        // 0 and 100 so the aria-valuenow should be set through the attr binding in the host
-        // instead of by the MDC adapter
-        this._elementRef.nativeElement.setAttribute(name, value);
-      }
-    },
-    getDeterminateCircleAttribute: (attributeName: string) =>
-      this._determinateCircle.nativeElement.getAttribute(attributeName),
-    setDeterminateCircleAttribute: (attributeName: string, value: string) =>
-      this._determinateCircle.nativeElement.setAttribute(attributeName, value),
-  };
-
   constructor(
     elementRef: ElementRef<HTMLElement>,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
@@ -134,65 +101,47 @@ export class MatProgressSpinner
     }
   }
 
-  private _mode: ProgressSpinnerMode =
-    this._elementRef.nativeElement.nodeName.toLowerCase() === 'mat-spinner'
-      ? 'indeterminate'
-      : 'determinate';
-
   /**
    * Mode of the progress bar.
    *
    * Input must be one of these values: determinate, indeterminate, buffer, query, defaults to
    * 'determinate'.
    * Mirrored to mode attribute.
    */
-  @Input()
-  get mode(): ProgressSpinnerMode {
-    return this._mode;
-  }
-
-  set mode(value: ProgressSpinnerMode) {
-    this._mode = value;
-    this._syncFoundation();
-  }
-
-  private _value = 0;
+  @Input() mode: ProgressSpinnerMode =
+    this._elementRef.nativeElement.nodeName.toLowerCase() === 'mat-spinner'
+      ? 'indeterminate'
+      : 'determinate';
 
   /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
   @Input()
   get value(): number {
     return this.mode === 'determinate' ? this._value : 0;
   }
-
   set value(v: NumberInput) {
     this._value = Math.max(0, Math.min(100, coerceNumberProperty(v)));
-    this._syncFoundation();
   }
-
-  private _diameter = BASE_SIZE;
+  private _value = 0;
 
   /** The diameter of the progress spinner (will set width and height of svg). */
   @Input()
   get diameter(): number {
     return this._diameter;
   }
-
   set diameter(size: NumberInput) {
     this._diameter = coerceNumberProperty(size);
-    this._syncFoundation();
   }
-
-  private _strokeWidth: number;
+  private _diameter = BASE_SIZE;
 
   /** Stroke width of the progress spinner. */
   @Input()
   get strokeWidth(): number {
     return this._strokeWidth ?? this.diameter / 10;
   }
-
   set strokeWidth(value: NumberInput) {
     this._strokeWidth = coerceNumberProperty(value);
   }
+  private _strokeWidth: number;
 
   /** The radius of the spinner, adjusted for stroke width. */
   _circleRadius(): number {
@@ -222,29 +171,6 @@ export class MatProgressSpinner
   _circleStrokeWidth() {
     return (this.strokeWidth / this.diameter) * 100;
   }
-
-  ngAfterViewInit() {
-    this._foundation = new MDCCircularProgressFoundation(this._adapter);
-    this._foundation.init();
-    this._syncFoundation();
-  }
-
-  ngOnDestroy() {
-    if (this._foundation) {
-      this._foundation.destroy();
-    }
-  }
-
-  /** Syncs the state of the progress spinner with the MDC foundation. */
-  private _syncFoundation() {
-    const foundation = this._foundation;
-
-    if (foundation) {
-      const mode = this.mode;
-      foundation.setProgress(this.value / 100);
-      foundation.setDeterminate(mode === 'determinate');
-    }
-  }
 }
 
 /**