angular2-virtual-scroll - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

CHANGELOG.md

 
+# v0.3.1
+
+* Merge PR [!117](https://github.com/rintoj/angular2-virtual-scroll/pull/117) - Run scroll and frame handlers outside of angular zone for performance
+
 # v0.3.0
@@ -3,0 +7,0 @@

dist/virtual-scroll.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
 export interface ChangeEvent {
@@ -7,3 +7,5 @@ start?: number;
 export declare class VirtualScrollComponent implements OnInit, OnChanges, OnDestroy {
-    private element;
+    private readonly element;
+    private readonly renderer;
+    private readonly zone;
     items: any[];
@@ -25,5 +27,4 @@ scrollbarWidth: number;
     contentElementRef: ElementRef;
+    shimElementRef: ElementRef;
     containerElementRef: ElementRef;
-    topPadding: number;
-    scrollHeight: number;
     previousStart: number;
@@ -33,5 +34,9 @@ previousEnd: number;
     currentTween: any;
-    window: Window;
-    constructor(element: ElementRef);
-    onScroll(): void;
+    private disposeScrollHandler;
+    private disposeResizeHandler;
+    /** Cache of the last scroll height to prevent setting CSS when not needed. */
+    private lastScrollHeight;
+    /** Cache of the last top padding to prevent setting CSS when not needed. */
+    private lastTopPadding;
+    constructor(element: ElementRef, renderer: Renderer2, zone: NgZone);
     ngOnInit(): void;
@@ -43,3 +48,3 @@ ngOnDestroy(): void;
     private addParentEventHandlers(parentScroll);
-    private removeParentEventHandlers(parentScroll);
+    private removeParentEventHandlers();
     private countItemsPerRow();
@@ -46,0 +51,0 @@ private getElementsOffset();

dist/virtual-scroll.js

@@ -6,5 +6,7 @@ "use strict";
 var VirtualScrollComponent = (function () {
-    function VirtualScrollComponent(element) {
+    function VirtualScrollComponent(element, renderer, zone) {
         var _this = this;
         this.element = element;
+        this.renderer = renderer;
+        this.zone = zone;
         this.items = [];
@@ -21,3 +23,6 @@ this.bufferAmount = 0;
         this.startupLoop = true;
-        this.window = window;
+        /** Cache of the last scroll height to prevent setting CSS when not needed. */
+        this.lastScrollHeight = -1;
+        /** Cache of the last top padding to prevent setting CSS when not needed. */
+        this.lastTopPadding = -1;
     }
@@ -32,3 +37,2 @@ Object.defineProperty(VirtualScrollComponent.prototype, "parentScroll", {
             }
-            this.removeParentEventHandlers(this._parentScroll);
             this._parentScroll = element;
@@ -40,11 +44,11 @@ this.addParentEventHandlers(this._parentScroll);
     });
-    VirtualScrollComponent.prototype.onScroll = function () {
-        this.refresh();
-    };
     VirtualScrollComponent.prototype.ngOnInit = function () {
         this.scrollbarWidth = 0; // this.element.nativeElement.offsetWidth - this.element.nativeElement.clientWidth;
         this.scrollbarHeight = 0; // this.element.nativeElement.offsetHeight - this.element.nativeElement.clientHeight;
+        if (!this.parentScroll) {
+            this.addParentEventHandlers(this.element.nativeElement);
+        }
     };
     VirtualScrollComponent.prototype.ngOnDestroy = function () {
-        this.removeParentEventHandlers(this.parentScroll);
+        this.removeParentEventHandlers();
     };
@@ -62,3 +66,5 @@ VirtualScrollComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
-        requestAnimationFrame(function () { return _this.calculateItems(); });
+        this.zone.runOutsideAngular(function () {
+            requestAnimationFrame(function () { return _this.calculateItems(); });
+        });
     };
@@ -81,3 +87,3 @@ VirtualScrollComponent.prototype.scrollInto = function (item) {
             .onUpdate(function (data) {
-            el.scrollTop = data.scrollTop;
+            _this.renderer.setProperty(el, 'scrollTop', data.scrollTop);
             _this.refresh();
@@ -88,4 +94,7 @@ })
             _this.currentTween.update(time);
-            if (_this.currentTween._object.scrollTop !== scrollTop)
-                window.requestAnimationFrame(animate);
+            if (_this.currentTween._object.scrollTop !== scrollTop) {
+                _this.zone.runOutsideAngular(function () {
+                    requestAnimationFrame(animate);
+                });
+            }
         };
@@ -95,16 +104,24 @@ animate();
     VirtualScrollComponent.prototype.addParentEventHandlers = function (parentScroll) {
+        var _this = this;
+        this.removeParentEventHandlers();
         if (parentScroll) {
-            parentScroll.addEventListener('scroll', this.refreshHandler);
-            if (parentScroll instanceof Window) {
-                parentScroll.addEventListener('resize', this.refreshHandler);
-            }
+            this.zone.runOutsideAngular(function () {
+                _this.disposeScrollHandler =
+                    _this.renderer.listen(parentScroll, 'scroll', _this.refreshHandler);
+                if (parentScroll instanceof Window) {
+                    _this.disposeScrollHandler =
+                        _this.renderer.listen('window', 'resize', _this.refreshHandler);
+                }
+            });
         }
     };
-    VirtualScrollComponent.prototype.removeParentEventHandlers = function (parentScroll) {
-        if (parentScroll) {
-            parentScroll.removeEventListener('scroll', this.refreshHandler);
-            if (parentScroll instanceof Window) {
-                parentScroll.removeEventListener('resize', this.refreshHandler);
-            }
+    VirtualScrollComponent.prototype.removeParentEventHandlers = function () {
+        if (this.disposeScrollHandler) {
+            this.disposeScrollHandler();
+            this.disposeScrollHandler = undefined;
         }
+        if (this.disposeResizeHandler) {
+            this.disposeResizeHandler();
+            this.disposeResizeHandler = undefined;
+        }
     };
@@ -158,5 +175,10 @@ VirtualScrollComponent.prototype.countItemsPerRow = function () {
         var scrollTop = Math.max(0, elScrollTop);
-        if (itemsPerCol === 1 && Math.floor(scrollTop / this.scrollHeight * itemCount) + itemsPerRowByCalc >= itemCount) {
+        var scrollHeight = childHeight * itemCount / itemsPerRow;
+        if (itemsPerCol === 1 && Math.floor(scrollTop / scrollHeight * itemCount) + itemsPerRowByCalc >= itemCount) {
             itemsPerRow = itemsPerRowByCalc;
         }
+        if (scrollHeight !== this.lastScrollHeight) {
+            this.renderer.setStyle(this.shimElementRef.nativeElement, 'height', scrollHeight + "px");
+            this.lastScrollHeight = scrollHeight;
+        }
         return {
@@ -170,6 +192,9 @@ itemCount: itemCount,
             itemsPerCol: itemsPerCol,
-            itemsPerRowByCalc: itemsPerRowByCalc
+            itemsPerRowByCalc: itemsPerRowByCalc,
+            scrollHeight: scrollHeight,
         };
     };
     VirtualScrollComponent.prototype.calculateItems = function () {
+        var _this = this;
+        core_1.NgZone.assertNotInAngularZone();
         var el = this.parentScroll instanceof Window ? document.body : this.parentScroll || this.element.nativeElement;
@@ -182,8 +207,7 @@ var d = this.calculateDimensions();
             : el.scrollTop;
-        this.scrollHeight = d.childHeight * d.itemCount / d.itemsPerRow;
-        if (elScrollTop > this.scrollHeight) {
-            elScrollTop = this.scrollHeight + offsetTop;
+        if (elScrollTop > d.scrollHeight) {
+            elScrollTop = d.scrollHeight + offsetTop;
         }
         var scrollTop = Math.max(0, elScrollTop - offsetTop);
-        var indexByScrollTop = scrollTop / this.scrollHeight * d.itemCount / d.itemsPerRow;
+        var indexByScrollTop = scrollTop / d.scrollHeight * d.itemCount / d.itemsPerRow;
         var end = Math.min(d.itemCount, Math.ceil(indexByScrollTop) * d.itemsPerRow + d.itemsPerRow * (d.itemsPerCol + 1));
@@ -197,4 +221,8 @@ var maxStartEnd = end;
         var start = Math.min(maxStart, Math.floor(indexByScrollTop) * d.itemsPerRow);
-        this.topPadding = d.childHeight * Math.ceil(start / d.itemsPerRow) - (d.childHeight * Math.min(start, this.bufferAmount));
-        ;
+        var topPadding = (items == null || items.length === 0) ? 0 : (d.childHeight * Math.ceil(start / d.itemsPerRow) - (d.childHeight * Math.min(start, this.bufferAmount)));
+        if (topPadding !== this.lastTopPadding) {
+            this.renderer.setStyle(this.contentElementRef.nativeElement, 'transform', "translateY(" + topPadding + "px)");
+            this.renderer.setStyle(this.contentElementRef.nativeElement, 'webkitTransform', "translateY(" + topPadding + "px)");
+            this.lastTopPadding = topPadding;
+        }
         start = !isNaN(start) ? start : -1;
@@ -207,21 +235,23 @@ end = !isNaN(end) ? end : -1;
         if (start !== this.previousStart || end !== this.previousEnd) {
-            // update the scroll list
-            this.viewPortItems = items.slice(start, end);
-            this.update.emit(this.viewPortItems);
-            // emit 'start' event
-            if (start !== this.previousStart && this.startupLoop === false) {
-                this.start.emit({ start: start, end: end });
-            }
-            // emit 'end' event
-            if (end !== this.previousEnd && this.startupLoop === false) {
-                this.end.emit({ start: start, end: end });
-            }
-            this.previousStart = start;
-            this.previousEnd = end;
-            if (this.startupLoop === true) {
-                this.refresh();
-            }
-            else {
-                this.change.emit({ start: start, end: end });
-            }
+            this.zone.run(function () {
+                // update the scroll list
+                _this.viewPortItems = items.slice(start, end);
+                _this.update.emit(_this.viewPortItems);
+                // emit 'start' event
+                if (start !== _this.previousStart && _this.startupLoop === false) {
+                    _this.start.emit({ start: start, end: end });
+                }
+                // emit 'end' event
+                if (end !== _this.previousEnd && _this.startupLoop === false) {
+                    _this.end.emit({ start: start, end: end });
+                }
+                _this.previousStart = start;
+                _this.previousEnd = end;
+                if (_this.startupLoop === true) {
+                    _this.refresh();
+                }
+                else {
+                    _this.change.emit({ start: start, end: end });
+                }
+            });
         }
@@ -237,3 +267,3 @@ else if (this.startupLoop === true) {
                     exportAs: 'virtualScroll',
-                    template: "\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ",
+                    template: "\n    <div class=\"total-padding\" #shim></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ",
                     host: {
@@ -248,2 +278,4 @@ '[style.overflow-y]': "parentScroll ? 'hidden' : 'auto'"
         { type: core_1.ElementRef, },
+        { type: core_1.Renderer2, },
+        { type: core_1.NgZone, },
     ]; };
@@ -264,4 +296,4 @@ VirtualScrollComponent.propDecorators = {
         'contentElementRef': [{ type: core_1.ViewChild, args: ['content', { read: core_1.ElementRef },] },],
+        'shimElementRef': [{ type: core_1.ViewChild, args: ['shim', { read: core_1.ElementRef },] },],
         'containerElementRef': [{ type: core_1.ContentChild, args: ['container',] },],
-        'onScroll': [{ type: core_1.HostListener, args: ['scroll',] },],
     };
@@ -268,0 +300,0 @@ return VirtualScrollComponent;

dist/virtual-scroll.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ChangeEvent":{"__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\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[style.overflow-y]":"parentScroll ? 'hidden' : 'auto'","$quoted$":["[style.overflow-y]"]},"styles":["\n    :host {\n      overflow: hidden;\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__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"}}]}],"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"}}]}],"change":[{"__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"}}]}],"end":[{"__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"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"addParentEventHandlers":[{"__symbolic":"method"}],"removeParentEventHandlers":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__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"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"ChangeEvent":{"__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\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[style.overflow-y]":"parentScroll ? 'hidden' : 'auto'"},"styles":["\n    :host {\n      overflow: hidden;\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__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"}}]}],"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"}}]}],"change":[{"__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"}}]}],"end":[{"__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"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"addParentEventHandlers":[{"__symbolic":"method"}],"removeParentEventHandlers":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__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"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ChangeEvent":{"__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\" #shim></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[style.overflow-y]":"parentScroll ? 'hidden' : 'auto'","$quoted$":["[style.overflow-y]"]},"styles":["\n    :host {\n      overflow: hidden;\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__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"}}]}],"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"}}]}],"change":[{"__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"}}]}],"end":[{"__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"}}]}]}],"shimElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["shim",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container"]}]}],"__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"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"addParentEventHandlers":[{"__symbolic":"method"}],"removeParentEventHandlers":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__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"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"ChangeEvent":{"__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\" #shim></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[style.overflow-y]":"parentScroll ? 'hidden' : 'auto'"},"styles":["\n    :host {\n      overflow: hidden;\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__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"}}]}],"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"}}]}],"change":[{"__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"}}]}],"end":[{"__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"}}]}]}],"shimElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["shim",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container"]}]}],"__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"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"addParentEventHandlers":[{"__symbolic":"method"}],"removeParentEventHandlers":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__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"}]}]}]}}}]

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

550498

increased by36.55%

Lines of code

8995

increased by0.4%

No dependency changes