angular2-virtual-scroll - npm Package Compare versions

Comparing version 0.4.11 to 0.4.12

CHANGELOG.md

@@ -0,1 +1,8 @@
+# v0.4.12
+
+* Fix scrollbar measurements (horizontal/vertical calculations were backwards)
+* After component is removed it reverts css overflow-x/overflow-y of parentScroll back to their original values.
+* Previously, if scroll parent was resized it would automatically call Refresh. This still occurs, except if new size is 0.
+* Breaking Change: The start and end values of the change/start/end events were including bufferAmount, which made them confusing. This has been corrected.
+
 # v0.4.11
@@ -2,0 +9,0 @@

dist/virtual-scroll.d.ts

@@ -29,6 +29,10 @@ import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 export interface IPageInfo {
-    arrayStartIndex: number;
-    arrayEndIndex: number;
+    startIndex: number;
+    endIndex: number;
 }
-export interface IViewport extends IPageInfo {
+export interface IPageInfoWithBuffer extends IPageInfo {
+    startIndexWithBuffer: number;
+    endIndexWithBuffer: number;
+}
+export interface IViewport extends IPageInfoWithBuffer {
     padding: number;
@@ -65,2 +69,7 @@ scrollLength: number;
     horizontal: boolean;
+    protected revertParentOverscroll(): void;
+    protected oldParentScrollOverflow: {
+        x: string;
+        y: string;
+    };
     protected _parentScroll: Element | Window;
@@ -122,4 +131,4 @@ parentScroll: Element | Window;
     protected previousScrollNumberElements: number;
-    protected calculatePadding(arrayStartIndex: number, dimensions: IDimensions, allowUnequalChildrenSizes_Experimental: boolean): number;
-    protected calculatePageInfo(scrollPosition: number, dimensions: IDimensions): IPageInfo;
+    protected calculatePadding(arrayStartIndexWithBuffer: number, dimensions: IDimensions, allowUnequalChildrenSizes_Experimental: boolean): number;
+    protected calculatePageInfo(scrollPosition: number, dimensions: IDimensions): IPageInfoWithBuffer;
     protected calculateViewport(): IViewport;
@@ -126,0 +135,0 @@ }

dist/virtual-scroll.js

@@ -42,4 +42,4 @@ "use strict";
             return {
-                arrayStartIndex: pageInfo.arrayStartIndex || 0,
-                arrayEndIndex: pageInfo.arrayEndIndex || 0
+                startIndex: pageInfo.startIndex || 0,
+                endIndex: pageInfo.endIndex || 0
             };
@@ -128,2 +128,10 @@ },
     });
+    VirtualScrollComponent.prototype.revertParentOverscroll = function () {
+        var scrollElement = this.getScrollElement();
+        if (scrollElement && this.oldParentScrollOverflow) {
+            scrollElement.style['overflow-y'] = this.oldParentScrollOverflow.y;
+            scrollElement.style['overflow-x'] = this.oldParentScrollOverflow.x;
+        }
+        this.oldParentScrollOverflow = undefined;
+    };
     Object.defineProperty(VirtualScrollComponent.prototype, "parentScroll", {
@@ -137,2 +145,3 @@ get: function () {
             }
+            this.revertParentOverscroll();
             this._parentScroll = value;
@@ -142,2 +151,3 @@ this.addScrollEventHandlers();
             if (scrollElement !== this.element.nativeElement) {
+                this.oldParentScrollOverflow = { x: scrollElement.style['overflow-x'], y: scrollElement.style['overflow-y'] };
                 scrollElement.style['overflow-y'] = this.horizontal ? 'visible' : 'auto';
@@ -155,2 +165,3 @@ scrollElement.style['overflow-x'] = this.horizontal ? 'auto' : 'visible';
         this.removeScrollEventHandlers();
+        this.revertParentOverscroll();
     };
@@ -199,5 +210,4 @@ VirtualScrollComponent.prototype.ngOnChanges = function (changes) {
             var dimensions = _this.calculateDimensions();
-            var bufferSize = _this.bufferAmount * dimensions.itemsPerWrapGroup;
-            var desiredStartIndex = Math.min(Math.max(index - bufferSize, 0), dimensions.itemCount - 1);
-            if (_this.previousViewPort.arrayStartIndex === desiredStartIndex) {
+            var desiredStartIndex = Math.min(Math.max(index, 0), dimensions.itemCount - 1);
+            if (_this.previousViewPort.startIndex === desiredStartIndex) {
                 if (animationCompletedCallback) {
@@ -280,3 +290,5 @@ animationCompletedCallback();
             this.previousScrollBoundingRect = boundingRect;
-            this.refresh_internal(false);
+            if (boundingRect.width > 0 && boundingRect.height > 0) {
+                this.refresh_internal(false);
+            }
         }
@@ -338,4 +350,4 @@ };
                 var viewport = _this.calculateViewport();
-                var startChanged = itemsArrayModified || viewport.arrayStartIndex !== _this.previousViewPort.arrayStartIndex;
-                var endChanged = itemsArrayModified || viewport.arrayEndIndex !== _this.previousViewPort.arrayEndIndex;
+                var startChanged = itemsArrayModified || viewport.startIndex !== _this.previousViewPort.startIndex;
+                var endChanged = itemsArrayModified || viewport.endIndex !== _this.previousViewPort.endIndex;
                 var scrollLengthChanged = viewport.scrollLength !== _this.previousViewPort.scrollLength;
@@ -360,3 +372,3 @@ var paddingChanged = viewport.padding !== _this.previousViewPort.padding;
                         // update the scroll list to trigger re-render of components in viewport
-                        _this.viewPortItems = viewport.arrayStartIndex >= 0 && viewport.arrayEndIndex >= 0 ? _this.items.slice(viewport.arrayStartIndex, viewport.arrayEndIndex + 1) : [];
+                        _this.viewPortItems = viewport.startIndexWithBuffer >= 0 && viewport.endIndexWithBuffer >= 0 ? _this.items.slice(viewport.startIndexWithBuffer, viewport.endIndexWithBuffer + 1) : [];
                         _this.update.emit(_this.viewPortItems);
@@ -366,12 +378,12 @@ _this.vsUpdate.emit(_this.viewPortItems);
                             if (startChanged) {
-                                _this.start.emit({ start: viewport.arrayStartIndex, end: viewport.arrayEndIndex });
-                                _this.vsStart.emit({ start: viewport.arrayStartIndex, end: viewport.arrayEndIndex });
+                                _this.start.emit({ start: viewport.startIndex, end: viewport.endIndex });
+                                _this.vsStart.emit({ start: viewport.startIndex, end: viewport.endIndex });
                             }
                             if (endChanged) {
-                                _this.end.emit({ start: viewport.arrayStartIndex, end: viewport.arrayEndIndex });
-                                _this.vsEnd.emit({ start: viewport.arrayStartIndex, end: viewport.arrayEndIndex });
+                                _this.end.emit({ start: viewport.startIndex, end: viewport.endIndex });
+                                _this.vsEnd.emit({ start: viewport.startIndex, end: viewport.endIndex });
                             }
                             if (startChanged || endChanged) {
-                                _this.change.emit({ start: viewport.arrayStartIndex, end: viewport.arrayEndIndex });
-                                _this.vsChange.emit({ start: viewport.arrayStartIndex, end: viewport.arrayEndIndex });
+                                _this.change.emit({ start: viewport.startIndex, end: viewport.endIndex });
+                                _this.vsChange.emit({ start: viewport.startIndex, end: viewport.endIndex });
                             }
@@ -515,6 +527,6 @@ }
         var maxCalculatedScrollBarSize = 25; // Note: Formula to auto-calculate doesn't work for ParentScroll, so we default to this if not set by consuming application
-        this.calculatedScrollbarWidth = Math.max(Math.min(scrollElement.offsetHeight - scrollElement.clientHeight, maxCalculatedScrollBarSize), this.calculatedScrollbarWidth);
-        this.calculatedScrollbarHeight = Math.max(Math.min(scrollElement.offsetWidth - scrollElement.clientWidth, maxCalculatedScrollBarSize), this.calculatedScrollbarHeight);
-        var viewWidth = scrollElement.clientWidth - (this.scrollbarWidth || this.calculatedScrollbarWidth || (this.horizontal ? 0 : maxCalculatedScrollBarSize));
-        var viewHeight = scrollElement.clientHeight - (this.scrollbarHeight || this.calculatedScrollbarHeight || (this.horizontal ? maxCalculatedScrollBarSize : 0));
+        this.calculatedScrollbarHeight = Math.max(Math.min(scrollElement.offsetHeight - scrollElement.clientHeight, maxCalculatedScrollBarSize), this.calculatedScrollbarHeight);
+        this.calculatedScrollbarWidth = Math.max(Math.min(scrollElement.offsetWidth - scrollElement.clientWidth, maxCalculatedScrollBarSize), this.calculatedScrollbarWidth);
+        var viewWidth = scrollElement.offsetWidth - (this.scrollbarWidth || this.calculatedScrollbarWidth || (this.horizontal ? 0 : maxCalculatedScrollBarSize));
+        var viewHeight = scrollElement.offsetHeight - (this.scrollbarHeight || this.calculatedScrollbarHeight || (this.horizontal ? maxCalculatedScrollBarSize : 0));
         var content = (this.containerElementRef && this.containerElementRef.nativeElement) || this.contentElementRef.nativeElement;
@@ -547,3 +559,4 @@ var itemsPerWrapGroup = this.countItemsPerWrapGroup();
         else {
-            var arrayStartIndex = this.previousViewPort.arrayStartIndex || 0;
+            var scrollOffset = scrollElement[this._scrollType] - (this.previousViewPort ? this.previousViewPort.padding : 0);
+            var arrayStartIndex = this.previousViewPort.startIndexWithBuffer || 0;
             var wrapGroupIndex = Math.ceil(arrayStartIndex / itemsPerWrapGroup);
@@ -577,6 +590,11 @@ var maxWidthForWrapGroup = 0;
                     this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights += maxHeightForWrapGroup;
-                    sumOfVisibleMaxWidths += maxWidthForWrapGroup;
-                    sumOfVisibleMaxHeights += maxHeightForWrapGroup;
                     if (this.horizontal) {
-                        if (viewWidth > sumOfVisibleMaxWidths) {
+                        var maxVisibleWidthForWrapGroup = Math.min(maxWidthForWrapGroup, Math.max(viewWidth - sumOfVisibleMaxWidths, 0));
+                        if (scrollOffset > 0) {
+                            var scrollOffsetToRemove = Math.min(scrollOffset, maxVisibleWidthForWrapGroup);
+                            maxVisibleWidthForWrapGroup -= scrollOffsetToRemove;
+                            scrollOffset -= scrollOffsetToRemove;
+                        }
+                        sumOfVisibleMaxWidths += maxVisibleWidthForWrapGroup;
+                        if (maxVisibleWidthForWrapGroup > 0 && viewWidth >= sumOfVisibleMaxWidths) {
                             ++wrapGroupsPerPage;
@@ -586,3 +604,10 @@ }
                     else {
-                        if (viewHeight > sumOfVisibleMaxHeights) {
+                        var maxVisibleHeightForWrapGroup = Math.min(maxHeightForWrapGroup, Math.max(viewHeight - sumOfVisibleMaxHeights, 0));
+                        if (scrollOffset > 0) {
+                            var scrollOffsetToRemove = Math.min(scrollOffset, maxVisibleHeightForWrapGroup);
+                            maxVisibleHeightForWrapGroup -= scrollOffsetToRemove;
+                            scrollOffset -= scrollOffsetToRemove;
+                        }
+                        sumOfVisibleMaxHeights += maxVisibleHeightForWrapGroup;
+                        if (maxVisibleHeightForWrapGroup > 0 && viewHeight >= sumOfVisibleMaxHeights) {
                             ++wrapGroupsPerPage;
@@ -600,2 +625,12 @@ }
             defaultChildHeight = this.childHeight || averageChildHeight || viewHeight;
+            if (this.horizontal) {
+                if (viewWidth > sumOfVisibleMaxWidths) {
+                    wrapGroupsPerPage += Math.ceil((viewWidth - sumOfVisibleMaxWidths) / defaultChildWidth);
+                }
+            }
+            else {
+                if (viewHeight > sumOfVisibleMaxHeights) {
+                    wrapGroupsPerPage += Math.ceil((viewHeight - sumOfVisibleMaxHeights) / defaultChildHeight);
+                }
+            }
         }
@@ -634,3 +669,3 @@ var itemsPerPage = itemsPerWrapGroup * wrapGroupsPerPage;
     };
-    VirtualScrollComponent.prototype.calculatePadding = function (arrayStartIndex, dimensions, allowUnequalChildrenSizes_Experimental) {
+    VirtualScrollComponent.prototype.calculatePadding = function (arrayStartIndexWithBuffer, dimensions, allowUnequalChildrenSizes_Experimental) {
         if (dimensions.itemCount === 0) {
@@ -640,3 +675,3 @@ return 0;
         var defaultScrollLengthPerWrapGroup = dimensions[this._childScrollDim];
-        var startingWrapGroupIndex = Math.ceil(arrayStartIndex / dimensions.itemsPerWrapGroup) || 0;
+        var startingWrapGroupIndex = Math.ceil(arrayStartIndexWithBuffer / dimensions.itemsPerWrapGroup) || 0;
         if (!this.enableUnequalChildrenSizes) {
@@ -688,14 +723,18 @@ return defaultScrollLengthPerWrapGroup * startingWrapGroupIndex;
         arrayEndIndex += (dimensions.itemsPerWrapGroup - ((arrayEndIndex + 1) % dimensions.itemsPerWrapGroup)); // round up to end of wrapGroup
-        var bufferSize = this.bufferAmount * dimensions.itemsPerWrapGroup;
-        arrayStartIndex -= bufferSize;
-        arrayEndIndex += bufferSize;
         if (isNaN(arrayStartIndex)) {
-            arrayStartIndex = -1;
+            arrayStartIndex = 0;
         }
         if (isNaN(arrayEndIndex)) {
-            arrayEndIndex = -1;
+            arrayEndIndex = 0;
         }
+        arrayStartIndex = Math.min(Math.max(arrayStartIndex, 0), dimensions.itemCount - 1);
+        arrayEndIndex = Math.min(Math.max(arrayEndIndex, 0), dimensions.itemCount - 1);
+        var bufferSize = this.bufferAmount * dimensions.itemsPerWrapGroup;
+        var startIndexWithBuffer = Math.min(Math.max(arrayStartIndex - bufferSize, 0), dimensions.itemCount - 1);
+        var endIndexWithBuffer = Math.min(Math.max(arrayEndIndex + bufferSize, 0), dimensions.itemCount - 1);
         return {
-            arrayStartIndex: Math.min(Math.max(arrayStartIndex, 0), dimensions.itemCount - 1),
-            arrayEndIndex: Math.min(Math.max(arrayEndIndex, 0), dimensions.itemCount - 1)
+            startIndex: arrayStartIndex,
+            endIndex: arrayEndIndex,
+            startIndexWithBuffer: startIndexWithBuffer,
+            endIndexWithBuffer: endIndexWithBuffer
         };
@@ -715,7 +754,9 @@ };
         var pageInfo = this.calculatePageInfo(scrollPosition, dimensions);
-        var newPadding = this.calculatePadding(pageInfo.arrayStartIndex, dimensions, true);
+        var newPadding = this.calculatePadding(pageInfo.startIndexWithBuffer, dimensions, true);
         var newScrollLength = dimensions.scrollLength;
         return {
-            arrayStartIndex: pageInfo.arrayStartIndex,
-            arrayEndIndex: pageInfo.arrayEndIndex,
+            startIndex: pageInfo.startIndex,
+            endIndex: pageInfo.endIndex,
+            startIndexWithBuffer: pageInfo.startIndexWithBuffer,
+            endIndexWithBuffer: pageInfo.endIndexWithBuffer,
             padding: Math.round(newPadding),
@@ -722,0 +763,0 @@ scrollLength: Math.round(newScrollLength)

dist/virtual-scroll.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ChangeEvent":{"__symbolic":"interface"},"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","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":{"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"}}]}],"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"}}]}],"resizeBypassRefreshTheshold":[{"__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"}}]}],"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"}}]}],"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"}}]}]}],"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"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"ChangeEvent":{"__symbolic":"interface"},"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","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":{"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"}}]}],"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"}}]}],"resizeBypassRefreshTheshold":[{"__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"}}]}],"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"}}]}],"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"}}]}]}],"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"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ChangeEvent":{"__symbolic":"interface"},"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"IPageInfoWithBuffer":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","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":{"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"}}]}],"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"}}]}],"resizeBypassRefreshTheshold":[{"__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"}}]}],"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"}}]}]}],"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"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"ChangeEvent":{"__symbolic":"interface"},"WrapGroupDimensions":{"__symbolic":"interface"},"WrapGroupDimension":{"__symbolic":"interface"},"IDimensions":{"__symbolic":"interface"},"IPageInfo":{"__symbolic":"interface"},"IPageInfoWithBuffer":{"__symbolic":"interface"},"IViewport":{"__symbolic":"interface"},"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","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":{"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"}}]}],"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"}}]}],"resizeBypassRefreshTheshold":[{"__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"}}]}],"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"}}]}]}],"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"}],"scrollInto":[{"__symbolic":"method"}],"scrollToIndex":[{"__symbolic":"method"}],"scrollToIndex_internal":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"checkScrollElementResized":[{"__symbolic":"method"}],"updateDirection":[{"__symbolic":"method"}],"throttleTrailing":[{"__symbolic":"method"}],"refresh_internal":[{"__symbolic":"method"}],"getScrollElement":[{"__symbolic":"method"}],"addScrollEventHandlers":[{"__symbolic":"method"}],"removeScrollEventHandlers":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"countItemsPerWrapGroup":[{"__symbolic":"method"}],"getScrollPosition":[{"__symbolic":"method"}],"resetWrapGroupDimensions":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculatePadding":[{"__symbolic":"method"}],"calculatePageInfo":[{"__symbolic":"method"}],"calculateViewport":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}]

package.json

 {
   "name": "angular2-virtual-scroll",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "Angular 4+ module for virtual -infinite- list. Supports multi-column",
@@ -5,0 +5,0 @@ "main": "dist/virtual-scroll.js",

README.md

@@ -17,3 +17,4 @@
 ## Breaking Changes:
-* The value of ChangeEvent.end wasn't intuitive. This has been corrected. Both ChangeEvent.start and ChangeEvent.end are the 0-based array indexes of the items being rendered in the viewport. (Previously Change.End was the array index + 1)
+* v0.4.12: The start and end values of the change/start/end events were including bufferAmount, which made them confusing. This has been corrected.
+* v0.4.4: The value of ChangeEvent.end wasn't intuitive. This has been corrected. Both ChangeEvent.start and ChangeEvent.end are the 0-based array indexes of the items being rendered in the viewport. (Previously Change.End was the array index + 1)
 
@@ -146,3 +147,3 @@ ## New features:
 | childHeight (DEPRECATED)    | number | The minimum height of the item template's cell. Use this if enableUnequalChildrenSizes isn't working well enough. (The actual rendered size of the first cell is used by default if not specified.)
-| bufferAmount (DEPRECATED)   | number | The the number of elements to be rendered above & below the current container's viewport. Use this if enableUnequalChildrenSizes isn't working well enough. (defaults to enableUnequalChildrenSizes ? 5 : 0)
+| bufferAmount (DEPRECATED)  | number | The number of elements to be rendered above & below the current container's viewport. Increase this if enableUnequalChildrenSizes isn't working well enough. (defaults to enableUnequalChildrenSizes ? 5 : 0)
 | scrollAnimationTime | number | The time in milliseconds for the scroll animation to run for. Default value is 750. 0 will completely disable the tween/animation.
@@ -155,3 +156,3 @@ | parentScroll   | Element / Window | Element (or window), which will have scrollbar. This element must be one of the parents of virtual-scroll
 | change (DEPRECATED) / vsChange         | Event  | This event is fired every time the `start` or `end` indexes change and emits `ChangeEvent` which is of format: `{ start: number, end: number }`
-| viewPortIndices | { arrayStartIndex: number, arrayEndIndex: number } | Allows querying the visible item indexes in the viewport on-demand.
+| viewPortIndices | { arrayStartIndex: number, arrayEndIndex: number } | Allows querying the visible item indexes in the viewport on demand rather than listening for events.
 
@@ -318,2 +319,29 @@ 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
 
+## With HTML Table
+
+Note: There is no support for a fixed-to-top-header.
+
+```
+<virtual-scroll #scroll [items]="myItems">
+	<table>
+		<thead>
+			<th>Index</th>
+			<th>Name</th>
+			<th>Gender</th>
+			<th>Age</th>
+			<th>Address</th>
+		</thead>
+		<tbody #container>
+			<tr *ngFor="let item of scroll.viewPortItems">
+				<td>{{item.index}}</td>
+				<td>{{item.name}}</td>
+				<td>{{item.gender}}</td>
+				<td>{{item.age}}</td>
+				<td>{{item.address}}</td>
+			</tr>
+		</tbody>
+	</table>
+</virtual-scroll>
+```
+
 ## If container size changes
@@ -397,8 +425,22 @@
 
+## Hide Scrollbar
+
+This hacky CSS allows hiding a scrollbar while still enabling scroll through mouseWheel/touch/pageUpDownKeys
+```
+	//hide vertical scrollbar
+	   margin-right: -25px;
+	   padding-right: 25px;
+	
+	//hide horizontal scrollbar
+	   margin-bottom: -25px;
+	   padding-bottom: 25px;
+```
+
 ## Contributing
 Contributions are very welcome! Just send a pull request. Feel free to contact me or checkout my [GitHub](https://github.com/rintoj) page.
 
-## Author
+## Authors
 
 * **Rinto Jose** (rintoj)
+* **Devin Garner** (speige)
 * **Pavel Kukushkin** (kykint)
@@ -405,0 +447,0 @@

No alert changes

Improved metrics

Total package byte prevSize

123663

increased by5.81%

Lines of code

948

increased by5.57%

Number of lines in readme file

479

increased by9.61%

No dependency changes