fix(material-experimental/mdc-snack-bar): avoid hard reference to base components and align API

The MDC snack bar was set up to extend the base `MatSnackBar` directly which has a
reference to the base snack bar components. This means that the code and styles from
the base components will be pulled in, even though it isn't being used.

These changes move the snack bar logic into a base class that is extended by the
default and MDC implementations.

While working on these changes, I also noticed that the simple snack bar components
was called `SimpleSnackBar` in the default implementation and `MatSimpleSnackBar`
for MDC. I've aligned the naming in order to make it easier to migrate.

Author: crisbeto

scripts/check-mdc-exports-config.ts

@@ -20,6 +20,10 @@ export const config = {
       'MAT_SLIDER_VALUE_ACCESSOR',
       // Irrelevant for the MDC implementation, because the slider doesn't dispatch any events.
       'MatSliderChange'
+    ],
+    'mdc-snack-bar': [
+      // TODO: needs to be renamed to match the non-MDC version.
+      'SimpleSnackBar'
     ]
   }
 };

src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts

@@ -8,12 +8,12 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
-import {MatSnackBar} from '@angular/material-experimental/mdc-snack-bar';
 import {
+  MatSnackBar,
   MatSnackBarConfig,
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition
-} from '@angular/material/snack-bar';
+} from '@angular/material-experimental/mdc-snack-bar';
 
 @Component({
   selector: 'mdc-snack-bar-demo',
@@ -22,7 +22,6 @@ import {
   encapsulation: ViewEncapsulation.None,
 })
 export class MdcSnackBarDemo {
-
   @ViewChild('template') template: TemplateRef<any>;
   message = 'Snack Bar opened.';
   actionButtonLabel = 'Retry';

src/material-experimental/mdc-snack-bar/module.ts

@@ -13,7 +13,7 @@ import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatCommonModule} from '@angular/material-experimental/mdc-core';
 
-import {MatSimpleSnackBar} from './simple-snack-bar';
+import {MatSimpleSnackBar} from './public-api';
 import {MatSnackBarContainer} from './snack-bar-container';
 import {
   MatSnackBarAction,

src/material-experimental/mdc-snack-bar/public-api.ts

@@ -16,7 +16,6 @@ export {
   MatSnackBarConfig,
   MatSnackBarDismiss,
   MatSnackBarRef,
-  SimpleSnackBar,
   MAT_SNACK_BAR_DATA,
   MAT_SNACK_BAR_DEFAULT_OPTIONS,
   MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY,

src/material-experimental/mdc-snack-bar/simple-snack-bar.ts

@@ -7,15 +7,10 @@
  */
 
 import {ChangeDetectionStrategy, Component, Inject, ViewEncapsulation} from '@angular/core';
-import {
-  MAT_SNACK_BAR_DATA,
-  TextOnlySnackBar,
-  MatSnackBarRef,
-  SimpleSnackBar
-} from '@angular/material/snack-bar';
+import {MAT_SNACK_BAR_DATA, TextOnlySnackBar, MatSnackBarRef} from '@angular/material/snack-bar';
 
 @Component({
-  selector: 'mat-simple-snack-bar',
+  selector: 'simple-snack-bar',
   templateUrl: 'simple-snack-bar.html',
   styleUrls: ['simple-snack-bar.css'],
   exportAs: 'matSnackBar',
@@ -27,7 +22,7 @@ import {
 })
 export class MatSimpleSnackBar implements TextOnlySnackBar {
   constructor(
-      public snackBarRef: MatSnackBarRef<SimpleSnackBar>,
+      public snackBarRef: MatSnackBarRef<MatSimpleSnackBar>,
       @Inject(MAT_SNACK_BAR_DATA) public data: {message: string, action: string}) {
   }
 
@@ -42,3 +37,6 @@ export class MatSimpleSnackBar implements TextOnlySnackBar {
   }
 }
 
+// For backwards compatibility.
+// tslint:disable-next-line:variable-name
+export const SimpleSnackBar = MatSimpleSnackBar;

src/material-experimental/mdc-snack-bar/snack-bar.spec.ts

@@ -217,7 +217,7 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     expect(snackBarRef.instance instanceof MatSimpleSnackBar)
-        .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
+        .toBe(true, 'Expected the snack bar content component to be MatSimpleSnackBar');
     expect(snackBarRef.instance.snackBarRef)
         .toBe(snackBarRef,
             'Expected the snack bar reference to be placed in the component instance');
@@ -241,7 +241,7 @@ describe('MatSnackBar', () => {
     viewContainerFixture.detectChanges();
 
     expect(snackBarRef.instance instanceof MatSimpleSnackBar)
-        .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
+        .toBe(true, 'Expected the snack bar content component to be MatSimpleSnackBar');
     expect(snackBarRef.instance.snackBarRef)
         .toBe(snackBarRef,
             'Expected the snack bar reference to be placed in the component instance');

src/material-experimental/mdc-snack-bar/snack-bar.ts

@@ -6,8 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable} from '@angular/core';
-import {MatSnackBar as BaseMatSnackBar} from '@angular/material/snack-bar';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {Overlay} from '@angular/cdk/overlay';
+import {Inject, Injectable, Injector, Optional, SkipSelf} from '@angular/core';
+import {
+  MatSnackBarConfig,
+  MAT_SNACK_BAR_DEFAULT_OPTIONS,
+  _MatSnackBarBase,
+} from '@angular/material/snack-bar';
 import {MatSnackBarModule} from './module';
 import {MatSimpleSnackBar} from './simple-snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
@@ -16,8 +23,18 @@ import {MatSnackBarContainer} from './snack-bar-container';
  * Service to dispatch Material Design snack bar messages.
  */
 @Injectable({providedIn: MatSnackBarModule})
-export class MatSnackBar extends BaseMatSnackBar {
+export class MatSnackBar extends _MatSnackBarBase {
   protected override simpleSnackBarComponent = MatSimpleSnackBar;
   protected override snackBarContainerComponent = MatSnackBarContainer;
   protected override handsetCssClass = 'mat-mdc-snack-bar-handset';
+
+  constructor(
+    overlay: Overlay,
+    live: LiveAnnouncer,
+    injector: Injector,
+    breakpointObserver: BreakpointObserver,
+    @Optional() @SkipSelf() parentSnackBar: MatSnackBar,
+    @Inject(MAT_SNACK_BAR_DEFAULT_OPTIONS) defaultConfig: MatSnackBarConfig) {
+      super(overlay, live, injector, breakpointObserver, parentSnackBar, defaultConfig);
+    }
 }

src/material-experimental/mdc-snack-bar/testing/snack-bar-harness.spec.ts

@@ -3,5 +3,5 @@ import {runHarnessTests} from '@angular/material/snack-bar/testing/shared.spec';
 import {MatSnackBarHarness} from './snack-bar-harness';
 
 describe('MDC-based MatSnackBarHarness', () => {
-  runHarnessTests(MatSnackBarModule, MatSnackBar, MatSnackBarHarness as any);
+  runHarnessTests(MatSnackBarModule, MatSnackBar as any, MatSnackBarHarness as any);
 });

src/material/snack-bar/snack-bar.ts

@@ -42,11 +42,8 @@ export function MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY(): MatSnackBarConfig {
   return new MatSnackBarConfig();
 }
 
-/**
- * Service to dispatch Material Design snack bar messages.
- */
-@Injectable({providedIn: MatSnackBarModule})
-export class MatSnackBar implements OnDestroy {
+@Injectable()
+export abstract class _MatSnackBarBase implements OnDestroy {
   /**
    * Reference to the current snack bar in the view *at this level* (in the Angular injector tree).
    * If there is a parent snack-bar service, all operations should delegate to that parent
@@ -55,13 +52,13 @@ export class MatSnackBar implements OnDestroy {
   private _snackBarRefAtThisLevel: MatSnackBarRef<any> | null = null;
 
   /** The component that should be rendered as the snack bar's simple component. */
-  protected simpleSnackBarComponent: Type<TextOnlySnackBar> = SimpleSnackBar;
+  protected abstract simpleSnackBarComponent: Type<TextOnlySnackBar>;
 
   /** The container component that attaches the provided template or component. */
-  protected snackBarContainerComponent: Type<_SnackBarContainer> = MatSnackBarContainer;
+  protected abstract snackBarContainerComponent: Type<_SnackBarContainer>;
 
   /** The CSS class to apply for handset mode. */
-  protected handsetCssClass = 'mat-snack-bar-handset';
+  protected abstract handsetCssClass: string;
 
   /** Reference to the currently opened snackbar at *any* level. */
   get _openedSnackBarRef(): MatSnackBarRef<any> | null {
@@ -82,8 +79,8 @@ export class MatSnackBar implements OnDestroy {
       private _live: LiveAnnouncer,
       private _injector: Injector,
       private _breakpointObserver: BreakpointObserver,
-      @Optional() @SkipSelf() private _parentSnackBar: MatSnackBar,
-      @Inject(MAT_SNACK_BAR_DEFAULT_OPTIONS) private _defaultConfig: MatSnackBarConfig) {}
+      private _parentSnackBar: _MatSnackBarBase,
+      private _defaultConfig: MatSnackBarConfig) {}
 
   /**
    * Creates and dispatches a snack bar with a custom component for the content, removing any
@@ -300,3 +297,23 @@ export class MatSnackBar implements OnDestroy {
     });
   }
 }
+
+/**
+ * Service to dispatch Material Design snack bar messages.
+ */
+@Injectable({providedIn: MatSnackBarModule})
+export class MatSnackBar extends _MatSnackBarBase {
+  protected simpleSnackBarComponent = SimpleSnackBar;
+  protected snackBarContainerComponent = MatSnackBarContainer;
+  protected handsetCssClass = 'mat-snack-bar-handset';
+
+  constructor(
+    overlay: Overlay,
+    live: LiveAnnouncer,
+    injector: Injector,
+    breakpointObserver: BreakpointObserver,
+    @Optional() @SkipSelf() parentSnackBar: MatSnackBar,
+    @Inject(MAT_SNACK_BAR_DEFAULT_OPTIONS) defaultConfig: MatSnackBarConfig) {
+      super(overlay, live, injector, breakpointObserver, parentSnackBar, defaultConfig);
+    }
+}

tools/public_api_guard/material/snack-bar.md

@@ -49,19 +49,14 @@ export const MAT_SNACK_BAR_DEFAULT_OPTIONS: InjectionToken<MatSnackBarConfig<any
 export function MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY(): MatSnackBarConfig;
 
 // @public
-export class MatSnackBar implements OnDestroy {
-    constructor(_overlay: Overlay, _live: LiveAnnouncer, _injector: Injector, _breakpointObserver: BreakpointObserver, _parentSnackBar: MatSnackBar, _defaultConfig: MatSnackBarConfig);
-    dismiss(): void;
+export class MatSnackBar extends _MatSnackBarBase {
+    constructor(overlay: Overlay, live: LiveAnnouncer, injector: Injector, breakpointObserver: BreakpointObserver, parentSnackBar: MatSnackBar, defaultConfig: MatSnackBarConfig);
+    // (undocumented)
     protected handsetCssClass: string;
     // (undocumented)
-    ngOnDestroy(): void;
-    open(message: string, action?: string, config?: MatSnackBarConfig): MatSnackBarRef<TextOnlySnackBar>;
-    get _openedSnackBarRef(): MatSnackBarRef<any> | null;
-    set _openedSnackBarRef(value: MatSnackBarRef<any> | null);
-    openFromComponent<T>(component: ComponentType<T>, config?: MatSnackBarConfig): MatSnackBarRef<T>;
-    openFromTemplate(template: TemplateRef<any>, config?: MatSnackBarConfig): MatSnackBarRef<EmbeddedViewRef<any>>;
-    protected simpleSnackBarComponent: Type<TextOnlySnackBar>;
-    protected snackBarContainerComponent: Type<_SnackBarContainer>;
+    protected simpleSnackBarComponent: typeof SimpleSnackBar;
+    // (undocumented)
+    protected snackBarContainerComponent: typeof MatSnackBarContainer;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBar, [null, null, null, null, { optional: true; skipSelf: true; }, null]>;
     // (undocumented)
@@ -73,6 +68,26 @@ export const matSnackBarAnimations: {
     readonly snackBarState: AnimationTriggerMetadata;
 };
 
+// @public (undocumented)
+export abstract class _MatSnackBarBase implements OnDestroy {
+    constructor(_overlay: Overlay, _live: LiveAnnouncer, _injector: Injector, _breakpointObserver: BreakpointObserver, _parentSnackBar: _MatSnackBarBase, _defaultConfig: MatSnackBarConfig);
+    dismiss(): void;
+    protected abstract handsetCssClass: string;
+    // (undocumented)
+    ngOnDestroy(): void;
+    open(message: string, action?: string, config?: MatSnackBarConfig): MatSnackBarRef<TextOnlySnackBar>;
+    get _openedSnackBarRef(): MatSnackBarRef<any> | null;
+    set _openedSnackBarRef(value: MatSnackBarRef<any> | null);
+    openFromComponent<T>(component: ComponentType<T>, config?: MatSnackBarConfig): MatSnackBarRef<T>;
+    openFromTemplate(template: TemplateRef<any>, config?: MatSnackBarConfig): MatSnackBarRef<EmbeddedViewRef<any>>;
+    protected abstract simpleSnackBarComponent: Type<TextOnlySnackBar>;
+    protected abstract snackBarContainerComponent: Type<_SnackBarContainer>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatSnackBarBase, never>;
+    // (undocumented)
+    static ɵprov: i0.ɵɵInjectableDeclaration<_MatSnackBarBase>;
+}
+
 // @public
 export class MatSnackBarConfig<D = any> {
     announcementMessage?: string;