ng-virtual-list 19.1.41 → 19.1.42

package/fesm2022/ng-virtual-list.mjs

@@ -0,0 +1,1621 @@
+import * as i0 from '@angular/core';
+import { signal, inject, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
+
+/**
+ * Axis of the arrangement of virtual list elements.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/enums/directions.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+var Directions;
+(function (Directions) {
+    /**
+     * Horizontal axis.
+     */
+    Directions["HORIZONTAL"] = "horizontal";
+    /**
+     * Vertical axis.
+     */
+    Directions["VERTICAL"] = "vertical";
+})(Directions || (Directions = {}));
+
+const DEFAULT_ITEM_SIZE = 24;
+const DEFAULT_ITEMS_OFFSET = 2;
+const DEFAULT_LIST_SIZE = 400;
+const DEFAULT_SNAP = false;
+const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
+const DEFAULT_DYNAMIC_SIZE = false;
+const TRACK_BY_PROPERTY_NAME = 'id';
+const DEFAULT_DIRECTION = Directions.VERTICAL;
+const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
+const MAX_SCROLL_TO_ITERATIONS = 5;
+// presets
+const BEHAVIOR_AUTO = 'auto';
+const BEHAVIOR_INSTANT = 'instant';
+const BEHAVIOR_SMOOTH = 'smooth';
+const VISIBILITY_VISIBLE = 'visible';
+const VISIBILITY_HIDDEN = 'hidden';
+const SIZE_100_PERSENT = '100%';
+const SIZE_AUTO = 'auto';
+const POSITION_ABSOLUTE = 'absolute';
+const POSITION_STICKY = 'sticky';
+const TRANSLATE_3D = 'translate3d';
+const ZEROS_TRANSLATE_3D = `${TRANSLATE_3D}(0,0,0)`;
+const TOP_PROP_NAME = 'top';
+const LEFT_PROP_NAME = 'left';
+const X_PROP_NAME = 'x';
+const Y_PROP_NAME = 'y';
+const WIDTH_PROP_NAME = 'width';
+const HEIGHT_PROP_NAME = 'height';
+const PX = 'px';
+const SCROLL = 'scroll';
+const SCROLL_END = 'scrollend';
+const CLASS_LIST_VERTICAL = 'vertical';
+const CLASS_LIST_HORIZONTAL = 'horizontal';
+
+/**
+ * Virtual list item component
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class NgVirtualListItemComponent {
+    static __nextId = 0;
+    _id;
+    get id() {
+        return this._id;
+    }
+    data = signal(undefined);
+    _data = undefined;
+    set item(v) {
+        if (this._data === v) {
+            return;
+        }
+        const data = this._data = v;
+        if (data) {
+            const styles = this._elementRef.nativeElement.style;
+            styles.zIndex = String(data.config.sticky);
+            if (data.config.snapped) {
+                styles.transform = ZEROS_TRANSLATE_3D;
+                styles.position = POSITION_STICKY;
+            }
+            else {
+                styles.position = POSITION_ABSOLUTE;
+                styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
+            }
+            styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : SIZE_100_PERSENT;
+            styles.width = data.config.isVertical ? SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;
+        }
+        this.data.set(v);
+    }
+    get item() {
+        return this._data;
+    }
+    get itemId() {
+        return this._data?.id;
+    }
+    itemRenderer = signal(undefined);
+    set renderer(v) {
+        this.itemRenderer.set(v);
+    }
+    _elementRef = inject((ElementRef));
+    get element() {
+        return this._elementRef.nativeElement;
+    }
+    constructor() {
+        this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
+            ? 0 : NgVirtualListItemComponent.__nextId + 1;
+    }
+    getBounds() {
+        const el = this._elementRef.nativeElement, { width, height } = el.getBoundingClientRect();
+        return { width, height };
+    }
+    show() {
+        const styles = this._elementRef.nativeElement.style;
+        if (styles.visibility === VISIBILITY_VISIBLE) {
+            return;
+        }
+        styles.visibility = VISIBILITY_VISIBLE;
+    }
+    hide() {
+        const styles = this._elementRef.nativeElement.style;
+        if (styles.visibility === VISIBILITY_HIDDEN) {
+            return;
+        }
+        styles.visibility = VISIBILITY_HIDDEN;
+        styles.transform = ZEROS_TRANSLATE_3D;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n        'snapped-out': item.config.snappedOut}\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n        }\r\n    </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-virtual-list-item', imports: [CommonModule], host: {
+                        'class': 'ngvl__item',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n        'snapped-out': item.config.snappedOut}\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n        }\r\n    </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
+        }], ctorParameters: () => [] });
+
+const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
+/**
+ * Determines the axis membership of a virtual list
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+const isDirection = (src, expected) => {
+    if (HORIZONTAL_ALIASES.includes(expected)) {
+        return HORIZONTAL_ALIASES.includes(src);
+    }
+    return VERTICAL_ALIASES.includes(src);
+};
+
+/**
+ * Simple debounce function.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+const debounce = (cb, debounceTime = 0) => {
+    let timeout;
+    const dispose = () => {
+        if (timeout !== undefined) {
+            clearTimeout(timeout);
+        }
+    };
+    const execute = (...args) => {
+        dispose();
+        timeout = setTimeout(() => {
+            cb(...args);
+        }, debounceTime);
+    };
+    return {
+        /**
+         *  Call handling method
+         */
+        execute,
+        /**
+         * Method of destroying handlers
+         */
+        dispose,
+    };
+};
+
+/**
+ * Switch css classes
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+const toggleClassName = (el, className, remove = false) => {
+    if (!el.classList.contains(className)) {
+        el.classList.add(className);
+    }
+    else if (remove) {
+        el.classList.remove(className);
+    }
+};
+
+/**
+ * Tracks display items by property
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class Tracker {
+    /**
+     * display objects dictionary of indexes by id
+     */
+    _displayObjectIndexMapById = {};
+    set displayObjectIndexMapById(v) {
+        if (this._displayObjectIndexMapById === v) {
+            return;
+        }
+        this._displayObjectIndexMapById = v;
+    }
+    get displayObjectIndexMapById() {
+        return this._displayObjectIndexMapById;
+    }
+    /**
+     * Dictionary displayItems propertyNameId by items propertyNameId
+     */
+    _trackMap = {};
+    get trackMap() {
+        return this._trackMap;
+    }
+    _trackingPropertyName;
+    set trackingPropertyName(v) {
+        this._trackingPropertyName = v;
+    }
+    constructor(trackingPropertyName) {
+        this._trackingPropertyName = trackingPropertyName;
+    }
+    /**
+     * tracking by propName
+     */
+    track(items, components, direction) {
+        if (!items) {
+            return;
+        }
+        const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
+        for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
+            const item = items[i], itemTrackingProperty = item[idPropName];
+            if (this._trackMap) {
+                if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
+                    const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
+                    const compId = comp?.instance?.id;
+                    if (comp !== undefined && compId == diId) {
+                        const indexByUntrackedItems = untrackedItems.findIndex(v => {
+                            return v.instance.id == compId;
+                        });
+                        if (indexByUntrackedItems > -1) {
+                            comp.instance.item = item;
+                            comp.instance.show();
+                            untrackedItems.splice(indexByUntrackedItems, 1);
+                            continue;
+                        }
+                    }
+                    delete this._trackMap[itemTrackingProperty];
+                }
+            }
+            if (untrackedItems.length > 0) {
+                const el = untrackedItems.shift(), item = items[i];
+                if (el) {
+                    el.instance.item = item;
+                    if (this._trackMap) {
+                        this._trackMap[itemTrackingProperty] = el.instance.id;
+                    }
+                }
+            }
+        }
+        if (untrackedItems.length) {
+            for (let i = 0, l = untrackedItems.length; i < l; i++) {
+                const comp = untrackedItems[i];
+                comp.instance.hide();
+            }
+        }
+    }
+    untrackComponentByIdProperty(component) {
+        if (!component) {
+            return;
+        }
+        const propertyIdName = this._trackingPropertyName;
+        if (this._trackMap && component[propertyIdName] !== undefined) {
+            delete this._trackMap[propertyIdName];
+        }
+    }
+    dispose() {
+        this._trackMap = null;
+    }
+}
+
+/**
+ * Simple event emitter
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class EventEmitter {
+    _listeners = {};
+    _disposed = false;
+    constructor() { }
+    /**
+     * Emits the event
+     */
+    dispatch(event, ...args) {
+        const ctx = this;
+        const listeners = this._listeners[event];
+        if (Array.isArray(listeners)) {
+            for (let i = 0, l = listeners.length; i < l; i++) {
+                const listener = listeners[i];
+                if (listener) {
+                    listener.apply(ctx, args);
+                }
+            }
+        }
+    }
+    /**
+     * Emits the event async
+     */
+    dispatchAsync(event, ...args) {
+        queueMicrotask(() => {
+            if (this._disposed) {
+                return;
+            }
+            this.dispatch(event, ...args);
+        });
+    }
+    /**
+     * Returns true if the event listener is already subscribed.
+     */
+    hasEventListener(eventName, handler) {
+        const event = eventName;
+        if (this._listeners.hasOwnProperty(event)) {
+            const listeners = this._listeners[event];
+            const index = listeners.findIndex(v => v === handler);
+            if (index > -1) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Add event listener
+     */
+    addEventListener(eventName, handler) {
+        const event = eventName;
+        if (!this._listeners.hasOwnProperty(event)) {
+            this._listeners[event] = [];
+        }
+        this._listeners[event].push(handler);
+    }
+    /**
+     * Remove event listener
+     */
+    removeEventListener(eventName, handler) {
+        const event = eventName;
+        if (!this._listeners.hasOwnProperty(event)) {
+            return;
+        }
+        const listeners = this._listeners[event], index = listeners.findIndex(v => v === handler);
+        if (index > -1) {
+            listeners.splice(index, 1);
+            if (listeners.length === 0) {
+                delete this._listeners[event];
+            }
+        }
+    }
+    /**
+     * Remove all listeners
+     */
+    removeAllListeners() {
+        const events = Object.keys(this._listeners);
+        while (events.length > 0) {
+            const event = events.pop();
+            if (event) {
+                const listeners = this._listeners[event];
+                if (Array.isArray(listeners)) {
+                    while (listeners.length > 0) {
+                        const listener = listeners.pop();
+                        if (listener) {
+                            this.removeEventListener(event, listener);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Method of destroying handlers
+     */
+    dispose() {
+        this._disposed = true;
+        this.removeAllListeners();
+    }
+}
+
+class CMap {
+    _dict = {};
+    constructor(dict) {
+        if (dict) {
+            this._dict = { ...dict._dict };
+        }
+    }
+    get(key) {
+        const k = String(key);
+        return this._dict[k];
+    }
+    set(key, value) {
+        const k = String(key);
+        this._dict[k] = value;
+        return this;
+    }
+    has(key) {
+        return this._dict.hasOwnProperty(String(key));
+    }
+    delete(key) {
+        const k = String(key);
+        delete this._dict[k];
+    }
+    clear() {
+        this._dict = {};
+    }
+}
+const CACHE_BOX_CHANGE_EVENT_NAME = 'change';
+const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10, DIR_BACK = '-1', DIR_NONE = '0', DIR_FORWARD = '1';
+/**
+ * Cache map.
+ * Emits a change event on each mutation.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class CacheMap extends EventEmitter {
+    _map = new CMap();
+    _snapshot = new CMap();
+    _version = 0;
+    _previousVersion = this._version;
+    _lifeCircleTimeout;
+    _delta = 0;
+    get delta() {
+        return this._delta;
+    }
+    _deltaDirection = 0;
+    set deltaDirection(v) {
+        this._deltaDirection = v;
+        this._scrollDirection = this.calcScrollDirection(v);
+    }
+    get deltaDirection() {
+        return this._deltaDirection;
+    }
+    _scrollDirectionCache = [];
+    _scrollDirection = 0;
+    get scrollDirection() {
+        return this._scrollDirection;
+    }
+    get version() {
+        return this._version;
+    }
+    _clearScrollDirectionDebounce = debounce(() => {
+        while (this._scrollDirectionCache.length > CLEAR_SCROLL_DIRECTION_TO) {
+            this._scrollDirectionCache.shift();
+        }
+    }, 10);
+    constructor() {
+        super();
+        this.lifeCircle();
+    }
+    changesDetected() {
+        return this._version !== this._previousVersion;
+    }
+    stopLifeCircle() {
+        clearTimeout(this._lifeCircleTimeout);
+    }
+    nextTick(cb) {
+        if (this._disposed) {
+            return;
+        }
+        this._lifeCircleTimeout = setTimeout(() => {
+            cb();
+        });
+        return this._lifeCircleTimeout;
+    }
+    lifeCircle() {
+        this.fireChangeIfNeed();
+        this.lifeCircleDo();
+    }
+    lifeCircleDo() {
+        this._previousVersion = this._version;
+        this.nextTick(() => {
+            this.lifeCircle();
+        });
+    }
+    clearScrollDirectionCache() {
+        this._clearScrollDirectionDebounce.execute();
+    }
+    calcScrollDirection(v) {
+        while (this._scrollDirectionCache.length >= MAX_SCROLL_DIRECTION_POOL) {
+            this._scrollDirectionCache.shift();
+        }
+        this._scrollDirectionCache.push(v);
+        const dict = { [DIR_BACK]: 0, [DIR_NONE]: 0, [DIR_FORWARD]: 0 };
+        for (let i = 0, l = this._scrollDirectionCache.length, li = l - 1; i < l; i++) {
+            const dir = String(this._scrollDirectionCache[i]);
+            dict[dir] += 1;
+            if (i === li) {
+                for (let d in dict) {
+                    if (d === String(v)) {
+                        continue;
+                    }
+                    dict[d] -= 1;
+                }
+            }
+        }
+        if (dict[DIR_BACK] > dict[DIR_NONE] && dict[DIR_BACK] > dict[DIR_FORWARD]) {
+            return -1;
+        }
+        else if (dict[DIR_FORWARD] > dict[DIR_BACK] && dict[DIR_FORWARD] > dict[DIR_NONE]) {
+            return 1;
+        }
+        return 0;
+    }
+    bumpVersion() {
+        if (this.changesDetected()) {
+            return;
+        }
+        const v = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
+        this._version = v;
+    }
+    fireChangeIfNeed() {
+        if (this.changesDetected()) {
+            this.dispatch(CACHE_BOX_CHANGE_EVENT_NAME, this.version);
+        }
+    }
+    set(id, bounds) {
+        if (this._map.has(id)) {
+            const b = this._map.get(id), bb = bounds;
+            if (b.width === bb.width && b.height === bb.height) {
+                return this._map;
+            }
+            return this._map;
+        }
+        const v = this._map.set(id, bounds);
+        this.bumpVersion();
+        return v;
+    }
+    has(id) {
+        return this._map.has(id);
+    }
+    get(id) {
+        return this._map.get(id);
+    }
+    snapshot() {
+        this._snapshot = new CMap(this._map);
+    }
+    dispose() {
+        super.dispose();
+        this.stopLifeCircle();
+        this._snapshot.clear();
+        this._map.clear();
+    }
+}
+
+const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
+var ItemDisplayMethods;
+(function (ItemDisplayMethods) {
+    ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
+    ItemDisplayMethods[ItemDisplayMethods["UPDATE"] = 1] = "UPDATE";
+    ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
+    ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
+})(ItemDisplayMethods || (ItemDisplayMethods = {}));
+/**
+ * An object that performs tracking, calculations and caching.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class TrackBox extends CacheMap {
+    _tracker;
+    _items;
+    set items(v) {
+        if (this._items === v) {
+            return;
+        }
+        this._items = v;
+    }
+    _displayComponents;
+    set displayComponents(v) {
+        if (this._displayComponents === v) {
+            return;
+        }
+        this._displayComponents = v;
+    }
+    /**
+     * Set the trackBy property
+     */
+    set trackingPropertyName(v) {
+        this._tracker.trackingPropertyName = v;
+    }
+    constructor(trackingPropertyName) {
+        super();
+        this._tracker = new Tracker(trackingPropertyName);
+    }
+    set(id, bounds) {
+        if (this._map.has(id)) {
+            const b = this._map.get(id);
+            if (b?.width === bounds.width && b.height === bounds.height) {
+                return this._map;
+            }
+        }
+        const v = this._map.set(id, bounds);
+        this.bumpVersion();
+        return v;
+    }
+    _previousCollection;
+    _deletedItemsMap = {};
+    _crudDetected = false;
+    get crudDetected() { return this._crudDetected; }
+    fireChangeIfNeed() {
+        if (this.changesDetected()) {
+            this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, this._version);
+        }
+    }
+    _previousTotalSize = 0;
+    _scrollDelta = 0;
+    get scrollDelta() { return this._scrollDelta; }
+    lifeCircle() {
+        this.fireChangeIfNeed();
+        this.lifeCircleDo();
+    }
+    /**
+     * Scans the collection for deleted items and flushes the deleted item cache.
+     */
+    resetCollection(currentCollection, itemSize) {
+        if (currentCollection !== undefined && currentCollection !== null && currentCollection === this._previousCollection) {
+            console.warn('Attention! The collection must be immutable.');
+            return;
+        }
+        this.updateCache(this._previousCollection, currentCollection, itemSize);
+        this._previousCollection = currentCollection;
+    }
+    /**
+     * Update the cache of items from the list
+     */
+    updateCache(previousCollection, currentCollection, itemSize) {
+        let crudDetected = false;
+        if (!currentCollection || currentCollection.length === 0) {
+            if (previousCollection) {
+                // deleted
+                for (let i = 0, l = previousCollection.length; i < l; i++) {
+                    const item = previousCollection[i], id = item.id;
+                    crudDetected = true;
+                    if (this._map.has(id)) {
+                        this._map.delete(id);
+                    }
+                }
+            }
+            return;
+        }
+        if (!previousCollection || previousCollection.length === 0) {
+            if (currentCollection) {
+                // added
+                for (let i = 0, l = currentCollection.length; i < l; i++) {
+                    crudDetected = true;
+                    const item = currentCollection[i], id = item.id;
+                    this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
+                }
+            }
+            return;
+        }
+        const collectionDict = {};
+        for (let i = 0, l = currentCollection.length; i < l; i++) {
+            const item = currentCollection[i];
+            if (item) {
+                collectionDict[item.id] = item;
+            }
+        }
+        const notChangedMap = {}, deletedMap = {}, deletedItemsMap = {}, updatedMap = {};
+        for (let i = 0, l = previousCollection.length; i < l; i++) {
+            const item = previousCollection[i], id = item.id;
+            if (item) {
+                if (collectionDict.hasOwnProperty(id)) {
+                    if (item === collectionDict[id]) {
+                        // not changed
+                        notChangedMap[item.id] = item;
+                        this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.NOT_CHANGED });
+                        continue;
+                    }
+                    else {
+                        // updated
+                        crudDetected = true;
+                        updatedMap[item.id] = item;
+                        this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.UPDATE });
+                        continue;
+                    }
+                }
+                // deleted
+                crudDetected = true;
+                deletedMap[item.id] = item;
+                deletedItemsMap[i] = this._map.get(item.id);
+                this._map.delete(id);
+            }
+        }
+        for (let i = 0, l = currentCollection.length; i < l; i++) {
+            const item = currentCollection[i], id = item.id;
+            if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
+                // added
+                crudDetected = true;
+                this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
+            }
+        }
+        this._crudDetected = crudDetected;
+        this._deletedItemsMap = deletedItemsMap;
+    }
+    /**
+     * Finds the position of a collection element by the given Id
+     */
+    getItemPosition(id, stickyMap, options) {
+        const opt = { fromItemId: id, stickyMap, ...options };
+        const { scrollSize } = this.recalculateMetrics({
+            ...opt,
+            dynamicSize: this._crudDetected || opt.dynamicSize,
+            previousTotalSize: this._previousTotalSize,
+            crudDetected: this._crudDetected,
+            deletedItemsMap: this._deletedItemsMap,
+        });
+        return scrollSize;
+    }
+    /**
+     * Updates the collection of display objects
+     */
+    updateCollection(items, stickyMap, options) {
+        const opt = { stickyMap, ...options }, crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
+        if (opt.dynamicSize) {
+            this.cacheElements();
+        }
+        const metrics = this.recalculateMetrics({
+            ...opt,
+            collection: items,
+            previousTotalSize: this._previousTotalSize,
+            crudDetected: this._crudDetected,
+            deletedItemsMap,
+        });
+        this._delta += metrics.delta;
+        this._previousTotalSize = metrics.totalSize;
+        this._deletedItemsMap = {};
+        this._crudDetected = false;
+        if (opt.dynamicSize) {
+            this.snapshot();
+        }
+        const displayItems = this.generateDisplayCollection(items, stickyMap, { ...metrics, });
+        return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta, crudDetected };
+    }
+    /**
+     * Finds the closest element in the collection by scrollSize
+     */
+    getNearestItem(scrollSize, items, itemSize, isVertical) {
+        return this.getElementFromStart(scrollSize, items, this._map, itemSize, isVertical);
+    }
+    /**
+     * Calculates the position of an element based on the given scrollSize
+     */
+    getElementFromStart(scrollSize, collection, map, typicalItemSize, isVertical) {
+        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
+        let offset = 0;
+        for (let i = 0, l = collection.length; i < l; i++) {
+            const item = collection[i];
+            let itemSize = 0;
+            if (map.has(item.id)) {
+                const bounds = map.get(item.id);
+                itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+            }
+            else {
+                itemSize = typicalItemSize;
+            }
+            if (offset > scrollSize) {
+                return item;
+            }
+            offset += itemSize;
+        }
+        return undefined;
+    }
+    /**
+     * Calculates the entry into the overscroll area and returns the number of overscroll elements
+     */
+    getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical, indexOffset = 0) {
+        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
+        let offset = 0, num = 0;
+        for (let j = collection.length - indexOffset - 1; j >= i; j--) {
+            const item = collection[j];
+            let itemSize = 0;
+            if (map.has(item.id)) {
+                const bounds = map.get(item.id);
+                itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+            }
+            else {
+                itemSize = typicalItemSize;
+            }
+            offset += itemSize;
+            num++;
+            if (offset > size) {
+                return { num: 0, offset };
+            }
+        }
+        return { num, offset };
+    }
+    /**
+     * Calculates list metrics
+     */
+    recalculateMetrics(options) {
+        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
+        const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, snapshot = this._snapshot, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
+            || (typeof fromItemId === 'string' && fromItemId > '-1');
+        let leftItemsOffset = 0, rightItemsOffset = 0;
+        if (enabledBufferOptimization) {
+            switch (this.scrollDirection) {
+                case 1: {
+                    leftItemsOffset = 0;
+                    rightItemsOffset = itemsOffset;
+                    break;
+                }
+                case -1: {
+                    leftItemsOffset = itemsOffset;
+                    rightItemsOffset = 0;
+                    break;
+                }
+                case 0:
+                default: {
+                    leftItemsOffset = rightItemsOffset = itemsOffset;
+                }
+            }
+        }
+        else {
+            leftItemsOffset = rightItemsOffset = itemsOffset;
+        }
+        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;
+        // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
+        if (dynamicSize) {
+            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
+            for (let i = 0, l = collection.length; i < l; i++) {
+                const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
+                let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
+                if (map.has(id)) {
+                    const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
+                    componentSize = bounds[sizeProperty];
+                    itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
+                    switch (itemDisplayMethod) {
+                        case ItemDisplayMethods.UPDATE: {
+                            const snapshotBounds = snapshot.get(id);
+                            const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
+                            componentSizeDelta = componentSnapshotSize;
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                            break;
+                        }
+                        case ItemDisplayMethods.CREATE: {
+                            componentSizeDelta = typicalItemSize;
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                            break;
+                        }
+                    }
+                }
+                if (deletedItemsMap.hasOwnProperty(i)) {
+                    const bounds = deletedItemsMap[i], size = bounds[sizeProperty] ?? typicalItemSize;
+                    if (y < scrollSize - size) {
+                        leftSizeOfDeletedItems += size;
+                    }
+                }
+                totalSize += componentSize;
+                if (isFromId) {
+                    if (itemById === undefined) {
+                        if (id !== fromItemId && stickyMap && stickyMap[id] > 0) {
+                            stickyComponentSize = componentSize;
+                            stickyCollectionItem = collectionItem;
+                        }
+                        if (id === fromItemId) {
+                            targetDisplayItemIndex = i;
+                            if (stickyCollectionItem && stickyMap) {
+                                const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
+                                if (num > 0) {
+                                    isTargetInOverscroll = true;
+                                    y -= size - componentSize;
+                                }
+                                else {
+                                    if (stickyMap && !stickyMap[collectionItem.id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
+                                        const snappedY = scrollSize - stickyComponentSize;
+                                        leftHiddenItemsWeight -= (snappedY - y);
+                                        y = snappedY;
+                                    }
+                                    else {
+                                        y -= stickyComponentSize;
+                                        leftHiddenItemsWeight -= stickyComponentSize;
+                                    }
+                                }
+                            }
+                            itemById = collectionItem;
+                            itemByIdPos = y;
+                        }
+                        else {
+                            leftItemsWeights.push(componentSize);
+                            leftHiddenItemsWeight += componentSize;
+                            itemsFromStartToScrollEnd = ii;
+                        }
+                    }
+                }
+                else if (y <= scrollSize - componentSize) {
+                    leftItemsWeights.push(componentSize);
+                    leftHiddenItemsWeight += componentSize;
+                    itemsFromStartToScrollEnd = ii;
+                }
+                if (isFromId) {
+                    if (itemById === undefined || y < itemByIdPos + size + componentSize) {
+                        itemsFromStartToDisplayEnd = ii;
+                        totalItemsToDisplayEndWeight += componentSize;
+                        itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
+                    }
+                }
+                else if (y <= scrollSize + size + componentSize) {
+                    itemsFromStartToDisplayEnd = ii;
+                    totalItemsToDisplayEndWeight += componentSize;
+                    itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
+                    if (y <= scrollSize - componentSize) {
+                        switch (itemDisplayMethod) {
+                            case ItemDisplayMethods.CREATE: {
+                                leftSizeOfAddedItems += componentSizeDelta;
+                                break;
+                            }
+                            case ItemDisplayMethods.UPDATE: {
+                                leftSizeOfUpdatedItems += componentSizeDelta;
+                                break;
+                            }
+                            case ItemDisplayMethods.DELETE: {
+                                leftSizeOfDeletedItems += componentSizeDelta;
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (i < itemsFromDisplayEndToOffsetEnd) {
+                        rightItemsWeight += componentSize;
+                    }
+                }
+                y += componentSize;
+            }
+            if (isTargetInOverscroll) {
+                const { num } = this.getElementNumToEnd(collection.length - (checkOverscrollItemsLimit < 0 ? 0 : collection.length - checkOverscrollItemsLimit), collection, map, typicalItemSize, size, isVertical, collection.length - (collection.length - (targetDisplayItemIndex + 1)));
+                if (num > 0) {
+                    itemsFromStartToScrollEnd -= num;
+                }
+            }
+            if (itemsFromStartToScrollEnd <= -1) {
+                itemsFromStartToScrollEnd = 0;
+            }
+            if (itemsFromStartToDisplayEnd <= -1) {
+                itemsFromStartToDisplayEnd = 0;
+            }
+            actualScrollSize = isFromId ? itemByIdPos : scrollSize;
+            leftItemsWeights.splice(0, leftItemsWeights.length - leftItemsOffset);
+            leftItemsWeights.forEach(v => {
+                leftItemsWeight += v;
+            });
+            leftItemLength = Math.min(itemsFromStartToScrollEnd, leftItemsOffset);
+            rightItemLength = itemsFromStartToDisplayEnd + rightItemsOffset > totalLength
+                ? totalLength - itemsFromStartToDisplayEnd : rightItemsOffset;
+        }
+        else 
+        // Buffer optimization does not work on fast linear algorithm
+        {
+            if (crudDetected) {
+                let y = 0;
+                for (let i = 0, l = collection.length; i < l; i++) {
+                    const collectionItem = collection[i], id = collectionItem.id;
+                    let componentSize = typicalItemSize, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
+                    if (map.has(id)) {
+                        const bounds = map.get(id);
+                        itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
+                        if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                        }
+                    }
+                    if (deletedItemsMap.hasOwnProperty(i)) {
+                        const bounds = deletedItemsMap[i], size = bounds[sizeProperty] ?? typicalItemSize;
+                        if (y < scrollSize - size) {
+                            leftSizeOfDeletedItems += size;
+                        }
+                    }
+                    if (y < scrollSize - componentSize) {
+                        switch (itemDisplayMethod) {
+                            case ItemDisplayMethods.CREATE: {
+                                leftSizeOfUpdatedItems += componentSize;
+                                break;
+                            }
+                            case ItemDisplayMethods.UPDATE: {
+                                leftSizeOfUpdatedItems += componentSize;
+                                break;
+                            }
+                            case ItemDisplayMethods.DELETE: {
+                                leftSizeOfDeletedItems += componentSize;
+                                break;
+                            }
+                        }
+                    }
+                    y += componentSize;
+                }
+            }
+            itemsFromStartToScrollEnd = Math.floor(scrollSize / typicalItemSize);
+            itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
+            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
+            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
+                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
+            leftItemsWeight = leftItemLength * typicalItemSize;
+            rightItemsWeight = rightItemLength * typicalItemSize;
+            leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize;
+            totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize;
+            totalSize = totalLength * typicalItemSize;
+            const k = totalSize !== 0 ? previousTotalSize / totalSize : 0;
+            actualScrollSize = scrollSize * k;
+        }
+        startIndex = Math.min(itemsFromStartToScrollEnd - leftItemLength, totalLength > 0 ? totalLength - 1 : 0);
+        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = leftSizeOfUpdatedItems + leftSizeOfAddedItems - leftSizeOfDeletedItems;
+        const metrics = {
+            delta,
+            normalizedItemWidth: w,
+            normalizedItemHeight: h,
+            width,
+            height,
+            dynamicSize,
+            itemSize,
+            itemsFromStartToScrollEnd,
+            itemsFromStartToDisplayEnd,
+            itemsOnDisplay,
+            itemsOnDisplayLength,
+            isVertical,
+            leftHiddenItemsWeight,
+            leftItemLength,
+            leftItemsWeight,
+            renderItems,
+            rightItemLength,
+            rightItemsWeight,
+            scrollSize: actualScrollSize,
+            leftSizeOfAddedItems,
+            sizeProperty,
+            snap,
+            snippedPos,
+            startIndex,
+            startPosition,
+            totalItemsToDisplayEndWeight,
+            totalLength,
+            totalSize,
+            typicalItemSize,
+        };
+        return metrics;
+    }
+    clearDeltaDirection() {
+        this.clearScrollDirectionCache();
+    }
+    clearDelta(clearDirectionDetector = false) {
+        this._delta = 0;
+        if (clearDirectionDetector) {
+            this.clearScrollDirectionCache();
+        }
+    }
+    changes() {
+        this.bumpVersion();
+    }
+    generateDisplayCollection(items, stickyMap, metrics) {
+        const { normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
+        if (items.length) {
+            const actualSnippedPosition = snippedPos;
+            let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0;
+            if (snap) {
+                for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
+                    const id = items[i].id, sticky = stickyMap[id], size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
+                    if (sticky > 0) {
+                        const measures = {
+                            x: isVertical ? 0 : actualSnippedPosition,
+                            y: isVertical ? actualSnippedPosition : 0,
+                            width: normalizedItemWidth,
+                            height: normalizedItemHeight,
+                        }, config = {
+                            isVertical,
+                            sticky,
+                            snap,
+                            snapped: true,
+                            snappedOut: false,
+                            dynamic: dynamicSize,
+                        };
+                        const itemData = items[i];
+                        stickyItem = { id, measures, data: itemData, config };
+                        stickyItemIndex = i;
+                        stickyItemSize = size;
+                        displayItems.push(stickyItem);
+                        break;
+                    }
+                }
+            }
+            let i = startIndex;
+            while (renderItems > 0) {
+                if (i >= totalLength) {
+                    break;
+                }
+                const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
+                if (id !== stickyItem?.id) {
+                    const snapped = snap && stickyMap[id] > 0 && pos <= scrollSize, measures = {
+                        x: isVertical ? 0 : pos,
+                        y: isVertical ? pos : 0,
+                        width: normalizedItemWidth,
+                        height: normalizedItemHeight,
+                    }, config = {
+                        isVertical,
+                        sticky: stickyMap[id],
+                        snap,
+                        snapped: false,
+                        snappedOut: false,
+                        dynamic: dynamicSize,
+                    };
+                    const itemData = items[i];
+                    const item = { id, measures, data: itemData, config };
+                    if (!nextSticky && stickyItemIndex < i && stickyMap[id] > 0 && pos <= scrollSize + size + stickyItemSize) {
+                        item.measures.x = isVertical ? 0 : snapped ? actualSnippedPosition : pos;
+                        item.measures.y = isVertical ? snapped ? actualSnippedPosition : pos : 0;
+                        nextSticky = item;
+                        nextSticky.config.snapped = snapped;
+                    }
+                    displayItems.push(item);
+                }
+                renderItems -= 1;
+                pos += size;
+                i++;
+            }
+            const axis = isVertical ? Y_PROP_NAME : X_PROP_NAME;
+            if (nextSticky && stickyItem && nextSticky.measures[axis] <= scrollSize + stickyItemSize) {
+                if (nextSticky.measures[axis] > scrollSize) {
+                    stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItemSize;
+                    stickyItem.config.snapped = nextSticky.config.snapped = false;
+                    stickyItem.config.snappedOut = true;
+                    stickyItem.config.sticky = 1;
+                }
+                else {
+                    nextSticky.config.snapped = true;
+                }
+            }
+        }
+        return displayItems;
+    }
+    /**
+     * tracking by propName
+     */
+    track() {
+        if (!this._items || !this._displayComponents) {
+            return;
+        }
+        this._tracker.track(this._items, this._displayComponents, this.scrollDirection);
+    }
+    setDisplayObjectIndexMapById(v) {
+        this._tracker.displayObjectIndexMapById = v;
+    }
+    untrackComponentByIdProperty(component) {
+        this._tracker.untrackComponentByIdProperty(component);
+    }
+    getItemBounds(id) {
+        if (this.has(id)) {
+            return this.get(id);
+        }
+        return undefined;
+    }
+    cacheElements() {
+        if (!this._displayComponents) {
+            return;
+        }
+        for (let i = 0, l = this._displayComponents.length; i < l; i++) {
+            const component = this._displayComponents[i], itemId = component.instance.itemId;
+            if (itemId === undefined) {
+                continue;
+            }
+            const bounds = component.instance.getBounds();
+            this.set(itemId, bounds);
+        }
+    }
+    dispose() {
+        super.dispose();
+        if (this._tracker) {
+            this._tracker.dispose();
+        }
+    }
+}
+
+/**
+ * Scroll event.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class ScrollEvent {
+    _direction = 1;
+    get direction() { return this._direction; }
+    _scrollSize = 0;
+    get scrollSize() { return this._scrollSize; }
+    _scrollWeight = 0;
+    get scrollWeight() { return this._scrollWeight; }
+    _isVertical = true;
+    get isVertical() { return this._isVertical; }
+    _listSize = 0;
+    get listSize() { return this._listSize; }
+    _size = 0;
+    get size() { return this._size; }
+    _isStart = true;
+    get isStart() { return this._isStart; }
+    _isEnd = false;
+    get isEnd() { return this._isEnd; }
+    _delta = 0;
+    get delta() { return this._delta; }
+    _scrollDelta = 0;
+    get scrollDelta() { return this._scrollDelta; }
+    constructor(params) {
+        const { direction, isVertical, container, list, delta, scrollDelta } = params;
+        this._direction = direction;
+        this._isVertical = isVertical;
+        this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
+        this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
+        this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
+        this._size = isVertical ? container.offsetHeight : container.offsetWidth;
+        this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
+        this._delta = delta;
+        this._scrollDelta = scrollDelta;
+        this._isStart = this._scrollSize === 0;
+    }
+}
+
+/**
+ * Virtual list component.
+ * Maximum performance for extremely large lists.
+ * It is based on algorithms for virtualization of screen objects.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class NgVirtualListComponent {
+    static __nextId = 0;
+    _id = NgVirtualListComponent.__nextId;
+    /**
+     * Readonly. Returns the unique identifier of the component.
+     */
+    get id() { return this._id; }
+    _listContainerRef;
+    _container = viewChild('container');
+    _list = viewChild('list');
+    /**
+     * Fires when the list has been scrolled.
+     */
+    onScroll = output();
+    /**
+     * Fires when the list has completed scrolling.
+     */
+    onScrollEnd = output();
+    _itemsOptions = {
+        transform: (v) => {
+            this._trackBox.resetCollection(v, this.itemSize());
+            return v;
+        },
+    };
+    /**
+     * Collection of list items.
+     */
+    items = input.required({
+        ...this._itemsOptions,
+    });
+    /**
+     * Determines whether elements will snap. Default value is "true".
+     */
+    snap = input(DEFAULT_SNAP);
+    /**
+     * Experimental!
+     * Enables buffer optimization.
+     * 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.
+     * Works only if the property dynamic = true
+     */
+    enabledBufferOptimization = input(DEFAULT_ENABLED_BUFFER_OPTIMIZATION);
+    /**
+     * Rendering element template.
+     */
+    itemRenderer = input.required();
+    /**
+     * Dictionary zIndex by id of the list element. If the value is not set or equal to 0,
+     * then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element.
+     */
+    stickyMap = input({});
+    _itemSizeOptions = {
+        transform: (v) => {
+            if (v === undefined) {
+                return DEFAULT_ITEM_SIZE;
+            }
+            const val = Number(v);
+            return Number.isNaN(val) || val <= 0 ? DEFAULT_ITEM_SIZE : val;
+        },
+    };
+    /**
+     * If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element.
+     * Ignored if the dynamicSize property is true.
+     */
+    itemSize = input(DEFAULT_ITEM_SIZE, { ...this._itemSizeOptions });
+    /**
+     * If true then the items in the list can have different sizes and the itemSize property is ignored.
+     * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
+     */
+    dynamicSize = input(DEFAULT_DYNAMIC_SIZE);
+    /**
+     * Determines the direction in which elements are placed. Default value is "vertical".
+     */
+    direction = input(DEFAULT_DIRECTION);
+    /**
+     * Number of elements outside the scope of visibility. Default value is 2.
+     */
+    itemsOffset = input(DEFAULT_ITEMS_OFFSET);
+    _isVertical = this.getIsVertical();
+    _displayComponents = [];
+    _bounds = signal(null);
+    _scrollSize = signal(0);
+    _resizeObserver = null;
+    _onResizeHandler = () => {
+        this._bounds.set(this._container()?.nativeElement?.getBoundingClientRect() ?? null);
+    };
+    _onScrollHandler = (e) => {
+        this.clearScrollToRepeatExecutionTimeout();
+        const container = this._container()?.nativeElement;
+        if (container) {
+            const scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft), actualScrollSize = scrollSize;
+            this._scrollSize.set(actualScrollSize);
+        }
+    };
+    _elementRef = inject((ElementRef));
+    _initialized;
+    $initialized;
+    /**
+     * The name of the property by which tracking is performed
+     */
+    trackBy = input(TRACK_BY_PROPERTY_NAME);
+    /**
+     * Dictionary of element sizes by their id
+     */
+    _trackBox = new TrackBox(this.trackBy());
+    _onTrackBoxChangeHandler = (v) => {
+        this._cacheVersion.set(v);
+    };
+    _cacheVersion = signal(-1);
+    constructor() {
+        NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
+            ? 0 : NgVirtualListComponent.__nextId + 1;
+        this._id = NgVirtualListComponent.__nextId;
+        this._initialized = signal(false);
+        this.$initialized = toObservable(this._initialized);
+        this._trackBox.displayComponents = this._displayComponents;
+        const $trackBy = toObservable(this.trackBy);
+        $trackBy.pipe(takeUntilDestroyed(), tap(v => {
+            this._trackBox.trackingPropertyName = v;
+        })).subscribe();
+        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $cacheVersion = toObservable(this._cacheVersion);
+        $isVertical.pipe(takeUntilDestroyed(), tap(v => {
+            this._isVertical = v;
+            const el = this._elementRef.nativeElement;
+            toggleClassName(el, v ? CLASS_LIST_VERTICAL : CLASS_LIST_HORIZONTAL, true);
+        })).subscribe();
+        $dynamicSize.pipe(takeUntilDestroyed(), tap(dynamicSize => {
+            this.listenCacheChangesIfNeed(dynamicSize);
+        })).subscribe();
+        combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
+            $itemsOffset, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
+        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
+            const { width, height } = bounds;
+            let actualScrollSize = (this._isVertical ? this._container()?.nativeElement.scrollTop ?? 0 : this._container()?.nativeElement.scrollLeft) ?? 0;
+            const opts = {
+                bounds: { width, height }, dynamicSize, isVertical, itemSize,
+                itemsOffset, scrollSize: scrollSize, snap, enabledBufferOptimization,
+            };
+            const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                ...opts, scrollSize: actualScrollSize,
+            });
+            this.resetBoundsSize(isVertical, totalSize);
+            this.createDisplayComponentsIfNeed(displayItems);
+            this.tracking();
+            const container = this._container();
+            if (container) {
+                const delta = this._trackBox.delta;
+                actualScrollSize = actualScrollSize + delta;
+                this._trackBox.clearDelta();
+                if (scrollSize !== actualScrollSize) {
+                    const params = {
+                        [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                        behavior: BEHAVIOR_INSTANT
+                    };
+                    container.nativeElement.scrollTo(params);
+                }
+            }
+            return of(displayItems);
+        })).subscribe();
+        combineLatest([this.$initialized, toObservable(this.itemRenderer)]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
+            this.resetRenderers(itemRenderer);
+        }));
+    }
+    /** @internal */
+    ngOnInit() {
+        this._initialized.set(true);
+    }
+    listenCacheChangesIfNeed(value) {
+        if (value) {
+            if (!this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
+                this._trackBox.addEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            }
+        }
+        else {
+            if (this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
+                this._trackBox.removeEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            }
+        }
+    }
+    getIsVertical(d) {
+        const dir = d || this.direction();
+        return isDirection(dir, Directions.VERTICAL);
+    }
+    _componentsResizeObserver = new ResizeObserver(() => {
+        this._trackBox.changes();
+    });
+    createDisplayComponentsIfNeed(displayItems) {
+        if (!displayItems || !this._listContainerRef) {
+            this._trackBox.setDisplayObjectIndexMapById({});
+            return;
+        }
+        this._trackBox.items = displayItems;
+        const _listContainerRef = this._listContainerRef;
+        const maxLength = displayItems.length, components = this._displayComponents;
+        while (components.length < maxLength) {
+            if (_listContainerRef) {
+                const comp = _listContainerRef.createComponent(NgVirtualListItemComponent);
+                components.push(comp);
+                this._componentsResizeObserver.observe(comp.instance.element);
+            }
+        }
+        this.resetRenderers();
+    }
+    resetRenderers(itemRenderer) {
+        const doMap = {};
+        for (let i = 0, l = this._displayComponents.length; i < l; i++) {
+            const item = this._displayComponents[i];
+            item.instance.renderer = itemRenderer || this.itemRenderer();
+            doMap[item.instance.id] = i;
+        }
+        this._trackBox.setDisplayObjectIndexMapById(doMap);
+    }
+    /**
+     * Tracking by id
+     */
+    tracking() {
+        this._trackBox.track();
+    }
+    resetBoundsSize(isVertical, totalSize) {
+        const l = this._list();
+        if (l) {
+            l.nativeElement.style[isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME] = `${totalSize}${PX}`;
+        }
+    }
+    /**
+     * Returns the bounds of an element with a given id
+     */
+    getItemBounds(id) {
+        return this._trackBox.getItemBounds(id);
+    }
+    /**
+     * The method scrolls the list to the element with the given id and returns the value of the scrolled area.
+     * Behavior accepts the values ​​"auto", "instant" and "smooth".
+     */
+    scrollTo(id, behavior = BEHAVIOR_AUTO) {
+        this.scrollToExecutor(id, behavior);
+    }
+    _scrollToRepeatExecutionTimeout;
+    clearScrollToRepeatExecutionTimeout() {
+        clearTimeout(this._scrollToRepeatExecutionTimeout);
+    }
+    scrollToExecutor(id, behavior, iteration = 0, isLastIteration = false) {
+        const items = this.items();
+        if (!items || !items.length) {
+            return;
+        }
+        const dynamicSize = this.dynamicSize(), container = this._container(), itemSize = this.itemSize();
+        if (container) {
+            this.clearScrollToRepeatExecutionTimeout();
+            if (dynamicSize) {
+                if (container) {
+                    container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
+                }
+                const { width, height } = this._bounds() || { width: 0, height: 0 }, stickyMap = this.stickyMap(), items = this.items(), isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
+                    bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
+                    itemsOffset: this.itemsOffset(), scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
+                    snap: this.snap(), fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization(),
+                }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
+                this._trackBox.clearDelta();
+                if (container) {
+                    const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                        ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
+                    }), delta = this._trackBox.delta;
+                    this._trackBox.clearDelta();
+                    let actualScrollSize = scrollSize + delta;
+                    this.resetBoundsSize(isVertical, totalSize);
+                    this.createDisplayComponentsIfNeed(displayItems);
+                    this.tracking();
+                    const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
+                    const notChanged = actualScrollSize === _scrollSize;
+                    if (!notChanged || iteration < MAX_SCROLL_TO_ITERATIONS) {
+                        this.clearScrollToRepeatExecutionTimeout();
+                        this._scrollToRepeatExecutionTimeout = setTimeout(() => {
+                            this.scrollToExecutor(id, BEHAVIOR_INSTANT, iteration + 1, notChanged);
+                        });
+                    }
+                    else {
+                        this._scrollSize.set(actualScrollSize);
+                        container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
+                    }
+                }
+                container.nativeElement.scrollTo(params);
+                this._scrollSize.set(scrollSize);
+            }
+            else {
+                const index = items.findIndex(item => item.id === id), scrollSize = index * this.itemSize();
+                const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
+                container.nativeElement.scrollTo(params);
+            }
+        }
+    }
+    /**
+     * Scrolls the scroll area to the desired element with the specified ID.
+     */
+    scrollToEnd(behavior = BEHAVIOR_INSTANT) {
+        const items = this.items(), latItem = items[items.length > 0 ? items.length - 1 : 0];
+        this.scrollTo(latItem.id, behavior);
+    }
+    _onContainerScrollHandler = (e) => {
+        const containerEl = this._container();
+        if (containerEl) {
+            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
+            this._trackBox.deltaDirection = this._scrollSize() > scrollSize ? -1 : this._scrollSize() < scrollSize ? 1 : 0;
+            const event = new ScrollEvent({
+                direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
+                list: this._list().nativeElement, delta: this._trackBox.delta,
+                scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
+            });
+            this.onScroll.emit(event);
+        }
+    };
+    _onContainerScrollEndHandler = (e) => {
+        const containerEl = this._container();
+        if (containerEl) {
+            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft);
+            this._trackBox.deltaDirection = this._scrollSize() > scrollSize ? -1 : 0;
+            const event = new ScrollEvent({
+                direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
+                list: this._list().nativeElement, delta: this._trackBox.delta,
+                scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
+            });
+            this.onScrollEnd.emit(event);
+        }
+    };
+    /** @internal */
+    ngAfterViewInit() {
+        const containerEl = this._container();
+        if (containerEl) {
+            // for direction calculation
+            containerEl.nativeElement.addEventListener(SCROLL, this._onContainerScrollHandler);
+            containerEl.nativeElement.addEventListener(SCROLL_END, this._onContainerScrollEndHandler);
+            containerEl.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
+            this._resizeObserver = new ResizeObserver(this._onResizeHandler);
+            this._resizeObserver.observe(containerEl.nativeElement);
+            this._onResizeHandler();
+        }
+    }
+    /** @internal */
+    ngOnDestroy() {
+        this.clearScrollToRepeatExecutionTimeout();
+        if (this._trackBox) {
+            this._trackBox.dispose();
+        }
+        const containerEl = this._container();
+        if (containerEl) {
+            containerEl.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
+            containerEl.nativeElement.removeEventListener(SCROLL, this._onContainerScrollHandler);
+            containerEl.nativeElement.removeEventListener(SCROLL_END, this._onContainerScrollEndHandler);
+            if (this._componentsResizeObserver) {
+                this._componentsResizeObserver.disconnect();
+            }
+            if (this._resizeObserver) {
+                this._resizeObserver.disconnect();
+            }
+        }
+        if (this._displayComponents) {
+            while (this._displayComponents.length > 0) {
+                const comp = this._displayComponents.pop();
+                comp?.destroy();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-virtual-list', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
+                type: ViewChild,
+                args: ['renderersContainer', { read: ViewContainerRef }]
+            }] } });
+
+/*
+ * Public API Surface of ng-virtual-list
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgVirtualListComponent };
+//# sourceMappingURL=ng-virtual-list.mjs.map