ngx-virtual-scroller - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

CHANGELOG.md

@@ -0,1 +1,5 @@
+# v1.0.10
+
+* Refactor of speed improvement flag (renamed to executeRefreshOutsideAngularZone). With instructions & warning.
+
 # v1.0.9
@@ -2,0 +6,0 @@

dist/virtual-scroller.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import * as tween from '@tweenjs/tween.js';
@@ -47,7 +47,6 @@ export interface WrapGroupDimensions {
     protected readonly zone: NgZone;
-    protected readonly parentChangeDetectorRef: ChangeDetectorRef;
     viewPortItems: any[];
     window: Window;
     readonly viewPortInfo: IPageInfo;
-    experimentalPerformanceBoost: boolean;
+    executeRefreshOutsideAngularZone: boolean;
     protected _enableUnequalChildrenSizes: boolean;
@@ -114,3 +113,3 @@ enableUnequalChildrenSizes: boolean;
     protected isAngularUniversalSSR: boolean;
-    constructor(element: ElementRef, renderer: Renderer2, zone: NgZone, parentChangeDetectorRef: ChangeDetectorRef, platformId: Object, scrollThrottlingTime: any, scrollDebounceTime: any, scrollAnimationTime: any, scrollbarWidth: any, scrollbarHeight: any, checkResizeInterval: any, resizeBypassRefreshThreshold: any);
+    constructor(element: ElementRef, renderer: Renderer2, zone: NgZone, platformId: Object, scrollThrottlingTime: any, scrollDebounceTime: any, scrollAnimationTime: any, scrollbarWidth: any, scrollbarHeight: any, checkResizeInterval: any, resizeBypassRefreshThreshold: any);
     protected previousScrollBoundingRect: ClientRect;
@@ -117,0 +116,0 @@ protected checkScrollElementResized(): void;

dist/virtual-scroller.js

@@ -9,9 +9,8 @@ "use strict";
 var VirtualScrollerComponent = (function () {
-    function VirtualScrollerComponent(element, renderer, zone, parentChangeDetectorRef, platformId, scrollThrottlingTime, scrollDebounceTime, scrollAnimationTime, scrollbarWidth, scrollbarHeight, checkResizeInterval, resizeBypassRefreshThreshold) {
+    function VirtualScrollerComponent(element, renderer, zone, platformId, scrollThrottlingTime, scrollDebounceTime, scrollAnimationTime, scrollbarWidth, scrollbarHeight, checkResizeInterval, resizeBypassRefreshThreshold) {
         this.element = element;
         this.renderer = renderer;
         this.zone = zone;
-        this.parentChangeDetectorRef = parentChangeDetectorRef;
         this.window = window;
-        this.experimentalPerformanceBoost = false;
+        this.executeRefreshOutsideAngularZone = false;
         this._enableUnequalChildrenSizes = false;
@@ -521,5 +520,4 @@ this.useMarginInsteadOfTranslate = false;
                     };
-                    if (_this.experimentalPerformanceBoost) {
+                    if (_this.executeRefreshOutsideAngularZone) {
                         handleChanged();
-                        _this.parentChangeDetectorRef.detectChanges();
                     }
@@ -931,3 +929,2 @@ else {
         { type: core_1.NgZone, },
-        { type: core_1.ChangeDetectorRef, decorators: [{ type: core_1.SkipSelf },] },
         { type: Object, decorators: [{ type: core_1.Inject, args: [core_2.PLATFORM_ID,] },] },
@@ -943,3 +940,3 @@ { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollThrottlingTime',] },] },
     VirtualScrollerComponent.propDecorators = {
-        'experimentalPerformanceBoost': [{ type: core_1.Input },],
+        'executeRefreshOutsideAngularZone': [{ type: core_1.Input },],
         'enableUnequalChildrenSizes': [{ type: core_1.Input },],
@@ -946,0 +943,0 @@ 'useMarginInsteadOfTranslate': [{ type: core_1.Input },],

dist/virtual-scroller.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"ChangeEvent":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroller,[virtualScroller]","exportAs":"virtualScroller","template":"\n    <div class=\"total-padding\" #invisiblePadding></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[class.horizontal]":"horizontal","[class.vertical]":"!horizontal","[class.selfScroll]":"!parentScroll","$quoted$":["[class.horizontal]","[class.vertical]","[class.selfScroll]"]},"styles":["\n    :host {\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n\t\n\t:host.horizontal.selfScroll {\n      overflow-y: visible;\n      overflow-x: auto;\n\t}\n\t:host.vertical.selfScroll {\n      overflow-y: auto;\n      overflow-x: visible;\n\t}\n\t\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100vw;\n      max-height: 100vh;\n      position: absolute;\n    }\n\n\t.scrollable-content ::ng-deep > * {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host.horizontal {\n\t\twhite-space: nowrap;\n\t}\n\t\n\t:host.horizontal .scrollable-content {\n\t\tdisplay: flex;\n\t}\n\t\n\t:host.horizontal .scrollable-content ::ng-deep > * {\n\t\tflex-shrink: 0;\n\t\tflex-grow: 0;\n\t\twhite-space: initial;\n\t}\n\t\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n    \n    :host.horizontal .total-padding {\n      height: 100%;\n    }\n  "]}]}],"members":{"experimentalPerformanceBoost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"enableUnequalChildrenSizes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useMarginInsteadOfTranslate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollAnimationTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeBypassRefreshThreshold":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollThrottlingTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollDebounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"updateOnScrollFunction":[{"__symbolic":"method"}],"checkResizeInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"compareItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"horizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"revertParentOverscroll":[{"__symbolic":"method"}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"invisiblePaddingElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["invisiblePadding",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"headerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["header",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"invalidateAllCachedMeasurements":[{"__symbolic":"method"}],"invalidateCachedMeasurementForItem":[{"__symbolic":"method"}],"invalidateCachedMeasurementAtIndex":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"scrollToPosition":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollThrottlingTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollDebounceTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollAnimationTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarWidth"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarHeight"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.checkResizeInterval"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.resizeBypassRefreshThreshold"]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","name":"Object"},null,null,null,null,null,null,null]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"debounce":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollStartPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"ChangeEvent":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroller,[virtualScroller]","exportAs":"virtualScroller","template":"\n    <div class=\"total-padding\" #invisiblePadding></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[class.horizontal]":"horizontal","[class.vertical]":"!horizontal","[class.selfScroll]":"!parentScroll"},"styles":["\n    :host {\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n\t\n\t:host.horizontal.selfScroll {\n      overflow-y: visible;\n      overflow-x: auto;\n\t}\n\t:host.vertical.selfScroll {\n      overflow-y: auto;\n      overflow-x: visible;\n\t}\n\t\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100vw;\n      max-height: 100vh;\n      position: absolute;\n    }\n\n\t.scrollable-content ::ng-deep > * {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host.horizontal {\n\t\twhite-space: nowrap;\n\t}\n\t\n\t:host.horizontal .scrollable-content {\n\t\tdisplay: flex;\n\t}\n\t\n\t:host.horizontal .scrollable-content ::ng-deep > * {\n\t\tflex-shrink: 0;\n\t\tflex-grow: 0;\n\t\twhite-space: initial;\n\t}\n\t\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n    \n    :host.horizontal .total-padding {\n      height: 100%;\n    }\n  "]}]}],"members":{"experimentalPerformanceBoost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"enableUnequalChildrenSizes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useMarginInsteadOfTranslate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollAnimationTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeBypassRefreshThreshold":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollThrottlingTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollDebounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"updateOnScrollFunction":[{"__symbolic":"method"}],"checkResizeInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"compareItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"horizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"revertParentOverscroll":[{"__symbolic":"method"}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"invisiblePaddingElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["invisiblePadding",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"headerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["header",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"invalidateAllCachedMeasurements":[{"__symbolic":"method"}],"invalidateCachedMeasurementForItem":[{"__symbolic":"method"}],"invalidateCachedMeasurementAtIndex":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"scrollToPosition":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollThrottlingTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollDebounceTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollAnimationTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarWidth"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarHeight"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.checkResizeInterval"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.resizeBypassRefreshThreshold"]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","name":"Object"},null,null,null,null,null,null,null]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"debounce":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollStartPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"ChangeEvent":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroller,[virtualScroller]","exportAs":"virtualScroller","template":"\n    <div class=\"total-padding\" #invisiblePadding></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[class.horizontal]":"horizontal","[class.vertical]":"!horizontal","[class.selfScroll]":"!parentScroll","$quoted$":["[class.horizontal]","[class.vertical]","[class.selfScroll]"]},"styles":["\n    :host {\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n\t\n\t:host.horizontal.selfScroll {\n      overflow-y: visible;\n      overflow-x: auto;\n\t}\n\t:host.vertical.selfScroll {\n      overflow-y: auto;\n      overflow-x: visible;\n\t}\n\t\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100vw;\n      max-height: 100vh;\n      position: absolute;\n    }\n\n\t.scrollable-content ::ng-deep > * {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host.horizontal {\n\t\twhite-space: nowrap;\n\t}\n\t\n\t:host.horizontal .scrollable-content {\n\t\tdisplay: flex;\n\t}\n\t\n\t:host.horizontal .scrollable-content ::ng-deep > * {\n\t\tflex-shrink: 0;\n\t\tflex-grow: 0;\n\t\twhite-space: initial;\n\t}\n\t\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n    \n    :host.horizontal .total-padding {\n      height: 100%;\n    }\n  "]}]}],"members":{"executeRefreshOutsideAngularZone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"enableUnequalChildrenSizes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useMarginInsteadOfTranslate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollAnimationTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeBypassRefreshThreshold":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollThrottlingTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollDebounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"updateOnScrollFunction":[{"__symbolic":"method"}],"checkResizeInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"compareItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"horizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"revertParentOverscroll":[{"__symbolic":"method"}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"invisiblePaddingElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["invisiblePadding",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"headerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["header",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"invalidateAllCachedMeasurements":[{"__symbolic":"method"}],"invalidateCachedMeasurementForItem":[{"__symbolic":"method"}],"invalidateCachedMeasurementAtIndex":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"scrollToPosition":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollThrottlingTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollDebounceTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollAnimationTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarWidth"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarHeight"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.checkResizeInterval"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.resizeBypassRefreshThreshold"]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","name":"Object"},null,null,null,null,null,null,null]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"debounce":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollStartPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"ChangeEvent":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroller,[virtualScroller]","exportAs":"virtualScroller","template":"\n    <div class=\"total-padding\" #invisiblePadding></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[class.horizontal]":"horizontal","[class.vertical]":"!horizontal","[class.selfScroll]":"!parentScroll"},"styles":["\n    :host {\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n\t\n\t:host.horizontal.selfScroll {\n      overflow-y: visible;\n      overflow-x: auto;\n\t}\n\t:host.vertical.selfScroll {\n      overflow-y: auto;\n      overflow-x: visible;\n\t}\n\t\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100vw;\n      max-height: 100vh;\n      position: absolute;\n    }\n\n\t.scrollable-content ::ng-deep > * {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host.horizontal {\n\t\twhite-space: nowrap;\n\t}\n\t\n\t:host.horizontal .scrollable-content {\n\t\tdisplay: flex;\n\t}\n\t\n\t:host.horizontal .scrollable-content ::ng-deep > * {\n\t\tflex-shrink: 0;\n\t\tflex-grow: 0;\n\t\twhite-space: initial;\n\t}\n\t\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n    \n    :host.horizontal .total-padding {\n      height: 100%;\n    }\n  "]}]}],"members":{"executeRefreshOutsideAngularZone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"enableUnequalChildrenSizes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useMarginInsteadOfTranslate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrChildHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ssrViewportHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollAnimationTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeBypassRefreshThreshold":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollThrottlingTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollDebounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"updateOnScrollFunction":[{"__symbolic":"method"}],"checkResizeInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"compareItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"horizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"revertParentOverscroll":[{"__symbolic":"method"}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"vsEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"invisiblePaddingElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["invisiblePadding",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"headerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["header",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"invalidateAllCachedMeasurements":[{"__symbolic":"method"}],"invalidateCachedMeasurementForItem":[{"__symbolic":"method"}],"invalidateCachedMeasurementAtIndex":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"scrollToPosition":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollThrottlingTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollDebounceTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollAnimationTime"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarWidth"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.scrollbarHeight"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.checkResizeInterval"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["virtualScroller.resizeBypassRefreshThreshold"]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","name":"Object"},null,null,null,null,null,null,null]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"debounce":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollStartPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}]

package.json

 {
   "name": "ngx-virtual-scroller",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Angular 4+ module for virtual -infinite- list. Supports horizontal/vertical, variable heights, & multi-column",
@@ -5,0 +5,0 @@ "main": "dist/virtual-scroller.js",

README.md

@@ -47,30 +47,25 @@
 
+Preferred option:
 ```html
 <virtual-scroller #scroll [items]="items">
-
     <my-custom-component *ngFor="let item of scroll.viewPortItems">
     </my-custom-component>
-
 </virtual-scroller>
 ```
 
-alternatively
-
+option 2:
+note: viewPortItems must be a public field to work with AOT
 ```html
 <virtual-scroller [items]="items" (vsUpdate)="viewPortItems = $event">
-
     <my-custom-component *ngFor="let item of viewPortItems">
     </my-custom-component>
-
 </virtual-scroller>
 ```
 
-alternatively
-
+option 3:
+note: viewPortItems must be a public field to work with AOT
 ```html
 <div virtualScroller [items]="items" (vsUpdate)="viewPortItems = $event">
-
     <my-custom-component *ngFor="let item of viewPortItems">
     </my-custom-component>
-
 </div>
@@ -201,3 +196,3 @@ ```
 | ssrViewportHeight | number | The hard-coded visible height of the virtual-scroller (or [parentScroll]) to use if rendering via Angular Universal/Server-Side-Rendering. Defaults to 1080.
-| experimentalPerformanceBoost | boolean | Flag to call parentChangeDetectionRef.detectChanges() after refresh instead of wrapping refresh call inside zone.run(). This allows a refresh on virtual-scroller to only execute Angular change detection on itself & its children, rather than the entire app. Defaults to false. This is opt-in & experimental because it has a known issue with ChangeDetectionStrategy.OnPush. If you have any components which use OnPush (even if they're not children of ngx-virtual-scroller), this flag may break data-binding & prevent them from refreshing.
+| executeRefreshOutsideAngularZone | boolean | Defaults to false. This flag can provide a performance boost, but it causes side-effects related to Angular ChangeDetection that must be understood by the programmer. Strongly discouraged - this is detailed in a separate section.
 
@@ -207,15 +202,28 @@ Note: The Events without the "vs" prefix have been deprecated because they might conflict with native DOM events due to their "bubbling" nature. See https://github.com/angular/angular/issues/13997
 
-## Getting view port items without events
+## Performance (and the executeRefreshOutsideAngularZone flag)
 
-If you are using AOT compilation (I hope you are) then with classic usage (listening to `update` event) you are required to create a public field `viewPortItems` in your component.
-Here's a way to avoid it:
+Each component in Angular by default uses the ChangeDetectionStrategy.Default "CheckAlways" strategy. This means that Change Detection cycles will run frequently and will check *EVERY* data-binding expression on *EVERY* component to see if anything has changed. This makes it easier for programmers to code apps, but also makes apps slow. For simple apps it may not be noticed, but as apps become more complex it quickly becomes apparent. The correct way to fix this is to make cycles as fast as possible and to avoid unnecessary ChangeDetection cycles. Cycles will be faster if you avoid complex business logic in data-bindings. You can avoid unnecessary Cycles by converting your components to use ChangeDetectionStrategy.OnPush. When doing this, you have to explicitly tell Angular when you're modifying the value of a data-binding expression, because it will not be checked automatically. This topic can be researched online, there are a lot of detailed articles about it.
+
+virtual-scroller causes a full ChangeDetection cycle to run during every refresh (scrolling/etc). This is standard practice for all Angular components/libraries. If you have an app that is usually fast, but becomes slow while scrolling virtual-scroller, the correct solution is to convert all of your components to use ChangeDetectionStrategy.OnPush. However, this may not be easy. If you want a quick solution that masks the real problem, you can use the scrollThrottlingTime, scrollDebounceTime, or executeRefreshOutsideAngularZone APIs.
+
+The executeRefreshOutsideAngularZone is strongly discouraged because it disables Angular's automatic Change Detection from any code paths started by virtual-scroller. This essentially randomly converts some of your app's components to use ChangeDetectionStrategy.OnPush without you explicitly choosing to do so. Because this wasn't an intentional choice, you won't have code to tell Angular when those components need to re-bind their UI, which will cause the DOM to not update when it should. These UI bugs won't be consistent, because it'll depend on which code path caused your data-binding model to change. The list of potential code paths in virtual-scroller is too long to make an exhaustive list & which of your components are affected is completely dependent on what business logic you execute in response to those virtual-scroller code paths. If you choose to use this flag, it's your responsibility to do extensive testing in your app and to thoroughly read and understand the virtual-scroller source code. You probably should not make this choice unless you have a strong understanding of Angular's ChangeDetection internals.
+
+Although executeRefreshOutsideAngularZone is strongly discouraged, it is up to the consuming app's programmer to determine if it's the right decision for their application.
+
+If you're lucky, you can implement this flag as follows and get a free speed boost while scrolling:
+```ts
+//parent.component.ts
+constructor (public changeDetectorRef: ChangeDetectorRef) { }
+```
+
 ```html
-<virtual-scroller #scroll [items]="items">
-
+<!-- parent.component.html -->
+<virtual-scroller #scroll [items]="items" [executeRefreshOutsideAngularZone]="true" (vsUpdate)="changeDetectorRef.detectChanges();">
     <my-custom-component *ngFor="let item of scroll.viewPortItems">
     </my-custom-component>
-
 </virtual-scroller>
 ```
 
+If you're unlucky, this will cause a bunch of UI bugs because you've disabled Angular's change detection for any code path started by virtual-scroller. In these cases, you'll have to track down & fix each bug separately (usually by adding `changeDetectorRef.detectChanges()`). These bugs might continue to crop up in the future as you make minor code changes. In the end, you might decide to stop using the buggy flag & instead do the correct fix which is to switch all your components to using ChangeDetectionStrategy.OnPush.
+
 ## Additional elements in scroll
@@ -222,0 +230,0 @@

No alert changes

Improved metrics

Total package byte prevSize

13236314

increased by0.02%

Number of lines in readme file

571

increased by1.42%

Worsened metrics

Lines of code

17058

decreased by-0.03%

No dependency changes