refactor(multiple): remove remaining dependencies on MDC JS

package.json

@@ -95,53 +95,53 @@
     "@bazel/terser": "5.7.2",
     "@bazel/worker": "5.7.2",
     "@firebase/app-types": "^0.7.0",
-    "@material/animation": "15.0.0-canary.7971d6ad5.0",
-    "@material/auto-init": "15.0.0-canary.7971d6ad5.0",
-    "@material/banner": "15.0.0-canary.7971d6ad5.0",
-    "@material/base": "15.0.0-canary.7971d6ad5.0",
-    "@material/button": "15.0.0-canary.7971d6ad5.0",
-    "@material/card": "15.0.0-canary.7971d6ad5.0",
-    "@material/checkbox": "15.0.0-canary.7971d6ad5.0",
-    "@material/chips": "15.0.0-canary.7971d6ad5.0",
-    "@material/circular-progress": "15.0.0-canary.7971d6ad5.0",
-    "@material/data-table": "15.0.0-canary.7971d6ad5.0",
-    "@material/density": "15.0.0-canary.7971d6ad5.0",
-    "@material/dialog": "15.0.0-canary.7971d6ad5.0",
-    "@material/dom": "15.0.0-canary.7971d6ad5.0",
-    "@material/drawer": "15.0.0-canary.7971d6ad5.0",
-    "@material/elevation": "15.0.0-canary.7971d6ad5.0",
-    "@material/fab": "15.0.0-canary.7971d6ad5.0",
-    "@material/feature-targeting": "15.0.0-canary.7971d6ad5.0",
-    "@material/floating-label": "15.0.0-canary.7971d6ad5.0",
-    "@material/form-field": "15.0.0-canary.7971d6ad5.0",
-    "@material/icon-button": "15.0.0-canary.7971d6ad5.0",
-    "@material/image-list": "15.0.0-canary.7971d6ad5.0",
-    "@material/layout-grid": "15.0.0-canary.7971d6ad5.0",
-    "@material/line-ripple": "15.0.0-canary.7971d6ad5.0",
-    "@material/linear-progress": "15.0.0-canary.7971d6ad5.0",
-    "@material/list": "15.0.0-canary.7971d6ad5.0",
-    "@material/menu": "15.0.0-canary.7971d6ad5.0",
-    "@material/menu-surface": "15.0.0-canary.7971d6ad5.0",
-    "@material/notched-outline": "15.0.0-canary.7971d6ad5.0",
-    "@material/radio": "15.0.0-canary.7971d6ad5.0",
-    "@material/ripple": "15.0.0-canary.7971d6ad5.0",
-    "@material/rtl": "15.0.0-canary.7971d6ad5.0",
-    "@material/segmented-button": "15.0.0-canary.7971d6ad5.0",
-    "@material/select": "15.0.0-canary.7971d6ad5.0",
-    "@material/shape": "15.0.0-canary.7971d6ad5.0",
-    "@material/slider": "15.0.0-canary.7971d6ad5.0",
-    "@material/snackbar": "15.0.0-canary.7971d6ad5.0",
-    "@material/switch": "15.0.0-canary.7971d6ad5.0",
-    "@material/tab": "15.0.0-canary.7971d6ad5.0",
-    "@material/tab-bar": "15.0.0-canary.7971d6ad5.0",
-    "@material/tab-indicator": "15.0.0-canary.7971d6ad5.0",
-    "@material/tab-scroller": "15.0.0-canary.7971d6ad5.0",
-    "@material/textfield": "15.0.0-canary.7971d6ad5.0",
-    "@material/theme": "15.0.0-canary.7971d6ad5.0",
-    "@material/tooltip": "15.0.0-canary.7971d6ad5.0",
-    "@material/top-app-bar": "15.0.0-canary.7971d6ad5.0",
-    "@material/touch-target": "15.0.0-canary.7971d6ad5.0",
-    "@material/typography": "15.0.0-canary.7971d6ad5.0",
+    "@material/animation": "15.0.0-canary.fd95ca7ef.0",
+    "@material/auto-init": "15.0.0-canary.fd95ca7ef.0",
+    "@material/banner": "15.0.0-canary.fd95ca7ef.0",
+    "@material/base": "15.0.0-canary.fd95ca7ef.0",
+    "@material/button": "15.0.0-canary.fd95ca7ef.0",
+    "@material/card": "15.0.0-canary.fd95ca7ef.0",
+    "@material/checkbox": "15.0.0-canary.fd95ca7ef.0",
+    "@material/chips": "15.0.0-canary.fd95ca7ef.0",
+    "@material/circular-progress": "15.0.0-canary.fd95ca7ef.0",
+    "@material/data-table": "15.0.0-canary.fd95ca7ef.0",
+    "@material/density": "15.0.0-canary.fd95ca7ef.0",
+    "@material/dialog": "15.0.0-canary.fd95ca7ef.0",
+    "@material/dom": "15.0.0-canary.fd95ca7ef.0",
+    "@material/drawer": "15.0.0-canary.fd95ca7ef.0",
+    "@material/elevation": "15.0.0-canary.fd95ca7ef.0",
+    "@material/fab": "15.0.0-canary.fd95ca7ef.0",
+    "@material/feature-targeting": "15.0.0-canary.fd95ca7ef.0",
+    "@material/floating-label": "15.0.0-canary.fd95ca7ef.0",
+    "@material/form-field": "15.0.0-canary.fd95ca7ef.0",
+    "@material/icon-button": "15.0.0-canary.fd95ca7ef.0",
+    "@material/image-list": "15.0.0-canary.fd95ca7ef.0",
+    "@material/layout-grid": "15.0.0-canary.fd95ca7ef.0",
+    "@material/line-ripple": "15.0.0-canary.fd95ca7ef.0",
+    "@material/linear-progress": "15.0.0-canary.fd95ca7ef.0",
+    "@material/list": "15.0.0-canary.fd95ca7ef.0",
+    "@material/menu": "15.0.0-canary.fd95ca7ef.0",
+    "@material/menu-surface": "15.0.0-canary.fd95ca7ef.0",
+    "@material/notched-outline": "15.0.0-canary.fd95ca7ef.0",
+    "@material/radio": "15.0.0-canary.fd95ca7ef.0",
+    "@material/ripple": "15.0.0-canary.fd95ca7ef.0",
+    "@material/rtl": "15.0.0-canary.fd95ca7ef.0",
+    "@material/segmented-button": "15.0.0-canary.fd95ca7ef.0",
+    "@material/select": "15.0.0-canary.fd95ca7ef.0",
+    "@material/shape": "15.0.0-canary.fd95ca7ef.0",
+    "@material/slider": "15.0.0-canary.fd95ca7ef.0",
+    "@material/snackbar": "15.0.0-canary.fd95ca7ef.0",
+    "@material/switch": "15.0.0-canary.fd95ca7ef.0",
+    "@material/tab": "15.0.0-canary.fd95ca7ef.0",
+    "@material/tab-bar": "15.0.0-canary.fd95ca7ef.0",
+    "@material/tab-indicator": "15.0.0-canary.fd95ca7ef.0",
+    "@material/tab-scroller": "15.0.0-canary.fd95ca7ef.0",
+    "@material/textfield": "15.0.0-canary.fd95ca7ef.0",
+    "@material/theme": "15.0.0-canary.fd95ca7ef.0",
+    "@material/tooltip": "15.0.0-canary.fd95ca7ef.0",
+    "@material/top-app-bar": "15.0.0-canary.fd95ca7ef.0",
+    "@material/touch-target": "15.0.0-canary.fd95ca7ef.0",
+    "@material/typography": "15.0.0-canary.fd95ca7ef.0",
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^15.0.0 || ^15.1.0-0 || ^16.0.0"
-MDC_PACKAGE_VERSION = "15.0.0-canary.7971d6ad5.0"
+MDC_PACKAGE_VERSION = "15.0.0-canary.fd95ca7ef.0"
 TSLIB_PACKAGE_VERSION = "^2.3.0"
 RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
 

src/material/checkbox/BUILD.bazel

@@ -27,7 +27,6 @@ ng_module(
         "@npm//@angular/animations",
         "@npm//@angular/core",
         "@npm//@angular/forms",
-        "@npm//@material/checkbox",
     ],
 )
 

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

@@ -30,7 +30,6 @@ interface RippleEventListeners {
   onTransitionCancel: EventListener;
 }
 
-// TODO: import these values from `@material/ripple` eventually.
 /**
  * Default ripple animation configuration for ripples without an explicit
  * animation config specified.

src/material/dialog/BUILD.bazel

@@ -24,7 +24,6 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/portal",
         "//src/material/core",
-        "@npm//@material/dialog",
     ],
 )
 
@@ -69,7 +68,6 @@ ng_test_library(
         "//src/cdk/testing/private",
         "@npm//@angular/common",
         "@npm//@angular/platform-browser",
-        "@npm//@material/dialog",
         "@npm//rxjs",
     ],
 )

src/material/dialog/dialog-container.ts

@@ -22,7 +22,6 @@ import {
 } from '@angular/core';
 import {MatDialogConfig} from './dialog-config';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {cssClasses, numbers} from '@material/dialog';
 import {CdkDialogContainer} from '@angular/cdk/dialog';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
 
@@ -32,6 +31,21 @@ interface LegacyDialogAnimationEvent {
   totalTime: number;
 }
 
+/** Class added when the dialog is open. */
+const OPEN_CLASS = 'mdc-dialog--open';
+
+/** Class added while the dialog is opening. */
+const OPENING_CLASS = 'mdc-dialog--opening';
+
+/** Class added while the dialog is closing. */
+const CLOSING_CLASS = 'mdc-dialog--closing';
+
+/** Duration of the opening animation in milliseconds. */
+export const OPEN_ANIMATION_DURATION = 150;
+
+/** Duration of the closing animation in milliseconds. */
+export const CLOSE_ANIMATION_DURATION = 75;
+
 /**
  * Base class for the `MatDialogContainer`. The base class does not implement
  * animations as these are left to implementers of the dialog container.
@@ -145,11 +159,11 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
   private _hostElement: HTMLElement = this._elementRef.nativeElement;
   /** Duration of the dialog open animation. */
   private _openAnimationDuration = this._animationsEnabled
-    ? parseCssTime(this._config.enterAnimationDuration) ?? numbers.DIALOG_ANIMATION_OPEN_TIME_MS
+    ? parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION
     : 0;
   /** Duration of the dialog close animation. */
   private _closeAnimationDuration = this._animationsEnabled
-    ? parseCssTime(this._config.exitAnimationDuration) ?? numbers.DIALOG_ANIMATION_CLOSE_TIME_MS
+    ? parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION
     : 0;
   /** Current timer for dialog animations. */
   private _animationTimer: number | null = null;
@@ -213,11 +227,11 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
         TRANSITION_DURATION_PROPERTY,
         `${this._openAnimationDuration}ms`,
       );
-      this._hostElement.classList.add(cssClasses.OPENING);
-      this._hostElement.classList.add(cssClasses.OPEN);
+      this._hostElement.classList.add(OPENING_CLASS);
+      this._hostElement.classList.add(OPEN_CLASS);
       this._waitForAnimationToComplete(this._openAnimationDuration, this._finishDialogOpen);
     } else {
-      this._hostElement.classList.add(cssClasses.OPEN);
+      this._hostElement.classList.add(OPEN_CLASS);
       // Note: We could immediately finish the dialog opening here with noop animations,
       // but we defer until next tick so that consumers can subscribe to `afterOpened`.
       // Executing this immediately would mean that `afterOpened` emits synchronously
@@ -232,14 +246,14 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
    */
   _startExitAnimation(): void {
     this._animationStateChanged.emit({state: 'closing', totalTime: this._closeAnimationDuration});
-    this._hostElement.classList.remove(cssClasses.OPEN);
+    this._hostElement.classList.remove(OPEN_CLASS);
 
     if (this._animationsEnabled) {
       this._hostElement.style.setProperty(
         TRANSITION_DURATION_PROPERTY,
         `${this._openAnimationDuration}ms`,
       );
-      this._hostElement.classList.add(cssClasses.CLOSING);
+      this._hostElement.classList.add(CLOSING_CLASS);
       this._waitForAnimationToComplete(this._closeAnimationDuration, this._finishDialogClose);
     } else {
       // This subscription to the `OverlayRef#backdropClick` observable in the `DialogRef` is
@@ -283,8 +297,8 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
 
   /** Clears all dialog animation classes. */
   private _clearAnimationClasses() {
-    this._hostElement.classList.remove(cssClasses.OPENING);
-    this._hostElement.classList.remove(cssClasses.CLOSING);
+    this._hostElement.classList.remove(OPENING_CLASS);
+    this._hostElement.classList.remove(CLOSING_CLASS);
   }
 
   private _waitForAnimationToComplete(duration: number, callback: () => void) {

src/material/dialog/dialog.spec.ts

@@ -40,7 +40,6 @@ import {
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {numbers} from '@material/dialog';
 import {Subject} from 'rxjs';
 import {
   MatDialog,
@@ -50,6 +49,7 @@ import {
   MAT_DIALOG_DATA,
   MAT_DIALOG_DEFAULT_OPTIONS,
 } from './index';
+import {CLOSE_ANIMATION_DURATION, OPEN_ANIMATION_DURATION} from './dialog-container';
 
 describe('MDC-based MatDialog', () => {
   let dialog: MatDialog;
@@ -1999,14 +1999,12 @@ describe('MDC-based MatDialog with animations enabled', () => {
     // callback should not be called before animation is complete
     expect(spy).not.toHaveBeenCalled();
 
-    tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
+    tick(OPEN_ANIMATION_DURATION);
     expect(spy).toHaveBeenCalled();
   }));
 
   it('should return the current state of the dialog', fakeAsync(() => {
     const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
-    // Duration of the close animation in milliseconds.
-    const dialogCloseDuration = numbers.DIALOG_ANIMATION_CLOSE_TIME_MS;
 
     expect(dialogRef.getState()).toBe(MatDialogState.OPEN);
     dialogRef.close();
@@ -2017,7 +2015,7 @@ describe('MDC-based MatDialog with animations enabled', () => {
     // Ensure that the closing state is still set if half of the animation has
     // passed by. The dialog state should be only set to `closed` when the dialog
     // finished the close animation.
-    tick(dialogCloseDuration / 2);
+    tick(CLOSE_ANIMATION_DURATION / 2);
     expect(dialogRef.getState()).toBe(MatDialogState.CLOSING);
 
     // Flush the remaining duration of the closing animation. We flush all other remaining

src/material/dialog/public-api.ts

@@ -10,6 +10,6 @@ export * from './dialog';
 export * from './dialog-config';
 export * from './dialog-ref';
 export * from './dialog-content-directives';
-export * from './dialog-container';
+export {_MatDialogContainerBase, MatDialogContainer} from './dialog-container';
 export * from './module';
 export {matDialogAnimations, _defaultParams} from './dialog-animations';

src/material/input/BUILD.bazel

@@ -23,7 +23,6 @@ ng_module(
         "//src/material/core",
         "//src/material/form-field",
         "@npm//@angular/forms",
-        "@npm//@material/textfield",
     ],
 )
 

src/material/radio/BUILD.bazel

@@ -25,7 +25,6 @@ ng_module(
         "//src/cdk/collections",
         "//src/material/core",
         "@npm//@angular/forms",
-        "@npm//@material/radio",
     ],
 )
 
@@ -74,7 +73,6 @@ ng_test_library(
         "@npm//@angular/common",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
-        "@npm//@material/radio",
     ],
 )
 

src/material/slide-toggle/BUILD.bazel

@@ -29,7 +29,6 @@ ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
-        "@npm//@material/switch",
     ],
 )
 

tslint.json

@@ -159,7 +159,7 @@
     ],
     "no-unescaped-html-tag": true,
     // Ensures that all rxjs imports come only from `rxjs` and `rxjs/operators`.
-    "import-blacklist": [true, ["^rxjs(?!$|/operators$).*"]]
+    "import-blacklist": [true, ["^rxjs(?!$|/operators$).*", "^@material/"]]
   },
   "linterOptions": {
     "exclude": [