ng-virtual-list 15.0.21 → 15.0.23

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 (94) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +1 -1
  3. package/ng-package.json +7 -0
  4. package/package.json +29 -48
  5. package/src/lib/components/ng-virtual-list-item.component.html +9 -0
  6. package/src/lib/components/ng-virtual-list-item.component.scss +17 -0
  7. package/src/lib/components/ng-virtual-list-item.component.spec.ts +23 -0
  8. package/src/lib/components/ng-virtual-list-item.component.ts +111 -0
  9. package/src/lib/const/index.ts +67 -0
  10. package/{lib/enums/direction.d.ts → src/lib/enums/direction.ts} +1 -0
  11. package/{lib/enums/directions.d.ts → src/lib/enums/directions.ts} +4 -4
  12. package/{lib/enums/index.d.ts → src/lib/enums/index.ts} +4 -1
  13. package/{lib/models/collection.model.d.ts → src/lib/models/collection.model.ts} +2 -2
  14. package/{lib/models/index.d.ts → src/lib/models/index.ts} +8 -1
  15. package/{lib/models/item.model.d.ts → src/lib/models/item.model.ts} +2 -1
  16. package/{lib/models/render-collection.model.d.ts → src/lib/models/render-collection.model.ts} +2 -2
  17. package/{lib/models/render-item-config.model.d.ts → src/lib/models/render-item-config.model.ts} +2 -2
  18. package/{lib/models/render-item.model.d.ts → src/lib/models/render-item.model.ts} +2 -1
  19. package/{lib/models/scroll-event.model.d.ts → src/lib/models/scroll-event.model.ts} +1 -0
  20. package/{lib/models/sticky-map.model.d.ts → src/lib/models/sticky-map.model.ts} +1 -1
  21. package/src/lib/ng-virtual-list.component.html +5 -0
  22. package/src/lib/ng-virtual-list.component.scss +28 -0
  23. package/src/lib/ng-virtual-list.component.spec.ts +23 -0
  24. package/src/lib/ng-virtual-list.component.ts +671 -0
  25. package/src/lib/ng-virtual-list.module.ts +12 -0
  26. package/{lib/types/id.d.ts → src/lib/types/id.ts} +1 -1
  27. package/{lib/types/index.d.ts → src/lib/types/index.ts} +6 -1
  28. package/{lib/types/rect.d.ts → src/lib/types/rect.ts} +2 -1
  29. package/{lib/types/size.d.ts → src/lib/types/size.ts} +1 -1
  30. package/src/lib/utils/cacheMap.ts +224 -0
  31. package/src/lib/utils/debounce.ts +31 -0
  32. package/src/lib/utils/disposableComponent.ts +22 -0
  33. package/src/lib/utils/eventEmitter.ts +119 -0
  34. package/{lib/utils/index.d.ts → src/lib/utils/index.ts} +9 -1
  35. package/src/lib/utils/isDirection.ts +17 -0
  36. package/src/lib/utils/scrollEvent.ts +62 -0
  37. package/src/lib/utils/toggleClassName.ts +14 -0
  38. package/src/lib/utils/trackBox.ts +839 -0
  39. package/src/lib/utils/tracker.ts +126 -0
  40. package/{public-api.d.ts → src/public-api.ts} +4 -0
  41. package/tsconfig.lib.json +15 -0
  42. package/tsconfig.lib.prod.json +11 -0
  43. package/tsconfig.spec.json +15 -0
  44. package/esm2020/lib/components/ng-virtual-list-item.component.mjs +0 -87
  45. package/esm2020/lib/const/index.mjs +0 -35
  46. package/esm2020/lib/enums/direction.mjs +0 -2
  47. package/esm2020/lib/enums/directions.mjs +0 -18
  48. package/esm2020/lib/enums/index.mjs +0 -3
  49. package/esm2020/lib/models/collection.model.mjs +0 -3
  50. package/esm2020/lib/models/index.mjs +0 -2
  51. package/esm2020/lib/models/item.model.mjs +0 -3
  52. package/esm2020/lib/models/render-collection.model.mjs +0 -3
  53. package/esm2020/lib/models/render-item-config.model.mjs +0 -2
  54. package/esm2020/lib/models/render-item.model.mjs +0 -3
  55. package/esm2020/lib/models/scroll-direction.model.mjs +0 -2
  56. package/esm2020/lib/models/scroll-event.model.mjs +0 -2
  57. package/esm2020/lib/models/sticky-map.model.mjs +0 -2
  58. package/esm2020/lib/ng-virtual-list.component.mjs +0 -508
  59. package/esm2020/lib/ng-virtual-list.module.mjs +0 -20
  60. package/esm2020/lib/types/id.mjs +0 -2
  61. package/esm2020/lib/types/index.mjs +0 -2
  62. package/esm2020/lib/types/rect.mjs +0 -2
  63. package/esm2020/lib/types/size.mjs +0 -2
  64. package/esm2020/lib/utils/cacheMap.mjs +0 -167
  65. package/esm2020/lib/utils/debounce.mjs +0 -31
  66. package/esm2020/lib/utils/disposableComponent.mjs +0 -29
  67. package/esm2020/lib/utils/eventEmitter.mjs +0 -106
  68. package/esm2020/lib/utils/index.mjs +0 -8
  69. package/esm2020/lib/utils/isDirection.mjs +0 -15
  70. package/esm2020/lib/utils/scrollEvent.mjs +0 -42
  71. package/esm2020/lib/utils/toggleClassName.mjs +0 -15
  72. package/esm2020/lib/utils/trackBox.mjs +0 -623
  73. package/esm2020/lib/utils/tracker.mjs +0 -92
  74. package/esm2020/ng-virtual-list.mjs +0 -5
  75. package/esm2020/public-api.mjs +0 -8
  76. package/fesm2015/ng-virtual-list.mjs +0 -1767
  77. package/fesm2015/ng-virtual-list.mjs.map +0 -1
  78. package/fesm2020/ng-virtual-list.mjs +0 -1776
  79. package/fesm2020/ng-virtual-list.mjs.map +0 -1
  80. package/index.d.ts +0 -5
  81. package/lib/components/ng-virtual-list-item.component.d.ts +0 -30
  82. package/lib/const/index.d.ts +0 -33
  83. package/lib/ng-virtual-list.component.d.ts +0 -165
  84. package/lib/ng-virtual-list.module.d.ts +0 -9
  85. package/lib/utils/cacheMap.d.ts +0 -60
  86. package/lib/utils/debounce.d.ts +0 -16
  87. package/lib/utils/disposableComponent.d.ts +0 -15
  88. package/lib/utils/eventEmitter.d.ts +0 -40
  89. package/lib/utils/isDirection.d.ts +0 -8
  90. package/lib/utils/scrollEvent.d.ts +0 -39
  91. package/lib/utils/toggleClassName.d.ts +0 -7
  92. package/lib/utils/trackBox.d.ts +0 -176
  93. package/lib/utils/tracker.d.ts +0 -44
  94. /package/{lib/models/scroll-direction.model.d.ts → src/lib/models/scroll-direction.model.ts} +0 -0
@@ -1,1767 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, ViewContainerRef, ElementRef, ViewEncapsulation, ViewChild, Output, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
3
- import * as i1 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
5
- import { Subject, BehaviorSubject, takeUntil, tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
6
-
7
- /**
8
- * Axis of the arrangement of virtual list elements.
9
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/enums/directions.ts
10
- * @author Evgenii Grebennikov
11
- * @email djonnyx@gmail.com
12
- */
13
- var Directions;
14
- (function (Directions) {
15
- /**
16
- * Horizontal axis.
17
- */
18
- Directions["HORIZONTAL"] = "horizontal";
19
- /**
20
- * Vertical axis.
21
- */
22
- Directions["VERTICAL"] = "vertical";
23
- })(Directions || (Directions = {}));
24
-
25
- const DEFAULT_ITEM_SIZE = 24;
26
- const DEFAULT_ITEMS_OFFSET = 2;
27
- const DEFAULT_LIST_SIZE = 400;
28
- const DEFAULT_SNAP = false;
29
- const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
30
- const DEFAULT_DYNAMIC_SIZE = false;
31
- const TRACK_BY_PROPERTY_NAME = 'id';
32
- const DEFAULT_DIRECTION = Directions.VERTICAL;
33
- const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
34
- const MAX_SCROLL_TO_ITERATIONS = 5;
35
- // presets
36
- const BEHAVIOR_AUTO = 'auto';
37
- const BEHAVIOR_INSTANT = 'instant';
38
- const BEHAVIOR_SMOOTH = 'smooth';
39
- const VISIBILITY_VISIBLE = 'visible';
40
- const VISIBILITY_HIDDEN = 'hidden';
41
- const SIZE_100_PERSENT = '100%';
42
- const SIZE_AUTO = 'auto';
43
- const POSITION_ABSOLUTE = 'absolute';
44
- const POSITION_STICKY = 'sticky';
45
- const TRANSLATE_3D = 'translate3d';
46
- const ZEROS_TRANSLATE_3D = `${TRANSLATE_3D}(0,0,0)`;
47
- const TOP_PROP_NAME = 'top';
48
- const LEFT_PROP_NAME = 'left';
49
- const X_PROP_NAME = 'x';
50
- const Y_PROP_NAME = 'y';
51
- const WIDTH_PROP_NAME = 'width';
52
- const HEIGHT_PROP_NAME = 'height';
53
- const PX = 'px';
54
- const SCROLL = 'scroll';
55
- const SCROLL_END = 'scrollend';
56
- const CLASS_LIST_VERTICAL = 'vertical';
57
- const CLASS_LIST_HORIZONTAL = 'horizontal';
58
-
59
- /**
60
- * Virtual list item component
61
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
62
- * @author Evgenii Grebennikov
63
- * @email djonnyx@gmail.com
64
- */
65
- class NgVirtualListItemComponent {
66
- get id() {
67
- return this._id;
68
- }
69
- set item(v) {
70
- if (this.data === v) {
71
- return;
72
- }
73
- const data = this.data = v;
74
- if (data) {
75
- const styles = this._elementRef.nativeElement.style;
76
- styles.zIndex = String(data.config.sticky);
77
- if (data.config.snapped) {
78
- styles.transform = ZEROS_TRANSLATE_3D;
79
- styles.position = POSITION_STICKY;
80
- }
81
- else {
82
- styles.position = POSITION_ABSOLUTE;
83
- styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
84
- }
85
- styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : SIZE_100_PERSENT;
86
- styles.width = data.config.isVertical ? SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;
87
- }
88
- this._cdr.detectChanges();
89
- }
90
- get item() {
91
- return this.data;
92
- }
93
- get itemId() {
94
- var _a;
95
- return (_a = this.data) === null || _a === void 0 ? void 0 : _a.id;
96
- }
97
- set renderer(v) {
98
- if (this.itemRenderer === v) {
99
- return;
100
- }
101
- this.itemRenderer = v;
102
- this._cdr.markForCheck();
103
- }
104
- get element() {
105
- return this._elementRef.nativeElement;
106
- }
107
- constructor(_cdr, _elementRef) {
108
- this._cdr = _cdr;
109
- this._elementRef = _elementRef;
110
- this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
111
- ? 0 : NgVirtualListItemComponent.__nextId + 1;
112
- }
113
- getBounds() {
114
- const el = this._elementRef.nativeElement, { width, height } = el.getBoundingClientRect();
115
- return { width, height };
116
- }
117
- show() {
118
- const styles = this._elementRef.nativeElement.style;
119
- if (styles.visibility === VISIBILITY_VISIBLE) {
120
- return;
121
- }
122
- styles.visibility = VISIBILITY_VISIBLE;
123
- }
124
- hide() {
125
- const styles = this._elementRef.nativeElement.style;
126
- if (styles.visibility === VISIBILITY_HIDDEN) {
127
- return;
128
- }
129
- styles.visibility = VISIBILITY_HIDDEN;
130
- styles.transform = ZEROS_TRANSLATE_3D;
131
- }
132
- }
133
- NgVirtualListItemComponent.__nextId = 0;
134
- NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
135
- NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n 'snapped-out': data.config.snappedOut}\">\r\n <ng-container *ngIf=\"itemRenderer\">\r\n <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\" />\r\n </ng-container>\r\n </li>\r\n</ng-container>", 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
137
- type: Component,
138
- args: [{ selector: 'ng-virtual-list-item', host: {
139
- 'class': 'ngvl__item',
140
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n 'snapped-out': data.config.snappedOut}\">\r\n <ng-container *ngIf=\"itemRenderer\">\r\n <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\" />\r\n </ng-container>\r\n </li>\r\n</ng-container>", 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"] }]
141
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
142
-
143
- const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
144
- /**
145
- * Determines the axis membership of a virtual list
146
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
147
- * @author Evgenii Grebennikov
148
- * @email djonnyx@gmail.com
149
- */
150
- const isDirection = (src, expected) => {
151
- if (HORIZONTAL_ALIASES.includes(expected)) {
152
- return HORIZONTAL_ALIASES.includes(src);
153
- }
154
- return VERTICAL_ALIASES.includes(src);
155
- };
156
-
157
- /**
158
- * Simple debounce function.
159
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
160
- * @author Evgenii Grebennikov
161
- * @email djonnyx@gmail.com
162
- */
163
- const debounce = (cb, debounceTime = 0) => {
164
- let timeout;
165
- const dispose = () => {
166
- if (timeout !== undefined) {
167
- clearTimeout(timeout);
168
- }
169
- };
170
- const execute = (...args) => {
171
- dispose();
172
- timeout = setTimeout(() => {
173
- cb(...args);
174
- }, debounceTime);
175
- };
176
- return {
177
- /**
178
- * Call handling method
179
- */
180
- execute,
181
- /**
182
- * Method of destroying handlers
183
- */
184
- dispose,
185
- };
186
- };
187
-
188
- /**
189
- * Switch css classes
190
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts
191
- * @author Evgenii Grebennikov
192
- * @email djonnyx@gmail.com
193
- */
194
- const toggleClassName = (el, className, remove = false) => {
195
- if (!el.classList.contains(className)) {
196
- el.classList.add(className);
197
- }
198
- else if (remove) {
199
- el.classList.remove(className);
200
- }
201
- };
202
-
203
- /**
204
- * Tracks display items by property
205
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
206
- * @author Evgenii Grebennikov
207
- * @email djonnyx@gmail.com
208
- */
209
- class Tracker {
210
- set displayObjectIndexMapById(v) {
211
- if (this._displayObjectIndexMapById === v) {
212
- return;
213
- }
214
- this._displayObjectIndexMapById = v;
215
- }
216
- get displayObjectIndexMapById() {
217
- return this._displayObjectIndexMapById;
218
- }
219
- get trackMap() {
220
- return this._trackMap;
221
- }
222
- set trackingPropertyName(v) {
223
- this._trackingPropertyName = v;
224
- }
225
- constructor(trackingPropertyName) {
226
- /**
227
- * display objects dictionary of indexes by id
228
- */
229
- this._displayObjectIndexMapById = {};
230
- /**
231
- * Dictionary displayItems propertyNameId by items propertyNameId
232
- */
233
- this._trackMap = {};
234
- this._trackingPropertyName = trackingPropertyName;
235
- }
236
- /**
237
- * tracking by propName
238
- */
239
- track(items, components, direction) {
240
- var _a;
241
- if (!items) {
242
- return;
243
- }
244
- const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
245
- for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
246
- const item = items[i], itemTrackingProperty = item[idPropName];
247
- if (this._trackMap) {
248
- if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
249
- const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
250
- const compId = (_a = comp === null || comp === void 0 ? void 0 : comp.instance) === null || _a === void 0 ? void 0 : _a.id;
251
- if (comp !== undefined && compId == diId) {
252
- const indexByUntrackedItems = untrackedItems.findIndex(v => {
253
- return v.instance.id == compId;
254
- });
255
- if (indexByUntrackedItems > -1) {
256
- comp.instance.item = item;
257
- comp.instance.show();
258
- untrackedItems.splice(indexByUntrackedItems, 1);
259
- continue;
260
- }
261
- }
262
- delete this._trackMap[itemTrackingProperty];
263
- }
264
- }
265
- if (untrackedItems.length > 0) {
266
- const el = untrackedItems.shift(), item = items[i];
267
- if (el) {
268
- el.instance.item = item;
269
- if (this._trackMap) {
270
- this._trackMap[itemTrackingProperty] = el.instance.id;
271
- }
272
- }
273
- }
274
- }
275
- if (untrackedItems.length) {
276
- for (let i = 0, l = untrackedItems.length; i < l; i++) {
277
- const comp = untrackedItems[i];
278
- comp.instance.hide();
279
- }
280
- }
281
- }
282
- untrackComponentByIdProperty(component) {
283
- if (!component) {
284
- return;
285
- }
286
- const propertyIdName = this._trackingPropertyName;
287
- if (this._trackMap && component[propertyIdName] !== undefined) {
288
- delete this._trackMap[propertyIdName];
289
- }
290
- }
291
- dispose() {
292
- this._trackMap = null;
293
- }
294
- }
295
-
296
- /**
297
- * Simple event emitter
298
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
299
- * @author Evgenii Grebennikov
300
- * @email djonnyx@gmail.com
301
- */
302
- class EventEmitter {
303
- constructor() {
304
- this._listeners = {};
305
- this._disposed = false;
306
- }
307
- /**
308
- * Emits the event
309
- */
310
- dispatch(event, ...args) {
311
- const ctx = this;
312
- const listeners = this._listeners[event];
313
- if (Array.isArray(listeners)) {
314
- for (let i = 0, l = listeners.length; i < l; i++) {
315
- const listener = listeners[i];
316
- if (listener) {
317
- listener.apply(ctx, args);
318
- }
319
- }
320
- }
321
- }
322
- /**
323
- * Emits the event async
324
- */
325
- dispatchAsync(event, ...args) {
326
- queueMicrotask(() => {
327
- if (this._disposed) {
328
- return;
329
- }
330
- this.dispatch(event, ...args);
331
- });
332
- }
333
- /**
334
- * Returns true if the event listener is already subscribed.
335
- */
336
- hasEventListener(eventName, handler) {
337
- const event = eventName;
338
- if (this._listeners.hasOwnProperty(event)) {
339
- const listeners = this._listeners[event];
340
- const index = listeners.findIndex(v => v === handler);
341
- if (index > -1) {
342
- return true;
343
- }
344
- }
345
- return false;
346
- }
347
- /**
348
- * Add event listener
349
- */
350
- addEventListener(eventName, handler) {
351
- const event = eventName;
352
- if (!this._listeners.hasOwnProperty(event)) {
353
- this._listeners[event] = [];
354
- }
355
- this._listeners[event].push(handler);
356
- }
357
- /**
358
- * Remove event listener
359
- */
360
- removeEventListener(eventName, handler) {
361
- const event = eventName;
362
- if (!this._listeners.hasOwnProperty(event)) {
363
- return;
364
- }
365
- const listeners = this._listeners[event], index = listeners.findIndex(v => v === handler);
366
- if (index > -1) {
367
- listeners.splice(index, 1);
368
- if (listeners.length === 0) {
369
- delete this._listeners[event];
370
- }
371
- }
372
- }
373
- /**
374
- * Remove all listeners
375
- */
376
- removeAllListeners() {
377
- const events = Object.keys(this._listeners);
378
- while (events.length > 0) {
379
- const event = events.pop();
380
- if (event) {
381
- const listeners = this._listeners[event];
382
- if (Array.isArray(listeners)) {
383
- while (listeners.length > 0) {
384
- const listener = listeners.pop();
385
- if (listener) {
386
- this.removeEventListener(event, listener);
387
- }
388
- }
389
- }
390
- }
391
- }
392
- }
393
- /**
394
- * Method of destroying handlers
395
- */
396
- dispose() {
397
- this._disposed = true;
398
- this.removeAllListeners();
399
- }
400
- }
401
-
402
- class CMap {
403
- constructor(dict) {
404
- this._dict = {};
405
- if (dict) {
406
- this._dict = Object.assign({}, dict._dict);
407
- }
408
- }
409
- get(key) {
410
- const k = String(key);
411
- return this._dict[k];
412
- }
413
- set(key, value) {
414
- const k = String(key);
415
- this._dict[k] = value;
416
- return this;
417
- }
418
- has(key) {
419
- return this._dict.hasOwnProperty(String(key));
420
- }
421
- delete(key) {
422
- const k = String(key);
423
- delete this._dict[k];
424
- }
425
- clear() {
426
- this._dict = {};
427
- }
428
- }
429
- const CACHE_BOX_CHANGE_EVENT_NAME = 'change';
430
- const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10, DIR_BACK = '-1', DIR_NONE = '0', DIR_FORWARD = '1';
431
- /**
432
- * Cache map.
433
- * Emits a change event on each mutation.
434
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
435
- * @author Evgenii Grebennikov
436
- * @email djonnyx@gmail.com
437
- */
438
- class CacheMap extends EventEmitter {
439
- get delta() {
440
- return this._delta;
441
- }
442
- set deltaDirection(v) {
443
- this._deltaDirection = v;
444
- this._scrollDirection = this.calcScrollDirection(v);
445
- }
446
- get deltaDirection() {
447
- return this._deltaDirection;
448
- }
449
- get scrollDirection() {
450
- return this._scrollDirection;
451
- }
452
- get version() {
453
- return this._version;
454
- }
455
- constructor() {
456
- super();
457
- this._map = new CMap();
458
- this._snapshot = new CMap();
459
- this._version = 0;
460
- this._previousVersion = this._version;
461
- this._delta = 0;
462
- this._deltaDirection = 0;
463
- this._scrollDirectionCache = [];
464
- this._scrollDirection = 0;
465
- this._clearScrollDirectionDebounce = debounce(() => {
466
- while (this._scrollDirectionCache.length > CLEAR_SCROLL_DIRECTION_TO) {
467
- this._scrollDirectionCache.shift();
468
- }
469
- }, 10);
470
- this.lifeCircle();
471
- }
472
- changesDetected() {
473
- return this._version !== this._previousVersion;
474
- }
475
- stopLifeCircle() {
476
- clearTimeout(this._lifeCircleTimeout);
477
- }
478
- nextTick(cb) {
479
- if (this._disposed) {
480
- return;
481
- }
482
- this._lifeCircleTimeout = setTimeout(() => {
483
- cb();
484
- });
485
- return this._lifeCircleTimeout;
486
- }
487
- lifeCircle() {
488
- this.fireChangeIfNeed();
489
- this.lifeCircleDo();
490
- }
491
- lifeCircleDo() {
492
- this._previousVersion = this._version;
493
- this.nextTick(() => {
494
- this.lifeCircle();
495
- });
496
- }
497
- clearScrollDirectionCache() {
498
- this._clearScrollDirectionDebounce.execute();
499
- }
500
- calcScrollDirection(v) {
501
- while (this._scrollDirectionCache.length >= MAX_SCROLL_DIRECTION_POOL) {
502
- this._scrollDirectionCache.shift();
503
- }
504
- this._scrollDirectionCache.push(v);
505
- const dict = { [DIR_BACK]: 0, [DIR_NONE]: 0, [DIR_FORWARD]: 0 };
506
- for (let i = 0, l = this._scrollDirectionCache.length, li = l - 1; i < l; i++) {
507
- const dir = String(this._scrollDirectionCache[i]);
508
- dict[dir] += 1;
509
- if (i === li) {
510
- for (let d in dict) {
511
- if (d === String(v)) {
512
- continue;
513
- }
514
- dict[d] -= 1;
515
- }
516
- }
517
- }
518
- if (dict[DIR_BACK] > dict[DIR_NONE] && dict[DIR_BACK] > dict[DIR_FORWARD]) {
519
- return -1;
520
- }
521
- else if (dict[DIR_FORWARD] > dict[DIR_BACK] && dict[DIR_FORWARD] > dict[DIR_NONE]) {
522
- return 1;
523
- }
524
- return 0;
525
- }
526
- bumpVersion() {
527
- if (this.changesDetected()) {
528
- return;
529
- }
530
- const v = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
531
- this._version = v;
532
- }
533
- fireChangeIfNeed() {
534
- if (this.changesDetected()) {
535
- this.dispatch(CACHE_BOX_CHANGE_EVENT_NAME, this.version);
536
- }
537
- }
538
- set(id, bounds) {
539
- if (this._map.has(id)) {
540
- const b = this._map.get(id), bb = bounds;
541
- if (b.width === bb.width && b.height === bb.height) {
542
- return this._map;
543
- }
544
- return this._map;
545
- }
546
- const v = this._map.set(id, bounds);
547
- this.bumpVersion();
548
- return v;
549
- }
550
- has(id) {
551
- return this._map.has(id);
552
- }
553
- get(id) {
554
- return this._map.get(id);
555
- }
556
- snapshot() {
557
- this._snapshot = new CMap(this._map);
558
- }
559
- dispose() {
560
- super.dispose();
561
- this.stopLifeCircle();
562
- this._snapshot.clear();
563
- this._map.clear();
564
- }
565
- }
566
-
567
- const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
568
- var ItemDisplayMethods;
569
- (function (ItemDisplayMethods) {
570
- ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
571
- ItemDisplayMethods[ItemDisplayMethods["UPDATE"] = 1] = "UPDATE";
572
- ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
573
- ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
574
- })(ItemDisplayMethods || (ItemDisplayMethods = {}));
575
- /**
576
- * An object that performs tracking, calculations and caching.
577
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
578
- * @author Evgenii Grebennikov
579
- * @email djonnyx@gmail.com
580
- */
581
- class TrackBox extends CacheMap {
582
- set items(v) {
583
- if (this._items === v) {
584
- return;
585
- }
586
- this._items = v;
587
- }
588
- set displayComponents(v) {
589
- if (this._displayComponents === v) {
590
- return;
591
- }
592
- this._displayComponents = v;
593
- }
594
- /**
595
- * Set the trackBy property
596
- */
597
- set trackingPropertyName(v) {
598
- this._tracker.trackingPropertyName = v;
599
- }
600
- constructor(trackingPropertyName) {
601
- super();
602
- this._deletedItemsMap = {};
603
- this._crudDetected = false;
604
- this._previousTotalSize = 0;
605
- this._scrollDelta = 0;
606
- this._tracker = new Tracker(trackingPropertyName);
607
- }
608
- set(id, bounds) {
609
- if (this._map.has(id)) {
610
- const b = this._map.get(id);
611
- if ((b === null || b === void 0 ? void 0 : b.width) === bounds.width && b.height === bounds.height) {
612
- return this._map;
613
- }
614
- }
615
- const v = this._map.set(id, bounds);
616
- this.bumpVersion();
617
- return v;
618
- }
619
- get crudDetected() { return this._crudDetected; }
620
- fireChangeIfNeed() {
621
- if (this.changesDetected()) {
622
- this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, this._version);
623
- }
624
- }
625
- get scrollDelta() { return this._scrollDelta; }
626
- lifeCircle() {
627
- this.fireChangeIfNeed();
628
- this.lifeCircleDo();
629
- }
630
- /**
631
- * Scans the collection for deleted items and flushes the deleted item cache.
632
- */
633
- resetCollection(currentCollection, itemSize) {
634
- if (currentCollection !== undefined && currentCollection !== null && currentCollection === this._previousCollection) {
635
- console.warn('Attention! The collection must be immutable.');
636
- return;
637
- }
638
- this.updateCache(this._previousCollection, currentCollection, itemSize);
639
- this._previousCollection = currentCollection;
640
- }
641
- /**
642
- * Update the cache of items from the list
643
- */
644
- updateCache(previousCollection, currentCollection, itemSize) {
645
- let crudDetected = false;
646
- if (!currentCollection || currentCollection.length === 0) {
647
- if (previousCollection) {
648
- // deleted
649
- for (let i = 0, l = previousCollection.length; i < l; i++) {
650
- const item = previousCollection[i], id = item.id;
651
- crudDetected = true;
652
- if (this._map.has(id)) {
653
- this._map.delete(id);
654
- }
655
- }
656
- }
657
- return;
658
- }
659
- if (!previousCollection || previousCollection.length === 0) {
660
- if (currentCollection) {
661
- // added
662
- for (let i = 0, l = currentCollection.length; i < l; i++) {
663
- crudDetected = true;
664
- const item = currentCollection[i], id = item.id;
665
- this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
666
- }
667
- }
668
- return;
669
- }
670
- const collectionDict = {};
671
- for (let i = 0, l = currentCollection.length; i < l; i++) {
672
- const item = currentCollection[i];
673
- if (item) {
674
- collectionDict[item.id] = item;
675
- }
676
- }
677
- const notChangedMap = {}, deletedMap = {}, deletedItemsMap = {}, updatedMap = {};
678
- for (let i = 0, l = previousCollection.length; i < l; i++) {
679
- const item = previousCollection[i], id = item.id;
680
- if (item) {
681
- if (collectionDict.hasOwnProperty(id)) {
682
- if (item === collectionDict[id]) {
683
- // not changed
684
- notChangedMap[item.id] = item;
685
- this._map.set(id, Object.assign(Object.assign({}, (this._map.get(id) || { width: itemSize, height: itemSize })), { method: ItemDisplayMethods.NOT_CHANGED }));
686
- continue;
687
- }
688
- else {
689
- // updated
690
- crudDetected = true;
691
- updatedMap[item.id] = item;
692
- this._map.set(id, Object.assign(Object.assign({}, (this._map.get(id) || { width: itemSize, height: itemSize })), { method: ItemDisplayMethods.UPDATE }));
693
- continue;
694
- }
695
- }
696
- // deleted
697
- crudDetected = true;
698
- deletedMap[item.id] = item;
699
- deletedItemsMap[i] = this._map.get(item.id);
700
- this._map.delete(id);
701
- }
702
- }
703
- for (let i = 0, l = currentCollection.length; i < l; i++) {
704
- const item = currentCollection[i], id = item.id;
705
- if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
706
- // added
707
- crudDetected = true;
708
- this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
709
- }
710
- }
711
- this._crudDetected = crudDetected;
712
- this._deletedItemsMap = deletedItemsMap;
713
- }
714
- /**
715
- * Finds the position of a collection element by the given Id
716
- */
717
- getItemPosition(id, stickyMap, options) {
718
- const opt = Object.assign({ fromItemId: id, stickyMap }, options);
719
- const { scrollSize } = this.recalculateMetrics(Object.assign(Object.assign({}, opt), { dynamicSize: this._crudDetected || opt.dynamicSize, previousTotalSize: this._previousTotalSize, crudDetected: this._crudDetected, deletedItemsMap: this._deletedItemsMap }));
720
- return scrollSize;
721
- }
722
- /**
723
- * Updates the collection of display objects
724
- */
725
- updateCollection(items, stickyMap, options) {
726
- const opt = Object.assign({ stickyMap }, options), crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
727
- if (opt.dynamicSize) {
728
- this.cacheElements();
729
- }
730
- const metrics = this.recalculateMetrics(Object.assign(Object.assign({}, opt), { collection: items, previousTotalSize: this._previousTotalSize, crudDetected: this._crudDetected, deletedItemsMap }));
731
- this._delta += metrics.delta;
732
- this._previousTotalSize = metrics.totalSize;
733
- this._deletedItemsMap = {};
734
- this._crudDetected = false;
735
- if (opt.dynamicSize) {
736
- this.snapshot();
737
- }
738
- const displayItems = this.generateDisplayCollection(items, stickyMap, Object.assign({}, metrics));
739
- return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta, crudDetected };
740
- }
741
- /**
742
- * Finds the closest element in the collection by scrollSize
743
- */
744
- getNearestItem(scrollSize, items, itemSize, isVertical) {
745
- return this.getElementFromStart(scrollSize, items, this._map, itemSize, isVertical);
746
- }
747
- /**
748
- * Calculates the position of an element based on the given scrollSize
749
- */
750
- getElementFromStart(scrollSize, collection, map, typicalItemSize, isVertical) {
751
- const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
752
- let offset = 0;
753
- for (let i = 0, l = collection.length; i < l; i++) {
754
- const item = collection[i];
755
- let itemSize = 0;
756
- if (map.has(item.id)) {
757
- const bounds = map.get(item.id);
758
- itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
759
- }
760
- else {
761
- itemSize = typicalItemSize;
762
- }
763
- if (offset > scrollSize) {
764
- return item;
765
- }
766
- offset += itemSize;
767
- }
768
- return undefined;
769
- }
770
- /**
771
- * Calculates the entry into the overscroll area and returns the number of overscroll elements
772
- */
773
- getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical, indexOffset = 0) {
774
- const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
775
- let offset = 0, num = 0;
776
- for (let j = collection.length - indexOffset - 1; j >= i; j--) {
777
- const item = collection[j];
778
- let itemSize = 0;
779
- if (map.has(item.id)) {
780
- const bounds = map.get(item.id);
781
- itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
782
- }
783
- else {
784
- itemSize = typicalItemSize;
785
- }
786
- offset += itemSize;
787
- num++;
788
- if (offset > size) {
789
- return { num: 0, offset };
790
- }
791
- }
792
- return { num, offset };
793
- }
794
- /**
795
- * Calculates list metrics
796
- */
797
- recalculateMetrics(options) {
798
- var _a, _b, _c, _d;
799
- const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
800
- const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, snapshot = this._snapshot, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
801
- || (typeof fromItemId === 'string' && fromItemId > '-1');
802
- let leftItemsOffset = 0, rightItemsOffset = 0;
803
- if (enabledBufferOptimization) {
804
- switch (this.scrollDirection) {
805
- case 1: {
806
- leftItemsOffset = 0;
807
- rightItemsOffset = itemsOffset;
808
- break;
809
- }
810
- case -1: {
811
- leftItemsOffset = itemsOffset;
812
- rightItemsOffset = 0;
813
- break;
814
- }
815
- case 0:
816
- default: {
817
- leftItemsOffset = rightItemsOffset = itemsOffset;
818
- }
819
- }
820
- }
821
- else {
822
- leftItemsOffset = rightItemsOffset = itemsOffset;
823
- }
824
- 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;
825
- // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
826
- if (dynamicSize) {
827
- let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
828
- for (let i = 0, l = collection.length; i < l; i++) {
829
- const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
830
- let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
831
- if (map.has(id)) {
832
- const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
833
- componentSize = bounds[sizeProperty];
834
- itemDisplayMethod = (_a = bounds === null || bounds === void 0 ? void 0 : bounds.method) !== null && _a !== void 0 ? _a : ItemDisplayMethods.UPDATE;
835
- switch (itemDisplayMethod) {
836
- case ItemDisplayMethods.UPDATE: {
837
- const snapshotBounds = snapshot.get(id);
838
- const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
839
- componentSizeDelta = componentSnapshotSize;
840
- map.set(id, Object.assign(Object.assign({}, bounds), { method: ItemDisplayMethods.NOT_CHANGED }));
841
- break;
842
- }
843
- case ItemDisplayMethods.CREATE: {
844
- componentSizeDelta = typicalItemSize;
845
- map.set(id, Object.assign(Object.assign({}, bounds), { method: ItemDisplayMethods.NOT_CHANGED }));
846
- break;
847
- }
848
- }
849
- }
850
- if (deletedItemsMap.hasOwnProperty(i)) {
851
- const bounds = deletedItemsMap[i], size = (_b = bounds[sizeProperty]) !== null && _b !== void 0 ? _b : typicalItemSize;
852
- if (y < scrollSize - size) {
853
- leftSizeOfDeletedItems += size;
854
- }
855
- }
856
- totalSize += componentSize;
857
- if (isFromId) {
858
- if (itemById === undefined) {
859
- if (id !== fromItemId && stickyMap && stickyMap[id] > 0) {
860
- stickyComponentSize = componentSize;
861
- stickyCollectionItem = collectionItem;
862
- }
863
- if (id === fromItemId) {
864
- targetDisplayItemIndex = i;
865
- if (stickyCollectionItem && stickyMap) {
866
- const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
867
- if (num > 0) {
868
- isTargetInOverscroll = true;
869
- y -= size - componentSize;
870
- }
871
- else {
872
- if (stickyMap && !stickyMap[collectionItem.id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
873
- const snappedY = scrollSize - stickyComponentSize;
874
- leftHiddenItemsWeight -= (snappedY - y);
875
- y = snappedY;
876
- }
877
- else {
878
- y -= stickyComponentSize;
879
- leftHiddenItemsWeight -= stickyComponentSize;
880
- }
881
- }
882
- }
883
- itemById = collectionItem;
884
- itemByIdPos = y;
885
- }
886
- else {
887
- leftItemsWeights.push(componentSize);
888
- leftHiddenItemsWeight += componentSize;
889
- itemsFromStartToScrollEnd = ii;
890
- }
891
- }
892
- }
893
- else if (y <= scrollSize - componentSize) {
894
- leftItemsWeights.push(componentSize);
895
- leftHiddenItemsWeight += componentSize;
896
- itemsFromStartToScrollEnd = ii;
897
- }
898
- if (isFromId) {
899
- if (itemById === undefined || y < itemByIdPos + size + componentSize) {
900
- itemsFromStartToDisplayEnd = ii;
901
- totalItemsToDisplayEndWeight += componentSize;
902
- itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
903
- }
904
- }
905
- else if (y <= scrollSize + size + componentSize) {
906
- itemsFromStartToDisplayEnd = ii;
907
- totalItemsToDisplayEndWeight += componentSize;
908
- itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
909
- if (y <= scrollSize - componentSize) {
910
- switch (itemDisplayMethod) {
911
- case ItemDisplayMethods.CREATE: {
912
- leftSizeOfAddedItems += componentSizeDelta;
913
- break;
914
- }
915
- case ItemDisplayMethods.UPDATE: {
916
- leftSizeOfUpdatedItems += componentSizeDelta;
917
- break;
918
- }
919
- case ItemDisplayMethods.DELETE: {
920
- leftSizeOfDeletedItems += componentSizeDelta;
921
- break;
922
- }
923
- }
924
- }
925
- }
926
- else {
927
- if (i < itemsFromDisplayEndToOffsetEnd) {
928
- rightItemsWeight += componentSize;
929
- }
930
- }
931
- y += componentSize;
932
- }
933
- if (isTargetInOverscroll) {
934
- const { num } = this.getElementNumToEnd(collection.length - (checkOverscrollItemsLimit < 0 ? 0 : collection.length - checkOverscrollItemsLimit), collection, map, typicalItemSize, size, isVertical, collection.length - (collection.length - (targetDisplayItemIndex + 1)));
935
- if (num > 0) {
936
- itemsFromStartToScrollEnd -= num;
937
- }
938
- }
939
- if (itemsFromStartToScrollEnd <= -1) {
940
- itemsFromStartToScrollEnd = 0;
941
- }
942
- if (itemsFromStartToDisplayEnd <= -1) {
943
- itemsFromStartToDisplayEnd = 0;
944
- }
945
- actualScrollSize = isFromId ? itemByIdPos : scrollSize;
946
- leftItemsWeights.splice(0, leftItemsWeights.length - leftItemsOffset);
947
- leftItemsWeights.forEach(v => {
948
- leftItemsWeight += v;
949
- });
950
- leftItemLength = Math.min(itemsFromStartToScrollEnd, leftItemsOffset);
951
- rightItemLength = itemsFromStartToDisplayEnd + rightItemsOffset > totalLength
952
- ? totalLength - itemsFromStartToDisplayEnd : rightItemsOffset;
953
- }
954
- else
955
- // Buffer optimization does not work on fast linear algorithm
956
- {
957
- if (crudDetected) {
958
- let y = 0;
959
- for (let i = 0, l = collection.length; i < l; i++) {
960
- const collectionItem = collection[i], id = collectionItem.id;
961
- let componentSize = typicalItemSize, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
962
- if (map.has(id)) {
963
- const bounds = map.get(id);
964
- itemDisplayMethod = (_c = bounds === null || bounds === void 0 ? void 0 : bounds.method) !== null && _c !== void 0 ? _c : ItemDisplayMethods.UPDATE;
965
- if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
966
- map.set(id, Object.assign(Object.assign({}, bounds), { method: ItemDisplayMethods.NOT_CHANGED }));
967
- }
968
- }
969
- if (deletedItemsMap.hasOwnProperty(i)) {
970
- const bounds = deletedItemsMap[i], size = (_d = bounds[sizeProperty]) !== null && _d !== void 0 ? _d : typicalItemSize;
971
- if (y < scrollSize - size) {
972
- leftSizeOfDeletedItems += size;
973
- }
974
- }
975
- if (y < scrollSize - componentSize) {
976
- switch (itemDisplayMethod) {
977
- case ItemDisplayMethods.CREATE: {
978
- leftSizeOfUpdatedItems += componentSize;
979
- break;
980
- }
981
- case ItemDisplayMethods.UPDATE: {
982
- leftSizeOfUpdatedItems += componentSize;
983
- break;
984
- }
985
- case ItemDisplayMethods.DELETE: {
986
- leftSizeOfDeletedItems += componentSize;
987
- break;
988
- }
989
- }
990
- }
991
- y += componentSize;
992
- }
993
- }
994
- itemsFromStartToScrollEnd = Math.floor(scrollSize / typicalItemSize);
995
- itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
996
- leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
997
- rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
998
- ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
999
- leftItemsWeight = leftItemLength * typicalItemSize;
1000
- rightItemsWeight = rightItemLength * typicalItemSize;
1001
- leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize;
1002
- totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize;
1003
- totalSize = totalLength * typicalItemSize;
1004
- const k = totalSize !== 0 ? previousTotalSize / totalSize : 0;
1005
- actualScrollSize = scrollSize * k;
1006
- }
1007
- startIndex = Math.min(itemsFromStartToScrollEnd - leftItemLength, totalLength > 0 ? totalLength - 1 : 0);
1008
- const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = leftSizeOfUpdatedItems + leftSizeOfAddedItems - leftSizeOfDeletedItems;
1009
- const metrics = {
1010
- delta,
1011
- normalizedItemWidth: w,
1012
- normalizedItemHeight: h,
1013
- width,
1014
- height,
1015
- dynamicSize,
1016
- itemSize,
1017
- itemsFromStartToScrollEnd,
1018
- itemsFromStartToDisplayEnd,
1019
- itemsOnDisplay,
1020
- itemsOnDisplayLength,
1021
- isVertical,
1022
- leftHiddenItemsWeight,
1023
- leftItemLength,
1024
- leftItemsWeight,
1025
- renderItems,
1026
- rightItemLength,
1027
- rightItemsWeight,
1028
- scrollSize: actualScrollSize,
1029
- leftSizeOfAddedItems,
1030
- sizeProperty,
1031
- snap,
1032
- snippedPos,
1033
- startIndex,
1034
- startPosition,
1035
- totalItemsToDisplayEndWeight,
1036
- totalLength,
1037
- totalSize,
1038
- typicalItemSize,
1039
- };
1040
- return metrics;
1041
- }
1042
- clearDeltaDirection() {
1043
- this.clearScrollDirectionCache();
1044
- }
1045
- clearDelta(clearDirectionDetector = false) {
1046
- this._delta = 0;
1047
- if (clearDirectionDetector) {
1048
- this.clearScrollDirectionCache();
1049
- }
1050
- }
1051
- changes() {
1052
- this.bumpVersion();
1053
- }
1054
- generateDisplayCollection(items, stickyMap, metrics) {
1055
- var _a, _b;
1056
- const { normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
1057
- if (items.length) {
1058
- const actualSnippedPosition = snippedPos;
1059
- let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0;
1060
- if (snap) {
1061
- for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
1062
- const id = items[i].id, sticky = stickyMap[id], size = dynamicSize ? ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a[sizeProperty]) || typicalItemSize : typicalItemSize;
1063
- if (sticky > 0) {
1064
- const measures = {
1065
- x: isVertical ? 0 : actualSnippedPosition,
1066
- y: isVertical ? actualSnippedPosition : 0,
1067
- width: normalizedItemWidth,
1068
- height: normalizedItemHeight,
1069
- }, config = {
1070
- isVertical,
1071
- sticky,
1072
- snap,
1073
- snapped: true,
1074
- snappedOut: false,
1075
- dynamic: dynamicSize,
1076
- };
1077
- const itemData = items[i];
1078
- stickyItem = { id, measures, data: itemData, config };
1079
- stickyItemIndex = i;
1080
- stickyItemSize = size;
1081
- displayItems.push(stickyItem);
1082
- break;
1083
- }
1084
- }
1085
- }
1086
- let i = startIndex;
1087
- while (renderItems > 0) {
1088
- if (i >= totalLength) {
1089
- break;
1090
- }
1091
- const id = items[i].id, size = dynamicSize ? ((_b = this.get(id)) === null || _b === void 0 ? void 0 : _b[sizeProperty]) || typicalItemSize : typicalItemSize;
1092
- if (id !== (stickyItem === null || stickyItem === void 0 ? void 0 : stickyItem.id)) {
1093
- const snapped = snap && stickyMap[id] > 0 && pos <= scrollSize, measures = {
1094
- x: isVertical ? 0 : pos,
1095
- y: isVertical ? pos : 0,
1096
- width: normalizedItemWidth,
1097
- height: normalizedItemHeight,
1098
- }, config = {
1099
- isVertical,
1100
- sticky: stickyMap[id],
1101
- snap,
1102
- snapped: false,
1103
- snappedOut: false,
1104
- dynamic: dynamicSize,
1105
- };
1106
- const itemData = items[i];
1107
- const item = { id, measures, data: itemData, config };
1108
- if (!nextSticky && stickyItemIndex < i && stickyMap[id] > 0 && pos <= scrollSize + size + stickyItemSize) {
1109
- item.measures.x = isVertical ? 0 : snapped ? actualSnippedPosition : pos;
1110
- item.measures.y = isVertical ? snapped ? actualSnippedPosition : pos : 0;
1111
- nextSticky = item;
1112
- nextSticky.config.snapped = snapped;
1113
- }
1114
- displayItems.push(item);
1115
- }
1116
- renderItems -= 1;
1117
- pos += size;
1118
- i++;
1119
- }
1120
- const axis = isVertical ? Y_PROP_NAME : X_PROP_NAME;
1121
- if (nextSticky && stickyItem && nextSticky.measures[axis] <= scrollSize + stickyItemSize) {
1122
- if (nextSticky.measures[axis] > scrollSize) {
1123
- stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItemSize;
1124
- stickyItem.config.snapped = nextSticky.config.snapped = false;
1125
- stickyItem.config.snappedOut = true;
1126
- stickyItem.config.sticky = 1;
1127
- }
1128
- else {
1129
- nextSticky.config.snapped = true;
1130
- }
1131
- }
1132
- }
1133
- return displayItems;
1134
- }
1135
- /**
1136
- * tracking by propName
1137
- */
1138
- track() {
1139
- if (!this._items || !this._displayComponents) {
1140
- return;
1141
- }
1142
- this._tracker.track(this._items, this._displayComponents, this.scrollDirection);
1143
- }
1144
- setDisplayObjectIndexMapById(v) {
1145
- this._tracker.displayObjectIndexMapById = v;
1146
- }
1147
- untrackComponentByIdProperty(component) {
1148
- this._tracker.untrackComponentByIdProperty(component);
1149
- }
1150
- getItemBounds(id) {
1151
- if (this.has(id)) {
1152
- return this.get(id);
1153
- }
1154
- return undefined;
1155
- }
1156
- cacheElements() {
1157
- if (!this._displayComponents) {
1158
- return;
1159
- }
1160
- for (let i = 0, l = this._displayComponents.length; i < l; i++) {
1161
- const component = this._displayComponents[i], itemId = component.instance.itemId;
1162
- if (itemId === undefined) {
1163
- continue;
1164
- }
1165
- const bounds = component.instance.getBounds();
1166
- this.set(itemId, bounds);
1167
- }
1168
- }
1169
- dispose() {
1170
- super.dispose();
1171
- if (this._tracker) {
1172
- this._tracker.dispose();
1173
- }
1174
- }
1175
- }
1176
-
1177
- /**
1178
- * Scroll event.
1179
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
1180
- * @author Evgenii Grebennikov
1181
- * @email djonnyx@gmail.com
1182
- */
1183
- class ScrollEvent {
1184
- get direction() { return this._direction; }
1185
- get scrollSize() { return this._scrollSize; }
1186
- get scrollWeight() { return this._scrollWeight; }
1187
- get isVertical() { return this._isVertical; }
1188
- get listSize() { return this._listSize; }
1189
- get size() { return this._size; }
1190
- get isStart() { return this._isStart; }
1191
- get isEnd() { return this._isEnd; }
1192
- get delta() { return this._delta; }
1193
- get scrollDelta() { return this._scrollDelta; }
1194
- constructor(params) {
1195
- this._direction = 1;
1196
- this._scrollSize = 0;
1197
- this._scrollWeight = 0;
1198
- this._isVertical = true;
1199
- this._listSize = 0;
1200
- this._size = 0;
1201
- this._isStart = true;
1202
- this._isEnd = false;
1203
- this._delta = 0;
1204
- this._scrollDelta = 0;
1205
- const { direction, isVertical, container, list, delta, scrollDelta } = params;
1206
- this._direction = direction;
1207
- this._isVertical = isVertical;
1208
- this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
1209
- this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
1210
- this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
1211
- this._size = isVertical ? container.offsetHeight : container.offsetWidth;
1212
- this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
1213
- this._delta = delta;
1214
- this._scrollDelta = scrollDelta;
1215
- this._isStart = this._scrollSize === 0;
1216
- }
1217
- }
1218
-
1219
- /**
1220
- * Base disposable component
1221
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/disposableComponent.ts
1222
- * @author Evgenii Grebennikov
1223
- * @email djonnyx@gmail.com
1224
- */
1225
- class DisposableComponent {
1226
- constructor() {
1227
- this._$unsubscribe = new Subject();
1228
- }
1229
- ngOnDestroy() {
1230
- if (this._$unsubscribe) {
1231
- this._$unsubscribe.next();
1232
- this._$unsubscribe.complete();
1233
- }
1234
- }
1235
- }
1236
- DisposableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisposableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1237
- DisposableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DisposableComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
1238
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisposableComponent, decorators: [{
1239
- type: Component,
1240
- args: [{
1241
- template: ``,
1242
- }]
1243
- }] });
1244
-
1245
- /**
1246
- * Virtual list component.
1247
- * Maximum performance for extremely large lists.
1248
- * It is based on algorithms for virtualization of screen objects.
1249
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts
1250
- * @author Evgenii Grebennikov
1251
- * @email djonnyx@gmail.com
1252
- */
1253
- class NgVirtualListComponent extends DisposableComponent {
1254
- /**
1255
- * Readonly. Returns the unique identifier of the component.
1256
- */
1257
- get id() { return this._id; }
1258
- /**
1259
- * Collection of list items.
1260
- */
1261
- set items(v) {
1262
- if (this._$items.getValue() === v) {
1263
- return;
1264
- }
1265
- const transformedValue = this._itemsTransform(v);
1266
- this._$items.next(transformedValue);
1267
- this._cdr.markForCheck();
1268
- }
1269
- ;
1270
- get items() { return this._$items.getValue(); }
1271
- /**
1272
- * Determines whether elements will snap. Default value is "true".
1273
- */
1274
- set snap(v) {
1275
- if (this._$snap.getValue() === v) {
1276
- return;
1277
- }
1278
- this._$snap.next(v);
1279
- this._cdr.markForCheck();
1280
- }
1281
- ;
1282
- get snap() { return this._$snap.getValue(); }
1283
- /**
1284
- * Experimental!
1285
- * Enables buffer optimization.
1286
- * Can only be used if items in the collection are not added or updated. Otherwise, artifacts in the form of twitching of the scroll area are possible.
1287
- * Works only if the property dynamic = true
1288
- */
1289
- set enabledBufferOptimization(v) {
1290
- if (this._$enabledBufferOptimization.getValue() === v) {
1291
- return;
1292
- }
1293
- this._$enabledBufferOptimization.next(v);
1294
- this._cdr.markForCheck();
1295
- }
1296
- ;
1297
- get enabledBufferOptimization() { return this._$enabledBufferOptimization.getValue(); }
1298
- /**
1299
- * Rendering element template.
1300
- */
1301
- set itemRenderer(v) {
1302
- if (this._$itemRenderer.getValue() === v) {
1303
- return;
1304
- }
1305
- this._$itemRenderer.next(v);
1306
- this._cdr.markForCheck();
1307
- }
1308
- ;
1309
- get itemRenderer() { return this._$itemRenderer.getValue(); }
1310
- /**
1311
- * Dictionary zIndex by id of the list element. If the value is not set or equal to 0,
1312
- * then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element.
1313
- */
1314
- set stickyMap(v) {
1315
- if (this._$stickyMap.getValue() === v) {
1316
- return;
1317
- }
1318
- this._$stickyMap.next(v);
1319
- this._cdr.markForCheck();
1320
- }
1321
- ;
1322
- get stickyMap() { return this._$stickyMap.getValue(); }
1323
- /**
1324
- * If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element.
1325
- * Ignored if the dynamicSize property is true.
1326
- */
1327
- set itemSize(v) {
1328
- if (this._$itemSize.getValue() === v) {
1329
- return;
1330
- }
1331
- this._$itemSize.next(this._itemSizeOptions(v));
1332
- this._cdr.markForCheck();
1333
- }
1334
- ;
1335
- get itemSize() { return this._$itemSize.getValue(); }
1336
- /**
1337
- * If true then the items in the list can have different sizes and the itemSize property is ignored.
1338
- * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
1339
- */
1340
- set dynamicSize(v) {
1341
- if (this._$dynamicSize.getValue() === v) {
1342
- return;
1343
- }
1344
- this._$dynamicSize.next(v);
1345
- this._cdr.markForCheck();
1346
- }
1347
- ;
1348
- get dynamicSize() { return this._$dynamicSize.getValue(); }
1349
- /**
1350
- * Determines the direction in which elements are placed. Default value is "vertical".
1351
- */
1352
- set direction(v) {
1353
- if (this._$direction.getValue() === v) {
1354
- return;
1355
- }
1356
- this._$direction.next(v);
1357
- this._cdr.markForCheck();
1358
- }
1359
- ;
1360
- get direction() { return this._$direction.getValue(); }
1361
- /**
1362
- * Number of elements outside the scope of visibility. Default value is 2.
1363
- */
1364
- set itemsOffset(v) {
1365
- if (this._$itemsOffset.getValue() === v) {
1366
- return;
1367
- }
1368
- this._$itemsOffset.next(v);
1369
- }
1370
- ;
1371
- get itemsOffset() { return this._$itemsOffset.getValue(); }
1372
- /**
1373
- * The name of the property by which tracking is performed
1374
- */
1375
- set trackBy(v) {
1376
- if (this._$trackBy.getValue() === v) {
1377
- return;
1378
- }
1379
- this._$trackBy.next(v);
1380
- }
1381
- ;
1382
- get trackBy() { return this._$trackBy.getValue(); }
1383
- get $cacheVersion() { return this._$cacheVersion.asObservable(); }
1384
- constructor(_cdr, _elementRef) {
1385
- super();
1386
- this._cdr = _cdr;
1387
- this._elementRef = _elementRef;
1388
- this._id = NgVirtualListComponent.__nextId;
1389
- /**
1390
- * Fires when the list has been scrolled.
1391
- */
1392
- this.onScroll = new EventEmitter$1();
1393
- /**
1394
- * Fires when the list has completed scrolling.
1395
- */
1396
- this.onScrollEnd = new EventEmitter$1();
1397
- this._$items = new BehaviorSubject(undefined);
1398
- this.$items = this._$items.asObservable();
1399
- this._itemsTransform = (v) => {
1400
- this._trackBox.resetCollection(v, this._$itemSize.getValue());
1401
- return v;
1402
- };
1403
- this._$snap = new BehaviorSubject(DEFAULT_SNAP);
1404
- this.$snap = this._$snap.asObservable();
1405
- this._$enabledBufferOptimization = new BehaviorSubject(DEFAULT_ENABLED_BUFFER_OPTIMIZATION);
1406
- this.$enabledBufferOptimization = this._$enabledBufferOptimization.asObservable();
1407
- this._$itemRenderer = new BehaviorSubject(undefined);
1408
- this.$itemRenderer = this._$itemRenderer.asObservable();
1409
- this._$stickyMap = new BehaviorSubject({});
1410
- this.$stickyMap = this._$stickyMap.asObservable();
1411
- this._itemSizeOptions = (v) => {
1412
- if (v === undefined) {
1413
- return DEFAULT_ITEM_SIZE;
1414
- }
1415
- const val = Number(v);
1416
- return Number.isNaN(val) || val <= 0 ? DEFAULT_ITEM_SIZE : val;
1417
- };
1418
- this._$itemSize = new BehaviorSubject(DEFAULT_ITEM_SIZE);
1419
- this.$itemSize = this._$itemSize.asObservable();
1420
- this._$dynamicSize = new BehaviorSubject(DEFAULT_DYNAMIC_SIZE);
1421
- this.$dynamicSize = this._$dynamicSize.asObservable();
1422
- this._$direction = new BehaviorSubject(DEFAULT_DIRECTION);
1423
- this.$direction = this._$direction.asObservable();
1424
- this._$itemsOffset = new BehaviorSubject(DEFAULT_ITEMS_OFFSET);
1425
- this.$itemsOffset = this._$itemsOffset.asObservable();
1426
- this._$trackBy = new BehaviorSubject(TRACK_BY_PROPERTY_NAME);
1427
- this.$trackBy = this._$trackBy.asObservable();
1428
- this._isVertical = this.getIsVertical();
1429
- this._displayComponents = [];
1430
- this._$bounds = new BehaviorSubject(null);
1431
- this._$scrollSize = new BehaviorSubject(0);
1432
- this._resizeObserver = null;
1433
- this._onResizeHandler = () => {
1434
- var _a, _b, _c;
1435
- this._$bounds.next((_c = (_b = (_a = this._container) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) !== null && _c !== void 0 ? _c : null);
1436
- };
1437
- this._onScrollHandler = (e) => {
1438
- var _a;
1439
- this.clearScrollToRepeatExecutionTimeout();
1440
- const container = (_a = this._container) === null || _a === void 0 ? void 0 : _a.nativeElement;
1441
- if (container) {
1442
- const scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft);
1443
- this._$scrollSize.next(scrollSize);
1444
- }
1445
- };
1446
- this._$initialized = new BehaviorSubject(false);
1447
- /**
1448
- * Dictionary of element sizes by their id
1449
- */
1450
- this._trackBox = new TrackBox(this.trackBy);
1451
- this._onTrackBoxChangeHandler = (v) => {
1452
- this._$cacheVersion.next(v);
1453
- };
1454
- this._$cacheVersion = new BehaviorSubject(-1);
1455
- this._componentsResizeObserver = new ResizeObserver(() => {
1456
- this._trackBox.changes();
1457
- });
1458
- this._onContainerScrollHandler = (e) => {
1459
- const containerEl = this._container;
1460
- if (containerEl) {
1461
- const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
1462
- this._trackBox.deltaDirection = this._$scrollSize.getValue() > scrollSize ? -1 : this._$scrollSize.getValue() < scrollSize ? 1 : 0;
1463
- const event = new ScrollEvent({
1464
- direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
1465
- list: this._list.nativeElement, delta: this._trackBox.delta,
1466
- scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
1467
- });
1468
- this.onScroll.emit(event);
1469
- }
1470
- };
1471
- this._onContainerScrollEndHandler = (e) => {
1472
- const containerEl = this._container;
1473
- if (containerEl) {
1474
- const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
1475
- this._trackBox.deltaDirection = this._$scrollSize.getValue() > scrollSize ? -1 : 0;
1476
- const event = new ScrollEvent({
1477
- direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
1478
- list: this._list.nativeElement, delta: this._trackBox.delta,
1479
- scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
1480
- });
1481
- this.onScrollEnd.emit(event);
1482
- }
1483
- };
1484
- NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
1485
- ? 0 : NgVirtualListComponent.__nextId + 1;
1486
- this._id = NgVirtualListComponent.__nextId;
1487
- this._$initialized = new BehaviorSubject(false);
1488
- this.$initialized = this._$initialized.asObservable();
1489
- this._trackBox.displayComponents = this._displayComponents;
1490
- const $trackBy = this.$trackBy;
1491
- $trackBy.pipe(takeUntil(this._$unsubscribe), tap(v => {
1492
- this._trackBox.trackingPropertyName = v;
1493
- })).subscribe();
1494
- const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = this.$itemsOffset.pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $cacheVersion = this.$cacheVersion;
1495
- $isVertical.pipe(takeUntil(this._$unsubscribe), tap(v => {
1496
- this._isVertical = v;
1497
- const el = this._elementRef.nativeElement;
1498
- toggleClassName(el, v ? CLASS_LIST_VERTICAL : CLASS_LIST_HORIZONTAL, true);
1499
- })).subscribe();
1500
- $dynamicSize.pipe(takeUntil(this._$unsubscribe), tap(dynamicSize => {
1501
- this.listenCacheChangesIfNeed(dynamicSize);
1502
- })).subscribe();
1503
- combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
1504
- $itemsOffset, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
1505
- ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
1506
- var _a, _b, _c, _d;
1507
- const { width, height } = bounds;
1508
- let actualScrollSize = (_d = (this._isVertical ? (_b = (_a = this._container) === null || _a === void 0 ? void 0 : _a.nativeElement.scrollTop) !== null && _b !== void 0 ? _b : 0 : (_c = this._container) === null || _c === void 0 ? void 0 : _c.nativeElement.scrollLeft)) !== null && _d !== void 0 ? _d : 0;
1509
- const opts = {
1510
- bounds: { width, height }, dynamicSize, isVertical, itemSize,
1511
- itemsOffset, scrollSize: scrollSize, snap, enabledBufferOptimization,
1512
- };
1513
- const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, Object.assign(Object.assign({}, opts), { scrollSize: actualScrollSize }));
1514
- this.resetBoundsSize(isVertical, totalSize);
1515
- this.createDisplayComponentsIfNeed(displayItems);
1516
- this.tracking();
1517
- const container = this._container;
1518
- if (container) {
1519
- const delta = this._trackBox.delta;
1520
- actualScrollSize = actualScrollSize + delta;
1521
- this._trackBox.clearDelta();
1522
- if (scrollSize !== actualScrollSize) {
1523
- const params = {
1524
- [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
1525
- behavior: BEHAVIOR_INSTANT
1526
- };
1527
- container.nativeElement.scrollTo(params);
1528
- }
1529
- }
1530
- return of(displayItems);
1531
- })).subscribe();
1532
- combineLatest([this.$initialized, this.$itemRenderer]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
1533
- this.resetRenderers(itemRenderer);
1534
- }));
1535
- }
1536
- ngOnInit() {
1537
- this._$initialized.next(true);
1538
- }
1539
- listenCacheChangesIfNeed(value) {
1540
- if (value) {
1541
- if (!this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
1542
- this._trackBox.addEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
1543
- }
1544
- }
1545
- else {
1546
- if (this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
1547
- this._trackBox.removeEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
1548
- }
1549
- }
1550
- }
1551
- getIsVertical(d) {
1552
- const dir = d || this.direction;
1553
- return isDirection(dir, Directions.VERTICAL);
1554
- }
1555
- createDisplayComponentsIfNeed(displayItems) {
1556
- if (!displayItems || !this._listContainerRef) {
1557
- this._trackBox.setDisplayObjectIndexMapById({});
1558
- return;
1559
- }
1560
- this._trackBox.items = displayItems;
1561
- const _listContainerRef = this._listContainerRef;
1562
- const maxLength = displayItems.length, components = this._displayComponents;
1563
- while (components.length < maxLength) {
1564
- if (_listContainerRef) {
1565
- const comp = _listContainerRef.createComponent(NgVirtualListItemComponent);
1566
- components.push(comp);
1567
- this._componentsResizeObserver.observe(comp.instance.element);
1568
- }
1569
- }
1570
- this.resetRenderers();
1571
- }
1572
- resetRenderers(itemRenderer) {
1573
- const doMap = {};
1574
- for (let i = 0, l = this._displayComponents.length; i < l; i++) {
1575
- const item = this._displayComponents[i];
1576
- item.instance.renderer = itemRenderer || this.itemRenderer;
1577
- doMap[item.instance.id] = i;
1578
- }
1579
- this._trackBox.setDisplayObjectIndexMapById(doMap);
1580
- }
1581
- /**
1582
- * Tracking by id
1583
- */
1584
- tracking() {
1585
- this._trackBox.track();
1586
- }
1587
- resetBoundsSize(isVertical, totalSize) {
1588
- const l = this._list;
1589
- if (l) {
1590
- l.nativeElement.style[isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME] = `${totalSize}${PX}`;
1591
- }
1592
- }
1593
- /**
1594
- * Returns the bounds of an element with a given id
1595
- */
1596
- getItemBounds(id) {
1597
- return this._trackBox.getItemBounds(id);
1598
- }
1599
- /**
1600
- * The method scrolls the list to the element with the given id and returns the value of the scrolled area.
1601
- * Behavior accepts the values ​​"auto", "instant" and "smooth".
1602
- */
1603
- scrollTo(id, behavior = BEHAVIOR_AUTO) {
1604
- this.scrollToExecutor(id, behavior);
1605
- }
1606
- clearScrollToRepeatExecutionTimeout() {
1607
- clearTimeout(this._scrollToRepeatExecutionTimeout);
1608
- }
1609
- scrollToExecutor(id, behavior, iteration = 0, isLastIteration = false) {
1610
- const items = this.items;
1611
- if (!items || !items.length) {
1612
- return;
1613
- }
1614
- const dynamicSize = this.dynamicSize, container = this._container, itemSize = this.itemSize;
1615
- if (container) {
1616
- this.clearScrollToRepeatExecutionTimeout();
1617
- if (dynamicSize) {
1618
- if (container) {
1619
- container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
1620
- }
1621
- const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
1622
- bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
1623
- itemsOffset: this.itemsOffset, scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
1624
- snap: this.snap, fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization,
1625
- }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
1626
- this._trackBox.clearDelta();
1627
- if (container) {
1628
- const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, Object.assign(Object.assign({}, opts), { scrollSize, fromItemId: isLastIteration ? undefined : id })), delta = this._trackBox.delta;
1629
- this._trackBox.clearDelta();
1630
- let actualScrollSize = scrollSize + delta;
1631
- this.resetBoundsSize(isVertical, totalSize);
1632
- this.createDisplayComponentsIfNeed(displayItems);
1633
- this.tracking();
1634
- const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, Object.assign(Object.assign({}, opts), { scrollSize: actualScrollSize, fromItemId: id }));
1635
- const notChanged = actualScrollSize === _scrollSize;
1636
- if (!notChanged || iteration < MAX_SCROLL_TO_ITERATIONS) {
1637
- this.clearScrollToRepeatExecutionTimeout();
1638
- this._scrollToRepeatExecutionTimeout = setTimeout(() => {
1639
- this.scrollToExecutor(id, BEHAVIOR_INSTANT, iteration + 1, notChanged);
1640
- });
1641
- }
1642
- else {
1643
- this._$scrollSize.next(actualScrollSize);
1644
- container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
1645
- }
1646
- }
1647
- container.nativeElement.scrollTo(params);
1648
- this._$scrollSize.next(scrollSize);
1649
- }
1650
- else {
1651
- const index = items.findIndex(item => item.id === id), scrollSize = index * this.itemSize;
1652
- const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
1653
- container.nativeElement.scrollTo(params);
1654
- }
1655
- }
1656
- }
1657
- /**
1658
- * Scrolls the scroll area to the desired element with the specified ID.
1659
- */
1660
- scrollToEnd(behavior = BEHAVIOR_INSTANT) {
1661
- const items = this.items, latItem = items[items.length > 0 ? items.length - 1 : 0];
1662
- this.scrollTo(latItem.id, behavior);
1663
- }
1664
- ngAfterViewInit() {
1665
- const containerEl = this._container;
1666
- if (containerEl) {
1667
- // for direction calculation
1668
- containerEl.nativeElement.addEventListener(SCROLL, this._onContainerScrollHandler);
1669
- containerEl.nativeElement.addEventListener(SCROLL_END, this._onContainerScrollEndHandler);
1670
- containerEl.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
1671
- this._resizeObserver = new ResizeObserver(this._onResizeHandler);
1672
- this._resizeObserver.observe(containerEl.nativeElement);
1673
- this._onResizeHandler();
1674
- }
1675
- }
1676
- ngOnDestroy() {
1677
- super.ngOnDestroy();
1678
- this.clearScrollToRepeatExecutionTimeout();
1679
- if (this._trackBox) {
1680
- this._trackBox.dispose();
1681
- }
1682
- const containerEl = this._container;
1683
- if (containerEl) {
1684
- containerEl.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
1685
- containerEl.nativeElement.removeEventListener(SCROLL, this._onContainerScrollHandler);
1686
- containerEl.nativeElement.removeEventListener(SCROLL_END, this._onContainerScrollEndHandler);
1687
- if (this._componentsResizeObserver) {
1688
- this._componentsResizeObserver.disconnect();
1689
- }
1690
- if (this._resizeObserver) {
1691
- this._resizeObserver.disconnect();
1692
- }
1693
- }
1694
- if (this._displayComponents) {
1695
- while (this._displayComponents.length > 0) {
1696
- const comp = this._displayComponents.pop();
1697
- comp === null || comp === void 0 ? void 0 : comp.destroy();
1698
- }
1699
- }
1700
- }
1701
- }
1702
- NgVirtualListComponent.__nextId = 0;
1703
- NgVirtualListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1704
- NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset", trackBy: "trackBy" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, 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) }], usesInheritance: true, ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n <ul #list part=\"list\" class=\"ngvl__list\">\r\n <ng-container #renderersContainer></ng-container>\r\n </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
1705
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListComponent, decorators: [{
1706
- type: Component,
1707
- args: [{ selector: 'ng-virtual-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n <ul #list part=\"list\" class=\"ngvl__list\">\r\n <ng-container #renderersContainer></ng-container>\r\n </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
1708
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { _listContainerRef: [{
1709
- type: ViewChild,
1710
- args: ['renderersContainer', { read: ViewContainerRef }]
1711
- }], _container: [{
1712
- type: ViewChild,
1713
- args: ['container', { read: (ElementRef) }]
1714
- }], _list: [{
1715
- type: ViewChild,
1716
- args: ['list', { read: (ElementRef) }]
1717
- }], onScroll: [{
1718
- type: Output
1719
- }], onScrollEnd: [{
1720
- type: Output
1721
- }], items: [{
1722
- type: Input
1723
- }], snap: [{
1724
- type: Input
1725
- }], enabledBufferOptimization: [{
1726
- type: Input
1727
- }], itemRenderer: [{
1728
- type: Input
1729
- }], stickyMap: [{
1730
- type: Input
1731
- }], itemSize: [{
1732
- type: Input
1733
- }], dynamicSize: [{
1734
- type: Input
1735
- }], direction: [{
1736
- type: Input
1737
- }], itemsOffset: [{
1738
- type: Input
1739
- }], trackBy: [{
1740
- type: Input
1741
- }] } });
1742
-
1743
- class NgVirtualListModule {
1744
- }
1745
- NgVirtualListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1746
- NgVirtualListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, declarations: [NgVirtualListComponent, NgVirtualListItemComponent], imports: [CommonModule], exports: [NgVirtualListComponent] });
1747
- NgVirtualListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, imports: [CommonModule] });
1748
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, decorators: [{
1749
- type: NgModule,
1750
- args: [{
1751
- declarations: [NgVirtualListComponent, NgVirtualListItemComponent],
1752
- exports: [NgVirtualListComponent],
1753
- imports: [CommonModule],
1754
- schemas: [NO_ERRORS_SCHEMA],
1755
- }]
1756
- }] });
1757
-
1758
- /*
1759
- * Public API Surface of ng-virtual-list
1760
- */
1761
-
1762
- /**
1763
- * Generated bundle index. Do not edit.
1764
- */
1765
-
1766
- export { NgVirtualListComponent, NgVirtualListModule };
1767
- //# sourceMappingURL=ng-virtual-list.mjs.map