igniteui-angular 22.2.0-rc.1 → 22.2.0

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

@@ -1,6 +1,6 @@
 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 { signal, computed, inject, TemplateRef, Directive, ViewContainerRef, input, ElementRef, NgZone, DOCUMENT, PLATFORM_ID, contentChild, viewChild, 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. */
@@ -29,51 +29,78 @@ function probeMaxBrowserSize(doc) {
     _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;
-}
+/** The item holds the estimate. */
+const UNMEASURED = 0;
+/** The item was measured under an older estimate. */
+const MEASURED = 1;
+/** The item was measured under the current estimate. */
+const SAMPLED = 2;
 /**
  * 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).
+ *
+ * The tree holds only the measured sizes and the number of measured items.
+ * Each unmeasured item counts as `estimate`, so an estimate change is O(1).
  */
 class SizeTree {
-    constructor(sizes, tree, total, measured) {
-        this.length = sizes.length;
+    /** Builds the tree in one O(N) pass. Without `states`, no item is measured. */
+    constructor(length, estimate, sizes = new Float64Array(length), states = new Uint8Array(length)) {
+        this._measuredCount = 0;
+        this._measuredTotal = 0;
+        /** Count and size sum of the `SAMPLED` items. */
+        this._sampleCount = 0;
+        this._sampleTotal = 0;
+        this.length = length;
+        this.estimate = estimate;
         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);
+        this._states = states;
+        this._sums = new Float64Array(length + 1);
+        this._counts = new Int32Array(length + 1);
+        this._topBit = length > 0 ? 1 << (31 - Math.clz32(length)) : 0;
+        for (let i = 1; i <= length; i++) {
+            const state = states[i - 1];
+            if (state !== UNMEASURED) {
+                const size = sizes[i - 1];
+                this._sums[i] += size;
+                this._counts[i]++;
+                this._measuredCount++;
+                this._measuredTotal += size;
+                if (state === SAMPLED) {
+                    this._sampleCount++;
+                    this._sampleTotal += size;
+                }
+            }
+            const parent = i + (i & -i);
+            if (parent <= length) {
+                this._sums[parent] += this._sums[i];
+                this._counts[parent] += this._counts[i];
+            }
+        }
     }
     /** Total size of all items. O(1). */
     get totalSize() {
-        return this._total;
+        return this.totalSizeAt(this.estimate);
+    }
+    /** Total size of all items if unmeasured ones took `estimate`. O(1). */
+    totalSizeAt(estimate) {
+        return this._measuredTotal + (this.length - this._measuredCount) * estimate;
+    }
+    /** The number of measured items. O(1). */
+    get measuredCount() {
+        return this._measuredCount;
+    }
+    /** The average size of the `SAMPLED` items, or `0` if there are none. */
+    get sampleAverage() {
+        return this._sampleCount > 0 ? this._sampleTotal / this._sampleCount : 0;
+    }
+    /** Whether each item before `index` is measured. O(log N). */
+    isMeasuredBefore(index) {
+        let count = 0;
+        for (let j = index; j > 0; j -= j & -j) {
+            count += this._counts[j];
+        }
+        return count === index;
     }
     /**
      * Prefix sum of items [0, i): the virtual scroll offset at the leading
@@ -81,69 +108,71 @@ class SizeTree {
      */
     prefixSum(i) {
         let sum = 0;
+        let count = 0;
         for (let j = i; j > 0; j -= j & -j) {
-            sum += this._tree[j];
+            sum += this._sums[j];
+            count += this._counts[j];
         }
-        return sum;
+        return sum + (i - count) * this.estimate;
     }
     /**
-     * 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).
+     * Sets the size of the item at a 0-based index and marks it `SAMPLED`.
+     * Returns true when the size changed. O(log N).
      */
-    update(index, newSize) {
+    update(index, size) {
         if (index < 0 || index >= this.length) {
             return false;
         }
-        const old = this._sizes[index];
-        this._measured[index] = 1;
-        if (old === newSize) {
-            return false;
+        const state = this._states[index];
+        const isNew = state === UNMEASURED;
+        const old = isNew ? 0 : this._sizes[index];
+        const delta = size - old;
+        this._states[index] = SAMPLED;
+        this._sizes[index] = size;
+        this._measuredTotal += delta;
+        this._sampleTotal += state === SAMPLED ? delta : size;
+        if (state !== SAMPLED) {
+            this._sampleCount++;
         }
-        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;
+        if (isNew) {
+            this._measuredCount++;
         }
-        return true;
+        if (isNew || delta !== 0) {
+            for (let i = index + 1; i <= this.length; i += i & -i) {
+                this._sums[i] += delta;
+                if (isNew) {
+                    this._counts[i]++;
+                }
+            }
+        }
+        return size !== (isNew ? this.estimate : old);
     }
     /**
-     * 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.
+     * Returns a new tree of `newLength` items. Measured sizes are kept up to
+     * `min(this.length, newLength, retainCount)`, and the other items are
+     * unmeasured. Pass a `retainCount` below the item count when the data
+     * behind those indices changed identity. O(N).
      */
-    cloneResized(newLength, fillSize, retainCount = newLength) {
-        const sizes = new Float64Array(newLength).fill(fillSize);
-        const measured = new Uint8Array(newLength);
+    cloneResized(newLength, retainCount = newLength) {
         const retained = Math.max(0, Math.min(this.length, newLength, retainCount));
+        const sizes = new Float64Array(newLength);
+        const states = new Uint8Array(newLength);
         sizes.set(this._sizes.subarray(0, retained));
-        measured.set(this._measured.subarray(0, retained));
-        return SizeTree._build(sizes, measured);
+        states.set(this._states.subarray(0, retained));
+        return new SizeTree(newLength, this.estimate, sizes, states);
     }
     /**
-     * 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.
+     * Starts a new sample: `sampleAverage` then counts only the items measured
+     * after this call. O(N).
      */
-    applyEstimate(estimatedSize) {
-        let changed = false;
+    startSample() {
         for (let i = 0; i < this.length; i++) {
-            if (!this._measured[i] && this._sizes[i] !== estimatedSize) {
-                this._sizes[i] = estimatedSize;
-                changed = true;
+            if (this._states[i] === SAMPLED) {
+                this._states[i] = MEASURED;
             }
         }
-        if (!changed) {
-            return false;
-        }
-        this._tree.fill(0);
-        this._total = buildTree(this._tree, this._sizes);
-        return true;
+        this._sampleCount = 0;
+        this._sampleTotal = 0;
     }
     /**
      * Returns the 0-based index of the item containing the scroll `offset`:
@@ -157,9 +186,14 @@ class SizeTree {
         let remaining = offset;
         for (let bit = this._topBit; bit > 0; bit >>= 1) {
             const next = index + bit;
-            if (next <= this.length && this._tree[next] <= remaining) {
+            if (next > this.length) {
+                continue;
+            }
+            // Node `next` covers the `bit` items after `index`.
+            const size = this._sums[next] + (bit - this._counts[next]) * this.estimate;
+            if (size <= remaining) {
                 index = next;
-                remaining -= this._tree[index];
+                remaining -= size;
             }
         }
         return Math.min(this.length - 1, index);
@@ -184,6 +218,10 @@ class VirtualScrollEngine {
     constructor() {
         this._maxBrowserSize = Number.POSITIVE_INFINITY;
         this._tree = null;
+        /** The estimate last given to `resize` or `updateEstimatedSize`. */
+        this._configuredEstimate = Number.NaN;
+        /** Whether `adaptEstimate` has applied a measured average. */
+        this._hasAdaptedEstimate = false;
         /** Bumped on every structural change: resize, measurement or estimate. */
         this._version = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
@@ -222,18 +260,24 @@ class VirtualScrollEngine {
     }
     /**
      * 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.
+     * `retainCount` are kept, and the other items are unmeasured. 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.
+     *
+     * Unmeasured items take `estimatedSize`, or keep the adapted average while
+     * `estimatedSize` is unchanged.
      */
     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._tree =
+            this._tree?.cloneResized(length, retainCount) ??
+                new SizeTree(length, estimatedSize);
+        if (this._configureEstimate(estimatedSize)) {
+            this._tree.estimate = estimatedSize;
+        }
         this._invalidate();
     }
     /** Records the measured DOM size for a single item. */
@@ -248,10 +292,40 @@ class VirtualScrollEngine {
      * because `resize` is then a no-op.
      */
     updateEstimatedSize(estimatedSize) {
-        if (this._tree?.applyEstimate(estimatedSize)) {
-            this._invalidate();
+        if (this._configureEstimate(estimatedSize)) {
+            this._applyEstimate(estimatedSize);
         }
     }
+    /**
+     * Sets the unmeasured estimate to the average size measured since the
+     * estimate was configured; older sizes may predate a density change. After
+     * the first call, applies only while every item before `windowStart` is
+     * measured and the list stays uncompressed, so rendered items cannot shift.
+     */
+    adaptEstimate(windowStart) {
+        const tree = this._tree;
+        if (!tree?.sampleAverage) {
+            return;
+        }
+        // Compressed before or after, the total sets the scroll ratio: a new average moves every item.
+        const largerTotal = tree.totalSizeAt(Math.max(tree.estimate, tree.sampleAverage));
+        if (this._hasAdaptedEstimate &&
+            (largerTotal > this._maxBrowserSize || !tree.isMeasuredBefore(windowStart))) {
+            return;
+        }
+        this._hasAdaptedEstimate = true;
+        this._applyEstimate(tree.sampleAverage);
+    }
+    /** Drops the measured sizes and the adapted estimate, keeping the item count. */
+    clearSizes() {
+        const tree = this._tree;
+        if (!tree || (tree.measuredCount === 0 && !this._hasAdaptedEstimate)) {
+            return;
+        }
+        this._tree = new SizeTree(tree.length, this._configuredEstimate);
+        this._hasAdaptedEstimate = false;
+        this._invalidate();
+    }
     /**
      * Returns the DOM scroll offset in px that puts the item at `index` at the
      * leading edge of a `viewportSize` px viewport.
@@ -285,29 +359,24 @@ class VirtualScrollEngine {
         else if (align === "end") {
             offset -= slack;
         }
-        return clamp(this._toDom(offset, viewportSize), 0, Math.max(0, this.domSize() - viewportSize));
+        return clamp(this._toDom(offset, viewportSize), 0, this._maxDomOffset(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.
+     * Returns the DOM scroll offset that brings the item at `index` into view
+     * as `position` asks. `nearest` follows native `scrollIntoView`: an item in
+     * view, or one that covers the viewport, keeps `scrollPosition`, and any
+     * other item scrolls the smallest distance to an edge alignment.
+     *
+     * Example: 50px items in a 300px viewport at offset 0. Item 10 spans
+     * 500-550, so `nearest` returns 250 (end aligned) and `start` returns 500.
      */
-    getNearestAlignment(index, scrollPosition, viewportSize) {
-        const bounds = this._itemBounds(index);
-        if (!bounds) {
-            return null;
+    resolveScrollOffset(index, scrollPosition, viewportSize, position) {
+        if (position === "nearest") {
+            const start = this.getAlignedScrollOffset(index, viewportSize, "start");
+            const end = this.getAlignedScrollOffset(index, viewportSize, "end");
+            return clamp(scrollPosition, Math.min(start, end), Math.max(start, end));
         }
-        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";
+        return this.getAlignedScrollOffset(index, viewportSize, position === "center" || position === "end" ? position : "start");
     }
     /** Returns the visible and over-scanned item range for the given scroll state. */
     getVisibleRange(scrollPosition, viewportSize, overScan) {
@@ -349,6 +418,25 @@ class VirtualScrollEngine {
         const clamped = clamp(index, 0, this._tree.length - 1);
         return [this._tree.prefixSum(clamped), this._tree.prefixSum(clamped + 1)];
     }
+    /**
+     * Records a changed configured estimate and starts a new sample. Returns
+     * false for an unchanged one, which keeps the adapted average.
+     */
+    _configureEstimate(estimatedSize) {
+        if (estimatedSize === this._configuredEstimate) {
+            return false;
+        }
+        this._configuredEstimate = estimatedSize;
+        this._tree?.startSample();
+        return true;
+    }
+    _applyEstimate(estimatedSize) {
+        if (!this._tree || this._tree.estimate === estimatedSize) {
+            return;
+        }
+        this._tree.estimate = estimatedSize;
+        this._invalidate();
+    }
     _invalidate() {
         this._version.update((v) => v + 1);
     }
@@ -366,7 +454,14 @@ class VirtualScrollEngine {
      */
     _toVirtual(domOffset, viewportSize) {
         const [virtualRange, domRange] = this._scrollRanges(viewportSize);
-        return (Math.max(0, domOffset) * virtualRange) / domRange;
+        // A shrunken track's scroll event lags a frame, so clamp the stale offset now.
+        // E.g. 10 x 50px items, 300px viewport, stale 1000px: items 4-9, not 9 alone.
+        const reachable = clamp(domOffset, 0, this._maxDomOffset(viewportSize));
+        return (reachable * virtualRange) / domRange;
+    }
+    /** The largest DOM scroll offset for a `viewportSize` px viewport. */
+    _maxDomOffset(viewportSize) {
+        return Math.max(0, this.domSize() - viewportSize);
     }
     /**
      * The virtual and DOM scroll ranges to map between; the identity while the
@@ -435,14 +530,219 @@ 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxVirtualItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxVirtualItemDirective, decorators: [{
             type: Directive,
             args: [{ selector: "ng-template[igxVirtualItem]" }]
         }] });
 
+/**
+ * Weights for choosing the views that stay in place. A recycled view needs a
+ * new layout anyway, so kept views move only when fewer than half the recycled
+ * ones.
+ */
+const KEPT_WEIGHT = 2;
+const RECYCLED_WEIGHT = 1;
+/**
+ * Marks the entries of the increasing subsequence of `values` with the largest
+ * total weight. The values are distinct integers in `[0, size)`, or negative
+ * for the entries to skip. O(n log size).
+ */
+function heaviestIncreasingSubsequence(values, weights, size) {
+    // Fenwick tree over values: each node holds the heaviest weight ending in
+    // its range, and that entry.
+    const heaviest = new Int32Array(size + 1);
+    const endsAt = new Int32Array(size + 1);
+    const previous = new Int32Array(values.length);
+    const marked = new Uint8Array(values.length);
+    let best = 0;
+    let last = -1;
+    for (let i = 0; i < values.length; i++) {
+        if (values[i] < 0) {
+            continue;
+        }
+        let total = 0;
+        let before = -1;
+        for (let node = values[i]; node > 0; node -= node & -node) {
+            if (heaviest[node] > total) {
+                total = heaviest[node];
+                before = endsAt[node];
+            }
+        }
+        total += weights[i];
+        previous[i] = before;
+        for (let node = values[i] + 1; node <= size; node += node & -node) {
+            if (total > heaviest[node]) {
+                heaviest[node] = total;
+                endsAt[node] = i;
+            }
+        }
+        if (total > best) {
+            best = total;
+            last = i;
+        }
+    }
+    for (let i = last; i >= 0; i = previous[i]) {
+        marked[i] = 1;
+    }
+    return marked;
+}
+/**
+ * @hidden @internal
+ *
+ * Like `@for`, but hands the view of a leaving key to an entering key instead
+ * of destroying and recreating it, which avoids DOM churn on each scroll step.
+ * Reused views keep DOM state the template does not bind.
+ *
+ * ```
+ * keys   0 1 2 3            2 3 4 5      a scroll by two items
+ * views  A B C D    ->      C D A B      C, D kept; A, B recycled
+ * ```
+ *
+ * Untaken views are destroyed, not pooled: content queries still report
+ * components in detached views.
+ */
+class IgxVsRecycleDirective {
+    constructor() {
+        this._container = inject(ViewContainerRef);
+        this._template = inject(TemplateRef);
+        /** The items to render, in order. */
+        this.igxVsRecycleOf = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "igxVsRecycleOf" }] : /* istanbul ignore next */ []));
+        /** Returns the key of an item. */
+        this.igxVsRecycleKey = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "igxVsRecycleKey" }] : /* istanbul ignore next */ []));
+        /** The rendered views and their keys, in DOM order. */
+        this._views = [];
+        this._keys = [];
+    }
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    ngOnChanges() {
+        const items = this.igxVsRecycleOf();
+        const keys = items.map(this.igxVsRecycleKey());
+        this._views = this._reconcile(items, keys);
+        this._keys = keys;
+    }
+    /**
+     * Gives each key a view, orders the views by key, and sets their items.
+     *
+     * 1. A staying key keeps its view.
+     * 2. Other keys take the leftover views in DOM order, so a full replacement
+     *    moves no DOM. Views are created when those run out; untaken ones are
+     *    destroyed.
+     * 3. The heaviest subsequence of reused views that keeps its order stays put
+     *    (see `KEPT_WEIGHT`). The focused view outweighs all others, so it keeps
+     *    focus. Each other view moves in front of its successor.
+     */
+    _reconcile(items, keys) {
+        const oldViews = this._views;
+        // Hydration hands out the server-rendered DOM in creation order.
+        if (oldViews.length === 0) {
+            return items.map((item) => this._container.createEmbeddedView(this._template, { $implicit: item }));
+        }
+        const count = keys.length;
+        const focused = this._focusedPosition();
+        // The old DOM position (-1 for a new view) and the weight of the view at
+        // each new position.
+        const from = new Int32Array(count).fill(-1);
+        const weights = new Int32Array(count);
+        const claimed = new Uint8Array(oldViews.length);
+        // The first old position of each key, so duplicate keys keep one view.
+        const oldPositions = new Map();
+        for (let i = this._keys.length - 1; i >= 0; i--) {
+            oldPositions.set(this._keys[i], i);
+        }
+        for (let i = 0; i < count; i++) {
+            const position = oldPositions.get(keys[i]);
+            if (position === undefined || claimed[position]) {
+                continue;
+            }
+            claimed[position] = 1;
+            from[i] = position;
+            weights[i] = position === focused ? KEPT_WEIGHT * count : KEPT_WEIGHT;
+        }
+        let spare = 0;
+        for (let i = 0; i < count && spare < oldViews.length; i++) {
+            if (from[i] >= 0) {
+                continue;
+            }
+            while (spare < oldViews.length && claimed[spare]) {
+                spare++;
+            }
+            if (spare < oldViews.length) {
+                claimed[spare] = 1;
+                from[i] = spare;
+                weights[i] = RECYCLED_WEIGHT;
+            }
+        }
+        oldViews.forEach((view, position) => {
+            if (!claimed[position]) {
+                view.destroy();
+            }
+        });
+        const stable = heaviestIncreasingSubsequence(from, weights, oldViews.length);
+        const views = new Array(count);
+        let next;
+        // Walk backwards, so the successor of each view is already in place.
+        for (let i = count - 1; i >= 0; i--) {
+            let view = from[i] < 0 ? undefined : oldViews[from[i]];
+            if (view) {
+                if (!stable[i]) {
+                    this._moveBefore(view, next);
+                }
+                view.context.$implicit = items[i];
+            }
+            else {
+                view = this._container.createEmbeddedView(this._template, { $implicit: items[i] }, next ? this._container.indexOf(next) : undefined);
+            }
+            views[i] = view;
+            next = view;
+        }
+        return views;
+    }
+    /** Moves `view` in front of `next`, or to the end without one. */
+    _moveBefore(view, next) {
+        const current = this._container.indexOf(view);
+        const target = next
+            ? this._container.indexOf(next)
+            : this._container.length;
+        if (current === target - 1) {
+            return;
+        }
+        // `move` removes the view before it inserts it, which shifts the later
+        // indices down by one.
+        this._container.move(view, current < target ? target - 1 : target);
+    }
+    /** The position in `_views` of the view that holds the focus, or -1. */
+    _focusedPosition() {
+        const parent = this._container.element.nativeElement.parentNode;
+        // Angular's server DOM has no getRootNode, and nothing has focus there.
+        if (typeof parent?.getRootNode !== "function") {
+            return -1;
+        }
+        // The root, not the document: the list can render in a shadow root.
+        const root = parent.getRootNode();
+        let node = root.activeElement ?? null;
+        while (node && node.parentNode !== parent) {
+            node = node.parentNode;
+        }
+        if (!node) {
+            return -1;
+        }
+        return this._views.findIndex((view) => view.rootNodes.includes(node));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxVsRecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: IgxVsRecycleDirective, isStandalone: true, selector: "[igxVsRecycle][igxVsRecycleOf]", inputs: { igxVsRecycleOf: { classPropertyName: "igxVsRecycleOf", publicName: "igxVsRecycleOf", isSignal: true, isRequired: true, transformFunction: null }, igxVsRecycleKey: { classPropertyName: "igxVsRecycleKey", publicName: "igxVsRecycleKey", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxVsRecycleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[igxVsRecycle][igxVsRecycleOf]" }]
+        }], propDecorators: { igxVsRecycleOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "igxVsRecycleOf", required: true }] }], igxVsRecycleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "igxVsRecycleKey", required: true }] }] } });
+
 /** Defaults for the inputs, also used as the fallback for invalid values. */
 const DEFAULT_OVER_SCAN = 2;
 const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
@@ -587,6 +887,7 @@ class IgxVirtualScrollComponent {
         /**
          * 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.
+         * Unmeasured items then take the average measured size.
          * Default is 50 pixels.
          * Setting this to a value close to the actual average item size can improve initial rendering performance.
          */
@@ -640,9 +941,28 @@ class IgxVirtualScrollComponent {
          * 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`.
+         *
+         * Item elements are recycled: bind all item state and write user changes
+         * back to the item, or unbound DOM state (e.g. a toggled checkbox) shows on
+         * another item. See `keyFunction`.
          */
         this.itemTemplate = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Returns a unique key from an item and its index in the whole collection. An item keeps its
+         * element while its key stays rendered. Defaults to the index; set it when items move within
+         * `data` (sort, insert, remove).
+         *
+         * @example
+         * ```html
+         * <igx-virtual-scroll [data]="people" [keyFunction]="byId">...</igx-virtual-scroll>
+         * ```
+         * ```ts
+         * byId = (person: Person) => person.id;
+         * ```
+         */
+        this.keyFunction = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyFunction" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region Public outputs
         /** Emitted when the rendered virtual window changes. */
@@ -726,6 +1046,14 @@ class IgxVirtualScrollComponent {
                 endIndex: Math.min(endIndex, from + items.length - 1),
             };
         }, { ...(ngDevMode ? { debugName: "_loadedRange" } : /* istanbul ignore next */ {}), equal: rangesEqual });
+        /** The key of each rendered item: from `keyFunction`, or its index. */
+        this._itemKey = computed(() => {
+            const keyOf = this.keyFunction();
+            return keyOf
+                ? (context) => keyOf(context.$implicit, context.index)
+                : (context) => context.index;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_itemKey" }] : /* istanbul ignore next */ []));
         /** The item contexts for the currently rendered window, in render order. */
         this._renderedItems = computed(() => {
             const { startIndex, endIndex } = this._loadedRange();
@@ -768,6 +1096,10 @@ class IgxVirtualScrollComponent {
             untracked(() => {
                 const previous = this._previousItems;
                 const retained = this._retainCount(previous, loaded);
+                // Data that grew past the last request answered it, so a later reset may ask again.
+                if (loaded.items.length > this._lastDataRequestIndex) {
+                    this._lastDataRequestIndex = -1;
+                }
                 this._previousItems = loaded;
                 this._engine.resize(loaded.totalCount, this._normalizedItemSize(), retained);
                 this._remeasureFrom(retained);
@@ -782,15 +1114,16 @@ class IgxVirtualScrollComponent {
             const size = this._normalizedItemSize();
             untracked(() => this._engine.updateEstimatedSize(size));
         });
-        // The scroll offset of the previous axis does not carry over.
+        // The sizes and scroll offset of the previous axis do 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._engine.clearSizes();
+                this._remeasureFrom(0);
                 this._measureViewport();
                 this._scrollPosition = this._currentAxisScroll();
                 this._scrollTick.update((v) => v + 1);
@@ -841,11 +1174,13 @@ class IgxVirtualScrollComponent {
      * 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.
+     * need only the first, approximate scroll can ignore it, because the first
+     * jump is applied before the call returns.
      *
      * @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`.
+     * `center`, `end` or `nearest`, which scrolls the smallest distance that
+     * brings the item into view); `behavior` selects `auto` or `smooth`.
      */
     async scrollToIndex(index, options) {
         const clampedIndex = clamp(index, 0, Math.max(0, this._loaded().totalCount - 1));
@@ -903,24 +1238,12 @@ class IgxVirtualScrollComponent {
      * 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()
+        const position = 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);
+        return this._engine.resolveScrollOffset(index, this._currentAxisScroll(), this._effectiveViewportSize(), position);
     }
     /**
      * Applies a scroll offset to the active axis and waits for the scroll,
@@ -932,8 +1255,13 @@ class IgxVirtualScrollComponent {
      * mid-scroll.
      */
     _scrollAndWaitForEnd(offset, behavior) {
-        if (!this._isBrowser ||
-            Math.abs(this._currentAxisScroll() - offset) < SCROLL_OFFSET_EPSILON_PX) {
+        if (!this._isBrowser) {
+            return Promise.resolve();
+        }
+        if (Math.abs(this._currentAxisScroll() - offset) < SCROLL_OFFSET_EPSILON_PX) {
+            // Already there, but the window may lag: a re-attached host got there without a scroll
+            // event, and the event for a scroll that was just applied may still be pending.
+            this._syncScrollPosition();
             return Promise.resolve();
         }
         return this._withDeadline(SCROLL_END_TIMEOUT_MS, (abort) => {
@@ -1032,11 +1360,16 @@ class IgxVirtualScrollComponent {
     }
     //#endregion
     //#region Measurement
+    /** Whether the host has a box, as opposed to being hidden or detached. */
+    _isLaidOut() {
+        const host = this._hostRef.nativeElement;
+        return host.isConnected && host.getClientRects().length > 0;
+    }
     _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) {
+        if (!this._isLaidOut()) {
             return;
         }
         const size = this._isVertical() ? host.clientHeight : host.clientWidth;
@@ -1047,7 +1380,12 @@ class IgxVirtualScrollComponent {
     _setupViewportResizeObserver() {
         this._viewportResizeObserver?.disconnect();
         this._zone.runOutsideAngular(() => {
-            this._viewportResizeObserver = new ResizeObserver(() => this._measureViewport());
+            this._viewportResizeObserver = new ResizeObserver(() => {
+                this._measureViewport();
+                // Detaching the host resets its scroll position without a scroll event. Following it
+                // while detached renders the window the host comes back with, so it does not show blank.
+                this._syncScrollPosition();
+            });
             this._viewportResizeObserver.observe(this._hostRef.nativeElement);
         });
     }
@@ -1073,6 +1411,18 @@ class IgxVirtualScrollComponent {
             this._scrollTick.update((v) => v + 1);
         }
     }
+    /**
+     * Re-reads the scroll offset outside a scroll event. Detaching the host resets the offset
+     * without one, and the event for a scroll that was just applied may not have arrived yet.
+     */
+    _syncScrollPosition() {
+        // A hidden host reads 0 but gets its offset back when it is shown again. A detached one
+        // reads the 0 it is re-attached with, so it is not skipped.
+        if (this._hostRef.nativeElement.isConnected && !this._isLaidOut()) {
+            return;
+        }
+        this._handleScroll();
+    }
     _handleItemResize(entries) {
         for (const entry of entries) {
             const index = itemIndex(entry.target);
@@ -1086,16 +1436,18 @@ class IgxVirtualScrollComponent {
                 this._engine.measureItem(index, measured);
             }
         }
+        // Unmeasured items follow the measured average.
+        this._engine.adaptEstimate(untracked(this._loadedRange).startIndex);
     }
     /**
      * 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.
+     * `observe` on an already observed element is a no-op. The wrapper elements
+     * are recycled, 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;
@@ -1124,7 +1476,7 @@ class IgxVirtualScrollComponent {
     }
     /**
      * 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
+     * again: the engine dropped their sizes, and a wrapper whose size did not
      * change reports nothing on its own.
      */
     _remeasureFrom(index) {
@@ -1237,17 +1589,17 @@ class IgxVirtualScrollComponent {
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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 }, keyFunction: { classPropertyName: "keyFunction", publicName: "keyFunction", 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      <div\n        *igxVsRecycle=\"let context of _renderedItems(); key: _itemKey()\"\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  </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"] }, { kind: "directive", type: IgxVsRecycleDirective, selector: "[igxVsRecycle][igxVsRecycleOf]", inputs: ["igxVsRecycleOf", "igxVsRecycleKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxVirtualScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxVirtualScrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: "igx-virtual-scroll", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
+            args: [{ selector: "igx-virtual-scroll", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, IgxVsRecycleDirective], 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"] }] } });
+                    }, 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      <div\n        *igxVsRecycle=\"let context of _renderedItems(); key: _itemKey()\"\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  </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 }] }], keyFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyFunction", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], dataRequest: [{ type: i0.Output, args: ["dataRequest"] }] } });
 
 /**
  * Generated bundle index. Do not edit.