Skip to content

fix(material/progress-bar): remove dependency on legacy progress bar #25581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/material/legacy-progress-bar/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ ng_module(
assets = [":progress-bar.css"] + glob(["**/*.html"]),
deps = [
"//src/material/core",
"//src/material/progress-bar",
"@npm//@angular/animations",
"@npm//@angular/common",
"@npm//@angular/core",
Expand Down
8 changes: 6 additions & 2 deletions src/material/legacy-progress-bar/progress-bar.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@ import {TestBed, ComponentFixture} from '@angular/core/testing';
import {ApplicationRef, Component, DebugElement, Provider, Type} from '@angular/core';
import {By} from '@angular/platform-browser';
import {dispatchFakeEvent} from '../../cdk/testing/private';
import {MatLegacyProgressBarModule, MAT_LEGACY_PROGRESS_BAR_LOCATION} from './index';
import {MatLegacyProgressBar, MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS} from './progress-bar';
import {
MatLegacyProgressBarModule,
MAT_LEGACY_PROGRESS_BAR_LOCATION,
MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS,
} from './index';
import {MatLegacyProgressBar} from './progress-bar';

describe('MatProgressBar', () => {
let fakePath: string;
Expand Down
97 changes: 14 additions & 83 deletions src/material/legacy-progress-bar/progress-bar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/
import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
import {DOCUMENT} from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
ElementRef,
EventEmitter,
Inject,
inject,
InjectionToken,
Input,
NgZone,
OnDestroy,
Expand All @@ -25,22 +22,21 @@ import {
ViewEncapsulation,
ChangeDetectorRef,
} from '@angular/core';
import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
import {CanColor, mixinColor} from '@angular/material/core';
import {
MatProgressBarDefaultOptions,
MAT_PROGRESS_BAR_DEFAULT_OPTIONS,
ProgressAnimationEnd,
ProgressBarMode,
MAT_PROGRESS_BAR_LOCATION,
MatProgressBarLocation,
} from '@angular/material/progress-bar';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {fromEvent, Observable, Subscription} from 'rxjs';
import {filter} from 'rxjs/operators';

// TODO(josephperrott): Add ARIA attributes for progress bar "for".

/**
* Last animation end data.
* @deprecated Use `ProgressAnimationEnd` from `@angular/material/progress-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export interface LegacyProgressAnimationEnd {
value: number;
}

// Boilerplate for applying mixins to MatProgressBar.
/** @docs-private */
const _MatProgressBarBase = mixinColor(
Expand All @@ -50,71 +46,6 @@ const _MatProgressBarBase = mixinColor(
'primary',
);

/**
* Injection token used to provide the current location to `MatProgressBar`.
* Used to handle server-side rendering and to stub out during unit tests.
* @docs-private
* @deprecated Use `MAT_PROGRESS_BAR_LOCATION` from `@angular/material/progress-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export const MAT_LEGACY_PROGRESS_BAR_LOCATION = new InjectionToken<MatLegacyProgressBarLocation>(
'mat-progress-bar-location',
{providedIn: 'root', factory: MAT_LEGACY_PROGRESS_BAR_LOCATION_FACTORY},
);

/**
* Stubbed out location for `MatProgressBar`.
* @docs-private
* @deprecated Use `MatProgressBarLocation` from `@angular/material/progress-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export interface MatLegacyProgressBarLocation {
getPathname: () => string;
}

/**
* @docs-private
* @deprecated Use `MAT_PROGRESS_BAR_LOCATION_FACTORY` from `@angular/material/progress-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export function MAT_LEGACY_PROGRESS_BAR_LOCATION_FACTORY(): MatLegacyProgressBarLocation {
const _document = inject(DOCUMENT);
const _location = _document ? _document.location : null;

return {
// Note that this needs to be a function, rather than a property, because Angular
// will only resolve it once, but we want the current path on each call.
getPathname: () => (_location ? _location.pathname + _location.search : ''),
};
}

/**
* @deprecated Use `ProgressBarMode` from `@angular/material/progress-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export type LegacyProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';

/**
* Default `mat-progress-bar` options that can be overridden.
* @deprecated Use `MatProgressBarDefaultOptions` from `@angular/material/progress-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export interface MatLegacyProgressBarDefaultOptions {
/** Default color of the progress bar. */
color?: ThemePalette;

/** Default mode of the progress bar. */
mode?: LegacyProgressBarMode;
}

/**
* Injection token to be used to override the default options for `mat-progress-bar`.
* @deprecated Use `MAT_PROGRESS_BAR_DEFAULT_OPTIONS` from `@angular/material/progress-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
* @breaking-change 17.0.0
*/
export const MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS =
new InjectionToken<MatLegacyProgressBarDefaultOptions>('MAT_PROGRESS_BAR_DEFAULT_OPTIONS');

/** Counter used to generate unique IDs for progress bars. */
let progressbarId = 0;

Expand Down Expand Up @@ -156,10 +87,10 @@ export class MatLegacyProgressBar
* @deprecated `location` parameter to be made required.
* @breaking-change 8.0.0
*/
@Optional() @Inject(MAT_LEGACY_PROGRESS_BAR_LOCATION) location?: MatLegacyProgressBarLocation,
@Optional() @Inject(MAT_PROGRESS_BAR_LOCATION) location?: MatProgressBarLocation,
@Optional()
@Inject(MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS)
defaults?: MatLegacyProgressBarDefaultOptions,
@Inject(MAT_PROGRESS_BAR_DEFAULT_OPTIONS)
defaults?: MatProgressBarDefaultOptions,
/**
* @deprecated `_changeDetectorRef` parameter to be made required.
* @breaking-change 11.0.0
Expand Down Expand Up @@ -223,7 +154,7 @@ export class MatLegacyProgressBar
* be emitted when animations are disabled, nor will it be emitted for modes with continuous
* animations (indeterminate and query).
*/
@Output() readonly animationEnd = new EventEmitter<LegacyProgressAnimationEnd>();
@Output() readonly animationEnd = new EventEmitter<ProgressAnimationEnd>();

/** Reference to animation end subscription to be unsubscribed on destroy. */
private _animationEndSubscription: Subscription = Subscription.EMPTY;
Expand All @@ -235,7 +166,7 @@ export class MatLegacyProgressBar
* 'determinate'.
* Mirrored to mode attribute.
*/
@Input() mode: LegacyProgressBarMode = 'determinate';
@Input() mode: ProgressBarMode = 'determinate';

/** ID of the progress bar. */
progressbarId = `mat-progress-bar-${progressbarId++}`;
Expand Down
19 changes: 10 additions & 9 deletions src/material/legacy-progress-bar/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@
*/

export {MatLegacyProgressBarModule} from './progress-bar-module';
export {MatLegacyProgressBar} from './progress-bar';

export {
LegacyProgressAnimationEnd,
MAT_LEGACY_PROGRESS_BAR_LOCATION,
MatLegacyProgressBarLocation,
MAT_LEGACY_PROGRESS_BAR_LOCATION_FACTORY,
LegacyProgressBarMode,
MatLegacyProgressBarDefaultOptions,
MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS,
MatLegacyProgressBar,
} from './progress-bar';
MatProgressBarDefaultOptions as MatLegacyProgressBarDefaultOptions,
MAT_PROGRESS_BAR_DEFAULT_OPTIONS as MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS,
ProgressAnimationEnd as LegacyProgressAnimationEnd,
ProgressBarMode as LegacyProgressBarMode,
MAT_PROGRESS_BAR_LOCATION as MAT_LEGACY_PROGRESS_BAR_LOCATION,
MatProgressBarLocation as MatLegacyProgressBarLocation,
MAT_PROGRESS_BAR_LOCATION_FACTORY as MAT_LEGACY_PROGRESS_BAR_LOCATION_FACTORY,
} from '@angular/material/progress-bar';
20 changes: 3 additions & 17 deletions src/material/legacy-progress-bar/testing/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ ts_library(
deps = [
"//src/cdk/coercion",
"//src/cdk/testing",
"//src/material/progress-bar/testing",
],
)

Expand All @@ -19,28 +20,13 @@ filegroup(
srcs = glob(["**/*.ts"]),
)

ng_test_library(
name = "harness_tests_lib",
srcs = ["shared.spec.ts"],
deps = [
":testing",
"//src/cdk/testing",
"//src/cdk/testing/testbed",
"//src/material/legacy-progress-bar",
"@npm//@angular/platform-browser",
],
)

ng_test_library(
name = "unit_tests_lib",
srcs = glob(
["**/*.spec.ts"],
exclude = ["shared.spec.ts"],
),
srcs = glob(["**/*.spec.ts"]),
deps = [
":harness_tests_lib",
":testing",
"//src/material/legacy-progress-bar",
"//src/material/progress-bar/testing:harness_tests_lib",
],
)

Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
import {runHarnessTests} from '@angular/material/legacy-progress-bar/testing/shared.spec';
import {runHarnessTests} from '@angular/material/progress-bar/testing/shared.spec';
import {MatLegacyProgressBarHarness} from './progress-bar-harness';

describe('MatProgressBarHarness', () => {
runHarnessTests(MatLegacyProgressBarModule, MatLegacyProgressBarHarness);
runHarnessTests(MatLegacyProgressBarModule, MatLegacyProgressBarHarness as any);
});
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import {coerceNumberProperty} from '@angular/cdk/coercion';
import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
import {LegacyProgressBarHarnessFilters} from './progress-bar-harness-filters';
import {ProgressBarHarnessFilters} from '@angular/material/progress-bar/testing';

/**
* Harness for interacting with a standard mat-progress-bar in tests.
Expand All @@ -26,7 +26,7 @@ export class MatLegacyProgressBarHarness extends ComponentHarness {
* @return a `HarnessPredicate` configured with the given options.
*/
static with(
options: LegacyProgressBarHarnessFilters = {},
options: ProgressBarHarnessFilters = {},
): HarnessPredicate<MatLegacyProgressBarHarness> {
return new HarnessPredicate(MatLegacyProgressBarHarness, options);
}
Expand Down
2 changes: 1 addition & 1 deletion src/material/legacy-progress-bar/testing/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
*/

export {MatLegacyProgressBarHarness} from './progress-bar-harness';
export {LegacyProgressBarHarnessFilters} from './progress-bar-harness-filters';
export {ProgressBarHarnessFilters as LegacyProgressBarHarnessFilters} from '@angular/material/progress-bar/testing';
1 change: 0 additions & 1 deletion src/material/progress-bar/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ ng_module(
assets = [":progress_bar_scss"] + glob(["**/*.html"]),
deps = [
"//src/material/core",
"//src/material/legacy-progress-bar",
"@npm//@angular/core",
],
)
Expand Down
65 changes: 56 additions & 9 deletions src/material/progress-bar/progress-bar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,63 @@ import {
AfterViewInit,
OnDestroy,
ChangeDetectorRef,
InjectionToken,
inject,
} from '@angular/core';
import {CanColor, mixinColor} from '@angular/material/core';
import {DOCUMENT} from '@angular/common';
import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {
MatLegacyProgressBarDefaultOptions,
MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS,
LegacyProgressAnimationEnd,
} from '@angular/material/legacy-progress-bar';
import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';

/** Last animation end data. */
export interface ProgressAnimationEnd {
value: number;
}

/** Default `mat-progress-bar` options that can be overridden. */
export interface MatProgressBarDefaultOptions {
/** Default color of the progress bar. */
color?: ThemePalette;

/** Default mode of the progress bar. */
mode?: ProgressBarMode;
}

/** Injection token to be used to override the default options for `mat-progress-bar`. */
export const MAT_PROGRESS_BAR_DEFAULT_OPTIONS = new InjectionToken<MatProgressBarDefaultOptions>(
'MAT_PROGRESS_BAR_DEFAULT_OPTIONS',
);

/**
* Injection token used to provide the current location to `MatProgressBar`.
* Used to handle server-side rendering and to stub out during unit tests.
* @docs-private
*/
export const MAT_PROGRESS_BAR_LOCATION = new InjectionToken<MatProgressBarLocation>(
'mat-progress-bar-location',
{providedIn: 'root', factory: MAT_PROGRESS_BAR_LOCATION_FACTORY},
);

/**
* Stubbed out location for `MatProgressBar`.
* @docs-private
*/
export interface MatProgressBarLocation {
getPathname: () => string;
}

/** @docs-private */
export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation {
const _document = inject(DOCUMENT);
const _location = _document ? _document.location : null;

return {
// Note that this needs to be a function, rather than a property, because Angular
// will only resolve it once, but we want the current path on each call.
getPathname: () => (_location ? _location.pathname + _location.search : ''),
};
}

// Boilerplate for applying mixins to MatProgressBar.
/** @docs-private */
const _MatProgressBarBase = mixinColor(
Expand Down Expand Up @@ -74,8 +121,8 @@ export class MatProgressBar
private _changeDetectorRef: ChangeDetectorRef,
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
@Optional()
@Inject(MAT_LEGACY_PROGRESS_BAR_DEFAULT_OPTIONS)
defaults?: MatLegacyProgressBarDefaultOptions,
@Inject(MAT_PROGRESS_BAR_DEFAULT_OPTIONS)
defaults?: MatProgressBarDefaultOptions,
) {
super(elementRef);
this._isNoopAnimation = _animationMode === 'NoopAnimations';
Expand Down Expand Up @@ -119,7 +166,7 @@ export class MatProgressBar
* be emitted when animations are disabled, nor will it be emitted for modes with continuous
* animations (indeterminate and query).
*/
@Output() readonly animationEnd = new EventEmitter<LegacyProgressAnimationEnd>();
@Output() readonly animationEnd = new EventEmitter<ProgressAnimationEnd>();

/**
* Mode of the progress bar.
Expand Down
Loading