ng-virtual-list 0.7.2 → 14.0.0

package/fesm2020/ng-virtual-list.mjs

@@ -0,0 +1,1359 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, ViewContainerRef, ElementRef, ViewEncapsulation, ViewChild, Output, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, BehaviorSubject, filter, map, takeUntil, tap, combineLatest, distinctUntilChanged, debounceTime, switchMap, of } from 'rxjs';
+
+/**
+ * Axis of the arrangement of virtual list elements.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/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_SNAP_TO_ITEM = false;
+const DEFAULT_DYNAMIC_SIZE = false;
+const TRACK_BY_PROPERTY_NAME = 'id';
+const DEFAULT_DIRECTION = Directions.VERTICAL;
+const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
+// 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/main/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class NgVirtualListItemComponent {
+    constructor(_cdr, _elementRef) {
+        this._cdr = _cdr;
+        this._elementRef = _elementRef;
+        this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
+            ? 0 : NgVirtualListItemComponent.__nextId + 1;
+    }
+    get id() {
+        return this._id;
+    }
+    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._cdr.detectChanges();
+    }
+    get itemId() {
+        return this.data?.id;
+    }
+    set renderer(v) {
+        if (this.itemRenderer === v) {
+            return;
+        }
+        this.itemRenderer = v;
+        this._cdr.markForCheck();
+    }
+    getBounds() {
+        const el = this._elementRef.nativeElement, { width, height, left, top } = el.getBoundingClientRect();
+        return { width, height, x: left, y: top };
+    }
+    showIfNeed() {
+        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;
+    }
+}
+NgVirtualListItemComponent.__nextId = 0;
+NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\"></ng-container>\r\n        </ng-container>\r\n    </li>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-virtual-list-item', host: {
+                        'class': 'ngvl__item',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\"></ng-container>\r\n        </ng-container>\r\n    </li>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
+
+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/main/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/main/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/main/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/main/projects/ng-virtual-list/src/lib/utils/tracker.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class Tracker {
+    constructor(trackingPropertyName) {
+        /**
+         * display objects dictionary of indexes by id
+         */
+        this._displayObjectIndexMapById = {};
+        /**
+         * Dictionary displayItems propertyNameId by items propertyNameId
+         */
+        this._trackMap = {};
+        this._trackingPropertyName = trackingPropertyName;
+    }
+    set displayObjectIndexMapById(v) {
+        if (this._displayObjectIndexMapById === v) {
+            return;
+        }
+        this._displayObjectIndexMapById = v;
+    }
+    get displayObjectIndexMapById() {
+        return this._displayObjectIndexMapById;
+    }
+    get trackMap() {
+        return this._trackMap;
+    }
+    /**
+     * tracking by propName
+     */
+    track(items, components, afterComponentSetup) {
+        if (!items) {
+            return;
+        }
+        const idPropName = this._trackingPropertyName, untrackedItems = [...components];
+        for (let i = 0, l = items.length; i < l; i++) {
+            const item = items[i], itemTrackingProperty = item[idPropName];
+            if (this._trackMap) {
+                const diId = this._trackMap[itemTrackingProperty];
+                if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
+                    const lastIndex = this._displayObjectIndexMapById[diId], el = components[lastIndex];
+                    this._checkComponentProperty(el?.instance);
+                    const elId = el?.instance?.[itemTrackingProperty];
+                    if (el && elId === diId) {
+                        const indexByUntrackedItems = untrackedItems.findIndex(v => {
+                            this._checkComponentProperty(v.instance);
+                            return v.instance[itemTrackingProperty] === elId;
+                        });
+                        if (indexByUntrackedItems > -1) {
+                            el.instance.item = item;
+                            if (afterComponentSetup !== undefined) {
+                                afterComponentSetup(el.instance, item);
+                            }
+                            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._checkComponentProperty(el.instance);
+                        this._trackMap[itemTrackingProperty] = el.instance[itemTrackingProperty];
+                    }
+                    if (afterComponentSetup !== undefined) {
+                        afterComponentSetup(el.instance, item);
+                    }
+                }
+            }
+        }
+        if (untrackedItems.length) {
+            throw Error('Tracking by id caused an error.');
+        }
+    }
+    untrackComponentByIdProperty(component) {
+        if (!component) {
+            return;
+        }
+        const propertyIdName = this._trackingPropertyName;
+        this._checkComponentProperty(component);
+        if (this._trackMap && component[propertyIdName] !== undefined) {
+            delete this._trackMap[propertyIdName];
+        }
+    }
+    _checkComponentProperty(component) {
+        if (!component) {
+            return;
+        }
+        const propertyIdName = this._trackingPropertyName;
+        try {
+            component[propertyIdName];
+        }
+        catch (err) {
+            throw Error(`Property ${propertyIdName} does not exist.`);
+        }
+    }
+    dispose() {
+        this._trackMap = null;
+    }
+}
+
+/**
+ * Simple event emitter
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class EventEmitter {
+    constructor() {
+        this._listeners = {};
+        this._disposed = false;
+    }
+    /**
+     * 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();
+    }
+}
+
+/**
+ * Cache map.
+ * Emits a change event on each mutation.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class CacheMap extends EventEmitter {
+    constructor() {
+        super();
+        this._map = new Map();
+        this._version = 0;
+        this._previouseFullHeigh = 0;
+        this._delta = 0;
+    }
+    get delta() {
+        return this._delta;
+    }
+    get version() {
+        return this._version;
+    }
+    bumpVersion() {
+        this._version = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
+    }
+    fireChange() {
+        this.dispatch('change', this.version);
+    }
+    set(id, bounds) {
+        if (this._map.has(id) && JSON.stringify(this._map.get(id)) === JSON.stringify(bounds)) {
+            return this._map;
+        }
+        const v = this._map.set(id, bounds);
+        this.bumpVersion();
+        this.fireChange();
+        return v;
+    }
+    has(id) {
+        return this._map.has(id);
+    }
+    get(id) {
+        return this._map.get(id);
+    }
+    forEach(callbackfn, thisArg) {
+        return this._map.forEach(callbackfn, thisArg);
+    }
+    dispose() {
+        super.dispose();
+        this._map.clear();
+    }
+}
+
+const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
+/**
+ * An object that performs tracking, calculations and caching.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/trackBox.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class TrackBox extends CacheMap {
+    constructor(trackingPropertyName) {
+        super();
+        this._fireChanges = (version) => {
+            this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, version);
+        };
+        this._debounceChanges = debounce(this._fireChanges, 0);
+        this._tracker = new Tracker(trackingPropertyName);
+    }
+    set items(v) {
+        if (this._items === v) {
+            return;
+        }
+        this._items = v;
+    }
+    set displayComponents(v) {
+        if (this._displayComponents === v) {
+            return;
+        }
+        this._displayComponents = v;
+    }
+    set(id, bounds) {
+        if (this._map.has(id) && JSON.stringify(this._map.get(id)) === JSON.stringify(bounds)) {
+            return this._map;
+        }
+        const v = this._map.set(id, bounds);
+        this.bumpVersion();
+        this.fireChange();
+        return v;
+    }
+    fireChange() {
+        this._debounceChanges.execute(this._version);
+    }
+    getItemPosition(id, stickyMap, options) {
+        const opt = { fromItemId: id, stickyMap, scrollDirection: undefined, ...options };
+        const { scrollSize } = this.recalculateMetrics(opt);
+        return scrollSize;
+    }
+    updateCollection(items, stickyMap, options) {
+        const opt = { stickyMap, scrollDirection: undefined, ...options };
+        this.cacheElements();
+        const metrics = this.recalculateMetrics({
+            ...opt,
+            collection: items,
+        });
+        const displayItems = this.generateDisplayCollection(items, stickyMap, metrics);
+        return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta };
+    }
+    /**
+     * Calculates list metrics
+     */
+    recalculateMetrics(options) {
+        const { scrollDirection = 0, fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap } = 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, totalSize = dynamicSize ? this.getBoundsFromCache(collection, typicalItemSize, isVertical) : totalLength * typicalItemSize, snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
+            || (typeof fromItemId === 'string' && fromItemId > '-1');
+        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, itemById = undefined, itemByIdPos = 0, lastDisplayItemId = undefined, actualScrollSize = itemByIdPos, fullHeight = 0, startIndex;
+        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], map = this._map;
+                let componentSize = 0;
+                if (map.has(collectionItem.id)) {
+                    const bounds = map.get(collectionItem.id);
+                    componentSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+                }
+                else {
+                    componentSize = typicalItemSize;
+                }
+                if (isFromId) {
+                    if (itemById === undefined) {
+                        leftItemsWeights.push(componentSize);
+                        leftHiddenItemsWeight += componentSize;
+                        itemsFromStartToScrollEnd = ii;
+                        if (stickyMap && stickyMap[collectionItem.id] > 0) {
+                            stickyComponentSize = componentSize;
+                            stickyCollectionItem = collectionItem;
+                        }
+                        if (collectionItem.id === fromItemId) {
+                            itemById = collectionItem;
+                            itemByIdPos = y;
+                            if (stickyCollectionItem && stickyMap && stickyMap[stickyCollectionItem.id] > 0) {
+                                itemByIdPos = itemByIdPos - stickyComponentSize;
+                            }
+                        }
+                    }
+                }
+                else if (y < scrollSize - componentSize) {
+                    leftItemsWeights.push(componentSize);
+                    leftHiddenItemsWeight += componentSize;
+                    itemsFromStartToScrollEnd = ii;
+                }
+                if (isFromId) {
+                    if (!lastDisplayItemId) {
+                        if (itemById === undefined || y < itemByIdPos + size + componentSize) {
+                            itemsFromStartToDisplayEnd = ii;
+                            totalItemsToDisplayEndWeight += componentSize;
+                            itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + itemsOffset;
+                        }
+                    }
+                }
+                else if (y < scrollSize + size + componentSize) {
+                    itemsFromStartToDisplayEnd = ii;
+                    totalItemsToDisplayEndWeight += componentSize;
+                    itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + itemsOffset;
+                }
+                else if (i < itemsFromDisplayEndToOffsetEnd) {
+                    rightItemsWeight += componentSize;
+                }
+                y += componentSize;
+            }
+            fullHeight = y;
+            if (itemsFromStartToScrollEnd === -1) {
+                itemsFromStartToScrollEnd = 0;
+            }
+            if (itemsFromStartToDisplayEnd === -1) {
+                itemsFromStartToDisplayEnd = 0;
+            }
+            actualScrollSize = isFromId ? itemByIdPos : scrollSize;
+            leftItemsWeights.splice(0, leftItemsWeights.length - itemsOffset);
+            leftItemsWeights.forEach(v => {
+                leftItemsWeight += v;
+            });
+            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
+            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
+                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
+        }
+        else {
+            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;
+            actualScrollSize = scrollSize,
+                fullHeight = totalLength * typicalItemSize;
+        }
+        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 = fullHeight - this._previouseFullHeigh;
+        if (scrollDirection === -1) {
+            this._delta += delta;
+        }
+        const metrics = {
+            delta: this._delta,
+            normalizedItemWidth: w,
+            normalizedItemHeight: h,
+            width,
+            height,
+            dynamicSize,
+            itemSize,
+            itemsFromStartToScrollEnd,
+            itemsFromStartToDisplayEnd,
+            itemsOnDisplay,
+            itemsOnDisplayLength,
+            isVertical,
+            leftHiddenItemsWeight,
+            leftItemLength,
+            leftItemsWeight,
+            renderItems,
+            rightItemLength,
+            rightItemsWeight,
+            scrollSize: actualScrollSize,
+            sizeProperty,
+            snap,
+            snippedPos,
+            startIndex,
+            startPosition,
+            totalItemsToDisplayEndWeight,
+            totalLength,
+            totalSize,
+            typicalItemSize,
+        };
+        if (scrollDirection !== 0) {
+            this._previouseFullHeigh = fullHeight;
+        }
+        return metrics;
+    }
+    clearDelta() {
+        this._delta = 0;
+    }
+    generateDisplayCollection(items, stickyMap, metrics) {
+        const { 
+        // delta,
+        normalizedItemWidth, normalizedItemHeight, 
+        // width,
+        // height,
+        dynamicSize, 
+        // itemSize,
+        itemsFromStartToScrollEnd, 
+        // itemsFromStartToDisplayEnd,
+        // itemsOnDisplay,
+        // itemsOnDisplayLength,
+        isVertical, 
+        // leftHiddenItemsWeight,
+        // leftItemLength,
+        // leftItemsWeight,
+        renderItems: renderItemsLength, 
+        // rightItemLength,
+        // rightItemsWeight,
+        scrollSize, sizeProperty, snap, snippedPos, startPosition, 
+        // totalItemsToDisplayEndWeight,
+        totalLength, 
+        // totalSize,
+        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;
+                    stickyItemSize = size;
+                    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;
+                        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 && snap && stickyMap[id] > 0 && pos <= scrollSize + size) {
+                        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);
+    }
+    setDisplayObjectIndexMapById(v) {
+        this._tracker.displayObjectIndexMapById = v;
+    }
+    untrackComponentByIdProperty(component) {
+        this._tracker.untrackComponentByIdProperty(component);
+    }
+    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);
+        }
+    }
+    /**
+     * Returns calculated bounds from cache
+     */
+    getBoundsFromCache(items, typicalItemSize, isVertical) {
+        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, map = this._map;
+        let size = 0;
+        for (let i = 0, l = items.length; i < l; i++) {
+            const item = items[i];
+            if (map.has(item.id)) {
+                const bounds = map.get(item.id);
+                size += bounds ? bounds[sizeProperty] : typicalItemSize;
+            }
+            else {
+                size += typicalItemSize;
+            }
+        }
+        return size;
+    }
+    dispose() {
+        super.dispose();
+        if (this._debounceChanges) {
+            this._debounceChanges.dispose();
+        }
+        if (this._tracker) {
+            this._tracker.dispose();
+        }
+    }
+}
+
+/**
+ * Base disposable component
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/projects/ng-virtual-list/src/lib/utils/disposableComponent.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class DisposableComponent {
+    constructor() {
+        this._$unsubscribe = new Subject();
+    }
+    ngOnDestroy() {
+        if (this._$unsubscribe) {
+            this._$unsubscribe.next();
+            this._$unsubscribe.complete();
+        }
+    }
+}
+DisposableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DisposableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DisposableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DisposableComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DisposableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                }]
+        }] });
+
+/**
+ * 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/main/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class NgVirtualListComponent extends DisposableComponent {
+    constructor(_cdr, _elementRef) {
+        super();
+        this._cdr = _cdr;
+        this._elementRef = _elementRef;
+        this._id = NgVirtualListComponent.__nextId;
+        /**
+         * Fires when the list has been scrolled.
+         */
+        this.onScroll = new EventEmitter$1();
+        /**
+         * Fires when the list has completed scrolling.
+         */
+        this.onScrollEnd = new EventEmitter$1();
+        this._$items = new BehaviorSubject(undefined);
+        this.$items = this._$items.asObservable();
+        this._$snap = new BehaviorSubject(DEFAULT_SNAP);
+        this.$snap = this._$snap.asObservable();
+        this._$snapToItem = new BehaviorSubject(DEFAULT_SNAP_TO_ITEM);
+        this.$snapToItem = this._$snapToItem.asObservable();
+        this._$itemRenderer = new BehaviorSubject(undefined);
+        this.$itemRenderer = this._$itemRenderer.asObservable();
+        this._$stickyMap = new BehaviorSubject({});
+        this.$stickyMap = this._$stickyMap.asObservable();
+        this._itemSizeOptions = (v) => {
+            if (v === undefined) {
+                return DEFAULT_ITEM_SIZE;
+            }
+            const val = Number(v);
+            return Number.isNaN(val) || val <= 0 ? DEFAULT_ITEM_SIZE : val;
+        };
+        this._$itemSize = new BehaviorSubject(DEFAULT_ITEM_SIZE);
+        this.$itemSize = this._$itemSize.asObservable();
+        this._$dynamicSize = new BehaviorSubject(DEFAULT_DYNAMIC_SIZE);
+        this.$dynamicSize = this._$dynamicSize.asObservable();
+        this._$direction = new BehaviorSubject(DEFAULT_DIRECTION);
+        this.$direction = this._$direction.asObservable();
+        this._$itemsOffset = new BehaviorSubject(DEFAULT_ITEMS_OFFSET);
+        this.$itemsOffset = this._$itemsOffset.asObservable();
+        this._isVertical = this.getIsVertical();
+        this._displayComponents = [];
+        this._$bounds = new BehaviorSubject(null);
+        this._$scrollSize = new BehaviorSubject(0);
+        this._resizeObserver = null;
+        /**
+         * only dynamic
+         */
+        this._$scrolledItemId = new BehaviorSubject(undefined);
+        this._onResizeHandler = () => {
+            this._$bounds.next(this._container?.nativeElement?.getBoundingClientRect() ?? null);
+        };
+        this._scrollDirection = 0;
+        this._onScrollHandler = (e) => {
+            this._$scrolledItemId.next(undefined);
+            const container = this._container?.nativeElement;
+            if (container) {
+                const dynamicSize = this.dynamicSize, delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft), previouseScrollSize = this._$scrollSize.getValue();
+                let actualScrollSize = scrollSize;
+                this._scrollDirection = previouseScrollSize > scrollSize ? -1 : 1;
+                if (dynamicSize && delta !== 0) {
+                    actualScrollSize = scrollSize + delta;
+                    const params = {
+                        [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                        behavior: BEHAVIOR_INSTANT
+                    };
+                    const container = this._container;
+                    if (container) {
+                        this.scrollImmediately(container, params);
+                        this._trackBox.clearDelta();
+                    }
+                }
+                this._$scrollSize.next(actualScrollSize);
+                this.onScroll.emit(actualScrollSize);
+            }
+        };
+        this._scrollImmediatelyHandler = undefined;
+        this._onScrollEndHandler = (e, fireEvent = true) => {
+            const container = this._container;
+            if (container) {
+                const itemSize = this.itemSize, snapToItem = this.snapToItem, dynamicSize = this.dynamicSize, delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft);
+                let actualScrollSize = scrollSize;
+                if (dynamicSize && delta !== 0) {
+                    actualScrollSize = scrollSize + delta;
+                    if (scrollSize !== actualScrollSize) {
+                        const params = {
+                            [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                            behavior: BEHAVIOR_INSTANT
+                        };
+                        this._trackBox.clearDelta();
+                        this._$scrollSize.next(actualScrollSize);
+                        container.nativeElement.scroll(params);
+                        return;
+                    }
+                }
+                else {
+                    const scrollItems = Math.round(scrollSize / itemSize);
+                    actualScrollSize = snapToItem ? scrollItems * itemSize : scrollSize;
+                    if (scrollSize !== actualScrollSize) {
+                        const params = {
+                            [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                            behavior: BEHAVIOR_INSTANT
+                        };
+                        container.nativeElement.scroll(params);
+                    }
+                }
+                this._$scrollSize.next(actualScrollSize);
+                if (fireEvent) {
+                    this.onScrollEnd.emit(actualScrollSize);
+                }
+            }
+        };
+        this._$initialized = new BehaviorSubject(false);
+        /**
+         * Dictionary of element sizes by their id
+         */
+        this._trackBox = new TrackBox(TRACK_BY_PROPERTY_NAME);
+        this._onTrackBoxChangeHandler = (v) => {
+            this._$cacheVersion.next(v);
+        };
+        this._$cacheVersion = new BehaviorSubject(-1);
+        NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
+            ? 0 : NgVirtualListComponent.__nextId + 1;
+        this._id = NgVirtualListComponent.__nextId;
+        this._$initialized = new BehaviorSubject(false);
+        this.$initialized = this._$initialized.asObservable();
+        this._trackBox.displayComponents = this._displayComponents;
+        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = this.$itemsOffset.pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $cacheVersion = this.$cacheVersion, $scrolledItemId = this._$scrolledItemId.asObservable();
+        $isVertical.pipe(takeUntil(this._$unsubscribe), tap(v => {
+            this._isVertical = v;
+            const el = this._elementRef.nativeElement;
+            toggleClassName(el, v ? CLASS_LIST_VERTICAL : CLASS_LIST_HORIZONTAL, true);
+        })).subscribe();
+        $dynamicSize.pipe(takeUntil(this._$unsubscribe), tap(dynamicSize => {
+            this.listenCacheChangesIfNeed(dynamicSize);
+        })).subscribe();
+        combineLatest([this.$initialized, $scrolledItemId, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
+            $itemsOffset, $snap, $isVertical, $dynamicSize, $cacheVersion,
+        ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), debounceTime(0), filter(([initialized]) => !!initialized), switchMap(([, scrolledItemId, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, cacheVersion,]) => {
+            const { width, height } = bounds;
+            let actualScrollSize = scrollSize;
+            const opts = {
+                bounds: { width, height }, collection: items, dynamicSize, isVertical, itemSize,
+                itemsOffset, scrollSize: scrollSize, snap, fromItemId: scrolledItemId,
+            };
+            if (dynamicSize && scrolledItemId !== undefined) {
+                const scrollSize = this._trackBox.getItemPosition(scrolledItemId, stickyMap, { ...opts, scrollSize: actualScrollSize });
+                actualScrollSize = scrollSize;
+                this._$scrollSize.next(actualScrollSize);
+            }
+            const scrollDirection = this._scrollDirection, { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                ...opts, scrollSize: actualScrollSize, scrollDirection
+            });
+            this.resetBoundsSize(isVertical, totalSize);
+            this.createDisplayComponentsIfNeed(displayItems);
+            this.tracking();
+            if (dynamicSize && scrolledItemId !== undefined) {
+                const container = this._container;
+                if (container) {
+                    const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior: BEHAVIOR_AUTO };
+                    this.scrollImmediately(container, params);
+                }
+            }
+            return of(displayItems);
+        })).subscribe();
+        combineLatest([this.$initialized, this.$itemRenderer]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
+            this.resetRenderers(itemRenderer);
+        }));
+    }
+    /**
+     * Readonly. Returns the unique identifier of the component.
+     */
+    get id() { return this._id; }
+    /**
+     * Collection of list items.
+     */
+    set items(v) {
+        if (this._$items.getValue() === v) {
+            return;
+        }
+        this._$items.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get items() { return this._$items.getValue(); }
+    /**
+     * Determines whether elements will snap. Default value is "true".
+     */
+    set snap(v) {
+        if (this._$snap.getValue() === v) {
+            return;
+        }
+        this._$snap.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get snap() { return this._$snap.getValue(); }
+    /**
+     * Determines whether scroll positions will be snapped to the element. Default value is "false".
+     */
+    set snapToItem(v) {
+        if (this._$snapToItem.getValue() === v) {
+            return;
+        }
+        this._$snapToItem.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get snapToItem() { return this._$snapToItem.getValue(); }
+    /**
+     * Rendering element template.
+     */
+    set itemRenderer(v) {
+        if (this._$itemRenderer.getValue() === v) {
+            return;
+        }
+        this._$itemRenderer.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get itemRenderer() { return this._$itemRenderer.getValue(); }
+    /**
+     * 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.
+     */
+    set stickyMap(v) {
+        if (this._$stickyMap.getValue() === v) {
+            return;
+        }
+        this._$stickyMap.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get stickyMap() { return this._$stickyMap.getValue(); }
+    /**
+     * 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.
+     */
+    set itemSize(v) {
+        if (this._$itemSize.getValue() === v) {
+            return;
+        }
+        this._$itemSize.next(this._itemSizeOptions(v));
+        this._cdr.markForCheck();
+    }
+    ;
+    get itemSize() { return this._$itemSize.getValue(); }
+    /**
+     * 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.
+     */
+    set dynamicSize(v) {
+        if (this._$dynamicSize.getValue() === v) {
+            return;
+        }
+        this._$dynamicSize.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get dynamicSize() { return this._$dynamicSize.getValue(); }
+    /**
+     * Determines the direction in which elements are placed. Default value is "vertical".
+     */
+    set direction(v) {
+        if (this._$direction.getValue() === v) {
+            return;
+        }
+        this._$direction.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get direction() { return this._$direction.getValue(); }
+    /**
+     * Number of elements outside the scope of visibility. Default value is 2.
+     */
+    set itemsOffset(v) {
+        if (this._$itemsOffset.getValue() === v) {
+            return;
+        }
+        this._$itemsOffset.next(v);
+    }
+    ;
+    get itemsOffset() { return this._$itemsOffset.getValue(); }
+    scrollImmediately(container, params) {
+        this.clearScrollImmediately();
+        container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
+        const handler = () => {
+            if (container) {
+                container.nativeElement.removeEventListener(SCROLL_END, handler);
+                container.nativeElement.scroll(params);
+                container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
+            }
+        };
+        container.nativeElement.addEventListener(SCROLL_END, handler);
+        container.nativeElement.scroll(params);
+        this._scrollImmediatelyHandler = handler;
+    }
+    clearScrollImmediately() {
+        if (this._scrollImmediatelyHandler === undefined) {
+            return;
+        }
+        const container = this._container;
+        if (container) {
+            container.nativeElement.removeEventListener(SCROLL_END, this._scrollImmediatelyHandler);
+        }
+    }
+    get $cacheVersion() { return this._$cacheVersion.asObservable(); }
+    ngOnInit() {
+        this._$initialized.next(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);
+    }
+    createDisplayComponentsIfNeed(displayItems) {
+        if (!displayItems || !this._listContainerRef) {
+            this._trackBox.setDisplayObjectIndexMapById({});
+            return;
+        }
+        this._trackBox.items = displayItems;
+        const _listContainerRef = this._listContainerRef;
+        while (this._displayComponents.length < displayItems.length) {
+            if (_listContainerRef) {
+                const comp = _listContainerRef.createComponent(NgVirtualListItemComponent);
+                this._displayComponents.push(comp);
+            }
+        }
+        const maxLength = displayItems.length;
+        while (this._displayComponents.length > maxLength) {
+            const comp = this._displayComponents.pop();
+            comp?.destroy();
+            const id = comp?.instance.item?.id;
+            if (id !== undefined) {
+                this._trackBox.untrackComponentByIdProperty(comp?.instance);
+            }
+        }
+        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}`;
+        }
+    }
+    /**
+     * 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) {
+        const items = this.items;
+        if (!items || !items.length) {
+            return;
+        }
+        const dynamicSize = this.dynamicSize, container = this._container, itemSize = this.itemSize;
+        if (container) {
+            if (dynamicSize) {
+                if (container) {
+                    container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
+                    container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
+                }
+                const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, opts = {
+                    bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
+                    itemsOffset: this.itemsOffset, scrollSize: this._isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft,
+                    snap: this.snap, fromItemId: id,
+                }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
+                this._$scrolledItemId.next(id);
+                this._$scrollSize.next(scrollSize);
+                if (container) {
+                    const handler = () => {
+                        if (container) {
+                            container.nativeElement.removeEventListener(SCROLL_END, handler);
+                            clearTimeout(this._scrollToTimeout);
+                            this._scrollToTimeout = setTimeout(() => {
+                                container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
+                                container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
+                            }, 100);
+                            this.listenCacheChangesIfNeed(dynamicSize);
+                            this.onScroll.emit(scrollSize);
+                        }
+                    };
+                    container.nativeElement.addEventListener(SCROLL_END, handler);
+                }
+                container.nativeElement.scroll(params);
+            }
+            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.scroll(params);
+            }
+        }
+    }
+    scrollToEnd(behavior = BEHAVIOR_INSTANT) {
+        const items = this.items, latItem = items[items.length > 0 ? items.length - 1 : 0];
+        this.scrollTo(latItem.id, behavior);
+    }
+    ngAfterViewInit() {
+        const containerEl = this._container;
+        if (containerEl) {
+            containerEl.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
+            containerEl.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
+            this._resizeObserver = new ResizeObserver(this._onResizeHandler);
+            this._resizeObserver.observe(containerEl.nativeElement);
+            this._onResizeHandler();
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._scrollToTimeout) {
+            clearTimeout(this._scrollToTimeout);
+        }
+        if (this._trackBox) {
+            this._trackBox.dispose();
+        }
+        const containerEl = this._container;
+        if (containerEl) {
+            containerEl.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
+            containerEl.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
+            if (this._resizeObserver) {
+                this._resizeObserver.unobserve(containerEl.nativeElement);
+            }
+        }
+        if (this._displayComponents) {
+            while (this._displayComponents.length > 0) {
+                const comp = this._displayComponents.pop();
+                comp?.destroy();
+            }
+        }
+    }
+}
+NgVirtualListComponent.__nextId = 0;
+NgVirtualListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", snap: "snap", snapToItem: "snapToItem", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }], usesInheritance: true, ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-virtual-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { _listContainerRef: [{
+                type: ViewChild,
+                args: ['renderersContainer', { read: ViewContainerRef }]
+            }], _container: [{
+                type: ViewChild,
+                args: ['container', { read: (ElementRef) }]
+            }], _list: [{
+                type: ViewChild,
+                args: ['list', { read: (ElementRef) }]
+            }], onScroll: [{
+                type: Output
+            }], onScrollEnd: [{
+                type: Output
+            }], items: [{
+                type: Input
+            }], snap: [{
+                type: Input
+            }], snapToItem: [{
+                type: Input
+            }], itemRenderer: [{
+                type: Input
+            }], stickyMap: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], dynamicSize: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], itemsOffset: [{
+                type: Input
+            }] } });
+
+class NgVirtualListModule {
+}
+NgVirtualListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgVirtualListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListModule, declarations: [NgVirtualListComponent, NgVirtualListItemComponent], imports: [CommonModule], exports: [NgVirtualListComponent] });
+NgVirtualListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgVirtualListComponent, NgVirtualListItemComponent],
+                    exports: [NgVirtualListComponent],
+                    imports: [CommonModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ng-virtual-list
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgVirtualListComponent, NgVirtualListModule };
+//# sourceMappingURL=ng-virtual-list.mjs.map