ng-virtual-list 16.7.0 → 16.7.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 (71) hide show
  1. package/README.md +19 -16
  2. package/esm2022/lib/components/ng-virtual-list-item.component.mjs +28 -8
  3. package/esm2022/lib/const/index.mjs +2 -1
  4. package/esm2022/lib/models/index.mjs +1 -1
  5. package/esm2022/lib/models/item-config-map.model.mjs +2 -0
  6. package/esm2022/lib/models/render-item-config.model.mjs +1 -1
  7. package/esm2022/lib/ng-virtual-list.component.mjs +63 -26
  8. package/esm2022/lib/ng-virtual-list.service.mjs +46 -9
  9. package/esm2022/lib/utils/trackBox.mjs +22 -19
  10. package/fesm2022/ng-virtual-list.mjs +154 -56
  11. package/fesm2022/ng-virtual-list.mjs.map +1 -1
  12. package/lib/components/ng-virtual-list-item.component.d.ts +25 -5
  13. package/lib/const/index.d.ts +1 -0
  14. package/lib/models/index.d.ts +2 -2
  15. package/lib/models/item-config-map.model.d.ts +23 -0
  16. package/lib/models/render-item-config.model.d.ts +5 -1
  17. package/lib/ng-virtual-list.component.d.ts +25 -8
  18. package/lib/ng-virtual-list.service.d.ts +7 -0
  19. package/lib/utils/trackBox.d.ts +4 -4
  20. package/package.json +1 -1
  21. package/esm2020/lib/components/ng-virtual-list-item.component.mjs +0 -198
  22. package/esm2020/lib/const/index.mjs +0 -51
  23. package/esm2020/lib/enums/direction.mjs +0 -2
  24. package/esm2020/lib/enums/directions.mjs +0 -18
  25. package/esm2020/lib/enums/index.mjs +0 -5
  26. package/esm2020/lib/enums/method-for-selecting-types.mjs +0 -22
  27. package/esm2020/lib/enums/method-for-selecting.mjs +0 -2
  28. package/esm2020/lib/enums/methods-for-selecting.mjs +0 -22
  29. package/esm2020/lib/enums/snapping-method.mjs +0 -2
  30. package/esm2020/lib/enums/snapping-methods.mjs +0 -18
  31. package/esm2020/lib/models/base-virtual-list-item-component.mjs +0 -9
  32. package/esm2020/lib/models/collection.model.mjs +0 -3
  33. package/esm2020/lib/models/component.model.mjs +0 -2
  34. package/esm2020/lib/models/index.mjs +0 -2
  35. package/esm2020/lib/models/item.model.mjs +0 -2
  36. package/esm2020/lib/models/render-collection.model.mjs +0 -3
  37. package/esm2020/lib/models/render-item-config.model.mjs +0 -2
  38. package/esm2020/lib/models/render-item.model.mjs +0 -3
  39. package/esm2020/lib/models/scroll-direction.model.mjs +0 -2
  40. package/esm2020/lib/models/scroll-event.model.mjs +0 -2
  41. package/esm2020/lib/models/sticky-map.model.mjs +0 -2
  42. package/esm2020/lib/ng-virtual-list.component.mjs +0 -800
  43. package/esm2020/lib/ng-virtual-list.module.mjs +0 -20
  44. package/esm2020/lib/ng-virtual-list.service.mjs +0 -94
  45. package/esm2020/lib/types/id.mjs +0 -2
  46. package/esm2020/lib/types/index.mjs +0 -2
  47. package/esm2020/lib/types/rect.mjs +0 -2
  48. package/esm2020/lib/types/size.mjs +0 -2
  49. package/esm2020/lib/utils/browser.mjs +0 -3
  50. package/esm2020/lib/utils/buffer-interpolation.mjs +0 -27
  51. package/esm2020/lib/utils/cacheMap.mjs +0 -167
  52. package/esm2020/lib/utils/debounce.mjs +0 -31
  53. package/esm2020/lib/utils/disposableComponent.mjs +0 -29
  54. package/esm2020/lib/utils/eventEmitter.mjs +0 -106
  55. package/esm2020/lib/utils/index.mjs +0 -5
  56. package/esm2020/lib/utils/isDirection.mjs +0 -15
  57. package/esm2020/lib/utils/isMethodForSelecting.mjs +0 -18
  58. package/esm2020/lib/utils/scrollEvent.mjs +0 -42
  59. package/esm2020/lib/utils/snapping-method.mjs +0 -9
  60. package/esm2020/lib/utils/toggleClassName.mjs +0 -15
  61. package/esm2020/lib/utils/trackBox.mjs +0 -762
  62. package/esm2020/lib/utils/tracker.mjs +0 -143
  63. package/esm2020/ng-virtual-list.mjs +0 -5
  64. package/esm2020/public-api.mjs +0 -10
  65. package/esm2022/lib/models/sticky-map.model.mjs +0 -2
  66. package/fesm2015/ng-virtual-list.mjs +0 -2582
  67. package/fesm2015/ng-virtual-list.mjs.map +0 -1
  68. package/fesm2020/ng-virtual-list.mjs +0 -2586
  69. package/fesm2020/ng-virtual-list.mjs.map +0 -1
  70. package/lib/models/sticky-map.model.d.ts +0 -14
  71. package/lib/utils/disposableComponent.d.ts +0 -15
@@ -1,2586 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, ViewContainerRef, ElementRef, ViewEncapsulation, ViewChild, Output, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
3
- import { takeUntil as takeUntil$1, map, tap as tap$1 } from 'rxjs/operators';
4
- import { Subject, takeUntil, tap, BehaviorSubject as BehaviorSubject$1, combineLatest, filter, map as map$1, debounceTime, distinctUntilChanged, switchMap, of } from 'rxjs';
5
- import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
6
- import * as i2 from '@angular/common';
7
- import { CommonModule } from '@angular/common';
8
-
9
- /**
10
- * Axis of the arrangement of virtual list elements.
11
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/enums/directions.ts
12
- * @author Evgenii Grebennikov
13
- * @email djonnyx@gmail.com
14
- */
15
- var Directions;
16
- (function (Directions) {
17
- /**
18
- * Horizontal axis.
19
- */
20
- Directions["HORIZONTAL"] = "horizontal";
21
- /**
22
- * Vertical axis.
23
- */
24
- Directions["VERTICAL"] = "vertical";
25
- })(Directions || (Directions = {}));
26
-
27
- /**
28
- * Methods for selecting list items.
29
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/enums/methods-for-selecting.ts
30
- * @author Evgenii Grebennikov
31
- * @email djonnyx@gmail.com
32
- */
33
- var MethodsForSelecting;
34
- (function (MethodsForSelecting) {
35
- /**
36
- * List items are not selectable.
37
- */
38
- MethodsForSelecting["NONE"] = "none";
39
- /**
40
- * List items are selected one by one.
41
- */
42
- MethodsForSelecting["SELECT"] = "select";
43
- /**
44
- * Multiple selection of list items.
45
- */
46
- MethodsForSelecting["MULTI_SELECT"] = "multi-select";
47
- })(MethodsForSelecting || (MethodsForSelecting = {}));
48
-
49
- /**
50
- * Snapping method.
51
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts
52
- * @author Evgenii Grebennikov
53
- * @email djonnyx@gmail.com
54
- */
55
- var SnappingMethods;
56
- (function (SnappingMethods) {
57
- /**
58
- * Normal group rendering.
59
- */
60
- SnappingMethods["NORMAL"] = "normal";
61
- /**
62
- * The group is rendered on a transparent background. List items below the group are not rendered.
63
- */
64
- SnappingMethods["ADVANCED"] = "advanced";
65
- })(SnappingMethods || (SnappingMethods = {}));
66
-
67
- const DEFAULT_ITEM_SIZE = 24;
68
- const DEFAULT_BUFFER_SIZE = 2;
69
- const DEFAULT_MAX_BUFFER_SIZE = 100;
70
- const DEFAULT_LIST_SIZE = 400;
71
- const DEFAULT_SNAP = false;
72
- const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
73
- const DEFAULT_DYNAMIC_SIZE = false;
74
- const TRACK_BY_PROPERTY_NAME = 'id';
75
- const DEFAULT_DIRECTION = Directions.VERTICAL;
76
- const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
77
- const MAX_SCROLL_TO_ITERATIONS = 5;
78
- const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
79
- const DEFAULT_SELECT_METHOD = MethodsForSelecting.NONE;
80
- // presets
81
- const BEHAVIOR_AUTO = 'auto';
82
- const BEHAVIOR_INSTANT = 'instant';
83
- const BEHAVIOR_SMOOTH = 'smooth';
84
- const DISPLAY_BLOCK = 'block';
85
- const DISPLAY_NONE = 'none';
86
- const OPACITY_0 = '0';
87
- const OPACITY_100 = '100';
88
- const VISIBILITY_VISIBLE = 'visible';
89
- const VISIBILITY_HIDDEN = 'hidden';
90
- const SIZE_100_PERSENT = '100%';
91
- const SIZE_AUTO = 'auto';
92
- const POSITION_ABSOLUTE = 'absolute';
93
- const POSITION_STICKY = 'sticky';
94
- const TRANSLATE_3D = 'translate3d';
95
- const ZEROS_TRANSLATE_3D = `${TRANSLATE_3D}(0,0,0)`;
96
- const HIDDEN_ZINDEX = '-1';
97
- const DEFAULT_ZINDEX = '0';
98
- const TOP_PROP_NAME = 'top';
99
- const LEFT_PROP_NAME = 'left';
100
- const X_PROP_NAME = 'x';
101
- const Y_PROP_NAME = 'y';
102
- const WIDTH_PROP_NAME = 'width';
103
- const HEIGHT_PROP_NAME = 'height';
104
- const PX = 'px';
105
- const SCROLL = 'scroll';
106
- const SCROLL_END = 'scrollend';
107
- const CLASS_LIST_VERTICAL = 'vertical';
108
- const CLASS_LIST_HORIZONTAL = 'horizontal';
109
- // styles
110
- const PART_DEFAULT_ITEM = 'item';
111
- const PART_ITEM_ODD = ' odd';
112
- const PART_ITEM_EVEN = ' even';
113
- const PART_ITEM_SNAPPED = ' snapped';
114
- const PART_ITEM_SELECTED = ' selected';
115
-
116
- /**
117
- * Virtual List Item Interface
118
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/models/base-virtual-list-item-component.ts
119
- * @author Evgenii Grebennikov
120
- * @email djonnyx@gmail.com
121
- */
122
- class BaseVirtualListItemComponent {
123
- }
124
-
125
- /**
126
- * Methods for selecting list items.
127
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/enums/method-for-selecting-types.ts
128
- * @author Evgenii Grebennikov
129
- * @email djonnyx@gmail.com
130
- */
131
- var MethodsForSelectingTypes;
132
- (function (MethodsForSelectingTypes) {
133
- /**
134
- * List items are not selectable.
135
- */
136
- MethodsForSelectingTypes[MethodsForSelectingTypes["NONE"] = 0] = "NONE";
137
- /**
138
- * List items are selected one by one.
139
- */
140
- MethodsForSelectingTypes[MethodsForSelectingTypes["SELECT"] = 1] = "SELECT";
141
- /**
142
- * Multiple selection of list items.
143
- */
144
- MethodsForSelectingTypes[MethodsForSelectingTypes["MULTI_SELECT"] = 2] = "MULTI_SELECT";
145
- })(MethodsForSelectingTypes || (MethodsForSelectingTypes = {}));
146
-
147
- class NgVirtualListService {
148
- set methodOfSelecting(v) {
149
- this._$methodOfSelecting.next(v);
150
- }
151
- constructor() {
152
- this._$unsubscribe = new Subject();
153
- this._nextComponentId = 0;
154
- this._$itemClick = new Subject();
155
- this.$itemClick = this._$itemClick.asObservable();
156
- this._$selectedIds = new BehaviorSubject(undefined);
157
- this.$selectedIds = this._$selectedIds.asObservable();
158
- this._$methodOfSelecting = new BehaviorSubject(0);
159
- this.$methodOfSelecting = this._$methodOfSelecting.asObservable();
160
- this._$methodOfSelecting.pipe(takeUntil(this._$unsubscribe), tap(v => {
161
- switch (v) {
162
- case MethodsForSelectingTypes.SELECT: {
163
- const curr = this._$selectedIds.getValue();
164
- if (typeof curr !== 'number' && typeof curr !== 'string') {
165
- this._$selectedIds.next(undefined);
166
- }
167
- break;
168
- }
169
- case MethodsForSelectingTypes.MULTI_SELECT: {
170
- if (!Array.isArray(this._$selectedIds.getValue())) {
171
- this._$selectedIds.next([]);
172
- }
173
- break;
174
- }
175
- case MethodsForSelectingTypes.NONE:
176
- default: {
177
- this._$selectedIds.next(undefined);
178
- break;
179
- }
180
- }
181
- })).subscribe();
182
- }
183
- setSelectedIds(ids) {
184
- this._$selectedIds.next(ids);
185
- }
186
- itemClick(data) {
187
- this._$itemClick.next(data);
188
- if (data) {
189
- switch (this._$methodOfSelecting.getValue()) {
190
- case MethodsForSelectingTypes.SELECT: {
191
- const curr = this._$selectedIds.getValue();
192
- this._$selectedIds.next(curr !== data?.id ? data?.id : undefined);
193
- break;
194
- }
195
- case MethodsForSelectingTypes.MULTI_SELECT: {
196
- const curr = [...(this._$selectedIds.getValue() || [])], index = curr.indexOf(data.id);
197
- if (index > -1) {
198
- curr.splice(index, 1);
199
- this._$selectedIds.next(curr);
200
- }
201
- else {
202
- this._$selectedIds.next([...curr, data.id]);
203
- }
204
- break;
205
- }
206
- case MethodsForSelectingTypes.NONE:
207
- default: {
208
- this._$selectedIds.next(undefined);
209
- }
210
- }
211
- }
212
- }
213
- initialize(trackBox) {
214
- this._trackBox = trackBox;
215
- }
216
- generateComponentId() {
217
- return this._nextComponentId = this._nextComponentId === Number.MAX_SAFE_INTEGER
218
- ? 0 : this._nextComponentId + 1;
219
- }
220
- destroy() {
221
- if (this._$unsubscribe) {
222
- this._$unsubscribe.next();
223
- this._$unsubscribe.complete();
224
- }
225
- }
226
- }
227
- NgVirtualListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
228
- NgVirtualListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListService, providedIn: 'root' });
229
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListService, decorators: [{
230
- type: Injectable,
231
- args: [{
232
- providedIn: 'root'
233
- }]
234
- }], ctorParameters: function () { return []; } });
235
-
236
- const ATTR_AREA_SELECTED = 'area-selected';
237
- /**
238
- * Virtual list item component
239
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
240
- * @author Evgenii Grebennikov
241
- * @email djonnyx@gmail.com
242
- */
243
- class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
244
- get id() {
245
- return this._id;
246
- }
247
- get part() { return this._part; }
248
- set item(v) {
249
- if (this.data === v) {
250
- return;
251
- }
252
- this.data = v;
253
- this.updatePartStr(v, this._isSelected);
254
- this.updateConfig(v);
255
- this.update();
256
- this._$data.next(v);
257
- this._cdr.detectChanges();
258
- }
259
- set regularLength(v) {
260
- if (this._regularLength === v) {
261
- return;
262
- }
263
- this._regularLength = v;
264
- this.update();
265
- this._cdr.detectChanges();
266
- }
267
- get item() {
268
- return this.data;
269
- }
270
- get itemId() {
271
- return this.data?.id;
272
- }
273
- set renderer(v) {
274
- if (this.itemRenderer === v) {
275
- return;
276
- }
277
- this.itemRenderer = v;
278
- this._cdr.markForCheck();
279
- }
280
- get element() {
281
- return this._elementRef.nativeElement;
282
- }
283
- constructor(_cdr, _elementRef, _service) {
284
- super();
285
- this._cdr = _cdr;
286
- this._elementRef = _elementRef;
287
- this._service = _service;
288
- this._$unsubscribe = new Subject();
289
- this._part = PART_DEFAULT_ITEM;
290
- this._isSelected = false;
291
- this.config = new BehaviorSubject$1({});
292
- this.regular = false;
293
- this._$data = new BehaviorSubject$1(this.data);
294
- this.$data = this._$data.asObservable();
295
- this._regularLength = SIZE_100_PERSENT;
296
- this._id = this._service.generateComponentId();
297
- const $data = this.$data;
298
- combineLatest([$data, this._service.$methodOfSelecting, this._service.$selectedIds]).pipe(takeUntil$1(this._$unsubscribe), map(([, m, ids]) => ({ method: m, ids })), tap$1(({ method, ids }) => {
299
- switch (method) {
300
- case MethodsForSelectingTypes.SELECT: {
301
- const id = ids, isSelected = id === this.itemId;
302
- this._elementRef.nativeElement.setAttribute(ATTR_AREA_SELECTED, String(isSelected));
303
- this._isSelected = isSelected;
304
- break;
305
- }
306
- case MethodsForSelectingTypes.MULTI_SELECT: {
307
- const actualIds = ids, isSelected = this.itemId !== undefined && actualIds && actualIds.includes(this.itemId);
308
- this._elementRef.nativeElement.setAttribute(ATTR_AREA_SELECTED, String(isSelected));
309
- this._isSelected = isSelected;
310
- break;
311
- }
312
- case MethodsForSelectingTypes.NONE:
313
- default: {
314
- this._elementRef.nativeElement.removeAttribute(ATTR_AREA_SELECTED);
315
- this._isSelected = false;
316
- break;
317
- }
318
- }
319
- this.updatePartStr(this.data, this._isSelected);
320
- this.updateConfig(this.data);
321
- })).subscribe();
322
- }
323
- updateConfig(v) {
324
- this.config.next({ ...v?.config || {}, selected: this._isSelected });
325
- }
326
- update() {
327
- const data = this.data, regular = this.regular, length = this._regularLength;
328
- if (data) {
329
- const styles = this._elementRef.nativeElement.style;
330
- styles.zIndex = data.config.zIndex;
331
- if (data.config.snapped) {
332
- styles.transform = data.config.sticky === 1 ? ZEROS_TRANSLATE_3D : `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
333
- ;
334
- if (!data.config.isSnappingMethodAdvanced) {
335
- styles.position = POSITION_STICKY;
336
- }
337
- }
338
- else {
339
- styles.position = POSITION_ABSOLUTE;
340
- if (regular) {
341
- styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.delta}${PX}, ${data.config.isVertical ? data.measures.delta : 0}${PX} , 0)`;
342
- }
343
- else {
344
- styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
345
- }
346
- }
347
- styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : regular ? length : SIZE_100_PERSENT;
348
- styles.width = data.config.isVertical ? regular ? length : SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;
349
- }
350
- this._cdr.markForCheck();
351
- }
352
- updatePartStr(v, isSelected) {
353
- let odd = false;
354
- if (v?.index !== undefined) {
355
- odd = v.index % 2 === 0;
356
- }
357
- let part = PART_DEFAULT_ITEM;
358
- part += odd ? PART_ITEM_ODD : PART_ITEM_EVEN;
359
- if (v ? v.config.snapped : false) {
360
- part += PART_ITEM_SNAPPED;
361
- }
362
- if (isSelected) {
363
- part += PART_ITEM_SELECTED;
364
- }
365
- this._part = part;
366
- }
367
- getBounds() {
368
- const el = this._elementRef.nativeElement, { width, height } = el.getBoundingClientRect();
369
- return { width, height };
370
- }
371
- show() {
372
- const styles = this._elementRef.nativeElement.style;
373
- if (this.regular) {
374
- if (styles.display === DISPLAY_BLOCK) {
375
- return;
376
- }
377
- styles.display = DISPLAY_BLOCK;
378
- }
379
- else {
380
- if (styles.visibility === VISIBILITY_VISIBLE) {
381
- return;
382
- }
383
- styles.visibility = VISIBILITY_VISIBLE;
384
- }
385
- styles.zIndex = this.data?.config?.zIndex ?? DEFAULT_ZINDEX;
386
- }
387
- hide() {
388
- const styles = this._elementRef.nativeElement.style;
389
- if (this.regular) {
390
- if (styles.display === DISPLAY_NONE) {
391
- return;
392
- }
393
- styles.display = DISPLAY_NONE;
394
- }
395
- else {
396
- if (styles.visibility === VISIBILITY_HIDDEN) {
397
- return;
398
- }
399
- styles.visibility = VISIBILITY_HIDDEN;
400
- }
401
- styles.position = POSITION_ABSOLUTE;
402
- styles.transform = ZEROS_TRANSLATE_3D;
403
- styles.zIndex = HIDDEN_ZINDEX;
404
- }
405
- onClickHandler() {
406
- this._service.itemClick(this.data);
407
- }
408
- ngOnDestroy() {
409
- if (this._$unsubscribe) {
410
- this._$unsubscribe.next();
411
- this._$unsubscribe.complete();
412
- }
413
- }
414
- }
415
- NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
416
- NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n 'snapped-out': data.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n <ng-container *ngIf=\"itemRenderer\">\r\n <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n [ngTemplateOutletContext]=\"{data: data.data || {}, config: config | async}\"></ng-container>\r\n </ng-container>\r\n </div>\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
417
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
418
- type: Component,
419
- args: [{ selector: 'ng-virtual-list-item', host: {
420
- 'class': 'ngvl__item',
421
- 'role': 'listitem',
422
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n 'snapped-out': data.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n <ng-container *ngIf=\"itemRenderer\">\r\n <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n [ngTemplateOutletContext]=\"{data: data.data || {}, config: config | async}\"></ng-container>\r\n </ng-container>\r\n </div>\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"] }]
423
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NgVirtualListService }]; } });
424
-
425
- /**
426
- * Simple debounce function.
427
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
428
- * @author Evgenii Grebennikov
429
- * @email djonnyx@gmail.com
430
- */
431
- const debounce = (cb, debounceTime = 0) => {
432
- let timeout;
433
- const dispose = () => {
434
- if (timeout !== undefined) {
435
- clearTimeout(timeout);
436
- }
437
- };
438
- const execute = (...args) => {
439
- dispose();
440
- timeout = setTimeout(() => {
441
- cb(...args);
442
- }, debounceTime);
443
- };
444
- return {
445
- /**
446
- * Call handling method
447
- */
448
- execute,
449
- /**
450
- * Method of destroying handlers
451
- */
452
- dispose,
453
- };
454
- };
455
-
456
- /**
457
- * Switch css classes
458
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts
459
- * @author Evgenii Grebennikov
460
- * @email djonnyx@gmail.com
461
- */
462
- const toggleClassName = (el, className, removeClassName) => {
463
- if (!el.classList.contains(className)) {
464
- el.classList.add(className);
465
- }
466
- if (removeClassName) {
467
- el.classList.remove(removeClassName);
468
- }
469
- };
470
-
471
- /**
472
- * Scroll event.
473
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
474
- * @author Evgenii Grebennikov
475
- * @email djonnyx@gmail.com
476
- */
477
- class ScrollEvent {
478
- get direction() { return this._direction; }
479
- get scrollSize() { return this._scrollSize; }
480
- get scrollWeight() { return this._scrollWeight; }
481
- get isVertical() { return this._isVertical; }
482
- get listSize() { return this._listSize; }
483
- get size() { return this._size; }
484
- get isStart() { return this._isStart; }
485
- get isEnd() { return this._isEnd; }
486
- get delta() { return this._delta; }
487
- get scrollDelta() { return this._scrollDelta; }
488
- constructor(params) {
489
- this._direction = 1;
490
- this._scrollSize = 0;
491
- this._scrollWeight = 0;
492
- this._isVertical = true;
493
- this._listSize = 0;
494
- this._size = 0;
495
- this._isStart = true;
496
- this._isEnd = false;
497
- this._delta = 0;
498
- this._scrollDelta = 0;
499
- const { direction, isVertical, container, list, delta, scrollDelta } = params;
500
- this._direction = direction;
501
- this._isVertical = isVertical;
502
- this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
503
- this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
504
- this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
505
- this._size = isVertical ? container.offsetHeight : container.offsetWidth;
506
- this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
507
- this._delta = delta;
508
- this._scrollDelta = scrollDelta;
509
- this._isStart = this._scrollSize === 0;
510
- }
511
- }
512
-
513
- /**
514
- * Simple event emitter
515
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
516
- * @author Evgenii Grebennikov
517
- * @email djonnyx@gmail.com
518
- */
519
- class EventEmitter {
520
- constructor() {
521
- this._listeners = {};
522
- this._disposed = false;
523
- }
524
- /**
525
- * Emits the event
526
- */
527
- dispatch(event, ...args) {
528
- const ctx = this;
529
- const listeners = this._listeners[event];
530
- if (Array.isArray(listeners)) {
531
- for (let i = 0, l = listeners.length; i < l; i++) {
532
- const listener = listeners[i];
533
- if (listener) {
534
- listener.apply(ctx, args);
535
- }
536
- }
537
- }
538
- }
539
- /**
540
- * Emits the event async
541
- */
542
- dispatchAsync(event, ...args) {
543
- queueMicrotask(() => {
544
- if (this._disposed) {
545
- return;
546
- }
547
- this.dispatch(event, ...args);
548
- });
549
- }
550
- /**
551
- * Returns true if the event listener is already subscribed.
552
- */
553
- hasEventListener(eventName, handler) {
554
- const event = eventName;
555
- if (this._listeners.hasOwnProperty(event)) {
556
- const listeners = this._listeners[event];
557
- const index = listeners.findIndex(v => v === handler);
558
- if (index > -1) {
559
- return true;
560
- }
561
- }
562
- return false;
563
- }
564
- /**
565
- * Add event listener
566
- */
567
- addEventListener(eventName, handler) {
568
- const event = eventName;
569
- if (!this._listeners.hasOwnProperty(event)) {
570
- this._listeners[event] = [];
571
- }
572
- this._listeners[event].push(handler);
573
- }
574
- /**
575
- * Remove event listener
576
- */
577
- removeEventListener(eventName, handler) {
578
- const event = eventName;
579
- if (!this._listeners.hasOwnProperty(event)) {
580
- return;
581
- }
582
- const listeners = this._listeners[event], index = listeners.findIndex(v => v === handler);
583
- if (index > -1) {
584
- listeners.splice(index, 1);
585
- if (listeners.length === 0) {
586
- delete this._listeners[event];
587
- }
588
- }
589
- }
590
- /**
591
- * Remove all listeners
592
- */
593
- removeAllListeners() {
594
- const events = Object.keys(this._listeners);
595
- while (events.length > 0) {
596
- const event = events.pop();
597
- if (event) {
598
- const listeners = this._listeners[event];
599
- if (Array.isArray(listeners)) {
600
- while (listeners.length > 0) {
601
- const listener = listeners.pop();
602
- if (listener) {
603
- this.removeEventListener(event, listener);
604
- }
605
- }
606
- }
607
- }
608
- }
609
- }
610
- /**
611
- * Method of destroying handlers
612
- */
613
- dispose() {
614
- this._disposed = true;
615
- this.removeAllListeners();
616
- }
617
- }
618
-
619
- class CMap {
620
- constructor(dict) {
621
- this._dict = {};
622
- if (dict) {
623
- this._dict = { ...dict._dict };
624
- }
625
- }
626
- get(key) {
627
- const k = String(key);
628
- return this._dict[k];
629
- }
630
- set(key, value) {
631
- const k = String(key);
632
- this._dict[k] = value;
633
- return this;
634
- }
635
- has(key) {
636
- return this._dict.hasOwnProperty(String(key));
637
- }
638
- delete(key) {
639
- const k = String(key);
640
- delete this._dict[k];
641
- }
642
- clear() {
643
- this._dict = {};
644
- }
645
- }
646
- const CACHE_BOX_CHANGE_EVENT_NAME = 'change';
647
- const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10, DIR_BACK = '-1', DIR_NONE = '0', DIR_FORWARD = '1';
648
- /**
649
- * Cache map.
650
- * Emits a change event on each mutation.
651
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
652
- * @author Evgenii Grebennikov
653
- * @email djonnyx@gmail.com
654
- */
655
- class CacheMap extends EventEmitter {
656
- get delta() {
657
- return this._delta;
658
- }
659
- set deltaDirection(v) {
660
- this._deltaDirection = v;
661
- this._scrollDirection = this.calcScrollDirection(v);
662
- }
663
- get deltaDirection() {
664
- return this._deltaDirection;
665
- }
666
- get scrollDirection() {
667
- return this._scrollDirection;
668
- }
669
- get version() {
670
- return this._version;
671
- }
672
- constructor() {
673
- super();
674
- this._map = new CMap();
675
- this._snapshot = new CMap();
676
- this._version = 0;
677
- this._previousVersion = this._version;
678
- this._delta = 0;
679
- this._deltaDirection = 0;
680
- this._scrollDirectionCache = [];
681
- this._scrollDirection = 0;
682
- this._clearScrollDirectionDebounce = debounce(() => {
683
- while (this._scrollDirectionCache.length > CLEAR_SCROLL_DIRECTION_TO) {
684
- this._scrollDirectionCache.shift();
685
- }
686
- }, 10);
687
- this.lifeCircle();
688
- }
689
- changesDetected() {
690
- return this._version !== this._previousVersion;
691
- }
692
- stopLifeCircle() {
693
- clearTimeout(this._lifeCircleTimeout);
694
- }
695
- nextTick(cb) {
696
- if (this._disposed) {
697
- return;
698
- }
699
- this._lifeCircleTimeout = setTimeout(() => {
700
- cb();
701
- });
702
- return this._lifeCircleTimeout;
703
- }
704
- lifeCircle() {
705
- this.fireChangeIfNeed();
706
- this.lifeCircleDo();
707
- }
708
- lifeCircleDo() {
709
- this._previousVersion = this._version;
710
- this.nextTick(() => {
711
- this.lifeCircle();
712
- });
713
- }
714
- clearScrollDirectionCache() {
715
- this._clearScrollDirectionDebounce.execute();
716
- }
717
- calcScrollDirection(v) {
718
- while (this._scrollDirectionCache.length >= MAX_SCROLL_DIRECTION_POOL) {
719
- this._scrollDirectionCache.shift();
720
- }
721
- this._scrollDirectionCache.push(v);
722
- const dict = { [DIR_BACK]: 0, [DIR_NONE]: 0, [DIR_FORWARD]: 0 };
723
- for (let i = 0, l = this._scrollDirectionCache.length, li = l - 1; i < l; i++) {
724
- const dir = String(this._scrollDirectionCache[i]);
725
- dict[dir] += 1;
726
- if (i === li) {
727
- for (let d in dict) {
728
- if (d === String(v)) {
729
- continue;
730
- }
731
- dict[d] -= 1;
732
- }
733
- }
734
- }
735
- if (dict[DIR_BACK] > dict[DIR_NONE] && dict[DIR_BACK] > dict[DIR_FORWARD]) {
736
- return -1;
737
- }
738
- else if (dict[DIR_FORWARD] > dict[DIR_BACK] && dict[DIR_FORWARD] > dict[DIR_NONE]) {
739
- return 1;
740
- }
741
- return 0;
742
- }
743
- bumpVersion() {
744
- if (this.changesDetected()) {
745
- return;
746
- }
747
- const v = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
748
- this._version = v;
749
- }
750
- fireChangeIfNeed() {
751
- if (this.changesDetected()) {
752
- this.dispatch(CACHE_BOX_CHANGE_EVENT_NAME, this.version);
753
- }
754
- }
755
- set(id, bounds) {
756
- if (this._map.has(id)) {
757
- const b = this._map.get(id), bb = bounds;
758
- if (b.width === bb.width && b.height === bb.height) {
759
- return this._map;
760
- }
761
- return this._map;
762
- }
763
- const v = this._map.set(id, bounds);
764
- this.bumpVersion();
765
- return v;
766
- }
767
- has(id) {
768
- return this._map.has(id);
769
- }
770
- get(id) {
771
- return this._map.get(id);
772
- }
773
- snapshot() {
774
- this._snapshot = new CMap(this._map);
775
- }
776
- dispose() {
777
- super.dispose();
778
- this.stopLifeCircle();
779
- this._snapshot.clear();
780
- this._map.clear();
781
- }
782
- }
783
-
784
- /**
785
- * Tracks display items by property
786
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
787
- * @author Evgenii Grebennikov
788
- * @email djonnyx@gmail.com
789
- */
790
- class Tracker {
791
- set displayObjectIndexMapById(v) {
792
- if (this._displayObjectIndexMapById === v) {
793
- return;
794
- }
795
- this._displayObjectIndexMapById = v;
796
- }
797
- get displayObjectIndexMapById() {
798
- return this._displayObjectIndexMapById;
799
- }
800
- get trackMap() {
801
- return this._trackMap;
802
- }
803
- set trackingPropertyName(v) {
804
- this._trackingPropertyName = v;
805
- }
806
- constructor(trackingPropertyName) {
807
- /**
808
- * display objects dictionary of indexes by id
809
- */
810
- this._displayObjectIndexMapById = {};
811
- /**
812
- * Dictionary displayItems propertyNameId by items propertyNameId
813
- */
814
- this._trackMap = new CMap();
815
- this._trackingPropertyName = trackingPropertyName;
816
- }
817
- /**
818
- * tracking by propName
819
- */
820
- track(items, components, snapedComponent, direction) {
821
- if (!items) {
822
- return;
823
- }
824
- const idPropName = this._trackingPropertyName, untrackedItems = [...components], newTrackItems = [], isDown = direction === 0 || direction === 1;
825
- let isRegularSnapped = false;
826
- for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
827
- const item = items[i], itemTrackingProperty = item[idPropName];
828
- if (this._trackMap) {
829
- if (this._trackMap.has(itemTrackingProperty)) {
830
- const diId = this._trackMap.get(itemTrackingProperty), compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
831
- const compId = comp?.instance?.id;
832
- if (comp !== undefined && compId === diId) {
833
- const indexByUntrackedItems = untrackedItems.findIndex(v => {
834
- return v.instance.id === compId;
835
- });
836
- if (indexByUntrackedItems > -1) {
837
- if (snapedComponent) {
838
- if (item['config']['snapped'] || item['config']['snappedOut']) {
839
- isRegularSnapped = true;
840
- snapedComponent.instance.item = item;
841
- snapedComponent.instance.show();
842
- }
843
- }
844
- comp.instance.item = item;
845
- if (snapedComponent) {
846
- if (item['config']['snapped'] || item['config']['snappedOut']) {
847
- comp.instance.hide();
848
- }
849
- else {
850
- comp.instance.show();
851
- }
852
- }
853
- else {
854
- comp.instance.show();
855
- }
856
- untrackedItems.splice(indexByUntrackedItems, 1);
857
- continue;
858
- }
859
- }
860
- this._trackMap.delete(itemTrackingProperty);
861
- }
862
- }
863
- if (untrackedItems.length > 0) {
864
- newTrackItems.push(item);
865
- }
866
- }
867
- for (let i = 0, l = newTrackItems.length; i < l; i++) {
868
- const item = newTrackItems[i], itemTrackingProperty = item[idPropName];
869
- if (untrackedItems.length > 0) {
870
- const comp = untrackedItems.shift(), item = items[i];
871
- if (comp) {
872
- if (snapedComponent) {
873
- if (item['config']['snapped'] || item['config']['snappedOut']) {
874
- isRegularSnapped = true;
875
- snapedComponent.instance.item = item;
876
- snapedComponent.instance.show();
877
- }
878
- }
879
- comp.instance.item = item;
880
- if (snapedComponent) {
881
- if (item['config']['snapped'] || item['config']['snappedOut']) {
882
- comp.instance.hide();
883
- }
884
- else {
885
- comp.instance.show();
886
- }
887
- }
888
- else {
889
- comp.instance.show();
890
- }
891
- if (this._trackMap) {
892
- this._trackMap.set(itemTrackingProperty, comp.instance.id);
893
- }
894
- }
895
- }
896
- }
897
- if (untrackedItems.length) {
898
- for (let i = 0, l = untrackedItems.length; i < l; i++) {
899
- const comp = untrackedItems[i];
900
- comp.instance.hide();
901
- }
902
- }
903
- if (!isRegularSnapped) {
904
- if (snapedComponent) {
905
- snapedComponent.instance.item = null;
906
- snapedComponent.instance.hide();
907
- }
908
- }
909
- }
910
- untrackComponentByIdProperty(component) {
911
- if (!component) {
912
- return;
913
- }
914
- const propertyIdName = this._trackingPropertyName;
915
- if (this._trackMap && component[propertyIdName] !== undefined) {
916
- this._trackMap.delete(propertyIdName);
917
- }
918
- }
919
- dispose() {
920
- if (this._trackMap) {
921
- this._trackMap.clear();
922
- }
923
- }
924
- }
925
-
926
- const DEFAULT_EXTRA = {
927
- extremumThreshold: 2,
928
- bufferSize: 10,
929
- };
930
- const bufferInterpolation = (currentBufferValue, array, value, extra) => {
931
- const { extremumThreshold = DEFAULT_EXTRA.extremumThreshold, bufferSize = DEFAULT_EXTRA.bufferSize, } = extra ?? DEFAULT_EXTRA;
932
- if (currentBufferValue < value) {
933
- let i = 0;
934
- while (i < extremumThreshold) {
935
- array.push(value);
936
- i++;
937
- }
938
- }
939
- else {
940
- array.push(value);
941
- }
942
- while (array.length >= bufferSize) {
943
- array.shift();
944
- }
945
- const l = array.length;
946
- let buffer = 0;
947
- for (let i = 0; i < l; i++) {
948
- buffer += array[i];
949
- }
950
- return Math.ceil(buffer / l);
951
- };
952
-
953
- const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
954
- var ItemDisplayMethods;
955
- (function (ItemDisplayMethods) {
956
- ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
957
- ItemDisplayMethods[ItemDisplayMethods["UPDATE"] = 1] = "UPDATE";
958
- ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
959
- ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
960
- })(ItemDisplayMethods || (ItemDisplayMethods = {}));
961
- const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000;
962
- /**
963
- * An object that performs tracking, calculations and caching.
964
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
965
- * @author Evgenii Grebennikov
966
- * @email djonnyx@gmail.com
967
- */
968
- class TrackBox extends CacheMap {
969
- set items(v) {
970
- if (this._items === v) {
971
- return;
972
- }
973
- this._items = v;
974
- }
975
- set displayComponents(v) {
976
- if (this._displayComponents === v) {
977
- return;
978
- }
979
- this._displayComponents = v;
980
- }
981
- set snapedDisplayComponent(v) {
982
- if (this._snapedDisplayComponent === v) {
983
- return;
984
- }
985
- this._snapedDisplayComponent = v;
986
- }
987
- set isSnappingMethodAdvanced(v) {
988
- if (this._isSnappingMethodAdvanced === v) {
989
- return;
990
- }
991
- this._isSnappingMethodAdvanced = v;
992
- }
993
- /**
994
- * Set the trackBy property
995
- */
996
- set trackingPropertyName(v) {
997
- this._trackingPropertyName = this._tracker.trackingPropertyName = v;
998
- }
999
- constructor(trackingPropertyName) {
1000
- super();
1001
- this._isSnappingMethodAdvanced = false;
1002
- this._trackingPropertyName = TRACK_BY_PROPERTY_NAME;
1003
- this._deletedItemsMap = {};
1004
- this._crudDetected = false;
1005
- this._previousTotalSize = 0;
1006
- this._scrollDelta = 0;
1007
- this.isAdaptiveBuffer = true;
1008
- this._bufferSequenceExtraThreshold = DEFAULT_BUFFER_EXTREMUM_THRESHOLD;
1009
- this._maxBufferSequenceLength = DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH;
1010
- this._bufferSizeSequence = [];
1011
- this._bufferSize = 0;
1012
- this._defaultBufferSize = 0;
1013
- this._maxBufferSize = this._defaultBufferSize;
1014
- this._resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
1015
- this._previousScrollSize = 0;
1016
- this._trackingPropertyName = trackingPropertyName;
1017
- this.initialize();
1018
- }
1019
- initialize() {
1020
- this._tracker = new Tracker(this._trackingPropertyName);
1021
- }
1022
- set(id, bounds) {
1023
- if (this._map.has(id)) {
1024
- const b = this._map.get(id);
1025
- if (b?.width === bounds.width && b.height === bounds.height) {
1026
- return this._map;
1027
- }
1028
- }
1029
- const v = this._map.set(id, bounds);
1030
- this.bumpVersion();
1031
- return v;
1032
- }
1033
- get crudDetected() { return this._crudDetected; }
1034
- fireChangeIfNeed() {
1035
- if (this.changesDetected()) {
1036
- this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, this._version);
1037
- }
1038
- }
1039
- get scrollDelta() { return this._scrollDelta; }
1040
- get bufferSize() { return this._bufferSize; }
1041
- lifeCircle() {
1042
- this.fireChangeIfNeed();
1043
- this.lifeCircleDo();
1044
- }
1045
- /**
1046
- * Scans the collection for deleted items and flushes the deleted item cache.
1047
- */
1048
- resetCollection(currentCollection, itemSize) {
1049
- if (currentCollection !== undefined && currentCollection !== null && currentCollection === this._previousCollection) {
1050
- console.warn('Attention! The collection must be immutable.');
1051
- return;
1052
- }
1053
- this.updateCache(this._previousCollection, currentCollection, itemSize);
1054
- this._previousCollection = currentCollection;
1055
- }
1056
- /**
1057
- * Update the cache of items from the list
1058
- */
1059
- updateCache(previousCollection, currentCollection, itemSize) {
1060
- let crudDetected = false;
1061
- if (!currentCollection || currentCollection.length === 0) {
1062
- if (previousCollection) {
1063
- // deleted
1064
- for (let i = 0, l = previousCollection.length; i < l; i++) {
1065
- const item = previousCollection[i], id = item.id;
1066
- crudDetected = true;
1067
- if (this._map.has(id)) {
1068
- this._map.delete(id);
1069
- }
1070
- }
1071
- }
1072
- return;
1073
- }
1074
- if (!previousCollection || previousCollection.length === 0) {
1075
- if (currentCollection) {
1076
- // added
1077
- for (let i = 0, l = currentCollection.length; i < l; i++) {
1078
- crudDetected = true;
1079
- const item = currentCollection[i], id = item.id;
1080
- this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
1081
- }
1082
- }
1083
- return;
1084
- }
1085
- const collectionDict = {};
1086
- for (let i = 0, l = currentCollection.length; i < l; i++) {
1087
- const item = currentCollection[i];
1088
- if (item) {
1089
- collectionDict[item.id] = item;
1090
- }
1091
- }
1092
- const notChangedMap = {}, deletedMap = {}, deletedItemsMap = {}, updatedMap = {};
1093
- for (let i = 0, l = previousCollection.length; i < l; i++) {
1094
- const item = previousCollection[i], id = item.id;
1095
- if (item) {
1096
- if (collectionDict.hasOwnProperty(id)) {
1097
- if (item === collectionDict[id]) {
1098
- // not changed
1099
- notChangedMap[item.id] = item;
1100
- this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.NOT_CHANGED });
1101
- continue;
1102
- }
1103
- else {
1104
- // updated
1105
- crudDetected = true;
1106
- updatedMap[item.id] = item;
1107
- this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.UPDATE });
1108
- continue;
1109
- }
1110
- }
1111
- // deleted
1112
- crudDetected = true;
1113
- deletedMap[item.id] = item;
1114
- deletedItemsMap[i] = this._map.get(item.id);
1115
- this._map.delete(id);
1116
- }
1117
- }
1118
- for (let i = 0, l = currentCollection.length; i < l; i++) {
1119
- const item = currentCollection[i], id = item.id;
1120
- if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
1121
- // added
1122
- crudDetected = true;
1123
- this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
1124
- }
1125
- }
1126
- this._crudDetected = crudDetected;
1127
- this._deletedItemsMap = deletedItemsMap;
1128
- }
1129
- /**
1130
- * Finds the position of a collection element by the given Id
1131
- */
1132
- getItemPosition(id, stickyMap, options) {
1133
- const opt = { fromItemId: id, stickyMap, ...options };
1134
- this._defaultBufferSize = opt.bufferSize;
1135
- this._maxBufferSize = opt.maxBufferSize;
1136
- const { scrollSize, isFromItemIdFound } = this.recalculateMetrics({
1137
- ...opt,
1138
- dynamicSize: this._crudDetected || opt.dynamicSize,
1139
- previousTotalSize: this._previousTotalSize,
1140
- crudDetected: this._crudDetected,
1141
- deletedItemsMap: this._deletedItemsMap,
1142
- });
1143
- return isFromItemIdFound ? scrollSize : -1;
1144
- }
1145
- /**
1146
- * Updates the collection of display objects
1147
- */
1148
- updateCollection(items, stickyMap, options) {
1149
- const opt = { stickyMap, ...options }, crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
1150
- if (opt.dynamicSize) {
1151
- this.cacheElements();
1152
- }
1153
- this._defaultBufferSize = opt.bufferSize;
1154
- this._maxBufferSize = opt.maxBufferSize;
1155
- const metrics = this.recalculateMetrics({
1156
- ...opt,
1157
- collection: items,
1158
- previousTotalSize: this._previousTotalSize,
1159
- crudDetected: this._crudDetected,
1160
- deletedItemsMap,
1161
- });
1162
- this._delta += metrics.delta;
1163
- this.updateAdaptiveBufferParams(metrics, items.length);
1164
- this._previousTotalSize = metrics.totalSize;
1165
- this._deletedItemsMap = {};
1166
- this._crudDetected = false;
1167
- if (opt.dynamicSize) {
1168
- this.snapshot();
1169
- }
1170
- const displayItems = this.generateDisplayCollection(items, stickyMap, { ...metrics, });
1171
- return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta, crudDetected };
1172
- }
1173
- /**
1174
- * Finds the closest element in the collection by scrollSize
1175
- */
1176
- getNearestItem(scrollSize, items, itemSize, isVertical) {
1177
- return this.getElementFromStart(scrollSize, items, this._map, itemSize, isVertical);
1178
- }
1179
- updateAdaptiveBufferParams(metrics, totalItemsLength) {
1180
- this.disposeClearBufferSizeTimer();
1181
- const scrollSize = metrics.scrollSize + this._delta, delta = Math.abs(this._previousScrollSize - scrollSize);
1182
- this._previousScrollSize = scrollSize;
1183
- const bufferRawSize = Math.min(Math.floor(delta / metrics.typicalItemSize) * 5, totalItemsLength), minBufferSize = bufferRawSize < this._defaultBufferSize ? this._defaultBufferSize : bufferRawSize, bufferValue = minBufferSize > this._maxBufferSize ? this._maxBufferSize : minBufferSize;
1184
- this._bufferSize = bufferInterpolation(this._bufferSize, this._bufferSizeSequence, bufferValue, {
1185
- extremumThreshold: this._bufferSequenceExtraThreshold,
1186
- bufferSize: this._maxBufferSequenceLength,
1187
- });
1188
- this.startResetBufferSizeTimer();
1189
- }
1190
- startResetBufferSizeTimer() {
1191
- this._resetBufferSizeTimer = setTimeout(() => {
1192
- this._bufferSize = this._defaultBufferSize;
1193
- this._bufferSizeSequence = [];
1194
- }, this._resetBufferSizeTimeout);
1195
- }
1196
- disposeClearBufferSizeTimer() {
1197
- clearTimeout(this._resetBufferSizeTimer);
1198
- }
1199
- /**
1200
- * Calculates the position of an element based on the given scrollSize
1201
- */
1202
- getElementFromStart(scrollSize, collection, map, typicalItemSize, isVertical) {
1203
- const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
1204
- let offset = 0;
1205
- for (let i = 0, l = collection.length; i < l; i++) {
1206
- const item = collection[i];
1207
- let itemSize = 0;
1208
- if (map.has(item.id)) {
1209
- const bounds = map.get(item.id);
1210
- itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
1211
- }
1212
- else {
1213
- itemSize = typicalItemSize;
1214
- }
1215
- if (offset > scrollSize) {
1216
- return item;
1217
- }
1218
- offset += itemSize;
1219
- }
1220
- return undefined;
1221
- }
1222
- /**
1223
- * Calculates the entry into the overscroll area and returns the number of overscroll elements
1224
- */
1225
- getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical, indexOffset = 0) {
1226
- const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
1227
- let offset = 0, num = 0;
1228
- for (let j = collection.length - indexOffset - 1; j >= i; j--) {
1229
- const item = collection[j];
1230
- let itemSize = 0;
1231
- if (map.has(item.id)) {
1232
- const bounds = map.get(item.id);
1233
- itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
1234
- }
1235
- else {
1236
- itemSize = typicalItemSize;
1237
- }
1238
- offset += itemSize;
1239
- num++;
1240
- if (offset > size) {
1241
- return { num: 0, offset };
1242
- }
1243
- }
1244
- return { num, offset };
1245
- }
1246
- /**
1247
- * Calculates list metrics
1248
- */
1249
- recalculateMetrics(options) {
1250
- const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, bufferSize: minBufferSize, scrollSize, snap, stickyMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
1251
- const bufferSize = Math.max(minBufferSize, this._bufferSize), { 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)
1252
- || (typeof fromItemId === 'string' && fromItemId > '-1');
1253
- let leftItemsOffset = 0, rightItemsOffset = 0;
1254
- if (enabledBufferOptimization) {
1255
- switch (this.scrollDirection) {
1256
- case 1: {
1257
- leftItemsOffset = 0;
1258
- rightItemsOffset = bufferSize;
1259
- break;
1260
- }
1261
- case -1: {
1262
- leftItemsOffset = bufferSize;
1263
- rightItemsOffset = 0;
1264
- break;
1265
- }
1266
- case 0:
1267
- default: {
1268
- leftItemsOffset = rightItemsOffset = bufferSize;
1269
- }
1270
- }
1271
- }
1272
- else {
1273
- leftItemsOffset = rightItemsOffset = bufferSize;
1274
- }
1275
- let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, leftSizeOfAddedItems = 0, leftSizeOfUpdatedItems = 0, leftSizeOfDeletedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex, isFromItemIdFound = false;
1276
- // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
1277
- if (dynamicSize) {
1278
- let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
1279
- for (let i = 0, l = collection.length; i < l; i++) {
1280
- const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
1281
- let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
1282
- if (map.has(id)) {
1283
- const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
1284
- componentSize = bounds[sizeProperty];
1285
- itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
1286
- switch (itemDisplayMethod) {
1287
- case ItemDisplayMethods.UPDATE: {
1288
- const snapshotBounds = snapshot.get(id);
1289
- const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
1290
- componentSizeDelta = componentSnapshotSize;
1291
- map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
1292
- break;
1293
- }
1294
- case ItemDisplayMethods.CREATE: {
1295
- componentSizeDelta = typicalItemSize;
1296
- map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
1297
- break;
1298
- }
1299
- }
1300
- }
1301
- if (deletedItemsMap.hasOwnProperty(i)) {
1302
- const bounds = deletedItemsMap[i], size = bounds?.[sizeProperty] ?? typicalItemSize;
1303
- if (y < scrollSize - size) {
1304
- leftSizeOfDeletedItems += size;
1305
- }
1306
- }
1307
- totalSize += componentSize;
1308
- if (isFromId) {
1309
- if (itemById === undefined) {
1310
- if (id !== fromItemId && stickyMap && stickyMap[id] === 1) {
1311
- stickyComponentSize = componentSize;
1312
- stickyCollectionItem = collectionItem;
1313
- }
1314
- if (id === fromItemId) {
1315
- isFromItemIdFound = true;
1316
- targetDisplayItemIndex = i;
1317
- if (stickyCollectionItem && stickyMap) {
1318
- const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
1319
- if (num > 0) {
1320
- isTargetInOverscroll = true;
1321
- y -= size - componentSize;
1322
- }
1323
- else {
1324
- if (stickyMap && !stickyMap[collectionItem.id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
1325
- const snappedY = scrollSize - stickyComponentSize;
1326
- leftHiddenItemsWeight -= (snappedY - y);
1327
- y = snappedY;
1328
- }
1329
- else {
1330
- y -= stickyComponentSize;
1331
- leftHiddenItemsWeight -= stickyComponentSize;
1332
- }
1333
- }
1334
- }
1335
- itemById = collectionItem;
1336
- itemByIdPos = y;
1337
- }
1338
- else {
1339
- leftItemsWeights.push(componentSize);
1340
- leftHiddenItemsWeight += componentSize;
1341
- itemsFromStartToScrollEnd = ii;
1342
- }
1343
- }
1344
- }
1345
- else if (y <= scrollSize - componentSize) {
1346
- leftItemsWeights.push(componentSize);
1347
- leftHiddenItemsWeight += componentSize;
1348
- itemsFromStartToScrollEnd = ii;
1349
- }
1350
- if (isFromId) {
1351
- if (itemById === undefined || y < itemByIdPos + size + componentSize) {
1352
- itemsFromStartToDisplayEnd = ii;
1353
- totalItemsToDisplayEndWeight += componentSize;
1354
- itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
1355
- }
1356
- }
1357
- else if (y <= scrollSize + size + componentSize) {
1358
- itemsFromStartToDisplayEnd = ii;
1359
- totalItemsToDisplayEndWeight += componentSize;
1360
- itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
1361
- if (y <= scrollSize - componentSize) {
1362
- switch (itemDisplayMethod) {
1363
- case ItemDisplayMethods.CREATE: {
1364
- leftSizeOfAddedItems += componentSizeDelta;
1365
- break;
1366
- }
1367
- case ItemDisplayMethods.UPDATE: {
1368
- leftSizeOfUpdatedItems += componentSizeDelta;
1369
- break;
1370
- }
1371
- case ItemDisplayMethods.DELETE: {
1372
- leftSizeOfDeletedItems += componentSizeDelta;
1373
- break;
1374
- }
1375
- }
1376
- }
1377
- }
1378
- else {
1379
- if (i < itemsFromDisplayEndToOffsetEnd) {
1380
- rightItemsWeight += componentSize;
1381
- }
1382
- }
1383
- y += componentSize;
1384
- }
1385
- if (isTargetInOverscroll) {
1386
- const { num } = this.getElementNumToEnd(collection.length - (checkOverscrollItemsLimit < 0 ? 0 : collection.length - checkOverscrollItemsLimit), collection, map, typicalItemSize, size, isVertical, collection.length - (collection.length - (targetDisplayItemIndex + 1)));
1387
- if (num > 0) {
1388
- itemsFromStartToScrollEnd -= num;
1389
- }
1390
- }
1391
- if (itemsFromStartToScrollEnd <= -1) {
1392
- itemsFromStartToScrollEnd = 0;
1393
- }
1394
- if (itemsFromStartToDisplayEnd <= -1) {
1395
- itemsFromStartToDisplayEnd = 0;
1396
- }
1397
- actualScrollSize = isFromId ? itemByIdPos : scrollSize;
1398
- leftItemsWeights.splice(0, leftItemsWeights.length - leftItemsOffset);
1399
- leftItemsWeights.forEach(v => {
1400
- leftItemsWeight += v;
1401
- });
1402
- leftItemLength = Math.min(itemsFromStartToScrollEnd, leftItemsOffset);
1403
- rightItemLength = itemsFromStartToDisplayEnd + rightItemsOffset > totalLength
1404
- ? totalLength - itemsFromStartToDisplayEnd : rightItemsOffset;
1405
- }
1406
- else
1407
- // Buffer optimization does not work on fast linear algorithm
1408
- {
1409
- if (crudDetected) {
1410
- let y = 0;
1411
- for (let i = 0, l = collection.length; i < l; i++) {
1412
- const collectionItem = collection[i], id = collectionItem.id;
1413
- let componentSize = typicalItemSize, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
1414
- if (map.has(id)) {
1415
- const bounds = map.get(id);
1416
- itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
1417
- if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
1418
- map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
1419
- }
1420
- }
1421
- if (deletedItemsMap.hasOwnProperty(i)) {
1422
- const bounds = deletedItemsMap[i], size = bounds?.[sizeProperty] ?? typicalItemSize;
1423
- if (y < scrollSize - size) {
1424
- leftSizeOfDeletedItems += size;
1425
- }
1426
- }
1427
- if (y < scrollSize - componentSize) {
1428
- switch (itemDisplayMethod) {
1429
- case ItemDisplayMethods.CREATE: {
1430
- leftSizeOfUpdatedItems += componentSize;
1431
- break;
1432
- }
1433
- case ItemDisplayMethods.UPDATE: {
1434
- leftSizeOfUpdatedItems += componentSize;
1435
- break;
1436
- }
1437
- case ItemDisplayMethods.DELETE: {
1438
- leftSizeOfDeletedItems += componentSize;
1439
- break;
1440
- }
1441
- }
1442
- }
1443
- y += componentSize;
1444
- }
1445
- }
1446
- itemsFromStartToScrollEnd = Math.floor(scrollSize / typicalItemSize);
1447
- itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
1448
- leftItemLength = Math.min(itemsFromStartToScrollEnd, bufferSize);
1449
- rightItemLength = itemsFromStartToDisplayEnd + bufferSize > totalLength
1450
- ? totalLength - itemsFromStartToDisplayEnd : bufferSize;
1451
- leftItemsWeight = leftItemLength * typicalItemSize;
1452
- rightItemsWeight = rightItemLength * typicalItemSize;
1453
- leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize;
1454
- totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize;
1455
- totalSize = totalLength * typicalItemSize;
1456
- const k = totalSize !== 0 ? previousTotalSize / totalSize : 0;
1457
- actualScrollSize = scrollSize * k;
1458
- }
1459
- startIndex = Math.min(itemsFromStartToScrollEnd - leftItemLength, totalLength > 0 ? totalLength - 1 : 0);
1460
- const itemsOnDisplayWeight = totalItemsToDisplayEndWeight - leftItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = leftSizeOfUpdatedItems + leftSizeOfAddedItems - leftSizeOfDeletedItems;
1461
- const metrics = {
1462
- delta,
1463
- normalizedItemWidth: w,
1464
- normalizedItemHeight: h,
1465
- width,
1466
- height,
1467
- dynamicSize,
1468
- itemSize,
1469
- itemsFromStartToScrollEnd,
1470
- itemsFromStartToDisplayEnd,
1471
- itemsOnDisplayWeight,
1472
- itemsOnDisplayLength,
1473
- isVertical,
1474
- leftHiddenItemsWeight,
1475
- leftItemLength,
1476
- leftItemsWeight,
1477
- renderItems,
1478
- rightItemLength,
1479
- rightItemsWeight,
1480
- scrollSize: actualScrollSize,
1481
- leftSizeOfAddedItems,
1482
- sizeProperty,
1483
- snap,
1484
- snippedPos,
1485
- startIndex,
1486
- startPosition,
1487
- totalItemsToDisplayEndWeight,
1488
- totalLength,
1489
- totalSize,
1490
- typicalItemSize,
1491
- isFromItemIdFound,
1492
- };
1493
- return metrics;
1494
- }
1495
- clearDeltaDirection() {
1496
- this.clearScrollDirectionCache();
1497
- }
1498
- clearDelta(clearDirectionDetector = false) {
1499
- this._delta = 0;
1500
- if (clearDirectionDetector) {
1501
- this.clearScrollDirectionCache();
1502
- }
1503
- }
1504
- changes() {
1505
- this.bumpVersion();
1506
- }
1507
- generateDisplayCollection(items, stickyMap, metrics) {
1508
- const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
1509
- if (items.length) {
1510
- const actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced, boundsSize = isVertical ? height : width, actualEndSnippedPosition = boundsSize;
1511
- let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
1512
- if (snap) {
1513
- for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
1514
- if (!items[i]) {
1515
- continue;
1516
- }
1517
- const id = items[i].id, sticky = stickyMap[id], size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
1518
- if (sticky === 1) {
1519
- const isOdd = i % 2 != 0, measures = {
1520
- x: isVertical ? 0 : actualSnippedPosition,
1521
- y: isVertical ? actualSnippedPosition : 0,
1522
- width: isVertical ? normalizedItemWidth : size,
1523
- height: isVertical ? size : normalizedItemHeight,
1524
- delta: 0,
1525
- }, config = {
1526
- odd: isOdd,
1527
- even: !isOdd,
1528
- isVertical,
1529
- sticky,
1530
- snap,
1531
- snapped: true,
1532
- snappedOut: false,
1533
- dynamic: dynamicSize,
1534
- isSnappingMethodAdvanced,
1535
- zIndex: '1',
1536
- };
1537
- const itemData = items[i];
1538
- stickyItem = { index: i, id, measures, data: itemData, config };
1539
- stickyItemIndex = i;
1540
- stickyItemSize = size;
1541
- displayItems.push(stickyItem);
1542
- break;
1543
- }
1544
- }
1545
- }
1546
- if (snap) {
1547
- const startIndex = itemsFromStartToScrollEnd + itemsOnDisplayLength - 1;
1548
- for (let i = Math.min(startIndex, totalLength > 0 ? totalLength - 1 : 0), l = totalLength; i < l; i++) {
1549
- if (!items[i]) {
1550
- continue;
1551
- }
1552
- const id = items[i].id, sticky = stickyMap[id], size = dynamicSize
1553
- ? this.get(id)?.[sizeProperty] || typicalItemSize
1554
- : typicalItemSize;
1555
- if (sticky === 2) {
1556
- const isOdd = i % 2 != 0, w = isVertical ? normalizedItemWidth : size, h = isVertical ? size : normalizedItemHeight, measures = {
1557
- x: isVertical ? 0 : actualEndSnippedPosition - w,
1558
- y: isVertical ? actualEndSnippedPosition - h : 0,
1559
- width: w,
1560
- height: h,
1561
- delta: 0,
1562
- }, config = {
1563
- odd: isOdd,
1564
- even: !isOdd,
1565
- isVertical,
1566
- sticky,
1567
- snap,
1568
- snapped: true,
1569
- snappedOut: false,
1570
- dynamic: dynamicSize,
1571
- isSnappingMethodAdvanced,
1572
- zIndex: '1',
1573
- };
1574
- const itemData = items[i];
1575
- endStickyItem = { index: i, id, measures, data: itemData, config };
1576
- endStickyItemIndex = i;
1577
- endStickyItemSize = size;
1578
- displayItems.push(endStickyItem);
1579
- break;
1580
- }
1581
- }
1582
- }
1583
- let i = startIndex;
1584
- while (renderItems > 0) {
1585
- if (i >= totalLength) {
1586
- break;
1587
- }
1588
- if (!items[i]) {
1589
- continue;
1590
- }
1591
- const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
1592
- if (id !== stickyItem?.id && id !== endStickyItem?.id) {
1593
- const isOdd = i % 2 != 0, snapped = snap && (stickyMap[id] === 1 && pos <= scrollSize || stickyMap[id] === 2 && pos >= scrollSize + boundsSize - size), measures = {
1594
- x: isVertical ? stickyMap[id] === 1 ? 0 : boundsSize - size : pos,
1595
- y: isVertical ? pos : stickyMap[id] === 2 ? boundsSize - size : 0,
1596
- width: isVertical ? normalizedItemWidth : size,
1597
- height: isVertical ? size : normalizedItemHeight,
1598
- delta: 0,
1599
- }, config = {
1600
- odd: isOdd,
1601
- even: !isOdd,
1602
- isVertical,
1603
- sticky: stickyMap[id],
1604
- snap,
1605
- snapped: false,
1606
- snappedOut: false,
1607
- dynamic: dynamicSize,
1608
- isSnappingMethodAdvanced,
1609
- zIndex: '0',
1610
- };
1611
- if (snapped) {
1612
- config.zIndex = '2';
1613
- }
1614
- const itemData = items[i];
1615
- const item = { index: i, id, measures, data: itemData, config };
1616
- if (!nextSticky && stickyItemIndex < i && stickyMap[id] === 1 && (pos <= scrollSize + size + stickyItemSize)) {
1617
- item.measures.x = isVertical ? 0 : snapped ? actualSnippedPosition : pos;
1618
- item.measures.y = isVertical ? snapped ? actualSnippedPosition : pos : 0;
1619
- nextSticky = item;
1620
- nextSticky.config.snapped = snapped;
1621
- nextSticky.measures.delta = isVertical ? (item.measures.y - scrollSize) : (item.measures.x - scrollSize);
1622
- nextSticky.config.zIndex = '3';
1623
- }
1624
- else if (!nextEndSticky && endStickyItemIndex > i && stickyMap[id] === 2 && (pos >= scrollSize + boundsSize - size - endStickyItemSize)) {
1625
- item.measures.x = isVertical ? 0 : snapped ? actualEndSnippedPosition - size : pos;
1626
- item.measures.y = isVertical ? snapped ? actualEndSnippedPosition - size : pos : 0;
1627
- nextEndSticky = item;
1628
- nextEndSticky.config.zIndex = '3';
1629
- nextEndSticky.config.snapped = snapped;
1630
- nextEndSticky.measures.delta = isVertical ? (item.measures.y - scrollSize) : (item.measures.x - scrollSize);
1631
- }
1632
- displayItems.push(item);
1633
- }
1634
- renderItems -= 1;
1635
- pos += size;
1636
- i++;
1637
- }
1638
- const axis = isVertical ? Y_PROP_NAME : X_PROP_NAME;
1639
- if (nextSticky && stickyItem && nextSticky.measures[axis] <= scrollSize + stickyItemSize) {
1640
- if (nextSticky.measures[axis] > scrollSize) {
1641
- stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItemSize;
1642
- stickyItem.config.snapped = nextSticky.config.snapped = false;
1643
- stickyItem.config.snappedOut = true;
1644
- stickyItem.config.sticky = 1;
1645
- stickyItem.measures.delta = isVertical ? stickyItem.measures.y - scrollSize : stickyItem.measures.x - scrollSize;
1646
- }
1647
- else {
1648
- nextSticky.config.snapped = true;
1649
- nextSticky.measures.delta = isVertical ? nextSticky.measures.y - scrollSize : nextSticky.measures.x - scrollSize;
1650
- }
1651
- }
1652
- if (nextEndSticky && endStickyItem && nextEndSticky.measures[axis] >= scrollSize + boundsSize - endStickyItemSize - nextEndSticky.measures[sizeProperty]) {
1653
- if (nextEndSticky.measures[axis] < scrollSize + boundsSize - endStickyItemSize) {
1654
- endStickyItem.measures[axis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
1655
- endStickyItem.config.snapped = nextEndSticky.config.snapped = false;
1656
- endStickyItem.config.snappedOut = true;
1657
- endStickyItem.config.sticky = 2;
1658
- endStickyItem.measures.delta = isVertical ? endStickyItem.measures.y - scrollSize : endStickyItem.measures.x - scrollSize;
1659
- }
1660
- else {
1661
- nextEndSticky.config.snapped = true;
1662
- nextEndSticky.measures.delta = isVertical ? nextEndSticky.measures.y - scrollSize : nextEndSticky.measures.x - scrollSize;
1663
- }
1664
- }
1665
- }
1666
- return displayItems;
1667
- }
1668
- /**
1669
- * tracking by propName
1670
- */
1671
- track() {
1672
- if (!this._items || !this._displayComponents) {
1673
- return;
1674
- }
1675
- this._tracker.track(this._items, this._displayComponents, this._snapedDisplayComponent, this.scrollDirection);
1676
- }
1677
- setDisplayObjectIndexMapById(v) {
1678
- this._tracker.displayObjectIndexMapById = v;
1679
- }
1680
- untrackComponentByIdProperty(component) {
1681
- this._tracker.untrackComponentByIdProperty(component);
1682
- }
1683
- getItemBounds(id) {
1684
- if (this.has(id)) {
1685
- return this.get(id);
1686
- }
1687
- return undefined;
1688
- }
1689
- cacheElements() {
1690
- if (!this._displayComponents) {
1691
- return;
1692
- }
1693
- for (let i = 0, l = this._displayComponents.length; i < l; i++) {
1694
- const component = this._displayComponents[i], itemId = component.instance.itemId;
1695
- if (itemId === undefined) {
1696
- continue;
1697
- }
1698
- const bounds = component.instance.getBounds();
1699
- this.set(itemId, bounds);
1700
- }
1701
- }
1702
- dispose() {
1703
- super.dispose();
1704
- this.disposeClearBufferSizeTimer();
1705
- if (this._tracker) {
1706
- this._tracker.dispose();
1707
- }
1708
- }
1709
- }
1710
-
1711
- /**
1712
- * Base disposable component
1713
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/disposableComponent.ts
1714
- * @author Evgenii Grebennikov
1715
- * @email djonnyx@gmail.com
1716
- */
1717
- class DisposableComponent {
1718
- constructor() {
1719
- this._$unsubscribe = new Subject();
1720
- }
1721
- ngOnDestroy() {
1722
- if (this._$unsubscribe) {
1723
- this._$unsubscribe.next();
1724
- this._$unsubscribe.complete();
1725
- }
1726
- }
1727
- }
1728
- DisposableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisposableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1729
- DisposableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DisposableComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
1730
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DisposableComponent, decorators: [{
1731
- type: Component,
1732
- args: [{
1733
- template: ``,
1734
- }]
1735
- }] });
1736
-
1737
- const ADVANCED_PATTERNS = [SnappingMethods.ADVANCED, 'advanced'], DEFAULT_PATTERN = [SnappingMethods.NORMAL, 'normal'];
1738
- const isSnappingMethodAdvenced = (method) => {
1739
- return ADVANCED_PATTERNS.includes(method);
1740
- };
1741
- const isSnappingMethodDefault = (method) => {
1742
- return DEFAULT_PATTERN.includes(method);
1743
- };
1744
-
1745
- const IS_FIREFOX = navigator.userAgent.toLowerCase().includes('firefox');
1746
- const FIREFOX_SCROLLBAR_OVERLAP_SIZE = 12;
1747
-
1748
- const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
1749
- /**
1750
- * Determines the axis membership of a virtual list
1751
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
1752
- * @author Evgenii Grebennikov
1753
- * @email djonnyx@gmail.com
1754
- */
1755
- const isDirection = (src, expected) => {
1756
- if (HORIZONTAL_ALIASES.includes(expected)) {
1757
- return HORIZONTAL_ALIASES.includes(src);
1758
- }
1759
- return VERTICAL_ALIASES.includes(src);
1760
- };
1761
-
1762
- const NONE_ALIASES = [MethodsForSelecting.NONE, 'none'], SELECT_ALIASES = [MethodsForSelecting.SELECT, 'select'], MULTI_SELECT_ALIASES = [MethodsForSelecting.MULTI_SELECT, 'multi-select'];
1763
- /**
1764
- * Defines the method for selecting list items.
1765
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/utils/isMethodForSelecting.ts
1766
- * @author Evgenii Grebennikov
1767
- * @email djonnyx@gmail.com
1768
- */
1769
- const isMethodForSelecting = (src, expected) => {
1770
- if (NONE_ALIASES.includes(expected)) {
1771
- return NONE_ALIASES.includes(src);
1772
- }
1773
- else if (SELECT_ALIASES.includes(expected)) {
1774
- return SELECT_ALIASES.includes(src);
1775
- }
1776
- return MULTI_SELECT_ALIASES.includes(src);
1777
- };
1778
-
1779
- const ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox';
1780
- /**
1781
- * Virtual list component.
1782
- * Maximum performance for extremely large lists.
1783
- * It is based on algorithms for virtualization of screen objects.
1784
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/15.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts
1785
- * @author Evgenii Grebennikov
1786
- * @email djonnyx@gmail.com
1787
- */
1788
- class NgVirtualListComponent extends DisposableComponent {
1789
- /**
1790
- * Readonly. Returns the unique identifier of the component.
1791
- */
1792
- get id() { return this._id; }
1793
- /**
1794
- * Collection of list items.
1795
- */
1796
- set items(v) {
1797
- if (this._$items.getValue() === v) {
1798
- return;
1799
- }
1800
- const transformedValue = this._itemsTransform(v);
1801
- this._$items.next(transformedValue);
1802
- this._cdr.markForCheck();
1803
- }
1804
- ;
1805
- get items() { return this._$items.getValue(); }
1806
- /**
1807
- * Sets the selected items.
1808
- */
1809
- set selectedIds(v) {
1810
- if (this._$selectedIds.getValue() === v) {
1811
- return;
1812
- }
1813
- this._$selectedIds.next(v);
1814
- this._cdr.markForCheck();
1815
- }
1816
- ;
1817
- get selectedIds() { return this._$selectedIds.getValue(); }
1818
- /**
1819
- * Determines whether elements will snap. Default value is "true".
1820
- */
1821
- set snap(v) {
1822
- if (this._$snap.getValue() === v) {
1823
- return;
1824
- }
1825
- this._$snap.next(v);
1826
- this._cdr.markForCheck();
1827
- }
1828
- ;
1829
- get snap() { return this._$snap.getValue(); }
1830
- /**
1831
- * Experimental!
1832
- * Enables buffer optimization.
1833
- * 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.
1834
- * Works only if the property dynamic = true
1835
- */
1836
- set enabledBufferOptimization(v) {
1837
- if (this._$enabledBufferOptimization.getValue() === v) {
1838
- return;
1839
- }
1840
- this._$enabledBufferOptimization.next(v);
1841
- this._cdr.markForCheck();
1842
- }
1843
- ;
1844
- get enabledBufferOptimization() { return this._$enabledBufferOptimization.getValue(); }
1845
- /**
1846
- * Rendering element template.
1847
- */
1848
- set itemRenderer(v) {
1849
- if (this._$itemRenderer.getValue() === v) {
1850
- return;
1851
- }
1852
- this._$itemRenderer.next(v);
1853
- this._cdr.markForCheck();
1854
- }
1855
- ;
1856
- get itemRenderer() { return this._$itemRenderer.getValue(); }
1857
- /**
1858
- * Dictionary zIndex by id of the list element. If the value is not set or equal to 0,
1859
- * then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element.
1860
- */
1861
- set stickyMap(v) {
1862
- if (this._$stickyMap.getValue() === v) {
1863
- return;
1864
- }
1865
- this._$stickyMap.next(v);
1866
- this._cdr.markForCheck();
1867
- }
1868
- ;
1869
- get stickyMap() { return this._$stickyMap.getValue(); }
1870
- /**
1871
- * If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element.
1872
- * Ignored if the dynamicSize property is true.
1873
- */
1874
- set itemSize(v) {
1875
- if (this._$itemSize.getValue() === v) {
1876
- return;
1877
- }
1878
- this._$itemSize.next(this._itemSizeOptions(v));
1879
- this._cdr.markForCheck();
1880
- }
1881
- ;
1882
- get itemSize() { return this._$itemSize.getValue(); }
1883
- /**
1884
- * If true then the items in the list can have different sizes and the itemSize property is ignored.
1885
- * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
1886
- */
1887
- set dynamicSize(v) {
1888
- if (this._$dynamicSize.getValue() === v) {
1889
- return;
1890
- }
1891
- this._$dynamicSize.next(v);
1892
- this._cdr.markForCheck();
1893
- }
1894
- ;
1895
- get dynamicSize() { return this._$dynamicSize.getValue(); }
1896
- /**
1897
- * Determines the direction in which elements are placed. Default value is "vertical".
1898
- */
1899
- set direction(v) {
1900
- if (this._$direction.getValue() === v) {
1901
- return;
1902
- }
1903
- this._$direction.next(v);
1904
- this._cdr.markForCheck();
1905
- }
1906
- ;
1907
- get direction() { return this._$direction.getValue(); }
1908
- /**
1909
- * @deprecated "itemOffset" parameter is deprecated. Use "bufferSize" and "maxBufferSize".
1910
- */
1911
- set itemsOffset(v) {
1912
- throw Error('"itemOffset" parameter is deprecated. Use "bufferSize" and "maxBufferSize".');
1913
- }
1914
- ;
1915
- /**
1916
- * Number of elements outside the scope of visibility. Default value is 2.
1917
- */
1918
- set bufferSize(v) {
1919
- if (this._$bufferSize.getValue() === v) {
1920
- return;
1921
- }
1922
- this._$bufferSize.next(v);
1923
- }
1924
- ;
1925
- get bufferSize() { return this._$bufferSize.getValue(); }
1926
- /**
1927
- * Maximum number of elements outside the scope of visibility. Default value is 100.
1928
- * If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled.
1929
- * The greater the scroll size, the more elements are allocated for rendering.
1930
- */
1931
- set maxBufferSize(v) {
1932
- const val = this._maxBufferSizeTransform(v);
1933
- if (this._$maxBufferSize.getValue() === val) {
1934
- return;
1935
- }
1936
- this._$maxBufferSize.next(val);
1937
- }
1938
- ;
1939
- get maxBufferSize() { return this._$maxBufferSize.getValue(); }
1940
- /**
1941
- * The name of the property by which tracking is performed
1942
- */
1943
- set trackBy(v) {
1944
- if (this._$trackBy.getValue() === v) {
1945
- return;
1946
- }
1947
- this._$trackBy.next(v);
1948
- }
1949
- ;
1950
- get trackBy() { return this._$trackBy.getValue(); }
1951
- get orientation() {
1952
- return this._isVertical ? Directions.VERTICAL : Directions.HORIZONTAL;
1953
- }
1954
- /**
1955
- * Snapping method.
1956
- * 'default' - Normal group rendering.
1957
- * 'advanced' - The group is rendered on a transparent background. List items below the group are not rendered.
1958
- */
1959
- set snappingMethod(v) {
1960
- if (this._$snappingMethod.getValue() === v) {
1961
- return;
1962
- }
1963
- this._$snappingMethod.next(v);
1964
- }
1965
- ;
1966
- get snappingMethod() { return this._$snappingMethod.getValue(); }
1967
- get isSnappingMethodAdvanced() { return this._isSnappingMethodAdvanced; }
1968
- /**
1969
- * Method for selecting list items.
1970
- * 'select' - List items are selected one by one.
1971
- * 'multi-select' - Multiple selection of list items.
1972
- * 'none' - List items are not selectable.
1973
- */
1974
- set methodForSelecting(v) {
1975
- if (this._$methodForSelecting.getValue() === v) {
1976
- return;
1977
- }
1978
- this._$methodForSelecting.next(v);
1979
- }
1980
- ;
1981
- get methodForSelecting() { return this._$methodForSelecting.getValue(); }
1982
- get isNotSelecting() { return this._isNotSelecting; }
1983
- get isSingleSelecting() { return this._isSingleSelecting; }
1984
- get isMultiSelecting() { return this._isMultiSelecting; }
1985
- get $cacheVersion() { return this._$cacheVersion.asObservable(); }
1986
- constructor(_cdr, _elementRef, _service) {
1987
- super();
1988
- this._cdr = _cdr;
1989
- this._elementRef = _elementRef;
1990
- this._service = _service;
1991
- this._id = NgVirtualListComponent.__nextId;
1992
- /**
1993
- * Fires when the list has been scrolled.
1994
- */
1995
- this.onScroll = new EventEmitter$1();
1996
- /**
1997
- * Fires when the list has completed scrolling.
1998
- */
1999
- this.onScrollEnd = new EventEmitter$1();
2000
- /**
2001
- * Fires when the viewport size is changed.
2002
- */
2003
- this.onViewportChange = new EventEmitter$1();
2004
- /**
2005
- * Fires when an element is clicked.
2006
- */
2007
- this.onItemClick = new EventEmitter$1();
2008
- /**
2009
- * Fires when an elements are selected.
2010
- */
2011
- this.onSelect = new EventEmitter$1();
2012
- this._$items = new BehaviorSubject$1(undefined);
2013
- this.$items = this._$items.asObservable();
2014
- this._itemsTransform = (v) => {
2015
- this._trackBox.resetCollection(v, this._$itemSize.getValue());
2016
- return v;
2017
- };
2018
- this._$selectedIds = new BehaviorSubject$1(undefined);
2019
- this.$selectedIds = this._$selectedIds.asObservable();
2020
- this._$snap = new BehaviorSubject$1(DEFAULT_SNAP);
2021
- this.$snap = this._$snap.asObservable();
2022
- this._$enabledBufferOptimization = new BehaviorSubject$1(DEFAULT_ENABLED_BUFFER_OPTIMIZATION);
2023
- this.$enabledBufferOptimization = this._$enabledBufferOptimization.asObservable();
2024
- this._$itemRenderer = new BehaviorSubject$1(undefined);
2025
- this.$itemRenderer = this._$itemRenderer.asObservable();
2026
- this._$renderer = new BehaviorSubject$1(undefined);
2027
- this._$stickyMap = new BehaviorSubject$1({});
2028
- this.$stickyMap = this._$stickyMap.asObservable();
2029
- this._itemSizeOptions = (v) => {
2030
- if (v === undefined) {
2031
- return DEFAULT_ITEM_SIZE;
2032
- }
2033
- const val = Number(v);
2034
- return Number.isNaN(val) || val <= 0 ? DEFAULT_ITEM_SIZE : val;
2035
- };
2036
- this._$itemSize = new BehaviorSubject$1(DEFAULT_ITEM_SIZE);
2037
- this.$itemSize = this._$itemSize.asObservable();
2038
- this._$dynamicSize = new BehaviorSubject$1(DEFAULT_DYNAMIC_SIZE);
2039
- this.$dynamicSize = this._$dynamicSize.asObservable();
2040
- this._$direction = new BehaviorSubject$1(DEFAULT_DIRECTION);
2041
- this.$direction = this._$direction.asObservable();
2042
- this._$bufferSize = new BehaviorSubject$1(DEFAULT_BUFFER_SIZE);
2043
- this.$bufferSize = this._$bufferSize.asObservable();
2044
- this._maxBufferSizeTransform = (v) => {
2045
- const bufferSize = this._$bufferSize.getValue();
2046
- if (v === undefined || v <= bufferSize) {
2047
- return bufferSize;
2048
- }
2049
- return v;
2050
- };
2051
- this._$maxBufferSize = new BehaviorSubject$1(DEFAULT_MAX_BUFFER_SIZE);
2052
- this.$maxBufferSize = this._$maxBufferSize.asObservable();
2053
- this._$trackBy = new BehaviorSubject$1(TRACK_BY_PROPERTY_NAME);
2054
- this.$trackBy = this._$trackBy.asObservable();
2055
- this._isVertical = this.getIsVertical();
2056
- this._$snappingMethod = new BehaviorSubject$1(DEFAULT_SNAPPING_METHOD);
2057
- this.$snappingMethod = this._$snappingMethod.asObservable();
2058
- this._isSnappingMethodAdvanced = this.getIsSnappingMethodAdvanced();
2059
- this._$methodForSelecting = new BehaviorSubject$1(DEFAULT_SELECT_METHOD);
2060
- this.$methodForSelecting = this._$methodForSelecting.asObservable();
2061
- this._isNotSelecting = this.getIsNotSelecting();
2062
- this._isSingleSelecting = this.getIsSingleSelecting();
2063
- this._isMultiSelecting = this.getIsMultiSelecting();
2064
- this._displayComponents = [];
2065
- this._$bounds = new BehaviorSubject$1(null);
2066
- this._$scrollSize = new BehaviorSubject$1(0);
2067
- this._resizeObserver = null;
2068
- this._resizeSnappedComponentHandler = () => {
2069
- const list = this._list, container = this._container, snappedComponent = this._snapedDisplayComponent?.instance;
2070
- if (list && container && snappedComponent) {
2071
- const isVertical = this._isVertical, listBounds = list.nativeElement.getBoundingClientRect(), listElement = list?.nativeElement, { width: lWidth, height: lHeight } = listElement?.getBoundingClientRect() ?? { width: 0, height: 0 }, { width, height } = this._$bounds.getValue() ?? { width: 0, height: 0 }, isScrollable = isVertical ? container.nativeElement.scrollHeight > 0 : container.nativeElement.scrollWidth > 0;
2072
- let scrollBarSize = isVertical ? width - lWidth : height - lHeight, isScrollBarOverlap = true, overlapScrollBarSize = 0;
2073
- if (scrollBarSize === 0 && isScrollable) {
2074
- isScrollBarOverlap = true;
2075
- }
2076
- if (isScrollBarOverlap && IS_FIREFOX) {
2077
- scrollBarSize = overlapScrollBarSize = FIREFOX_SCROLLBAR_OVERLAP_SIZE;
2078
- }
2079
- const { width: sWidth, height: sHeight } = snappedComponent.getBounds() ?? { width: 0, height: 0 };
2080
- snappedComponent.element.style.clipPath = `path("M 0 0 L 0 ${sHeight} L ${sWidth - overlapScrollBarSize} ${sHeight} L ${sWidth - overlapScrollBarSize} 0 Z")`;
2081
- snappedComponent.regularLength = `${isVertical ? listBounds.width : listBounds.height}${PX}`;
2082
- const containerElement = container.nativeElement, delta = snappedComponent.item?.measures.delta ?? 0;
2083
- let left, right, top, bottom;
2084
- if (isVertical) {
2085
- left = 0;
2086
- right = width - scrollBarSize;
2087
- top = sHeight;
2088
- bottom = height;
2089
- containerElement.style.clipPath = `path("M 0 ${top + delta} L 0 ${height} L ${width} ${height} L ${width} 0 L ${right} 0 L ${right} ${top + delta} Z")`;
2090
- }
2091
- else {
2092
- left = sWidth;
2093
- right = width;
2094
- top = 0;
2095
- bottom = height - scrollBarSize;
2096
- containerElement.style.clipPath = `path("M ${left + delta} 0 L ${left + delta} ${bottom} L 0 ${bottom} L 0 ${height} L ${width} ${height} L ${width} 0 Z")`;
2097
- }
2098
- }
2099
- };
2100
- this._resizeSnappedObserver = null;
2101
- this._onResizeHandler = () => {
2102
- const bounds = this._container?.nativeElement?.getBoundingClientRect();
2103
- if (bounds) {
2104
- this._$bounds.next({ width: bounds.width, height: bounds.height });
2105
- }
2106
- else {
2107
- this._$bounds.next({ width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE });
2108
- }
2109
- if (this._isSnappingMethodAdvanced) {
2110
- this.updateRegularRenderer();
2111
- }
2112
- };
2113
- this._onScrollHandler = (e) => {
2114
- this.clearScrollToRepeatExecutionTimeout();
2115
- const container = this._container?.nativeElement;
2116
- if (container) {
2117
- const scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft);
2118
- this._$scrollSize.next(scrollSize);
2119
- }
2120
- };
2121
- this._$initialized = new BehaviorSubject$1(false);
2122
- /**
2123
- * Base class of the element component
2124
- */
2125
- this._itemComponentClass = NgVirtualListItemComponent;
2126
- /**
2127
- * Base class trackBox
2128
- */
2129
- this._trackBoxClass = TrackBox;
2130
- /**
2131
- * Dictionary of element sizes by their id
2132
- */
2133
- this._trackBox = new this._trackBoxClass(this.trackBy);
2134
- this._onTrackBoxChangeHandler = (v) => {
2135
- this._$cacheVersion.next(v);
2136
- };
2137
- this._$cacheVersion = new BehaviorSubject$1(-1);
2138
- this._componentsResizeObserver = new ResizeObserver(() => {
2139
- this._trackBox.changes();
2140
- });
2141
- this._onContainerScrollHandler = (e) => {
2142
- const containerEl = this._container;
2143
- if (containerEl) {
2144
- const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
2145
- this._trackBox.deltaDirection = this._$scrollSize.getValue() > scrollSize ? -1 : this._$scrollSize.getValue() < scrollSize ? 1 : 0;
2146
- const event = new ScrollEvent({
2147
- direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
2148
- list: this._list.nativeElement, delta: this._trackBox.delta,
2149
- scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
2150
- });
2151
- this.onScroll.emit(event);
2152
- }
2153
- };
2154
- this._onContainerScrollEndHandler = (e) => {
2155
- const containerEl = this._container;
2156
- if (containerEl) {
2157
- const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
2158
- this._trackBox.deltaDirection = this._$scrollSize.getValue() > scrollSize ? -1 : 0;
2159
- const event = new ScrollEvent({
2160
- direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
2161
- list: this._list.nativeElement, delta: this._trackBox.delta,
2162
- scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
2163
- });
2164
- this.onScrollEnd.emit(event);
2165
- }
2166
- };
2167
- NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
2168
- ? 0 : NgVirtualListComponent.__nextId + 1;
2169
- this._id = NgVirtualListComponent.__nextId;
2170
- this._service.initialize(this._trackBox);
2171
- this._$initialized = new BehaviorSubject$1(false);
2172
- this.$initialized = this._$initialized.asObservable();
2173
- this._trackBox.displayComponents = this._displayComponents;
2174
- const $trackBy = this.$trackBy;
2175
- $trackBy.pipe(takeUntil(this._$unsubscribe), tap(v => {
2176
- this._trackBox.trackingPropertyName = v;
2177
- })).subscribe();
2178
- const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $stickyMap = this.$stickyMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $cacheVersion = this.$cacheVersion;
2179
- $isVertical.pipe(takeUntil(this._$unsubscribe), tap(v => {
2180
- this._isVertical = v;
2181
- const el = this._elementRef.nativeElement;
2182
- toggleClassName(el, v ? CLASS_LIST_VERTICAL : CLASS_LIST_HORIZONTAL, v ? CLASS_LIST_HORIZONTAL : CLASS_LIST_VERTICAL);
2183
- })).subscribe();
2184
- $snappingMethod.pipe(takeUntil(this._$unsubscribe), tap(v => {
2185
- this._isSnappingMethodAdvanced = this._trackBox.isSnappingMethodAdvanced = v;
2186
- })).subscribe();
2187
- combineLatest([$methodForSelecting, this.$initialized]).pipe(takeUntil(this._$unsubscribe), debounceTime(0), filter(([, init]) => init === true), map$1(([v]) => (v)), tap(v => {
2188
- const el = this._list?.nativeElement;
2189
- if (this.getIsMultiSelecting(v || DEFAULT_SNAPPING_METHOD)) {
2190
- this._isMultiSelecting = true;
2191
- this._isNotSelecting = this._isSingleSelecting = false;
2192
- if (el) {
2193
- console.log('set role', ROLE_LIST_BOX);
2194
- el.setAttribute('role', ROLE_LIST_BOX);
2195
- }
2196
- this._service.methodOfSelecting = MethodsForSelectingTypes.MULTI_SELECT;
2197
- }
2198
- else if (this.getIsSingleSelecting(v || DEFAULT_SNAPPING_METHOD)) {
2199
- this._isSingleSelecting = true;
2200
- this._isNotSelecting = this._isMultiSelecting = false;
2201
- if (el) {
2202
- console.log('set role', ROLE_LIST_BOX);
2203
- el.setAttribute('role', ROLE_LIST_BOX);
2204
- }
2205
- this._service.methodOfSelecting = MethodsForSelectingTypes.SELECT;
2206
- }
2207
- else if (this.getIsNotSelecting(v || DEFAULT_SNAPPING_METHOD)) {
2208
- this._isNotSelecting = true;
2209
- this._isSingleSelecting = this._isMultiSelecting = false;
2210
- if (el) {
2211
- console.log('set role', ROLE_LIST);
2212
- el.setAttribute('role', ROLE_LIST);
2213
- }
2214
- this._service.methodOfSelecting = MethodsForSelectingTypes.NONE;
2215
- }
2216
- })).subscribe();
2217
- $dynamicSize.pipe(takeUntil(this._$unsubscribe), tap(dynamicSize => {
2218
- this.listenCacheChangesIfNeed(dynamicSize);
2219
- })).subscribe();
2220
- combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
2221
- $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
2222
- ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
2223
- let actualScrollSize = (this._isVertical ? this._container?.nativeElement.scrollTop ?? 0 : this._container?.nativeElement.scrollLeft) ?? 0;
2224
- const { width, height } = bounds, opts = {
2225
- bounds: { width, height }, dynamicSize, isVertical, itemSize,
2226
- bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
2227
- }, { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, opts);
2228
- this.resetBoundsSize(isVertical, totalSize);
2229
- this.createDisplayComponentsIfNeed(displayItems);
2230
- this.tracking();
2231
- if (this._isSnappingMethodAdvanced) {
2232
- this.updateRegularRenderer();
2233
- }
2234
- const container = this._container;
2235
- if (container) {
2236
- const delta = this._trackBox.delta;
2237
- actualScrollSize = actualScrollSize + delta;
2238
- this._trackBox.clearDelta();
2239
- if (scrollSize !== actualScrollSize) {
2240
- const params = {
2241
- [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
2242
- behavior: BEHAVIOR_INSTANT
2243
- };
2244
- container.nativeElement.scrollTo(params);
2245
- }
2246
- }
2247
- return of(displayItems);
2248
- })).subscribe();
2249
- const $itemRenderer = this.$itemRenderer;
2250
- $itemRenderer.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(v => !!v), tap(v => {
2251
- this._$renderer.next(v);
2252
- })).subscribe();
2253
- $bounds.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), tap(value => {
2254
- this.onViewportChange.emit(value ?? undefined);
2255
- })).subscribe();
2256
- this._service.$itemClick.pipe(takeUntil(this._$unsubscribe), tap(v => {
2257
- this.onItemClick.emit(v ?? undefined);
2258
- })).subscribe();
2259
- this._service.$selectedIds.pipe(takeUntil(this._$unsubscribe), tap(v => {
2260
- this.onSelect.emit(v);
2261
- })).subscribe();
2262
- $selectedIds.pipe(takeUntil(this._$unsubscribe), tap(v => {
2263
- this._service.setSelectedIds(v);
2264
- })).subscribe();
2265
- }
2266
- /** @internal */
2267
- ngOnInit() {
2268
- this.onInit();
2269
- }
2270
- onInit() {
2271
- this._$initialized.next(true);
2272
- }
2273
- listenCacheChangesIfNeed(value) {
2274
- if (value) {
2275
- if (!this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
2276
- this._trackBox.addEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
2277
- }
2278
- }
2279
- else {
2280
- if (this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
2281
- this._trackBox.removeEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
2282
- }
2283
- }
2284
- }
2285
- getIsSnappingMethodAdvanced(m) {
2286
- const method = m || this._$snappingMethod.getValue();
2287
- return isSnappingMethodAdvenced(method);
2288
- }
2289
- getIsNotSelecting(m) {
2290
- const method = m || this.methodForSelecting;
2291
- return isMethodForSelecting(method, MethodsForSelecting.NONE);
2292
- }
2293
- getIsSingleSelecting(m) {
2294
- const method = m || this.methodForSelecting;
2295
- return isMethodForSelecting(method, MethodsForSelecting.SELECT);
2296
- }
2297
- getIsMultiSelecting(m) {
2298
- const method = m || this.methodForSelecting;
2299
- return isMethodForSelecting(method, MethodsForSelecting.MULTI_SELECT);
2300
- }
2301
- getIsVertical(d) {
2302
- const dir = d || this.direction;
2303
- return isDirection(dir, Directions.VERTICAL);
2304
- }
2305
- createDisplayComponentsIfNeed(displayItems) {
2306
- if (!displayItems || !this._listContainerRef) {
2307
- this._trackBox.setDisplayObjectIndexMapById({});
2308
- return;
2309
- }
2310
- if (this._isSnappingMethodAdvanced && this.snap) {
2311
- if (!this._snapedDisplayComponent && this._snapContainerRef) {
2312
- const comp = this._snapContainerRef.createComponent(this._itemComponentClass);
2313
- comp.instance.regular = true;
2314
- this._snapedDisplayComponent = comp;
2315
- this._trackBox.snapedDisplayComponent = this._snapedDisplayComponent;
2316
- this._resizeSnappedObserver = new ResizeObserver(this._resizeSnappedComponentHandler);
2317
- this._resizeSnappedObserver.observe(comp.instance.element);
2318
- }
2319
- }
2320
- this._trackBox.items = displayItems;
2321
- const _listContainerRef = this._listContainerRef;
2322
- const maxLength = displayItems.length, components = this._displayComponents;
2323
- while (components.length < maxLength) {
2324
- if (_listContainerRef) {
2325
- const comp = _listContainerRef.createComponent(this._itemComponentClass);
2326
- components.push(comp);
2327
- this._componentsResizeObserver.observe(comp.instance.element);
2328
- }
2329
- }
2330
- this.resetRenderers();
2331
- }
2332
- updateRegularRenderer() {
2333
- this._resizeSnappedComponentHandler();
2334
- }
2335
- resetRenderers(itemRenderer) {
2336
- const doMap = {};
2337
- for (let i = 0, l = this._displayComponents.length; i < l; i++) {
2338
- const item = this._displayComponents[i];
2339
- item.instance.renderer = itemRenderer || this.itemRenderer;
2340
- doMap[item.instance.id] = i;
2341
- }
2342
- if (this._isSnappingMethodAdvanced && this.snap && this._snapedDisplayComponent && this._snapContainerRef) {
2343
- const comp = this._snapedDisplayComponent;
2344
- comp.instance.renderer = itemRenderer || this.itemRenderer;
2345
- }
2346
- this._trackBox.setDisplayObjectIndexMapById(doMap);
2347
- }
2348
- /**
2349
- * Tracking by id
2350
- */
2351
- tracking() {
2352
- this._trackBox.track();
2353
- }
2354
- resetBoundsSize(isVertical, totalSize) {
2355
- const l = this._list;
2356
- if (l) {
2357
- l.nativeElement.style[isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME] = `${totalSize}${PX}`;
2358
- }
2359
- }
2360
- /**
2361
- * Returns the bounds of an element with a given id
2362
- */
2363
- getItemBounds(id) {
2364
- return this._trackBox.getItemBounds(id);
2365
- }
2366
- /**
2367
- * The method scrolls the list to the element with the given id and returns the value of the scrolled area.
2368
- * Behavior accepts the values ​​"auto", "instant" and "smooth".
2369
- */
2370
- scrollTo(id, behavior = BEHAVIOR_AUTO) {
2371
- this.scrollToExecutor(id, behavior);
2372
- }
2373
- clearScrollToRepeatExecutionTimeout() {
2374
- clearTimeout(this._scrollToRepeatExecutionTimeout);
2375
- }
2376
- scrollToExecutor(id, behavior, iteration = 0, isLastIteration = false) {
2377
- const items = this.items;
2378
- if (!items || !items.length) {
2379
- return;
2380
- }
2381
- const dynamicSize = this.dynamicSize, container = this._container, itemSize = this.itemSize;
2382
- if (container) {
2383
- this.clearScrollToRepeatExecutionTimeout();
2384
- if (dynamicSize) {
2385
- if (container) {
2386
- container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
2387
- }
2388
- const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
2389
- bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
2390
- bufferSize: this.bufferSize, maxBufferSize: this.maxBufferSize, scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
2391
- snap: this.snap, fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization,
2392
- }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
2393
- if (scrollSize === -1) {
2394
- container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
2395
- return;
2396
- }
2397
- this._trackBox.clearDelta();
2398
- if (container) {
2399
- const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
2400
- ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
2401
- }), delta = this._trackBox.delta;
2402
- this._trackBox.clearDelta();
2403
- let actualScrollSize = scrollSize + delta;
2404
- this.resetBoundsSize(isVertical, totalSize);
2405
- this.createDisplayComponentsIfNeed(displayItems);
2406
- this.tracking();
2407
- const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
2408
- if (_scrollSize === -1) {
2409
- container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
2410
- return;
2411
- }
2412
- const notChanged = actualScrollSize === _scrollSize;
2413
- if (!notChanged || iteration < MAX_SCROLL_TO_ITERATIONS) {
2414
- this.clearScrollToRepeatExecutionTimeout();
2415
- this._scrollToRepeatExecutionTimeout = setTimeout(() => {
2416
- this.scrollToExecutor(id, BEHAVIOR_INSTANT, iteration + 1, notChanged);
2417
- });
2418
- }
2419
- else {
2420
- this._$scrollSize.next(actualScrollSize);
2421
- container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
2422
- }
2423
- }
2424
- container.nativeElement.scrollTo(params);
2425
- this._$scrollSize.next(scrollSize);
2426
- }
2427
- else {
2428
- const index = items.findIndex(item => item.id === id);
2429
- if (index > -1) {
2430
- const scrollSize = index * this.itemSize;
2431
- const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
2432
- container.nativeElement.scrollTo(params);
2433
- }
2434
- }
2435
- }
2436
- }
2437
- /**
2438
- * Scrolls the scroll area to the desired element with the specified ID.
2439
- */
2440
- scrollToEnd(behavior = BEHAVIOR_INSTANT) {
2441
- const items = this.items, latItem = items[items.length > 0 ? items.length - 1 : 0];
2442
- this.scrollTo(latItem.id, behavior);
2443
- }
2444
- /** @internal */
2445
- ngAfterViewInit() {
2446
- this.afterViewInit();
2447
- }
2448
- afterViewInit() {
2449
- const containerEl = this._container;
2450
- if (containerEl) {
2451
- // for direction calculation
2452
- containerEl.nativeElement.addEventListener(SCROLL, this._onContainerScrollHandler);
2453
- containerEl.nativeElement.addEventListener(SCROLL_END, this._onContainerScrollEndHandler);
2454
- containerEl.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
2455
- this._resizeObserver = new ResizeObserver(this._onResizeHandler);
2456
- this._resizeObserver.observe(containerEl.nativeElement);
2457
- this._onResizeHandler();
2458
- }
2459
- }
2460
- /** @internal */
2461
- ngOnDestroy() {
2462
- super.ngOnDestroy();
2463
- this.dispose();
2464
- }
2465
- dispose() {
2466
- this.clearScrollToRepeatExecutionTimeout();
2467
- if (this._trackBox) {
2468
- this._trackBox.dispose();
2469
- }
2470
- if (this._componentsResizeObserver) {
2471
- this._componentsResizeObserver.disconnect();
2472
- }
2473
- if (this._resizeObserver) {
2474
- this._resizeObserver.disconnect();
2475
- }
2476
- if (this._resizeSnappedObserver) {
2477
- this._resizeSnappedObserver.disconnect();
2478
- }
2479
- const containerEl = this._container;
2480
- if (containerEl) {
2481
- containerEl.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
2482
- containerEl.nativeElement.removeEventListener(SCROLL, this._onContainerScrollHandler);
2483
- containerEl.nativeElement.removeEventListener(SCROLL_END, this._onContainerScrollEndHandler);
2484
- }
2485
- if (this._snapedDisplayComponent) {
2486
- this._snapedDisplayComponent.destroy();
2487
- }
2488
- if (this._displayComponents) {
2489
- while (this._displayComponents.length > 0) {
2490
- const comp = this._displayComponents.pop();
2491
- comp?.destroy();
2492
- }
2493
- }
2494
- if (this._service) {
2495
- this._service.destroy();
2496
- }
2497
- }
2498
- }
2499
- NgVirtualListComponent.__nextId = 0;
2500
- NgVirtualListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
2501
- NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", trackBy: "trackBy", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n <div [attr.aria-orientation]=\"orientation\" #list part=\"list\" class=\"ngvl__list\">\r\n <ng-container #renderersContainer></ng-container>\r\n </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
2502
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListComponent, decorators: [{
2503
- type: Component,
2504
- args: [{ selector: 'ng-virtual-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n <div [attr.aria-orientation]=\"orientation\" #list part=\"list\" class=\"ngvl__list\">\r\n <ng-container #renderersContainer></ng-container>\r\n </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
2505
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NgVirtualListService }]; }, propDecorators: { _listContainerRef: [{
2506
- type: ViewChild,
2507
- args: ['renderersContainer', { read: ViewContainerRef }]
2508
- }], _container: [{
2509
- type: ViewChild,
2510
- args: ['container', { read: (ElementRef) }]
2511
- }], _list: [{
2512
- type: ViewChild,
2513
- args: ['list', { read: (ElementRef) }]
2514
- }], _snapContainerRef: [{
2515
- type: ViewChild,
2516
- args: ['snapRendererContainer', { read: ViewContainerRef }]
2517
- }], _snappedContainer: [{
2518
- type: ViewChild,
2519
- args: ['snapped', { read: ViewContainerRef }]
2520
- }], onScroll: [{
2521
- type: Output
2522
- }], onScrollEnd: [{
2523
- type: Output
2524
- }], onViewportChange: [{
2525
- type: Output
2526
- }], onItemClick: [{
2527
- type: Output
2528
- }], onSelect: [{
2529
- type: Output
2530
- }], items: [{
2531
- type: Input
2532
- }], selectedIds: [{
2533
- type: Input
2534
- }], snap: [{
2535
- type: Input
2536
- }], enabledBufferOptimization: [{
2537
- type: Input
2538
- }], itemRenderer: [{
2539
- type: Input
2540
- }], stickyMap: [{
2541
- type: Input
2542
- }], itemSize: [{
2543
- type: Input
2544
- }], dynamicSize: [{
2545
- type: Input
2546
- }], direction: [{
2547
- type: Input
2548
- }], itemsOffset: [{
2549
- type: Input
2550
- }], bufferSize: [{
2551
- type: Input
2552
- }], maxBufferSize: [{
2553
- type: Input
2554
- }], trackBy: [{
2555
- type: Input
2556
- }], snappingMethod: [{
2557
- type: Input
2558
- }], methodForSelecting: [{
2559
- type: Input
2560
- }] } });
2561
-
2562
- class NgVirtualListModule {
2563
- }
2564
- NgVirtualListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2565
- NgVirtualListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, declarations: [NgVirtualListComponent, NgVirtualListItemComponent], imports: [CommonModule], exports: [NgVirtualListComponent] });
2566
- NgVirtualListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, imports: [CommonModule] });
2567
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgVirtualListModule, decorators: [{
2568
- type: NgModule,
2569
- args: [{
2570
- declarations: [NgVirtualListComponent, NgVirtualListItemComponent],
2571
- exports: [NgVirtualListComponent],
2572
- imports: [CommonModule],
2573
- schemas: [NO_ERRORS_SCHEMA],
2574
- }]
2575
- }] });
2576
-
2577
- /*
2578
- * Public API Surface of ng-virtual-list
2579
- */
2580
-
2581
- /**
2582
- * Generated bundle index. Do not edit.
2583
- */
2584
-
2585
- export { Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
2586
- //# sourceMappingURL=ng-virtual-list.mjs.map