feat(bottom-sheet): allow for scroll strategy to be configured (#15535)

Allows for the scroll strategy of a bottom sheet to be changed.

Fixes #15533.

Author: crisbeto

src/material/bottom-sheet/bottom-sheet-config.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ViewContainerRef, InjectionToken} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
+import {ScrollStrategy} from '@angular/cdk/overlay';
+import {InjectionToken, ViewContainerRef} from '@angular/core';
 
 /** Injection token that can be used to access the data that was passed in to a bottom sheet. */
 export const MAT_BOTTOM_SHEET_DATA = new InjectionToken<any>('MatBottomSheetData');
@@ -58,4 +59,7 @@ export class MatBottomSheetConfig<D = any> {
    * previously-focused element, after it's closed.
    */
   restoreFocus?: boolean = true;
+
+  /** Scroll strategy to be used for the bottom sheet. */
+  scrollStrategy?: ScrollStrategy;
 }

src/material/bottom-sheet/bottom-sheet.spec.ts

@@ -1,8 +1,10 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {A, ESCAPE} from '@angular/cdk/keycodes';
-import {OverlayContainer} from '@angular/cdk/overlay';
+import {OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
+import {Location} from '@angular/common';
+import {SpyLocation} from '@angular/common/testing';
 import {
   Component,
   Directive,
@@ -22,10 +24,9 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
-import {Location} from '@angular/common';
-import {SpyLocation} from '@angular/common/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MatBottomSheet, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS} from './bottom-sheet';
+
+import {MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet} from './bottom-sheet';
 import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetConfig} from './bottom-sheet-config';
 import {MatBottomSheetModule} from './bottom-sheet-module';
 import {MatBottomSheetRef} from './bottom-sheet-ref';
@@ -405,6 +406,17 @@ describe('MatBottomSheet', () => {
     expect(overlayContainerElement.querySelector('mat-bottom-sheet-container')).toBeTruthy();
   }));
 
+  it('should be able to attach a custom scroll strategy', fakeAsync(() => {
+       const scrollStrategy: ScrollStrategy = {
+         attach: () => {},
+         enable: jasmine.createSpy('scroll strategy enable spy'),
+         disable: () => {}
+       };
+
+       bottomSheet.open(PizzaMsg, {scrollStrategy});
+       expect(scrollStrategy.enable).toHaveBeenCalled();
+     }));
+
   describe('passing in data', () => {
     it('should be able to pass in data', () => {
       const config = {

src/material/bottom-sheet/bottom-sheet.ts

@@ -152,11 +152,8 @@ export class MatBottomSheet implements OnDestroy {
       hasBackdrop: config.hasBackdrop,
       disposeOnNavigation: config.closeOnNavigation,
       maxWidth: '100%',
-      scrollStrategy: this._overlay.scrollStrategies.block(),
-      positionStrategy: this._overlay.position()
-        .global()
-        .centerHorizontally()
-        .bottom('0')
+      scrollStrategy: config.scrollStrategy || this._overlay.scrollStrategies.block(),
+      positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0')
     });
 
     if (config.backdropClass) {

tools/public_api_guard/material/bottom-sheet.d.ts

@@ -26,6 +26,7 @@ export declare class MatBottomSheetConfig<D = any> {
     hasBackdrop?: boolean;
     panelClass?: string | string[];
     restoreFocus?: boolean;
+    scrollStrategy?: ScrollStrategy;
     viewContainerRef?: ViewContainerRef;
 }