feat(virtual-scroll): move from cdk-experimental to cdk (#12438)

Author: mmalerba

src/cdk-experimental/scrolling/BUILD.bazel

@@ -1,36 +1,28 @@
 package(default_visibility=["//visibility:public"])
 load("@angular//:index.bzl", "ng_module")
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
-load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
 
 
 ng_module(
   name = "scrolling",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk-experimental/scrolling",
-  assets = [":virtual-scroll-viewport.css"] + glob(["**/*.html"]),
   deps = [
     "//src/cdk/coercion",
     "//src/cdk/collections",
-    "//src/cdk/platform",
+    "//src/cdk/scrolling",
     "@rxjs",
   ],
   tsconfig = "//src/cdk-experimental:tsconfig-build.json",
 )
 
-sass_binary(
-  name = "virtual_scroll_viewport_scss",
-  src = "virtual-scroll-viewport.scss",
-)
-
-
 ts_library(
   name = "scrolling_test_sources",
   testonly = 1,
   srcs = glob(["**/*.spec.ts"]),
   deps = [
     ":scrolling",
-    "//src/cdk/collections",
+    "//src/cdk/scrolling",
     "//src/cdk/testing",
     "@rxjs",
   ],
@@ -42,8 +34,6 @@ ts_web_test(
   bootstrap = [
     "//:web_test_bootstrap_scripts",
   ],
-  tags = ["manual"],
-
   # Do not sort
   deps = [
     "//:tslib_bundle",

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -8,10 +8,13 @@
 
 import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {ListRange} from '@angular/cdk/collections';
+import {
+  CdkVirtualScrollViewport,
+  VIRTUAL_SCROLL_STRATEGY,
+  VirtualScrollStrategy
+} from '@angular/cdk/scrolling';
 import {Directive, forwardRef, Input, OnChanges} from '@angular/core';
 import {Observable} from 'rxjs';
-import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
-import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 
 /**

src/cdk-experimental/scrolling/public-api.ts

@@ -7,8 +7,4 @@
  */
 
 export * from './auto-size-virtual-scroll';
-export * from './fixed-size-virtual-scroll';
 export * from './scrolling-module';
-export * from './virtual-for-of';
-export * from './virtual-scroll-strategy';
-export * from './virtual-scroll-viewport';

src/cdk-experimental/scrolling/scrolling-module.ts

@@ -8,23 +8,10 @@
 
 import {NgModule} from '@angular/core';
 import {CdkAutoSizeVirtualScroll} from './auto-size-virtual-scroll';
-import {CdkFixedSizeVirtualScroll} from './fixed-size-virtual-scroll';
-import {CdkVirtualForOf} from './virtual-for-of';
-import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 
 @NgModule({
-  exports: [
-    CdkAutoSizeVirtualScroll,
-    CdkFixedSizeVirtualScroll,
-    CdkVirtualForOf,
-    CdkVirtualScrollViewport,
-  ],
-  declarations: [
-    CdkAutoSizeVirtualScroll,
-    CdkFixedSizeVirtualScroll,
-    CdkVirtualForOf,
-    CdkVirtualScrollViewport,
-  ],
+  exports: [CdkAutoSizeVirtualScroll],
+  declarations: [CdkAutoSizeVirtualScroll],
 })
 export class ScrollingModule {}

src/cdk-experimental/scrolling/scrolling.md

@@ -0,0 +1,32 @@
+**Warning: this component is still experimental. It may have bugs and the API may change at any
+time**
+
+### Scrolling over items with different sizes
+When the items have different or unknown sizes, you can use the `AutoSizeVirtualScrollStrategy`.
+This can be added to your viewport by using the `autosize` directive.
+
+```html
+<cdk-virtual-scroll-viewport autosize>
+  ...
+</cdk-virtual-scroll-viewport>
+```
+
+The `autosize` strategy is configured through two inputs: `minBufferPx` and `addBufferPx`.
+
+**`minBufferPx`** determines the minimum space outside virtual scrolling viewport that will be
+filled with content. Increasing this will increase the amount of content a user will see before more
+content must be rendered. However, too large a value will cause more content to be rendered than is
+necessary.
+
+**`addBufferPx`** determines the amount of content that will be added incrementally as the viewport
+is scrolled. This should be greater than the size of `minBufferPx` so that one "render" is needed at
+a time.
+
+```html
+<cdk-virtual-scroll-viewport autosize minBufferPx="50" addBufferPx="100">
+  ...
+</cdk-virtual-scroll-viewport>
+```
+
+Because the auto size strategy needs to measure the size of the elements, its performance may not
+be as good as the fixed size strategy. 

src/cdk-experimental/scrolling/tsconfig-build.json

@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig-build",
   "files": [
-    "public-api.ts",
-    "./typings.d.ts"
+    "public-api.ts"
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,