refactor(scrolling): add dedicated module for CdkScrollable (#19064)

This is something that originally came up in #18082 and has been coming up as issues on GitHub. Some of our overlay-based components depend on `CdkScrollable` to tell them when to reposition, but the problem is that it's not very easy to consume, because:

1. It has an attribute selector so if it doesn't match, nothing will throw an error.
2. It has to be brought in through the `ScrollingModule` into the proper user module. The `ScrollingModule` is somewhat large, because it contains other things like virtual scrolling.

These changes address the issues by adding a small module dedicated only to `CdkScrollable`, and exporting the module through the relevant Material components.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -23,7 +23,7 @@ import {
 } from '@angular/core';
 import {TestBed, ComponentFixture, fakeAsync, flush, tick} from '@angular/core/testing';
 import {DOCUMENT} from '@angular/common';
-import {ViewportRuler, ScrollingModule} from '@angular/cdk/scrolling';
+import {ViewportRuler, CdkScrollableModule} from '@angular/cdk/scrolling';
 import {_supportsShadowDom} from '@angular/cdk/platform';
 import {of as observableOf} from 'rxjs';
 
@@ -48,7 +48,7 @@ describe('CdkDrag', () => {
       extraDeclarations: Type<any>[] = []): ComponentFixture<T> {
     TestBed
         .configureTestingModule({
-          imports: [DragDropModule, ScrollingModule],
+          imports: [DragDropModule, CdkScrollableModule],
           declarations: [componentType, PassthroughComponent, ...extraDeclarations],
           providers: [
             {

src/cdk/drag-drop/drag-drop-module.ts

@@ -7,6 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {CdkDropList} from './directives/drop-list';
 import {CdkDropListGroup} from './directives/drop-list-group';
 import {CdkDrag} from './directives/drag';
@@ -25,6 +26,7 @@ import {DragDrop} from './drag-drop';
     CdkDragPlaceholder,
   ],
   exports: [
+    CdkScrollableModule,
     CdkDropList,
     CdkDropListGroup,
     CdkDrag,

src/cdk/scrolling/scrolling-module.ts

@@ -15,17 +15,26 @@ import {CdkVirtualForOf} from './virtual-for-of';
 import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 @NgModule({
-  imports: [BidiModule, PlatformModule],
+  exports: [CdkScrollable],
+  declarations: [CdkScrollable]
+})
+export class CdkScrollableModule {}
+
+@NgModule({
+  imports: [
+    BidiModule,
+    PlatformModule,
+    CdkScrollableModule
+  ],
   exports: [
     BidiModule,
+    CdkScrollableModule,
     CdkFixedSizeVirtualScroll,
-    CdkScrollable,
     CdkVirtualForOf,
     CdkVirtualScrollViewport,
   ],
   declarations: [
     CdkFixedSizeVirtualScroll,
-    CdkScrollable,
     CdkVirtualForOf,
     CdkVirtualScrollViewport,
   ],

src/material-experimental/mdc-menu/BUILD.bazel

@@ -23,6 +23,7 @@ ng_module(
     module_name = "@angular/material-experimental/mdc-menu",
     deps = [
         "//src/cdk/overlay",
+        "//src/cdk/scrolling",
         "//src/material/core",
         "//src/material/menu",
         "@npm//@angular/animations",

src/material-experimental/mdc-menu/module.ts

@@ -11,6 +11,7 @@ import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {_MatMenuDirectivesModule} from '@angular/material/menu';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatMenu, MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER} from './menu';
 import {MatMenuItem} from './menu-item';
 
@@ -22,7 +23,7 @@ import {MatMenuItem} from './menu-item';
     OverlayModule,
     _MatMenuDirectivesModule
   ],
-  exports: [MatMenu, MatCommonModule, MatMenuItem, _MatMenuDirectivesModule],
+  exports: [CdkScrollableModule, MatMenu, MatCommonModule, MatMenuItem, _MatMenuDirectivesModule],
   declarations: [MatMenu, MatMenuItem],
   providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER]
 })

src/material/autocomplete/autocomplete-module.ts

@@ -10,6 +10,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {MatOptionModule, MatCommonModule} from '@angular/material/core';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatAutocomplete} from './autocomplete';
 import {
   MatAutocompleteTrigger,
@@ -20,6 +21,7 @@ import {MatAutocompleteOrigin} from './autocomplete-origin';
 @NgModule({
   imports: [MatOptionModule, OverlayModule, MatCommonModule, CommonModule],
   exports: [
+    CdkScrollableModule,
     MatAutocomplete,
     MatOptionModule,
     MatAutocompleteTrigger,

src/material/datepicker/datepicker-module.ts

@@ -13,6 +13,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatCalendar, MatCalendarHeader} from './calendar';
 import {MatCalendarBody} from './calendar-body';
 import {
@@ -38,6 +39,7 @@ import {MatYearView} from './year-view';
     PortalModule,
   ],
   exports: [
+    CdkScrollableModule,
     MatCalendar,
     MatCalendarBody,
     MatDatepicker,

src/material/menu/BUILD.bazel

@@ -28,6 +28,7 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/platform",
         "//src/cdk/portal",
+        "//src/cdk/scrolling",
         "//src/material/core",
         "@npm//@angular/animations",
         "@npm//@angular/common",

src/material/menu/menu-module.ts

@@ -10,6 +10,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {_MatMenu} from './menu';
 import {MatMenuContent} from './menu-content';
 import {MatMenuItem} from './menu-item';
@@ -38,7 +39,7 @@ export class _MatMenuDirectivesModule {}
     OverlayModule,
     _MatMenuDirectivesModule,
   ],
-  exports: [MatCommonModule, _MatMenu, MatMenuItem, _MatMenuDirectivesModule],
+  exports: [CdkScrollableModule, MatCommonModule, _MatMenu, MatMenuItem, _MatMenuDirectivesModule],
   declarations: [_MatMenu, MatMenuItem],
   providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER]
 })

src/material/select/select-module.ts

@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatOptionModule} from '@angular/material/core';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MAT_SELECT_SCROLL_STRATEGY_PROVIDER, MatSelect, MatSelectTrigger} from './select';
 
 
@@ -21,7 +22,14 @@ import {MAT_SELECT_SCROLL_STRATEGY_PROVIDER, MatSelect, MatSelectTrigger} from '
     MatOptionModule,
     MatCommonModule,
   ],
-  exports: [MatFormFieldModule, MatSelect, MatSelectTrigger, MatOptionModule, MatCommonModule],
+  exports: [
+    CdkScrollableModule,
+    MatFormFieldModule,
+    MatSelect,
+    MatSelectTrigger,
+    MatOptionModule,
+    MatCommonModule
+  ],
   declarations: [MatSelect, MatSelectTrigger],
   providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER]
 })