@angular/cdk 10.1.1 → 10.2.0

package/fesm2015/scrolling.js

@@ -5,7 +5,7 @@ import { distinctUntilChanged, auditTime, filter, takeUntil, startWith, pairwise
 import { Platform, getRtlScrollAxisType, supportsScrollBehavior, PlatformModule } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import { Directionality, BidiModule } from '@angular/cdk/bidi';
-import { isDataSource, ArrayDataSource } from '@angular/cdk/collections';
+import { isDataSource, ArrayDataSource, _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy } from '@angular/cdk/collections';
 
 /**
  * @license
@@ -62,7 +62,7 @@ class FixedSizeVirtualScrollStrategy {
      * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.
      */
     updateItemAndBufferSize(itemSize, minBufferPx, maxBufferPx) {
-        if (maxBufferPx < minBufferPx) {
+        if (maxBufferPx < minBufferPx && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error('CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx');
         }
         this._itemSize = itemSize;
@@ -705,7 +705,7 @@ class CdkVirtualScrollViewport extends CdkScrollable {
         /** Emits when the index of the first element visible in the viewport changes. */
         this.scrolledIndexChange = new Observable((observer) => this._scrollStrategy.scrolledIndexChange.subscribe(index => Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
         /** A stream that emits whenever the rendered range changes. */
-        this.renderedRangeStream = this._renderedRangeSubject.asObservable();
+        this.renderedRangeStream = this._renderedRangeSubject;
         /**
          * The total size of all content (in pixels), including content that is not currently rendered.
          */
@@ -733,7 +733,7 @@ class CdkVirtualScrollViewport extends CdkScrollable {
         this._runAfterChangeDetection = [];
         /** Subscription to changes in the viewport size. */
         this._viewportChanges = Subscription.EMPTY;
-        if (!_scrollStrategy) {
+        if (!_scrollStrategy && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error('Error: cdk-virtual-scroll-viewport requires the "itemSize" property to be set.');
         }
         // @breaking-change 11.0.0 Remove null check for `viewportRuler`.
@@ -785,7 +785,7 @@ class CdkVirtualScrollViewport extends CdkScrollable {
     }
     /** Attaches a `CdkVirtualScrollRepeater` to this viewport. */
     attach(forOf) {
-        if (this._forOf) {
+        if (this._forOf && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error('CdkVirtualScrollViewport is already attached.');
         }
         // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
@@ -1011,7 +1011,7 @@ CdkVirtualScrollViewport.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [VIRTUAL_SCROLL_STRATEGY,] }] },
     { type: Directionality, decorators: [{ type: Optional }] },
     { type: ScrollDispatcher },
-    { type: ViewportRuler, decorators: [{ type: Optional }] }
+    { type: ViewportRuler }
 ];
 CdkVirtualScrollViewport.propDecorators = {
     orientation: [{ type: Input }],
@@ -1026,14 +1026,17 @@ CdkVirtualScrollViewport.propDecorators = {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-/** Helper to extract size from a DOM Node. */
-function getSize(orientation, node) {
+/** Helper to extract the offset of a DOM Node in a certain direction. */
+function getOffset(orientation, direction, node) {
     const el = node;
     if (!el.getBoundingClientRect) {
         return 0;
     }
     const rect = el.getBoundingClientRect();
-    return orientation == 'horizontal' ? rect.width : rect.height;
+    if (orientation === 'horizontal') {
+        return direction === 'start' ? rect.left : rect.right;
+    }
+    return direction === 'start' ? rect.top : rect.bottom;
 }
 /**
  * A directive similar to `ngForOf` to be used for rendering data inside a virtual scrolling
@@ -1047,21 +1050,19 @@ class CdkVirtualForOf {
     _template, 
     /** The set of available differs. */
     _differs, 
+    /** The strategy used to render items in the virtual scroll viewport. */
+    _viewRepeater, 
     /** The virtual scrolling viewport that these items are being rendered in. */
     _viewport, ngZone) {
         this._viewContainerRef = _viewContainerRef;
         this._template = _template;
         this._differs = _differs;
+        this._viewRepeater = _viewRepeater;
         this._viewport = _viewport;
         /** Emits when the rendered view of the data changes. */
         this.viewChange = new Subject();
         /** Subject that emits when a new DataSource instance is given. */
         this._dataSourceChanges = new Subject();
-        /**
-         * The size of the cache used to store templates that are not being used for re-use later.
-         * Setting the cache size to `0` will disable caching. Defaults to 20 templates.
-         */
-        this.cdkVirtualForTemplateCacheSize = 20;
         /** Emits whenever the data in the current DataSource changes. */
         this.dataStream = this._dataSourceChanges
             .pipe(
@@ -1077,12 +1078,6 @@ class CdkVirtualForOf {
         shareReplay(1));
         /** The differ used to calculate changes to the data. */
         this._differ = null;
-        /**
-         * The template cache used to hold on ot template instancess that have been stamped out, but don't
-         * currently need to be rendered. These instances will be reused in the future rather than
-         * stamping out brand new ones.
-         */
-        this._templateCache = [];
         /** Whether the rendered data should be updated during the next ngDoCheck cycle. */
         this._needsUpdate = false;
         this._destroyed = new Subject();
@@ -1131,6 +1126,16 @@ class CdkVirtualForOf {
             this._template = value;
         }
     }
+    /**
+     * The size of the cache used to store templates that are not being used for re-use later.
+     * Setting the cache size to `0` will disable caching. Defaults to 20 templates.
+     */
+    get cdkVirtualForTemplateCacheSize() {
+        return this._viewRepeater.viewCacheSize;
+    }
+    set cdkVirtualForTemplateCacheSize(size) {
+        this._viewRepeater.viewCacheSize = coerceNumberProperty(size);
+    }
     /**
      * Measures the combined size (width for horizontal orientation, height for vertical) of all items
      * in the specified range. Throws an error if the range includes items that are not currently
@@ -1140,24 +1145,36 @@ class CdkVirtualForOf {
         if (range.start >= range.end) {
             return 0;
         }
-        if (range.start < this._renderedRange.start || range.end > this._renderedRange.end) {
+        if ((range.start < this._renderedRange.start || range.end > this._renderedRange.end) &&
+            (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error(`Error: attempted to measure an item that isn't rendered.`);
         }
         // The index into the list of rendered views for the first item in the range.
         const renderedStartIndex = range.start - this._renderedRange.start;
         // The length of the range we're measuring.
         const rangeLen = range.end - range.start;
-        // Loop over all root nodes for all items in the range and sum up their size.
-        let totalSize = 0;
-        let i = rangeLen;
-        while (i--) {
+        // Loop over all the views, find the first and land node and compute the size by subtracting
+        // the top of the first node from the bottom of the last one.
+        let firstNode;
+        let lastNode;
+        // Find the first node by starting from the beginning and going forwards.
+        for (let i = 0; i < rangeLen; i++) {
+            const view = this._viewContainerRef.get(i + renderedStartIndex);
+            if (view && view.rootNodes.length) {
+                firstNode = lastNode = view.rootNodes[0];
+                break;
+            }
+        }
+        // Find the last node by starting from the end and going backwards.
+        for (let i = rangeLen - 1; i > -1; i--) {
             const view = this._viewContainerRef.get(i + renderedStartIndex);
-            let j = view ? view.rootNodes.length : 0;
-            while (j--) {
-                totalSize += getSize(orientation, view.rootNodes[j]);
+            if (view && view.rootNodes.length) {
+                lastNode = view.rootNodes[view.rootNodes.length - 1];
+                break;
             }
         }
-        return totalSize;
+        return firstNode && lastNode ?
+            getOffset(orientation, 'end', lastNode) - getOffset(orientation, 'start', firstNode) : 0;
     }
     ngDoCheck() {
         if (this._differ && this._needsUpdate) {
@@ -1181,9 +1198,7 @@ class CdkVirtualForOf {
         this.viewChange.complete();
         this._destroyed.next();
         this._destroyed.complete();
-        for (let view of this._templateCache) {
-            view.destroy();
-        }
+        this._viewRepeater.detach();
     }
     /** React to scroll state changes in the viewport. */
     _onRenderedDataChange() {
@@ -1218,21 +1233,7 @@ class CdkVirtualForOf {
     }
     /** Apply changes to the DOM. */
     _applyChanges(changes) {
-        // Rearrange the views to put them in the right location.
-        changes.forEachOperation((record, adjustedPreviousIndex, currentIndex) => {
-            if (record.previousIndex == null) { // Item added.
-                const view = this._insertViewForNewItem(currentIndex);
-                view.context.$implicit = record.item;
-            }
-            else if (currentIndex == null) { // Item removed.
-                this._cacheView(this._detachView(adjustedPreviousIndex));
-            }
-            else { // Item moved.
-                const view = this._viewContainerRef.get(adjustedPreviousIndex);
-                this._viewContainerRef.move(view, currentIndex);
-                view.context.$implicit = record.item;
-            }
-        });
+        this._viewRepeater.applyChanges(changes, this._viewContainerRef, (record, adjustedPreviousIndex, currentIndex) => this._getEmbeddedViewArgs(record, currentIndex), (record) => record.item);
         // Update $implicit for any items that had an identity change.
         changes.forEachIdentityChange((record) => {
             const view = this._viewContainerRef.get(record.currentIndex);
@@ -1248,28 +1249,6 @@ class CdkVirtualForOf {
             this._updateComputedContextProperties(view.context);
         }
     }
-    /** Cache the given detached view. */
-    _cacheView(view) {
-        if (this._templateCache.length < this.cdkVirtualForTemplateCacheSize) {
-            this._templateCache.push(view);
-        }
-        else {
-            const index = this._viewContainerRef.indexOf(view);
-            // It's very unlikely that the index will ever be -1, but just in case,
-            // destroy the view on its own, otherwise destroy it through the
-            // container to ensure that all the references are removed.
-            if (index === -1) {
-                view.destroy();
-            }
-            else {
-                this._viewContainerRef.remove(index);
-            }
-        }
-    }
-    /** Inserts a view for a new item, either from the cache or by creating a new one. */
-    _insertViewForNewItem(index) {
-        return this._insertViewFromCache(index) || this._createEmbeddedViewAt(index);
-    }
     /** Update the computed properties on the `CdkVirtualForOfContext`. */
     _updateComputedContextProperties(context) {
         context.first = context.index === 0;
@@ -1277,47 +1256,42 @@ class CdkVirtualForOf {
         context.even = context.index % 2 === 0;
         context.odd = !context.even;
     }
-    /** Creates a new embedded view and moves it to the given index */
-    _createEmbeddedViewAt(index) {
+    _getEmbeddedViewArgs(record, index) {
         // Note that it's important that we insert the item directly at the proper index,
         // rather than inserting it and the moving it in place, because if there's a directive
         // on the same node that injects the `ViewContainerRef`, Angular will insert another
         // comment node which can throw off the move when it's being repeated for all items.
-        return this._viewContainerRef.createEmbeddedView(this._template, {
-            $implicit: null,
-            // It's guaranteed that the iterable is not "undefined" or "null" because we only
-            // generate views for elements if the "cdkVirtualForOf" iterable has elements.
-            cdkVirtualForOf: this._cdkVirtualForOf,
-            index: -1,
-            count: -1,
-            first: false,
-            last: false,
-            odd: false,
-            even: false
-        }, index);
-    }
-    /** Inserts a recycled view from the cache at the given index. */
-    _insertViewFromCache(index) {
-        const cachedView = this._templateCache.pop();
-        if (cachedView) {
-            this._viewContainerRef.insert(cachedView, index);
-        }
-        return cachedView || null;
-    }
-    /** Detaches the embedded view at the given index. */
-    _detachView(index) {
-        return this._viewContainerRef.detach(index);
+        return {
+            templateRef: this._template,
+            context: {
+                $implicit: record.item,
+                // It's guaranteed that the iterable is not "undefined" or "null" because we only
+                // generate views for elements if the "cdkVirtualForOf" iterable has elements.
+                cdkVirtualForOf: this._cdkVirtualForOf,
+                index: -1,
+                count: -1,
+                first: false,
+                last: false,
+                odd: false,
+                even: false
+            },
+            index,
+        };
     }
 }
 CdkVirtualForOf.decorators = [
     { type: Directive, args: [{
                 selector: '[cdkVirtualFor][cdkVirtualForOf]',
+                providers: [
+                    { provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy },
+                ]
             },] }
 ];
 CdkVirtualForOf.ctorParameters = () => [
     { type: ViewContainerRef },
     { type: TemplateRef },
     { type: IterableDiffers },
+    { type: _RecycleViewRepeaterStrategy, decorators: [{ type: Inject, args: [_VIEW_REPEATER_STRATEGY,] }] },
     { type: CdkVirtualScrollViewport, decorators: [{ type: SkipSelf }] },
     { type: NgZone }
 ];
@@ -1343,6 +1317,9 @@ CdkScrollableModule.decorators = [
                 declarations: [CdkScrollable]
             },] }
 ];
+/**
+ * @docs-primary-export
+ */
 class ScrollingModule {
 }
 ScrollingModule.decorators = [