ng-virtual-list 20.4.0 → 20.4.2

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.
Files changed (80) hide show
  1. package/README.md +2 -2
  2. package/fesm2022/ng-virtual-list.mjs +202 -193
  3. package/fesm2022/ng-virtual-list.mjs.map +1 -1
  4. package/index.d.ts +201 -451
  5. package/package.json +1 -1
  6. package/esm2022/lib/components/ng-virtual-list-item.component.mjs +0 -132
  7. package/esm2022/lib/const/index.mjs +0 -44
  8. package/esm2022/lib/enums/direction.mjs +0 -2
  9. package/esm2022/lib/enums/directions.mjs +0 -18
  10. package/esm2022/lib/enums/index.mjs +0 -4
  11. package/esm2022/lib/enums/snapping-method.mjs +0 -2
  12. package/esm2022/lib/enums/snapping-methods.mjs +0 -18
  13. package/esm2022/lib/models/base-virtual-list-item-component.mjs +0 -9
  14. package/esm2022/lib/models/collection.model.mjs +0 -3
  15. package/esm2022/lib/models/component.model.mjs +0 -2
  16. package/esm2022/lib/models/index.mjs +0 -3
  17. package/esm2022/lib/models/item.model.mjs +0 -2
  18. package/esm2022/lib/models/render-collection.model.mjs +0 -3
  19. package/esm2022/lib/models/render-item-config.model.mjs +0 -2
  20. package/esm2022/lib/models/render-item.model.mjs +0 -3
  21. package/esm2022/lib/models/scroll-direction.model.mjs +0 -2
  22. package/esm2022/lib/models/scroll-event.model.mjs +0 -2
  23. package/esm2022/lib/models/sticky-map.model.mjs +0 -2
  24. package/esm2022/lib/ng-virtual-list.component.mjs +0 -537
  25. package/esm2022/lib/ng-virtual-list.module.mjs +0 -20
  26. package/esm2022/lib/types/id.mjs +0 -2
  27. package/esm2022/lib/types/index.mjs +0 -2
  28. package/esm2022/lib/types/rect.mjs +0 -2
  29. package/esm2022/lib/types/size.mjs +0 -2
  30. package/esm2022/lib/utils/browser.mjs +0 -3
  31. package/esm2022/lib/utils/buffer-interpolation.mjs +0 -27
  32. package/esm2022/lib/utils/cacheMap.mjs +0 -168
  33. package/esm2022/lib/utils/debounce.mjs +0 -31
  34. package/esm2022/lib/utils/eventEmitter.mjs +0 -105
  35. package/esm2022/lib/utils/index.mjs +0 -9
  36. package/esm2022/lib/utils/isDirection.mjs +0 -15
  37. package/esm2022/lib/utils/scrollEvent.mjs +0 -42
  38. package/esm2022/lib/utils/snapping-method.mjs +0 -9
  39. package/esm2022/lib/utils/toggleClassName.mjs +0 -15
  40. package/esm2022/lib/utils/trackBox.mjs +0 -754
  41. package/esm2022/lib/utils/tracker.mjs +0 -135
  42. package/esm2022/ng-virtual-list.mjs +0 -5
  43. package/esm2022/public-api.mjs +0 -10
  44. package/lib/components/ng-virtual-list-item.component.d.ts +0 -36
  45. package/lib/const/index.d.ts +0 -42
  46. package/lib/enums/direction.d.ts +0 -8
  47. package/lib/enums/directions.d.ts +0 -16
  48. package/lib/enums/index.d.ts +0 -7
  49. package/lib/enums/snapping-method.d.ts +0 -10
  50. package/lib/enums/snapping-methods.d.ts +0 -16
  51. package/lib/models/base-virtual-list-item-component.d.ts +0 -25
  52. package/lib/models/collection.model.d.ts +0 -9
  53. package/lib/models/component.model.d.ts +0 -3
  54. package/lib/models/index.d.ts +0 -9
  55. package/lib/models/item.model.d.ts +0 -14
  56. package/lib/models/render-collection.model.d.ts +0 -9
  57. package/lib/models/render-item-config.model.d.ts +0 -41
  58. package/lib/models/render-item.model.d.ts +0 -33
  59. package/lib/models/scroll-direction.model.d.ts +0 -5
  60. package/lib/models/scroll-event.model.d.ts +0 -50
  61. package/lib/models/sticky-map.model.d.ts +0 -14
  62. package/lib/ng-virtual-list.component.d.ts +0 -171
  63. package/lib/ng-virtual-list.module.d.ts +0 -9
  64. package/lib/types/id.d.ts +0 -7
  65. package/lib/types/index.d.ts +0 -4
  66. package/lib/types/rect.d.ts +0 -17
  67. package/lib/types/size.d.ts +0 -16
  68. package/lib/utils/browser.d.ts +0 -2
  69. package/lib/utils/buffer-interpolation.d.ts +0 -5
  70. package/lib/utils/cacheMap.d.ts +0 -60
  71. package/lib/utils/debounce.d.ts +0 -16
  72. package/lib/utils/eventEmitter.d.ts +0 -40
  73. package/lib/utils/index.d.ts +0 -9
  74. package/lib/utils/isDirection.d.ts +0 -8
  75. package/lib/utils/scrollEvent.d.ts +0 -39
  76. package/lib/utils/snapping-method.d.ts +0 -3
  77. package/lib/utils/toggleClassName.d.ts +0 -7
  78. package/lib/utils/trackBox.d.ts +0 -204
  79. package/lib/utils/tracker.d.ts +0 -46
  80. package/public-api.d.ts +0 -6
package/README.md CHANGED
@@ -492,8 +492,8 @@ Methods
492
492
  | 19.x | 19.4.0 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.4.0](https://www.npmjs.com/package/ng-virtual-list/v/19.4.0) |
493
493
  | 18.x | 18.4.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.4.0](https://www.npmjs.com/package/ng-virtual-list/v/18.4.0) |
494
494
  | 17.x | 17.4.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.4.0](https://www.npmjs.com/package/ng-virtual-list/v/17.4.0) |
495
- | 16.x | 16.4.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.4.0](https://www.npmjs.com/package/ng-virtual-list/v/16.4.0) |
496
- | 15.x | 15.4.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.4.0](https://www.npmjs.com/package/ng-virtual-list/v/15.4.0) |
495
+ | 16.x | 16.4.1 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.4.1](https://www.npmjs.com/package/ng-virtual-list/v/16.4.1) |
496
+ | 15.x | 15.4.1 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.4.1](https://www.npmjs.com/package/ng-virtual-list/v/15.4.1) |
497
497
  | 14.x | 14.4.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.4.0](https://www.npmjs.com/package/ng-virtual-list/v/14.4.0) |
498
498
 
499
499
  <br/>
@@ -1,7 +1,7 @@
1
1
  import * as i1 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { signal, inject, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
4
+ import { signal, inject, ElementRef, viewChild, ChangeDetectionStrategy, Component, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
5
5
  import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
6
6
  import { tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
7
7
 
@@ -85,7 +85,7 @@ const CLASS_LIST_HORIZONTAL = 'horizontal';
85
85
 
86
86
  /**
87
87
  * Virtual List Item Interface
88
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/-basevirtual-list-item-component.ts
88
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/models/base-virtual-list-item-component.ts
89
89
  * @author Evgenii Grebennikov
90
90
  * @email djonnyx@gmail.com
91
91
  */
@@ -137,6 +137,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
137
137
  get element() {
138
138
  return this._elementRef.nativeElement;
139
139
  }
140
+ _listItemRef = viewChild('listItem');
140
141
  constructor() {
141
142
  super();
142
143
  this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
@@ -206,7 +207,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
206
207
  styles.zIndex = HIDDEN_ZINDEX;
207
208
  }
208
209
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
209
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n 'snapped-out': item.config.snappedOut}\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\"\r\n [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n }\r\n </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
210
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, viewQueries: [{ propertyName: "_listItemRef", first: true, predicate: ["listItem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n 'snapped-out': item.config.snappedOut}\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\"\r\n [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n }\r\n </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
210
211
  }
211
212
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
212
213
  type: Component,
@@ -215,20 +216,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
215
216
  }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n 'snapped-out': item.config.snappedOut}\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\"\r\n [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n }\r\n </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
216
217
  }], ctorParameters: () => [] });
217
218
 
218
- const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
219
- /**
220
- * Determines the axis membership of a virtual list
221
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
222
- * @author Evgenii Grebennikov
223
- * @email djonnyx@gmail.com
224
- */
225
- const isDirection = (src, expected) => {
226
- if (HORIZONTAL_ALIASES.includes(expected)) {
227
- return HORIZONTAL_ALIASES.includes(src);
228
- }
229
- return VERTICAL_ALIASES.includes(src);
230
- };
231
-
232
219
  /**
233
220
  * Simple debounce function.
234
221
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
@@ -276,137 +263,44 @@ const toggleClassName = (el, className, removeClassName) => {
276
263
  };
277
264
 
278
265
  /**
279
- * Tracks display items by property
280
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
266
+ * Scroll event.
267
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
281
268
  * @author Evgenii Grebennikov
282
269
  * @email djonnyx@gmail.com
283
270
  */
284
- class Tracker {
285
- /**
286
- * display objects dictionary of indexes by id
287
- */
288
- _displayObjectIndexMapById = {};
289
- set displayObjectIndexMapById(v) {
290
- if (this._displayObjectIndexMapById === v) {
291
- return;
292
- }
293
- this._displayObjectIndexMapById = v;
294
- }
295
- get displayObjectIndexMapById() {
296
- return this._displayObjectIndexMapById;
297
- }
298
- /**
299
- * Dictionary displayItems propertyNameId by items propertyNameId
300
- */
301
- _trackMap = {};
302
- get trackMap() {
303
- return this._trackMap;
304
- }
305
- _trackingPropertyName;
306
- set trackingPropertyName(v) {
307
- this._trackingPropertyName = v;
308
- }
309
- constructor(trackingPropertyName) {
310
- this._trackingPropertyName = trackingPropertyName;
311
- }
312
- /**
313
- * tracking by propName
314
- */
315
- track(items, components, snapedComponent, direction) {
316
- if (!items) {
317
- return;
318
- }
319
- const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
320
- let isRegularSnapped = false;
321
- for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
322
- const item = items[i], itemTrackingProperty = item[idPropName];
323
- if (this._trackMap) {
324
- if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
325
- const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
326
- const compId = comp?.instance?.id;
327
- if (comp !== undefined && compId === diId) {
328
- const indexByUntrackedItems = untrackedItems.findIndex(v => {
329
- return v.instance.id === compId;
330
- });
331
- if (indexByUntrackedItems > -1) {
332
- if (snapedComponent) {
333
- if (item['config']['snapped'] || item['config']['snappedOut']) {
334
- isRegularSnapped = true;
335
- snapedComponent.instance.item = item;
336
- snapedComponent.instance.show();
337
- }
338
- }
339
- comp.instance.item = item;
340
- if (snapedComponent) {
341
- if (item['config']['snapped'] || item['config']['snappedOut']) {
342
- comp.instance.hide();
343
- }
344
- else {
345
- comp.instance.show();
346
- }
347
- }
348
- else {
349
- comp.instance.show();
350
- }
351
- untrackedItems.splice(indexByUntrackedItems, 1);
352
- continue;
353
- }
354
- }
355
- delete this._trackMap[itemTrackingProperty];
356
- }
357
- }
358
- if (untrackedItems.length > 0) {
359
- const comp = untrackedItems.shift(), item = items[i];
360
- if (comp) {
361
- if (snapedComponent) {
362
- if (item['config']['snapped'] || item['config']['snappedOut']) {
363
- isRegularSnapped = true;
364
- snapedComponent.instance.item = item;
365
- snapedComponent.instance.show();
366
- }
367
- }
368
- comp.instance.item = item;
369
- if (snapedComponent) {
370
- if (item['config']['snapped'] || item['config']['snappedOut']) {
371
- comp.instance.hide();
372
- }
373
- else {
374
- comp.instance.show();
375
- }
376
- }
377
- else {
378
- comp.instance.show();
379
- }
380
- if (this._trackMap) {
381
- this._trackMap[itemTrackingProperty] = comp.instance.id;
382
- }
383
- }
384
- }
385
- }
386
- if (untrackedItems.length) {
387
- for (let i = 0, l = untrackedItems.length; i < l; i++) {
388
- const comp = untrackedItems[i];
389
- comp.instance.hide();
390
- }
391
- }
392
- if (!isRegularSnapped) {
393
- if (snapedComponent) {
394
- snapedComponent.instance.item = null;
395
- snapedComponent.instance.hide();
396
- }
397
- }
398
- }
399
- untrackComponentByIdProperty(component) {
400
- if (!component) {
401
- return;
402
- }
403
- const propertyIdName = this._trackingPropertyName;
404
- if (this._trackMap && component[propertyIdName] !== undefined) {
405
- delete this._trackMap[propertyIdName];
406
- }
407
- }
408
- dispose() {
409
- this._trackMap = null;
271
+ class ScrollEvent {
272
+ _direction = 1;
273
+ get direction() { return this._direction; }
274
+ _scrollSize = 0;
275
+ get scrollSize() { return this._scrollSize; }
276
+ _scrollWeight = 0;
277
+ get scrollWeight() { return this._scrollWeight; }
278
+ _isVertical = true;
279
+ get isVertical() { return this._isVertical; }
280
+ _listSize = 0;
281
+ get listSize() { return this._listSize; }
282
+ _size = 0;
283
+ get size() { return this._size; }
284
+ _isStart = true;
285
+ get isStart() { return this._isStart; }
286
+ _isEnd = false;
287
+ get isEnd() { return this._isEnd; }
288
+ _delta = 0;
289
+ get delta() { return this._delta; }
290
+ _scrollDelta = 0;
291
+ get scrollDelta() { return this._scrollDelta; }
292
+ constructor(params) {
293
+ const { direction, isVertical, container, list, delta, scrollDelta } = params;
294
+ this._direction = direction;
295
+ this._isVertical = isVertical;
296
+ this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
297
+ this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
298
+ this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
299
+ this._size = isVertical ? container.offsetHeight : container.offsetWidth;
300
+ this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
301
+ this._delta = delta;
302
+ this._scrollDelta = scrollDelta;
303
+ this._isStart = this._scrollSize === 0;
410
304
  }
411
305
  }
412
306
 
@@ -681,6 +575,141 @@ class CacheMap extends EventEmitter {
681
575
  }
682
576
  }
683
577
 
578
+ /**
579
+ * Tracks display items by property
580
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
581
+ * @author Evgenii Grebennikov
582
+ * @email djonnyx@gmail.com
583
+ */
584
+ class Tracker {
585
+ /**
586
+ * display objects dictionary of indexes by id
587
+ */
588
+ _displayObjectIndexMapById = {};
589
+ set displayObjectIndexMapById(v) {
590
+ if (this._displayObjectIndexMapById === v) {
591
+ return;
592
+ }
593
+ this._displayObjectIndexMapById = v;
594
+ }
595
+ get displayObjectIndexMapById() {
596
+ return this._displayObjectIndexMapById;
597
+ }
598
+ /**
599
+ * Dictionary displayItems propertyNameId by items propertyNameId
600
+ */
601
+ _trackMap = {};
602
+ get trackMap() {
603
+ return this._trackMap;
604
+ }
605
+ _trackingPropertyName;
606
+ set trackingPropertyName(v) {
607
+ this._trackingPropertyName = v;
608
+ }
609
+ constructor(trackingPropertyName) {
610
+ this._trackingPropertyName = trackingPropertyName;
611
+ }
612
+ /**
613
+ * tracking by propName
614
+ */
615
+ track(items, components, snapedComponent, direction) {
616
+ if (!items) {
617
+ return;
618
+ }
619
+ const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
620
+ let isRegularSnapped = false;
621
+ for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
622
+ const item = items[i], itemTrackingProperty = item[idPropName];
623
+ if (this._trackMap) {
624
+ if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
625
+ const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
626
+ const compId = comp?.instance?.id;
627
+ if (comp !== undefined && compId === diId) {
628
+ const indexByUntrackedItems = untrackedItems.findIndex(v => {
629
+ return v.instance.id === compId;
630
+ });
631
+ if (indexByUntrackedItems > -1) {
632
+ if (snapedComponent) {
633
+ if (item['config']['snapped'] || item['config']['snappedOut']) {
634
+ isRegularSnapped = true;
635
+ snapedComponent.instance.item = item;
636
+ snapedComponent.instance.show();
637
+ }
638
+ }
639
+ comp.instance.item = item;
640
+ if (snapedComponent) {
641
+ if (item['config']['snapped'] || item['config']['snappedOut']) {
642
+ comp.instance.hide();
643
+ }
644
+ else {
645
+ comp.instance.show();
646
+ }
647
+ }
648
+ else {
649
+ comp.instance.show();
650
+ }
651
+ untrackedItems.splice(indexByUntrackedItems, 1);
652
+ continue;
653
+ }
654
+ }
655
+ delete this._trackMap[itemTrackingProperty];
656
+ }
657
+ }
658
+ if (untrackedItems.length > 0) {
659
+ const comp = untrackedItems.shift(), item = items[i];
660
+ if (comp) {
661
+ if (snapedComponent) {
662
+ if (item['config']['snapped'] || item['config']['snappedOut']) {
663
+ isRegularSnapped = true;
664
+ snapedComponent.instance.item = item;
665
+ snapedComponent.instance.show();
666
+ }
667
+ }
668
+ comp.instance.item = item;
669
+ if (snapedComponent) {
670
+ if (item['config']['snapped'] || item['config']['snappedOut']) {
671
+ comp.instance.hide();
672
+ }
673
+ else {
674
+ comp.instance.show();
675
+ }
676
+ }
677
+ else {
678
+ comp.instance.show();
679
+ }
680
+ if (this._trackMap) {
681
+ this._trackMap[itemTrackingProperty] = comp.instance.id;
682
+ }
683
+ }
684
+ }
685
+ }
686
+ if (untrackedItems.length) {
687
+ for (let i = 0, l = untrackedItems.length; i < l; i++) {
688
+ const comp = untrackedItems[i];
689
+ comp.instance.hide();
690
+ }
691
+ }
692
+ if (!isRegularSnapped) {
693
+ if (snapedComponent) {
694
+ snapedComponent.instance.item = null;
695
+ snapedComponent.instance.hide();
696
+ }
697
+ }
698
+ }
699
+ untrackComponentByIdProperty(component) {
700
+ if (!component) {
701
+ return;
702
+ }
703
+ const propertyIdName = this._trackingPropertyName;
704
+ if (this._trackMap && component[propertyIdName] !== undefined) {
705
+ delete this._trackMap[propertyIdName];
706
+ }
707
+ }
708
+ dispose() {
709
+ this._trackMap = null;
710
+ }
711
+ }
712
+
684
713
  const DEFAULT_EXTRA = {
685
714
  extremumThreshold: 2,
686
715
  bufferSize: 10,
@@ -757,11 +786,16 @@ class TrackBox extends CacheMap {
757
786
  * Set the trackBy property
758
787
  */
759
788
  set trackingPropertyName(v) {
760
- this._tracker.trackingPropertyName = v;
789
+ this._trackingPropertyName = this._tracker.trackingPropertyName = v;
761
790
  }
791
+ _trackingPropertyName = TRACK_BY_PROPERTY_NAME;
762
792
  constructor(trackingPropertyName) {
763
793
  super();
764
- this._tracker = new Tracker(trackingPropertyName);
794
+ this._trackingPropertyName = trackingPropertyName;
795
+ this.initialize();
796
+ }
797
+ initialize() {
798
+ this._tracker = new Tracker(this._trackingPropertyName);
765
799
  }
766
800
  set(id, bounds) {
767
801
  if (this._map.has(id)) {
@@ -1303,6 +1337,9 @@ class TrackBox extends CacheMap {
1303
1337
  if (snap) {
1304
1338
  const startIndex = itemsFromStartToScrollEnd + itemsOnDisplayLength - 1;
1305
1339
  for (let i = Math.min(startIndex, totalLength > 0 ? totalLength - 1 : 0), l = totalLength; i < l; i++) {
1340
+ if (!items[i]) {
1341
+ continue;
1342
+ }
1306
1343
  const id = items[i].id, sticky = stickyMap[id], size = dynamicSize
1307
1344
  ? this.get(id)?.[sizeProperty] || typicalItemSize
1308
1345
  : typicalItemSize;
@@ -1337,6 +1374,9 @@ class TrackBox extends CacheMap {
1337
1374
  if (i >= totalLength) {
1338
1375
  break;
1339
1376
  }
1377
+ if (!items[i]) {
1378
+ continue;
1379
+ }
1340
1380
  const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
1341
1381
  if (id !== stickyItem?.id && id !== endStickyItem?.id) {
1342
1382
  const snapped = snap && (stickyMap[id] === 1 && pos <= scrollSize || stickyMap[id] === 2 && pos >= scrollSize + boundsSize - size), measures = {
@@ -1455,48 +1495,6 @@ class TrackBox extends CacheMap {
1455
1495
  }
1456
1496
  }
1457
1497
 
1458
- /**
1459
- * Scroll event.
1460
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
1461
- * @author Evgenii Grebennikov
1462
- * @email djonnyx@gmail.com
1463
- */
1464
- class ScrollEvent {
1465
- _direction = 1;
1466
- get direction() { return this._direction; }
1467
- _scrollSize = 0;
1468
- get scrollSize() { return this._scrollSize; }
1469
- _scrollWeight = 0;
1470
- get scrollWeight() { return this._scrollWeight; }
1471
- _isVertical = true;
1472
- get isVertical() { return this._isVertical; }
1473
- _listSize = 0;
1474
- get listSize() { return this._listSize; }
1475
- _size = 0;
1476
- get size() { return this._size; }
1477
- _isStart = true;
1478
- get isStart() { return this._isStart; }
1479
- _isEnd = false;
1480
- get isEnd() { return this._isEnd; }
1481
- _delta = 0;
1482
- get delta() { return this._delta; }
1483
- _scrollDelta = 0;
1484
- get scrollDelta() { return this._scrollDelta; }
1485
- constructor(params) {
1486
- const { direction, isVertical, container, list, delta, scrollDelta } = params;
1487
- this._direction = direction;
1488
- this._isVertical = isVertical;
1489
- this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
1490
- this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
1491
- this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
1492
- this._size = isVertical ? container.offsetHeight : container.offsetWidth;
1493
- this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
1494
- this._delta = delta;
1495
- this._scrollDelta = scrollDelta;
1496
- this._isStart = this._scrollSize === 0;
1497
- }
1498
- }
1499
-
1500
1498
  const ADVANCED_PATTERNS = [SnappingMethods.ADVANCED, 'advanced'], DEFAULT_PATTERN = [SnappingMethods.NORMAL, 'normal'];
1501
1499
  const isSnappingMethodAdvenced = (method) => {
1502
1500
  return ADVANCED_PATTERNS.includes(method);
@@ -1508,6 +1506,20 @@ const isSnappingMethodDefault = (method) => {
1508
1506
  const IS_FIREFOX = navigator.userAgent.toLowerCase().includes('firefox');
1509
1507
  const FIREFOX_SCROLLBAR_OVERLAP_SIZE = 12;
1510
1508
 
1509
+ const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
1510
+ /**
1511
+ * Determines the axis membership of a virtual list
1512
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
1513
+ * @author Evgenii Grebennikov
1514
+ * @email djonnyx@gmail.com
1515
+ */
1516
+ const isDirection = (src, expected) => {
1517
+ if (HORIZONTAL_ALIASES.includes(expected)) {
1518
+ return HORIZONTAL_ALIASES.includes(src);
1519
+ }
1520
+ return VERTICAL_ALIASES.includes(src);
1521
+ };
1522
+
1511
1523
  /**
1512
1524
  * Virtual list component.
1513
1525
  * Maximum performance for extremely large lists.
@@ -1765,9 +1777,6 @@ class NgVirtualListComponent {
1765
1777
  }
1766
1778
  return of(displayItems);
1767
1779
  })).subscribe();
1768
- this.setupRenderer();
1769
- }
1770
- setupRenderer() {
1771
1780
  const $itemRenderer = toObservable(this.itemRenderer);
1772
1781
  $itemRenderer.pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(v => !!v), tap(v => {
1773
1782
  this._itemRenderer.set(v);
@@ -2042,5 +2051,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
2042
2051
  * Generated bundle index. Do not edit.
2043
2052
  */
2044
2053
 
2045
- export { BaseVirtualListItemComponent, Directions, NgVirtualListComponent, NgVirtualListItemComponent, SnappingMethods };
2054
+ export { Directions, NgVirtualListComponent, NgVirtualListItemComponent, ScrollEvent, SnappingMethods, debounce, toggleClassName };
2046
2055
  //# sourceMappingURL=ng-virtual-list.mjs.map