Socket
Socket
Sign inDemoInstall

ngx-virtual-scroller

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-virtual-scroller - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

2

bundles/ngx-virtual-scroller.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@tweenjs/tween.js")):"function"==typeof define&&define.amd?define("ngx-virtual-scroller",["exports","@angular/core","@angular/common","@tweenjs/tween.js"],t):t((e=e||self)["ngx-virtual-scroller"]={},e.ng.core,e.ng.common,e.TWEEN)}(this,function(e,t,i,n){"use strict";function r(e,t,i,n){var r,o=arguments.length,s=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s}function o(e,t){return function(i,n){t(i,n,e)}}function s(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function l(){return{scrollThrottlingTime:0,scrollDebounceTime:0,scrollAnimationTime:750,checkResizeInterval:1e3,resizeBypassRefreshThreshold:5,modifyOverflowStyleOfParentScroll:!0,stripedTable:!1}}var a=function(){function e(e,n,r,o,s,l){this.element=e,this.renderer=n,this.zone=r,this.changeDetectorRef=o,this.window=window,this.executeRefreshOutsideAngularZone=!1,this._enableUnequalChildrenSizes=!1,this.useMarginInsteadOfTranslate=!1,this.ssrViewportWidth=1920,this.ssrViewportHeight=1080,this._bufferAmount=0,this._items=[],this.compareItems=function(e,t){return e===t},this.vsUpdate=new t.EventEmitter,this.vsChange=new t.EventEmitter,this.vsStart=new t.EventEmitter,this.vsEnd=new t.EventEmitter,this.calculatedScrollbarWidth=0,this.calculatedScrollbarHeight=0,this.padding=0,this.previousViewPort={},this.cachedPageSize=0,this.previousScrollNumberElements=0,this.isAngularUniversalSSR=i.isPlatformServer(s),this.scrollThrottlingTime=l.scrollThrottlingTime,this.scrollDebounceTime=l.scrollDebounceTime,this.scrollAnimationTime=l.scrollAnimationTime,this.scrollbarWidth=l.scrollbarWidth,this.scrollbarHeight=l.scrollbarHeight,this.checkResizeInterval=l.checkResizeInterval,this.resizeBypassRefreshThreshold=l.resizeBypassRefreshThreshold,this.modifyOverflowStyleOfParentScroll=l.modifyOverflowStyleOfParentScroll,this.stripedTable=l.stripedTable,this.horizontal=!1,this.resetWrapGroupDimensions()}return Object.defineProperty(e.prototype,"viewPortInfo",{get:function(){var e=this.previousViewPort||{};return{startIndex:e.startIndex||0,endIndex:e.endIndex||0,scrollStartPosition:e.scrollStartPosition||0,scrollEndPosition:e.scrollEndPosition||0,maxScrollPosition:e.maxScrollPosition||0,startIndexWithBuffer:e.startIndexWithBuffer||0,endIndexWithBuffer:e.endIndexWithBuffer||0}},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"enableUnequalChildrenSizes",{get:function(){return this._enableUnequalChildrenSizes},set:function(e){this._enableUnequalChildrenSizes!==e&&(this._enableUnequalChildrenSizes=e,this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"bufferAmount",{get:function(){return"number"==typeof this._bufferAmount&&this._bufferAmount>=0?this._bufferAmount:this.enableUnequalChildrenSizes?5:0},set:function(e){this._bufferAmount=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollThrottlingTime",{get:function(){return this._scrollThrottlingTime},set:function(e){this._scrollThrottlingTime=e,this.updateOnScrollFunction()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollDebounceTime",{get:function(){return this._scrollDebounceTime},set:function(e){this._scrollDebounceTime=e,this.updateOnScrollFunction()},enumerable:!0,configurable:!0}),e.prototype.updateOnScrollFunction=function(){var e=this;this.scrollDebounceTime?this.onScroll=this.debounce(function(){e.refresh_internal(!1)},this.scrollDebounceTime):this.scrollThrottlingTime?this.onScroll=this.throttleTrailing(function(){e.refresh_internal(!1)},this.scrollThrottlingTime):this.onScroll=function(){e.refresh_internal(!1)}},Object.defineProperty(e.prototype,"checkResizeInterval",{get:function(){return this._checkResizeInterval},set:function(e){this._checkResizeInterval!==e&&(this._checkResizeInterval=e,this.addScrollEventHandlers())},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){return this._items},set:function(e){e!==this._items&&(this._items=e||[],this.refresh_internal(!0))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"horizontal",{get:function(){return this._horizontal},set:function(e){this._horizontal=e,this.updateDirection()},enumerable:!0,configurable:!0}),e.prototype.revertParentOverscroll=function(){var e=this.getScrollElement();e&&this.oldParentScrollOverflow&&(e.style["overflow-y"]=this.oldParentScrollOverflow.y,e.style["overflow-x"]=this.oldParentScrollOverflow.x),this.oldParentScrollOverflow=undefined},Object.defineProperty(e.prototype,"parentScroll",{get:function(){return this._parentScroll},set:function(e){if(this._parentScroll!==e){this.revertParentOverscroll(),this._parentScroll=e,this.addScrollEventHandlers();var t=this.getScrollElement();this.modifyOverflowStyleOfParentScroll&&t!==this.element.nativeElement&&(this.oldParentScrollOverflow={x:t.style["overflow-x"],y:t.style["overflow-y"]},t.style["overflow-y"]=this.horizontal?"visible":"auto",t.style["overflow-x"]=this.horizontal?"auto":"visible")}},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.addScrollEventHandlers()},e.prototype.ngOnDestroy=function(){this.removeScrollEventHandlers(),this.revertParentOverscroll()},e.prototype.ngOnChanges=function(e){var t=this.cachedItemsLength!==this.items.length;this.cachedItemsLength=this.items.length;var i=!e.items||!e.items.previousValue||0===e.items.previousValue.length;this.refresh_internal(t||i)},e.prototype.ngDoCheck=function(){if(this.cachedItemsLength!==this.items.length)return this.cachedItemsLength=this.items.length,void this.refresh_internal(!0);if(this.previousViewPort&&this.viewPortItems&&this.viewPortItems.length>0){for(var e=!1,t=0;t<this.viewPortItems.length;++t)if(!this.compareItems(this.items[this.previousViewPort.startIndexWithBuffer+t],this.viewPortItems[t])){e=!0;break}e&&this.refresh_internal(!0)}},e.prototype.refresh=function(){this.refresh_internal(!0)},e.prototype.invalidateAllCachedMeasurements=function(){this.wrapGroupDimensions={maxChildSizePerWrapGroup:[],numberOfKnownWrapGroupChildSizes:0,sumOfKnownWrapGroupChildWidths:0,sumOfKnownWrapGroupChildHeights:0},this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined,this.refresh_internal(!1)},e.prototype.invalidateCachedMeasurementForItem=function(e){if(this.enableUnequalChildrenSizes){var t=this.items&&this.items.indexOf(e);t>=0&&this.invalidateCachedMeasurementAtIndex(t)}else this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined;this.refresh_internal(!1)},e.prototype.invalidateCachedMeasurementAtIndex=function(e){if(this.enableUnequalChildrenSizes){var t=this.wrapGroupDimensions.maxChildSizePerWrapGroup[e];t&&(this.wrapGroupDimensions.maxChildSizePerWrapGroup[e]=undefined,--this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths-=t.childWidth||0,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights-=t.childHeight||0)}else this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined;this.refresh_internal(!1)},e.prototype.scrollInto=function(e,t,i,n,r){void 0===t&&(t=!0),void 0===i&&(i=0),void 0===n&&(n=undefined),void 0===r&&(r=undefined);var o=this.items.indexOf(e);-1!==o&&this.scrollToIndex(o,t,i,n,r)},e.prototype.scrollToIndex=function(e,t,i,n,r){var o=this;void 0===t&&(t=!0),void 0===i&&(i=0),void 0===n&&(n=undefined),void 0===r&&(r=undefined);var s=5,l=function(){if(--s<=0)r&&r();else{var n=o.calculateDimensions(),a=Math.min(Math.max(e,0),n.itemCount-1);o.previousViewPort.startIndex!==a?o.scrollToIndex_internal(e,t,i,0,l):r&&r()}};this.scrollToIndex_internal(e,t,i,n,l)},e.prototype.scrollToIndex_internal=function(e,t,i,n,r){void 0===t&&(t=!0),void 0===i&&(i=0),void 0===n&&(n=undefined),void 0===r&&(r=undefined),n=n===undefined?this.scrollAnimationTime:n;var o=this.calculateDimensions(),s=this.calculatePadding(e,o)+i;t||(s-=o.wrapGroupsPerPage*o[this._childScrollDim]),this.scrollToPosition(s,n,r)},e.prototype.scrollToPosition=function(e,t,i){var r=this;void 0===t&&(t=undefined),void 0===i&&(i=undefined),e+=this.getElementsOffset(),t=t===undefined?this.scrollAnimationTime:t;var o,s=this.getScrollElement();if(this.currentTween&&(this.currentTween.stop(),this.currentTween=undefined),!t)return this.renderer.setProperty(s,this._scrollType,e),void this.refresh_internal(!1,i);var l={scrollPosition:s[this._scrollType]},a=new n.Tween(l).to({scrollPosition:e},t).easing(n.Easing.Quadratic.Out).onUpdate(function(e){isNaN(e.scrollPosition)||(r.renderer.setProperty(s,r._scrollType,e.scrollPosition),r.refresh_internal(!1))}).onStop(function(){cancelAnimationFrame(o)}).start(),h=function(t){a.isPlaying()&&(a.update(t),l.scrollPosition!==e?r.zone.runOutsideAngular(function(){o=requestAnimationFrame(h)}):r.refresh_internal(!1,i))};h(),this.currentTween=a},e.prototype.getElementSize=function(e){var t=e.getBoundingClientRect(),i=getComputedStyle(e),n=parseInt(i["margin-top"],10)||0,r=parseInt(i["margin-bottom"],10)||0,o=parseInt(i["margin-left"],10)||0,s=parseInt(i["margin-right"],10)||0;return{top:t.top+n,bottom:t.bottom+r,left:t.left+o,right:t.right+s,width:t.width+o+s,height:t.height+n+r}},e.prototype.checkScrollElementResized=function(){var e,t=this.getElementSize(this.getScrollElement());if(this.previousScrollBoundingRect){var i=Math.abs(t.width-this.previousScrollBoundingRect.width),n=Math.abs(t.height-this.previousScrollBoundingRect.height);e=i>this.resizeBypassRefreshThreshold||n>this.resizeBypassRefreshThreshold}else e=!0;e&&(this.previousScrollBoundingRect=t,t.width>0&&t.height>0&&this.refresh_internal(!1))},e.prototype.updateDirection=function(){this.horizontal?(this._invisiblePaddingProperty="width",this._offsetType="offsetLeft",this._pageOffsetType="pageXOffset",this._childScrollDim="childWidth",this._marginDir="margin-left",this._translateDir="translateX",this._scrollType="scrollLeft"):(this._invisiblePaddingProperty="height",this._offsetType="offsetTop",this._pageOffsetType="pageYOffset",this._childScrollDim="childHeight",this._marginDir="margin-top",this._translateDir="translateY",this._scrollType="scrollTop")},e.prototype.debounce=function(e,t){var i=this.throttleTrailing(e,t),n=function(){i.cancel(),i.apply(this,arguments)};return n.cancel=function(){i.cancel()},n},e.prototype.throttleTrailing=function(e,t){var i=undefined,n=arguments,r=function(){var r=this;n=arguments,i||(t<=0?e.apply(r,n):i=setTimeout(function(){i=undefined,e.apply(r,n)},t))};return r.cancel=function(){i&&(clearTimeout(i),i=undefined)},r},e.prototype.refresh_internal=function(e,t,i){var n=this;if(void 0===t&&(t=undefined),void 0===i&&(i=2),e&&this.previousViewPort.scrollStartPosition>0){var r=this.previousViewPort,o=this.viewPortItems,s=t;t=function(){var e=n.previousViewPort.scrollLength-r.scrollLength;if(e>0&&n.viewPortItems){var t=o[0],i=n.items.findIndex(function(e){return n.compareItems(t,e)});if(i>n.previousViewPort.startIndexWithBuffer){for(var l=!1,a=1;a<n.viewPortItems.length;++a)if(!n.compareItems(n.items[i+a],o[a])){l=!0;break}if(!l)return void n.scrollToPosition(n.previousViewPort.scrollStartPosition+e,0,s)}}s&&s()}}this.zone.runOutsideAngular(function(){requestAnimationFrame(function(){e&&n.resetWrapGroupDimensions();var r=n.calculateViewport(),o=e||r.startIndex!==n.previousViewPort.startIndex,s=e||r.endIndex!==n.previousViewPort.endIndex,l=r.scrollLength!==n.previousViewPort.scrollLength,a=r.padding!==n.previousViewPort.padding,h=r.scrollStartPosition!==n.previousViewPort.scrollStartPosition||r.scrollEndPosition!==n.previousViewPort.scrollEndPosition||r.maxScrollPosition!==n.previousViewPort.maxScrollPosition;if(n.previousViewPort=r,l&&n.renderer.setStyle(n.invisiblePaddingElementRef.nativeElement,n._invisiblePaddingProperty,r.scrollLength+"px"),a&&(n.useMarginInsteadOfTranslate?n.renderer.setStyle(n.contentElementRef.nativeElement,n._marginDir,r.padding+"px"):(n.renderer.setStyle(n.contentElementRef.nativeElement,"transform",n._translateDir+"("+r.padding+"px)"),n.renderer.setStyle(n.contentElementRef.nativeElement,"webkitTransform",n._translateDir+"("+r.padding+"px)"))),n.headerElementRef){var d=n.getScrollElement()[n._scrollType],p=n.getElementsOffset(),c=Math.max(d-r.padding-p+n.headerElementRef.nativeElement.clientHeight,0);n.renderer.setStyle(n.headerElementRef.nativeElement,"transform",n._translateDir+"("+c+"px)"),n.renderer.setStyle(n.headerElementRef.nativeElement,"webkitTransform",n._translateDir+"("+c+"px)")}var u=o||s?{startIndex:r.startIndex,endIndex:r.endIndex,scrollStartPosition:r.scrollStartPosition,scrollEndPosition:r.scrollEndPosition,startIndexWithBuffer:r.startIndexWithBuffer,endIndexWithBuffer:r.endIndexWithBuffer,maxScrollPosition:r.maxScrollPosition}:undefined;if(o||s||h){var f=function(){n.viewPortItems=r.startIndexWithBuffer>=0&&r.endIndexWithBuffer>=0?n.items.slice(r.startIndexWithBuffer,r.endIndexWithBuffer+1):[],n.vsUpdate.emit(n.viewPortItems),o&&n.vsStart.emit(u),s&&n.vsEnd.emit(u),(o||s)&&(n.changeDetectorRef.markForCheck(),n.vsChange.emit(u)),i>0?n.refresh_internal(!1,t,i-1):t&&t()};n.executeRefreshOutsideAngularZone?f():n.zone.run(f)}else{if(i>0&&(l||a))return void n.refresh_internal(!1,t,i-1);t&&t()}})})},e.prototype.getScrollElement=function(){return this.parentScroll instanceof Window?document.scrollingElement||document.documentElement||document.body:this.parentScroll||this.element.nativeElement},e.prototype.addScrollEventHandlers=function(){var e=this;if(!this.isAngularUniversalSSR){var t=this.getScrollElement();this.removeScrollEventHandlers(),this.zone.runOutsideAngular(function(){e.parentScroll instanceof Window?(e.disposeScrollHandler=e.renderer.listen("window","scroll",e.onScroll),e.disposeResizeHandler=e.renderer.listen("window","resize",e.onScroll)):(e.disposeScrollHandler=e.renderer.listen(t,"scroll",e.onScroll),e._checkResizeInterval>0&&(e.checkScrollElementResizedTimer=setInterval(function(){e.checkScrollElementResized()},e._checkResizeInterval)))})}},e.prototype.removeScrollEventHandlers=function(){this.checkScrollElementResizedTimer&&clearInterval(this.checkScrollElementResizedTimer),this.disposeScrollHandler&&(this.disposeScrollHandler(),this.disposeScrollHandler=undefined),this.disposeResizeHandler&&(this.disposeResizeHandler(),this.disposeResizeHandler=undefined)},e.prototype.getElementsOffset=function(){if(this.isAngularUniversalSSR)return 0;var e=0;if(this.containerElementRef&&this.containerElementRef.nativeElement&&(e+=this.containerElementRef.nativeElement[this._offsetType]),this.parentScroll){var t=this.getScrollElement(),i=this.getElementSize(this.element.nativeElement),n=this.getElementSize(t);this.horizontal?e+=i.left-n.left:e+=i.top-n.top,this.parentScroll instanceof Window||(e+=t[this._scrollType])}return e},e.prototype.countItemsPerWrapGroup=function(){if(this.isAngularUniversalSSR)return Math.round(this.horizontal?this.ssrViewportHeight/this.ssrChildHeight:this.ssrViewportWidth/this.ssrChildWidth);var e=this.horizontal?"offsetLeft":"offsetTop",t=(this.containerElementRef&&this.containerElementRef.nativeElement||this.contentElementRef.nativeElement).children,i=t?t.length:0;if(0===i)return 1;for(var n=t[0][e],r=1;r<i&&n===t[r][e];)++r;return r},e.prototype.getScrollStartPosition=function(){var e=undefined;return this.parentScroll instanceof Window&&(e=window[this._pageOffsetType]),e||this.getScrollElement()[this._scrollType]||0},e.prototype.resetWrapGroupDimensions=function(){var e=this.wrapGroupDimensions;if(this.invalidateAllCachedMeasurements(),this.enableUnequalChildrenSizes&&e&&0!==e.numberOfKnownWrapGroupChildSizes)for(var t=this.countItemsPerWrapGroup(),i=0;i<e.maxChildSizePerWrapGroup.length;++i){var n=e.maxChildSizePerWrapGroup[i];if(n&&n.items&&n.items.length){if(n.items.length!==t)return;for(var r=!1,o=t*i,s=0;s<t;++s)if(!this.compareItems(n.items[s],this.items[o+s])){r=!0;break}r||(++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths+=n.childWidth||0,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights+=n.childHeight||0,this.wrapGroupDimensions.maxChildSizePerWrapGroup[i]=n)}}},e.prototype.calculateDimensions=function(){var e=this.getScrollElement();this.calculatedScrollbarHeight=Math.max(Math.min(e.offsetHeight-e.clientHeight,25),this.calculatedScrollbarHeight),this.calculatedScrollbarWidth=Math.max(Math.min(e.offsetWidth-e.clientWidth,25),this.calculatedScrollbarWidth);var t,i,n,r=e.offsetWidth-(this.scrollbarWidth||this.calculatedScrollbarWidth||(this.horizontal?0:25)),o=e.offsetHeight-(this.scrollbarHeight||this.calculatedScrollbarHeight||(this.horizontal?25:0)),s=this.containerElementRef&&this.containerElementRef.nativeElement||this.contentElementRef.nativeElement,l=this.countItemsPerWrapGroup();if(this.isAngularUniversalSSR){r=this.ssrViewportWidth,o=this.ssrViewportHeight,i=this.ssrChildWidth,n=this.ssrChildHeight;var a=Math.max(Math.ceil(r/i),1),h=Math.max(Math.ceil(o/n),1);t=this.horizontal?a:h}else if(this.enableUnequalChildrenSizes){var d=e[this._scrollType]-(this.previousViewPort?this.previousViewPort.padding:0),p=this.previousViewPort.startIndexWithBuffer||0,c=Math.ceil(p/l),u=0,f=0,m=0,g=0;t=0;for(var v=0;v<s.children.length;++v){++p;W=s.children[v],E=this.getElementSize(W);if(u=Math.max(u,E.width),f=Math.max(f,E.height),p%l==0){var y=this.wrapGroupDimensions.maxChildSizePerWrapGroup[c];y&&(--this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths-=y.childWidth||0,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights-=y.childHeight||0),++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;var S=this.items.slice(p-l,p);if(this.wrapGroupDimensions.maxChildSizePerWrapGroup[c]={childWidth:u,childHeight:f,items:S},this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths+=u,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights+=f,this.horizontal){var w=Math.min(u,Math.max(r-m,0));if(d>0)w-=P=Math.min(d,w),d-=P;m+=w,w>0&&r>=m&&++t}else{var P,b=Math.min(f,Math.max(o-g,0));if(d>0)b-=P=Math.min(d,b),d-=P;g+=b,b>0&&o>=g&&++t}++c,u=0,f=0}}var x=this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths/this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,I=this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights/this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;i=this.childWidth||x||r,n=this.childHeight||I||o,this.horizontal?r>m&&(t+=Math.ceil((r-m)/i)):o>g&&(t+=Math.ceil((o-g)/n))}else{if(s.children.length>0){this.childWidth&&this.childHeight||(!this.minMeasuredChildWidth&&r>0&&(this.minMeasuredChildWidth=r),!this.minMeasuredChildHeight&&o>0&&(this.minMeasuredChildHeight=o));var W=s.children[0],E=this.getElementSize(W);this.minMeasuredChildWidth=Math.min(this.minMeasuredChildWidth,E.width),this.minMeasuredChildHeight=Math.min(this.minMeasuredChildHeight,E.height)}i=this.childWidth||this.minMeasuredChildWidth||r,n=this.childHeight||this.minMeasuredChildHeight||o;a=Math.max(Math.ceil(r/i),1),h=Math.max(Math.ceil(o/n),1);t=this.horizontal?a:h}var C=this.items.length,z=l*t,T=C/z,_=Math.ceil(C/l),O=0,M=this.horizontal?i:n;if(this.enableUnequalChildrenSizes){var R=0;for(v=0;v<_;++v){var G=this.wrapGroupDimensions.maxChildSizePerWrapGroup[v]&&this.wrapGroupDimensions.maxChildSizePerWrapGroup[v][this._childScrollDim];G?O+=G:++R}O+=Math.round(R*M)}else O=_*M;this.headerElementRef&&(O+=this.headerElementRef.nativeElement.clientHeight);var D=this.horizontal?r:o;return{itemCount:C,itemsPerWrapGroup:l,wrapGroupsPerPage:t,itemsPerPage:z,pageCount_fractional:T,childWidth:i,childHeight:n,scrollLength:O,viewportLength:D,maxScrollPosition:Math.max(O-D,0)}},e.prototype.calculatePadding=function(e,t){if(0===t.itemCount)return 0;var i=t[this._childScrollDim],n=Math.floor(e/t.itemsPerWrapGroup)||0;if(!this.enableUnequalChildrenSizes)return i*n;for(var r=0,o=0,s=0;s<n;++s){var l=this.wrapGroupDimensions.maxChildSizePerWrapGroup[s]&&this.wrapGroupDimensions.maxChildSizePerWrapGroup[s][this._childScrollDim];l?o+=l:++r}return o+=Math.round(r*i)},e.prototype.calculatePageInfo=function(e,t){var i=0;if(this.enableUnequalChildrenSizes)for(var n=Math.ceil(t.itemCount/t.itemsPerWrapGroup),r=0,o=t[this._childScrollDim],s=0;s<n;++s){var l=this.wrapGroupDimensions.maxChildSizePerWrapGroup[s]&&this.wrapGroupDimensions.maxChildSizePerWrapGroup[s][this._childScrollDim];if(e<(r+=l||o)){i=s/n;break}}else i=e/t.scrollLength;var a=Math.min(Math.max(i*t.pageCount_fractional,0),t.pageCount_fractional)*t.itemsPerPage,h=t.itemCount-t.itemsPerPage-1,d=Math.min(Math.floor(a),h);if(d-=d%t.itemsPerWrapGroup,this.stripedTable){var p=2*t.itemsPerWrapGroup;d%p!=0&&(d=Math.max(d-d%p,0))}var c=Math.ceil(a)+t.itemsPerPage-1,u=(c+1)%t.itemsPerWrapGroup;u>0&&(c+=t.itemsPerWrapGroup-u),isNaN(d)&&(d=0),isNaN(c)&&(c=0),d=Math.min(Math.max(d,0),t.itemCount-1),c=Math.min(Math.max(c,0),t.itemCount-1);var f=this.bufferAmount*t.itemsPerWrapGroup;return{startIndex:d,endIndex:c,startIndexWithBuffer:Math.min(Math.max(d-f,0),t.itemCount-1),endIndexWithBuffer:Math.min(Math.max(c+f,0),t.itemCount-1),scrollStartPosition:e,scrollEndPosition:e+t.viewportLength,maxScrollPosition:t.maxScrollPosition}},e.prototype.calculateViewport=function(){var e=this.calculateDimensions(),t=this.getElementsOffset(),i=this.getScrollStartPosition();i>e.scrollLength+t&&!(this.parentScroll instanceof Window)?i=e.scrollLength:i-=t,i=Math.max(0,i);var n=this.calculatePageInfo(i,e),r=this.calculatePadding(n.startIndexWithBuffer,e),o=e.scrollLength;return{startIndex:n.startIndex,endIndex:n.endIndex,startIndexWithBuffer:n.startIndexWithBuffer,endIndexWithBuffer:n.endIndexWithBuffer,padding:Math.round(r),scrollLength:Math.round(o),scrollStartPosition:n.scrollStartPosition,scrollEndPosition:n.scrollEndPosition,maxScrollPosition:n.maxScrollPosition}},r([t.Input(),s("design:type",Boolean)],e.prototype,"executeRefreshOutsideAngularZone",void 0),r([t.Input(),s("design:type",Boolean),s("design:paramtypes",[Boolean])],e.prototype,"enableUnequalChildrenSizes",null),r([t.Input(),s("design:type",Boolean)],e.prototype,"useMarginInsteadOfTranslate",void 0),r([t.Input(),s("design:type",Boolean)],e.prototype,"modifyOverflowStyleOfParentScroll",void 0),r([t.Input(),s("design:type",Boolean)],e.prototype,"stripedTable",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"scrollbarWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"scrollbarHeight",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"childWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"childHeight",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrChildWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrChildHeight",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrViewportWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrViewportHeight",void 0),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"bufferAmount",null),r([t.Input(),s("design:type",Number)],e.prototype,"scrollAnimationTime",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"resizeBypassRefreshThreshold",void 0),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"scrollThrottlingTime",null),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"scrollDebounceTime",null),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"checkResizeInterval",null),r([t.Input(),s("design:type",Array),s("design:paramtypes",[Array])],e.prototype,"items",null),r([t.Input(),s("design:type",Function)],e.prototype,"compareItems",void 0),r([t.Input(),s("design:type",Boolean),s("design:paramtypes",[Boolean])],e.prototype,"horizontal",null),r([t.Input(),s("design:type",Object),s("design:paramtypes",[Object])],e.prototype,"parentScroll",null),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsUpdate",void 0),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsChange",void 0),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsStart",void 0),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsEnd",void 0),r([t.ViewChild("content",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"contentElementRef",void 0),r([t.ViewChild("invisiblePadding",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"invisiblePaddingElementRef",void 0),r([t.ContentChild("header",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"headerElementRef",void 0),r([t.ContentChild("container",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"containerElementRef",void 0),e=r([t.Component({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 "]}),o(4,t.Inject(t.PLATFORM_ID)),o(5,t.Optional()),o(5,t.Inject("virtual-scroller-default-options")),s("design:paramtypes",[t.ElementRef,t.Renderer2,t.NgZone,t.ChangeDetectorRef,Object,Object])],e)}(),h=function(){function e(){}return e=r([t.NgModule({exports:[a],declarations:[a],imports:[i.CommonModule],providers:[{provide:"virtual-scroller-default-options",useFactory:l}]})],e)}();e.VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY=l,e.VirtualScrollerComponent=a,e.VirtualScrollerModule=h,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@tweenjs/tween.js")):"function"==typeof define&&define.amd?define("ngx-virtual-scroller",["exports","@angular/core","@angular/common","@tweenjs/tween.js"],t):t((e=e||self)["ngx-virtual-scroller"]={},e.ng.core,e.ng.common,e.TWEEN)}(this,function(e,t,i,n){"use strict";function r(e,t,i,n){var r,o=arguments.length,s=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s}function o(e,t){return function(i,n){t(i,n,e)}}function s(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function l(){return{scrollThrottlingTime:0,scrollDebounceTime:0,scrollAnimationTime:750,checkResizeInterval:1e3,resizeBypassRefreshThreshold:5,modifyOverflowStyleOfParentScroll:!0,stripedTable:!1}}var a=function(){function e(e,n,r,o,s,l){this.element=e,this.renderer=n,this.zone=r,this.changeDetectorRef=o,this.window=window,this.executeRefreshOutsideAngularZone=!1,this._enableUnequalChildrenSizes=!1,this.useMarginInsteadOfTranslate=!1,this.ssrViewportWidth=1920,this.ssrViewportHeight=1080,this._bufferAmount=0,this._items=[],this.compareItems=function(e,t){return e===t},this.vsUpdate=new t.EventEmitter,this.vsChange=new t.EventEmitter,this.vsStart=new t.EventEmitter,this.vsEnd=new t.EventEmitter,this.calculatedScrollbarWidth=0,this.calculatedScrollbarHeight=0,this.padding=0,this.previousViewPort={},this.cachedPageSize=0,this.previousScrollNumberElements=0,this.isAngularUniversalSSR=i.isPlatformServer(s),this.scrollThrottlingTime=l.scrollThrottlingTime,this.scrollDebounceTime=l.scrollDebounceTime,this.scrollAnimationTime=l.scrollAnimationTime,this.scrollbarWidth=l.scrollbarWidth,this.scrollbarHeight=l.scrollbarHeight,this.checkResizeInterval=l.checkResizeInterval,this.resizeBypassRefreshThreshold=l.resizeBypassRefreshThreshold,this.modifyOverflowStyleOfParentScroll=l.modifyOverflowStyleOfParentScroll,this.stripedTable=l.stripedTable,this.horizontal=!1,this.resetWrapGroupDimensions()}return Object.defineProperty(e.prototype,"viewPortInfo",{get:function(){var e=this.previousViewPort||{};return{startIndex:e.startIndex||0,endIndex:e.endIndex||0,scrollStartPosition:e.scrollStartPosition||0,scrollEndPosition:e.scrollEndPosition||0,maxScrollPosition:e.maxScrollPosition||0,startIndexWithBuffer:e.startIndexWithBuffer||0,endIndexWithBuffer:e.endIndexWithBuffer||0}},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"enableUnequalChildrenSizes",{get:function(){return this._enableUnequalChildrenSizes},set:function(e){this._enableUnequalChildrenSizes!==e&&(this._enableUnequalChildrenSizes=e,this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"bufferAmount",{get:function(){return"number"==typeof this._bufferAmount&&this._bufferAmount>=0?this._bufferAmount:this.enableUnequalChildrenSizes?5:0},set:function(e){this._bufferAmount=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollThrottlingTime",{get:function(){return this._scrollThrottlingTime},set:function(e){this._scrollThrottlingTime=e,this.updateOnScrollFunction()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollDebounceTime",{get:function(){return this._scrollDebounceTime},set:function(e){this._scrollDebounceTime=e,this.updateOnScrollFunction()},enumerable:!0,configurable:!0}),e.prototype.updateOnScrollFunction=function(){var e=this;this.scrollDebounceTime?this.onScroll=this.debounce(function(){e.refresh_internal(!1)},this.scrollDebounceTime):this.scrollThrottlingTime?this.onScroll=this.throttleTrailing(function(){e.refresh_internal(!1)},this.scrollThrottlingTime):this.onScroll=function(){e.refresh_internal(!1)}},Object.defineProperty(e.prototype,"checkResizeInterval",{get:function(){return this._checkResizeInterval},set:function(e){this._checkResizeInterval!==e&&(this._checkResizeInterval=e,this.addScrollEventHandlers())},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){return this._items},set:function(e){e!==this._items&&(this._items=e||[],this.refresh_internal(!0))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"horizontal",{get:function(){return this._horizontal},set:function(e){this._horizontal=e,this.updateDirection()},enumerable:!0,configurable:!0}),e.prototype.revertParentOverscroll=function(){var e=this.getScrollElement();e&&this.oldParentScrollOverflow&&(e.style["overflow-y"]=this.oldParentScrollOverflow.y,e.style["overflow-x"]=this.oldParentScrollOverflow.x),this.oldParentScrollOverflow=undefined},Object.defineProperty(e.prototype,"parentScroll",{get:function(){return this._parentScroll},set:function(e){if(this._parentScroll!==e){this.revertParentOverscroll(),this._parentScroll=e,this.addScrollEventHandlers();var t=this.getScrollElement();this.modifyOverflowStyleOfParentScroll&&t!==this.element.nativeElement&&(this.oldParentScrollOverflow={x:t.style["overflow-x"],y:t.style["overflow-y"]},t.style["overflow-y"]=this.horizontal?"visible":"auto",t.style["overflow-x"]=this.horizontal?"auto":"visible")}},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.addScrollEventHandlers()},e.prototype.ngOnDestroy=function(){this.removeScrollEventHandlers(),this.revertParentOverscroll()},e.prototype.ngOnChanges=function(e){var t=this.cachedItemsLength!==this.items.length;this.cachedItemsLength=this.items.length;var i=!e.items||!e.items.previousValue||0===e.items.previousValue.length;this.refresh_internal(t||i)},e.prototype.ngDoCheck=function(){if(this.cachedItemsLength!==this.items.length)return this.cachedItemsLength=this.items.length,void this.refresh_internal(!0);if(this.previousViewPort&&this.viewPortItems&&this.viewPortItems.length>0){for(var e=!1,t=0;t<this.viewPortItems.length;++t)if(!this.compareItems(this.items[this.previousViewPort.startIndexWithBuffer+t],this.viewPortItems[t])){e=!0;break}e&&this.refresh_internal(!0)}},e.prototype.refresh=function(){this.refresh_internal(!0)},e.prototype.invalidateAllCachedMeasurements=function(){this.wrapGroupDimensions={maxChildSizePerWrapGroup:[],numberOfKnownWrapGroupChildSizes:0,sumOfKnownWrapGroupChildWidths:0,sumOfKnownWrapGroupChildHeights:0},this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined,this.refresh_internal(!1)},e.prototype.invalidateCachedMeasurementForItem=function(e){if(this.enableUnequalChildrenSizes){var t=this.items&&this.items.indexOf(e);t>=0&&this.invalidateCachedMeasurementAtIndex(t)}else this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined;this.refresh_internal(!1)},e.prototype.invalidateCachedMeasurementAtIndex=function(e){if(this.enableUnequalChildrenSizes){var t=this.wrapGroupDimensions.maxChildSizePerWrapGroup[e];t&&(this.wrapGroupDimensions.maxChildSizePerWrapGroup[e]=undefined,--this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths-=t.childWidth||0,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights-=t.childHeight||0)}else this.minMeasuredChildWidth=undefined,this.minMeasuredChildHeight=undefined;this.refresh_internal(!1)},e.prototype.scrollInto=function(e,t,i,n,r){void 0===t&&(t=!0),void 0===i&&(i=0),void 0===n&&(n=undefined),void 0===r&&(r=undefined);var o=this.items.indexOf(e);-1!==o&&this.scrollToIndex(o,t,i,n,r)},e.prototype.scrollToIndex=function(e,t,i,n,r){var o=this;void 0===t&&(t=!0),void 0===i&&(i=0),void 0===n&&(n=undefined),void 0===r&&(r=undefined);var s=5,l=function(){if(--s<=0)r&&r();else{var n=o.calculateDimensions(),a=Math.min(Math.max(e,0),n.itemCount-1);o.previousViewPort.startIndex!==a?o.scrollToIndex_internal(e,t,i,0,l):r&&r()}};this.scrollToIndex_internal(e,t,i,n,l)},e.prototype.scrollToIndex_internal=function(e,t,i,n,r){void 0===t&&(t=!0),void 0===i&&(i=0),void 0===n&&(n=undefined),void 0===r&&(r=undefined),n=n===undefined?this.scrollAnimationTime:n;var o=this.calculateDimensions(),s=this.calculatePadding(e,o)+i;t||(s-=o.wrapGroupsPerPage*o[this._childScrollDim]),this.scrollToPosition(s,n,r)},e.prototype.scrollToPosition=function(e,t,i){var r=this;void 0===t&&(t=undefined),void 0===i&&(i=undefined),e+=this.getElementsOffset(),t=t===undefined?this.scrollAnimationTime:t;var o,s=this.getScrollElement();if(this.currentTween&&(this.currentTween.stop(),this.currentTween=undefined),!t)return this.renderer.setProperty(s,this._scrollType,e),void this.refresh_internal(!1,i);var l={scrollPosition:s[this._scrollType]},a=new n.Tween(l).to({scrollPosition:e},t).easing(n.Easing.Quadratic.Out).onUpdate(function(e){isNaN(e.scrollPosition)||(r.renderer.setProperty(s,r._scrollType,e.scrollPosition),r.refresh_internal(!1))}).onStop(function(){cancelAnimationFrame(o)}).start(),h=function(t){a.isPlaying()&&(a.update(t),l.scrollPosition!==e?r.zone.runOutsideAngular(function(){o=requestAnimationFrame(h)}):r.refresh_internal(!1,i))};h(),this.currentTween=a},e.prototype.getElementSize=function(e){var t=e.getBoundingClientRect(),i=getComputedStyle(e),n=parseInt(i["margin-top"],10)||0,r=parseInt(i["margin-bottom"],10)||0,o=parseInt(i["margin-left"],10)||0,s=parseInt(i["margin-right"],10)||0;return{top:t.top+n,bottom:t.bottom+r,left:t.left+o,right:t.right+s,width:t.width+o+s,height:t.height+n+r}},e.prototype.checkScrollElementResized=function(){var e,t=this.getElementSize(this.getScrollElement());if(this.previousScrollBoundingRect){var i=Math.abs(t.width-this.previousScrollBoundingRect.width),n=Math.abs(t.height-this.previousScrollBoundingRect.height);e=i>this.resizeBypassRefreshThreshold||n>this.resizeBypassRefreshThreshold}else e=!0;e&&(this.previousScrollBoundingRect=t,t.width>0&&t.height>0&&this.refresh_internal(!1))},e.prototype.updateDirection=function(){this.horizontal?(this._invisiblePaddingProperty="width",this._offsetType="offsetLeft",this._pageOffsetType="pageXOffset",this._childScrollDim="childWidth",this._marginDir="margin-left",this._translateDir="translateX",this._scrollType="scrollLeft"):(this._invisiblePaddingProperty="height",this._offsetType="offsetTop",this._pageOffsetType="pageYOffset",this._childScrollDim="childHeight",this._marginDir="margin-top",this._translateDir="translateY",this._scrollType="scrollTop")},e.prototype.debounce=function(e,t){var i=this.throttleTrailing(e,t),n=function(){i.cancel(),i.apply(this,arguments)};return n.cancel=function(){i.cancel()},n},e.prototype.throttleTrailing=function(e,t){var i=undefined,n=arguments,r=function(){var r=this;n=arguments,i||(t<=0?e.apply(r,n):i=setTimeout(function(){i=undefined,e.apply(r,n)},t))};return r.cancel=function(){i&&(clearTimeout(i),i=undefined)},r},e.prototype.refresh_internal=function(e,t,i){var n=this;if(void 0===t&&(t=undefined),void 0===i&&(i=2),e&&this.previousViewPort&&this.previousViewPort.scrollStartPosition>0){var r=this.previousViewPort,o=this.viewPortItems,s=t;t=function(){var e=n.previousViewPort.scrollLength-r.scrollLength;if(e>0&&n.viewPortItems){var t=o[0],i=n.items.findIndex(function(e){return n.compareItems(t,e)});if(i>n.previousViewPort.startIndexWithBuffer){for(var l=!1,a=1;a<n.viewPortItems.length;++a)if(!n.compareItems(n.items[i+a],o[a])){l=!0;break}if(!l)return void n.scrollToPosition(n.previousViewPort.scrollStartPosition+e,0,s)}}s&&s()}}this.zone.runOutsideAngular(function(){requestAnimationFrame(function(){e&&n.resetWrapGroupDimensions();var r=n.calculateViewport(),o=e||r.startIndex!==n.previousViewPort.startIndex,s=e||r.endIndex!==n.previousViewPort.endIndex,l=r.scrollLength!==n.previousViewPort.scrollLength,a=r.padding!==n.previousViewPort.padding,h=r.scrollStartPosition!==n.previousViewPort.scrollStartPosition||r.scrollEndPosition!==n.previousViewPort.scrollEndPosition||r.maxScrollPosition!==n.previousViewPort.maxScrollPosition;if(n.previousViewPort=r,l&&n.renderer.setStyle(n.invisiblePaddingElementRef.nativeElement,n._invisiblePaddingProperty,r.scrollLength+"px"),a&&(n.useMarginInsteadOfTranslate?n.renderer.setStyle(n.contentElementRef.nativeElement,n._marginDir,r.padding+"px"):(n.renderer.setStyle(n.contentElementRef.nativeElement,"transform",n._translateDir+"("+r.padding+"px)"),n.renderer.setStyle(n.contentElementRef.nativeElement,"webkitTransform",n._translateDir+"("+r.padding+"px)"))),n.headerElementRef){var d=n.getScrollElement()[n._scrollType],p=n.getElementsOffset(),c=Math.max(d-r.padding-p+n.headerElementRef.nativeElement.clientHeight,0);n.renderer.setStyle(n.headerElementRef.nativeElement,"transform",n._translateDir+"("+c+"px)"),n.renderer.setStyle(n.headerElementRef.nativeElement,"webkitTransform",n._translateDir+"("+c+"px)")}var u=o||s?{startIndex:r.startIndex,endIndex:r.endIndex,scrollStartPosition:r.scrollStartPosition,scrollEndPosition:r.scrollEndPosition,startIndexWithBuffer:r.startIndexWithBuffer,endIndexWithBuffer:r.endIndexWithBuffer,maxScrollPosition:r.maxScrollPosition}:undefined;if(o||s||h){var f=function(){n.viewPortItems=r.startIndexWithBuffer>=0&&r.endIndexWithBuffer>=0?n.items.slice(r.startIndexWithBuffer,r.endIndexWithBuffer+1):[],n.vsUpdate.emit(n.viewPortItems),o&&n.vsStart.emit(u),s&&n.vsEnd.emit(u),(o||s)&&(n.changeDetectorRef.markForCheck(),n.vsChange.emit(u)),i>0?n.refresh_internal(!1,t,i-1):t&&t()};n.executeRefreshOutsideAngularZone?f():n.zone.run(f)}else{if(i>0&&(l||a))return void n.refresh_internal(!1,t,i-1);t&&t()}})})},e.prototype.getScrollElement=function(){return this.parentScroll instanceof Window?document.scrollingElement||document.documentElement||document.body:this.parentScroll||this.element.nativeElement},e.prototype.addScrollEventHandlers=function(){var e=this;if(!this.isAngularUniversalSSR){var t=this.getScrollElement();this.removeScrollEventHandlers(),this.zone.runOutsideAngular(function(){e.parentScroll instanceof Window?(e.disposeScrollHandler=e.renderer.listen("window","scroll",e.onScroll),e.disposeResizeHandler=e.renderer.listen("window","resize",e.onScroll)):(e.disposeScrollHandler=e.renderer.listen(t,"scroll",e.onScroll),e._checkResizeInterval>0&&(e.checkScrollElementResizedTimer=setInterval(function(){e.checkScrollElementResized()},e._checkResizeInterval)))})}},e.prototype.removeScrollEventHandlers=function(){this.checkScrollElementResizedTimer&&clearInterval(this.checkScrollElementResizedTimer),this.disposeScrollHandler&&(this.disposeScrollHandler(),this.disposeScrollHandler=undefined),this.disposeResizeHandler&&(this.disposeResizeHandler(),this.disposeResizeHandler=undefined)},e.prototype.getElementsOffset=function(){if(this.isAngularUniversalSSR)return 0;var e=0;if(this.containerElementRef&&this.containerElementRef.nativeElement&&(e+=this.containerElementRef.nativeElement[this._offsetType]),this.parentScroll){var t=this.getScrollElement(),i=this.getElementSize(this.element.nativeElement),n=this.getElementSize(t);this.horizontal?e+=i.left-n.left:e+=i.top-n.top,this.parentScroll instanceof Window||(e+=t[this._scrollType])}return e},e.prototype.countItemsPerWrapGroup=function(){if(this.isAngularUniversalSSR)return Math.round(this.horizontal?this.ssrViewportHeight/this.ssrChildHeight:this.ssrViewportWidth/this.ssrChildWidth);var e=this.horizontal?"offsetLeft":"offsetTop",t=(this.containerElementRef&&this.containerElementRef.nativeElement||this.contentElementRef.nativeElement).children,i=t?t.length:0;if(0===i)return 1;for(var n=t[0][e],r=1;r<i&&n===t[r][e];)++r;return r},e.prototype.getScrollStartPosition=function(){var e=undefined;return this.parentScroll instanceof Window&&(e=window[this._pageOffsetType]),e||this.getScrollElement()[this._scrollType]||0},e.prototype.resetWrapGroupDimensions=function(){var e=this.wrapGroupDimensions;if(this.invalidateAllCachedMeasurements(),this.enableUnequalChildrenSizes&&e&&0!==e.numberOfKnownWrapGroupChildSizes)for(var t=this.countItemsPerWrapGroup(),i=0;i<e.maxChildSizePerWrapGroup.length;++i){var n=e.maxChildSizePerWrapGroup[i];if(n&&n.items&&n.items.length){if(n.items.length!==t)return;for(var r=!1,o=t*i,s=0;s<t;++s)if(!this.compareItems(n.items[s],this.items[o+s])){r=!0;break}r||(++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths+=n.childWidth||0,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights+=n.childHeight||0,this.wrapGroupDimensions.maxChildSizePerWrapGroup[i]=n)}}},e.prototype.calculateDimensions=function(){var e=this.getScrollElement();this.calculatedScrollbarHeight=Math.max(Math.min(e.offsetHeight-e.clientHeight,25),this.calculatedScrollbarHeight),this.calculatedScrollbarWidth=Math.max(Math.min(e.offsetWidth-e.clientWidth,25),this.calculatedScrollbarWidth);var t,i,n,r=e.offsetWidth-(this.scrollbarWidth||this.calculatedScrollbarWidth||(this.horizontal?0:25)),o=e.offsetHeight-(this.scrollbarHeight||this.calculatedScrollbarHeight||(this.horizontal?25:0)),s=this.containerElementRef&&this.containerElementRef.nativeElement||this.contentElementRef.nativeElement,l=this.countItemsPerWrapGroup();if(this.isAngularUniversalSSR){r=this.ssrViewportWidth,o=this.ssrViewportHeight,i=this.ssrChildWidth,n=this.ssrChildHeight;var a=Math.max(Math.ceil(r/i),1),h=Math.max(Math.ceil(o/n),1);t=this.horizontal?a:h}else if(this.enableUnequalChildrenSizes){var d=e[this._scrollType]-(this.previousViewPort?this.previousViewPort.padding:0),p=this.previousViewPort.startIndexWithBuffer||0,c=Math.ceil(p/l),u=0,f=0,m=0,g=0;t=0;for(var v=0;v<s.children.length;++v){++p;W=s.children[v],E=this.getElementSize(W);if(u=Math.max(u,E.width),f=Math.max(f,E.height),p%l==0){var y=this.wrapGroupDimensions.maxChildSizePerWrapGroup[c];y&&(--this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths-=y.childWidth||0,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights-=y.childHeight||0),++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;var S=this.items.slice(p-l,p);if(this.wrapGroupDimensions.maxChildSizePerWrapGroup[c]={childWidth:u,childHeight:f,items:S},this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths+=u,this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights+=f,this.horizontal){var w=Math.min(u,Math.max(r-m,0));if(d>0)w-=P=Math.min(d,w),d-=P;m+=w,w>0&&r>=m&&++t}else{var P,b=Math.min(f,Math.max(o-g,0));if(d>0)b-=P=Math.min(d,b),d-=P;g+=b,b>0&&o>=g&&++t}++c,u=0,f=0}}var x=this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths/this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes,I=this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights/this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;i=this.childWidth||x||r,n=this.childHeight||I||o,this.horizontal?r>m&&(t+=Math.ceil((r-m)/i)):o>g&&(t+=Math.ceil((o-g)/n))}else{if(s.children.length>0){this.childWidth&&this.childHeight||(!this.minMeasuredChildWidth&&r>0&&(this.minMeasuredChildWidth=r),!this.minMeasuredChildHeight&&o>0&&(this.minMeasuredChildHeight=o));var W=s.children[0],E=this.getElementSize(W);this.minMeasuredChildWidth=Math.min(this.minMeasuredChildWidth,E.width),this.minMeasuredChildHeight=Math.min(this.minMeasuredChildHeight,E.height)}i=this.childWidth||this.minMeasuredChildWidth||r,n=this.childHeight||this.minMeasuredChildHeight||o;a=Math.max(Math.ceil(r/i),1),h=Math.max(Math.ceil(o/n),1);t=this.horizontal?a:h}var C=this.items.length,z=l*t,T=C/z,_=Math.ceil(C/l),O=0,M=this.horizontal?i:n;if(this.enableUnequalChildrenSizes){var R=0;for(v=0;v<_;++v){var G=this.wrapGroupDimensions.maxChildSizePerWrapGroup[v]&&this.wrapGroupDimensions.maxChildSizePerWrapGroup[v][this._childScrollDim];G?O+=G:++R}O+=Math.round(R*M)}else O=_*M;this.headerElementRef&&(O+=this.headerElementRef.nativeElement.clientHeight);var D=this.horizontal?r:o;return{itemCount:C,itemsPerWrapGroup:l,wrapGroupsPerPage:t,itemsPerPage:z,pageCount_fractional:T,childWidth:i,childHeight:n,scrollLength:O,viewportLength:D,maxScrollPosition:Math.max(O-D,0)}},e.prototype.calculatePadding=function(e,t){if(0===t.itemCount)return 0;var i=t[this._childScrollDim],n=Math.floor(e/t.itemsPerWrapGroup)||0;if(!this.enableUnequalChildrenSizes)return i*n;for(var r=0,o=0,s=0;s<n;++s){var l=this.wrapGroupDimensions.maxChildSizePerWrapGroup[s]&&this.wrapGroupDimensions.maxChildSizePerWrapGroup[s][this._childScrollDim];l?o+=l:++r}return o+=Math.round(r*i)},e.prototype.calculatePageInfo=function(e,t){var i=0;if(this.enableUnequalChildrenSizes)for(var n=Math.ceil(t.itemCount/t.itemsPerWrapGroup),r=0,o=t[this._childScrollDim],s=0;s<n;++s){var l=this.wrapGroupDimensions.maxChildSizePerWrapGroup[s]&&this.wrapGroupDimensions.maxChildSizePerWrapGroup[s][this._childScrollDim];if(e<(r+=l||o)){i=s/n;break}}else i=e/t.scrollLength;var a=Math.min(Math.max(i*t.pageCount_fractional,0),t.pageCount_fractional)*t.itemsPerPage,h=t.itemCount-t.itemsPerPage-1,d=Math.min(Math.floor(a),h);if(d-=d%t.itemsPerWrapGroup,this.stripedTable){var p=2*t.itemsPerWrapGroup;d%p!=0&&(d=Math.max(d-d%p,0))}var c=Math.ceil(a)+t.itemsPerPage-1,u=(c+1)%t.itemsPerWrapGroup;u>0&&(c+=t.itemsPerWrapGroup-u),isNaN(d)&&(d=0),isNaN(c)&&(c=0),d=Math.min(Math.max(d,0),t.itemCount-1),c=Math.min(Math.max(c,0),t.itemCount-1);var f=this.bufferAmount*t.itemsPerWrapGroup;return{startIndex:d,endIndex:c,startIndexWithBuffer:Math.min(Math.max(d-f,0),t.itemCount-1),endIndexWithBuffer:Math.min(Math.max(c+f,0),t.itemCount-1),scrollStartPosition:e,scrollEndPosition:e+t.viewportLength,maxScrollPosition:t.maxScrollPosition}},e.prototype.calculateViewport=function(){var e=this.calculateDimensions(),t=this.getElementsOffset(),i=this.getScrollStartPosition();i>e.scrollLength+t&&!(this.parentScroll instanceof Window)?i=e.scrollLength:i-=t,i=Math.max(0,i);var n=this.calculatePageInfo(i,e),r=this.calculatePadding(n.startIndexWithBuffer,e),o=e.scrollLength;return{startIndex:n.startIndex,endIndex:n.endIndex,startIndexWithBuffer:n.startIndexWithBuffer,endIndexWithBuffer:n.endIndexWithBuffer,padding:Math.round(r),scrollLength:Math.round(o),scrollStartPosition:n.scrollStartPosition,scrollEndPosition:n.scrollEndPosition,maxScrollPosition:n.maxScrollPosition}},r([t.Input(),s("design:type",Boolean)],e.prototype,"executeRefreshOutsideAngularZone",void 0),r([t.Input(),s("design:type",Boolean),s("design:paramtypes",[Boolean])],e.prototype,"enableUnequalChildrenSizes",null),r([t.Input(),s("design:type",Boolean)],e.prototype,"useMarginInsteadOfTranslate",void 0),r([t.Input(),s("design:type",Boolean)],e.prototype,"modifyOverflowStyleOfParentScroll",void 0),r([t.Input(),s("design:type",Boolean)],e.prototype,"stripedTable",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"scrollbarWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"scrollbarHeight",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"childWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"childHeight",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrChildWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrChildHeight",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrViewportWidth",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"ssrViewportHeight",void 0),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"bufferAmount",null),r([t.Input(),s("design:type",Number)],e.prototype,"scrollAnimationTime",void 0),r([t.Input(),s("design:type",Number)],e.prototype,"resizeBypassRefreshThreshold",void 0),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"scrollThrottlingTime",null),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"scrollDebounceTime",null),r([t.Input(),s("design:type",Number),s("design:paramtypes",[Number])],e.prototype,"checkResizeInterval",null),r([t.Input(),s("design:type",Array),s("design:paramtypes",[Array])],e.prototype,"items",null),r([t.Input(),s("design:type",Function)],e.prototype,"compareItems",void 0),r([t.Input(),s("design:type",Boolean),s("design:paramtypes",[Boolean])],e.prototype,"horizontal",null),r([t.Input(),s("design:type",Object),s("design:paramtypes",[Object])],e.prototype,"parentScroll",null),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsUpdate",void 0),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsChange",void 0),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsStart",void 0),r([t.Output(),s("design:type",t.EventEmitter)],e.prototype,"vsEnd",void 0),r([t.ViewChild("content",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"contentElementRef",void 0),r([t.ViewChild("invisiblePadding",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"invisiblePaddingElementRef",void 0),r([t.ContentChild("header",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"headerElementRef",void 0),r([t.ContentChild("container",{read:t.ElementRef,"static":!1}),s("design:type",t.ElementRef)],e.prototype,"containerElementRef",void 0),e=r([t.Component({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 "]}),o(4,t.Inject(t.PLATFORM_ID)),o(5,t.Optional()),o(5,t.Inject("virtual-scroller-default-options")),s("design:paramtypes",[t.ElementRef,t.Renderer2,t.NgZone,t.ChangeDetectorRef,Object,Object])],e)}(),h=function(){function e(){}return e=r([t.NgModule({exports:[a],declarations:[a],imports:[i.CommonModule],providers:[{provide:"virtual-scroller-default-options",useFactory:l}]})],e)}();e.VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY=l,e.VirtualScrollerComponent=a,e.VirtualScrollerModule=h,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-virtual-scroller.umd.min.js.map

@@ -427,3 +427,3 @@ import { __decorate, __metadata, __param } from 'tslib';

//Without maxRunTimes, If the user is actively scrolling this code would become an infinite loop until they stopped scrolling. This would be okay, except each scroll event would start an additional infinte loop. We want to short-circuit it to prevent this.
if (itemsArrayModified && this.previousViewPort.scrollStartPosition > 0) {
if (itemsArrayModified && this.previousViewPort && this.previousViewPort.scrollStartPosition > 0) {
//if items were prepended, scroll forward to keep same items visible

@@ -430,0 +430,0 @@ let oldViewPort = this.previousViewPort;

@@ -483,3 +483,3 @@ import { __decorate, __metadata, __param } from 'tslib';

if (maxRunTimes === void 0) { maxRunTimes = 2; }
if (itemsArrayModified && this.previousViewPort.scrollStartPosition > 0) {
if (itemsArrayModified && this.previousViewPort && this.previousViewPort.scrollStartPosition > 0) {
//if items were prepended, scroll forward to keep same items visible

@@ -486,0 +486,0 @@ var oldViewPort_1 = this.previousViewPort;

{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"name": "ngx-virtual-scroller",
"version": "3.0.2",
"version": "3.0.3",
"description": "Angular module for virtual -infinite- list. Supports horizontal/vertical, variable heights, & multi-column",

@@ -6,0 +6,0 @@ "main": "bundles/ngx-virtual-scroller.umd.js",

@@ -0,2 +1,16 @@

# Sponsors
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<a href="https://moviepix.app/?utm_source=sponsor&utm_campaign=ngx-virtual-scroller" target="_blank">
<img src="https://moviepix.app/images/Logo_Small.png">
<img src="https://moviepix.app/images/Title_Small.png">
</a>
</td>
</tr>
</tbody>
</table>
# ngx-virtual-scroller

@@ -13,16 +27,16 @@

* Supports multi-column
* Easy to use apis
* OpenSource and available in GitHub
* Supports multi-column
* Easy to use apis
* OpenSource and available in GitHub
## Breaking Changes:
* v3.0.0: Several deprecated properties removed (see changelog).
If items array is prepended with additional items, keep scroll on currently visible items, if possible. There is no flag to disable this, because it seems to be the best user-experience in all cases. If you disagree, please create an issue.
* v2.1.0: Dependency Injection syntax was changed.
* v1.0.6: viewPortIndices API property removed. (use viewPortInfo instead)
* v1.0.3: Renamed everything from virtual-scroll to virtual-scroller and from virtualScroll to virtualScroller
* v0.4.13: resizeBypassRefreshTheshold renamed to resizeBypassRefreshThreshold (typo)
* 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.
viewPortIndices.arrayStartIndex renamed to viewPortIndices.startIndex and viewPortIndices.arrayEndIndex renamed to viewPortIndices.endIndex
* v0.4.4: The value of IPageInfo.endIndex wasn't intuitive. This has been corrected. Both IPageInfo.startIndex and IPageInfo.endIndex are the 0-based array indexes of the items being rendered in the viewport. (Previously Change.EndIndex was the array index + 1)
* v3.0.0: Several deprecated properties removed (see changelog).
If items array is prepended with additional items, keep scroll on currently visible items, if possible. There is no flag to disable this, because it seems to be the best user-experience in all cases. If you disagree, please create an issue.
* v2.1.0: Dependency Injection syntax was changed.
* v1.0.6: viewPortIndices API property removed. (use viewPortInfo instead)
* v1.0.3: Renamed everything from virtual-scroll to virtual-scroller and from virtualScroll to virtualScroller
* v0.4.13: resizeBypassRefreshTheshold renamed to resizeBypassRefreshThreshold (typo)
* 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.
viewPortIndices.arrayStartIndex renamed to viewPortIndices.startIndex and viewPortIndices.arrayEndIndex renamed to viewPortIndices.endIndex
* v0.4.4: The value of IPageInfo.endIndex wasn't intuitive. This has been corrected. Both IPageInfo.startIndex and IPageInfo.endIndex are the 0-based array indexes of the items being rendered in the viewport. (Previously Change.EndIndex was the array index + 1)

@@ -32,13 +46,12 @@ NOTE: API methods marked (DEPRECATED) will be removed in the next major version. Please attempt to stop using them in your code & create an issue if you believe they're still necessary.

## New features:
* Support for fixed <thead> on <table> elements.
* Added API to query for current scroll px position (also passed as argument to IPageInfo listeners)
* Added API to invalidate cached child item measurements (if your child item sizes change dynamically)
* Added API to scroll to specific px position
* If scroll container resizes, the items will auto-refresh. Can be disabled if it causes any performance issues by setting [checkResizeInterval]="0"
* useMarginInsteadOfTranslate flag. Defaults to false. This can affect performance (better/worse depending on your circumstances), and also creates a workaround for the transform+position:fixed browser bug.
* Support for horizontal scrollbars
* Support for elements with different sizes
* Added ability to put other elements inside of scroll (Need to wrap list itself in @ContentChild('container'))
* Added ability to use any parent with scrollbar instead of this element (@Input() parentScroll)
* Support for fixed <thead> on <table> elements.
* Added API to query for current scroll px position (also passed as argument to IPageInfo listeners)
* Added API to invalidate cached child item measurements (if your child item sizes change dynamically)
* Added API to scroll to specific px position
* If scroll container resizes, the items will auto-refresh. Can be disabled if it causes any performance issues by setting [checkResizeInterval]="0"
* useMarginInsteadOfTranslate flag. Defaults to false. This can affect performance (better/worse depending on your circumstances), and also creates a workaround for the transform+position:fixed browser bug.
* Support for horizontal scrollbars
* Support for elements with different sizes
* Added ability to put other elements inside of scroll (Need to wrap list itself in @ContentChild('container'))
* Added ability to use any parent with scrollbar instead of this element (@Input() parentScroll)

@@ -126,3 +139,2 @@ ## Demo

}
```

@@ -143,3 +155,3 @@

## Interfaces
```
```ts
interface IPageInfo {

@@ -195,3 +207,3 @@ startIndex: number;

| 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.
| executeRefreshOutsideAngularZone (deprecated) | boolean | Defaults to false. DO NOT USE. This flag disables Angular ChangeDetection while scrolling (which provides a performance boost at the expense of making your app buggy). Read the "Performance" section below to learn a better approach.
| executeRefreshOutsideAngularZone | boolean | Defaults to false. Disables full-app Angular ChangeDetection while scrolling, which can give a performance boost. Requires developer to manually execute change detection on any components which may have changed. USE WITH CAUTION - Read the "Performance" section below.

@@ -267,3 +279,2 @@ 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

```ts
import { IPageInfo } from 'ngx-virtual-scroller';

@@ -352,3 +363,3 @@ ...

Example:
```
```html
<virtual-scroller #scroll [items]="items">

@@ -550,3 +561,5 @@ <my-custom-component [expanded]="item.expanded" *ngFor="let item of scroll.viewPortItems">

My personal suggestion on the easiest way to implement OnPush across your entire app:
```
```ts
import { ChangeDetectorRef } from '@angular/core';
public class ManualChangeDetection {

@@ -644,6 +657,39 @@ public queueChangeDetection(): void {

## Performance - executeRefreshOutsideAngularZone
This API is meant as a quick band-aid fix for performance issues. Please read the other performance sections above to learn the ideal way to fix performance issues.
ChangeDetectionStrategy.OnPush is the recommended strategy as it improves the entire app performance, not just virtual-scroller. However, ChangeDetectionStrategy.OnPush is hard to implement. executeRefreshOutsideAngularZone may be an easier initial approach until you're ready to tackle ChangeDetectionStrategy.OnPush.
If you've correctly implemented ChangeDetectionStrategy.OnPush for 100% of your components, the executeRefreshOutsideAngularZone will not provide any performance benefit.
If you have not yet done this, scrolling may feel slow. This is because Angular performs a full-app change detection while scrolling. However, it's likely that only the components inside the scroller actually need the change detection to run, so a full-app change detection cycle is overkill.
In this case you can get a free/easy performance boost with the following code:
```ts
import { ChangeDetectorRef } from '@angular/core';
public class MainComponent {
constructor(public changeDetectorRef: ChangeDetectorRef) {
}
}
```
```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>
```
Note: executeRefreshOutsideAngularZone will disable Angular ChangeDetection during all virtual-scroller events, including: vsUpdate, vsStart, vsEnd, vsChange. If you change any data-bound properties inside these event handlers, you must perform manual change detection on those specific components. This can be done via changeDetectorRef.detectChanges() at the end of the event handler. Note: The changeDetectorRef is component-specific, so you'll need to inject it into a private variable in the constructor of the appropriate component before calling it in response to the virtual-scroller events.
WARNING - Failure to performa manual change detection in response to virtual-scroller events will cause your components to render a stale UI for a short time (until the next Change Detection cycle), which will make your app feel buggy.
Note - changeDetectorRef.detectChanges() will execute change detection on the component and all its nested children. If multiple components need to run change detection in response to a virtual-scroller event, you can call detectChanges from a higher-level component in the ancestor hierarchy rather than on each individual component. However, its important to avoid too many extra change detection cycles by not going too high in the hierarchy unless all the nested children really need to have change detection performed.
Note - All virtual-scroller events are emitted at the same time in response to its internal "refresh" function. Some of these event emitters are bypassed if certain criteria don't apply. however vsUpdate will always be emitted. For this reason, you should consolidate all data-bound property changes & manual change detection into the vsUpdate event handler, to avoid duplicate change detection cycles from executing during the other virtual-scroller events.
In the above code example, (vsUpdate)="changeDetectorRef.detectChanges()" is necessary because scroll.viewPortItems was changed internally be virtual-scroller during its internal "render" function before emitting (vsUpdate). executeRefreshOutsideAngularZone prevents MainComponent from refreshing its data-binding in response to this change, so a manual Change Detection cycle must be run. No extra manual change detection code is necessary for virtual-scroller or my-custom-component, even if their data-bound properties have changed, because they're nested children of MainComponent.
## Performance - scrollDebounceTime / scrollThrottlingTime
These APIs are meant as a quick band-aid fix for performance issues. Please read the other performance sections above to learn the correct way to fix performance issues.
These APIs are meant as a quick band-aid fix for performance issues. Please read the other performance sections above to learn the ideal way to fix performance issues.

@@ -663,3 +709,3 @@ Without these set, virtual-scroller will refresh immediately whenever the user scrolls.

1) Use https://www.npmjs.com/package/domino and https://www.npmjs.com/package/raf polyfills in your main.server.ts file
```
```ts
const domino = require('domino');

@@ -675,3 +721,3 @@ require('raf/polyfill');

3) Run your app in a real browser without SSR and determine the average width/height of the child elements inside virtual-scroller as well as the width/height of the virtual-scroller (or [parentScroll] element). Use these values to set the [ssrChildWidth]/[ssrChildHeight]/[ssrViewportWidth]/[ssrViewportHeight] properties.
```
```html
<virtual-scroller #scroll [items]="items">

@@ -678,0 +724,0 @@

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc