diff --git a/src/material-experimental/mdc-progress-spinner/BUILD.bazel b/src/material-experimental/mdc-progress-spinner/BUILD.bazel index 365fb9287c17..0deaa8b7eca1 100644 --- a/src/material-experimental/mdc-progress-spinner/BUILD.bazel +++ b/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", ], ) diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts index 18098042ed79..fa287fab4124 100644 --- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts +++ b/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; - /** 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, @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string, @@ -134,11 +101,6 @@ export class MatProgressSpinner } } - private _mode: ProgressSpinnerMode = - this._elementRef.nativeElement.nodeName.toLowerCase() === 'mat-spinner' - ? 'indeterminate' - : 'determinate'; - /** * Mode of the progress bar. * @@ -146,53 +108,40 @@ export class MatProgressSpinner * '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'); - } - } } /**