ng-virtual-list 14.7.12 → 14.7.13
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 +9 -8
- package/esm2020/lib/const/index.mjs +3 -2
- package/esm2020/lib/enums/collection-mode.mjs +2 -0
- package/esm2020/lib/enums/collection-modes.mjs +18 -0
- package/esm2020/lib/enums/index.mjs +3 -2
- package/esm2020/lib/ng-virtual-list.component.mjs +63 -14
- package/esm2020/lib/utils/isCollectionMode.mjs +15 -0
- package/esm2020/lib/utils/trackBox.mjs +45 -16
- package/fesm2015/ng-virtual-list.mjs +142 -31
- package/fesm2015/ng-virtual-list.mjs.map +1 -1
- package/fesm2020/ng-virtual-list.mjs +136 -26
- package/fesm2020/ng-virtual-list.mjs.map +1 -1
- package/lib/const/index.d.ts +2 -1
- package/lib/enums/collection-mode.d.ts +8 -0
- package/lib/enums/collection-modes.d.ts +16 -0
- package/lib/enums/index.d.ts +4 -2
- package/lib/ng-virtual-list.component.d.ts +14 -2
- package/lib/utils/isCollectionMode.d.ts +8 -0
- package/lib/utils/trackBox.d.ts +17 -9
- package/package.json +1 -1
|
@@ -1,11 +1,29 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, ViewContainerRef, ElementRef, ViewEncapsulation, ViewChild, Output, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
3
3
|
import { takeUntil as takeUntil$1, tap as tap$1, map } from 'rxjs/operators';
|
|
4
|
-
import { Subject, takeUntil, tap, BehaviorSubject as BehaviorSubject$1, fromEvent, combineLatest, filter, distinctUntilChanged,
|
|
4
|
+
import { Subject, takeUntil, tap, BehaviorSubject as BehaviorSubject$1, fromEvent, combineLatest, filter, distinctUntilChanged, map as map$1, debounceTime, switchMap, of } from 'rxjs';
|
|
5
5
|
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
|
|
6
6
|
import * as i2 from '@angular/common';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Action modes for collection elements.
|
|
11
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/enums/collection-modes.ts
|
|
12
|
+
* @author Evgenii Grebennikov
|
|
13
|
+
* @email djonnyx@gmail.com
|
|
14
|
+
*/
|
|
15
|
+
var CollectionModes;
|
|
16
|
+
(function (CollectionModes) {
|
|
17
|
+
/**
|
|
18
|
+
* When adding elements to the beginning of the collection, the scroll remains at the current position.
|
|
19
|
+
*/
|
|
20
|
+
CollectionModes["NORMAL"] = "normal";
|
|
21
|
+
/**
|
|
22
|
+
* When adding elements to the beginning of the collection, the scroll is shifted by the sum of the sizes of the new elements.
|
|
23
|
+
*/
|
|
24
|
+
CollectionModes["LAZY"] = "lazy";
|
|
25
|
+
})(CollectionModes || (CollectionModes = {}));
|
|
26
|
+
|
|
9
27
|
/**
|
|
10
28
|
* Axis of the arrangement of virtual list elements.
|
|
11
29
|
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/enums/directions.ts
|
|
@@ -75,6 +93,7 @@ const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
|
|
|
75
93
|
const DEFAULT_DYNAMIC_SIZE = false;
|
|
76
94
|
const TRACK_BY_PROPERTY_NAME = 'id';
|
|
77
95
|
const DEFAULT_DIRECTION = Directions.VERTICAL;
|
|
96
|
+
const DEFAULT_COLLECTION_MODE = CollectionModes.NORMAL;
|
|
78
97
|
const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
|
|
79
98
|
const MAX_SCROLL_TO_ITERATIONS = 5;
|
|
80
99
|
const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
|
|
@@ -1261,7 +1280,11 @@ const bufferInterpolation = (currentBufferValue, array, value, extra) => {
|
|
|
1261
1280
|
return Math.ceil(buffer / l);
|
|
1262
1281
|
};
|
|
1263
1282
|
|
|
1264
|
-
|
|
1283
|
+
var TrackBoxEvents;
|
|
1284
|
+
(function (TrackBoxEvents) {
|
|
1285
|
+
TrackBoxEvents["CHANGE"] = "change";
|
|
1286
|
+
TrackBoxEvents["RESET"] = "reset";
|
|
1287
|
+
})(TrackBoxEvents || (TrackBoxEvents = {}));
|
|
1265
1288
|
var ItemDisplayMethods;
|
|
1266
1289
|
(function (ItemDisplayMethods) {
|
|
1267
1290
|
ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
|
|
@@ -1269,7 +1292,7 @@ var ItemDisplayMethods;
|
|
|
1269
1292
|
ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
|
|
1270
1293
|
ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
|
|
1271
1294
|
})(ItemDisplayMethods || (ItemDisplayMethods = {}));
|
|
1272
|
-
const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000;
|
|
1295
|
+
const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000, IS_NEW = 'isNew';
|
|
1273
1296
|
/**
|
|
1274
1297
|
* An object that performs tracking, calculations and caching.
|
|
1275
1298
|
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
|
|
@@ -1280,6 +1303,7 @@ class TrackBox extends CacheMap {
|
|
|
1280
1303
|
constructor(trackingPropertyName) {
|
|
1281
1304
|
super();
|
|
1282
1305
|
this._isSnappingMethodAdvanced = false;
|
|
1306
|
+
this._isLazy = false;
|
|
1283
1307
|
this._trackingPropertyName = TRACK_BY_PROPERTY_NAME;
|
|
1284
1308
|
this._deletedItemsMap = {};
|
|
1285
1309
|
this._crudDetected = false;
|
|
@@ -1293,7 +1317,7 @@ class TrackBox extends CacheMap {
|
|
|
1293
1317
|
this._defaultBufferSize = 0;
|
|
1294
1318
|
this._maxBufferSize = this._defaultBufferSize;
|
|
1295
1319
|
this._resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
|
|
1296
|
-
this.
|
|
1320
|
+
this.isReseted = true;
|
|
1297
1321
|
this._previousScrollSize = 0;
|
|
1298
1322
|
this._trackingPropertyName = trackingPropertyName;
|
|
1299
1323
|
this.initialize();
|
|
@@ -1322,6 +1346,12 @@ class TrackBox extends CacheMap {
|
|
|
1322
1346
|
}
|
|
1323
1347
|
this._isSnappingMethodAdvanced = v;
|
|
1324
1348
|
}
|
|
1349
|
+
set isLazy(v) {
|
|
1350
|
+
if (this._isLazy === v) {
|
|
1351
|
+
return;
|
|
1352
|
+
}
|
|
1353
|
+
this._isLazy = v;
|
|
1354
|
+
}
|
|
1325
1355
|
/**
|
|
1326
1356
|
* Set the trackBy property
|
|
1327
1357
|
*/
|
|
@@ -1345,7 +1375,7 @@ class TrackBox extends CacheMap {
|
|
|
1345
1375
|
get crudDetected() { return this._crudDetected; }
|
|
1346
1376
|
fireChangeIfNeed() {
|
|
1347
1377
|
if (this.changesDetected()) {
|
|
1348
|
-
this.dispatch(
|
|
1378
|
+
this.dispatch(TrackBoxEvents.CHANGE, this._version);
|
|
1349
1379
|
}
|
|
1350
1380
|
}
|
|
1351
1381
|
get scrollDelta() { return this._scrollDelta; }
|
|
@@ -1362,11 +1392,19 @@ class TrackBox extends CacheMap {
|
|
|
1362
1392
|
console.warn('Attention! The collection must be immutable.');
|
|
1363
1393
|
return;
|
|
1364
1394
|
}
|
|
1365
|
-
|
|
1366
|
-
|
|
1395
|
+
let reseted = this.isReseted;
|
|
1396
|
+
if (reseted) {
|
|
1397
|
+
if (!(!this._previousCollection || this._previousCollection.length === 0)) {
|
|
1398
|
+
reseted = false;
|
|
1399
|
+
}
|
|
1367
1400
|
}
|
|
1401
|
+
if (!reseted && (!currentCollection || currentCollection.length === 0)) {
|
|
1402
|
+
reseted = true;
|
|
1403
|
+
}
|
|
1404
|
+
this.isReseted = reseted;
|
|
1405
|
+
this.dispatch(TrackBoxEvents.RESET, reseted);
|
|
1368
1406
|
this.updateCache(this._previousCollection, currentCollection, itemSize);
|
|
1369
|
-
this._previousCollection = currentCollection;
|
|
1407
|
+
this._previousCollection = [...(currentCollection || [])];
|
|
1370
1408
|
}
|
|
1371
1409
|
/**
|
|
1372
1410
|
* Update the cache of items from the list
|
|
@@ -1588,9 +1626,10 @@ class TrackBox extends CacheMap {
|
|
|
1588
1626
|
leftItemsOffset = rightItemsOffset = bufferSize;
|
|
1589
1627
|
}
|
|
1590
1628
|
let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, leftSizeOfAddedItems = 0, leftSizeOfUpdatedItems = 0, leftSizeOfDeletedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex, isFromItemIdFound = false, deltaFromStartCreation = 0;
|
|
1629
|
+
let isNew = !this.isReseted && (scrollSize === 0);
|
|
1591
1630
|
// If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
|
|
1592
1631
|
if (dynamicSize) {
|
|
1593
|
-
let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0
|
|
1632
|
+
let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
|
|
1594
1633
|
for (let i = 0, l = collection.length; i < l; i++) {
|
|
1595
1634
|
const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
|
|
1596
1635
|
let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
|
|
@@ -1598,8 +1637,8 @@ class TrackBox extends CacheMap {
|
|
|
1598
1637
|
const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
|
|
1599
1638
|
componentSize = bounds[sizeProperty];
|
|
1600
1639
|
itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
|
|
1601
|
-
const isItemNew = bounds
|
|
1602
|
-
if (
|
|
1640
|
+
const isItemNew = bounds?.[IS_NEW] ?? this._isLazy;
|
|
1641
|
+
if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
|
|
1603
1642
|
isNew = false;
|
|
1604
1643
|
}
|
|
1605
1644
|
switch (itemDisplayMethod) {
|
|
@@ -1736,8 +1775,15 @@ class TrackBox extends CacheMap {
|
|
|
1736
1775
|
if (map.has(id)) {
|
|
1737
1776
|
const bounds = map.get(id);
|
|
1738
1777
|
itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
|
|
1778
|
+
const isItemNew = bounds?.[IS_NEW] ?? this._isLazy;
|
|
1779
|
+
if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
|
|
1780
|
+
isNew = false;
|
|
1781
|
+
}
|
|
1739
1782
|
if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
|
|
1740
|
-
|
|
1783
|
+
if (isNew) {
|
|
1784
|
+
deltaFromStartCreation += componentSize;
|
|
1785
|
+
}
|
|
1786
|
+
map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED, isNew });
|
|
1741
1787
|
}
|
|
1742
1788
|
}
|
|
1743
1789
|
if (deletedItemsMap.hasOwnProperty(i)) {
|
|
@@ -1749,7 +1795,9 @@ class TrackBox extends CacheMap {
|
|
|
1749
1795
|
if (y < scrollSize - componentSize) {
|
|
1750
1796
|
switch (itemDisplayMethod) {
|
|
1751
1797
|
case ItemDisplayMethods.CREATE: {
|
|
1752
|
-
|
|
1798
|
+
if (!isNew) {
|
|
1799
|
+
leftSizeOfUpdatedItems += componentSize;
|
|
1800
|
+
}
|
|
1753
1801
|
break;
|
|
1754
1802
|
}
|
|
1755
1803
|
case ItemDisplayMethods.UPDATE: {
|
|
@@ -1845,7 +1893,7 @@ class TrackBox extends CacheMap {
|
|
|
1845
1893
|
height: isVertical ? size : normalizedItemHeight,
|
|
1846
1894
|
delta: 0,
|
|
1847
1895
|
}, config = {
|
|
1848
|
-
new: cache
|
|
1896
|
+
new: cache?.[IS_NEW] === true,
|
|
1849
1897
|
odd: isOdd,
|
|
1850
1898
|
even: !isOdd,
|
|
1851
1899
|
isVertical,
|
|
@@ -1887,7 +1935,7 @@ class TrackBox extends CacheMap {
|
|
|
1887
1935
|
height: h,
|
|
1888
1936
|
delta: 0,
|
|
1889
1937
|
}, config = {
|
|
1890
|
-
new: cache
|
|
1938
|
+
new: cache?.[IS_NEW] === true,
|
|
1891
1939
|
odd: isOdd,
|
|
1892
1940
|
even: !isOdd,
|
|
1893
1941
|
isVertical,
|
|
@@ -1928,7 +1976,7 @@ class TrackBox extends CacheMap {
|
|
|
1928
1976
|
height: isVertical ? size : normalizedItemHeight,
|
|
1929
1977
|
delta: 0,
|
|
1930
1978
|
}, config = {
|
|
1931
|
-
new: cache
|
|
1979
|
+
new: cache?.[IS_NEW] === true,
|
|
1932
1980
|
odd: isOdd,
|
|
1933
1981
|
even: !isOdd,
|
|
1934
1982
|
isVertical,
|
|
@@ -2140,6 +2188,20 @@ const copyValueAsReadonly = (source) => {
|
|
|
2140
2188
|
return source;
|
|
2141
2189
|
};
|
|
2142
2190
|
|
|
2191
|
+
const NORMAL_ALIASES = [CollectionModes.NORMAL, 'normal'], LAZY_ALIASES = [CollectionModes.LAZY, 'lazy'];
|
|
2192
|
+
/**
|
|
2193
|
+
* Determines the axis membership of a virtual list
|
|
2194
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/isCollectionMode.ts
|
|
2195
|
+
* @author Evgenii Grebennikov
|
|
2196
|
+
* @email djonnyx@gmail.com
|
|
2197
|
+
*/
|
|
2198
|
+
const isCollectionMode = (src, expected) => {
|
|
2199
|
+
if (LAZY_ALIASES.includes(expected)) {
|
|
2200
|
+
return LAZY_ALIASES.includes(src);
|
|
2201
|
+
}
|
|
2202
|
+
return NORMAL_ALIASES.includes(src);
|
|
2203
|
+
};
|
|
2204
|
+
|
|
2143
2205
|
const ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox';
|
|
2144
2206
|
const validateScrollIteration = (value) => {
|
|
2145
2207
|
return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
|
|
@@ -2381,6 +2443,16 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
2381
2443
|
}
|
|
2382
2444
|
return v;
|
|
2383
2445
|
};
|
|
2446
|
+
this._$collectionMode = new BehaviorSubject$1(DEFAULT_COLLECTION_MODE);
|
|
2447
|
+
this.$collectionMode = this._$collectionMode.asObservable();
|
|
2448
|
+
this._collectionModeTransform = (v) => {
|
|
2449
|
+
const valid = validateString(v) && (v === 'normal' || v === 'lazy');
|
|
2450
|
+
if (!valid) {
|
|
2451
|
+
console.error('The "direction" parameter must have the value `normal` or `lazy`.');
|
|
2452
|
+
return DEFAULT_COLLECTION_MODE;
|
|
2453
|
+
}
|
|
2454
|
+
return v;
|
|
2455
|
+
};
|
|
2384
2456
|
this._$bufferSize = new BehaviorSubject$1(DEFAULT_BUFFER_SIZE);
|
|
2385
2457
|
this.$bufferSize = this._$bufferSize.asObservable();
|
|
2386
2458
|
this._bufferSizeTransform = (v) => {
|
|
@@ -2437,6 +2509,7 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
2437
2509
|
return v;
|
|
2438
2510
|
};
|
|
2439
2511
|
this._isVertical = this.getIsVertical();
|
|
2512
|
+
this._isLazy = this.getIsLazy();
|
|
2440
2513
|
this._$focusedElement = new BehaviorSubject$1(undefined);
|
|
2441
2514
|
this.$focusedElement = this._$focusedElement.asObservable();
|
|
2442
2515
|
this._isSnappingMethodAdvanced = this.getIsSnappingMethodAdvanced();
|
|
@@ -2532,6 +2605,20 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
2532
2605
|
this._$cacheVersion.next(v);
|
|
2533
2606
|
};
|
|
2534
2607
|
this._$cacheVersion = new BehaviorSubject$1(-1);
|
|
2608
|
+
this._isResetedReachStart = true;
|
|
2609
|
+
this._onTrackBoxResetHandler = (v) => {
|
|
2610
|
+
if (v) {
|
|
2611
|
+
this._isResetedReachStart = true;
|
|
2612
|
+
const container = this._container?.nativeElement;
|
|
2613
|
+
if (container) {
|
|
2614
|
+
const params = {
|
|
2615
|
+
[this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0,
|
|
2616
|
+
behavior: BEHAVIOR_INSTANT,
|
|
2617
|
+
};
|
|
2618
|
+
container.scrollTo(params);
|
|
2619
|
+
}
|
|
2620
|
+
}
|
|
2621
|
+
};
|
|
2535
2622
|
this._componentsResizeObserver = new ResizeObserver(() => {
|
|
2536
2623
|
this._trackBox.changes();
|
|
2537
2624
|
});
|
|
@@ -2574,12 +2661,13 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
2574
2661
|
})).subscribe();
|
|
2575
2662
|
this._trackBox.displayComponents = this._displayComponents;
|
|
2576
2663
|
const $trackBy = this.$trackBy, $selectByClick = this.$selectByClick, $collapseByClick = this.$collapseByClick, $isScrollStart = this._$isScrollStart.asObservable(), $isScrollFinished = this._$isScrollFinished.asObservable();
|
|
2577
|
-
$isScrollStart.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(),
|
|
2578
|
-
if (v) {
|
|
2664
|
+
$isScrollStart.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), tap(v => {
|
|
2665
|
+
if (v && !this._isResetedReachStart) {
|
|
2579
2666
|
this.onScrollReachStart.emit();
|
|
2580
2667
|
}
|
|
2668
|
+
this._isResetedReachStart = false;
|
|
2581
2669
|
})).subscribe();
|
|
2582
|
-
$isScrollFinished.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(),
|
|
2670
|
+
$isScrollFinished.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), tap(v => {
|
|
2583
2671
|
if (v) {
|
|
2584
2672
|
this.onScrollReachEnd.emit();
|
|
2585
2673
|
}
|
|
@@ -2593,7 +2681,10 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
2593
2681
|
$trackBy.pipe(takeUntil(this._$unsubscribe), tap(v => {
|
|
2594
2682
|
this._trackBox.trackingPropertyName = v;
|
|
2595
2683
|
})).subscribe();
|
|
2596
|
-
const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $itemConfigMap = this.$itemConfigMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(map$1(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(map$1(v => Array.isArray(v) ? v : [])), $actualItems = this._$actualItems.asObservable(), $cacheVersion = this.$cacheVersion;
|
|
2684
|
+
const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $itemConfigMap = this.$itemConfigMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $isLazy = this.$collectionMode.pipe(map$1(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(map$1(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(map$1(v => Array.isArray(v) ? v : [])), $actualItems = this._$actualItems.asObservable(), $cacheVersion = this.$cacheVersion;
|
|
2685
|
+
$isLazy.pipe(takeUntil(this._$unsubscribe), tap(v => {
|
|
2686
|
+
this._trackBox.isLazy = v;
|
|
2687
|
+
})).subscribe();
|
|
2597
2688
|
combineLatest([$items, $itemSize, this.$initialized]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([, , init]) => !!init), map$1(([items, itemSize]) => ({ items, itemSize })), tap(({ items, itemSize }) => {
|
|
2598
2689
|
this._trackBox.resetCollection(items, itemSize);
|
|
2599
2690
|
})).subscribe();
|
|
@@ -2907,6 +2998,19 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
2907
2998
|
}
|
|
2908
2999
|
;
|
|
2909
3000
|
get direction() { return this._$direction.getValue(); }
|
|
3001
|
+
/**
|
|
3002
|
+
* Determines the action modes for collection elements. Default value is "normal".
|
|
3003
|
+
*/
|
|
3004
|
+
set collectionMode(v) {
|
|
3005
|
+
if (this._$collectionMode.getValue() === v) {
|
|
3006
|
+
return;
|
|
3007
|
+
}
|
|
3008
|
+
const transformedValue = this._collectionModeTransform(v);
|
|
3009
|
+
this._$collectionMode.next(transformedValue);
|
|
3010
|
+
this._cdr.markForCheck();
|
|
3011
|
+
}
|
|
3012
|
+
;
|
|
3013
|
+
get collectionMode() { return this._$collectionMode.getValue(); }
|
|
2910
3014
|
/**
|
|
2911
3015
|
* Number of elements outside the scope of visibility. Default value is 2.
|
|
2912
3016
|
*/
|
|
@@ -2990,13 +3094,13 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
2990
3094
|
}
|
|
2991
3095
|
listenCacheChangesIfNeed(value) {
|
|
2992
3096
|
if (value) {
|
|
2993
|
-
if (!this._trackBox.hasEventListener(
|
|
2994
|
-
this._trackBox.addEventListener(
|
|
3097
|
+
if (!this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
|
|
3098
|
+
this._trackBox.addEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
|
|
2995
3099
|
}
|
|
2996
3100
|
}
|
|
2997
3101
|
else {
|
|
2998
|
-
if (this._trackBox.hasEventListener(
|
|
2999
|
-
this._trackBox.removeEventListener(
|
|
3102
|
+
if (this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
|
|
3103
|
+
this._trackBox.removeEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
|
|
3000
3104
|
}
|
|
3001
3105
|
}
|
|
3002
3106
|
}
|
|
@@ -3020,6 +3124,10 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
3020
3124
|
const dir = d || this.direction;
|
|
3021
3125
|
return isDirection(dir, Directions.VERTICAL);
|
|
3022
3126
|
}
|
|
3127
|
+
getIsLazy(m) {
|
|
3128
|
+
const mode = m || this.collectionMode;
|
|
3129
|
+
return isCollectionMode(mode, CollectionModes.LAZY);
|
|
3130
|
+
}
|
|
3023
3131
|
createDisplayComponentsIfNeed(displayItems) {
|
|
3024
3132
|
if (!displayItems || !this._listContainerRef) {
|
|
3025
3133
|
this._trackBox.setDisplayObjectIndexMapById({});
|
|
@@ -3222,7 +3330,7 @@ class NgVirtualListComponent extends DisposableComponent {
|
|
|
3222
3330
|
}
|
|
3223
3331
|
NgVirtualListComponent.__nextId = 0;
|
|
3224
3332
|
NgVirtualListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3225
|
-
NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting", trackBy: "trackBy" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n class=\"ngvl__list\">\r\n <ng-container #renderersContainer></ng-container>\r\n </div>\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
3333
|
+
NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", collectionMode: "collectionMode", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting", trackBy: "trackBy" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n class=\"ngvl__list\">\r\n <ng-container #renderersContainer></ng-container>\r\n </div>\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
3226
3334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, decorators: [{
|
|
3227
3335
|
type: Component,
|
|
3228
3336
|
args: [{ selector: 'ng-virtual-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], host: {
|
|
@@ -3283,6 +3391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3283
3391
|
type: Input
|
|
3284
3392
|
}], direction: [{
|
|
3285
3393
|
type: Input
|
|
3394
|
+
}], collectionMode: [{
|
|
3395
|
+
type: Input
|
|
3286
3396
|
}], bufferSize: [{
|
|
3287
3397
|
type: Input
|
|
3288
3398
|
}], maxBufferSize: [{
|
|
@@ -3318,5 +3428,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3318
3428
|
* Generated bundle index. Do not edit.
|
|
3319
3429
|
*/
|
|
3320
3430
|
|
|
3321
|
-
export { Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
|
|
3431
|
+
export { CollectionModes, Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
|
|
3322
3432
|
//# sourceMappingURL=ng-virtual-list.mjs.map
|