ng-virtual-list 16.4.0 → 16.4.2

package/fesm2022/ng-virtual-list.mjs

@@ -223,20 +223,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\" />\r\n        </ng-container>\r\n    </li>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
 
-const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
-/**
- * Determines the axis membership of a virtual list
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
- * @author Evgenii Grebennikov
- * @email djonnyx@gmail.com
- */
-const isDirection = (src, expected) => {
-    if (HORIZONTAL_ALIASES.includes(expected)) {
-        return HORIZONTAL_ALIASES.includes(src);
-    }
-    return VERTICAL_ALIASES.includes(src);
-};
-
 /**
  * Simple debounce function.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
@@ -284,137 +270,44 @@ const toggleClassName = (el, className, removeClassName) => {
 };
 
 /**
- * Tracks display items by property
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
+ * Scroll event.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
-class Tracker {
-    /**
-     * display objects dictionary of indexes by id
-     */
-    _displayObjectIndexMapById = {};
-    set displayObjectIndexMapById(v) {
-        if (this._displayObjectIndexMapById === v) {
-            return;
-        }
-        this._displayObjectIndexMapById = v;
-    }
-    get displayObjectIndexMapById() {
-        return this._displayObjectIndexMapById;
-    }
-    /**
-     * Dictionary displayItems propertyNameId by items propertyNameId
-     */
-    _trackMap = {};
-    get trackMap() {
-        return this._trackMap;
-    }
-    _trackingPropertyName;
-    set trackingPropertyName(v) {
-        this._trackingPropertyName = v;
-    }
-    constructor(trackingPropertyName) {
-        this._trackingPropertyName = trackingPropertyName;
-    }
-    /**
-     * tracking by propName
-     */
-    track(items, components, snapedComponent, direction) {
-        if (!items) {
-            return;
-        }
-        const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
-        let isRegularSnapped = false;
-        for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
-            const item = items[i], itemTrackingProperty = item[idPropName];
-            if (this._trackMap) {
-                if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
-                    const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
-                    const compId = comp?.instance?.id;
-                    if (comp !== undefined && compId === diId) {
-                        const indexByUntrackedItems = untrackedItems.findIndex(v => {
-                            return v.instance.id === compId;
-                        });
-                        if (indexByUntrackedItems > -1) {
-                            if (snapedComponent) {
-                                if (item['config']['snapped'] || item['config']['snappedOut']) {
-                                    isRegularSnapped = true;
-                                    snapedComponent.instance.item = item;
-                                    snapedComponent.instance.show();
-                                }
-                            }
-                            comp.instance.item = item;
-                            if (snapedComponent) {
-                                if (item['config']['snapped'] || item['config']['snappedOut']) {
-                                    comp.instance.hide();
-                                }
-                                else {
-                                    comp.instance.show();
-                                }
-                            }
-                            else {
-                                comp.instance.show();
-                            }
-                            untrackedItems.splice(indexByUntrackedItems, 1);
-                            continue;
-                        }
-                    }
-                    delete this._trackMap[itemTrackingProperty];
-                }
-            }
-            if (untrackedItems.length > 0) {
-                const comp = untrackedItems.shift(), item = items[i];
-                if (comp) {
-                    if (snapedComponent) {
-                        if (item['config']['snapped'] || item['config']['snappedOut']) {
-                            isRegularSnapped = true;
-                            snapedComponent.instance.item = item;
-                            snapedComponent.instance.show();
-                        }
-                    }
-                    comp.instance.item = item;
-                    if (snapedComponent) {
-                        if (item['config']['snapped'] || item['config']['snappedOut']) {
-                            comp.instance.hide();
-                        }
-                        else {
-                            comp.instance.show();
-                        }
-                    }
-                    else {
-                        comp.instance.show();
-                    }
-                    if (this._trackMap) {
-                        this._trackMap[itemTrackingProperty] = comp.instance.id;
-                    }
-                }
-            }
-        }
-        if (untrackedItems.length) {
-            for (let i = 0, l = untrackedItems.length; i < l; i++) {
-                const comp = untrackedItems[i];
-                comp.instance.hide();
-            }
-        }
-        if (!isRegularSnapped) {
-            if (snapedComponent) {
-                snapedComponent.instance.item = null;
-                snapedComponent.instance.hide();
-            }
-        }
-    }
-    untrackComponentByIdProperty(component) {
-        if (!component) {
-            return;
-        }
-        const propertyIdName = this._trackingPropertyName;
-        if (this._trackMap && component[propertyIdName] !== undefined) {
-            delete this._trackMap[propertyIdName];
-        }
-    }
-    dispose() {
-        this._trackMap = null;
+class ScrollEvent {
+    _direction = 1;
+    get direction() { return this._direction; }
+    _scrollSize = 0;
+    get scrollSize() { return this._scrollSize; }
+    _scrollWeight = 0;
+    get scrollWeight() { return this._scrollWeight; }
+    _isVertical = true;
+    get isVertical() { return this._isVertical; }
+    _listSize = 0;
+    get listSize() { return this._listSize; }
+    _size = 0;
+    get size() { return this._size; }
+    _isStart = true;
+    get isStart() { return this._isStart; }
+    _isEnd = false;
+    get isEnd() { return this._isEnd; }
+    _delta = 0;
+    get delta() { return this._delta; }
+    _scrollDelta = 0;
+    get scrollDelta() { return this._scrollDelta; }
+    constructor(params) {
+        const { direction, isVertical, container, list, delta, scrollDelta } = params;
+        this._direction = direction;
+        this._isVertical = isVertical;
+        this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
+        this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
+        this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
+        this._size = isVertical ? container.offsetHeight : container.offsetWidth;
+        this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
+        this._delta = delta;
+        this._scrollDelta = scrollDelta;
+        this._isStart = this._scrollSize === 0;
     }
 }
 
@@ -689,6 +582,141 @@ class CacheMap extends EventEmitter {
     }
 }
 
+/**
+ * Tracks display items by property
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class Tracker {
+    /**
+     * display objects dictionary of indexes by id
+     */
+    _displayObjectIndexMapById = {};
+    set displayObjectIndexMapById(v) {
+        if (this._displayObjectIndexMapById === v) {
+            return;
+        }
+        this._displayObjectIndexMapById = v;
+    }
+    get displayObjectIndexMapById() {
+        return this._displayObjectIndexMapById;
+    }
+    /**
+     * Dictionary displayItems propertyNameId by items propertyNameId
+     */
+    _trackMap = {};
+    get trackMap() {
+        return this._trackMap;
+    }
+    _trackingPropertyName;
+    set trackingPropertyName(v) {
+        this._trackingPropertyName = v;
+    }
+    constructor(trackingPropertyName) {
+        this._trackingPropertyName = trackingPropertyName;
+    }
+    /**
+     * tracking by propName
+     */
+    track(items, components, snapedComponent, direction) {
+        if (!items) {
+            return;
+        }
+        const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
+        let isRegularSnapped = false;
+        for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
+            const item = items[i], itemTrackingProperty = item[idPropName];
+            if (this._trackMap) {
+                if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
+                    const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
+                    const compId = comp?.instance?.id;
+                    if (comp !== undefined && compId === diId) {
+                        const indexByUntrackedItems = untrackedItems.findIndex(v => {
+                            return v.instance.id === compId;
+                        });
+                        if (indexByUntrackedItems > -1) {
+                            if (snapedComponent) {
+                                if (item['config']['snapped'] || item['config']['snappedOut']) {
+                                    isRegularSnapped = true;
+                                    snapedComponent.instance.item = item;
+                                    snapedComponent.instance.show();
+                                }
+                            }
+                            comp.instance.item = item;
+                            if (snapedComponent) {
+                                if (item['config']['snapped'] || item['config']['snappedOut']) {
+                                    comp.instance.hide();
+                                }
+                                else {
+                                    comp.instance.show();
+                                }
+                            }
+                            else {
+                                comp.instance.show();
+                            }
+                            untrackedItems.splice(indexByUntrackedItems, 1);
+                            continue;
+                        }
+                    }
+                    delete this._trackMap[itemTrackingProperty];
+                }
+            }
+            if (untrackedItems.length > 0) {
+                const comp = untrackedItems.shift(), item = items[i];
+                if (comp) {
+                    if (snapedComponent) {
+                        if (item['config']['snapped'] || item['config']['snappedOut']) {
+                            isRegularSnapped = true;
+                            snapedComponent.instance.item = item;
+                            snapedComponent.instance.show();
+                        }
+                    }
+                    comp.instance.item = item;
+                    if (snapedComponent) {
+                        if (item['config']['snapped'] || item['config']['snappedOut']) {
+                            comp.instance.hide();
+                        }
+                        else {
+                            comp.instance.show();
+                        }
+                    }
+                    else {
+                        comp.instance.show();
+                    }
+                    if (this._trackMap) {
+                        this._trackMap[itemTrackingProperty] = comp.instance.id;
+                    }
+                }
+            }
+        }
+        if (untrackedItems.length) {
+            for (let i = 0, l = untrackedItems.length; i < l; i++) {
+                const comp = untrackedItems[i];
+                comp.instance.hide();
+            }
+        }
+        if (!isRegularSnapped) {
+            if (snapedComponent) {
+                snapedComponent.instance.item = null;
+                snapedComponent.instance.hide();
+            }
+        }
+    }
+    untrackComponentByIdProperty(component) {
+        if (!component) {
+            return;
+        }
+        const propertyIdName = this._trackingPropertyName;
+        if (this._trackMap && component[propertyIdName] !== undefined) {
+            delete this._trackMap[propertyIdName];
+        }
+    }
+    dispose() {
+        this._trackMap = null;
+    }
+}
+
 const DEFAULT_EXTRA = {
     extremumThreshold: 2,
     bufferSize: 10,
@@ -765,11 +793,16 @@ class TrackBox extends CacheMap {
      * Set the trackBy property
      */
     set trackingPropertyName(v) {
-        this._tracker.trackingPropertyName = v;
+        this._trackingPropertyName = this._tracker.trackingPropertyName = v;
     }
+    _trackingPropertyName = TRACK_BY_PROPERTY_NAME;
     constructor(trackingPropertyName) {
         super();
-        this._tracker = new Tracker(trackingPropertyName);
+        this._trackingPropertyName = trackingPropertyName;
+        this.initialize();
+    }
+    initialize() {
+        this._tracker = new Tracker(this._trackingPropertyName);
     }
     set(id, bounds) {
         if (this._map.has(id)) {
@@ -1311,6 +1344,9 @@ class TrackBox extends CacheMap {
             if (snap) {
                 const startIndex = itemsFromStartToScrollEnd + itemsOnDisplayLength - 1;
                 for (let i = Math.min(startIndex, totalLength > 0 ? totalLength - 1 : 0), l = totalLength; i < l; i++) {
+                    if (!items[i]) {
+                        continue;
+                    }
                     const id = items[i].id, sticky = stickyMap[id], size = dynamicSize
                         ? this.get(id)?.[sizeProperty] || typicalItemSize
                         : typicalItemSize;
@@ -1345,6 +1381,9 @@ class TrackBox extends CacheMap {
                 if (i >= totalLength) {
                     break;
                 }
+                if (!items[i]) {
+                    continue;
+                }
                 const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
                 if (id !== stickyItem?.id && id !== endStickyItem?.id) {
                     const snapped = snap && (stickyMap[id] === 1 && pos <= scrollSize || stickyMap[id] === 2 && pos >= scrollSize + boundsSize - size), measures = {
@@ -1463,48 +1502,6 @@ class TrackBox extends CacheMap {
     }
 }
 
-/**
- * Scroll event.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
- * @author Evgenii Grebennikov
- * @email djonnyx@gmail.com
- */
-class ScrollEvent {
-    _direction = 1;
-    get direction() { return this._direction; }
-    _scrollSize = 0;
-    get scrollSize() { return this._scrollSize; }
-    _scrollWeight = 0;
-    get scrollWeight() { return this._scrollWeight; }
-    _isVertical = true;
-    get isVertical() { return this._isVertical; }
-    _listSize = 0;
-    get listSize() { return this._listSize; }
-    _size = 0;
-    get size() { return this._size; }
-    _isStart = true;
-    get isStart() { return this._isStart; }
-    _isEnd = false;
-    get isEnd() { return this._isEnd; }
-    _delta = 0;
-    get delta() { return this._delta; }
-    _scrollDelta = 0;
-    get scrollDelta() { return this._scrollDelta; }
-    constructor(params) {
-        const { direction, isVertical, container, list, delta, scrollDelta } = params;
-        this._direction = direction;
-        this._isVertical = isVertical;
-        this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
-        this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
-        this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
-        this._size = isVertical ? container.offsetHeight : container.offsetWidth;
-        this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
-        this._delta = delta;
-        this._scrollDelta = scrollDelta;
-        this._isStart = this._scrollSize === 0;
-    }
-}
-
 const ADVANCED_PATTERNS = [SnappingMethods.ADVANCED, 'advanced'], DEFAULT_PATTERN = [SnappingMethods.NORMAL, 'normal'];
 const isSnappingMethodAdvenced = (method) => {
     return ADVANCED_PATTERNS.includes(method);
@@ -1516,6 +1513,20 @@ const isSnappingMethodDefault = (method) => {
 const IS_FIREFOX = navigator.userAgent.toLowerCase().includes('firefox');
 const FIREFOX_SCROLLBAR_OVERLAP_SIZE = 12;
 
+const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
+/**
+ * Determines the axis membership of a virtual list
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+const isDirection = (src, expected) => {
+    if (HORIZONTAL_ALIASES.includes(expected)) {
+        return HORIZONTAL_ALIASES.includes(src);
+    }
+    return VERTICAL_ALIASES.includes(src);
+};
+
 /**
  * Virtual list component.
  * Maximum performance for extremely large lists.
@@ -1882,9 +1893,6 @@ class NgVirtualListComponent {
             }
             return of(displayItems);
         })).subscribe();
-        this.setupRenderer();
-    }
-    setupRenderer() {
         const $itemRenderer = this.$itemRenderer;
         $itemRenderer.pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(v => !!v), tap(v => {
             this._$renderer.next(v);
@@ -2212,5 +2220,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseVirtualListItemComponent, Directions, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
+export { Directions, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, ScrollEvent, SnappingMethods, debounce, toggleClassName };
 //# sourceMappingURL=ng-virtual-list.mjs.map