ng-virtual-list 0.7.2 → 14.0.0

package/fesm2022/ng-virtual-list.mjs

@@ -1,942 +0,0 @@
-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 { BehaviorSubject, filter, map, tap, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
-
-var Directions;
-(function (Directions) {
-    Directions["HORIZONTAL"] = "horizontal";
-    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_INSTANT = 'instant';
-const BEHAVIOR_AUTO = 'auto';
-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
- * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
- * @author Evgenii Grebennikov
- * @email djonnyx@gmail.com
- */
-class NgVirtualListItemComponent {
-    static __nextId = 0;
-    _id;
-    get id() {
-        return this._id;
-    }
-    get config() {
-        return { ...this._data?.config || {} };
-    }
-    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 = 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 itemId() {
-        return this._data?.id;
-    }
-    itemRenderer = signal(undefined);
-    set renderer(v) {
-        this.itemRenderer.set(v);
-    }
-    _elementRef = inject((ElementRef));
-    constructor() {
-        this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
-            ? 0 : NgVirtualListItemComponent.__nextId + 1;
-    }
-    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;
-    }
-    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]=\"{snipped: item.config.snapped}\">\r\n    @if (renderer) {\r\n    <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"{data: item.data || {}, config: 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]=\"{snipped: item.config.snapped}\">\r\n    @if (renderer) {\r\n    <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"{data: item.data || {}, config: 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'];
-const isDirection = (src, expected) => {
-    if (HORIZONTAL_ALIASES.includes(expected)) {
-        return HORIZONTAL_ALIASES.includes(src);
-    }
-    return VERTICAL_ALIASES.includes(src);
-};
-
-/**
- * Simple debounce function.
- * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
- * @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 {
-        execute,
-        dispose,
-    };
-};
-
-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
- * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
- * @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;
-    constructor(trackingPropertyName) {
-        this._trackingPropertyName = trackingPropertyName;
-    }
-    /**
-     * 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
- * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
- * @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);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    dispose() {
-        this._disposed = true;
-        this.removeAllListeners();
-    }
-}
-
-/**
- * Cache map.
- * Emits a change event on each mutation.
- * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
- * @author Evgenii Grebennikov
- * @email djonnyx@gmail.com
- */
-class CacheMap extends EventEmitter {
-    _map = new Map();
-    _version = 0;
-    get version() {
-        return this._version;
-    }
-    constructor() {
-        super();
-    }
-    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.
- * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
- * @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;
-    }
-    constructor(trackingPropertyName) {
-        super();
-        this._tracker = new Tracker(trackingPropertyName);
-    }
-    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;
-    }
-    _fireChanges = (version) => {
-        this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, version);
-    };
-    _debounceChanges = debounce(this._fireChanges, 0);
-    fireChange() {
-        this._debounceChanges.execute(this._version);
-    }
-    recalculateMetrics(options) {
-        const { bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, } = options;
-        const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, weightToDisplayEnd = scrollSize + height, totalLength = collection.length, typicalItemSize = itemSize, totalSize = dynamicSize ? this.getBoundsFromCache(collection, typicalItemSize, isVertical) : totalLength * typicalItemSize, snippedPos = Math.floor(scrollSize), leftItemsWeights = [];
-        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, startIndex;
-        if (dynamicSize) {
-            let y = 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 (y < scrollSize - componentSize) {
-                    leftItemsWeights.push(componentSize);
-                    leftHiddenItemsWeight += componentSize;
-                    itemsFromStartToScrollEnd = ii;
-                }
-                if (y < scrollSize + size + componentSize) {
-                    itemsFromStartToDisplayEnd = ii;
-                    totalItemsToDisplayEndWeight += componentSize;
-                    itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + itemsOffset;
-                }
-                else if (i < itemsFromDisplayEndToOffsetEnd) {
-                    rightItemsWeight += componentSize;
-                }
-                y += componentSize;
-            }
-            if (itemsFromStartToScrollEnd === -1) {
-                itemsFromStartToScrollEnd = 0;
-            }
-            if (itemsFromStartToDisplayEnd === -1) {
-                itemsFromStartToDisplayEnd = 0;
-            }
-            leftItemsWeights.splice(0, leftItemsWeights.length - itemsOffset);
-            leftItemsWeights.forEach(v => {
-                leftItemsWeight += v;
-            });
-            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
-            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
-                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
-            startIndex = itemsFromStartToScrollEnd - leftItemLength;
-        }
-        else {
-            itemsFromStartToScrollEnd = Math.ceil(scrollSize / typicalItemSize);
-            itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
-            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
-            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
-                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
-            startIndex = itemsFromStartToScrollEnd - leftItemLength;
-            leftItemsWeight = leftItemLength * typicalItemSize;
-            rightItemsWeight = rightItemLength * typicalItemSize,
-                leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize,
-                totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize;
-        }
-        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd;
-        const metrics = {
-            itemsFromStartToScrollEnd,
-            itemsFromStartToDisplayEnd,
-            itemsOnDisplay,
-            itemsOnDisplayLength,
-            leftHiddenItemsWeight,
-            leftItemLength,
-            leftItemsWeight,
-            rightItemLength,
-            rightItemsWeight,
-            snippedPos,
-            totalItemsToDisplayEndWeight,
-            totalSize,
-            typicalItemSize,
-        };
-        return metrics;
-    }
-    /**
-     * 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();
-        }
-    }
-}
-
-/**
- * Virtual list component.
- * Maximum performance for extremely large lists.
- * It is based on algorithms for virtualization of screen objects.
- * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
- * @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();
-    /**
-     * Collection of list items.
-     */
-    items = input.required();
-    /**
-     * Determines whether elements will snap. Default value is "true".
-     */
-    snap = input(DEFAULT_SNAP);
-    /**
-     * Determines whether scroll positions will be snapped to the element. Default value is "false".
-     */
-    snapToItem = input(DEFAULT_SNAP_TO_ITEM);
-    /**
-     * 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({});
-    /**
-     * 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);
-    /**
-     * 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();
-    _displayItems = signal(null);
-    _displayComponents = [];
-    _bounds = signal(null);
-    _scrollSize = signal(0);
-    _resizeObserver = null;
-    _onResizeHandler = () => {
-        this._bounds.set(this._container()?.nativeElement?.getBoundingClientRect() ?? null);
-    };
-    _onScrollHandler = (e) => {
-        const target = e.target, scrollSize = this._isVertical ? target.scrollTop : target.scrollLeft;
-        this._scrollSize.set(scrollSize);
-        this.onScroll.emit(e);
-    };
-    _onScrollEndHandler = (e) => {
-        const target = e.target, s = this.itemSize(), itemSize = s < 0 ? DEFAULT_ITEM_SIZE : s, snapToItem = this.snapToItem(), scrollSize = this._isVertical ? target.scrollTop : target.scrollLeft, scrollItems = Math.round(scrollSize / itemSize), actualScrollSize = snapToItem ? scrollItems * itemSize : scrollSize;
-        if (target.scrollTop !== actualScrollSize) {
-            const container = target, params = {
-                [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                behavior: BEHAVIOR_INSTANT
-            };
-            container.scroll(params);
-        }
-        this.onScrollEnd.emit(e);
-    };
-    _elementRef = inject((ElementRef));
-    _initialized = signal(false);
-    /**
-     * Dictionary of element sizes by their id
-     */
-    _trackBox = new TrackBox(TRACK_BY_PROPERTY_NAME);
-    _onTrackBoxChangeHandler = (v) => {
-        this._$cacheVersion.next(v);
-    };
-    _$cacheVersion = new BehaviorSubject(-1);
-    get $cacheVersion() { return this._$cacheVersion.asObservable(); }
-    constructor() {
-        NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
-            ? 0 : NgVirtualListComponent.__nextId + 1;
-        this._id = NgVirtualListComponent.__nextId;
-        this._trackBox.displayComponents = this._displayComponents;
-        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), $cacheVersion = this.$cacheVersion, $displayItems = toObservable(this._displayItems), $initialized = toObservable(this._initialized);
-        $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 => {
-            if (dynamicSize) {
-                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);
-                }
-            }
-        })).subscribe();
-        $displayItems.pipe(takeUntilDestroyed(), tap((displayItems) => {
-            this._trackBox.items = displayItems;
-        })).subscribe();
-        combineLatest([$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
-            $itemsOffset, $snap, $isVertical, $dynamicSize, $cacheVersion,
-        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, cacheVersion,]) => {
-            this._trackBox.cacheElements();
-            const { width, height } = bounds, { itemsFromStartToScrollEnd, itemsOnDisplay, itemsOnDisplayLength, leftHiddenItemsWeight, leftItemLength, leftItemsWeight, rightItemLength, rightItemsWeight, snippedPos, totalSize, typicalItemSize, } = this._trackBox.recalculateMetrics({
-                bounds: { width, height }, collection: items,
-                dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap,
-            });
-            // Необходима кореляция startDisplayObjectY с помощью дельты от высоты предыдущей и текущей размеченной области по версии кэша.
-            // TrackBox может расчитать дельту!
-            return of({
-                items, stickyMap, width, height, isVertical, scrollSize, itemsFromStartToScrollEnd,
-                itemsOnDisplay, itemsOnDisplayLength, leftHiddenItemsWeight, itemSize: typicalItemSize,
-                totalSize, snap, leftItemLength, leftItemsWeight, rightItemLength, rightItemsWeight, snippedPos,
-                dynamicSize,
-            });
-        }), tap(({ items, stickyMap, width, height, isVertical, scrollSize, itemsFromStartToScrollEnd, itemsOnDisplay, itemsOnDisplayLength, leftHiddenItemsWeight, leftItemLength, leftItemsWeight, rightItemLength, rightItemsWeight, snippedPos, itemSize, totalSize, snap, dynamicSize: dynamic, }) => {
-            const displayItems = [];
-            if (items.length) {
-                const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, w = isVertical ? width : itemSize, h = isVertical ? itemSize : height, totalItems = items.length, startIndex = itemsFromStartToScrollEnd - leftItemLength;
-                let pos = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0;
-                if (snap) {
-                    for (let i = itemsFromStartToScrollEnd - 1; i >= 0; i--) {
-                        const id = items[i].id, sticky = stickyMap[id], size = dynamic ? this._trackBox.get(id)?.[sizeProperty] || itemSize : itemSize;
-                        stickyItemSize = size;
-                        if (sticky > 0) {
-                            const measures = {
-                                x: isVertical ? 0 : snippedPos,
-                                y: isVertical ? snippedPos : 0,
-                                width: w,
-                                height: h,
-                            }, config = {
-                                isVertical,
-                                sticky,
-                                snap,
-                                snapped: true,
-                                dynamic,
-                            };
-                            const itemData = items[i];
-                            stickyItem = { id, measures, data: itemData, config };
-                            stickyItemIndex = i;
-                            displayItems.push(stickyItem);
-                            break;
-                        }
-                    }
-                }
-                let i = startIndex;
-                while (renderItems > 0) {
-                    if (i >= totalItems) {
-                        break;
-                    }
-                    const id = items[i].id, size = dynamic ? this._trackBox.get(id)?.[sizeProperty] || itemSize : itemSize;
-                    if (id !== stickyItem?.id) {
-                        const snaped = snap && stickyMap[id] > 0 && pos <= scrollSize, measures = {
-                            x: isVertical ? 0 : pos,
-                            y: isVertical ? pos : 0,
-                            width: w,
-                            height: h,
-                        }, config = {
-                            isVertical,
-                            sticky: stickyMap[id],
-                            snap,
-                            snapped: false,
-                            dynamic,
-                        };
-                        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 : snaped ? snippedPos : pos;
-                            item.measures.y = isVertical ? snaped ? snippedPos : pos : 0;
-                            nextSticky = item;
-                        }
-                        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.sticky = 1;
-                    }
-                    else {
-                        nextSticky.config.snapped = true;
-                    }
-                }
-            }
-            this._displayItems.set(displayItems);
-            this.resetBoundsSize(isVertical, totalSize);
-        })).subscribe();
-        combineLatest([$initialized, toObservable(this.itemRenderer)]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
-            this.resetRenderers(itemRenderer);
-        }));
-        combineLatest([$initialized, $displayItems]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, displayItems]) => {
-            this.createDisplayComponentsIfNeed(displayItems);
-            this.tracking();
-        })).subscribe();
-    }
-    ngOnInit() {
-        this._initialized.set(true);
-    }
-    getIsVertical(d) {
-        const dir = d || this.direction();
-        return isDirection(dir, Directions.VERTICAL);
-    }
-    createDisplayComponentsIfNeed(displayItems) {
-        if (!displayItems || !this._listContainerRef) {
-            this._trackBox.setDisplayObjectIndexMapById({});
-            return;
-        }
-        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 index = items.findIndex(item => item.id === id), scrollSize = index * this.itemSize(), container = this._container();
-        if (container) {
-            const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
-            container.nativeElement.scroll(params);
-        }
-    }
-    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() {
-        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();
-            }
-        }
-    }
-    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 }, snapToItem: { classPropertyName: "snapToItem", publicName: "snapToItem", 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 } }, 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