Skip to content

Commit 65f3da0

Browse files
crisbetocrisbeto
authored
refactor(multiple): remove remaining dependencies on MDC JS (#26366)
Removes the last remaining usage we had in TypeScript of MDC. This simplifies our setup and fixes the snapshot tests.
1 parent d2dcd76 commit 65f3da0

File tree

13 files changed

+661
-654
lines changed

13 files changed

+661
-654
lines changed

‎package.json

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -95,53 +95,53 @@
9595
"@bazel/terser": "5.7.2",
9696
"@bazel/worker": "5.7.2",
9797
"@firebase/app-types": "^0.7.0",
98-
"@material/animation": "15.0.0-canary.7971d6ad5.0",
99-
"@material/auto-init": "15.0.0-canary.7971d6ad5.0",
100-
"@material/banner": "15.0.0-canary.7971d6ad5.0",
101-
"@material/base": "15.0.0-canary.7971d6ad5.0",
102-
"@material/button": "15.0.0-canary.7971d6ad5.0",
103-
"@material/card": "15.0.0-canary.7971d6ad5.0",
104-
"@material/checkbox": "15.0.0-canary.7971d6ad5.0",
105-
"@material/chips": "15.0.0-canary.7971d6ad5.0",
106-
"@material/circular-progress": "15.0.0-canary.7971d6ad5.0",
107-
"@material/data-table": "15.0.0-canary.7971d6ad5.0",
108-
"@material/density": "15.0.0-canary.7971d6ad5.0",
109-
"@material/dialog": "15.0.0-canary.7971d6ad5.0",
110-
"@material/dom": "15.0.0-canary.7971d6ad5.0",
111-
"@material/drawer": "15.0.0-canary.7971d6ad5.0",
112-
"@material/elevation": "15.0.0-canary.7971d6ad5.0",
113-
"@material/fab": "15.0.0-canary.7971d6ad5.0",
114-
"@material/feature-targeting": "15.0.0-canary.7971d6ad5.0",
115-
"@material/floating-label": "15.0.0-canary.7971d6ad5.0",
116-
"@material/form-field": "15.0.0-canary.7971d6ad5.0",
117-
"@material/icon-button": "15.0.0-canary.7971d6ad5.0",
118-
"@material/image-list": "15.0.0-canary.7971d6ad5.0",
119-
"@material/layout-grid": "15.0.0-canary.7971d6ad5.0",
120-
"@material/line-ripple": "15.0.0-canary.7971d6ad5.0",
121-
"@material/linear-progress": "15.0.0-canary.7971d6ad5.0",
122-
"@material/list": "15.0.0-canary.7971d6ad5.0",
123-
"@material/menu": "15.0.0-canary.7971d6ad5.0",
124-
"@material/menu-surface": "15.0.0-canary.7971d6ad5.0",
125-
"@material/notched-outline": "15.0.0-canary.7971d6ad5.0",
126-
"@material/radio": "15.0.0-canary.7971d6ad5.0",
127-
"@material/ripple": "15.0.0-canary.7971d6ad5.0",
128-
"@material/rtl": "15.0.0-canary.7971d6ad5.0",
129-
"@material/segmented-button": "15.0.0-canary.7971d6ad5.0",
130-
"@material/select": "15.0.0-canary.7971d6ad5.0",
131-
"@material/shape": "15.0.0-canary.7971d6ad5.0",
132-
"@material/slider": "15.0.0-canary.7971d6ad5.0",
133-
"@material/snackbar": "15.0.0-canary.7971d6ad5.0",
134-
"@material/switch": "15.0.0-canary.7971d6ad5.0",
135-
"@material/tab": "15.0.0-canary.7971d6ad5.0",
136-
"@material/tab-bar": "15.0.0-canary.7971d6ad5.0",
137-
"@material/tab-indicator": "15.0.0-canary.7971d6ad5.0",
138-
"@material/tab-scroller": "15.0.0-canary.7971d6ad5.0",
139-
"@material/textfield": "15.0.0-canary.7971d6ad5.0",
140-
"@material/theme": "15.0.0-canary.7971d6ad5.0",
141-
"@material/tooltip": "15.0.0-canary.7971d6ad5.0",
142-
"@material/top-app-bar": "15.0.0-canary.7971d6ad5.0",
143-
"@material/touch-target": "15.0.0-canary.7971d6ad5.0",
144-
"@material/typography": "15.0.0-canary.7971d6ad5.0",
98+
"@material/animation": "15.0.0-canary.fd95ca7ef.0",
99+
"@material/auto-init": "15.0.0-canary.fd95ca7ef.0",
100+
"@material/banner": "15.0.0-canary.fd95ca7ef.0",
101+
"@material/base": "15.0.0-canary.fd95ca7ef.0",
102+
"@material/button": "15.0.0-canary.fd95ca7ef.0",
103+
"@material/card": "15.0.0-canary.fd95ca7ef.0",
104+
"@material/checkbox": "15.0.0-canary.fd95ca7ef.0",
105+
"@material/chips": "15.0.0-canary.fd95ca7ef.0",
106+
"@material/circular-progress": "15.0.0-canary.fd95ca7ef.0",
107+
"@material/data-table": "15.0.0-canary.fd95ca7ef.0",
108+
"@material/density": "15.0.0-canary.fd95ca7ef.0",
109+
"@material/dialog": "15.0.0-canary.fd95ca7ef.0",
110+
"@material/dom": "15.0.0-canary.fd95ca7ef.0",
111+
"@material/drawer": "15.0.0-canary.fd95ca7ef.0",
112+
"@material/elevation": "15.0.0-canary.fd95ca7ef.0",
113+
"@material/fab": "15.0.0-canary.fd95ca7ef.0",
114+
"@material/feature-targeting": "15.0.0-canary.fd95ca7ef.0",
115+
"@material/floating-label": "15.0.0-canary.fd95ca7ef.0",
116+
"@material/form-field": "15.0.0-canary.fd95ca7ef.0",
117+
"@material/icon-button": "15.0.0-canary.fd95ca7ef.0",
118+
"@material/image-list": "15.0.0-canary.fd95ca7ef.0",
119+
"@material/layout-grid": "15.0.0-canary.fd95ca7ef.0",
120+
"@material/line-ripple": "15.0.0-canary.fd95ca7ef.0",
121+
"@material/linear-progress": "15.0.0-canary.fd95ca7ef.0",
122+
"@material/list": "15.0.0-canary.fd95ca7ef.0",
123+
"@material/menu": "15.0.0-canary.fd95ca7ef.0",
124+
"@material/menu-surface": "15.0.0-canary.fd95ca7ef.0",
125+
"@material/notched-outline": "15.0.0-canary.fd95ca7ef.0",
126+
"@material/radio": "15.0.0-canary.fd95ca7ef.0",
127+
"@material/ripple": "15.0.0-canary.fd95ca7ef.0",
128+
"@material/rtl": "15.0.0-canary.fd95ca7ef.0",
129+
"@material/segmented-button": "15.0.0-canary.fd95ca7ef.0",
130+
"@material/select": "15.0.0-canary.fd95ca7ef.0",
131+
"@material/shape": "15.0.0-canary.fd95ca7ef.0",
132+
"@material/slider": "15.0.0-canary.fd95ca7ef.0",
133+
"@material/snackbar": "15.0.0-canary.fd95ca7ef.0",
134+
"@material/switch": "15.0.0-canary.fd95ca7ef.0",
135+
"@material/tab": "15.0.0-canary.fd95ca7ef.0",
136+
"@material/tab-bar": "15.0.0-canary.fd95ca7ef.0",
137+
"@material/tab-indicator": "15.0.0-canary.fd95ca7ef.0",
138+
"@material/tab-scroller": "15.0.0-canary.fd95ca7ef.0",
139+
"@material/textfield": "15.0.0-canary.fd95ca7ef.0",
140+
"@material/theme": "15.0.0-canary.fd95ca7ef.0",
141+
"@material/tooltip": "15.0.0-canary.fd95ca7ef.0",
142+
"@material/top-app-bar": "15.0.0-canary.fd95ca7ef.0",
143+
"@material/touch-target": "15.0.0-canary.fd95ca7ef.0",
144+
"@material/typography": "15.0.0-canary.fd95ca7ef.0",
145145
"@octokit/rest": "18.3.5",
146146
"@rollup/plugin-commonjs": "^21.0.0",
147147
"@rollup/plugin-node-resolve": "^13.1.3",

‎packages.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^15.0.0 || ^15.1.0-0 || ^16.0.0"
5-
MDC_PACKAGE_VERSION = "15.0.0-canary.7971d6ad5.0"
5+
MDC_PACKAGE_VERSION = "15.0.0-canary.fd95ca7ef.0"
66
TSLIB_PACKAGE_VERSION = "^2.3.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
88

‎src/material/checkbox/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ ng_module(
2727
"@npm//@angular/animations",
2828
"@npm//@angular/core",
2929
"@npm//@angular/forms",
30-
"@npm//@material/checkbox",
3130
],
3231
)
3332

‎src/material/core/ripple/ripple-renderer.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ interface RippleEventListeners {
3030
onTransitionCancel: EventListener;
3131
}
3232

33-
// TODO: import these values from `@material/ripple` eventually.
3433
/**
3534
* Default ripple animation configuration for ripples without an explicit
3635
* animation config specified.

‎src/material/dialog/BUILD.bazel

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ ng_module(
2424
"//src/cdk/overlay",
2525
"//src/cdk/portal",
2626
"//src/material/core",
27-
"@npm//@material/dialog",
2827
],
2928
)
3029

@@ -69,7 +68,6 @@ ng_test_library(
6968
"//src/cdk/testing/private",
7069
"@npm//@angular/common",
7170
"@npm//@angular/platform-browser",
72-
"@npm//@material/dialog",
7371
"@npm//rxjs",
7472
],
7573
)

‎src/material/dialog/dialog-container.ts

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
} from '@angular/core';
2323
import {MatDialogConfig} from './dialog-config';
2424
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
25-
import {cssClasses, numbers} from '@material/dialog';
2625
import {CdkDialogContainer} from '@angular/cdk/dialog';
2726
import {coerceNumberProperty} from '@angular/cdk/coercion';
2827

@@ -32,6 +31,21 @@ interface LegacyDialogAnimationEvent {
3231
totalTime: number;
3332
}
3433

34+
/** Class added when the dialog is open. */
35+
const OPEN_CLASS = 'mdc-dialog--open';
36+
37+
/** Class added while the dialog is opening. */
38+
const OPENING_CLASS = 'mdc-dialog--opening';
39+
40+
/** Class added while the dialog is closing. */
41+
const CLOSING_CLASS = 'mdc-dialog--closing';
42+
43+
/** Duration of the opening animation in milliseconds. */
44+
export const OPEN_ANIMATION_DURATION = 150;
45+
46+
/** Duration of the closing animation in milliseconds. */
47+
export const CLOSE_ANIMATION_DURATION = 75;
48+
3549
/**
3650
* Base class for the `MatDialogContainer`. The base class does not implement
3751
* animations as these are left to implementers of the dialog container.
@@ -145,11 +159,11 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
145159
private _hostElement: HTMLElement = this._elementRef.nativeElement;
146160
/** Duration of the dialog open animation. */
147161
private _openAnimationDuration = this._animationsEnabled
148-
? parseCssTime(this._config.enterAnimationDuration) ?? numbers.DIALOG_ANIMATION_OPEN_TIME_MS
162+
? parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION
149163
: 0;
150164
/** Duration of the dialog close animation. */
151165
private _closeAnimationDuration = this._animationsEnabled
152-
? parseCssTime(this._config.exitAnimationDuration) ?? numbers.DIALOG_ANIMATION_CLOSE_TIME_MS
166+
? parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION
153167
: 0;
154168
/** Current timer for dialog animations. */
155169
private _animationTimer: number | null = null;
@@ -213,11 +227,11 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
213227
TRANSITION_DURATION_PROPERTY,
214228
`${this._openAnimationDuration}ms`,
215229
);
216-
this._hostElement.classList.add(cssClasses.OPENING);
217-
this._hostElement.classList.add(cssClasses.OPEN);
230+
this._hostElement.classList.add(OPENING_CLASS);
231+
this._hostElement.classList.add(OPEN_CLASS);
218232
this._waitForAnimationToComplete(this._openAnimationDuration, this._finishDialogOpen);
219233
} else {
220-
this._hostElement.classList.add(cssClasses.OPEN);
234+
this._hostElement.classList.add(OPEN_CLASS);
221235
// Note: We could immediately finish the dialog opening here with noop animations,
222236
// but we defer until next tick so that consumers can subscribe to `afterOpened`.
223237
// Executing this immediately would mean that `afterOpened` emits synchronously
@@ -232,14 +246,14 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
232246
*/
233247
_startExitAnimation(): void {
234248
this._animationStateChanged.emit({state: 'closing', totalTime: this._closeAnimationDuration});
235-
this._hostElement.classList.remove(cssClasses.OPEN);
249+
this._hostElement.classList.remove(OPEN_CLASS);
236250

237251
if (this._animationsEnabled) {
238252
this._hostElement.style.setProperty(
239253
TRANSITION_DURATION_PROPERTY,
240254
`${this._openAnimationDuration}ms`,
241255
);
242-
this._hostElement.classList.add(cssClasses.CLOSING);
256+
this._hostElement.classList.add(CLOSING_CLASS);
243257
this._waitForAnimationToComplete(this._closeAnimationDuration, this._finishDialogClose);
244258
} else {
245259
// This subscription to the `OverlayRef#backdropClick` observable in the `DialogRef` is
@@ -283,8 +297,8 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
283297

284298
/** Clears all dialog animation classes. */
285299
private _clearAnimationClasses() {
286-
this._hostElement.classList.remove(cssClasses.OPENING);
287-
this._hostElement.classList.remove(cssClasses.CLOSING);
300+
this._hostElement.classList.remove(OPENING_CLASS);
301+
this._hostElement.classList.remove(CLOSING_CLASS);
288302
}
289303

290304
private _waitForAnimationToComplete(duration: number, callback: () => void) {

‎src/material/dialog/dialog.spec.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ import {
4040
} from '@angular/core/testing';
4141
import {By} from '@angular/platform-browser';
4242
import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
43-
import {numbers} from '@material/dialog';
4443
import {Subject} from 'rxjs';
4544
import {
4645
MatDialog,
@@ -50,6 +49,7 @@ import {
5049
MAT_DIALOG_DATA,
5150
MAT_DIALOG_DEFAULT_OPTIONS,
5251
} from './index';
52+
import {CLOSE_ANIMATION_DURATION, OPEN_ANIMATION_DURATION} from './dialog-container';
5353

5454
describe('MDC-based MatDialog', () => {
5555
let dialog: MatDialog;
@@ -1999,14 +1999,12 @@ describe('MDC-based MatDialog with animations enabled', () => {
19991999
// callback should not be called before animation is complete
20002000
expect(spy).not.toHaveBeenCalled();
20012001

2002-
tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
2002+
tick(OPEN_ANIMATION_DURATION);
20032003
expect(spy).toHaveBeenCalled();
20042004
}));
20052005

20062006
it('should return the current state of the dialog', fakeAsync(() => {
20072007
const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
2008-
// Duration of the close animation in milliseconds.
2009-
const dialogCloseDuration = numbers.DIALOG_ANIMATION_CLOSE_TIME_MS;
20102008

20112009
expect(dialogRef.getState()).toBe(MatDialogState.OPEN);
20122010
dialogRef.close();
@@ -2017,7 +2015,7 @@ describe('MDC-based MatDialog with animations enabled', () => {
20172015
// Ensure that the closing state is still set if half of the animation has
20182016
// passed by. The dialog state should be only set to `closed` when the dialog
20192017
// finished the close animation.
2020-
tick(dialogCloseDuration / 2);
2018+
tick(CLOSE_ANIMATION_DURATION / 2);
20212019
expect(dialogRef.getState()).toBe(MatDialogState.CLOSING);
20222020

20232021
// Flush the remaining duration of the closing animation. We flush all other remaining

‎src/material/dialog/public-api.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ export * from './dialog';
1010
export * from './dialog-config';
1111
export * from './dialog-ref';
1212
export * from './dialog-content-directives';
13-
export * from './dialog-container';
13+
export {_MatDialogContainerBase, MatDialogContainer} from './dialog-container';
1414
export * from './module';
1515
export {matDialogAnimations, _defaultParams} from './dialog-animations';

‎src/material/input/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ ng_module(
2323
"//src/material/core",
2424
"//src/material/form-field",
2525
"@npm//@angular/forms",
26-
"@npm//@material/textfield",
2726
],
2827
)
2928

‎src/material/radio/BUILD.bazel

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ ng_module(
2525
"//src/cdk/collections",
2626
"//src/material/core",
2727
"@npm//@angular/forms",
28-
"@npm//@material/radio",
2928
],
3029
)
3130

@@ -74,7 +73,6 @@ ng_test_library(
7473
"@npm//@angular/common",
7574
"@npm//@angular/forms",
7675
"@npm//@angular/platform-browser",
77-
"@npm//@material/radio",
7876
],
7977
)
8078

‎src/material/slide-toggle/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ ng_module(
2929
"@npm//@angular/common",
3030
"@npm//@angular/core",
3131
"@npm//@angular/forms",
32-
"@npm//@material/switch",
3332
],
3433
)
3534

‎tslint.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@
159159
],
160160
"no-unescaped-html-tag": true,
161161
// Ensures that all rxjs imports come only from `rxjs` and `rxjs/operators`.
162-
"import-blacklist": [true, ["^rxjs(?!$|/operators$).*"]]
162+
"import-blacklist": [true, ["^rxjs(?!$|/operators$).*", "^@material/"]]
163163
},
164164
"linterOptions": {
165165
"exclude": [

0 commit comments

Comments
 (0)