ng-virtual-list 16.2.0 → 16.3.1

package/fesm2022/ng-virtual-list.mjs

@@ -82,13 +82,22 @@ const SCROLL_END = 'scrollend';
 const CLASS_LIST_VERTICAL = 'vertical';
 const CLASS_LIST_HORIZONTAL = 'horizontal';
 
+/**
+ * Virtual List Item Interface
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/models/base-virtual-list-item-component.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class BaseVirtualListItemComponent {
+}
+
 /**
  * Virtual list item component
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
-class NgVirtualListItemComponent {
+class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     _cdr;
     _elementRef;
     static __nextId = 0;
@@ -133,6 +142,7 @@ class NgVirtualListItemComponent {
         return this._elementRef.nativeElement;
     }
     constructor(_cdr, _elementRef) {
+        super();
         this._cdr = _cdr;
         this._elementRef = _elementRef;
         this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
@@ -203,7 +213,7 @@ class NgVirtualListItemComponent {
         styles.zIndex = HIDDEN_ZINDEX;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
@@ -1110,7 +1120,7 @@ class TrackBox extends CacheMap {
                         }
                     }
                     if (deletedItemsMap.hasOwnProperty(i)) {
-                        const bounds = deletedItemsMap[i], size = bounds[sizeProperty] ?? typicalItemSize;
+                        const bounds = deletedItemsMap[i], size = bounds?.[sizeProperty] ?? typicalItemSize;
                         if (y < scrollSize - size) {
                             leftSizeOfDeletedItems += size;
                         }
@@ -1201,6 +1211,9 @@ class TrackBox extends CacheMap {
             let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
             if (snap) {
                 for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
+                    if (!items[i]) {
+                        continue;
+                    }
                     const id = items[i].id, sticky = stickyMap[id], size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
                     if (sticky === 1) {
                         const measures = {
@@ -1517,6 +1530,7 @@ class NgVirtualListComponent {
     get enabledBufferOptimization() { return this._$enabledBufferOptimization.getValue(); }
     _$itemRenderer = new BehaviorSubject(undefined);
     $itemRenderer = this._$itemRenderer.asObservable();
+    _$renderer = new BehaviorSubject(undefined);
     /**
     * Rendering element template.
     */
@@ -1699,10 +1713,18 @@ class NgVirtualListComponent {
     };
     _$initialized = new BehaviorSubject(false);
     $initialized;
+    /**
+     * Base class of the element component
+     */
+    _itemComponentClass = NgVirtualListItemComponent;
+    /**
+     * Base class trackBox
+     */
+    _trackBoxClass = TrackBox;
     /**
      * Dictionary of element sizes by their id
      */
-    _trackBox = new TrackBox(this.trackBy);
+    _trackBox = new this._trackBoxClass(this.trackBy);
     _onTrackBoxChangeHandler = (v) => {
         this._$cacheVersion.next(v);
     };
@@ -1762,12 +1784,19 @@ class NgVirtualListComponent {
             }
             return of(displayItems);
         })).subscribe();
-        combineLatest([this.$initialized, this.$itemRenderer]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
-            this.resetRenderers(itemRenderer);
-        }));
+        this.setupRenderer();
+    }
+    setupRenderer() {
+        const $itemRenderer = this.$itemRenderer;
+        $itemRenderer.pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(v => !!v), tap(v => {
+            this._$renderer.next(v);
+        })).subscribe();
     }
     /** @internal */
     ngOnInit() {
+        this.onInit();
+    }
+    onInit() {
         this._$initialized.next(true);
     }
     listenCacheChangesIfNeed(value) {
@@ -1800,7 +1829,7 @@ class NgVirtualListComponent {
         }
         if (this._isSnappingMethodAdvanced && this.snap) {
             if (!this._snapedDisplayComponent && this._snapContainerRef) {
-                const comp = this._snapContainerRef.createComponent(NgVirtualListItemComponent);
+                const comp = this._snapContainerRef.createComponent(this._itemComponentClass);
                 comp.instance.regular = true;
                 this._snapedDisplayComponent = comp;
                 this._trackBox.snapedDisplayComponent = this._snapedDisplayComponent;
@@ -1813,7 +1842,7 @@ class NgVirtualListComponent {
         const maxLength = displayItems.length, components = this._displayComponents;
         while (components.length < maxLength) {
             if (_listContainerRef) {
-                const comp = _listContainerRef.createComponent(NgVirtualListItemComponent);
+                const comp = _listContainerRef.createComponent(this._itemComponentClass);
                 components.push(comp);
                 this._componentsResizeObserver.observe(comp.instance.element);
             }
@@ -1950,6 +1979,9 @@ class NgVirtualListComponent {
     };
     /** @internal */
     ngAfterViewInit() {
+        this.afterViewInit();
+    }
+    afterViewInit() {
         const containerEl = this._container;
         if (containerEl) {
             // for direction calculation
@@ -1963,6 +1995,9 @@ class NgVirtualListComponent {
     }
     /** @internal */
     ngOnDestroy() {
+        this.dispose();
+    }
+    dispose() {
         this.clearScrollToRepeatExecutionTimeout();
         if (this._trackBox) {
             this._trackBox.dispose();
@@ -2064,5 +2099,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Directions, NgVirtualListComponent, NgVirtualListModule, SnappingMethods };
+export { BaseVirtualListItemComponent, Directions, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
 //# sourceMappingURL=ng-virtual-list.mjs.map