diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts index 13a4f4ace329..bb5109de6d93 100644 --- a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts +++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts @@ -24,6 +24,7 @@ describe('MDC-based MatProgressSpinner', () => { ProgressSpinnerWithStringValues, IndeterminateSpinnerInShadowDom, IndeterminateSpinnerInShadowDomWithNgIf, + SpinnerWithMode, ], }).compileComponents(); }), @@ -397,6 +398,14 @@ describe('MDC-based MatProgressSpinner', () => { expect(children.length).toBeGreaterThan(0); expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true); }); + + it('should be able to change the mode on a mat-spinner', () => { + const fixture = TestBed.createComponent(SpinnerWithMode); + fixture.detectChanges(); + + const progressElement = fixture.debugElement.query(By.css('mat-spinner')).nativeElement; + expect(progressElement.getAttribute('mode')).toBe('determinate'); + }); }); @Component({template: ''}) @@ -470,3 +479,6 @@ class IndeterminateSpinnerInShadowDomWithNgIf { diameter: number; } + +@Component({template: ''}) +class SpinnerWithMode {} diff --git a/src/material/progress-spinner/progress-spinner-module.ts b/src/material/progress-spinner/progress-spinner-module.ts index 50e2fddd90ef..ad512e4d384e 100644 --- a/src/material/progress-spinner/progress-spinner-module.ts +++ b/src/material/progress-spinner/progress-spinner-module.ts @@ -8,11 +8,11 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {MatCommonModule} from '@angular/material/core'; -import {MatProgressSpinner, MatSpinner} from './progress-spinner'; +import {MatProgressSpinner} from './progress-spinner'; @NgModule({ imports: [MatCommonModule, CommonModule], - exports: [MatProgressSpinner, MatSpinner, MatCommonModule], - declarations: [MatProgressSpinner, MatSpinner], + exports: [MatProgressSpinner, MatCommonModule], + declarations: [MatProgressSpinner], }) export class MatProgressSpinnerModule {} diff --git a/src/material/progress-spinner/progress-spinner.spec.ts b/src/material/progress-spinner/progress-spinner.spec.ts index 55ad308468ae..db4d6c8d2f01 100644 --- a/src/material/progress-spinner/progress-spinner.spec.ts +++ b/src/material/progress-spinner/progress-spinner.spec.ts @@ -26,6 +26,7 @@ describe('MatProgressSpinner', () => { ProgressSpinnerWithStringValues, IndeterminateSpinnerInShadowDom, IndeterminateSpinnerInShadowDomWithNgIf, + SpinnerWithMode, ], }).compileComponents(); }), @@ -540,6 +541,14 @@ describe('MatProgressSpinner', () => { expect(children.length).toBeGreaterThan(0); expect(children.every(child => child.getAttribute('aria-hidden') === 'true')).toBe(true); }); + + it('should be able to change the mode on a mat-spinner', () => { + const fixture = TestBed.createComponent(SpinnerWithMode); + fixture.detectChanges(); + + const progressElement = fixture.debugElement.query(By.css('mat-spinner')).nativeElement; + expect(progressElement.getAttribute('mode')).toBe('determinate'); + }); }); @Component({template: ''}) @@ -616,3 +625,6 @@ class IndeterminateSpinnerInShadowDomWithNgIf { diameter: number; } + +@Component({template: ''}) +class SpinnerWithMode {} diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts index 08367c7ac693..742da41469d6 100644 --- a/src/material/progress-spinner/progress-spinner.ts +++ b/src/material/progress-spinner/progress-spinner.ts @@ -111,11 +111,12 @@ const INDETERMINATE_ANIMATION_TEMPLATE = ` * `` component. */ @Component({ - selector: 'mat-progress-spinner', + selector: 'mat-progress-spinner, mat-spinner', exportAs: 'matProgressSpinner', host: { 'role': 'progressbar', - 'class': 'mat-progress-spinner', + // `mat-spinner` is here for backward compatibility. + 'class': 'mat-progress-spinner mat-spinner', // set tab index to -1 so screen readers will read the aria-label // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox 'tabindex': '-1', @@ -229,6 +230,10 @@ export class MatProgressSpinner this._noopAnimations = animationMode === 'NoopAnimations' && !!defaults && !defaults._forceAnimations; + if (elementRef.nativeElement.nodeName.toLowerCase() === 'mat-spinner') { + this.mode = 'indeterminate'; + } + if (defaults) { if (defaults.color) { this.color = this.defaultColor = defaults.color; @@ -356,56 +361,3 @@ export class MatProgressSpinner return this.diameter.toString().replace('.', '_'); } } - -/** - * `` component. - * - * This is a component definition to be used as a convenience reference to create an - * indeterminate `` instance. - */ -@Component({ - selector: 'mat-spinner', - host: { - 'role': 'progressbar', - 'mode': 'indeterminate', - 'class': 'mat-spinner mat-progress-spinner', - '[class._mat-animation-noopable]': `_noopAnimations`, - '[style.width.px]': 'diameter', - '[style.height.px]': 'diameter', - }, - inputs: ['color'], - templateUrl: 'progress-spinner.html', - styleUrls: ['progress-spinner.css'], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, -}) -export class MatSpinner extends MatProgressSpinner { - constructor( - elementRef: ElementRef, - platform: Platform, - @Optional() @Inject(DOCUMENT) document: any, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string, - @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS) - defaults?: MatProgressSpinnerDefaultOptions, - /** - * @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone` - * parameters to become required. - * @breaking-change 14.0.0 - */ - changeDetectorRef?: ChangeDetectorRef, - viewportRuler?: ViewportRuler, - ngZone?: NgZone, - ) { - super( - elementRef, - platform, - document, - animationMode, - defaults, - changeDetectorRef, - viewportRuler, - ngZone, - ); - this.mode = 'indeterminate'; - } -} diff --git a/src/material/progress-spinner/public-api.ts b/src/material/progress-spinner/public-api.ts index b67d2c313a1b..71ebfc725c82 100644 --- a/src/material/progress-spinner/public-api.ts +++ b/src/material/progress-spinner/public-api.ts @@ -6,12 +6,21 @@ * found in the LICENSE file at https://angular.io/license */ +import {MatProgressSpinner} from './progress-spinner'; + export * from './progress-spinner-module'; export { MatProgressSpinner, - MatSpinner, MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS, ProgressSpinnerMode, MatProgressSpinnerDefaultOptions, MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, } from './progress-spinner'; + +/** + * @deprecated Import `MatProgressSpinner` instead. Note that the + * `mat-spinner` selector isn't deprecated. + * @breaking-change 8.0.0 + */ +// tslint:disable-next-line:variable-name +export const MatSpinner = MatProgressSpinner; diff --git a/tools/public_api_guard/material/progress-spinner.md b/tools/public_api_guard/material/progress-spinner.md index 91edb5c3c9fc..c2fefd4486d0 100644 --- a/tools/public_api_guard/material/progress-spinner.md +++ b/tools/public_api_guard/material/progress-spinner.md @@ -51,7 +51,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerBase implements OnIni get value(): number; set value(newValue: NumberInput); // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -71,18 +71,11 @@ export class MatProgressSpinnerModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } -// @public -export class MatSpinner extends MatProgressSpinner { - constructor(elementRef: ElementRef, platform: Platform, document: any, animationMode: string, defaults?: MatProgressSpinnerDefaultOptions, - changeDetectorRef?: ChangeDetectorRef, viewportRuler?: ViewportRuler, ngZone?: NgZone); - // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration; -} +// @public @deprecated (undocumented) +export const MatSpinner: typeof MatProgressSpinner; // @public export type ProgressSpinnerMode = 'determinate' | 'indeterminate';