ng-virtual-list 18.2.0 → 18.3.0

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/18.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/18.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 {
     static __nextId = 0;
     _id;
     get id() {
@@ -102,7 +111,7 @@ class NgVirtualListItemComponent {
         if (this._data === v) {
             return;
         }
-        const data = this._data = v;
+        this._data = v;
         this.update();
         this.data.set(v);
         this._cdr.detectChanges();
@@ -131,6 +140,7 @@ class NgVirtualListItemComponent {
         return this._elementRef.nativeElement;
     }
     constructor() {
+        super();
         this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListItemComponent.__nextId + 1;
     }
@@ -199,7 +209,7 @@ class NgVirtualListItemComponent {
         styles.zIndex = HIDDEN_ZINDEX;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n        'snapped-out': item.config.snappedOut}\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n        }\r\n    </li>\r\n}", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n        'snapped-out': item.config.snappedOut}\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n        }\r\n    </li>\r\n}", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
@@ -1489,6 +1499,7 @@ class NgVirtualListComponent {
      * Rendering element template.
      */
     itemRenderer = input.required();
+    _itemRenderer = signal(undefined);
     /**
      * Dictionary zIndex by id of the list element. If the value is not set or equal to 0,
      * then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element.
@@ -1597,10 +1608,18 @@ class NgVirtualListComponent {
      * The name of the property by which tracking is performed
      */
     trackBy = input(TRACK_BY_PROPERTY_NAME);
+    /**
+     * 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.set(v);
     };
@@ -1657,12 +1676,19 @@ class NgVirtualListComponent {
             }
             return of(displayItems);
         })).subscribe();
-        combineLatest([this.$initialized, toObservable(this.itemRenderer)]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
-            this.resetRenderers(itemRenderer);
-        }));
+        this.setupRenderer();
+    }
+    setupRenderer() {
+        const $itemRenderer = toObservable(this.itemRenderer);
+        $itemRenderer.pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(v => !!v), tap(v => {
+            this._itemRenderer.set(v);
+        })).subscribe();
     }
     /** @internal */
     ngOnInit() {
+        this.onInit();
+    }
+    onInit() {
         this._initialized.set(true);
     }
     listenCacheChangesIfNeed(value) {
@@ -1692,7 +1718,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;
@@ -1705,7 +1731,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);
             }
@@ -1721,13 +1747,13 @@ class NgVirtualListComponent {
             const item = components[i];
             if (item) {
                 const id = item.instance.id;
-                item.instance.renderer = itemRenderer || this.itemRenderer();
+                item.instance.renderer = itemRenderer || this._itemRenderer();
                 doMap[id] = i;
             }
         }
         if (this._isSnappingMethodAdvanced && this.snap() && this._snapedDisplayComponent && this._snapContainerRef) {
             const comp = this._snapedDisplayComponent;
-            comp.instance.renderer = itemRenderer || this.itemRenderer();
+            comp.instance.renderer = itemRenderer || this._itemRenderer();
         }
         this._trackBox.setDisplayObjectIndexMapById(doMap);
     }
@@ -1845,6 +1871,9 @@ class NgVirtualListComponent {
     };
     /** @internal */
     ngAfterViewInit() {
+        this.afterViewInit();
+    }
+    afterViewInit() {
         const containerEl = this._container();
         if (containerEl) {
             // for direction calculation
@@ -1858,6 +1887,9 @@ class NgVirtualListComponent {
     }
     /** @internal */
     ngOnDestroy() {
+        this.dispose();
+    }
+    dispose() {
         this.clearScrollToRepeatExecutionTimeout();
         if (this._trackBox) {
             this._trackBox.dispose();
@@ -1924,5 +1956,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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