ng-virtual-list 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -4
- package/fesm2022/ng-virtual-list.mjs +39 -22
- package/fesm2022/ng-virtual-list.mjs.map +1 -1
- package/lib/components/ng-virtual-list-item.component.d.ts +1 -1
- package/lib/models/index.d.ts +2 -3
- package/lib/models/render-item-config.model.d.ts +3 -0
- package/lib/models/render-item.model.d.ts +2 -0
- package/lib/models/sticky-map.model.d.ts +6 -0
- package/lib/ng-virtual-list.component.d.ts +4 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
|
|
1
2
|
# NgVirtualList
|
|
2
3
|
Fast, optimized rendering of extremely large numbers of list items
|
|
3
4
|
|
|
4
5
|
Angular version 19.X.X.
|
|
5
6
|
|
|
6
|
-
##
|
|
7
|
+
## Examples
|
|
8
|
+
|
|
9
|
+
### Simple virtual list
|
|
7
10
|
|
|
8
11
|
|
|
9
12
|
|
|
@@ -12,16 +15,20 @@ npm i ng-virtual-list
|
|
|
12
15
|
```
|
|
13
16
|
|
|
14
17
|
```html
|
|
15
|
-
<ng-virtual-list class="list simple" [items]="items
|
|
18
|
+
<ng-virtual-list class="list simple" [items]="items" [itemRenderer]="itemRenderer" [itemHeight]="40"></ng-virtual-list>
|
|
16
19
|
|
|
17
20
|
<ng-template #itemRenderer let-data="data">
|
|
21
|
+
@if (data) {
|
|
18
22
|
<div class="list__container">
|
|
19
|
-
<p>{{data
|
|
23
|
+
<p>{{data.name}}</p>
|
|
20
24
|
</div>
|
|
25
|
+
}
|
|
21
26
|
</ng-template>
|
|
22
27
|
```
|
|
23
28
|
|
|
24
29
|
```ts
|
|
30
|
+
import { NgVirtualListComponent, IVirtualListCollection } from 'ng-virtual-list';
|
|
31
|
+
|
|
25
32
|
const ITEMS: IVirtualListCollection = [];
|
|
26
33
|
|
|
27
34
|
for (let i = 0, l = 100000; i < l; i++) {
|
|
@@ -35,8 +42,61 @@ for (let i = 0, l = 100000; i < l; i++) {
|
|
|
35
42
|
styleUrl: './app.component.scss'
|
|
36
43
|
})
|
|
37
44
|
export class AppComponent {
|
|
38
|
-
items =
|
|
45
|
+
items = ITEMS;
|
|
39
46
|
}
|
|
40
47
|
```
|
|
41
48
|
|
|
49
|
+
### Grouped virtual list
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<ng-virtual-list class="list simple" [items]="groupItems" [itemRenderer]="groupItemRenderer"
|
|
55
|
+
[stickyMap]="groupItemsStickyMap" [itemHeight]="40"></ng-virtual-list>
|
|
56
|
+
|
|
57
|
+
<ng-template #groupItemRenderer let-data="data">
|
|
58
|
+
@if (data) {
|
|
59
|
+
@switch (data.type) {
|
|
60
|
+
@case ("group-header") {
|
|
61
|
+
<div class="list__group-container">
|
|
62
|
+
<p>{{data.name}}</p>
|
|
63
|
+
</div>
|
|
64
|
+
}
|
|
65
|
+
@default {
|
|
66
|
+
<div class="list__container">
|
|
67
|
+
<p>{{data.name}}</p>
|
|
68
|
+
</div>
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
</ng-template>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
import { NgVirtualListComponent, IVirtualListCollection, IVirtualListStickyMap } from 'ng-virtual-list';
|
|
77
|
+
|
|
78
|
+
const GROUP_ITEMS: IVirtualListCollection = [],
|
|
79
|
+
GROUP_ITEMS_STICKY_MAP: IVirtualListStickyMap = {};
|
|
42
80
|
|
|
81
|
+
let groupIndex = 0;
|
|
82
|
+
for (let i = 0, l = 10000000; i < l; i++) {
|
|
83
|
+
const id = i, type = Math.random() > .895 ? 'group-header' : 'item';
|
|
84
|
+
if (type === 'group-header') {
|
|
85
|
+
groupIndex++;
|
|
86
|
+
}
|
|
87
|
+
GROUP_ITEMS.push({ id, type, name: type === 'group-header' ? `Group ${groupIndex}` : `Item: ${i}` });
|
|
88
|
+
GROUP_ITEMS_STICKY_MAP[id] = type === 'group-header' ? 1 : 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@Component({
|
|
92
|
+
selector: 'app-root',
|
|
93
|
+
imports: [NgVirtualListComponent],
|
|
94
|
+
templateUrl: './app.component.html',
|
|
95
|
+
styleUrl: './app.component.scss'
|
|
96
|
+
})
|
|
97
|
+
export class AppComponent {
|
|
98
|
+
groupItems = GROUP_ITEMS;
|
|
99
|
+
groupItemsStickyMap = GROUP_ITEMS_STICKY_MAP;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
```
|
|
@@ -1,22 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { signal, Component, viewChild, input, ViewContainerRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
import { filter, tap, map, combineLatest, switchMap, of } from 'rxjs';
|
|
7
7
|
|
|
8
|
-
class NgVirtualListService {
|
|
9
|
-
constructor() { }
|
|
10
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
11
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListService, providedIn: 'root' });
|
|
12
|
-
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListService, decorators: [{
|
|
14
|
-
type: Injectable,
|
|
15
|
-
args: [{
|
|
16
|
-
providedIn: 'root'
|
|
17
|
-
}]
|
|
18
|
-
}], ctorParameters: () => [] });
|
|
19
|
-
|
|
20
8
|
class NgVirtualListItemComponent {
|
|
21
9
|
_elementRef;
|
|
22
10
|
data = signal(undefined);
|
|
@@ -30,15 +18,24 @@ class NgVirtualListItemComponent {
|
|
|
30
18
|
constructor(_elementRef) {
|
|
31
19
|
this._elementRef = _elementRef;
|
|
32
20
|
toObservable(this.data).pipe(takeUntilDestroyed(), filter(data => !!data), tap(data => {
|
|
21
|
+
if (data.config.sticky > 0) {
|
|
22
|
+
this._elementRef.nativeElement.style.position = 'sticky';
|
|
23
|
+
this._elementRef.nativeElement.style.zIndex = String(data.config.sticky);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
this._elementRef.nativeElement.style.position = 'absolute';
|
|
27
|
+
this._elementRef.nativeElement.style.zIndex = '0';
|
|
28
|
+
}
|
|
33
29
|
this._elementRef.nativeElement.style.transform = `translate3d(0, ${data.measures.y}px , 0)`;
|
|
30
|
+
this._elementRef.nativeElement.style.height = `${data.measures.height}px`;
|
|
34
31
|
})).subscribe();
|
|
35
32
|
}
|
|
36
33
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
-
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<li #listItem class=\"ngvl-item__container\"
|
|
34
|
+
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<li #listItem class=\"ngvl-item__container\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"{data: item.data || {}}\" />\r\n }\r\n</li>\r\n}", styles: [":host{position:absolute;top:0;width:100%}.ngvl-item__container{margin:0;padding:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
38
35
|
}
|
|
39
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
|
|
40
37
|
type: Component,
|
|
41
|
-
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<li #listItem class=\"ngvl-item__container\"
|
|
38
|
+
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<li #listItem class=\"ngvl-item__container\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"{data: item.data || {}}\" />\r\n }\r\n</li>\r\n}", styles: [":host{position:absolute;top:0;width:100%}.ngvl-item__container{margin:0;padding:0;overflow:hidden}\n"] }]
|
|
42
39
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
43
40
|
|
|
44
41
|
const DEFAULT_ITEM_HEIGHT = 24;
|
|
@@ -50,6 +47,7 @@ class NgVirtualListComponent {
|
|
|
50
47
|
list = viewChild('list');
|
|
51
48
|
items = input.required();
|
|
52
49
|
itemRenderer = input.required();
|
|
50
|
+
stickyMap = input({});
|
|
53
51
|
itemHeight = input(DEFAULT_ITEM_HEIGHT);
|
|
54
52
|
itemsOffset = input(DEFAULT_ITEMS_OFFSET);
|
|
55
53
|
_displayItems = signal(null);
|
|
@@ -66,18 +64,35 @@ class NgVirtualListComponent {
|
|
|
66
64
|
};
|
|
67
65
|
_sizeCacheMap = new Map();
|
|
68
66
|
constructor() {
|
|
69
|
-
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), $itemsOffset = toObservable(this.itemsOffset);
|
|
70
|
-
combineLatest([$bounds, $items, $scrollSize, $itemHeight, $itemsOffset]).pipe(takeUntilDestroyed(), switchMap(([bounds, items, scrollSize, itemHeight, itemsOffset]) => {
|
|
67
|
+
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), $itemsOffset = toObservable(this.itemsOffset), $stickyMap = toObservable(this.stickyMap);
|
|
68
|
+
combineLatest([$bounds, $items, $stickyMap, $scrollSize, $itemHeight, $itemsOffset]).pipe(takeUntilDestroyed(), switchMap(([bounds, items, stickyMap, scrollSize, itemHeight, itemsOffset]) => {
|
|
71
69
|
const { width, height } = bounds;
|
|
72
70
|
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;
|
|
73
71
|
return of({
|
|
74
|
-
items, itemsOffset, width, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd,
|
|
72
|
+
items, stickyMap, itemsOffset, width, scrollSize, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd,
|
|
75
73
|
itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize
|
|
76
74
|
});
|
|
77
|
-
}), tap(({ items, itemsOffset, width, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd, itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize }) => {
|
|
75
|
+
}), tap(({ items, stickyMap, itemsOffset, width, scrollSize, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd, itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize }) => {
|
|
78
76
|
const displayItems = [], totalItems = items.length, leftItemLength = itemsFromStartToScrollEnd > 0 ? Math.min(itemsFromStartToScrollEnd, itemsOffset) : 0, rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalItems
|
|
79
77
|
? totalItems - itemsFromStartToDisplayEnd : itemsOffset, leftItemsWeight = leftItemLength * itemHeight, rightItemsWeight = rightItemLength * itemHeight;
|
|
80
78
|
let i = itemsFromStartToScrollEnd - leftItemLength, y = leftHiddenItemsWeight - leftItemLength * itemHeight, renderWeight = itemsOnDisplay + leftItemsWeight + rightItemsWeight;
|
|
79
|
+
for (let i = itemsFromStartToScrollEnd; i >= 0; i--) {
|
|
80
|
+
const id = items[i].id, sticky = stickyMap[id];
|
|
81
|
+
if (sticky > 0) {
|
|
82
|
+
const measures = {
|
|
83
|
+
x: 0,
|
|
84
|
+
y: scrollSize,
|
|
85
|
+
width,
|
|
86
|
+
height: itemHeight,
|
|
87
|
+
}, config = {
|
|
88
|
+
sticky,
|
|
89
|
+
};
|
|
90
|
+
const itemData = { ...items[i] };
|
|
91
|
+
delete itemData.id;
|
|
92
|
+
displayItems.push({ id, measures, data: itemData, config });
|
|
93
|
+
break;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
81
96
|
while (renderWeight > 0) {
|
|
82
97
|
if (i >= totalItems) {
|
|
83
98
|
break;
|
|
@@ -87,10 +102,12 @@ class NgVirtualListComponent {
|
|
|
87
102
|
y,
|
|
88
103
|
width,
|
|
89
104
|
height: itemHeight,
|
|
105
|
+
}, config = {
|
|
106
|
+
sticky: y <= scrollSize ? stickyMap[id] ?? 0 : 0,
|
|
90
107
|
};
|
|
91
108
|
const itemData = { ...items[i] };
|
|
92
109
|
delete itemData.id;
|
|
93
|
-
displayItems.push({ id, measures, data: itemData });
|
|
110
|
+
displayItems.push({ id, measures, data: itemData, config });
|
|
94
111
|
this._sizeCacheMap.set(id, measures);
|
|
95
112
|
renderWeight -= itemHeight;
|
|
96
113
|
y += itemHeight;
|
|
@@ -154,7 +171,7 @@ class NgVirtualListComponent {
|
|
|
154
171
|
}
|
|
155
172
|
}
|
|
156
173
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
157
|
-
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 }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", 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{position:relative;list-style:none;padding:0;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
174
|
+
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 }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", 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{position:relative;list-style:none;padding:0;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
158
175
|
}
|
|
159
176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
|
|
160
177
|
type: Component,
|
|
@@ -172,5 +189,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
172
189
|
* Generated bundle index. Do not edit.
|
|
173
190
|
*/
|
|
174
191
|
|
|
175
|
-
export { NgVirtualListComponent
|
|
192
|
+
export { NgVirtualListComponent };
|
|
176
193
|
//# sourceMappingURL=ng-virtual-list.mjs.map
|
|
@@ -1 +1 @@
|
|
|
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, ElementRef, signal, TemplateRef } from '@angular/core';\r\nimport { IRenderVirtualListItem } from '../models';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { filter, tap } from 'rxjs';\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 constructor(private _elementRef: ElementRef<HTMLElement>) {\r\n toObservable(this.data).pipe(\r\n takeUntilDestroyed(),\r\n filter(data => !!data),\r\n tap(data => {\r\n this._elementRef.nativeElement.style.transform = `translate3d(0, ${data.measures.y}px , 0)`;\r\n })\r\n ).subscribe();\r\n }\r\n}\r\n","@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n<li #listItem class=\"ngvl-item__container\" [ngStyle]=\"{'height.px': item.measures.height}\">\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;\r\n\r\nexport const DEFAULT_ITEMS_OFFSET = 2;","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, DEFAULT_ITEMS_OFFSET } 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 itemsOffset = input(DEFAULT_ITEMS_OFFSET);\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 $itemsOffset = toObservable(this.itemsOffset);\r\n\r\n combineLatest([$bounds, $items, $scrollSize, $itemHeight, $itemsOffset]).pipe(\r\n takeUntilDestroyed(),\r\n switchMap(([bounds, items, scrollSize, itemHeight, itemsOffset]) => {\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({\r\n items, itemsOffset, width, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd,\r\n itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize\r\n });\r\n }),\r\n tap(({ items, itemsOffset, width, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd,\r\n itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize }) => {\r\n const displayItems: IRenderVirtualListCollection = [], totalItems = items.length,\r\n leftItemLength = itemsFromStartToScrollEnd > 0 ? Math.min(itemsFromStartToScrollEnd, itemsOffset) : 0,\r\n rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalItems\r\n ? totalItems - itemsFromStartToDisplayEnd : itemsOffset,\r\n leftItemsWeight = leftItemLength * itemHeight, rightItemsWeight = rightItemLength * itemHeight;\r\n let i = itemsFromStartToScrollEnd - leftItemLength, y = leftHiddenItemsWeight - leftItemLength * itemHeight,\r\n renderWeight = itemsOnDisplay + leftItemsWeight + rightItemsWeight;\r\n while (renderWeight > 0) {\r\n if (i >= totalItems) {\r\n break;\r\n }\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 renderWeight -= itemHeight;\r\n y += itemHeight;\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":"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"}
|
|
1
|
+
{"version":3,"file":"ng-virtual-list.mjs","sources":["../../../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 { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, signal, TemplateRef } from '@angular/core';\r\nimport { IRenderVirtualListItem } from '../models/render-item.model';\r\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\r\nimport { filter, tap } from 'rxjs';\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 constructor(private _elementRef: ElementRef<HTMLElement>) {\r\n toObservable(this.data).pipe(\r\n takeUntilDestroyed(),\r\n filter(data => !!data),\r\n tap(data => {\r\n if (data.config.sticky > 0) {\r\n this._elementRef.nativeElement.style.position = 'sticky';\r\n this._elementRef.nativeElement.style.zIndex = String(data.config.sticky);\r\n } else {\r\n this._elementRef.nativeElement.style.position = 'absolute';\r\n this._elementRef.nativeElement.style.zIndex = '0';\r\n }\r\n this._elementRef.nativeElement.style.transform = `translate3d(0, ${data.measures.y}px , 0)`;\r\n this._elementRef.nativeElement.style.height = `${data.measures.height}px`;\r\n })\r\n ).subscribe();\r\n }\r\n}\r\n","@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n<li #listItem class=\"ngvl-item__container\">\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;\r\n\r\nexport const DEFAULT_ITEMS_OFFSET = 2;","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, DEFAULT_ITEMS_OFFSET } from './const';\r\nimport { IVirtualListCollection, IVirtualListStickyMap } from './models';\r\nimport { Id, IRect } from './types';\r\nimport { IRenderVirtualListCollection } from './models/render-collection.model';\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 stickyMap = input<IVirtualListStickyMap>({});\r\n\r\n itemHeight = input(DEFAULT_ITEM_HEIGHT);\r\n\r\n itemsOffset = input(DEFAULT_ITEMS_OFFSET);\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 $itemsOffset = toObservable(this.itemsOffset),\r\n $stickyMap = toObservable(this.stickyMap);\r\n\r\n combineLatest([$bounds, $items, $stickyMap, $scrollSize, $itemHeight, $itemsOffset]).pipe(\r\n takeUntilDestroyed(),\r\n switchMap(([bounds, items, stickyMap, scrollSize, itemHeight, itemsOffset]) => {\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({\r\n items, stickyMap, itemsOffset, width, scrollSize, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd,\r\n itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize\r\n });\r\n }),\r\n tap(({ items, stickyMap, itemsOffset, width, scrollSize, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd,\r\n itemsOnDisplay, leftHiddenItemsWeight, itemHeight, totalSize }) => {\r\n const displayItems: IRenderVirtualListCollection = [], totalItems = items.length,\r\n leftItemLength = itemsFromStartToScrollEnd > 0 ? Math.min(itemsFromStartToScrollEnd, itemsOffset) : 0,\r\n rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalItems\r\n ? totalItems - itemsFromStartToDisplayEnd : itemsOffset,\r\n leftItemsWeight = leftItemLength * itemHeight, rightItemsWeight = rightItemLength * itemHeight;\r\n let i = itemsFromStartToScrollEnd - leftItemLength, y = leftHiddenItemsWeight - leftItemLength * itemHeight,\r\n renderWeight = itemsOnDisplay + leftItemsWeight + rightItemsWeight;\r\n\r\n for (let i = itemsFromStartToScrollEnd; i >= 0; i--) {\r\n const id = items[i].id, sticky = stickyMap[id];\r\n if (sticky > 0) {\r\n const measures = {\r\n x: 0,\r\n y: scrollSize,\r\n width,\r\n height: itemHeight,\r\n }, config = {\r\n sticky,\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, config });\r\n break;\r\n }\r\n }\r\n\r\n while (renderWeight > 0) {\r\n if (i >= totalItems) {\r\n break;\r\n }\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 }, config = {\r\n sticky: y <= scrollSize ? stickyMap[id] ?? 0 : 0,\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, config });\r\n\r\n this._sizeCacheMap.set(id, measures);\r\n\r\n renderWeight -= itemHeight;\r\n y += itemHeight;\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.component';\r\nexport * from './lib/models';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ElementRef, TemplateRef } from '@angular/core';
|
|
2
|
-
import { IRenderVirtualListItem } from '../models';
|
|
2
|
+
import { IRenderVirtualListItem } from '../models/render-item.model';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class NgVirtualListItemComponent {
|
|
5
5
|
private _elementRef;
|
package/lib/models/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { IVirtualListItem } from './item.model';
|
|
2
|
+
import { IVirtualListStickyMap } from './sticky-map.model';
|
|
2
3
|
import { IVirtualListCollection } from './collection.model';
|
|
3
|
-
|
|
4
|
-
import { IRenderVirtualListCollection } from './render-collection.model';
|
|
5
|
-
export type { IVirtualListItem, IVirtualListCollection, IRenderVirtualListItem, IRenderVirtualListCollection, };
|
|
4
|
+
export type { IVirtualListItem, IVirtualListStickyMap, IVirtualListCollection, };
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { IRect } from "../types";
|
|
2
2
|
import { Id } from "../types/id";
|
|
3
3
|
import { IVirtualListItem } from "./item.model";
|
|
4
|
+
import { IRenderVirtualListItemConfig } from "./render-item-config.model";
|
|
4
5
|
export interface IRenderVirtualListItem {
|
|
5
6
|
id: Id;
|
|
6
7
|
measures: IRect;
|
|
7
8
|
data: Omit<IVirtualListItem, 'id'>;
|
|
9
|
+
config: IRenderVirtualListItemConfig;
|
|
8
10
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { AfterViewInit, ComponentRef, ElementRef, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
|
|
2
2
|
import { NgVirtualListItemComponent } from './components/ng-virtual-list-item.component';
|
|
3
|
-
import {
|
|
3
|
+
import { IVirtualListCollection, IVirtualListStickyMap } from './models';
|
|
4
|
+
import { IRenderVirtualListCollection } from './models/render-collection.model';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
export declare class NgVirtualListComponent implements AfterViewInit, OnDestroy {
|
|
6
7
|
protected listContainerRef: ViewContainerRef | undefined;
|
|
@@ -8,6 +9,7 @@ export declare class NgVirtualListComponent implements AfterViewInit, OnDestroy
|
|
|
8
9
|
protected list: import("@angular/core").Signal<ElementRef<HTMLUListElement> | undefined>;
|
|
9
10
|
items: import("@angular/core").InputSignal<IVirtualListCollection>;
|
|
10
11
|
itemRenderer: import("@angular/core").InputSignal<TemplateRef<any>>;
|
|
12
|
+
stickyMap: import("@angular/core").InputSignal<IVirtualListStickyMap>;
|
|
11
13
|
itemHeight: import("@angular/core").InputSignal<number>;
|
|
12
14
|
itemsOffset: import("@angular/core").InputSignal<number>;
|
|
13
15
|
protected _displayItems: import("@angular/core").WritableSignal<IRenderVirtualListCollection | null>;
|
|
@@ -24,5 +26,5 @@ export declare class NgVirtualListComponent implements AfterViewInit, OnDestroy
|
|
|
24
26
|
ngAfterViewInit(): void;
|
|
25
27
|
ngOnDestroy(): void;
|
|
26
28
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgVirtualListComponent, never>;
|
|
27
|
-
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; }; "itemsOffset": { "alias": "itemsOffset"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
29
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgVirtualListComponent, "ng-virtual-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemRenderer": { "alias": "itemRenderer"; "required": true; "isSignal": true; }; "stickyMap": { "alias": "stickyMap"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "itemsOffset": { "alias": "itemsOffset"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
28
30
|
}
|
package/package.json
CHANGED
package/public-api.d.ts
CHANGED