fix(material-experimental/mdc-snack-bar): avoid hard reference to bas…

…e 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.

scripts/check-mdc-exports-config.ts

@@ -46,7 +46,8 @@ export const config = {
       '_MatSlideToggleRequiredValidatorModule'
     ],
     'mdc-snack-bar': [
-      // Private interface used to ensure consistency for MDC package.
+      // Private base class and interface that are only exported for MDC.
+      '_MatSnackBarBase',
       '_SnackBarContainer'
     ],
     'mdc-tabs': [

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/button';
 import {MatCommonModule} from '@angular/material-experimental/mdc-core';
 
-import {MatSimpleSnackBar} from './simple-snack-bar';
+import {SimpleSnackBar} from './simple-snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
 import {
   MatSnackBarAction,
@@ -37,14 +37,14 @@ import {
     MatSnackBarAction,
   ],
   declarations: [
-    MatSimpleSnackBar,
+    SimpleSnackBar,
     MatSnackBarContainer,
     MatSnackBarLabel,
     MatSnackBarActions,
     MatSnackBarAction,
   ],
   entryComponents: [
-    MatSimpleSnackBar,
+    SimpleSnackBar,
     MatSnackBarContainer,
   ],
 })

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',
@@ -25,7 +20,7 @@ import {
     'class': 'mat-mdc-simple-snack-bar',
   }
 })
-export class MatSimpleSnackBar implements TextOnlySnackBar {
+export class SimpleSnackBar implements TextOnlySnackBar {
   constructor(
       public snackBarRef: MatSnackBarRef<SimpleSnackBar>,
       @Inject(MAT_SNACK_BAR_DATA) public data: {message: string, action: string}) {

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

@@ -15,7 +15,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
   MAT_SNACK_BAR_DATA,
   MAT_SNACK_BAR_DEFAULT_OPTIONS,
-  MatSimpleSnackBar,
+  SimpleSnackBar,
   MatSnackBar,
   MatSnackBarConfig, MatSnackBarContainer,
   MatSnackBarModule,
@@ -191,7 +191,7 @@ describe('MatSnackBar', () => {
 
     viewContainerFixture.detectChanges();
 
-    expect(snackBarRef.instance instanceof MatSimpleSnackBar)
+    expect(snackBarRef.instance instanceof SimpleSnackBar)
         .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
     expect(snackBarRef.instance.snackBarRef)
         .toBe(snackBarRef,
@@ -215,7 +215,7 @@ describe('MatSnackBar', () => {
 
     viewContainerFixture.detectChanges();
 
-    expect(snackBarRef.instance instanceof MatSimpleSnackBar)
+    expect(snackBarRef.instance instanceof SimpleSnackBar)
         .toBe(true, 'Expected the snack bar content component to be SimpleSnackBar');
     expect(snackBarRef.instance.snackBarRef)
         .toBe(snackBarRef,

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

@@ -6,18 +6,35 @@
  * 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 {SimpleSnackBar} from './simple-snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
 
 /**
  * Service to dispatch Material Design snack bar messages.
  */
 @Injectable({providedIn: MatSnackBarModule})
-export class MatSnackBar extends BaseMatSnackBar {
-  protected simpleSnackBarComponent = MatSimpleSnackBar;
+export class MatSnackBar extends _MatSnackBarBase {
+  protected simpleSnackBarComponent = SimpleSnackBar;
   protected snackBarContainerComponent = MatSnackBarContainer;
   protected 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/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 applie 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.d.ts

@@ -1,3 +1,19 @@
+export declare abstract class _MatSnackBarBase implements OnDestroy {
+    get _openedSnackBarRef(): MatSnackBarRef<any> | null;
+    set _openedSnackBarRef(value: MatSnackBarRef<any> | null);
+    protected abstract handsetCssClass: string;
+    protected abstract simpleSnackBarComponent: Type<TextOnlySnackBar>;
+    protected abstract snackBarContainerComponent: Type<_SnackBarContainer>;
+    constructor(_overlay: Overlay, _live: LiveAnnouncer, _injector: Injector, _breakpointObserver: BreakpointObserver, _parentSnackBar: _MatSnackBarBase, _defaultConfig: MatSnackBarConfig);
+    dismiss(): void;
+    ngOnDestroy(): void;
+    open(message: string, action?: string, config?: MatSnackBarConfig): MatSnackBarRef<TextOnlySnackBar>;
+    openFromComponent<T>(component: ComponentType<T>, config?: MatSnackBarConfig): MatSnackBarRef<T>;
+    openFromTemplate(template: TemplateRef<any>, config?: MatSnackBarConfig): MatSnackBarRef<EmbeddedViewRef<any>>;
+    static ɵfac: i0.ɵɵFactoryDef<_MatSnackBarBase, never>;
+    static ɵprov: i0.ɵɵInjectableDef<_MatSnackBarBase>;
+}
+
 export interface _SnackBarContainer {
     _onAnnounce: Subject<any>;
     _onEnter: Subject<any>;
@@ -15,18 +31,11 @@ export declare const MAT_SNACK_BAR_DEFAULT_OPTIONS: InjectionToken<MatSnackBarCo
 
 export declare function MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY(): MatSnackBarConfig;
 
-export declare class MatSnackBar implements OnDestroy {
-    get _openedSnackBarRef(): MatSnackBarRef<any> | null;
-    set _openedSnackBarRef(value: MatSnackBarRef<any> | null);
+export declare class MatSnackBar extends _MatSnackBarBase {
     protected handsetCssClass: string;
-    protected simpleSnackBarComponent: Type<TextOnlySnackBar>;
-    protected snackBarContainerComponent: Type<_SnackBarContainer>;
-    constructor(_overlay: Overlay, _live: LiveAnnouncer, _injector: Injector, _breakpointObserver: BreakpointObserver, _parentSnackBar: MatSnackBar, _defaultConfig: MatSnackBarConfig);
-    dismiss(): void;
-    ngOnDestroy(): void;
-    open(message: string, action?: string, config?: MatSnackBarConfig): MatSnackBarRef<TextOnlySnackBar>;
-    openFromComponent<T>(component: ComponentType<T>, config?: MatSnackBarConfig): MatSnackBarRef<T>;
-    openFromTemplate(template: TemplateRef<any>, config?: MatSnackBarConfig): MatSnackBarRef<EmbeddedViewRef<any>>;
+    protected simpleSnackBarComponent: typeof SimpleSnackBar;
+    protected snackBarContainerComponent: typeof MatSnackBarContainer;
+    constructor(overlay: Overlay, live: LiveAnnouncer, injector: Injector, breakpointObserver: BreakpointObserver, parentSnackBar: MatSnackBar, defaultConfig: MatSnackBarConfig);
     static ɵfac: i0.ɵɵFactoryDef<MatSnackBar, [null, null, null, null, { optional: true; skipSelf: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDef<MatSnackBar>;
 }