angular-infinite-list - npm Package Compare versions

Comparing version 0.3.7 to 0.5.1

bundles/angular-infinite-list.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Subject'), require('@angular/common')) :
-	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Subject', '@angular/common'], factory) :
-	(factory((global['angular-infinite-list'] = {}),global.ng.core,global.Rx,global.ng.common));
-}(this, (function (exports,core,Subject,common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs', '@angular/common'], factory) :
+    (global = global || self, factory(global['angular-infinite-list'] = {}, global.core, global.rxjs, global.common));
+}(this, (function (exports, core, rxjs, common) { 'use strict';
 
-var ILEvent = (function () {
-    function ILEvent() {
-        this.offset = 0;
-        this.start = 0;
-        this.stop = 0;
-    }
-    ILEvent.prototype.getStyle = function (index) { };
-    return ILEvent;
-}());
+    var ILEvent = (function () {
+        function ILEvent() {
+            this.offset = 0;
+            this.start = 0;
+            this.stop = 0;
+        }
+        ILEvent.prototype.getStyle = function (index) { };
+        return ILEvent;
+    }());
 
-var ALIGN_AUTO = 'auto';
-var ALIGN_START = 'start';
-var ALIGN_CENTER = 'center';
-var ALIGN_END = 'end';
-var DIRECTION_VERTICAL = 'vertical';
-var DIRECTION_HORIZONTAL = 'horizontal';
-var SCROLL_CHANGE_OBSERVED = 'observed';
-var SCROLL_CHANGE_REQUESTED = 'requested';
-var scrollProp = (_a = {},
-    _a[DIRECTION_VERTICAL] = 'scrollTop',
-    _a[DIRECTION_HORIZONTAL] = 'scrollLeft',
-    _a);
-var sizeProp = (_b = {},
-    _b[DIRECTION_VERTICAL] = 'height',
-    _b[DIRECTION_HORIZONTAL] = 'width',
-    _b);
-var positionProp = (_c = {},
-    _c[DIRECTION_VERTICAL] = 'top',
-    _c[DIRECTION_HORIZONTAL] = 'left',
-    _c);
-var _a;
-var _b;
-var _c;
+    var ALIGN_AUTO = 'auto';
+    var ALIGN_START = 'start';
+    var ALIGN_CENTER = 'center';
+    var ALIGN_END = 'end';
+    var DIRECTION_VERTICAL = 'vertical';
+    var DIRECTION_HORIZONTAL = 'horizontal';
+    var SCROLL_CHANGE_OBSERVED = 'observed';
+    var SCROLL_CHANGE_REQUESTED = 'requested';
+    var scrollProp = (_a = {},
+        _a[DIRECTION_VERTICAL] = 'scrollTop',
+        _a[DIRECTION_HORIZONTAL] = 'scrollLeft',
+        _a);
+    var sizeProp = (_b = {},
+        _b[DIRECTION_VERTICAL] = 'height',
+        _b[DIRECTION_HORIZONTAL] = 'width',
+        _b);
+    var positionProp = (_c = {},
+        _c[DIRECTION_VERTICAL] = 'top',
+        _c[DIRECTION_HORIZONTAL] = 'left',
+        _c);
+    var _a, _b, _c;
 
-/* Forked from react-virtualized 💖 */
-var SizeAndPositionManager = (function () {
-    function SizeAndPositionManager(_a) {
-        var itemCount = _a.itemCount, itemSizeGetter = _a.itemSizeGetter, estimatedItemSize = _a.estimatedItemSize;
-        this.itemSizeGetter = itemSizeGetter;
-        this.itemCount = itemCount;
-        this.estimatedItemSize = estimatedItemSize;
-        // Cache of size and position data for items, mapped by item index.
-        this.itemSizeAndPositionData = {};
-        // Measurements for items up to this index can be trusted; items afterward should be estimated.
-        this.lastMeasuredIndex = -1;
-    }
-    SizeAndPositionManager.prototype.updateConfig = function (_a) {
-        var itemCount = _a.itemCount, estimatedItemSize = _a.estimatedItemSize;
-        this.itemCount = itemCount;
-        this.estimatedItemSize = estimatedItemSize;
-    };
-    SizeAndPositionManager.prototype.getLastMeasuredIndex = function () {
-        return this.lastMeasuredIndex;
-    };
-    SizeAndPositionManager.prototype.destroy = function () {
-        for (var key in this.itemSizeAndPositionData) {
-            delete this.itemSizeAndPositionData[key];
+    /* Forked from react-virtualized 💖 */
+    var SizeAndPositionManager = (function () {
+        function SizeAndPositionManager(_a) {
+            var itemCount = _a.itemCount, itemSizeGetter = _a.itemSizeGetter, estimatedItemSize = _a.estimatedItemSize;
+            this.itemSizeGetter = itemSizeGetter;
+            this.itemCount = itemCount;
+            this.estimatedItemSize = estimatedItemSize;
+            // Cache of size and position data for items, mapped by item index.
+            this.itemSizeAndPositionData = {};
+            // Measurements for items up to this index can be trusted; items afterward should be estimated.
+            this.lastMeasuredIndex = -1;
         }
-    };
-    /**
-     * This method returns the size and position for the item at the specified index.
-     * It just-in-time calculates (or used cached values) for items leading up to the index.
-     */
-    SizeAndPositionManager.prototype.getSizeAndPositionForIndex = function (index) {
-        if (index < 0 || index >= this.itemCount) {
-            throw Error("Requested index " + index + " is outside of range 0.." + this.itemCount);
-        }
-        if (index > this.lastMeasuredIndex) {
+        SizeAndPositionManager.prototype.updateConfig = function (_a) {
+            var itemCount = _a.itemCount, estimatedItemSize = _a.estimatedItemSize;
+            this.itemCount = itemCount;
+            this.estimatedItemSize = estimatedItemSize;
+        };
+        SizeAndPositionManager.prototype.getLastMeasuredIndex = function () {
+            return this.lastMeasuredIndex;
+        };
+        SizeAndPositionManager.prototype.destroy = function () {
+            for (var key in this.itemSizeAndPositionData) {
+                delete this.itemSizeAndPositionData[key];
+            }
+        };
+        /**
+         * This method returns the size and position for the item at the specified index.
+         * It just-in-time calculates (or used cached values) for items leading up to the index.
+         */
+        SizeAndPositionManager.prototype.getSizeAndPositionForIndex = function (index) {
+            if (index < 0 || index >= this.itemCount) {
+                throw Error("Requested index " + index + " is outside of range 0.." + this.itemCount);
+            }
+            if (index > this.lastMeasuredIndex) {
+                var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+                var offset = lastMeasuredSizeAndPosition.offset +
+                    lastMeasuredSizeAndPosition.size;
+                for (var i = this.lastMeasuredIndex + 1; i <= index; i++) {
+                    var size = this.itemSizeGetter(i);
+                    if (size == null || isNaN(size)) {
+                        throw Error("Invalid size returned for index " + i + " of value " + size);
+                    }
+                    this.itemSizeAndPositionData[i] = {
+                        offset: offset,
+                        size: size,
+                    };
+                    offset += size;
+                }
+                this.lastMeasuredIndex = index;
+            }
+            return this.itemSizeAndPositionData[index];
+        };
+        SizeAndPositionManager.prototype.getSizeAndPositionOfLastMeasuredItem = function () {
+            return this.lastMeasuredIndex >= 0
+                ? this.itemSizeAndPositionData[this.lastMeasuredIndex]
+                : { offset: 0, size: 0 };
+        };
+        /**
+         * Total size of all items being measured.
+         * This value will be completedly estimated initially.
+         * As items as measured the estimate will be updated.
+         */
+        SizeAndPositionManager.prototype.getTotalSize = function () {
             var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
-            var offset = lastMeasuredSizeAndPosition.offset +
-                lastMeasuredSizeAndPosition.size;
-            for (var i = this.lastMeasuredIndex + 1; i <= index; i++) {
-                var size = this.itemSizeGetter(i);
-                if (size == null || isNaN(size)) {
-                    throw Error("Invalid size returned for index " + i + " of value " + size);
-                }
-                this.itemSizeAndPositionData[i] = {
+            return lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size + (this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize;
+        };
+        /**
+         * Determines a new offset that ensures a certain item is visible, given the alignment.
+         *
+         * @param align Desired alignment within container; one of "start" (default), "center", or "end"
+         * @param containerSize Size (width or height) of the container viewport
+         * @return Offset to use to ensure the specified item is visible
+         */
+        SizeAndPositionManager.prototype.getUpdatedOffsetForIndex = function (_a) {
+            var _b = _a.align, align = _b === void 0 ? ALIGN_START : _b, containerSize = _a.containerSize, currentOffset = _a.currentOffset, targetIndex = _a.targetIndex;
+            if (containerSize <= 0) {
+                return 0;
+            }
+            var datum = this.getSizeAndPositionForIndex(targetIndex);
+            var maxOffset = datum.offset;
+            var minOffset = maxOffset - containerSize + datum.size;
+            var idealOffset;
+            switch (align) {
+                case ALIGN_END:
+                    idealOffset = minOffset;
+                    break;
+                case ALIGN_CENTER:
+                    idealOffset = maxOffset - (containerSize - datum.size) / 2;
+                    break;
+                case ALIGN_START:
+                    idealOffset = maxOffset;
+                    break;
+                default:
+                    idealOffset = Math.max(minOffset, Math.min(maxOffset, currentOffset));
+            }
+            var totalSize = this.getTotalSize();
+            return Math.max(0, Math.min(totalSize - containerSize, idealOffset));
+        };
+        SizeAndPositionManager.prototype.getVisibleRange = function (_a) {
+            var containerSize = _a.containerSize, offset = _a.offset, overscanCount = _a.overscanCount;
+            var totalSize = this.getTotalSize();
+            if (totalSize === 0) {
+                return {};
+            }
+            var maxOffset = offset + containerSize;
+            var start = this.findNearestItem(offset);
+            if (typeof start === 'undefined') {
+                throw Error("Invalid offset " + offset + " specified");
+            }
+            var datum = this.getSizeAndPositionForIndex(start);
+            offset = datum.offset + datum.size;
+            var stop = start;
+            while (offset < maxOffset && stop < this.itemCount - 1) {
+                stop++;
+                offset += this.getSizeAndPositionForIndex(stop).size;
+            }
+            if (overscanCount) {
+                start = Math.max(0, start - overscanCount);
+                stop = Math.min(stop + overscanCount, this.itemCount - 1);
+            }
+            return {
+                start: start,
+                stop: stop,
+            };
+        };
+        /**
+         * Clear all cached values for items after the specified index.
+         * This method should be called for any item that has changed its size.
+         * It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionForIndex() is called.
+         */
+        SizeAndPositionManager.prototype.resetItem = function (index) {
+            this.lastMeasuredIndex = Math.min(this.lastMeasuredIndex, index - 1);
+        };
+        /**
+         * Searches for the item (index) nearest the specified offset.
+         *
+         * If no exact match is found the next lowest item index will be returned.
+         * This allows partially visible items (with offsets just before/above the fold) to be visible.
+         */
+        SizeAndPositionManager.prototype.findNearestItem = function (offset) {
+            if (isNaN(offset)) {
+                throw Error("Invalid offset " + offset + " specified");
+            }
+            // Our search algorithms find the nearest match at or below the specified offset.
+            // So make sure the offset is at least 0 or no match will be found.
+            offset = Math.max(0, offset);
+            var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+            var lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);
+            if (lastMeasuredSizeAndPosition.offset >= offset) {
+                // If we've already measured items within this range just use a binary search as it's faster.
+                return this.binarySearch({
+                    high: lastMeasuredIndex,
+                    low: 0,
                     offset: offset,
-                    size: size,
-                };
-                offset += size;
+                });
             }
-            this.lastMeasuredIndex = index;
-        }
-        return this.itemSizeAndPositionData[index];
-    };
-    SizeAndPositionManager.prototype.getSizeAndPositionOfLastMeasuredItem = function () {
-        return this.lastMeasuredIndex >= 0
-            ? this.itemSizeAndPositionData[this.lastMeasuredIndex]
-            : { offset: 0, size: 0 };
-    };
-    /**
-     * Total size of all items being measured.
-     * This value will be completedly estimated initially.
-     * As items as measured the estimate will be updated.
-     */
-    SizeAndPositionManager.prototype.getTotalSize = function () {
-        var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
-        return lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size + (this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize;
-    };
-    /**
-     * Determines a new offset that ensures a certain item is visible, given the alignment.
-     *
-     * @param align Desired alignment within container; one of "start" (default), "center", or "end"
-     * @param containerSize Size (width or height) of the container viewport
-     * @return Offset to use to ensure the specified item is visible
-     */
-    SizeAndPositionManager.prototype.getUpdatedOffsetForIndex = function (_a) {
-        var _b = _a.align, align = _b === void 0 ? ALIGN_START : _b, containerSize = _a.containerSize, currentOffset = _a.currentOffset, targetIndex = _a.targetIndex;
-        if (containerSize <= 0) {
+            else {
+                // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+                // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+                // The overall complexity for this approach is O(log n).
+                return this.exponentialSearch({
+                    index: lastMeasuredIndex,
+                    offset: offset,
+                });
+            }
+        };
+        SizeAndPositionManager.prototype.binarySearch = function (_a) {
+            var low = _a.low, high = _a.high, offset = _a.offset;
+            var middle = 0;
+            var currentOffset = 0;
+            while (low <= high) {
+                middle = low + Math.floor((high - low) / 2);
+                currentOffset = this.getSizeAndPositionForIndex(middle).offset;
+                if (currentOffset === offset) {
+                    return middle;
+                }
+                else if (currentOffset < offset) {
+                    low = middle + 1;
+                }
+                else if (currentOffset > offset) {
+                    high = middle - 1;
+                }
+            }
+            if (low > 0) {
+                return low - 1;
+            }
             return 0;
-        }
-        var datum = this.getSizeAndPositionForIndex(targetIndex);
-        var maxOffset = datum.offset;
-        var minOffset = maxOffset - containerSize + datum.size;
-        var idealOffset;
-        switch (align) {
-            case ALIGN_END:
-                idealOffset = minOffset;
-                break;
-            case ALIGN_CENTER:
-                idealOffset = maxOffset - (containerSize - datum.size) / 2;
-                break;
-            case ALIGN_START:
-                idealOffset = maxOffset;
-                break;
-            default:
-                idealOffset = Math.max(minOffset, Math.min(maxOffset, currentOffset));
-        }
-        var totalSize = this.getTotalSize();
-        return Math.max(0, Math.min(totalSize - containerSize, idealOffset));
-    };
-    SizeAndPositionManager.prototype.getVisibleRange = function (_a) {
-        var containerSize = _a.containerSize, offset = _a.offset, overscanCount = _a.overscanCount;
-        var totalSize = this.getTotalSize();
-        if (totalSize === 0) {
-            return {};
-        }
-        var maxOffset = offset + containerSize;
-        var start = this.findNearestItem(offset);
-        if (typeof start === 'undefined') {
-            throw Error("Invalid offset " + offset + " specified");
-        }
-        var datum = this.getSizeAndPositionForIndex(start);
-        offset = datum.offset + datum.size;
-        var stop = start;
-        while (offset < maxOffset && stop < this.itemCount - 1) {
-            stop++;
-            offset += this.getSizeAndPositionForIndex(stop).size;
-        }
-        if (overscanCount) {
-            start = Math.max(0, start - overscanCount);
-            stop = Math.min(stop + overscanCount, this.itemCount - 1);
-        }
-        return {
-            start: start,
-            stop: stop,
         };
-    };
-    /**
-     * Clear all cached values for items after the specified index.
-     * This method should be called for any item that has changed its size.
-     * It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionForIndex() is called.
-     */
-    SizeAndPositionManager.prototype.resetItem = function (index) {
-        this.lastMeasuredIndex = Math.min(this.lastMeasuredIndex, index - 1);
-    };
-    /**
-     * Searches for the item (index) nearest the specified offset.
-     *
-     * If no exact match is found the next lowest item index will be returned.
-     * This allows partially visible items (with offsets just before/above the fold) to be visible.
-     */
-    SizeAndPositionManager.prototype.findNearestItem = function (offset) {
-        if (isNaN(offset)) {
-            throw Error("Invalid offset " + offset + " specified");
-        }
-        // Our search algorithms find the nearest match at or below the specified offset.
-        // So make sure the offset is at least 0 or no match will be found.
-        offset = Math.max(0, offset);
-        var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
-        var lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);
-        if (lastMeasuredSizeAndPosition.offset >= offset) {
-            // If we've already measured items within this range just use a binary search as it's faster.
+        SizeAndPositionManager.prototype.exponentialSearch = function (_a) {
+            var index = _a.index, offset = _a.offset;
+            var interval = 1;
+            while (index < this.itemCount &&
+                this.getSizeAndPositionForIndex(index).offset < offset) {
+                index += interval;
+                interval *= 2;
+            }
             return this.binarySearch({
-                high: lastMeasuredIndex,
-                low: 0,
+                high: Math.min(index, this.itemCount - 1),
+                low: Math.floor(index / 2),
                 offset: offset,
             });
+        };
+        return SizeAndPositionManager;
+    }());
+
+    var InfinitelistService = (function () {
+        function InfinitelistService() {
         }
-        else {
-            // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
-            // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
-            // The overall complexity for this approach is O(log n).
-            return this.exponentialSearch({
-                index: lastMeasuredIndex,
-                offset: offset,
-            });
-        }
-    };
-    SizeAndPositionManager.prototype.binarySearch = function (_a) {
-        var low = _a.low, high = _a.high, offset = _a.offset;
-        var middle = 0;
-        var currentOffset = 0;
-        while (low <= high) {
-            middle = low + Math.floor((high - low) / 2);
-            currentOffset = this.getSizeAndPositionForIndex(middle).offset;
-            if (currentOffset === offset) {
-                return middle;
+        InfinitelistService.prototype.addEventListener = function (ele, eventType, callback) {
+            if (ele.addEventListener) {
+                return ele.addEventListener(eventType, callback, false);
             }
-            else if (currentOffset < offset) {
-                low = middle + 1;
+            else if (ele['attachEvent']) {
+                return ele['attachEvent'](eventType, callback);
             }
-            else if (currentOffset > offset) {
-                high = middle - 1;
+            else {
+                return ele["on" + eventType] = callback;
             }
-        }
-        if (low > 0) {
-            return low - 1;
-        }
-        return 0;
-    };
-    SizeAndPositionManager.prototype.exponentialSearch = function (_a) {
-        var index = _a.index, offset = _a.offset;
-        var interval = 1;
-        while (index < this.itemCount &&
-            this.getSizeAndPositionForIndex(index).offset < offset) {
-            index += interval;
-            interval *= 2;
-        }
-        return this.binarySearch({
-            high: Math.min(index, this.itemCount - 1),
-            low: Math.floor(index / 2),
-            offset: offset,
-        });
-    };
-    return SizeAndPositionManager;
-}());
+        };
+        InfinitelistService.prototype.removeEventListener = function (ele, eventType, callback) {
+            if (ele.removeEventListener) {
+                return ele.removeEventListener(eventType, callback, false);
+            }
+            else if (ele['detachEvent']) {
+                return ele['detachEvent'](eventType, callback);
+            }
+            else {
+                return ele["on" + eventType] = null;
+            }
+        };
+        InfinitelistService.prototype.isArray = function (val) {
+            return Object.prototype.toString.call(val) === '[object Array]';
+        };
+        InfinitelistService.prototype.randomColor = function () {
+            return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
+        };
+        InfinitelistService.prototype.isPureNumber = function (val) {
+            if (typeof val === 'number' || !val)
+                return true;
+            else
+                return false;
+        };
+        InfinitelistService.decorators = [
+            { type: core.Injectable },
+        ];
+        /** @nocollapse */
+        InfinitelistService.ctorParameters = function () { return []; };
+        return InfinitelistService;
+    }());
 
-var InfinitelistService = (function () {
-    function InfinitelistService() {
-    }
-    InfinitelistService.prototype.addEventListener = function (ele, eventType, callback) {
-        if (ele.addEventListener) {
-            return ele.addEventListener(eventType, callback, false);
+    var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-        else if (ele['attachEvent']) {
-            return ele['attachEvent'](eventType, callback);
-        }
-        else {
-            return ele["on" + eventType] = callback;
-        }
+        return t;
     };
-    InfinitelistService.prototype.removeEventListener = function (ele, eventType, callback) {
-        if (ele.removeEventListener) {
-            return ele.removeEventListener(eventType, callback, false);
+    var InfinitelistComponent = (function () {
+        function InfinitelistComponent(zone, infinitelistService) {
+            this.zone = zone;
+            this.infinitelistService = infinitelistService;
+            this.styleCache = {};
+            this._width = '100%';
+            this._height = '100%';
+            this.scrollDirection = DIRECTION_VERTICAL;
+            this.scrollToAlignment = ALIGN_AUTO;
+            this.useob = false;
+            this.overscanCount = 4;
+            this.debug = false;
+            this.unit = 'px';
+            this.update = new core.EventEmitter();
+            this.ob$ = new rxjs.Subject();
+            this.items = [];
+            this.event = new ILEvent();
+            this.event.getStyle = this.getStyle.bind(this);
         }
-        else if (ele['detachEvent']) {
-            return ele['detachEvent'](eventType, callback);
-        }
-        else {
-            return ele["on" + eventType] = null;
-        }
-    };
-    InfinitelistService.prototype.isArray = function (val) {
-        return Object.prototype.toString.call(val) === '[object Array]';
-    };
-    InfinitelistService.prototype.randomColor = function () {
-        return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
-    };
-    InfinitelistService.prototype.isPureNumber = function (val) {
-        if (typeof val === 'number' || !val)
-            return true;
-        else
-            return false;
-    };
-    InfinitelistService.decorators = [
-        { type: core.Injectable },
-    ];
-    /** @nocollapse */
-    InfinitelistService.ctorParameters = function () { return []; };
-    return InfinitelistService;
-}());
-
-var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
-};
-var InfinitelistComponent = (function () {
-    function InfinitelistComponent(zone, infinitelistService) {
-        this.zone = zone;
-        this.infinitelistService = infinitelistService;
-        this.styleCache = {};
-        this._width = '100%';
-        this._height = '100%';
-        this.scrollDirection = DIRECTION_VERTICAL;
-        this.scrollToAlignment = ALIGN_AUTO;
-        this.useob = false;
-        this.overscanCount = 4;
-        this.debug = false;
-        this.unit = 'px';
-        this.update = new core.EventEmitter();
-        this.ob$ = new Subject.Subject();
-        this.items = [];
-        this.event = new ILEvent();
-        this.event.getStyle = this.getStyle.bind(this);
-    }
-    Object.defineProperty(InfinitelistComponent.prototype, "itemCount", {
-        get: function () {
-            return this.data ? this.data.length : 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(InfinitelistComponent.prototype, "currentSizeProp", {
-        get: function () {
-            return sizeProp[this.scrollDirection];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(InfinitelistComponent.prototype, "currentScrollProp", {
-        get: function () {
-            return scrollProp[this.scrollDirection];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    InfinitelistComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.createSizeAndPositionManager();
-        this.zone.runOutsideAngular(function () {
-            _this.handleScrollbind = _this.handleScroll.bind(_this);
-            _this.infinitelistService.addEventListener(_this.rootNode.nativeElement, 'scroll', _this.handleScrollbind);
+        Object.defineProperty(InfinitelistComponent.prototype, "itemCount", {
+            get: function () {
+                return this.data ? this.data.length : 0;
+            },
+            enumerable: true,
+            configurable: true
         });
-        // set offset init value
-        this.offset = this.scrollOffset || this.scrollToIndex != null && this.getOffsetForIndex(this.scrollToIndex) || 0;
-        this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
-        // srcoll init value
-        if (this.scrollOffset != null) {
-            this.scrollTo(this.scrollOffset);
-        }
-        else if (this.scrollToIndex != null) {
-            this.scrollTo(this.getOffsetForIndex(this.scrollToIndex));
-        }
-        if (this.useob) {
-            setTimeout(function () {
-                _this.update.emit(_this.ob$);
-                _this.ngRender();
-            }, 0);
-        }
-        else {
-            this.ngRender();
-        }
-    };
-    InfinitelistComponent.prototype.ngOnDestroy = function () {
-        this.sizeAndPositionManager.destroy();
-        this.infinitelistService.removeEventListener(this.rootNode.nativeElement, 'scroll', this.handleScrollbind);
-    };
-    InfinitelistComponent.prototype.ngOnChanges = function (changes) {
-        this.createSizeAndPositionManager();
-        var scrollPropsHaveChanged = (this.valueChanged(changes, 'scrollToIndex') ||
-            this.valueChanged(changes, 'scrollToAlignment'));
-        var itemPropsHaveChanged = (this.valueChanged(changes, 'data') ||
-            this.valueChanged(changes, 'itemSize') ||
-            this.valueChanged(changes, 'estimatedItemSize'));
-        if (this.valueChanged(changes, 'data') ||
-            this.valueChanged(changes, 'estimatedItemSize')) {
-            this.sizeAndPositionManager.updateConfig({
-                itemCount: this.itemCount,
-                estimatedItemSize: this.getEstimatedItemSize(),
+        Object.defineProperty(InfinitelistComponent.prototype, "currentSizeProp", {
+            get: function () {
+                return sizeProp[this.scrollDirection];
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(InfinitelistComponent.prototype, "currentScrollProp", {
+            get: function () {
+                return scrollProp[this.scrollDirection];
+            },
+            enumerable: true,
+            configurable: true
+        });
+        InfinitelistComponent.prototype.ngAfterViewInit = function () {
+            setTimeout(this.initAll.bind(this));
+        };
+        InfinitelistComponent.prototype.initAll = function () {
+            var _this = this;
+            this.createSizeAndPositionManager();
+            this.zone.runOutsideAngular(function () {
+                _this.handleScrollbind = _this.handleScroll.bind(_this);
+                _this.infinitelistService.addEventListener(_this.rootNode.nativeElement, 'scroll', _this.handleScrollbind);
             });
-        }
-        if (itemPropsHaveChanged)
-            this.recomputeSizes();
-        this.warpStyle = __assign({}, STYLE_WRAPPER, { height: this.addUnit(this.height), width: this.addUnit(this.width) });
-        this.innerStyle = __assign({}, STYLE_INNER, (_a = {}, _a[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _a));
-        if (this.valueChanged(changes, 'scrollOffset')) {
-            this.offset = this.scrollOffset || 0;
+            // set offset init value
+            this.offset = this.scrollOffset || this.scrollToIndex != null && this.getOffsetForIndex(this.scrollToIndex) || 0;
             this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
-            this.ngRender();
-        }
-        else if (typeof this.scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
-            this.offset = this.getOffsetForIndex(this.scrollToIndex, this.scrollToAlignment, this.itemCount);
-            this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
-            this.ngRender();
-        }
-        var _a;
-    };
-    InfinitelistComponent.prototype.ngDidUpdate = function () {
-        if (this.oldOffset !== this.offset && this.scrollChangeReason === SCROLL_CHANGE_REQUESTED) {
-            this.scrollTo(this.offset);
-        }
-    };
-    InfinitelistComponent.prototype.ngRender = function () {
-        var _this = this;
-        var _a = this.sizeAndPositionManager.getVisibleRange({
-            containerSize: this[this.currentSizeProp] || 0,
-            offset: this.offset,
-            overscanCount: this.overscanCount
-        }), start = _a.start, stop = _a.stop;
-        // fill items;
-        if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
-            this.items.length = 0;
-            for (var i = start; i <= stop; i++) {
-                this.items.push(this.data[i]);
+            // srcoll init value
+            if (this.scrollOffset != null) {
+                this.scrollTo(this.scrollOffset);
             }
-            this.event.start = start;
-            this.event.stop = stop;
-            this.event.offset = this.offset;
-            this.event.items = this.items;
-            if (!this.infinitelistService.isPureNumber(this.itemSize))
-                this.innerStyle = __assign({}, STYLE_INNER, (_b = {}, _b[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _b));
+            else if (this.scrollToIndex != null) {
+                this.scrollTo(this.getOffsetForIndex(this.scrollToIndex));
+            }
             if (this.useob) {
-                this.ob$.next(this.event);
-                if (!this.infinitelistService.isPureNumber(this.itemSize))
-                    this.innerNode.nativeElement.style[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize());
+                setTimeout(function () {
+                    _this.update.emit(_this.ob$);
+                    _this.ngRender();
+                }, 0);
             }
             else {
-                this.zone.run(function () { return _this.update.emit(_this.event); });
+                this.ngRender();
             }
-        }
-        this.ngDidUpdate();
-        var _b;
-    };
-    InfinitelistComponent.prototype.valueChanged = function (changes, key) {
-        return changes[key] ? changes[key].currentValue !== changes[key].previousValue : false;
-    };
-    InfinitelistComponent.prototype.handleScroll = function (e) {
-        var offset = this.getNodeOffset();
-        if (offset < 0 || this.offset === offset || e.target !== this.rootNode.nativeElement)
-            return;
-        this.offset = offset;
-        this.scrollChangeReason = SCROLL_CHANGE_OBSERVED;
-        this.ngRender();
-    };
-    InfinitelistComponent.prototype.getStyle = function (index) {
-        index += this.event.start;
-        var style = this.styleCache[index];
-        if (style)
-            return style;
-        var _a = this.sizeAndPositionManager.getSizeAndPositionForIndex(index), size = _a.size, offset = _a.offset;
-        var debugStyle = this.debug ? { backgroundColor: this.infinitelistService.randomColor() } : null;
-        return this.styleCache[index] = __assign({}, STYLE_ITEM, debugStyle, (_b = {}, _b[this.currentSizeProp] = this.addUnit(size), _b[positionProp[this.scrollDirection]] = this.addUnit(offset), _b));
-        var _b;
-    };
-    ////////////////////////////////////////////////////////////////////////////
-    // PRIVATE
-    ////////////////////////////////////////////////////////////////////////////
-    // init SizeAndPositionManager
-    InfinitelistComponent.prototype.createSizeAndPositionManager = function () {
-        var _this = this;
-        if (!this.sizeAndPositionManager)
-            this.sizeAndPositionManager = new SizeAndPositionManager({
-                itemCount: this.itemCount,
-                itemSizeGetter: function (index) { return _this.getSize(index); },
-                estimatedItemSize: this.getEstimatedItemSize(),
+        };
+        InfinitelistComponent.prototype.ngOnDestroy = function () {
+            this.sizeAndPositionManager.destroy();
+            this.infinitelistService.removeEventListener(this.rootNode.nativeElement, 'scroll', this.handleScrollbind);
+        };
+        InfinitelistComponent.prototype.ngOnChanges = function (changes) {
+            this.createSizeAndPositionManager();
+            var scrollPropsHaveChanged = (this.valueChanged(changes, 'scrollToIndex') ||
+                this.valueChanged(changes, 'scrollToAlignment'));
+            var itemPropsHaveChanged = (this.valueChanged(changes, 'data') ||
+                this.valueChanged(changes, 'itemSize') ||
+                this.valueChanged(changes, 'estimatedItemSize'));
+            if (this.valueChanged(changes, 'data') ||
+                this.valueChanged(changes, 'estimatedItemSize')) {
+                this.sizeAndPositionManager.updateConfig({
+                    itemCount: this.itemCount,
+                    estimatedItemSize: this.getEstimatedItemSize(),
+                });
+            }
+            if (itemPropsHaveChanged)
+                this.recomputeSizes();
+            this.warpStyle = __assign({}, STYLE_WRAPPER, { height: this.addUnit(this.height), width: this.addUnit(this.width) });
+            this.innerStyle = __assign({}, STYLE_INNER, (_a = {}, _a[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _a));
+            if (this.valueChanged(changes, 'scrollOffset')) {
+                this.offset = this.scrollOffset || 0;
+                this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
+                this.ngRender();
+            }
+            else if (typeof this.scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
+                this.offset = this.getOffsetForIndex(this.scrollToIndex, this.scrollToAlignment, this.itemCount);
+                this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
+                this.ngRender();
+            }
+            var _a;
+        };
+        InfinitelistComponent.prototype.ngDidUpdate = function () {
+            if (this.oldOffset !== this.offset && this.scrollChangeReason === SCROLL_CHANGE_REQUESTED) {
+                this.scrollTo(this.offset);
+            }
+        };
+        InfinitelistComponent.prototype.ngRender = function () {
+            var _this = this;
+            var _a = this.sizeAndPositionManager.getVisibleRange({
+                containerSize: this[this.currentSizeProp] || 0,
+                offset: this.offset,
+                overscanCount: this.overscanCount
+            }), start = _a.start, stop = _a.stop;
+            // fill items;
+            if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
+                this.items.length = 0;
+                for (var i = start; i <= stop; i++) {
+                    this.items.push(this.data[i]);
+                }
+                this.event.start = start;
+                this.event.stop = stop;
+                this.event.offset = this.offset;
+                this.event.items = this.items;
+                if (!this.infinitelistService.isPureNumber(this.itemSize))
+                    this.innerStyle = __assign({}, STYLE_INNER, (_b = {}, _b[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _b));
+                if (this.useob) {
+                    this.ob$.next(this.event);
+                    if (!this.infinitelistService.isPureNumber(this.itemSize))
+                        this.innerNode.nativeElement.style[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize());
+                }
+                else {
+                    this.zone.run(function () { return _this.update.emit(_this.event); });
+                }
+            }
+            this.ngDidUpdate();
+            var _b;
+        };
+        InfinitelistComponent.prototype.valueChanged = function (changes, key) {
+            return changes[key] ? changes[key].currentValue !== changes[key].previousValue : false;
+        };
+        InfinitelistComponent.prototype.handleScroll = function (e) {
+            var offset = this.getNodeOffset();
+            if (offset < 0 || this.offset === offset || e.target !== this.rootNode.nativeElement)
+                return;
+            this.offset = offset;
+            this.scrollChangeReason = SCROLL_CHANGE_OBSERVED;
+            this.ngRender();
+        };
+        InfinitelistComponent.prototype.getStyle = function (index) {
+            index += this.event.start;
+            var style = this.styleCache[index];
+            if (style)
+                return style;
+            var _a = this.sizeAndPositionManager.getSizeAndPositionForIndex(index), size = _a.size, offset = _a.offset;
+            var debugStyle = this.debug ? { backgroundColor: this.infinitelistService.randomColor() } : null;
+            return this.styleCache[index] = __assign({}, STYLE_ITEM, debugStyle, (_b = {}, _b[this.currentSizeProp] = this.addUnit(size), _b[positionProp[this.scrollDirection]] = this.addUnit(offset), _b));
+            var _b;
+        };
+        ////////////////////////////////////////////////////////////////////////////
+        // PRIVATE
+        ////////////////////////////////////////////////////////////////////////////
+        // init SizeAndPositionManager
+        InfinitelistComponent.prototype.createSizeAndPositionManager = function () {
+            var _this = this;
+            if (!this.sizeAndPositionManager)
+                this.sizeAndPositionManager = new SizeAndPositionManager({
+                    itemCount: this.itemCount,
+                    itemSizeGetter: function (index) { return _this.getSize(index); },
+                    estimatedItemSize: this.getEstimatedItemSize(),
+                });
+            return this.sizeAndPositionManager;
+        };
+        InfinitelistComponent.prototype.addUnit = function (val) {
+            return typeof val === 'string' ? val : val + this.unit;
+        };
+        InfinitelistComponent.prototype.getEstimatedItemSize = function () {
+            return this.estimatedItemSize || typeof this.itemSize === 'number' && this.itemSize || 50;
+        };
+        InfinitelistComponent.prototype.getNodeOffset = function () {
+            return this.rootNode.nativeElement[this.currentScrollProp];
+        };
+        InfinitelistComponent.prototype.scrollTo = function (value) {
+            this.rootNode.nativeElement[this.currentScrollProp] = value;
+            this.oldOffset = value;
+        };
+        InfinitelistComponent.prototype.getOffsetForIndex = function (index, scrollToAlignment, itemCount) {
+            if (scrollToAlignment === void 0) { scrollToAlignment = this.scrollToAlignment; }
+            if (itemCount === void 0) { itemCount = this.itemCount; }
+            if (index < 0 || index >= itemCount)
+                index = 0;
+            return this.sizeAndPositionManager.getUpdatedOffsetForIndex({
+                align: this.scrollToAlignment,
+                containerSize: this[this.currentSizeProp],
+                currentOffset: this.offset || 0,
+                targetIndex: index,
             });
-        return this.sizeAndPositionManager;
+        };
+        InfinitelistComponent.prototype.getSize = function (index) {
+            if (typeof this.itemSize === 'function') {
+                return this.itemSize(index);
+            }
+            return this.infinitelistService.isArray(this.itemSize) ? this.itemSize[index] : this.itemSize;
+        };
+        InfinitelistComponent.prototype.recomputeSizes = function (startIndex) {
+            if (startIndex === void 0) { startIndex = 0; }
+            this.styleCache = {};
+            this.sizeAndPositionManager.resetItem(startIndex);
+        };
+        InfinitelistComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'infinite-list, infinitelist, [infinitelist]',
+                        template: "\n<div #dom [ngStyle]=\"warpStyle\">\n  <div #inner [ngStyle]=\"innerStyle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n  ",
+                        changeDetection: core.ChangeDetectionStrategy.OnPush
+                    },] },
+        ];
+        /** @nocollapse */
+        InfinitelistComponent.ctorParameters = function () { return [
+            { type: core.NgZone, },
+            { type: InfinitelistService, },
+        ]; };
+        InfinitelistComponent.propDecorators = {
+            'scrollDirection': [{ type: core.Input },],
+            'scrollToAlignment': [{ type: core.Input },],
+            'useob': [{ type: core.Input },],
+            'overscanCount': [{ type: core.Input },],
+            'itemSize': [{ type: core.Input },],
+            'data': [{ type: core.Input },],
+            'debug': [{ type: core.Input },],
+            'unit': [{ type: core.Input },],
+            'width': [{ type: core.Input },],
+            'height': [{ type: core.Input },],
+            'scrollOffset': [{ type: core.Input },],
+            'scrollToIndex': [{ type: core.Input },],
+            'estimatedItemSize': [{ type: core.Input },],
+            'update': [{ type: core.Output },],
+            'rootNode': [{ type: core.ViewChild, args: ['dom', { read: core.ElementRef },] },],
+            'innerNode': [{ type: core.ViewChild, args: ['inner', { read: core.ElementRef },] },],
+        };
+        return InfinitelistComponent;
+    }());
+    var STYLE_WRAPPER = {
+        overflow: 'auto',
+        willChange: 'transform',
+        WebkitOverflowScrolling: 'touch',
     };
-    InfinitelistComponent.prototype.addUnit = function (val) {
-        return typeof val === 'string' ? val : val + this.unit;
+    var STYLE_INNER = {
+        position: 'relative',
+        overflow: 'hidden',
+        width: '100%',
+        minHeight: '100%',
     };
-    InfinitelistComponent.prototype.getEstimatedItemSize = function () {
-        return this.estimatedItemSize || typeof this.itemSize === 'number' && this.itemSize || 50;
+    var STYLE_ITEM = {
+        position: 'absolute',
+        left: 0,
+        width: '100%',
+        height: '100%'
     };
-    InfinitelistComponent.prototype.getNodeOffset = function () {
-        return this.rootNode.nativeElement[this.currentScrollProp];
-    };
-    InfinitelistComponent.prototype.scrollTo = function (value) {
-        this.rootNode.nativeElement[this.currentScrollProp] = value;
-        this.oldOffset = value;
-    };
-    InfinitelistComponent.prototype.getOffsetForIndex = function (index, scrollToAlignment, itemCount) {
-        if (scrollToAlignment === void 0) { scrollToAlignment = this.scrollToAlignment; }
-        if (itemCount === void 0) { itemCount = this.itemCount; }
-        if (index < 0 || index >= itemCount)
-            index = 0;
-        return this.sizeAndPositionManager.getUpdatedOffsetForIndex({
-            align: this.scrollToAlignment,
-            containerSize: this[this.currentSizeProp],
-            currentOffset: this.offset || 0,
-            targetIndex: index,
-        });
-    };
-    InfinitelistComponent.prototype.getSize = function (index) {
-        if (typeof this.itemSize === 'function') {
-            return this.itemSize(index);
+
+    var InfiniteListModule = (function () {
+        function InfiniteListModule() {
         }
-        return this.infinitelistService.isArray(this.itemSize) ? this.itemSize[index] : this.itemSize;
-    };
-    InfinitelistComponent.prototype.recomputeSizes = function (startIndex) {
-        if (startIndex === void 0) { startIndex = 0; }
-        this.styleCache = {};
-        this.sizeAndPositionManager.resetItem(startIndex);
-    };
-    InfinitelistComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'infinite-list, infinitelist, [infinitelist]',
-                    template: "\n<div #dom [ngStyle]=\"warpStyle\">\n  <div #inner [ngStyle]=\"innerStyle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n  ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] },
-    ];
-    /** @nocollapse */
-    InfinitelistComponent.ctorParameters = function () { return [
-        { type: core.NgZone, },
-        { type: InfinitelistService, },
-    ]; };
-    InfinitelistComponent.propDecorators = {
-        'scrollDirection': [{ type: core.Input },],
-        'scrollToAlignment': [{ type: core.Input },],
-        'useob': [{ type: core.Input },],
-        'overscanCount': [{ type: core.Input },],
-        'itemSize': [{ type: core.Input },],
-        'data': [{ type: core.Input },],
-        'debug': [{ type: core.Input },],
-        'unit': [{ type: core.Input },],
-        'width': [{ type: core.Input },],
-        'height': [{ type: core.Input },],
-        'scrollOffset': [{ type: core.Input },],
-        'scrollToIndex': [{ type: core.Input },],
-        'estimatedItemSize': [{ type: core.Input },],
-        'update': [{ type: core.Output },],
-        'rootNode': [{ type: core.ViewChild, args: ['dom', { read: core.ElementRef },] },],
-        'innerNode': [{ type: core.ViewChild, args: ['inner', { read: core.ElementRef },] },],
-    };
-    return InfinitelistComponent;
-}());
-var STYLE_WRAPPER = {
-    overflow: 'auto',
-    willChange: 'transform',
-    WebkitOverflowScrolling: 'touch',
-};
-var STYLE_INNER = {
-    position: 'relative',
-    overflow: 'hidden',
-    width: '100%',
-    minHeight: '100%',
-};
-var STYLE_ITEM = {
-    position: 'absolute',
-    left: 0,
-    width: '100%',
-    height: '100%'
-};
+        InfiniteListModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [InfinitelistComponent],
+                        exports: [InfinitelistComponent],
+                        imports: [common.CommonModule],
+                        providers: [InfinitelistService]
+                    },] },
+        ];
+        /** @nocollapse */
+        InfiniteListModule.ctorParameters = function () { return []; };
+        return InfiniteListModule;
+    }());
 
-var InfiniteListModule = (function () {
-    function InfiniteListModule() {
-    }
-    InfiniteListModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [InfinitelistComponent],
-                    exports: [InfinitelistComponent],
-                    imports: [common.CommonModule],
-                    providers: [InfinitelistService]
-                },] },
-    ];
-    /** @nocollapse */
-    InfiniteListModule.ctorParameters = function () { return []; };
-    return InfiniteListModule;
-}());
+    exports.ALIGN_AUTO = ALIGN_AUTO;
+    exports.ALIGN_CENTER = ALIGN_CENTER;
+    exports.ALIGN_END = ALIGN_END;
+    exports.ALIGN_START = ALIGN_START;
+    exports.DIRECTION_HORIZONTAL = DIRECTION_HORIZONTAL;
+    exports.DIRECTION_VERTICAL = DIRECTION_VERTICAL;
+    exports.ILEvent = ILEvent;
+    exports.InfiniteListModule = InfiniteListModule;
+    exports.InfinitelistComponent = InfinitelistComponent;
+    exports.SCROLL_CHANGE_OBSERVED = SCROLL_CHANGE_OBSERVED;
+    exports.SCROLL_CHANGE_REQUESTED = SCROLL_CHANGE_REQUESTED;
+    exports.positionProp = positionProp;
+    exports.scrollProp = scrollProp;
+    exports.sizeProp = sizeProp;
 
-exports.ILEvent = ILEvent;
-exports.ALIGN_AUTO = ALIGN_AUTO;
-exports.ALIGN_START = ALIGN_START;
-exports.ALIGN_CENTER = ALIGN_CENTER;
-exports.ALIGN_END = ALIGN_END;
-exports.DIRECTION_VERTICAL = DIRECTION_VERTICAL;
-exports.DIRECTION_HORIZONTAL = DIRECTION_HORIZONTAL;
-exports.SCROLL_CHANGE_OBSERVED = SCROLL_CHANGE_OBSERVED;
-exports.SCROLL_CHANGE_REQUESTED = SCROLL_CHANGE_REQUESTED;
-exports.scrollProp = scrollProp;
-exports.sizeProp = sizeProp;
-exports.positionProp = positionProp;
-exports.InfinitelistComponent = InfinitelistComponent;
-exports.InfiniteListModule = InfiniteListModule;
+    Object.defineProperty(exports, '__esModule', { value: true });
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 })));

dist/infinite-list.component.d.ts

 import { EventEmitter, SimpleChange, ElementRef, NgZone } from '@angular/core';
 import { InfinitelistService } from './infinite-list.service';
 import { ILEvent } from './il-event';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 export declare class InfinitelistComponent {
@@ -41,3 +41,4 @@ private zone;
     constructor(zone: NgZone, infinitelistService: InfinitelistService);
-    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    initAll(): void;
     ngOnDestroy(): void;
@@ -44,0 +45,0 @@ ngOnChanges(changes: SimpleChange): void;

dist/infinite-list.component.js

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
 import { ILEvent } from './il-event';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 import { ALIGN_AUTO, DIRECTION_VERTICAL, SCROLL_CHANGE_OBSERVED, SCROLL_CHANGE_REQUESTED, positionProp, scrollProp, sizeProp } from './constants';
@@ -56,3 +56,6 @@ var InfinitelistComponent = (function () {
     });
-    InfinitelistComponent.prototype.ngOnInit = function () {
+    InfinitelistComponent.prototype.ngAfterViewInit = function () {
+        setTimeout(this.initAll.bind(this));
+    };
+    InfinitelistComponent.prototype.initAll = function () {
         var _this = this;
@@ -59,0 +62,0 @@ this.createSizeAndPositionManager();

dist/infinite-list.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n  <div #inner [ngStyle]=\"innerStyle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__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"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n  <div #inner [ngStyle]=\"innerStyle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__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"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n  <div #inner [ngStyle]=\"innerStyle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__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"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"initAll":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n  <div #inner [ngStyle]=\"innerStyle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__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"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"initAll":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "angular-infinite-list",
-  "version": "0.3.7",
+  "version": "0.5.1",
   "description": "A tiny but mighty 3k list virtualization library for angular, with zero dependencies",
@@ -17,3 +17,3 @@ "main": "dist/index.js",
     "type": "git",
-    "url": "git+https://a-jie.github.io/angular-infinite-list"
+    "url": "git+https://drawcall.github.io/angular-infinite-list"
   },
@@ -25,5 +25,5 @@ "keywords": [
   ],
-  "author": "a-jie",
+  "author": "drawcall",
   "license": "MIT",
-  "homepage": "https://a-jie.github.io/angular-infinite-listangular-infinite-list",
+  "homepage": "https://drawcall.github.io/angular-infinite-listangular-infinite-list",
   "devDependencies": {
@@ -44,2 +44,3 @@ "@angular/cli": "^1.3.0",
     "rimraf": "^2.6.1",
+    "rollup": "^1.27.14",
     "rxjs": "^5.4.2",
@@ -46,0 +47,0 @@ "tslint": "^5.5.0",

README.md

 <div align="center" style="margin-bottom: 30px;">
-<img src="https://raw.githubusercontent.com/a-jie/angular-infinite-list/master/imgs/logo.png" width="200"/>
+<img src="https://raw.githubusercontent.com/drawcall/angular-infinite-list/master/imgs/logo.png" width="200"/>
 </div>
@@ -16,3 +16,3 @@
 
-Check out the [demo](https://a-jie.github.io/angular-infinite-list) for some examples.
+Check out the [demo](https://drawcall.github.io/angular-infinite-list) for some examples.
 
@@ -44,2 +44,3 @@ Getting Started
 <infinitelist
+    style="width:100%"
     [width]='"100%"' 
@@ -99,3 +100,3 @@ [height]='500'
 ```
-[view demo code](https://github.com/a-jie/angular-infinite-list/blob/master/demo/src/app/components/demo/demo2.component.ts)
+[view demo code](https://github.com/drawcall/angular-infinite-list/blob/master/demo/src/app/components/demo/demo2.component.ts)
 
@@ -134,3 +135,3 @@
 ## Reporting Issues
-Found an issue? Please [report it](https://github.com/a-jie/angular-infinite-list/issues) along with any relevant details to reproduce it.
+Found an issue? Please [report it](https://github.com/drawcall/angular-infinite-list/issues) along with any relevant details to reproduce it.
 
@@ -137,0 +138,0 @@ ## Acknowledgments

rollup.conf.js

 export default {
     input: 'dist/index.js',
     output: {
+        name: 'angular-infinite-list',
         file: 'bundles/angular-infinite-list.umd.js',
@@ -5,0 +6,0 @@ format: 'umd'

src/infinite-list.component.ts

@@ -7,3 +7,3 @@ import { Component, Input, Output, EventEmitter, SimpleChange, ViewChild, ElementRef, NgZone, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { ILEvent } from './il-event';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
@@ -98,3 +98,7 @@ import {
 
-  ngOnInit() {
+  ngAfterViewInit(){
+    setTimeout(this.initAll.bind(this));
+  }
+
+  initAll() {
     this.createSizeAndPositionManager();
@@ -101,0 +105,0 @@

New alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

146872

increased by1.95%

Lines of code

2114

increased by0.43%

Number of lines in readme file

140

increased by0.72%

Worsened metrics

Dev dependency count

19

increased by5.56%

No dependency changes