ng-virtual-list 16.3.2 → 16.4.1
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 +11 -10
- package/esm2022/lib/const/index.mjs +3 -2
- package/esm2022/lib/ng-virtual-list.component.mjs +48 -14
- package/esm2022/lib/utils/buffer-interpolation.mjs +27 -0
- package/esm2022/lib/utils/trackBox.mjs +49 -10
- package/fesm2022/ng-virtual-list.mjs +122 -22
- package/fesm2022/ng-virtual-list.mjs.map +1 -1
- package/lib/const/index.d.ts +2 -1
- package/lib/ng-virtual-list.component.d.ts +19 -5
- package/lib/utils/buffer-interpolation.d.ts +5 -0
- package/lib/utils/trackBox.d.ts +16 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ Animation of elements is supported.
|
|
|
5
5
|
|
|
6
6
|
<img width="1033" height="171" alt="logo" src="https://github.com/user-attachments/assets/b559cfde-405a-4361-b71b-6715478d997d" />
|
|
7
7
|
|
|
8
|
-
Angular version
|
|
8
|
+
Angular version 14.X.X.
|
|
9
9
|
|
|
10
10
|
[Live Demo](https://ng-virtual-list-chat-demo.eugene-grebennikov.pro/)
|
|
11
11
|
|
|
@@ -25,7 +25,7 @@ npm i ng-virtual-list
|
|
|
25
25
|
|
|
26
26
|
Template:
|
|
27
27
|
```html
|
|
28
|
-
<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [
|
|
28
|
+
<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [bufferSize]="50"
|
|
29
29
|
[itemRenderer]="horizontalItemRenderer" [itemSize]="64"></ng-virtual-list>
|
|
30
30
|
|
|
31
31
|
<ng-template #horizontalItemRenderer let-data="data">
|
|
@@ -62,7 +62,7 @@ export class AppComponent {
|
|
|
62
62
|
Template:
|
|
63
63
|
```html
|
|
64
64
|
<ng-virtual-list class="list" direction="horizontal" [items]="horizontalGroupItems" [itemRenderer]="horizontalGroupItemRenderer"
|
|
65
|
-
[
|
|
65
|
+
[bufferSize]="50" [stickyMap]="horizontalGroupItemsStickyMap" [itemSize]="54" [snap]="true"></ng-virtual-list>
|
|
66
66
|
|
|
67
67
|
<ng-template #horizontalGroupItemRenderer let-data="data">
|
|
68
68
|
<ng-container *ngIf="data" [ngSwitch]="data.type">
|
|
@@ -113,7 +113,7 @@ export class AppComponent {
|
|
|
113
113
|
|
|
114
114
|
Template:
|
|
115
115
|
```html
|
|
116
|
-
<ng-virtual-list class="list simple" [items]="items" [
|
|
116
|
+
<ng-virtual-list class="list simple" [items]="items" [bufferSize]="50" [itemRenderer]="itemRenderer"
|
|
117
117
|
[itemSize]="40"></ng-virtual-list>
|
|
118
118
|
|
|
119
119
|
<ng-template #itemRenderer let-data="data">
|
|
@@ -152,7 +152,7 @@ export class AppComponent {
|
|
|
152
152
|
|
|
153
153
|
Template:
|
|
154
154
|
```html
|
|
155
|
-
<ng-virtual-list class="list simple" [items]="groupItems" [
|
|
155
|
+
<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="50" [itemRenderer]="groupItemRenderer"
|
|
156
156
|
[stickyMap]="groupItemsStickyMap" [itemSize]="40" [snap]="false"></ng-virtual-list>
|
|
157
157
|
|
|
158
158
|
<ng-template #groupItemRenderer let-data="data">
|
|
@@ -173,7 +173,7 @@ Template:
|
|
|
173
173
|
|
|
174
174
|
Template (with snapping):
|
|
175
175
|
```html
|
|
176
|
-
<ng-virtual-list class="list simple" [items]="groupItems" [
|
|
176
|
+
<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="50" [itemRenderer]="groupItemRenderer"
|
|
177
177
|
[stickyMap]="groupItemsStickyMap" [itemSize]="40" [snap]="true"></ng-virtual-list>
|
|
178
178
|
|
|
179
179
|
<ng-template #groupItemRenderer let-data="data">
|
|
@@ -232,7 +232,7 @@ Template
|
|
|
232
232
|
<button class="scroll-to__button" (click)="onButtonScrollToIdClickHandler($event)">Scroll</button>
|
|
233
233
|
</div>
|
|
234
234
|
|
|
235
|
-
<ng-virtual-list #virtualList class="list" [items]="items" [itemRenderer]="itemRenderer" [
|
|
235
|
+
<ng-virtual-list #virtualList class="list" [items]="items" [itemRenderer]="itemRenderer" [bufferSize]="50"
|
|
236
236
|
[itemSize]="40"></ng-virtual-list>
|
|
237
237
|
|
|
238
238
|
<ng-template #itemRenderer let-data="data">
|
|
@@ -284,7 +284,7 @@ Virtual list with height-adjustable elements.
|
|
|
284
284
|
|
|
285
285
|
Template
|
|
286
286
|
```html
|
|
287
|
-
<ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer" [
|
|
287
|
+
<ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer" [bufferSize]="10"
|
|
288
288
|
[stickyMap]="groupDynamicItemsStickyMap" [dynamicSize]="true" [snap]="true"></ng-virtual-list>
|
|
289
289
|
|
|
290
290
|
<ng-template #groupItemRenderer let-data="data">
|
|
@@ -421,9 +421,10 @@ Inputs
|
|
|
421
421
|
| Property | Type | Description |
|
|
422
422
|
|---|---|---|
|
|
423
423
|
| id | number | Readonly. Returns the unique identifier of the component. |
|
|
424
|
-
| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items.
|
|
424
|
+
| items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items. The collection of elements must be immutable. |
|
|
425
425
|
| itemSize | number? = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. Ignored if the dynamicSize property is true. |
|
|
426
|
-
|
|
|
426
|
+
| bufferSize | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. |
|
|
427
|
+
| maxBufferSize | number? = 100 | Maximum number of elements outside the scope of visibility. Default value is 100. If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled. The greater the scroll size, the more elements are allocated for rendering. |
|
|
427
428
|
| itemRenderer | TemplateRef | Rendering element template. |
|
|
428
429
|
| stickyMap | [IVirtualListStickyMap?](https://github.com/DjonnyX/ng-virtual-list/blob/16.x/projects/ng-virtual-list/src/lib/models/sticky-map.model.ts) | 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. 1 - position start, 2 - position end. |
|
|
429
430
|
| snap | boolean? = false | Determines whether elements will snap. Default value is "false". |
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { SnappingMethods } from "../enums";
|
|
2
2
|
import { Directions } from "../enums/directions";
|
|
3
3
|
export const DEFAULT_ITEM_SIZE = 24;
|
|
4
|
-
export const
|
|
4
|
+
export const DEFAULT_BUFFER_SIZE = 2;
|
|
5
|
+
export const DEFAULT_MAX_BUFFER_SIZE = 100;
|
|
5
6
|
export const DEFAULT_LIST_SIZE = 400;
|
|
6
7
|
export const DEFAULT_SNAP = false;
|
|
7
8
|
export const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
|
|
@@ -40,4 +41,4 @@ export const SCROLL = 'scroll';
|
|
|
40
41
|
export const SCROLL_END = 'scrollend';
|
|
41
42
|
export const CLASS_LIST_VERTICAL = 'vertical';
|
|
42
43
|
export const CLASS_LIST_HORIZONTAL = 'horizontal';
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy12aXJ0dWFsLWxpc3Qvc3JjL2xpYi9jb25zdC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUVqRCxNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxFQUFFLENBQUM7QUFFcEMsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUcsQ0FBQyxDQUFDO0FBRXJDLE1BQU0sQ0FBQyxNQUFNLHVCQUF1QixHQUFHLEdBQUcsQ0FBQztBQUUzQyxNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxHQUFHLENBQUM7QUFFckMsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLEtBQUssQ0FBQztBQUVsQyxNQUFNLENBQUMsTUFBTSxtQ0FBbUMsR0FBRyxLQUFLLENBQUM7QUFFekQsTUFBTSxDQUFDLE1BQU0sb0JBQW9CLEdBQUcsS0FBSyxDQUFDO0FBRTFDLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLElBQUksQ0FBQztBQUUzQyxNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxVQUFVLENBQUMsUUFBUSxDQUFDO0FBRXJELE1BQU0sQ0FBQyxNQUFNLHVDQUF1QyxHQUFHLENBQUMsQ0FBQztBQUV6RCxNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRyxDQUFDLENBQUM7QUFFMUMsTUFBTSxDQUFDLE1BQU0sdUJBQXVCLEdBQUcsZUFBZSxDQUFDLE1BQU0sQ0FBQztBQUU5RCxVQUFVO0FBRVYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLE1BQU0sQ0FBQztBQUVwQyxNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxTQUFTLENBQUM7QUFFMUMsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLFFBQVEsQ0FBQztBQUV4QyxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsT0FBTyxDQUFDO0FBRXJDLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxNQUFNLENBQUM7QUFFbkMsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLEdBQUcsQ0FBQztBQUU3QixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDO0FBRWpDLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLFNBQVMsQ0FBQztBQUU1QyxNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxRQUFRLENBQUM7QUFFMUMsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsTUFBTSxDQUFDO0FBRXZDLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQUM7QUFFaEMsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsVUFBVSxDQUFDO0FBRTVDLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxRQUFRLENBQUM7QUFFeEMsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLGFBQWEsQ0FBQztBQUUxQyxNQUFNLENBQUMsTUFBTSxrQkFBa0IsR0FBRyxHQUFHLFlBQVksU0FBUyxDQUFDO0FBRTNELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUM7QUFFbEMsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLEdBQUcsQ0FBQztBQUVsQyxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsS0FBSyxDQUFDO0FBRW5DLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxNQUFNLENBQUM7QUFFckMsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLEdBQUcsQ0FBQztBQUUvQixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsR0FBRyxDQUFDO0FBRS9CLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxPQUFPLENBQUM7QUFFdkMsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsUUFBUSxDQUFDO0FBRXpDLE1BQU0sQ0FBQyxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUM7QUFFdkIsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQztBQUUvQixNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsV0FBVyxDQUFDO0FBRXRDLE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLFVBQVUsQ0FBQztBQUU5QyxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBTbmFwcGluZ01ldGhvZHMgfSBmcm9tIFwiLi4vZW51bXNcIjtcclxuaW1wb3J0IHsgRGlyZWN0aW9ucyB9IGZyb20gXCIuLi9lbnVtcy9kaXJlY3Rpb25zXCI7XHJcblxyXG5leHBvcnQgY29uc3QgREVGQVVMVF9JVEVNX1NJWkUgPSAyNDtcclxuXHJcbmV4cG9ydCBjb25zdCBERUZBVUxUX0JVRkZFUl9TSVpFID0gMjtcclxuXHJcbmV4cG9ydCBjb25zdCBERUZBVUxUX01BWF9CVUZGRVJfU0laRSA9IDEwMDtcclxuXHJcbmV4cG9ydCBjb25zdCBERUZBVUxUX0xJU1RfU0laRSA9IDQwMDtcclxuXHJcbmV4cG9ydCBjb25zdCBERUZBVUxUX1NOQVAgPSBmYWxzZTtcclxuXHJcbmV4cG9ydCBjb25zdCBERUZBVUxUX0VOQUJMRURfQlVGRkVSX09QVElNSVpBVElPTiA9IGZhbHNlO1xyXG5cclxuZXhwb3J0IGNvbnN0IERFRkFVTFRfRFlOQU1JQ19TSVpFID0gZmFsc2U7XHJcblxyXG5leHBvcnQgY29uc3QgVFJBQ0tfQllfUFJPUEVSVFlfTkFNRSA9ICdpZCc7XHJcblxyXG5leHBvcnQgY29uc3QgREVGQVVMVF9ESVJFQ1RJT04gPSBEaXJlY3Rpb25zLlZFUlRJQ0FMO1xyXG5cclxuZXhwb3J0IGNvbnN0IERJU1BMQVlfT0JKRUNUU19MRU5HVEhfTUVTVVJFTUVOVF9FUlJPUiA9IDE7XHJcblxyXG5leHBvcnQgY29uc3QgTUFYX1NDUk9MTF9UT19JVEVSQVRJT05TID0gNTtcclxuXHJcbmV4cG9ydCBjb25zdCBERUZBVUxUX1NOQVBQSU5HX01FVEhPRCA9IFNuYXBwaW5nTWV0aG9kcy5OT1JNQUw7XHJcblxyXG4vLyBwcmVzZXRzXHJcblxyXG5leHBvcnQgY29uc3QgQkVIQVZJT1JfQVVUTyA9ICdhdXRvJztcclxuXHJcbmV4cG9ydCBjb25zdCBCRUhBVklPUl9JTlNUQU5UID0gJ2luc3RhbnQnO1xyXG5cclxuZXhwb3J0IGNvbnN0IEJFSEFWSU9SX1NNT09USCA9ICdzbW9vdGgnO1xyXG5cclxuZXhwb3J0IGNvbnN0IERJU1BMQVlfQkxPQ0sgPSAnYmxvY2snO1xyXG5cclxuZXhwb3J0IGNvbnN0IERJU1BMQVlfTk9ORSA9ICdub25lJztcclxuXHJcbmV4cG9ydCBjb25zdCBPUEFDSVRZXzAgPSAnMCc7XHJcblxyXG5leHBvcnQgY29uc3QgT1BBQ0lUWV8xMDAgPSAnMTAwJztcclxuXHJcbmV4cG9ydCBjb25zdCBWSVNJQklMSVRZX1ZJU0lCTEUgPSAndmlzaWJsZSc7XHJcblxyXG5leHBvcnQgY29uc3QgVklTSUJJTElUWV9ISURERU4gPSAnaGlkZGVuJztcclxuXHJcbmV4cG9ydCBjb25zdCBTSVpFXzEwMF9QRVJTRU5UID0gJzEwMCUnO1xyXG5cclxuZXhwb3J0IGNvbnN0IFNJWkVfQVVUTyA9ICdhdXRvJztcclxuXHJcbmV4cG9ydCBjb25zdCBQT1NJVElPTl9BQlNPTFVURSA9ICdhYnNvbHV0ZSc7XHJcblxyXG5leHBvcnQgY29uc3QgUE9TSVRJT05fU1RJQ0tZID0gJ3N0aWNreSc7XHJcblxyXG5leHBvcnQgY29uc3QgVFJBTlNMQVRFXzNEID0gJ3RyYW5zbGF0ZTNkJztcclxuXHJcbmV4cG9ydCBjb25zdCBaRVJPU19UUkFOU0xBVEVfM0QgPSBgJHtUUkFOU0xBVEVfM0R9KDAsMCwwKWA7XHJcblxyXG5leHBvcnQgY29uc3QgSElEREVOX1pJTkRFWCA9ICctMSc7XHJcblxyXG5leHBvcnQgY29uc3QgREVGQVVMVF9aSU5ERVggPSAnMCc7XHJcblxyXG5leHBvcnQgY29uc3QgVE9QX1BST1BfTkFNRSA9ICd0b3AnO1xyXG5cclxuZXhwb3J0IGNvbnN0IExFRlRfUFJPUF9OQU1FID0gJ2xlZnQnO1xyXG5cclxuZXhwb3J0IGNvbnN0IFhfUFJPUF9OQU1FID0gJ3gnO1xyXG5cclxuZXhwb3J0IGNvbnN0IFlfUFJPUF9OQU1FID0gJ3knO1xyXG5cclxuZXhwb3J0IGNvbnN0IFdJRFRIX1BST1BfTkFNRSA9ICd3aWR0aCc7XHJcblxyXG5leHBvcnQgY29uc3QgSEVJR0hUX1BST1BfTkFNRSA9ICdoZWlnaHQnO1xyXG5cclxuZXhwb3J0IGNvbnN0IFBYID0gJ3B4JztcclxuXHJcbmV4cG9ydCBjb25zdCBTQ1JPTEwgPSAnc2Nyb2xsJztcclxuXHJcbmV4cG9ydCBjb25zdCBTQ1JPTExfRU5EID0gJ3Njcm9sbGVuZCc7XHJcblxyXG5leHBvcnQgY29uc3QgQ0xBU1NfTElTVF9WRVJUSUNBTCA9ICd2ZXJ0aWNhbCc7XHJcblxyXG5leHBvcnQgY29uc3QgQ0xBU1NfTElTVF9IT1JJWk9OVEFMID0gJ2hvcml6b250YWwnO1xyXG4iXX0=
|