ng-virtual-list 20.2.0 → 20.3.0

package/README.md

@@ -25,10 +25,10 @@ npm i ng-virtual-list
 
 Template:
 ```html
-<ng-virtual-list class="list" direction="hotizontal" [items]="horizontalItems" [itemsOffset]="50"
-    [itemRenderer]="hotizontalItemRenderer" [itemSize]="64"></ng-virtual-list>
+<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [itemsOffset]="50"
+    [itemRenderer]="horizontalItemRenderer" [itemSize]="64"></ng-virtual-list>
 
-<ng-template #hotizontalItemRenderer let-data="data">
+<ng-template #horizontalItemRenderer let-data="data">
   @if (data) {
     <div class="list__h-container" (click)="onItemClick(data)">
       <span>{{data.name}}</span>
@@ -63,7 +63,7 @@ export class AppComponent {
 
 Template:
 ```html
-<ng-virtual-list class="list" direction="hotizontal" [items]="horizontalGroupItems" [itemRenderer]="horizontalGroupItemRenderer"
+<ng-virtual-list class="list" direction="horizontal" [items]="horizontalGroupItems" [itemRenderer]="horizontalGroupItemRenderer"
     [itemsOffset]="50" [stickyMap]="horizontalGroupItemsStickyMap" [itemSize]="54" [snap]="true"></ng-virtual-list>
 
 <ng-template #horizontalGroupItemRenderer let-data="data">
@@ -488,12 +488,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.3.2 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.3.2](https://www.npmjs.com/package/ng-virtual-list/v/19.3.2) |
-| 18.x | 18.2.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.2.0](https://www.npmjs.com/package/ng-virtual-list/v/18.2.0) |
-| 17.x | 17.2.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.2.0](https://www.npmjs.com/package/ng-virtual-list/v/17.2.0) |
-| 16.x | 16.2.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.2.0](https://www.npmjs.com/package/ng-virtual-list/v/16.2.0) |
-| 15.x | 15.2.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.2.0](https://www.npmjs.com/package/ng-virtual-list/v/15.2.0) |
-| 14.x | 14.2.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.2.0](https://www.npmjs.com/package/ng-virtual-list/v/14.2.0) |
+| 19.x | 19.3.3 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.3.3](https://www.npmjs.com/package/ng-virtual-list/v/19.3.3) |
+| 18.x | 18.3.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.3.0](https://www.npmjs.com/package/ng-virtual-list/v/18.3.0) |
+| 17.x | 17.3.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.3.0](https://www.npmjs.com/package/ng-virtual-list/v/17.3.0) |
+| 16.x | 16.3.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.3.0](https://www.npmjs.com/package/ng-virtual-list/v/16.3.0) |
+| 15.x | 15.3.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.3.0](https://www.npmjs.com/package/ng-virtual-list/v/15.3.0) |
+| 14.x | 14.3.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.3.0](https://www.npmjs.com/package/ng-virtual-list/v/14.3.0) |
 
 <br/>
 

package/fesm2022/ng-virtual-list.mjs

@@ -1,7 +1,7 @@
-import * as i0 from '@angular/core';
-import { signal, inject, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, inject, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
 
@@ -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/20.x/projects/ng-virtual-list/src/lib/models/-basevirtual-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/20.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() {
@@ -128,6 +137,7 @@ class NgVirtualListItemComponent {
         return this._elementRef.nativeElement;
     }
     constructor() {
+        super();
         this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListItemComponent.__nextId + 1;
     }
@@ -194,10 +204,10 @@ class NgVirtualListItemComponent {
         styles.transform = ZEROS_TRANSLATE_3D;
         styles.zIndex = HIDDEN_ZINDEX;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgVirtualListItemComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { 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: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', imports: [CommonModule], host: {
                         'class': 'ngvl__item',
@@ -1482,6 +1492,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.
@@ -1590,10 +1601,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);
     };
@@ -1650,12 +1669,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) {
@@ -1685,7 +1711,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;
@@ -1698,7 +1724,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);
             }
@@ -1714,13 +1740,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);
     }
@@ -1838,6 +1864,9 @@ class NgVirtualListComponent {
     };
     /** @internal */
     ngAfterViewInit() {
+        this.afterViewInit();
+    }
+    afterViewInit() {
         const containerEl = this._container();
         if (containerEl) {
             // for direction calculation
@@ -1851,6 +1880,9 @@ class NgVirtualListComponent {
     }
     /** @internal */
     ngOnDestroy() {
+        this.dispose();
+    }
+    dispose() {
         this.clearScrollToRepeatExecutionTimeout();
         if (this._trackBox) {
             this._trackBox.dispose();
@@ -1880,10 +1912,10 @@ class NgVirtualListComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (snap()) {\r\n<div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (snap()) {\r\n<div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "@if (snap()) {\r\n<div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
@@ -1902,5 +1934,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Directions, NgVirtualListComponent, SnappingMethods };
+export { BaseVirtualListItemComponent, Directions, NgVirtualListComponent, NgVirtualListItemComponent, SnappingMethods };
 //# sourceMappingURL=ng-virtual-list.mjs.map