refactor(material/bottom-sheet): convert to standalone

Converts `material/bottom-sheet` to standalone.

Author: crisbeto

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

@@ -26,6 +26,7 @@ import {
 } from '@angular/core';
 import {Subscription} from 'rxjs';
 import {matBottomSheetAnimations} from './bottom-sheet-animations';
+import {CdkPortalOutlet} from '@angular/cdk/portal';
 
 /**
  * Internal component that wraps user-provided bottom sheet content.
@@ -52,6 +53,8 @@ import {matBottomSheetAnimations} from './bottom-sheet-animations';
     '(@state.start)': '_onAnimationStart($event)',
     '(@state.done)': '_onAnimationDone($event)',
   },
+  standalone: true,
+  imports: [CdkPortalOutlet],
 })
 export class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
   private _breakpointSubscription: Subscription;

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

@@ -11,10 +11,11 @@ import {PortalModule} from '@angular/cdk/portal';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {MatBottomSheetContainer} from './bottom-sheet-container';
+import {MatBottomSheet} from './bottom-sheet';
 
 @NgModule({
-  imports: [DialogModule, MatCommonModule, PortalModule],
+  imports: [DialogModule, MatCommonModule, PortalModule, MatBottomSheetContainer],
   exports: [MatBottomSheetContainer, MatCommonModule],
-  declarations: [MatBottomSheetContainer],
+  providers: [MatBottomSheet],
 })
 export class MatBottomSheetModule {}

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

@@ -3,7 +3,11 @@ import {A, ESCAPE} from '@angular/cdk/keycodes';
 import {OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
 import {_supportsShadowDom} from '@angular/cdk/platform';
 import {ViewportRuler} from '@angular/cdk/scrolling';
-import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '../../cdk/testing/private';
+import {
+  dispatchKeyboardEvent,
+  createKeyboardEvent,
+  dispatchEvent,
+} from '@angular/cdk/testing/private';
 import {Location} from '@angular/common';
 import {SpyLocation} from '@angular/common/testing';
 import {
@@ -45,8 +49,9 @@ describe('MatBottomSheet', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatBottomSheetModule, NoopAnimationsModule],
-      declarations: [
+      imports: [
+        MatBottomSheetModule,
+        NoopAnimationsModule,
         ComponentWithChildViewContainer,
         ComponentWithTemplateRef,
         ContentElementDialog,
@@ -857,8 +862,7 @@ describe('MatBottomSheet with parent MatBottomSheet', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatBottomSheetModule, NoopAnimationsModule],
-      declarations: [ComponentThatProvidesMatBottomSheet],
+      imports: [MatBottomSheetModule, NoopAnimationsModule, ComponentThatProvidesMatBottomSheet],
     }).compileComponents();
   }));
 
@@ -943,8 +947,12 @@ describe('MatBottomSheet with default options', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [MatBottomSheetModule, NoopAnimationsModule],
-      declarations: [ComponentWithChildViewContainer, DirectiveWithViewContainer],
+      imports: [
+        MatBottomSheetModule,
+        NoopAnimationsModule,
+        ComponentWithChildViewContainer,
+        DirectiveWithViewContainer,
+      ],
       providers: [{provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: defaultConfig}],
     });
 
@@ -998,12 +1006,19 @@ describe('MatBottomSheet with default options', () => {
   }));
 });
 
-@Directive({selector: 'dir-with-view-container'})
+@Directive({
+  selector: 'dir-with-view-container',
+  standalone: true,
+})
 class DirectiveWithViewContainer {
   constructor(public viewContainerRef: ViewContainerRef) {}
 }
 
-@Component({template: `<dir-with-view-container></dir-with-view-container>`})
+@Component({
+  template: `<dir-with-view-container></dir-with-view-container>`,
+  standalone: true,
+  imports: [DirectiveWithViewContainer],
+})
 class ComponentWithChildViewContainer {
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
 
@@ -1016,6 +1031,7 @@ class ComponentWithChildViewContainer {
   selector: 'arbitrary-component-with-template-ref',
   template: `<ng-template let-data let-bottomSheetRef="bottomSheetRef">
       Cheese {{localValue}} {{data?.value}}{{setRef(bottomSheetRef)}}</ng-template>`,
+  standalone: true,
 })
 class ComponentWithTemplateRef {
   localValue: string;
@@ -1029,7 +1045,10 @@ class ComponentWithTemplateRef {
   }
 }
 
-@Component({template: '<p>Pizza</p> <input> <button>Close</button>'})
+@Component({
+  template: '<p>Pizza</p> <input> <button>Close</button>',
+  standalone: true,
+})
 class PizzaMsg {
   constructor(
     public bottomSheetRef: MatBottomSheetRef<PizzaMsg>,
@@ -1038,32 +1057,42 @@ class PizzaMsg {
   ) {}
 }
 
-@Component({template: '<p>Taco</p>'})
+@Component({
+  template: '<p>Taco</p>',
+  standalone: true,
+})
 class TacoMsg {}
 
 @Component({
   template: `
     <h1>This is the title</h1>
     <p>This is the paragraph</p>
   `,
+  standalone: true,
 })
 class ContentElementDialog {}
 
 @Component({
   template: '',
   providers: [MatBottomSheet],
+  standalone: true,
+  imports: [MatBottomSheetModule],
 })
 class ComponentThatProvidesMatBottomSheet {
   constructor(public bottomSheet: MatBottomSheet) {}
 }
 
-@Component({template: ''})
+@Component({
+  template: '',
+  standalone: true,
+})
 class BottomSheetWithInjectedData {
   constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public data: any) {}
 }
 
 @Component({
   template: `<button>I'm a button</button>`,
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
 })
 class ShadowDomComponent {}

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

@@ -21,7 +21,6 @@ import {
 } from '@angular/core';
 import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetConfig} from './bottom-sheet-config';
 import {MatBottomSheetContainer} from './bottom-sheet-container';
-import {MatBottomSheetModule} from './bottom-sheet-module';
 import {MatBottomSheetRef} from './bottom-sheet-ref';
 
 /** Injection token that can be used to specify default bottom sheet options. */
@@ -32,7 +31,7 @@ export const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken<MatBottomShee
 /**
  * Service to trigger Material Design bottom sheets.
  */
-@Injectable({providedIn: MatBottomSheetModule})
+@Injectable({providedIn: 'root'})
 export class MatBottomSheet implements OnDestroy {
   private _bottomSheetRefAtThisLevel: MatBottomSheetRef<any> | null = null;
   private _dialog: Dialog;

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

@@ -16,8 +16,7 @@ describe('MatBottomSheetHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatBottomSheetModule, NoopAnimationsModule],
-      declarations: [BottomSheetHarnessTest],
+      imports: [MatBottomSheetModule, NoopAnimationsModule, BottomSheetHarnessTest],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BottomSheetHarnessTest);
@@ -55,6 +54,8 @@ describe('MatBottomSheetHarness', () => {
       Hello from the bottom sheet!
     </ng-template>
   `,
+  standalone: true,
+  imports: [MatBottomSheetModule],
 })
 class BottomSheetHarnessTest {
   @ViewChild(TemplateRef) template: TemplateRef<any>;

tools/public_api_guard/material/bottom-sheet.md

@@ -19,9 +19,9 @@ import { EventEmitter } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i2 from '@angular/cdk/dialog';
-import * as i3 from '@angular/material/core';
-import * as i4 from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/dialog';
+import * as i2 from '@angular/material/core';
+import * as i3 from '@angular/cdk/portal';
 import { InjectionToken } from '@angular/core';
 import { Injector } from '@angular/core';
 import { InteractivityChecker } from '@angular/cdk/a11y';
@@ -97,7 +97,7 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
     // (undocumented)
     _onAnimationStart(event: AnimationEvent_2): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null, null]>;
 }
@@ -109,7 +109,7 @@ export class MatBottomSheetModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatBottomSheetModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBottomSheetModule, [typeof i1.MatBottomSheetContainer], [typeof i2.DialogModule, typeof i3.MatCommonModule, typeof i4.PortalModule], [typeof i1.MatBottomSheetContainer, typeof i3.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBottomSheetModule, never, [typeof i1.DialogModule, typeof i2.MatCommonModule, typeof i3.PortalModule, typeof i4.MatBottomSheetContainer], [typeof i4.MatBottomSheetContainer, typeof i2.MatCommonModule]>;
 }
 
 // @public