igniteui-angular 22.1.4 → 22.2.0-rc.0

package/fesm2022/igniteui-angular-virtual-scroll.mjs

@@ -0,0 +1,1257 @@
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, computed, inject, TemplateRef, Directive, ElementRef, NgZone, DOCUMENT, PLATFORM_ID, contentChild, viewChild, input, output, effect, untracked, afterNextRender, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { clamp, isLeftToRight } from 'igniteui-angular/core';
+
+/** The maximum scroll coordinate is a per-document constant, so probe once. */
+const _maxBrowserSizeCache = new WeakMap();
+/** Measures the largest scroll coordinate the browser can represent. */
+function probeMaxBrowserSize(doc) {
+    const cached = _maxBrowserSizeCache.get(doc);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const container = doc.body ?? doc.documentElement;
+    if (!container) {
+        return Number.POSITIVE_INFINITY;
+    }
+    const probe = doc.createElement("div");
+    probe.style.position = "absolute";
+    probe.style.top = `${Number.MAX_SAFE_INTEGER}px`;
+    probe.style.width = "0";
+    probe.style.height = "0";
+    probe.style.visibility = "hidden";
+    container.appendChild(probe);
+    // The rect is viewport relative, so add back how far the document is scrolled.
+    const scrollOffset = doc.documentElement?.scrollTop ?? 0;
+    const size = Math.abs(probe.getBoundingClientRect().top) + scrollOffset;
+    container.removeChild(probe);
+    _maxBrowserSizeCache.set(doc, size);
+    return size;
+}
+/**
+ * Fills `tree` with the partial range sums of `sizes` in one O(N) pass.
+ * `tree` is a 1-indexed Fenwick array of `sizes.length + 1` zeroed entries.
+ * Returns the total sum.
+ */
+function buildTree(tree, sizes) {
+    const length = sizes.length;
+    let total = 0;
+    for (let i = 1; i <= length; i++) {
+        tree[i] += sizes[i - 1];
+        total += sizes[i - 1];
+        const parent = i + (i & -i);
+        if (parent <= length) {
+            tree[parent] += tree[i];
+        }
+    }
+    return total;
+}
+/**
+ * Binary Indexed Tree (Fenwick tree) over item sizes. Each hot-path operation
+ * is O(log N): point update (item measured), prefix sum (scroll offset), and
+ * index at offset (scroll to item, through binary lifting).
+ */
+class SizeTree {
+    constructor(sizes, tree, total, measured) {
+        this.length = sizes.length;
+        this._sizes = sizes;
+        this._tree = tree;
+        this._total = total;
+        this._measured = measured;
+        this._topBit = this.length > 0 ? 1 << (31 - Math.clz32(this.length)) : 0;
+    }
+    /** Creates a tree of `length` unmeasured items, each set to `fillSize`. O(N). */
+    static filled(length, fillSize) {
+        return SizeTree._build(new Float64Array(length).fill(fillSize), new Uint8Array(length));
+    }
+    /** Builds a tree from a sizes array and its matching measured flags. O(N). */
+    static _build(sizes, measured) {
+        const tree = new Float64Array(sizes.length + 1);
+        const total = buildTree(tree, sizes);
+        return new SizeTree(sizes, tree, total, measured);
+    }
+    /** Total size of all items. O(1). */
+    get totalSize() {
+        return this._total;
+    }
+    /**
+     * Prefix sum of items [0, i): the virtual scroll offset at the leading
+     * edge of item i. O(log N).
+     */
+    prefixSum(i) {
+        let sum = 0;
+        for (let j = i; j > 0; j -= j & -j) {
+            sum += this._tree[j];
+        }
+        return sum;
+    }
+    /**
+     * Sets the size of the item at a 0-based index and marks it measured, so
+     * later `applyEstimate` calls leave it alone. Returns true when the size
+     * changed. O(log N).
+     */
+    update(index, newSize) {
+        if (index < 0 || index >= this.length) {
+            return false;
+        }
+        const old = this._sizes[index];
+        this._measured[index] = 1;
+        if (old === newSize) {
+            return false;
+        }
+        const delta = newSize - old;
+        this._sizes[index] = newSize;
+        this._total += delta;
+        for (let i = index + 1; i <= this.length; i += i & -i) {
+            this._tree[i] += delta;
+        }
+        return true;
+    }
+    /**
+     * Returns a new tree of `newLength` items in one O(N) pass. Sizes and
+     * measured flags are kept up to `min(this.length, newLength, retainCount)`.
+     * The remainder is filled with `fillSize` and marked unmeasured. Pass a
+     * `retainCount` below the item count when the data behind those indices
+     * changed identity.
+     */
+    cloneResized(newLength, fillSize, retainCount = newLength) {
+        const sizes = new Float64Array(newLength).fill(fillSize);
+        const measured = new Uint8Array(newLength);
+        const retained = Math.max(0, Math.min(this.length, newLength, retainCount));
+        sizes.set(this._sizes.subarray(0, retained));
+        measured.set(this._measured.subarray(0, retained));
+        return SizeTree._build(sizes, measured);
+    }
+    /**
+     * Sets `estimatedSize` on each unmeasured item. Returns true when at least
+     * one size changed.
+     *
+     * One estimate change can touch most of the list, so this rebuilds in one
+     * O(N) pass instead of one O(log N) `update` per item.
+     */
+    applyEstimate(estimatedSize) {
+        let changed = false;
+        for (let i = 0; i < this.length; i++) {
+            if (!this._measured[i] && this._sizes[i] !== estimatedSize) {
+                this._sizes[i] = estimatedSize;
+                changed = true;
+            }
+        }
+        if (!changed) {
+            return false;
+        }
+        this._tree.fill(0);
+        this._total = buildTree(this._tree, this._sizes);
+        return true;
+    }
+    /**
+     * Returns the 0-based index of the item containing the scroll `offset`:
+     * the largest i where `prefixSum(i) <= offset < prefixSum(i + 1)`. O(log N).
+     */
+    findIndexAtOffset(offset) {
+        if (offset <= 0 || this.length === 0) {
+            return 0;
+        }
+        let index = 0;
+        let remaining = offset;
+        for (let bit = this._topBit; bit > 0; bit >>= 1) {
+            const next = index + bit;
+            if (next <= this.length && this._tree[next] <= remaining) {
+                index = next;
+                remaining -= this._tree[index];
+            }
+        }
+        return Math.min(this.length - 1, index);
+    }
+}
+/**
+ * Pure scroll-math engine for one axis of virtual scrolling. A Fenwick tree
+ * holds all size state, exposed through signals so downstream `computed()`
+ * values (visible range, spacer size, translate offset) react to any change
+ * of item sizes or item count.
+ *
+ * ### Virtual and DOM coordinates
+ *
+ * Browsers limit how far an element can scroll. When the total item size is
+ * larger than that limit, the engine maps the *virtual* scroll range
+ * (`0…totalSize - viewport`) onto the *DOM* scroll range the browser can
+ * represent (`0…domSize - viewport`), see `_scrollRanges`. Incoming scroll
+ * positions are converted to virtual offsets, outgoing offsets to DOM ones.
+ * Items render at their real pixel size, so item sizes are always virtual.
+ */
+class VirtualScrollEngine {
+    constructor() {
+        this._maxBrowserSize = Number.POSITIVE_INFINITY;
+        this._tree = null;
+        /** Bumped on every structural change: resize, measurement or estimate. */
+        this._version = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
+        /**
+         * Read this from a `computed()` to make it recompute on any size change.
+         * `totalSize` and `domSize` already do.
+         */
+        this.version = this._version.asReadonly();
+        /** Total virtual size of all items in px. */
+        this.totalSize = computed(() => {
+            this._version();
+            return this._tree?.totalSize ?? 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Total size in DOM space, clamped to the maximum browser size.
+         *
+         * Depends on `_version` directly rather than on `totalSize()`. The maximum
+         * can change while the total does not (it is probed after the first
+         * render), and an unchanged `totalSize` would not propagate.
+         */
+        this.domSize = computed(() => {
+            this._version();
+            return Math.min(this._tree?.totalSize ?? 0, this._maxBrowserSize);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "domSize" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Probes the document's maximum scroll coordinate and rescales. Notifies,
+     * because the probe can only run after the first render, by which point
+     * `domSize` has already been read at the uncompressed total.
+     */
+    initMaxBrowserSize(doc) {
+        this._maxBrowserSize = probeMaxBrowserSize(doc);
+        this._invalidate();
+    }
+    /**
+     * Resizes the internal sizes array to `length`. Measured sizes below
+     * `retainCount` are kept, the remainder falls back to `estimatedSize`.
+     * Callers that only append can keep the default `retainCount`. Callers
+     * whose data changed identity at some index must pass that index, so the
+     * stale measurements after it are discarded.
+     */
+    resize(length, estimatedSize, retainCount = length) {
+        if (this._tree?.length === length && retainCount >= length) {
+            return;
+        }
+        this._tree = this._tree
+            ? this._tree.cloneResized(length, estimatedSize, retainCount)
+            : SizeTree.filled(length, estimatedSize);
+        this._invalidate();
+    }
+    /** Records the measured DOM size for a single item. */
+    measureItem(index, size) {
+        if (this._tree?.update(index, size)) {
+            this._invalidate();
+        }
+    }
+    /**
+     * Applies a new estimate to every item not yet measured in the DOM. Use
+     * this when `estimatedItemSize` changes but the item count does not,
+     * because `resize` is then a no-op.
+     */
+    updateEstimatedSize(estimatedSize) {
+        if (this._tree?.applyEstimate(estimatedSize)) {
+            this._invalidate();
+        }
+    }
+    /**
+     * Returns the DOM scroll offset in px that puts the item at `index` at the
+     * leading edge of a `viewportSize` px viewport.
+     */
+    getScrollOffsetForIndex(index, viewportSize) {
+        if (!this._tree || index <= 0) {
+            return 0;
+        }
+        return this._toDom(this._tree.prefixSum(Math.min(index, this._tree.length)), viewportSize);
+    }
+    /**
+     * Returns the DOM scroll offset that positions the item at `index` in a
+     * `viewportSize` px viewport, aligned by `align` and clamped to the
+     * reachable scroll range.
+     *
+     * The slack is computed in virtual space against the item's real size and
+     * converted to DOM space once, at the end. Under compression one DOM pixel
+     * is several virtual pixels, so mixed coordinates would scale the slack.
+     */
+    getAlignedScrollOffset(index, viewportSize, align) {
+        const bounds = this._itemBounds(index);
+        if (!bounds) {
+            return 0;
+        }
+        const [start, end] = bounds;
+        const slack = viewportSize - Math.max(0, end - start);
+        let offset = start;
+        if (align === "center") {
+            offset -= slack / 2;
+        }
+        else if (align === "end") {
+            offset -= slack;
+        }
+        return clamp(this._toDom(offset, viewportSize), 0, Math.max(0, this.domSize() - viewportSize));
+    }
+    /**
+     * The alignment `scrollIntoView({ block: 'nearest' })` resolves to for the
+     * item at `index` at the given DOM scroll position: `start` for an item
+     * before the viewport, `end` for one past it, and `null` for one that needs
+     * no scrolling because it is fully inside the viewport, or larger than the
+     * viewport and covering it.
+     */
+    getNearestAlignment(index, scrollPosition, viewportSize) {
+        const bounds = this._itemBounds(index);
+        if (!bounds) {
+            return null;
+        }
+        const [start, end] = bounds;
+        const viewStart = this._toVirtual(scrollPosition, viewportSize);
+        const viewEnd = viewStart + viewportSize;
+        const contained = start >= viewStart && end <= viewEnd;
+        const spanning = start <= viewStart && end >= viewEnd;
+        if (contained || spanning) {
+            return null;
+        }
+        return start < viewStart ? "start" : "end";
+    }
+    /** Returns the visible and over-scanned item range for the given scroll state. */
+    getVisibleRange(scrollPosition, viewportSize, overScan) {
+        if (!this._tree || this._tree.length === 0 || viewportSize <= 0) {
+            return { startIndex: 0, endIndex: -1 };
+        }
+        // The viewport is not compressed. Items render at their real pixel size,
+        // so a `viewportSize` px viewport always shows that many virtual pixels of
+        // items, at any compression of the scroll range.
+        const startOffset = this._toVirtual(scrollPosition, viewportSize);
+        const first = this._tree.findIndexAtOffset(startOffset);
+        const last = this._tree.findIndexAtOffset(startOffset + viewportSize);
+        return {
+            startIndex: Math.max(0, first - overScan),
+            endIndex: Math.min(this._tree.length - 1, last + overScan),
+        };
+    }
+    /**
+     * Sum of the real sizes of the items in [startIndex, endIndex]. The render
+     * pass uses it to clamp the content translate offset, so rendered items do
+     * not overflow past `domSize` under coordinate compression.
+     */
+    getPhysicalRangeSize(startIndex, endIndex) {
+        if (!this._tree) {
+            return 0;
+        }
+        const start = Math.max(0, startIndex);
+        const end = Math.min(Math.max(endIndex + 1, start), this._tree.length);
+        return this._tree.prefixSum(end) - this._tree.prefixSum(start);
+    }
+    /**
+     * The virtual [start, end] offsets of the item at `index`, clamped into the
+     * item range. Null while there are no items.
+     */
+    _itemBounds(index) {
+        if (!this._tree || this._tree.length === 0) {
+            return null;
+        }
+        const clamped = clamp(index, 0, this._tree.length - 1);
+        return [this._tree.prefixSum(clamped), this._tree.prefixSum(clamped + 1)];
+    }
+    _invalidate() {
+        this._version.update((v) => v + 1);
+    }
+    /**
+     * A virtual offset as the DOM scroll position that shows it, for a
+     * `viewportSize` px viewport.
+     */
+    _toDom(virtualOffset, viewportSize) {
+        const [virtualRange, domRange] = this._scrollRanges(viewportSize);
+        return (virtualOffset * domRange) / virtualRange;
+    }
+    /**
+     * A DOM scroll position as the virtual offset it shows, for a
+     * `viewportSize` px viewport.
+     */
+    _toVirtual(domOffset, viewportSize) {
+        const [virtualRange, domRange] = this._scrollRanges(viewportSize);
+        return (Math.max(0, domOffset) * virtualRange) / domRange;
+    }
+    /**
+     * The virtual and DOM scroll ranges to map between; the identity while the
+     * content fits the browser's limit. One viewport of items renders at real
+     * size at any scroll position, so both ranges exclude it: mapping the totals
+     * instead would leave the last `viewport * (ratio - 1)` virtual pixels past
+     * the largest DOM offset. Callers multiply before dividing, so exact
+     * positions come back exact.
+     */
+    _scrollRanges(viewportSize) {
+        const totalSize = this._tree?.totalSize ?? 0;
+        const domRange = this._maxBrowserSize - viewportSize;
+        if (totalSize <= this._maxBrowserSize || domRange <= 0) {
+            return [1, 1];
+        }
+        return [totalSize - viewportSize, domRange];
+    }
+}
+
+/** Template context for a single item of the virtual scroll. */
+class IgxVsItemContext {
+    constructor(
+    /** The current item in the virtual scroll. */
+    $implicit, 
+    /** The index of the current item. */
+    index, 
+    /** The total number of items in the virtual scroll. */
+    count) {
+        this.$implicit = $implicit;
+        this.index = index;
+        this.count = count;
+    }
+    /** Whether the current item is the first in the list. */
+    get first() {
+        return this.index === 0;
+    }
+    /** Whether the current item is the last in the list. */
+    get last() {
+        return this.index === this.count - 1;
+    }
+    /** Whether the current item is at an even index. */
+    get even() {
+        return this.index % 2 === 0;
+    }
+    /** Whether the current item is at an odd index. */
+    get odd() {
+        return !this.even;
+    }
+}
+
+/**
+ * Directive to mark an `ng-template` as the item template for the virtual scroll component.
+ * The template provided by this directive will be used to render each item in the virtual scroll.
+ * The context for the template will include the item data and its index.
+ *
+ * @example
+ * ```html
+ * <igx-virtual-scroll [data]="items">
+ *   <ng-template igxVirtualItem let-item let-i="index">
+ *     <div>{{ i }}: {{ item }}</div>
+ *   </ng-template>
+ * </igx-virtual-scroll>
+ * ```
+ */
+class IgxVirtualItemDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxVirtualItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxVirtualItemDirective, isStandalone: true, selector: "ng-template[igxVirtualItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxVirtualItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "ng-template[igxVirtualItem]" }]
+        }] });
+
+/** Defaults for the inputs, also used as the fallback for invalid values. */
+const DEFAULT_OVER_SCAN = 2;
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+/** How close to the end of `data` the window must get to emit `dataRequest`. */
+const DATA_REQUEST_THRESHOLD = 5;
+const DATA_REQUEST_MIN_COUNT = 20;
+const DATA_REQUEST_OVER_SCAN_FACTOR = 4;
+/** Give-up bounds for the two loops that wait for the layout to stabilize. */
+const MAX_LAYOUT_SETTLE_PASSES = 20;
+const MAX_SCROLL_CORRECTION_PASSES = 5;
+const SCROLL_END_TIMEOUT_MS = 2000;
+const SCROLL_OFFSET_EPSILON_PX = 1;
+/** How long the scroll position must stay unchanged to count as settled. */
+const SCROLL_IDLE_MS = 100;
+/**
+ * Upper limit on one `requestAnimationFrame` wait. A hidden tab or a detached
+ * element gets no frames, and `layoutComplete` must still resolve there.
+ */
+const LAYOUT_FRAME_TIMEOUT_MS = 100;
+const EMPTY_RANGE = Object.freeze({ startIndex: 0, endIndex: -1 });
+/** A consumer-supplied index, count or size, reduced to a whole non-negative number. */
+function toCount(value) {
+    const count = Math.trunc(value);
+    return Number.isFinite(count) ? Math.max(0, count) : 0;
+}
+function loadedEqual(a, b) {
+    return (a.items === b.items &&
+        a.startIndex === b.startIndex &&
+        a.totalCount === b.totalCount &&
+        a.windowed === b.windowed);
+}
+function rangesEqual(a, b) {
+    return a.startIndex === b.startIndex && a.endIndex === b.endIndex;
+}
+function statesEqual(a, b) {
+    return (a !== null &&
+        rangesEqual(a, b) &&
+        a.viewportSize === b.viewportSize &&
+        a.totalSize === b.totalSize);
+}
+/** The data index an item wrapper carries, or -1 when it has none. */
+function itemIndex(element) {
+    const index = Number.parseInt(element.dataset["index"] ?? "", 10);
+    return Number.isInteger(index) && index >= 0 ? index : -1;
+}
+function onAbort(abort, cancel) {
+    abort.addEventListener("abort", cancel, { once: true });
+}
+/**
+ * A virtual scroll component for large lists. Only the items visible in the
+ * viewport (plus a configurable over-scan) are rendered.
+ *
+ * @igxKeywords virtual, scroll, virtualization, list
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ * ```html
+ * <igx-virtual-scroll [data]="items" style="height: 400px">
+ *   <ng-template igxVirtualItem let-item let-i="index">
+ *     <div>{{ i }}: {{ item }}</div>
+ *   </ng-template>
+ * </igx-virtual-scroll>
+ * ```
+ */
+class IgxVirtualScrollComponent {
+    //#endregion
+    constructor() {
+        //#region Dependency injection
+        this._hostRef = inject(ElementRef);
+        this._zone = inject(NgZone);
+        this._document = inject(DOCUMENT);
+        this._isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        //#endregion
+        //#region Internal state
+        this._engine = new VirtualScrollEngine();
+        this._viewportResizeObserver = null;
+        this._itemResizeObserver = null;
+        this._onScroll = null;
+        /** Elements currently registered with the item resize observer. */
+        this._observedItems = new Set();
+        /** The data index each observed wrapper element last hosted. */
+        this._observedItemIndexes = new WeakMap();
+        /**
+         * The live scroll offset on the active axis. A plain field, not a signal:
+         * `_visibleRange` reads it but is invalidated by `_scrollTick`, so a scroll
+         * that does not move the rendered window schedules no work.
+         */
+        this._scrollPosition = 0;
+        /** Bumped only when a scroll actually moves the rendered window. */
+        this._scrollTick = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_scrollTick" }] : /* istanbul ignore next */ []));
+        /** The measured viewport, or `null` while the host has never been laid out. */
+        this._viewportSize = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_viewportSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the host is laid out left-to-right, as of the last read of the
+         * horizontal axis. `_contentTransform` depends on it, so a `dir` change
+         * flips the wrapper even while the rendered window stays put.
+         */
+        this._ltr = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_ltr" }] : /* istanbul ignore next */ []));
+        this._lastEmittedState = null;
+        this._hasPendingDataRequest = false;
+        /**
+         * The `startIndex` of the last emitted `dataRequest`, which is also the
+         * item count at that emit. See `_checkDataRequest`.
+         */
+        this._lastDataRequestIndex = -1;
+        this._layoutCompletePromise = null;
+        this._scrollRequestId = 0;
+        //#endregion
+        //#region View and content children
+        this._itemDirective = contentChild(IgxVirtualItemDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_itemDirective" }] : /* istanbul ignore next */ []));
+        this._contentDivRef = viewChild("contentDiv", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_contentDivRef" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region Public inputs
+        /**
+         * The array of items to virtualize.
+         *
+         * Compared by reference: mutating the array in place (`data.push(...)`)
+         * causes no update. Assign a new array instead. The `dataRequest` flow
+         * also expects a new array.
+         */
+        this.data = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /**
+         * Scroll orientation of the virtual scroll.
+         * Can be either "vertical" or "horizontal".
+         * Default is "vertical".
+         */
+        this.orientation = input("vertical", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /**
+         * Number of extra items to render beyond the visible area of the viewport.
+         * Higher values reduce blank flashes during fast scrolling but may impact performance.
+         * Default is 2.
+         */
+        this.overScan = input(DEFAULT_OVER_SCAN, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overScan" }] : /* istanbul ignore next */ []));
+        /**
+         * Estimated item size in pixels used before an item is measured in the DOM.
+         * The engine replaces this with the actual measured size after the first render of each item.
+         * Default is 50 pixels.
+         * Setting this to a value close to the actual average item size can improve initial rendering performance.
+         */
+        this.estimatedItemSize = input(DEFAULT_ESTIMATED_ITEM_SIZE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "estimatedItemSize" }] : /* istanbul ignore next */ []));
+        /**
+         * A loaded page of a larger collection, for data that arrives a page at a time.
+         *
+         * Takes the place of `data` while it is set. The list is as long as `totalCount`, so the
+         * scrollbar spans the whole collection while only the page is in memory. Indices the page
+         * does not cover render nothing; use `stateChange` to see which range is wanted and supply
+         * the page that covers it.
+         *
+         * Measured sizes are kept per index across pages while `totalCount` holds: the indices still
+         * mean the same records. A page with another `totalCount` is a different collection, and
+         * every size is measured again. A page that keeps the count but puts different records at
+         * the same indices keeps the sizes measured for the previous ones until those rows render.
+         *
+         * @example
+         * ```html
+         * <igx-virtual-scroll [dataWindow]="page" (stateChange)="load($event)" style="height: 400px">
+         *   <ng-template igxVirtualItem let-item>{{ item?.name }}</ng-template>
+         * </igx-virtual-scroll>
+         * ```
+         */
+        this.dataWindow = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataWindow" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden @internal
+         *
+         * Viewport size in pixels to render the first window against, for a list that is hidden
+         * until the change detection pass that reveals it and so has no size to measure in it.
+         *
+         * A hint for that first render: once the host has been laid out its own size takes over,
+         * zero included. Changing `orientation` begins an axis with no measurement of its own, so
+         * the hint applies again there. Negative, `NaN` and infinite values count as no hint.
+         *
+         * A workaround for the drop-down family, which reads and focuses items in the pass that
+         * opens the list. To be removed once those components render their list on reveal.
+         */
+        this.initialViewportSize = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialViewportSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Item template provided programmatically. Takes precedence over a content
+         * `ng-template[igxVirtualItem]` when both are provided.
+         *
+         * Items are measured by their border box, so margins accumulate as drift
+         * down the list. Use padding on the item, or a gap on a wrapper, instead.
+         *
+         * Only the current window is in the DOM, so assistive technology cannot
+         * infer an item's position from the markup. Templates that render a role
+         * with set semantics (`listitem`, `option`, `row`, ...) should map the
+         * context's `index` and `count` onto `aria-posinset` and `aria-setsize`.
+         */
+        this.itemTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region Public outputs
+        /** Emitted when the rendered virtual window changes. */
+        this.stateChange = output();
+        /**
+         * Emitted when the rendered window comes within a few items of the end of
+         * `data`. Also emitted on the first render, when the loaded items do not
+         * fill the viewport. Listen to this event to append more items
+         * (infinite / remote scrolling).
+         */
+        this.dataRequest = output();
+        //#endregion
+        //#region Derived state
+        this._isVertical = computed(() => this.orientation() === "vertical", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isVertical" }] : /* istanbul ignore next */ []));
+        this._resolvedTemplate = computed(() => this.itemTemplate() ?? this._itemDirective()?.template ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_resolvedTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * What the component has to work with, from whichever data input is in use. A page is
+         * trusted to be no longer than the collection it says it belongs to.
+         */
+        this._loaded = computed(() => {
+            const window = this.dataWindow();
+            if (!window) {
+                const items = this.data() ?? [];
+                return { items, startIndex: 0, totalCount: items.length, windowed: false };
+            }
+            const items = window.items ?? [];
+            const startIndex = toCount(window.startIndex);
+            return {
+                items,
+                startIndex,
+                totalCount: Math.max(toCount(window.totalCount), startIndex + items.length),
+                windowed: true,
+            };
+        }, { ...(ngDevMode ? { debugName: "_loaded" } : /* istanbul ignore next */ {}), equal: loadedEqual });
+        /** The measured size once the host has been laid out, the hint until then. */
+        this._effectiveViewportSize = computed(() => this._viewportSize() ?? toCount(this.initialViewportSize()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_effectiveViewportSize" }] : /* istanbul ignore next */ []));
+        /** The configured `overScan`, normalized to a non-negative integer. */
+        this._normalizedOverScan = computed(() => {
+            const value = Number(this.overScan());
+            return Number.isFinite(value)
+                ? Math.max(0, Math.floor(value))
+                : DEFAULT_OVER_SCAN;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_normalizedOverScan" }] : /* istanbul ignore next */ []));
+        /** The configured `estimatedItemSize`, normalized to a positive number. */
+        this._normalizedItemSize = computed(() => {
+            const value = Number(this.estimatedItemSize());
+            return Number.isFinite(value) && value > 0
+                ? value
+                : DEFAULT_ESTIMATED_ITEM_SIZE;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_normalizedItemSize" }] : /* istanbul ignore next */ []));
+        /**
+         * The window to render for the current scroll position and viewport. Empty
+         * until an item template is resolved, because nothing renders without one.
+         *
+         * The scroll position is read from the plain `_scrollPosition` field so
+         * that a recompute triggered by a measurement uses the live offset, while
+         * `_scrollTick` limits recomputes to scrolls that actually move the window.
+         */
+        this._visibleRange = computed(() => {
+            // Depend on the engine so the range recomputes whenever item sizes or
+            // the item count change.
+            this._engine.version();
+            this._scrollTick();
+            return this._resolvedTemplate()
+                ? this._engine.getVisibleRange(this._scrollPosition, this._effectiveViewportSize(), this._normalizedOverScan())
+                : EMPTY_RANGE;
+        }, { ...(ngDevMode ? { debugName: "_visibleRange" } : /* istanbul ignore next */ {}), equal: rangesEqual });
+        /** The track size, in DOM space. */
+        this._spaceSize = this._engine.domSize;
+        /** The part of the rendered range a page actually covers. */
+        this._loadedRange = computed(() => {
+            const { startIndex, endIndex } = this._visibleRange();
+            const { items, startIndex: from } = this._loaded();
+            return {
+                startIndex: Math.max(startIndex, from),
+                endIndex: Math.min(endIndex, from + items.length - 1),
+            };
+        }, { ...(ngDevMode ? { debugName: "_loadedRange" } : /* istanbul ignore next */ {}), equal: rangesEqual });
+        /** The item contexts for the currently rendered window, in render order. */
+        this._renderedItems = computed(() => {
+            const { startIndex, endIndex } = this._loadedRange();
+            const { items, startIndex: from, totalCount } = this._loaded();
+            const rendered = [];
+            for (let i = startIndex; i <= endIndex; i++) {
+                rendered.push(new IgxVsItemContext(items[i - from], i, totalCount));
+            }
+            return rendered;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_renderedItems" }] : /* istanbul ignore next */ []));
+        /**
+         * The `translateY` / `translateX` for the content wrapper. It is absolutely
+         * positioned at the origin of a `domSize` px track, so translating it to
+         * the first rendered item's offset puts that item at its virtual position.
+         */
+        this._contentTransform = computed(() => {
+            // The offsets below are plain reads of the engine's size state, so depend
+            // on its version explicitly.
+            this._engine.version();
+            const range = this._loadedRange();
+            // Under coordinate compression item positions are scaled down but item
+            // sizes are not. Without this cap the rendered range would overflow past
+            // domSize at the end of the list, pushing the last items beyond the
+            // maximum browser scroll coordinate.
+            const position = clamp(this._engine.getScrollOffsetForIndex(range.startIndex, this._effectiveViewportSize()), 0, this._engine.domSize() -
+                this._engine.getPhysicalRangeSize(range.startIndex, range.endIndex));
+            if (this._isVertical()) {
+                return `translateY(${position}px)`;
+            }
+            // In RTL the wrapper is anchored to the right edge of the track, so it
+            // translates towards the negative (leading) direction.
+            return `translateX(${this._ltr() ? position : -position}px)`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_contentTransform" }] : /* istanbul ignore next */ []));
+        // Sync the engine's item count with `data`, discarding the measurements
+        // of items whose identity changed.
+        effect(() => {
+            const loaded = this._loaded();
+            untracked(() => {
+                const previous = this._previousItems;
+                const retained = this._retainCount(previous, loaded);
+                this._previousItems = loaded;
+                this._engine.resize(loaded.totalCount, this._normalizedItemSize(), retained);
+                this._remeasureFrom(retained);
+                // New data (or a reset) clears any in-flight data request so the next
+                // approach to the end of the list can emit again.
+                this._hasPendingDataRequest = false;
+            });
+        });
+        // Re-apply the estimate when it changes but the item count does not,
+        // because `resize` is then a no-op.
+        effect(() => {
+            const size = this._normalizedItemSize();
+            untracked(() => this._engine.updateEstimatedSize(size));
+        });
+        // The scroll offset of the previous axis does not carry over.
+        effect(() => {
+            this.orientation();
+            untracked(() => {
+                if (!this._isBrowser) {
+                    return;
+                }
+                // The size of the previous axis says nothing about the new one.
+                this._viewportSize.set(null);
+                this._measureViewport();
+                this._scrollPosition = this._currentAxisScroll();
+                this._scrollTick.update((v) => v + 1);
+            });
+        });
+        afterNextRender(() => {
+            this._engine.initMaxBrowserSize(this._document);
+            this._measureViewport();
+            this._setupScrollListener();
+            this._setupViewportResizeObserver();
+        });
+        // Runs after the DOM reflects the current window, and re-runs whenever
+        // the window or the engine's sizes change.
+        afterRenderEffect({
+            read: () => {
+                // What is wanted and what is rendered change independently: the viewport can move
+                // into indices no page covers, and a page can arrive without the viewport moving.
+                this._visibleRange();
+                this._renderedItems();
+                this._engine.version();
+                untracked(() => {
+                    this._scheduleItemMeasurement();
+                    this._checkDataRequest();
+                    this._emitStateChange();
+                });
+            },
+        });
+    }
+    ngOnDestroy() {
+        this._teardown();
+    }
+    //#region Public API
+    /**
+     * Resolves when the virtual scroll has settled: the current render pass is
+     * complete, the item-size measurements it triggers are complete, and so
+     * are the renders those measurements schedule.
+     */
+    get layoutComplete() {
+        if (!this._layoutCompletePromise) {
+            this._layoutCompletePromise = this._resolveLayoutComplete();
+        }
+        return this._layoutCompletePromise;
+    }
+    /**
+     * Scrolls to the specified item index.
+     *
+     * Items outside the rendered window have only an estimated size, so the
+     * first jump can miss the target. The items at the landing point are then
+     * measured and the scroll position is corrected, until the offset is
+     * stable. The returned promise resolves on that final offset; callers that
+     * need only the first, approximate scroll can ignore it.
+     *
+     * @param index The index of the item to scroll to.
+     * @param options `block` / `inline` select the alignment (`start`,
+     * `center`, `end` or `nearest`); `behavior` selects `auto` or `smooth`.
+     */
+    async scrollToIndex(index, options) {
+        const clampedIndex = clamp(index, 0, Math.max(0, this._loaded().totalCount - 1));
+        // A newer call supersedes a correction loop that still runs for a
+        // previous call, for example under rapid, repeated calls.
+        const requestId = ++this._scrollRequestId;
+        let offset = this._getAlignedScrollOffset(clampedIndex, options);
+        await this._scrollAndWaitForEnd(offset, options?.behavior ?? "auto");
+        for (let i = 0; i < MAX_SCROLL_CORRECTION_PASSES; i++) {
+            await this.layoutComplete;
+            if (requestId !== this._scrollRequestId) {
+                return;
+            }
+            const corrected = this._getAlignedScrollOffset(clampedIndex, options);
+            if (Math.abs(corrected - offset) < SCROLL_OFFSET_EPSILON_PX) {
+                break;
+            }
+            offset = corrected;
+            await this._scrollAndWaitForEnd(offset, "auto");
+            if (requestId !== this._scrollRequestId) {
+                return;
+            }
+        }
+    }
+    //#endregion
+    //#region Scrolling
+    /**
+     * Re-reads the host's direction, which `dir` can change at runtime. `:dir()`
+     * is a selector match, so this costs no layout.
+     */
+    _syncDirection() {
+        const ltr = isLeftToRight(this._hostRef.nativeElement);
+        this._ltr.set(ltr);
+        return ltr;
+    }
+    /** The current real scroll position on the active axis, normalized for RTL. */
+    _currentAxisScroll() {
+        const host = this._hostRef.nativeElement;
+        if (this._isVertical()) {
+            return host.scrollTop;
+        }
+        // Standards-compliant browsers expose a negative scrollLeft in RTL.
+        return this._syncDirection() ? host.scrollLeft : -host.scrollLeft;
+    }
+    /** Applies a scroll offset to the active axis, accounting for RTL. */
+    _applyScroll(offset, behavior) {
+        const host = this._hostRef.nativeElement;
+        if (this._isVertical()) {
+            host.scrollTo({ top: offset, behavior });
+            return;
+        }
+        host.scrollTo({ left: this._syncDirection() ? offset : -offset, behavior });
+    }
+    /**
+     * The scroll offset that aligns `index` in the viewport according to
+     * `options`, from the engine's current size data. As more items are
+     * measured, the same input can give a different, more accurate result.
+     *
+     * `nearest` keeps the current offset for an item already in view and
+     * otherwise brings the item to its nearer edge, as native `scrollIntoView`
+     * does.
+     */
+    _getAlignedScrollOffset(index, options) {
+        const requested = this._isVertical()
+            ? (options?.block ?? "start")
+            : (options?.inline ?? options?.block ?? "start");
+        const current = this._currentAxisScroll();
+        const viewport = this._effectiveViewportSize();
+        const align = requested === "nearest"
+            ? this._engine.getNearestAlignment(index, current, viewport)
+            : requested;
+        if (align === null) {
+            return current;
+        }
+        return this._engine.getAlignedScrollOffset(index, viewport, align);
+    }
+    /**
+     * Applies a scroll offset to the active axis and waits for the scroll,
+     * instant or smooth, to settle.
+     *
+     * `scrollend` does not fire when the requested offset does not move the
+     * scroll position, so that case resolves immediately. The deadline covers
+     * an event that never arrives, for example when the element is detached
+     * mid-scroll.
+     */
+    _scrollAndWaitForEnd(offset, behavior) {
+        if (!this._isBrowser ||
+            Math.abs(this._currentAxisScroll() - offset) < SCROLL_OFFSET_EPSILON_PX) {
+            return Promise.resolve();
+        }
+        return this._withDeadline(SCROLL_END_TIMEOUT_MS, (abort) => {
+            // `scrollend` reports exactly when a scroll has settled. Safari before
+            // 18.2 does not have it, and the scroll-idle timer stands in there.
+            const settled = "onscrollend" in this._hostRef.nativeElement
+                ? this._waitForScrollEnd(abort)
+                : this._waitForScrollIdle(abort);
+            // Applied only after the listener is attached, so an instant scroll
+            // cannot settle before something watches for it.
+            this._applyScroll(offset, behavior);
+            return settled;
+        });
+    }
+    _waitForScrollEnd(abort) {
+        return this._promiseOutsideZone((resolve) => {
+            this._hostRef.nativeElement.addEventListener("scrollend", resolve, {
+                once: true,
+                signal: abort,
+            });
+        });
+    }
+    /**
+     * Resolves when no `scroll` event arrives for `SCROLL_IDLE_MS`: the closest
+     * replacement for `scrollend`. The first timer starts immediately, so a
+     * scroll that does not move still settles.
+     */
+    _waitForScrollIdle(abort) {
+        return this._promiseOutsideZone((resolve) => {
+            let id = setTimeout(resolve, SCROLL_IDLE_MS);
+            this._hostRef.nativeElement.addEventListener("scroll", () => {
+                clearTimeout(id);
+                id = setTimeout(resolve, SCROLL_IDLE_MS);
+            }, { passive: true, signal: abort });
+            onAbort(abort, () => clearTimeout(id));
+        });
+    }
+    //#endregion
+    //#region Async helpers
+    /** A promise whose subscription work stays out of the Angular zone. */
+    _promiseOutsideZone(subscribe) {
+        return this._zone.runOutsideAngular(() => new Promise((resolve) => subscribe(() => resolve())));
+    }
+    /**
+     * Resolves with `task` or with a deadline of `ms`, whichever comes first.
+     * The signal then tears down the other, so no live timer or dangling
+     * listener remains.
+     */
+    _withDeadline(ms, task) {
+        const controller = new AbortController();
+        return Promise.race([
+            task(controller.signal),
+            this._promiseOutsideZone((resolve) => {
+                const id = setTimeout(resolve, ms);
+                onAbort(controller.signal, () => clearTimeout(id));
+            }),
+        ]).finally(() => controller.abort());
+    }
+    /**
+     * Resolves on the next animation frame, or after `LAYOUT_FRAME_TIMEOUT_MS`
+     * when no frame arrives. A hidden tab or a detached element gets no frames
+     * and has no layout to wait for, so resolving early there is safe.
+     */
+    _nextFrame() {
+        if (!this._isBrowser) {
+            return Promise.resolve();
+        }
+        return this._withDeadline(LAYOUT_FRAME_TIMEOUT_MS, (abort) => this._promiseOutsideZone((resolve) => {
+            const id = requestAnimationFrame(resolve);
+            onAbort(abort, () => cancelAnimationFrame(id));
+        }));
+    }
+    /**
+     * Waits out the frames in which the item measurements land. Each
+     * measurement that changes a size bumps the engine's version and schedules
+     * another render, so the layout has settled once the version holds still
+     * across two consecutive frames.
+     */
+    async _resolveLayoutComplete() {
+        try {
+            let lastVersion = -1;
+            for (let i = 0; i < MAX_LAYOUT_SETTLE_PASSES; i++) {
+                await this._nextFrame();
+                const version = untracked(this._engine.version);
+                if (version === lastVersion) {
+                    break;
+                }
+                lastVersion = version;
+            }
+        }
+        finally {
+            // Cleared here, not after the loop, so a run that throws cannot leave
+            // the getter with a permanently rejected promise.
+            this._layoutCompletePromise = null;
+        }
+    }
+    //#endregion
+    //#region Measurement
+    _measureViewport() {
+        const host = this._hostRef.nativeElement;
+        // A host with no box is hidden or detached, not sized: its last measurement is kept so
+        // it renders in the pass that reveals it. A laid-out zero is a size like any other.
+        if (!host.isConnected || host.getClientRects().length === 0) {
+            return;
+        }
+        const size = this._isVertical() ? host.clientHeight : host.clientWidth;
+        if (size !== untracked(this._viewportSize)) {
+            this._viewportSize.set(size);
+        }
+    }
+    _setupViewportResizeObserver() {
+        this._viewportResizeObserver?.disconnect();
+        this._zone.runOutsideAngular(() => {
+            this._viewportResizeObserver = new ResizeObserver(() => this._measureViewport());
+            this._viewportResizeObserver.observe(this._hostRef.nativeElement);
+        });
+    }
+    _setupScrollListener() {
+        const host = this._hostRef.nativeElement;
+        if (this._onScroll) {
+            host.removeEventListener("scroll", this._onScroll);
+        }
+        this._zone.runOutsideAngular(() => {
+            this._onScroll = () => this._handleScroll();
+            host.addEventListener("scroll", this._onScroll, { passive: true });
+        });
+    }
+    /**
+     * Records the new scroll offset and invalidates the rendered window only
+     * when it actually moves. Without the guard, a scroll inside a single item
+     * would schedule a change detection pass for an identical result.
+     */
+    _handleScroll() {
+        this._scrollPosition = this._currentAxisScroll();
+        const next = this._engine.getVisibleRange(this._scrollPosition, untracked(this._effectiveViewportSize), untracked(this._normalizedOverScan));
+        if (!rangesEqual(next, untracked(this._visibleRange))) {
+            this._scrollTick.update((v) => v + 1);
+        }
+    }
+    _handleItemResize(entries) {
+        for (const entry of entries) {
+            const index = itemIndex(entry.target);
+            if (index < 0) {
+                continue;
+            }
+            const measured = this._isVertical()
+                ? (entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height)
+                : (entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width);
+            if (measured > 0) {
+                this._engine.measureItem(index, measured);
+            }
+        }
+    }
+    /**
+     * Synchronizes the item observer with the rendered window, applying only
+     * the difference. A newly observed element gets one initial measurement.
+     *
+     * An element whose `data-index` changed is re-registered, because
+     * `observe` on an already observed element is a no-op. `@for` tracks by
+     * slot and reuses the wrapper elements, so after a scroll the same element
+     * can host a different item at an identical size. The observer stays quiet
+     * about that and the new index would keep its estimated size.
+     */
+    _scheduleItemMeasurement() {
+        const content = this._contentDivRef()?.nativeElement;
+        if (!content) {
+            return;
+        }
+        const observer = this._getItemResizeObserver();
+        for (const element of [...this._observedItems]) {
+            if (element.parentNode !== content) {
+                observer.unobserve(element);
+                this._observedItems.delete(element);
+            }
+        }
+        for (const element of Array.from(content.children)) {
+            const index = itemIndex(element);
+            if (this._observedItems.has(element)) {
+                if (this._observedItemIndexes.get(element) === index) {
+                    continue;
+                }
+                observer.unobserve(element);
+            }
+            observer.observe(element);
+            this._observedItems.add(element);
+            this._observedItemIndexes.set(element, index);
+        }
+    }
+    /**
+     * Forgets the wrappers from `index` on, so the next pass registers them
+     * again: the resize dropped their sizes, and a wrapper whose size did not
+     * change reports nothing on its own.
+     */
+    _remeasureFrom(index) {
+        for (const element of this._observedItems) {
+            if ((this._observedItemIndexes.get(element) ?? -1) >= index) {
+                this._observedItemIndexes.delete(element);
+            }
+        }
+    }
+    _getItemResizeObserver() {
+        if (!this._itemResizeObserver) {
+            this._itemResizeObserver = this._zone.runOutsideAngular(() => new ResizeObserver((entries) => this._handleItemResize(entries)));
+        }
+        return this._itemResizeObserver;
+    }
+    //#endregion
+    //#region Events
+    /**
+     * The number of leading items that kept their identity across a `data`
+     * change: the index of the first item whose measured size no longer
+     * matches its rendered content. An append (the `dataRequest` flow) retains
+     * all items. A filter or a replacement retains only the unchanged prefix.
+     */
+    _firstChangedIndex(previous, current) {
+        const shared = Math.min(previous.length, current.length);
+        for (let i = 0; i < shared; i++) {
+            if (previous[i] !== current[i]) {
+                return i;
+            }
+        }
+        return shared;
+    }
+    /**
+     * How many leading items keep their measured size across a change. A page of the same
+     * collection keeps all of them - its indices still mean the same records. A page with
+     * another `totalCount` comes from a filtered or otherwise different collection, and
+     * switching inputs starts over, so neither keeps any.
+     */
+    _retainCount(previous, current) {
+        if (previous?.windowed !== current.windowed) {
+            return 0;
+        }
+        if (!current.windowed) {
+            return this._firstChangedIndex(previous.items, current.items);
+        }
+        return previous.totalCount === current.totalCount ? current.totalCount : 0;
+    }
+    /**
+     * Emits `stateChange`. Skipped when the window is empty or equal to the
+     * last reported one, because measurement passes re-render without a window
+     * change.
+     */
+    _emitStateChange() {
+        const { startIndex, endIndex } = untracked(this._visibleRange);
+        if (endIndex < startIndex) {
+            return;
+        }
+        const state = {
+            startIndex,
+            endIndex,
+            viewportSize: untracked(this._effectiveViewportSize),
+            totalSize: untracked(this._engine.totalSize),
+        };
+        if (statesEqual(this._lastEmittedState, state)) {
+            return;
+        }
+        this._lastEmittedState = { ...state };
+        this.stateChange.emit(state);
+    }
+    _checkDataRequest() {
+        const loaded = untracked(this._loaded);
+        // `dataRequest` asks for items to append, which a sized collection does not need. The
+        // count `data` had reached before says nothing once a window is bound, so forget it here.
+        if (loaded.windowed) {
+            this._lastDataRequestIndex = -1;
+            return;
+        }
+        if (this._hasPendingDataRequest) {
+            return;
+        }
+        const { endIndex } = untracked(this._visibleRange);
+        const total = loaded.items.length;
+        if (total === 0 || endIndex < total - DATA_REQUEST_THRESHOLD) {
+            return;
+        }
+        // Each `data` change clears `_hasPendingDataRequest`, including one that
+        // appends nothing. Without this second guard, a consumer whose source is
+        // exhausted, and that reassigns `data` in response to a request, would
+        // receive the same request on each reassignment.
+        if (this._lastDataRequestIndex === total) {
+            return;
+        }
+        this._hasPendingDataRequest = true;
+        this._lastDataRequestIndex = total;
+        this.dataRequest.emit({
+            startIndex: total,
+            count: Math.max(untracked(this._normalizedOverScan) * DATA_REQUEST_OVER_SCAN_FACTOR, DATA_REQUEST_MIN_COUNT),
+        });
+    }
+    //#endregion
+    _teardown() {
+        const host = this._hostRef.nativeElement;
+        if (this._onScroll) {
+            host.removeEventListener("scroll", this._onScroll);
+            this._onScroll = null;
+        }
+        this._viewportResizeObserver?.disconnect();
+        this._viewportResizeObserver = null;
+        this._itemResizeObserver?.disconnect();
+        this._itemResizeObserver = null;
+        this._observedItems.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxVirtualScrollComponent, isStandalone: true, selector: "igx-virtual-scroll", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, overScan: { classPropertyName: "overScan", publicName: "overScan", isSignal: true, isRequired: false, transformFunction: null }, estimatedItemSize: { classPropertyName: "estimatedItemSize", publicName: "estimatedItemSize", isSignal: true, isRequired: false, transformFunction: null }, dataWindow: { classPropertyName: "dataWindow", publicName: "dataWindow", isSignal: true, isRequired: false, transformFunction: null }, initialViewportSize: { classPropertyName: "initialViewportSize", publicName: "initialViewportSize", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", dataRequest: "dataRequest" }, host: { attributes: { "role": "list" }, properties: { "attr.data-orientation": "orientation()" }, classAttribute: "igx-virtual-scroll" }, queries: [{ propertyName: "_itemDirective", first: true, predicate: IgxVirtualItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_contentDivRef", first: true, predicate: ["contentDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"igx-virtual-scroll__track\"\n  role=\"presentation\"\n  [style.height.px]=\"_isVertical() ? _spaceSize() : null\"\n  [style.width.px]=\"!_isVertical() ? _spaceSize() : null\"\n>\n  <div\n    class=\"igx-virtual-scroll__content\"\n    #contentDiv\n    role=\"presentation\"\n    [style.transform]=\"_contentTransform()\"\n  >\n    @if (_resolvedTemplate(); as template) {\n      @for (context of _renderedItems(); track $index) {\n        <div\n          class=\"igx-virtual-item\"\n          role=\"presentation\"\n          [attr.data-index]=\"context.index\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"context\"\n          />\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["@layer ig.base{.igx-virtual-scroll{display:block;position:relative;overflow:auto}.igx-virtual-scroll[data-orientation=vertical]{overflow-y:auto;overflow-x:hidden}.igx-virtual-scroll[data-orientation=horizontal]{overflow-x:auto;overflow-y:hidden}.igx-virtual-scroll__track{position:relative;width:100%;min-height:100%}.igx-virtual-scroll[data-orientation=horizontal] .igx-virtual-scroll__track{height:100%;width:auto;min-height:unset}.igx-virtual-scroll__content{position:absolute;top:0;left:0;width:100%;will-change:transform;contain:layout style paint}.igx-virtual-scroll[data-orientation=horizontal] .igx-virtual-scroll__content{display:flex;flex-direction:row;height:100%;width:auto}.igx-virtual-scroll[data-orientation=horizontal]:dir(rtl) .igx-virtual-scroll__content{left:auto;right:0}.igx-virtual-scroll[data-orientation=horizontal] .igx-virtual-item{flex-shrink:0;height:100%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxVirtualScrollComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "igx-virtual-scroll", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
+                        class: "igx-virtual-scroll",
+                        role: "list",
+                        "[attr.data-orientation]": "orientation()",
+                    }, template: "<div\n  class=\"igx-virtual-scroll__track\"\n  role=\"presentation\"\n  [style.height.px]=\"_isVertical() ? _spaceSize() : null\"\n  [style.width.px]=\"!_isVertical() ? _spaceSize() : null\"\n>\n  <div\n    class=\"igx-virtual-scroll__content\"\n    #contentDiv\n    role=\"presentation\"\n    [style.transform]=\"_contentTransform()\"\n  >\n    @if (_resolvedTemplate(); as template) {\n      @for (context of _renderedItems(); track $index) {\n        <div\n          class=\"igx-virtual-item\"\n          role=\"presentation\"\n          [attr.data-index]=\"context.index\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"context\"\n          />\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["@layer ig.base{.igx-virtual-scroll{display:block;position:relative;overflow:auto}.igx-virtual-scroll[data-orientation=vertical]{overflow-y:auto;overflow-x:hidden}.igx-virtual-scroll[data-orientation=horizontal]{overflow-x:auto;overflow-y:hidden}.igx-virtual-scroll__track{position:relative;width:100%;min-height:100%}.igx-virtual-scroll[data-orientation=horizontal] .igx-virtual-scroll__track{height:100%;width:auto;min-height:unset}.igx-virtual-scroll__content{position:absolute;top:0;left:0;width:100%;will-change:transform;contain:layout style paint}.igx-virtual-scroll[data-orientation=horizontal] .igx-virtual-scroll__content{display:flex;flex-direction:row;height:100%;width:auto}.igx-virtual-scroll[data-orientation=horizontal]:dir(rtl) .igx-virtual-scroll__content{left:auto;right:0}.igx-virtual-scroll[data-orientation=horizontal] .igx-virtual-item{flex-shrink:0;height:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _itemDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IgxVirtualItemDirective), { isSignal: true }] }], _contentDivRef: [{ type: i0.ViewChild, args: ["contentDiv", { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], overScan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overScan", required: false }] }], estimatedItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "estimatedItemSize", required: false }] }], dataWindow: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataWindow", required: false }] }], initialViewportSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialViewportSize", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], dataRequest: [{ type: i0.Output, args: ["dataRequest"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IgxVirtualItemDirective, IgxVirtualScrollComponent, IgxVsItemContext };
+//# sourceMappingURL=igniteui-angular-virtual-scroll.mjs.map