ng-virtual-list 14.2.0 → 14.3.1

package/fesm2020/ng-virtual-list.mjs

@@ -81,14 +81,24 @@ 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/14.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/14.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 {
     constructor(_cdr, _elementRef) {
+        super();
         this._cdr = _cdr;
         this._elementRef = _elementRef;
         this.regular = false;
@@ -198,7 +208,7 @@ class NgVirtualListItemComponent {
 }
 NgVirtualListItemComponent.__nextId = 0;
 NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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}\"></ng-container>\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;will-change:scroll-position}.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 });
+NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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}\"></ng-container>\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;will-change:scroll-position}.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: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', host: {
@@ -1098,7 +1108,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;
                         }
@@ -1189,6 +1199,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 = {
@@ -1483,6 +1496,7 @@ class NgVirtualListComponent extends DisposableComponent {
         this.$enabledBufferOptimization = this._$enabledBufferOptimization.asObservable();
         this._$itemRenderer = new BehaviorSubject(undefined);
         this.$itemRenderer = this._$itemRenderer.asObservable();
+        this._$renderer = new BehaviorSubject(undefined);
         this._$stickyMap = new BehaviorSubject({});
         this.$stickyMap = this._$stickyMap.asObservable();
         this._itemSizeOptions = (v) => {
@@ -1564,10 +1578,18 @@ class NgVirtualListComponent extends DisposableComponent {
             }
         };
         this._$initialized = new BehaviorSubject(false);
+        /**
+         * Base class of the element component
+         */
+        this._itemComponentClass = NgVirtualListItemComponent;
+        /**
+         * Base class trackBox
+         */
+        this._trackBoxClass = TrackBox;
         /**
          * Dictionary of element sizes by their id
          */
-        this._trackBox = new TrackBox(this.trackBy);
+        this._trackBox = new this._trackBoxClass(this.trackBy);
         this._onTrackBoxChangeHandler = (v) => {
             this._$cacheVersion.next(v);
         };
@@ -1652,9 +1674,7 @@ class NgVirtualListComponent extends DisposableComponent {
             }
             return of(displayItems);
         })).subscribe();
-        combineLatest([this.$initialized, this.$itemRenderer]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
-            this.resetRenderers(itemRenderer);
-        }));
+        this.setupRenderer();
     }
     /**
      * Readonly. Returns the unique identifier of the component.
@@ -1800,8 +1820,17 @@ class NgVirtualListComponent extends DisposableComponent {
     get snappingMethod() { return this._$snappingMethod.getValue(); }
     get isSnappingMethodAdvanced() { return this._isSnappingMethodAdvanced; }
     get $cacheVersion() { return this._$cacheVersion.asObservable(); }
+    setupRenderer() {
+        const $itemRenderer = this.$itemRenderer;
+        $itemRenderer.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(v => !!v), tap(v => {
+            this._$renderer.next(v);
+        })).subscribe();
+    }
     /** @internal */
     ngOnInit() {
+        this.onInit();
+    }
+    onInit() {
         this._$initialized.next(true);
     }
     listenCacheChangesIfNeed(value) {
@@ -1831,7 +1860,7 @@ class NgVirtualListComponent extends DisposableComponent {
         }
         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;
@@ -1844,7 +1873,7 @@ class NgVirtualListComponent extends DisposableComponent {
         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);
             }
@@ -1954,6 +1983,9 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     /** @internal */
     ngAfterViewInit() {
+        this.afterViewInit();
+    }
+    afterViewInit() {
         const containerEl = this._container;
         if (containerEl) {
             // for direction calculation
@@ -1968,6 +2000,9 @@ class NgVirtualListComponent extends DisposableComponent {
     /** @internal */
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.dispose();
+    }
+    dispose() {
         this.clearScrollToRepeatExecutionTimeout();
         if (this._trackBox) {
             this._trackBox.dispose();
@@ -2070,5 +2105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Directions, NgVirtualListComponent, NgVirtualListModule, SnappingMethods };
+export { BaseVirtualListItemComponent, Directions, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
 //# sourceMappingURL=ng-virtual-list.mjs.map