ng-virtual-list 0.0.1

package/README.md

@@ -0,0 +1,40 @@
+# NgVirtualList
+
+Angular version 19.X.X.
+
+## Example
+![VirtualList-GoogleChrome2025-06-1321-18-21-ezgif com-crop](https://github.com/user-attachments/assets/7a364774-77d1-4ee6-8db0-4338a02d2357)
+
+```bash
+npm i ng-virtual-list
+```
+
+```html
+<ng-virtual-list class="list simple" [items]="items()" [itemRenderer]="itemRenderer"></ng-virtual-list>
+
+<ng-template #itemRenderer let-data="data">
+  <div class="list__container">
+    <p>{{data?.name}}</p>
+  </div>
+</ng-template>
+```
+
+```ts
+const ITEMS: IVirtualListCollection = [];
+
+for (let i = 0, l = 1000; i < l; i++) {
+  ITEMS.push({ id: i, name: `Item: ${i}` });
+}
+
+@Component({
+  selector: 'app-root',
+  imports: [NgVirtualListComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  items = signal(ITEMS);
+}
+```
+
+

package/fesm2022/ng-virtual-list.mjs

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { Injectable, signal, Component, viewChild, input, ViewContainerRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter, map, combineLatest, switchMap, of, tap } from 'rxjs';
+
+class NgVirtualListService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class NgVirtualListItemComponent {
+    data = signal(undefined);
+    set item(v) {
+        this.data.set(v);
+    }
+    itemRenderer = signal(undefined);
+    set renderer(v) {
+        this.itemRenderer.set(v);
+    }
+    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", ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n@let translate3d = \"translate3d(0, \" + item.measures.y + \"px , 0)\";\r\n<li #listItem class=\"ngvl-item__container\" [style]=\"{'transform': translate3d}\">\r\n    @if (renderer) {\r\n    <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"{data: item.data || {}}\" />\r\n    }\r\n</li>\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-virtual-list-item', imports: [CommonModule], template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n@let translate3d = \"translate3d(0, \" + item.measures.y + \"px , 0)\";\r\n<li #listItem class=\"ngvl-item__container\" [style]=\"{'transform': translate3d}\">\r\n    @if (renderer) {\r\n    <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"{data: item.data || {}}\" />\r\n    }\r\n</li>\r\n}" }]
+        }] });
+
+const DEFAULT_ITEM_HEIGHT = 24;
+
+class NgVirtualListComponent {
+    listContainerRef;
+    container = viewChild('container');
+    list = viewChild('list');
+    items = input.required();
+    itemRenderer = input.required();
+    itemHeight = input(DEFAULT_ITEM_HEIGHT);
+    _displayItems = signal(null);
+    _displayComponents = [];
+    _bounds = signal(null);
+    _scrollSize = signal(0);
+    _resizeObserver = null;
+    _onResizeHandler = () => {
+        this._bounds.set(this.container()?.nativeElement?.getBoundingClientRect() ?? null);
+    };
+    _onScrollHandler = (e) => {
+        const target = e.target;
+        this._scrollSize.set(target.scrollTop);
+    };
+    _sizeCacheMap = new Map();
+    constructor() {
+        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemHeight = toObservable(this.itemHeight);
+        combineLatest([$bounds, $items, $scrollSize, $itemHeight]).pipe(takeUntilDestroyed(), switchMap(([bounds, items, scrollSize, itemHeight]) => {
+            const { width, height } = bounds;
+            const itemsFromStartToScrollEnd = Math.floor(scrollSize / itemHeight), itemsFromStartToDisplayEnd = Math.ceil((scrollSize + height) / itemHeight), leftHiddenItemsWeight = itemsFromStartToScrollEnd * itemHeight, totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * itemHeight, totalItems = items.length, totalSize = totalItems * itemHeight, itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight;
+            return of({ items, width, itemsFromStartToScrollEnd, itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize });
+        }), tap(({ items, width, itemsFromStartToScrollEnd, itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize }) => {
+            const displayItems = [], totalItems = items.length;
+            let i = itemsFromStartToScrollEnd, y = leftHiddenItemsWeight, renderWeight = itemsOnDisplay;
+            while (renderWeight > 0) {
+                if (i >= totalItems) {
+                    break;
+                }
+                renderWeight -= itemHeight;
+                y += itemHeight;
+                const id = items[i].id, measures = {
+                    x: 0,
+                    y,
+                    width,
+                    height: itemHeight,
+                };
+                const itemData = { ...items[i] };
+                delete itemData.id;
+                displayItems.push({ id, measures, data: itemData });
+                this._sizeCacheMap.set(id, measures);
+                i++;
+            }
+            this._displayItems.set(displayItems);
+            const l = this.list();
+            if (l) {
+                l.nativeElement.style.height = `${totalSize}px`;
+            }
+        })).subscribe();
+        toObservable(this._displayItems).pipe(takeUntilDestroyed(), tap(displayItems => {
+            this.createdisplayComponentsIfNeed(displayItems);
+            this.refresh(displayItems);
+        })).subscribe();
+    }
+    createdisplayComponentsIfNeed(displayItems) {
+        if (!displayItems || !this.listContainerRef) {
+            return;
+        }
+        const listContainerRef = this.listContainerRef;
+        while (this._displayComponents.length < displayItems.length) {
+            if (listContainerRef) {
+                const comp = listContainerRef.createComponent(NgVirtualListItemComponent);
+                this._displayComponents.push(comp);
+            }
+        }
+        if (this._displayComponents.length > displayItems.length) {
+            while (this._displayComponents.length > displayItems.length) {
+                const comp = this._displayComponents.pop();
+                comp?.destroy();
+            }
+        }
+    }
+    refresh(displayItems) {
+        if (!displayItems) {
+            return;
+        }
+        for (let i = 0, l = displayItems.length; i < l; i++) {
+            const el = this._displayComponents[i];
+            el.instance.item = displayItems[i];
+            el.instance.renderer = this.itemRenderer();
+        }
+    }
+    ngAfterViewInit() {
+        const containerEl = this.container();
+        if (containerEl) {
+            containerEl.nativeElement.addEventListener('scroll', this._onScrollHandler);
+            this._resizeObserver = new ResizeObserver(this._onResizeHandler);
+            this._resizeObserver.observe(containerEl.nativeElement);
+            this._onResizeHandler();
+        }
+    }
+    ngOnDestroy() {
+        const containerEl = this.container();
+        if (containerEl) {
+            containerEl.nativeElement.removeEventListener('scroll', this._onScrollHandler);
+            if (this._resizeObserver) {
+                this._resizeObserver.unobserve(containerEl.nativeElement);
+            }
+        }
+    }
+    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.2.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 }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ 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 }], ngImport: i0, template: "<div #container class=\"ngvl__container\">\r\n  <ul #list class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;height:100%;width:100%;max-height:100%;overflow:hidden}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{list-style:none;padding:0;margin:0}\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: [{
+            type: Component,
+            args: [{ selector: 'ng-virtual-list', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div #container class=\"ngvl__container\">\r\n  <ul #list class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;height:100%;width:100%;max-height:100%;overflow:hidden}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{list-style:none;padding:0;margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { listContainerRef: [{
+                type: ViewChild,
+                args: ['renderersContainer', { read: ViewContainerRef }]
+            }] } });
+
+/*
+ * Public API Surface of ng-virtual-list
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgVirtualListComponent, NgVirtualListService };
+//# sourceMappingURL=ng-virtual-list.mjs.map

package/fesm2022/ng-virtual-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-virtual-list.mjs","sources":["../../../projects/ng-virtual-list/src/lib/ng-virtual-list.service.ts","../../../projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts","../../../projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.html","../../../projects/ng-virtual-list/src/lib/const/index.ts","../../../projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts","../../../projects/ng-virtual-list/src/lib/ng-virtual-list.component.html","../../../projects/ng-virtual-list/src/public-api.ts","../../../projects/ng-virtual-list/src/ng-virtual-list.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class NgVirtualListService {\r\n\r\n  constructor() { }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, signal, TemplateRef } from '@angular/core';\r\nimport { IRenderVirtualListItem } from '../models';\r\n\r\n@Component({\r\n  selector: 'ng-virtual-list-item',\r\n  imports: [CommonModule],\r\n  templateUrl: './ng-virtual-list-item.component.html',\r\n  styleUrl: './ng-virtual-list-item.component.scss'\r\n})\r\nexport class NgVirtualListItemComponent {\r\n  data = signal<IRenderVirtualListItem | undefined>(undefined);\r\n\r\n  set item(v: IRenderVirtualListItem | undefined) {\r\n    this.data.set(v);\r\n  }\r\n\r\n  itemRenderer = signal<TemplateRef<any> | undefined>(undefined);\r\n\r\n  set renderer(v: TemplateRef<any> | undefined) {\r\n    this.itemRenderer.set(v);\r\n  }\r\n}\r\n","@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n@let translate3d = \"translate3d(0, \" + item.measures.y + \"px , 0)\";\r\n<li #listItem class=\"ngvl-item__container\" [style]=\"{'transform': translate3d}\">\r\n    @if (renderer) {\r\n    <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"{data: item.data || {}}\" />\r\n    }\r\n</li>\r\n}","export const DEFAULT_ITEM_HEIGHT = 24;","import {\r\n  AfterViewInit, ChangeDetectionStrategy, Component, ComponentRef, ElementRef, input,\r\n  OnDestroy, signal, TemplateRef, ViewChild, viewChild, ViewContainerRef, ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { combineLatest, filter, map, of, switchMap, tap } from 'rxjs';\r\nimport { NgVirtualListItemComponent } from './components/ng-virtual-list-item.component';\r\nimport { DEFAULT_ITEM_HEIGHT } from './const';\r\nimport { IRenderVirtualListCollection, IVirtualListCollection } from './models';\r\nimport { Id, IRect } from './types';\r\n\r\n@Component({\r\n  selector: 'ng-virtual-list',\r\n  imports: [CommonModule],\r\n  templateUrl: './ng-virtual-list.component.html',\r\n  styleUrl: './ng-virtual-list.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.ShadowDom,\r\n})\r\nexport class NgVirtualListComponent implements AfterViewInit, OnDestroy {\r\n  @ViewChild('renderersContainer', { read: ViewContainerRef })\r\n  protected listContainerRef: ViewContainerRef | undefined;\r\n\r\n  protected container = viewChild<ElementRef<HTMLDivElement>>('container');\r\n\r\n  protected list = viewChild<ElementRef<HTMLUListElement>>('list');\r\n\r\n  items = input.required<IVirtualListCollection>();\r\n\r\n  itemRenderer = input.required<TemplateRef<any>>();\r\n\r\n  itemHeight = input(DEFAULT_ITEM_HEIGHT);\r\n\r\n  protected _displayItems = signal<IRenderVirtualListCollection | null>(null);\r\n\r\n  protected _displayComponents: Array<ComponentRef<NgVirtualListItemComponent>> = [];\r\n\r\n  protected _bounds = signal<DOMRect | null>(null);\r\n\r\n  protected _scrollSize = signal<number>(0);\r\n\r\n  private _resizeObserver: ResizeObserver | null = null;\r\n\r\n  private _onResizeHandler = () => {\r\n    this._bounds.set(this.container()?.nativeElement?.getBoundingClientRect() ?? null);\r\n  }\r\n\r\n  private _onScrollHandler = (e: Event) => {\r\n    const target = e.target as HTMLDivElement;\r\n    this._scrollSize.set(target.scrollTop);\r\n  }\r\n\r\n  private _sizeCacheMap = new Map<Id, IRect>();\r\n\r\n  constructor() {\r\n    const $bounds = toObservable(this._bounds).pipe(\r\n      filter(b => !!b),\r\n    ), $items = toObservable(this.items).pipe(\r\n      map(i => !i ? [] : i),\r\n    ), $scrollSize = toObservable(this._scrollSize),\r\n      $itemHeight = toObservable(this.itemHeight);\r\n\r\n    combineLatest([$bounds, $items, $scrollSize, $itemHeight]).pipe(\r\n      takeUntilDestroyed(),\r\n      switchMap(([bounds, items, scrollSize, itemHeight]) => {\r\n        const { width, height } = bounds;\r\n        const itemsFromStartToScrollEnd = Math.floor(scrollSize / itemHeight),\r\n          itemsFromStartToDisplayEnd = Math.ceil((scrollSize + height) / itemHeight),\r\n          leftHiddenItemsWeight = itemsFromStartToScrollEnd * itemHeight,\r\n          totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * itemHeight,\r\n          totalItems = items.length,\r\n          totalSize = totalItems * itemHeight,\r\n          itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight;\r\n        return of({ items, width, itemsFromStartToScrollEnd, itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize });\r\n      }),\r\n      tap(({ items, width, itemsFromStartToScrollEnd, itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize }) => {\r\n        const displayItems: IRenderVirtualListCollection = [], totalItems = items.length;\r\n        let i = itemsFromStartToScrollEnd, y = leftHiddenItemsWeight, renderWeight = itemsOnDisplay;\r\n\r\n\r\n        while (renderWeight > 0) {\r\n          if (i >= totalItems) {\r\n            break;\r\n          }\r\n\r\n          renderWeight -= itemHeight;\r\n          y += itemHeight;\r\n\r\n          const id = items[i].id, measures = {\r\n            x: 0,\r\n            y,\r\n            width,\r\n            height: itemHeight,\r\n          };\r\n\r\n          const itemData: any = { ...items[i] };\r\n          delete itemData.id;\r\n\r\n          displayItems.push({ id, measures, data: itemData });\r\n\r\n          this._sizeCacheMap.set(id, measures);\r\n\r\n          i++;\r\n        }\r\n\r\n        this._displayItems.set(displayItems);\r\n\r\n        const l = this.list();\r\n        if (l) {\r\n          l.nativeElement.style.height = `${totalSize}px`;\r\n        }\r\n\r\n      })\r\n    ).subscribe();\r\n\r\n    toObservable(this._displayItems).pipe(\r\n      takeUntilDestroyed(),\r\n      tap(displayItems => {\r\n        this.createdisplayComponentsIfNeed(displayItems);\r\n        this.refresh(displayItems);\r\n      }),\r\n    ).subscribe();\r\n  }\r\n\r\n  private createdisplayComponentsIfNeed(displayItems: IRenderVirtualListCollection | null) {\r\n    if (!displayItems || !this.listContainerRef) {\r\n      return;\r\n    }\r\n    const listContainerRef = this.listContainerRef;\r\n\r\n    while (this._displayComponents.length < displayItems.length) {\r\n      if (listContainerRef) {\r\n        const comp = listContainerRef.createComponent(NgVirtualListItemComponent);\r\n        this._displayComponents.push(comp);\r\n      }\r\n    }\r\n\r\n    if (this._displayComponents.length > displayItems.length) {\r\n      while (this._displayComponents.length > displayItems.length) {\r\n        const comp = this._displayComponents.pop();\r\n        comp?.destroy();\r\n      }\r\n    }\r\n  }\r\n\r\n  protected refresh(displayItems: IRenderVirtualListCollection | null) {\r\n    if (!displayItems) {\r\n      return;\r\n    }\r\n\r\n    for (let i = 0, l = displayItems.length; i < l; i++) {\r\n      const el = this._displayComponents[i];\r\n      el.instance.item = displayItems[i];\r\n      el.instance.renderer = this.itemRenderer();\r\n    }\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    const containerEl = this.container();\r\n    if (containerEl) {\r\n      containerEl.nativeElement.addEventListener('scroll', this._onScrollHandler);\r\n\r\n      this._resizeObserver = new ResizeObserver(this._onResizeHandler);\r\n      this._resizeObserver.observe(containerEl.nativeElement);\r\n\r\n      this._onResizeHandler();\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    const containerEl = this.container();\r\n    if (containerEl) {\r\n      containerEl.nativeElement.removeEventListener('scroll', this._onScrollHandler);\r\n\r\n      if (this._resizeObserver) {\r\n        this._resizeObserver.unobserve(containerEl.nativeElement);\r\n      }\r\n    }\r\n  }\r\n}\r\n","<div #container class=\"ngvl__container\">\r\n  <ul #list class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>","/*\r\n * Public API Surface of ng-virtual-list\r\n */\r\n\r\nexport * from './lib/ng-virtual-list.service';\r\nexport * from './lib/ng-virtual-list.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAKa,oBAAoB,CAAA;AAE/B,IAAA,WAAA,GAAA;wGAFW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAApB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cAFnB,MAAM,EAAA,CAAA;;4FAEP,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAHhC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;MCMY,0BAA0B,CAAA;AACrC,IAAA,IAAI,GAAG,MAAM,CAAqC,SAAS,CAAC;IAE5D,IAAI,IAAI,CAAC,CAAqC,EAAA;AAC5C,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlB,IAAA,YAAY,GAAG,MAAM,CAA+B,SAAS,CAAC;IAE9D,IAAI,QAAQ,CAAC,CAA+B,EAAA;AAC1C,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;;wGAVf,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVvC,4YAUC,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDJW,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAIX,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;+BACE,sBAAsB,EAAA,OAAA,EACvB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,4YAAA,EAAA;;;AENlB,MAAM,mBAAmB,GAAG,EAAE;;MCoBxB,sBAAsB,CAAA;AAEvB,IAAA,gBAAgB;AAEhB,IAAA,SAAS,GAAG,SAAS,CAA6B,WAAW,CAAC;AAE9D,IAAA,IAAI,GAAG,SAAS,CAA+B,MAAM,CAAC;AAEhE,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAA0B;AAEhD,IAAA,YAAY,GAAG,KAAK,CAAC,QAAQ,EAAoB;AAEjD,IAAA,UAAU,GAAG,KAAK,CAAC,mBAAmB,CAAC;AAE7B,IAAA,aAAa,GAAG,MAAM,CAAsC,IAAI,CAAC;IAEjE,kBAAkB,GAAoD,EAAE;AAExE,IAAA,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAEtC,IAAA,WAAW,GAAG,MAAM,CAAS,CAAC,CAAC;IAEjC,eAAe,GAA0B,IAAI;IAE7C,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,aAAa,EAAE,qBAAqB,EAAE,IAAI,IAAI,CAAC;AACpF,KAAC;AAEO,IAAA,gBAAgB,GAAG,CAAC,CAAQ,KAAI;AACtC,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAwB;QACzC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC;AACxC,KAAC;AAEO,IAAA,aAAa,GAAG,IAAI,GAAG,EAAa;AAE5C,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAC7C,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,EAAE,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CACvC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CACtB,EAAE,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAC7C,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AAE7C,QAAA,aAAa,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAC7D,kBAAkB,EAAE,EACpB,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,CAAC,KAAI;AACpD,YAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM;YAChC,MAAM,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC,EACnE,0BAA0B,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,EAC1E,qBAAqB,GAAG,yBAAyB,GAAG,UAAU,EAC9D,4BAA4B,GAAG,0BAA0B,GAAG,UAAU,EACtE,UAAU,GAAG,KAAK,CAAC,MAAM,EACzB,SAAS,GAAG,UAAU,GAAG,UAAU,EACnC,cAAc,GAAG,4BAA4B,GAAG,qBAAqB;AACvE,YAAA,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,qBAAqB,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;SACrH,CAAC,EACF,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,qBAAqB,EAAE,UAAU,EAAE,SAAS,EAAE,KAAI;YAChH,MAAM,YAAY,GAAiC,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,MAAM;YAChF,IAAI,CAAC,GAAG,yBAAyB,EAAE,CAAC,GAAG,qBAAqB,EAAE,YAAY,GAAG,cAAc;AAG3F,YAAA,OAAO,YAAY,GAAG,CAAC,EAAE;AACvB,gBAAA,IAAI,CAAC,IAAI,UAAU,EAAE;oBACnB;;gBAGF,YAAY,IAAI,UAAU;gBAC1B,CAAC,IAAI,UAAU;gBAEf,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,GAAG;AACjC,oBAAA,CAAC,EAAE,CAAC;oBACJ,CAAC;oBACD,KAAK;AACL,oBAAA,MAAM,EAAE,UAAU;iBACnB;gBAED,MAAM,QAAQ,GAAQ,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE;gBACrC,OAAO,QAAQ,CAAC,EAAE;AAElB,gBAAA,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;gBAEnD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;AAEpC,gBAAA,CAAC,EAAE;;AAGL,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC;AAEpC,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACrB,IAAI,CAAC,EAAE;gBACL,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI;;AAGnD,SAAC,CAAC,CACH,CAAC,SAAS,EAAE;AAEb,QAAA,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CACnC,kBAAkB,EAAE,EACpB,GAAG,CAAC,YAAY,IAAG;AACjB,YAAA,IAAI,CAAC,6BAA6B,CAAC,YAAY,CAAC;AAChD,YAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;AAC5B,SAAC,CAAC,CACH,CAAC,SAAS,EAAE;;AAGP,IAAA,6BAA6B,CAAC,YAAiD,EAAA;QACrF,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC3C;;AAEF,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB;QAE9C,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE;YAC3D,IAAI,gBAAgB,EAAE;gBACpB,MAAM,IAAI,GAAG,gBAAgB,CAAC,eAAe,CAAC,0BAA0B,CAAC;AACzE,gBAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;;;QAItC,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE;YACxD,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE;gBAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE;gBAC1C,IAAI,EAAE,OAAO,EAAE;;;;AAKX,IAAA,OAAO,CAAC,YAAiD,EAAA;QACjE,IAAI,CAAC,YAAY,EAAE;YACjB;;AAGF,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACnD,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;YACrC,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC;YAClC,EAAE,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE;;;IAI9C,eAAe,GAAA;AACb,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE;QACpC,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAE3E,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;YAEvD,IAAI,CAAC,gBAAgB,EAAE;;;IAI3B,WAAW,GAAA;AACT,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE;QACpC,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAE9E,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC;;;;wGA5JpD,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,EACQ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAA,gBAAgB,ECrB3D,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+JAIM,2ODUM,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,SAAA,EAAA,CAAA;;4FAMX,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBARlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,YAAY,CAAC,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,SAAS,EAAA,QAAA,EAAA,+JAAA,EAAA,MAAA,EAAA,CAAA,oLAAA,CAAA,EAAA;wDAIhC,gBAAgB,EAAA,CAAA;sBADzB,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,oBAAoB,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;;;AErB7D;;AAEG;;ACFH;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ng-virtual-list" />
+export * from './public-api';

package/lib/components/ng-virtual-list-item.component.d.ts

@@ -0,0 +1,11 @@
+import { TemplateRef } from '@angular/core';
+import { IRenderVirtualListItem } from '../models';
+import * as i0 from "@angular/core";
+export declare class NgVirtualListItemComponent {
+    data: import("@angular/core").WritableSignal<IRenderVirtualListItem | undefined>;
+    set item(v: IRenderVirtualListItem | undefined);
+    itemRenderer: import("@angular/core").WritableSignal<TemplateRef<any> | undefined>;
+    set renderer(v: TemplateRef<any> | undefined);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgVirtualListItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgVirtualListItemComponent, "ng-virtual-list-item", never, {}, {}, never, never, true, never>;
+}

package/lib/const/index.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_ITEM_HEIGHT = 24;

package/lib/models/collection.model.d.ts

@@ -0,0 +1,3 @@
+import { IVirtualListItem } from "./item.model";
+export interface IVirtualListCollection extends Array<IVirtualListItem> {
+}

package/lib/models/index.d.ts

@@ -0,0 +1,5 @@
+import { IVirtualListItem } from './item.model';
+import { IVirtualListCollection } from './collection.model';
+import { IRenderVirtualListItem } from './render-item.model';
+import { IRenderVirtualListCollection } from './render-collection.model';
+export type { IVirtualListItem, IVirtualListCollection, IRenderVirtualListItem, IRenderVirtualListCollection, };

package/lib/models/item.model.d.ts

@@ -0,0 +1,5 @@
+import { Id } from "../types/id";
+export interface IVirtualListItem {
+    id: Id;
+    [x: string]: any;
+}

package/lib/models/render-collection.model.d.ts

@@ -0,0 +1,3 @@
+import { IRenderVirtualListItem } from "./render-item.model";
+export interface IRenderVirtualListCollection extends Array<IRenderVirtualListItem> {
+}

package/lib/models/render-item.model.d.ts

@@ -0,0 +1,8 @@
+import { IRect } from "../types";
+import { Id } from "../types/id";
+import { IVirtualListItem } from "./item.model";
+export interface IRenderVirtualListItem {
+    id: Id;
+    measures: IRect;
+    data: Omit<IVirtualListItem, 'id'>;
+}

package/lib/ng-virtual-list.component.d.ts

@@ -0,0 +1,27 @@
+import { AfterViewInit, ComponentRef, ElementRef, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { NgVirtualListItemComponent } from './components/ng-virtual-list-item.component';
+import { IRenderVirtualListCollection, IVirtualListCollection } from './models';
+import * as i0 from "@angular/core";
+export declare class NgVirtualListComponent implements AfterViewInit, OnDestroy {
+    protected listContainerRef: ViewContainerRef | undefined;
+    protected container: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected list: import("@angular/core").Signal<ElementRef<HTMLUListElement> | undefined>;
+    items: import("@angular/core").InputSignal<IVirtualListCollection>;
+    itemRenderer: import("@angular/core").InputSignal<TemplateRef<any>>;
+    itemHeight: import("@angular/core").InputSignal<number>;
+    protected _displayItems: import("@angular/core").WritableSignal<IRenderVirtualListCollection | null>;
+    protected _displayComponents: Array<ComponentRef<NgVirtualListItemComponent>>;
+    protected _bounds: import("@angular/core").WritableSignal<DOMRect | null>;
+    protected _scrollSize: import("@angular/core").WritableSignal<number>;
+    private _resizeObserver;
+    private _onResizeHandler;
+    private _onScrollHandler;
+    private _sizeCacheMap;
+    constructor();
+    private createdisplayComponentsIfNeed;
+    protected refresh(displayItems: IRenderVirtualListCollection | null): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgVirtualListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgVirtualListComponent, "ng-virtual-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemRenderer": { "alias": "itemRenderer"; "required": true; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/ng-virtual-list.service.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class NgVirtualListService {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgVirtualListService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NgVirtualListService>;
+}

package/lib/types/id.d.ts

@@ -0,0 +1 @@
+export type Id = string | number;

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+import { Id } from './id';
+import { ISize } from './size';
+import { IRect } from './rect';
+export type { Id, ISize, IRect, };

package/lib/types/rect.d.ts

@@ -0,0 +1,5 @@
+import { ISize } from "./size";
+export interface IRect extends ISize {
+    x: number;
+    y: number;
+}

package/lib/types/size.d.ts

@@ -0,0 +1,4 @@
+export interface ISize {
+    width: number;
+    height: number;
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ng-virtual-list",
+  "version": "0.0.1",
+  "author": {
+    "name": "Evgenii Grebennikov",
+    "email": "djonnyx@gmail.com"
+  },
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ng-virtual-list.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ng-virtual-list.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/ng-virtual-list.service';
+export * from './lib/ng-virtual-list.component';